@layer reset, tokens, base, layout, components, utilities, pages, overrides;

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

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

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul,
  ol {
    margin-block: 0;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

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

@layer overrides {
  .image-frame picture,
  .service-card__media picture,
  .work-card__media picture,
  .blog-image-link picture,
  .article-image-wrap picture,
  .scheme-media picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .image-frame img,
  .service-card__media img,
  .work-card__media img,
  .blog-image-link img,
  .article-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .scheme-media,
  .image-frame--contain,
  .image-frame--contain picture {
    background:
      linear-gradient(135deg, rgba(13, 111, 134, .08), rgba(17, 169, 187, .04)),
      var(--color-surface);
  }

  .scheme-media img,
  .image-frame--contain img {
    object-fit: contain;
  }

  .hero-media picture,
  .hero-media img {
    min-height: 100%;
  }

  .rich-card--media {
    display: grid;
    align-content: start;
    gap: 18px;
    overflow: hidden;
  }

  .rich-card--media .service-card__media {
    margin: -2px -2px 2px;
  }

  .image-placeholder,
  .has-image-fallback {
    min-height: 220px;
    background:
      radial-gradient(circle at 18% 20%, rgba(17, 169, 187, .24), transparent 32%),
      linear-gradient(165deg, rgba(13, 42, 69, .96), rgba(13, 111, 134, .92)),
      repeating-linear-gradient(0deg, rgba(255, 255, 255, .08) 0 18px, transparent 18px 44px);
    color: #fff;
  }

  .image-placeholder span,
  .has-image-fallback::after {
    border: 1px solid rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    backdrop-filter: blur(8px);
  }

  .nav-dropdown {
    z-index: calc(var(--z-menu) + 4);
  }

  .yandex-map,
  .mini-map-shell {
    isolation: isolate;
    z-index: 0;
  }

  .article-image-wrap {
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    aspect-ratio: 16 / 9;
    margin-bottom: 28px;
  }

  .article-image-wrap .article-image {
    width: 100%;
    height: 100%;
  }

  .service-image-card .service-card__media {
    aspect-ratio: 16 / 10;
  }

  .price-matrix td p {
    margin-top: 8px;
    color: var(--color-muted);
    font-size: .92rem;
    line-height: 1.45;
  }

  .site-header {
    backdrop-filter: blur(18px);
  }

  .card,
  .calc-card,
  .bento-panel {
    transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
  }

  .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-float);
    border-color: rgba(13, 111, 134, .22);
  }

  @media (max-width: 760px) {
    .hero-media {
      min-height: 0;
      width: 100%;
      max-height: 360px;
    }

    .hero-media picture,
    .hero-media img {
      width: 100%;
      object-fit: cover;
    }

    .depth-label {
      right: 12px;
      bottom: 12px;
      max-width: calc(100% - 24px);
      font-size: 20px;
      overflow-wrap: anywhere;
    }

    .service-image-card .service-card__media,
    .work-card__media,
    .blog-image-link {
      aspect-ratio: 4 / 3;
    }

    .scheme-media {
      aspect-ratio: 4 / 3;
    }

    .article-image-wrap {
      border-radius: var(--radius-md);
      aspect-ratio: 4 / 3;
    }

    .table-wrap {
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .nav-dropdown {
      z-index: calc(var(--z-menu) + 8);
    }
  }

  @media (max-width: 430px) {
    .home-hero,
    .page-hero {
      padding-top: 34px;
    }

    .hero-media {
      max-height: 300px;
    }

    .actions .btn,
    .lead-form .btn,
    .drilling-calc .btn {
      min-height: 48px;
    }
  }
}

@layer tokens {
  :root {
    --color-brand: #0d6f86;
    --color-brand-deep: #0d2a45;
    --color-brand-ink: #082236;
    --color-accent: #11a9bb;
    --color-accent-deep: #078295;
    --color-cta: #f59e0b;
    --color-cta-deep: #d97706;
    --color-success: #167a49;
    --color-danger: #b42318;
    --color-text: #17212f;
    --color-muted: #627386;
    --color-surface: #ffffff;
    --color-surface-soft: #f5faff;
    --color-surface-cool: #eef7fb;
    --color-surface-depth: #e6f2f7;
    --color-border: rgba(23, 33, 47, .13);
    --color-border-strong: rgba(13, 42, 69, .22);
    --color-focus: #0b8ea2;
    --color-brand-soft: #e6f7fb;
    --color-brand-soft: color-mix(in srgb, var(--color-accent) 12%, white);
    --font-main: Arial, Helvetica, sans-serif;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --shadow-card: 0 14px 38px rgba(13, 42, 69, .08);
    --shadow-float: 0 24px 70px rgba(13, 42, 69, .14);
    --shadow-soft: 0 8px 22px rgba(13, 42, 69, .06);
    --container-width: 1280px;
    --content-width: 860px;
    --section-space: 88px;
    --section-space-sm: 58px;
    --gap-xs: 8px;
    --gap-sm: 12px;
    --gap-md: 18px;
    --gap-lg: 28px;
    --gap-xl: 42px;
    --duration-fast: 160ms;
    --duration-base: 240ms;
    --duration-slow: 420ms;
    --ease-standard: cubic-bezier(.2, .8, .2, 1);
    --header-height: 76px;
    --header-height-compact: 64px;
    --z-header: 80;
    --z-menu: 90;
    --z-mobile-bar: 95;
    --z-cookie: 120;
  }
}

@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 24px);
  }

  body {
    min-width: 320px;
    color: var(--color-text);
    background:
      linear-gradient(180deg, rgba(245, 250, 255, .92), rgba(255, 255, 255, .96) 34rem),
      var(--color-surface-soft);
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 1.62;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      repeating-linear-gradient(178deg, rgba(13, 42, 69, .035) 0 1px, transparent 1px 46px),
      radial-gradient(ellipse at 18% 0%, rgba(17, 169, 187, .12), transparent 34rem),
      radial-gradient(ellipse at 88% 20%, rgba(13, 111, 134, .08), transparent 30rem);
  }

  a {
    color: inherit;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
  }

  a:hover {
    color: var(--color-accent-deep);
  }

  h1,
  h2,
  h3,
  h4 {
    color: var(--color-brand-ink);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0;
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  h1 {
    font-size: 58px;
  }

  h2 {
    font-size: 40px;
  }

  h3 {
    font-size: 22px;
  }

  p {
    max-width: 72ch;
  }

  p + p {
    margin-top: 14px;
  }

  strong {
    color: var(--color-brand-ink);
  }

  :focus {
    outline: none;
  }

  :focus-visible {
    outline: 3px solid rgba(11, 142, 162, .36);
    outline-offset: 3px;
  }

  ::selection {
    color: #ffffff;
    background: var(--color-brand);
  }
}

@layer layout {
  .container {
    width: min(calc(100% - 48px), var(--container-width));
    margin-inline: auto;
  }

  .narrow {
    max-width: var(--content-width);
  }

  .section {
    padding-block: var(--section-space);
  }

  .section + .section {
    border-top: 1px solid rgba(13, 42, 69, .06);
  }

  .section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gap-lg);
    margin-bottom: 30px;
  }

  .section-head > div {
    min-width: 0;
  }

  .section-head h2 {
    max-width: 820px;
  }

  .soft {
    background:
      linear-gradient(180deg, rgba(238, 247, 251, .78), rgba(246, 251, 255, .92)),
      var(--color-surface-cool);
  }

  .grid {
    display: grid;
    gap: var(--gap-lg);
  }

  .split,
  .two-col,
  .image-split,
  .image-split-reverse,
  .quick-grid,
  .map-preview,
  .bento-panel {
    display: grid;
    gap: var(--gap-xl);
    align-items: center;
  }

  .split {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
    align-items: start;
  }

  .two-col {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .88fr);
  }

  .image-split {
    grid-template-columns: minmax(0, 1fr) minmax(340px, .88fr);
  }

  .image-split-reverse {
    grid-template-columns: minmax(340px, .9fr) minmax(0, 1fr);
  }

  .image-split > *,
  .image-split-reverse > * {
    min-width: 0;
  }

  .cards {
    display: grid;
    gap: var(--gap-md);
    align-items: stretch;
  }

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

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

  .cards-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap-md);
    counter-reset: step;
  }

  .steps-5,
  .contract-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@layer components {
  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    padding-block: 10px;
    transition: padding var(--duration-base) var(--ease-standard);
  }

  .header-shell {
    width: min(calc(100% - 48px), 1640px);
    min-height: var(--header-height);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--gap-md);
    padding: 10px 14px 10px 18px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 24px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 16px 46px rgba(13, 42, 69, .08);
    backdrop-filter: blur(18px);
    transition:
      min-height var(--duration-base) var(--ease-standard),
      border-color var(--duration-base) var(--ease-standard),
      box-shadow var(--duration-base) var(--ease-standard),
      background var(--duration-base) var(--ease-standard);
  }

  .site-header.is-scrolled {
    padding-block: 6px;
  }

  .site-header.is-scrolled .header-shell {
    min-height: var(--header-height-compact);
    border-color: var(--color-border);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--shadow-card);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
    color: var(--color-brand-ink);
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
  }

  .brand:hover {
    color: var(--color-brand-ink);
  }

  .brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #ffffff;
    background:
      linear-gradient(145deg, var(--color-brand-deep), var(--color-brand)),
      var(--color-brand);
    box-shadow: inset 0 -10px 24px rgba(255, 255, 255, .08);
    font-size: 13px;
    letter-spacing: 0;
  }

  .brand-text {
    display: grid;
    gap: 0;
    line-height: 1.05;
  }

  .brand-text small {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
  }

  .main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    gap: 3px;
    overflow: visible;
  }

  .nav-link-row,
  .nav-item {
    position: relative;
    display: flex;
    align-items: center;
  }

  .nav-link,
  .nav-submenu-toggle {
    min-height: 42px;
    border-radius: var(--radius-md);
  }

  .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 10px;
    color: #33465a;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    transition:
      color var(--duration-fast) var(--ease-standard),
      background var(--duration-fast) var(--ease-standard);
  }

  .nav-link:hover,
  .nav-link.is-active,
  .nav-item.is-active > .nav-link-row .nav-link,
  .nav-item:hover > .nav-link-row .nav-link,
  .nav-item:focus-within > .nav-link-row .nav-link {
    color: var(--color-brand-deep);
    background: rgba(17, 169, 187, .11);
  }

  .nav-submenu-toggle {
    width: 34px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .nav-submenu-toggle span {
    width: 8px;
    height: 8px;
    margin: auto;
    display: block;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: var(--color-muted);
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .nav-item:hover .nav-submenu-toggle span,
  .nav-item:focus-within .nav-submenu-toggle span,
  .nav-item.submenu-open .nav-submenu-toggle span {
    transform: rotate(225deg) translate(-1px, -1px);
  }

  .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-menu);
    width: min(700px, calc(100vw - 48px));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 26px 14px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(245, 250, 255, .98)),
      var(--color-surface);
    box-shadow: var(--shadow-float);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition:
      opacity var(--duration-base) var(--ease-standard),
      transform var(--duration-base) var(--ease-standard),
      visibility var(--duration-base) var(--ease-standard);
  }

  .nav-dropdown::before {
    content: "";
    position: absolute;
    top: 10px;
    right: 14px;
    bottom: 14px;
    left: 14px;
    z-index: -1;
    border-radius: 24px;
    background:
      repeating-linear-gradient(172deg, rgba(13, 42, 69, .045) 0 1px, transparent 1px 28px),
      linear-gradient(135deg, rgba(17, 169, 187, .08), transparent 46%);
  }

  .nav-dropdown::after {
    content: "";
    position: absolute;
    top: -10px;
    right: 0;
    left: 0;
    height: 24px;
  }

  .nav-item:hover .nav-dropdown,
  .nav-item:focus-within .nav-dropdown,
  .nav-item.submenu-open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-more {
    display: none;
  }

  .nav-more .nav-dropdown {
    right: 0;
    left: auto;
    width: min(340px, calc(100vw - 48px));
    grid-template-columns: 1fr;
  }

  .nav-more .nav-dropdown-card {
    min-height: auto;
  }

  .site-header.header--compact .nav-priority-secondary {
    display: none;
  }

  .site-header.header--compact .nav-more {
    display: flex;
  }

  .site-header.header--compact .main-nav {
    justify-content: center;
  }

  .site-header.header--compact .nav-link {
    padding-inline: 8px;
    font-size: 13.5px;
  }

  .site-header.header--compact .nav-submenu-toggle {
    width: 30px;
  }

  .nav-dropdown-card {
    position: relative;
    min-height: 142px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(13, 42, 69, .08);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    background: rgba(255, 255, 255, .84);
    text-decoration: none;
    transition:
      transform var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      background var(--duration-fast) var(--ease-standard);
  }

  .nav-dropdown-card:hover,
  .nav-dropdown-card.is-active {
    color: var(--color-brand-ink);
    border-color: rgba(17, 169, 187, .34);
    background: #ffffff;
    transform: translateY(-2px);
  }

  .nav-dropdown-title {
    color: var(--color-brand-ink);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
  }

  .nav-dropdown-text {
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.42;
  }

  .nav-dropdown-badge {
    width: fit-content;
    margin-top: auto;
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--color-brand-deep);
    background: var(--color-brand-soft);
    font-size: 12px;
    font-weight: 900;
  }

  .header-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--gap-sm);
  }

  .phone {
    color: var(--color-brand-ink);
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
  }

  .menu-toggle {
    width: 46px;
    height: 46px;
    display: none;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-brand-ink);
    background: var(--color-surface);
    cursor: pointer;
  }

  .menu-toggle span {
    width: 21px;
    height: 2px;
    display: block;
    margin: 4px auto;
    border-radius: 999px;
    background: currentColor;
    transition:
      transform var(--duration-fast) var(--ease-standard),
      opacity var(--duration-fast) var(--ease-standard);
  }

  body.menu-open .menu-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  body.menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
  }

  body.menu-open .menu-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  body.menu-open {
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .site-header.header--burger .header-shell {
    min-height: 66px;
    border-radius: 20px;
  }

  .site-header.header--burger .main-nav {
    position: fixed;
    top: calc(var(--header-height-compact) + 22px);
    left: 16px;
    right: 16px;
    z-index: var(--z-menu);
    max-height: calc(100svh - var(--header-height-compact) - 38px);
    display: grid;
    justify-content: stretch;
    gap: 6px;
    padding: 16px;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, .97);
    box-shadow: var(--shadow-float);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition:
      opacity var(--duration-base) var(--ease-standard),
      transform var(--duration-base) var(--ease-standard),
      visibility var(--duration-base) var(--ease-standard);
    backdrop-filter: blur(18px);
  }

  body.menu-open .site-header.header--burger .main-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-header.header--burger .menu-toggle {
    display: block;
    margin-left: auto;
  }

  .site-header.header--burger .phone,
  .site-header.header--burger .header-actions,
  .site-header.header--burger .header-actions .btn,
  .site-header.header--burger .nav-more {
    display: none;
  }

  .site-header.header--burger .nav-priority-secondary {
    display: flex;
  }

  .site-header.header--burger .nav-link-row,
  .site-header.header--burger .nav-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    width: 100%;
  }

  .site-header.header--burger .main-nav > .nav-more {
    display: none;
  }

  .site-header.header--burger .nav-item > .nav-link,
  .site-header.header--burger .main-nav > .nav-link,
  .site-header.header--burger .nav-link-row .nav-link {
    width: 100%;
    min-height: 50px;
    justify-content: flex-start;
    padding: 13px 14px;
    font-size: 17px;
    white-space: normal;
  }

  .site-header.header--burger .main-nav > .nav-link {
    display: flex;
  }

  .site-header.header--burger .nav-submenu-toggle {
    width: 46px;
    height: 50px;
    background: rgba(17, 169, 187, .09);
  }

  .site-header.header--burger .nav-dropdown {
    position: static;
    width: 100%;
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    margin-top: 4px;
    padding: 8px 0 8px 12px;
    border: 0;
    border-left: 2px solid rgba(17, 169, 187, .22);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .site-header.header--burger .nav-dropdown::before,
  .site-header.header--burger .nav-dropdown::after {
    display: none;
  }

  .site-header.header--burger .nav-item.submenu-open .nav-dropdown {
    display: grid;
  }

  .site-header.header--burger .nav-item:hover .nav-dropdown,
  .site-header.header--burger .nav-item:focus-within .nav-dropdown {
    transform: none;
  }

  .site-header.header--burger .nav-dropdown-card {
    min-height: auto;
    padding: 13px;
    border-radius: var(--radius-md);
    box-shadow: none;
  }

  .btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: #ffffff;
    background: linear-gradient(135deg, var(--color-cta), var(--color-cta-deep));
    box-shadow: 0 14px 32px rgba(217, 119, 6, .22);
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
      transform var(--duration-fast) var(--ease-standard),
      box-shadow var(--duration-fast) var(--ease-standard),
      background var(--duration-fast) var(--ease-standard);
  }

  .btn:hover {
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(217, 119, 6, .26);
  }

  .btn:active {
    transform: translateY(0);
  }

  .btn-secondary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--color-brand), var(--color-accent-deep));
    box-shadow: 0 14px 32px rgba(13, 111, 134, .18);
  }

  .btn-secondary:hover {
    box-shadow: 0 18px 38px rgba(13, 111, 134, .24);
  }

  .btn-light {
    color: var(--color-brand-ink);
    background: rgba(255, 255, 255, .92);
    border-color: var(--color-border);
    box-shadow: none;
  }

  .btn-light:hover {
    color: var(--color-brand-ink);
    background: #ffffff;
    box-shadow: var(--shadow-soft);
  }

  .btn-small {
    min-height: 40px;
    padding: 9px 14px;
    font-size: 14px;
  }

  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin-top: 26px;
  }

  .hero,
  .page-hero {
    position: relative;
    overflow: hidden;
  }

  .home-hero,
  .page-hero {
    color: var(--color-text);
    background:
      linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(238, 247, 251, .9)),
      var(--color-surface-soft);
  }

  .home-hero::before,
  .page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      repeating-linear-gradient(174deg, rgba(13, 42, 69, .055) 0 1px, transparent 1px 56px),
      radial-gradient(ellipse at 78% 18%, rgba(17, 169, 187, .15), transparent 28rem);
    opacity: .9;
  }

  .hero-showcase {
    min-height: 680px;
    display: grid;
    align-items: center;
    padding-block: 70px 76px;
  }

  .home-hero-grid,
  .hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, .86fr);
    gap: var(--gap-xl);
    align-items: center;
  }

  .home-hero h1,
  .hero-showcase h1 {
    max-width: 840px;
    font-size: 64px;
    line-height: 1;
  }

  .home-hero p,
  .page-hero p {
    color: #415467;
    font-size: 18px;
  }

  .hero-copy > p:not(.eyebrow) {
    margin-top: 18px;
  }

  .page-hero {
    padding-block: 72px 64px;
  }

  .page-hero h1 {
    max-width: 900px;
    font-size: 50px;
  }

  .blog-hero {
    background:
      linear-gradient(145deg, rgba(13, 42, 69, .96), rgba(13, 111, 134, .9)),
      var(--color-brand-deep);
  }

  .blog-hero h1,
  .blog-hero p,
  .blog-hero .breadcrumbs,
  .blog-hero .breadcrumbs a {
    color: #ffffff;
  }

  .eyebrow {
    margin-bottom: 10px;
    color: var(--color-accent-deep);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .card,
  .calc-card,
  .filters,
  .admin-panel,
  .media-card,
  .feature-card,
  .service-card,
  .stat-card,
  .rich-card,
  .bento-panel {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--shadow-card);
  }

  .card {
    display: grid;
    align-content: start;
    gap: 12px;
    transition:
      transform var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      box-shadow var(--duration-fast) var(--ease-standard);
  }

  .card:hover {
    transform: translateY(-3px);
    border-color: rgba(17, 169, 187, .36);
    box-shadow: var(--shadow-float);
  }

  .card p,
  .calc-card p {
    color: var(--color-muted);
  }

  .card-accent,
  .rich-card {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .18);
    background:
      linear-gradient(145deg, rgba(13, 42, 69, .96), rgba(13, 111, 134, .92)),
      var(--color-brand-deep);
  }

  .card-accent h2,
  .card-accent h3,
  .card-accent p,
  .card-accent strong,
  .rich-card h2,
  .rich-card h3,
  .rich-card p,
  .rich-card strong,
  .rich-card .eyebrow {
    color: #ffffff;
  }

  .bento-panel {
    position: relative;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    overflow: hidden;
    padding: 38px;
  }

  .bento-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(172deg, rgba(13, 42, 69, .04) 0 1px, transparent 1px 40px);
  }

  .bento-panel > * {
    position: relative;
  }

  .image-frame,
  .service-card__media,
  .work-card__media,
  .blog-image-link,
  .engineer-media,
  .documents-media {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background:
      linear-gradient(145deg, var(--color-surface-cool), #ffffff),
      var(--color-surface-cool);
  }

  .image-frame {
    box-shadow: var(--shadow-float);
  }

  .image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, transparent 64%, rgba(8, 34, 54, .16)),
      repeating-linear-gradient(180deg, transparent 0 52px, rgba(255, 255, 255, .13) 52px 53px);
  }

  .image-frame img,
  .service-card__media img,
  .work-card__media img,
  .blog-image-link img,
  .blog-thumb,
  .blog-card__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .hero-media {
    min-height: 430px;
    aspect-ratio: 4 / 3;
  }

  .hero-media img {
    min-height: 0;
  }

  .depth-label {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 2;
    max-width: calc(100% - 44px);
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: var(--radius-md);
    color: var(--color-brand-ink);
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
    font-size: 26px;
    font-weight: 900;
    line-height: 1.05;
  }

  .depth-label span {
    display: block;
    margin-top: 4px;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 800;
  }

  .hero-benefits,
  .bento-benefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap-sm);
    margin-top: 30px;
  }

  .hero-benefits article {
    min-width: 0;
    min-height: 96px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 16px;
    border: 1px solid rgba(17, 169, 187, .24);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .8);
    box-shadow: var(--shadow-soft);
  }

  .hero-benefits strong {
    color: var(--color-brand-ink);
    font-size: 20px;
  }

  .hero-benefits span {
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 800;
  }

  label {
    display: grid;
    gap: 7px;
    color: #33465a;
    font-size: 14px;
    font-weight: 900;
  }

  input,
  select,
  textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid rgba(13, 42, 69, .2);
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(13, 42, 69, .02);
    font-size: 16px;
    transition:
      border-color var(--duration-fast) var(--ease-standard),
      box-shadow var(--duration-fast) var(--ease-standard),
      background var(--duration-fast) var(--ease-standard);
  }

  textarea {
    min-height: 118px;
    resize: vertical;
  }

  input:hover,
  select:hover,
  textarea:hover {
    border-color: rgba(17, 169, 187, .38);
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 4px rgba(17, 169, 187, .14);
  }

  input:user-invalid,
  select:user-invalid,
  textarea:user-invalid {
    border-color: var(--color-danger);
  }

  .lead-form {
    display: grid;
    gap: 14px;
  }

  .compact-form-card .lead-form,
  .compact-article-form .lead-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .compact-form-card .lead-form label:nth-of-type(3),
  .compact-form-card .check,
  .compact-form-card .form-success,
  .compact-form-card .btn,
  .compact-article-form .lead-form label:nth-of-type(3),
  .compact-article-form .check,
  .compact-article-form .form-success,
  .compact-article-form .btn {
    grid-column: 1 / -1;
  }

  .check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--color-muted);
    font-weight: 600;
    line-height: 1.45;
  }

  .check input {
    width: 20px;
    min-width: 20px;
    min-height: 20px;
    margin-top: 2px;
    accent-color: var(--color-accent-deep);
  }

  .hp-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .form-success,
  .notice {
    padding: 14px 16px;
    border: 1px solid rgba(22, 122, 73, .22);
    border-radius: var(--radius-md);
    color: var(--color-success);
    background: #edf8f2;
    font-weight: 800;
  }

  .btn.is-loading,
  .lead-form.is-submitting .btn[type="submit"] {
    opacity: .78;
    cursor: progress;
  }

  .table-wrap {
    min-width: 0;
    overflow-x: auto;
    border-radius: var(--radius-lg);
  }

  table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #ffffff;
  }

  th,
  td {
    padding: 15px 16px;
    border-bottom: 1px solid rgba(13, 42, 69, .09);
    text-align: left;
    vertical-align: top;
  }

  th {
    color: var(--color-brand-ink);
    background: var(--color-surface-cool);
    font-weight: 900;
  }

  tr:last-child td {
    border-bottom: 0;
  }

  .price-matrix td p {
    margin-top: 8px;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 700;
  }

  .price-note {
    margin-top: 14px;
    font-weight: 800;
  }

  .check-list {
    display: grid;
    gap: 10px;
    padding: 0;
    list-style: none;
  }

  .check-list li {
    position: relative;
    padding-left: 28px;
  }

  .check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent), var(--color-brand));
  }

  .step {
    counter-increment: step;
    min-width: 0;
    min-height: 118px;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-soft);
  }

  .step::before {
    content: counter(step);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--color-brand-deep), var(--color-accent-deep));
    font-weight: 900;
  }

  .faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
  }

  .faq-item + .faq-item {
    margin-top: 12px;
  }

  .faq-item summary {
    position: relative;
    min-height: 60px;
    display: flex;
    align-items: center;
    padding: 18px 56px 18px 20px;
    color: var(--color-brand-ink);
    font-weight: 900;
    cursor: pointer;
    list-style: none;
  }

  .faq-item summary::-webkit-details-marker {
    display: none;
  }

  .faq-item summary::after {
    content: "";
    position: absolute;
    right: 22px;
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--color-accent-deep);
    border-bottom: 2px solid var(--color-accent-deep);
    transform: rotate(45deg);
    transition: transform var(--duration-base) var(--ease-standard);
  }

  .faq-item[open] summary::after {
    transform: rotate(225deg);
  }

  .faq-item p {
    max-width: none;
    padding: 0 20px 20px;
    color: var(--color-muted);
  }

  .breadcrumbs {
    margin-bottom: 16px;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 800;
  }

  .breadcrumbs a {
    color: inherit;
    text-decoration: none;
  }

  .yandex-map,
  .mini-map {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background:
      repeating-linear-gradient(172deg, rgba(13, 42, 69, .05) 0 1px, transparent 1px 38px),
      #dcecf2;
    box-shadow: var(--shadow-card);
  }

  .yandex-map {
    height: 620px;
  }

  .mini-map {
    height: 410px;
  }

  .admin-yandex-map {
    height: 420px;
    margin-bottom: 16px;
  }

  .map-message {
    min-height: inherit;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 24px;
    color: var(--color-brand-ink);
    text-align: center;
    font-weight: 900;
  }

  .map-balloon {
    max-width: 300px;
    color: var(--color-text);
    font: 14px/1.45 var(--font-main);
  }

  .map-balloon h3 {
    margin-bottom: 8px;
    font-size: 18px;
  }

  .map-balloon p {
    margin-bottom: 6px;
  }

  .map-page {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    gap: var(--gap-lg);
    align-items: start;
  }

  .map-page > *,
  .table-wrap {
    min-width: 0;
  }

  .filters {
    position: sticky;
    top: calc(var(--header-height-compact) + 28px);
    display: grid;
    gap: 13px;
  }

  .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-sm);
    margin-top: 20px;
  }

  .stats div {
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #ffffff;
  }

  .stats strong {
    display: block;
    color: var(--color-accent-deep);
    font-size: 30px;
  }

  .site-footer {
    padding-block: 56px 104px;
    color: #dcebf1;
    background:
      repeating-linear-gradient(174deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 58px),
      linear-gradient(145deg, #082236, #0d2a45 58%, #0d5262);
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
    gap: var(--gap-xl);
  }

  .site-footer .brand,
  .site-footer .brand:hover,
  .site-footer strong {
    color: #ffffff;
  }

  .site-footer .brand-text small,
  .site-footer p,
  .footer-bottom {
    color: #b9cfda;
  }

  .site-footer a,
  .footer-cookie-link {
    display: block;
    margin-top: 8px;
    color: #dcebf1;
    text-decoration: none;
  }

  .footer-cookie-link {
    width: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .footer-bottom {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: 14px;
  }

  .mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-mobile-bar);
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--color-border);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -14px 34px rgba(13, 42, 69, .08);
    backdrop-filter: blur(16px);
  }

  .mobile-bar a {
    min-height: 52px;
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 10px 8px;
    color: var(--color-brand-ink);
    font-size: 14px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
  }

  .tag {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--color-brand-deep);
    background: var(--color-brand-soft);
    font-size: 13px;
    font-weight: 900;
  }
}

@layer utilities {
  .muted,
  .muted-list {
    color: var(--color-muted);
  }

  .danger {
    color: var(--color-danger);
  }

  .span-2 {
    grid-column: span 2;
  }

  .trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
  }

  .trust-row span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    color: var(--color-brand-ink);
    background: rgba(255, 255, 255, .82);
    font-size: 13px;
    font-weight: 900;
  }

  [data-reveal],
  .section > .container {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity var(--duration-slow) var(--ease-standard),
      transform var(--duration-slow) var(--ease-standard);
  }

  [data-reveal].is-visible,
  .section > .container.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@layer pages {
  .quick-section {
    padding-top: var(--section-space-sm);
  }

  .quick-grid {
    grid-template-columns: minmax(0, .9fr) minmax(360px, 1fr);
    padding: 30px;
    border: 1px solid rgba(17, 169, 187, .2);
    border-radius: var(--radius-xl);
    background:
      linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(245, 250, 255, .92)),
      var(--color-surface);
    box-shadow: var(--shadow-card);
  }

  .compact-form-card {
    box-shadow: none;
  }

  .advanced-form {
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
  }

  .advanced-form summary {
    color: var(--color-accent-deep);
    font-weight: 900;
    cursor: pointer;
  }

  .map-preview {
    grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
    align-items: stretch;
  }

  .map-preview-copy {
    display: grid;
    align-content: center;
    min-height: 410px;
    padding: 34px;
    border-radius: var(--radius-xl);
    color: #ffffff;
    background:
      repeating-linear-gradient(174deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 46px),
      linear-gradient(145deg, var(--color-brand-deep), var(--color-brand));
    box-shadow: var(--shadow-float);
  }

  .map-preview-copy h2,
  .map-preview-copy p,
  .map-preview-copy .eyebrow {
    color: #ffffff;
  }

  .mini-map-shell {
    min-width: 0;
  }

  .image-service-cards,
  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-md);
  }

  .service-image-card,
  .work-card,
  .blog-card {
    height: 100%;
  }

  .service-image-card {
    grid-template-rows: auto 1fr auto;
    padding: 14px;
  }

  .service-card__media,
  .blog-image-link {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    box-shadow: none;
  }

  .work-card {
    padding: 14px;
  }

  .work-card .btn {
    align-self: start;
    margin-top: auto;
  }

  .work-card__media {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
  }

  .comparison-cards .card,
  .timeline-cards .card,
  .trust-cards .card {
    min-height: 170px;
  }

  .comparison-cards .card strong,
  .price-strip strong {
    color: var(--color-accent-deep);
    font-size: 22px;
  }

  .price-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-md);
  }

  .price-strip article {
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-soft);
  }

  .price-strip span {
    display: block;
    color: var(--color-muted);
    font-weight: 800;
  }

  .engineer-section {
    background: #ffffff;
  }

  .engineer-media,
  .documents-media {
    aspect-ratio: 16 / 10;
  }

  .contract-section {
    background:
      linear-gradient(180deg, rgba(245, 250, 255, .78), rgba(238, 247, 251, .92)),
      var(--color-surface-cool);
  }

  .drilling-calc {
    gap: 14px;
  }

  .drilling-calc output {
    display: block;
    padding: 18px;
    border-radius: var(--radius-lg);
    color: #ffffff;
    background: linear-gradient(135deg, var(--color-brand-deep), var(--color-brand));
    font-size: 30px;
    font-weight: 900;
  }

  .image-placeholder {
    width: 100%;
    max-width: 100%;
    min-height: 220px;
    display: grid;
    place-items: center;
    padding: 20px;
    border: 1px dashed rgba(17, 169, 187, .42);
    border-radius: var(--radius-lg);
    color: var(--color-muted);
    text-align: center;
    font-weight: 900;
    overflow-wrap: anywhere;
    background:
      repeating-linear-gradient(174deg, rgba(13, 42, 69, .05) 0 1px, transparent 1px 34px),
      #ffffff;
  }

  .blog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
  }

  .blog-filter a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-brand-ink);
    background: #ffffff;
    font-weight: 900;
    text-decoration: none;
  }

  .blog-filter a.active,
  .blog-filter a:hover {
    color: #ffffff;
    border-color: var(--color-accent-deep);
    background: var(--color-accent-deep);
  }

  .blog-card {
    display: flex;
    flex-direction: column;
  }

  .blog-card h3 a {
    color: var(--color-brand-ink);
    text-decoration: none;
  }

  .blog-image-link {
    display: block;
    margin: -8px -8px 12px;
    text-decoration: none;
  }

  .blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
  }

  .blog-meta span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    color: var(--color-accent-deep);
    background: var(--color-brand-soft);
    font-size: 13px;
    font-weight: 900;
  }

  .blog-meta-light span {
    color: #ffffff;
    background: rgba(255, 255, 255, .18);
  }

  .read-link {
    margin-top: auto;
    color: var(--color-accent-deep);
    font-weight: 900;
    text-decoration: none;
  }

  .article-layout {
    max-width: var(--content-width);
  }

  .article-image {
    width: 100%;
    max-height: 460px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    margin-bottom: 28px;
    border-radius: var(--radius-xl);
  }

  .article-content {
    min-width: 0;
    color: #263545;
    font-size: 18px;
    line-height: 1.75;
  }

  .article-content h2,
  .article-content h3 {
    margin-top: 30px;
    margin-bottom: 12px;
  }

  .article-content p,
  .article-content ul,
  .article-content ol {
    margin-bottom: 18px;
  }

  .article-content ul,
  .article-content ol {
    padding-left: 24px;
  }

  .article-content a {
    color: var(--color-accent-deep);
    font-weight: 900;
  }

  .article-content figure {
    margin: 28px 0;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #fff;
  }

  .article-content figure img {
    display: block;
    width: 100%;
    aspect-ratio: 12 / 7;
    object-fit: contain;
  }

  .article-content figcaption {
    margin-top: 10px;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.5;
  }

  .article-content .table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .article-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--gap-lg);
    align-items: center;
    margin-top: 36px;
    padding: 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface-cool);
  }

  .legal-content h2 {
    margin-top: 28px;
    font-size: 28px;
  }

  .legal-content h2:first-child {
    margin-top: 0;
  }

  .has-image-fallback {
    position: relative;
    background:
      repeating-linear-gradient(174deg, rgba(13, 42, 69, .05) 0 1px, transparent 1px 34px),
      #ffffff;
  }

  .has-image-fallback::after {
    content: "Фото недоступно";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 16px;
    border: 1px dashed rgba(98, 115, 134, .38);
    border-radius: inherit;
    color: var(--color-muted);
    font-weight: 900;
    text-align: center;
  }

  .image-fallback {
    opacity: 0;
  }

  .image-fallback-box {
    min-height: 180px;
    display: grid;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(98, 115, 134, .38);
    border-radius: var(--radius-lg);
    color: var(--color-muted);
    text-align: center;
    font-weight: 900;
    background: #ffffff;
  }

  .cookie-consent {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: var(--z-cookie);
    width: min(560px, calc(100% - 32px));
    pointer-events: none;
  }

  .cookie-consent__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-height: min(42vh, 310px);
    overflow: auto;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow-float);
    pointer-events: auto;
    backdrop-filter: blur(18px);
  }

  .cookie-consent__text {
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.45;
  }

  .cookie-consent__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  .admin-body {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: 100vh;
    background: var(--color-surface-soft);
  }

  .admin-side {
    padding: 22px;
    color: #ffffff;
    background:
      repeating-linear-gradient(174deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 44px),
      var(--color-brand-deep);
  }

  .admin-side .brand {
    color: #ffffff;
    margin-bottom: 24px;
  }

  .admin-side a {
    display: block;
    padding: 9px 0;
    color: #dcebf1;
    text-decoration: none;
  }

  .admin-main {
    min-width: 0;
    padding: 30px;
    overflow-x: auto;
  }

  .admin-actions,
  .admin-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 16px;
  }

  .form-grid,
  .import-card-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .import-list {
    display: grid;
    gap: var(--gap-md);
  }

  .import-card {
    display: grid;
    gap: var(--gap-md);
  }

  .import-card-actions {
    align-items: center;
  }
}

@layer overrides {
  @media (min-width: 1180px) and (max-width: 1439px) {
    .site-header:not(.header--burger) .nav-priority-secondary {
      display: none;
    }

    .site-header:not(.header--burger) .nav-more {
      display: flex;
    }
  }

  @media (max-width: 1500px) {
    .nav-link {
      padding-inline: 7px;
      font-size: 13px;
    }

    .nav-submenu-toggle {
      width: 28px;
    }

    .header-actions .btn {
      padding-inline: 16px;
    }
  }

  @media (max-width: 1179px) {
    body.menu-open {
      overflow: hidden;
    }

    .header-shell {
      min-height: 66px;
      border-radius: 20px;
    }

    .main-nav {
      position: fixed;
      top: calc(var(--header-height-compact) + 22px);
      left: 16px;
      right: 16px;
      z-index: var(--z-menu);
      max-height: calc(100svh - var(--header-height-compact) - 38px);
      display: grid;
      justify-content: stretch;
      gap: 6px;
      padding: 16px;
      overflow: auto;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      background: rgba(255, 255, 255, .97);
      box-shadow: var(--shadow-float);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      pointer-events: none;
      transition:
        opacity var(--duration-base) var(--ease-standard),
        transform var(--duration-base) var(--ease-standard),
        visibility var(--duration-base) var(--ease-standard);
      backdrop-filter: blur(18px);
    }

    body.menu-open .main-nav {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

    .menu-toggle {
      display: block;
      margin-left: auto;
    }

    .phone {
      display: none;
    }

    .header-actions {
      display: none;
    }

    .header-actions .btn {
      display: none;
    }

    .nav-link-row,
    .nav-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 46px;
      width: 100%;
    }

    .main-nav > .nav-more {
      display: none;
    }

    .nav-item > .nav-link,
    .main-nav > .nav-link,
    .nav-link-row .nav-link {
      width: 100%;
      min-height: 50px;
      justify-content: flex-start;
      padding: 13px 14px;
      font-size: 17px;
      white-space: normal;
    }

    .main-nav > .nav-link {
      display: flex;
    }

    .nav-submenu-toggle {
      width: 46px;
      height: 50px;
      background: rgba(17, 169, 187, .09);
    }

    .nav-dropdown {
      position: static;
      width: 100%;
      display: none;
      grid-column: 1 / -1;
      grid-template-columns: 1fr;
      margin-top: 4px;
      padding: 8px 0 8px 12px;
      border: 0;
      border-left: 2px solid rgba(17, 169, 187, .22);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      opacity: 1;
      visibility: visible;
      transform: none;
      pointer-events: auto;
    }

    .nav-dropdown::before {
      display: none;
    }

    .nav-dropdown::after {
      display: none;
    }

    .nav-item.submenu-open .nav-dropdown {
      display: grid;
    }

    .nav-item:hover .nav-dropdown,
    .nav-item:focus-within .nav-dropdown {
      transform: none;
    }

    .nav-dropdown-card {
      min-height: auto;
      padding: 13px;
      border-radius: var(--radius-md);
      box-shadow: none;
    }

    .home-hero-grid,
    .hero-grid,
    .split,
    .two-col,
    .image-split,
    .image-split-reverse,
    .quick-grid,
    .map-preview,
    .bento-panel,
    .map-page {
      grid-template-columns: 1fr;
    }

    .filters {
      position: static;
    }

    .hero-benefits,
    .bento-benefits,
    .cards-4,
    .steps,
    .steps-5,
    .contract-steps,
    .footer-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .image-service-cards,
    .services-grid,
    .cards-3,
    .price-strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 820px) {
    h1,
    .home-hero h1,
    .hero-showcase h1,
    .page-hero h1 {
      font-size: 40px;
      line-height: 1.05;
    }

    h2 {
      font-size: 31px;
    }

    h3 {
      font-size: 20px;
    }

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

    .section,
    .page-hero {
      padding-block: 54px;
    }

    .hero-showcase {
      min-height: auto;
      padding-block: 48px 56px;
    }

    .section-head,
    .actions,
    .article-cta {
      display: grid;
      grid-template-columns: 1fr;
      justify-items: stretch;
    }

    .actions .btn,
    .section-head .btn,
    .article-cta .btn {
      width: 100%;
    }

    .hero-media {
      min-height: 300px;
      aspect-ratio: 16 / 11;
      border-radius: var(--radius-lg);
    }

    .depth-label {
      right: 12px;
      bottom: 12px;
      max-width: calc(100% - 24px);
      font-size: 20px;
    }

    .compact-form-card .lead-form,
    .compact-article-form .lead-form,
    .form-grid,
    .import-card-fields {
      grid-template-columns: 1fr;
    }

    .span-2 {
      grid-column: auto;
    }

    .mobile-bar {
      display: grid;
    }

    .site-footer {
      padding-bottom: 112px;
    }

    .cookie-consent {
      left: 12px;
      right: 12px;
      bottom: calc(62px + env(safe-area-inset-bottom));
      width: auto;
    }

    .cookie-consent__card {
      grid-template-columns: 1fr;
      max-height: min(38vh, 280px);
      padding: 14px;
    }

    .cookie-consent__actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      justify-content: stretch;
    }

    .admin-body {
      grid-template-columns: 1fr;
    }

    .admin-side {
      position: static;
    }
  }

  @media (max-width: 640px) {
    h1,
    .home-hero h1,
    .hero-showcase h1,
    .page-hero h1 {
      font-size: 30px;
      line-height: 1.08;
      text-wrap: auto;
      overflow-wrap: anywhere;
    }

    h2 {
      font-size: 26px;
      line-height: 1.14;
      text-wrap: auto;
      overflow-wrap: anywhere;
    }

    .home-hero p,
    .page-hero p,
    .card p,
    .calc-card p {
      overflow-wrap: anywhere;
    }

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

    .header-shell {
      padding-inline: 12px;
    }

    .brand-text small {
      display: none;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
    }

    .hero-benefits,
    .bento-benefits,
    .cards-2,
    .cards-3,
    .cards-4,
    .image-service-cards,
    .services-grid,
    .steps,
    .steps-5,
    .contract-steps,
    .price-strip,
    .footer-grid,
    .stats {
      grid-template-columns: 1fr;
    }

    .quick-grid,
    .bento-panel,
    .map-preview-copy,
    .card,
    .calc-card,
    .filters,
    .admin-panel {
      padding: 20px;
      border-radius: var(--radius-lg);
    }

    .service-card__media,
    .blog-image-link,
    .article-image {
      aspect-ratio: 4 / 3;
      border-radius: var(--radius-lg);
    }

    .mini-map {
      height: 320px;
    }

    .yandex-map {
      height: 420px;
    }

    table {
      min-width: 620px;
    }

    .admin-main {
      padding: 20px;
    }
  }

  .seo-visual {
    margin: 24px 0 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-soft);
  }

  .seo-visual img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 12 / 7;
    object-fit: contain;
  }

  .image-split > .seo-visual,
  .home-hero-grid > .seo-visual {
    margin: 0;
    align-self: center;
  }

  .home-hero-grid > .seo-visual {
    width: 100%;
  }

  @media (max-width: 760px) {
    .article-content {
      font-size: 16px;
      line-height: 1.65;
    }

    .article-content figure {
      margin-inline: 0;
      padding: 10px;
    }

    .article-content table {
      min-width: 560px;
    }

    .map-balloon {
      width: min(260px, calc(100vw - 64px));
      max-width: 100%;
    }

    .seo-visual {
      border-radius: var(--radius-lg);
    }

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

  @media (max-width: 390px) {
    h1,
    .home-hero h1,
    .hero-showcase h1,
    .page-hero h1 {
      font-size: 28px;
    }

    h2 {
      font-size: 24px;
    }

    .phone {
      display: none;
    }

    .cookie-consent__actions {
      grid-template-columns: 1fr;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 1ms;
      animation-iteration-count: 1;
      transition-duration: 1ms;
      scroll-behavior: auto;
    }

    [data-reveal],
    .section > .container {
      opacity: 1;
      transform: none;
    }
  }
}