@charset "UTF-8";
/* Собрано автоматически: _build\build-endolift.ps1. Руками не править. */

/* ==========================================================================
   AVERINA CLINIC — Endolift procedure page
   Design system taken from the live "Естетична гінекологія" page:
   Playfair Display + Roboto, teal #45AF9F, ink #272736, soft #F6F6F6.
   ========================================================================== */

:root{
  --teal:#45AF9F;
  --teal-dark:#2E8377;
  /* the only warm accent on the page — a promotional mark, deliberately
     dulled so it reads as an offer beside the teal, not as a warning */
  --promo:#C0453C;
  --ink:#272736;
  --muted:#7B7B7B;
  --line:#A5A6A7;
  --soft:#F6F6F6;
  --white:#fff;

  --serif:'Playfair Display','Times New Roman',Georgia,serif;
  --sans:'Roboto',Arial,Helvetica,sans-serif;

  --hair:#D8D8D8;

  --page:1740px;
  --gutter:100px;
  --rail:24px;
  --header-h:100px;
  --header-h-small:100px;
  /* the mark is sized by WIDTH, like the live logo, and overhangs the bar */
  --logo-w:87px;
  --logo-w-small:40px;
  --logo-left:100px;
  --logo-top:20px;
  /* where the header CONTENT starts — the hairline is tied to the same edge */
  --header-content-left:528px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

.endolift *,
.endolift *::before,
.endolift *::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:120px;-webkit-text-size-adjust:100%;overflow-x:clip}

.endolift{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:29px;
  font-weight:400;
  overflow-x:clip;
}

.endolift img{display:block;max-width:100%;height:auto}
.endolift a{color:inherit;text-decoration:none}
.endolift ul{margin:0;padding:0;list-style:none}
.endolift p{margin:0}
.endolift button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.endolift ::selection{background:rgba(69,175,159,.22)}

/* --- vertical hairline that runs down the whole site ---------------------- */


/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */
/* Full-bleed backgrounds, constrained content: a soft section paints the whole
   usable width and only `.wrap` holds the copy to the grid. Nothing on this
   page is a floating card. */
.endolift .section{padding:70px 0 66px}
.endolift .section.section--first{padding-top:calc(var(--header-h) + 56px);padding-bottom:60px}
.endolift .section--soft{background:var(--soft)}
.endolift .section--intro{padding:52px 0 74px}
.endolift .section--tight{padding-top:0}

/* the only separator between two consecutive white sections — a hairline on
   the content grid, almost invisible at first glance */
.endolift .section--rule{position:relative}
.endolift .section--rule::before{
  content:'';
  position:absolute;
  top:0;
  left:max(var(--gutter),calc((100% - var(--page)) / 2 + var(--gutter)));
  right:max(var(--gutter),calc((100% - var(--page)) / 2 + var(--gutter)));
  border-top:1px solid var(--hair);
}

.endolift .wrap{
  max-width:var(--page);
  margin:0 auto;
  padding:0 var(--gutter);
}

.endolift .head{max-width:820px;margin:0 auto 44px;text-align:center}
.endolift .head--wide{max-width:1000px}
.endolift .head:last-child{margin-bottom:0}

.endolift .ttl{
  position:relative;
  margin:0 0 20px;
  padding-bottom:26px;
  font-family:var(--serif);
  font-size:36px;
  line-height:46px;
  font-weight:400;
  letter-spacing:1px;
  color:var(--ink);
}
.endolift .ttl::after{
  content:'';
  position:absolute;
  left:50%;bottom:0;
  transform:translateX(-50%);
  width:200px;
  border-bottom:1px solid var(--line);
}
.endolift .ttl:last-child{margin-bottom:0}
.endolift .ttl .teal{color:var(--teal)}
/* the live site's section-heading metrics, applied to the procedure title */
.endolift .ttl.ttl--hero{font-size:40px;line-height:58px;font-weight:600;letter-spacing:2px}
/* left-aligned variant used where the title is a column of its own */
.endolift .ttl--left{text-align:left;margin-bottom:22px;padding-bottom:0}
.endolift .ttl--left::after{display:none}
/* the site's own section-title treatment: uppercase, wide tracking */
.endolift .ttl--caps{text-transform:uppercase;font-size:32px;line-height:44px;letter-spacing:2px}

.endolift .green-band{
  display:inline-block;
  margin:14px 0 32px;
  padding:5px 15px;
  background:var(--teal);
  color:#fff;
  font-family:var(--serif);
  font-size:26px;
  line-height:1.3;
  font-weight:800;
}
.endolift .sub{font-size:17px;line-height:29px;color:var(--ink)}
.endolift .sub--muted{color:var(--muted)}

/* A dated offer under the hero. Two hairlines instead of a filled block: the
   screen already carries one solid band, and a second one in red turned the
   first screen into two signs arguing with each other. Open rules rhyme with
   the line under the title and still stop the eye.
   The Russian dictionary holds an empty string for this key, so on that
   language the element bakes out empty and :empty removes it from the flow —
   the offer runs on the Ukrainian page only, without a second markup file. */
.endolift .promo{
  display:inline-block;
  margin-top:32px;
  padding:14px 30px;
  border-top:1px solid var(--promo);
  border-bottom:1px solid var(--promo);
  font-family:var(--serif);
  font-size:20px;
  line-height:1.35;
  color:var(--ink);
}
.endolift .promo:empty{display:none}
.endolift .promo__t{
  display:block;
  margin-bottom:7px;
  font-family:var(--sans);
  font-size:12px;
  line-height:16px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  font-weight:500;
  color:var(--promo);
}

/* ==========================================================================
   FEATURE BLOCK — photo one side, copy the other, both sitting directly on
   the section background. No card, no panel, no overhang.
   ========================================================================== */
/* No clipping here on purpose: a clip cuts the contour mid-stroke and that is
   exactly what read as a broken fragment. The decoration is sized to the
   photo instead, so it never needs to be cut. */
.endolift .feature{position:relative}
.endolift .feature__panel{
  position:relative;
  display:grid;
  align-items:center;
  gap:clamp(52px,5.5vw,96px);
}
.endolift .feature--img-right > .feature__panel{grid-template-columns:minmax(0,1fr) minmax(0,430px)}
.endolift .feature--img-left  > .feature__panel{grid-template-columns:minmax(0,430px) minmax(0,1fr)}
.endolift .feature--img-left .feature__media{order:-1}

/* first screen: photo right, explanation left, markup order media -> body so
   the phone gets visual before text without any reordering */
.endolift .feature--hero > .feature__panel{grid-template-columns:minmax(0,1fr) minmax(0,430px);align-items:center}
.endolift .feature--hero .feature__media{grid-column:2;grid-row:1}
.endolift .feature--hero .feature__body{grid-column:1;grid-row:1}

/* copy always sits above every decorative layer */
.endolift .feature__content{position:relative;z-index:5;max-width:860px}
.endolift .feature__body{position:relative;z-index:5;max-width:860px}
/* `isolation` keeps each composition's three layers to itself */
.endolift .feature__media{position:relative;z-index:2;isolation:isolate}

.endolift .feature__media > img:not(.deco-arc){
  position:relative;
  z-index:3;
  width:100%;
}

/* ==========================================================================
   PHOTO DECORATION — the supplied turquoise arc PNGs.

   Three independent layers, never nested inside one another and never sharing
   a filter, so nothing can tint, blur or recolour the arc:

     .glow      z-index 1   pastel atmosphere (this layer alone is blurred)
     .deco-arc  z-index 2   the supplied PNG, delivered exactly as authored
     the photo  z-index 3   always on top

   The PNGs are complete ellipses and stay complete: nothing is clipped or
   erased. The photograph simply covers the middle of each one, so what stays
   visible are the two caps that reach past opposite edges. Every composition
   gets its own asset, size and offset; placement is a percentage of the photo
   frame, so the whole system rescales with the layout.
   ========================================================================== */
.endolift .deco-arc{
  position:absolute;
  z-index:2;
  pointer-events:none;
  display:block;
  left:var(--arc-l);
  top:var(--arc-t);
  width:var(--arc-w);
  max-width:none;         /* beats the global img{max-width:100%} */
  height:auto;            /* the file's own aspect ratio is never distorted */
  transform:var(--arc-flip,none);
  /* the PNG already carries the correct line colour — it must reach the page
     exactly as authored */
  filter:none;
  mix-blend-mode:normal;
  opacity:1;
}

/* --------------------------------------------------------------------------
   ARC PLACEMENT — one asset per composition, each at its own size and offset.
   Every ellipse reaches past two opposite edges of its frame, so the frame
   hides the middle and leaves two caps showing.
   -------------------------------------------------------------------------- */
.endolift .feature--hero .feature__media{--arc-w:162%;--arc-l:-31.5%;--arc-t:-18%} /* arc-02 */
.endolift .feature--face .feature__media{--arc-w:152%;--arc-l:-24%;--arc-t:8.5%}   /* arc-03, mirrored */
.endolift .feature--body .feature__media{--arc-w:151%;--arc-l:-25.5%;--arc-t:24%}  /* arc-01 */
/* The laser block reuses arc-03: same weight and colour as every other curve
   on the page, which the one-off group arc never had. Its ellipse fills
   79.4% x 63.6% of the file, and size/offset are worked back from that box
   so the curve sits where the composition always put it. */
.endolift .tech__media{--arc-w:152%;--arc-l:-19.4%;--arc-t:-27%}
.endolift .feature--face .deco-arc{--arc-flip:scaleX(-1)}

/* ==========================================================================
   GLOW — two soft colour hazes hung off opposite sides of the photograph.
   Each is an ellipse filled with a `closest-side` gradient, so its alpha is
   already zero at its own boundary: there is no box to see, whatever the
   blur does. The strong middle of each haze sits under the picture, so what
   reaches the page is only the falloff — ambient colour, not a gradient.
   Hue balance, size and offset are set per section further down.
   ========================================================================== */
.endolift .glow{position:absolute;inset:0;z-index:1;pointer-events:none}
/* the blur lives here and only here — never on a parent that also holds the arc */
.endolift .glow::before,
.endolift .glow::after{
  content:'';
  position:absolute;
  border-radius:50%;
  filter:blur(34px);
}
.endolift .glow::before{
  left:var(--g1x,-24%);top:var(--g1y,-6%);width:var(--g1w,50%);height:var(--g1h,74%);
  background:radial-gradient(closest-side,var(--g1a,rgba(116,206,190,.5)),var(--g1b,rgba(116,206,190,0)));
}
.endolift .glow::after{
  left:var(--g2x,78%);top:var(--g2y,30%);width:var(--g2w,50%);height:var(--g2h,72%);
  background:radial-gradient(closest-side,var(--g2a,rgba(228,172,214,.4)),var(--g2b,rgba(228,172,214,0)));
}

/* mint high on the left, blush low on the right */
.endolift .feature--hero .glow{
  --g1x:-26%;--g1y:-8%;--g1w:52%;--g1h:78%;
  --g1a:rgba(116,206,190,.55);--g1b:rgba(116,206,190,0);
  --g2x:78%;--g2y:32%;--g2w:50%;--g2h:72%;
  --g2a:rgba(228,172,214,.40);--g2b:rgba(228,172,214,0);
}
/* the balance flips: lavender low on the left, aqua high on the right */
.endolift .feature--face .glow{
  --g1x:-24%;--g1y:26%;--g1w:46%;--g1h:56%;
  --g1a:rgba(203,170,224,.42);--g1b:rgba(203,170,224,0);
  --g2x:80%;--g2y:-6%;--g2w:48%;--g2h:60%;
  --g2a:rgba(116,206,190,.50);--g2b:rgba(116,206,190,0);
}
/* aqua up on the right, a breath of pink trailing low left */
.endolift .feature--body .glow{
  --g1x:76%;--g1y:-10%;--g1w:48%;--g1h:56%;
  --g1a:rgba(126,205,203,.48);--g1b:rgba(126,205,203,0);
  --g2x:-26%;--g2y:42%;--g2w:50%;--g2h:58%;
  --g2a:rgba(224,176,212,.38);--g2b:rgba(224,176,212,0);
}
/* one wider, flatter atmosphere for the whole two-photo group */
.endolift .tech__media .glow{
  --g1x:-18%;--g1y:-16%;--g1w:50%;--g1h:82%;
  --g1a:rgba(116,206,190,.46);--g1b:rgba(116,206,190,0);
  --g2x:74%;--g2y:24%;--g2w:54%;--g2h:80%;
  --g2a:rgba(212,172,220,.38);--g2b:rgba(212,172,220,0);
}

/* ==========================================================================
   CONTENT ELEMENTS
   ========================================================================== */
.endolift .block-ttl{
  margin:0 0 26px;
  font-family:var(--serif);
  font-size:29px;
  line-height:40px;
  font-weight:400;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--ink);
}
/* the brand keeps its own casing inside an uppercase heading */
.endolift .block-ttl strong{color:var(--ink);font-weight:700;text-transform:none}

.endolift .text{font-size:17px;line-height:29px;color:var(--ink)}
.endolift .text p + p{margin-top:20px}
.endolift .text strong{font-weight:700}
.endolift .text .teal{color:var(--teal);font-weight:700}
.endolift .text--lead{font-size:18px;line-height:31px}

.endolift .dot-list li{
  position:relative;
  padding-left:26px;
  padding-bottom:9px;
  font-size:17px;
  line-height:29px;
  font-weight:400;
}
.endolift .dot-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:10px;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--teal);
}

/* facts row — a full-width band of four metrics divided by hairlines */
.endolift .facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 54px}
.endolift .fact{
  position:relative;
  min-height:56px;
  padding:4px 26px 4px 58px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.endolift .fact::before{
  content:'';
  position:absolute;
  left:0;top:50%;
  transform:translateY(-50%);
  width:42px;height:42px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}
/* hairline between metrics, never before the first one */
.endolift .fact + .fact{padding-left:100px}
.endolift .fact + .fact::before{left:42px}
.endolift .fact + .fact::after{
  content:'';
  position:absolute;
  left:0;top:50%;
  transform:translateY(-50%);
  height:64px;
  border-left:1px solid var(--hair);
}
.endolift .fact--calendar::before{background-image:url("../img/endolift/icon-calendar.svg")}
.endolift .fact--clock::before{background-image:url("../img/endolift/icon-clock.svg")}
.endolift .fact--anesthesia::before{background-image:url("../img/endolift/icon-syringe.svg")}
.endolift .fact--recovery::before{background-image:url("../img/endolift/icon-recovery.svg")}
.endolift .fact__t{font-size:16px;line-height:23px;color:var(--ink)}
.endolift .fact__v{font-size:16px;line-height:23px;color:var(--teal);font-weight:500}

/* Q&A */
.endolift .qa li{padding:18px 0;border-top:1px solid var(--hair)}
.endolift .qa li:last-child{border-bottom:1px solid var(--hair)}
.endolift .qa .q{
  display:block;
  margin-bottom:8px;
  font-size:18px;
  line-height:28px;
  font-weight:500;
  color:var(--ink);
}
.endolift .qa p{font-size:17px;line-height:29px;color:var(--ink)}
.endolift .qa p + p{margin-top:12px}

/* grey inset (doctor quote / important note) */
.endolift .grey-box{background:var(--soft);padding:24px 28px;margin-top:32px}
/* on a grey band the inset flips to white */
.endolift .section--soft .grey-box{background:var(--white)}
.endolift .grey-box b{display:block;margin-bottom:8px;font-size:17px;font-weight:700}
.endolift .grey-box em{font-style:italic}
.endolift .grey-box p{font-size:17px;line-height:29px}
.endolift .grey-box p + p{margin-top:18px}
.endolift .grey-box--accent{border-left:2px solid var(--teal)}

/* buttons row */
.endolift .btns-block{display:flex;align-items:center;flex-wrap:wrap;gap:20px 48px;padding-top:28px}
.endolift .btns-block--center{justify-content:center}

/* The booking button. Same control as everywhere else on averinaclinic.com.ua
   (.reg-btn.el-btn there): solid teal block, white uppercase caption,
   2px tracking, 18/33 padding — so the page does not invent its own CTA.
   It is defined here, in a section the WordPress build keeps, because the
   HEADER section it used to live in is stripped during that build. */
.endolift .el-btn{
  display:inline-block;
  background:var(--teal);
  color:#fff;
  font-size:16px;
  line-height:18px;
  font-weight:400;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:18px 33px;
  text-align:center;
  transition:background .3s var(--ease);
}
.endolift .el-btn:hover{background:var(--teal-dark)}
/* The document icon is a flex item, not an absolutely positioned backdrop.
   The desktop result is identical — 23px of icon plus an 11px gap reproduce
   the old 34px indent exactly — but the icon now travels with the caption.
   Pinned to the left edge it stayed there when the phone stretches this
   control to the full column and centres its text, leaving the mark stranded
   on one side and the words pushed half an indent off the axis. */
.endolift .price-btn{
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-size:18px;
  line-height:30px;
  letter-spacing:1px;
  color:var(--teal);
  transition:color .3s var(--ease);
}
.endolift .price-btn::before{
  content:'';
  flex:none;
  width:23px;height:28px;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 28' fill='none' stroke='%2345AF9F' stroke-width='1.4'%3E%3Cpath d='M2.2 1.2h13.4l5.2 5.2v20.4H2.2z'/%3E%3Cpath d='M15.4 1.4v5.2h5.2'/%3E%3Cpath d='M6 12.2h11M6 17h11M6 21.6h7'/%3E%3C/svg%3E");
}
.endolift .price-btn:hover{color:var(--teal-dark)}

/* ==========================================================================
   SECTION 2 — results + Q&A
   ========================================================================== */
.endolift .two-col{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:80px;
}
.endolift .two-col--even{grid-template-columns:1fr 1fr;gap:70px}

/* "Що змінюється після Ендоліфт?" — no centred head above the grid. The title
   opens the left column, the result list sits under it and the Q&A runs
   opposite, so the whole section reads as one flat horizontal band. */
.endolift .section--changes{padding:58px 0 56px}
.endolift .two-col--changes{
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(56px,6vw,110px);
  align-items:start;
}
.endolift .changes-intro .ttl{margin-bottom:30px;padding-bottom:24px}
.endolift .changes-intro .ttl::after{display:block;left:0;transform:none;width:200px}
.endolift .changes-intro .dot-list li{padding-bottom:12px}
.endolift .changes-intro .dot-list li:last-child{padding-bottom:0}

/* ==========================================================================
   TECHNOLOGY (LASEmaR) — a two-photo composition left, text right
   ========================================================================== */
/* Proportions read off the composition reference: photo group ≈ 40% of the
   content width, an intentionally generous ≈12% gap, text ≈48%. */
.endolift .tech{
  display:grid;
  grid-template-columns:minmax(0,40fr) minmax(0,48fr);
  column-gap:clamp(64px,11vw,180px);
  align-items:center;
  position:relative;
}
/* Two frames, 333 : 246 wide with an 18px gap, BOTTOM edges aligned and tops
   deliberately not — the small frame hangs low and leaves the open rectangle
   above it that the arc travels through. */
.endolift .tech__media{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:333fr 246fr;
  gap:18px;
  align-items:end;
}
.endolift .tech__ph{margin:0;position:relative;z-index:3}
.endolift .tech__ph img{width:100%;object-fit:cover}
.endolift .tech__text{position:relative;z-index:5}
.endolift .tech__ph--a img{aspect-ratio:333/500;object-position:50% 38%}
.endolift .tech__ph--b img{aspect-ratio:246/332;object-position:52% 46%}
.endolift .tech__text p + p{margin-top:22px}

/* ==========================================================================
   STEPS
   ========================================================================== */
.endolift .steps-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px);gap:clamp(48px,5vw,86px);align-items:start}
.endolift .steps li{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:0 16px;
  padding:15px 0;
  border-top:1px solid var(--hair);
}
.endolift .steps li:last-child{border-bottom:1px solid var(--hair)}
.endolift .steps .n{
  font-family:var(--serif);
  font-size:24px;
  line-height:28px;
  color:var(--teal);
  font-weight:400;
}
.endolift .steps .st{
  margin-bottom:4px;
  font-size:18px;
  line-height:28px;
  font-weight:500;
  color:var(--ink);
}
.endolift .steps p{font-size:17px;line-height:29px}

.endolift .steps-media{display:grid;grid-template-columns:1fr 1fr;gap:18px;position:relative}
.endolift .steps-media figure{margin:0}
/* the two source frames have slightly different ratios — normalise them */
.endolift .steps-media img{width:100%;aspect-ratio:54/100;object-fit:cover;object-position:50% 40%}
.endolift .steps-media figcaption{
  margin-top:10px;
  font-size:13px;
  line-height:19px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted);
}

/* ==========================================================================
   RECOVERY — one composition: intro | one before/after pair | information
   ========================================================================== */
.endolift .recovery-grid{
  display:grid;
  /* the middle column is only as wide as the case; the information panel is
     held narrower than before so its height comes up to meet the module and
     the three columns read as one anchored band */
  grid-template-columns:minmax(0,1.12fr) minmax(0,.74fr) minmax(0,1.04fr);
  gap:clamp(36px,3.6vw,60px);
  align-items:center;
}
.endolift .recovery-intro .sub{color:var(--ink)}
.endolift .recovery-intro .sub + .sub{margin-top:16px;color:var(--muted);font-size:16px;line-height:27px}
.endolift .recovery-box{margin-top:0}

/* ONE before/after component. Both halves are cropped out of the same source
   frame (Asset/IMG_0145.JPG, 899x1599: a 20px border, the upper photograph
   above y=789, the lower one below it). The image is only ever offset and
   clipped — never scaled on one axis — so neither profile is distorted. */
.endolift .ba-case{max-width:280px;margin:0 auto}
.endolift .ba-case figure{margin:0}
/* a hairline and nothing else — no gap, so ДО and ПІСЛЯ read as one module */
.endolift .ba-case__item + .ba-case__item{
  margin-top:0;
  padding-top:0;
  border-top:1px solid var(--hair);
}
.endolift .ba-case__ph{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--soft)}
.endolift .ba-case__ph img{
  position:absolute;
  left:-2.328%;        /* pushes the frame's 20px border outside the box */
  width:104.657%;      /* 899/859 — the photo band fills the box exactly   */
  max-width:none;
  height:auto;
}
.endolift .ba-case__ph--before img{top:-16.3%}    /* upper photograph */
.endolift .ba-case__ph--after  img{top:-137.37%}  /* lower photograph */
.endolift .ba-case figcaption{
  padding:6px;
  text-align:center;
  font-size:11px;
  line-height:15px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--muted);
  background:var(--soft);
}
.endolift .section--soft .ba-case figcaption,
.endolift .section--soft .ba-case__ph{background:var(--white)}
.endolift .ba__note{
  max-width:280px;
  margin:12px auto 0;
  text-align:center;
  font-size:12px;
  line-height:18px;
  color:var(--muted);
}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.endolift .final{text-align:center}
.endolift .final .head{margin-bottom:26px}
.endolift .final .text{max-width:860px;margin:0 auto}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
/* The hidden state is applied ONLY under .js-reveal, which the script adds to
   <html> after it has confirmed it can drive the animation. Content is
   therefore visible by default: a missed observer tick, a disabled script or a
   JS error can never strand a photo at opacity 0. */
.js-reveal .endolift .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--d,0ms);
}
.js-reveal .endolift .reveal.is-in{opacity:1;transform:none}

/* While the viewport is being resized, freeze every layout-dependent
   transition so breakpoint changes land instantly instead of animating. */
.is-resizing .endolift .reveal{transition:none!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-reveal .endolift .reveal{opacity:1;transform:none;transition:none}
  .endolift *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   RESPONSIVE — three designed tiers
     desktop   above 1160px   (the rules down to 1300px only rescale it)
     tablet     768 – 1160px  (re-composed, not collapsed)
     mobile    below  768px
   ========================================================================== */

/* --- large desktop down to laptop ---------------------------------------- */
@media (max-width:1600px){
  /* the live site swaps its fixed content inset for a proportional one and
     stacks the address over the phone; type sizes stay put */
  :root{--gutter:64px;--header-content-left:30%}
  
  
  
  /* below the live site's wide breakpoint the menu is allowed to run onto a
     second row rather than be squeezed, exactly as it does on the live site */
  
  
  
  
  /* only the header/footer control shrinks with the chrome — the page's own
     CTA keeps the site-wide button size at every desktop width */
  
  .endolift .feature--img-right > .feature__panel,
.endolift .feature--hero > .feature__panel{grid-template-columns:minmax(0,1fr) minmax(0,400px)}
  .endolift .feature--img-left  > .feature__panel{grid-template-columns:minmax(0,400px) minmax(0,1fr)}
  .endolift .tech{grid-template-columns:minmax(0,540px) minmax(0,1fr)}
  .endolift .steps-grid{grid-template-columns:minmax(0,1fr) minmax(0,580px)}
}

/* laptops: the live site's own laptop step — smaller address, tighter menu
   rhythm, smaller booking button. The menu is allowed to run onto a second
   row here, exactly as it does on the live site at this width. */
@media (max-width:1400px){
  
  
  
  
}

/* the live footer's laptop inset */
@media (max-width:1365px){
  
}

@media (max-width:1300px){
  .endolift .ttl{font-size:32px;line-height:42px}
  .endolift .block-ttl{font-size:26px;line-height:36px}
  .endolift .green-band{font-size:23px}
  .endolift .section{padding:60px 0 56px}
  .endolift .section--intro{padding:44px 0 62px}
  .endolift .feature--img-right > .feature__panel,
.endolift .feature--hero > .feature__panel{grid-template-columns:minmax(0,1fr) minmax(0,360px)}
  .endolift .feature--img-left  > .feature__panel{grid-template-columns:minmax(0,360px) minmax(0,1fr)}
  .endolift .fact + .fact{padding-left:78px}
  .endolift .fact + .fact::before{left:30px}
  .endolift .two-col{grid-template-columns:1fr;gap:46px}
  /* Stacked, the Q&A list takes the whole content width and closes with its
     own hairline — and the section rule underneath then draws the very same
     line a gap lower, so the two sections are parted by a doubled divider.
     Side by side the two never collide, because the list only spans its
     column. The list keeps its line; the section drops the duplicate. */
  .endolift .section--rule::before{content:none}
  /* three columns stop working here — the pair moves under the intro */
  .endolift .recovery-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:44px 56px;align-items:start}
  .endolift .recovery-box{grid-column:1 / -1}
}

/* ==========================================================================
   TABLET AND BELOW — shared re-composition
   ========================================================================== */
@media (max-width:1160px){
  :root{--header-h:76px;--header-h-small:64px;--logo-w:36px;--logo-w-small:29px;--logo-top:0px}
  
  
  
  
  
  
  

  .endolift .section{padding:56px 0 52px}
  .endolift .section.section--first{padding-top:calc(var(--header-h) + 40px);padding-bottom:44px}
  .endolift .section--intro{padding:40px 0 52px}
  .endolift .feature--img-right > .feature__panel,
.endolift .feature--img-left  > .feature__panel,
.endolift .feature--hero > .feature__panel{
    grid-template-columns:1fr;
    /* wide enough that the part of the curve which passes under the frame
       still lands in clear space, never on the first line of copy */
    gap:52px;
  }
  /* stacking: the visual always comes before the explanation */
  .endolift .feature--hero .feature__media,
.endolift .feature--hero .feature__body{grid-column:1;grid-row:auto}
  .endolift .feature--img-left .feature__media{order:0}
  /* "Ендоліфт для тіла" writes copy first and photo second, which stacked put
     its picture below the two buttons — reading as a stray frame dropped
     between two sections. Every block now opens with its photograph. */
  .endolift .feature--img-right .feature__media{order:-1}
  .endolift .feature__content,
.endolift .feature__body{max-width:none}

  /* photography is framed rather than left to run to its natural height */
  .endolift .feature__media > img:not(.deco-arc){width:100%;object-fit:cover}

  /* Stacked layout: the photo is held narrower than its column so the curve
     still has clear room to swing out — it stays visible without ever
     reaching the copy or the page edge. */
  /* Stacked layout keeps the desktop curve geometry; the photo is simply held
     narrower than its column so the sweep has the same free space to travel
     through that it has on desktop. */
  .endolift .feature__media{max-width:min(100%,520px);margin-inline:auto}
  .endolift .glow::before,
.endolift .glow::after{filter:blur(28px)}

  .endolift .facts{grid-template-columns:1fr 1fr;gap:22px 40px;margin-bottom:38px}
  .endolift .fact,
.endolift .fact + .fact{padding-left:58px;padding-right:0}
  .endolift .fact + .fact::before{left:0}
  .endolift .fact + .fact::after{display:none}

  /* The laser block carries its heading inside the text column, so stacked
     photo-first it opened with two unexplained frames straight after the
     previous section's buttons. Title and copy lead, the pair closes. */
  .endolift .tech{grid-template-columns:1fr;column-gap:0;row-gap:40px}
  .endolift .tech__text{order:-1}
  .endolift .tech__media{max-width:min(100%,500px);margin-inline:auto}
  .endolift .steps-grid{grid-template-columns:1fr;gap:40px}
  .endolift .recovery-grid{grid-template-columns:1fr;gap:34px}
  .endolift .recovery-box{grid-column:auto}

  .endolift .map-block{height:auto}
  .endolift .map-canvas{position:relative;height:340px}
  .endolift .map-card{position:relative;top:0;left:0;width:auto;box-shadow:none;background:var(--soft);padding:40px 28px}
  
  
  
  
  
  
  
  .endolift .social{text-align:left;margin:8px 0 0;padding-bottom:22px}
  .endolift .social a{margin-left:16px}
  
  .endolift .copy-block{margin-top:34px;flex-wrap:wrap;gap:20px}
}

/* ==========================================================================
   TABLET — 768 to 1160
   ========================================================================== */
@media (min-width:768px) and (max-width:1160px){
  :root{--gutter:44px}

  .endolift .ttl{font-size:29px;line-height:39px}
  .endolift .ttl.ttl--hero{font-size:34px;line-height:44px}
  .endolift .block-ttl{font-size:24px;line-height:34px;margin-bottom:22px}
  .endolift .green-band{font-size:21px;margin-bottom:28px}
  .endolift .head{max-width:640px;margin-bottom:36px}
  .endolift .head--wide{max-width:760px}

  /* Stacked frames are wide and short, so the desktop ellipse would spill onto
     the copy underneath. Each arc is re-sized to sit inside its frame
     vertically and still show a cap on either side. */
  .endolift .feature--hero .feature__media{--arc-w:150%;--arc-l:-25%;--arc-t:-30%}
  .endolift .feature--face .feature__media{--arc-w:150%;--arc-l:-25%;--arc-t:-22%}
  .endolift .feature--body .feature__media{--arc-w:147%;--arc-l:-23%;--arc-t:-21%}

  /* stacked columns must not hand a single photograph the whole screen */
  .endolift .feature--hero .feature__media > img:not(.deco-arc){aspect-ratio:16/10;object-position:50% 30%}
  .endolift .feature--face .feature__media > img:not(.deco-arc){aspect-ratio:16/11;object-position:52% 42%}
  .endolift .feature--body .feature__media > img:not(.deco-arc){aspect-ratio:16/11;object-position:50% 48%}
  .endolift .steps-media{max-width:none;gap:16px}
  .endolift .steps-media img{aspect-ratio:3/4}

  /* stacked, the case had stayed at its desktop column width and read as a
     stray thumbnail — it now scales with the other photography */
  .endolift .ba-case,
.endolift .ba__note{max-width:min(100%,460px)}

  .endolift .btns-block{gap:20px 36px}
}

/* large tablets / landscape keep two columns where they still read well */
@media (min-width:900px) and (max-width:1160px){
  .endolift .two-col{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:48px}
  .endolift .recovery-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:34px 48px;align-items:start}
  .endolift .recovery-box{grid-column:1 / -1}
  .endolift .steps-grid{grid-template-columns:minmax(0,1fr) 280px;gap:40px}
  .endolift .steps-media{grid-template-columns:1fr;gap:14px}
  .endolift .steps-media img{aspect-ratio:1/1;object-position:50% 42%}

  .endolift .map-block{height:470px}
  .endolift .map-canvas{position:absolute;inset:0;height:auto}
  .endolift .map-card{
    position:absolute;
    top:54px;
    left:var(--gutter);
    width:330px;
    padding:34px 30px;
    background:rgba(255,255,255,.96);
    box-shadow:0 18px 50px rgba(39,39,54,.12);
  }
}

/* ==========================================================================
   MOBILE — below 768
   ========================================================================== */
@media (max-width:767px){
  .endolift{font-size:16px;line-height:27px}
  :root{--gutter:20px;--header-h:70px;--header-h-small:58px;--logo-w:32px;--logo-w-small:27px}
  .endolift .wrap{padding:0 var(--gutter)}

  .endolift .ttl{font-size:25px;line-height:34px;letter-spacing:.6px;padding-bottom:20px;margin-bottom:16px}
  .endolift .ttl.ttl--hero{font-size:28px;line-height:37px;letter-spacing:.4px}
  .endolift .ttl::after{width:120px}
  .endolift .green-band{font-size:18px;line-height:1.35;margin:10px 0 20px;padding:6px 13px}
  .endolift .sub{font-size:16px;line-height:26px}
  .endolift .promo{font-size:18px;line-height:1.4;padding:12px 20px;margin-top:26px}
  .endolift .promo__t{font-size:11px;letter-spacing:2px;margin-bottom:6px}
  .endolift .block-ttl{font-size:21px;line-height:30px;letter-spacing:.8px;margin-bottom:18px}
  .endolift .head{margin-bottom:26px}

  .endolift .section{padding:44px 0 40px}
  .endolift .section.section--first{padding-top:calc(var(--header-h) + 28px);padding-bottom:32px}
  .endolift .section--intro{padding:30px 0 40px}

  /* Phone: every photograph spans the same column as the copy above it.
     Held narrower they each picked their own width and the page read as a
     pile of loose pictures; one shared edge is what makes it a layout. */
  .endolift .feature__media{max-width:100%}
  /* Full-width frames leave only the gutter for the arc, so each ellipse is
     re-sized to clear its photo by about that much and no more — the sweep
     stays whole instead of running off the screen and back. */
  .endolift .feature--hero .feature__media{--arc-w:145%;--arc-l:-22.4%;--arc-t:-8.3%}
  .endolift .feature--face .feature__media{--arc-w:141%;--arc-l:-20.5%;--arc-t:-7%}
  .endolift .feature--body .feature__media{--arc-w:135%;--arc-l:-17.8%;--arc-t:-5.1%}
  .endolift .tech__media{--arc-w:141%;--arc-l:-20.5%;--arc-t:-5.2%}
  /* the hazes pull in so they cannot wash across a phone-width column */
  .endolift .glow::before,
.endolift .glow::after{filter:blur(20px)}
  .endolift .feature--hero .glow{--g1x:-16%;--g1w:38%;--g2x:80%;--g2w:36%}
  .endolift .feature--face .glow{--g1x:-15%;--g1w:36%;--g2x:82%;--g2w:36%}
  .endolift .feature--body .glow{--g1x:80%;--g1w:36%;--g2x:-16%;--g2w:38%}
  .endolift .tech__media  .glow{--g1x:-12%;--g1w:36%;--g2x:78%;--g2w:38%}

  /* framed photography — no single image may take over the screen */
  .endolift .feature--hero .feature__media > img:not(.deco-arc){aspect-ratio:5/4;object-position:50% 28%}
  .endolift .feature--face .feature__media > img:not(.deco-arc){aspect-ratio:5/4;object-position:52% 44%}
  .endolift .feature--body .feature__media > img:not(.deco-arc){aspect-ratio:5/4;object-position:50% 50%}
  .endolift .tech__media{max-width:100%;gap:12px}

  .endolift .text,
.endolift .qa p,
.endolift .steps p,
.endolift .dot-list li{font-size:16px;line-height:27px}
  .endolift .text--lead{font-size:17px;line-height:28px}
  .endolift .text p + p{margin-top:16px}

  /* one metric per row — two-up left the RU labels ("Длительность
     процедуры") only ~90px and they broke across three lines */
  .endolift .facts{grid-template-columns:1fr;gap:12px;margin-bottom:26px}
  .endolift .fact,
.endolift .fact + .fact{padding:0 0 0 50px;min-height:38px}
  .endolift .fact::before,
.endolift .fact + .fact::before{width:36px;height:36px;left:0}
  .endolift .fact__t{font-size:15px;line-height:21px}
  .endolift .fact__v{font-size:15px;line-height:21px;font-weight:600}

  .endolift .dot-list li{padding-left:22px;padding-bottom:8px}
  .endolift .dot-list li::before{width:8px;height:8px;top:9px}

  .endolift .qa li{padding:16px 0}
  .endolift .qa .q{font-size:17px;line-height:26px;margin-bottom:6px}

  .endolift .grey-box{padding:20px;margin-top:26px}
  .endolift .grey-box p,
.endolift .grey-box b{font-size:16px;line-height:27px}

  /* one CTA per row, both centred on the same axis and the same width, so the
     pair reads as one block instead of two stray links */
  .endolift .btns-block{gap:14px;padding-top:24px;flex-direction:column;align-items:center}
  .endolift .btns-block .el-btn,
.endolift .btns-block .price-btn{width:100%}
  .endolift .btns-block .el-btn{padding:18px 20px;font-size:15px;letter-spacing:1.8px}
  .endolift .price-btn{justify-content:center;font-size:17px}

  .endolift .two-col,
.endolift .recovery-grid{gap:30px}

  /* steps: the text leads, the gallery supports it as one compact pair */
  .endolift .steps-grid{gap:28px}
  .endolift .steps li{grid-template-columns:38px minmax(0,1fr);gap:0 10px;padding:15px 0}
  .endolift .steps .n{font-size:21px;line-height:26px}
  .endolift .steps .st{font-size:17px;line-height:25px;margin-bottom:4px}
  .endolift .steps-media{grid-template-columns:1fr 1fr;gap:12px;max-width:none}
  .endolift .steps-media figcaption{
    margin-top:9px;
    font-size:12px;
    line-height:18px;
    letter-spacing:0;
    text-transform:none;
  }

  /* before / after: the case takes the same column as every other photo */
  .endolift .ba-case{max-width:100%}
  .endolift .ba-case figcaption{padding:9px 6px;font-size:12px;letter-spacing:1.4px}
  .endolift .ba__note{max-width:none;margin-top:14px;line-height:20px}

  .endolift .map-canvas{height:260px}
  .endolift .map-card{padding:32px 20px}
  .endolift .map-card .item{padding-left:44px}
  .endolift .map-card .label{font-size:15px}
  .endolift .map-card .val{font-size:16px;line-height:26px}

  
  
  
  
  
  
  
  .endolift .social svg{width:42px;height:42px}
  .endolift .social a{margin-left:14px}
  .endolift .social{margin:8px 0 0;padding-bottom:18px}
  
  
  .endolift .copy-block{margin-top:28px}
  .endolift .copy{font-size:12px;line-height:19px}
  .endolift .copy-block a{font-size:13px}

  
  
  
  
  
}

@media (max-width:380px){
  .endolift .ba-case figcaption{letter-spacing:.6px}
}