/* ==========================================================
   timochko.if.ua — статичний сайт
   Лікар невролог-вертебролог Тимочко Ростислав Орестович
   ========================================================== */

:root{
  --navy:#0d4980;
  --teal-a:#2d7d92;
  --teal-b:#2c5c8a;
  --orange:#fd9802;
  --cond:#05748b;
  --link:#2c74b5;
  --ink:#252525;
  --gray:#efefef;
  --wrap:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Alegreya Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
h1,h2,h3{margin:0}
.oswald{font-family:"Oswald",sans-serif;font-style:italic;font-weight:500;text-transform:uppercase}

/* ---------- Header ---------- */
header.site{
  background:#fff;position:sticky;top:0;z-index:100;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
}
.header-inner{
  max-width:var(--wrap);margin:0 auto;padding:10px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.logo{height:64px;width:auto;flex:none;object-fit:contain}
.header-contact{display:flex;align-items:center;gap:60px;flex:1;justify-content:center;font-size:24px}
.header-contact .phone{display:inline-flex;align-items:center;gap:10px;color:var(--ink);white-space:nowrap}
.header-contact .phone svg{width:22px;height:22px;color:var(--link)}
.header-contact .city{white-space:nowrap}
@media(max-width:820px){
  .header-inner{flex-wrap:wrap;justify-content:center;gap:10px}
  .header-contact{gap:24px;font-size:19px;flex-basis:100%;order:3}
  .logo{height:54px}
}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(rgba(13,50,90,.35),rgba(13,50,90,.35)),
    url('/images/bg/blue-yellow-bg.jpg');
  background-size:cover;background-position:center;
  min-height:82vh;display:flex;align-items:center;
}
.hero .wrap{width:100%;padding-top:60px;padding-bottom:60px}
.hero .intro{color:#fff;font-size:24px;max-width:640px;margin-bottom:18px;line-height:1.35}
.hero h1{color:#fff;font-size:clamp(52px,9vw,100px);line-height:.95;letter-spacing:1px}
.hero h2{color:#fff;font-size:clamp(34px,6vw,63px);line-height:1;margin-top:4px;letter-spacing:1px}
.hero ul{list-style:none;padding:0;margin:26px 0 0}
.hero ul li{display:flex;align-items:center;gap:12px;color:#fff;font-size:24px;margin:10px 0}
.hero ul li svg{width:24px;height:24px;flex:none;color:var(--orange)}
.hero .heronum{
  display:inline-flex;align-items:center;gap:14px;color:#fff;font-size:clamp(30px,5vw,42px);
  margin-top:34px;font-weight:400;
}
.hero .heronum svg{width:38px;height:38px;color:#fff}

/* ---------- Section base ---------- */
section{padding:64px 0}
.sec-title{
  color:var(--navy);font-size:clamp(26px,3.4vw,38px);line-height:1.1;margin-bottom:8px;
}
.about-title{text-align:left;margin-bottom:40px}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:50px;align-items:center}
.about-grid img{width:100%;border-radius:2px}
.about-body p{margin:0 0 16px}
.about-body strong{font-weight:700}
.about-body .name{font-family:"Oswald",sans-serif;font-style:italic;text-transform:uppercase;
  font-size:clamp(24px,3vw,32px);color:var(--navy);line-height:1.15;margin-bottom:6px}
.about-body .role{font-size:21px;color:var(--cond);margin-bottom:18px}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:26px}}

/* ---------- Symptoms ---------- */
.symptoms{background:linear-gradient(100deg,var(--teal-a) 0%,var(--teal-b) 100%)}
.symptoms .sec-title{color:#e2ebf3;text-align:left;margin-bottom:44px}
.col3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 40px}
.symptoms .col3 .item{display:flex;align-items:flex-start;gap:12px;color:#fff;font-size:23px;padding:8px 0}
.symptoms .col3 .item .tri{color:var(--orange);flex:none;margin-top:4px}
.tri{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid currentColor;display:inline-block}
@media(max-width:860px){.col3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.col3{grid-template-columns:1fr}}

/* ---------- Conditions ---------- */
.cond-head .sec-title{text-align:left}
.conditions{padding-top:24px}
.conditions .col3 .item{display:flex;align-items:flex-start;gap:12px;color:var(--ink);font-size:22px;padding:10px 0}
.conditions .col3 .item svg{width:24px;height:24px;flex:none;color:var(--cond);margin-top:2px}

/* ---------- Method ---------- */
.method{background:var(--gray);position:relative;padding-top:90px;padding-bottom:90px;margin-top:20px}
.wave-top{position:absolute;top:-1px;left:0;width:100%;line-height:0;transform:translateY(-99%)}
.wave-top svg{width:100%;height:70px;display:block}
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.method-text{display:flex;gap:14px;align-items:flex-start;font-style:italic;font-size:23px;color:var(--ink)}
.method-text .tri{color:var(--link);margin-top:8px}
.method-grid img{width:100%;border-radius:4px;box-shadow:0 12px 30px rgba(0,0,0,.15)}
@media(max-width:860px){.method-grid{grid-template-columns:1fr;gap:24px}}

/* ---------- Quote / MRI ---------- */
.quote .sec-title{text-align:center;margin-bottom:26px}
.quote .body{max-width:1000px;margin:0 auto;text-align:left}
.quote .body p{margin:0 0 16px}
.quote .pull{
  border-left:5px solid var(--orange);padding:14px 0 14px 22px;margin:26px 0 0;
  font-family:"Oswald",sans-serif;font-style:italic;font-size:clamp(20px,2.6vw,27px);
  color:var(--navy);line-height:1.25;
}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(100deg,var(--teal-a) 0%,var(--teal-b) 100%);text-align:center}
.cta h2{color:#fff;margin-bottom:18px}
.cta .btn{
  display:inline-flex;align-items:center;gap:14px;background:var(--orange);color:#fff;
  font-size:clamp(26px,4vw,38px);padding:14px 34px;border-radius:6px;
  box-shadow:0 8px 22px rgba(0,0,0,.2);
}
.cta .btn svg{width:32px;height:32px}
.cta .btn:hover{filter:brightness(1.07)}

/* ---------- Locations ---------- */
.locations .sec-title{text-align:center;margin-bottom:44px}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.loc{
  border:1px solid #e3e3e3;border-radius:6px;padding:26px 24px;text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
}
.loc .city{font-weight:700;font-size:25px;color:var(--navy)}
.loc p{margin:6px 0;font-size:21px}
.loc .mapicon{width:40px;height:40px;color:var(--navy);margin:18px auto 14px}
.loc .route{color:var(--link);font-size:20px;display:inline-block}
.loc .route:hover{text-decoration:underline}
@media(max-width:860px){.loc-grid{grid-template-columns:1fr}}
.mapimg{margin-top:38px}
.mapimg img{width:100%;border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.12)}

/* ---------- Reviews ---------- */
.reviews{
  background:linear-gradient(rgba(13,50,90,.72),rgba(13,50,90,.72)),
    url('/images/bg/adobestock_202179910.jpeg');
  background-size:cover;background-position:center;text-align:center;
}
.reviews .sec-title{color:#fff;text-align:center;margin-bottom:14px}
.reviews p{color:#e6eef6;max-width:760px;margin:0 auto 34px;font-size:21px}
.social{display:flex;gap:40px;justify-content:center;align-items:center;flex-wrap:wrap}
.social img{height:64px;width:auto;border-radius:6px;background:#fff;padding:6px}
.social a:hover img{filter:brightness(1.08)}

/* ---------- Articles ---------- */
.articles .sec-title{text-align:center;margin-bottom:44px}
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.card{
  border:1px solid #e6e6e6;border-radius:6px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s;
}
.card:hover{box-shadow:0 12px 28px rgba(0,0,0,.13);transform:translateY(-3px)}
.card img{width:100%;height:190px;object-fit:cover}
.card .card-body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:21px;line-height:1.25;color:var(--navy);margin-bottom:10px;font-weight:700}
.card p{font-size:17px;color:#4a4a4a;margin:0 0 16px;flex:1}
.card .more{color:var(--link);font-size:17px;font-weight:700}
@media(max-width:960px){.art-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.art-grid{grid-template-columns:1fr}}

/* ---------- Partners ---------- */
.partners{padding-top:30px}
.partners .sec-title{text-align:center;font-size:clamp(20px,2.4vw,26px);margin-bottom:30px;color:#7a7a7a}
.plogos{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;align-items:center}
.plogos img{width:100%;max-width:180px;margin:0 auto;filter:grayscale(1);opacity:.75}
.plogos img:hover{filter:none;opacity:1}
@media(max-width:700px){.plogos{grid-template-columns:1fr 1fr}}

/* ---------- Article page ---------- */
.crumbs{font-size:16px;color:#777;padding:22px 0 0}
.crumbs a{color:var(--link)}
.crumbs a:hover{text-decoration:underline}
.article{padding-top:26px;padding-bottom:70px}
.article .lead-img{width:100%;max-height:430px;object-fit:cover;border-radius:5px;margin-bottom:30px}
.article h1{
  font-family:"Oswald",sans-serif;font-style:italic;text-transform:uppercase;font-weight:500;
  color:var(--navy);font-size:clamp(28px,4.2vw,44px);line-height:1.1;margin-bottom:26px;
}
.article-body{max-width:900px}
.article-body h2,.article-body h3{
  color:var(--navy);font-size:clamp(21px,2.6vw,27px);margin:34px 0 12px;line-height:1.25;
}
.article-body h4{color:var(--cond);font-size:20px;margin:24px 0 10px}
.article-body p{margin:0 0 16px}
.article-body ul,.article-body ol{margin:0 0 18px;padding-left:24px}
.article-body li{margin-bottom:10px}
.article-body li p{margin:0 0 6px}
.article-body strong{font-weight:700}
.article-body blockquote{
  margin:24px 0;padding:16px 22px;background:var(--gray);border-left:5px solid var(--orange);
  border-radius:0 4px 4px 0;
}
.article-body blockquote p{margin:0}
.article-body img{border-radius:4px;margin:20px 0}
.article-nav{margin-top:44px;display:flex;gap:18px;flex-wrap:wrap}
.article-nav a{
  display:inline-block;border:1px solid var(--link);color:var(--link);
  padding:10px 22px;border-radius:4px;font-size:18px;
}
.article-nav a:hover{background:var(--link);color:#fff}

/* ---------- Footer ---------- */
footer.site{
  background:linear-gradient(100deg,var(--teal-a) 0%,var(--teal-b) 100%);
  color:#eaf1f7;text-align:center;padding:26px 20px;font-size:18px;line-height:1.5;
}
footer.site a{color:#fff;text-decoration:underline}

/* ---------- Scroll top ---------- */
.scrolltop{
  position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;
  background:#8a8a8a;color:#fff;display:none;place-items:center;z-index:120;
  box-shadow:0 4px 12px rgba(0,0,0,.25);cursor:pointer;opacity:.9;
}
.scrolltop.show{display:grid}
.scrolltop svg{width:22px;height:22px}

.article-body .lead{
  font-size:21px;color:#3a3a3a;font-style:italic;
  border-left:4px solid var(--orange);padding-left:18px;margin:0 0 26px;
}