/* ═══════════════════════════════════════════════════════════════
   Absolute Spray Foam — theme layer for Presento
   assets/css/spray-foam.css   →   підключати ПІСЛЯ assets/css/style.css

   Ідея палітри: шкала тепловізора. Синій і зелений бренду — це точки
   на ній ("холодно" і перехід), тепла зона дописана. Градієнт виступає
   рівно в п'яти місцях і більше ніде.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. ТОКЕНИ ─────────────────────────────────────────────── */

:root {
  --spf-ink:       #0B1B2B;
  --spf-ink-soft:  #45596B;
  --spf-blue:      #00598E;
  --spf-blue-deep: #003A5E;
  --spf-mist:      #EAF3F9;

  /* Робочий зелений темніший за #04BD64: білий текст дає 6.4:1 замість 2.2:1 */
  --spf-go:        #026F3A;
  --spf-go-deep:   #01512A;
  --spf-go-bright: #04BD64;   /* тільки на темному тлі */

  --spf-warm:      #E8730C;
  --spf-hot:       #D6410E;

  --spf-line:      #DCE6ED;
  --spf-surface:   #FFFFFF;

  --spf-thermal: linear-gradient(90deg,
      #00598E 0%, #0E7C7B 30%, #04BD64 52%, #E8730C 80%, #D6410E 100%);

  --spf-r:    10px;
  --spf-r-lg: 16px;
  --spf-sh:    0 1px 2px rgba(11,27,43,.06), 0 4px 12px rgba(11,27,43,.06);
  --spf-sh-lg: 0 2px 4px rgba(11,27,43,.07), 0 18px 40px rgba(11,27,43,.13);
  --spf-ease: cubic-bezier(.22,.61,.36,1);
}

/* ─── 2. ТИПОГРАФІКА ────────────────────────────────────────── */

body { font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif; color: var(--spf-ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .btn-solid, .btn-ghost, .offer__cta, .svc__link { font-family: 'Archivo', system-ui, sans-serif; letter-spacing: -.015em; }

h1                        { font-size: clamp(2rem, 1.15rem + 3.9vw, 3.6rem); line-height: 1.07; font-weight: 800; }
h2, .section-title h2     { font-size: clamp(1.65rem, 1.1rem + 2.3vw, 2.5rem); line-height: 1.15; font-weight: 700; }
h3                        { font-size: clamp(1.14rem, 1rem + .8vw, 1.42rem); font-weight: 700; }
p                         { line-height: 1.68; }

/* ─── 3. ДОСТУПНІСТЬ ────────────────────────────────────────── */

*:focus-visible { outline: 3px solid var(--spf-blue); outline-offset: 3px; border-radius: 4px; }
.btn-solid:focus-visible, .offer__cta:focus-visible { outline-color: #fff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
::selection { background: var(--spf-blue); color: #fff; }

/* ─── 4. ГЕРОЙ ──────────────────────────────────────────────── */

#hero.hero--home {
  position: relative;
  min-height: 72svh;
  padding: clamp(4.5rem, 10vw, 7.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  background:
    linear-gradient(100deg, rgba(11,27,43,.93) 0%, rgba(11,27,43,.74) 48%, rgba(11,27,43,.34) 100%),
    url('../spf/img/hero.jpg') center/cover no-repeat, #0B1B2B;
  color: #fff;
}
#hero.hero--home::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--spf-thermal);
}
#hero h1 { color: #fff; max-width: 19ch; margin: 0 0 1.1rem; }
#hero h1 em { font-style: normal; color: var(--spf-go-bright); }
.hero__eyebrow {
  text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 700;
  color: rgba(255,255,255,.72); margin: 0 0 1rem;
}
.hero__lead { color: rgba(255,255,255,.9); max-width: 52ch; font-size: clamp(1.02rem, .96rem + .35vw, 1.2rem); margin: 0; }
.hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }

/* Бейдж: рейтинг і ліцензія — те, що людина перевіряє перед дзвінком */
.hero__badge {
  display: block; text-align: center; text-decoration: none;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--spf-r-lg); padding: 1.5rem 1.9rem; min-width: 214px;
  backdrop-filter: blur(6px);
  transition: border-color .2s var(--spf-ease), background-color .2s var(--spf-ease);
}
.hero__badge:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.12); }
.hero__badge-rating { display: flex; align-items: baseline; justify-content: center; gap: .55rem; }
.hero__badge-rating strong { font-family: 'Archivo', sans-serif; font-size: 2.6rem; font-weight: 800; color: #fff; line-height: 1; }
.hero__badge-stars { color: #F5B429; font-size: .82rem; letter-spacing: .06em; }
.hero__badge-meta { display: block; margin-top: .5rem; color: rgba(255,255,255,.78); font-size: .9rem; }
.hero__badge-lic {
  display: block; margin-top: .9rem; padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.16);
  color: var(--spf-go-bright); font-size: .8rem; font-weight: 700; letter-spacing: .04em;
}

/* ─── 5. КНОПКИ ─────────────────────────────────────────────── */

.btn-solid, .offer__cta {
  display: inline-block; background: var(--spf-go); color: #fff;
  font-weight: 700; padding: .88rem 1.95rem; border: none; border-radius: var(--spf-r);
  text-decoration: none; box-shadow: 0 2px 0 var(--spf-go-deep);
  transition: transform .16s var(--spf-ease), box-shadow .16s var(--spf-ease), background-color .16s var(--spf-ease);
}
.btn-solid:hover, .offer__cta:hover {
  background: var(--spf-go-deep); color: #fff; transform: translateY(-2px);
  box-shadow: 0 4px 0 var(--spf-go-deep), 0 10px 22px rgba(2,111,58,.28);
}
.btn-solid:active, .offer__cta:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--spf-go-deep); }

.btn-ghost {
  display: inline-block; background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,.55); font-weight: 700;
  padding: .8rem 1.75rem; border-radius: var(--spf-r); text-decoration: none;
  transition: border-color .16s var(--spf-ease), background-color .16s var(--spf-ease);
}
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }

/* ─── 6. ЗАГОЛОВКИ СЕКЦІЙ ───────────────────────────────────── */

.section-title { text-align: center; margin-bottom: 2.6rem; }
.section-title h2 { margin: 0 0 .9rem; position: relative; padding-bottom: 1rem; }
.section-title h2::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 72px; height: 4px; border-radius: 2px; background: var(--spf-thermal);
}
.section-title p { color: var(--spf-ink-soft); max-width: 62ch; margin: 0 auto; }
.section-title--left { text-align: left; margin-bottom: 1.5rem; }
.section-title--left h2::after { left: 0; transform: none; }

/* ─── 7. СМУГА СЕРВІСНИХ ЗОН ────────────────────────────────── */

.clients--strip { padding: 2.2rem 0; border-bottom: 1px solid var(--spf-line); background: var(--spf-mist); }
.clients-strip__label {
  text-align: center; text-transform: uppercase; letter-spacing: .13em;
  font-size: .76rem; font-weight: 700; color: var(--spf-ink-soft); margin: 0 0 1.1rem;
}
.area-strip {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem;
}
.area-strip a {
  display: block; padding: .5rem 1rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--spf-line);
  color: var(--spf-ink); font-size: .9rem; font-weight: 600; text-decoration: none;
  transition: border-color .16s var(--spf-ease), color .16s var(--spf-ease), transform .16s var(--spf-ease);
}
.area-strip a:hover { border-color: var(--spf-blue); color: var(--spf-blue); transform: translateY(-2px); }
.area-strip__all { background: var(--spf-blue) !important; border-color: var(--spf-blue) !important; color: #fff !important; }
.area-strip__all:hover { background: var(--spf-blue-deep) !important; color: #fff !important; }

/* ─── 8. ПРО НАС ────────────────────────────────────────────── */

.mission { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.mission__media { margin: 0; }
.mission__media img { width: 100%; height: auto; border-radius: var(--spf-r-lg); box-shadow: var(--spf-sh-lg); display: block; }
.mission__media figcaption {
  margin-top: .8rem; font-size: .85rem; color: var(--spf-ink-soft);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.mission-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.6rem; }
.mission-list li { padding-left: 3.4rem; position: relative; }
.mission-list i {
  position: absolute; left: 0; top: .1rem;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.2rem;
  background: var(--spf-mist); color: var(--spf-blue);
}
.mission-list h3 { margin: 0 0 .45rem; }
.mission-list p { margin: 0; color: var(--spf-ink-soft); }

/* ─── 9. ЛІЧИЛЬНИКИ ─────────────────────────────────────────── */

.stats { padding: clamp(2.5rem, 5vw, 3.5rem) 0; background: var(--spf-ink); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--spf-r-lg); overflow: hidden; }
.stat { background: var(--spf-ink); padding: 1.9rem 1.2rem; text-align: center; }
.stat i { display: block; font-size: 1.4rem; color: var(--spf-go-bright); margin-bottom: .7rem; }
.stat__num {
  font-family: 'Archivo', sans-serif; font-weight: 800; line-height: 1; color: #fff;
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); font-variant-numeric: tabular-nums;
}
.stat__suffix { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.7rem; color: var(--spf-go-bright); }
/* Єдине місце, де шкала стає текстом */
.stat__num--thermal { background: var(--spf-thermal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__num--lic { font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem); letter-spacing: .02em; }
.stat p { margin: .6rem 0 0; color: rgba(255,255,255,.68); font-size: .84rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }

/* ─── 10. ПОСЛУГИ ───────────────────────────────────────────── */

.services-home { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.5rem; }
.svc {
  position: relative; background: #fff; border: 1px solid var(--spf-line);
  border-radius: var(--spf-r-lg); padding: 2rem 1.75rem; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .22s var(--spf-ease), box-shadow .22s var(--spf-ease), border-color .22s var(--spf-ease);
}
.svc::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--spf-thermal); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--spf-ease);
}
.svc:hover { transform: translateY(-5px); box-shadow: var(--spf-sh-lg); border-color: transparent; }
.svc:hover::before { transform: scaleX(1); }
.svc__icon {
  display: grid; place-items: center; width: 3.1rem; height: 3.1rem;
  border-radius: var(--spf-r); background: var(--spf-mist); color: var(--spf-blue);
  font-size: 1.4rem; margin-bottom: 1.15rem;
}
.svc h3 { margin: 0 0 .6rem; }
.svc h3 a { color: var(--spf-ink); text-decoration: none; }
.svc h3 a:hover { color: var(--spf-blue); }
.svc p { color: var(--spf-ink-soft); margin: 0 0 1.4rem; flex-grow: 1; }
.svc__link { color: var(--spf-go); font-weight: 700; text-decoration: none; font-size: .95rem; }
.svc__link:hover { color: var(--spf-go-deep); }
.svc__link i { vertical-align: -2px; }

/* ─── 11. ЦІНИ ──────────────────────────────────────────────── */

.cost { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--spf-mist); }
.cost-card { background: #fff; border: 1px solid var(--spf-line); border-radius: var(--spf-r-lg); padding: clamp(1.4rem, 3vw, 2rem); height: 100%; box-shadow: var(--spf-sh); }
.cost-card h3 { margin: 0 0 1.2rem; }

.cost-dl { margin: 0; display: grid; gap: 1.4rem; }
.cost-dl > div { padding-left: 1rem; border-left: 3px solid var(--spf-blue); }
.cost-dl > div:last-child { border-left-color: var(--spf-warm); }
.cost-dl dt { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.05rem; }
.cost-dl dt span { font-weight: 500; color: var(--spf-ink-soft); font-size: .85rem; }
.cost-dl dd { margin: .25rem 0 .3rem; font-size: 1.05rem; }
.cost-dl dd strong { font-family: 'Archivo', sans-serif; font-size: 1.3rem; color: var(--spf-go); font-variant-numeric: tabular-nums; }
.cost-dl p { margin: 0; font-size: .9rem; color: var(--spf-ink-soft); }

.cost-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cost-table th, .cost-table td { padding: .78rem .5rem; text-align: left; border-bottom: 1px solid var(--spf-line); }
.cost-table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--spf-ink-soft); border-bottom-width: 2px; }
.cost-table tbody th { font-weight: 600; }
.cost-table td:last-child { font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--spf-go); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cost-table tbody tr:last-child th, .cost-table tbody tr:last-child td { border-bottom: none; }

.cost-note { margin-top: 2rem; max-width: 76ch; }
.cost-note p { color: var(--spf-ink-soft); margin: 0 0 1rem; }
.cost-note strong { color: var(--spf-ink); }

@media (max-width: 575px) {
  .cost-table thead { display: none; }
  .cost-table tbody th, .cost-table td { display: block; padding: .25rem 0; border: none; }
  .cost-table tbody tr { display: block; padding: .9rem 0; border-bottom: 1px solid var(--spf-line); }
  .cost-table td:nth-of-type(1)::before { content: 'Size: '; color: var(--spf-ink-soft); font-weight: 400; }
}

/* ─── 12. РІШЕННЯ ───────────────────────────────────────────── */

.solutions { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.sol-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.sol-grid a {
  display: block; height: 100%; padding: 1.4rem 1.3rem; text-decoration: none;
  border: 1px solid var(--spf-line); border-radius: var(--spf-r-lg); background: #fff;
  transition: border-color .18s var(--spf-ease), transform .18s var(--spf-ease), box-shadow .18s var(--spf-ease);
}
.sol-grid a:hover { border-color: var(--spf-blue); transform: translateY(-3px); box-shadow: var(--spf-sh); }
.sol-grid i { display: block; font-size: 1.35rem; color: var(--spf-blue); margin-bottom: .7rem; }
.sol-grid span { display: block; font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--spf-ink); margin-bottom: .3rem; }
.sol-grid em { font-style: normal; font-size: .88rem; color: var(--spf-ink-soft); line-height: 1.5; }

/* ─── 13. ПРОЦЕС ────────────────────────────────────────────── */
/* Нумерація тут не декоративна — порядок кроків несе інформацію */

.process { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--spf-mist); }
.process-list { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 1.6rem; max-width: 62rem; margin-inline: auto; }
.process-list li { counter-increment: step; position: relative; padding-left: 4.2rem; }
.process-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -.1rem;
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.5rem;
  color: var(--spf-blue); font-variant-numeric: tabular-nums;
}
.process-list li::after {
  content: ''; position: absolute; left: 1.55rem; top: 2.1rem; bottom: -1.6rem;
  width: 2px; background: var(--spf-line);
}
.process-list li:last-child::after { display: none; }
.process-list h3 { margin: 0 0 .4rem; }
.process-list p { margin: 0; color: var(--spf-ink-soft); }

/* ─── 14. ПРОПОЗИЦІЯ ────────────────────────────────────────── */

.offer { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.offer__inner {
  position: relative; overflow: hidden; text-align: center;
  background: var(--spf-ink); color: #fff;
  border-radius: var(--spf-r-lg); padding: clamp(2.4rem, 6vw, 4rem) clamp(1.4rem, 5vw, 3.5rem);
}
.offer__inner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--spf-thermal); }
.offer__eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 700; color: rgba(255,255,255,.65); margin: 0 0 .9rem; }
.offer h2 { color: #fff; margin: 0 0 1.1rem; }
.offer h2 em { font-style: normal; color: var(--spf-go-bright); }
.offer__lead { color: rgba(255,255,255,.82); max-width: 60ch; margin: 0 auto 2rem; }
.offer__note { margin: 1.3rem 0 0; font-size: .93rem; color: rgba(255,255,255,.7); }
.offer__note a { color: var(--spf-go-bright); font-weight: 700; text-decoration: none; }
.offer__note a:hover { text-decoration: underline; }

/* ─── 15. ВІДГУКИ ───────────────────────────────────────────── */

.reviews { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.review { background: #fff; border: 1px solid var(--spf-line); border-radius: var(--spf-r-lg); padding: 2rem 1.8rem; height: 100%; display: flex; flex-direction: column; }
.review__stars { color: #F5B429; font-size: .95rem; letter-spacing: .12em; margin-bottom: 1rem; }
.review__text { color: var(--spf-ink); margin: 0 0 1.6rem; flex-grow: 1; }
.review__author { display: flex; align-items: center; gap: .85rem; }
.review__initial { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--spf-mist); color: var(--spf-blue); font-family: 'Archivo', sans-serif; font-weight: 800; }
.review__name { display: block; font-family: 'Archivo', sans-serif; font-weight: 700; }
.review__role { display: block; font-size: .86rem; color: var(--spf-ink-soft); }
.reviews__cta { text-align: center; margin: 2rem 0 0; }
.reviews__cta a { color: var(--spf-blue); font-weight: 700; text-decoration: none; }
.reviews__cta a:hover { color: var(--spf-go); }
.reviews-slider { padding-bottom: 3rem; }
.swiper-pagination-bullet-active { background: var(--spf-blue) !important; }

/* ─── 16. FAQ ───────────────────────────────────────────────── */

.faq--flat { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--spf-mist); }
.faq-list { list-style: none; padding: 0; margin: 0; }
.faq-list li { background: #fff; border: 1px solid var(--spf-line); border-radius: var(--spf-r); margin-bottom: .7rem; transition: border-color .2s var(--spf-ease), box-shadow .2s var(--spf-ease); }
.faq-list li:hover { border-color: var(--spf-blue); box-shadow: var(--spf-sh); }
.faq-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.35rem; font-family: 'Archivo', sans-serif; font-weight: 700;
  color: var(--spf-ink); text-decoration: none;
}
.faq-list a:not(.collapsed) { color: var(--spf-blue); }
.faq-list .icon-show, .faq-list .icon-close { flex-shrink: 0; font-size: 1.4rem; }
.faq-list a.collapsed .icon-close, .faq-list a:not(.collapsed) .icon-show { display: none; }
.faq-list .collapse p { padding: 0 1.35rem 1.25rem; margin: 0; color: var(--spf-ink-soft); }
.faq-list .collapse a { display: inline; padding: 0; color: var(--spf-blue); text-decoration: underline; }

.faq-cta {
  margin-top: 2rem; background: #fff; border: 1px solid var(--spf-line);
  border-radius: var(--spf-r-lg); padding: 1.75rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.faq-cta p { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.08rem; }
.faq-cta span { display: block; font-family: 'Source Sans 3', sans-serif; font-weight: 400; color: var(--spf-ink-soft); font-size: .96rem; margin-top: .25rem; }

/* ─── 17. МОБІЛЬНА ПАНЕЛЬ ДЗВІНКА ───────────────────────────── */

.spf-callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; display: none;
  grid-template-columns: 1.25fr 1fr; gap: 1px; background: var(--spf-line);
  box-shadow: 0 -6px 24px rgba(11,27,43,.16);
  padding-bottom: env(safe-area-inset-bottom);
  transition: transform .3s var(--spf-ease);
}
.spf-callbar a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem .6rem; font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: .96rem; text-decoration: none;
}
.spf-callbar__call  { background: var(--spf-blue); color: #fff; }
.spf-callbar__quote { background: var(--spf-go);   color: #fff; }
.spf-callbar.is-hidden { transform: translateY(100%); }

@media (max-width: 768px) {
  .spf-callbar { display: grid; }
  body { padding-bottom: 68px; }
  .back-to-top { bottom: 84px; }
}

/* ─── 18. ФУТЕР ─────────────────────────────────────────────── */

#footer { background: var(--spf-ink); color: #C9D6E0; }
#footer::before { content: ''; display: block; height: 4px; background: var(--spf-thermal); }
#footer h3, #footer h4 { color: #fff; font-family: 'Archivo', sans-serif; }
#footer a { color: #C9D6E0; text-decoration: none; }
#footer a:hover { color: var(--spf-go-bright); }
#footer .footer-links ul i { color: var(--spf-go-bright); }
#footer .social-links a { background: rgba(255,255,255,.1); }
#footer .social-links a:hover { background: var(--spf-go); }

.back-to-top { background: var(--spf-blue); }
.back-to-top:hover { background: var(--spf-go); }

/* ─── 19. ШАПКА І НАВІГАЦІЯ ─────────────────────────────────── */

.skip-link {
  position: absolute; left: 0; top: 0; z-index: 1100;
  transform: translateY(-120%);
  background: var(--spf-ink); color: #fff;
  padding: .8rem 1.4rem; font-weight: 700; text-decoration: none;
  border-radius: 0 0 var(--spf-r) 0;
  transition: transform .18s var(--spf-ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

#header {
  background: #fff;
  height: 74px;
  box-shadow: 0 1px 0 var(--spf-line);
  transition: box-shadow .25s var(--spf-ease);
}
#header.header-scrolled { box-shadow: var(--spf-sh); }
#header .logo img { display: block; max-height: 44px; width: auto; }

/* Кнопка телефону: номер має читатись, а не бути дрібним підписом */
.get-started-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--spf-go); color: #fff;
  padding: .62rem 1.2rem; border-radius: var(--spf-r);
  font-family: 'Archivo', sans-serif; text-decoration: none;
  box-shadow: 0 2px 0 var(--spf-go-deep);
  transition: transform .16s var(--spf-ease), box-shadow .16s var(--spf-ease), background-color .16s var(--spf-ease);
  white-space: nowrap;
}
.get-started-btn:hover {
  background: var(--spf-go-deep); color: #fff; transform: translateY(-2px);
  box-shadow: 0 4px 0 var(--spf-go-deep), 0 8px 18px rgba(2,111,58,.26);
}
.get-started-btn i { font-size: 1.1rem; }
.get-started-btn__label { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; opacity: .8; line-height: 1; }
.get-started-btn__num { display: block; font-weight: 800; font-size: 1rem; line-height: 1.2; }
.get-started-btn > i + span { margin-top: 1px; }
.get-started-btn__label + .get-started-btn__num { margin-top: 2px; }

/* ─── Навігація: десктоп ────────────────────────────────────── */

#navbar ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
#navbar .nav-link {
  display: flex; align-items: center; gap: .3rem;
  padding: .6rem .85rem;
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .95rem;
  color: var(--spf-ink); text-decoration: none; white-space: nowrap;
  position: relative;
  transition: color .16s var(--spf-ease);
}
#navbar .nav-link:hover, #navbar .dropdown:hover > .nav-link { color: var(--spf-blue); }
#navbar .nav-link.active { color: var(--spf-blue); }
#navbar .nav-link.active::after {
  content: ''; position: absolute; left: .85rem; right: .85rem; bottom: .25rem;
  height: 2px; background: var(--spf-thermal); border-radius: 2px;
}
#navbar .nav-link i { font-size: .72rem; transition: transform .2s var(--spf-ease); }
#navbar .dropdown:hover > .nav-link i { transform: rotate(180deg); }

/* Випадаючі списки */
#navbar .dropdown { position: relative; }
#navbar .dropdown > ul {
  display: block; position: absolute; left: 0; top: calc(100% + 6px);
  min-width: 232px; padding: .5rem; margin: 0;
  background: #fff; border: 1px solid var(--spf-line); border-radius: var(--spf-r-lg);
  box-shadow: var(--spf-sh-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--spf-ease), transform .2s var(--spf-ease), visibility .2s;
  z-index: 60;
}
#navbar .dropdown:hover > ul,
#navbar .dropdown:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
#navbar .dropdown > ul::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--spf-thermal); border-radius: var(--spf-r-lg) var(--spf-r-lg) 0 0;
}
#navbar .dropdown ul li { display: block; width: 100%; }
#navbar .dropdown ul a {
  display: flex; align-items: center; gap: .6rem;
  padding: .58rem .8rem; border-radius: var(--spf-r);
  font-size: .93rem; font-weight: 600; color: var(--spf-ink); text-decoration: none;
  transition: background-color .14s var(--spf-ease), color .14s var(--spf-ease);
}
#navbar .dropdown ul a:hover, #navbar .dropdown ul a.active { background: var(--spf-mist); color: var(--spf-blue); }
#navbar .dropdown-icons i { color: var(--spf-blue); font-size: 1rem; width: 1.2rem; flex-shrink: 0; }

/* Дві колонки для сервісних зон */
#navbar .dropdown--areas > ul.dropdown-cols {
  display: grid; grid-template-columns: repeat(2, minmax(172px, 1fr));
  gap: .25rem 1rem; padding: 1rem;
  left: auto; right: 0; min-width: 400px;
}
.dropdown-col { display: flex; flex-direction: column; }
.dropdown-col__label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 700;
  color: var(--spf-ink-soft); padding: .3rem .8rem .5rem;
}
.dropdown-col__all { margin-top: auto; color: var(--spf-go) !important; font-weight: 700 !important; }

/* ─── Навігація: мобільна ───────────────────────────────────── */

.nav-mobile-head, .nav-mobile-phone, .nav-mobile-social { display: none; }
.mobile-nav-toggle { display: none; background: none; border: 0; font-size: 1.75rem; color: var(--spf-ink); padding: .2rem .4rem; line-height: 1; }

@media (max-width: 991px) {
  .mobile-nav-toggle { display: block; }
  .mobihide { display: none !important; }

  #navbar > ul {
    position: fixed; inset: 0 0 0 auto;
    width: min(88vw, 380px);
    display: flex; flex-direction: column; align-items: stretch;
    padding: 1.25rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom));
    background: #fff; box-shadow: -12px 0 40px rgba(11,27,43,.2);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform .3s var(--spf-ease);
    z-index: 1000;
  }
  .navbar-mobile > ul { transform: translateX(0) !important; }

  #navbar li { width: 100%; }
  #navbar .nav-link { padding: .85rem .6rem; font-size: 1.05rem; justify-content: space-between; }
  #navbar .nav-link.active::after { left: .6rem; right: auto; width: 34px; bottom: .5rem; }

  .nav-mobile-head { display: block; padding: .2rem .6rem 1.25rem; border-bottom: 1px solid var(--spf-line); margin-bottom: .5rem; }
  .nav-mobile-head img { max-height: 40px; width: auto; }

  /* Списки згорнуті, розкриваються тапом (клас додає main.js шаблону) */
  #navbar .dropdown > ul {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none; box-shadow: none; border: 0; border-radius: 0;
    padding: 0 0 .5rem .6rem; min-width: 0;
    border-left: 2px solid var(--spf-line); margin-left: .6rem;
  }
  #navbar .dropdown > ul::before { display: none; }
  #navbar .dropdown-active > ul { display: block; }
  #navbar .dropdown-active > .nav-link i { transform: rotate(180deg); }
  #navbar .dropdown--areas > ul.dropdown-cols { grid-template-columns: 1fr; min-width: 0; padding: 0 0 .5rem .6rem; }

  .nav-mobile-phone {
    display: grid; gap: .5rem;
    margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--spf-line);
  }
  .nav-mobile-phone > a:first-child {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    background: var(--spf-blue); color: #fff; text-decoration: none;
    padding: .9rem; border-radius: var(--spf-r);
    font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.05rem;
  }
  .nav-mobile-phone__quote {
    display: block; text-align: center;
    background: var(--spf-go); color: #fff; text-decoration: none;
    padding: .9rem; border-radius: var(--spf-r);
    font-family: 'Archivo', sans-serif; font-weight: 700;
  }

  .nav-mobile-social { display: block; margin-top: 1.4rem; text-align: center; }
  .nav-mobile-social__label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; color: var(--spf-ink-soft); font-weight: 700; margin-bottom: .7rem; }
  .nav-mobile-social__links { display: flex; justify-content: center; gap: .6rem; }
  .nav-mobile-social__links a {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
    border-radius: 50%; background: var(--spf-mist); color: var(--spf-blue); text-decoration: none;
    transition: background-color .16s var(--spf-ease), color .16s var(--spf-ease);
  }
  .nav-mobile-social__links a:hover { background: var(--spf-blue); color: #fff; }
  .nav-mobile-social__lic { display: block; margin-top: 1.1rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--spf-ink-soft); }

  /* Затемнення під панеллю */
  body.navbar-mobile-open::after {
    content: ''; position: fixed; inset: 0; z-index: 999;
    background: rgba(11,27,43,.5); backdrop-filter: blur(2px);
  }
  body.navbar-mobile-open { overflow: hidden; }
}

/* Фіксована шапка перекриває якорі — компенсуємо */
:target { scroll-margin-top: 90px; }

/* ─── 20. КОНТАКТИ ──────────────────────────────────────────── */

.contact--flat { padding: clamp(3.5rem, 7vw, 6rem) 0; }

.contact-card {
  background: #fff; border: 1px solid var(--spf-line);
  border-radius: var(--spf-r-lg); padding: clamp(1.5rem, 3.5vw, 2.4rem);
  box-shadow: var(--spf-sh); position: relative; overflow: hidden;
}
.contact-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--spf-thermal);
}

.contact .form-group { margin-bottom: 1.15rem; }
.contact label, .choice-group legend {
  display: block; margin-bottom: .4rem;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: .88rem;
  color: var(--spf-ink);
}
.choice-group legend { float: none; width: auto; }
.contact .req { color: var(--spf-hot); margin-left: .1rem; }
.contact .opt { font-family: 'Source Sans 3', sans-serif; font-weight: 400; color: var(--spf-ink-soft); }
.field-hint { display: block; margin-top: .35rem; font-size: .8rem; color: var(--spf-ink-soft); line-height: 1.4; }

.contact .form-control {
  width: 100%; background: #fff; color: var(--spf-ink);
  border: 1px solid var(--spf-line); border-radius: var(--spf-r);
  padding: .78rem 1rem; font-family: inherit; font-size: 1rem;
  transition: border-color .16s var(--spf-ease), box-shadow .16s var(--spf-ease);
}
.contact .form-control::placeholder { color: #8A9AA8; }
.contact .form-control:hover { border-color: #BDCEDB; }
.contact .form-control:focus {
  outline: none; border-color: var(--spf-blue);
  box-shadow: 0 0 0 4px rgba(0,89,142,.14);
}
.contact .form-control:user-invalid { border-color: var(--spf-hot); }
.contact textarea.form-control { resize: vertical; min-height: 110px; }
.contact select.form-control {
  appearance: none; padding-right: 2.6rem; cursor: pointer;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2345596B" width="18" height="18"%3E%3Cpath d="M7 10l5 5 5-5z"/%3E%3C/svg%3E');
  background-repeat: no-repeat; background-position: right .95rem center;
}

/* Тип будівлі: великі цілі для пальця замість дрібних радіокнопок */
.choice-group { border: 0; padding: 0; margin-bottom: 1.15rem; }
.choice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.choice { margin: 0; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  padding: .95rem .6rem; text-align: center;
  border: 1px solid var(--spf-line); border-radius: var(--spf-r);
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .9rem;
  color: var(--spf-ink); background: #fff;
  transition: border-color .16s var(--spf-ease), background-color .16s var(--spf-ease), color .16s var(--spf-ease);
}
.choice span i { font-size: 1.25rem; color: var(--spf-ink-soft); transition: color .16s var(--spf-ease); }
.choice:hover span { border-color: #BDCEDB; }
.choice input:checked + span { border-color: var(--spf-blue); background: var(--spf-mist); color: var(--spf-blue); }
.choice input:checked + span i { color: var(--spf-blue); }
.choice input:focus-visible + span { outline: 3px solid var(--spf-blue); outline-offset: 2px; }

/* Honeypot */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact button[type=submit] {
  width: 100%; background: var(--spf-go); color: #fff; border: 0;
  border-radius: var(--spf-r); padding: 1rem 1.6rem;
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 2px 0 var(--spf-go-deep); cursor: pointer;
  transition: transform .16s var(--spf-ease), box-shadow .16s var(--spf-ease), background-color .16s var(--spf-ease);
}
.contact button[type=submit]:hover {
  background: var(--spf-go-deep); transform: translateY(-2px);
  box-shadow: 0 4px 0 var(--spf-go-deep), 0 10px 22px rgba(2,111,58,.28);
}
.contact button[type=submit]:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--spf-go-deep); }

.form-note {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: .9rem 0 0; font-size: .85rem; color: var(--spf-ink-soft); line-height: 1.5;
}
.form-note i { color: var(--spf-go); margin-top: .15rem; flex-shrink: 0; }

.contact .sent-message { background: #E7F6EC; color: #14532D; border: 1px solid #A7DCBB; }
.contact .error-message { background: #FDECEA; color: #7F1D1D; border: 1px solid #F3B9B3; }
.contact .sent-message, .contact .error-message { border-radius: var(--spf-r); padding: .9rem 1.1rem; font-weight: 600; }

/* ─── Права колонка ─────────────────────────────────────────── */

.contact-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .7rem; }
.contact-list a {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem 1.2rem; text-decoration: none;
  background: #fff; border: 1px solid var(--spf-line); border-radius: var(--spf-r-lg);
  transition: border-color .16s var(--spf-ease), transform .16s var(--spf-ease), box-shadow .16s var(--spf-ease);
}
.contact-list a:hover { border-color: var(--spf-blue); transform: translateY(-2px); box-shadow: var(--spf-sh); }
.contact-list i {
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.7rem; height: 2.7rem; border-radius: var(--spf-r);
  background: var(--spf-mist); color: var(--spf-blue); font-size: 1.25rem;
}
.contact-list b { display: block; font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--spf-ink); font-size: 1.02rem; }
.contact-list span span { display: block; font-size: .85rem; color: var(--spf-ink-soft); margin-top: .1rem; }

.contact-meta {
  background: var(--spf-mist); border-radius: var(--spf-r-lg);
  padding: 1.4rem 1.35rem; display: grid; gap: 1.1rem; margin-bottom: 1.5rem;
}
.contact-meta__row { display: flex; gap: .9rem; align-items: flex-start; }
.contact-meta__row i { color: var(--spf-blue); font-size: 1.15rem; margin-top: .1rem; flex-shrink: 0; }
.contact-meta b { display: block; font-family: 'Archivo', sans-serif; font-size: .92rem; margin-bottom: .15rem; }
.contact-meta p { margin: 0; font-size: .9rem; color: var(--spf-ink-soft); line-height: 1.55; }
.contact-meta a { color: var(--spf-blue); font-weight: 600; }

.contact-next {
  background: var(--spf-ink); color: #fff;
  border-radius: var(--spf-r-lg); padding: 1.6rem 1.5rem;
  position: relative; overflow: hidden;
}
.contact-next::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--spf-thermal); }
.contact-next h3 { color: #fff; margin: 0 0 1rem; font-size: 1.1rem; }
.contact-next ol { counter-reset: cn; list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.contact-next li { counter-increment: cn; position: relative; padding-left: 2.2rem; color: rgba(255,255,255,.82); font-size: .93rem; line-height: 1.55; }
.contact-next li::before {
  content: counter(cn); position: absolute; left: 0; top: -.05rem;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.12); color: var(--spf-go-bright);
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: .82rem;
}

/* ─── 21. ФУТЕР ─────────────────────────────────────────────── */

#footer { background: var(--spf-ink); color: #A9BCCB; }
#footer::before { content: ''; display: block; height: 4px; background: var(--spf-thermal); }
.footer-top { padding: clamp(2.8rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); }

/* Власна сітка замість бутстрапівської. Класи col-* із футера прибрані:
   вони задавали width у відсотках ВІД КОМІРКИ гріда, через що колонки
   стискались до одного слова в рядку. */
.footer-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.15fr 0.95fr;
  gap: 2.5rem 3rem;
  align-items: start;
  max-width: 1240px;
  margin-inline: auto;
}
@media (max-width: 1199px) { .footer-row { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (max-width: 900px)  { .footer-row { grid-template-columns: 1fr 1fr; gap: 2.2rem; } }
@media (max-width: 575px)  { .footer-row { grid-template-columns: 1fr; } }

/* Страховка: якщо десь лишились col-класи, вони не мають звужувати колонку */
.footer-row > [class*="col-"] { width: auto; max-width: none; flex: initial; padding: 0; }

.footer-col { min-width: 0; }

#footer h4 {
  color: #fff; font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .12em;
  margin: 0 0 1.15rem; padding-bottom: .7rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;          /* «What we insulate» більше не ламається */
}

.footer-logo { display: block; max-width: 210px; height: auto; margin-bottom: 1.1rem; }
.footer-motto { font-size: .93rem; line-height: 1.65; margin: 0 0 1.35rem; color: #A9BCCB; max-width: 34ch; }

.footer-contact__list { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .8rem; }
.footer-contact__list li, .footer-contact__list a {
  display: flex; align-items: flex-start; gap: .7rem;
  color: #C9D6E0; text-decoration: none; font-size: .95rem; line-height: 1.5;
}
.footer-contact__list a { transition: color .16s var(--spf-ease); }
.footer-contact__list a:hover { color: var(--spf-go-bright); }
.footer-contact__list i { color: var(--spf-go-bright); font-size: 1.15rem; flex-shrink: 0; margin-top: .05rem; }
.footer-contact__plain { color: #A9BCCB; }
.footer-contact__list a span { font-weight: 600; white-space: nowrap; }

#footer .social-links { display: flex; gap: .55rem; }
#footer .social-links a {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border-radius: 50%; background: rgba(255,255,255,.09); color: #fff;
  font-size: 1.15rem; text-decoration: none;
  transition: background-color .16s var(--spf-ease), transform .16s var(--spf-ease);
}
#footer .social-links a:hover { background: var(--spf-go); transform: translateY(-2px); }

.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links li { display: flex; align-items: flex-start; gap: .35rem; padding: .34rem 0; font-size: .93rem; line-height: 1.45; }
.footer-links i { color: var(--spf-go-bright); font-size: 1.1rem; flex-shrink: 0; margin-top: -.02rem; }
.footer-links a { color: #A9BCCB; text-decoration: none; transition: color .16s var(--spf-ease); }
.footer-links a:hover { color: #fff; }

.footer-links__head {
  display: block; margin-top: 1rem; padding: 0 0 .3rem;
  font-family: 'Archivo', sans-serif; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.42);
}
.footer-links__split li:first-of-type.footer-links__head { margin-top: 0; }
.footer-links__all { color: var(--spf-go-bright) !important; font-weight: 700; margin-top: .5rem; display: inline-block; white-space: nowrap; }

/* ─── Блок рейтингу Google ──────────────────────────────────── */
/* Переїхав у брендову колонку: у вузькій «Company» він не поміщався
   і розсипався на два рядки. */

.footer-rating {
  display: flex; align-items: center; gap: .85rem;
  margin-top: 1.5rem; padding: .85rem 1rem;
  text-decoration: none; max-width: 20rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--spf-r);
  transition: border-color .16s var(--spf-ease), background-color .16s var(--spf-ease);
}
.footer-rating:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.11); }
.footer-rating__score {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 2rem;
  color: #fff; line-height: 1; flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.footer-rating__body { flex-grow: 1; min-width: 0; }
.footer-rating__stars { display: block; color: #F5B429; font-size: .82rem; letter-spacing: .14em; line-height: 1; }
.footer-rating__meta { display: block; font-size: .82rem; color: #A9BCCB; margin-top: .3rem; white-space: nowrap; }
.footer-rating > i { color: rgba(255,255,255,.45); font-size: 1.3rem; flex-shrink: 0; }

.footer-bottom {
  padding: 1.3rem 20px; border-top: 1px solid rgba(255,255,255,.1);
  max-width: 1240px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem 1.5rem; flex-wrap: wrap;
}
.footer-bottom p { margin: 0; font-size: .86rem; color: #7E93A5; }
.footer-bottom__legal { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.footer-bottom a { color: #A9BCCB; text-decoration: none; }
.footer-bottom a:hover { color: var(--spf-go-bright); text-decoration: underline; }

@media (max-width: 575px) { .footer-bottom { justify-content: flex-start; } }

/* ─── 22. ВНУТРІШНІ СТОРІНКИ ────────────────────────────────── */

/* Герой сторінки — нижчий за головний, без фото на весь екран */
#hero.hero--page {
  position: relative;
  min-height: 0;
  padding: clamp(6.5rem, 11vw, 8.5rem) 0 clamp(2.8rem, 6vw, 4.2rem);
  background: linear-gradient(115deg, #0B1B2B 0%, #10314A 58%, #0E3A2C 100%);
  color: #fff;
}
#hero.hero--page::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--spf-thermal);
}
#hero.hero--page h1 { max-width: 16ch; }

.crumbs { margin-bottom: 1.3rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; font-size: .86rem; }
.crumbs li + li::before { content: '/'; margin-right: .45rem; color: rgba(255,255,255,.35); }
.crumbs a { color: rgba(255,255,255,.68); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] { color: rgba(255,255,255,.9); font-weight: 600; }

/* ─── Текстова секція ───────────────────────────────────────── */

.prose-section { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.prose-narrow { max-width: 44rem; margin-inline: auto; }
.prose-narrow h2 { margin: 0 0 1.2rem; }
.prose-narrow p { font-size: 1.06rem; color: var(--spf-ink-soft); margin: 0 0 1.1rem; }
.prose-callout {
  margin-top: 1.8rem !important; padding: 1.3rem 1.5rem;
  background: var(--spf-mist); border-left: 4px solid var(--spf-blue);
  border-radius: 0 var(--spf-r) var(--spf-r) 0;
  color: var(--spf-ink) !important; font-weight: 600;
}

/* ─── Що змінюється ─────────────────────────────────────────── */

.changes { padding: clamp(3.5rem, 7vw, 5.5rem) 0; background: var(--spf-mist); }
.change-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.3rem; }
.change {
  background: #fff; border: 1px solid var(--spf-line); border-radius: var(--spf-r-lg);
  padding: 1.7rem 1.6rem; position: relative; overflow: hidden;
  transition: transform .2s var(--spf-ease), box-shadow .2s var(--spf-ease);
}
.change:hover { transform: translateY(-3px); box-shadow: var(--spf-sh-lg); }
.change > i {
  display: grid; place-items: center; width: 2.8rem; height: 2.8rem;
  border-radius: var(--spf-r); background: var(--spf-mist);
  color: var(--spf-blue); font-size: 1.3rem; margin-bottom: 1rem;
}
.change h3 { margin: 0 0 .5rem; font-size: 1.12rem; }
.change p { margin: 0; color: var(--spf-ink-soft); font-size: .95rem; }

/* ─── Де це працює ──────────────────────────────────────────── */

.where { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.where-list { display: grid; gap: .6rem; }
.where-item {
  display: grid; grid-template-columns: minmax(150px, 200px) 1fr minmax(150px, 230px);
  gap: .4rem 1.5rem; align-items: center;
  padding: 1.15rem 1.35rem; text-decoration: none;
  background: #fff; border: 1px solid var(--spf-line); border-radius: var(--spf-r);
  transition: border-color .16s var(--spf-ease), transform .16s var(--spf-ease), box-shadow .16s var(--spf-ease);
}
.where-item:hover { border-color: var(--spf-blue); transform: translateX(3px); box-shadow: var(--spf-sh); }
.where-item__name { font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--spf-ink); font-size: 1.05rem; }
.where-item__why { color: var(--spf-ink-soft); font-size: .95rem; }
.where-item__foam {
  justify-self: start; padding: .28rem .7rem; border-radius: 999px;
  background: var(--spf-mist); color: var(--spf-blue);
  font-size: .8rem; font-weight: 700; white-space: nowrap;
}
@media (max-width: 767px) {
  .where-item { grid-template-columns: 1fr; }
  .where-item__foam { margin-top: .3rem; }
}

.where-tip {
  display: flex; gap: .8rem; align-items: flex-start;
  margin: 1.6rem 0 0; padding: 1.2rem 1.4rem;
  background: #FFF6EC; border: 1px solid #F7D9B8; border-radius: var(--spf-r-lg);
  color: var(--spf-ink); font-size: .97rem; line-height: 1.6;
}
.where-tip i { color: var(--spf-warm); font-size: 1.25rem; flex-shrink: 0; margin-top: .1rem; }

/* ─── Короткий блок цін ─────────────────────────────────────── */

.cost--brief { background: var(--spf-mist); }
.cost-brief { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; align-items: start; }
.cost-brief__figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--spf-line); border: 1px solid var(--spf-line); border-radius: var(--spf-r-lg); overflow: hidden; }
.cost-brief__figures > div { background: #fff; padding: 1.3rem 1.1rem; }
.cost-brief__label { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--spf-ink-soft); margin-bottom: .5rem; }
.cost-brief__figures strong { display: block; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.35rem; color: var(--spf-go); font-variant-numeric: tabular-nums; }
.cost-brief__unit { display: block; font-size: .82rem; color: var(--spf-ink-soft); margin-top: .2rem; }
.cost-brief__note p { color: var(--spf-ink-soft); margin: 0 0 1rem; }
.cost-brief__note strong { color: var(--spf-ink); }
.cost-brief__note a:not(.btn-solid) { color: var(--spf-blue); font-weight: 600; }

/* ─── Чесний блок у процесі ─────────────────────────────────── */

.process-honest {
  max-width: 62rem; margin: 2.2rem auto 0;
  background: #fff; border: 1px solid var(--spf-line); border-left: 4px solid var(--spf-go);
  border-radius: 0 var(--spf-r-lg) var(--spf-r-lg) 0; padding: 1.5rem 1.7rem;
}
.process-honest h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.process-honest p { margin: 0; color: var(--spf-ink-soft); }

/* ─── Чому ми ───────────────────────────────────────────────── */

.whyus { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.why-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.3rem; }
.why-list li { display: flex; gap: 1rem; align-items: flex-start; }
.why-list > li > i { color: var(--spf-go); font-size: 1.4rem; flex-shrink: 0; margin-top: .1rem; }
.why-list b { display: block; font-family: 'Archivo', sans-serif; font-size: 1.05rem; margin-bottom: .3rem; }
.why-list p { margin: 0; color: var(--spf-ink-soft); font-size: .95rem; }
.why-list a { color: var(--spf-blue); font-weight: 600; }

/* ─── Пов'язані сторінки ────────────────────────────────────── */

.related { padding: clamp(2.5rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--spf-line); }
.related__title { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .1em; color: var(--spf-ink-soft); margin: 0 0 1.1rem; }
.related-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.related-list a {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .6rem 1.1rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--spf-line);
  color: var(--spf-ink); font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: .93rem; text-decoration: none;
  transition: border-color .16s var(--spf-ease), color .16s var(--spf-ease), transform .16s var(--spf-ease);
}
.related-list a:hover { border-color: var(--spf-blue); color: var(--spf-blue); transform: translateY(-2px); }

/* ─── 23. СТРАХОВКА AOS ─────────────────────────────────────── */
/* Якщо будь-який сторонній скрипт упав і AOS.init() не виконався,
   контент лишається видимим замість білої сторінки. */
html:not(.aos-ready) [data-aos] { opacity: 1 !important; transform: none !important; }

/* ─── 24. ОЗНАКИ ПРОБЛЕМИ ───────────────────────────────────── */

.signs { padding: clamp(3.5rem, 7vw, 5.5rem) 0; background: var(--spf-mist); }
.signs-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .8rem;
}
.signs-list li {
  display: flex; align-items: center; gap: .95rem;
  background: #fff; border: 1px solid var(--spf-line); border-radius: var(--spf-r);
  padding: 1.05rem 1.25rem;
}
.signs-list i {
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: #FFF6EC; color: var(--spf-warm); font-size: 1.15rem;
}
.signs-list span { font-size: .97rem; line-height: 1.5; }

/* ─── 25. ДВА ПІДХОДИ ───────────────────────────────────────── */

.approaches { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.approach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.approach {
  position: relative; background: #fff;
  border: 1px solid var(--spf-line); border-radius: var(--spf-r-lg);
  padding: 2rem 1.75rem 1.75rem; overflow: hidden;
}
.approach::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--spf-blue); }
.approach:nth-child(2)::before { background: var(--spf-warm); }
.approach__tag {
  display: inline-block; margin-bottom: 1rem;
  padding: .28rem .75rem; border-radius: 999px;
  background: var(--spf-mist); color: var(--spf-blue);
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .09em;
}
.approach__tag--alt { background: #FFF6EC; color: #B4560A; }
.approach h3 { margin: 0 0 .7rem; }
.approach > p { color: var(--spf-ink-soft); margin: 0 0 1.2rem; }
.approach__list { list-style: none; padding: 0; margin: 0 0 1.3rem; display: grid; gap: .55rem; }
.approach__list li { position: relative; padding-left: 1.7rem; font-size: .95rem; line-height: 1.5; }
.approach__list li::before {
  content: '\F26E'; font-family: 'bootstrap-icons';
  position: absolute; left: 0; top: .05rem; color: var(--spf-go); font-size: .95rem;
}
.approach__fit {
  margin: 0; padding-top: 1.1rem; border-top: 1px solid var(--spf-line);
  font-size: .93rem; color: var(--spf-ink-soft);
}
.approach__fit b { color: var(--spf-ink); }

/* Тонований варіант текстової секції */
.prose-section--tint { background: var(--spf-mist); }

/* ─── 26. ТАБЛИЦЯ R-VALUE ───────────────────────────────────── */

.rvalues { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.rv-table-wrap {
  background: #fff; border: 1px solid var(--spf-line);
  border-radius: var(--spf-r-lg); padding: clamp(1.1rem, 2.5vw, 1.8rem);
  box-shadow: var(--spf-sh); overflow-x: auto;
}
.rv-table { min-width: 520px; }
.rv-table td:last-child { color: inherit; font-family: inherit; }
.rv-yes, .rv-no { font-family: 'Archivo', sans-serif; font-weight: 700; }
.rv-yes { color: var(--spf-go); }
.rv-no  { color: var(--spf-hot); }
.rv-table tbody tr:first-child { background: var(--spf-mist); }
.rv-note { margin-top: 1.8rem; }
.rv-note p { color: var(--spf-ink-soft); margin: 0 0 1rem; }
.rv-note b { color: var(--spf-ink); }

.cost-brief__quote {
  display: block; font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: 1.05rem; color: var(--spf-blue);
}

@media (max-width: 575px) {
  .rv-table-wrap { padding: .8rem; }
  .rv-table { font-size: .88rem; }
}

/* ─── 27. РЕЙТИНГ ВИТОКІВ ───────────────────────────────────── */

.leaks { padding: clamp(3.5rem, 7vw, 5.5rem) 0; background: var(--spf-mist); }
.leak-list { list-style: none; counter-reset: leak; padding: 0; margin: 0; display: grid; gap: .8rem; }
.leak-list li {
  display: flex; gap: 1.2rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--spf-line); border-radius: var(--spf-r-lg);
  padding: 1.35rem 1.5rem;
  transition: border-color .18s var(--spf-ease), box-shadow .18s var(--spf-ease);
}
.leak-list li:hover { border-color: var(--spf-blue); box-shadow: var(--spf-sh); }
.leak__rank {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.5rem;
  line-height: 1; flex-shrink: 0; width: 2.4rem;
  font-variant-numeric: tabular-nums;
  background: var(--spf-thermal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Шкала «гаряче -> холодне» по спаданню важливості: перші позиції теплі */
.leak-list li:nth-child(1) .leak__rank { background: linear-gradient(90deg, #D6410E, #E8730C); -webkit-background-clip: text; background-clip: text; }
.leak-list li:nth-child(2) .leak__rank { background: linear-gradient(90deg, #E8730C, #E8A00C); -webkit-background-clip: text; background-clip: text; }
.leak-list li:nth-child(3) .leak__rank { background: linear-gradient(90deg, #C8951A, #04BD64); -webkit-background-clip: text; background-clip: text; }
.leak-list li:nth-child(4) .leak__rank { background: linear-gradient(90deg, #04BD64, #0E7C7B); -webkit-background-clip: text; background-clip: text; }
.leak-list li:nth-child(5) .leak__rank { background: linear-gradient(90deg, #0E7C7B, #00598E); -webkit-background-clip: text; background-clip: text; }
.leak-list li:nth-child(6) .leak__rank { background: linear-gradient(90deg, #00598E, #10314A); -webkit-background-clip: text; background-clip: text; }
.leak-list h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.leak-list p { margin: 0; color: var(--spf-ink-soft); font-size: .95rem; }

@media (max-width: 575px) {
  .leak-list li { gap: .9rem; padding: 1.1rem 1.15rem; }
  .leak__rank { font-size: 1.25rem; width: 2rem; }
}

/* ─── 28. ЗВІТ АУДИТУ ───────────────────────────────────────── */

.report { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.report-card {
  max-width: 54rem; margin-inline: auto;
  background: #fff; border: 1px solid var(--spf-line);
  border-radius: var(--spf-r-lg); overflow: hidden; box-shadow: var(--spf-sh-lg);
}
.report-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.15rem 1.6rem; border-bottom: 1px solid var(--spf-line);
  background: var(--spf-mist);
  font-family: 'Archivo', sans-serif; font-weight: 700;
}
.report-card__meta { font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; color: var(--spf-ink-soft); }

.report-list { list-style: none; padding: 0; margin: 0; }
.report-list li {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1.15rem 1.6rem; border-bottom: 1px solid var(--spf-line);
}
.report-list li:last-child { border-bottom: 0; }
.report-list b { display: block; font-family: 'Archivo', sans-serif; font-size: 1rem; margin-bottom: .25rem; }
.report-list p { margin: 0; color: var(--spf-ink-soft); font-size: .92rem; }

.report-tag {
  flex-shrink: 0; min-width: 78px; text-align: center;
  padding: .3rem .6rem; border-radius: 999px;
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
}
.report-tag--now   { background: #FDEAE0; color: #B4360A; }
.report-tag--next  { background: #FFF6E0; color: #8A6108; }
.report-tag--later { background: var(--spf-mist); color: var(--spf-blue); }

.report-card__note {
  margin: 0; padding: 1rem 1.6rem 1.2rem;
  background: var(--spf-mist); border-top: 1px solid var(--spf-line);
  font-size: .87rem; color: var(--spf-ink-soft); font-style: italic;
}

@media (max-width: 575px) {
  .report-list li { flex-direction: column; gap: .55rem; padding: 1.1rem 1.15rem; }
  .report-card__head { padding: 1rem 1.15rem; }
  .report-card__note { padding: 1rem 1.15rem; }
}

/* ─── 29. СЕРВІСНІ ЗОНИ ─────────────────────────────────────── */

.areas { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.areas--tint { background: var(--spf-mist); }

.area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.1rem; }
.area-card {
  background: #fff; border: 1px solid var(--spf-line); border-radius: var(--spf-r-lg);
  padding: 1.5rem 1.5rem 1.4rem; scroll-margin-top: 100px;
  transition: border-color .18s var(--spf-ease), transform .18s var(--spf-ease), box-shadow .18s var(--spf-ease);
}
.area-card:hover { border-color: var(--spf-blue); transform: translateY(-3px); box-shadow: var(--spf-sh); }
.area-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; margin-bottom: .6rem;
}
.area-card h3 { margin: 0; font-size: 1.1rem; }
.area-card__tier {
  flex-shrink: 0; padding: .24rem .65rem; border-radius: 999px;
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  background: var(--spf-mist); color: var(--spf-ink-soft);
}
.area-card__tier--fast { background: #E7F6EC; color: #14532D; }
.areas--tint .area-card__tier { background: #EEF3F7; }
.area-card__towns {
  margin: 0 0 .7rem; padding-bottom: .7rem;
  border-bottom: 1px solid var(--spf-line);
  font-size: .87rem; color: var(--spf-blue); font-weight: 600;
}
.area-card__note { margin: 0; font-size: .93rem; color: var(--spf-ink-soft); line-height: 1.6; }

.related-list--center { justify-content: center; margin-top: 2rem; }

@media (max-width: 575px) {
  .area-card { padding: 1.25rem 1.15rem; }
  .area-card__head { flex-wrap: wrap; gap: .5rem; }
}

/* ─── 30. КАЛЬКУЛЯТОР ───────────────────────────────────────── */

.hero--page-short { padding-bottom: clamp(2rem, 4vw, 3rem); }

.calcpage { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem); }

.calc-shell {
  display: grid; grid-template-columns: minmax(300px, 1.1fr) minmax(280px, 1fr);
  gap: 0; max-width: 62rem; margin-inline: auto;
  background: #fff; border: 1px solid var(--spf-line);
  border-radius: var(--spf-r-lg); overflow: hidden; box-shadow: var(--spf-sh-lg);
}
.calc-shell::before {
  content: ''; grid-column: 1 / -1; height: 4px; background: var(--spf-thermal);
}
@media (max-width: 767px) { .calc-shell { grid-template-columns: 1fr; } }

.calc-form { padding: clamp(1.4rem, 3vw, 2rem); }
.calc-field { margin-bottom: 1.15rem; }
.calc-field label {
  display: block; margin-bottom: .4rem;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: .88rem;
}
.calc-form .form-control {
  width: 100%; background: #fff; color: var(--spf-ink);
  border: 1px solid var(--spf-line); border-radius: var(--spf-r);
  padding: .78rem 1rem; font-family: inherit; font-size: 1rem;
  transition: border-color .16s var(--spf-ease), box-shadow .16s var(--spf-ease);
}
.calc-form .form-control:focus {
  outline: none; border-color: var(--spf-blue); box-shadow: 0 0 0 4px rgba(0,89,142,.14);
}
.calc-form select.form-control {
  appearance: none; padding-right: 2.6rem; cursor: pointer;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2345596B" width="18" height="18"%3E%3Cpath d="M7 10l5 5 5-5z"/%3E%3C/svg%3E');
  background-repeat: no-repeat; background-position: right .95rem center;
}

.calc-input-wrap { position: relative; }
.calc-input-wrap .form-control { padding-right: 7.5rem; font-variant-numeric: tabular-nums; }
.calc-unit {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  font-size: .85rem; color: var(--spf-ink-soft); pointer-events: none;
}

.calc-check { display: flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .95rem; margin: 0; }
.calc-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--spf-blue); cursor: pointer; }

/* ─── Панель результату ─────────────────────────────────────── */

.calc-result {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--spf-ink); color: #fff;
  display: flex; flex-direction: column;
}
.calc-result[hidden] { display: none; }
.calc-result__label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; color: rgba(255,255,255,.6);
}
.calc-result__figures {
  margin: .6rem 0 .9rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem;
  font-family: 'Archivo', sans-serif; font-weight: 800; line-height: 1.05;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.4rem);
  font-variant-numeric: tabular-nums;
  background: var(--spf-thermal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.calc-result__dash { color: rgba(255,255,255,.4); -webkit-text-fill-color: rgba(255,255,255,.4); }
.calc-result__detail {
  margin: 0 0 .7rem; padding-bottom: .9rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
  font-size: .84rem; color: rgba(255,255,255,.78); line-height: 1.5;
}
.calc-result__note { margin: 0 0 1rem; font-size: .9rem; color: rgba(255,255,255,.85); line-height: 1.55; }
.calc-result__min {
  display: flex; gap: .55rem; align-items: flex-start;
  margin: 0 0 1.1rem; padding: .8rem .9rem; border-radius: var(--spf-r);
  background: rgba(232,115,12,.14); border: 1px solid rgba(232,115,12,.35);
  font-size: .85rem; color: #FFD9B8; line-height: 1.5;
}
.calc-result__min[hidden] { display: none; }
.calc-result__min i { flex-shrink: 0; margin-top: .12rem; }
.calc-result .btn-solid { margin-top: auto; text-align: center; }

.calc-disclaimer {
  display: flex; gap: .7rem; align-items: flex-start;
  max-width: 62rem; margin: 1.4rem auto 0;
  font-size: .89rem; color: var(--spf-ink-soft); line-height: 1.6;
}
.calc-disclaimer i { color: var(--spf-warm); font-size: 1.05rem; flex-shrink: 0; margin-top: .15rem; }

/* ─── 31. ПОРТФОЛІО ─────────────────────────────────────────── */

.workvideo { padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.video-facade {
  position: relative; max-width: 58rem; margin-inline: auto;
  aspect-ratio: 16 / 9; cursor: pointer; overflow: hidden;
  border-radius: var(--spf-r-lg); box-shadow: var(--spf-sh-lg);
  background: var(--spf-ink);
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-facade iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-facade__play {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 4.6rem; height: 4.6rem; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 2.2rem; color: #fff;
  background: rgba(2,111,58,.92); box-shadow: 0 8px 28px rgba(0,0,0,.35);
  transition: transform .18s var(--spf-ease), background-color .18s var(--spf-ease);
}
.video-facade:hover .video-facade__play { transform: translate(-50%, -50%) scale(1.08); background: var(--spf-go); }
.video-facade.is-playing { cursor: default; }

.works { padding: clamp(3rem, 6vw, 5rem) 0; }

.work-filters { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin-bottom: 2.2rem; }
.work-filter {
  padding: .55rem 1.15rem; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1px solid var(--spf-line); color: var(--spf-ink);
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .92rem;
  transition: border-color .16s var(--spf-ease), background-color .16s var(--spf-ease), color .16s var(--spf-ease);
}
.work-filter:hover { border-color: var(--spf-blue); color: var(--spf-blue); }
.work-filter.is-active { background: var(--spf-blue); border-color: var(--spf-blue); color: #fff; }

.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.work-card {
  background: #fff; border: 1px solid var(--spf-line); border-radius: var(--spf-r-lg);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  transition: transform .22s var(--spf-ease), box-shadow .22s var(--spf-ease), border-color .22s var(--spf-ease);
}
.work-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
  background: var(--spf-thermal); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--spf-ease);
}
.work-card:hover { transform: translateY(-4px); box-shadow: var(--spf-sh-lg); border-color: transparent; }
.work-card:hover::before { transform: scaleX(1); }
.work-card[hidden] { display: none; }

.work-card__media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--spf-mist); }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--spf-ease); }
.work-card:hover .work-card__media img { transform: scale(1.05); }
.work-card__count {
  position: absolute; right: .75rem; bottom: .75rem;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .65rem; border-radius: 999px;
  background: rgba(11,27,43,.78); color: #fff; font-size: .78rem; font-weight: 600;
}
.is-hidden { display: none !important; }

.work-card__body { padding: 1.4rem 1.45rem 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.work-card__loc {
  display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem;
  font-size: .82rem; font-weight: 700; color: var(--spf-blue);
  text-transform: uppercase; letter-spacing: .05em;
}
.work-card__loc i { font-size: .9rem; }
.work-card__loc span { color: var(--spf-ink-soft); font-weight: 600; text-transform: none; letter-spacing: 0; }
.work-card h3 { margin: 0 0 .55rem; font-size: 1.12rem; }
.work-card__summary { margin: 0 0 1.2rem; color: var(--spf-ink-soft); font-size: .94rem; flex-grow: 1; }

.work-card__specs {
  display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin: 0;
  padding-top: 1rem; border-top: 1px solid var(--spf-line);
}
.work-card__specs dt {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--spf-ink-soft); font-weight: 700; margin-bottom: .15rem;
}
.work-card__specs dd { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: .95rem; }

.work-none { text-align: center; color: var(--spf-ink-soft); margin-top: 2rem; }

.works-empty {
  max-width: 34rem; margin-inline: auto; text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  background: var(--spf-mist); border: 1px dashed var(--spf-line); border-radius: var(--spf-r-lg);
}
.works-empty i { font-size: 2.4rem; color: var(--spf-blue); margin-bottom: 1rem; display: block; }
.works-empty h2 { margin: 0 0 .7rem; }
.works-empty p { color: var(--spf-ink-soft); margin: 0 0 1.6rem; }

/* ─── Повзунок before / after ───────────────────────────────── */

.ba { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--spf-mist); user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba__before-wrap { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.ba__before-wrap img { width: auto; height: 100%; max-width: none; }
.ba__range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; z-index: 4;
}
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; z-index: 3;
  background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.45); transform: translateX(-50%);
  pointer-events: none;
}
.ba__handle::after {
  content: '\F12F'; font-family: 'bootstrap-icons';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1rem;
  background: #fff; color: var(--spf-ink); box-shadow: 0 3px 12px rgba(0,0,0,.3);
}
.ba__tag {
  position: absolute; bottom: .75rem; z-index: 3;
  padding: .25rem .7rem; border-radius: 999px;
  background: rgba(11,27,43,.78); color: #fff;
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  pointer-events: none;
}
.ba__tag--before { left: .75rem; }
.ba__tag--after  { right: .75rem; }

/* ─── Ширші картки, коли проєктів мало ──────────────────────── */
@media (min-width: 992px) {
  .work-grid:has(> .work-card:last-child:nth-child(-n+2)) { grid-template-columns: repeat(2, 1fr); max-width: 56rem; margin-inline: auto; }
}

/* ─── 32. СТАТУСИ ФОРМИ ─────────────────────────────────────── */
/* Шаблон мав ховати ці блоки сам, але на цій збірці не спрацювало —
   показувались усі три одразу. Ховаємо явно; validate.js робить їх
   видимими через inline-стиль, який перебиває цей. */

.php-email-form .loading,
.php-email-form .error-message,
.php-email-form .sent-message { display: none; }

.php-email-form .loading {
  text-align: center; padding: 1rem;
  color: var(--spf-ink-soft); font-weight: 600;
}
.php-email-form .loading::before {
  content: ''; display: inline-block; vertical-align: -3px;
  width: 1.05rem; height: 1.05rem; margin-right: .55rem;
  border: 2px solid var(--spf-line); border-top-color: var(--spf-blue);
  border-radius: 50%; animation: spf-spin .8s linear infinite;
}
@keyframes spf-spin { to { transform: rotate(360deg); } }

/* Порожній блок помилки більше не малює червону смугу */
.php-email-form .error-message:empty { display: none !important; }

/* ─── 33. FAQ: ФІКС СТРИБКА ПРИ РОЗКРИТТІ ───────────────────── */
/* Симптом: відповідь на мить рендериться ширшою за блок, потім
   стискається. Дві типові причини, обидві закриті нижче.

   1. До ініціалізації Bootstrap усі .collapse видимі й розтягують
      контейнер — тому ховаємо їх одразу через CSS.
   2. Під час анімації Bootstrap ставить height:0 + overflow:hidden,
      і якщо вміст не має явної ширини, він на кадр обчислюється по
      max-content. Пінимо ширину і дозволяємо анімувати лише height. */

.faq-list li { display: block; width: 100%; overflow: hidden; }

/* До запуску JS показуємо тільки те, що явно відкрите */
.faq-list .collapse:not(.show) { display: none; }

.faq-list .collapse,
.faq-list .collapsing {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Анімуємо саме height — жодних побічних transition на width */
.faq-list .collapsing {
  overflow: hidden;
  height: 0;
  transition: height .3s var(--spf-ease);
}
@media (prefers-reduced-motion: reduce) {
  .faq-list .collapsing { transition: none; }
}

.faq-list .collapse p,
.faq-list .collapsing p {
  margin: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Питання не має стрибати, поки іконка міняється */
.faq-list a { min-height: 3.4rem; }
.faq-list .icon-show,
.faq-list .icon-close { width: 1.4rem; text-align: center; }

/* ─── 34. ЮРИДИЧНІ СТОРІНКИ ─────────────────────────────────── */

.legal { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.legal-doc {
  max-width: 46rem; margin-inline: auto;
  background: #fff; border: 1px solid var(--spf-line);
  border-radius: var(--spf-r-lg); box-shadow: var(--spf-sh);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.legal-lead {
  margin: 0 0 2rem; padding: 1.2rem 1.4rem;
  background: var(--spf-mist); border-left: 4px solid var(--spf-blue);
  border-radius: 0 var(--spf-r) var(--spf-r) 0;
  font-size: 1.02rem; line-height: 1.65; color: var(--spf-ink);
}
.legal-doc h2 {
  font-size: clamp(1.15rem, 1rem + .6vw, 1.35rem);
  margin: 2.2rem 0 .9rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--spf-line);
}
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc p { margin: 0 0 .9rem; color: var(--spf-ink-soft); line-height: 1.7; }
.legal-doc p strong { color: var(--spf-ink); }
.legal-doc ul { margin: 0 0 1rem; padding-left: 1.3rem; color: var(--spf-ink-soft); }
.legal-doc li { padding: .2rem 0; line-height: 1.6; }
.legal-doc a { color: var(--spf-blue); font-weight: 600; }
.legal-doc a:hover { color: var(--spf-go); }

.legal-contact {
  margin: 1.2rem 0 .5rem; padding: 1.2rem 1.4rem;
  background: var(--spf-mist); border-radius: var(--spf-r);
}
.legal-contact p { margin: 0 0 .5rem; color: var(--spf-ink); }
.legal-contact p:last-child { margin: 0; color: var(--spf-ink-soft); }

.hero--page-short .hero__lead time { font-weight: 700; color: #fff; }