/* Ольга Ложкова — сайт. Білий сайт: єдиний колір — у фотографіях; текст і кнопки — глибоке небо з фото. */
:root{
  --paper:#FFFFFF;     /* ґрунт сторінки — чистий білий: колір лишається тільки у фото */
  --soft:#F4F5F6;      /* ледь помітні поверхні: наведення, футер */
  --line:#DDE2E7;      /* тонкі лінії й рамки */
  --deep:#1E2E4F;      /* глибоке небо з фото — ім'я, кнопки, заповнення прогресу */
  --ink:#1C2638;       /* текст */
  --ink-2:#3D4A5C;     /* вторинний текст */
  --muted:#5E6B7A;     /* приглушений текст (≥4.5:1 на білому й на --soft) */
  --r-lg:clamp(32px,4.4vw,64px);
  --r-md:clamp(22px,2.6vw,36px);
  --r-sm:18px;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px,4vw,64px);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Onest',system-ui,sans-serif;font-size:17px;line-height:1.55;font-weight:450;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-0.035em;line-height:.95;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
ul,ol{margin:0;padding:0;list-style:none;}
:focus-visible{outline:3px solid var(--deep);outline-offset:4px;border-radius:6px;}
section[id]{scroll-margin-top:88px;}
.shell{max-width:1440px;margin-left:auto;margin-right:auto;padding-left:var(--gut);padding-right:var(--gut);}
.skip{position:absolute;left:16px;top:-70px;z-index:300;background:var(--deep);color:#fff;padding:12px 20px;border-radius:99px;font-weight:600;transition:top .25s var(--ease);}
.skip:focus{top:16px;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:14px 26px;border-radius:99px;font-size:16px;font-weight:600;transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease);}
.btn svg{width:18px;height:18px;stroke:currentColor;transition:transform .35s var(--ease);}
.btn:hover svg{transform:translateX(4px);}
.btn:active{transform:scale(.98);}
.btn-outline{color:var(--deep);box-shadow:inset 0 0 0 1.5px rgba(30,46,79,.35);}
.btn-outline:hover{background:rgba(30,46,79,.06);}
.btn-deep{background:var(--deep);color:#fff;}
.btn-deep:hover{background:#2A3D63;}

/* ---------- шапка ---------- */
/* Прозора над фото; після початку скролу — біла заливка з розмиттям */
.header{position:fixed;top:0;left:0;right:0;z-index:100;--fg:var(--deep);color:var(--fg);transition:background-color .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s var(--ease),-webkit-backdrop-filter .35s var(--ease),color .35s var(--ease);}
.header.is-scrolled,.header.is-open{background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);box-shadow:0 1px 0 rgba(30,46,79,.08),0 10px 30px -24px rgba(30,46,79,.5);--fg:var(--deep);}
.header-inner{max-width:1440px;margin:0 auto;padding:0 var(--gut);height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:inline-flex;align-items:center;min-height:44px;font-size:18px;font-weight:700;letter-spacing:-0.02em;white-space:nowrap;}
.header-right{display:flex;align-items:center;gap:clamp(8px,1.6vw,24px);}
.menu{display:flex;align-items:center;gap:2px;}
.menu a{font-size:15px;font-weight:600;padding:10px 14px;border-radius:99px;white-space:nowrap;transition:background-color .3s var(--ease);}
.menu a:hover{background:rgba(30,46,79,.07);}
.header-cta{display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;border-radius:99px;font-size:15px;font-weight:600;background:var(--deep);color:#fff;white-space:nowrap;transition:background-color .3s var(--ease),color .3s var(--ease);}
.header-cta:hover{background:#2E4470;}
.burger{display:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;place-items:center;transition:background-color .3s var(--ease);}
.burger:hover{background:rgba(30,46,79,.07);}
.burger svg{width:22px;height:22px;stroke:currentColor;}
.burger .i-close{display:none;}
.header.is-open .burger .i-open{display:none;}
.header.is-open .burger .i-close{display:block;}
.menu-panel{display:none;}
@media(max-width:900px){
  .menu{display:none;}
  .burger{display:grid;}
  .menu-panel{position:absolute;top:72px;left:0;right:0;padding:8px var(--gut) 24px;background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 20px 30px -24px rgba(30,46,79,.5);}
  .header.is-open .menu-panel{display:block;}
  .menu-panel a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-size:22px;font-weight:650;letter-spacing:-0.02em;color:var(--deep);}
  .menu-panel a:last-child{border-bottom:0;}
}
@media(max-width:400px){.header-cta{padding:10px 16px;font-size:14px;}.brand{font-size:16px;}}
@media(max-width:360px){.header-inner{gap:8px;}.header-right{gap:4px;}.brand{font-size:15px;}.header-cta{padding:10px 12px;font-size:13px;}}
/* Вертикальний кадр: угорі глибоке небо — поки шапка прозора, текст білий */
@media (max-aspect-ratio:1/1){
  .header[data-over="photo"]:not(.is-scrolled):not(.is-open){--fg:#fff;}
  .header[data-over="photo"]:not(.is-scrolled):not(.is-open) .header-cta{background:#fff;color:var(--deep);}
  .header[data-over="photo"]:not(.is-scrolled):not(.is-open) .burger:hover{background:rgba(255,255,255,.14);}
}

/* ---------- кіно-шапка: закріплене фото ---------- */
.cinema{position:relative;background:var(--deep);}
.cinema-media{position:sticky;top:0;height:100vh;height:100dvh;z-index:0;overflow:hidden;}
.cinema-media img{width:100%;height:100%;object-fit:cover;object-position:50% 48%;}
/* Шар, що рухається за курсором: трохи більший за екран, щоб зсув на ±14px не відкривав краї */
.cinema-frame{position:absolute;inset:-18px;will-change:transform;}
.cinema-frame img{position:absolute;inset:0;}
/* Вхід: кадр проявляється з розмитості й осідає з масштабу 1.06 — один раз, коли фото завантажене */
html.js .cinema-photo{transform:scale(1.06);transition:transform 2.2s cubic-bezier(.23,1,.32,1);}
html.js .cinema.is-in .cinema-photo{transform:none;}
html.js .cinema:not(.is-in) .cinema-blur{opacity:1 !important;}
.cinema.is-revealing .cinema-blur{transition:opacity 1.5s cubic-bezier(.33,1,.68,1);}
/* Дуже широкі невисокі екрани (~2:1) ріжуть кадр сильніше — трохи більше неба, щоб рядок фактів не лягав на голову Ольги */
@media (min-aspect-ratio:19/10){.cinema-media img{object-position:50% 44%;}}
/* Телефон горизонтально (низький екран): ще більше неба, щоб факти не лягали на Ольгу */
@media (max-height:520px) and (min-aspect-ratio:3/2){.cinema-media img{object-position:50% 38%;}}
.cinema-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(238,242,243,.35) 0%,rgba(238,242,243,0) 34%,rgba(20,26,36,0) 62%,rgba(20,26,36,.55) 100%);}
/* При переході до привітання кадр розмивається й світлішає: поверх різкого фото проявляється заздалегідь розмита копія, над нею — біла димка.
   Анімується лише opacity цих двох шарів — blur не перераховується на кожному кадрі скролу. */
.cinema-media .cinema-blur{position:absolute;inset:0;filter:blur(28px) saturate(1.05);transform:scale(1.12);opacity:0;will-change:opacity;pointer-events:none;}
.cinema-veil{position:absolute;inset:0;background:#fff;opacity:0;will-change:opacity;}
.cinema-flow{position:relative;z-index:1;margin-top:-100vh;margin-top:-100dvh;}

/* Десктоп: ім'я в небі над горизонтом, підписи — на темній воді, Ольга між ними */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(90px,12vh,132px);padding-bottom:clamp(26px,4.5vh,52px);}
/* Ім'я — легше накреслення, розтягнуте рівно на ширину контенту (розмір підбирає JS за реальною шириною тексту, з обмеженням по висоті) */
.hero-name{width:max-content;max-width:none;font-size:clamp(56px,13vw,200px);line-height:.88;letter-spacing:-0.045em;color:var(--deep);font-weight:500;white-space:nowrap;}
.hero-name .w{display:inline-block;overflow:hidden;padding-bottom:.06em;vertical-align:top;}
.hero-name .w span{display:block;transform:translateY(105%);animation:rise 1.1s var(--ease) .15s forwards;}
.hero-name .w:nth-child(2) span{animation-delay:.28s;}
@keyframes rise{to{transform:none;}}
/* Під ім'ям — один рядок із трьох фактів на тонкій лінії, рознесених по ширині імені */
.hero-facts{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 32px;margin-top:clamp(16px,2.4vh,28px);padding-top:clamp(14px,2vh,20px);border-top:1px solid rgba(30,46,79,.3);font-size:clamp(15px,1.3vw,19px);font-weight:550;letter-spacing:-0.01em;line-height:1.3;color:var(--deep);}
.hero-scroll{position:absolute;right:var(--gut);bottom:clamp(26px,4.5vh,52px);font-size:13px;font-weight:600;color:rgba(255,255,255,.88);display:flex;align-items:center;gap:10px;}
.hero-scroll i{width:1px;height:36px;background:rgba(255,255,255,.7);display:block;animation:drop 2.2s ease-in-out infinite;transform-origin:top;}
@keyframes drop{0%,100%{transform:scaleY(.3);}50%{transform:scaleY(1);}}
/* Вертикальний кадр: зверху чисте глибоке небо, усе ім'я та підписи — внизу на воді */
@media (max-aspect-ratio:1/1){
  .cinema-media img{object-position:45% 50%;}
  .cinema-scrim{background:linear-gradient(180deg,rgba(20,30,52,.34) 0%,rgba(20,30,52,0) 38%,rgba(20,26,36,0) 60%,rgba(20,26,36,.66) 100%);}
  .hero{justify-content:space-between;padding-top:clamp(96px,13vh,130px);}
  .hero-facts{flex-direction:column;gap:6px;margin-top:auto;border-top-color:rgba(255,255,255,.45);color:#fff;font-size:16px;}
  .hero-scroll{display:none;}
  .hero-name{width:auto;white-space:normal;color:#fff;font-size:clamp(56px,17vw,150px);}
  .hero-name .w{display:block;}
  .hero-name .w + .w{margin-left:0;}
}

.greet{padding-top:clamp(80px,16vh,170px);padding-bottom:clamp(48px,8vh,96px);color:var(--deep);}
/* Розмите фото поступово розчиняється в білому — без жорсткої межі з наступною секцією */
.cinema-flow::after{content:"";display:block;height:clamp(220px,42vh,420px);background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.9) 75%,#fff 100%);pointer-events:none;}
.greet-hi{font-size:clamp(22px,2.4vw,34px);font-weight:650;color:var(--deep);letter-spacing:-0.02em;}
.greet-title{margin-top:14px;font-size:clamp(34px,6vw,88px);line-height:.98;letter-spacing:-0.045em;max-width:15ch;}
.greet-lead{margin-top:clamp(36px,6vh,64px);font-size:clamp(17px,1.6vw,21px);font-weight:600;color:var(--deep);}
.greet-list{margin-top:14px;border-top:1px solid rgba(30,46,79,.2);max-width:880px;}
.greet-list li{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-bottom:1px solid rgba(30,46,79,.2);font-size:clamp(18px,2vw,26px);font-weight:600;line-height:1.28;letter-spacing:-0.015em;}
.greet-list svg{flex:none;width:24px;height:24px;margin-top:3px;stroke:var(--deep);}
.greet-note{margin-top:clamp(28px,5vh,44px);font-size:clamp(17px,1.6vw,21px);font-weight:500;line-height:1.5;max-width:46ch;color:var(--deep);}
.greet-actions{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- плити ---------- */
.slab{position:relative;z-index:2;background:var(--paper);margin-top:-1px;padding-top:clamp(104px,17vh,210px);padding-bottom:clamp(104px,17vh,210px);}
.h-big{font-size:clamp(38px,6.6vw,100px);letter-spacing:-0.048em;line-height:.93;max-width:14ch;}
.h-mid{font-size:clamp(30px,4.6vw,66px);letter-spacing:-0.042em;line-height:.96;max-width:18ch;}

/* ---------- формати ---------- */
.formats-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
.formats-aside{max-width:34ch;color:var(--ink-2);font-size:16px;}
.offer{margin-top:clamp(44px,7vh,84px);}
/* Рядок формату: лінії — псевдоелементи, щоб їх можна було «промалювати» при появі */
.offer-row{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.1fr);gap:clamp(16px,3vw,48px);align-items:start;padding:clamp(28px,4.4vh,48px) 0;position:relative;}
.offer-row::before,.offer-row:last-child::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line);transform-origin:left;}
.offer-row::before{top:0;}
.offer-row:last-child::after{bottom:0;}
.offer-idx{font-size:14px;font-weight:650;color:var(--muted);padding-top:.55em;font-variant-numeric:tabular-nums;}
.offer-row h3{font-size:clamp(28px,3.6vw,50px);letter-spacing:-0.04em;}
.offer-row h3>span{display:block;}

/* Поява рядка (лише з JS): лінія малюється зліва направо → номер → назва виїжджає з-під маски → опис → чіпи по одному.
   Рядки, що входять разом, стартують із кроком 0.12s. Сам рядок не згасає — анімуються його частини. */
html.js .offer-row.rv{opacity:1;transform:none;}
html.js .offer-row:nth-child(2){--rd:.12s;}
html.js .offer-row:nth-child(3){--rd:.24s;}
html.js .offer-row::before,html.js .offer-row:last-child::after{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.23,1,.32,1) var(--rd,0s);}
html.js .offer-row:last-child::after{transition-delay:calc(var(--rd,0s) + .3s);}
html.js .offer-idx{opacity:0;transform:translateY(8px);transition:opacity .6s ease calc(var(--rd,0s) + .1s),transform .6s cubic-bezier(.23,1,.32,1) calc(var(--rd,0s) + .1s);}
html.js .offer-row h3{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;}
html.js .offer-row h3>span{transform:translateY(105%);transition:transform .95s cubic-bezier(.23,1,.32,1) calc(var(--rd,0s) + .14s);}
html.js .offer-body{opacity:0;transform:translateY(14px);transition:opacity .7s ease calc(var(--rd,0s) + .3s),transform .8s cubic-bezier(.23,1,.32,1) calc(var(--rd,0s) + .3s);}
html.js .chips li{opacity:0;transform:translateY(8px) scale(.96);transition:opacity .45s ease,transform .5s cubic-bezier(.23,1,.32,1);transition-delay:calc(var(--rd,0s) + .44s);}
html.js .chips li:nth-child(2){transition-delay:calc(var(--rd,0s) + .5s);}
html.js .chips li:nth-child(3){transition-delay:calc(var(--rd,0s) + .56s);}
html.js .chips li:nth-child(4){transition-delay:calc(var(--rd,0s) + .62s);}
html.js .offer-row.on::before,html.js .offer-row.on:last-child::after,html.js .offer-row.on h3>span,html.js .offer-row.on .offer-idx,html.js .offer-row.on .offer-body,html.js .offer-row.on .chips li{opacity:1;transform:none;}
.offer-body{color:var(--ink-2);font-size:17px;line-height:1.6;max-width:48ch;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.chips li{font-size:14px;font-weight:600;color:var(--ink);padding:8px 14px;border-radius:99px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);}
@media(max-width:860px){.offer-row{grid-template-columns:40px 1fr;}.offer-row .col-b{grid-column:2;}}

/* ---------- підхід: слайдер принципів ---------- */
/* Базовий вигляд (мобільний і без JS) — список: фото 4:5 над кожним принципом */
.approach{position:relative;background:var(--paper);color:var(--ink);}
.ap-media,.ap-progress,.ap-counter{display:none;}
.ap-text{padding:clamp(104px,15vh,180px) var(--gut);}
.ap-heading{font-size:clamp(34px,6vw,64px);letter-spacing:-0.045em;line-height:.95;max-width:13ch;}
.ap-item{margin-top:clamp(64px,10vh,96px);}
.ap-item img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 70%;margin-bottom:24px;}
.ap-num{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;}
.ap-num::after{content:"";width:44px;height:2px;background:var(--ink);border-radius:2px;}
.ap-title{margin-top:14px;font-size:clamp(34px,12vw,84px);font-weight:650;letter-spacing:-0.05em;line-height:.9;}
.ap-title .ln{display:block;}
.ap-title .ln>span{display:block;}
.ap-body{margin-top:24px;font-size:clamp(17px,1.35vw,20px);line-height:1.5;max-width:30ch;}
.ap-body::before{content:"";display:block;width:48px;height:2px;border-radius:2px;background:var(--ink);margin-bottom:16px;}

/* Десктоп з JS — екран закріплений, скрол перемикає принципи.
   Композиція колонки: одна ліва вісь. Верхній рядок — назва розділу й лічильник,
   під ними лінія; назва принципу притиснута догори, опис — донизу, прогрес — під ним. */
@media(min-width:901px){
  html.js .approach{height:calc(100vh + var(--n) * 72vh);}
  html.js .ap-stage{position:sticky;top:0;height:100vh;height:100dvh;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;}

  /* Фото: нове проявляється поверх поточного (z-index росте), старе ховається лише коли нове вже повністю перекрило його */
  html.js .ap-media{display:block;position:relative;overflow:hidden;background:var(--deep);isolation:isolate;}
  html.js .ap-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity 1.1s cubic-bezier(.45,0,.55,1),transform 2.4s cubic-bezier(.23,1,.32,1);will-change:opacity,transform;backface-visibility:hidden;}

  html.js .ap-text{display:grid;grid-template-rows:auto minmax(0,1fr) auto;row-gap:clamp(20px,3.6vh,40px);padding:clamp(92px,12vh,112px) var(--gut) clamp(18px,3.2vh,32px) clamp(40px,4.6vw,88px);min-height:0;}
  html.js .ap-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-bottom:clamp(14px,2.2vh,22px);border-bottom:1px solid var(--line);}
  html.js .ap-heading{font-size:clamp(15px,1.2vw,19px);font-weight:600;letter-spacing:-0.01em;line-height:1.3;max-width:24ch;}
  html.js .ap-counter{display:flex;align-items:baseline;gap:6px;margin:0;white-space:nowrap;font-variant-numeric:tabular-nums;}
  html.js .ap-counter b{font-size:clamp(26px,2.4vw,38px);font-weight:650;letter-spacing:-0.035em;line-height:1;}
  html.js .ap-counter span{font-size:14px;font-weight:550;}

  html.js .ap-items{display:grid;min-height:0;}
  html.js .ap-item{grid-area:1/1;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:0;pointer-events:none;}
  html.js .ap-item.is-active{pointer-events:auto;}
  html.js .ap-item img,html.js .ap-num{display:none;}
  html.js .ap-title{margin-top:0;font-size:clamp(40px,min(5.1vw,11vh),92px);}
  html.js .ap-body{margin:0;max-width:34ch;}

  /* рядки назви виїжджають з-під маски каскадом, минулий принцип іде вгору; вихід швидший за вхід */
  html.js .ap-title .ln{overflow:hidden;padding:.04em 0 .08em;}
  html.js .ap-title .ln>span{transform:translateY(135%);transition:transform .45s cubic-bezier(.23,1,.32,1);}
  html.js .ap-item.is-past .ap-title .ln>span{transform:translateY(-135%);}
  html.js .ap-item.is-active .ap-title .ln>span{transform:none;transition-duration:.9s;}
  html.js .ap-item.is-active .ap-title .ln:nth-child(2)>span{transition-delay:.06s;}
  html.js .ap-item.is-active .ap-title .ln:nth-child(3)>span{transition-delay:.12s;}
  html.js .ap-body{opacity:0;transform:translateY(14px);transition:opacity .3s ease,transform .3s cubic-bezier(.23,1,.32,1);}
  html.js .ap-item.is-active .ap-body{opacity:1;transform:none;transition:opacity .7s ease .22s,transform .8s cubic-bezier(.23,1,.32,1) .22s;}

  /* прогрес: чотири поділки з підписами; заповнення — transform, не CSS-змінна */
  html.js .ap-progress{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(10px,1.4vw,20px);}
  html.js .ap-progress button{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:44px;padding:10px 0 4px;border:0;background:none;color:var(--ink);font:inherit;font-size:13px;font-weight:550;text-align:left;cursor:pointer;}
  html.js .ap-progress i{display:block;width:100%;height:2px;border-radius:2px;background:var(--line);overflow:hidden;}
  html.js .ap-progress b{display:block;height:100%;background:var(--deep);transform-origin:left;transform:scaleX(0);}
  html.js .ap-progress button[aria-current="step"]{font-weight:700;}
}

/* ---------- про мене ---------- */
.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start;}
.about-photos{position:sticky;top:96px;}
.about-main{overflow:hidden;aspect-ratio:4/5;max-height:calc(100vh - 128px);max-height:calc(100dvh - 128px);background:var(--line);}
.about-main img{width:100%;height:100%;object-fit:cover;object-position:50% 44%;}
.about-lead{font-size:clamp(26px,3.3vw,46px);font-weight:650;line-height:1.06;letter-spacing:-0.035em;max-width:18ch;}
.about-lead em{font-style:normal;}
.about-body{margin-top:24px;color:var(--ink-2);max-width:54ch;line-height:1.65;}
.figs{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:clamp(24px,4vw,56px);margin-top:clamp(34px,5vh,52px);}
.figs b{display:block;font-size:clamp(42px,5.4vw,78px);font-weight:650;letter-spacing:-0.055em;line-height:.9;color:var(--ink);font-variant-numeric:tabular-nums;}
.figs small{display:block;font-size:14px;font-weight:600;color:var(--muted);margin-top:10px;max-width:14ch;line-height:1.3;}
.about-sub{margin-top:clamp(52px,8vh,80px);margin-bottom:18px;font-size:clamp(22px,1.9vw,28px);font-weight:650;letter-spacing:-0.02em;line-height:1.2;}
.spec{border-bottom:1px solid var(--line);}
.spec li{padding:18px 0;border-top:1px solid var(--line);}
.spec b{display:block;font-size:18px;font-weight:550;letter-spacing:-0.015em;}
.spec p{margin-top:6px;font-size:15px;color:var(--ink-2);line-height:1.55;}

/* Освіта — вертикальна лінія часу: точки на осі, рік великим, під ним що саме.
   Остання (навчання триває) — порожня точка й мітка. Вісь промальовується при появі. */
.edu{position:relative;padding-left:34px;margin-top:8px;}
.edu::before{content:"";position:absolute;left:6px;top:10px;bottom:22px;width:2px;border-radius:2px;background:var(--line);transform-origin:top;transform:scaleY(0);transition:transform 1.4s cubic-bezier(.23,1,.32,1) .2s;}
.edu.on::before,.no-js .edu::before{transform:none;}
.edu li{position:relative;padding-bottom:clamp(22px,3.2vh,30px);}
.edu li:last-child{padding-bottom:0;}
.edu li::before{content:"";position:absolute;left:-34px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 5px var(--paper);}
.edu li.is-now::before{background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink),0 0 0 5px var(--paper);}
.edu b{display:block;font-size:clamp(20px,1.6vw,24px);font-weight:650;letter-spacing:-0.03em;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums;}
.edu span{display:block;margin-top:6px;font-size:16px;line-height:1.5;color:var(--ink-2);max-width:44ch;}
.edu i{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);font-style:normal;font-size:13px;font-weight:600;color:var(--ink-2);vertical-align:1px;white-space:nowrap;}
.ig{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(40px,6vh,56px);min-height:44px;font-weight:650;color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1.5px;text-underline-offset:6px;transition:color .3s var(--ease);}
.ig:hover{color:var(--muted);}
.ig svg{width:20px;height:20px;stroke:currentColor;}
@media(max-width:920px){.about{grid-template-columns:1fr;}.about-photos{position:static;max-width:520px;}.about-main{max-height:none;}}
@media(max-width:480px){.figs{grid-template-columns:repeat(2,auto);}}

/* ---------- CTA ---------- */
.cta{background:var(--paper);color:var(--ink);max-width:1440px;margin:0 auto;padding:clamp(104px,17vh,210px) var(--gut) 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,4vw,56px);}
.cta-copy{padding:0;display:flex;flex-direction:column;justify-content:space-between;gap:40px;}
.cta h2{font-size:clamp(36px,6vw,92px);letter-spacing:-0.05em;line-height:.92;max-width:13ch;}
.cta-sub{margin-top:20px;font-size:clamp(17px,1.6vw,21px);font-weight:550;max-width:40ch;line-height:1.45;}
.contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);}
.contacts a{display:block;padding:18px 16px 18px 0;border-bottom:1px solid var(--line);}
.contacts a span{display:block;font-size:13px;font-weight:600;color:var(--muted);}
.contacts a b{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-size:clamp(17px,1.7vw,22px);font-weight:650;letter-spacing:-0.02em;}
.contacts a b svg{width:17px;height:17px;stroke:currentColor;transition:transform .35s var(--ease);}
.contacts a:hover b svg{transform:translate(3px,-3px);}
.cta-legal{font-size:13px;color:var(--muted);margin-top:14px;}
.cta-legal a{text-decoration:underline;text-underline-offset:3px;}
.cta-photo{overflow:hidden;min-height:380px;}
.cta-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;}
@media(max-width:980px){.cta{grid-template-columns:1fr;}.cta-photo{min-height:0;aspect-ratio:4/3;}}
@media(max-width:520px){.contacts{grid-template-columns:1fr;}}

/* ---------- футер ---------- */
.foot{background:linear-gradient(180deg,var(--paper) 0%,#EEF1F4 38%,#DCE1E6 100%);color:var(--ink);margin-top:clamp(64px,10vh,120px);padding:clamp(96px,14vh,180px) 0 28px;}
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,60px);}
.foot h4{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 6px;}
.foot a.fl{display:block;font-size:16px;font-weight:550;padding:10px 0;transition:color .3s var(--ease);}
.foot a.fl:hover{color:var(--muted);}
.foot-word{margin-top:clamp(40px,7vh,80px);font-size:clamp(64px,19vw,300px);font-weight:650;letter-spacing:-0.06em;line-height:.78;color:rgba(255,255,255,.42);}
.foot-base{margin-top:clamp(28px,4.5vh,48px);font-size:13px;color:var(--ink-2);}
@media(max-width:760px){.foot-cols{grid-template-columns:1fr 1fr;}.foot-cols>div:first-child{grid-column:1/-1;}}

/* ---------- сторінки документів ---------- */
.doc{padding-top:clamp(120px,18vh,180px);padding-bottom:clamp(40px,8vh,90px);}
.doc-head{max-width:900px;}
.doc-head h1{font-size:clamp(36px,5.6vw,80px);letter-spacing:-0.048em;line-height:.95;}
.doc-head p{margin-top:18px;color:var(--ink-2);font-size:18px;max-width:52ch;}
.doc-actions{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;}
.doc-body{margin-top:clamp(40px,7vh,72px);max-width:72ch;background:var(--paper);border-radius:var(--r-md);padding:clamp(24px,4vw,56px);box-shadow:inset 0 0 0 1px var(--line);}
.doc-body h2{font-size:clamp(21px,2vw,26px);letter-spacing:-0.025em;line-height:1.2;margin:40px 0 14px;}
.doc-body h2:first-child{margin-top:0;}
.doc-body p,.doc-body li{font-size:16.5px;line-height:1.65;color:var(--ink-2);}
.doc-body p+p{margin-top:10px;}
.doc-body ul{margin-top:8px;display:grid;gap:8px;}
.doc-body ul li{padding-left:22px;position:relative;}
.doc-body ul li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--ink);}
.doc-body .n{font-weight:650;color:var(--ink);margin-right:6px;font-variant-numeric:tabular-nums;}
.doc-body a{color:var(--deep);text-decoration:underline;text-underline-offset:3px;}
.doc-sign{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);}

/* ---------- поява ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.rv.on{opacity:1;transform:none;}
.d1{transition-delay:.08s;}.d2{transition-delay:.16s;}.d3{transition-delay:.24s;}.d4{transition-delay:.32s;}
.no-js .rv{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .rv{opacity:1;transform:none;}
  .hero-name .w span{transform:none;}
  .ap-media img{transform:none !important;transition-property:opacity !important;transition-duration:.4s !important;}
  .ap-title .ln>span{transform:none !important;}
  .ap-body{opacity:1 !important;transform:none !important;}
  .offer-row::before,.offer-row::after,.offer-row h3>span,.offer-idx,.offer-body,.chips li{opacity:1 !important;transform:none !important;transition-delay:0s !important;}
}