html {scroll-behavior: smooth}
a {color: inherit; text-decoration: none}
button {color: inherit}
img {display: block; width: 100%}
:root {
--bg: #080a0c;
--bg-soft: #101316;
--card: #14181c;
--card-light: #1b2025;
--text: #f4f7f8;
--muted: #929ba3;
--line: rgba(255,255,255,.09);
--accent: #b8ff2c;
--accent-dark: #8bd000;
--danger: #ff5c5c;
--radius: 28px;
--container: 1240px;
--shadow: 0 30px 80px rgba(0,0,0,.35)
}
* {box-sizing: border-box; margin: 0; padding: 0}

.ds {-webkit-user-select: none; -moz-user-select: none; -webkit-user-drag: none}
.flex {display: flex; flex-wrap: wrap}
.flex.center {justify-content: center}
.flex.align-center {align-items: center}
.flex.align-start {align-items: start}
.flex.align-end {align-items: end}
.flex.space-between {justify-content: space-between}
.flex.nowrap {flex-wrap: nowrap}
.hidden {display: none}
.max {padding: 0px 20px; max-width: 1240px; margin: 0px auto}
.cover {background-position: 50% 50%; background-repeat: no-repeat; background-size: cover}
.contain-0 {background-position: 0% 50%; background-repeat: no-repeat; background-size: contain}
.contain-50 {background-position: 50% 50%; background-repeat: no-repeat; background-size: contain}
.contain-100 {background-position: 100% 50%; background-repeat: no-repeat; background-size: contain}
.mobile-show {display: none !important}
.mobile-flex {display: none !important}
.tablet-show {display: none !important}


body {overflow-x: hidden; background: radial-gradient(circle at 10% 0%, rgba(184,255,44,.08), transparent 28%), var(--bg); color: var(--text); font-family: 'Ubuntu', sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; font-weight: 300}
body.menu-open {overflow: hidden}
button, input, select, textarea {font: inherit}
.container {width: min(calc(100% - 40px), var(--container)); margin-inline: auto}
.section {padding: 120px 0}
.eyebrow {display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase}
.eyebrow::before {width: 34px; height: 1px; background: var(--accent); content: ""}
.section-head {gap: 30px; margin-bottom: 50px}
.section-title {max-width: 800px; font-size: clamp(38px, 6vw, 76px); font-weight: 700; letter-spacing: -.055em; line-height: .95}
.section-description {max-width: 460px; color: var(--muted); font-size: 17px}
.accent {color: var(--accent)}
.btn {height: 60px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 26px; border: 1px solid transparent; border-radius: 100px; cursor: pointer; font-weight: 700; transition: .25s ease}
.btn:hover {transform: translateY(-3px)}
.btn-primary {background: var(--accent); color: #101507; box-shadow: 0 12px 40px rgba(184,255,44,.18)}
.btn-primary:hover {background: #cbff66; box-shadow: 0 18px 60px rgba(184,255,44,.25)}
.btn-secondary {border-color: var(--line); background: rgba(255,255,255,.04); backdrop-filter: blur(12px)}
.btn-secondary:hover {border-color: rgba(184,255,44,.45)}
.header {position: fixed; z-index: 1000; top: 0; right: 0; left: 0; transition: .3s}
.header.scrolled {border-bottom: 1px solid var(--line); background: rgba(8,10,12,.82); backdrop-filter: blur(20px)}
.header-inner {min-height: 86px; gap: 30px}
.logo {position: relative; z-index: 1002; font-size: 23px; font-weight: 900; letter-spacing: -.05em}
.logo span {color: var(--accent)}
.nav {gap: 30px}
.nav li {position: relative; display: block}
.nav a {color: #c1c7cb; font-size: 14px; font-weight: 700; transition: .2s}
.nav a:hover {color: var(--accent)}
/* .nav .sub-menu {display: none} */
.header-actions {gap: 12px}
.header-phone {font-weight: 700}
.menu-button {position: relative; z-index: 1002; width: 48px; height: 48px; display: none; border: 1px solid var(--line); border-radius: 50%; background: var(--card); cursor: pointer}
.menu-button span, .menu-button::before, .menu-button::after {position: absolute; left: 14px; width: 18px; height: 2px; background: white; transition: .3s; content: ""}
.menu-button::before {top: 16px}
.menu-button span {top: 22px}
.menu-button::after {top: 28px}
.menu-button.active span {opacity: 0}
.menu-button.active::before {top: 22px; transform: rotate(45deg)}
.menu-button.active::after {top: 22px; transform: rotate(-45deg)}
.hero {min-height: 100vh; position: relative; overflow: hidden; padding: 150px 0 80px}
.hero-bg {position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,12,.98) 0%, rgba(8,10,12,.72) 42%, rgba(8,10,12,.2) 72%), linear-gradient(0deg, var(--bg) 0%, transparent 38%), url("images/home.png") center 60% / cover; transform: scale(1.05); animation: heroZoom 12s ease-out forwards}
.hero-bg::after {position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 80px 80px; content: ""; mask-image: linear-gradient(to bottom, black, transparent 80%)}
@keyframes heroZoom {to {transform: scale(1)}}
.hero-content {position: relative; z-index: 2}
.hero-label {display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 100px; background: rgba(0,0,0,.25); backdrop-filter: blur(10px); color: #d2d7da; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase}
.hero-label::before {width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px var(--accent); content: ""}
.hero h1 {max-width: 950px; font-size: clamp(58px, 9.5vw, 145px); font-weight: 900; letter-spacing: -.075em; line-height: .78; text-transform: uppercase}
.hero h1 .outline {color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55)}
.hero-bottom {gap: 40px; margin-top: 50px}
.hero-description {max-width: 520px; color: #b4bcc1; font-size: clamp(17px, 2vw, 21px)}
.hero-buttons {gap: 12px; margin-top: 28px}
.hero-stats {gap: 45px}
.hero-stat strong {display: block; font-size: 38px; letter-spacing: -.05em}
.hero-stat span {color: var(--muted); font-size: 13px}
.services-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px}
.service-card {min-height: 440px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; isolation: isolate}
.service-card::after {position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgba(7,9,10,.96), rgba(7,9,10,.1) 80%), linear-gradient(90deg, rgba(7,9,10,.5), transparent); content: ""}
.service-card-bg {position: absolute; z-index: -2; inset: 0; background-position: center; background-size: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1)}
.service-card:hover .service-card-bg {transform: scale(1.08)}
.service-card-content {height: 100%; display: flex; flex-direction: column; justify-content: end; padding: 34px}
.service-number {position: absolute; top: 26px; left: 30px; color: rgba(255,255,255,.65); font-size: 13px; font-weight: 700}
.service-arrow {width: 54px; height: 54px; position: absolute; top: 22px; right: 22px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(0,0,0,.25); font-size: 22px; transition: .3s}
.service-card:hover .service-arrow {background: var(--accent); color: #111; transform: rotate(45deg)}
.service-card h3 {margin-bottom: 8px; font-size: clamp(34px, 5vw, 58px); letter-spacing: -.055em; line-height: 1}
.service-card p {max-width: 440px; color: #b6bdc1}
.calculator-section {background: radial-gradient(circle at 90% 20%, rgba(184,255,44,.08), transparent 27%), #0c0f11}
.calculator {overflow: hidden; border: 1px solid var(--line); border-radius: 32px; background: var(--card); box-shadow: var(--shadow)}
.calc-tabs {display: grid; grid-template-columns: repeat(6, 1fr); padding: 8px; border-bottom: 1px solid var(--line); background: #0d1012}
.calc-tab {min-height: 50px; border: 0; border-radius: 18px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; transition: .25s}
.calc-tab:hover {color: white}
.calc-tab.active {background: var(--accent); color: #111}
.calc-layout {display: grid; grid-template-columns: 1.1fr .9fr}
.calc-main {padding: 42px; border-right: 1px solid var(--line)}
.calc-step {margin-bottom: 36px}
.calc-step:last-child {margin-bottom: 0}
.calc-step-title {gap: 12px; margin-bottom: 18px; font-size: 17px; font-weight: 700}
.step-number {width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(184,255,44,.12); color: var(--accent); font-size: 12px}
.options {gap: 10px}
.option {position: relative; cursor: pointer}
.option input {position: absolute; opacity: 0; pointer-events: none}
.option span {min-height: 48px; display: flex; align-items: center; padding: 0 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); color: #c3c9cc; font-size: 14px; font-weight: 750; transition: .2s}
.option span:hover {border-color: rgba(184,255,44,.35)}
.option input:checked + span {border-color: var(--accent); background: rgba(184,255,44,.1); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent)}
.service-panel {display: none}
.service-panel.active {display: block}
.car-visual {position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(circle, rgba(184,255,44,.08), transparent 55%), repeating-linear-gradient(90deg, transparent 0 59px, rgba(255,255,255,.025) 60px), repeating-linear-gradient(0deg, transparent 0 59px, rgba(255,255,255,.025) 60px), #0d1012}
.car-visual svg {width: min(88%, 620px); filter: drop-shadow(0 30px 30px rgba(0,0,0,.5))}
.car-zone {cursor: pointer; fill: #30363a; stroke: #70787d; stroke-width: 2; transition: .25s}
.car-zone:hover {fill: #596229; stroke: var(--accent)}
.car-zone.selected {fill: var(--accent); stroke: #dcff95; filter: drop-shadow(0 0 10px rgba(184,255,44,.35))}
.car-part-fixed {fill: #1c2124; stroke: #596166; stroke-width: 2}
.car-window {fill: #090b0c; stroke: #596166; stroke-width: 2}
.visual-hint {position: absolute; bottom: 14px; color: var(--muted); font-size: 12px}
.package-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px}
.package {position: relative; min-height: 160px; cursor: pointer}
.package input {position: absolute; opacity: 0}
.package-body {height: 100%; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.025); transition: .25s}
.package input:checked + .package-body {border-color: var(--accent); background: rgba(184,255,44,.08); box-shadow: inset 0 0 0 1px var(--accent)}
.package-title {display: block; margin-bottom: 8px; font-weight: 850}
.package-description {color: var(--muted); font-size: 13px}
.package-price {display: block; margin-top: 16px; color: var(--accent); font-weight: 700}
.calc-result {position: relative; min-height: 100%; padding: 42px; background: linear-gradient(150deg, rgba(184,255,44,.08), transparent 44%), #101416}
.calc-result-sticky {position: sticky; top: 120px}
.result-label {margin-bottom: 12px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .12em}
.result-price {margin-bottom: 8px; font-size: clamp(40px, 5vw, 64px); font-weight: 900; letter-spacing: -.06em; line-height: 1}
.result-note {color: var(--muted); font-size: 13px}
.result-line {height: 1px; margin: 30px 0; background: var(--line)}
.result-list {display: grid; gap: 15px; margin-bottom: 30px}
.result-item {gap: 20px; color: #c1c7ca; font-size: 14px}
.result-item span:last-child {color: white; font-weight: 700; text-align: right}
.result-button {width: 100%}
.portfolio-filters {gap: 8px; margin-bottom: 28px}
.portfolio-filter {padding: 12px 18px; border: 1px solid var(--line); border-radius: 100px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 750; transition: .2s}
.portfolio-filter.active, .portfolio-filter:hover {border-color: var(--accent); color: var(--accent)}
.portfolio-grid {display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px}
.work-card {min-height: 440px; position: relative; grid-column: span 4; overflow: hidden; border: 1px solid var(--line); border-radius: 24px}
.work-card:first-child {grid-column: span 8}
.work-card img {height: 100%; object-fit: cover; transition: .7s}
.work-card:hover img {transform: scale(1.06)}
.work-overlay {position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: end; padding: 28px; background: linear-gradient(0deg, rgba(5,7,8,.96), transparent 65%)}
.work-type {width: fit-content; margin-bottom: 9px; padding: 6px 10px; border-radius: 100px; background: var(--accent); color: #111; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase}
.work-card h3 {font-size: 28px; letter-spacing: -.04em}
.work-card p {margin-top: 5px; color: #b6bdc1; font-size: 13px}
.reviews-section {background: #0c0f11}
.reviews-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px}
.review-card {min-height: 290px; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--card)}
.review-stars {margin-bottom: 24px; color: var(--accent); letter-spacing: 4px}
.review-text {color: #d4d8da; font-size: 16px}
.review-author {gap: 12px; margin-top: auto; padding-top: 24px}
.review-avatar {width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #4b660f); color: #111; font-weight: 900}
.review-author strong {display: block}
.review-author span {color: var(--muted); font-size: 12px}
.contact-card {display: grid; grid-template-columns: .85fr 1.15fr; overflow: hidden; border: 1px solid var(--line); border-radius: 32px; background: var(--card)}
.contact-info {position: relative; overflow: hidden; padding: 50px; background: radial-gradient(circle at 0% 100%, rgba(184,255,44,.28), transparent 35%), #111618}
.contact-info h2 {max-width: 510px; margin-bottom: 20px; font-size: clamp(42px, 6vw, 78px); letter-spacing: -.065em; line-height: .95}
.contact-info > p {max-width: 430px; color: var(--muted)}
.contacts-list {display: grid; gap: 15px; margin-top: 45px}
.contact-link {width: fit-content; font-size: 18px; font-weight: 700; transition: .2s}
.contact-link:hover {color: var(--accent)}
.messengers {gap: 10px; margin-top: 32px}
.messenger {padding: 12px 17px; border: 1px solid var(--line); border-radius: 100px; background: rgba(255,255,255,.04); font-size: 13px; font-weight: 700; transition: .2s}
.messenger:hover {border-color: var(--accent); color: var(--accent)}
.wpcf7-form {display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 50px}
.field {display: grid; gap: 8px}
.field-full {grid-column: 1 / -1}
.field label {color: var(--muted); font-size: 12px; font-weight: 700}
.field input, .field select, .field textarea {width: 100%; border: 1px solid var(--line); border-radius: 14px; outline: none; background: #0d1012; color: white; transition: .2s}
.field input, .field select {height: 54px; padding: 0 16px}
.field textarea {min-height: 120px; padding: 16px; resize: none}
.field input:focus, .field select:focus, .field textarea:focus {border-color: var(--accent); box-shadow: 0 0 0 3px rgba(184,255,44,.08)}
.form-submit {margin-top: 10px; grid-column: 1 / -1}
.form-message {display: none; grid-column: 1 / -1; padding: 15px; border: 1px solid rgba(184,255,44,.3); border-radius: 14px; background: rgba(184,255,44,.08); color: var(--accent); font-size: 14px}
.form-policy {grid-column: 1 / -1; color: var(--muted); font-size: 11px}
.footer {padding: 35px 0; border-top: 1px solid var(--line)}
.footer-inner {gap: 30px; color: var(--muted); font-size: 13px}
.footer-nav {gap: 22px}
.footer-nav a:hover {color: white}
.reveal {opacity: 0; transform: translateY(35px); transition: opacity .7s ease, transform .7s ease}
.reveal.visible {opacity: 1; transform: none}

@media (max-width: 1050px) {
  .nav,.header-phone,.header-actions .btn {display:none}
  .menu-button {display:block}
  .nav {position:fixed;inset:0;z-index:1001;display:flex;flex-direction:column;justify-content:center;gap:25px;padding:90px 24px 40px;background:rgba(8,10,12,.98);opacity:0;visibility:hidden;transform:translateY(-20px);transition:.3s}
  .nav.open {opacity:1;visibility:visible;transform:none}
  .nav a {font-size:28px}
  .hero-bottom.align-end {align-items:start;flex-direction:column}
  .calc-layout,.contact-card {grid-template-columns:1fr}
  .calc-main {border-right:0;border-bottom:1px solid var(--line)}
  .calc-result-sticky {position:static}
}

@media (max-width: 800px) {
  .section {padding:85px 0}
  .section-head.align-end {align-items:start;flex-direction:column}
  .services-grid,.reviews-grid {grid-template-columns:1fr}
  .service-card {min-height:390px}
  .calc-tabs {grid-template-columns:repeat(2,1fr)}
  .package-grid {grid-template-columns:1fr}
  .work-card,.work-card:first-child,.work-card:nth-child(5) {min-height:390px;grid-column:span 12}
  .wpcf7-form {grid-template-columns:1fr}
  .field,.form-submit,.form-message,.form-policy {grid-column:1}
  .footer-inner {align-items:start;flex-direction:column}
}

@media (max-width: 580px) {
  .container {width:min(calc(100% - 24px),var(--container))}
  .hero.align-end {min-height:800px;align-items:center;padding-top:120px}
  .hero-bg {background-position:65% center}
  .hero h1 {font-size:58px;line-height:.84}
  .hero-stats {gap:25px}
  .hero-stat strong {font-size:28px}
  .calc-main,.calc-result,.contact-info,.wpcf7-form {padding:25px}
  .car-visual {min-height:230px}
  .calc-tab {min-height:56px;font-size:12px}
  .service-card-content {padding:25px}
  .contact-info h2 {font-size:48px}
}








/* =========================================
   FILM PAGE
========================================= */

.film-hero {
  min-height: 900px;
  position: relative;
  overflow: hidden;
  padding: 150px 0 90px;
}

.film-hero-bg {
  position: absolute;
  inset: 0;
  background:
  linear-gradient(
    90deg,
    rgba(8, 10, 12, .98) 0%,
    rgba(8, 10, 12, .78) 42%,
    rgba(8, 10, 12, .15) 78%
  ),
  linear-gradient(
    0deg,
    var(--bg) 0%,
    transparent 40%
  ),
  url("images/film/film-hero.webp")
  center 60% / cover;
  transform: scale(1.04);
  animation: heroZoom 12s ease-out forwards;
}

.film-hero-bg::after {
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image:
  linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
  content: "";
}

.film-hero-content {
  position: relative;
  z-index: 2;
}

.film-breadcrumbs {
  gap: 10px;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 12px;
}

.film-breadcrumbs a {
  transition: color .2s;
}

.film-breadcrumbs a:hover {
  color: var(--accent);
}

.film-hero h1 {
  max-width: 1100px;
  font-size: clamp(54px, 8.2vw, 125px);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .82;
  text-transform: uppercase;
}

.film-hero h1 .outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .58);
}

.film-hero-bottom {
  gap: 50px;
  margin-top: 50px;
}

.film-hero-features {
  gap: 42px;
}

.film-hero-feature strong {
  display: block;
  font-size: 27px;
  letter-spacing: -.04em;
}

.film-hero-feature span {
  color: var(--muted);
  font-size: 12px;
}


/* Описание */

.film-about-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
}

.film-about-main {
  min-height: 620px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.film-about-main img {
  height: 100%;
  object-fit: cover;
}

.film-about-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px;
  background:
  linear-gradient(
    0deg,
    rgba(5, 7, 8, .96),
    transparent 70%
  );
}

.film-about-overlay span {
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.film-about-overlay h3 {
  max-width: 570px;
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing: -.05em;
  line-height: 1;
}

.film-benefits {
  display: grid;
  gap: 18px;
}

.film-benefit {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding: 27px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
}

.film-benefit-number {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.film-benefit h3 {
  margin-bottom: 8px;
  font-size: 21px;
  letter-spacing: -.03em;
}

.film-benefit p {
  color: var(--muted);
  font-size: 14px;
}

.film-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
}

.film-process-item {
  min-height: 210px;
  padding: 27px;
  border-right: 1px solid var(--line);
}

.film-process-item:last-child {
  border-right: 0;
}

.film-process-item > span {
  display: block;
  margin-bottom: 35px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.film-process-item strong {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
}

.film-process-item p {
  color: var(--muted);
  font-size: 13px;
}


/* Калькулятор плёнки */

.film-calculator .calc-layout {
  grid-template-columns: minmax(0, 1.3fr) minmax(330px, .7fr);
}

.film-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.film-preset {
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: .2s;
}

.film-preset:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.film-car-visual svg {
  width: min(92%, 680px);
}

.film-svg-zone {
  cursor: pointer;
}

.film-svg-zone path,
.film-svg-zone ellipse {
  fill: #30363a;
  stroke: #70787d;
  stroke-width: 2;
  transition: fill .25s, stroke .25s, filter .25s;
}

.film-svg-zone text {
  fill: #aeb6ba;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
  text-anchor: middle;
}

.film-svg-zone:hover path,
.film-svg-zone:hover ellipse {
  fill: #596229;
  stroke: var(--accent);
}

.film-svg-zone.selected path,
.film-svg-zone.selected ellipse {
  fill: var(--accent);
  stroke: #dcff95;
  filter: drop-shadow(0 0 9px rgba(184, 255, 44, .35));
}

.film-svg-zone.selected text {
  fill: #101507;
}

.film-zone-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.film-zone-option {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  transition: .2s;
}

.film-zone-option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(184, 255, 44, .08);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.film-zone-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.film-zone-option span {
  font-size: 13px;
  font-weight: 700;
}

.film-zone-option strong {
  color: var(--accent);
  font-size: 11px;
}


/* Галерея */

.film-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.film-gallery-item {
  min-height: 420px;
  position: relative;
  grid-column: span 4;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
}

.film-gallery-large {
  min-height: 600px;
  grid-column: span 8;
  grid-row: span 2;
}

.film-gallery-wide {
  grid-column: span 8;
}

.film-gallery-item img {
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}

.film-gallery-item:hover img {
  transform: scale(1.06);
}

.film-gallery-item h3 {
  font-size: 28px;
  letter-spacing: -.04em;
}

.film-gallery-item p {
  margin-top: 5px;
  color: #b6bdc1;
  font-size: 13px;
}


/* SEO */

.film-seo {
  padding-top: 30px;
}

.film-seo-card {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 80px;
  padding: 55px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--card);
}

.film-seo-card h2 {
  max-width: 470px;
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: -.055em;
  line-height: 1;
}

.film-seo-content {
  display: grid;
  gap: 18px;
  color: var(--muted);
  font-size: 15px;
}


@media (max-width: 1050px) {
  .film-hero-bottom.align-end {
  align-items: flex-start;
  flex-direction: column;
  }

  .film-about-grid,
  .film-seo-card {
  grid-template-columns: 1fr;
  }

  .film-calculator .calc-layout {
  grid-template-columns: 1fr;
  }

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

  .film-process-item:nth-child(2) {
  border-right: 0;
  }

  .film-process-item:nth-child(-n+2) {
  border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 800px) {
  .film-hero {
  min-height: 820px;
  }

  .film-hero-features.nowrap {
  flex-wrap: wrap;
  gap: 25px;
  }

  .film-about-main {
  min-height: 480px;
  }

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

  .film-gallery-item,
  .film-gallery-large,
  .film-gallery-wide {
  min-height: 420px;
  grid-column: span 12;
  grid-row: auto;
  }

  .film-seo-card {
  gap: 35px;
  padding: 35px;
  }
}

@media (max-width: 580px) {
  .film-hero.align-end {
  min-height: 760px;
  align-items: center;
  padding: 130px 0 70px;
  }

  .film-hero-bg {
  background-position: 62% center;
  }

  .film-hero h1 {
  font-size: 49px;
  }

  .film-hero-feature strong {
  font-size: 22px;
  }

  .film-about-main {
  min-height: 420px;
  }

  .film-about-overlay {
  padding: 25px;
  }

  .film-benefit {
  grid-template-columns: 35px 1fr;
  padding: 22px;
  }

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

  .film-process-item {
  min-height: auto;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  }

  .film-process-item:last-child {
  border-bottom: 0;
  }

  .film-process-item > span {
  margin-bottom: 20px;
  }

  .film-zone-options {
  grid-template-columns: 1fr;
  }

  .film-svg-zone text {
  font-size: 10px;
  }

  .film-seo-card {
  padding: 25px;
  }
}


/* =========================================
   MOVED FROM page-keramika.php
========================================= */
.ceramic-page .service-hero {
	  min-height: 830px;
	  position: relative;
	  overflow: hidden;
	  padding: 170px 0 85px;
	  isolation: isolate;
	}

	.ceramic-page .service-hero-bg {
	  position: absolute;
	  z-index: -2;
	  inset: 0;
	  background:
		linear-gradient(90deg, rgba(8,10,12,.98), rgba(8,10,12,.72) 45%, rgba(8,10,12,.15)),
		linear-gradient(0deg, var(--bg), transparent 45%),
		url("images/ceramic/ceramic-hero.webp") center 60% / cover;
	  animation: ceramicZoom 12s ease-out forwards;
	}

	.ceramic-page .service-hero-bg::after {
	  position: absolute;
	  inset: 0;
	  background:
		radial-gradient(circle at 75% 40%, rgba(184,255,44,.11), transparent 30%),
		linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
	  background-size: auto, 80px 80px, 80px 80px;
	  content: "";
	}

	@keyframes ceramicZoom {
	  from { transform: scale(1.05); }
	  to { transform: scale(1); }
	}

.ceramic-page .breadcrumbs {
	  gap: 9px;
	  margin-bottom: 28px;
	  color: var(--muted);
	  font-size: 12px;
	}

	.ceramic-page .breadcrumbs a:hover {
	  color: var(--accent);
	}

	.ceramic-page .service-hero h1 {
	  max-width: 1000px;
	  font-size: clamp(58px, 9vw, 132px);
	  font-weight: 900;
	  letter-spacing: -.075em;
	  line-height: .8;
	  text-transform: uppercase;
	}

	.ceramic-page .service-hero h1 span {
	  color: transparent;
	  -webkit-text-stroke: 1px rgba(255,255,255,.58);
	}

.ceramic-page .service-hero-bottom {
	  gap: 40px;
	  margin-top: 48px;
	}

	.ceramic-page .service-hero-copy {
	  max-width: 620px;
	}

	.ceramic-page .service-hero-copy p {
	  color: #b4bcc1;
	  font-size: clamp(17px, 2vw, 21px);
	}

.ceramic-page .service-hero-actions {
	  gap: 12px;
	  margin-top: 28px;
	}

	.ceramic-page .hero-price {
	  min-width: 270px;
	  padding: 24px;
	  border: 1px solid var(--line);
	  border-radius: 22px;
	  background: rgba(10,12,14,.65);
	  backdrop-filter: blur(18px);
	}

	.ceramic-page .hero-price span {
	  display: block;
	  margin-bottom: 5px;
	  color: var(--muted);
	  font-size: 12px;
	  text-transform: uppercase;
	  letter-spacing: .12em;
	}

	.ceramic-page .hero-price strong {
	  display: block;
	  color: var(--accent);
	  font-size: 34px;
	  letter-spacing: -.04em;
	}

	.ceramic-page .hero-price small {
	  color: var(--muted);
	}

	.ceramic-page .benefits-grid {
	  display: grid;
	  grid-template-columns: repeat(4, 1fr);
	  gap: 14px;
	}

	.ceramic-page .benefit-card {
	  min-height: 270px;
	  position: relative;
	  overflow: hidden;
	  padding: 27px;
	  border: 1px solid var(--line);
	  border-radius: 24px;
	  background: var(--card);
	}

	.ceramic-page .benefit-card::after {
	  width: 150px;
	  height: 150px;
	  position: absolute;
	  right: -70px;
	  bottom: -70px;
	  border-radius: 50%;
	  background: rgba(184,255,44,.09);
	  filter: blur(3px);
	  content: "";
	}

	.ceramic-page .benefit-number {
	  display: block;
	  margin-bottom: 55px;
	  color: var(--accent);
	  font-size: 12px;
	  font-weight: 900;
	  letter-spacing: .12em;
	}

	.ceramic-page .benefit-card h3 {
	  margin-bottom: 10px;
	  font-size: 25px;
	  letter-spacing: -.04em;
	}

	.ceramic-page .benefit-card p {
	  color: var(--muted);
	  font-size: 14px;
	}

	.ceramic-page .before-after {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  overflow: hidden;
	  border: 1px solid var(--line);
	  border-radius: 30px;
	  background: var(--card);
	}

	.ceramic-page .before-after-media {
	  min-height: 660px;
	  position: relative;
	  overflow: hidden;
	}

	.ceramic-page .before-after-media img {
	  height: 100%;
	  object-fit: cover;
	}

	.ceramic-page .shine-line {
	  width: 22%;
	  position: absolute;
	  top: -10%;
	  bottom: -10%;
	  left: 35%;
	  opacity: .4;
	  background: linear-gradient(
		90deg,
		transparent,
		rgba(255,255,255,.65),
		transparent
	  );
	  filter: blur(16px);
	  transform: rotate(12deg);
	  animation: shine 5s ease-in-out infinite;
	}

	@keyframes shine {
	  0%, 100% { transform: translateX(-180%) rotate(12deg); }
	  55% { transform: translateX(340%) rotate(12deg); }
	}

	.ceramic-page .before-after-content {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  padding: 60px;
	}

	.ceramic-page .before-after-content h2 {
	  margin-bottom: 25px;
	  font-size: clamp(42px, 6vw, 76px);
	  letter-spacing: -.06em;
	  line-height: .95;
	}

	.ceramic-page .before-after-content > p {
	  color: var(--muted);
	  font-size: 17px;
	}

	.ceramic-page .effect-list {
	  display: grid;
	  gap: 16px;
	  margin-top: 34px;
	}

	.ceramic-page .effect-item {
	  display: grid;
	  grid-template-columns: 42px 1fr;
	  gap: 14px;
	  align-items: start;
	}

	.ceramic-page .effect-icon {
	  width: 42px;
	  height: 42px;
	  display: grid;
	  place-items: center;
	  border-radius: 50%;
	  background: rgba(184,255,44,.11);
	  color: var(--accent);
	  font-weight: 900;
	}

	.ceramic-page .effect-item strong {
	  display: block;
	  margin-bottom: 3px;
	}

	.ceramic-page .effect-item span {
	  color: var(--muted);
	  font-size: 13px;
	}

	.ceramic-page .packages-section {
	  background:
		radial-gradient(circle at 90% 10%, rgba(184,255,44,.08), transparent 28%),
		#0c0f11;
	}

	.ceramic-page .ceramic-packages {
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  gap: 18px;
	}

	.ceramic-page .ceramic-package {
	  position: relative;
	  display: flex;
	  flex-direction: column;
	  padding: 32px;
	  border: 1px solid var(--line);
	  border-radius: 26px;
	  background: var(--card);
	  transition: .3s;
	}

	.ceramic-page .ceramic-package:hover {
	  border-color: rgba(184,255,44,.45);
	  transform: translateY(-7px);
	}

	.ceramic-page .ceramic-package.featured {
	  border-color: var(--accent);
	  background:
		linear-gradient(145deg, rgba(184,255,44,.11), transparent 42%),
		var(--card);
	}

	.ceramic-page .package-badge {
	  width: fit-content;
	  margin-bottom: 28px;
	  padding: 7px 11px;
	  border-radius: 100px;
	  background: rgba(184,255,44,.11);
	  color: var(--accent);
	  font-size: 10px;
	  font-weight: 900;
	  letter-spacing: .1em;
	  text-transform: uppercase;
	}

	.ceramic-page .featured .package-badge {
	  background: var(--accent);
	  color: #111;
	}

	.ceramic-page .ceramic-package h3 {
	  font-size: 34px;
	  letter-spacing: -.05em;
	}

	.ceramic-page .package-period {
	  margin-top: 7px;
	  color: var(--muted);
	  font-size: 14px;
	}

	.ceramic-page .package-cost {
	  margin: 28px 0;
	  color: var(--accent);
	  font-size: 38px;
	  font-weight: 900;
	  letter-spacing: -.05em;
	}

	.ceramic-page .package-features {
	  display: grid;
	  gap: 13px;
	  margin-bottom: 30px;
	  color: #c6cccf;
	  font-size: 14px;
	}

	.ceramic-page .package-features li {
	  position: relative;
	  padding-left: 24px;
	  list-style: none;
	}

	.ceramic-page .package-features li::before {
	  position: absolute;
	  left: 0;
	  color: var(--accent);
	  font-weight: 900;
	  content: "✓";
	}

	.ceramic-page .ceramic-package .btn {
	  width: 100%;
	  margin-top: auto;
	}

	.ceramic-page .stages {
	  display: grid;
	  grid-template-columns: repeat(5, 1fr);
	  gap: 12px;
	}

	.ceramic-page .stage {
	  min-height: 235px;
	  padding: 24px;
	  border-top: 1px solid var(--line);
	  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
	}

	.ceramic-page .stage-number {
	  display: block;
	  margin-bottom: 45px;
	  color: var(--accent);
	  font-size: 13px;
	  font-weight: 900;
	}

	.ceramic-page .stage h3 {
	  margin-bottom: 8px;
	  font-size: 21px;
	}

	.ceramic-page .stage p {
	  color: var(--muted);
	  font-size: 13px;
	}

	.ceramic-page .care-card {
	  display: grid;
	  grid-template-columns: .85fr 1.15fr;
	  overflow: hidden;
	  border: 1px solid var(--line);
	  border-radius: 30px;
	  background: var(--card);
	}

	.ceramic-page .care-copy {
	  padding: 55px;
	  background:
		radial-gradient(circle at 0% 100%, rgba(184,255,44,.18), transparent 38%),
		#111517;
	}

	.ceramic-page .care-copy h2 {
	  margin-bottom: 20px;
	  font-size: clamp(42px, 6vw, 72px);
	  letter-spacing: -.06em;
	  line-height: .95;
	}

	.ceramic-page .care-copy p {
	  color: var(--muted);
	}

	.ceramic-page .care-rules {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  gap: 1px;
	  background: var(--line);
	}

	.ceramic-page .care-rule {
	  padding: 30px;
	  background: var(--card);
	}

	.ceramic-page .care-rule strong {
	  display: block;
	  margin-bottom: 8px;
	  color: var(--accent);
	}

	.ceramic-page .care-rule p {
	  color: var(--muted);
	  font-size: 13px;
	}

	.ceramic-page .faq {
	  border-top: 1px solid var(--line);
	}

	.ceramic-page .faq-item {
	  border-bottom: 1px solid var(--line);
	}

	.ceramic-page .faq-question {
	  width: 100%;
	  position: relative;
	  padding: 27px 60px 27px 0;
	  border: 0;
	  background: transparent;
	  cursor: pointer;
	  text-align: left;
	  font-size: clamp(19px, 3vw, 27px);
	  font-weight: 800;
	  letter-spacing: -.03em;
	}

	.ceramic-page .faq-question::after {
	  width: 36px;
	  height: 36px;
	  position: absolute;
	  top: 22px;
	  right: 0;
	  display: grid;
	  place-items: center;
	  border: 1px solid var(--line);
	  border-radius: 50%;
	  color: var(--accent);
	  content: "+";
	  transition: .3s;
	}

	.ceramic-page .faq-item.open .faq-question::after {
	  transform: rotate(45deg);
	}

.ceramic-page .faq-answer {
	  display: none;
	  max-width: 860px;
	  padding: 0 0 27px;
	  color: var(--muted);
}

.ceramic-page .faq-item.open .faq-answer {
  display: block;
}

	@media (max-width: 1050px) {
	  .ceramic-page .benefits-grid {
		grid-template-columns: repeat(2, 1fr);
	  }

	  .ceramic-page .before-after,

	  .ceramic-page .care-card {
		grid-template-columns: 1fr;
	  }

	  .ceramic-page .before-after-media {
		min-height: 520px;
	  }

	  .ceramic-page .stages {
		grid-template-columns: repeat(3, 1fr);
	  }
	}

	@media (max-width: 800px) {
	  .ceramic-page .service-hero-bottom {
		align-items: start;
		flex-direction: column;
	  }

	  .ceramic-page .ceramic-packages {
		grid-template-columns: 1fr;
	  }

	  .ceramic-page .stages {
		grid-template-columns: 1fr 1fr;
	  }
	}

	@media (max-width: 580px) {
	  .ceramic-page .service-hero {
		min-height: 760px;
		padding-top: 130px;
	  }

	  .ceramic-page .service-hero h1 {
		font-size: 55px;
	  }

	  .ceramic-page .benefits-grid,

	  .ceramic-page .stages,

	  .ceramic-page .care-rules {
		grid-template-columns: 1fr;
	  }

	  .ceramic-page .before-after-media {
		min-height: 370px;
	  }

	  .ceramic-page .before-after-content,

	  .ceramic-page .care-copy {
		padding: 30px;
	  }

	  .ceramic-page .hero-price {
		width: 100%;
	  }
	}


/* =========================================
   MOVED FROM page-tonirovka.php
========================================= */
/* Специфичные стили страницы тонировки.
	 Базовые классы наследуются от страницы оклейки. */

  .tint-page .film-hero-bg {
	background:
	  linear-gradient(
		90deg,
		rgba(247, 246, 242, .99) 0%,
		rgba(247, 246, 242, .91) 38%,
		rgba(247, 246, 242, .38) 66%,
		rgba(247, 246, 242, .1) 100%
	  ),
	  linear-gradient(0deg, var(--bg) 0%, transparent 38%),
	  url("images/tint/tint-hero.webp") center 55% / cover;
  }

  @media (max-width: 580px) {
	.tint-page .film-hero-bg {
	  background:
		linear-gradient(
		  90deg,
		  rgba(247, 246, 242, .97),
		  rgba(247, 246, 242, .7)
		),
		linear-gradient(0deg, var(--bg), transparent 45%),
		url("images/tint/tint-hero.webp") 62% center / cover;
	}
  }


/* =========================================
   MOVED FROM page-shumoizolyacziya.php
========================================= */
/* ========================================
	 NOISE INSULATION PAGE
  ======================================== */

  .noise-page .inner-hero {
	position: relative;
	min-height: 760px;
	overflow: hidden;
	padding: 150px 0 90px;
  }

  .noise-page .inner-hero-bg {
	position: absolute;
	inset: 0;
	background:
	  linear-gradient(
		90deg,
		rgba(247, 246, 242, .99) 0%,
		rgba(247, 246, 242, .92) 38%,
		rgba(247, 246, 242, .48) 67%,
		rgba(247, 246, 242, .12) 100%
	  ),
	  linear-gradient(0deg, var(--bg) 0%, transparent 38%),
	  url("images/shumoizolyacziya.png") center 58% / cover;
  }

  .noise-page .inner-hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .16;
	background-image:
	  linear-gradient(rgba(21, 25, 24, .08) 1px, transparent 1px),
	  linear-gradient(90deg, rgba(21, 25, 24, .08) 1px, transparent 1px);
	background-size: 60px 60px;
  }

  .noise-page .inner-hero-content {
	position: relative;
	z-index: 1;
  }

  .noise-page .breadcrumbs {
	gap: 10px;
	margin-bottom: 30px;
	color: var(--muted);
	font-size: 14px;
  }

  .noise-page .breadcrumbs a {
	color: var(--accent);
  }

  .noise-page .inner-hero h1 {
	max-width: 760px;
	margin: 20px 0 24px;
	color: var(--text);
	font-size: clamp(56px, 7vw, 104px);
	line-height: .93;
	letter-spacing: -.055em;
  }

  .noise-page .inner-hero h1 .outline {
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(21, 25, 24, .68);
  }

  .noise-page .inner-hero-description {
	max-width: 650px;
	margin: 0;
	color: #555e5a;
	font-size: 19px;
	line-height: 1.7;
  }

  .noise-page .inner-hero-actions {
	gap: 14px;
	margin-top: 36px;
  }

  .noise-page .inner-hero-features {
	gap: 45px;
	margin-top: 64px;
  }

  .noise-page .inner-hero-features .hero-stat {
	display: grid;
	gap: 5px;
  }

  .noise-page .inner-hero-features strong {
	color: var(--text);
	font-size: 25px;
  }

  .noise-page .inner-hero-features span {
	color: var(--muted);
	font-size: 14px;
  }


  /* DESCRIPTION */

  .noise-page .section {
	padding: 120px 0;
  }

  .noise-page .section-heading {
	max-width: 760px;
	margin-bottom: 58px;
  }

  .noise-page .section-heading h2,

  .noise-page .contact-info h2 {
	margin: 14px 0 20px;
	color: var(--text);
	font-size: clamp(38px, 5vw, 66px);
	line-height: 1.04;
	letter-spacing: -.04em;
  }

  .noise-page .section-heading p {
	color: var(--muted);
	font-size: 17px;
	line-height: 1.75;
  }

  .noise-page .noise-description-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 72px;
	align-items: center;
  }

  .noise-page .noise-description-media {
	position: relative;
	min-height: 650px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 28px;
	box-shadow: var(--shadow);
  }

  .noise-page .noise-description-media img {
	width: 100%;
	height: 100%;
	min-height: 650px;
	object-fit: cover;
  }

  .noise-page .media-badge {
	position: absolute;
	right: 24px;
	bottom: 24px;
	display: grid;
	gap: 3px;
	padding: 20px 24px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 18px;
	background: rgba(12, 105, 88, .9);
	color: #fff;
	backdrop-filter: blur(14px);
  }

  .noise-page .media-badge strong {
	font-size: 25px;
  }

  .noise-page .media-badge span {
	color: rgba(255, 255, 255, .74);
	font-size: 13px;
  }

  .noise-page .noise-description-content {
	display: grid;
	gap: 4px;
  }

  .noise-page .process-item {
	display: grid;
	grid-template-columns: 58px 1fr;
	gap: 20px;
	padding: 25px 0;
	border-bottom: 1px solid var(--line);
  }

  .noise-page .process-number {
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	border-radius: 50%;
	background: rgba(20, 117, 99, .1);
	color: var(--accent);
	font-size: 13px;
	font-weight: 700;
  }

  .noise-page .process-item h3 {
	margin: 0 0 8px;
	color: var(--text);
	font-size: 21px;
  }

  .noise-page .process-item p {
	margin: 0;
	color: var(--muted);
	line-height: 1.7;
  }

  .noise-page .noise-zones {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 72px;
  }

  .noise-page .zone-card {
	padding: 32px;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: var(--card);
	box-shadow: 0 14px 42px rgba(24, 34, 30, .06);
  }

  .noise-page .zone-icon {
	display: grid;
	width: 42px;
	height: 42px;
	margin-bottom: 42px;
	place-items: center;
	border-radius: 50%;
	background: rgba(20, 117, 99, .1);
	color: var(--accent);
	font-size: 12px;
	font-weight: 700;
  }

  .noise-page .zone-card h3 {
	margin: 0 0 10px;
	font-size: 21px;
  }

  .noise-page .zone-card p {
	margin: 0;
	color: var(--muted);
	line-height: 1.7;
  }


  /* CALCULATOR */

  .noise-page .calculator-section {
	background:
	  radial-gradient(
		circle at 90% 10%,
		rgba(20, 117, 99, .12),
		transparent 28%
	  ),
	  var(--bg-soft);
  }

  .noise-page .noise-calculator {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 370px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 28px;
	background: var(--card);
	box-shadow: var(--shadow);
  }

  .noise-page .noise-calc-main {
	padding: 48px;
  }

  .noise-page .calc-step + .calc-step {
	padding-top: 44px;
	margin-top: 44px;
	border-top: 1px solid var(--line);
  }

  .noise-page .calc-step-heading {
	gap: 16px;
	margin-bottom: 25px;
  }

  .noise-page .calc-step-heading h3 {
	margin: 0 0 4px;
	font-size: 22px;
  }

  .noise-page .calc-step-heading p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
  }

  .noise-page .noise-options {
	gap: 10px;
  }

  .noise-page .option {
	cursor: pointer;
  }

  .noise-page .option input,

  .noise-page .noise-zone-option input,

  .noise-page .package input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
  }

  .noise-page .option span {
	display: block;
	padding: 13px 20px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #f8f7f3;
	color: #555d5a;
	transition: .25s ease;
  }

  .noise-page .option input:checked + span {
	border-color: var(--accent);
	background: rgba(20, 117, 99, .09);
	color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
  }

  .noise-page .noise-zone-options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
  }

  .noise-page .noise-zone-option {
	cursor: pointer;
  }

  .noise-page .noise-zone-option > span {
	display: grid;
	min-height: 130px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: #f8f7f3;
	transition: .25s ease;
  }

  .noise-page .noise-zone-option strong {
	color: var(--text);
	font-size: 17px;
  }

  .noise-page .noise-zone-option small {
	margin-top: 5px;
	color: var(--muted);
  }

  .noise-page .noise-zone-option b {
	align-self: end;
	margin-top: 18px;
	color: var(--accent);
	font-size: 14px;
  }

  .noise-page .noise-zone-option input:checked + span {
	border-color: var(--accent);
	background: rgba(20, 117, 99, .08);
	box-shadow: inset 0 0 0 1px var(--accent);
  }

  .noise-page .noise-packages {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
  }

  .noise-page .package {
	cursor: pointer;
  }

  .noise-page .package-body {
	display: grid;
	min-height: 190px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: #f8f7f3;
	transition: .25s ease;
  }

  .noise-page .package-label {
	color: var(--accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
  }

  .noise-page .package-body strong {
	margin-top: 18px;
	color: var(--text);
	font-size: 20px;
  }

  .noise-page .package-body small {
	margin-top: 8px;
	color: var(--muted);
	line-height: 1.5;
  }

  .noise-page .package-body b {
	align-self: end;
	margin-top: 16px;
	color: var(--accent);
  }

  .noise-page .package input:checked + .package-body {
	border-color: var(--accent);
	background: rgba(20, 117, 99, .08);
	box-shadow: inset 0 0 0 1px var(--accent);
  }

  .noise-page .calc-result {
	display: flex;
	flex-direction: column;
	padding: 48px 34px;
	background:
	  linear-gradient(150deg, rgba(20, 117, 99, .12), transparent 48%),
	  #f1efe9;
  }

  .noise-page .result-caption {
	color: var(--muted);
	font-size: 13px;
  }

  .noise-page .result-price {
	margin: 12px 0 36px;
	color: var(--accent);
	font-size: 42px;
	line-height: 1;
  }

  .noise-page .result-list {
	display: grid;
	gap: 15px;
	margin-bottom: 34px;
  }

  .noise-page .result-item {
	gap: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: 14px;
  }

  .noise-page .result-item span:last-child {
	color: var(--text);
	font-weight: 600;
	text-align: right;
  }

  .noise-page .calc-result .btn {
	margin-top: auto;
  }

  .noise-page .result-note {
	margin: 18px 0 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.6;
  }


  /* GALLERY */

  .noise-page .noise-gallery-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: 290px;
	gap: 18px;
  }

  .noise-page .noise-gallery-grid .work-card {
	grid-column: span 4;
	position: relative;
	overflow: hidden;
	min-height: 290px;
	border: 1px solid var(--line);
	border-radius: 22px;
  }

  .noise-page .noise-gallery-grid .noise-gallery-main {
	grid-column: span 8;
	grid-row: span 2;
  }

  .noise-page .noise-gallery-grid .work-card:last-child {
	grid-column: span 8;
  }

  .noise-page .noise-gallery-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s ease;
  }

  .noise-page .noise-gallery-grid .work-card:hover img {
	transform: scale(1.045);
  }

  .noise-page .work-overlay {
	position: absolute;
	inset: auto 0 0;
	padding: 70px 26px 25px;
	color: #fff;
	background: linear-gradient(transparent, rgba(8, 13, 12, .9));
  }

  .noise-page .work-overlay h3 {
	margin: 13px 0 6px;
	font-size: 24px;
  }

  .noise-page .work-overlay p {
	margin: 0;
	color: rgba(255, 255, 255, .74);
  }


  /* CONTACT */

  .noise-page .noise-contact {
	background: var(--bg-soft);
  }

  .noise-page .contact-card {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	overflow: hidden;
	border-radius: 30px;
  }

  .noise-page .contact-info {
	padding: 62px;
  }

  .noise-page .contact-info h2 {
	color: #fff;
  }

  .noise-page .contact-info > p {
	font-size: 16px;
	line-height: 1.75;
  }

  .noise-page .contact-benefits {
	display: grid;
	gap: 18px;
	margin: 42px 0;
  }

  .noise-page .contact-benefits div {
	display: grid;
	gap: 4px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
  }

  .noise-page .contact-benefits strong {
	font-size: 18px;
  }

  .noise-page .contact-benefits span {
	color: rgba(255, 255, 255, .62);
	font-size: 13px;
  }

  .noise-page .contact-form {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	padding: 62px;
  }

  .noise-page .field {
	display: grid;
	gap: 9px;
  }

  .noise-page .field label {
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
  }

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

  .noise-page .field input,

  .noise-page .field select,

  .noise-page .field textarea {
	width: 100%;
	padding: 16px 17px;
	border: 1px solid var(--line);
	border-radius: 12px;
	outline: 0;
	background: #f6f4ef;
	color: var(--text);
	font: inherit;
  }

  .noise-page .field textarea {
	resize: vertical;
  }

  .noise-page .form-consent {
	gap: 10px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.5;
  }

  .noise-page .form-consent input {
	margin-top: 3px;
	accent-color: var(--accent);
  }


  /* SEO */

  .noise-page .seo-section {
	padding: 80px 0 110px;
  }

  .noise-page .seo-content {
	max-width: 880px;
  }

  .noise-page .seo-content h2 {
	margin: 0 0 24px;
	color: var(--text);
	font-size: 30px;
  }

  .noise-page .seo-content p {
	margin: 0 0 18px;
	color: var(--muted);
	line-height: 1.85;
  }


  /* RESPONSIVE */

	@media (max-width: 1100px) {
	.noise-page .noise-description-grid {
	  gap: 42px;
	}

	.noise-page .noise-calculator {
	  grid-template-columns: 1fr;
	}

	.noise-page .calc-result {
	  min-height: 420px;
	}

	.noise-page .contact-info,
	.noise-page .contact-form {
	  padding: 45px;
	}
  }

  @media (max-width: 900px) {
	.noise-page .inner-hero {
	  min-height: 700px;
	}

	.noise-page .noise-description-grid,

	.noise-page .contact-card {
	  grid-template-columns: 1fr;
	}

	.noise-page .noise-description-media,

	.noise-page .noise-description-media img {
	  min-height: 520px;
	}

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

	.noise-page .noise-gallery-grid {
	  grid-auto-rows: 260px;
	}

	.noise-page .noise-gallery-grid .work-card,

	.noise-page .noise-gallery-grid .noise-gallery-main,

	.noise-page .noise-gallery-grid .work-card:last-child {
	  grid-column: span 6;
	  grid-row: auto;
	}
  }

  @media (max-width: 680px) {
	.noise-page .section {
	  padding: 82px 0;
	}

	.noise-page .inner-hero {
	  min-height: 720px;
	  padding: 125px 0 70px;
	}

	.noise-page .inner-hero-bg {
	  background:
		linear-gradient(
		  90deg,
		  rgba(247, 246, 242, .98),
		  rgba(247, 246, 242, .68)
		),
		linear-gradient(0deg, var(--bg), transparent 45%),
		url("images/shumoizolyacziya.png") 62% center / cover;
	}

	.noise-page .inner-hero h1 {
	  font-size: clamp(48px, 16vw, 74px);
	}

	.noise-page .inner-hero-description {
	  font-size: 16px;
	}

	.noise-page .inner-hero-features {
	  gap: 24px;
	  margin-top: 45px;
	}

	.noise-page .noise-description-media,

	.noise-page .noise-description-media img {
	  min-height: 410px;
	}

	.noise-page .noise-zones,

	.noise-page .noise-zone-options,

	.noise-page .noise-packages,

	.noise-page .contact-form {
	  grid-template-columns: 1fr;
	}

	.noise-page .noise-calc-main,

	.noise-page .calc-result,

	.noise-page .contact-info,

	.noise-page .contact-form {
	  padding: 28px 22px;
	}

	.noise-page .noise-gallery-grid {
	  display: grid;
	  grid-template-columns: 1fr;
	  grid-auto-rows: 300px;
	}

	.noise-page .noise-gallery-grid .work-card,

	.noise-page .noise-gallery-grid .noise-gallery-main,

	.noise-page .noise-gallery-grid .work-card:last-child {
	  grid-column: 1;
	}

	.noise-page .field-full {
	  grid-column: auto;
	}
  }


/* =========================================
   UNIVERSAL SERVICE DETAIL PAGE
========================================= */
.special-hero {min-height:860px;position:relative;overflow:hidden;padding:150px 0 85px;isolation:isolate}
.special-hero-bg {position:absolute;z-index:-2;inset:0;background-position:center;background-size:cover;transform:scale(1.04);animation:heroZoom 12s ease-out forwards}
.special-hero-bg::after {position:absolute;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:80px 80px;content:"";mask-image:linear-gradient(to bottom,black,transparent 85%)}
.dent-page .special-hero-bg {background-image:linear-gradient(90deg,rgba(8,10,12,.98),rgba(8,10,12,.76) 44%,rgba(8,10,12,.18) 78%),linear-gradient(0deg,var(--bg),transparent 42%),url("https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?auto=format&fit=crop&w=2200&q=90")}
.localization-page .special-hero-bg {background-image:linear-gradient(90deg,rgba(8,10,12,.98),rgba(8,10,12,.78) 46%,rgba(8,10,12,.22) 80%),linear-gradient(0deg,var(--bg),transparent 42%),url("https://images.unsplash.com/photo-1552519507-da3b142c6e3d?auto=format&fit=crop&w=2200&q=90")}
.special-hero-content {position:relative;z-index:2}
.special-page .breadcrumbs {gap:10px;margin-bottom:24px;color:var(--muted);font-size:12px}
.special-page .breadcrumbs a:hover {color:var(--accent)}
.special-hero h1 {max-width:1100px;font-size:clamp(54px,8.3vw,126px);font-weight:900;letter-spacing:-.075em;line-height:.82;text-transform:uppercase}
.special-hero h1 .outline {color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.58)}
.special-hero-bottom {gap:45px;margin-top:50px}
.special-hero-copy {max-width:620px}
.special-stats {gap:38px}
.special-stat {max-width:150px}
.special-stat strong {display:block;font-size:27px;letter-spacing:-.04em}
.special-stat span {color:var(--muted);font-size:12px}
.special-about-grid {display:grid;grid-template-columns:1.08fr .92fr;gap:18px}
.special-about-media {min-height:620px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius)}
.special-about-media img {height:100%;object-fit:cover}
.special-about-overlay {position:absolute;inset:0;display:flex;flex-direction:column;justify-content:end;padding:36px;background:linear-gradient(0deg,rgba(5,7,8,.96),transparent 70%)}
.special-about-overlay span {margin-bottom:12px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.special-about-overlay h3 {max-width:570px;font-size:clamp(30px,4vw,52px);letter-spacing:-.05em;line-height:1}
.special-benefits {display:grid;gap:18px}
.special-benefit {display:grid;grid-template-columns:48px 1fr;gap:20px;padding:27px;border:1px solid var(--line);border-radius:22px;background:var(--card)}
.special-benefit>span {color:var(--accent);font-size:12px;font-weight:700}
.special-benefit h3 {margin-bottom:8px;font-size:21px;letter-spacing:-.03em}
.special-benefit p {color:var(--muted);font-size:14px}
.special-process-section,.special-faq-section {background:#0c0f11}
.special-process {display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--card)}
.special-process-item {min-height:235px;padding:28px;border-right:1px solid var(--line)}
.special-process-item:last-child {border-right:0}
.special-process-item>span {display:block;margin-bottom:48px;color:var(--accent);font-size:12px;font-weight:700}
.special-process-item h3 {margin-bottom:8px;font-size:22px}
.special-process-item p {color:var(--muted);font-size:13px}
.special-packages {display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.special-package {min-height:330px;display:flex;flex-direction:column;padding:32px;border:1px solid var(--line);border-radius:26px;background:var(--card)}
.special-package.featured {border-color:var(--accent);background:linear-gradient(145deg,rgba(184,255,44,.11),transparent 44%),var(--card)}
.special-package-label {width:fit-content;margin-bottom:32px;padding:7px 11px;border-radius:100px;background:rgba(184,255,44,.1);color:var(--accent);font-size:11px;font-weight:800;text-transform:uppercase}
.special-package strong {margin-bottom:18px;color:var(--accent);font-size:38px;letter-spacing:-.05em}
.special-package p {margin-bottom:30px;color:var(--muted);font-size:14px}
.special-package .btn {width:100%;margin-top:auto}
.special-page .faq {border-top:1px solid var(--line)}
.special-page .faq-item {border-bottom:1px solid var(--line)}
.special-page .faq-question {width:100%;position:relative;padding:27px 60px 27px 0;border:0;background:transparent;cursor:pointer;text-align:left;font-size:clamp(19px,3vw,27px);font-weight:700}
.special-page .faq-question::after {width:36px;height:36px;position:absolute;top:22px;right:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--accent);content:"+";transition:.3s}
.special-page .faq-item.open .faq-question::after {transform:rotate(45deg)}
.special-page .faq-answer {display:none;max-width:860px;padding:0 0 27px;color:var(--muted)}
.special-page .faq-item.open .faq-answer {display:block}
.special-seo {padding-top:30px}
.special-seo-card {display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;padding:55px;border:1px solid var(--line);border-radius:28px;background:var(--card)}
.special-seo-card h2 {font-size:clamp(34px,5vw,58px);letter-spacing:-.055em;line-height:1}
.special-seo-content {display:grid;gap:18px;color:var(--muted);font-size:15px}
@media (max-width:1050px) {.special-hero-bottom{align-items:start;flex-direction:column}.special-about-grid,.special-seo-card{grid-template-columns:1fr}.special-process{grid-template-columns:repeat(2,1fr)}.special-process-item:nth-child(2){border-right:0}.special-process-item:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:800px) {.special-hero{min-height:820px}.special-stats.nowrap{flex-wrap:wrap;gap:25px}.special-packages{grid-template-columns:1fr}.special-seo-card{gap:35px;padding:35px}}
@media (max-width:580px) {.special-hero{min-height:760px;align-items:center;padding:130px 0 70px}.special-hero h1{font-size:49px}.special-about-media{min-height:430px}.special-about-overlay{padding:25px}.special-benefit{grid-template-columns:35px 1fr;padding:22px}.special-process{grid-template-columns:1fr}.special-process-item{min-height:auto;border-right:0;border-bottom:1px solid var(--line)}.special-process-item:last-child{border-bottom:0}.special-process-item>span{margin-bottom:20px}.special-seo-card{padding:25px}}


/* =========================================
   PROJECT-WIDE RESPONSIVE HARDENING
========================================= */
html {overflow-x:hidden}
body {min-width:320px}
main {overflow:clip}
h1,h2,h3,p,a,button,strong,span {overflow-wrap:break-word}
iframe,video,table {max-width:100%}
.content {min-width:0}
.content img {height:auto}
.content iframe,.content video {width:100%;height:auto;aspect-ratio:16/9}
.content table {display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.btn {max-width:100%;text-align:center;white-space:normal}
.service-card,.work-card,.review-card,.special-package,.ceramic-package {min-width:0}
.calc-layout>*,.contact-card>*,.film-about-grid>*,.special-about-grid>*,.noise-description-grid>* {min-width:0}

@media (max-width:1180px) {
  .container {width:min(calc(100% - 48px),var(--container))}
  .section {padding:100px 0}
  .hero h1 {font-size:clamp(64px,10vw,116px)}
  .calc-tabs {grid-template-columns:repeat(3,1fr)}
  .calc-tab {padding:8px}
  .package-grid {grid-template-columns:repeat(2,1fr)}
  .package-grid .package:last-child {grid-column:1/-1}
  .film-about-grid,.special-about-grid {grid-template-columns:1fr 1fr}
  .film-about-main,.special-about-media {min-height:560px}
  .ceramic-page .stages {grid-template-columns:repeat(3,1fr)}
}

@media (max-width:900px) {
  .container {width:min(calc(100% - 36px),var(--container))}
  .section {padding:84px 0}
  .header-inner {min-height:76px}
  .section-title {font-size:clamp(36px,8vw,62px)}
  .section-description {font-size:16px}
  .hero {min-height:760px;padding:125px 0 70px}
  .hero h1 {font-size:clamp(54px,12vw,92px)}
  .hero-bottom {margin-top:38px}
  .hero-stats {flex-wrap:wrap;gap:26px}
  .services-grid {grid-template-columns:1fr}
  .service-card {min-height:400px}
  .calc-main,.calc-result {padding:32px}
  .package-grid {grid-template-columns:1fr}
  .package-grid .package:last-child {grid-column:auto}
  .portfolio-grid {gap:14px}
  .reviews-grid {grid-template-columns:1fr 1fr}
  .review-card:last-child {grid-column:1/-1}
  .contact-info,.wpcf7-form {padding:38px}
  .film-hero,.special-hero,.ceramic-page .service-hero {min-height:760px;padding:125px 0 70px}
  .film-hero h1,.special-hero h1,.ceramic-page .service-hero h1 {font-size:clamp(48px,10vw,78px)}
  .film-about-grid,.special-about-grid {grid-template-columns:1fr}
  .film-about-main,.special-about-media {min-height:500px}
  .film-gallery {gap:14px}
  .ceramic-page .benefits-grid {grid-template-columns:repeat(2,1fr)}
  .ceramic-page .before-after-media {min-height:480px}
  .noise-page .noise-description-grid {gap:32px}
  .noise-page .noise-zones {grid-template-columns:repeat(2,1fr)}
}

@media (max-width:680px) {
  .container,.max {width:min(calc(100% - 24px),var(--container));padding-inline:0}
  .section {padding:68px 0}
  .header-inner {min-height:70px;gap:14px}
  .logo {font-size:20px}
  .menu-button {width:44px;height:44px;flex:0 0 44px}
  .menu-button::before {top:14px}
  .menu-button span {top:20px}
  .menu-button::after {top:26px}
  .menu-button.active::before,.menu-button.active::after {top:20px}
  .nav {padding:90px 24px 40px;overflow-y:auto}
  .nav a {font-size:clamp(22px,8vw,30px)}
  .eyebrow {margin-bottom:15px;font-size:10px;letter-spacing:.14em}
  .eyebrow::before {width:24px}
  .section-head {gap:18px;margin-bottom:34px}
  .section-title {font-size:clamp(34px,10.5vw,50px);line-height:1}
  .hero {min-height:max(720px,100svh);padding:110px 0 58px}
  .hero h1 {font-size:clamp(45px,15vw,68px);line-height:.86}
  .hero-label {font-size:10px;letter-spacing:.08em}
  .hero-description {font-size:16px}
  .hero-bottom {gap:28px;margin-top:32px}
  .hero-buttons {width:100%;gap:10px}
  .hero-buttons .btn {flex:1 1 220px}
  .hero-stats {width:100%;gap:18px 24px}
  .hero-stat strong {font-size:27px}
  .service-card {min-height:350px;border-radius:22px}
  .service-card-content {padding:24px}
  .service-card h3 {font-size:clamp(31px,11vw,44px)}
  .service-number {top:22px;left:24px}
  .service-arrow {width:46px;height:46px;top:18px;right:18px}
  .calculator {border-radius:22px}
  .calc-tabs {grid-template-columns:1fr 1fr;padding:6px}
  .calc-tab {min-height:52px;padding:8px 6px;font-size:11px;line-height:1.2}
  .calc-main,.calc-result {padding:24px}
  .calc-step {margin-bottom:28px}
  .calc-step-title,.calc-step-heading {align-items:flex-start}
  .option {flex:1 1 140px}
  .option span {height:100%;justify-content:center;padding:10px 12px;text-align:center}
  .car-visual {min-height:210px;border-radius:18px}
  .visual-hint {right:10px;bottom:10px;left:10px;text-align:center}
  .result-price {font-size:clamp(36px,12vw,50px)}
  .result-item {align-items:flex-start;gap:8px 16px}
  .portfolio-filters {margin-inline:-12px;padding:0 12px 8px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .portfolio-filters::-webkit-scrollbar {display:none}
  .portfolio-filter {flex:0 0 auto}
  .portfolio-grid {gap:12px}
  .work-card,.work-card:first-child,.work-card:nth-child(5) {min-height:340px}
  .reviews-grid {grid-template-columns:1fr}
  .review-card,.review-card:last-child {min-height:260px;grid-column:auto}
  .contact-card {border-radius:22px}
  .contact-info,.wpcf7-form,.noise-page .contact-info,.noise-page .contact-form {padding:26px}
  .contact-info h2 {font-size:clamp(38px,12vw,50px)}
  .contact-link {max-width:100%;font-size:16px}
  .messengers {gap:8px}
  .messenger {padding:10px 13px}
  .footer {padding:28px 0}
  .footer-inner {gap:20px}
  .footer-nav {gap:12px 18px}
  .film-hero,.special-hero,.ceramic-page .service-hero,.noise-page .inner-hero {min-height:max(700px,100svh);padding:110px 0 60px}
  .film-hero h1,.special-hero h1,.ceramic-page .service-hero h1,.noise-page .inner-hero h1 {font-size:clamp(39px,12.5vw,58px);line-height:.88}
  .film-hero-bottom,.special-hero-bottom,.ceramic-page .service-hero-bottom {gap:28px;margin-top:34px}
  .film-hero-features,.special-stats {width:100%;flex-wrap:wrap;gap:20px 24px}
  .film-hero-feature,.special-stat {min-width:calc(50% - 12px);max-width:none}
  .film-about-main,.special-about-media {min-height:390px}
  .film-about-overlay,.special-about-overlay {padding:24px}
  .film-benefit,.special-benefit {grid-template-columns:34px 1fr;padding:21px}
  .film-process,.special-process {grid-template-columns:1fr}
  .film-process-item,.special-process-item {min-height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .film-process-item:last-child,.special-process-item:last-child {border-bottom:0}
  .film-gallery-item,.film-gallery-large,.film-gallery-wide {min-height:340px}
  .film-seo-card,.special-seo-card {gap:26px;padding:24px}
  .ceramic-page .benefits-grid,.ceramic-page .stages,.ceramic-page .care-rules,.ceramic-page .ceramic-packages {grid-template-columns:1fr}
  .ceramic-page .before-after-media {min-height:340px}
  .ceramic-page .before-after-content,.ceramic-page .care-copy {padding:26px}
  .ceramic-page .hero-price {width:100%;min-width:0}
  .noise-page .section {padding:68px 0}
  .noise-page .section-heading {margin-bottom:36px}
  .noise-page .noise-description-media,.noise-page .noise-description-media img {min-height:360px}
  .noise-page .noise-zones,.noise-page .noise-zone-options,.noise-page .noise-packages {grid-template-columns:1fr}
  .noise-page .noise-calc-main,.noise-page .calc-result {padding:24px}
  .noise-page .noise-gallery-grid {grid-template-columns:1fr;grid-auto-rows:320px}
  .noise-page .noise-gallery-grid .work-card,.noise-page .noise-gallery-grid .noise-gallery-main,.noise-page .noise-gallery-grid .work-card:last-child {grid-column:1;grid-row:auto}
}

@media (max-width:420px) {
  .btn {width:100%;height:auto;min-height:54px;padding:12px 18px}
  .hero-buttons {flex-direction:column}
  .hero-buttons .btn {flex:0 0 auto}
  .hero h1 {font-size:clamp(42px,14vw,56px)}
  .hero-stats,.film-hero-features,.special-stats {display:grid;grid-template-columns:1fr 1fr}
  .hero-stat:last-child,.film-hero-feature:last-child,.special-stat:last-child {grid-column:1/-1}
  .film-hero-feature,.special-stat {min-width:0}
  .calc-tabs {grid-template-columns:1fr}
  .calc-tab {min-height:46px}
  .options {display:grid;grid-template-columns:1fr;width:100%}
  .option {width:100%}
  .result-item {display:grid;grid-template-columns:1fr}
  .result-item span:last-child {text-align:left}
  .service-card {min-height:330px}
  .service-card h3 {font-size:34px}
  .contact-info,.wpcf7-form,.noise-page .contact-info,.noise-page .contact-form {padding:22px}
  .wpcf7-form {gap:12px}
  .field input,.field select {height:50px}
  .footer-nav {display:grid;grid-template-columns:1fr 1fr}
  .film-about-main,.special-about-media {min-height:350px}
  .film-gallery-item,.film-gallery-large,.film-gallery-wide {min-height:310px}
  .special-package,.ceramic-package {padding:24px}
  .noise-page .noise-description-media,.noise-page .noise-description-media img {min-height:310px}
  .noise-page .process-item {grid-template-columns:42px 1fr;gap:14px}
  .noise-page .process-number {width:40px;height:40px}
}