/* ═══════════════════════════════════════════════════════════════════
   Анастасия · фотограф
   Минимализм: светлый фон, чёрный текст, один нейтральный гротеск,
   крупные фотографии, много воздуха.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --bg:      #f5f5f5;
  --bg-2:    #ffffff;
  --ink:     #111111;
  --dim:     #6e6e6e;
  --dim-lt:  rgba(255,255,255,.72);
  --line:    rgba(17,17,17,.14);
  --line-lt: rgba(255,255,255,.28);

  /* бургунди — единственный цвет в системе, работает точечно */
  --wine:    #6b2230;

  /* брендовые поверхности (обложки, плитки) — строгое ч/б.
     Портфолио остаётся в цвете: там показана сама работа.
     Хотите цвет и здесь — поставьте none. */
  --brand-photo: grayscale(1) contrast(1.05);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --pad:  clamp(16px, 4vw, 56px);
  --sec:  clamp(64px, 9vw, 130px);
  --wrap: 1560px;
  --hd:   62px;                       /* высота шапки */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:15px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100% }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4,p,figure,blockquote,ul,ol{ margin:0 }
ul,ol{ padding:0; list-style:none }

::selection{ background:var(--ink); color:var(--bg) }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }

.skip{ position:absolute; left:-9999px; z-index:300; background:var(--ink); color:#fff; padding:12px 18px }
.skip:focus{ left:12px; top:12px }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad) }

/* ═══════════ ТИПОГРАФИКА ═══════════ */
.h1{
  font-size:clamp(30px,4.6vw,62px);
  line-height:1.06;
  letter-spacing:-.03em;
  font-weight:400;
}
.h2{
  font-size:clamp(22px,2.6vw,36px);
  line-height:1.16;
  letter-spacing:-.025em;
  font-weight:400;
}
.h3{
  font-size:clamp(16px,1.5vw,20px);
  line-height:1.3;
  letter-spacing:-.015em;
  font-weight:500;
}
.lbl{
  font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
}
.lead{ font-size:clamp(15px,1.35vw,18px); line-height:1.66; letter-spacing:-.01em }
.muted{ color:var(--dim) }
.big-num{ font-size:clamp(26px,3vw,40px); line-height:1; letter-spacing:-.03em; font-weight:400; color:var(--wine) }

/* ═══════════ ССЫЛКИ И КНОПКИ ═══════════ */
.lnk{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  padding-bottom:4px;
  border-bottom:1px solid var(--line);
  transition:border-color .35s var(--ease), gap .35s var(--ease);
}
.lnk::after{ content:"↗"; font-size:11px; transition:transform .35s var(--ease) }
.lnk:hover{ border-bottom-color:var(--wine); color:var(--wine); gap:13px }
.lnk--light{ border-bottom-color:var(--line-lt) }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 34px;
  font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.btn:hover{ background:var(--ink); color:var(--bg) }
.btn--solid{ background:var(--ink); color:var(--bg) }
.btn--solid:hover{ background:transparent; color:var(--ink) }
.btn--light{ border-color:#fff; color:#fff }
.btn--light:hover{ background:#fff; color:var(--ink) }
.btn--full{ width:100% }

/* ═══════════ ШАПКА ═══════════ */
.hd{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--hd);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-inline:var(--pad);
  transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.hd__mark{ display:flex; flex-direction:column; gap:2px; white-space:nowrap }
.hd__brand{ font-size:15px; font-weight:500; letter-spacing:-.02em }
.hd__by{ font-size:8.5px; font-weight:400; letter-spacing:.3em; text-transform:uppercase; opacity:.62 }
.hd__nav{ display:flex; gap:clamp(14px,2vw,30px) }
.hd__nav a{
  font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  position:relative; padding:4px 0; opacity:.85;
  transition:opacity .3s var(--ease);
}
.hd__nav a:hover,.hd__nav a[aria-current="page"]{ opacity:1 }
.hd__nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
}
.hd__tel{ font-size:11px; font-weight:500; letter-spacing:.1em; white-space:nowrap; opacity:.85 }
.hd__tel:hover{ opacity:1 }

/* поверх полноэкранного фото шапка белая и прозрачная */
.hd--over{ color:#fff }
.hd.stuck{
  background:rgba(245,245,245,.94);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
  color:var(--ink);
}

.hd__burger{ display:none; width:26px; height:18px; position:relative; z-index:2 }
.hd__burger span{
  position:absolute; left:0; width:100%; height:1.5px; background:currentColor;
  transition:transform .35s var(--ease), opacity .2s var(--ease);
}
.hd__burger span:nth-child(1){ top:4px }
.hd__burger span:nth-child(2){ top:12px }
.hd__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(4px) rotate(45deg) }
.hd__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-4px) rotate(-45deg) }

/* ═══════════ ПОЛНОЭКРАННОЕ ФОТО ═══════════ */
.cover{
  position:relative;
  min-height:min(100svh, 900px);
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:#111;
}
.cover--short{ min-height:min(72svh, 680px) }
.cover__img{ position:absolute; inset:0 }
.cover__img img{ width:100%; height:100%; object-fit:cover; object-position:center 28% }

/* Фоновое видео обложки. Исходник снят боком, поэтому элемент
   разворачивается, а размеры ему задаёт скрипт (меняет местами
   ширину и высоту контейнера) — так кадр всегда покрывает экран. */
.cover__img video{
  position:absolute; top:50%; left:50%;
  object-fit:cover;
  transform:translate(-50%,-50%);
  opacity:0; transition:opacity .9s var(--ease);
}
.cover__img video.on{ opacity:1 }
.cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.12) 46%, rgba(0,0,0,.3) 100%);
}
.cover__in{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap); margin:0 auto;
  padding:0 var(--pad) clamp(34px,5vw,64px);
  color:#fff;
}
.cover__title{
  font-size:clamp(38px,7.6vw,116px);
  line-height:.98; letter-spacing:-.04em; font-weight:400;
  max-width:16ch;
}
.cover__sub{
  margin-top:16px; max-width:44ch;
  font-size:clamp(13px,1.2vw,16px); color:rgba(255,255,255,.82);
}
.cover .lbl{ color:rgba(255,255,255,.7); margin-bottom:14px }
.cover__img img,
.cover__img video{ filter:var(--brand-photo) }

/* имя бренда на первом экране: плотно, в две строки */
.cover__title--brand{
  font-size:clamp(44px,9vw,140px);
  line-height:.9; letter-spacing:-.055em;
  max-width:none;
}
.cover__author{
  margin-top:22px;
  font-size:10.5px; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.68);
}

/* хлебные крошки на внутренних */
.crumbs{
  position:absolute; z-index:3; top:calc(var(--hd) + 12px); left:var(--pad);
  font-size:11px; letter-spacing:.1em; color:rgba(255,255,255,.72);
}
.crumbs a:hover{ color:#fff }

/* ═══════════ БЛОК: ЗАГОЛОВОК СЛЕВА, ТЕКСТ СПРАВА ═══════════ */
.split{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(26px,5vw,90px);
  padding-block:var(--sec);
  align-items:start;
}
.split__body p + p{ margin-top:16px }
.split__body .lnk{ margin-top:26px }

/* центральная фраза бренда */
.statement{
  font-size:clamp(24px,4.2vw,60px);
  line-height:1.1; letter-spacing:-.035em;
  max-width:20ch;
}

/* собственный вертикальный ритм секции (там, где нет .split) */
.sec{ padding-block:var(--sec) }

/* ═══════════ ПЛИТКИ УСЛУГ ═══════════ */
.tiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(10px,1.2vw,18px);
}
.tile{
  position:relative; display:block;
  background:#111; overflow:hidden;
  aspect-ratio:3/4;
}
.tile img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), opacity .5s var(--ease);
}
.tile:hover img{ transform:scale(1.045) }
.tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.05) 55%);
}
.tile__in{
  position:absolute; z-index:2; inset:auto 0 0 0;
  padding:clamp(18px,2vw,28px);
  color:#fff;
  display:flex; flex-direction:column; gap:7px;
}
.tile img{ filter:var(--brand-photo) }
.tile__no{
  font-size:10.5px; font-weight:500; letter-spacing:.24em;
  color:rgba(255,255,255,.6); margin-bottom:2px;
}
.tile__name{ font-size:clamp(17px,1.7vw,23px); letter-spacing:-.02em }
.tile__meta{ font-size:12px; color:rgba(255,255,255,.72) }
.tile__go{
  margin-top:10px; align-self:flex-start;
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:3px;
  transition:border-color .3s var(--ease);
}
.tile:hover .tile__go{ border-bottom-color:#fff }

/* ═══════════ СЕТКА ФОТО ═══════════ */
.strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(8px,1vw,14px);
}
.strip figure,.strip a{ overflow:hidden; background:#e6e6e6; aspect-ratio:2/3 }
.strip img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease) }
.strip a:hover img,.strip figure:hover img{ transform:scale(1.05) }

.sec-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:clamp(20px,2.6vw,34px);
}

/* ═══════════ СПИСКИ «ЧТО ВХОДИТ» ═══════════ */
.list{ border-top:1px solid var(--line) }
.list li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 24px;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.list li b{ flex:0 0 190px; font-weight:500 }
.list li span{ flex:1 1 260px; color:var(--dim) }

/* нумерованные ступени: «геометрия» через цифры и линии */
.steps{ border-top:1px solid var(--line) }
.steps li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 24px;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.steps li b{
  flex:0 0 52px; font-weight:500;
  font-size:12px; letter-spacing:.14em; color:var(--wine);
}
.steps li span{ flex:1 1 260px }

.price{
  margin-top:clamp(26px,3vw,42px);
  padding:clamp(20px,2.4vw,32px);
  background:var(--bg-2);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
}
.price__v{ font-size:clamp(22px,2.6vw,34px); letter-spacing:-.03em }

/* ═══════════ ГАЛЕРЕЯ С ФИЛЬТРАМИ ═══════════ */
.pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(20px,2.6vw,34px) }
.pill{
  padding:11px 22px; border:1px solid var(--line);
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pill:hover{ border-color:var(--ink); color:var(--ink) }
.pill.is-on{ background:var(--wine); color:#fff; border-color:var(--wine) }
.pill i{ font-style:normal; margin-right:10px; opacity:.6; letter-spacing:.1em }

.grid{ column-count:3; column-gap:clamp(8px,1vw,14px) }
.cell{
  break-inside:avoid; margin-bottom:clamp(8px,1vw,14px);
  position:relative; display:block; width:100%;
  overflow:hidden; background:#e6e6e6;
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.cell.is-in{ opacity:1; transform:none }
.cell img{ width:100%; height:auto; transition:transform 1s var(--ease) }
.cell:hover img{ transform:scale(1.035) }
.cell--v video{ width:100%; height:auto }

/* ═══════════ ВИДЕО ═══════════ */
.reels{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(10px,1.4vw,20px); max-width:780px;
}
.reel{ position:relative; background:#000; overflow:hidden }
.reel video{ width:100%; aspect-ratio:9/16; object-fit:cover }
.reel__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(52px,6vw,74px); aspect-ratio:1; border-radius:50%;
  background:rgba(255,255,255,.92); display:grid; place-items:center;
  transition:transform .35s var(--ease);
}
.reel__play svg{ width:36%; fill:var(--ink); margin-left:8% }
.reel__play:hover{ transform:translate(-50%,-50%) scale(1.08) }
.reel__play.gone{ display:none }

/* ═══════════ ОТЗЫВЫ ═══════════ */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(10px,1.4vw,20px) }
.quote{
  background:var(--bg-2); padding:clamp(22px,2.6vw,34px);
  display:flex; flex-direction:column; justify-content:space-between; gap:20px;
}
.quote blockquote{ font-size:15px; line-height:1.68 }
.quote figcaption{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim) }

/* ═══════════ ФОРМА ═══════════ */
.form{ display:grid; gap:20px; max-width:520px }
.f{ display:grid; gap:7px }
.f label{ font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--dim) }
.f input,.f textarea{
  width:100%; background:transparent;
  border:0; border-bottom:1px solid var(--line);
  padding:11px 0; color:var(--ink);
  font-family:var(--font); font-size:15px;
  transition:border-color .3s var(--ease); resize:vertical;
}
.f input::placeholder,.f textarea::placeholder{ color:#a9a9a9 }
.f input:focus,.f textarea:focus{ outline:none; border-bottom-color:var(--wine) }
.f.err input,.f.err textarea{ border-bottom-color:#c0392b }
.f__err{ font-size:12px; color:#c0392b }
.form__note{ font-size:13px; color:#2e7d32; min-height:1.2em }
.form__note.err{ color:#c0392b }

/* ═══════════ КОНТАКТЫ ═══════════ */
.cts{ border-top:1px solid var(--line) }
.cts li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 26px;
  padding:17px 0; border-bottom:1px solid var(--line);
}
.cts li span{ flex:0 0 110px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim) }
.cts li a{ font-size:clamp(16px,1.7vw,21px); letter-spacing:-.02em }
.cts li a:hover{ opacity:.6 }

/* ═══════════ ПОДВАЛ ═══════════ */
.ft{
  border-top:1px solid var(--line);
  padding-block:clamp(36px,4.6vw,64px);
  margin-top:var(--sec);
}
.ft__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(24px,3vw,50px);
}
.ft__col h4{ font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:14px }
.ft__col li{ margin-bottom:9px }
.ft__col a{ font-size:14px }
.ft__col a:hover{ opacity:.6 }
.ft__mark{ font-size:16px; font-weight:500; letter-spacing:-.02em }
.ft__by{ font-size:9px; font-weight:400; letter-spacing:.3em; text-transform:uppercase; color:var(--dim); margin-top:4px }
.ft__cp{
  margin-top:clamp(30px,4vw,54px); padding-top:20px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  font-size:11.5px; color:var(--dim);
}

/* ═══════════ ЛАЙТБОКС ═══════════ */
.lb{
  position:fixed; inset:0; z-index:160;
  background:rgba(12,12,12,.97);
  display:grid; place-items:center;
  padding:clamp(52px,7vw,80px) clamp(10px,5vw,90px);
  opacity:0; transition:opacity .28s var(--ease);
}
.lb[hidden]{
  display:none;
  pointer-events:none;
}
.lb.on{ opacity:1 }
.lb__stage{ display:grid; place-items:center; max-width:100%; max-height:100% }
.lb__stage img{
  max-width:100%; max-height:82svh; object-fit:contain;
  opacity:0; transition:opacity .3s var(--ease);
}
.lb__stage img.ready{ opacity:1 }
.lb__x,.lb__nv{
  position:absolute; z-index:2; color:rgba(255,255,255,.8);
  display:grid; place-items:center;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.lb__x{ top:clamp(10px,2vw,22px); right:clamp(10px,2vw,22px); width:44px; height:44px; font-size:30px }
.lb__nv{
  top:50%; transform:translateY(-50%);
  width:clamp(40px,4.4vw,54px); aspect-ratio:1;
  font-size:clamp(28px,3.4vw,38px); line-height:1;
  border:1px solid rgba(255,255,255,.22);
}
.lb__nv--p{ left:clamp(6px,2vw,28px) }
.lb__nv--n{ right:clamp(6px,2vw,28px) }
.lb__x:hover,.lb__nv:hover{ background:#fff; color:var(--ink) }
.lb__c{
  position:absolute; bottom:clamp(14px,2.4vw,26px); left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:.18em; color:rgba(255,255,255,.55);
}
body.lock{ overflow:hidden }

/* ═══════════ ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ═══════════ */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.rv.is-in{ opacity:1; transform:none }

/* ═══════════ АДАПТИВ ═══════════ */
@media (max-width:1080px){
  .grid{ column-count:2 }
  .split{ grid-template-columns:1fr; gap:22px }
}

@media (max-width:820px){
  .hd__burger{ display:block }
  .hd__tel{ display:none }
  .hd__nav{
    position:fixed; inset:0;
    background:var(--bg); color:var(--ink);
    flex-direction:column; align-items:center; justify-content:center; gap:24px;
    opacity:0; visibility:hidden;
    transition:opacity .35s var(--ease), visibility .35s var(--ease);
  }
  .hd__nav.open{ opacity:1; visibility:visible }
  .hd__nav a{ font-size:19px; letter-spacing:.06em }
  .list li b{ flex-basis:100% }
}

@media (max-width:600px){
  .grid{ column-count:1 }
  .steps li b{ flex-basis:100% }
  .statement{ max-width:none }
  /* на телефоне плитка ниже, а превью портфолио в два столбца —
     иначе главная растягивается на несколько экранов прокрутки */
  .tile{ aspect-ratio:4/3 }
  .strip{ grid-template-columns:repeat(2,1fr) }
  .cover__img img,
  .cover__img video{ object-position:center 24% }
  .cts li span{ flex-basis:100% }
  .lb__nv{ top:auto; bottom:clamp(42px,10vw,66px); transform:none }
  .price{ flex-direction:column; align-items:flex-start }
}

/* ═══════════ ДОСТУПНОСТЬ ═══════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .rv,.cell{ opacity:1 !important; transform:none !important }
}