@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&display=swap');

/* STEP 009B: modern design polish layer */

:root {
  --roof-red: #d01820;
  --roof-red-dark: #9f1118;
  --roof-black: #111111;
  --roof-paper: #f4f0e8;
  --roof-line: #e3dacb;
  --roof-muted: #655f58;
}

html {
  scroll-padding-top: 82px;
}

body {
  font-family: "Manrope", Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 18% 18%, rgba(208, 24, 32, .035), transparent 28%),
    linear-gradient(180deg, #f5f1e9 0%, #fbfaf7 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.container {
  width: min(1320px, calc(100% - 64px));
}

.site-header {
  background: rgba(244, 240, 232, .88);
  border-bottom: 1px solid rgba(17, 17, 17, .075);
}

.header-inner {
  height: 72px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  font-size: 22px;
  border-width: 2px;
}

.brand-text strong {
  font-size: 18px;
  letter-spacing: .025em;
}

.brand-text small {
  font-size: 10px;
}

.main-nav {
  gap: 18px;
  font-size: 13px;
  font-weight: 600;
}

.header-contact {
  gap: 12px;
}

.phone,
.insta-link {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
}

.header-cta {
  min-height: 42px;
  padding: 0 20px;
  font-size: 13px;
}

.hero {
  padding: 42px 0 44px;
}

.hero-grid {
  grid-template-columns: minmax(0, .92fr) minmax(430px, .82fr);
  gap: 56px;
}

.eyebrow {
  margin-bottom: 13px;
  font-size: 11px;
  letter-spacing: .16em;
}

h1 {
  max-width: 650px;
  margin-bottom: 18px;
  font-family: "Manrope", Arial, Helvetica, sans-serif;
  font-size: clamp(42px, 4.05vw, 62px);
  line-height: 1.02;
  letter-spacing: -.064em;
  font-weight: 900;
}

h2 {
  font-family: "Manrope", Arial, Helvetica, sans-serif;
  font-weight: 900;
  letter-spacing: -.055em;
}

.hero-lead {
  max-width: 620px;
  font-size: 16px;
  line-height: 1.58;
  color: var(--roof-muted);
}

.hero-actions {
  margin: 24px 0 22px;
}

.btn,
.header-cta {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.btn:hover,
.header-cta:hover {
  transform: translateY(-1px);
}

.proof-row {
  gap: 12px;
}

.proof-item {
  min-width: 112px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.70);
}

.proof-item span {
  font-size: 24px;
}

.proof-item p {
  font-size: 10px;
  letter-spacing: .085em;
}

.hero-media-modern {
  display: flex;
  justify-content: flex-end;
}

.roof-visual-card {
  position: relative;
  width: min(100%, 530px);
}

.roof-visual-card img {
  display: block;
  width: 100%;
  border-radius: 34px;
  box-shadow: 0 28px 85px rgba(20, 16, 12, .15);
}

.roof-visual-card .media-caption {
  left: 28px;
  right: 28px;
  bottom: 24px;
}

.service-strip {
  padding: 52px 0 64px;
}

.strip-head,
.section-title {
  margin-bottom: 26px;
}

.strip-grid {
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,.64);
}

.strip-grid article {
  min-height: 184px;
  padding: 22px;
}

.line-icon {
  margin-bottom: 26px;
}

.section {
  padding: 72px 0;
}

.project-card {
  border-radius: 24px;
}

.project-img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
}

.project-text {
  padding: 21px;
}

.details-grid,
.about-grid,
.footer-grid {
  gap: 34px;
}

.materials-card,
.process-card,
.lead-card {
  padding: 32px;
  border-radius: 26px;
}

.brand-row span {
  padding: 16px;
}

.process-card li {
  padding: 15px 0;
}

.about {
  padding-bottom: 76px;
}

.site-footer {
  padding: 50px 0;
}

@media (max-width: 1120px) {
  .container {
    width: min(100% - 36px, 1320px);
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-media-modern {
    justify-content: flex-start;
  }

  .roof-visual-card {
    width: min(100%, 720px);
  }
}

@media (max-width: 680px) {
  .container {
    width: min(100% - 26px, 1320px);
  }

  .header-inner {
    height: 68px;
  }

  h1 {
    font-size: 37px;
    letter-spacing: -.055em;
  }

  .hero {
    padding: 36px 0 42px;
  }

  .roof-visual-card img {
    border-radius: 24px;
  }

  .section {
    padding: 58px 0;
  }
}


/* STEP 009C: premium refinement */
.site-header {
  box-shadow: 0 10px 34px rgba(17, 17, 17, .035);
}

.header-inner {
  height: 68px;
}

.brand {
  gap: 11px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  font-size: 21px;
}

.brand-text strong {
  font-size: 17px;
}

.main-nav {
  gap: 17px;
  font-size: 12.8px;
}

.header-contact {
  gap: 11px;
}

.phone,
.insta-link {
  font-size: 12.8px;
}

.header-cta {
  min-height: 40px;
  padding: 0 19px;
  border-radius: 18px;
}

.hero {
  padding: 38px 0 38px;
}

.hero-grid {
  grid-template-columns: minmax(0, .9fr) minmax(410px, .78fr);
  gap: 48px;
}

h1 {
  max-width: 620px;
  font-size: clamp(41px, 3.85vw, 58px);
  line-height: 1.015;
}

.hero-lead {
  max-width: 590px;
}

.roof-visual-card {
  width: min(100%, 510px);
}

.roof-visual-card img {
  border-radius: 32px;
  box-shadow: 0 28px 90px rgba(20, 16, 12, .18);
}

.roof-visual-card .media-caption {
  left: 24px;
  right: 24px;
  bottom: 22px;
  padding: 16px 18px;
}

.service-strip {
  padding: 46px 0 58px;
}

.section {
  padding: 66px 0;
}

.project-img {
  height: 220px;
}

.project-card {
  box-shadow: 0 18px 60px rgba(0,0,0,.16);
}

.materials-card,
.process-card,
.lead-card {
  padding: 30px;
}

@media (max-width: 1120px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .roof-visual-card {
    width: min(100%, 680px);
  }
}

@media (max-width: 680px) {
  .header-inner {
    height: 66px;
  }

  h1 {
    font-size: 36px;
  }

  .hero {
    padding: 32px 0 38px;
  }

  .roof-visual-card {
    width: 100%;
  }
}


/* STEP 009D: header and hero final balance */
.header-inner {
  height: 64px;
}

.site-header {
  background: rgba(244, 240, 232, .92);
}

.brand-mark {
  width: 40px;
  height: 40px;
  font-size: 20px;
}

.brand-text strong {
  font-size: 16px;
}

.brand-text small {
  font-size: 9px;
  letter-spacing: .14em;
}

.main-nav {
  gap: 16px;
  font-size: 12.5px;
}

.header-contact {
  gap: 10px;
}

.phone,
.insta-link {
  font-size: 12.5px;
}

.header-cta {
  min-height: 38px;
  padding: 0 18px;
  border-radius: 16px;
}

.hero {
  padding: 34px 0 34px;
}

.hero-grid {
  grid-template-columns: minmax(0, .88fr) minmax(390px, .74fr);
  gap: 42px;
}

h1 {
  max-width: 600px;
  font-size: clamp(39px, 3.55vw, 54px);
  line-height: 1.02;
  letter-spacing: -.062em;
  margin-bottom: 16px;
}

.hero-lead {
  max-width: 570px;
  font-size: 15.5px;
  line-height: 1.55;
}

.hero-actions {
  margin: 22px 0 20px;
}

.btn {
  min-height: 44px;
  padding: 0 22px;
}

.proof-item {
  min-width: 106px;
  padding: 11px 13px;
}

.proof-item span {
  font-size: 22px;
}

.roof-visual-card {
  width: min(100%, 500px);
}

.roof-visual-card img {
  border-radius: 30px;
}

.service-strip {
  padding: 38px 0 56px;
}

@media (max-width: 1120px) {
  .header-inner {
    height: 68px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .roof-visual-card {
    width: min(100%, 680px);
  }
}

@media (max-width: 680px) {
  h1 {
    font-size: 35px;
  }

  .hero {
    padding: 30px 0 36px;
  }
}

/* STEP 009E: section rhythm and sticky header polish */

/* чтобы sticky header не перекрывал заголовки при переходах по меню */
#services,
#projects,
#materials,
#process,
#about,
#contacts,
#lead {
  scroll-margin-top: 92px;
}

/* чуть более дорогая верхняя линия */
.site-header {
  background: rgba(244, 240, 232, .94);
  border-bottom: 1px solid rgba(17,17,17,.065);
}

.header-inner {
  height: 62px;
}

.main-nav a {
  position: relative;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: #d01820;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

.main-nav a:hover::after {
  transform: scaleX(1);
}

/* hero ещё чуть плотнее и спокойнее */
.hero {
  padding: 32px 0 32px;
}

.hero-grid {
  grid-template-columns: minmax(0, .9fr) minmax(380px, .7fr);
  gap: 38px;
}

h1 {
  max-width: 590px;
  font-size: clamp(38px, 3.45vw, 52px);
}

.hero-lead {
  max-width: 555px;
}

.roof-visual-card {
  width: min(100%, 470px);
}

/* услуги — меньше ощущения огромной таблицы */
.service-strip {
  padding: 34px 0 52px;
}

.strip-head {
  align-items: center;
  margin-bottom: 22px;
}

.strip-head h2 {
  font-size: clamp(32px, 3vw, 44px);
}

.strip-grid {
  border-radius: 22px;
  background: rgba(255,255,255,.70);
  box-shadow: 0 18px 60px rgba(20,16,12,.045);
}

.strip-grid article {
  min-height: 168px;
  padding: 20px 20px 22px;
}

.line-icon {
  margin-bottom: 24px;
  font-size: 13px;
}

.strip-grid h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.strip-grid p {
  font-size: 14px;
  line-height: 1.55;
}

/* чёрный блок проектов — чуть меньше вертикального шума */
.projects {
  padding-top: 64px;
  padding-bottom: 64px;
}

.projects .section-title {
  margin-bottom: 26px;
}

.projects h2 {
  max-width: 760px;
}

/* общая плотность секций */
.section {
  padding: 62px 0;
}

.materials-card,
.process-card,
.lead-card {
  padding: 28px;
}

.about {
  padding-top: 62px;
  padding-bottom: 68px;
}

/* footer плотнее */
.site-footer {
  padding: 44px 0;
}

@media (max-width: 1120px) {
  .header-inner {
    height: 68px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .roof-visual-card {
    width: min(100%, 650px);
  }

  .strip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  #services,
  #projects,
  #materials,
  #process,
  #about,
  #contacts,
  #lead {
    scroll-margin-top: 82px;
  }

  .hero {
    padding: 28px 0 34px;
  }

  h1 {
    font-size: 34px;
  }

  .strip-grid {
    grid-template-columns: 1fr;
  }

  .strip-grid article {
    min-height: auto;
  }
}

/* STEP 010B: generated WEBP visual integration */
.roof-visual-card img,
.project-img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.roof-visual-card img {
  aspect-ratio: 4 / 3;
}

.project-img {
  height: 235px;
  object-position: center;
}

.project-card {
  overflow: hidden;
}

@media (max-width: 680px) {
  .project-img {
    height: 220px;
  }
}

/* STEP 010C: polish after generated visuals insertion */

/* sticky header should not visually cut section titles */
.service-strip,
.projects,
.details-section,
.about {
  scroll-margin-top: 110px;
}

/* give sections more safe breathing room under sticky header */
.service-strip {
  padding-top: 54px;
}

.projects {
  padding-top: 86px;
}

/* hero generated photo balance */
.roof-visual-card {
  width: min(100%, 500px);
}

.roof-visual-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.03) contrast(1.02);
}

/* make project photos feel more premium */
.project-img {
  height: 250px;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.03) contrast(1.03);
}

.project-card {
  background: #1b1816;
  border: 1px solid rgba(255,255,255,.13);
}

.project-card:hover .project-img {
  transform: scale(1.025);
}

.project-img {
  transition: transform .35s ease;
}

/* reduce heavy black block feeling slightly */
.projects {
  background:
    radial-gradient(circle at 78% 8%, rgba(208, 24, 32, .10), transparent 24%),
    #111;
}

@media (max-width: 680px) {
  .service-strip {
    padding-top: 44px;
  }

  .projects {
    padding-top: 68px;
  }

  .project-img {
    height: 220px;
  }
}

/* STEP 011A: stronger top line, bigger hero image, clearer typography */

/* Typography readability */
body {
  color: #101010;
}

h1,
h2,
h3 {
  color: #0d0d0d;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

h1 {
  font-weight: 900;
  letter-spacing: -.052em;
  max-width: 640px;
  font-size: clamp(40px, 3.8vw, 58px);
}

.hero-lead,
.strip-grid p,
.project-text p,
.materials-card p,
.about-copy p,
.footer-brand p {
  color: #4e4a45;
  font-weight: 500;
}

/* Header / top navigation */
.header-inner {
  height: 70px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  font-size: 22px;
}

.brand-text strong {
  font-size: 18px;
  letter-spacing: .03em;
}

.brand-text small {
  font-size: 10px;
  letter-spacing: .15em;
}

.main-nav {
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(17,17,17,.07);
  border-radius: 999px;
  background: rgba(255,255,255,.52);
  box-shadow: 0 12px 34px rgba(17,17,17,.045);
}

.main-nav a {
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  color: #25211f;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.main-nav a:hover {
  background: #111;
  color: #fff;
  transform: translateY(-1px);
}

.main-nav a::after {
  display: none;
}

/* Header contact cluster */
.header-contact {
  gap: 13px;
}

.phone {
  font-size: 14px;
  font-weight: 900;
  color: #111;
}

.insta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 900;
  color: #d01820;
  text-decoration: none;
}

.ig-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-cta {
  min-height: 44px;
  padding: 0 24px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 18px 42px rgba(208,24,32,.24);
}

/* Hero balance: bigger visual */
.hero {
  padding: 36px 0 38px;
}

.hero-grid {
  grid-template-columns: minmax(0, .86fr) minmax(480px, .88fr);
  gap: 52px;
  align-items: center;
}

.roof-visual-card {
  width: min(100%, 590px);
}

.roof-visual-card img {
  border-radius: 34px;
  box-shadow: 0 32px 95px rgba(20,16,12,.20);
}

.roof-visual-card .media-caption {
  left: 28px;
  right: 28px;
  bottom: 24px;
  padding: 18px 22px;
  border-radius: 20px;
}

.roof-visual-card .media-caption strong {
  font-size: 18px;
}

.roof-visual-card .media-caption span {
  font-size: 13px;
}

/* Buttons readability */
.btn {
  font-weight: 900;
  letter-spacing: -.01em;
}

/* Trust cards */
.proof-item {
  background: rgba(255,255,255,.82);
  box-shadow: 0 14px 38px rgba(17,17,17,.055);
}

.proof-item span {
  font-size: 25px;
}

/* Section headings */
.strip-head h2,
.projects h2,
.materials-card h2,
.process-card h2,
.about-copy h2 {
  letter-spacing: -.045em;
}

/* Responsive safety */
@media (max-width: 1180px) {
  .main-nav {
    gap: 4px;
    padding: 5px;
  }

  .main-nav a {
    padding: 8px 9px;
    font-size: 13px;
  }

  .header-contact {
    gap: 9px;
  }

  .phone,
  .insta-link {
    font-size: 13px;
  }

  .header-cta {
    padding: 0 18px;
  }
}

@media (max-width: 1040px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .roof-visual-card {
    width: min(100%, 720px);
  }
}

@media (max-width: 760px) {
  .main-nav {
    display: none;
  }

  .header-inner {
    height: 68px;
  }

  h1 {
    font-size: 35px;
  }

  .roof-visual-card {
    width: 100%;
  }
}


/* STEP 012A: service visuals */
.strip-grid {
  align-items: stretch;
}

.strip-grid article {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 330px;
}

.service-visual {
  margin: 0;
  width: 100%;
  height: 152px;
  overflow: hidden;
  background: #111;
  border-bottom: 1px solid rgba(17,17,17,.08);
}

.service-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.03);
  transition: transform .35s ease;
}

.strip-grid article:hover .service-visual img {
  transform: scale(1.035);
}

.strip-grid article .line-icon {
  margin: 18px 20px 24px;
}

.strip-grid article h3 {
  padding: 0 20px;
  margin-bottom: 9px;
}

.strip-grid article p {
  padding: 0 20px 22px;
}

@media (max-width: 1120px) {
  .service-visual {
    height: 180px;
  }
}

@media (max-width: 680px) {
  .strip-grid article {
    min-height: auto;
  }

  .service-visual {
    height: 210px;
  }
}

/* STEP 012B: fix dark project cards readability and sticky overlap */

/* sticky header safety */
#projects,
.projects {
  scroll-margin-top: 120px;
}

.projects {
  padding-top: 96px;
}

/* restore readable typography inside dark project section */
.projects h2,
.projects .section-kicker,
.projects .section-title a,
.project-card h3,
.project-card p,
.project-text h3,
.project-text p {
  text-shadow: none;
}

.projects h2 {
  color: #ffffff;
}

.projects .section-kicker {
  color: #ff4048;
}

.projects .section-title a {
  color: #ff4048;
}

.project-text h3,
.project-card h3 {
  color: #ffffff;
  font-weight: 900;
}

.project-text p,
.project-card p {
  color: rgba(255, 255, 255, .62);
  font-weight: 500;
}

/* make service visuals slightly cleaner */
.service-visual {
  height: 158px;
}

.strip-grid article {
  min-height: 338px;
}

.strip-grid h3 {
  color: #0d0d0d;
  text-shadow: none;
}

.strip-grid p {
  color: #4e4a45;
}

/* a little more premium depth */
.strip-grid {
  box-shadow: 0 22px 70px rgba(20,16,12,.07);
}

.project-card {
  box-shadow: 0 22px 74px rgba(0,0,0,.30);
}

@media (max-width: 680px) {
  .projects {
    padding-top: 76px;
  }

  .service-visual {
    height: 210px;
  }
}

/* STEP 012C: sticky header readability fix */

/* делаем шапку визуально плотнее, чтобы секции не просвечивали через неё */
.site-header {
  background: rgba(244, 240, 232, .985) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 38px rgba(17, 17, 17, .075);
}

/* безопасная зона для крупных заголовков под sticky header */
.projects {
  padding-top: 118px;
}

.projects .section-title {
  padding-top: 8px;
}

/* чтобы заголовок чёрного блока не казался обрезанным при прокрутке */
.projects h2 {
  line-height: 1.08;
  margin-top: 0;
}

/* немного лучше балансируем блок услуг после вставки картинок */
.service-strip {
  padding-bottom: 64px;
}

.strip-grid {
  overflow: hidden;
}

.service-visual {
  height: 164px;
}

@media (max-width: 680px) {
  .projects {
    padding-top: 86px;
  }

  .service-visual {
    height: 210px;
  }
}

/* STEP 013A: roofman logo image package */
.brand-mark-img,
.footer-mark-img {
  overflow: hidden;
  background: transparent !important;
  border: 0 !important;
  box-shadow: 0 14px 34px rgba(208,24,32,.16);
}

.brand-mark-img img,
.footer-mark-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-mark-img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
}


/* STEP 013B: correct ROOFMAN logo mark */
.brand-mark-img,
.footer-mark-img {
  overflow: hidden;
  background: transparent !important;
  border: 0 !important;
}

.brand-mark-img img,
.footer-mark-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-mark-img {
  box-shadow: 0 12px 30px rgba(208,24,32,.14);
}

.footer-mark-img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
}

/* STEP 013C: final ROOFMAN logo size polish */
.brand-mark-img {
  width: 48px;
  height: 48px;
  box-shadow: none !important;
}

.footer-mark-img {
  width: 58px;
  height: 58px;
  box-shadow: none !important;
}

.brand-mark-img img,
.footer-mark-img img {
  border-radius: 50%;
}

/* STEP 014A: mobile final polish */

@media (max-width: 760px) {
  html {
    scroll-padding-top: 96px;
  }

  body {
    overflow-x: hidden;
  }

  .site-header {
    min-height: 82px;
  }

  .header-inner {
    height: 82px;
    padding-left: 22px;
    padding-right: 22px;
  }

  .brand-mark-img {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
  }

  .brand-text strong {
    font-size: 26px;
    letter-spacing: .02em;
  }

  .brand-text small {
    font-size: 10px;
  }

  .mobile-menu-toggle {
    width: 62px;
    height: 62px;
    border-radius: 50%;
  }

  .hero,
  .service-strip,
  .projects,
  .details-section,
  .about,
  .site-footer {
    scroll-margin-top: 105px;
  }

  .hero {
    padding-top: 42px;
    padding-bottom: 54px;
  }

  .hero h1,
  h1 {
    font-size: clamp(42px, 11vw, 54px);
    line-height: .98;
    letter-spacing: -.055em;
  }

  .hero-lead {
    font-size: 21px;
    line-height: 1.55;
  }

  .hero-actions {
    gap: 14px;
  }

  .hero-actions .btn {
    width: 100%;
    min-height: 58px;
    justify-content: center;
  }

  .proof-grid {
    gap: 14px;
  }

  .proof-item {
    width: 100%;
    min-height: 92px;
  }

  .roof-visual-card {
    margin-top: 28px;
  }

  .roof-visual-card .media-caption {
    left: 16px;
    right: 16px;
    bottom: 18px;
    padding: 18px 20px;
  }

  .service-strip {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .strip-head {
    gap: 14px;
    margin-bottom: 30px;
  }

  .strip-head h2 {
    font-size: clamp(40px, 10vw, 52px);
    line-height: 1;
  }

  .strip-grid article {
    border-radius: 28px;
  }

  .service-visual {
    height: 245px;
  }

  .projects {
    padding-top: 88px;
    padding-bottom: 72px;
  }

  .projects .section-title {
    gap: 18px;
    margin-bottom: 34px;
  }

  .projects h2 {
    font-size: clamp(36px, 10vw, 48px);
    line-height: 1.05;
  }

  .project-card {
    border-radius: 28px;
    margin-bottom: 22px;
  }

  .project-img {
    height: 250px;
  }

  .project-text {
    padding: 26px 26px 30px;
  }

  .project-text h3 {
    font-size: 28px;
    line-height: 1.08;
  }

  .project-text p {
    font-size: 21px;
    line-height: 1.4;
  }

  .details-section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .materials-card,
  .process-card,
  .about-card {
    border-radius: 28px;
  }

  .materials-card h2,
  .process-card h2,
  .about-copy h2 {
    font-size: clamp(38px, 10vw, 50px);
    line-height: 1.04;
    letter-spacing: -.055em;
  }

  .materials-card p,
  .about-copy p {
    font-size: 22px;
    line-height: 1.55;
  }

  .process-list li {
    grid-template-columns: 56px 1fr;
    gap: 16px;
    font-size: 21px;
  }

  .about {
    padding-top: 74px;
    padding-bottom: 74px;
  }

  .cta-card {
    border-radius: 28px;
    padding: 42px 26px;
  }

  .cta-card h3 {
    font-size: 26px;
    line-height: 1.15;
  }

  .cta-card p {
    font-size: 20px;
    line-height: 1.5;
  }

  .site-footer {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .footer-grid {
    gap: 36px;
  }

  .footer-brand p,
  .footer-links a,
  .footer-contact a,
  .footer-contact span {
    font-size: 19px;
    line-height: 1.55;
  }

  .footer-mark-img {
    width: 62px;
    height: 62px;
  }
}

@media (max-width: 420px) {
  .brand-text strong {
    font-size: 24px;
  }

  .hero h1,
  h1 {
    font-size: 40px;
  }

  .hero-lead {
    font-size: 19px;
  }

  .service-visual {
    height: 225px;
  }

  .project-img {
    height: 235px;
  }

  .materials-card h2,
  .process-card h2,
  .about-copy h2 {
    font-size: 38px;
  }
}


/* STEP 015A: expert block, process polish, footer links, back-to-top */

/* Expert materials block */
.materials-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, rgba(208,24,32,.08), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,245,238,.94));
}

.materials-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, #d01820, rgba(208,24,32,.14));
}

.materials-card .kicker,
.materials-card .section-kicker {
  color: #d01820;
}

.material-tags,
.materials-list,
.materials-card .brand-grid {
  position: relative;
  z-index: 1;
}

.material-tags span,
.materials-list span,
.materials-card .brand-grid span,
.materials-card a:not(.btn) {
  border-color: rgba(208,24,32,.18) !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 12px 28px rgba(20,16,12,.045);
}

.material-tags span::before,
.materials-list span::before,
.materials-card .brand-grid span::before {
  content: "✓";
  color: #d01820;
  margin-right: 8px;
  font-weight: 900;
}

/* Process block: more premium and structured */
.process-card {
  background:
    radial-gradient(circle at 86% 10%, rgba(208,24,32,.14), transparent 28%),
    linear-gradient(145deg, #111, #171312);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 28px 90px rgba(0,0,0,.24);
}

.process-card h2 {
  max-width: 620px;
}

.process-list {
  counter-reset: process;
}

.process-list li {
  border-color: rgba(255,255,255,.11);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.process-list li:hover {
  transform: translateX(4px);
  background: rgba(255,255,255,.035);
  border-color: rgba(208,24,32,.28);
}

.process-list li span {
  color: #ff4048;
  font-weight: 900;
}

.process-list li p,
.process-list li div,
.process-list li strong {
  color: rgba(255,255,255,.9);
}

/* Footer: make links visibly clickable */
.site-footer a,
.footer-contact a,
.footer-links a {
  color: rgba(255,255,255,.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(208,24,32,.42);
  padding-bottom: 3px;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}

.site-footer a:hover,
.footer-contact a:hover,
.footer-links a:hover {
  color: #ffffff;
  border-color: #d01820;
}

.footer-contact a[href^="tel"],
.footer-contact a[href^="mailto"],
.footer-contact a[href*="instagram"],
.footer-contact a[href*="roofman_kz"] {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
}

.footer-contact a[href^="tel"]::before {
  content: "☎";
  color: #d01820;
}

.footer-contact a[href^="mailto"]::before {
  content: "✉";
  color: #d01820;
}

.footer-contact a[href*="instagram"]::before,
.footer-contact a[href*="roofman_kz"]::before {
  content: "◎";
  color: #d01820;
}

/* Back to top */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 80;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(208,24,32,.22);
  border-radius: 999px;
  background: rgba(17,17,17,.92);
  color: #fff;
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, background .22s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  background: #d01820;
}

/* Mobile refinement for these blocks */
@media (max-width: 760px) {
  .materials-card {
    padding-top: 48px;
  }

  .materials-card h2 {
    font-size: clamp(34px, 9.2vw, 44px);
    line-height: 1.04;
  }

  .materials-card p {
    font-size: 20px;
  }

  .material-tags,
  .materials-list,
  .materials-card .brand-grid {
    gap: 14px;
  }

  .process-card {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .process-card h2 {
    font-size: clamp(34px, 9.2vw, 44px);
    line-height: 1.04;
  }

  .process-list li {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .back-to-top {
    right: 18px;
    bottom: 84px;
    width: 50px;
    height: 50px;
    font-size: 23px;
  }

  .site-footer a,
  .footer-contact a,
  .footer-links a {
    padding-bottom: 4px;
  }
}

/* STEP 015B: expert kicker and footer link polish */

/* точно меняем визуальную логику экспертного блока */
.materials-card .kicker,
.materials-card .section-kicker,
.materials-card > p:first-child {
  color: #d01820 !important;
}

/* футер: ссылка должна выглядеть кликабельной, но без длинных линий на всю колонку */
.site-footer a,
.footer-contact a,
.footer-links a {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: max-content !important;
  border-bottom: 1px solid rgba(208,24,32,.55) !important;
  padding-bottom: 3px;
  line-height: 1.35;
}

/* убираем случайные длинные подчеркивания у контейнеров */
.footer-brand,
.footer-brand p,
.footer-grid,
.footer-contact,
.footer-links {
  border-bottom: 0 !important;
}

/* делаем футер чуть дороже и спокойнее */
.footer-contact,
.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-contact a,
.footer-links a {
  margin-bottom: 10px;
}

.footer-contact span {
  border-bottom: 0 !important;
}

/* стрелка наверх — чуть заметнее, но без грубости */
.back-to-top {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(17,17,17,.94);
}

.back-to-top.is-visible {
  box-shadow: 0 18px 46px rgba(0,0,0,.30), 0 0 0 1px rgba(208,24,32,.22);
}

@media (max-width: 760px) {
  .footer-contact a,
  .footer-links a {
    margin-bottom: 12px;
  }
}

/* STEP 015C: footer clickable links like top navigation */

/* футер: возвращаем аккуратную колонку ссылок */
.site-footer .footer-links,
.site-footer .footer-contact {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

/* убираем длинные линии и делаем ссылки похожими на элементы навигации */
.site-footer a,
.footer-links a,
.footer-contact a {
  border-bottom: 0 !important;
  text-decoration: none !important;
}

.site-footer .footer-links a,
.site-footer .footer-contact a {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  width: auto !important;
  max-width: max-content !important;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  color: rgba(255,255,255,.74) !important;
  background: rgba(255,255,255,0);
  border: 1px solid rgba(255,255,255,0) !important;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

/* состояние наведения — как мягкая подсветка в верхней линейке */
.site-footer .footer-links a:hover,
.site-footer .footer-contact a:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,.075);
  border-color: rgba(208,24,32,.46) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

/* красный микро-акцент слева у ссылок */
.site-footer .footer-links a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d01820;
  opacity: .72;
  flex: 0 0 6px;
}

/* контакты с понятными иконками */
.footer-contact a[href^="tel"]::before {
  content: "☎";
  color: #d01820;
  font-weight: 900;
}

.footer-contact a[href^="mailto"]::before {
  content: "✉";
  color: #d01820;
  font-weight: 900;
}

.footer-contact a[href*="instagram"]::before,
.footer-contact a[href*="roofman_kz"]::before {
  content: "◎";
  color: #d01820;
  font-weight: 900;
}

/* не-ссылка в контактах */
.footer-contact span {
  display: inline-flex;
  width: fit-content;
  padding: 7px 0;
  color: rgba(255,255,255,.62);
  font-weight: 600;
  border: 0 !important;
}

/* брендовая линия под ROOFMAN в футере — аккуратно, не как ссылка */
.footer-brand strong,
.footer-brand .footer-logo-text,
.footer-brand h3 {
  border-bottom: 0 !important;
}

/* mobile */
@media (max-width: 760px) {
  .site-footer .footer-links,
  .site-footer .footer-contact {
    gap: 12px !important;
  }

  .site-footer .footer-links a,
  .site-footer .footer-contact a {
    padding: 9px 13px;
    font-size: 19px;
  }

  .footer-contact span {
    font-size: 19px;
  }
}

/* STEP 015D: cleaner footer links + WhatsApp original-style button */

/* =========================
   FOOTER LINKS — CLEANER
   ========================= */
.site-footer .footer-links,
.site-footer .footer-contact {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.site-footer .footer-links a,
.site-footer .footer-contact a {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  max-width: 100%;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.82) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  line-height: 1.35;
  transition:
    color .18s ease,
    opacity .18s ease,
    transform .18s ease;
}

.site-footer .footer-links a:hover,
.site-footer .footer-contact a:hover {
  color: #ffffff !important;
  opacity: 1 !important;
  transform: translateX(3px);
}

.site-footer .footer-links a span,
.site-footer .footer-contact a span {
  position: relative;
}

.site-footer .footer-links a::after,
.site-footer .footer-contact a::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  margin-top: 2px;
  background: #d01820;
  transition: width .18s ease;
  position: absolute;
  left: 0;
  bottom: -3px;
}

.site-footer .footer-links a,
.site-footer .footer-contact a {
  position: relative;
}

.site-footer .footer-links a:hover::after,
.site-footer .footer-contact a:hover::after {
  width: 100%;
}

/* footer rows stay separated and readable */
.site-footer .footer-contact,
.site-footer .footer-links {
  min-width: 0;
}

.site-footer .footer-contact a[href^="tel"],
.site-footer .footer-contact a[href^="mailto"],
.site-footer .footer-contact a[href*="instagram"],
.site-footer .footer-contact a[href*="roofman_kz"] {
  font-weight: 700 !important;
}

.site-footer .footer-contact span {
  color: rgba(255,255,255,.64) !important;
  font-weight: 500 !important;
}

/* =========================
   WHATSAPP BUTTON — GREEN + ICON
   ========================= */

/* target WhatsApp links/buttons quite broadly */
a[href*="wa.me"],
a[href*="whatsapp"],
a[href*="api.whatsapp.com"] {
  --wa-green: #25D366;
  --wa-green-hover: #1ebe5d;
}

/* lead CTA / WhatsApp main button */
.lead-card a[href*="wa.me"],
.lead-card a[href*="whatsapp"],
.lead-card a[href*="api.whatsapp.com"],
.cta-card a[href*="wa.me"],
.cta-card a[href*="whatsapp"],
.cta-card a[href*="api.whatsapp.com"],
.contact-card a[href*="wa.me"],
.contact-card a[href*="whatsapp"],
.contact-card a[href*="api.whatsapp.com"],
a.btn-whatsapp,
.btn-whatsapp {
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800 !important;
  box-shadow: 0 16px 40px rgba(37,211,102,.24) !important;
  transition:
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease !important;
}

.lead-card a[href*="wa.me"]:hover,
.lead-card a[href*="whatsapp"]:hover,
.lead-card a[href*="api.whatsapp.com"]:hover,
.cta-card a[href*="wa.me"]:hover,
.cta-card a[href*="whatsapp"]:hover,
.cta-card a[href*="api.whatsapp.com"]:hover,
.contact-card a[href*="wa.me"]:hover,
.contact-card a[href*="whatsapp"]:hover,
.contact-card a[href*="api.whatsapp.com"]:hover,
a.btn-whatsapp:hover,
.btn-whatsapp:hover {
  background: #1ebe5d !important;
  border-color: #1ebe5d !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(37,211,102,.30) !important;
}

/* add WhatsApp icon */
.lead-card a[href*="wa.me"]::before,
.lead-card a[href*="whatsapp"]::before,
.lead-card a[href*="api.whatsapp.com"]::before,
.cta-card a[href*="wa.me"]::before,
.cta-card a[href*="whatsapp"]::before,
.cta-card a[href*="api.whatsapp.com"]::before,
.contact-card a[href*="wa.me"]::before,
.contact-card a[href*="whatsapp"]::before,
.contact-card a[href*="api.whatsapp.com"]::before,
a.btn-whatsapp::before,
.btn-whatsapp::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='white' d='M19.11 17.21c-.28-.14-1.64-.81-1.89-.9-.25-.09-.43-.14-.61.14-.18.28-.7.9-.86 1.08-.16.19-.31.21-.59.07-.28-.14-1.16-.43-2.21-1.37-.82-.73-1.37-1.63-1.53-1.91-.16-.28-.02-.43.12-.57.13-.13.28-.33.43-.49.14-.17.19-.28.29-.47.09-.19.05-.35-.02-.49-.07-.14-.61-1.48-.84-2.03-.22-.53-.45-.46-.61-.47h-.52c-.19 0-.49.07-.75.35-.26.28-.98.96-.98 2.35 0 1.39 1 2.73 1.14 2.92.14.19 1.96 3 4.76 4.2.67.29 1.2.46 1.61.59.68.22 1.29.19 1.78.12.54-.08 1.64-.67 1.87-1.31.23-.64.23-1.19.16-1.31-.07-.11-.25-.18-.52-.32Z'/><path fill='white' d='M16 3C8.82 3 3 8.73 3 15.8c0 2.28.61 4.5 1.77 6.45L3 29l6.95-1.8a13.1 13.1 0 0 0 6.05 1.47c7.18 0 13-5.73 13-12.8C29 8.73 23.18 3 16 3Zm0 23.47c-1.95 0-3.86-.52-5.53-1.5l-.4-.23-4.12 1.07 1.1-4-.26-.41a10.6 10.6 0 0 1-1.62-5.6c0-5.86 4.87-10.63 10.83-10.63 5.97 0 10.83 4.77 10.83 10.63 0 5.86-4.86 10.67-10.83 10.67Z'/></svg>");
}

/* mobile readability */
@media (max-width: 760px) {
  .site-footer .footer-links a,
  .site-footer .footer-contact a {
    font-size: 18px !important;
  }

  .lead-card a[href*="wa.me"]::before,
  .lead-card a[href*="whatsapp"]::before,
  .lead-card a[href*="api.whatsapp.com"]::before,
  .cta-card a[href*="wa.me"]::before,
  .cta-card a[href*="whatsapp"]::before,
  .cta-card a[href*="api.whatsapp.com"]::before,
  .contact-card a[href*="wa.me"]::before,
  .contact-card a[href*="whatsapp"]::before,
  .contact-card a[href*="api.whatsapp.com"]::before,
  a.btn-whatsapp::before,
  .btn-whatsapp::before {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
  }
}


/* STEP 016B: inner pages v1 */
.inner-page main {
  background: var(--page-bg, #f5f0e8);
}

.inner-hero {
  padding: 150px 0 90px;
  background:
    radial-gradient(circle at 86% 20%, rgba(208,24,32,.08), transparent 28%),
    linear-gradient(180deg, #f6f1e9, #fffaf2);
}

.inner-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .88fr);
  gap: 56px;
  align-items: center;
}

.inner-hero h1,
.inner-section h1 {
  max-width: 980px;
  margin: 0 0 24px;
  color: #111;
  font-size: clamp(56px, 6vw, 92px);
  line-height: .94;
  letter-spacing: -.06em;
}

.inner-hero p {
  max-width: 720px;
  color: rgba(17,17,17,.66);
  font-size: 22px;
  line-height: 1.55;
}

.inner-hero-media,
.inner-hero-media img {
  border-radius: 34px;
  overflow: hidden;
}

.inner-hero-media {
  box-shadow: 0 30px 90px rgba(17,17,17,.13);
}

.inner-hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 1.35 / 1;
  object-fit: cover;
}

.inner-section {
  padding: 92px 0;
}

.dark-hero,
.dark-section {
  background:
    radial-gradient(circle at 78% 16%, rgba(208,24,32,.18), transparent 30%),
    #111;
  color: #fff;
}

.dark-hero h1,
.dark-hero p,
.dark-section h2,
.dark-section p {
  color: #fff;
}

.dark-hero p {
  color: rgba(255,255,255,.68);
}

.inner-service-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 32px;
  overflow: hidden;
  background: rgba(255,255,255,.78);
  box-shadow: 0 24px 80px rgba(17,17,17,.08);
}

.inner-service-grid article {
  border-right: 1px solid rgba(17,17,17,.10);
  min-height: 460px;
  background: #fffaf4;
}

.inner-service-grid article:last-child {
  border-right: 0;
}

.inner-service-grid img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.inner-service-grid span,
.process-timeline span,
.expert-panel span {
  display: inline-block;
  color: #d01820;
  font-weight: 900;
  letter-spacing: .12em;
  margin: 26px 26px 16px;
}

.inner-service-grid h2,
.inner-service-grid p {
  margin-left: 26px;
  margin-right: 26px;
}

.inner-service-grid h2 {
  font-size: 24px;
  line-height: 1.12;
  margin-top: 0;
}

.inner-service-grid p {
  color: rgba(17,17,17,.62);
  font-size: 18px;
  line-height: 1.45;
}

.inner-project-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.inner-project-grid article {
  overflow: hidden;
  border-radius: 30px;
  background: #1b1715;
  border: 1px solid rgba(255,255,255,.10);
}

.inner-project-grid img {
  display: block;
  width: 100%;
  height: 270px;
  object-fit: cover;
}

.inner-project-grid div {
  padding: 28px 26px 32px;
}

.inner-project-grid h2 {
  margin: 0 0 12px;
  font-size: 25px;
  line-height: 1.1;
}

.inner-project-grid p {
  color: rgba(255,255,255,.52);
  font-size: 18px;
}

.expert-panel,
.inner-stats,
.contact-panel {
  display: grid;
  gap: 16px;
  padding: 28px;
  border-radius: 34px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(17,17,17,.10);
  box-shadow: 0 24px 80px rgba(17,17,17,.08);
}

.expert-panel div,
.inner-stats div {
  padding: 24px;
  border-radius: 22px;
  background: #fffaf4;
  border: 1px solid rgba(17,17,17,.08);
}

.expert-panel span {
  margin: 0 0 10px;
}

.expert-panel h2,
.about-values h2,
.process-timeline h2 {
  margin: 0 0 10px;
  font-size: 26px;
}

.expert-panel p,
.about-values p,
.process-timeline p {
  margin: 0;
  color: rgba(17,17,17,.62);
  font-size: 18px;
  line-height: 1.5;
}

.process-timeline {
  display: grid;
  gap: 18px;
}

.process-timeline article {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  align-items: start;
  padding: 32px;
  border-radius: 28px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(17,17,17,.10);
}

.process-timeline span {
  margin: 0;
  font-size: 20px;
}

.inner-stats {
  grid-template-columns: 1fr;
}

.inner-stats strong {
  display: block;
  color: #d01820;
  font-size: 58px;
  line-height: 1;
  font-weight: 900;
}

.inner-stats span {
  color: rgba(17,17,17,.62);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.about-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.about-values article {
  padding: 34px;
  border-radius: 28px;
  background: #fffaf4;
  border: 1px solid rgba(17,17,17,.10);
}

.contact-panel a,
.contact-panel span {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 0 22px;
  border-radius: 999px;
  background: #fffaf4;
  border: 1px solid rgba(17,17,17,.10);
  color: #111;
  text-decoration: none;
  font-weight: 800;
}

.contact-panel a[href*="wa.me"] {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
}

.inner-cta {
  padding: 90px 0;
  background: #111;
}

.inner-cta-card {
  padding: 58px;
  border-radius: 34px;
  color: #fff;
  background:
    radial-gradient(circle at 80% 10%, rgba(208,24,32,.18), transparent 30%),
    #161312;
}

.inner-cta-card h2 {
  max-width: 760px;
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(42px, 5vw, 72px);
  line-height: .96;
  letter-spacing: -.055em;
}

.inner-cta-card p {
  max-width: 660px;
  color: rgba(255,255,255,.68);
  font-size: 21px;
  line-height: 1.5;
}

.inner-cta-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.site-nav a.is-active,
.main-nav a.is-active,
.nav a.is-active {
  color: #d01820 !important;
}

@media (max-width: 1080px) {
  .inner-hero-grid,
  .inner-service-grid,
  .inner-project-grid,
  .about-values {
    grid-template-columns: 1fr 1fr;
  }

  .inner-service-grid article:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 760px) {
  .inner-hero {
    padding: 120px 0 58px;
  }

  .inner-hero-grid,
  .inner-service-grid,
  .inner-project-grid,
  .about-values {
    grid-template-columns: 1fr;
  }

  .inner-hero h1 {
    font-size: clamp(40px, 11vw, 54px);
  }

  .inner-hero p {
    font-size: 20px;
  }

  .inner-section {
    padding: 64px 0;
  }

  .inner-service-grid {
    border-radius: 28px;
  }

  .inner-service-grid article {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(17,17,17,.10);
  }

  .inner-service-grid article:last-child {
    border-bottom: 0;
  }

  .inner-service-grid img,
  .inner-project-grid img {
    height: 250px;
  }

  .process-timeline article {
    grid-template-columns: 1fr;
    padding: 28px;
  }

  .inner-cta-card {
    padding: 38px 24px;
  }

  .inner-cta-actions .btn {
    width: 100%;
    justify-content: center;
  }
}


/* STEP 017A: content expansion pages */
.rich-page-head {
  margin-bottom: 36px;
}

.rich-page-head h2,
.rich-two-col h2,
.system-layers h2,
.brief-grid h2,
.contact-final h2 {
  margin: 0 0 18px;
  color: #111;
  font-size: clamp(42px, 5vw, 72px);
  line-height: .96;
  letter-spacing: -.055em;
}

.rich-page-head p,
.text-panel p,
.brief-list p,
.contact-final p {
  color: rgba(17,17,17,.66);
  font-size: 21px;
  line-height: 1.55;
}

.service-deep-grid {
  display: grid;
  gap: 24px;
}

.service-deep-grid article {
  display: grid;
  grid-template-columns: minmax(320px, .86fr) 1fr;
  overflow: hidden;
  border-radius: 34px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(17,17,17,.10);
  box-shadow: 0 22px 70px rgba(17,17,17,.07);
}

.service-deep-grid img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.service-deep-grid article > div {
  padding: 42px;
}

.service-deep-grid span,
.case-grid .section-kicker,
.material-check-grid span,
.process-long span {
  color: #d01820;
  font-weight: 900;
  letter-spacing: .14em;
}

.service-deep-grid h2,
.case-grid h2,
.material-check-grid h2,
.process-long h2,
.values-grid h2 {
  margin: 14px 0 16px;
  color: #111;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.service-deep-grid p,
.service-deep-grid li,
.case-grid p,
.case-grid li,
.material-check-grid p,
.process-long p,
.process-long li,
.values-grid p {
  color: rgba(17,17,17,.66);
  font-size: 19px;
  line-height: 1.5;
}

.service-deep-grid ul,
.case-grid ul,
.process-long ul {
  margin: 18px 0 0;
  padding-left: 20px;
}

.service-deep-grid li,
.case-grid li,
.process-long li {
  margin: 8px 0;
}

.soft-section {
  background:
    radial-gradient(circle at 12% 10%, rgba(208,24,32,.06), transparent 26%),
    #fffaf4;
}

.rich-two-col,
.system-layers,
.brief-grid {
  display: grid;
  grid-template-columns: .75fr 1fr;
  gap: 52px;
  align-items: start;
}

.text-panel,
.layer-list,
.brief-list {
  padding: 38px;
  border-radius: 30px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(17,17,17,.10);
  box-shadow: 0 20px 70px rgba(17,17,17,.06);
}

.case-grid {
  display: grid;
  gap: 28px;
}

.case-grid article {
  display: grid;
  grid-template-columns: minmax(340px, .9fr) 1fr;
  overflow: hidden;
  border-radius: 34px;
  background: #1b1715;
  border: 1px solid rgba(255,255,255,.10);
}

.case-grid img {
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: cover;
}

.case-grid article > div {
  padding: 44px;
}

.case-grid h2,
.case-grid p,
.case-grid li {
  color: #fff;
}

.case-grid p,
.case-grid li {
  color: rgba(255,255,255,.64);
}

.material-check-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.material-check-grid article,
.values-grid article {
  padding: 34px;
  border-radius: 28px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(17,17,17,.10);
  box-shadow: 0 20px 70px rgba(17,17,17,.055);
}

.layer-list p,
.brief-list p {
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid rgba(17,17,17,.10);
}

.layer-list p:last-child,
.brief-list p:last-child {
  border-bottom: 0;
}

.process-long {
  display: grid;
  gap: 20px;
}

.process-long article {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 28px;
  padding: 38px;
  border-radius: 32px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(17,17,17,.10);
  box-shadow: 0 20px 70px rgba(17,17,17,.055);
}

.process-long h2 {
  margin-top: 0;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.about-proof-card {
  display: grid;
  gap: 16px;
  padding: 28px;
  border-radius: 34px;
  background: #111;
  color: #fff;
  box-shadow: 0 26px 90px rgba(17,17,17,.16);
}

.about-proof-card div {
  padding: 28px;
  border-radius: 24px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

.about-proof-card strong {
  display: block;
  color: #ff333d;
  font-size: 62px;
  line-height: 1;
}

.about-proof-card span {
  color: rgba(255,255,255,.68);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.contact-panel-rich {
  background: #111;
}

.contact-panel-rich a,
.contact-panel-rich span {
  background: rgba(255,255,255,.06);
  color: #fff;
  border-color: rgba(255,255,255,.12);
}

.contact-panel-rich a[href*="wa.me"] {
  background: #25D366;
  border-color: #25D366;
}

.contact-final {
  max-width: 960px;
  padding: 52px;
  border-radius: 34px;
  background: #111;
  color: #fff;
  text-align: center;
}

.contact-final h2,
.contact-final p {
  color: #fff;
}

.contact-final p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255,255,255,.72);
}

@media (max-width: 1080px) {
  .material-check-grid,
  .values-grid {
    grid-template-columns: 1fr 1fr;
  }

  .service-deep-grid article,
  .case-grid article,
  .rich-two-col,
  .system-layers,
  .brief-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .rich-page-head h2,
  .rich-two-col h2,
  .system-layers h2,
  .brief-grid h2,
  .contact-final h2 {
    font-size: clamp(36px, 10vw, 48px);
  }

  .service-deep-grid article,
  .case-grid article {
    border-radius: 28px;
  }

  .service-deep-grid img,
  .case-grid img {
    min-height: 250px;
    height: 250px;
  }

  .service-deep-grid article > div,
  .case-grid article > div,
  .text-panel,
  .layer-list,
  .brief-list,
  .material-check-grid article,
  .values-grid article,
  .process-long article,
  .contact-final {
    padding: 28px;
  }

  .material-check-grid,
  .values-grid {
    grid-template-columns: 1fr;
  }

  .process-long article {
    grid-template-columns: 1fr;
  }

  .service-deep-grid h2,
  .case-grid h2,
  .material-check-grid h2,
  .process-long h2,
  .values-grid h2 {
    font-size: 30px;
  }
}

/* STEP 019B: reliable back-to-top button on all pages */
.back-to-top {
  position: fixed !important;
  right: 26px !important;
  bottom: 28px !important;
  z-index: 9999 !important;
  width: 54px !important;
  height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(208,24,32,.32) !important;
  border-radius: 999px !important;
  background: rgba(17,17,17,.94) !important;
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.30) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(14px) !important;
  pointer-events: none !important;
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease, background .22s ease !important;
}

.back-to-top.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.back-to-top:hover {
  background: #d01820 !important;
  border-color: #d01820 !important;
}

.back-to-top span {
  display: block;
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .back-to-top {
    right: 18px !important;
    bottom: 84px !important;
    width: 50px !important;
    height: 50px !important;
    font-size: 24px !important;
  }
}

/* STEP 019C: red back-to-top button */
.back-to-top {
  background: #d01820 !important;
  border-color: #d01820 !important;
  color: #ffffff !important;
  box-shadow: 0 18px 46px rgba(208,24,32,.30) !important;
}

.back-to-top:hover {
  background: #aa1118 !important;
  border-color: #aa1118 !important;
  box-shadow: 0 20px 52px rgba(208,24,32,.38) !important;
  transform: translateY(-2px) !important;
}

.back-to-top.is-visible:hover {
  transform: translateY(-2px) !important;
}


/* STEP 016A: 8 real ROOFMAN project cards */

.real-projects-section {
  background:
    radial-gradient(circle at 88% 6%, rgba(208,24,32,.055), transparent 28%),
    linear-gradient(180deg, #f7f4ee 0%, #ffffff 70%);
}

.real-projects-head {
  align-items: flex-end;
  gap: 32px;
}

.real-projects-head h2 {
  max-width: 760px;
}

.real-projects-head p:not(.kicker) {
  max-width: 760px;
  color: rgba(28,25,22,.68);
}

.real-projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.real-project-card {
  overflow: hidden;
  border-radius: 28px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(34,28,22,.09);
  box-shadow: 0 24px 70px rgba(32,24,18,.10);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.real-project-card:hover {
  transform: translateY(-5px);
  border-color: rgba(208,24,32,.22);
  box-shadow: 0 30px 86px rgba(32,24,18,.15);
}

.real-project-image {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e9e2d8;
}

.real-project-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .45s ease, filter .45s ease;
}

.real-project-card:hover .real-project-image img {
  transform: scale(1.045);
  filter: saturate(1.04) contrast(1.03);
}

.real-project-body {
  padding: 20px 20px 22px;
}

.real-project-tag {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 13px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(208,24,32,.08);
  color: #d01820;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.real-project-body h3 {
  margin: 0 0 8px;
  color: #121212;
  font-size: clamp(20px, 1.55vw, 25px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.real-project-subtitle {
  margin: 0 0 10px;
  color: rgba(18,18,18,.52);
  font-weight: 800;
}

.real-project-body p:last-child {
  margin: 0;
  color: rgba(18,18,18,.68);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 1180px) {
  .real-projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .real-projects-head {
    align-items: flex-start;
  }

  .real-projects-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .real-project-card {
    border-radius: 24px;
  }

  .real-project-body {
    padding: 20px 18px 22px;
  }

  .real-project-body h3 {
    font-size: 27px;
  }

  .real-project-body p:last-child {
    font-size: 18px;
  }
}

/* STEP 016B: real projects visibility polish */

/* Projects section: make heading visible on light background */
.real-projects-section {
  position: relative;
  padding-top: 96px;
  padding-bottom: 96px;
  background:
    radial-gradient(circle at 88% 4%, rgba(208,24,32,.065), transparent 30%),
    linear-gradient(180deg, #f7f4ee 0%, #ffffff 74%) !important;
}

.real-projects-section .kicker,
.real-projects-section .section-kicker {
  color: #d01820 !important;
  opacity: 1 !important;
}

.real-projects-section h2,
.real-projects-head h2 {
  color: #111111 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.real-projects-section p,
.real-projects-head p {
  color: rgba(18,18,18,.68) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.real-projects-section .section-link,
.real-projects-head .section-link {
  color: #d01820 !important;
  opacity: 1 !important;
  font-weight: 900;
  text-shadow: none !important;
}

.real-projects-section .section-link:hover,
.real-projects-head .section-link:hover {
  color: #111111 !important;
}

/* Better projects card balance */
.real-projects-grid {
  margin-top: 34px;
}

.real-project-card {
  background: rgba(255,255,255,.94) !important;
}

.real-project-image {
  background: #eee7dd;
}

.real-project-body h3 {
  color: #111111 !important;
}

.real-project-subtitle {
  color: rgba(18,18,18,.55) !important;
}

.real-project-body p:last-child {
  color: rgba(18,18,18,.66) !important;
}

/* Expert block kicker final override */
.materials-card .kicker,
.materials-card .section-kicker {
  color: #d01820 !important;
  opacity: 1 !important;
}

/* WhatsApp button: keep green and readable */
.lead-card a[href*="wa.me"],
.lead-card a[href*="whatsapp"],
.lead-card a[href*="api.whatsapp.com"],
.cta-card a[href*="wa.me"],
.cta-card a[href*="whatsapp"],
.cta-card a[href*="api.whatsapp.com"],
.contact-card a[href*="wa.me"],
.contact-card a[href*="whatsapp"],
.contact-card a[href*="api.whatsapp.com"] {
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #fff !important;
}

@media (max-width: 760px) {
  .real-projects-section {
    padding-top: 70px;
    padding-bottom: 72px;
  }

  .real-projects-section h2,
  .real-projects-head h2 {
    font-size: clamp(36px, 10vw, 46px);
    line-height: 1.04;
  }

  .real-projects-grid {
    margin-top: 26px;
  }
}


/* STEP 017A: projects.html real 8 case page */

.rp-page {
  background:
    radial-gradient(circle at 90% 6%, rgba(208,24,32,.22), transparent 28%),
    linear-gradient(180deg, #111 0%, #17110f 40%, #f7f4ee 40%, #fff 100%);
  color: #111;
}

.rp-hero {
  padding: 116px 0 72px;
  background:
    radial-gradient(circle at 86% 12%, rgba(208,24,32,.18), transparent 32%),
    linear-gradient(135deg, #111, #1b1210);
  color: #fff;
}

.rp-hero .kicker {
  color: #ff3b43;
}

.rp-hero h1 {
  max-width: 980px;
  margin: 0;
  color: #fff;
  font-size: clamp(48px, 6vw, 92px);
  line-height: .94;
  letter-spacing: -.075em;
}

.rp-hero p:not(.kicker) {
  max-width: 760px;
  margin-top: 24px;
  color: rgba(255,255,255,.72);
  font-size: 21px;
  line-height: 1.55;
}

.rp-cases {
  padding: 54px 0 96px;
  background: linear-gradient(180deg, #f7f4ee 0%, #ffffff 100%);
}

.rp-case {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: 0;
  overflow: hidden;
  margin-bottom: 34px;
  border-radius: 34px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(30,25,20,.09);
  box-shadow: 0 26px 90px rgba(25,20,16,.12);
}

.rp-case.is-reverse {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
}

.rp-case.is-reverse .rp-case-image {
  order: 2;
}

.rp-case.is-reverse .rp-case-content {
  order: 1;
}

.rp-case-image {
  display: block;
  min-height: 520px;
  background: #e8e0d5;
  overflow: hidden;
}

.rp-case-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .5s ease, filter .5s ease;
}

.rp-case:hover .rp-case-image img {
  transform: scale(1.035);
  filter: saturate(1.04) contrast(1.03);
}

.rp-case-content {
  padding: clamp(34px, 4vw, 64px);
}

.rp-case-number {
  margin: 0 0 12px;
  color: #d01820;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .18em;
}

.rp-case-tag {
  margin: 0 0 16px;
  color: #d01820;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .16em;
}

.rp-case h2 {
  margin: 0 0 14px;
  color: #111;
  font-size: clamp(34px, 3.6vw, 58px);
  line-height: .98;
  letter-spacing: -.065em;
}

.rp-case-lead {
  margin: 0 0 28px;
  color: rgba(17,17,17,.56);
  font-size: 21px;
  font-weight: 800;
}

.rp-case-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-bottom: 28px;
}

.rp-case-text h3 {
  margin: 0 0 10px;
  color: #111;
  font-size: 17px;
  letter-spacing: -.02em;
}

.rp-case-text p {
  margin: 0;
  color: rgba(17,17,17,.68);
  font-size: 17px;
  line-height: 1.58;
}

.rp-case-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.rp-case-points li {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(208,24,32,.075);
  color: #d01820;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
}

.rp-final-cta {
  padding: 0 0 96px;
  background: #fff;
}

.rp-final-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 34px;
  align-items: center;
  padding: clamp(32px, 4vw, 58px);
  border-radius: 34px;
  background: linear-gradient(135deg, #111, #1b1210);
  color: #fff;
  box-shadow: 0 28px 90px rgba(0,0,0,.18);
}

.rp-final-card h2 {
  max-width: 780px;
  margin: 0;
  color: #fff;
  font-size: clamp(36px, 4vw, 62px);
  line-height: .98;
  letter-spacing: -.06em;
}

.rp-final-card p:not(.kicker) {
  max-width: 680px;
  color: rgba(255,255,255,.72);
  font-size: 20px;
  line-height: 1.5;
}

.rp-final-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 260px;
}

@media (max-width: 1050px) {
  .rp-case,
  .rp-case.is-reverse {
    grid-template-columns: 1fr;
  }

  .rp-case.is-reverse .rp-case-image,
  .rp-case.is-reverse .rp-case-content {
    order: initial;
  }

  .rp-case-image {
    min-height: 420px;
  }

  .rp-case-text {
    grid-template-columns: 1fr;
  }

  .rp-final-card {
    grid-template-columns: 1fr;
  }

  .rp-final-actions {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .rp-hero {
    padding: 86px 0 54px;
  }

  .rp-hero h1 {
    font-size: clamp(42px, 12vw, 56px);
  }

  .rp-hero p:not(.kicker) {
    font-size: 19px;
  }

  .rp-cases {
    padding-top: 34px;
  }

  .rp-case {
    border-radius: 26px;
    margin-bottom: 24px;
  }

  .rp-case-image {
    min-height: 300px;
  }

  .rp-case-content {
    padding: 26px 22px 30px;
  }

  .rp-case h2 {
    font-size: 34px;
  }

  .rp-case-lead {
    font-size: 19px;
  }

  .rp-case-text p {
    font-size: 17px;
  }
}

/* STEP 017C: show full vertical photo for classic house gutters case */

/* Этот объект вертикальный, поэтому нельзя резать его как широкую обложку */
.rp-case-image[href*="roofman_project_classic_house_gutters"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.88), rgba(245,242,236,.72) 42%, rgba(222,214,204,.52) 100%),
    linear-gradient(135deg, #f5f1ea, #e8dfd4) !important;
}

.rp-case-image[href*="roofman_project_classic_house_gutters"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(25,20,16,.16);
  background: #f4efe8;
  transform: none !important;
}

/* отключаем zoom-hover именно для этого фото */
.rp-case:hover .rp-case-image[href*="roofman_project_classic_house_gutters"] img {
  transform: none !important;
  filter: saturate(1.03) contrast(1.02);
}

/* на мобильной тоже показываем объект целиком */
@media (max-width: 760px) {
  .rp-case-image[href*="roofman_project_classic_house_gutters"] {
    padding: 18px !important;
    min-height: 360px !important;
  }
}

/* STEP 018A: premium footer redesign */

.premium-footer {
  position: relative;
  overflow: hidden;
  padding: 76px 0 30px !important;
  background:
    radial-gradient(circle at 14% 8%, rgba(208,24,32,.24), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.07), transparent 28%),
    linear-gradient(135deg, #0d0d0d 0%, #141010 52%, #090909 100%) !important;
  color: #fff !important;
  border-top: 1px solid rgba(255,255,255,.08);
}

.premium-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 22%, transparent 78%, rgba(208,24,32,.05)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 120px);
  opacity: .42;
}

.premium-footer .container {
  position: relative;
  z-index: 1;
}

.premium-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, .72fr) minmax(280px, .85fr);
  gap: 22px;
  align-items: stretch;
}

.premium-footer-brand-card,
.premium-footer-card {
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  box-shadow: 0 28px 80px rgba(0,0,0,.26);
  backdrop-filter: blur(12px);
}

.premium-footer-brand-card {
  padding: 34px;
}

.premium-footer-card {
  padding: 30px;
}

.premium-footer-logo {
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  width: fit-content !important;
  max-width: fit-content !important;
  border: 0 !important;
  text-decoration: none !important;
  color: #fff !important;
}

.premium-footer-logo img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 16px 34px rgba(0,0,0,.26);
}

.premium-footer-logo strong {
  display: block;
  color: #fff;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -.035em;
}

.premium-footer-logo small {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.48);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.premium-footer-brand-card p {
  max-width: 560px;
  margin: 28px 0 28px;
  color: rgba(255,255,255,.72) !important;
  font-size: 19px;
  line-height: 1.55;
}

.premium-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.premium-footer a {
  border-bottom: 0 !important;
}

.premium-footer-wa,
.premium-footer-call,
.premium-footer-links a,
.premium-contact-link,
.premium-footer-bottom a {
  text-decoration: none !important;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

.premium-footer-wa,
.premium-footer-call {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content !important;
  min-height: 48px;
  padding: 0 20px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  line-height: 1;
}

.premium-footer-wa {
  color: #fff !important;
  background: #25D366 !important;
  border: 1px solid #25D366 !important;
  box-shadow: 0 18px 46px rgba(37,211,102,.22) !important;
}

.premium-footer-wa:hover {
  transform: translateY(-2px);
  background: #1ebe5d !important;
  border-color: #1ebe5d !important;
  box-shadow: 0 22px 54px rgba(37,211,102,.30) !important;
}

.premium-footer-call {
  color: #fff !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

.premium-footer-call:hover {
  transform: translateY(-2px);
  background: rgba(208,24,32,.18) !important;
  border-color: rgba(208,24,32,.52) !important;
}

.premium-footer-card h3 {
  margin: 0 0 22px;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -.02em;
}

.premium-footer-links,
.premium-footer-contacts {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.premium-footer-links a,
.premium-contact-link,
.premium-contact-note {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 42px;
  padding: 0 14px !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,.78) !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  line-height: 1.2;
}

.premium-footer-links a::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #d01820;
  opacity: .85;
  box-shadow: 0 0 0 4px rgba(208,24,32,.10);
}

.premium-footer-links a:hover,
.premium-contact-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.085) !important;
  border-color: rgba(208,24,32,.42) !important;
  transform: translateX(4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.18) !important;
}

.footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
}

.footer-icon svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.footer-icon-red {
  color: #ff3b43;
}

.footer-icon-instagram {
  color: #fff;
  border-radius: 7px;
  background:
    radial-gradient(circle at 30% 105%, #fdf497 0 18%, #fd5949 42%, #d6249f 62%, #285AEB 100%);
}

.footer-icon-instagram svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

.premium-contact-note {
  color: rgba(255,255,255,.62) !important;
  font-weight: 700 !important;
}

.premium-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 22px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.48);
  font-size: 14px;
}

.premium-footer-bottom a {
  display: inline-flex !important;
  width: fit-content !important;
  color: #ff3b43 !important;
  font-weight: 900;
}

.premium-footer-bottom a:hover {
  color: #fff !important;
}

@media (max-width: 1050px) {
  .premium-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .premium-footer-brand-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .premium-footer {
    padding: 54px 0 26px !important;
  }

  .premium-footer-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .premium-footer-brand-card,
  .premium-footer-card {
    border-radius: 24px;
    padding: 24px;
  }

  .premium-footer-brand-card p {
    font-size: 18px;
  }

  .premium-footer-actions {
    flex-direction: column;
  }

  .premium-footer-wa,
  .premium-footer-call,
  .premium-footer-links a,
  .premium-contact-link,
  .premium-contact-note {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start;
  }

  .premium-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* STEP 018B: Telegram in all contact blocks */

/* Telegram blue icon in footer */
.footer-icon-telegram {
  color: #ffffff;
  border-radius: 50%;
  background: linear-gradient(135deg, #2AABEE, #229ED9);
  box-shadow: 0 10px 24px rgba(42,171,238,.26);
}

.footer-icon-telegram svg {
  width: 15px;
  height: 15px;
  fill: #ffffff;
}

.premium-contact-telegram {
  border-color: rgba(42,171,238,.30) !important;
}

.premium-contact-telegram:hover {
  background: rgba(42,171,238,.13) !important;
  border-color: rgba(42,171,238,.60) !important;
  box-shadow: 0 14px 34px rgba(42,171,238,.20) !important;
}

.premium-contact-telegram:hover .footer-icon-telegram {
  box-shadow: 0 12px 30px rgba(42,171,238,.38);
}

/* Telegram button in CTA/contact forms */
.btn-telegram {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px !important;
  border-radius: 999px !important;
  background: #229ED9 !important;
  border: 1px solid #229ED9 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 16px 40px rgba(34,158,217,.24) !important;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

.btn-telegram:hover {
  transform: translateY(-2px);
  background: #1d8fc5 !important;
  border-color: #1d8fc5 !important;
  color: #ffffff !important;
  box-shadow: 0 20px 48px rgba(34,158,217,.34) !important;
}

.telegram-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}

.telegram-btn-icon svg {
  width: 19px;
  height: 19px;
  fill: #ffffff;
}

/* CTA cards: stack WhatsApp / Telegram / call cleanly */
.lead-card .btn-telegram,
.cta-card .btn-telegram,
.contact-card .btn-telegram,
.rp-final-actions .btn-telegram,
.premium-footer-actions .btn-telegram {
  width: 100% !important;
}

/* Footer action Telegram variant */
.premium-footer-actions .btn-telegram {
  width: fit-content !important;
  min-height: 48px;
  padding: 0 20px !important;
}

@media (max-width: 760px) {
  .btn-telegram,
  .premium-footer-actions .btn-telegram {
    width: 100% !important;
    justify-content: center;
  }
}

/* STEP 018C: fix bloated Telegram button in contacts page/card */

/* Telegram button inside dark contact cards should look like a normal full-width CTA */
.contact-card .btn-telegram,
.contacts-card .btn-telegram,
.contact-panel .btn-telegram,
.contact-form .btn-telegram,
.contacts-page .btn-telegram,
.contact-page .btn-telegram,
main .btn-telegram {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 62px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  background: #229ED9 !important;
  border: 1px solid #229ED9 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 16px 40px rgba(34,158,217,.24) !important;
  transform: none !important;
}

/* remove accidental extra capsule/circle styling from icon span */
.contact-card .btn-telegram .telegram-btn-icon,
.contacts-card .btn-telegram .telegram-btn-icon,
.contact-panel .btn-telegram .telegram-btn-icon,
.contact-form .btn-telegram .telegram-btn-icon,
.contacts-page .btn-telegram .telegram-btn-icon,
.contact-page .btn-telegram .telegram-btn-icon,
main .btn-telegram .telegram-btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.contact-card .btn-telegram .telegram-btn-icon svg,
.contacts-card .btn-telegram .telegram-btn-icon svg,
.contact-panel .btn-telegram .telegram-btn-icon svg,
.contact-form .btn-telegram .telegram-btn-icon svg,
.contacts-page .btn-telegram .telegram-btn-icon svg,
.contact-page .btn-telegram .telegram-btn-icon svg,
main .btn-telegram .telegram-btn-icon svg {
  width: 20px !important;
  height: 20px !important;
  fill: #ffffff !important;
}

/* hover */
.contact-card .btn-telegram:hover,
.contacts-card .btn-telegram:hover,
.contact-panel .btn-telegram:hover,
.contact-form .btn-telegram:hover,
.contacts-page .btn-telegram:hover,
.contact-page .btn-telegram:hover,
main .btn-telegram:hover {
  background: #1d8fc5 !important;
  border-color: #1d8fc5 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 20px 48px rgba(34,158,217,.34) !important;
}

/* STEP 018D: hard clean Telegram button on contacts page */

.contacts-page .contact-telegram-clean,
.contact-page .contact-telegram-clean,
.contact-telegram-clean {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 62px !important;
  padding: 0 24px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #229ED9 !important;
  border: 1px solid #229ED9 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 16px 40px rgba(34,158,217,.24) !important;
  transform: none !important;
}

/* убираем все чужие псевдо-иконки/капсулы */
.contacts-page .contact-telegram-clean::before,
.contacts-page .contact-telegram-clean::after,
.contact-page .contact-telegram-clean::before,
.contact-page .contact-telegram-clean::after,
.contact-telegram-clean::before,
.contact-telegram-clean::after {
  content: none !important;
  display: none !important;
}

.contact-telegram-clean-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 21px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.contact-telegram-clean-icon svg {
  width: 21px !important;
  height: 21px !important;
  fill: #ffffff !important;
}

.contact-telegram-clean:hover {
  background: #1d8fc5 !important;
  border-color: #1d8fc5 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 20px 48px rgba(34,158,217,.34) !important;
}

/* STEP 018E: footer v2 clean social contacts */

/* New footer fully overrides old premium footer styling */
.premium-footer-v2 {
  position: relative;
  overflow: hidden;
  padding: 64px 0 28px !important;
  background:
    radial-gradient(circle at 10% 4%, rgba(208,24,32,.26), transparent 30%),
    radial-gradient(circle at 90% 12%, rgba(255,255,255,.06), transparent 28%),
    linear-gradient(135deg, #0c0c0c 0%, #171111 54%, #090909 100%) !important;
  color: #fff !important;
}

.premium-footer-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 120px),
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 35%, rgba(208,24,32,.05));
  opacity: .45;
}

.premium-footer-v2 .container {
  position: relative;
  z-index: 1;
}

.footer-v2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(250px, .74fr) minmax(310px, .9fr);
  gap: 22px;
}

.footer-v2-brand,
.footer-v2-card {
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  box-shadow: 0 28px 80px rgba(0,0,0,.26);
  backdrop-filter: blur(12px);
}

.footer-v2-brand {
  padding: 34px;
}

.footer-v2-card {
  padding: 30px;
}

.footer-v2-logo {
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  width: fit-content !important;
  max-width: fit-content !important;
  text-decoration: none !important;
  border: 0 !important;
  color: #fff !important;
}

.footer-v2-logo img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 16px 34px rgba(0,0,0,.26);
}

.footer-v2-logo strong {
  display: block;
  color: #fff;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -.035em;
}

.footer-v2-logo small {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.48);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.footer-v2-brand p {
  max-width: 570px;
  margin: 30px 0 0;
  color: rgba(255,255,255,.72) !important;
  font-size: 19px;
  line-height: 1.55;
}

.footer-v2-card h3 {
  margin: 0 0 22px;
  color: #fff;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -.025em;
}

.footer-v2-links,
.footer-v2-contacts {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.footer-v2-links a,
.footer-v2-contact,
.footer-v2-location {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 42px;
  padding: 0 14px !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,.78) !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  line-height: 1.2;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

.footer-v2-links a::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #d01820;
  opacity: .88;
  box-shadow: 0 0 0 4px rgba(208,24,32,.10);
}

.footer-v2-links a:hover,
.footer-v2-contact:hover {
  color: #fff !important;
  background: rgba(255,255,255,.085) !important;
  border-color: rgba(208,24,32,.42) !important;
  transform: translateX(4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.18) !important;
}

/* Icons */
.footer-v2-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  background: rgba(208,24,32,.95);
  box-shadow: 0 10px 24px rgba(208,24,32,.20);
}

.footer-v2-icon svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* Phone */
.footer-v2-phone .footer-v2-icon {
  background: linear-gradient(135deg, #d01820, #ff3b43);
}

/* WhatsApp */
.footer-v2-whatsapp {
  border-color: rgba(37,211,102,.22) !important;
}

.footer-v2-whatsapp .footer-v2-icon {
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 24px rgba(37,211,102,.24);
}

.footer-v2-whatsapp:hover {
  border-color: rgba(37,211,102,.52) !important;
  background: rgba(37,211,102,.12) !important;
}

/* Telegram */
.footer-v2-telegram {
  border-color: rgba(42,171,238,.22) !important;
}

.footer-v2-telegram .footer-v2-icon {
  background: linear-gradient(135deg, #2AABEE, #229ED9);
  color: #fff;
  box-shadow: 0 10px 24px rgba(42,171,238,.25);
}

.footer-v2-telegram:hover {
  border-color: rgba(42,171,238,.56) !important;
  background: rgba(42,171,238,.12) !important;
}

/* Instagram */
.footer-v2-instagram {
  border-color: rgba(214,36,159,.22) !important;
}

.footer-v2-instagram .footer-v2-icon {
  background:
    radial-gradient(circle at 30% 105%, #fdf497 0 18%, #fd5949 42%, #d6249f 62%, #285AEB 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(214,36,159,.25);
}

.footer-v2-instagram .footer-v2-icon svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

.footer-v2-instagram:hover {
  border-color: rgba(214,36,159,.58) !important;
  background: rgba(214,36,159,.12) !important;
}

/* Location */
.footer-v2-location {
  color: rgba(255,255,255,.62) !important;
}

.footer-v2-location .footer-v2-icon {
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.72);
  box-shadow: none;
}

/* Bottom */
.footer-v2-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 22px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.50);
  font-size: 14px;
}

.footer-v2-bottom a {
  display: inline-flex !important;
  width: fit-content !important;
  color: #ff3b43 !important;
  font-weight: 900;
  text-decoration: none !important;
  border: 0 !important;
}

.footer-v2-bottom a:hover {
  color: #fff !important;
}

/* keep old premium-footer rules from touching v2 */
.premium-footer-v2 a::before,
.premium-footer-v2 a::after {
  pointer-events: none;
}

/* Responsive */
@media (max-width: 1080px) {
  .footer-v2-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-v2-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .premium-footer-v2 {
    padding: 52px 0 26px !important;
  }

  .footer-v2-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .footer-v2-brand,
  .footer-v2-card {
    border-radius: 24px;
    padding: 24px;
  }

  .footer-v2-brand p {
    font-size: 18px;
  }

  .footer-v2-links a,
  .footer-v2-contact,
  .footer-v2-location {
    width: 100% !important;
    justify-content: flex-start;
  }

  .footer-v2-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* STEP 018F: center WhatsApp and Telegram pills in footer contacts */

.footer-v2-contacts .footer-v2-whatsapp,
.footer-v2-contacts .footer-v2-telegram {
  width: 178px !important;
  min-width: 178px !important;
  max-width: 178px !important;
  justify-content: center !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  gap: 9px !important;
  text-align: center !important;
}

.footer-v2-contacts .footer-v2-whatsapp span:last-child,
.footer-v2-contacts .footer-v2-telegram span:last-child {
  display: inline-flex !important;
  justify-content: center !important;
  text-align: center !important;
  min-width: 82px;
}

/* чуть выравниваем вертикально иконки */
.footer-v2-contacts .footer-v2-whatsapp .footer-v2-icon,
.footer-v2-contacts .footer-v2-telegram .footer-v2-icon {
  margin: 0 !important;
}

@media (max-width: 760px) {
  .footer-v2-contacts .footer-v2-whatsapp,
  .footer-v2-contacts .footer-v2-telegram {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* STEP 018H: hard grid alignment for footer WhatsApp / Telegram */

/* 
  Причина: старые flex/fit-content правила давали разный визуальный центр.
  Решение: две плашки WhatsApp и Telegram переводим в grid с одинаковой геометрией.
*/
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp,
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 24px 92px !important;
  column-gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;

  width: 194px !important;
  min-width: 194px !important;
  max-width: 194px !important;
  height: 42px !important;
  min-height: 42px !important;

  padding: 0 16px !important;
  text-align: center !important;
}

/* Убираем возможные старые декоративные псевдоэлементы */
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp::before,
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp::after,
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram::before,
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram::after {
  content: none !important;
  display: none !important;
}

/* Иконка всегда в первой колонке */
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp > .footer-v2-icon,
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram > .footer-v2-icon {
  grid-column: 1 !important;
  justify-self: center !important;
  margin: 0 !important;
}

/* Текст всегда во второй колонке и строго по центру */
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp > span:not(.footer-v2-icon),
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram > span:not(.footer-v2-icon) {
  grid-column: 2 !important;
  display: block !important;
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  justify-self: center !important;
  line-height: 1 !important;
}

/* Hover без бокового сдвига, чтобы центр не "прыгал" */
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp:hover,
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram:hover {
  transform: translateY(-1px) !important;
}

/* На мобильной можно растянуть, но содержимое всё равно держим по центру */
@media (max-width: 760px) {
  .premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp,
  .premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: 24px 110px !important;
  }

  .premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp > span:not(.footer-v2-icon),
  .premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram > span:not(.footer-v2-icon) {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
  }
}

/* STEP 018I: center footer WhatsApp / Telegram text, icon as left decoration */

/*
  Теперь центрируем не всю группу icon+text, а именно текст.
  Иконка ставится absolute слева, поэтому надписи WhatsApp и Telegram
  стоят ровно по центру всей плашки.
*/

.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp,
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram {
  position: relative !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 194px !important;
  min-width: 194px !important;
  max-width: 194px !important;
  height: 42px !important;
  min-height: 42px !important;

  padding: 0 18px !important;
  gap: 0 !important;
  text-align: center !important;
}

/* Иконка фиксируется слева и больше не двигает текст */
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp > .footer-v2-icon,
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram > .footer-v2-icon {
  position: absolute !important;
  left: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  margin: 0 !important;
}

/* Текст занимает всю плашку и центрируется строго относительно неё */
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp > span:not(.footer-v2-icon),
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram > span:not(.footer-v2-icon) {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  padding: 0 !important;
  margin: 0 !important;

  text-align: center !important;
  justify-self: center !important;
  line-height: 1 !important;
}

/* Убираем старую grid-геометрию, если она ещё где-то цепляется */
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp,
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram {
  grid-template-columns: none !important;
  column-gap: 0 !important;
  justify-items: initial !important;
}

/* Hover: двигается вся плашка, но текст внутри остаётся по центру */
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp:hover,
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram:hover {
  transform: translateY(-1px) !important;
}

/* Mobile */
@media (max-width: 760px) {
  .premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp,
  .premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp > .footer-v2-icon,
  .premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram > .footer-v2-icon {
    left: 28px !important;
  }
}

/* STEP 018K: rebuild contacts.html top contact panel */

.contacts-hero .contact-panel-clean {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 34px !important;
}

/* reset old contact-panel link rules only inside the clean panel */
.contacts-hero .contact-panel-clean a,
.contacts-hero .contact-panel-clean div {
  box-sizing: border-box !important;
  margin: 0 !important;
  text-decoration: none !important;
}

/* normal dark rows */
.contacts-hero .top-contact-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

/* CTA buttons: icon left, label centered relative to full button */
.contacts-hero .top-contact-btn {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 62px !important;
  padding: 0 28px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.20) !important;
  transform: none !important;
}

/* icons do not affect label centering */
.contacts-hero .top-contact-btn-icon {
  position: absolute !important;
  left: 28px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.contacts-hero .top-contact-btn-icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: #ffffff !important;
}

.contacts-hero .top-contact-btn-label {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.contacts-hero .top-contact-whatsapp {
  background: #25D366 !important;
  border: 1px solid #25D366 !important;
}

.contacts-hero .top-contact-whatsapp:hover {
  background: #1ebe5d !important;
  border-color: #1ebe5d !important;
  transform: translateY(-1px) !important;
}

.contacts-hero .top-contact-telegram {
  background: #229ED9 !important;
  border: 1px solid #229ED9 !important;
}

.contacts-hero .top-contact-telegram:hover {
  background: #1d8fc5 !important;
  border-color: #1d8fc5 !important;
  transform: translateY(-1px) !important;
}

.contacts-hero .top-contact-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  border-radius: 50%;
  background: rgba(208,24,32,.95);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.contacts-hero .top-contact-ig-icon {
  background:
    radial-gradient(circle at 30% 105%, #fdf497 0 18%, #fd5949 42%, #d6249f 62%, #285AEB 100%) !important;
}

.contacts-hero .top-contact-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: #ffffff !important;
}

.contacts-hero .top-contact-instagram {
  border-color: rgba(214,36,159,.24) !important;
}

.contacts-hero .top-contact-instagram:hover {
  background: rgba(214,36,159,.13) !important;
  border-color: rgba(214,36,159,.55) !important;
  transform: translateY(-1px) !important;
}

.contacts-hero .top-contact-location {
  color: rgba(255,255,255,.86) !important;
}

.contacts-hero .top-contact-location .top-contact-icon {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
}

/* kill old pseudo-icons inside this panel */
.contacts-hero .contact-panel-clean a::before,
.contacts-hero .contact-panel-clean a::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 760px) {
  .contacts-hero .contact-panel-clean {
    padding: 24px !important;
  }

  .contacts-hero .top-contact-btn-icon {
    left: 24px !important;
  }
}

/* STEP 018L: reset old span capsule styles inside contacts top panel */

/*
  Старые правила .contact-panel span превращали каждый span внутри кнопок
  в отдельную капсулу. Сбрасываем это только внутри нового contact-panel-clean.
*/

.contacts-hero .contact-panel-clean span,
.contacts-hero .contact-panel-clean svg {
  box-sizing: border-box !important;
}

/* полный сброс для всех вложенных span */
.contacts-hero .contact-panel-clean span {
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;

  color: inherit !important;
  line-height: 1 !important;
}

/* сама чёрная карточка */
.contacts-hero .contact-panel-clean {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 34px !important;
}

/* обычные тёмные строки: телефон, Instagram, локация */
.contacts-hero .contact-panel-clean .top-contact-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;

  width: 100% !important;
  min-height: 58px !important;
  padding: 0 24px !important;

  border-radius: 999px !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

/* CTA-кнопки WhatsApp / Telegram */
.contacts-hero .contact-panel-clean .top-contact-btn {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 62px !important;
  padding: 0 28px !important;

  border-radius: 999px !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  text-align: center !important;
  text-decoration: none !important;

  box-shadow: 0 18px 42px rgba(0,0,0,.20) !important;
}

/* иконка внутри CTA — слева, но не двигает текст */
.contacts-hero .contact-panel-clean .top-contact-btn-icon {
  position: absolute !important;
  left: 28px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
}

.contacts-hero .contact-panel-clean .top-contact-btn-icon svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  fill: #ffffff !important;
}

/* текст CTA строго по центру всей кнопки */
.contacts-hero .contact-panel-clean .top-contact-btn-label {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  color: #ffffff !important;
}

/* цвета CTA */
.contacts-hero .contact-panel-clean .top-contact-whatsapp {
  background: #25D366 !important;
  border: 1px solid #25D366 !important;
}

.contacts-hero .contact-panel-clean .top-contact-telegram {
  background: #229ED9 !important;
  border: 1px solid #229ED9 !important;
}

/* иконки обычных строк */
.contacts-hero .contact-panel-clean .top-contact-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;

  border-radius: 50% !important;
  background: rgba(208,24,32,.95) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

/* Instagram gradient icon */
.contacts-hero .contact-panel-clean .top-contact-ig-icon {
  background:
    radial-gradient(circle at 30% 105%, #fdf497 0 18%, #fd5949 42%, #d6249f 62%, #285AEB 100%) !important;
}

.contacts-hero .contact-panel-clean .top-contact-icon svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  fill: #ffffff !important;
}

/* локация */
.contacts-hero .contact-panel-clean .top-contact-location .top-contact-icon {
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.78) !important;
}

/* hover */
.contacts-hero .contact-panel-clean a:hover {
  transform: translateY(-1px) !important;
}

/* убираем любые старые псевдоэлементы */
.contacts-hero .contact-panel-clean a::before,
.contacts-hero .contact-panel-clean a::after,
.contacts-hero .contact-panel-clean span::before,
.contacts-hero .contact-panel-clean span::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 760px) {
  .contacts-hero .contact-panel-clean {
    padding: 24px !important;
  }

  .contacts-hero .contact-panel-clean .top-contact-btn-icon {
    left: 24px !important;
  }
}

/* STEP 018M: balanced CTA messenger buttons */

/* WhatsApp inside dark CTA blocks should be green, not red */
.btn-whatsapp-cta,
a.btn-whatsapp-cta[href*="wa.me"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  width: 280px !important;
  max-width: 100% !important;
  min-height: 58px !important;
  padding: 0 24px !important;

  border-radius: 999px !important;
  background: #25D366 !important;
  border: 1px solid #25D366 !important;
  color: #ffffff !important;

  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 18px 44px rgba(37,211,102,.22) !important;
}

.btn-whatsapp-cta:hover,
a.btn-whatsapp-cta[href*="wa.me"]:hover {
  background: #1ebe5d !important;
  border-color: #1ebe5d !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 22px 52px rgba(37,211,102,.30) !important;
}

/* Add WhatsApp icon if there is no SVG inside */
.btn-whatsapp-cta::before {
  content: "☘";
  font-size: 16px;
  line-height: 1;
  color: #ffffff;
}

/* Telegram CTA should not stretch across the whole card */
.btn-telegram-cta,
a.btn-telegram-cta[href*="tg://resolve"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  width: 280px !important;
  max-width: 100% !important;
  min-height: 58px !important;
  padding: 0 24px !important;

  border-radius: 999px !important;
  background: #229ED9 !important;
  border: 1px solid #229ED9 !important;
  color: #ffffff !important;

  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 18px 44px rgba(34,158,217,.24) !important;
}

.btn-telegram-cta:hover,
a.btn-telegram-cta[href*="tg://resolve"]:hover {
  background: #1d8fc5 !important;
  border-color: #1d8fc5 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 22px 52px rgba(34,158,217,.34) !important;
}

/* In CTA cards: make messenger buttons sit neatly */
.cta-card .btn-whatsapp-cta,
.cta-card .btn-telegram-cta,
.lead-card .btn-whatsapp-cta,
.lead-card .btn-telegram-cta,
.rp-final-card .btn-whatsapp-cta,
.rp-final-card .btn-telegram-cta,
.contact-final .btn-whatsapp-cta,
.contact-final .btn-telegram-cta {
  width: 280px !important;
}

/* On dark CTA block, buttons should not become full-width unless mobile */
.cta-card .btn-telegram,
.lead-card .btn-telegram,
.rp-final-card .btn-telegram,
.contact-final .btn-telegram {
  width: 280px !important;
  max-width: 100% !important;
}

/* Mobile: stack buttons full width */
@media (max-width: 760px) {
  .btn-whatsapp-cta,
  .btn-telegram-cta,
  .cta-card .btn-whatsapp-cta,
  .cta-card .btn-telegram-cta,
  .lead-card .btn-whatsapp-cta,
  .lead-card .btn-telegram-cta,
  .rp-final-card .btn-whatsapp-cta,
  .rp-final-card .btn-telegram-cta,
  .contact-final .btn-whatsapp-cta,
  .contact-final .btn-telegram-cta {
    width: 100% !important;
  }

  .cta-card .btn-telegram,
  .lead-card .btn-telegram,
  .rp-final-card .btn-telegram,
  .contact-final .btn-telegram {
    width: 100% !important;
  }
}

/* STEP 018N: phone call CTA button */

.btn-call-cta,
a.btn-call-cta[href^="tel:"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  width: 280px !important;
  max-width: 100% !important;
  min-height: 58px !important;
  padding: 0 24px !important;

  border-radius: 999px !important;
  background: #d01820 !important;
  border: 1px solid #d01820 !important;
  color: #ffffff !important;

  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 18px 44px rgba(208,24,32,.24) !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.btn-call-cta:hover,
a.btn-call-cta[href^="tel:"]:hover {
  background: #b9141b !important;
  border-color: #b9141b !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 22px 52px rgba(208,24,32,.34) !important;
}

.call-cta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

/* CTA blocks: keep three buttons balanced */
.cta-card .btn-call-cta,
.lead-card .btn-call-cta,
.rp-final-card .btn-call-cta,
.contact-final .btn-call-cta {
  width: 280px !important;
}

/* Mobile */
@media (max-width: 760px) {
  .btn-call-cta,
  .cta-card .btn-call-cta,
  .lead-card .btn-call-cta,
  .rp-final-card .btn-call-cta,
  .contact-final .btn-call-cta {
    width: 100% !important;
  }
}

/* STEP 018Q: final alignment for footer contacts column */

/*
  Финально выравниваем правый блок "Контакты" в футере.
  Все строки контактов получают одну геометрию:
  иконка 24x24 слева, текст рядом, всё строго по центру по вертикали.
*/

.premium-footer-v2 .footer-v2-contacts {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

/* Единая геометрия для всех контактных плашек */
.premium-footer-v2 .footer-v2-contacts > .footer-v2-contact,
.premium-footer-v2 .footer-v2-contacts > .footer-v2-location {
  box-sizing: border-box !important;
  position: relative !important;

  display: inline-grid !important;
  grid-template-columns: 24px auto !important;
  align-items: center !important;
  justify-content: start !important;
  justify-items: center !important;
  column-gap: 12px !important;

  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;

  padding: 0 16px !important;
  margin: 0 !important;

  border-radius: 999px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  text-align: left !important;

  transform: none !important;
}

/* Сбрасываем старые absolute/grid правила для WhatsApp/Telegram */
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp,
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram {
  display: inline-grid !important;
  grid-template-columns: 24px auto !important;
  column-gap: 12px !important;
  align-items: center !important;
  justify-content: start !important;
  justify-items: center !important;

  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;

  padding: 0 16px !important;
  gap: 0 !important;
  text-align: left !important;
}

/* Иконки всех контактов */
.premium-footer-v2 .footer-v2-contacts > .footer-v2-contact > .footer-v2-icon,
.premium-footer-v2 .footer-v2-contacts > .footer-v2-location > .footer-v2-icon,
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp > .footer-v2-icon,
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram > .footer-v2-icon {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;

  grid-column: 1 !important;
  justify-self: center !important;
  align-self: center !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  flex: 0 0 24px !important;

  padding: 0 !important;
  margin: 0 !important;

  line-height: 1 !important;
  vertical-align: middle !important;
}

/* SVG внутри иконок */
.premium-footer-v2 .footer-v2-contacts .footer-v2-icon svg {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  fill: currentColor !important;
  line-height: 1 !important;
}

/* Текст всех строк */
.premium-footer-v2 .footer-v2-contacts > .footer-v2-contact > span:not(.footer-v2-icon),
.premium-footer-v2 .footer-v2-contacts > .footer-v2-location > span:not(.footer-v2-icon),
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp > span:not(.footer-v2-icon),
.premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram > span:not(.footer-v2-icon) {
  grid-column: 2 !important;
  justify-self: start !important;
  align-self: center !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 24px !important;
  min-height: 24px !important;

  padding: 0 !important;
  margin: 0 !important;

  line-height: 24px !important;
  text-align: left !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* Hover без разъезда */
.premium-footer-v2 .footer-v2-contacts > .footer-v2-contact:hover {
  transform: translateX(3px) !important;
}

.premium-footer-v2 .footer-v2-contacts > .footer-v2-location {
  transform: none !important;
}

/* На мобильной плашки на всю ширину, но внутреннее выравнивание сохраняется */
@media (max-width: 760px) {
  .premium-footer-v2 .footer-v2-contacts > .footer-v2-contact,
  .premium-footer-v2 .footer-v2-contacts > .footer-v2-location,
  .premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-whatsapp,
  .premium-footer-v2 .footer-v2-contacts > a.footer-v2-contact.footer-v2-telegram {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* STEP 018T: clean CTA system inside main page lead-card */

.lead-card.lead-card-clean {
  overflow: hidden !important;
}

.lead-card-clean .lead-card-clean-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 26px !important;
}

.lead-card-clean .lead-card-clean-btn {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 58px !important;
  padding: 0 28px !important;

  border-radius: 999px !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;

  border: 1px solid transparent !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.22) !important;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease !important;
}

.lead-card-clean .lead-card-clean-btn:hover {
  transform: translateY(-1px) !important;
}

.lead-card-clean .lead-card-clean-icon {
  position: absolute !important;
  left: 28px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

.lead-card-clean .lead-card-clean-icon svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  fill: #ffffff !important;
}

.lead-card-clean .lead-card-clean-label {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  color: #ffffff !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.lead-card-clean .lead-card-clean-wa {
  background: #25D366 !important;
  border-color: #25D366 !important;
}

.lead-card-clean .lead-card-clean-wa:hover {
  background: #1ebe5d !important;
  box-shadow: 0 22px 52px rgba(37,211,102,.30) !important;
}

.lead-card-clean .lead-card-clean-tg {
  background: #229ED9 !important;
  border-color: #229ED9 !important;
}

.lead-card-clean .lead-card-clean-tg:hover {
  background: #1d8fc5 !important;
  box-shadow: 0 22px 52px rgba(34,158,217,.34) !important;
}

.lead-card-clean .lead-card-clean-call {
  background: #d01820 !important;
  border-color: #d01820 !important;
}

.lead-card-clean .lead-card-clean-call:hover {
  background: #b9141b !important;
  box-shadow: 0 22px 52px rgba(208,24,32,.34) !important;
}

/* kill old lead-card button/span rules inside clean card */
.lead-card-clean .lead-card-clean-btn::before,
.lead-card-clean .lead-card-clean-btn::after,
.lead-card-clean .lead-card-clean-icon::before,
.lead-card-clean .lead-card-clean-icon::after,
.lead-card-clean .lead-card-clean-label::before,
.lead-card-clean .lead-card-clean-label::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 760px) {
  .lead-card-clean .lead-card-clean-icon {
    left: 24px !important;
  }
}


/* STEP 019A: compact main page mobile hero, trust stats, back-to-top */

/*
  Цель: сделать главную на мобильной версии более собранной.
  1) Уплотнить первый экран.
  2) Превратить 17 / 300+ / 15 в компактный блок доверия.
  3) Сделать кнопку "наверх" менее навязчивой.
*/

@media (max-width: 760px) {
  /* Общий вертикальный ритм главной */
  .hero,
  section.hero,
  .hero-section {
    padding-top: 24px !important;
    padding-bottom: 34px !important;
  }

  .hero .container,
  .hero-grid,
  .hero-inner {
    gap: 24px !important;
  }

  .hero h1,
  .hero-title {
    margin-bottom: 16px !important;
    font-size: clamp(42px, 11.6vw, 58px) !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
  }

  .hero p,
  .hero-subtitle,
  .hero-lead {
    margin-bottom: 18px !important;
    font-size: 21px !important;
    line-height: 1.45 !important;
  }

  .hero-actions,
  .hero .actions,
  .hero-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 22px 0 18px !important;
  }

  .hero-actions .btn,
  .hero .actions .btn,
  .hero-buttons .btn {
    width: 100% !important;
    min-height: 58px !important;
  }

  /*
    Компактный блок доверия:
    Вместо трёх огромных пустых карточек делаем один общий блок.
  */
  .hero-stats,
  .hero .hero-stats,
  .hero .stats,
  .hero .stats-grid,
  .hero .hero-numbers,
  .hero .trust-stats,
  .hero .metrics,
  .hero .numbers {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;

    width: 100% !important;
    margin: 18px 0 22px !important;
    padding: 16px 12px 14px !important;

    border-radius: 26px !important;
    border: 1px solid rgba(20,16,12,.08) !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(208,24,32,.10), transparent 30%),
      linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,245,238,.90)) !important;
    box-shadow: 0 22px 60px rgba(30,22,16,.10) !important;
    overflow: hidden !important;
  }

  .hero-stats::before,
  .hero .hero-stats::before,
  .hero .stats::before,
  .hero .stats-grid::before,
  .hero .hero-numbers::before,
  .hero .trust-stats::before,
  .hero .metrics::before,
  .hero .numbers::before {
    content: "Факты доверия";
    grid-column: 1 / -1;
    display: block;
    margin: 0 0 12px;
    color: rgba(17,17,17,.52);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  .hero-stats > *,
  .hero .hero-stats > *,
  .hero .stats > *,
  .hero .stats-grid > *,
  .hero .hero-numbers > *,
  .hero .trust-stats > *,
  .hero .metrics > *,
  .hero .numbers > * {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    padding: 2px 8px !important;
    margin: 0 !important;

    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    text-align: left !important;
  }

  .hero-stats > *:not(:first-child),
  .hero .hero-stats > *:not(:first-child),
  .hero .stats > *:not(:first-child),
  .hero .stats-grid > *:not(:first-child),
  .hero .hero-numbers > *:not(:first-child),
  .hero .trust-stats > *:not(:first-child),
  .hero .metrics > *:not(:first-child),
  .hero .numbers > *:not(:first-child) {
    border-left: 1px solid rgba(208,24,32,.16) !important;
  }

  .hero-stats strong,
  .hero .hero-stats strong,
  .hero .stats strong,
  .hero .stats-grid strong,
  .hero .hero-numbers strong,
  .hero .trust-stats strong,
  .hero .metrics strong,
  .hero .numbers strong,
  .hero-stats b,
  .hero .hero-stats b {
    display: block !important;
    margin: 0 0 7px !important;
    color: #d01820 !important;
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: .92 !important;
    letter-spacing: -.045em !important;
  }

  .hero-stats span,
  .hero .hero-stats span,
  .hero .stats span,
  .hero .stats-grid span,
  .hero .hero-numbers span,
  .hero .trust-stats span,
  .hero .metrics span,
  .hero .numbers span,
  .hero-stats small,
  .hero .hero-stats small,
  .hero-stats p,
  .hero .hero-stats p {
    display: block !important;
    margin: 0 !important;
    color: rgba(17,17,17,.58) !important;
    font-size: 10.5px !important;
    font-weight: 850 !important;
    line-height: 1.18 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  /* Поднимаем изображение ближе к первому экрану после сжатия цифр */
  .hero-media,
  .hero-image,
  .hero-visual {
    margin-top: 8px !important;
  }

  .hero-media img,
  .hero-image img,
  .hero-visual img {
    border-radius: 26px !important;
  }

  /* Стрелка наверх на мобильной — меньше и спокойнее */
  .back-to-top {
    width: 46px !important;
    height: 46px !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    font-size: 22px !important;
    box-shadow: 0 14px 34px rgba(208,24,32,.26) !important;
  }

  .back-to-top.is-visible {
    opacity: .92 !important;
  }
}

@media (max-width: 420px) {
  .hero-stats,
  .hero .hero-stats,
  .hero .stats,
  .hero .stats-grid,
  .hero .hero-numbers,
  .hero .trust-stats,
  .hero .metrics,
  .hero .numbers {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .hero-stats > *,
  .hero .hero-stats > *,
  .hero .stats > *,
  .hero .stats-grid > *,
  .hero .hero-numbers > *,
  .hero .trust-stats > *,
  .hero .metrics > *,
  .hero .numbers > * {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}

/* STEP 019C: real mobile compact proof-row and about-numbers */

/*
  Реальные классы главной:
  - hero stats: .proof-row / .proof-item
  - about stats: .about-numbers
  Поэтому 019C правит именно их.
*/

@media (max-width: 760px) {
  /* HERO: 17 / 300+ / 15 as one compact trust block */
  .hero .proof-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;

    width: 100% !important;
    margin: 18px 0 22px !important;
    padding: 16px 10px 14px !important;

    border-radius: 26px !important;
    border: 1px solid rgba(20,16,12,.08) !important;
    background:
      radial-gradient(circle at 10% 0%, rgba(208,24,32,.10), transparent 32%),
      linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,245,238,.91)) !important;
    box-shadow: 0 22px 58px rgba(30,22,16,.10) !important;
    overflow: hidden !important;
  }

  .hero .proof-row::before {
    content: "Факты доверия";
    grid-column: 1 / -1;
    display: block;
    margin: 0 8px 12px;
    color: rgba(17,17,17,.52);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  .hero .proof-item {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    padding: 2px 8px !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    text-align: left !important;
  }

  .hero .proof-item + .proof-item {
    border-left: 1px solid rgba(208,24,32,.18) !important;
  }

  .hero .proof-item span {
    display: block !important;
    margin: 0 0 7px !important;
    color: #d01820 !important;
    font-size: clamp(28px, 8vw, 36px) !important;
    font-weight: 950 !important;
    line-height: .92 !important;
    letter-spacing: -.045em !important;
  }

  .hero .proof-item p {
    display: block !important;
    margin: 0 !important;
    color: rgba(17,17,17,.58) !important;
    font-size: 10.5px !important;
    font-weight: 850 !important;
    line-height: 1.18 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  /* ABOUT block stats: compact too, not three huge empty cards */
  .about .about-numbers {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;

    width: 100% !important;
    margin: 22px 0 0 !important;
    padding: 16px 10px 14px !important;

    border-radius: 26px !important;
    border: 1px solid rgba(20,16,12,.08) !important;
    background:
      radial-gradient(circle at 10% 0%, rgba(208,24,32,.10), transparent 32%),
      linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,245,238,.91)) !important;
    box-shadow: 0 22px 58px rgba(30,22,16,.10) !important;
    overflow: hidden !important;
  }

  .about .about-numbers::before {
    content: "Опыт ROOFMAN";
    grid-column: 1 / -1;
    display: block;
    margin: 0 8px 12px;
    color: rgba(17,17,17,.52);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  .about .about-numbers > div {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    padding: 2px 8px !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    text-align: left !important;
  }

  .about .about-numbers > div + div {
    border-left: 1px solid rgba(208,24,32,.18) !important;
  }

  .about .about-numbers strong {
    display: block !important;
    margin: 0 0 7px !important;
    color: #d01820 !important;
    font-size: clamp(28px, 8vw, 36px) !important;
    font-weight: 950 !important;
    line-height: .92 !important;
    letter-spacing: -.045em !important;
  }

  .about .about-numbers span {
    display: block !important;
    margin: 0 !important;
    color: rgba(17,17,17,.58) !important;
    font-size: 10.5px !important;
    font-weight: 850 !important;
    line-height: 1.18 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  /* Slightly reduce empty vertical rhythm after hero */
  .hero {
    padding-bottom: 28px !important;
  }

  .hero-media-modern,
  .hero .hero-media-modern {
    margin-top: 6px !important;
  }

  /* Back-to-top: less intrusive on mobile */
  .back-to-top {
    width: 44px !important;
    height: 44px !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    font-size: 21px !important;
    box-shadow: 0 12px 30px rgba(208,24,32,.24) !important;
  }
}

@media (max-width: 420px) {
  .hero .proof-row,
  .about .about-numbers {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .hero .proof-item,
  .about .about-numbers > div {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}

/* STEP 020B: clean CTA buttons on services.html */

.inner-cta-card .services-cta-actions-clean {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  margin-top: 28px !important;
}

.inner-cta-card .services-cta-btn {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 60px !important;
  padding: 0 26px !important;

  border-radius: 999px !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;

  border: 1px solid transparent !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease !important;
}

.inner-cta-card .services-cta-btn:hover {
  transform: translateY(-1px) !important;
}

.inner-cta-card .services-cta-icon {
  position: absolute !important;
  left: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;
  line-height: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.inner-cta-card .services-cta-icon svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  fill: #ffffff !important;
}

.inner-cta-card .services-cta-label {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  color: #ffffff !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.inner-cta-card .services-cta-wa {
  background: #25D366 !important;
  border-color: #25D366 !important;
}

.inner-cta-card .services-cta-wa:hover {
  background: #1ebe5d !important;
  box-shadow: 0 22px 52px rgba(37,211,102,.30) !important;
}

.inner-cta-card .services-cta-tg {
  background: #229ED9 !important;
  border-color: #229ED9 !important;
}

.inner-cta-card .services-cta-tg:hover {
  background: #1d8fc5 !important;
  box-shadow: 0 22px 52px rgba(34,158,217,.34) !important;
}

.inner-cta-card .services-cta-call {
  background: #d01820 !important;
  border-color: #d01820 !important;
}

.inner-cta-card .services-cta-call:hover {
  background: #b9141b !important;
  box-shadow: 0 22px 52px rgba(208,24,32,.34) !important;
}

/* reset old pseudo-elements only inside new services CTA */
.inner-cta-card .services-cta-btn::before,
.inner-cta-card .services-cta-btn::after,
.inner-cta-card .services-cta-icon::before,
.inner-cta-card .services-cta-icon::after,
.inner-cta-card .services-cta-label::before,
.inner-cta-card .services-cta-label::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 900px) {
  .inner-cta-card .services-cta-actions-clean {
    grid-template-columns: 1fr !important;
  }

  .inner-cta-card .services-cta-icon {
    left: 24px !important;
  }
}

/* STEP 022B: materials question infographics */

.material-question-visual {
  width: 100%;
  height: 170px;
  margin: 0 0 26px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 0%, rgba(208,24,32,.08), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,245,238,.92));
  border: 1px solid rgba(20,16,12,.07);
  box-shadow: 0 18px 42px rgba(30,22,16,.07);
}

.material-question-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.material-question-visual + * {
  margin-top: 0 !important;
}

@media (max-width: 760px) {
  .material-question-visual {
    height: 210px;
    margin-bottom: 24px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .material-question-visual {
    height: 190px;
  }
}

/* STEP 023C: process step infographics */

.process-step-visual {
  width: 100%;
  height: 230px;
  margin: 0 0 30px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 0%, rgba(208,24,32,.08), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,245,238,.92));
  border: 1px solid rgba(20,16,12,.07);
  box-shadow: 0 18px 42px rgba(30,22,16,.07);
}

.process-step-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.process-step-visual + * {
  margin-top: 0 !important;
}

@media (max-width: 760px) {
  .process-step-visual {
    height: 210px;
    margin-bottom: 24px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .process-step-visual {
    height: 190px;
  }
}

/* STEP 023E: fix process.html infographic card layout */

/*
  process.html structure after 023C:
  article > .process-step-visual > span > div(content)
  This patch turns every process article into a clean 3-column card:
  infographic | number | text
*/

.process-long article:has(.process-step-visual) {
  display: grid !important;
  grid-template-columns: 280px 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 32px !important;

  min-height: 0 !important;
  height: auto !important;
  padding: 34px 42px !important;

  overflow: hidden !important;
}

.process-long article:has(.process-step-visual) .process-step-visual {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 100% !important;
  height: 210px !important;
  min-width: 0 !important;
  margin: 0 !important;

  border-radius: 26px !important;
  box-shadow: 0 18px 42px rgba(30,22,16,.08) !important;
}

.process-long article:has(.process-step-visual) .process-step-visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.process-long article:has(.process-step-visual) > span {
  grid-column: 2 !important;
  grid-row: 1 !important;

  align-self: start !important;
  justify-self: start !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 48px !important;
  height: 48px !important;
  margin: 4px 0 0 !important;

  border-radius: 999px !important;
  background: rgba(208,24,32,.08) !important;
  color: #d01820 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  letter-spacing: .14em !important;
}

.process-long article:has(.process-step-visual) > div:not(.process-step-visual) {
  grid-column: 3 !important;
  grid-row: 1 !important;

  min-width: 0 !important;
  max-width: 760px !important;
}

.process-long article:has(.process-step-visual) h2 {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  max-width: 720px !important;
}

.process-long article:has(.process-step-visual) p {
  max-width: 760px !important;
}

.process-long article:has(.process-step-visual) ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 18px !important;
  margin-top: 18px !important;
}

.process-long article:has(.process-step-visual) li {
  margin: 0 !important;
}

/* Tablet */
@media (max-width: 1080px) {
  .process-long article:has(.process-step-visual) {
    grid-template-columns: 240px 52px minmax(0, 1fr) !important;
    gap: 24px !important;
    padding: 30px !important;
  }

  .process-long article:has(.process-step-visual) .process-step-visual {
    height: 190px !important;
  }
}

/* Mobile: infographic on top, then number and text */
@media (max-width: 760px) {
  .process-long article:has(.process-step-visual) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;

    padding: 22px !important;
    border-radius: 28px !important;
  }

  .process-long article:has(.process-step-visual) .process-step-visual {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 100% !important;
    height: 210px !important;
    border-radius: 22px !important;
  }

  .process-long article:has(.process-step-visual) > span {
    grid-column: 1 !important;
    grid-row: 2 !important;

    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 13px !important;

    justify-self: start !important;
    border-radius: 999px !important;
    font-size: 13px !important;
  }

  .process-long article:has(.process-step-visual) > div:not(.process-step-visual) {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .process-long article:has(.process-step-visual) h2 {
    font-size: clamp(34px, 8.8vw, 44px) !important;
    line-height: 1.04 !important;
  }

  .process-long article:has(.process-step-visual) ul {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

@media (max-width: 420px) {
  .process-long article:has(.process-step-visual) {
    padding: 20px !important;
  }

  .process-long article:has(.process-step-visual) .process-step-visual {
    height: 185px !important;
  }
}


/* STEP 023F: process hero kicker red */
.process-hero-kicker {
  color: #d01820 !important;
  text-shadow: none !important;
}


/* STEP 024B: about company story and fact cards */

.page-about .about-hero-kicker {
  color: #d01820 !important;
  text-shadow: none !important;
}

.page-about .about-proof-card-v2 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-about .about-proof-card-v2 div:first-child strong {
  font-size: clamp(36px, 4.2vw, 56px);
  letter-spacing: -0.06em;
}

.about-story-section {
  padding-top: clamp(58px, 7vw, 96px);
  padding-bottom: clamp(58px, 7vw, 96px);
}

.about-story-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr);
  gap: 34px;
  align-items: stretch;
}

.about-story-card,
.about-fact-card {
  background:
    radial-gradient(circle at 90% 0%, rgba(208,24,32,.08), transparent 30%),
    rgba(255,255,255,.82);
  border: 1px solid rgba(20,16,12,.08);
  border-radius: 34px;
  box-shadow: 0 24px 70px rgba(35,28,20,.08);
}

.about-story-main {
  padding: clamp(34px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-story-main h2 {
  font-size: clamp(42px, 5vw, 72px);
  line-height: .96;
  letter-spacing: -0.07em;
  margin: 0 0 24px;
}

.about-story-main p {
  color: rgba(20,20,20,.68);
  font-size: 19px;
  line-height: 1.65;
  max-width: 680px;
}

.about-story-main p + p {
  margin-top: 16px;
}

.about-story-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.about-fact-card {
  padding: 24px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.about-fact-visual {
  height: 132px;
  border-radius: 26px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.88), transparent 34%),
    linear-gradient(135deg, rgba(245,241,232,.95), rgba(255,255,255,.82));
  border: 1px solid rgba(20,16,12,.07);
}

.about-fact-visual::before,
.about-fact-visual::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(208,24,32,.18);
}

.about-fact-visual::before {
  width: 132px;
  height: 132px;
  right: -34px;
  top: -32px;
}

.about-fact-visual::after {
  width: 74px;
  height: 74px;
  left: 18px;
  bottom: -22px;
}

.about-fact-visual span {
  position: relative;
  z-index: 1;
  color: #d01820;
  font-weight: 950;
  letter-spacing: -0.05em;
  font-size: 42px;
}

.about-fact-visual-system span {
  font-size: 30px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.about-fact-visual-warranty span {
  width: 74px;
  height: 74px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d01820;
  color: #fff;
  box-shadow: 0 18px 38px rgba(208,24,32,.24);
}

.about-fact-card h3 {
  margin: 0 0 10px;
  font-size: 25px;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.about-fact-card p {
  margin: 0;
  color: rgba(20,20,20,.64);
  font-size: 17px;
  line-height: 1.5;
}

@media (max-width: 1040px) {
  .about-story-grid {
    grid-template-columns: 1fr;
  }

  .about-story-main {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .page-about .inner-hero h1 {
    font-size: clamp(46px, 12vw, 72px);
  }

  .page-about .about-proof-card-v2 {
    grid-template-columns: 1fr;
  }

  .about-story-section {
    padding-top: 44px;
    padding-bottom: 48px;
  }

  .about-story-grid {
    gap: 20px;
  }

  .about-story-main {
    padding: 28px 22px;
    border-radius: 30px;
  }

  .about-story-main h2 {
    font-size: clamp(38px, 10vw, 54px);
  }

  .about-story-main p {
    font-size: 18px;
    line-height: 1.58;
  }

  .about-story-facts {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .about-fact-card {
    min-height: 0;
    padding: 22px;
    border-radius: 28px;
  }

  .about-fact-visual {
    height: 128px;
    border-radius: 22px;
  }

  .about-fact-card h3 {
    font-size: 25px;
  }
}


/* STEP 024C: real infographics for about fact cards */

.page-about .inner-hero h1 {
  font-size: clamp(58px, 6.4vw, 108px) !important;
  line-height: .96 !important;
  max-width: 900px !important;
}

.about-fact-card:has(.about-fact-visual-img) {
  min-height: 420px;
}

.about-fact-visual-img {
  height: clamp(210px, 15vw, 260px) !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 80% 0%, rgba(208,24,32,.06), transparent 30%),
    linear-gradient(135deg, #fffaf2, #f7efe3) !important;
}

.about-fact-visual-img::before,
.about-fact-visual-img::after {
  display: none !important;
}

.about-fact-visual-img img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain;
  object-position: center;
  border-radius: 24px;
}

.about-fact-card:has(.about-fact-visual-img) h3 {
  margin-top: 0;
}

@media (max-width: 1040px) {
  .about-fact-card:has(.about-fact-visual-img) {
    min-height: 390px;
  }

  .about-fact-visual-img {
    height: 230px !important;
  }
}

@media (max-width: 760px) {
  .page-about .inner-hero h1 {
    font-size: clamp(44px, 11.5vw, 64px) !important;
    line-height: 1.02 !important;
  }

  .about-fact-card:has(.about-fact-visual-img) {
    min-height: 0;
  }

  .about-fact-visual-img {
    height: 220px !important;
    border-radius: 22px !important;
  }

  .about-fact-visual-img img {
    padding: 6px;
    border-radius: 20px;
  }
}

@media (max-width: 420px) {
  .about-fact-visual-img {
    height: 190px !important;
  }
}


/* STEP 025B: contacts page calm design polish */

.page-contacts .contacts-hero-kicker {
  color: #d01820 !important;
  text-shadow: none !important;
}

.page-contacts .contacts-hero {
  padding-top: clamp(72px, 8vw, 132px);
  padding-bottom: clamp(58px, 7vw, 104px);
}

.page-contacts .contacts-hero h1 {
  font-size: clamp(58px, 7.2vw, 118px);
  line-height: .95;
  letter-spacing: -0.075em;
  max-width: 850px;
}

.page-contacts .contacts-hero .inner-hero-grid {
  align-items: center;
}

.page-contacts .contacts-hero .contact-panel-clean {
  box-shadow:
    0 34px 90px rgba(18,14,12,.18),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

.page-contacts .brief-grid {
  align-items: center;
}

.page-contacts .brief-list {
  box-shadow: 0 24px 72px rgba(35,28,20,.08);
}

.page-contacts .contacts-final-section {
  padding-top: clamp(28px, 4vw, 54px);
  padding-bottom: clamp(78px, 8vw, 120px);
}

.page-contacts .contact-final-v2 {
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: center;

  padding: clamp(34px, 4.6vw, 64px);
  border-radius: 42px;
  overflow: hidden;
  position: relative;

  background:
    radial-gradient(circle at 88% 12%, rgba(208,24,32,.26), transparent 34%),
    radial-gradient(circle at 18% 90%, rgba(34,197,94,.14), transparent 28%),
    linear-gradient(135deg, #111 0%, #181412 48%, #0f0f0f 100%);
  color: #fff;
  box-shadow:
    0 34px 90px rgba(18,14,12,.22),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

.page-contacts .contact-final-v2::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
}

.page-contacts .contact-final-copy,
.page-contacts .contact-final-actions {
  position: relative;
  z-index: 1;
}

.page-contacts .contact-final-v2 .section-kicker {
  color: #ff3b45 !important;
  margin-bottom: 18px;
}

.page-contacts .contact-final-v2 h2 {
  max-width: 620px;
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(42px, 4.8vw, 76px);
  line-height: .96;
  letter-spacing: -0.07em;
}

.page-contacts .contact-final-v2 p {
  max-width: 720px;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: clamp(20px, 1.7vw, 28px);
  line-height: 1.48;
}

.page-contacts .contact-final-actions {
  display: grid;
  gap: 14px;
}

.page-contacts .contact-final-actions .btn {
  width: 100%;
  min-height: 62px;
  border-radius: 999px;
  justify-content: center;
  font-weight: 900;
  letter-spacing: -0.02em;
  box-shadow: none;
}

.page-contacts .contact-final-tg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  border-radius: 999px;
  text-decoration: none;
  background: linear-gradient(135deg, #2aa7df, #168bc4);
  color: #fff !important;
  font-weight: 900;
}

.page-contacts .contact-final-tg:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

@media (max-width: 1040px) {
  .page-contacts .contact-final-v2 {
    grid-template-columns: 1fr;
  }

  .page-contacts .contact-final-actions {
    max-width: 520px;
  }
}

@media (max-width: 760px) {
  .page-contacts .contacts-hero {
    padding-top: 44px;
    padding-bottom: 46px;
  }

  .page-contacts .contacts-hero h1 {
    font-size: clamp(44px, 11.8vw, 66px);
    line-height: 1.02;
  }

  .page-contacts .contacts-final-section {
    padding-top: 20px;
    padding-bottom: 72px;
  }

  .page-contacts .contact-final-v2 {
    padding: 28px 22px;
    border-radius: 30px;
  }

  .page-contacts .contact-final-v2::before {
    inset: 10px;
    border-radius: 24px;
  }

  .page-contacts .contact-final-v2 h2 {
    font-size: clamp(36px, 10vw, 52px);
  }

  .page-contacts .contact-final-v2 p {
    font-size: 18px;
  }

  .page-contacts .contact-final-actions .btn,
  .page-contacts .contact-final-tg {
    min-height: 58px;
  }
}

/* STEP 025C: contacts top phone red centered */

.contacts-hero .contact-panel-clean .top-contact-phone {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 0 !important;

  width: 100% !important;
  min-height: 66px !important;
  padding: 0 22px !important;

  border-radius: 999px !important;
  border: 0 !important;

  background: linear-gradient(135deg, #d01820, #ef3340) !important;
  color: #fff !important;

  font-size: 18px !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;

  box-shadow:
    0 18px 38px rgba(208,24,32,.24),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.contacts-hero .contact-panel-clean .top-contact-phone .top-contact-icon {
  grid-column: 1 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  font-size: 16px !important;
}

.contacts-hero .contact-panel-clean .top-contact-phone span:not(.top-contact-icon) {
  grid-column: 2 !important;
  justify-self: center !important;
  text-align: center !important;

  color: #fff !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
}

.contacts-hero .contact-panel-clean .top-contact-phone:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.04) !important;
  box-shadow:
    0 24px 48px rgba(208,24,32,.30),
    inset 0 1px 0 rgba(255,255,255,.2) !important;
}

@media (max-width: 760px) {
  .contacts-hero .contact-panel-clean .top-contact-phone {
    min-height: 60px !important;
    padding: 0 16px !important;
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  }

  .contacts-hero .contact-panel-clean .top-contact-phone .top-contact-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  .contacts-hero .contact-panel-clean .top-contact-phone span:not(.top-contact-icon) {
    font-size: 16px !important;
  }
}