/* ---------- шрифти (локальні, з @fontsource-variable) ----------
   font-display:swap — текст видно одразу системним шрифтом, потім підміна.
   unicode-range — браузер тягне тільки потрібний набір символів:
   кирилицю для української, латиницю для назв. Instrument Sans кирилиці
   не має взагалі, тож український текст у display-накресленні падає на
   системний шрифт — так само було й з Google Fonts. */

@font-face{
  font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;
  src:url(/fonts/manrope-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;
  src:url(/fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-display:swap;font-weight:400 700;
  src:url(/fonts/instrument-sans-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';font-style:italic;font-display:swap;font-weight:400 700;
  src:url(/fonts/instrument-sans-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --graphite:#2E2A28;
  --base-light:#F4F0EA;
  --soft-light:#E9E1D7;
  --warm-neutral:#CBBEAF;
  --taupe:#A99989;
  --olive:#7C8574;
  --olive-dark:#5f6656;
  --ink:#2E2A28;
  --ink-soft:#6b6156;
  --accent-ink:#5b6154;
  --milk:#F4F0EA;
  --milk-soft:rgba(244,240,234,.66);
  --line:rgba(46,42,40,.14);
  --line-dark:rgba(244,240,234,.16);
  --ff-display:'Instrument Sans', -apple-system, sans-serif;
  --ff-body:'Manrope', -apple-system, sans-serif;
  /* шрифти локальні, лежать у /fonts — див. docs/performance.md */
  --ease-out: cubic-bezier(.19,1,.22,1);
  --ramp: linear-gradient(180deg,#2E2A28 0%,#524B44 18%,#7C8574 40%,#A99989 60%,#CBBEAF 78%,#E9E1D7 90%,#F4F0EA 100%);
  --ramp-h: linear-gradient(90deg,#2E2A28 0%,#7C8574 32%,#A99989 55%,#CBBEAF 74%,#F4F0EA 100%);
  --wrap:1240px;
  --gutter:clamp(20px,4.5vw,64px);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--base-light);color:var(--ink);
  font-family:var(--ff-body);font-size:16.5px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--warm-neutral);color:var(--graphite);}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px;border-radius:2px;}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.wrap--wide{max-width:1480px;}
section{position:relative;}
[id]{scroll-margin-top:96px;}

/* ---------- типографіка ---------- */
.eyebrow{
  font-family:var(--ff-body);font-size:11.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink);
  margin:0 0 24px;display:block;
}
.dark .eyebrow{color:var(--warm-neutral);}
.title{
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(28px,4vw,50px);line-height:1.16;letter-spacing:-.005em;
  margin:0 0 28px;
}
.lead{
  font-family:var(--ff-display);font-style:italic;font-weight:400;
  font-size:clamp(21px,2.6vw,30px);line-height:1.42;letter-spacing:0;
  color:var(--ink);
}
.dark .lead{color:var(--milk);}
.big{
  font-family:var(--ff-display);font-style:italic;font-weight:400;
  font-size:clamp(20px,2.2vw,25px);line-height:1.5;margin:0 0 14px;
}
.body-text p{margin:0 0 1.15em;}
.body-text p:last-child{margin-bottom:0;}
.muted{color:var(--ink-soft);}
.dark .muted{color:var(--milk-soft);}

/* ---------- reveal ---------- */
.reveal{
  opacity:0;transform:translateY(44px);
  transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out);
  transition-delay:calc(var(--i,0)*90ms);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none;}
.img-reveal{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease-out);will-change:clip-path;}
.img-reveal img{transform:scale(1.14);transition:transform 1.9s var(--ease-out);will-change:transform;}
.img-reveal.is-in{clip-path:inset(0 0 0 0);}
.img-reveal.is-in img{transform:scale(1.001);}
.title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em;}
.title .w>span{display:inline-block;transform:translateY(118%);transition:transform 1s var(--ease-out);transition-delay:calc(var(--wi,0)*70ms);}
.title.is-in .w>span{transform:translateY(0);}

/* ---------- пасмо: індикатор скролу ---------- */
.strand{position:fixed;top:50%;left:clamp(10px,2vw,26px);width:2px;height:34vh;max-height:280px;z-index:40;pointer-events:none;transform:translateY(-50%);opacity:.55;}
.strand::before{content:"";position:absolute;inset:0;border-radius:2px;background:var(--line);opacity:.5;}
.strand__fill{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;background:var(--ramp);opacity:.75;transform-origin:top;transform:scaleY(0);}
.strand__tip{position:absolute;left:50%;top:0;width:6px;height:6px;border-radius:50%;background:var(--olive);box-shadow:0 0 0 2px var(--base-light);transform:translate(-50%,-50%);transition:background .4s;}

/* ---------- шапка ---------- */
.header{position:sticky;top:0;left:0;right:0;z-index:50;margin-bottom:calc(-1 * var(--header-h, 76px));transition:background .45s var(--ease-out),box-shadow .45s;}
.header.is-scrolled{background:rgba(244,240,234,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px;}
.wordmark{font-family:var(--ff-display);font-weight:500;font-size:18px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;}
.wordmark::after{content:"";display:block;width:1.6em;height:1px;background:currentColor;opacity:.55;margin:.4em auto 0;}

/* ---------- велике лого героя → їде в шапку ---------- */
.hero-logo{
  position:fixed;top:var(--hl-start-top,47vh);left:50%;
  transform:translate(-50%,-100%);
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(30px,7.5vw,108px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--milk);white-space:nowrap;z-index:60;text-decoration:none;
  max-width:92vw;overflow:hidden;text-overflow:ellipsis;
  transition:top 1.15s var(--ease-out),left 1.15s var(--ease-out),
             transform 1.15s var(--ease-out),font-size 1.15s var(--ease-out),
             color .6s var(--ease-out) .3s;
  will-change:top,left,transform,font-size,color;
}
/* тіло + риска рахуються як єдиний блок: transform:translate(-50%,-100%)
   ставить саме нижню риску (::after) в точку --hl-start-top — тому
   positionStart() у heroLogo() рахує anchor як точку на екрані, де має
   бути риска (біля центру viewport), а не відступ від тексту нижче */
.hero-logo::after{
  content:"";display:block;width:1.6em;height:1px;background:currentColor;opacity:.55;margin:.4em auto 0;
}
.hero-logo.is-locked{
  top:var(--hl-top,29px);left:var(--hl-left,20px);
  transform:translate(0,-50%);font-size:18px;color:var(--ink);
}
@media(max-width:480px){
  .wordmark,.hero-logo{letter-spacing:.1em;}
  .hero-logo{font-size:clamp(24px,10vw,58px);}
}
.hero-logo.no-anim{transition:none!important;}
.nav{display:flex;gap:clamp(14px,2.4vw,30px);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;overflow-x:auto;scrollbar-width:none;}
.nav::-webkit-scrollbar{display:none;}
.nav a{position:relative;padding-block:6px;color:var(--ink-soft);transition:color .3s;white-space:nowrap;}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--olive);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out);}
.nav a:hover{color:var(--ink);}
.nav a:hover::after{transform:scaleX(1);}

/* ---------- герой ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;display:flex;align-items:flex-end;}
.hero__media{position:absolute;inset:-8% 0 0 0;height:116%;}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:center 22%;transform:scale(1.001);transition:transform 1.6s var(--ease-out);}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,15,.05) 0%,rgba(20,17,15,.12) 45%,rgba(20,17,15,.66) 100%);}
.hero__content{position:relative;z-index:2;color:var(--milk);padding:0 clamp(1.5rem,6vw,5rem) clamp(2.75rem,7vh,5rem);max-width:820px;
  opacity:0;transform:translateY(28px);
  transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);
}
.hero__content.is-in{opacity:1;transform:none;}
.hero__content.no-anim{transition:none!important;}
.hero__eyebrow{color:var(--warm-neutral);margin-bottom:22px;}
.hero h1{font-family:var(--ff-display);font-style:italic;font-weight:400;font-size:clamp(30px,4.6vw,60px);line-height:1.14;letter-spacing:0;color:rgba(244,240,234,.82);margin:0 0 26px;}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;}
.hero h1 .line>span{display:block;transform:translateY(112%);}
@supports (-webkit-background-clip:text){
  .hero h1 .line>span{
    background:linear-gradient(105deg,var(--milk-soft) 0%,var(--milk-soft) 38%,var(--warm-neutral) 47%,#fff 50%,var(--warm-neutral) 53%,var(--milk-soft) 62%,var(--milk-soft) 100%);
    background-size:300% 100%;background-position:108% 0;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  /* стартує лише коли .hero__content отримує is-in (тобто коли лого починає
     рух у шапку) — щоб блиск завжди програвався в момент появи тексту,
     а не вхолосту під час фази 1, поки блок ще невидимий */
  .hero__content.is-in .hero h1 .line>span{
    animation:shine 3.2s cubic-bezier(.4,0,.2,1) 1.35s 1 both;
  }
}
@keyframes shine{from{background-position:108% 0;}to{background-position:-8% 0;}}
.hero__desc{font-size:clamp(16px,1.6vw,18px);font-weight:300;color:rgba(244,240,234,.88);max-width:480px;line-height:1.75;margin:0 0 40px;}
.hero__hint{display:inline-flex;align-items:center;gap:14px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,240,234,.82);}
.hero__hint::before{content:"";width:40px;height:1px;background:var(--ramp-h);}
.hero__cue{position:absolute;left:50%;bottom:1.7rem;transform:translateX(-50%);width:28px;height:44px;border:1.5px solid rgba(244,240,234,.7);border-radius:20px;background:transparent;cursor:pointer;padding:0;z-index:3;}
.hero__cue span{display:block;width:4px;height:8px;border-radius:2px;background:var(--milk);margin:8px auto 0;animation:cue-move 1.8s ease-in-out infinite;}
@keyframes cue-move{0%{transform:translateY(0);opacity:1;}70%{transform:translateY(13px);opacity:0;}100%{opacity:0;}}

/* ---------- секції: загальне ---------- */
.section{padding-block:clamp(64px,9vh,112px);}
.section--tight{padding-block:clamp(52px,7vh,80px);}
.dark{background:var(--graphite);color:var(--milk);}
.soft{background:var(--soft-light);}
.hairline-top{border-top:1px solid var(--line);}
.dark.hairline-top{border-top:1px solid var(--line-dark);}

/* дволанкова editorial-сітка */
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start;}
.split__aside{position:sticky;top:120px;}
.accent-line{width:56px;height:3px;border-radius:2px;background:var(--ramp-h);margin-top:32px;background-size:220% 100%;animation:ramp-flow 14s ease-in-out infinite alternate;}
@keyframes ramp-flow{from{background-position:0% 0;}to{background-position:100% 0;}}
.approach .lead{max-width:20ch;}
.approach .body-text{max-width:58ch;font-size:17.5px;}
.approach .body-text p+p{margin-top:1.3em;}

/* ---------- про майстра ---------- */
.master__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:start;}
.master__grid+.master__grid{margin-top:clamp(32px,4vw,48px);}
.master__row--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
.master__photo .portrait__frame img{aspect-ratio:9/16;}
.portrait{position:relative;}
.portrait__frame{border-radius:8px;overflow:hidden;position:relative;isolation:isolate;box-shadow:0 30px 80px -30px rgba(36,30,25,.35);}
.portrait__frame::after{content:"";position:absolute;inset:0;border:1px solid rgba(244,240,234,.35);border-radius:inherit;pointer-events:none;}
.portrait__frame img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.portrait--ghost{position:absolute;inset:-16px -16px auto auto;width:100%;height:100%;border:1px solid var(--line);border-radius:8px;z-index:-1;transform:translate(14px,14px);animation:ghost-drift 9s ease-in-out infinite alternate;}
@keyframes ghost-drift{from{transform:translate(14px,14px);}to{transform:translate(8px,20px);}}
.portrait figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:16px;font-family:var(--ff-display);font-style:italic;font-size:19px;}
.portrait figcaption small{font-family:var(--ff-body);font-style:normal;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);}
.master__block+.master__block{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);}
.master__block h3{font-family:var(--ff-body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 15px;}
.stat{display:flex;align-items:baseline;gap:16px;margin-bottom:16px;}
.stat b{font-family:var(--ff-display);font-weight:500;font-size:clamp(42px,5vw,60px);line-height:1;color:var(--ink);}
.stat span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);max-width:18ch;line-height:1.5;}

/* ---------- фото-розрив ---------- */
.chapter-break{padding-block:clamp(48px,7vh,80px);background:var(--base-light);border-top:1px solid var(--line);}
.chapter-break__duo{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(14px,2vw,26px);align-items:end;}
.chapter-break__fig{margin:0;}
.chapter-break__fig .img-reveal{border-radius:4px;overflow:hidden;box-shadow:0 20px 50px -24px rgba(36,30,25,.32);}
.chapter-break__fig:first-child .img-reveal{aspect-ratio:4/5;}
.chapter-break__fig:last-child .img-reveal{aspect-ratio:3/4;}
.chapter-break__fig img{width:100%;height:100%;object-fit:cover;}
.chapter-break__quote{margin:clamp(28px,4vh,42px) auto 0;max-width:50ch;text-align:center;font-family:var(--ff-display);font-style:italic;font-weight:400;font-size:clamp(20px,2.3vw,27px);line-height:1.5;color:var(--ink);}
@media(max-width:700px){.chapter-break__duo{grid-template-columns:1fr;gap:16px;}}

/* ---------- блонд (темна панель) ---------- */
.blond{overflow:hidden;}
.blond::before{content:"";position:absolute;top:-30%;right:-12%;width:58vw;height:58vw;max-width:860px;max-height:860px;border-radius:50%;background:radial-gradient(closest-side,rgba(203,190,175,.14),transparent 70%);pointer-events:none;animation:glow-drift 16s ease-in-out infinite alternate;}
@keyframes glow-drift{from{transform:translate(0,0) scale(1);opacity:.85;}to{transform:translate(-9%,7%) scale(1.12);opacity:1;}}
.blond__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,88px);align-items:start;}
.blond .title{max-width:16ch;}
.blond__note{font-family:var(--ff-display);font-style:italic;font-weight:400;font-size:clamp(18px,2vw,23px);line-height:1.55;color:var(--warm-neutral);border-left:1px solid var(--line-dark);padding-left:24px;margin-top:clamp(24px,3vh,36px);}
.blond .body-text{max-width:62ch;color:var(--milk-soft);}
.blond__photo{width:100%;}
.blond__photo-frame{position:relative;border-radius:8px;overflow:hidden;isolation:isolate;box-shadow:0 30px 80px -30px rgba(0,0,0,.55);background:rgba(0,0,0,.2);}
.blond__photo-frame::after{content:"";position:absolute;inset:0;border:1px solid rgba(244,240,234,.2);border-radius:inherit;pointer-events:none;}
.blond__photo-frame img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;}
.ramp-chip{width:88px;height:5px;border-radius:3px;background:var(--ramp-h);margin-bottom:32px;background-size:220% 100%;animation:ramp-flow 14s ease-in-out infinite alternate;}

/* ---------- колір і трансформації ---------- */
.paths__intro{max-width:62ch;margin-bottom:clamp(30px,5vh,52px);}
.paths__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3.5vw,46px);}
.path{border-top:1px solid var(--line);padding-top:24px;}
.path__photo{aspect-ratio:3/4;border-radius:4px;overflow:hidden;margin-bottom:20px;background:var(--soft-light);}
.path__photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease-out);}
.path:hover .path__photo img{transform:scale(1.06);}
.path h3{font-family:var(--ff-display);font-weight:500;font-size:21px;margin:0 0 10px;}
.path p{margin:0;color:var(--ink-soft);font-size:15px;}
.paths__coda{margin-top:clamp(30px,5vh,50px);font-family:var(--ff-display);font-style:italic;font-weight:400;font-size:clamp(19px,2.3vw,26px);max-width:34ch;}
.btn-row{margin-top:clamp(32px,5vh,52px);}

/* ---------- роботи ---------- */
.works__head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:start;margin-bottom:clamp(38px,6vh,68px);}
.works__head .body-text{font-size:15.5px;color:var(--ink-soft);margin-top:20px;}
.works__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,44px) clamp(16px,3vw,44px);}
.work{margin:0;position:relative;}
.work a{display:block;overflow:hidden;border-radius:4px;background:var(--graphite);}
.work img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transform:scale(1.001);transition:transform 1.1s var(--ease-out);}
.work a:hover img,.work a:focus-visible img{transform:scale(1.045);}
.work figcaption{display:flex;gap:10px;align-items:baseline;margin-top:13px;font-family:var(--ff-display);font-style:italic;font-size:16px;line-height:1.45;color:var(--ink-soft);max-width:40ch;}
.work--stagger{margin-top:clamp(40px,6vw,88px);}
.work--1{grid-column:1/7;}
.work--2{grid-column:8/13;}
.work--3{grid-column:1/6;}
.work--4{grid-column:6/13;}
.work--5{grid-column:2/8;}
.work--6{grid-column:8/13;}
.work--7{grid-column:1/7;}
.work--8{grid-column:7/13;}
.works__note{margin-top:clamp(48px,7vh,80px);max-width:60ch;color:var(--ink-soft);font-family:var(--ff-display);font-style:italic;font-size:17px;}

/* ---------- інтерв'ю (темна панель) ---------- */
.interview__lead{max-width:60ch;margin-bottom:clamp(36px,6vh,64px);}
.interview__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,100px);align-items:start;}
.interview__aside{position:sticky;top:110px;}
.interview__aside .portrait__frame{box-shadow:0 30px 90px -30px rgba(0,0,0,.6);}
.interview__aside .portrait__frame img{aspect-ratio:9/16;}
.qa+.qa{margin-top:44px;}
.qa h3{font-family:var(--ff-body);font-weight:500;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--warm-neutral);margin:0 0 20px;padding-bottom:16px;max-width:46ch;line-height:1.7;border-bottom:1px solid rgba(244,240,234,.12);}
.qa .q-lead{font-family:var(--ff-display);font-style:italic;font-weight:400;font-size:clamp(20px,2.3vw,26px);line-height:1.5;margin:0 0 14px;}
.qa p{color:var(--milk-soft);margin:0;max-width:60ch;}
.qa p+p{margin-top:1em;}

/* ---------- професійна база ---------- */
.base__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3.5vw,46px) clamp(28px,4vw,54px);margin-top:clamp(28px,4vh,44px);}
.base-item{border-top:1px solid var(--line);padding-top:20px;}
.base-item__icon{display:block;width:44px;height:44px;margin:0 0 16px;object-fit:contain;}
.base-item h3{font-family:var(--ff-display);font-weight:500;font-size:19px;line-height:1.4;margin:0 0 9px;}
.base-item p{margin:0;font-size:14.5px;color:var(--ink-soft);}
.base .lead{max-width:50ch;}
.base__coda{margin-top:clamp(32px,5vh,52px);max-width:58ch;font-family:var(--ff-display);font-style:italic;font-size:17px;color:var(--ink-soft);}

/* ---------- бренди (слайдер) ---------- */
.brands .lead{max-width:26ch;}
.brands__text{margin-top:20px;max-width:64ch;}
.brands__row{margin-top:clamp(36px,5.5vh,58px);display:flex;align-items:center;gap:clamp(10px,1.6vw,18px);}
.brands__viewport{
  flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.brands__viewport::-webkit-scrollbar{display:none;}
.brands__track{display:flex;align-items:center;gap:clamp(40px,5.5vw,64px);width:max-content;padding-block:4px;}
.brand-logo{height:clamp(24px,2.6vw,32px);width:auto;object-fit:contain;filter:grayscale(1);opacity:.55;transition:opacity .4s var(--ease-out);flex-shrink:0;}
.brand-logo--invert{filter:grayscale(1) invert(1) brightness(.42);}
.brand-logo--boost{height:clamp(32px,3.5vw,43px);}
.brand-logo--boost-lg{height:clamp(42px,4.6vw,56px);}
.brand-logo--boost-xl{height:clamp(47px,5.1vw,62px);}
.brand-logo:hover{opacity:1;}
.brands__arrow{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;background:none;color:var(--ink-soft);
  cursor:pointer;transition:background .3s var(--ease-out),color .3s,border-color .3s,opacity .3s;
}
.brands__arrow:hover{background:var(--ink);border-color:var(--ink);color:var(--milk);}
.brands__arrow:disabled{opacity:.28;cursor:default;}
.brands__arrow:disabled:hover{background:none;color:var(--ink-soft);border-color:var(--line);}
.brands__arrow svg{width:17px;height:17px;display:block;}

/* ---------- колаборації ---------- */
.collab{position:relative;min-height:44vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;}
.collab__bg{position:absolute;inset:-10% 0;height:120%;}
.collab__bg img{width:100%;height:100%;object-fit:cover;}
.collab__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,15,.6) 0%,rgba(20,17,15,.8) 100%);}
.collab__content{position:relative;z-index:2;max-width:400px;padding:2rem;}
.collab .title{margin-bottom:16px;color:var(--milk);}
.collab p.lead{max-width:44ch;margin:0 auto 36px;}
.collab .eyebrow{letter-spacing:.28em;}
.collab__rule{width:34px;height:1px;background:rgba(244,240,234,.4);margin:18px auto 0;}
.collab__form{margin-top:32px;display:flex;flex-direction:column;gap:26px;text-align:left;}
.collab__field{display:flex;flex-direction:column;gap:9px;}
.collab__field span{font-family:var(--ff-body);font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,240,234,.55);}
.collab__form input,
.collab__form textarea{width:100%;background:none;border:none;border-bottom:1px solid rgba(244,240,234,.32);padding:4px 2px 10px;font-family:var(--ff-display);font-size:16.5px;color:var(--milk);resize:none;transition:border-color .35s;}
.collab__form input::placeholder,
.collab__form textarea::placeholder{font-family:var(--ff-body);font-size:14px;color:rgba(244,240,234,.4);}
.collab__form input:focus,
.collab__form textarea:focus{outline:none;border-color:rgba(244,240,234,.85);}
.collab__submit{align-self:center;margin-top:10px;padding:15px 46px;}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--ink);border-radius:999px;padding:14px 32px;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;transition:background .4s var(--ease-out),color .4s,border-color .4s,transform .4s var(--ease-out),box-shadow .4s var(--ease-out);}
.btn:hover{background:var(--graphite);border-color:var(--graphite);color:var(--milk);transform:translateY(-3px);box-shadow:0 16px 32px -14px rgba(36,30,25,.4);}
.dark .btn{border-color:var(--line-dark);color:var(--milk);}
.dark .btn:hover{background:var(--base-light);border-color:var(--base-light);color:var(--graphite);box-shadow:0 16px 32px -14px rgba(244,240,234,.3);}
.btn--light{border-color:rgba(244,240,234,.7);color:var(--milk);}
.btn--light:hover{background:var(--base-light);border-color:var(--base-light);color:var(--graphite);}

/* ---------- футер ---------- */
.footer{background:var(--graphite);color:var(--milk);padding-block:clamp(70px,10vh,106px) 40px;}
.footer__ramp{height:4px;background:var(--ramp-h);border-radius:2px;margin-bottom:clamp(36px,6vh,54px);background-size:220% 100%;animation:ramp-flow 14s ease-in-out infinite alternate;}
.footer__block{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(40px,6vh,62px);}
.footer__name{font-family:var(--ff-display);font-weight:500;font-size:clamp(28px,4vw,42px);line-height:1.15;letter-spacing:.1em;text-transform:uppercase;margin:0;}
.footer__name::after{content:"";display:block;width:1.6em;height:1px;background:currentColor;opacity:.55;margin:.5em auto 0;}
.footer__tag{font-family:var(--ff-display);font-style:italic;font-weight:400;font-size:18px;color:var(--milk-soft);margin:20px 0 0;}
.footer__contact{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-size:14.5px;color:var(--milk-soft);}
.footer__contact a{transition:color .3s;}
.footer__contact a:hover{color:var(--milk);}
.footer__bottom{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;padding-top:24px;border-top:1px solid var(--line-dark);font-size:12px;letter-spacing:.05em;color:rgba(244,240,234,.62);}

/* ---------- лайтбокс ---------- */
.lightbox{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:clamp(18px,4vw,48px);background:rgba(24,20,17,.94);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;}
.lightbox.is-open{opacity:1;visibility:visible;}
.lightbox img{max-height:82vh;max-width:min(94vw,1160px);border-radius:4px;box-shadow:0 40px 120px -30px rgba(0,0,0,.8);}
.lightbox figcaption{font-family:var(--ff-display);font-style:italic;font-size:17px;color:var(--milk);text-align:center;max-width:52ch;}
.lightbox__close{position:absolute;top:20px;right:24px;background:none;border:1px solid var(--line-dark);border-radius:999px;color:var(--milk);font:inherit;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:9px 18px;cursor:pointer;transition:background .3s,color .3s;}
.lightbox__close:hover{background:var(--milk);color:var(--graphite);}

/* ---------- курсор-бейдж ---------- */
.cursor-badge{position:fixed;top:0;left:0;z-index:70;width:70px;height:70px;border-radius:50%;display:none;align-items:center;justify-content:center;background:rgba(46,42,40,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--milk);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.5);transition:opacity .35s var(--ease-out),transform .45s var(--ease-out);}
@media(pointer:fine){.cursor-badge{display:flex;}}
.cursor-badge.is-on{opacity:1;transform:translate(-50%,-50%) scale(1);}

/* ---------- адаптив ---------- */
@media(max-width:1024px){
  .split,.master__grid,.master__row--rev,.blond__grid,.interview__grid,.works__head{grid-template-columns:1fr;}
  .split__aside,.master__photo,.interview__aside{position:static;}
  .master__photo{max-width:420px;}
  .blond__photo{max-width:420px;}
  .interview__aside{max-width:360px;}
  .paths__grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:700px){
  body{font-size:15.5px;}
  .strand{left:4px;width:2px;height:26vh;}
  .strand__tip{width:5px;height:5px;}
  .nav{display:none;}
  .works__grid{display:block;}
  .work{margin:0 0 40px !important;}
  .paths__grid{grid-template-columns:1fr;}
  .base__grid{grid-template-columns:1fr;}
  .portrait--ghost{display:none;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important;animation-iteration-count:1 !important;}
  .reveal{opacity:1;transform:none;}
  .hero__content{opacity:1;transform:none;}
  .hero h1 .line>span{transform:none;}
  .strand__fill{transform:scaleY(1);}
  .img-reveal{clip-path:none;}
  .img-reveal img{transform:none;}
  .title .w>span{transform:none;}
  .cursor-badge{display:none;}
}