/* РЕЗОН — общий стиль сайта. Цвета и шрифты строго из брендбука 2025:
   #003D4F основной, #0D4252 светлее основного, #85858D серый, #F3F6F6 серо-белый, #FFFFFF,
   #C8571F акцент — только точечно в графике, никогда на кнопках и ссылках.
   STIX Two Text — заголовки, Mulish — текст. */

:root{
  --teal:#003D4F; --teal-2:#0D4252; --teal-line:#21566a; --teal-soft:#a9c1c9;
  --gray:#85858D; --paper:#F3F6F6; --white:#fff; --orange:#C8571F;
  --ink:#15303a; --text:#33464d; --rule:#dfe6e8;
  --serif:'STIX Two Text', Georgia, serif;
  --sans:'Mulish', system-ui, sans-serif;
  --wrap:1180px; --gut:clamp(16px,4vw,40px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--text);font:400 17px/1.65 var(--sans);font-feature-settings:"kern","liga"}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--ink);letter-spacing:-.005em;margin:0}
h1{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.1}
h2{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.15}
h3{font-size:1.3rem;line-height:1.3}
p{margin:0 0 1em}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.6;max-width:36em}

/* ---------- шапка ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--teal);color:#fff;border-bottom:1px solid var(--teal-line)}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:92px}
.top .logo{flex:none;display:block;width:clamp(190px,18vw,250px)}
.top nav{display:flex;gap:22px;margin-left:auto;font-size:.95rem}
.top nav a{text-decoration:none;color:#d7e3e7;padding:6px 0;border-bottom:1px solid transparent}
.top nav a:hover,.top nav a[aria-current]{color:#fff;border-bottom-color:currentColor}
.top .tel{flex:none;text-decoration:none;font-weight:700;white-space:nowrap}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--teal-line);color:#fff;font:600 .95rem var(--sans);padding:9px 14px;border-radius:2px;cursor:pointer}
@media (max-width:1060px){
  .top nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--teal);padding:8px var(--gut) 20px;border-bottom:1px solid var(--teal-line)}
  .top nav a{padding:12px 0;border-bottom:1px solid var(--teal-line);font-size:1.05rem}
  .top.open nav{display:flex}
  .menu-btn{display:block}
  .top .tel{display:none}
  .top .wrap{min-height:76px}
  .top .logo{width:200px}
}

/* ---------- кнопки: белые и контурные, без оранжевого ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;font:700 1rem var(--sans);text-decoration:none;border-radius:2px;border:1px solid transparent;transition:background .2s,color .2s}
.btn-white{background:#fff;color:var(--teal)}
.btn-white:hover{background:var(--paper)}
.btn-line{border-color:rgba(255,255,255,.55);color:#fff}
.btn-line:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-2)}

/* ---------- первый экран: фото в фирменной дуге ---------- */
.hero{position:relative;background:var(--teal);color:#fff;overflow:hidden}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;min-height:min(640px,calc(100vh - 92px))}
.hero-text{position:relative;z-index:2;align-self:center;padding:72px 0 96px}
.hero h1{color:#fff;max-width:13em}
.hero .lead{color:#c9d8dd;margin:22px 0 36px}
.paths{display:flex;flex-wrap:wrap;gap:12px}
.hero-note{margin:22px 0 0;font-size:.95rem;color:var(--teal-soft)}
.hero-note a{color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.hero-photo{position:relative;margin-right:calc(-1 * var(--gut) - max(0px,(100vw - var(--wrap)) / 2))}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 22%;
  clip-path:ellipse(100% 160% at 100% -20%)}
.hero-sign{position:absolute;right:var(--gut);bottom:150px;text-align:right;z-index:2}
.hero-sign small{display:block;font-size:.85rem;color:var(--teal)}
.hero-sign b{font:500 1.6rem/1.1 var(--serif);color:var(--teal)}
/* нижняя дуга: светлый модуль «вырастает» из тёмного */
.hero-arc{position:absolute;left:0;right:0;bottom:-1px;height:110px;z-index:3;pointer-events:none}
.hero-arc path{fill:var(--paper)}
.hero-arc .arc-line{fill:none;stroke:var(--orange);stroke-width:2}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;min-height:0}
  .hero-photo{order:-1;height:92vw;max-height:520px;margin:0 calc(-1 * var(--gut))}
  .hero-photo img{clip-path:ellipse(140% 100% at 70% 0%);object-position:50% 12%}
  .hero-sign{bottom:22px}
  .hero-text{padding:36px 0 56px}
  .hero-arc{height:60px}
}

/* ---------- секции ---------- */
.section{padding:clamp(64px,9vw,112px) 0}
.section--paper{background:var(--paper)}
.section--teal{background:var(--teal);color:#c9d8dd}
.section--teal h2,.section--teal h3{color:#fff}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:48px}
.section-head p{margin:0;max-width:34em}
@media (max-width:860px){.section-head{grid-template-columns:1fr}}

/* модульная сетка направлений: строгие ячейки на волосяных линиях */
.grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.grid--2,.grid--3{grid-template-columns:1fr}}
.cell{background:#fff;padding:clamp(26px,3vw,40px);text-decoration:none;display:flex;flex-direction:column}
a.cell:hover{background:#fbfcfc}
a.cell:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cell h3{margin-bottom:10px}
.cell p{margin:0;font-size:.98rem}
.cell .more{margin-top:auto;padding-top:22px;font-weight:700;color:var(--teal);font-size:.95rem}
/* оранжевый квадрат — точечный акцент из знака логотипа */
.mark{width:10px;height:10px;background:var(--orange);margin-bottom:22px;flex:none}

/* аудитория: две колонки ситуаций */
.audience{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.audience > div{background:#fff;padding:clamp(28px,3.4vw,48px)}
.audience h3{font-size:1.6rem;margin-bottom:6px}
.audience .sub{color:var(--gray);margin-bottom:24px}
.list{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--rule)}
.list li{border-bottom:1px solid var(--rule)}
.list a,.list span{display:block;padding:13px 0;text-decoration:none;color:var(--ink)}
.list a:hover{color:var(--teal);text-decoration:underline;text-underline-offset:4px}
@media (max-width:860px){.audience{grid-template-columns:1fr}}

/* медиация */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.quote{font:400 clamp(1.4rem,2.4vw,1.9rem)/1.35 var(--serif);color:#fff;margin:0 0 28px;padding-left:24px;border-left:2px solid var(--orange)}

/* об основателе */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,88px);align-items:center}
.about-photo{position:relative}
.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-top-right-radius:60% 45%}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:28px 0}
.facts div{background:#fff;padding:20px 22px}
.facts b{display:block;font:500 1.9rem/1.1 var(--serif);color:var(--teal)}
.facts span{font-size:.92rem}
@media (max-width:860px){.about{grid-template-columns:1fr}.about-photo{max-width:420px}}

/* пустое состояние ленты */
.empty{border:1px dashed #c5d2d6;padding:clamp(26px,3vw,40px);background:#fff}
.empty p{max-width:40em}

/* контакты */
.contacts{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,96px)}
.contact-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--teal-line)}
.contact-list li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--teal-line)}
.contact-list span{color:var(--teal-soft);font-size:.92rem}
.contact-list a{color:#fff;text-decoration:none;font-weight:600}
.contact-list a:hover{text-decoration:underline}
@media (max-width:860px){.contacts{grid-template-columns:1fr}.contact-list li{grid-template-columns:1fr;gap:2px}}

/* подвал */
.foot{background:var(--teal-2);color:var(--teal-soft);font-size:.9rem;padding:48px 0 36px}
.foot .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
.foot a{color:#d7e3e7;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot nav{display:flex;flex-direction:column;gap:8px}
.foot .logo{width:200px;margin-bottom:16px}
.foot .legal{grid-column:1/-1;line-height:1.7;border-top:1px solid var(--teal-line);padding-top:20px;font-size:.82rem}
@media (max-width:860px){.foot .wrap{grid-template-columns:1fr}}

/* ---------- внутренняя страница ---------- */
.page-hero{position:relative;background:var(--teal);color:#c9d8dd;padding:56px 0 120px;overflow:hidden}
.page-hero h1{color:#fff;max-width:15em;margin:14px 0 20px}
.crumbs{font-size:.9rem;color:var(--teal-soft)}
.crumbs a{color:var(--teal-soft)}
.page-hero .hero-arc path{fill:#fff}
.page-hero .ghost{position:absolute;right:-6vw;top:-30%;width:min(52vw,640px);aspect-ratio:1;border-radius:50%;border:clamp(40px,7vw,90px) solid var(--teal-2);pointer-events:none}
.page-hero .wrap{position:relative;z-index:2}

.prose{max-width:44em}
.prose h2{margin:0 0 20px}
.prose p,.prose li{max-width:40em}
.prose ul{padding-left:1.1em;margin:0 0 1em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--orange)}

.steps{list-style:none;margin:0;padding:0;counter-reset:s;border-top:1px solid var(--rule)}
.steps li{counter-increment:s;display:grid;grid-template-columns:72px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--rule)}
.steps li::before{content:counter(s);font:500 2rem/1 var(--serif);color:var(--orange)}
.steps h3{margin-bottom:6px}
.steps p{margin:0;max-width:40em}

.compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.compare > div{background:#fff;padding:clamp(26px,3vw,40px)}
.compare h3{margin-bottom:14px}
.compare dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:.98rem}
.compare dt{color:var(--gray)}
.compare dd{margin:0;color:var(--ink)}
@media (max-width:860px){.compare{grid-template-columns:1fr}.compare dl{grid-template-columns:1fr;gap:2px}.compare dd{margin-bottom:10px}}

.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.note{font-size:.88rem;color:var(--gray);max-width:44em}

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

/* ---------- четыре главных входа ---------- */
.doors{position:relative;z-index:4;background:linear-gradient(var(--teal) 0 96px,var(--paper) 96px);padding:1px 0 clamp(56px,7vw,88px)}
.doors-grid{display:grid;grid-template-columns:1.55fr repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);
  box-shadow:0 30px 60px -30px rgba(0,40,52,.35)}
.door{background:#fff;padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;text-decoration:none;min-height:300px}
.door h3{font-size:clamp(1.5rem,2vw,1.85rem);margin-bottom:12px}
.door p{margin:0 0 22px;font-size:.97rem}
.door .more{margin-top:auto;padding-top:22px;font-weight:700;color:var(--teal);font-size:.95rem}
a.door:hover{background:#fbfcfc}
a.door:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.door-links{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.door-links a{font-weight:700;color:var(--teal);text-decoration:none;padding:9px 0;font-size:.95rem;border-bottom:1px solid var(--rule)}
.door-links a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:1060px){.doors-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.door{min-height:0}}
@media (max-width:860px){.doors{background:linear-gradient(var(--teal) 0 48px,var(--paper) 48px)}}
@media (max-width:560px){.doors-grid{grid-template-columns:1fr}}

.facts-row{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:1fr .72fr 1fr 1.38fr;gap:24px}
.facts-row li{font-size:.95rem;line-height:1.45;padding-top:16px;border-top:2px solid var(--teal)}
.facts-row b{display:block;font:500 1.45rem/1.2 var(--serif);color:var(--teal);margin-bottom:4px}
@media (max-width:860px){.facts-row{grid-template-columns:repeat(2,minmax(0,1fr))}.facts-row li:last-child{grid-column:1/-1}}
@media (max-width:560px){.facts-row{grid-template-columns:1fr;gap:18px}}

.steps--row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;border-top:0}
.steps--row li{grid-template-columns:1fr;align-content:start;gap:14px;border-bottom:0;border-top:1px solid var(--rule);padding-top:22px}
@media (max-width:860px){.steps--row{grid-template-columns:1fr}.steps--row li{grid-template-columns:56px 1fr}}

/* главный вход — бизнес: шире остальных, ссылки на услуги вместо описания */
.door--main h3 a{color:inherit;text-decoration:none}
.door--main h3 a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
@media (max-width:1060px){.doors-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.door--main{grid-column:1/-1}}
@media (max-width:560px){.doors-grid{grid-template-columns:1fr}}

.biz-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--teal-line)}
.biz-list li{padding:20px 0;border-bottom:1px solid var(--teal-line)}
.biz-list h3{font-size:1.2rem;margin-bottom:6px}
.biz-list p{margin:0;font-size:.97rem}

.kicker{margin:0 0 8px;color:var(--gray);font-size:.95rem}
.about-facts{display:grid;grid-template-columns:auto 1fr;gap:12px 24px;margin:28px 0 0;padding-top:22px;border-top:1px solid var(--rule);font-size:.95rem}
.about-facts dt{font-weight:700;color:var(--teal)}
.about-facts dd{margin:0}
@media (max-width:560px){.about-facts{grid-template-columns:1fr;gap:2px}.about-facts dd{margin-bottom:12px}}