/* ========== Base / Variables ========== */
:root{
  --bg:#ffffff;
  --ink:#0f172a;           /* темный текст */
  --muted:#64748b;         /* вторичный текст */
  --brand:#2E7D32;         /* зелёный акцент */
  --brand-2:#1b5e20;
  --tone:#f4f7f5;          /* светлый фон блоков */
  --card:#ffffff;
  --stroke:#e5e7eb;
  --shadow:0 6px 20px rgba(2,6,23,.06);
  --radius:16px;
  --container:1300px;
  --header-h: 74px;                 /* твоя фактическая высота */
  --safe-top: env(safe-area-inset-top, 0px);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-2)}
.sr-only{position:absolute!important; width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)} 
.no-scroll{overflow:hidden}

/* Containers */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:16px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 18px; border-radius:12px; font-weight:600; border:1px solid transparent;
  transition:.2s ease-in-out; white-space:nowrap
}
.btn--lg{height:52px; padding:0 22px; border-radius:14px; font-size:1.05rem}
.btn--primary{background:var(--brand); color:#fff}
.btn--primary:hover{background:var(--brand-2)}
.btn--secondary{background:#0f172a; color:#fff}
.btn--secondary:hover{filter:brightness(1.08)}
.btn--ghost{background:transparent; border-color:var(--stroke); color:var(--ink)}
.btn--ghost:hover{border-color:#cbd5e1}
.btn--outline{background:#fff; border-color:var(--stroke); color:var(--ink)}
.skip-link{position:absolute; left:-9999px; top:auto}
.skip-link:focus{left:16px; top:16px; background:#000; color:#fff; padding:8px 12px; z-index:1000}

/* ========== Header ========== */
.site-header{
  height: calc(var(--header-h) + var(--safe-top));
  padding-top: var(--safe-top);
  z-index: 1000;
  background:#fff;           /* без просвечивания */
  backdrop-filter:none;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:16px}
.logo{display:inline-flex; align-items:center; width: 200px;}
.logo img{max-width: 100%;}

.nav{width: 100%; display:flex; gap:20px; align-items:center}
.nav__list{display:flex; gap:18px; list-style:none; margin:0; padding:0}
.nav__list a{color:var(--ink); padding:10px 8px; border-radius:8px}
.nav__list a:hover{background:#f1f5f9}
.nav__cta{display:flex; gap:20px; margin-left: 30px}

.nav-toggle{
  display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--stroke); background:#fff
}
.nav-toggle__bar{display:block; width:22px; height:2px; background:#0f172a; box-shadow:0 6px 0 #0f172a, 0 -6px 0 #0f172a; margin:0 auto}

/* ========== Hero ========== */
.hero{
  height: 56vh;            /* пусть тянется на всю высоту экрана */
  display: flex;
  align-items: flex-end;        /* текст внизу */
  position: relative;
  overflow: hidden;
}
.hero picture{ position:absolute; inset:0; z-index:0; }
.hero__bg{  width: 100%;
  height: 56vh;          /* 40% от высоты экрана */
  object-fit: cover;
  object-position: center;
  display: block; }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(2,6,23,.25),rgba(2,6,23,.45)); z-index:1; }
.hero__content{ position: relative;
  z-index: 2;
  padding: 0 16px 40px;
  color: #fff; }
.hero h1{font-size:clamp(28px,4.2vw,48px); line-height:1.1; margin:0 0 12px}
.lead{font-size:clamp(16px,1.6vw,20px); max-width:760px; color:#f1f5f9; margin:0 0 20px}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}
.hero__trust{display:flex; gap:18px; list-style:none; margin:18px 0 0; padding:0; color:#e2e8f0; flex-wrap:wrap}

/* ========== Features ========== */
.features .feature {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.features .feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.features{background:var(--tone); padding:28px 0}
.features__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.feature{background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.feature__icon{font-size:26px}
	.feature__icon img{max-width: 50%;}	

/* ========== Section Head ========== */
.section-head h2{font-size:clamp(24px,3vw,34px); margin:0 0 6px}
.section-head p{color:var(--muted); margin:0 0 22px}

/* ========== Programs / Cards ========== */
.programs{padding:44px 0}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.card{background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.program__title{margin:0 0 8px}
.program__bullets{height: 12vh; margin:0 0 16px; padding-left:18px}

/* ========== Process / Steps ========== */
.process{padding:44px 0; background:var(--tone)}
.steps{counter-reset:st; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; list-style:none; margin:0; padding:0}
.step{background:#fff; border:1px solid var(--stroke); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.step__num{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff; font-weight:700; margin-bottom:10px}

/* ========== Services ========== */
.services{padding:44px 0}
.grid{display:grid; gap:16px}
.services__grid{grid-template-columns:repeat(4,1fr)}
.service p{color:var(--muted); margin:.25rem 0 0}

/* ========== Cases ========== */
.cases{padding:44px 0; background:var(--tone)}
.cases__list{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.case__media img{border-radius:12px}
.case__body h3{margin:.25rem 0}

/* ========== Blog ========== */
.blog{padding:44px 0}
.blog__grid{grid-template-columns:repeat(3,1fr)}
.post__thumb img{border-radius:12px}
.post__title{margin:.5rem 0 .25rem}
.post__excerpt{color:var(--muted); margin:0}

/* ========== CTA Stripe ========== */
.cta{background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#fff}
.cta__inner{display:grid; gap:12px; align-items:center; grid-template-columns:1fr auto; padding:28px 16px}
.cta h2{margin:0}
.cta p{margin:0; opacity:.95}

/* ========== Consult Form ========== */
.consult{padding:44px 0; background:var(--tone)}
.form__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.form__field{display:grid; gap:6px}
.form__field--full{grid-column:1 / -1}
label{font-weight:600}
input, textarea{
  width:100%; border:1px solid var(--stroke); border-radius:12px; padding:12px 14px; font:inherit; background:#fff
}

input:focus, textarea:focus{outline:2px solid color-mix(in oklab, var(--brand) 30%, transparent)}
.checkbox{display:flex; gap:10px; align-items:center}
.form--invalid input:invalid, .form--invalid textarea:invalid{border-color:#ef4444}

/* ========== Contacts ========== */
.contacts{padding:44px 0}
.contacts__grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
.contacts__list{margin:0 0 12px; padding-left:0; list-style:none}
.contacts__map{width:100%; min-height:320px; border:1px solid var(--stroke); border-radius:12px}

/* ========== Footer ========== */
.site-footer{border-top:1px solid var(--stroke); background:#fff}
.footer__grid{display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:16px; padding:28px 16px}
.footer__nav ul, .footer__legal ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.copyright{color:var(--muted); margin:.5rem 0 0}

/* ===== Promo tiles ===== */
.promo{ padding: 36px 0; }
.promo__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.promo__tile{
  position:relative;
  border-radius: var(--radius);
  padding:20px;
  color:#fff;
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height: 220px;
  display:flex; flex-direction:column; gap:10px;
  border:1px solid rgba(255,255,255,.12);
}
.promo__tile .btn{ align-self:flex-start; background:#fff; color:#0f172a; }
.promo__icon{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:12px; background:rgba(255,255,255,.18);
  backdrop-filter: blur(2px);
}
.promo__tile h3{ margin:6px 0 4px; font-size:clamp(18px,2.2vw,22px); }
.promo__tile p{ margin:0 0 8px; color:rgba(255,255,255,.95); }

/* Красочные фоны */
.promo__tile--maternity{
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, #F97316, #FB7185 55%, #E879F9);
}
.promo__tile--life{
  background:
    radial-gradient(800px 300px at 100% 0%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(135deg, #22c55e, #16a34a 50%, #0ea5e9);
}
.promo__tile--travel{
  background:
    radial-gradient(900px 300px at 0% 100%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(135deg, #0ea5e9, #2563eb 55%, #7c3aed);
}

/* Hover-эффект */
.promo__tile:hover{ transform: translateY(-2px); transition:.2s ease; }
.promo__tile:hover .btn{ filter:brightness(1.05); }

.note{
  padding:12px 14px; border-radius:12px; background:#f1f5f9; border:1px solid var(--stroke);
  margin:12px 0;
}
.note--warn{ background:#fff7ed; border-color:#fed7aa; }

.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{
  position:relative; padding-left:22px; margin:8px 0;
}
.timeline li::before{
  content:""; position:absolute; left:6px; top:.6em;
  width:8px; height:8px; border-radius:50%; background:var(--brand);
}
.cta-in-article{
  margin-top:24px; padding:16px; background:var(--tone);
  display:grid; gap:8px;
}

/* Хлебные крошки */
.breadcrumbs { color:#e2e8f0; }
.breadcrumbs a{ color:#fff; text-decoration:underline; }


.table-wrap{ overflow:auto; border:1px solid var(--stroke); border-radius:12px; }
.tbl{ width:100%; border-collapse:separate; border-spacing:0; min-width:720px; }
.tbl th, .tbl td{ padding:12px 14px; border-bottom:1px solid var(--stroke); }
.tbl thead th{ background:#f8fafc; text-align:left; font-weight:700; }
.tbl tr:last-child td{ border-bottom:none; }

.breadcrumbs{ color:#e2e8f0; }
.breadcrumbs a{ color:#fff; text-decoration:underline; }

.cta-in-article{ background:var(--tone); display:grid; gap:8px; }


.toc-card{
   position: sticky;
  top: calc(var(--header-h) + 16px);
  align-self: start;
  height: max-content;                       /* ровно по контенту */
  max-height: calc(100vh - var(--header-h) - 24px);
  overflow: auto;         
}
.toc-mobile-head{ display:none; }



.footer__grid > *{
  min-width: 0;                 /* позволяет колонкам сжиматься внутри grid */
}

.footer__brand .logo,
.footer__brand .logo img{
  max-width: 180px;             /* логотип не шире контейнера */
  height: auto;
}

/* перенос длинных строк в ссылках/тексте футера */
.footer__nav, .footer__legal{
  word-break: break-word;
  overflow-wrap: anywhere;
}


/* ========== /* Адаптив */ ========== */
@media (max-width: 1100px){
	 .promo__grid{ grid-template-columns: repeat(2,1fr); }
  .cards{grid-template-columns:repeat(2,1fr)}
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .blog__grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 880px){
	.toc{ font-size:.95rem; }
  .features__grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr; gap:12px}
  .cases__list{grid-template-columns:1fr}
  .contacts__grid{grid-template-columns:1fr}
  .cta__inner{grid-template-columns:1fr; text-align:center}
}
@media (max-width: 720px){
	.breadcrumbs{ color:#f8fafc; }
	.promo__grid{ grid-template-columns: 1fr; }
  .promo{ padding: 28px 0; }
  .site-header{
    z-index: 1000;
    background: #fff;          /* убираем просвечивание */
    backdrop-filter: none;     /* на мобилке не нужен blur */
    height: var(--header-h);
  }
  .nav{ z-index: 1100; }        /* фикс-меню поверх всего */
  .nav-toggle{
    display:inline-grid; place-items:center;
    width:42px; height:42px; border:1px solid var(--stroke); border-radius:10px;
    background:#fff; position:relative; z-index:1200;
  }
  .nav{
    position:fixed; left:0; right:0;
    top: calc(var(--header-h) + var(--safe-top)); bottom:0;
    background:#fff; z-index:1100;
    transform: translateY(-100%); transition: transform .25s ease;
    flex-direction:column; padding:16px; overflow:auto;
    box-shadow: 0 20px 40px rgba(2,6,23,.15);
  }
  .nav--open{ transform: translateY(0); }
   /* Бэкдроп под меню, чтобы не просвечивал hero */
  .nav::before{
    content:""; position:fixed; left:0; right:0;
    top: calc(var(--header-h) + var(--safe-top)); bottom:0;
    background: rgba(15,23,42,.45);
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .nav--open::before{ opacity:1; pointer-events:auto; }
  .nav__list{ flex-direction:column; gap:6px; }
  .nav__cta{ width:100%; justify-content:stretch; }
  .nav__cta .btn{ width:100%; }
	
   
	
	
  .hero{ padding-top: 64px; height: 50vh; }
  .hero__bg{ width: 100%;
  height: 50vh;          /* 56% от высоты экрана */
  object-fit: cover;
  object-position: center;
  display: block;}                   /* компактнее баннер */
  .hero__content{ padding: 20px 16px 28px; }

  /* Сетка: один столбец, сначала контент, потом оглавление */
  .container > .grid{
	  align-items: start;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

 

  /* Чтобы контент не прыгал */
  .container[style*="padding:32px 16px"]{ padding: 16px !important; }

  /* Карточки — в одну колонку, кнопки на всю ширину */
  .cards{ grid-template-columns: 1fr !important; }
  .btn.btn--primary, .btn.btn--outline, .btn.btn--secondary{ width:100%; }

  /* Таблицы — скролл внутрь рамки */
  .table-wrap{ border-radius: 10px; }

  /* Крошки — немного меньше и с лёгкой тенью для читаемости */
  .breadcrumbs{ font-size: .95rem; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
    /* фолбэк */

  
  .features__grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .blog__grid{grid-template-columns:1fr}
  .form__grid{grid-template-columns:1fr}
	
	
  
.toc-mobile-head{ display:block; }

  /* оглавление не липнет и не фиксируется */
  [data-toc-aside],
  .toc-card{
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
	
	
	
  /* аккордеон: закрыто по умолчанию, открывается классом .is-open */
  #mobile-toc{
    overflow: hidden;
    max-height: 0;
    transition: max-height .28s ease;
  }
  #mobile-toc.is-open{
    max-height: 80vh; /* можно подкорректировать */
  }
	
	
	
	
	
  #mobile-toc[hidden]{
    display: none !important; /* скрываем целиком */
  }
  /* когда открыт — даём «карточке» нормальные отступы */
 
  /* Аккордеон: по умолчанию закрыт */
  #mobile-toc{
    overflow: hidden;
    max-height: 0;
    transition: max-height .28s ease;
  }
  /* Когда открыт — высоту ставим из JS (scrollHeight) */
  #mobile-toc.is-open{
    /* max-height задаётся скриптом */
  }
	 .footer__grid{
    grid-template-columns: 1fr; /* одна колонка */
    gap: 12px;
  }
  .footer__brand p{
    margin: 8px 0 0;
  }
  .footer__nav ul, .footer__legal ul{
    gap: 6px;
  }
	
	
	
	
	
}

@media (min-width: 721px){
  .toc-mobile-head{ display: none; }
}






.nav-toggle{
  display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--stroke);
  background:#fff; position:relative; z-index:1400;
}
.nav-toggle__bar{
  display:block; width:22px; height:2px; background:#0f172a;
  box-shadow:0 6px 0 #0f172a, 0 -6px 0 #0f172a; margin:0 auto;
}

/* Оверлей */
.nav-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.45);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:1300;
}

/* Панель */
.nav-drawer{
  position:fixed; left:0; right:0;
  top: calc(var(--header-h) + var(--safe-top)); /* ниже шапки */
  /* Фолбэк + корректные единицы высоты */
  min-height: calc(100vh - var(--header-h) - var(--safe-top));
  height:  calc(100svh - var(--header-h) - var(--safe-top));
  background:#fff; z-index:1350; transform: translateY(-102%);
  transition: transform .28s ease; box-shadow: 0 20px 40px rgba(2,6,23,.18);
  overflow:hidden;
}
@supports (height: 100dvh){
  .nav-drawer{ height: calc(100dvh - var(--header-h) - var(--safe-top)); }
}
.nav-drawer__inner{
  height:100%; overflow:auto; padding:16px;
  display:flex; flex-direction:column; gap:16px;
}
.nav-drawer .nav__list{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;
}
.nav-drawer .nav__list a{
  display:block; padding:12px 10px; color:var(--ink); border-radius:10px;
}
.nav-drawer .nav__list a:hover{ background:#f1f5f9; }
.nav-drawer .nav__cta{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; }
.nav-close{
  align-self:flex-end; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--stroke); background:#fff; font-size:18px;
}

/* Состояния «открыто» */
.nav-open .nav-overlay{ opacity:1; pointer-events:auto; }
.nav-open .nav-drawer{ transform: translateY(0); }
.nav-open .nav-toggle{ position:fixed; top: calc(10px + var(--safe-top)); right:16px; } /* всегда доступна */

/* Блокируем фон при открытом меню */
body.no-scroll{
  position:fixed; inset:0; width:100%; overflow:hidden;
  touch-action:none; overscroll-behavior:contain;
}

/* Десктоп */
@media (min-width: 960px){
  .nav-drawer, .nav-overlay{ display:none !important; }
  .nav-toggle{ display:none !important; }
  /* ваша старая десктопная навигация остаётся в хедере — можно вывести её отдельно, если нужно */
}

/* Мобильный breakpoint */
@media (max-width: 959px){
  .nav-toggle{ display:inline-grid; place-items:center; }
}

/* --- Desktop nav (горизонтальная) --- */
.nav-desktop{
  display:none;          /* по умолчанию скрыта (мобилки) */
  align-items:center;
  gap:24px;
  margin-left:auto;
}
.nav-desktop__list{
  display:flex; gap:18px; list-style:none; margin:0; padding:0;
}
.nav-desktop__list a{
  color:var(--ink); padding:10px 8px; border-radius:8px; text-decoration:none;
}
.nav-desktop__list a:hover{ background:#f1f5f9; }
.nav-desktop__cta{ display:flex; gap:14px; }

/* брейкпоинты */
@media (min-width: 960px){
  .nav-desktop{ display:flex; }
  /* бургер и мобильный drawer на десктопе не нужны */
  .nav-toggle{ display:none !important; }
  .nav-drawer, .nav-overlay{ display:none !important; }
}
@media (max-width: 959px){
  .nav-desktop{ display:none; }
}





body.no-scroll {
  position: fixed;     /* фиксируем вьюпорт */
  inset: 0;            /* сверху/снизу/слева/справа 0 */
  width: 100%;
  overflow: hidden;
}
#mobile-toc { overflow: visible; }