/* ============================================================
   Cervical hernia landing — built from Figma "PECTUS / Сайт_грижа"
   Palette: #235abe primary, #f3f7ff light, #c90b0b accent red
   ============================================================ */
:root{
  --blue:#235abe;
  --light:#f3f7ff;
  --red:#c90b0b;
  --divider:#e6edff;
  --navmuted:#a9c7ff;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;
  font-family:"Montserrat",sans-serif;
  color:#000;
  background:var(--light);
  overflow-x:clip;
}
/* height:auto keeps the aspect ratio now that every <img> carries width/height attrs */
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}
.container{max-width:1270px;margin:0 auto;padding:0 16px;}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* decorative outline circles */
.deco{position:relative;}
.deco::before,.deco::after{
  content:'';position:absolute;border-radius:50%;
  border:2px solid rgba(35,90,190,.55);pointer-events:none;
}
.deco--l::before{width:640px;height:640px;left:-460px;top:10%;}
.deco--r::after{width:720px;height:720px;right:-500px;top:30%;}
.deco--white::before,.deco--white::after{border-color:rgba(243,247,255,.5);}

/* ---------------- header ---------------- */
/* the whole header (top bar + blue row) stays pinned on scroll */
body > header{position:sticky;top:0;z-index:300;}
/* keep anchored sections visible below the pinned header */
section[id],[id="hernia"],[id="method"],[id="why"],[id="price"],[id="reviews"],[id="contact"],[id="gallery"],[id="home"]{scroll-margin-top:190px;}
.hd-top{background:var(--light);}
.hd-top-in{
  display:flex;align-items:center;justify-content:flex-start;gap:26px;
  padding:10px 16px;font-size:15px;font-weight:600;color:#1e1e1e;flex-wrap:wrap;
}
.hd-top-in .btn-red{margin-left:auto;}
.hd-top-in .hd-item{display:flex;align-items:center;gap:9px;}
.hd-top-in img{width:20px;height:20px;}
.hd-soc{display:flex;align-items:center;gap:12px;}
.hd-soc--main{display:none;}
.hd-soc--main img{width:22px;height:22px;}
.btn-red{
  display:inline-block;background:var(--red);color:#fff;text-align:center;
  border-radius:30px;font-weight:700;text-transform:uppercase;
  font-size:13px;line-height:1.25;padding:7px 20px;letter-spacing:.2px;
  transition:filter .2s;
}
.btn-red:hover{filter:brightness(1.12);}
.hd-main{background:var(--blue);}
.hd-main-in{display:flex;align-items:center;justify-content:space-between;min-height:78px;gap:20px;}
.hd-logo img{width:150px;}
.hd-nav{display:flex;align-items:center;gap:28px;}
.hd-nav a{
  color:var(--navmuted);font-size:14px;font-weight:600;text-transform:uppercase;
  letter-spacing:.3px;transition:color .2s;white-space:nowrap;
}
.hd-nav a:hover,.hd-nav a.active{color:#fff;}
.hd-lang{position:relative;}
.hd-lang > a{
  display:inline-flex;align-items:center;border:1px solid #fff;border-radius:17px;color:#fff;
  font-size:14px;font-weight:600;text-transform:uppercase;padding:4px 14px;cursor:pointer;
}
.hd-lang > a::after{
  content:'';display:inline-block;width:7px;height:7px;margin:-3px 0 0 7px;
  border-right:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(45deg);
}
.hd-lang ul{
  position:absolute;top:100%;right:0;background:#fff;border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.18);min-width:64px;display:none;z-index:400;
  padding:6px 0;
}
/* invisible hover bridge between the trigger and the dropdown */
.hd-lang::after{content:'';position:absolute;left:0;right:0;top:100%;height:12px;display:none;}
.hd-lang:hover::after{display:block;}
.hd-lang:hover ul,.hd-lang.open ul{display:block;}
.hd-lang ul a{display:block;padding:8px 16px;color:var(--blue);font-weight:700;font-size:14px;text-transform:uppercase;}
.hd-lang ul a:hover{background:var(--divider);}
.hd-burger{display:none;background:none;border:0;padding:6px;cursor:pointer;}
.hd-burger span{display:block;width:26px;height:3px;background:#fff;border-radius:2px;margin:5px 0;}

/* ---------------- hero ---------------- */
.hero{padding:0;}
.hero-video{
  position:relative;width:100%;max-width:1236px;margin:0 auto;
  aspect-ratio:16/9;background:#000;overflow:hidden;
  /* cap the height on short viewports so the <h1> block below still lands
     inside the first screen; width stays full and the iframe crops a bit more */
  max-height:max(280px,calc(100vh - 280px));
}
/* iframe is taller than the visible window: YT title bar (top) and controls (bottom)
   are cropped out; pointer-events off so hover never reveals the player UI */
.hero-video iframe{
  position:absolute;top:50%;left:50%;
  width:100%;height:calc(100% + 150px);
  transform:translate(-50%,-50%);
  border:0;pointer-events:none;
}

/* lead banner — overlaps the bottom of the video to hide its contact strip (as in Figma).
   Holds the visible <h1> + subtitle + CTA, so the main heading sits in the first screen. */
.lead-banner{
  background:var(--blue);border-top:4px solid #fff;
  margin-top:max(-10vw,-134px);position:relative;z-index:5;
}
.hero-copy{
  max-width:1040px;margin:0 auto;padding:30px 16px 34px;
  color:#fff;text-align:center;
}
.hero-copy h1{
  text-transform:uppercase;
  font-size:clamp(19px,2.4vw,36px);font-weight:800;line-height:1.15;
}
.hero-sub{
  margin-top:14px;color:#d7e4ff;
  font-size:clamp(13px,1.45vw,21px);font-weight:500;line-height:1.35;
}
.hero-cta{
  margin-top:22px;max-width:100%;
  font-size:clamp(11px,1.05vw,15px);line-height:1.3;
  padding:13px 30px;border:3px solid #a90505;
}

/* section heading pill */
.pill-h{
  display:table;margin:0 auto;text-align:center;
  border-radius:78px;padding:26px 52px;
  font-size:clamp(17px,2.2vw,38px);font-weight:800;text-transform:uppercase;
  line-height:1.05;position:relative;z-index:6;
}
.pill-h--blue{background:var(--blue);color:#fff;border:2px solid #fff;}
.pill-h--white{background:#fff;color:var(--blue);border:2px solid var(--blue);}
.pill-h--light{background:var(--light);color:var(--blue);border:2px solid var(--blue);}

/* ---------------- danger section ---------------- */
.danger{padding:34px 0 28px;position:relative;}
.danger-grid{
  display:grid;grid-template-columns:480px 1fr;grid-template-rows:auto 1fr;
  column-gap:60px;row-gap:0;max-width:1160px;margin:0 auto;
}
.danger-grid .h-blue{grid-column:2;align-self:start;margin:16px 0 26px;}
.danger-grid .ring-photo{grid-column:1;grid-row:1/3;align-self:center;}
.danger-grid .dotlist{grid-column:2;align-self:start;}
.ring-photo{position:relative;width:100%;max-width:440px;aspect-ratio:1;margin:0 auto;}
.ring-photo::before{content:'';position:absolute;inset:0;border:2px solid var(--blue);border-radius:50%;}
.ring-photo img{
  position:absolute;inset:26px;width:calc(100% - 52px);height:calc(100% - 52px);
  border-radius:50%;object-fit:cover;border:4px solid var(--blue);
}
.h-blue{
  color:var(--blue);text-transform:uppercase;font-weight:800;
  font-size:clamp(22px,2.6vw,33px);line-height:1.12;margin-bottom:30px;
}
.dotlist li{
  position:relative;padding-left:28px;margin-bottom:22px;
  font-size:clamp(16px,1.6vw,24px);font-weight:500;line-height:1.2;
}
.dotlist li::before{
  content:'';position:absolute;left:0;top:.32em;width:16px;height:16px;
  border-radius:50%;background:var(--blue);
}
.danger-alert{
  display:flex;align-items:center;gap:26px;max-width:1160px;margin:26px auto 0;
}
.danger-alert .mark-tri{flex-shrink:0;width:62px;height:auto;}
.danger-alert p{color:var(--blue);font-weight:700;font-size:clamp(15px,1.6vw,24px);line-height:1.25;}

/* ---------------- exams ---------------- */
.exams{padding:0;position:relative;}
.exams-head{position:relative;z-index:6;transform:translateY(50%);}
.exams-body{background:#fff;max-width:1240px;margin:0 auto;padding:90px 0 0;}
.exam-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;}
.exam-row .exam-img{width:100%;height:100%;object-fit:cover;aspect-ratio:619/260;}
.exam-txt{padding:30px 44px;}
.exam-txt h3{
  color:var(--blue);text-transform:uppercase;font-weight:700;
  font-size:clamp(19px,2vw,30px);line-height:1.1;margin-bottom:16px;
}
.exam-txt p{font-size:clamp(15px,1.6vw,24px);font-weight:500;line-height:1.25;}

/* ---------------- when surgery ---------------- */
.when{background:var(--blue);color:#fff;position:relative;overflow:hidden;}
.when-grid{display:grid;grid-template-columns:1fr 540px;gap:40px;align-items:stretch;max-width:1240px;margin:0 auto;}
.when-txt{padding:54px 0 54px;}
.when-txt h2{
  text-transform:uppercase;font-weight:800;font-size:clamp(22px,2.7vw,40px);
  margin-bottom:34px;
}
.checklist li{
  position:relative;padding-left:44px;margin-bottom:17px;
  font-size:clamp(15px,1.7vw,24px);font-weight:700;line-height:1.25;
}
.checklist li::before{
  content:'';position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;
  border:2px solid #fff;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M6 12.5l4 4L18 8.5' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/70% no-repeat;
}
.when-img{position:relative;}
.when-img img{width:100%;height:100%;object-fit:cover;}

/* ---------------- method section ---------------- */
.method{padding:0 0 60px;position:relative;}
.method-head{position:relative;z-index:6;height:0;}
.method-head .pill-h{transform:translateY(-50%);}
.method-body{background:var(--blue);max-width:1240px;margin:0 auto;padding:110px 0 50px;color:#fff;}
.method-row{display:grid;grid-template-columns:1fr 1fr;position:relative;margin-bottom:0;}
.method-media{position:relative;min-height:420px;}
.method-media img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.method-label{
  position:absolute;left:0;bottom:60px;max-width:88%;
  background:var(--blue);color:#fff;text-transform:uppercase;
  font-weight:700;font-size:clamp(17px,1.8vw,30px);line-height:1.2;
  padding:22px 44px 22px 32px;border:2px solid var(--light);border-left:none;
  border-radius:0 65px 65px 0;z-index:3;
}
.method-ico{
  position:absolute;top:50%;right:0;transform:translate(50%,-50%);
  width:120px;z-index:4;
}
.method-row--rev .method-ico{right:auto;left:0;transform:translate(-50%,-50%);}
.method-row--rev .method-label{
  left:auto;right:0;border-left:2px solid var(--light);border-right:none;
  border-radius:65px 0 0 65px;padding:22px 32px 22px 44px;
}
.method-txt{padding:44px 56px 40px 76px;}
.method-row--rev .method-txt{padding:44px 76px 40px 56px;}
.method-intro{
  text-align:center;font-size:clamp(15px,1.4vw,20px);font-weight:400;line-height:1.3;
  padding-bottom:20px;margin-bottom:26px;position:relative;
}
/* bottom half of a rounded rectangle: flat line with upturned rounded ends (as in Figma) */
.method-intro::after{
  content:'';position:absolute;left:2%;right:2%;bottom:-10px;height:12px;
  border:1px solid rgba(255,255,255,.9);border-top:none;
  border-radius:0 0 14px 14px;
}
.method-sub{font-size:clamp(16px,1.5vw,22px);font-weight:700;margin-bottom:14px;}
.wdotlist li{
  position:relative;padding-left:24px;margin-bottom:9px;
  font-size:clamp(14px,1.4vw,20px);font-weight:400;line-height:1.5;
}
.wdotlist li::before{
  content:'';position:absolute;left:0;top:.42em;width:11px;height:11px;border-radius:50%;background:#fff;
}
.method-note{font-size:clamp(14px,1.4vw,20px);font-weight:400;line-height:1.3;margin-top:18px;}

/* ---------------- compare table ---------------- */
.compare{padding:40px 0 50px;position:relative;}
.compare .pill-h{margin-bottom:42px;}
.compare-table{
  max-width:1240px;margin:0 auto;background:#fff;
  border:2px solid var(--blue);border-radius:20px;overflow:hidden;
}
.compare-table table{width:100%;border-collapse:collapse;}
.compare-table th{
  background:var(--blue);color:#fff;text-align:left;
  font-size:clamp(15px,1.7vw,24px);font-weight:700;padding:12px 20px 12px 42px;
}
.compare-table td{
  padding:18px 20px 18px 42px;font-size:clamp(13px,1.5vw,20px);font-weight:500;
  border-top:3px solid var(--divider);vertical-align:middle;line-height:1.25;
}
.compare-table td:first-child{font-weight:700;font-size:clamp(14px,1.7vw,24px);}
.compare-table td+td,.compare-table th+th{border-left:3px solid var(--divider);}
.compare-table tr:first-child td{border-top:none;}

/* ---------------- which surgery ---------------- */
.which{padding:20px 0 70px;position:relative;}
.which h2{
  text-align:center;color:var(--blue);text-transform:uppercase;
  font-weight:800;font-size:clamp(21px,2.5vw,33px);margin-bottom:44px;
}
.which-grid{display:grid;grid-template-columns:500px 1fr;gap:70px;align-items:center;max-width:1160px;margin:0 auto;}
.which-list li{margin-bottom:8px;font-size:clamp(15px,1.7vw,24px);}
/* callout = rounded bordered box; L-shaped connector runs from its left edge
   to a filled blue dot sitting on the photo ring (as in Figma) */
.which-callout{position:relative;display:inline-block;margin:0 0 40px 44px;}
.which-callout em{
  display:inline-block;font-style:normal;font-weight:700;
  font-size:clamp(15px,1.6vw,22px);color:#000;background:transparent;
  border:2px solid var(--blue);border-radius:16px;padding:9px 22px;position:relative;
}
.which-callout em::before{
  content:'';position:absolute;left:-9px;top:50%;margin-top:-8px;width:16px;height:16px;
  border-radius:50%;background:#fff;border:2px solid var(--blue);box-sizing:border-box;
}
/* elbow: left then down to the dot */
.which-callout::before{
  content:'';position:absolute;left:-32px;top:50%;width:32px;height:66px;
  border-left:2px solid var(--blue);border-top:2px solid var(--blue);
  border-top-left-radius:16px;
}
/* filled dot at the end of the connector */
.which-callout::after{
  content:'';position:absolute;left:-43px;top:calc(50% + 60px);
  width:22px;height:22px;border-radius:50%;background:var(--blue);
}
.which-callout--bottom{margin:34px 0 0 44px;}
.which-callout--bottom::before{
  top:auto;bottom:50%;border-top:none;border-bottom:2px solid var(--blue);
  border-top-left-radius:0;border-bottom-left-radius:16px;
}
.which-callout--bottom::after{top:auto;bottom:calc(50% + 60px);}

/* desktop 2-col layout: the box is pulled left toward the circle so the short
   elbow lands its dot right on the photo ring (as in Figma) */
@media (min-width:1101px){
  .which-callout{margin-left:-175px;}
  .which-callout--bottom{margin-left:-175px;}
}

/* ---------------- why us ---------------- */
.why{background:var(--blue);color:#fff;position:relative;padding:0 0 56px;margin-top:70px;}
.why-head{transform:translateY(-50%);margin-bottom:-20px;}
.why-numbers{
  display:flex;justify-content:center;align-items:flex-end;gap:5vw;flex-wrap:wrap;margin:16px 0 30px;
}
.big-num{position:relative;text-align:center;}
.big-num .num{
  font-size:clamp(88px,11vw,180px);font-weight:800;line-height:.95;color:#fff;letter-spacing:-2px;
}
.big-num .over{
  display:block;text-align:left;color:#fff;font-size:clamp(13px,1.4vw,22px);
  font-weight:700;text-transform:uppercase;padding:0 0 4px 16px;letter-spacing:1px;
}
.big-num .under{
  position:absolute;right:0;bottom:6px;
  background:var(--blue);color:#fff;font-size:clamp(11px,1.1vw,16px);
  font-weight:700;line-height:1.2;padding:6px 10px;text-align:left;
  box-shadow:0 0 0 4px var(--blue);
}
.why-exp{
  display:table;margin:20px auto 46px;background:#fff;color:var(--blue);
  font-size:clamp(14px,1.7vw,24px);font-weight:700;border-radius:32px;
  padding:12px 44px;text-align:center;position:relative;
}
.why-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,394px));gap:22px;justify-content:center;
}
.why-pill{
  position:relative;border:1px solid #fff;border-radius:41px;min-height:81px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:clamp(13px,1.6vw,23px);font-weight:700;line-height:1.15;padding:12px 26px;
}
/* connector ticks anchored to the pills themselves: top-row pills reach up to the
   experience bar, every pill with a row below drops a tick into the row gap */
.why-pill::before,.why-pill::after{position:absolute;left:50%;width:2px;background:#fff;pointer-events:none;}
.why-pill::before{bottom:100%;height:46px;}
.why-pill::after{top:100%;height:22px;}
.why-grid > :nth-child(-n+3)::before{content:'';}
.why-grid > :nth-child(-n+3)::after{content:'';}
.why-pill--btn{
  background:var(--red);border-color:var(--red);text-transform:uppercase;
  transition:filter .2s;
}
.why-pill--btn:hover{filter:brightness(1.12);}

/* ---------------- price ---------------- */
.price{padding:0 0 80px;position:relative;}
.price-head{transform:translateY(-50%);}
.price-head .pill-h--light{background:var(--blue);color:#fff;border-color:#fff;}
.price-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,386px));gap:28px;justify-content:center;margin-top:26px;
}
.price-card{
  background:var(--light);border:1px solid var(--blue);border-radius:30px;
  padding:26px 20px 32px;text-align:center;
  box-shadow:0 10px 30px rgba(35,90,190,.08);
}
.price-card h3{
  color:var(--blue);font-size:clamp(18px,1.7vw,24px);font-weight:700;line-height:1.2;
  min-height:2.4em;display:flex;align-items:center;justify-content:center;margin-bottom:6px;
}
.price-num{position:relative;display:inline-block;line-height:1;}
.price-num .num{
  font-size:clamp(96px,9vw,160px);font-weight:800;color:var(--blue);letter-spacing:-3px;line-height:1;
}
/* the label is centered on the first digit; per-card left = measured center
   of that digit (7/8/1 have different widths in Montserrat) */
.price-num .from{
  position:absolute;top:15%;left:24%;transform:translateX(-50%);
  color:#fff;
  font-size:15px;font-weight:700;text-transform:uppercase;padding:2px 10px;
}
.price-card:nth-child(2) .price-num .from{left:31%;}
.price-card:nth-child(3) .price-num .from{left:12%;}
.price-num .uah{
  position:absolute;right:-14px;bottom:6px;background:var(--light);color:var(--blue);
  font-size:20px;font-weight:700;padding:0 6px;
}
.btn-blue{
  display:inline-block;background:var(--blue);color:#fff;border-radius:44px;
  font-size:16px;font-weight:700;padding:15px 34px;margin-top:20px;transition:filter .2s;
}
.btn-blue:hover{filter:brightness(1.15);}

/* ---------------- trust banner ---------------- */
.trust{
  position:relative;padding:74px 16px;text-align:center;color:#fff;overflow:hidden;
  background:
    linear-gradient(rgba(16,38,105,.62),rgba(35,90,190,.55)),
    url("../img/hernia/trust-bg.webp") center/cover no-repeat,
    var(--blue);
}
.trust h2{
  text-transform:uppercase;font-weight:800;font-size:clamp(22px,3.6vw,60px);line-height:1.12;
}

/* ---------------- faq ---------------- */
.faq{padding:44px 0;background:var(--light);}
.faq-toggle{
  background:transparent;border:2px solid var(--blue);color:var(--blue);
  border-radius:10px;padding:8px 14px;text-transform:uppercase;
  font-family:inherit;font-weight:700;font-size:16px;letter-spacing:.5px;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;
}
.faq-toggle .arr{display:inline-flex;transition:transform .25s;line-height:0;}
.faq-toggle.open .arr{transform:rotate(180deg);}
.faq-list{max-height:0;overflow:hidden;transition:max-height .5s ease;max-width:900px;}
.faq-list.open{max-height:9000px;}
.faq-item{
  border:1px solid #cfd8ec;border-radius:14px;background:#fff;margin-bottom:12px;
  padding:0 22px;box-shadow:0 2px 8px rgba(35,90,191,.05);
}
.faq-item[open]{border-color:var(--blue);}
.faq-q{
  list-style:none;cursor:pointer;padding:16px 0;color:var(--blue);
  font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.faq-q::-webkit-details-marker{display:none;}
.faq-q::after{content:'+';font-size:22px;font-weight:700;transition:transform .25s;flex-shrink:0;}
.faq-item[open] .faq-q::after{transform:rotate(45deg);}
.faq-a{padding:0 0 16px;color:#333;font-size:16px;font-weight:500;line-height:1.4;}
.faq-a p{margin:0 0 10px;}
.faq-a p:last-child{margin-bottom:0;}
.faq-a a{color:var(--blue);font-weight:700;}

/* ---------------- clinical cases ---------------- */
.cases{background:var(--blue);padding:0 0 64px;margin-top:60px;position:relative;}
.cases-head{transform:translateY(-50%);}
.cases-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,371px));gap:26px;justify-content:center;
}
.case-card{
  background:#fff;border:1px solid var(--blue);border-radius:30px;padding:16px 16px 22px;text-align:center;
}
.case-card .ph{
  border-radius:30px;width:100%;aspect-ratio:339/355;object-fit:cover;background:#7c7c7c;
}
.case-chips{display:flex;justify-content:center;gap:14px;margin:-13px 0 16px;position:relative;}
.case-chips span{
  background:var(--blue);color:#fff;border:1px solid #fff;border-radius:13px;
  font-size:14px;font-weight:700;padding:4px 16px;white-space:nowrap;
}
.case-card h3{color:var(--blue);font-size:24px;font-weight:700;}
.cases-note{color:rgba(255,255,255,.75);text-align:center;font-size:13px;margin-top:18px;}

/* ---------------- reviews (slider) ---------------- */
.reviews{padding:0 0 60px;}
.reviews-head{transform:translateY(-50%);}
.reviews-slider{position:relative;max-width:1300px;margin:10px auto 0;padding:0 60px;}
.reviews-viewport{overflow:hidden;}
.reviews-track{display:flex;gap:36px;transition:transform .45s cubic-bezier(.4,0,.2,1);will-change:transform;}
.review-card{
  flex:0 0 auto;box-sizing:border-box;align-self:stretch;
  background:#fff;border:2px solid var(--blue);border-radius:36px;padding:30px 28px 34px;text-align:center;
}
.review-card .nm{color:var(--blue);font-weight:700;font-size:20px;text-transform:uppercase;}
.review-card .age{font-weight:500;font-size:20px;margin-bottom:16px;}
.review-card p{font-size:16px;font-weight:500;line-height:1.4;text-align:left;}
.rev-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;border:2px solid var(--blue);
  background:#fff;color:var(--blue);font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;-webkit-appearance:none;appearance:none;
}
.rev-arrow:hover{background:var(--blue);color:#fff;}
.rev-arrow:disabled{opacity:.35;cursor:default;background:#fff;color:var(--blue);}
.rev-prev{left:0;}
.rev-next{right:0;}
.reviews-dots{display:flex;justify-content:center;gap:10px;margin-top:24px;}
.reviews-dots button{
  width:11px;height:11px;padding:0;border-radius:50%;border:2px solid var(--blue);
  background:transparent;cursor:pointer;transition:.2s;-webkit-appearance:none;appearance:none;
}
.reviews-dots button.active{background:var(--blue);}
@media (max-width:860px){
  .reviews-slider{padding:0 46px;}
  .reviews-track{gap:22px;}
  .rev-arrow{width:40px;height:40px;font-size:22px;}
}
@media (max-width:480px){
  .reviews-slider{padding:0 40px;}
}

/* ---------------- team cta ---------------- */
.teamcta{background:var(--blue);padding:0 0 40px;position:relative;}
.teamcta-photo{max-width:1236px;margin:0 auto;position:relative;}
.teamcta-photo img{width:100%;object-fit:cover;}
.teamcta-pill{
  position:relative;max-width:926px;margin:-45px auto 0;
  background:var(--light);border-radius:78px;padding:22px 48px;
  color:var(--blue);text-align:center;text-transform:uppercase;
  font-weight:700;font-size:clamp(14px,1.6vw,22px);line-height:1.15;z-index:4;
  box-shadow:0 8px 30px rgba(0,0,0,.15);
}
.teamcta-addr{
  display:flex;justify-content:center;gap:8vw;flex-wrap:wrap;
  color:var(--light);font-weight:600;font-size:clamp(15px,1.7vw,24px);
  margin-top:30px;text-align:center;padding:0 16px;
}

/* ---------------- contact ---------------- */
.contact{padding:70px 0 0;background:#fff;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;max-width:1160px;margin:0 auto;}
.contact-info{text-align:center;padding-bottom:60px;font-size:22px;line-height:1.35;}
.contact-info .btn-red{font-size:19px;padding:14px 34px;border:4px solid #a90505;margin-bottom:34px;}
.contact-name{color:var(--blue);font-weight:800;font-size:30px;line-height:1.15;margin:8px 0 2px;}
.contact-msg{font-size:22px;margin-bottom:14px;}
.contact-soc{display:flex;justify-content:center;gap:14px;margin:10px 0 6px;}
.contact-soc img{width:52px;height:52px;}
.contact-note{font-size:13px;color:#444;display:block;margin-bottom:26px;}
.contact-line{display:flex;align-items:center;justify-content:center;gap:12px;font-weight:700;font-size:22px;color:#000;margin-top:14px;}
.contact-line img{width:30px;}
.contact-photo img{margin:0 auto;max-height:640px;object-fit:contain;}

/* ---------------- footer ---------------- */
footer{
  background:var(--blue);color:#fff;text-align:center;
  padding:34px 16px 26px;font-size:18px;font-weight:500;line-height:1.4;
}
footer a{font-size:11px;letter-spacing:1.5px;color:#fff;display:inline-block;margin-top:12px;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1100px){
  .danger-grid{grid-template-columns:1fr;gap:30px;}
  .danger-grid .h-blue,.danger-grid .ring-photo,.danger-grid .dotlist{grid-column:1;grid-row:auto;}
  .danger-grid .h-blue{text-align:center;margin-bottom:0;}
  .which-grid{grid-template-columns:1fr;gap:40px;}
  .when-grid{grid-template-columns:1fr;}
  .when-img{min-height:320px;}
  .price-cards,.cases-cards,.why-grid{grid-template-columns:repeat(2,minmax(0,420px));}
  /* why-grid is 2 columns here: only the first 2 pills touch the bar, rows 1-2 drop ticks */
  .why-grid > :nth-child(3)::before{content:none;}
  .why-grid > :nth-child(4)::after{content:'';}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:860px){
  .hd-nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--blue);
    flex-direction:column;gap:0;padding:10px 0 16px;border-top:1px solid rgba(255,255,255,.2);
  }
  .hd-nav.open{display:flex;}
  .hd-nav a{padding:11px 22px;font-size:15px;width:100%;}
  .hd-burger{display:block;}
  /* mobile header: only phone + red button in the top bar (as in Figma) */
  .hd-top-in{gap:10px;justify-content:space-between;font-size:13px;flex-wrap:nowrap;padding:8px 8px;}
  .hd-top-in .hd-item--addr{display:none;}
  .hd-top .hd-soc{display:none;}
  .hd-top .btn-red{font-size:10px;padding:5px 14px;line-height:1.3;flex-shrink:0;}
  /* socials move into the blue header row */
  .hd-soc--main{display:flex;margin-left:auto;gap:10px;}
  .hd-main-in{gap:14px;min-height:64px;}
  /* full-bleed hero video */
  .hero .container{padding:0;max-width:none;}
  .danger-alert{flex-direction:column;text-align:center;gap:6px;}
  .compare-table{overflow-x:auto;}
  .compare-table table{min-width:520px;}
  .cases-cards{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:14px;justify-content:flex-start;
  }
  .case-card{flex:0 0 86%;scroll-snap-align:center;}
  .method-row,.exam-row{grid-template-columns:1fr;}
  .exam-row .exam-img{order:-1;}
  /* exams: pill drops onto the MRI photo, texts centered under images */
  .exams-body{padding-top:0;}
  .exam-txt{text-align:center;padding:20px 18px 28px;}
  /* when-surgery: title → spine photo in a white ring circle → checklist */
  .when-grid{display:flex;flex-direction:column;gap:0;}
  .when-txt{display:contents;}
  .when-txt h2{order:1;text-align:center;margin:36px 0 26px;}
  .when-img{
    order:2;width:min(300px,78vw);min-height:0;aspect-ratio:1;
    margin:0 auto;border:2px solid #fff;border-radius:50%;padding:12px;
  }
  .when-img img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
  .checklist{order:3;margin:30px auto 42px;}
  .method-media{min-height:300px;}
  .method-media img.ph{position:static;height:auto;aspect-ratio:16/10;}
  /* icon circle sits at the top-right over the photo (as in Figma mobile) */
  .method-ico{top:42px;bottom:auto;right:12px;transform:none;width:92px;}
  .method-row--rev .method-ico{left:auto;right:12px;top:42px;bottom:auto;transform:none;}
  .method-label{bottom:24px;padding:12px 28px 12px 18px;}
  .method-row--rev .method-label{padding:12px 18px 12px 28px;}
  .method-txt,.method-row--rev .method-txt{padding:34px 26px 34px;}
  /* body starts right at the first photo so the pill lands on it */
  .method-body{padding-top:0;}
  /* photo always above its text (ACDF row too) */
  .method-row--rev .method-media{order:-1;}

  /* ---- why us: stacked big numbers + 2-column pills (as in Figma mobile) ---- */
  .why-numbers{flex-direction:column;align-items:center;gap:4px;}
  .big-num .over{font-size:13px;padding:0 0 2px 10px;}
  .big-num .under{font-size:10px;padding:4px 8px;}
  .why-exp{font-size:13px;padding:10px 22px;margin:14px auto 26px;border-radius:24px;}
  .why-pill::before{height:26px;}
  .why-pill::after{height:10px;}
  section[id],[id="hernia"],[id="method"],[id="why"],[id="price"],[id="reviews"],[id="contact"],[id="gallery"],[id="home"]{scroll-margin-top:150px;}
  .why-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .why-pill{font-size:12px;min-height:54px;padding:8px 10px;border-radius:30px;line-height:1.2;}
  .why-grid > :nth-child(3){order:4;}
  .why-grid > :nth-child(4){order:3;}
  .why-grid > :nth-child(5){order:5;}
  .why-grid > :nth-child(6){order:6;}

  /* ---- price: blue heading pill + bigger digits ---- */
  .price-num .num{font-size:clamp(110px,34vw,150px);}
  .price-num .from{font-size:14px;}
  .price-num .uah{font-size:18px;}

  /* ---- team cta: address left-aligned ---- */
  .teamcta-addr{flex-direction:column;align-items:flex-start;text-align:left;gap:20px;padding:0 26px;}
  .compare-table th,.compare-table td{padding:10px 12px;}
  .price-cards,.cases-cards{grid-template-columns:minmax(0,440px);}
  .big-num .num{font-size:clamp(88px,26vw,120px);}
  .which-callout{margin-left:30px;}
  .which-callout--bottom{margin-left:30px;}
  .which-callout::before{left:-22px;width:22px;height:46px;}
  .which-callout::after{left:-32px;top:calc(50% + 40px);}
  .which-callout--bottom::after{top:auto;bottom:calc(50% + 40px);}
  .pill-h{padding:16px 30px;}
  .danger-alert{gap:16px;}
  .danger-alert .mark{font-size:44px;}
  .teamcta-pill{margin-top:-24px;padding:16px 26px;}
  .contact-info{font-size:18px;}
  .contact-name{font-size:24px;}
  .deco::before,.deco::after{display:none;}
}
@media (max-width:480px){
  .hd-logo img{width:118px;}
  /* .hero{padding-top:14px;} */
  .exam-txt{padding:22px 18px;}
  .why-pill{min-height:64px;}
}