/* ============================================================
   27.09.2026 — ШРИФТЫ С НАШЕГО СЕРВЕРА (/assets/fonts/, лицензия SIL OFL 1.1).
   Раньше подключались с fonts.googleapis.com: это передача IP посетителей
   в Google (трансграничная передача ПДн) и лишняя задержка первого показа.
   Manrope и Inter — вариативные (любая толщина одним файлом), IBM Plex Mono —
   500 и 600. Подмножества — кириллица и латиница.
   ============================================================ */
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/manrope-cyrillic-wght-normal.woff2) format('woff2-variations'),url(/assets/fonts/manrope-cyrillic-wght-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/manrope-latin-wght-normal.woff2) format('woff2-variations'),url(/assets/fonts/manrope-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/inter-cyrillic-wght-normal.woff2) format('woff2-variations'),url(/assets/fonts/inter-cyrillic-wght-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/inter-latin-wght-normal.woff2) format('woff2-variations'),url(/assets/fonts/inter-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/ibm-plex-mono-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* Запасные шрифты с подогнанными метриками: пока Manrope/Inter загружаются,
   текст рисуется системным Arial того же размера — при подмене шрифта строки
   не переносятся иначе и блоки не «прыгают» (CLS). Метрики рассчитаны по
   файлам шрифтов (Manrope 750, Inter 400) относительно Arial. */
@font-face{font-family:'Manrope Fallback';font-weight:100 599;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans'),local('Helvetica');size-adjust:99.3%;ascent-override:107.3%;descent-override:30.2%;line-gap-override:0%;}
@font-face{font-family:'Manrope Fallback';font-weight:600 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Helvetica Bold');size-adjust:99.3%;ascent-override:107.3%;descent-override:30.2%;line-gap-override:0%;}
@font-face{font-family:'Inter Fallback';font-weight:100 599;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans'),local('Helvetica');size-adjust:105.7%;ascent-override:91.7%;descent-override:22.8%;line-gap-override:0%;}
@font-face{font-family:'Inter Fallback';font-weight:600 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Helvetica Bold');size-adjust:105.7%;ascent-override:91.7%;descent-override:22.8%;line-gap-override:0%;}


/* ============================================================
   GLOBAL DESIGN SYSTEM (from cei-eco-home-MASTER-v10.html)
   tokens, typography, header, footer, burger, mobile-nav,
   Hero, research cards, accreditation, lab, process, conversion
   ============================================================ */

  :root{
    --navy:#0B2036;
    --navy-deep:#081726;
    --accent:#0E7C93;
    --accent-strong:#0B6478;
    --bg:#F6F8FA;
    --surface:#FFFFFF;
    --border:#DBE2E7;
    --text:#0F1B2A;
    --muted:#56636F;
    --tag-bg:#EEF2F4;
    --radius-card:6px;
    --radius-btn:6px;
    --container:1280px;
    --font-display:'Manrope', 'Manrope Fallback', sans-serif;
    --font-body:'Inter', 'Inter Fallback', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;}
  .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 40px;
  }

  /* ---------- HEADER ---------- */
  header.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:var(--surface);
    border-bottom:1px solid var(--border);
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:88px;
  }
  .logo{
    display:flex;
    align-items:center;
    gap:9px;
    text-decoration:none;
  }
  .logo:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
  .logo .brand-mark{
    flex:none;
    width:38px;
    height:38px;
    display:block;
    object-fit:contain; /* ЭТАП 17: new logo image isn't perfectly square, unlike the old vector mark */
  }
  .logo .logo-word{
    font-family:var(--font-display);
    font-weight:750;
    font-size:20px;
    line-height:1.02;
    color:var(--navy);
    letter-spacing:-0.015em;
  }
  .logo .logo-word span{
    display:block;
    font-family:var(--font-body);
    font-weight:500;
    font-size:11px;
    letter-spacing:.055em;
    color:var(--muted);
    text-transform:uppercase;
    margin-top:3px;
  }
  nav.main-nav{
    display:flex;
    align-items:center;
    gap:30px;
  }
  nav.main-nav a{
    font-size:14.5px;
    font-weight:500;
    text-decoration:none;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:5px;
    padding:6px 0;
    border-bottom:1px solid transparent;
    transition:border-color .15s ease, color .15s ease;
  }
  nav.main-nav a:hover{ color:var(--accent-strong); border-color:var(--accent-strong); }
  nav.main-nav a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  .chevron{
    width:7px;height:7px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);
    margin-top:-3px;
    opacity:.55;
  }

  /* ---------- "Исследования" dropdown — hover/focus nav menu ----------
     Extends the existing nav.main-nav item, not a new nav system.
     .nav-trigger keeps the exact look of the former plain <a>; the
     dropdown panel is a compact list of the same 7 real routes used
     in the footer, plus "Все исследования". Shown on hover and on
     keyboard focus-within. The trigger link only fills its own text
     height (~29px), vertically centered in the 88px header row, so
     the dropdown (anchored 27px below it to clear the header's
     bottom border) would otherwise sit behind a real dead zone the
     pointer has to cross — .nav-item's padding-bottom/margin-bottom
     pair below extends its actual hoverable hit-box down through
     that whole gap (negative margin cancels the layout effect, so
     the header height is unchanged), so :hover never drops while
     the pointer travels from the trigger into the panel. ---------- */
  .nav-item.has-dropdown{ position:relative; padding-bottom:27px; margin-bottom:-27px; }
  .nav-item.has-dropdown .nav-trigger{ cursor:pointer; }
  .nav-dropdown{
    position:absolute;
    /* top:100% (not "+27px") — the 27px bridge is already inside
       .nav-item's own padding-bottom above, which grew its box height
       by 27px. Percentages for an absolute child resolve against that
       (now taller) padding box, so 100% already lands exactly at the
       bridge's bottom edge; adding +27px again re-opened an
       uncovered second gap between the bridge and the panel. */
    top:100%;
    left:-20px;
    min-width:284px;
    background:var(--surface);
    border:1px solid var(--border);
    border-top:2px solid var(--accent);
    border-radius:0 0 var(--radius-card) var(--radius-card);
    box-shadow:0 16px 32px -12px rgba(8,23,38,.18);
    padding:10px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-4px);
    transition:opacity .14s ease, transform .14s ease, visibility .14s;
    z-index:60;
  }
  .nav-item.has-dropdown:hover .nav-dropdown,
  .nav-item.has-dropdown:focus-within .nav-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  /* force-closed after a click (see global-chrome.js) even while the
     pointer is still resting over the (now navigated) trigger area */
  .nav-item.has-dropdown.js-dropdown-closed .nav-dropdown{
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(-4px) !important;
  }
  .nav-item.has-dropdown .nav-dropdown a{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    font-family:var(--font-body);
    text-decoration:none;
    padding:12px 14px 12px 18px;
    border-radius:3px;
    border-bottom:none;
    border-left:2px solid transparent;
    transition:background .14s ease, border-color .14s ease;
  }
  .nav-dropdown-title{
    font-size:14.5px;
    font-weight:600;
    color:var(--navy-deep);
    transition:color .14s ease;
  }
  .nav-item.has-dropdown .nav-dropdown a:hover,
  .nav-item.has-dropdown .nav-dropdown a:focus-visible{
    background:var(--bg);
    border-left-color:var(--accent);
  }
  .nav-item.has-dropdown .nav-dropdown a:hover .nav-dropdown-title,
  .nav-item.has-dropdown .nav-dropdown a:focus-visible .nav-dropdown-title{ color:var(--accent-strong); }
  .nav-dropdown a:focus-visible{ outline:none; }
  .nav-dropdown-divider{ height:1px; background:var(--border); margin:8px 6px; }
  .nav-item.has-dropdown .nav-dropdown a.nav-dropdown-all{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    font-size:13.5px;
    font-weight:600;
    color:var(--navy);
    padding:10px 14px;
  }
  .nav-dropdown-all:hover{ color:var(--accent-strong); }
  .nav-dropdown-all-arrow{
    font-size:13px;
    color:var(--muted);
    transition:transform .14s ease, color .14s ease;
  }
  .nav-dropdown-all:hover .nav-dropdown-all-arrow{ color:var(--accent-strong); transform:translateX(2px); }
  .header-actions{
    display:flex;
    align-items:center;
    gap:20px;
  }
  .phone-group{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .phone{
    font-family:var(--font-body);
    font-size:13.5px;
    line-height:1.3;
    font-weight:500;
    color:var(--navy);
    text-decoration:none;
    white-space:nowrap;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-body);
    font-weight:600;
    font-size:15px;
    border-radius:var(--radius-btn);
    padding:11px 20px;
    text-decoration:none;
    cursor:pointer;
    border:1px solid transparent;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
    white-space:nowrap;
  }
  .btn-primary{ background:var(--navy); color:#fff; }
  .btn-primary:hover{ background:var(--navy-deep); }
  .btn-primary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  /* ЭТАП 12.1: compact mobile-only header CTA — hidden everywhere above the
     600px breakpoint (shown only in the @media (max-width:600px) block
     below, right before the burger); desktop's .header-cta is untouched
     and keeps its own text/size at every width down to 601px. */
  .header-cta-mobile{ display:none; }

  /* burger (mobile only) */
  .burger{
    display:none;
    width:36px; height:36px;
    align-items:center; justify-content:center;
    background:transparent; border:1px solid var(--border); border-radius:6px;
    cursor:pointer;
  }
  .burger span{ display:block; width:16px; height:1.5px; background:var(--navy); position:relative; }
  .burger span::before, .burger span::after{
    content:""; position:absolute; left:0; width:16px; height:1.5px; background:var(--navy);
  }
  .burger span::before{ top:-5px; }
  .burger span::after{ top:5px; }
  .burger.is-open span{ background:transparent; }
  .burger.is-open span::before{ transform:translateY(5px) rotate(45deg); }
  .burger.is-open span::after{ transform:translateY(-5px) rotate(-45deg); }

  /* mobile nav drawer — functional, wired via JS */
  .mobile-nav{ display:none; flex-direction:column; background:var(--surface); border-bottom:1px solid var(--border); padding:8px 20px 16px 20px; }
  .mobile-nav.is-open{ display:flex; }
  .mobile-nav a{ font-size:15px; font-weight:500; color:var(--text); text-decoration:none; padding:12px 4px; border-bottom:1px solid var(--border); }
  .mobile-nav a:last-of-type{ border-bottom:none; }
  .mobile-nav a:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
  .mobile-nav-divider{ height:1px; background:var(--border); margin:4px 0; }
  .mobile-nav-phone{ font-family:var(--font-mono); color:var(--navy) !important; font-weight:600 !important; padding-top:12px !important; }
  @media (min-width:1151px){ .mobile-nav{ display:none !important; } }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    overflow:hidden;
    min-height:700px;
    background:#EDEFF1;
  }
  .hero-photo-layer{
    position:absolute;
    inset:0;
    z-index:0;
  }
  .hero-photo-layer img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:70% 6%;
    display:block;
  }

  .hero-video-layer video{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 38%;
    display:block;
    transform:none;
  }
  .hero-video-layer::after{
    content:"";
    position:absolute;
    inset:0;
    background:transparent;
    pointer-events:none;
  }

  .hero-photo-layer::before{
    /* very light, narrow contrast lift confined to the text zone — fades out well before
       the specialist begins, no flat block, no artificial hard edge. Nudged slightly
       stronger than before per request, still minimal. */
    content:"";
    position:absolute; inset:0;
    /* 26.09.2026 v3: вместо тёмно-синей «шторки» — нейтральное графитовое
       затемнение с плавным (многоступенчатым) спадом, без заметной границы,
       плюс лёгкое общее приглушение кадра и мягкая тень снизу под фактами.
       Белые халаты и лабораторный свет больше не окрашиваются в синий. */
    background:
      linear-gradient(to top, rgba(12,18,24,.38) 0%, rgba(12,18,24,0) 34%),
      linear-gradient(to right,
        rgba(12,18,24,.80) 0%,
        rgba(12,18,24,.76) 22%,
        rgba(12,18,24,.66) 34%,
        rgba(12,18,24,.50) 44%,
        rgba(12,18,24,.32) 53%,
        rgba(12,18,24,.17) 62%,
        rgba(12,18,24,.10) 72%,
        rgba(12,18,24,.08) 100%);
    pointer-events:none;
  }

  .hero-content{
    position:relative;
    z-index:1;
    max-width:var(--container);
    margin:0 auto;
    padding:112px 40px 88px 40px;
  }
  .hero-left{
    max-width:500px;
    position:relative;
    z-index:2;
  }
  .hero-left h1{
    color:#FFFFFF;
    text-shadow:0 2px 18px rgba(0,0,0,.16);
  }
  .hero-left .hero-sub{
    color:rgba(255,255,255,.88);
    text-shadow:0 1px 12px rgba(0,0,0,.12);
  }
  .hero-left .eyebrow{
    color:#66C5D9;
  }
  .hero-left .action-link{
    color:#FFFFFF;
    border-bottom-color:rgba(102,197,217,.85);
  }
  .hero-left .action-link:hover{
    color:#8DD9E8;
  }
  .hero-left .btn-primary{
    background:#0D7898;
    border-color:#0D7898;
    color:#FFFFFF;
  }
  .hero-left .btn-primary:hover{
    background:#0A6986;
    border-color:#0A6986;
  }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    font-weight:500;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--accent-strong);
  }
  /* Hero-only eyebrow refinement — scoped to .hero-left so the shared .eyebrow
     rule above (used by Исследования/Аккредитация/Лаборатория/Порядок работы
     section heads) stays completely untouched. */
  .hero-left .eyebrow{
    color:var(--accent);
    font-weight:600;
    letter-spacing:.1em;
  }
  /* eyebrow — Level B: structural sections (Исследования / Лаборатория / Порядок работы).
     Inter, not mono — reserves mono-uppercase for the three high-importance
     labels (Hero, Аккредитация, Расчёт стоимости) instead of repeating it six times. */
  .eyebrow-b{
    font-family:var(--font-body);
    font-weight:600;
    font-size:12.5px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--accent-strong);
    margin-bottom:14px;
  }

  h1{
    font-family:var(--font-display);
    font-weight:750;
    font-size:46px;
    line-height:1.08;
    letter-spacing:-0.02em;
    color:var(--navy-deep);
    margin:16px 0 18px 0;
    max-width:500px;
    text-wrap:balance;
  }

  .hero-sub{
    font-size:16.5px;
    line-height:1.5;
    color:#33414D;
    max-width:420px;
    margin:0 0 26px 0;
  }

  /* ---------- CTA HIERARCHY ---------- */
  .cta-row{
    display:flex;
    align-items:center;
    gap:26px;
    flex-wrap:wrap;
  }
  .action-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:15px;
    font-weight:600;
    color:var(--navy);
    text-decoration:none;
    padding-bottom:2px;
    border-bottom:1px solid var(--accent);
  }
  .action-link:hover{ color:var(--accent-strong); }
  .action-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

  /* ---------- RESEARCH SECTION ---------- */
  .research-section{
    background:var(--surface);
    border-top:1px solid var(--border);
    padding:72px 0 84px 0;
  }
  .research-head{
    margin-bottom:30px;
  }
  .research-head .eyebrow{ margin-bottom:14px; }
  h2.section-title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:38px;
    color:var(--navy-deep);
    margin:0;
    letter-spacing:-0.01em;
    line-height:1.15;
  }

  /* ---------- RESEARCH GRID (mosaic, desktop) — compact rows, no photo dependency ---------- */
  .research-grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    grid-template-rows:minmax(108px,auto) minmax(108px,auto) auto auto;
    grid-template-areas:
      "air air air air air air air pe pe pe pe pe"
      "air air air air air air air water water water water water"
      "soil soil soil soil waste waste waste waste waste waste waste waste"
      "morph morph morph morph morph morph bg bg bg bg bg bg";
    gap:18px;
  }

  .r-card{
    display:flex;
    flex-direction:column;
    background:var(--surface);
    border:1px solid rgba(11,32,54,0.10);
    border-radius:6px;
    text-decoration:none;
    color:inherit;
    padding:18px 20px 16px 20px;
    transition:border-color .15s ease, background .15s ease;
    overflow:hidden;
  }
  .r-card:hover{ border-color:var(--accent); background:#FBFDFD; }
  .r-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  .r-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }
  .r-index{
    font-family:var(--font-mono);
    font-weight:600;
    font-size:12px;
    color:var(--accent);
    letter-spacing:.04em;
    display:block;
  }
  .dir-icon{
    flex:none;
    width:35px;
    height:35px;
    color:var(--navy);
    opacity:.85;
    transition:color .15s ease, opacity .15s ease;
  }
  .r-card:hover .dir-icon{ color:var(--accent-strong); opacity:1; }

  /* middle content group — centers title+description in the free space between
     the top head row and the bottom action link, via flex rather than margins */
  .r-card-body{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin:12px 0;
  }
  .r-card h3{
    font-family:var(--font-display);
    font-weight:700;
    font-size:17px;
    color:var(--navy-deep);
    margin:0 0 8px 0;
    letter-spacing:-0.005em;
  }
  .r-card p{
    font-size:14px;
    line-height:1.5;
    color:var(--muted);
    margin:0;
  }
  .r-action{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    font-weight:600;
    color:var(--navy);
    width:fit-content;
  }
  .r-action .arrow{ display:inline-block; transition:transform .15s ease; }
  .r-card:hover .r-action .arrow{ transform:translateX(3px); }

  /* featured card — same family, slightly more generous scale */
  .r-card--featured{
    grid-area:air;
    padding:24px 26px 22px 26px;
  }
  .r-card--featured .dir-icon{ width:40px; height:40px; }
  .r-card--featured h3{ font-size:23px; margin-bottom:10px; }
  .r-card--featured p{ font-size:15px; max-width:400px; }

  .r-card--wide h3{ font-size:18px; }

  /* ---------- HOMEPAGE RESEARCH SECTION — very light cool background + tighter bottom edge,
     scoped by id so the identical research listing page (.research-section reused there)
     is not affected. ---------- */
  #research{ background:#F2F5F6; padding-bottom:64px; }

  /* ---------- RESEARCH GRID — homepage "Исследования и измерения" compact catalog cards.
     Uses its own rs-* classes (not r-card/r-index/dir-icon) so the unrelated research listing
     page, which reuses the old .research-grid/.r-card markup verbatim, is left untouched. ---------- */
  .rs-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-areas:
      "air emission water"
      "soil waste morph"
      "bg  forensic .";
    row-gap:17px;
    column-gap:22px;
  }

  .rs-card{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-sizing:border-box;
    height:172px;
    padding:28px 32px 26px 28px;
    background:#FFFFFF;
    border:1px solid #D9E1E5;
    border-radius:2px;
    text-decoration:none;
    color:inherit;
    transition:border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .rs-card:hover{ border-color:var(--accent); background:#FBFDFD; transform:translateY(-2px); }
  .rs-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  .rs-accent{
    position:absolute;
    top:0; left:0;
    width:38px;
    height:2px;
    background:var(--accent);
    transition:background .15s ease;
  }
  .rs-card:hover .rs-accent{ background:var(--accent-strong); }

  .rs-arrow{
    position:absolute;
    top:24px; right:26px;
    font-size:15px;
    line-height:1;
    color:var(--muted);
    transition:transform .15s ease, color .15s ease;
  }
  .rs-card:hover .rs-arrow{ color:var(--accent-strong); transform:translate(2px,-2px); }

  .rs-card h3{
    font-family:var(--font-display);
    font-weight:700;
    font-size:21px;
    line-height:1.25;
    color:var(--navy-deep);
    margin:0 0 10px 0;
    padding-right:20px;
    letter-spacing:-0.005em;
  }
  .rs-card p{
    font-size:13.5px;
    line-height:1.45;
    color:var(--muted);
    margin:0;
  }

  /* ---------- SEARCH NOTE — compact contextual line inside search-module (accreditation section) ---------- */
  .search-note{
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid var(--border);
    display:flex;
    align-items:baseline;
    gap:10px;
    flex-wrap:wrap;
    font-size:13.5px;
  }
  .search-note span{ color:var(--muted); }
  .search-note a{
    color:var(--navy);
    font-weight:600;
    text-decoration:none;
    border-bottom:1px solid var(--accent);
  }
  .search-note a:hover{ color:var(--accent-strong); }
  .search-note a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

  .sr-only{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  /* ---------- ACCREDITATION SECTION ---------- */
  .accred-section{
    background:var(--bg);
    border-top:1px solid var(--border);
    padding:100px 0 100px 0;
  }
  .accred-head{
    display:grid;
    grid-template-columns:48% 52%;
    gap:52px;
    align-items:end;
    margin-bottom:48px;
  }
  .accred-head .eyebrow{ margin-bottom:14px; }
  .accred-head-right p{
    font-size:16.5px;
    line-height:1.55;
    color:var(--muted);
    max-width:480px;
    margin:0;
  }

  .accred-layout{
    display:grid;
    grid-template-columns:64% 34%;
    gap:44px 32px;
    grid-template-areas:
      "search status"
      "search doc";
  }

  /* ---- search module (light, primary) ---- */
  .search-module{
    grid-area:search;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:6px;
    padding:36px 36px 32px 36px;
  }
  .search-module h2,
  .search-module h3{
    font-family:var(--font-display);
    font-weight:700;
    font-size:21px;
    color:var(--navy-deep);
    margin:0 0 8px 0;
  }
  .search-module .hint{
    font-size:14.5px;
    color:var(--muted);
    line-height:1.5;
    margin:0 0 22px 0;
    max-width:520px;
  }
  .search-form{
    display:flex;
    gap:12px;
    margin-bottom:28px;
  }
  .search-form input[type="text"]{
    flex:1;
    font-family:var(--font-body);
    font-size:15px;
    color:var(--text);
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:6px;
    padding:13px 16px;
  }
  .search-form input[type="text"]::placeholder{ color:#8B97A1; }
  .search-form input[type="text"]:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:1px;
    border-color:var(--accent);
  }
  .search-form button{
    font-family:var(--font-body);
    font-weight:600;
    font-size:15px;
    background:var(--navy);
    color:#fff;
    border:none;
    border-radius:6px;
    padding:0 26px;
    cursor:pointer;
    transition:background .15s ease;
  }
  .search-form button:hover{ background:var(--navy-deep); }
  .search-form button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .search-subtext{
    font-size:13px;
    color:var(--muted);
    margin:-16px 0 22px 0;
  }

  .demo-flag{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--accent-strong);
    background:var(--tag-bg);
    display:inline-block;
    padding:4px 9px;
    border-radius:4px;
    margin-bottom:14px;
  }

  .result-head{
    display:grid;
    grid-template-columns:30% 30% 28% 12%;
    gap:12px;
    padding:0 4px 10px 4px;
    border-bottom:1px solid var(--border);
  }
  .result-head span{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .result-row{
    display:grid;
    grid-template-columns:30% 30% 28% 12%;
    gap:12px;
    align-items:center;
    padding:16px 4px;
    border-bottom:1px solid var(--border);
  }
  .result-row .r-name{
    font-size:14.5px;
    font-weight:600;
    color:var(--navy-deep);
  }
  .result-row .r-object,
  .result-row .r-method{
    font-size:13.5px;
    color:var(--muted);
  }
  .result-row .r-more{
    font-size:13.5px;
    font-weight:600;
    color:var(--navy);
    text-align:right;
    white-space:nowrap;
  }
  .result-row .r-more:hover{ color:var(--accent-strong); }

  /* ---- real search: filters, state messages, pagination (new for production search) ---- */
  .filter-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:4px 0 16px 0; }
  .filter-btn{ font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--muted); background:none; border:none; border-bottom:2px solid transparent; padding:6px 10px; cursor:pointer; }
  .filter-btn:hover{ color:var(--navy); }
  .filter-btn.is-active{ color:var(--navy-deep); font-weight:700; border-bottom-color:var(--accent); }
  .filter-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .state-chip{ border:1px solid var(--border); border-radius:6px; padding:14px 16px; background:var(--bg); margin-top:4px; }
  .state-chip .st-text{ font-size:13px; color:var(--muted); }
  #accred-load-more{ display:inline-flex; align-items:center; justify-content:center; margin-top:16px; font-family:var(--font-body); font-weight:600; font-size:14px; color:var(--navy); background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:10px 20px; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
  #accred-load-more[hidden]{ display:none; }
  #accred-load-more:hover{ border-color:var(--accent); background:var(--bg); }
  #accred-load-more:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  /* ---- status panel (navy, official confirmation card) ---- */
  .status-panel{
    grid-area:status;
    background:var(--navy-deep);
    border-radius:6px;
    padding:24px 24px 22px 24px;
    color:#E7ECEF;
  }
  .status-indicator{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#7FA7B3;
    margin-bottom:14px;
  }
  .status-indicator .dot,
  .status-badge .dot{
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent);
    flex:none;
  }
  .status-number{
    font-family:var(--font-mono);
    font-weight:600;
    font-size:22px;
    color:#fff;
    letter-spacing:.01em;
    margin-bottom:12px;
  }
  .status-org{
    font-size:13.5px;
    line-height:1.5;
    color:#C7D1D8;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,0.12);
    margin-bottom:10px;
  }
  .status-standard{
    font-family:var(--font-mono);
    font-size:12.5px;
    color:#A9B7C0;
    margin-bottom:16px;
  }
  .status-badge{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    color:#C7D1D8;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,0.12);
  }
  .status-panel .panel-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13.5px;
    font-weight:600;
    color:#6FCBDD;
    text-decoration:none;
    margin-top:18px;
    border-bottom:1px solid rgba(111,203,221,.4);
    padding-bottom:1px;
  }
  .status-panel .panel-link:hover{ color:#9BDCE9; border-color:#9BDCE9; }
  .status-panel .panel-link:focus-visible{ outline:2px solid #6FCBDD; outline-offset:3px; }

  /* ---- accreditation scope documents — compact row list, not a single large doc card ---- */
  .doc-list-panel{
    grid-area:doc;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:6px;
    padding:20px 22px 6px 22px;
  }
  .doc-list-panel .panel-label{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--accent-strong);
    margin-bottom:8px;
  }
  .doc-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 0;
    border-top:1px solid var(--border);
    text-decoration:none;
    color:inherit;
    cursor:pointer;
  }
  .doc-row-icon{
    flex:none;
    width:19px;
    height:19px;
    color:var(--navy);
    opacity:.85;
  }
  .doc-row-body{
    flex:1;
    min-width:0;
    display:flex;
    align-items:baseline;
    gap:8px;
  }
  .doc-row-num{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--accent-strong);
    flex:none;
  }
  .doc-row-title{
    font-size:13.5px;
    font-weight:600;
    color:var(--navy-deep);
    line-height:1.35;
  }
  .doc-row-link{
    flex:none;
    font-size:12.5px;
    font-weight:600;
    color:var(--navy);
    white-space:nowrap;
  }
  .doc-row:hover .doc-row-link{ color:var(--accent-strong); }
  .doc-row:hover .doc-row-icon{ color:var(--accent-strong); opacity:1; }
  .doc-row:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

  /* ---- conversion strip — quiet B2B CTA closing the section, not a banner ---- */
  .accred-cta-row{
    margin-top:40px;
    border-top:1px solid var(--border);
    padding-top:28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    flex-wrap:wrap;
  }
  .accred-cta-text{
    display:flex;
    flex-direction:column;
    gap:4px;
    max-width:520px;
  }
  .accred-cta-text .ct-title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:16px;
    color:var(--navy-deep);
  }
  .accred-cta-text .ct-sub{
    font-size:14px;
    line-height:1.5;
    color:var(--muted);
  }
  .accred-cta-actions{
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
    flex:none;
  }

  /* ============================================================
     HOMEPAGE ACCREDITATION SECTION — scoped overrides via .hpacc.
     The standalone /accreditation/ page (tpl-accreditation) reuses the
     exact same classes/ids verbatim, so every rule here is scoped under
     .hpacc (added only to the homepage section) and the base accred-*
     rules above are left untouched — the standalone page is unaffected.
     ============================================================ */
  .hpacc.accred-section{
    padding:88px 0 84px 0;
  }
  .hpacc .accred-head{
    display:block;
    margin-bottom:34px;
  }
  .hpacc .accred-layout{
    grid-template-columns:63% 35%;
    gap:22px 28px;
  }

  /* ---- search module: the primary tool, stronger entry hierarchy.
     align-self:start so the card hugs its own (now shorter, post-cleanup)
     content height instead of stretching to match the taller right column
     — without this the card was left with a large empty gap at the bottom. ---- */
  .hpacc .search-module{
    padding:38px 38px 34px 38px;
    border-radius:4px;
    align-self:start;
  }
  .hpacc .search-module h3{
    font-size:24px;
    letter-spacing:-0.01em;
    margin-bottom:10px;
  }
  .hpacc .search-module .hint{
    font-size:14px;
    margin-bottom:26px;
  }
  .hpacc .search-form input[type="text"]{
    padding:15px 18px;
    border-radius:4px;
    border-color:#C9D3D9;
    font-size:15.5px;
  }
  .hpacc .search-form button{
    border-radius:4px;
    padding:0 30px;
  }
  .hpacc .demo-flag{
    background:none;
    padding:0;
    border-radius:0;
    font-size:11px;
    letter-spacing:.04em;
    color:var(--accent-strong);
  }
  /* ---- remove the pre-query service text on the homepage only.
     #accred-count-flag and #accred-empty-initial stay in the DOM
     (JS unconditionally sets .textContent / .hidden on them every
     render — deleting the elements would throw) but are hidden here
     purely with CSS, scoped to .hpacc so the standalone /accreditation/
     page — which reuses the exact same ids — is unaffected. The
     :has() rule hides the count line only while the pre-query state
     is showing; once a real query is typed, #accred-empty-initial
     gets hidden by the unmodified JS and the count line (now showing
     "Найдено: N" / "Ничего не найдено") reappears exactly as before. ---- */
  .hpacc #accred-empty-initial{ display:none; }
  .hpacc .search-module:has(#accred-empty-initial:not([hidden])) #accred-count-flag{ display:none; }
  .hpacc .filter-row{
    padding-top:14px;
    margin-top:6px;
    border-top:1px solid var(--border);
  }

  /* ---- status panel: the official proof-block, stronger visual weight ---- */
  .hpacc .status-panel{
    position:relative;
    padding:34px 30px 28px 30px;
    border-radius:4px;
  }
  .hpacc .status-panel::before{
    content:"";
    position:absolute;
    top:0; left:30px;
    /* ЭТАП 11: slightly more prominent top accent bar (was 40x2) — same navy
       card, same footprint, just a touch more visual weight up top where the
       RA number sits, per "более выраженный верхний/основной блок статуса". */
    width:60px; height:3px;
    background:var(--accent);
  }
  .hpacc .status-number{
    font-size:34px;
    /* ЭТАП 11: RA.RU.21ОА21 a touch more noticeable — bumped from the base
       .status-number's font-weight:600 and letter-spacing:.01em. Size/card
       unchanged otherwise. */
    font-weight:700;
    letter-spacing:.02em;
    margin-bottom:16px;
  }
  .hpacc .status-org{ font-size:13.5px; }
  .hpacc .status-standard{ font-size:13px; margin-bottom:18px; }

  /* ---- accreditation scope documents: compact official rows, no card feel ---- */
  .hpacc .doc-list-panel{
    padding:26px 26px 8px 26px;
    border-radius:4px;
  }
  .hpacc .panel-label{ font-size:11px; margin-bottom:10px; }
  .hpacc .doc-row{ padding:16px 0; gap:14px; }
  .hpacc .doc-row-body{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }
  .hpacc .doc-row-title{ font-size:14px; }
  .hpacc .doc-row-type{
    display:block;
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:.04em;
    color:var(--muted);
  }

  /* ---------- LAB SECTION — "Лаборатория в работе" (photographic proof block) ---------- */
  .lab-section{
    background:var(--surface);
    border-top:1px solid var(--border);
    padding:108px 0 112px 0;
  }
  .lab-head{
    display:grid;
    /* ЭТАП PERF-1: было "48% 52%" — тот же баг, что и у .conversion-layout
       ниже: проценты в сумме 100% + gap 52px поверх → блок «Лаборатория в
       работе» вылезал за край окна на ~12px (найдено при проверке правки
       .conversion-layout, при ширине окна ~1280px). "fr" делят место уже
       после вычета gap — пропорция 48:52 та же, переполнения нет. */
    grid-template-columns:48fr 52fr;
    gap:52px;
    align-items:end;
    margin-bottom:48px;
  }
  .lab-head .eyebrow{ margin-bottom:14px; }
  .lab-head-right p{
    font-size:16.5px;
    line-height:1.55;
    color:var(--muted);
    max-width:480px;
    margin:0;
  }

  .lab-layout{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:20px;
    grid-template-areas:
      "main main main main main main main main main main main main"
      "tri2 tri2 tri2 tri2 tri3 tri3 tri3 tri3 tri4 tri4 tri4 tri4";
  }

  .lab-photo{
    position:relative;
    border-radius:5px;
    overflow:hidden;
    background:
      repeating-linear-gradient(45deg, #E7ECEF 0 1px, transparent 1px 14px),
      linear-gradient(160deg, #EEF2F4 0%, #E4EAED 100%);
  }
  .lab-photo img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

  /* Photo crop tuning — real laboratory images, v6 */
  .lab-main .lab-photo img{ object-position:50% 58%; }
  .lab-tri2 .lab-photo img{ object-position:50% 58%; }
  .lab-tri3 .lab-photo img{ object-position:52% 42%; }
  .lab-tri4 .lab-photo img{ object-position:55% 48%; }
  .cap-card[href="#/research/soil/"] .cap-media img{ object-position:50% 58%; }

  .lab-photo .placeholder-copy{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:28px;
  }
  .lab-photo .placeholder-copy p{
    font-size:13px;
    line-height:1.5;
    color:var(--muted);
    max-width:420px;
    margin:0;
  }

  .lab-caption{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
    margin-top:10px;
  }
  .lab-caption .cap-main{
    font-size:13px;
    color:var(--muted);
    line-height:1.5;
  }
  .lab-caption .cap-tag{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--accent-strong);
    background:var(--tag-bg);
    padding:3px 8px;
    border-radius:4px;
    white-space:nowrap;
    flex:none;
  }

  /* MAIN photo — wide editorial frame, the visual anchor of the section */
  .lab-main{ grid-area:main; }
  .lab-main .lab-photo{ aspect-ratio:2.2/1; }

  /* triptych — three secondary photos, equal weight, no numbering */
  .lab-tri2{ grid-area:tri2; }
  .lab-tri3{ grid-area:tri3; }
  .lab-tri4{ grid-area:tri4; }
  .lab-tri2 .lab-photo,
  .lab-tri3 .lab-photo,
  .lab-tri4 .lab-photo{ aspect-ratio:4/3; }

  .lab-tri-body{ margin-top:12px; }
  .lab-tri-body .tri-title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:15px;
    color:var(--navy-deep);
    margin:0 0 4px 0;
  }
  .lab-tri-body .tri-sub{
    font-size:12.5px;
    color:var(--muted);
    line-height:1.5;
    margin:0;
  }
  .lab-tri-body .tri-model{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--muted);
    margin:2px 0 0 0;
  }
  .tri-link{
    display:inline-block;
    font-size:12.5px;
    font-weight:600;
    color:var(--muted);
    text-decoration:none;
    border-bottom:1px solid var(--border);
    margin-top:8px;
  }
  .tri-link:hover{ color:var(--navy); border-color:var(--navy); }
  .tri-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

  /* closing links — calm, plain, no box; sits below the grid, not inside it */
  .lab-links{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
    margin-top:32px;
    padding-top:20px;
    border-top:1px solid var(--border);
  }
  .lab-links .action-link{ font-size:14.5px; }

  /* ---------- PROCESS SECTION — "Как проходит работа" (compact, sequence-only) ---------- */
  .process-section{
    /* ЭТАП 11: a touch more saturated than the page's plain --bg — a very
       light, cool blue-gray, not a "dark section" — to break up the pale
       middle-of-page rhythm. Border/padding/structure unchanged. */
    background:#ECF1F5;
    border-top:1px solid var(--border);
    padding:84px 0 84px 0;
  }
  .process-head{
    margin-bottom:52px;
  }
  .process-head .eyebrow{ margin-bottom:14px; }

  .steps-row{
    list-style:none;
    margin:0; padding:0;
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:28px;
    border-top:1px solid var(--border);
  }
  .step{
    position:relative;
    padding-top:22px;
  }
  .step::before{
    content:"";
    position:absolute;
    top:-1px; left:0;
    /* ЭТАП 11: slightly bolder marker line (was 26x2) for a touch more
       contrast against the section's now slightly-tinted background. */
    width:32px;
    height:3px;
    background:var(--accent);
  }
  .step .s-num{
    display:block;
    font-family:var(--font-mono);
    font-size:13px;
    /* ЭТАП 11: brighter brand teal (was --accent-strong) + real weight,
       so 01–05 reads as more expressive/deliberate, not just a label. */
    /* ЭТАП 5: #0E7C93 (--accent) на фоне #ECF1F5 давал контраст 4,27:1 при норме
       WCAG 4,5:1. Тот же оттенок на ~5% темнее — 4,63:1, на глаз почти не отличается. */
    color:#0D768C;
    font-weight:700;
    letter-spacing:.03em;
    margin-bottom:10px;
  }
  .step h3{
    font-family:var(--font-display);
    /* ЭТАП 11: a touch stronger (was 700) — Manrope 800 is already loaded
       site-wide, size/line-height/color unchanged. */
    font-weight:800;
    font-size:15.5px;
    color:var(--navy-deep);
    margin:0 0 8px 0;
    line-height:1.3;
  }
  .step p{
    font-size:13px;
    line-height:1.5;
    color:var(--muted);
    margin:0;
  }


  /* ---------- CONVERSION SECTION — "Передайте задачу специалисту лаборатории" ---------- */
  .conversion-section{
    background:var(--navy-deep);
    padding:100px 0 104px 0;
  }
  .conversion-layout{
    display:grid;
    /* ЭТАП PERF-1: было "42% 58%" — с grid-template-columns в процентах "gap"
       добавляется ПОВЕРХ 100%, из-за чего .form-card вылезал за пределы
       контейнера и весь сайт получал горизонтальную прокрутку на ~24px при
       ширине окна ~1260-1280px. "fr"-единицы делят доступное пространство
       ПОСЛЕ вычета gap, поэтому пропорция 42:58 сохраняется, но переполнения
       больше нет. */
    grid-template-columns:42fr 58fr;
    gap:64px;
    align-items:start;
  }

  .eyebrow--on-dark{ color:#7FA7B3; }
  h2.section-title--on-dark{ color:#fff; }
  .conversion-context .conv-sub{
    font-size:16px;
    line-height:1.6;
    color:#A9B7C0;
    max-width:420px;
    margin:16px 0 36px 0;
  }

  .conv-contacts{
    border-top:1px solid rgba(255,255,255,0.14);
    margin-bottom:28px;
  }
  .conv-contact-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,0.14);
  }
  .conv-contact-row .cc-label{
    font-size:13px;
    color:#7C8B96;
  }
  .conv-contact-row .cc-value{
    font-size:14.5px;
    color:#E7ECEF;
    text-align:right;
  }
  .conv-contact-row a.cc-value{
    text-decoration:none;
    border-bottom:1px solid rgba(111,203,221,.4);
  }
  .conv-contact-row a.cc-value:hover{ color:#9BDCE9; border-color:#9BDCE9; }
  .conv-contact-row a.cc-value:focus-visible{ outline:2px solid #6FCBDD; outline-offset:3px; }

  .conv-tz-note{
    font-size:13.5px;
    line-height:1.55;
    color:#A9B7C0;
    max-width:400px;
  }
  .conv-tz-note strong{
    display:block;
    color:#E7ECEF;
    font-weight:600;
    margin-bottom:4px;
  }

  /* ---- FORM CARD ---- */
  .form-card{
    background:var(--surface);
    border-radius:8px;
    padding:40px;
    box-shadow:0 4px 16px rgba(3,10,20,0.14);
  }
  .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .field{
    margin-bottom:20px;
  }
  .field label{
    display:block;
    font-size:13.5px;
    font-weight:600;
    color:var(--navy-deep);
    margin-bottom:7px;
  }
  .field input[type="text"],
  .field input[type="tel"],
  .field input[type="email"],
  .field textarea{
    width:100%;
    font-family:var(--font-body);
    font-size:15px;
    color:var(--text);
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:6px;
    padding:12px 14px;
  }
  .field textarea{
    min-height:96px;
    resize:vertical;
    font-family:var(--font-body);
  }
  .field input::placeholder,
  .field textarea::placeholder{ color:#8B97A1; }
  .field input:focus-visible,
  .field textarea:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:1px;
    border-color:var(--accent);
  }
  /* validation states — reference implementation, not wired to JS in prototype */
  .field.has-error input,
  .field.has-error textarea{
    border-color:#C0392B;
  }
  .field .error-msg{
    display:none;
    font-size:12.5px;
    color:#C0392B;
    margin-top:6px;
  }
  .field.has-error .error-msg{ display:block; }
  .field input:disabled,
  .field textarea:disabled{
    background:#EEF1F3;
    color:#9AA5AD;
    cursor:not-allowed;
  }

  /* ---- FILE ATTACH (compact row, not a large dropzone) ---- */
  .file-row{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--border);
    border-radius:6px;
    padding:13px 16px;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .file-row:hover{ border-color:var(--accent); background:#FBFDFD; }
  .file-row:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }
  .file-row .file-icon{ flex:none; color:var(--muted); }
  .file-row .file-text{ font-size:14.5px; font-weight:600; color:var(--navy); }
  .file-row .file-hint{ font-family:var(--font-body); font-weight:500; font-size:12px; color:var(--muted); margin-left:auto; white-space:nowrap; }

  .form-submit{
    width:100%;
    font-family:var(--font-body);
    font-weight:600;
    font-size:16px;
    background:var(--navy);
    color:#fff;
    border:none;
    border-radius:6px;
    padding:15px 24px;
    cursor:pointer;
    margin-top:6px;
    transition:background .15s ease;
  }
  .form-submit:hover{ background:var(--navy-deep); }
  .form-submit:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .form-submit:disabled{ background:#B7C1C8; cursor:not-allowed; }

  /* ---- CONSENT CHECKBOX — separate legal entity from .form-privacy,
     required before submit. Reuses .field/.error-msg show-hide logic. ---- */
  .field-consent{ margin-bottom:20px; }
  /* ".field-consent .consent-row" (two classes) intentionally outweighs the
     generic ".field label" rule above (class+element) — this label wraps an
     inline checkbox + text row, not a form field caption. */
  .field-consent .consent-row{
    display:flex;
    align-items:flex-start;
    gap:12px;
    cursor:pointer;
    font-size:inherit;
    font-weight:400;
    margin-bottom:0;
  }
  .consent-row input[type="checkbox"]{
    flex:none;
    width:20px;
    height:20px;
    margin:1px 0 0 0;
    accent-color:var(--navy);
    cursor:pointer;
  }
  .consent-row .consent-text{
    font-size:13.5px;
    line-height:1.5;
    color:var(--text);
  }
  .consent-row .consent-text a{
    color:var(--navy);
    text-decoration:underline;
  }
  .consent-row .consent-text a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .field-consent.has-error .consent-text{ color:#C0392B; }
  .field-consent .error-msg{ margin-left:32px; }

  .form-privacy{
    font-size:12.5px;
    line-height:1.5;
    color:var(--muted);
    margin-top:16px;
  }
  .form-privacy a{
    color:var(--navy);
    text-decoration:underline;
  }
  .form-privacy a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  /* ---- honeypot — off-screen (not display:none/visibility:hidden, since some
     simple spam bots specifically skip those), unreachable by real keyboard/AT users. ---- */
  .hp-field{
    position:absolute;
    left:-9999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
  }

  /* ---- SUCCESS STATE — shown after send-form.php confirms the request was sent ---- */
  .form-success{
    text-align:center;
    padding:32px 20px;
  }
  .form-success .fs-title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:21px;
    color:var(--navy-deep);
    margin-bottom:10px;
  }
  .form-success .fs-sub{
    font-size:14.5px;
    color:var(--muted);
    max-width:360px;
    margin:0 auto;
    line-height:1.5;
  }

  /* ---- ERROR STATE — shown only when send-form.php fails/is unreachable.
     Same layout as .form-success, title colored with the existing form error red. ---- */
  .form-error{
    text-align:center;
    padding:32px 20px;
  }
  .form-error .fe-title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:21px;
    color:#C0392B;
    margin-bottom:10px;
  }
  .form-error .fe-sub{
    font-size:14.5px;
    color:var(--muted);
    max-width:360px;
    margin:0 auto;
    line-height:1.5;
  }
  .form-error .fe-sub a{
    color:var(--navy);
    text-decoration:underline;
  }

  /* ---------- FOOTER ---------- */
  .site-footer{
    background:var(--navy-deep);
    border-top:1px solid rgba(255,255,255,0.14);
    padding:76px 0 0 0;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:32px;
    padding-bottom:48px;
  }
  .footer-logo{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:14px;
  }
  .footer-logo .brand-mark{ flex:none; width:27px; height:27px; object-fit:contain; }
  .footer-col .f-wordmark{
    font-family:var(--font-display);
    font-weight:700;
    font-size:16.5px;
    color:#fff;
    margin:0;
  }
  .footer-col .f-tag{
    font-size:12px;
    color:#7FA7B3;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:14px;
  }
  .footer-col .f-legal{
    font-size:12.5px;
    color:#7C8B96;
    line-height:1.5;
  }
  /* ЭТАП 5: подписи колонок подвала — теперь <p class="footer-h"> вместо <h4>
     (h4 сразу после h2 на каждой странице ломал порядок заголовков). */
  .footer-col h4,
  .footer-col .footer-h{
    font-family:var(--font-body);
    font-size:12.5px;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:#9FB4BC;
    margin:0 0 16px 0;
    font-weight:600;
  }
  .footer-nav ul{
    list-style:none;
    margin:0; padding:0;
    display:flex;
    flex-direction:column;
    gap:11px;
  }
  .footer-nav a{
    font-size:14px;
    color:#C7D1D8;
    text-decoration:none;
  }
  .footer-nav a:hover{ color:#fff; }
  .footer-nav a:focus-visible{ outline:2px solid #6FCBDD; outline-offset:3px; }

  .footer-contacts{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .footer-contacts a, .footer-contacts span{
    font-size:14px;
    color:#C7D1D8;
    text-decoration:none;
  }
  .footer-contacts a:hover{ color:#fff; }
  .footer-contacts a:focus-visible{ outline:2px solid #6FCBDD; outline-offset:3px; }

  .footer-bottom{
    border-top:1px solid rgba(255,255,255,0.14);
    padding:20px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
  }
  .footer-bottom .f-copy{
    font-size:12.5px;
    color:#7C8B96;
  }
  .footer-bottom nav ul{
    list-style:none;
    display:flex;
    gap:24px;
    margin:0; padding:0;
  }
  .footer-bottom nav a{
    font-size:12.5px;
    color:#7C8B96;
    text-decoration:none;
  }
  .footer-bottom nav a:hover{ color:#C7D1D8; }
  .footer-bottom nav a:focus-visible{ outline:2px solid #6FCBDD; outline-offset:3px; }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; scroll-behavior:auto !important; }
  }

  /* ---------- HEADER — dedicated breakpoint ----------
     Chosen well above the general 1024px tablet breakpoint because
     the desktop nav (5 items + phone-group + CTA) visibly crowds before
     content grids need to reflow. Header switches to burger earlier than the
     rest of the page reflows to tablet. (Two phone numbers stack in
     .phone-group — column layout — so the row stays about as wide as the
     original single-phone version.) Bumped from 1150px to 1200px when the
     5th nav item ("Новости") was added — measured wrap of "О лаборатории"
     onto two lines between 1151–1160px with 5 items at the old threshold. ---------- */
  @media (max-width: 1200px){
    nav.main-nav{ display:none; }
    .phone-group{ display:none; }
    .burger{ display:flex; }
  }

  /* ---------- TABLET ---------- */
  @media (max-width: 1024px){
    .container{ padding:0 28px; }
    h1{ font-size:42px; max-width:100%; }
    .hero{ min-height:520px; }
    .hero-photo-layer img{ object-position:56% 10%; }
    /* 26.09.2026: на планшете был светлый градиент от старого дизайна
       с фото — белый текст поверх него не читался. Теперь тёмный, как на
       десктопе, но шире (текст занимает бо́льшую часть экрана). */
    .hero-photo-layer::before{
      background:
        linear-gradient(to top, rgba(12,18,24,.40) 0%, rgba(12,18,24,0) 36%),
        linear-gradient(to right,
        rgba(12,18,24,.84) 0%,
        rgba(12,18,24,.78) 34%,
        rgba(12,18,24,.62) 52%,
        rgba(12,18,24,.40) 66%,
        rgba(12,18,24,.20) 80%,
        rgba(12,18,24,.10) 100%);
    }
    .hero-content{ padding:72px 28px 56px 28px; }
    .hero-left{ max-width:440px; }

    /* research section — tablet: 2 columns, featured spans both */
    .research-section{ padding:72px 0 76px 0; }
    .research-head{ margin-bottom:28px; }
    h2.section-title{ font-size:32px; }

    .research-grid{
      grid-template-columns:1fr 1fr;
      grid-template-rows:auto;
      grid-template-areas:
        "air air"
        "pe water"
        "soil waste"
        "morph bg";
      gap:16px;
    }
    .r-card--featured{ padding:26px; }

    /* homepage research cards — tablet: 2 columns, natural reading order, last card not stretched */
    #research{ padding-bottom:56px; }
    .rs-grid{
      grid-template-columns:1fr 1fr;
      grid-template-areas:
        "air emission"
        "water soil"
        "waste morph"
        "bg forensic";
      row-gap:16px;
      column-gap:20px;
    }

    /* accreditation section — tablet: single column, search first */
    .accred-section{ padding:72px 0 76px 0; }
    .accred-head{ grid-template-columns:1fr; gap:20px; margin-bottom:36px; }
    .accred-head-right p{ max-width:100%; }

    .accred-layout{
      grid-template-columns:1fr;
      grid-template-areas:
        "status"
        "search"
        "doc";
      gap:20px;
    }
    .search-module{ padding:28px 28px 26px 28px; }

    /* homepage accreditation — tablet: single column, status first, tighter head */
    .hpacc.accred-section{ padding:72px 0 76px 0; }
    .hpacc .accred-head{ margin-bottom:28px; }
    .hpacc .accred-layout{
      grid-template-columns:1fr;
      grid-template-areas:
        "status"
        "search"
        "doc";
      gap:20px;
    }
    .hpacc .search-module{ padding:30px 30px 28px 30px; }
    .hpacc .status-number{ font-size:28px; }

    /* lab section — tablet: main full width, secondary content 2 columns */
    .lab-section{ padding:72px 0 76px 0; }
    .lab-head{ grid-template-columns:1fr; gap:20px; margin-bottom:36px; }
    .lab-head-right p{ max-width:100%; }

    .lab-layout{
      grid-template-columns:1fr 1fr;
      grid-template-areas:
        "main main"
        "tri2 tri3"
        "tri4 tri4";
      gap:24px;
    }
    .lab-main .lab-photo{ aspect-ratio:16/9; }
    .lab-tri4 .lab-photo{ aspect-ratio:21/9; }
    .lab-links{ flex-direction:row; align-items:center; justify-content:flex-start; gap:28px; padding-top:8px; }

    /* process section — tablet: 3 + 2 rows (auto-wrap), line simplified */
    .process-section{ padding:64px 0 68px 0; }
    .process-head{ margin-bottom:36px; }

    .steps-row{
      grid-template-columns:repeat(3, 1fr);
      row-gap:32px;
      border-top:none;
    }
    .step{ padding-top:18px; border-top:1px solid var(--border); }
    /* ЭТАП 11: tablet/mobile aren't being reworked this stage — keep this
       marker line's original 2px height here, the desktop-only bump to 3px
       lives in the base rule above. */
    .step::before{ width:22px; height:2px; }

    /* conversion section — tablet: single column, form below context */
    .conversion-section{ padding:72px 0 76px 0; }
    .conversion-layout{ grid-template-columns:1fr; gap:40px; }
    .conversion-context .conv-sub{ max-width:100%; }
    .form-card{ padding:32px; }

    /* footer — tablet: 2 columns */
    .footer-grid{ grid-template-columns:1fr 1fr; row-gap:36px; }
  }
  @media (max-width: 600px){
    .container{ padding:0 20px; }
    .header-inner{ height:60px; }
    .btn-primary.header-cta{ display:none; } /* mobile: desktop's full-text CTA is replaced by the compact one below */
    .logo .brand-mark{ width:25px; height:25px; }
    .logo .logo-word{ font-size:15px; }
    .logo .logo-word span{ font-size:9.5px; }

    /* ЭТАП 12.1: mobile header — logo left, compact "Оставить заявку" CTA,
       burger, in that order; tightened gap so both fit on one line without
       wrapping or crowding the burger at narrow widths (down to ~360px). */
    .header-actions{ gap:10px; }
    .header-cta-mobile{
      display:inline-flex;
      font-size:12.5px;
      font-weight:600;
      padding:8px 12px;
      white-space:nowrap;
      flex:none;
    }

    .hero{
      min-height:0;
      display:flex;
      flex-direction:column;
      background:var(--surface);
    }
    .hero-photo-layer{
      position:relative;
      order:2;
      height:210px;
    }
    .hero-photo-layer img{ object-position:66% 10%; }
    .hero-photo-layer::before{ display:none; }
    .hero-video-layer video{
      transform:none;
      object-position:center 34%;
    }
    .hero-left h1{
      color:var(--navy-deep);
      text-shadow:none;
    }
    .hero-left .hero-sub{
      color:#3D4750;
      text-shadow:none;
    }
    .hero-left .eyebrow{ color:var(--accent); }
    .hero-left .action-link{
      color:var(--navy);
      border-bottom-color:var(--accent);
    }
    .hero-left .btn-primary{
      background:var(--navy-deep);
      border-color:var(--navy-deep);
      color:#fff;
    }
    .hero-video-layer::after{ display:none; } /* no gradient over the standalone mobile photo block */
    .hero-content{ padding:20px 20px 0 20px; order:1; }
    .hero-left{ max-width:100%; }
    .ruler{ margin-bottom:14px; }
    .eyebrow{ font-size:11px; }
    h1{ font-size:33px; line-height:1.18; margin:14px 0 14px 0; max-width:100%; }
    .hero-sub{ font-size:16px; margin-bottom:20px; max-width:100%; }
    .cta-row{ flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:22px; }
    .cta-row .btn{ width:100%; }
    .cta-row .action-link{ align-self:flex-start; justify-content:flex-start; width:fit-content; }

    /* research section — mobile: compact horizontal cards, sequential */
    .research-section{ padding:52px 0 56px 0; }
    .research-head{ margin-bottom:22px; }
    h2.section-title{ font-size:25px; }

    .research-grid{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .r-card{
      padding:16px 18px;
    }
    .r-card-body{ margin:8px 0; }
    .dir-icon{ width:31px; height:31px; }
    .r-card h3{ font-size:16.5px; margin-bottom:6px; }
    .r-card p{ font-size:13px; margin-bottom:10px; }
    .r-action{ font-size:13px; }

    .r-card--featured{ padding:22px; }
    .r-card--featured .dir-icon{ width:32px; height:32px; }
    .r-card--featured h3{ font-size:20px; }
    .r-card--featured p{ font-size:14.5px; max-width:100%; }

    /* homepage research cards — mobile: single column, sequential, no horizontal overflow.
       ЭТАП 12.4: height is content-driven (not the fixed desktop 172px/152px), so a short
       card (e.g. "Атмосферный воздух") sits compact instead of reading as an empty white
       block, while a long one (e.g. "Судебная экологическая экспертиза") still gets the
       room it needs. */
    #research{ padding-bottom:44px; }
    .rs-grid{
      grid-template-columns:1fr;
      grid-template-areas:
        "air"
        "emission"
        "water"
        "soil"
        "waste"
        "morph"
        "bg"
        "forensic";
      row-gap:10px;
    }
    .rs-card{ height:auto; padding:18px 22px 16px 20px; }
    .rs-card h3{ font-size:18px; margin-bottom:5px; }
    .rs-card p{ font-size:13px; }
    .rs-arrow{ top:18px; right:18px; }

    /* accreditation section — mobile: order search -> status -> doc (ЭТАП 12.5:
       lead with the search tool / main info, then the official status proof,
       then the accreditation-scope documents) */
    .accred-section{ padding:52px 0 56px 0; }
    .accred-head{ margin-bottom:24px; }
    .accred-head-right p{ font-size:15px; }

    .accred-layout{
      grid-template-columns:1fr;
      grid-template-areas:
        "search"
        "status"
        "doc";
      gap:16px;
    }

    .search-module{ padding:22px 20px 20px 20px; }
    .search-module h2,
    .search-module h3{ font-size:18.5px; }
    .search-form{ flex-direction:column; gap:10px; margin-bottom:22px; }
    .search-form button{ padding:13px 20px; }

    .result-head{ display:none; } /* column labels not needed once rows become vertical cards */
    .result-row{
      grid-template-columns:1fr;
      row-gap:6px;
      padding:16px 0;
    }
    .result-row .r-name::before{ content:"Показатель — "; font-family:var(--font-mono); font-size:10.5px; color:var(--muted); }
    .result-row .r-object::before{ content:"Объект — "; font-family:var(--font-mono); font-size:10.5px; }
    .result-row .r-method::before{ content:"Методика — "; font-family:var(--font-mono); font-size:10.5px; }
    .result-row .r-more{ text-align:left; margin-top:4px; }

    .status-panel{ padding:22px; }
    .doc-list-panel{ padding:18px 20px 4px 20px; }
    .status-number{ font-size:20px; white-space:nowrap; }

    .accred-cta-row{ flex-direction:column; align-items:stretch; gap:18px; margin-top:32px; padding-top:22px; }
    .accred-cta-actions{ flex-direction:column; align-items:stretch; gap:14px; }
    .accred-cta-actions .btn{ width:100%; text-align:center; }
    .accred-cta-actions .action-link{ justify-content:center; }

    /* homepage accreditation — mobile: search -> status -> doc, compact head, no overflow.
       ЭТАП 12.5: the tablet breakpoint's .hpacc .accred-layout rule (higher specificity
       than the plain .accred-layout edited above) still matches at mobile widths too, so
       its own grid-template-areas needs the same reorder here to actually take effect. */
    .hpacc.accred-section{ padding:52px 0 56px 0; }
    .hpacc .accred-head{ margin-bottom:22px; }
    .hpacc .accred-layout{
      grid-template-areas:
        "search"
        "status"
        "doc";
    }
    .hpacc .search-module{ padding:22px 20px 20px 20px; }
    .hpacc .search-module h3{ font-size:19px; }
    /* ЭТАП 12.5: the homepage's own desktop button rule (padding:0 30px, see the
       .hpacc .search-form button rule above) is more specific than the generic
       mobile ".search-form button{ padding:13px 20px }" fix used by every other
       search-module on the site, so on mobile it was winning and leaving the
       homepage's "Найти" button only ~17px tall — a real, homepage-only touch
       target bug. Restore the same comfortable mobile padding here, scoped to
       .hpacc so the other search pages (already fine) are untouched. */
    .hpacc .search-form button{ padding:13px 20px; }
    .hpacc .status-panel{ padding:22px; }
    /* ЭТАП 11: mobile isn't being reworked this stage — keep the accent bar
       at its original 40x2 size here, the desktop-only bump lives above. */
    .hpacc .status-panel::before{ left:22px; width:40px; height:2px; }
    .hpacc .status-number{ font-size:24px; white-space:normal; }
    .hpacc .doc-list-panel{ padding:18px 20px 4px 20px; }
    /* the merged accreditation-scope link text ("Открыть область аккредитации")
       is longer than the old two-line "Открыть PDF" labels; same no-overflow
       fix already used above for .status-number — allow it to wrap instead of
       forcing single-line width past the container. */
    .hpacc .doc-row{ flex-wrap:wrap; }
    .hpacc .doc-row-link{ white-space:normal; flex-basis:100%; margin-top:6px; padding-left:31px; }

    /* lab section — mobile: heading -> main photo -> LAB-02 -> LAB-03 -> LAB-04 -> links.
       ЭТАП 12.6: the "list" and "links" grid-areas below were never matched by any real
       element (.lab-links is a sibling of .lab-layout, not a grid child) — each still ate
       its own row + row-gap, quietly doubling the gap after the main photo (56px instead
       of 28px) and adding a phantom 28px gap before the closing "О лаборатории" link. Down
       to the 4 real areas, so the gap value now means what it looks like. */
    .lab-section{ padding:52px 0 56px 0; }
    .lab-head{ margin-bottom:24px; }
    .lab-head-right p{ font-size:15px; }

    .lab-layout{
      grid-template-columns:1fr;
      grid-template-areas:
        "main"
        "tri2"
        "tri3"
        "tri4";
      gap:28px;
    }
    .lab-main .lab-photo{ aspect-ratio:4/3; }
    .lab-tri2 .lab-photo,
    .lab-tri3 .lab-photo,
    .lab-tri4 .lab-photo{ aspect-ratio:16/9; max-height:190px; }

    .lab-links{ justify-content:flex-start; }

    /* process section — mobile: vertical sequence, connector line on the left */
    .process-section{ padding:48px 0 52px 0; }
    .process-head{ margin-bottom:28px; }

    .steps-row{
      grid-template-columns:1fr;
      row-gap:0;
      border-top:none;
      border-left:1px solid var(--border);
      padding-left:20px;
    }
    .step{
      padding-top:0;
      padding-bottom:22px;
    }
    .step:last-child{ padding-bottom:0; }
    .step::before{
      top:2px; left:-21px;
      width:12px; height:2px;
    }
    .step h3{ font-size:15px; }
    .step p{ font-size:12.5px; }

    /* conversion section — mobile: eyebrow -> H2 -> supporting -> contacts -> form -> privacy */
    .conversion-section{ padding:52px 0 56px 0; }
    .conversion-layout{ grid-template-columns:1fr; gap:32px; }
    .conversion-context .conv-sub{ font-size:15px; margin:14px 0 28px 0; }
    .conv-contact-row .cc-value{ font-size:14px; }

    .form-card{ padding:24px 20px; }
    .form-row{ grid-template-columns:1fr; gap:0; }
    .file-row{ flex-wrap:wrap; }
    /* ЭТАП 12.7: the desktop .file-hint keeps white-space:nowrap (it sits on one
       inline row next to the file label there); on mobile that same nowrap forced
       the hint's own single-line min-content width on the whole conversion-layout
       grid track, which is what caused the long-standing few-px horizontal
       overflow on the homepage at 360px. Letting it wrap removes the overflow
       without changing the visible text or the desktop layout. */
    .file-row .file-hint{ margin-left:0; width:100%; white-space:normal; }

    /* footer — mobile: single column */
    .site-footer{ padding:48px 0 0 0; }
    .footer-grid{ grid-template-columns:1fr; gap:32px; padding-bottom:36px; }
    .footer-bottom{ flex-direction:column; align-items:flex-start; gap:14px; }
    .footer-bottom nav ul{ flex-wrap:wrap; gap:16px; }
  }


/* ============================================================
   RESEARCH DIRECTION PAGE TEMPLATE STYLES (from v2 pages, shared)
   ============================================================ */
/* ---------- RESEARCH DIRECTION PAGE — compact production template ---------- */
  .breadcrumbs{ padding:18px 0; font-size:13px; color:var(--muted); }
  .breadcrumbs a{ color:var(--muted); text-decoration:none; }
  .breadcrumbs a:hover{ color:var(--navy); }
  .breadcrumbs .bc-sep{ margin:0 6px; color:var(--border); }
  .breadcrumbs .bc-current{ color:var(--navy-deep); font-weight:600; }

  .page-hero{
    background:#F5F8FA;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:40px 0 36px 0;
  }
  .page-hero .eyebrow{ margin-bottom:12px; }
  .page-hero h1{
    font-family:var(--font-display);
    font-weight:700;
    font-size:34px;
    line-height:1.18;
    color:var(--navy-deep);
    margin:0 0 14px 0;
    max-width:760px;
    letter-spacing:-0.01em;
  }
  .page-hero .ph-sub{
    font-size:16px;
    line-height:1.55;
    color:var(--muted);
    max-width:640px;
    margin:0 0 24px 0;
  }
  .page-hero .cta-row{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }

  .rp-section{ padding:44px 0; border-bottom:1px solid var(--border); }
  .rp-section:last-of-type{ border-bottom:none; }
  .rp-section h2{
    font-family:var(--font-display);
    font-weight:700;
    font-size:22px;
    color:var(--navy-deep);
    margin:0 0 8px 0;
  }
  .rp-section .rp-sub{ font-size:14.5px; color:var(--muted); margin:0 0 24px 0; max-width:640px; }

  .rp-object-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
  .rp-object-item{ border:1px solid var(--border); border-radius:6px; padding:16px 18px; font-size:14px; font-weight:600; color:var(--navy-deep); }

  .rp-indicator-list{ border-top:1px solid var(--border); }
  .rp-indicator-row{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); font-size:14px; }
  .rp-indicator-row .ir-name{ color:var(--navy-deep); font-weight:600; }
  .rp-indicator-row .ir-obj{ color:var(--muted); font-size:13px; text-align:right; flex:none; }
  .rp-full-link{ margin-top:20px; }
  .rp-full-link a{ display:inline-flex; align-items:center; gap:6px; font-size:14.5px; font-weight:600; color:var(--navy); text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:1px; }
  .rp-full-link a:hover{ color:var(--accent-strong); border-color:var(--accent-strong); }

  .rp-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; list-style:none; padding:0; margin:0; }
  .rp-step{ border-top:2px solid var(--accent); padding-top:14px; }
  .rp-step .s-num{ font-family:var(--font-mono); font-size:12px; color:var(--accent-strong); display:block; margin-bottom:6px; }
  .rp-step .s-title{ font-size:14px; font-weight:600; color:var(--navy-deep); line-height:1.4; }

  .rp-result-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .rp-result-item{ border:1px solid var(--border); border-radius:6px; padding:18px; }
  .rp-result-item .ri-name{ font-size:14.5px; font-weight:700; color:var(--navy-deep); margin-bottom:6px; }
  .rp-result-item .ri-desc{ font-size:13px; color:var(--muted); line-height:1.5; }

  .rp-closing{ background:var(--navy-deep); padding:48px 0; }
  .rp-closing .container{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
  .rp-closing h2{ font-family:var(--font-display); font-weight:700; font-size:22px; color:#fff; margin:0 0 6px 0; }
  .rp-closing p{ font-size:14.5px; color:#C7D1D8; margin:0; max-width:480px; }
  .rp-closing .btn-primary{ flex:none; }

  @media (max-width:1024px){
    .rp-object-grid{ grid-template-columns:repeat(2,1fr); }
    .rp-result-grid{ grid-template-columns:1fr 1fr; }
    .rp-steps{ grid-template-columns:repeat(3,1fr); row-gap:24px; }
    .page-hero h1{ font-size:29px; }
  }
  @media (max-width:600px){
    .page-hero{ padding:28px 0 24px 0; }
    .page-hero h1{ font-size:25px; }
    .page-hero .cta-row{ flex-direction:column; align-items:stretch; }
    .rp-section{ padding:32px 0; }
    .rp-object-grid{ grid-template-columns:1fr; }
    .rp-result-grid{ grid-template-columns:1fr; }
    .rp-steps{ grid-template-columns:1fr 1fr; }
    .rp-indicator-row{ flex-direction:column; gap:2px; }
    .rp-indicator-row .ir-obj{ text-align:left; }
    .rp-closing .container{ flex-direction:column; align-items:flex-start; }
    .rp-closing .btn-primary{ width:100%; text-align:center; }
    .breadcrumbs{ font-size:12px; }
  }

  /* ============================================================
     AIR REFERENCE PAGE — "Атмосферный воздух" (#/research/air/)
     New page-specific classes (ar-*, ph-accred-confirm) — none of these
     names are used anywhere else in the stylesheet/markup, so these
     rules cannot affect the homepage, /accreditation/, or other
     research direction pages.
     ============================================================ */

  /* ---- hero: quiet accreditation confirmation line (replaces the CTA row) ---- */
  .ph-accred-confirm{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-mono);
    font-size:12.5px;
    color:var(--muted);
  }
  .ph-accred-confirm .dot{
    width:6px; height:6px;
    border-radius:50%;
    background:var(--accent);
    flex:none;
  }
  .ph-accred-confirm b{ color:var(--navy-deep); font-weight:600; }

  /* ---- hero: no local photo exists for this direction — collapse the
     split grid to a single text column instead of a placeholder/broken image.
     Scoped to .ar-hero-noimage only (added solely on tpl-air's hero section),
     so .page-hero--split itself stays untouched for every other page. ---- */
  .ar-hero-noimage .page-hero-grid{
    grid-template-columns:1fr;
  }
  .ar-hero-noimage .page-hero-copy{
    max-width:640px;
    padding:10px 0 0;
  }
  @media (max-width:1024px){
    .ar-hero-noimage .page-hero-grid{ grid-template-columns:1fr; }
  }

  /* ---- practical tasks: numbered list, not identical cards ---- */
  .ar-tasks{
    list-style:none;
    margin:0;
    padding:0;
    border-top:1px solid var(--border);
    max-width:760px;
  }
  .ar-task{
    display:flex;
    align-items:baseline;
    gap:20px;
    padding:16px 0;
    border-bottom:1px solid var(--border);
  }
  .ar-task-num{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--accent-strong);
    flex:none;
    width:22px;
  }
  .ar-task p{
    font-size:14.5px;
    color:var(--text);
    line-height:1.5;
    margin:0;
  }

  /* ---- search block: the page's primary functional tool ---- */
  .ar-search-head{ margin-bottom:20px; max-width:640px; }
  .ar-search-head h2{ margin-bottom:8px; }
  .ar-search-form{ display:flex; gap:12px; margin-bottom:16px; max-width:640px; }
  .ar-search-form input[type="text"]{
    flex:1;
    font-family:var(--font-body);
    font-size:15px;
    color:var(--text);
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:4px;
    padding:13px 16px;
  }
  .ar-search-form input[type="text"]::placeholder{ color:#8B97A1; }
  .ar-search-form input[type="text"]:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:1px;
    border-color:var(--accent);
  }
  .ar-search-form button{
    font-family:var(--font-body);
    font-weight:600;
    font-size:15px;
    background:var(--navy);
    color:#fff;
    border:none;
    border-radius:4px;
    padding:0 26px;
    cursor:pointer;
    transition:background .15s ease;
  }
  .ar-search-form button:hover{ background:var(--navy-deep); }
  .ar-search-form button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  .ar-count{
    display:block;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.04em;
    color:var(--accent-strong);
    margin-bottom:14px;
  }

  .ar-results-head{
    display:grid;
    grid-template-columns:minmax(0,27%) minmax(0,22%) minmax(0,33%) minmax(0,18%);
    gap:12px;
    padding:0 4px 10px 4px;
    border-bottom:1px solid var(--border);
  }
  .ar-results-head[hidden]{ display:none; }
  .ar-results-head span{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--muted);
  }

  .ar-row{
    display:grid;
    grid-template-columns:minmax(0,27%) minmax(0,22%) minmax(0,33%) minmax(0,18%);
    gap:12px;
    padding:14px 4px;
    border-bottom:1px solid var(--border);
    align-items:start;
  }
  .ar-cell{ min-width:0; }
  .ar-cell .ar-label{ display:none; }
  .ar-cell .ar-value{
    display:block;
    font-size:13.5px;
    color:var(--muted);
    line-height:1.45;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .ar-cell--indicator .ar-value{
    font-size:14.5px;
    font-weight:600;
    color:var(--navy-deep);
  }

  .ar-state{
    border:1px solid var(--border);
    border-radius:6px;
    padding:14px 16px;
    background:var(--bg);
    margin-top:4px;
    font-size:13px;
    color:var(--muted);
  }
  /* Generic selector (id ends with "-load-more") so this covers every
     direction page's load-more button (air/emissions/water/soil/waste/…)
     from one place instead of duplicating the rule per id. Declarations
     are unchanged from the original #air-load-more-only rule, so Air's
     appearance/behavior is identical — this only extends the same rule
     to the other pages, which were missing the [hidden] override (the
     shared .btn{display:inline-flex} rule otherwise beats the browser's
     default [hidden] styling, leaving the button visibly stuck open). */
  [id$="-load-more"]{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:16px;
    font-family:var(--font-body);
    font-weight:600;
    font-size:14px;
    color:var(--navy);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:6px;
    padding:10px 20px;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  [id$="-load-more"][hidden]{ display:none; }
  [id$="-load-more"]:hover{ border-color:var(--accent); background:var(--bg); }
  [id$="-load-more"]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  /* ---- "Что получает заказчик" — restored, compact B2B layout (not
     the shared .rp-result-grid card system used elsewhere): strict
     columns with thin dividers, no borders/shadows/icons, collapses
     to stacked rows on mobile. ---- */
  .ar-deliverables{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    border-top:1px solid var(--border);
    margin-top:4px;
  }
  .ar-deliverable{
    padding:18px 24px 18px 0;
    margin-left:24px;
    border-left:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  .ar-deliverable:first-child{
    margin-left:0;
    padding-left:0;
    border-left:none;
  }
  .ar-deliverable-name{
    font-family:var(--font-body);
    font-weight:600;
    font-size:14.5px;
    color:var(--navy-deep);
    margin-bottom:6px;
  }
  .ar-deliverable-desc{
    font-size:13.5px;
    color:var(--muted);
    line-height:1.5;
  }

  @media (max-width:600px){
    .ar-search-form{ flex-direction:column; gap:10px; }
    .ar-search-form button{ padding:13px 20px; }
    .ar-results-head{ display:none; }
    .ar-row{
      display:flex;
      flex-direction:column;
      gap:6px;
      padding:14px 4px;
    }
    .ar-cell .ar-label{
      display:inline-block;
      font-family:var(--font-mono);
      font-size:10.5px;
      color:var(--muted);
      letter-spacing:.03em;
      margin-right:6px;
    }
    .ar-task{ gap:14px; }
    .ar-deliverables{ grid-template-columns:1fr; }
    .ar-deliverable{
      margin-left:0;
      padding:14px 0;
      border-left:none;
    }
    .ar-deliverable:first-child{ padding-top:0; }
  }

  /* ============================================================
     ABOUT PAGE — "О лаборатории" (#/about/)
     New page-specific classes (ab-*) — none of these names are used
     anywhere else in the stylesheet/markup, so these rules cannot
     affect the homepage, research pages, or /accreditation/.
     ============================================================ */

  /* ---- hero: compact, text-only (image removed; single-column via
     .ar-hero-noimage, the same class used by tpl-air's imageless hero). ---- */
  .ab-hero.page-hero--split{ padding:40px 0; }

  /* ЭТАП 16 — first screen rebalance: the "С 2001 года" fact badge now sits
     as its own item in .page-hero-grid (see index.html), to the right of the
     intro text, instead of stacking underneath it inside .page-hero-copy.
     Scoped to .ab-hero.ar-hero-noimage specifically (higher specificity than
     the shared .ar-hero-noimage .page-hero-grid{ grid-template-columns:1fr }
     rule above, which many other pages — research subpages, news posts —
     also rely on and must keep exactly as-is). No photo is added: the right
     "column" is sized to the badge's own content (auto), not a media frame,
     so it reads as a compact accent, not an empty image slot. Collapses back
     to a single stacked column on mobile, same breakpoint the shared
     .page-hero--split grid already uses elsewhere, so nothing overflows
     horizontally. ---- */
  .ab-hero.ar-hero-noimage .page-hero-grid{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:40px;
  }
  /* ЭТАП 16.1: min-width keeps the badge a genuine right-side composition
     element (~280-320px) instead of shrinking to just fit its text. */
  .ab-hero .ab-fact-badge{
    margin-bottom:0;
    min-width:300px;
  }
  @media (max-width:760px){
    .ab-hero.ar-hero-noimage .page-hero-grid{
      grid-template-columns:1fr;
      gap:20px;
    }
    .ab-hero .ab-fact-badge{
      align-self:flex-start;
      min-width:0;
      width:100%;
    }
  }

  /* ---- "Коллектив лаборатории" / "Рабочие будни" — two real photos
     side by side, square corners, no shadow, minimal factual captions.
     Shared by both photo sections on this page (each has exactly 2
     photos), so .ab-photos is a plain 2-up grid, not a "1 main + N
     supporting" layout. ---- */
  .ab-photos-section{ background:var(--surface); }
  .ab-photos{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  .ab-photo{ margin:0; border:1px solid var(--border); overflow:hidden; background:var(--bg); aspect-ratio:4/3; }
  .ab-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .ab-photo figcaption{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--muted);
    padding:10px 12px;
    border-top:1px solid var(--border);
  }

  /* ---- "Сотрудники лаборатории" — real staff (name + position),
     lab department only. Photo cards, no shadow. ---- */
  .ab-specialists-section{ background:var(--surface); }
  .ab-staff-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px;
  }
  .ab-staff-card{ background:var(--surface); border:1px solid var(--border); overflow:hidden; }
  .asc-photo{ aspect-ratio:3/4; overflow:hidden; background:var(--bg); border-bottom:1px solid var(--border); }
  .asc-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .asc-info{ padding:11px 13px 13px; }
  .asc-role{
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:.03em;
    color:var(--muted);
    margin-bottom:5px;
  }
  .asc-name{ font-size:13px; font-weight:600; color:var(--navy-deep); line-height:1.3; }

  /* ---- corporate placeholder for a staff member without a photo yet
     (BITRIX CONTENT stage) — same .asc-photo box/aspect-ratio as a real
     photo, so the card never changes size or breaks the grid; just centers
     the person's own initials (derived from their NAME field) on the
     existing neutral --bg tone instead of an image. No stock photo. ---- */
  .asc-photo--empty{ display:flex; align-items:center; justify-content:center; }
  .asc-initials{ font-family:var(--font-mono); font-size:26px; font-weight:600; color:var(--muted); letter-spacing:.03em; }

  /* ---- "Лаборатория в работе" — Bitrix-managed materials (photo + title +
     caption), same flat card language as .ab-staff-card just above (no
     shadow, no gradient, 1px border, white --surface fill). Editorial/
     case-study layout, "2 + 2 + 1": a 2-column grid, and — only when the
     admin panel currently holds an ODD number of materials — the last card
     spans the full row width and switches to a horizontal feature layout
     (photo left, text right) instead of sitting alone as a half-width tile.
     This layout itself is done purely with :last-child:nth-child(odd) on the
     existing .ab-labwork-card/.alw-photo/.alw-info markup (no Bitrix element
     ID needed for the layout mechanism itself) — add a 6th material later
     and this selector simply stops matching, every card goes back to being
     an equal 2-up tile, no special-casing required. (Separately, the
     per-photo focal-point overrides just below DO key off each element's
     Bitrix XML_ID via a small about/index.php addition — see that block's
     own comment.) ---- */
  .ab-labwork-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
  }
  .ab-labwork-card{ background:var(--surface); border:1px solid var(--border); overflow:hidden; }
  .alw-photo{ height:280px; width:100%; overflow:hidden; background:var(--bg); border-bottom:1px solid var(--border); }
  .alw-photo img{ width:100%; height:100%; object-fit:cover; display:block; object-position:50% 50%; }
  .alw-info{ padding:20px; }
  .alw-title{ font-size:17px; font-weight:600; color:var(--navy-deep); margin-bottom:8px; }
  .alw-caption{ font-size:14px; line-height:1.5; color:var(--muted); margin:0; }

  /* ---- individual focal points, per real source photo (checked visually
     against the actual files in assets/images/lab-work/, not guessed) —
     keyed to each Bitrix element's own XML_ID via the alw--* modifier
     class from about/index.php's cei_lw_modifier_class(), never to grid
     position, so re-sorting materials in the admin panel can't silently
     misassign a crop to the wrong photo. Add a new material later with no
     matching XML_ID and it just gets the default 50% 50% above — no
     special-casing required. ---- */
  .alw--processing .alw-photo img{ object-position:50% 35%; } /* "Обработка результатов…" — раньше обрезался верх (голова + прибор); поднято выше центра, чтобы оба были видны. */
  .alw--office .alw-photo img{ object-position:50% 50%; } /* "Рабочий процесс в офисе" — исходное фото почти совпадает по пропорциям с карточкой (908×690 ≈ 4/3), центрирование и так выглядит нормально. */
  .alw--noise .alw-photo img{ object-position:50% 15%; } /* "Замеры шума" — голова сотрудника у самого верха кадра (486×645, портрет); сильно поднято, чтобы голова и микрофон на штативе не обрезались. */
  .alw--soil .alw-photo img{ object-position:50% 50%; } /* "Отбор почвы" — перепроверено по сетке пикселей на реальном фото (675×1200): при 35% в кадр всё ещё попадала верхняя треть с лесом/небом, а лопата не доставала до земли; при 50% в кадре — оба сотрудника (силуэты/позы), руки, инструмент и сам момент, когда лопата уже в грунте — то есть сам процесс отбора. Проверены также 55/60/65% — на них рука с ручкой и блокнотом обрезается снизу, поэтому они хуже передают процесс, чем 50%. */

  /* Note: a 5th material, "Семинар" (XML_ID cei-lab-work-seminar, a 2×2
     photo collage that used object-fit:contain instead of cover), was
     removed by the client directly in the Bitrix admin panel — confirmed
     to stay removed. Its .alw--seminar rule is deliberately not kept here;
     re-adding the same content later would need a fresh rule of its own. */

  /* ---- feature card (last item, odd count only) — horizontal on desktop:
     photo ~58%, text ~42%, vertically centered. Grid stretch (default
     align-items on .ab-labwork-grid) already keeps every normal card in a
     row equal height, and a longer caption here just makes this one row
     taller rather than truncating anything. ---- */
  .ab-labwork-card:last-child:nth-child(odd){
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(0, 58%) minmax(0, 42%);
  }
  .ab-labwork-card:last-child:nth-child(odd) .alw-photo{
    aspect-ratio:unset;
    height:clamp(300px, 24vw, 340px);
    border-bottom:none;
    border-right:1px solid var(--border);
  }
  .ab-labwork-card:last-child:nth-child(odd) .alw-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  /* ---- "Отзывы клиентов" — real review cards + a Yandex Maps panel
     (live map with a placemark at the lab's real address, linking out
     to the lab's real Yandex Maps listing as an additional review channel).
     Visitors can also submit a review directly on this page via the
     "Оставить отзыв" modal (see .review-modal-* further down this file,
     js/review-form.js, send-review.php) — those go to the operator by
     email for moderation and are never auto-published into this grid. ---- */
  .ab-reviews-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    margin-bottom:16px;
  }
  .ab-review-card{
    margin:0;
    border:1px solid var(--border);
    background:var(--surface);
    padding:20px 22px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .ab-review-card blockquote{
    margin:0;
    font-size:13.5px;
    line-height:1.6;
    color:var(--text);
  }
  .ab-review-card figcaption{ display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--border); padding-top:12px; }
  .arc-name{ font-size:13.5px; font-weight:600; color:var(--navy-deep); }
  .arc-role{ font-family:var(--font-mono); font-size:11px; color:var(--muted); }

  .ab-map-panel{
    display:grid;
    grid-template-columns:1fr 1fr;
    border:1px solid var(--border);
    overflow:hidden;
  }
  .ab-map-frame{ aspect-ratio:4/3; background:var(--bg); }
  .ab-map-frame iframe{ width:100%; height:100%; display:block; border:0; }
  .ab-map-info{ padding:28px 30px; display:flex; flex-direction:column; justify-content:center; gap:10px; background:var(--surface); }
  .ami-eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
  .ami-address{ font-size:15px; font-weight:600; color:var(--navy-deep); }
  .ami-text{ font-size:13.5px; line-height:1.6; color:var(--muted); margin:0 0 6px 0; max-width:420px; }

  @media (max-width:1024px){
    .ab-staff-grid{ grid-template-columns:repeat(3, 1fr); }
    /* .ab-labwork-grid stays at its base 2-column layout down to the
       760px mobile breakpoint below — no separate tablet override needed.
       The feature card itself does change here: at tablet width, 58/42
       horizontal splits the text column too tight to read comfortably, so
       it drops back to the same vertical layout as every other card —
       still full-width (grid-column:1/-1 above still applies), just
       stacked instead of side-by-side. */
    .alw-photo{ height:clamp(220px, 28vw, 260px); }
    .ab-labwork-card:last-child:nth-child(odd){
      display:block;
    }
    .ab-labwork-card:last-child:nth-child(odd) .alw-photo{
      height:300px;
      border-bottom:1px solid var(--border);
      border-right:none;
    }
    .ab-labwork-card:last-child:nth-child(odd) .alw-info{
      display:block;
    }
    .ab-reviews-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:760px){
    .ab-photos{ grid-template-columns:1fr; }
    .ab-staff-grid{ grid-template-columns:repeat(2, 1fr); }
    .ab-labwork-grid{ grid-template-columns:1fr; gap:18px; }
    .alw-photo{ aspect-ratio:4/3; height:auto; }
    .ab-labwork-card:last-child:nth-child(odd) .alw-photo{
      aspect-ratio:4/3;
      height:auto;
    }
    .ab-reviews-grid{ grid-template-columns:1fr; }
    .ab-map-panel{ grid-template-columns:1fr; }
    .ab-map-frame{ aspect-ratio:16/10; }
  }

  /* ============================================================
     NEWS — "Новости" (#/news/) list + article pages.
     New page-specific classes (news-*) only. Card grid (matching the
     reference layout) — but no image slot: the source has no
     per-article photos (checked directly on each article page), so a
     card is date + title only, not a media card with a fabricated
     placeholder. Reuses the global .filter-row/.filter-btn tabs and
     .legal-text prose block. ---- */
  .news-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
  }
  .news-card{
    display:flex;
    flex-direction:column;
    gap:14px;
    border:1px solid var(--border);
    background:var(--surface);
    padding:22px 24px;
    text-decoration:none;
    color:inherit;
  }
  .news-card[hidden]{ display:none; } /* year filter (js/news-filter.js) toggles [hidden]; the class above sets display:flex which would otherwise win over the UA [hidden] rule */
  .news-date{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--muted);
  }
  .news-title{
    font-size:15px;
    font-weight:600;
    color:var(--navy-deep);
    line-height:1.45;
    margin:0;
    flex:1;
  }
  .news-card:hover .news-title{ color:var(--navy); text-decoration:underline; }
  .news-action{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--accent);
    white-space:nowrap;
  }
  .news-action .arrow{ display:inline-block; transition:transform .15s; }
  .news-card:hover .news-action .arrow{ transform:translateX(3px); }
  .news-empty{ padding:20px 0; color:var(--muted); font-size:14px; }
  @media (max-width:1024px){
    .news-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:760px){
    .news-grid{ grid-template-columns:1fr; }
  }

  /* ============================================================
     ACCREDITATION PAGE — "Аккредитация" (#/accreditation/)
     New page-specific classes (acp-*) only. The standalone page no
     longer uses .accred-head / .work-grid / .accred-layout /
     .status-panel / .doc-list-panel / .accred-cta-row / .facts-row —
     those bare rules (and their .hpacc overrides used by the homepage
     accreditation section) are left completely untouched. The search
     module keeps its original ids/classes (#accred-*, .search-module,
     .search-form, .filter-row, .filter-btn, .result-head, .state-chip)
     unchanged so js/accreditation-search.js keeps working verbatim.
     ============================================================ */
  .acp-hero .page-hero-grid{ align-items:stretch; }

  /* ---- hero proof block: dark, compact, RA.RU number + GOST visible
     above the fold. Deliberately not a copy of .status-panel/.proof-block —
     same visual language (navy-deep, mono id), new component. This is
     the page's one navy block. ---- */
  .acp-proof{
    background:var(--navy-deep);
    border-radius:6px;
    padding:30px 30px 26px 30px;
    color:#E7ECEF;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:14px;
  }
  .acp-proof-status{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#7FA7B3;
  }
  .acp-proof-status .dot{
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent);
    flex:none;
  }
  .acp-proof-number{
    font-family:var(--font-mono);
    font-weight:600;
    font-size:26px;
    color:#fff;
    letter-spacing:.01em;
  }
  .acp-proof-org{
    font-size:13.5px;
    line-height:1.5;
    color:#C7D1D8;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,0.12);
  }
  .acp-proof-standard{
    font-family:var(--font-mono);
    font-size:12.5px;
    color:#A9B7C0;
  }

  @media (max-width:1024px){
    .acp-proof{ padding:26px 26px 22px 26px; }
    .acp-proof-number{ font-size:23px; }
  }
  @media (max-width:760px){
    .acp-proof{ padding:22px; gap:12px; }
  }
  @media (max-width:600px){
    .acp-proof-number{ font-size:21px; word-break:break-word; }
  }

  /* ============================================================
     CONTACTS PAGE — "Контакты" (#/contacts/)
     New page-specific classes (ctc-*, cts-*) only. Nothing here is
     used elsewhere in the stylesheet/markup, so these rules cannot
     affect any other page.
     ============================================================ */
  .ctc-hero{ padding:36px 0 32px 0; }
  .ctc-hero .ph-sub{ margin:0; max-width:620px; }

  .ctc-main{ background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:44px 0; }
  .ctc-grid{
    display:grid;
    grid-template-columns:minmax(0,.45fr) minmax(0,.55fr);
    gap:40px;
    align-items:stretch;
  }

  .ctc-contacts h2{
    font-family:var(--font-display);
    font-weight:700;
    font-size:20px;
    color:var(--navy-deep);
    margin:0 0 18px 0;
  }
  .ctc-list{ border-top:1px solid var(--border); }
  .ctc-item{ padding:16px 0; border-bottom:1px solid var(--border); }
  .ctc-item .ctc-label{
    display:block;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--accent-strong);
    margin-bottom:6px;
  }
  .ctc-item .ctc-value{
    display:block;
    font-size:16px;
    font-weight:600;
    color:var(--navy-deep);
    text-decoration:none;
    line-height:1.4;
    overflow-wrap:anywhere;
  }
  a.ctc-value:hover{ color:var(--accent-strong); }
  a.ctc-value:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  span.ctc-value{ font-weight:500; font-size:14.5px; color:var(--muted); }

  .ctc-cta{
    background:var(--navy-deep);
    border-radius:6px;
    padding:36px 36px 32px 36px;
    color:#E7ECEF;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:14px;
  }
  .ctc-cta h2{
    font-family:var(--font-display);
    font-weight:700;
    font-size:22px;
    color:#fff;
    margin:0;
  }
  .ctc-cta p{
    font-size:14.5px;
    line-height:1.55;
    color:#C7D1D8;
    margin:0 0 6px 0;
    max-width:440px;
  }
  .ctc-cta .btn-primary{ align-self:flex-start; }
  .ctc-cta .action-link{
    color:#6FCBDD;
    border-bottom-color:rgba(111,203,221,.4);
    align-self:flex-start;
  }
  .ctc-cta .action-link:hover{ color:#9BDCE9; border-color:#9BDCE9; }

  @media (max-width:1024px){
    .ctc-grid{ gap:28px; }
    .ctc-cta{ padding:30px; }
  }
  @media (max-width:760px){
    .ctc-grid{ grid-template-columns:1fr; gap:24px; }
    .ctc-main{ padding:32px 0; }
    .ctc-cta .btn-primary{ width:100%; text-align:center; }
  }
  @media (max-width:600px){
    .ctc-hero{ padding:26px 0 22px 0; }
    .ctc-item .ctc-value{ font-size:15px; }
  }

  /* ============================================================
     AIR PAGE v3/v4 — simplified + homepage-search parity
     (#/research/air/)
     New page-specific classes (at-*, ad-*, airp-docs*) only.
     Hero reuses the exact same shared .page-hero--split
     .ar-hero-noimage single-column pattern already used by
     Emissions/Water/Soil/Waste/Morphometry/Background — no
     page-specific hero CSS needed any more. The search RESULTS
     (#air-results, .ar-row/.ar-cell) are rendered by the unmodified
     shared js/direction-search.js factory and use its base styling
     untouched. Removed entirely in the v3 pass: the hero evidence
     field + divider, the "Компетентность лаборатории" proof block,
     and the "Как проходит работа" workflow block — not replaced by
     any new card/proof-block/decorative field.

     v4 note: the bare .search-module already matches the STANDALONE
     /accreditation/ page (which also uses it unscoped), but the
     homepage's own search box is visually a step up from that bare
     component — it carries its own .hpacc-scoped enhancement (bigger
     heading/padding, 4px radius, larger input). To make Air match
     what's actually visible on the homepage (not just the shared
     base component), the block below duplicates those exact .hpacc
     declarations, scoped to .airp-search-section instead of .hpacc —
     so the standalone Accreditation page, which still uses only the
     bare component, is completely unaffected. ---- */

  /* ---- practical tasks: unchanged block, kept as-is ---- */
  .airp-tasks-section{ background:var(--surface); }
  .airp-tasks{
    list-style:none;
    margin:0;
    padding-top:24px;
    border-top:1px solid var(--border);
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    column-gap:56px;
  }
  .airp-task{ display:flex; align-items:baseline; gap:20px; padding:20px 0; border-top:1px solid var(--border); }
  .airp-task:nth-child(1), .airp-task:nth-child(2){ border-top:none; padding-top:0; }
  .airp-task .at-num{ font-family:var(--font-mono); font-size:13px; color:var(--accent-strong); flex:none; width:24px; }
  .airp-task p{ font-size:15px; color:var(--text); line-height:1.55; margin:0; }

  /* ---- search section: same light band as the homepage's
     accreditation section (.accred-section{background:var(--bg)}) ---- */
  .airp-search-section{ background:var(--bg); }
  .airp-search-section .search-module{
    padding:38px 38px 34px 38px;
    border-radius:4px;
    max-width:760px;
  }
  .airp-search-section .search-module h2{
    font-size:24px;
    letter-spacing:-0.01em;
    margin-bottom:10px;
  }
  .airp-search-section .search-module .hint{
    font-size:14px;
    margin-bottom:26px;
  }
  .airp-search-section .search-form input[type="text"]{
    padding:15px 18px;
    border-radius:4px;
    border-color:#C9D3D9;
    font-size:15.5px;
  }
  .airp-search-section .search-form button{
    border-radius:4px;
    padding:0 30px;
  }
  .airp-search-section .demo-flag{
    background:none;
    padding:0;
    border-radius:0;
    font-size:11px;
    letter-spacing:.04em;
    color:var(--accent-strong);
  }

  /* ---- documents — compact placeholder grid for 4 future
     documents. Plain technical table-like rows: no icons, no cards,
     no shadows, no numbering. 2x2 on desktop, single column on
     mobile. Content is intentionally a neutral placeholder — replace
     the .airp-doc-name/.airp-doc-tag content later with the real
     document title / type / link, the row structure is built to
     take that without further layout changes. ---- */
  .airp-docs-section{ background:var(--surface); }
  .airp-docs{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    border-top:1px solid var(--border);
    border-left:1px solid var(--border);
  }
  .airp-doc-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 20px;
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  .airp-doc-name{ font-size:14px; color:var(--muted); font-style:italic; }
  /* Document rows are real links now (were inert placeholders before) —
     neutralise default <a> styling so the row's appearance is unchanged,
     just clickable. Scoped to a.airp-doc-row only. */
  a.airp-doc-row{ text-decoration:none; color:inherit; cursor:pointer; }
  a.airp-doc-row:hover{ background:var(--bg); }
  a.airp-doc-row:hover .airp-doc-name{ color:var(--accent-strong); }
  .airp-doc-tag{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--accent-strong);
    background:var(--tag-bg);
    padding:4px 8px;
    border-radius:4px;
    flex:none;
  }

  /* ---- "Что получает заказчик" — unchanged ---- */
  .airp-result-section{ background:var(--bg); }
  .airp-deliverables{ display:grid; grid-template-columns:repeat(3, 1fr); }
  .airp-deliverable{ padding:0 28px; }
  .airp-deliverable:first-child{ padding-left:0; }
  .airp-deliverable:last-child{ padding-right:0; }
  .airp-deliverable + .airp-deliverable{ border-left:1px solid var(--border); }
  .airp-deliverable .ad-name{ font-family:var(--font-body); font-weight:700; font-size:16px; color:var(--navy-deep); margin-bottom:8px; }
  .airp-deliverable .ad-desc{ font-size:13px; color:var(--muted); line-height:1.5; }

  /* ---- final CTA — unchanged ---- */
  .rp-closing.airp-closing{ padding:72px 0; }
  .airp-closing-actions{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; flex:none; }
  .airp-closing-actions .action-link{ color:#6FCBDD; border-bottom-color:rgba(111,203,221,.4); }
  .airp-closing-actions .action-link:hover{ color:#9BDCE9; border-color:#9BDCE9; }

  @media (max-width:1024px){
    .airp-search-section .search-module{ padding:30px 30px 28px 30px; }
  }
  @media (max-width:760px){
    .airp-tasks{ grid-template-columns:1fr; column-gap:0; }
    .airp-task{ border-top:1px solid var(--border) !important; padding-top:20px !important; }
    .airp-task:first-child{ border-top:none !important; padding-top:0 !important; }
  }
  @media (max-width:600px){
    .airp-search-section .search-module{ padding:22px 20px 20px 20px; }
    .airp-search-section .search-module h2{ font-size:19px; }
    /* ЭТАП 12.7: this page's own desktop button rule (padding:0 30px, above) is more
       specific than the generic mobile ".search-form button{ padding:13px 20px }" fix,
       so it kept winning here on mobile and left "Найти" only ~17px tall on this page
       (shared verbatim by /research/air/, /water/, /soil/, /waste/, /emissions/). Restore
       the comfortable mobile padding, scoped to this shared search-section class only. */
    .airp-search-section .search-form button{ padding:13px 20px; }
    .airp-task{ gap:14px; }
    .airp-docs{ grid-template-columns:1fr; }
    .airp-doc-row{ padding:16px 4px; }
    .airp-deliverables{ grid-template-columns:1fr; }
    .airp-deliverable{ padding:14px 0; }
    .airp-deliverable:first-child{ padding-top:0; }
    .airp-deliverable + .airp-deliverable{ border-left:none; border-top:1px solid var(--border); }
    .rp-closing.airp-closing{ padding:44px 0; }
    .airp-closing-actions{ width:100%; }
    .airp-closing-actions .btn-primary{ width:100%; text-align:center; }
  }

/* ============================================================
   APP SHELL / ROUTER SPECIFIC
   ============================================================ */
#app-root{ min-height:60vh; }

/* ============================================================
   CONTENT + COMPETENCE ENRICHMENT — shared components
   ============================================================ */
.proof-block{
  border:1px solid var(--border);
  border-radius:6px;
  padding:22px 24px;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin:28px 0;
}
.proof-block .pb-main{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.proof-block .pb-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-strong); margin-bottom:6px; display:block; }
.proof-block .pb-number{ font-family:var(--font-mono); font-weight:600; font-size:17px; color:var(--navy-deep); }
.proof-block .pb-org{ font-size:13px; color:var(--muted); line-height:1.4; margin-top:2px; }
.proof-block .pb-standard{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted); border-left:1px solid var(--border); padding-left:20px; }
.proof-block .pb-sub{ font-size:12.5px; color:var(--muted); max-width:320px; flex:1; min-width:200px; }
.proof-block .pb-cta{ flex:none; font-size:13.5px; font-weight:600; color:var(--navy); text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:1px; white-space:nowrap; }
.proof-block .pb-cta:hover{ color:var(--accent-strong); border-color:var(--accent-strong); }
.proof-block.pb-license{ background:var(--navy-deep); border-color:var(--navy-deep); }
.proof-block.pb-license .pb-label{ color:#7FA7B3; }
.proof-block.pb-license .pb-number{ color:#fff; }
.proof-block.pb-license .pb-org, .proof-block.pb-license .pb-standard, .proof-block.pb-license .pb-sub{ color:#C7D1D8; border-color:rgba(255,255,255,.15); }
.proof-block.pb-license .pb-cta{ color:#6FCBDD; border-color:rgba(111,203,221,.4); }
.proof-block.pb-license .pb-cta:hover{ color:#9BDCE9; border-color:#9BDCE9; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.two-col p{ font-size:14.5px; line-height:1.65; color:var(--muted); margin:0 0 14px 0; }
.two-col p:last-child{ margin-bottom:0; }

.facts-row{ border-top:1px solid var(--border); }
.facts-item{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); font-size:14px; }
.facts-item .fa-name{ color:var(--navy-deep); font-weight:600; max-width:70%; }
.facts-item .fa-meta{ color:var(--muted); font-size:12.5px; text-align:right; flex:none; max-width:35%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.methods-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; }
.methods-item{ font-size:12.5px; color:var(--muted); line-height:1.5; padding:10px 0; border-top:1px solid var(--border); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.work-item{ border:1px solid var(--border); border-radius:6px; padding:18px; }
.work-item .wi-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-strong); margin-bottom:8px; display:block; }
.work-item p{ font-size:13.5px; color:var(--muted); line-height:1.5; margin:0; }

/* ============================================================
   CAPABILITY CATALOG — #/research/ only
   ============================================================ */
.cap-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.cap-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  background:var(--surface);
  transition:border-color .15s ease;
}
.cap-card:hover{ border-color:var(--accent); }
.cap-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.cap-media{
  position:relative;
  aspect-ratio:16/8.5;
  background:
    repeating-linear-gradient(115deg, rgba(11,32,54,0.035) 0px, rgba(11,32,54,0.035) 1px, transparent 1px, transparent 34px),
    linear-gradient(135deg, #F2F5F7 0%, #E9EEF1 100%);
  flex:none;
}
.cap-media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.cap-media::after{
  content:"";
  position:absolute; left:20px; bottom:16px;
  width:22px; height:1px;
  background:var(--accent);
  opacity:.55;
}

/* ---- page-media: single photo zone on individual direction pages (air/emissions/water/soil/waste/morphometry/background) ---- */
.page-media{
  position:relative;
  aspect-ratio:21/8;
  border-radius:6px;
  overflow:hidden;
  background:
    repeating-linear-gradient(115deg, rgba(11,32,54,0.035) 0px, rgba(11,32,54,0.035) 1px, transparent 1px, transparent 34px),
    linear-gradient(135deg, #F2F5F7 0%, #E9EEF1 100%);
}
.page-media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.page-media::after{
  content:"";
  position:absolute; left:24px; bottom:18px;
  width:26px; height:1px;
  background:var(--accent);
  opacity:.55;
}
@media (max-width:1024px){
  .page-media{ aspect-ratio:16/9; }
}
@media (max-width:600px){
  .page-media{ aspect-ratio:4/3; border-radius:4px; }
}

.cap-body{ padding:20px 22px 22px 22px; display:flex; flex-direction:column; flex:1; }
.cap-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.cap-num{ font-family:var(--font-mono); font-size:11.5px; color:var(--accent-strong); letter-spacing:.04em; }
.cap-card .dir-icon{ width:26px; height:26px; color:var(--navy); opacity:.85; flex:none; }
.cap-card:hover .dir-icon{ color:var(--accent-strong); opacity:1; }

.cap-title{ font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--navy-deep); margin:0 0 6px 0; letter-spacing:-0.005em; }
.cap-desc{ font-family:var(--font-body); font-size:14.5px; line-height:1.5; color:var(--muted); margin:0 0 16px 0; }

.cap-field{ padding:11px 0; }
.cap-field .cf-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--accent-strong);
  display:block;
  margin-bottom:6px;
}
.cap-field .cf-value{ font-size:13.5px; line-height:1.55; color:var(--navy-deep); }

/* ОБЪЕКТЫ — compact secondary, inline, muted */
.cap-field--objects{ border-top:1px solid rgba(11,32,54,0.08); padding-top:12px; padding-bottom:10px; }
.cap-field--objects .cf-value{ color:var(--muted); font-size:13px; }

/* ОПРЕДЕЛЯЕМ / ВЫПОЛНЯЕМ — main content, gets the most visual room */
.cap-field--main{ padding-top:4px; padding-bottom:14px; }
.cap-field--main .cf-value{ color:var(--navy-deep); font-size:14px; line-height:1.65; }

/* КОМПЕТЕНЦИЯ / ПРАВОВОЕ ОСНОВАНИЕ / НАЗНАЧЕНИЕ — quiet technical proof-line, not a badge */
.cap-field--proof{ border-top:1px solid rgba(11,32,54,0.08); padding-top:11px; padding-bottom:11px; }
.cap-field--proof .cf-value{ font-size:13px; }
.cap-field--proof .proof-num{ font-family:var(--font-mono); font-weight:600; color:var(--navy-deep); }
.cap-field--proof .proof-sep{ color:var(--border); margin:0 7px; }
.cap-field--proof .proof-std{ color:var(--muted); font-size:12.5px; }

/* РЕЗУЛЬТАТ — compact single-line closer right before CTA */
.cap-field--result{ border-top:1px solid rgba(11,32,54,0.08); padding-top:11px; padding-bottom:0; }
.cap-field--result .cf-value{ color:var(--navy-deep); font-size:13px; font-weight:600; }


.cap-action{
  margin-top:auto;
  padding-top:16px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:600;
  color:var(--navy);
}
.cap-action .arrow{ display:inline-block; transition:transform .15s ease; }
.cap-card:hover .cap-action .arrow{ transform:translateX(3px); }

@media (max-width:1150px){
  .cap-grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .cap-body{ padding:18px 18px 20px 18px; }
  .cap-title{ font-size:19px; }
  .cap-media{ aspect-ratio:16/10; }
}


@media (max-width:1024px){
  .two-col{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns:1fr; }
  .methods-list{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .proof-block{ flex-direction:column; align-items:flex-start; }
  .proof-block .pb-standard{ border-left:none; padding-left:0; border-top:1px solid var(--border); padding-top:10px; }
  .facts-item{ flex-direction:column; gap:2px; }
  .facts-item .fa-meta{ text-align:left; max-width:100%; white-space:normal; }
}


/* Approved direction-page photo crop tuning — v13 */
#page-air .page-media img,
[data-route="research-air"] .page-media img { object-position:50% 50%; }
#page-emissions .page-media img,
[data-route="research-emissions"] .page-media img { object-position:50% 48%; }
#page-water .page-media img,
[data-route="research-water"] .page-media img { object-position:50% 50%; }
#page-soil .page-media img,
[data-route="research-soil"] .page-media img { object-position:50% 58%; }
#page-waste .page-media img,
[data-route="research-waste"] .page-media img { object-position:50% 52%; }
#page-morphometry .page-media img,
[data-route="research-morphometry"] .page-media img { object-position:50% 50%; }
#page-background .page-media img,
[data-route="research-background"] .page-media img { object-position:50% 50%; }


/* ============================================================
   v14 — INDIVIDUAL RESEARCH HERO COMPOSITION
   Editorial B2B split: copy left / documentary photo right.
   Scoped only to individual research direction pages.
   ============================================================ */
.page-hero--split{
  padding:48px 0 52px;
  background:
    linear-gradient(90deg, #F7F9FA 0%, #F7F9FA 49%, #F3F6F8 100%);
}
.page-hero--split .page-hero-grid{
  display:grid;
  grid-template-columns:minmax(0, .88fr) minmax(420px, 1.12fr);
  gap:64px;
  align-items:center;
}
.page-hero--split .page-hero-copy{
  min-width:0;
  padding:10px 0 12px;
}
.page-hero--split h1{
  max-width:570px;
  font-size:38px;
  line-height:1.12;
  margin-bottom:16px;
}
.page-hero--split .ph-sub{
  max-width:560px;
  font-size:15.5px;
  line-height:1.62;
  margin-bottom:26px;
}
.page-hero--split .cta-row{
  gap:18px 24px;
}
/* ---- ab-fact-badge: single key-fact chip in the About hero (experience since 2001).
   ЭТАП 16.1: padding increased slightly (14px 20px -> 20px 26px) so it reads as a
   fuller right-side composition element rather than a small badge; background,
   border, radius and typography (.afb-value/.afb-label below) are unchanged, and
   no icon/figure/gradient was added. The min-width that makes it ~280-320px wide
   on desktop is set on .ab-hero .ab-fact-badge below, scoped to this page only. ---- */
.ab-fact-badge{
  display:inline-flex;
  flex-direction:column;
  gap:2px;
  padding:20px 26px;
  background:var(--tag-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  margin-bottom:8px;
}
.ab-fact-badge .afb-value{
  font-family:var(--font-display);
  font-weight:800;
  font-size:20px;
  line-height:1.2;
  color:var(--accent-strong);
}
.ab-fact-badge .afb-label{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--muted);
}
.page-hero--split .page-media{
  width:100%;
  aspect-ratio:16/10;
  max-height:430px;
  min-height:330px;
  border-radius:5px;
  box-shadow:0 12px 30px rgba(11,32,54,.08);
  background:#E9EEF1;
}
.page-hero--split .page-media::after{
  left:20px;
  bottom:16px;
  width:30px;
  background:rgba(255,255,255,.8);
}
.page-hero--split .page-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Crop tuning: protect subjects instead of stretching the source image. */
.page-hero--split .page-media img[alt="Отбор проб атмосферного воздуха"]{ object-position:50% 50%; }
.page-hero--split .page-media img[alt="Отбор проб промышленных выбросов"]{ object-position:50% 48%; }
.page-hero--split .page-media img[alt="Отбор проб воды"]{ object-position:50% 50%; }
.page-hero--split .page-media img[alt="Полевой отбор пробы почвы"]{ object-position:50% 54%; }
.page-hero--split .page-media img[alt="Работа специалиста с пробой отходов"]{ object-position:50% 50%; }
.page-hero--split .page-media img[alt="Морфометрические наблюдения на водном объекте"]{ object-position:50% 50%; }
.page-hero--split .page-media img[alt="Отбор проб воды для получения фоновых данных"]{ object-position:50% 50%; }

@media (max-width:1024px){
  .page-hero--split{ padding:38px 0 42px; }
  .page-hero--split .page-hero-grid{
    grid-template-columns:minmax(0,.92fr) minmax(340px,1.08fr);
    gap:36px;
  }
  .page-hero--split h1{ font-size:32px; }
  .page-hero--split .page-media{
    aspect-ratio:4/3;
    min-height:280px;
  }
}
@media (max-width:760px){
  .page-hero--split{
    padding:30px 0 34px;
    background:#F5F8FA;
  }
  .page-hero--split .page-hero-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .page-hero--split .page-hero-copy{ padding:0; }
  .page-hero--split h1{ font-size:29px; max-width:none; }
  .page-hero--split .ph-sub{ max-width:none; }
  .page-hero--split .page-media{
    aspect-ratio:16/10;
    min-height:0;
    max-height:none;
  }
}
@media (max-width:600px){
  .page-hero--split h1{ font-size:27px; }
  .page-hero--split .cta-row{
    flex-direction:column;
    align-items:stretch;
  }
  .page-hero--split .page-media{
    aspect-ratio:4/3;
    border-radius:4px;
  }
}


/* ============================================================
   v15 — RESEARCH OVERVIEW PHOTO SYSTEM
   Fixed editorial frames: no portrait image can stretch a card.
   ============================================================ */
.cap-grid{
  align-items:start;
}
.cap-card{
  min-width:0;
}
.cap-media{
  position:relative;
  width:100%;
  height:230px;
  aspect-ratio:auto !important;
  overflow:hidden;
  flex:0 0 230px;
  background:#E9EEF1;
}
.cap-media img{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:none;
  object-fit:cover !important;
  display:block;
}

/* Individual crops for the approved photographs */
.cap-card[href="#/research/air/"] .cap-media img{ object-position:50% 50%; }
.cap-card[href="#/research/emissions/"] .cap-media img{ object-position:50% 48%; }
.cap-card[href="#/research/water/"] .cap-media img{ object-position:50% 50%; }
.cap-card[href="#/research/soil/"] .cap-media img{ object-position:50% 34%; }
.cap-card[href="#/research/waste/"] .cap-media img{ object-position:50% 50%; }
.cap-card[href="#/research/morphometry/"] .cap-media img{ object-position:50% 50%; }
.cap-card[href="#/research/background/"] .cap-media img{ object-position:50% 50%; }

@media (max-width:1150px){
  .cap-media{
    height:270px;
    flex-basis:270px;
  }
}
@media (max-width:600px){
  .cap-media{
    height:210px;
    flex-basis:210px;
  }
}


/* ============================================================
   v16 — RESEARCH CARD PHOTO PROPORTIONS
   Natural 4:3 editorial frame. Portrait originals are cropped,
   never geometrically squashed or stretched.
   ============================================================ */
.cap-media{
  position:relative;
  width:100%;
  height:auto !important;
  flex:none !important;
  aspect-ratio:4 / 3 !important;
  overflow:hidden;
  background:#E9EEF1;
}
.cap-media img{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:none;
  object-fit:cover !important;
  object-position:center center;
  display:block;
}

/* Subject-aware crop positions */
.cap-card[href="#/research/air/"] .cap-media img{ object-position:50% 48%; }
.cap-card[href="#/research/emissions/"] .cap-media img{ object-position:50% 50%; }
.cap-card[href="#/research/water/"] .cap-media img{ object-position:50% 50%; }
.cap-card[href="#/research/soil/"] .cap-media img{ object-position:50% 28%; }
.cap-card[href="#/research/waste/"] .cap-media img{ object-position:50% 46%; }
.cap-card[href="#/research/morphometry/"] .cap-media img{ object-position:50% 45%; }
.cap-card[href="#/research/background/"] .cap-media img{ object-position:50% 50%; }

@media (max-width:760px){
  .cap-media{ aspect-ratio:16 / 10 !important; }
}
@media (max-width:480px){
  .cap-media{ aspect-ratio:4 / 3 !important; }
}

/* Accreditation page — "Документы" section groups two legally distinct
   document sets (RA.RU accreditation vs. Roshydromet licensing) under
   separate .eyebrow-b labels; spacing between the groups. */
.accred-docs-group-b{ margin-top:28px; }

/* ---- Document preview cards — a real screenshot of each PDF's first
   page, used in every "Документы" section (research pages + Accreditation).
   One shared component; not page-specific classes. A single card in the
   grid (Morphometry, the license group on Accreditation) simply occupies
   the first track and leaves the second empty — no extra markup needed. */
.doc-preview-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}
.doc-preview-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:border-color .15s ease;
}
.doc-preview-card:hover{
  border-color:var(--accent);
}
.doc-preview-media{
  height:360px;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  overflow:hidden;
}
.doc-preview-img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  transition:transform .15s ease;
}
.doc-preview-card:hover .doc-preview-img{
  transform:scale(1.012);
}
.doc-preview-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
}
.doc-preview-title{
  display:block;
  font-size:14px;
  font-weight:600;
  color:var(--navy-deep);
  line-height:1.35;
}
.doc-preview-meta{
  display:block;
  font-size:12.5px;
  font-weight:400;
  color:var(--muted);
  margin-top:3px;
}
.doc-preview-type{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--accent-strong);
  background:var(--tag-bg);
  padding:4px 8px;
  border-radius:4px;
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:transform .15s ease;
}
.doc-preview-card:hover .doc-preview-type{
  transform:translateX(1px);
}
@media (max-width:760px){
  .doc-preview-grid{ grid-template-columns:1fr; }
  .doc-preview-media{ height:280px; }
}

/* ============================================================
   PRIVACY POLICY PAGE — "Политика конфиденциальности" (#/privacy/)
   New page-specific classes (pv-*, legal-text) only. Nothing here
   is used elsewhere in the stylesheet/markup, so these rules cannot
   affect any other page.
   ============================================================ */
.pv-hero{ padding:36px 0 32px 0; }

.pv-section{ padding-top:8px; }

.legal-text{ max-width:760px; }
.legal-text h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:19px;
  color:var(--navy-deep);
  margin:32px 0 12px 0;
}
.legal-text h2:first-child{ margin-top:0; }
.legal-text p{
  font-size:14.5px;
  line-height:1.7;
  color:var(--muted);
  margin:0 0 14px 0;
}
.legal-text .legal-text-lead{ color:var(--navy-deep); font-size:15px; }

@media (max-width:760px){
  .pv-hero{ padding:26px 0 22px 0; }
  .legal-text h2{ font-size:17.5px; margin:26px 0 10px 0; }
  .legal-text p{ font-size:14px; }
}

/* ============================================================
   REVIEW MODAL — "Оставить отзыв" (#/about/ "Отзывы клиентов" block only).
   New page-specific classes (rev-section-head, review-modal-*, field-required/
   field-optional) only. The modal's own form fields/consent row/honeypot/
   success/error states reuse the existing .field / .consent-row / .hp-field /
   .form-submit / .form-success / .form-error rules from the main request
   form above — nothing here duplicates that styling. Opened/closed purely
   via the [hidden] attribute, same convention as the mobile-nav drawer.
   ============================================================ */
.rev-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.rev-section-head h2{ margin-bottom:0; }

.field-required{ color:#C0392B; }
.field-optional{ font-weight:400; color:var(--muted); }

.review-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(8,23,38,0.56);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:48px 20px;
  overflow-y:auto;
  z-index:1000;
}
.review-modal-overlay[hidden]{ display:none; } /* the [hidden] attribute alone isn't enough
  once .review-modal-overlay{display:flex} above is in the cascade — this makes the two-state
  toggle in js/review-form.js (overlay.hidden = true/false) actually take effect */
.review-modal{
  position:relative;
  width:100%;
  max-width:480px;
  background:var(--surface);
  border-radius:8px;
  padding:40px;
  box-shadow:0 20px 60px rgba(3,10,20,0.28);
}
.review-modal-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:21px;
  color:var(--navy-deep);
  margin:0 0 20px 0;
  padding-right:32px;
}
.review-modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid var(--border);
  border-radius:6px;
  font-size:20px;
  line-height:1;
  color:var(--muted);
  cursor:pointer;
}
.review-modal-close:hover{ background:var(--bg); color:var(--navy); }
.review-modal-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@media (max-width:640px){
  .rev-section-head{ flex-direction:column; align-items:flex-start; }
  .review-modal-overlay{ padding:20px 14px; }
  .review-modal{ padding:28px 20px; }
}

/* ============================================================
   CONSENT GATE — "Согласие на обработку персональных данных" (ЭТАП 9.5).
   A separate overlay shown by js/chat-form.js on the chat's first contact
   submission — reuses .review-modal-overlay/.review-modal/.review-modal-close/
   .review-modal-title verbatim (same [hidden]-cascade fix, same centered
   backdrop-over-the-whole-site layout); only the text/actions below and
   the new .btn-secondary variant are specific to it. ============================================================ */
.consent-gate-text{
  font-size:14.5px;
  line-height:1.55;
  color:var(--text);
  margin:0 0 24px 0;
}
.consent-gate-text a{
  color:var(--navy);
  text-decoration:underline;
}
.consent-gate-text a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.consent-gate-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
/* a plain secondary/ghost companion to the existing .btn/.btn-primary pair */
.btn-secondary{
  background:transparent;
  color:var(--navy);
  border-color:var(--border);
}
.btn-secondary:hover{ background:var(--bg); }
.btn-secondary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@media (max-width:640px){
  .consent-gate-actions{ flex-direction:column-reverse; }
  .consent-gate-actions .btn{ width:100%; text-align:center; }
}

/* ============================================================
   FLOATING CLUSTER — MAX button + "Написать менеджеру" chat button,
   grouped into one tidy stack (present on every page, see the
   FLOATING CLUSTER block in index.html right after <footer>, and
   js/max-button.js for the MAX_CHAT_URL constant + the single
   IntersectionObserver that fades the whole cluster near the footer —
   js/chat-form.js only handles the docked chat panel's own behavior).
   MAX colors are MAX's own verified brand palette (#471AFF / #9500FF,
   from go.max.ru/brandbook); the chat button reuses the site's own
   --navy so the two read as a coordinated pair, not two unrelated
   widgets. z-index sits below every modal overlay (1000) and above
   ordinary page content, so a modal always wins.
   ============================================================ */
.float-cluster{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:900;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:14px;
  transition:opacity .2s ease, transform .2s ease;
}
/* faded out for as long as the footer is in view — see the
   IntersectionObserver in js/max-button.js — so neither button ever
   sits on top of the footer's own links. */
.float-cluster.is-hidden-for-footer{
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
}

.float-btn{
  position:relative; /* anchor for .float-tooltip */
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:none;
  cursor:pointer;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .15s ease, background .15s ease;
}
.float-btn:hover,
.float-btn:focus-visible{ transform:translateY(-2px); }
.float-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.float-btn--max{
  background:linear-gradient(135deg, #471AFF 0%, #9500FF 100%);
  box-shadow:0 8px 24px rgba(71,26,255,0.38);
}
.float-btn--max:hover,
.float-btn--max:focus-visible{ box-shadow:0 10px 28px rgba(71,26,255,0.48); }

.float-btn--chat{
  background:var(--navy);
  box-shadow:0 8px 24px rgba(11,32,54,0.34);
}
.float-btn--chat:hover,
.float-btn--chat:focus-visible{
  background:var(--navy-deep);
  box-shadow:0 10px 28px rgba(11,32,54,0.44);
}

.float-icon{ width:26px; height:26px; flex:none; }
.float-btn--max .float-icon{ fill:#fff; }
.float-btn--chat .float-icon{ fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ЭТАП 9.4 — the chat launcher doubles as its own close control while the
   panel is open: js/chat-form.js toggles .is-panel-open on #chat-open-btn,
   which swaps the chat-bubble icon for a × (its tooltip/aria-label switch
   in the same script), so there's no duplicate/ambiguous open affordance
   sitting next to the panel's own header close button. */
.float-btn--chat .icon-chat-close{ display:none; }
.float-btn--chat.is-panel-open .icon-chat-open{ display:none; }
.float-btn--chat.is-panel-open .icon-chat-close{ display:block; }

.float-tooltip{
  position:absolute;
  right:calc(100% + 12px);
  top:50%;
  transform:translateY(-50%);
  background:var(--navy-deep);
  color:#fff;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  padding:7px 12px;
  border-radius:6px;
  opacity:0;
  visibility:hidden;
  transition:opacity .15s ease;
  pointer-events:none;
}
.float-tooltip::after{
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  transform:translateY(-50%);
  border:5px solid transparent;
  border-left-color:var(--navy-deep);
}
.float-btn:hover .float-tooltip,
.float-btn:focus-visible .float-tooltip{
  opacity:1;
  visibility:visible;
}

@media (max-width:640px){
  .float-cluster{ right:16px; bottom:16px; gap:10px; }
  .float-btn{ width:48px; height:48px; }
  .float-icon{ width:22px; height:22px; }
}

/* ============================================================
   CHAT PANEL — "Написать менеджеру" (ЭТАП 9.2 introduced the docked panel,
   ЭТАП 9.3 lightened its layout, ЭТАП 9.4 is the final visual pass). A
   docked messenger-style widget in the Zendesk/Intercom/HubSpot pattern —
   NOT a fullscreen modal: no backdrop, no page dimming, the page stays
   fully interactive while it's open. It is still just a message form with
   a scripted greeting (see js/chat-form.js) — no online/typing status, no
   fake employee avatar/photo, no message history persisted between
   visits, no timestamps.

   ЭТАП 9.4: no consent checkbox/text/link anywhere in this window any more
   (consent is handled separately elsewhere on the site — js/chat-form.js
   still sends CONSENT='Y' to the unchanged send-manager.php; see the
   CONSENT_VALUE comment there). Incoming bubbles carry a small restrained
   line-icon avatar (.chat-avatar — teal, single stroke, no emoji, not a
   photo). The contact-capture step is now two compact icon-pill fields
   (.chat-contact-fields/.ccf-field) — a deliberately lighter, distinct
   component from the main site's heavier .field/.form-submit styling,
   side by side on desktop and stacked on mobile — with no bordered card
   around them at all.

   Positioned to open directly above the .float-cluster launcher block,
   right-aligned with it, never overlapping it — see the bottom offsets
   below, which account for the cluster's own height at each breakpoint.
   z-index:950 — above ordinary content and the float cluster (900),
   below any full modal overlay (1000, e.g. the review modal), so a
   modal always wins if both were ever open at once. ============================================================ */
.chat-panel{
  position:fixed;
  right:24px;
  bottom:166px; /* clears the 2-button .float-cluster (56+14+56=126px tall, bottom:24px) with a 16px gap */
  z-index:950;
  width:440px;
  height:600px;
  max-height:calc(100vh - 210px); /* keeps clear of the site header even on shorter viewports */
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 20px 60px rgba(3,10,20,0.28);
  overflow:hidden;
}
.chat-panel[hidden]{ display:none; } /* same cascade gotcha as .review-modal-overlay — the
  [hidden] attribute alone loses to the unconditional display:flex above without this rule */

.chat-panel-header{
  flex:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px 14px 20px;
  background:var(--navy);
}
.cph-org{
  font-family:var(--font-display);
  font-weight:700;
  font-size:15.5px;
  color:#fff;
  letter-spacing:.01em;
}
.cph-role{
  font-size:12.5px;
  color:rgba(255,255,255,.66);
  margin-top:3px;
}
.chat-panel-close{
  flex:none;
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  border-radius:6px;
  font-size:20px;
  line-height:1;
  color:rgba(255,255,255,.72);
  cursor:pointer;
}
.chat-panel-close:hover{ background:rgba(255,255,255,.12); color:#fff; }
.chat-panel-close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.chat-panel-body{
  flex:1 1 auto;
  overflow-y:auto;
  background:var(--bg);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.chat-msg{ display:flex; align-items:flex-start; gap:8px; }
.chat-msg--in{ justify-content:flex-start; }
.chat-msg--out{ justify-content:flex-end; }
.chat-bubble{
  font-size:14px;
  line-height:1.48;
  padding:10px 13px;
  border-radius:10px;
}
.chat-msg--in .chat-bubble{
  max-width:calc(100% - 34px); /* leaves room for the 26px avatar + 8px gap */
  background:#fff;
  border:1px solid var(--border);
  color:var(--text);
  border-bottom-left-radius:3px;
}
.chat-msg--out .chat-bubble{
  max-width:84%;
  background:var(--navy);
  color:#fff;
  border-bottom-right-radius:3px;
}

/* ---- small restrained line-icon avatar next to every incoming bubble —
   teal, single stroke, no emoji, not a photo/fake employee avatar. Same
   markup js/chat-form.js reuses (ICON_LAB / ICON_CHECK) for bubbles it
   builds dynamically. ---- */
.chat-avatar{
  flex:none;
  width:26px;
  height:26px;
  margin-top:1px;
  border-radius:50%;
  background:#E1F0F2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.chat-avatar svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:var(--accent-strong);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ЭТАП 15.3 — сообщение «Спасибо! Оставьте контакт...» выводится обычным
   входящим bubble (.chat-msg--in), сразу за которым в DOM идёт
   .chat-contact-card. Раньше короткий диалог просто прижимался к верху
   flex-колонки .chat-panel-body (flex-direction:column без justify-content
   ведёт себя как flex-start), а под формой оставалось пустое место высотой
   с остаток панели. Правило ниже задействует :has() (уже используется в
   этом проекте — см. .search-module:has(...) выше) и выбирает ТОЛЬКО тот
   входящий bubble, за которым сразу следует .chat-contact-card — то есть
   именно и только сообщение «Оставьте контакт...». margin-top:auto на этом
   элементе забирает всё свободное место сверху и прижимает его вместе со
   всем, что идёт после (саму карточку полей), к низу диалога. Отступ между
   сообщением и полями остаётся прежним штатным gap:14px контейнера —
   он не меняется. На самое первое приветственное сообщение (когда
   .chat-contact-card в DOM ещё нет) правило не действует, поэтому
   начальное состояние чата не смещается. */
.chat-msg--in:has(+ .chat-contact-card){
  margin-top:auto;
}

/* ---- inline contact-capture fields — two compact icon-pill fields that
   sit directly in the conversation area, no bordered card, no consent
   control (removed in ЭТАП 9.4 — see the CONSENT_VALUE note in
   js/chat-form.js). Side by side on desktop, one column on mobile
   (see the breakpoint below). ---- */
.chat-contact-card{
  align-self:stretch;
  padding:2px 0 0 0;
}
.chat-contact-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:10px;
  row-gap:16px; /* extra room for a field's .ccf-error, which is absolutely
                   positioned below it and would otherwise sit too close
                   to the field in the next row */
  margin-bottom:14px;
}
.ccf-field{ position:relative; }
.ccf-icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  color:var(--muted);
  pointer-events:none;
}
.ccf-icon svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ccf-field input{
  width:100%;
  font-family:var(--font-body);
  font-size:13.5px;
  color:var(--text);
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:9px 12px 9px 35px;
}
.ccf-field input::placeholder{ color:#8B97A1; }
.ccf-field input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
  border-color:var(--accent);
}
.ccf-field.has-error input{ border-color:#C0392B; }
.ccf-error{
  display:none;
  position:absolute;
  left:14px;
  right:6px;
  top:100%;
  margin-top:3px;
  font-size:11px;
  line-height:1.3;
  color:#C0392B;
}
.ccf-field.has-error .ccf-error{ display:block; }

.chat-contact-submit{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:13.5px;
  background:var(--navy);
  color:#fff;
  border:none;
  border-radius:20px;
  padding:9px 22px;
  cursor:pointer;
  transition:background .15s ease;
}
.chat-contact-submit:hover{ background:var(--navy-deep); }
.chat-contact-submit:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.chat-contact-submit:disabled{ background:#B7C1C8; cursor:not-allowed; }
.chat-contact-submit[hidden]{ display:none; } /* same [hidden]-vs-unconditional-display
  cascade gotcha as .review-modal-overlay/.chat-panel above */

/* error shown compactly right under the submit button — no extra card/box */
.chat-contact-card .form-error{
  text-align:left;
  padding:8px 0 0 0;
}
.chat-contact-card .form-error .fe-title{ font-size:12.5px; font-weight:600; margin-bottom:2px; }
.chat-contact-card .form-error .fe-sub{ font-size:12px; margin:0; max-width:none; }

/* ---- final confirmation bubble reuses .chat-msg--in/.chat-bubble/.chat-avatar
   as-is, with the ICON_CHECK variant passed by js/chat-form.js ---- */

.chat-panel-input-row{
  flex:none;
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:12px;
  border-top:1px solid var(--border);
  background:#fff;
}
.chat-panel-input-row[hidden]{ display:none; }
.chat-attach-btn{
  flex:none;
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  border-radius:50%;
  color:var(--muted);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.chat-attach-btn:hover{ background:var(--bg); color:var(--accent-strong); }
.chat-attach-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.chat-attach-btn svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.chat-attach-btn:disabled{ opacity:.6; cursor:not-allowed; }

/* ---- selected-file chip + inline file error, shown above the pinned input
   row (ЭТАП 9.5 — the attachment button is now functional, same safe
   validation principle as the main request form's own attachment: a
   whitelisted extension + a 10 MB limit, checked again server-side in
   send-manager.php). Deliberately compact — no separate large file card. ---- */
.chat-input-area{ flex:none; }
.chat-input-area[hidden]{ display:none; }
.chat-file-chip{
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 12px 0 12px;
  padding:7px 10px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
}
.chat-file-chip[hidden]{ display:none; }
.chat-file-chip svg{ flex:none; width:15px; height:15px; fill:none; stroke:var(--muted); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.chat-file-chip-name{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12.5px;
  color:var(--text);
}
.chat-file-chip-remove{
  flex:none;
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  border-radius:50%;
  font-size:15px;
  line-height:1;
  color:var(--muted);
  cursor:pointer;
}
.chat-file-chip-remove:hover{ background:var(--border); color:var(--navy); }
.chat-file-chip-remove:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.chat-file-error{
  margin:10px 12px 0 12px;
  font-size:11.5px;
  color:#C0392B;
}
.chat-file-error[hidden]{ display:none; }
.chat-panel-input-row textarea{
  flex:1 1 auto;
  resize:none;
  min-height:20px;
  max-height:90px;
  font-family:var(--font-body);
  font-size:14px;
  color:var(--text);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:18px;
  padding:9px 14px;
}
.chat-panel-input-row textarea::placeholder{ color:#8B97A1; }
.chat-panel-input-row textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
  border-color:var(--accent);
}
.chat-send-btn{
  flex:none;
  width:38px;
  height:38px;
  border-radius:50%;
  border:none;
  background:var(--accent);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease;
}
.chat-send-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.chat-send-btn:hover{ background:var(--accent-strong); }
.chat-send-btn:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.chat-send-btn:disabled{ background:#B7C1C8; cursor:not-allowed; }

@media (max-width:640px){
  /* ЭТАП 9.5: the open chat panel goes practically fullscreen on small
     screens — edge-to-edge with only an 8px safe margin on every side
     (within the 8–12px range asked for), using all four fixed offsets so
     no explicit width/height is needed. This deliberately no longer reads
     as "a floating widget" — it fills the viewport like a real mobile
     chat screen. Desktop's geometry (440×600, docked bottom-right) is
     untouched — this block only applies ≤640px. */
  .chat-panel{
    left:8px;
    right:8px;
    top:8px;
    bottom:8px;
    width:auto;
    height:auto;
    max-height:none;
    border-radius:10px;
  }
  .chat-panel-header{ padding:14px 14px 12px 16px; }
  .chat-panel-body{ padding:16px; }
  /* contact fields back to a single column on mobile */
  .chat-contact-fields{ grid-template-columns:1fr; row-gap:18px; }

  /* tooltips are a hover-only affordance that doesn't apply on touch —
     also specifically avoids ever showing "Закрыть чат" as a tooltip on
     mobile, since the fullscreen panel's own header × is the close
     control there. */
  .float-tooltip{ display:none; }

  /* MAX stays out of the way while the chat is open on mobile (the chat
     launcher itself keeps working as the panel's close toggle — see
     .is-panel-open in js/chat-form.js) — it reappears the moment the
     panel closes. Desktop keeps showing both buttons together regardless
     of chat state, unaffected by this rule (media-query scoped). */
  .float-cluster.chat-is-open .float-btn--max{ display:none; }
}

/* ============================================================
   26.09.2026 — первый экран главной: меньше текста, три крупных факта
   (v3: «С 2001 года» строкой над заголовком, под кнопкой ничего;
   раньше — .hero-stats) вместо четырёх мелких пунктов, «С 2001 года» — первым и
   акцентным цветом. На десктопе/планшете — светлый текст поверх тёмного
   градиента видео, на мобильном (≤600px, где первый экран светлый) — тёмный.
   Плюс кнопка «пауза» для фонового видео (.hero-video-toggle).
   ============================================================ */
.hero-left{ max-width:660px; }
.hero-left h1{ max-width:660px; }
.hero-left .hero-sub{ text-shadow:0 1px 14px rgba(0,0,0,.28); }
.hero-left .hero-sub{ max-width:480px; font-size:17px; margin-bottom:30px; }

/* v3: «Работаем с 2001 года» — строка над заголовком с короткой
   бирюзовой чертой. Под кнопкой больше ничего нет. */
.hero-left .hero-since-line{
  display:flex; align-items:center; gap:12px;
  margin:0 0 18px 0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  letter-spacing:.01em;
  color:#7FD3E4;
}
.hero-left .hsl-rule{ width:32px; height:2px; background:#66C5D9; flex:none; }
.hero-video-toggle{
  position:absolute;
  right:24px; top:24px;
  z-index:3;
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:rgba(7,26,45,.45);
  color:#FFFFFF;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.hero-video-toggle[hidden]{ display:none; }
.hero-video-toggle:hover{ background:rgba(7,26,45,.7); border-color:rgba(255,255,255,.6); }
.hero-video-toggle:focus-visible{ outline:2px solid #66C5D9; outline-offset:2px; }
.hero-video-toggle svg{ fill:currentColor; display:block; }
.hero-video-toggle .hvt-play{ display:none; }
.hero-video-toggle.is-paused .hvt-play{ display:block; }
.hero-video-toggle.is-paused .hvt-pause{ display:none; }

@media (max-width:1024px){
  .hero-left{ max-width:540px; }
  .hero-left h1{ max-width:540px; }
}
@media (max-width:600px){
  .hero-left{ max-width:100%; }
  .hero-left .hero-sub{ font-size:16px; margin-bottom:20px; }
  .hero-left .hero-since-line{ color:var(--accent-strong); font-size:15px; margin-bottom:12px; }
  .hero-left .hsl-rule{ background:var(--accent); width:24px; }
  .hero-video-toggle{ top:auto; right:auto; left:12px; bottom:12px; width:34px; height:34px; }
}

/* 26.09.2026 — «О лаборатории»: плашка «С 2001 года» была светло-серой на
   светло-сером фоне и почти не читалась. Теперь — тёмная карточка с крупным
   годом в фирменном бирюзовом. Только эта страница (.ab-hero). */
.ab-hero .ab-fact-badge{
  gap:6px;
  padding:26px 32px 24px;
  background:var(--navy-deep);
  border:0;
  border-left:4px solid #66C5D9;
  box-shadow:0 14px 34px rgba(11,32,54,.16);
}
.ab-hero .ab-fact-badge .afb-kicker{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.ab-hero .ab-fact-badge .afb-value{
  font-size:52px;
  line-height:1;
  letter-spacing:-0.02em;
  color:#7FD3E4;
}
.ab-hero .ab-fact-badge .afb-unit{
  font-size:22px;
  font-weight:700;
  letter-spacing:0;
  color:#FFFFFF;
}
.ab-hero .ab-fact-badge .afb-label{
  font-size:14px;
  line-height:1.35;
  color:rgba(255,255,255,.85);
  max-width:240px;
}
@media (max-width:760px){
  .ab-hero .ab-fact-badge{ padding:20px 22px; }
  .ab-hero .ab-fact-badge .afb-value{ font-size:40px; }
  .ab-hero .ab-fact-badge .afb-unit{ font-size:18px; }
  .ab-hero .ab-fact-badge .afb-label{ max-width:none; }
}

/* 27.09.2026 — шапка: с настоящим шрифтом Inter пункты меню почти касались
   логотипа и телефонов. Минимальный зазор между блоками шапки, пункты меню
   не переносятся, шаг меню 24 px вместо 30. */
@media (min-width:1151px){
  .header-inner{ gap:20px; }
  .header-inner > .logo{ flex:none; }
  nav.main-nav a, nav.main-nav .nav-trigger{ white-space:nowrap; }
  nav.main-nav{ gap:24px; }
}

/* ============================================================
   27.09.2026 SEO-2 — блоки на страницах направлений:
   «Какие показатели определяем» (.seo-what-section), «Как проходит работа»
   (.seo-steps — та же разметка, что «Для каких задач»), «Вопросы и ответы»
   (.seo-faq, нативные <details>, без скриптов).
   ============================================================ */
.seo-what-section .seo-lead{
  max-width:760px; margin:0 0 14px 0;
  font-size:16px; line-height:1.6; color:var(--text);
}
.seo-what-section .seo-objects{
  max-width:760px; margin:0 0 26px 0;
  font-size:15px; line-height:1.55; color:var(--muted);
}
.seo-what-section .seo-objects-label{ font-weight:600; color:var(--navy-deep); }
.seo-groups{
  margin:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 40px;
}
.seo-group{ padding:16px 0; border-top:1px solid var(--border); }
.seo-group dt{
  font-family:var(--font-display); font-weight:700; font-size:16px;
  color:var(--navy-deep); margin:0 0 6px 0;
}
.seo-group dd{ margin:0; font-size:15px; line-height:1.6; color:#3D4750; }
.seo-what-section .seo-more{ margin:22px 0 0 0; font-size:14.5px; color:var(--muted); }
.seo-what-section .seo-more a,
.seo-faq-item p a{ color:var(--accent-strong); text-underline-offset:3px; }

.seo-steps .airp-task p strong{ color:var(--navy-deep); font-weight:600; }

.seo-faq{ max-width:860px; border-top:1px solid var(--border); }
.seo-faq-item{ border-bottom:1px solid var(--border); }
.seo-faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0;
  font-family:var(--font-display); font-weight:700; font-size:16.5px; line-height:1.35;
  color:var(--navy-deep);
}
.seo-faq-item summary::-webkit-details-marker{ display:none; }
.seo-faq-item summary::after{
  content:""; flex:none; width:10px; height:10px;
  border-right:2px solid var(--accent-strong); border-bottom:2px solid var(--accent-strong);
  transform:rotate(45deg); margin-top:-4px; transition:transform .15s ease;
}
.seo-faq-item[open] summary::after{ transform:rotate(-135deg); margin-top:4px; }
.seo-faq-item summary:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:2px; }
.seo-faq-item p{ margin:0 0 18px 0; font-size:15px; line-height:1.6; color:#3D4750; max-width:760px; }

@media (max-width:760px){
  .seo-groups{ grid-template-columns:1fr; }
  .seo-faq-item summary{ font-size:15.5px; }
}
@media (prefers-reduced-motion: reduce){
  .seo-faq-item summary::after{ transition:none; }
}

/* ============================================================
   28.09.2026 — уведомление о cookie (js/consent-metrika.js).
   Компактная плашка внизу слева на компьютере, во всю ширину на телефоне.
   Кнопки чата/почты справа не перекрываются: на телефоне они
   поднимаются над плашкой, пока она открыта.
   ============================================================ */
.cookie-banner{
  position:fixed; left:24px; bottom:24px; z-index:950;
  max-width:440px;
  padding:18px 20px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  box-shadow:0 14px 36px rgba(8,23,38,.16);
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner-text{ margin:0 0 14px 0; font-size:14px; line-height:1.5; color:#3D4750; }
.cookie-banner-text a{ color:var(--accent-strong); text-underline-offset:3px; }
.cookie-banner-actions{ display:flex; align-items:center; gap:18px; }
.cookie-banner .cookie-accept{ padding:10px 22px; }
.cookie-banner .cookie-decline{
  padding:10px 4px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:14.5px; font-weight:500; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px;
}
.cookie-banner .cookie-decline:hover{ color:var(--navy-deep); }
.cookie-banner button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:600px){
  .cookie-banner{ left:12px; right:12px; bottom:12px; max-width:none; padding:16px; }
  .cookie-banner-actions{ gap:14px; }
  .cookie-banner .cookie-accept{ flex:1; }
  body.has-cookie-banner .float-cluster{ bottom:190px; }
}

/* Страница услуги v2
   30.09.2026 — образец на /research/air/: первый экран с фото и затемнением,
   полоса фактов, карточки задач с иконками, плашки групп показателей со
   свёрнутым перечнем (details), шаги в строку, блок «Лаборатория в работе».
   Все классы начинаются с svc- и есть только на этой странице. Цвета — из
   переменных сайта и из стилей первого экрана главной (.hero-left). */

/* ---- первый экран: фото фоном + затемнение цветом кнопок (--navy #0B2036) ---- */
.page-hero.svc-hero{
  position:relative; overflow:hidden;
  background:var(--navy); border-top:none; border-bottom:none;
  padding:72px 0 80px;
}
.svc-hero-img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:70% 50%;
}
.svc-hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(11,32,54,.85) 0%, rgba(11,32,54,.7) 40%, rgba(11,32,54,0) 100%);
}
/* затемнение внизу: тот же тёмно-синий от прозрачного до 60% на высоту строки фактов */
.svc-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:150px; z-index:1;
  background:linear-gradient(180deg, rgba(11,32,54,0) 0%, rgba(11,32,54,.6) 100%);
}
/* только /research/waste/: пёстрое фото — нижняя полоса плотнее, до ~80% */
.svc-hero--dense-bottom::after{
  background:linear-gradient(180deg, rgba(11,32,54,0) 0%, rgba(11,32,54,.8) 100%);
}
.svc-hero .container{ position:relative; z-index:2; }
/* выбросы: фото шире экрана (как background-size:140% auto; position:0% 15%), труба уходит вправо */
@media (min-width:761px){
  .svc-hero-img--wide{ object-position:0% 15%; transform:scale(1.4); transform-origin:0% 15%; }
}
@media (max-width:760px){
  .svc-hero-img--wide{ object-position:center; }
}
.svc-hero .eyebrow{ color:#66C5D9; }
.svc-hero h1{ color:#FFFFFF; text-shadow:0 2px 18px rgba(0,0,0,.16); }
.svc-hero .ph-sub{ color:rgba(255,255,255,.88); max-width:540px; }
.svc-hero .btn-primary{ background:#0D7898; border-color:#0D7898; color:#FFFFFF; }
.svc-hero .btn-primary:hover{ background:#0A6986; border-color:#0A6986; }
.svc-hero .action-link{ color:#FFFFFF; border-bottom-color:rgba(102,197,217,.85); }
.svc-hero .action-link:hover{ color:#8DD9E8; }

/* ---- строка фактов внутри первого экрана, под кнопками, по ширине контейнера.
   Нижний отступ первого экрана 0: строка стоит на нижнем краю фото. ---- */
.page-hero.svc-hero{ padding-bottom:0; }
.svc-facts-list{
  list-style:none; margin:48px 0 0; padding:0;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); /* равные колонки при 2–4 фактах */
  border-top:1px solid rgba(255,255,255,.18);
}
.svc-fact{ display:flex; flex-direction:column; gap:4px; min-width:0; padding:20px 24px; }
.svc-fact:first-child{ padding-left:0; }
.svc-fact + .svc-fact{ border-left:1px solid rgba(255,255,255,.14); }
.svc-fact-value{
  font-family:var(--font-display); font-weight:700; font-size:18px; line-height:1.3;
  color:#FFFFFF; white-space:nowrap;
}
.svc-fact-label{ font-size:13px; line-height:1.4; color:rgba(255,255,255,.62); }
/* длинный номер (лицензия Л039-…): до 1024px переносится в одном месте — после «/» (<wbr> в разметке) */
@media (max-width:1024px){
  .svc-fact-value--id{ white-space:normal; }
}
/* планшет: поля колонок фактов уже, чтобы «от 10 рабочих дней» и подобные умещались в строку */
@media (min-width:761px) and (max-width:1024px){
  .svc-fact{ padding-left:14px; padding-right:14px; }
  .svc-fact:first-child{ padding-left:0; }
}

/* ---- «Для каких задач»: без фона и рамки, иконка в круге 44px ---- */
.svc-tasks{
  list-style:none; margin:0; padding:0;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:28px; /* колонок = пунктов (2–4) */
}
.svc-task{ background:none; border:none; padding:0; }
.svc-task-icon{
  display:block; box-sizing:border-box; width:44px; height:44px; padding:10px;
  border-radius:50%; background:rgba(14,124,147,.1); /* --accent #0E7C93, 10% */
  color:var(--accent); margin-bottom:14px;
}
.svc-task-icon path, .svc-task-icon circle{ stroke-width:2.6; }
.svc-task p{ margin:0; font-size:15px; line-height:1.55; color:var(--text); }

/* ---- «Какие показатели»: плашки групп + свёрнутый перечень ---- */
.svc-chips{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.svc-chip{
  padding:8px 14px; background:var(--tag-bg); border:none; cursor:default;
  border-radius:var(--radius-btn); font-size:14px; font-weight:600; line-height:1.3; color:var(--navy-deep);
}
.svc-more > summary{ list-style:none; }
.svc-more-link{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:15px; font-weight:600; color:var(--accent);
}
.svc-more-link:hover{ color:var(--accent-strong); }
.svc-more-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* ---- плавающие кнопки на телефоне: скрыты, пока виден первый экран svc-hero.
   Класс ставит только js/svc-float.js (до 768 px); без скрипта кнопки видны. ---- */
.float-cluster.svc-float-hidden{
  opacity:0; transform:translateY(8px); pointer-events:none; visibility:hidden;
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

/* ---- «Документы»: 3 карточки в ряд, превью ниже; на телефоне столбиком ---- */
.doc-preview-grid.svc-docs{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.svc-docs .doc-preview-media{ height:220px; }

/* ---- «Найдите нужное исследование» на всю ширину контейнера ---- */
.airp-search-section .search-module.svc-search{ max-width:none; }
.svc-more > summary::-webkit-details-marker{ display:none; }
.svc-more .svc-more-hide{ display:none; }
.svc-more[open] .svc-more-show{ display:none; }
.svc-more[open] .svc-more-hide{ display:inline; }
.svc-more[open] .seo-groups{ margin-top:20px; }

/* ---- «Как проходит работа»: 4 шага в строку ---- */
.airp-tasks.svc-steps{ grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:28px; row-gap:24px; }
.svc-steps .airp-task{ flex-direction:column; gap:10px; border-top:none; padding:0; }

/* ---- общий отступ и линия под заголовком: «Как проходит работа» и «Что входит в работу» ---- */
.svc-block-body{ padding-top:24px; border-top:1px solid var(--border); }

/* ---- «Что входит в работу» (бывш. «Что получает заказчик»): одинаковые колонки, разделители только между ними ---- */
.airp-deliverables.svc-deliverables{ column-gap:56px; }
.svc-deliverables .airp-deliverable{ position:relative; padding:0; border-left:none; }
.svc-deliverables .airp-deliverable + .airp-deliverable::before{
  content:""; position:absolute; top:0; bottom:0; left:-28px; width:1px; background:var(--border);
}
@media (max-width:600px){
  .airp-deliverables.svc-deliverables{ column-gap:0; }
  .svc-deliverables .airp-deliverable{ padding:14px 0; }
  .svc-deliverables .airp-deliverable:first-child{ padding-top:0; }
  .svc-deliverables .airp-deliverable + .airp-deliverable{ border-top:1px solid var(--border); }
  .svc-deliverables .airp-deliverable + .airp-deliverable::before{ display:none; }
}

/* ---- «Лаборатория в работе»: одно большое фото и два поменьше ---- */
.svc-lab-grid{
  display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:16px;
}
.svc-lab-item{
  margin:0; overflow:hidden; border-radius:var(--radius-card); background:var(--tag-bg);
  aspect-ratio:3/2;
}
.svc-lab-item--main{ grid-row:1 / span 2; aspect-ratio:auto; }
.svc-lab-item img{ display:block; width:100%; height:100%; object-fit:cover; }

/* ---- неразрывный фрагмент текста: «I–IV» класса опасности не разрывается переносом ---- */
.nowrap{ white-space:nowrap; }

@media (max-width:1024px){
  .svc-tasks{ grid-auto-flow:row; grid-template-columns:repeat(2, minmax(0,1fr)); }
  .airp-tasks.svc-steps{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:760px){
  /* на телефоне затемнение сплошное, чтобы текст читался */
  .svc-hero::before{ background:rgba(11,32,54,.85); }
  .page-hero.svc-hero{ padding:44px 0 0; }
  /* факты 2×2 */
  .svc-facts-list{ grid-auto-flow:row; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:36px; }
  .doc-preview-grid.svc-docs{ grid-template-columns:1fr; }
  .svc-docs .doc-preview-media{ height:280px; }
  .svc-fact{ padding:20px 12px; }
  .svc-fact:nth-child(odd){ border-left:none; padding-left:0; }
  .svc-fact:nth-child(even){ padding-right:0; } /* правый столбец у края контейнера — место для «16–25 рабочих дней» */
  .svc-fact:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.14); }
  /* нечётное число фактов: последний на всю ширину, без вертикального разделителя */
  .svc-fact:last-child:nth-child(odd){ grid-column:1 / -1; padding-right:0; border-left:none; }
  .svc-fact-value{ font-size:15px; }
  .airp-tasks.svc-steps{ grid-template-columns:1fr; row-gap:0; }
}
@media (max-width:600px){
  /* на телефоне — список: иконка слева, текст справа */
  .svc-tasks{ grid-template-columns:1fr; gap:18px; }
  .svc-task{ display:flex; align-items:center; gap:16px; }
  .svc-task-icon{ flex:none; margin-bottom:0; }
  .svc-lab-grid{ grid-template-columns:1fr; grid-template-rows:none; }
  .svc-lab-item--main{ grid-row:auto; aspect-ratio:3/2; }
}