/* HennerHeede — дизайн-токены сняты с мокапов клиента (см. verify/ и docs/DESIGN_SPEC.md).
   Шрифт Prata подключается локально: Google Fonts с внешнего CDN нарушает DSGVO. */

@font-face{
  font-family:'Prata';
  src:url('../fonts/Prata.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}

:root{
  --cream:#F3F0EC;
  --warm:#ECE4DF;
  --ink:#121110;
  --body:#57534B;
  --grey:#8A8478;
  --line:#DDD8CF;
  --hair:#E1DCD3;
  --gold:#A88C5D;
  --dark:#0B0B0B;

  --serif:'Prata',Georgia,serif;
  --sans:'Helvetica Neue','Segoe UI',Arial,Helvetica,sans-serif;

  --wrap:1180px;
  --pad:clamp(20px,4vw,60px);

  /* движение: одна кривая на весь сайт, чтобы ничего не дёргалось вразнобой */
  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:.9s;
  --mid:.55s;
  --fast:.3s;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* подвал прижат к низу, иначе на коротких страницах под ним висит пустой экран */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1 0 auto}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:10px;z-index:99;background:var(--ink);color:var(--cream);padding:10px 16px}

/* ---------- шапка ---------- */
.nav{border-bottom:1px solid var(--line)}
.nav .in{max-width:var(--wrap);margin:0 auto;padding:22px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav .brand{font-family:var(--serif);font-size:15px;letter-spacing:.14em}
.nav .role{font-size:9px;letter-spacing:.2em;color:var(--grey);margin-left:12px;text-transform:uppercase}
.nav ul{list-style:none;display:flex;gap:clamp(14px,2.4vw,32px);flex-wrap:wrap}
/* Переключатель языка в шапке — тем же кеглем и трекингом, что меню. */
.langswitch{display:flex;align-items:center;gap:8px;margin-left:6px}
.langswitch .lang{font-size:10.5px;letter-spacing:.16em;color:var(--grey);text-transform:uppercase;padding-bottom:4px;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.langswitch a.lang:hover{color:var(--ink)}
.langswitch .lang.cur{color:var(--ink);border-bottom-color:var(--ink)}
.langswitch::before{content:'';width:1px;height:14px;background:var(--hair);margin-right:2px}
.nav a{font-size:10.5px;letter-spacing:.16em;color:var(--grey);text-transform:uppercase;
  padding-bottom:4px;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.nav a:hover{color:var(--ink)}
.nav .current-menu-item>a,.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.navtoggle{display:none;background:none;border:1px solid var(--line);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);cursor:pointer;padding:9px 14px}

/* ---------- типографика ---------- */
.eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey)}
h1,h2,h3{font-weight:400;text-wrap:balance}
.display{font-family:var(--serif);font-size:clamp(38px,7vw,86px);line-height:1.02;letter-spacing:.005em}
/* Имя заглавными — правка клиента от 29.07: «write my name in Capital letters as in my
   very first draft». Шрифт оставлен прежним, он написал «the typo is totally fine».
   Прописные требуют своего набора: кегль чуть меньше (заглавные крупнее строчных
   при одном размере), трекинг шире, межстрочное плотнее. */
.name-caps{text-transform:uppercase;font-size:clamp(32px,5.6vw,70px);
  letter-spacing:.04em;line-height:1.06}
.h-lg{font-family:var(--serif);font-size:clamp(28px,4.4vw,52px);line-height:1.1}
.h-md{font-family:var(--serif);font-size:clamp(22px,2.8vw,34px);line-height:1.15}
.lede{font-size:clamp(15px,1.2vw,18px);line-height:1.7;color:var(--body);max-width:56ch}
.body p{color:var(--body);line-height:1.75}
.body p+p{margin-top:1em}
.rule{height:1px;background:var(--hair);border:0;margin:clamp(34px,5vw,64px) 0}
.dash{width:26px;height:1px;background:var(--ink);margin:22px 0}

/* ---------- секции ---------- */
.sec{padding-block:clamp(44px,6vw,88px)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:clamp(22px,3vw,38px)}
.sec-head .eyebrow{white-space:nowrap}
.more{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  display:inline-block;transition:color var(--mid) var(--ease),transform var(--mid) var(--ease)}
.more:hover{color:var(--ink);transform:translateX(3px)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:stretch}
.hero .txt{background:var(--warm);padding:clamp(30px,5vw,68px) var(--pad);
  display:flex;flex-direction:column;justify-content:center}
.hero .txt .inner{max-width:520px;margin-left:auto;width:100%}
.hero .tags{font-size:11px;letter-spacing:.14em;color:var(--body);line-height:2}
.hero figure{margin:0;min-height:clamp(320px,46vw,620px)}
.hero img{width:100%;height:100%;object-fit:cover}

/* ---------- логотипы брендов ---------- */
.logos{display:flex;align-items:center;flex-wrap:wrap}
.logos .cell{flex:1 1 0;min-width:120px;display:flex;align-items:center;justify-content:center;
  padding:22px 18px;position:relative}
.logos .cell+.cell::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:44px;background:var(--hair)}
.logos img{max-height:24px;max-width:80%;width:auto;height:auto;filter:grayscale(1);opacity:.62}
/* Логотипы не кликабельны (H6) — hover-отклика быть не должно, он обещает несуществующий клик. */

/* ---------- карточки кейсов ---------- */
.cases{display:grid;gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.case-card figure{margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--warm)}
.case-card figure{position:relative}
.case-card figure::after{content:'';position:absolute;inset:0;background:rgba(18,17,16,.10);
  opacity:0;transition:opacity var(--mid) var(--ease)}
.case-card img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--slow) var(--ease),filter var(--slow) var(--ease);will-change:transform}
.case-card:hover img,.case-card:focus-visible img{transform:scale(1.045)}
.case-card:hover figure::after{opacity:1}
.case-card h3,.case-card .cta{transition:color var(--mid) var(--ease)}
.case-card h3{font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);margin-top:14px}
.case-card .meta{font-size:11px;letter-spacing:.08em;color:var(--grey);line-height:1.9;margin-top:6px}
.case-card .cta{display:inline-block;margin-top:12px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey)}
.case-card:hover .cta{color:var(--ink)}

/* ---------- страница кейса ---------- */
.case-head{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:start;padding:clamp(30px,4vw,56px) 0}
.case-head .brand{font-size:clamp(32px,5vw,58px);font-weight:700;line-height:1;letter-spacing:-.01em}
.case-head .sub{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-top:12px}
.case-facts{margin-top:26px;display:grid;gap:20px}
.case-facts .k{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-bottom:7px}
.case-facts p{font-size:13.5px;line-height:1.65;color:var(--body)}
.case-hero img,.case-hero video{width:100%;aspect-ratio:16/9;object-fit:cover;
  object-position:center 22%;display:block}
/* Кампании клиента вертикальные (4:5). При широком кропе им нужен сдвиг вверх,
   иначе обрезается голова модели. */
.case-sec{padding:clamp(22px,3vw,40px) 0}
.case-sec .lbl{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:16px}
.case-sec .lbl b{color:var(--ink);font-weight:600}
.case-row{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.case-row img{width:100%;aspect-ratio:4/3;object-fit:cover}
.awaiting{aspect-ratio:21/6;border:1px dashed #CFC8BC;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,#E9E5DE 0 8px,#EDEAE3 8px 16px)}
.awaiting span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#A39C90}
.split .awaiting{aspect-ratio:4/3}

/* ---------- Work Overview (тёмная) ---------- */
.dark{background:var(--dark);color:#EDE9E3}
.dark .lede,.dark .body p{color:#A5A099}
.dark .eyebrow,.dark .more,.dark .case-card .meta{color:#8C8880}
.dark .sec-head{border-color:#2A2724}
.dark .nav{border-color:#2A2724}
.dark .nav .brand{color:#EDE9E3}
.dark .nav .role{color:#8C8880}
.dark .nav a{color:#8C8880}
.dark .nav a:hover{color:#EDE9E3}
.dark .nav .current-menu-item>a{color:#EDE9E3;border-bottom-color:#EDE9E3}
.dark .navtoggle{color:#EDE9E3}
.dark .logos .cell+.cell::before{background:#2A2724}
.dark .item .box{border-color:#2A2724}
.work-hero{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(30px,4vw,60px) 0}
.work-hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
/* Плитки Case Studies. Клиент (05.08, 09:27): «is it possible to make the tiles
   smaller? Seem to be very big on my laptop». Их всего две, и на широком экране
   auto-fit растягивал каждую на пол-экрана. Ограничиваем ширину плитки и прижимаем
   ряд влево — к линии текста. */
.work-cards{display:grid;gap:clamp(12px,1.6vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  max-width:760px}
@media (max-width:520px){.work-cards{max-width:none}}
/* На планшетных ширинах auto-fit давал три колонки, и четвёртая карточка висела одна
   во втором ряду. Брендов ровно четыре — ставим 2×2. Правило должно стоять ПОСЛЕ
   объявлений .cases и .work-cards: специфичность у них одинаковая, побеждает нижнее.
   Граница 1023, а не 1000: четыре колонки auto-fit даёт только с ~1024, и полоса
   1001–1023 иначе остаётся с одиночной карточкой (ревью Ланды, F-10). */
@media (min-width:761px) and (max-width:1023px){
  .cases,.work-cards{grid-template-columns:repeat(2,1fr)}
}
.work-card{position:relative;aspect-ratio:3/4;overflow:hidden;display:block}
.work-card img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--slow) var(--ease);will-change:transform}
/* Плитка концептуального проекта — не фотография, а логотип или обложка: в боксе 3/4
   у логотипа AlphaTauri (1,20) срезается 37,5 % ширины. Показываем кадр целиком.
   Правило стоит ПОСЛЕ `.work-card img` и повышает специфичность двумя классами:
   первая версия была `.work-card--fit img` выше по файлу — одинаковая специфичность,
   побеждало нижнее, и contain не действовал. Те же грабли, что с сеткой на стр. 177. */
.work-card.work-card--fit{background:var(--warm)}
.work-card.work-card--fit img{object-fit:contain}
.dark .work-card.work-card--fit{background:#151311}
.work-card:hover img,.work-card:focus-visible img{transform:scale(1.05)}
.work-card .shade,.work-card .txt{transition:opacity var(--mid) var(--ease)}
.work-card .shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,8,.14) 0%,rgba(8,8,8,.34) 45%,rgba(8,8,8,.92) 100%)}
.work-card .txt{position:absolute;left:18px;right:14px;bottom:16px}
.work-card .r{font-size:12px;color:#CFCAC2}
.work-card .y{font-size:11px;color:#9C978F;margin-top:4px;letter-spacing:.06em}
.work-card .cta{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#CFCAC2;margin-top:10px;display:block}

/* ---------- Leadership / Expertise ---------- */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,60px);align-items:start;padding:clamp(30px,4vw,56px) 0}
.split img{width:100%;aspect-ratio:3/2;object-fit:cover}
.grid3{display:grid;gap:clamp(20px,3vw,38px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.item{display:flex;gap:14px;align-items:flex-start}
.item .box,.item svg{transition:border-color var(--mid) var(--ease),stroke var(--mid) var(--ease),
  transform var(--mid) var(--ease)}
.item:hover .box{border-color:var(--grey);transform:translateY(-2px)}
.item:hover svg{stroke:var(--ink)}
.item .box{flex:none;width:34px;height:34px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center}
.item svg{width:17px;height:17px;fill:none;stroke:var(--grey);stroke-width:1.15;
  stroke-linecap:round;stroke-linejoin:round}
.item .t{font-size:14px;line-height:1.4;padding-top:7px}

/* ---------- CV ---------- */
.cv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(24px,3vw,44px)}
.cv .st{border-top:1px solid var(--line);padding-top:16px}
.cv .st .yr{font-size:10.5px;letter-spacing:.14em;color:var(--grey)}
.cv .st h3{font-family:var(--serif);font-size:20px;margin:8px 0 2px}
.cv .st .pos{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--body)}
.cv .st p{font-size:13.5px;line-height:1.65;color:var(--body);margin-top:10px}
.cv .st .exp{font-size:11.5px;color:var(--grey);margin-top:10px;line-height:1.7}
.cv-extra{margin-top:clamp(30px,4vw,54px);display:grid;gap:0 clamp(24px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.cv-extra h2{font-family:var(--serif);font-size:clamp(19px,2vw,26px);margin:0 0 14px;
  padding-top:clamp(20px,2.6vw,30px);border-top:1px solid var(--line)}
.cv-extra p{font-size:14px;line-height:1.65;color:var(--body);margin-bottom:14px}
.cv-extra p strong{color:var(--ink);font-weight:600}

/* ---------- контакты ---------- */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:clamp(22px,3vw,44px);align-items:start}
.contact .k{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
/* Почта и телефон набираются тем же, чем LinkedIn и сайт ниже: клиент попросил
   один шрифт на все четыре строки (06.08, 09:09). Раньше ссылки уходили в
   антикву крупным кеглем, а две нижние строки оставались гротеском — вразнобой. */
.contact a.big,.contact div.big{font-family:inherit;font-size:clamp(15px,1.25vw,18px);
  letter-spacing:.01em;line-height:1.5}

/* ---------- подвал ---------- */
.foot{background:var(--ink);color:var(--cream);margin-top:clamp(40px,6vw,90px)}
.foot .in{max-width:var(--wrap);margin:0 auto;padding:clamp(30px,4vw,52px) var(--pad);
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:22px}
.foot .fn{font-family:var(--serif);font-size:17px;letter-spacing:.06em}
.foot .fm{font-size:11px;letter-spacing:.08em;color:#9A948A;margin-top:6px}
.foot nav ul{list-style:none;display:flex;gap:22px;flex-wrap:wrap;margin:0;padding:0}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot a{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#C9C3B9}
.foot a:hover{color:var(--cream)}


/* ---------- лид-фраза и список экспертизы ---------- */
.claim{font-family:var(--serif);font-size:clamp(18px,1.9vw,25px);line-height:1.42;
  color:var(--ink);max-width:24ch;margin-bottom:26px}
.body h2{font-family:var(--serif);font-size:clamp(19px,2vw,26px);margin:clamp(28px,3.5vw,44px) 0 16px;
  padding-top:clamp(22px,3vw,34px);border-top:1px solid var(--line)}
.body ul.expertise{list-style:none;display:grid;gap:0 clamp(18px,3vw,42px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.body ul.expertise li{font-size:14px;line-height:1.5;color:var(--body);
  padding:11px 0;border-bottom:1px solid var(--hair)}


/* ============ раскладки по рукописным наброскам клиента ============ */

/* ---- ① Case Study: шапка, затем шесть блоков «изображение + текст» ---- */
.case-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,60px);align-items:start;padding:clamp(34px,5vw,64px) 0 clamp(22px,3vw,36px)}
.case-top .brand{font-size:clamp(38px,6vw,64px);font-weight:700;line-height:1;letter-spacing:-.012em;margin-top:12px}
/* Верхняя граница кегля — 64px, а не 74: на 74 слово BALDESSARINI (503 px) не помещалось
   в свою колонку грида (453 px), вылезало наружу и съедало весь зазор до колонки ROLE. */
.case-top .sub{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-top:14px}
.case-intro{display:grid;gap:20px}
.case-intro .k{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-bottom:7px}
.case-intro p{font-size:14px;line-height:1.7;color:var(--body);max-width:52ch}
.case-hero{margin:0 0 clamp(10px,2vw,22px)}
.case-hero img,.case-hero video{width:100%;aspect-ratio:16/9;object-fit:cover;
  object-position:center 22%;display:block}
/* Кампании клиента вертикальные (4:5). При широком кропе им нужен сдвиг вверх,
   иначе обрезается голова модели. */

.case-block{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(20px,3.5vw,54px);align-items:start;
  padding:clamp(26px,3.6vw,48px) 0;border-top:1px solid var(--line)}
.case-block:nth-child(even) .bl{order:2}
.case-block .no{font-family:var(--serif);font-size:clamp(20px,2.2vw,30px);color:var(--gold);display:block;margin-bottom:10px}
.case-block h2{font-size:clamp(15px,1.4vw,20px);letter-spacing:.05em;margin-bottom:12px}
.case-block p{font-size:14px;line-height:1.7;color:var(--body);max-width:46ch}
.case-block .bi .case-row{gap:10px}
.case-block .bi .awaiting{aspect-ratio:16/9}
.case-exp{padding:clamp(24px,3vw,40px) 0;border-top:1px solid var(--line)}
.case-exp .k{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.case-exp p{font-family:var(--serif);font-size:clamp(15px,1.5vw,20px);line-height:1.6;color:var(--ink);max-width:60ch}

/* ---- ① CV: шапка с фото, станции «логотип | описание» ---- */
.cv-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,60px);align-items:center;margin-bottom:clamp(32px,4.5vw,60px)}
.cv-top figure{margin:0}
/* Клиент прислал портрет для шапки CV сам (05.08, 08:33). Кроп под 4:3 срезал у
   него четверть кадра — показываем в исходных пропорциях, как на About. */
.cv-top img{width:100%;height:auto;aspect-ratio:auto;object-fit:initial}

.stations{display:grid}
.station{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:clamp(20px,3.5vw,52px);align-items:start;
  padding:clamp(24px,3.2vw,42px) 0;border-top:1px solid var(--line)}
.st-logo{display:flex;align-items:center;min-height:36px}
.st-logo img{max-height:26px;max-width:100%;width:auto;height:auto;filter:grayscale(1);opacity:.85}
.st-logo .st-name{font-family:var(--serif);font-size:19px;letter-spacing:.04em}
.st-head{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;margin-bottom:12px}
.st-head .yr{font-size:11px;letter-spacing:.14em;color:var(--grey)}
.st-head .pos{font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.st-head .place{font-size:12px;color:var(--grey)}
.st-body p{font-size:14px;line-height:1.7;color:var(--body);max-width:70ch}
.st-bullets{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px}
.st-bullets li{font-size:11.5px;letter-spacing:.06em;color:var(--grey);position:relative;padding-left:12px}
.st-bullets li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--grey)}

/* ---- ④ About: широкий текст, три mood-кадра, колонки ---- */
.claim-wide{max-width:34ch}
.about-text{columns:2;column-gap:clamp(28px,4vw,64px);margin-top:8px}
.about-text p{break-inside:avoid;margin-bottom:1em}
/* Колонок столько, сколько изображений: при жёстких трёх и двух кадрах справа
   оставалась пустая треть. */
.moods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:clamp(10px,1.6vw,20px);
  margin:clamp(30px,4vw,54px) 0}
/* Клиент просил сохранить исходный размер кадра на About (04.08, 13:00). Правило
   стояло только для одиночного блока; 05.08 наверх добавился мудборд, блок стал
   рядом из двух — и кроп вернулся. Делаем правило общим для блока. */
.moods img{width:100%;height:auto;aspect-ratio:auto;object-fit:initial}
.moods{align-items:start}
.moods .awaiting{aspect-ratio:3/4}
.about-extra{max-width:none}

/* ---- ② Contact: Leadership и контакты на одной странице ---- */
.lead-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:0 clamp(20px,3vw,44px);margin-top:18px}
.lead-grid span{font-size:14px;color:var(--body);padding:11px 0;border-bottom:1px solid var(--hair)}
.contact .pending{color:var(--grey);font-style:normal}
.contact-img{margin:0 0 clamp(30px,4vw,56px)}
.contact-img img{width:100%;aspect-ratio:21/9;object-fit:cover}

@media (max-width:900px){
  .case-top,.case-block,.cv-top,.station{grid-template-columns:1fr}
  .case-block:nth-child(even) .bl{order:0}
  .about-text{columns:1}
  .moods{grid-template-columns:1fr}
}



/* ============ правки заказчика PX-003 ============ */

/* H3/C1/A1 — цитаты. Клиент просил оформить как цитату, а не просто строку текста. */
.quote{font-family:var(--serif);font-style:normal;line-height:1.45}
.hero .quote{font-size:clamp(15px,1.3vw,19px);color:var(--ink);margin-top:26px;max-width:34ch}

/* H10 — логотип бренда поверх обложки. Ставится там, где у кейса НЕ выставлено поле
   «логотип уже на фото» (hh_logo_in_photo). Сейчас это MANGO и BALDESSARINI:
   у BOSS вордмарк вшит по центру кадра, у MUSTANG вытиснен на кожаной нашивке.
   Список брендов сознательно не зашит в код — фото меняет клиент. */
.case-card figure{position:relative}
.brandmark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:2}
.brandmark img{width:auto;height:auto;max-width:58%;max-height:22%;object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 1px 12px rgba(0,0,0,.45))}
/* Белый логотип держится на тёмных обложках, но обложка MUSTANG светлая: в зоне наложения
   на самой карточке она заметно светлее соседних (текущие значения печатает
   verify/proof_px005_contrast.py). Мягкая радиальная тень даёт логотипу опору.
   Подложка включается ПОИМЁННО, а не всем: первый вариант без модификатора приглушил
   и соседние карточки — диф рендера дал 11 563 и 10 945 изменённых пикселей у
   BALDESSARINI и MANGO, которые клиент уже принял (ревью Ланды, F-01). */
.brandmark--onlight::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76%;height:42%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.34) 0%,rgba(0,0,0,.18) 45%,transparent 72%)}


/* H7 — подписи брендов под карточками сняты, метка должности стала основной строкой */
.case-card{display:flex;flex-direction:column}
.case-card .meta{margin-top:14px;color:var(--body);font-size:12.5px;letter-spacing:.02em;
  line-height:1.5;min-height:3em}
/* min-height выравнивает «View project» по одной линии: подписи должностей разной длины. */
.case-card .cta{margin-top:auto}

/* C8 — фотографии вузов под блоком Education */
.edu-images{display:grid;gap:clamp(12px,1.8vw,22px);margin-top:clamp(26px,3.4vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.edu-images figure{margin:0}
.edu-images img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1)}

@media (max-width:760px){
  .edu-images{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-inline:0 calc(var(--pad) * -1);padding-inline:0 var(--pad)}
  .edu-images::-webkit-scrollbar{display:none}
  .edu-images>*{flex:0 0 82%;scroll-snap-align:start}
}



/* Логотип вуза над снимком здания. Высота фиксирована, ширина свободна —
   у Marangoni логотип широкий с подписью, у JAK почти квадратный. */
.edu-logo{display:flex;align-items:center;height:38px;margin-bottom:16px}
/* Селектор длиннее, чем у правила для снимков зданий: при равной специфичности
   побеждало бы то, что ниже в файле, и логотип получал бы width:100% и кроп 3:2. */
.edu-images figure .edu-logo img{
  height:34px;width:auto;max-width:220px;max-height:34px;
  aspect-ratio:auto;object-fit:contain;opacity:.88}
/* Логотипы вузов разной формы: у Marangoni горизонтальный локап 5.34:1,
   у JAK почти квадратный. Ограничиваем и высоту, и ширину, чтобы оба смотрелись ровно. */
/* C8 — подписи под фотографиями вузов */
.edu-images figcaption{font-size:11px;letter-spacing:.06em;color:var(--grey);margin-top:8px}
.edu-images{margin-top:clamp(18px,2.4vw,28px)}
.edu-images img{aspect-ratio:3/2}


/* ============ фотографии клиента с WeTransfer ============
   Все три снимка вертикальные (примерно 0.7:1). Прежние кропы были рассчитаны
   на широкие кадры из мокапов и срезали лица: на Philosophy — по брови,
   на Contact — по подбородок. Пропорции приведены к вертикали кадра. */

/* Philosophy: снимок в шоуруме, лицо в верхней трети */
.split .case-row img{aspect-ratio:3/4;object-position:center 18%}

/* Contact: портрет внизу страницы. Во всю ширину вертикальный кадр не работает —
   ограничиваем блок и даём ему собственную пропорцию. */
.contact-img{max-width:560px;margin-inline:0}
.contact-img img{aspect-ratio:4/5;object-fit:cover;object-position:center 22%}


/* ============ проекты внутри бренда (правка 04.08) ============
   Клиент: «For MUSTANG i'd like to show 2 projects with images. A caroussel to look
   through the images on a mobile phone would be cool». Блоки «① × 6 pro Marke» сняты. */

.project{padding:clamp(30px,4.5vw,64px) 0;border-top:1px solid var(--line)}
.project-title{font-family:var(--serif);font-size:clamp(21px,2.4vw,32px);line-height:1.2;
  max-width:22ch;margin-bottom:clamp(16px,2vw,24px)}
/* Вторая строка заголовка. Отбивка сверху отрицательная — она подтягивает строку
   к самому заголовку, иначе между ними встаёт зазор title и читается как абзац. */
.project-sub{margin-top:calc(-1 * clamp(10px,1.4vw,16px));margin-bottom:clamp(16px,2vw,24px);
  font-size:clamp(13px,1.05vw,15px);letter-spacing:.02em;color:var(--body);max-width:46ch}
.project-text{columns:2;column-gap:clamp(28px,4vw,56px);max-width:none;margin-bottom:clamp(24px,3vw,40px)}
.project-text p{break-inside:avoid;margin-bottom:1em;font-size:14px;line-height:1.7;color:var(--body)}
/* ГАЛЕРЕЯ ПРОЕКТА.
   Задача с двумя требованиями: ряды ровные, кадры не обрезаны. Перебрано четыре
   варианта, и каждый разбивался об одно и то же — кадры внутри галереи разнородные
   (от 0,46 до 2,04):
     • cover под 3/4 — ряды ровные, но срезало головы и обувь;
     • height:auto — ничего не срезано, но ряды поехали, и клиент назвал это рваным;
     • ячейка по ориентации галереи и span на две колонки — арифметику не исправили,
       у MUSTANG заполненность даже упала, а span сделал колонки неравными;
     • колонки (masonry) — кадр заполняет ширину целиком, но балансировщик развёл их
       неравномерно, и в середине сетки появился пропуск.
   Работает пятый: ровная сетка одинаковых ячеек, кадр вписан целиком, а подложки нет.
   Поля вокруг кадра совпадают с фоном страницы и не читаются как плашки — сетка ровная,
   кадры целые, пустот не видно. */
.project-gallery{display:grid;gap:clamp(10px,1.4vw,18px);
  grid-template-columns:repeat(4,1fr);align-items:stretch}
@media (max-width:1023px){.project-gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.project-gallery{grid-template-columns:repeat(2,1fr)}}
.project-gallery figure{margin:0;position:relative;aspect-ratio:3/4;overflow:hidden;
  cursor:zoom-in}
/* Видео в ячейке галереи ведёт себя ровно как снимок: та же ячейка, то же
   вписывание целиком. Иначе ряд поедет — ячейки должны остаться одной высоты. */
.project-gallery video{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform var(--slow) var(--ease)}
.project-gallery figure.is-video:hover video{transform:scale(1.03)}
.project-gallery img{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform var(--slow) var(--ease);will-change:transform}
.project-gallery figure::after{content:'';position:absolute;inset:0;
  background:rgba(18,17,16,.05);opacity:0;transition:opacity var(--mid) var(--ease)}
.project-gallery figure:hover img{transform:scale(1.03)}
.project-gallery figure:hover::after{opacity:1}
.project-gallery figure:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ЛАЙТБОКС — просмотр кадра во всю ширину экрана по клику. */
.lb{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(11,11,11,.94);opacity:0;visibility:hidden;
  transition:opacity var(--mid) var(--ease),visibility var(--mid) var(--ease)}
.lb.open{opacity:1;visibility:visible}
.lb img,.lb .lb-video{max-width:92vw;max-height:88vh;object-fit:contain;
  transform:scale(.98);opacity:0;
  transition:transform var(--slow) var(--ease),opacity var(--mid) var(--ease)}
/* Проявляются оба: и снимок, и видео. Пока здесь стоял только `img`, видео
   открывалось с opacity:0 — чёрный экран со счётчиком вместо кадра. Скрытый
   элемент и «пустая рамка» для зрителя одно и то же (находка Ланды F-33). */
.lb.open img,.lb.open .lb-video{transform:scale(1);opacity:1}
/* Счётчик — span, а не button: правило только для button оставляло его в потоке flex,
   и он сдвигал кадр вбок, а сам вставал у стрелки. Позиционируем оба типа. */
.lb button,.lb .lb-count{position:absolute;background:none;border:0;color:var(--cream);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:14px 18px;
  transition:opacity var(--fast) var(--ease);opacity:.65}
.lb button{cursor:pointer}
.lb button:hover{opacity:1}
.lb .lb-close{top:10px;right:12px;font-size:22px;letter-spacing:0;padding:8px 14px}
.lb .lb-prev{left:8px;top:50%;transform:translateY(-50%);font-size:26px}
.lb .lb-next{right:8px;top:50%;transform:translateY(-50%);font-size:26px}
.lb .lb-count{bottom:14px;left:50%;transform:translateX(-50%);pointer-events:none}

/* Телефон. Кнопки-стрелки занимают края и визуально сдвигают кадр — на узком экране
   они лишние, там листают свайпом. Счётчик стоял рядом со стрелкой и читался криво:
   уводим его вниз по центру, отдельной строкой под кадром. */
@media (max-width:760px){
  .lb{flex-direction:column;justify-content:center;padding:56px 0 44px}
  .lb .lb-prev,.lb .lb-next{display:none}
  .lb img,.lb .lb-video{max-width:100vw;max-height:calc(100vh - 100px);margin:0 auto}
  .lb .lb-count{bottom:18px;font-size:10px;letter-spacing:.2em;opacity:.7}
  .lb .lb-close{top:8px;right:8px}
}
@media (prefers-reduced-motion:reduce){
  .project-gallery figure:hover img{transform:none}
  .lb,.lb img,.lb .lb-video{transition:none}
}

/* карточка без ссылки — у MANGO проекта нет, наведение не должно обещать переход */
.case-card--plain{cursor:default}
.case-card--plain:hover img{transform:none}
.case-card--plain:hover figure::after{opacity:0}

/* About: одно изображение во всю ширину вместо ряда из трёх */
/* Колонок ровно столько, сколько изображений: auto-fit при двух кадрах создавал
   четыре дорожки, и справа оставалась пустая треть (ревью Ланды, F-07). */
.moods--single{grid-template-columns:1fr}
.moods--row{grid-template-columns:repeat(2,1fr)}
/* M3: клиент просил сохранить исходный размер кадра (13:00). Недостаточно снять это
   правило — тогда вступит .moods img{aspect-ratio:3/4} выше и портретный бокс срежет
   половину ширины. Гасим и соотношение, и кроп. */
.moods--single img{aspect-ratio:auto;height:auto;object-fit:initial}

@media (max-width:900px){
  .project-text{columns:1}
}
@media (max-width:760px){
  /* галерея проекта листается пальцем, как остальные ленты на сайте */
  .project-gallery{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:0 calc(var(--pad) * -1);padding-inline:0 var(--pad);padding-bottom:6px}
  .project-gallery::-webkit-scrollbar{display:none}
  .project-gallery>*{flex:0 0 78%;scroll-snap-align:start}
  /* M3: мобильный кроп 4/3 снят — кадр показывается целиком на всех ширинах */
}

/* ============ мобильные карусели ============
   Аудитория смотрит сайт с телефона. Кейсы и кадры листаются вбок свайпом,
   а не тянутся вертикальной простынёй. Сделано на scroll-snap: нативная
   инерция пальца, без единой строки JS. Край следующей карточки специально
   оставлен видимым — иначе не догадаться, что список листается. */

@media (max-width:760px){
  .cases,.work-cards,.moods,.case-row,.lead-grid{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* Слева лента начинается ровно по линии текста, справа уходит за край экрана —
       так виден край следующей карточки и при этом ничего не липнет к левому краю. */
    margin-inline:0 calc(var(--pad) * -1);
    padding-inline:0 var(--pad);
    padding-bottom:6px;
  }
  .cases::-webkit-scrollbar,.work-cards::-webkit-scrollbar,.moods::-webkit-scrollbar,
  .case-row::-webkit-scrollbar,.lead-grid::-webkit-scrollbar{display:none}

  .cases>*,.work-cards>*,.moods>*,.case-row>*{
    flex:0 0 82%;
    scroll-snap-align:start;
  }
  .lead-grid>*{flex:0 0 64%;scroll-snap-align:start;border-bottom:1px solid var(--hair)}
  .moods>*{flex:0 0 76%}
  .case-row>*{flex:0 0 78%}

  /* подсказка, что ленту можно листать */
  .cases-hint{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--grey);margin-top:12px}
}
/* Правило стояло ПОСЛЕ медиазапроса и гасило подсказку на телефоне, хотя карусель
   клиент просил именно там (09:13). Прячем только на широких экранах. */
@media (min-width:761px){.cases-hint{display:none}}

/* ---------- появление при скролле ---------- */
/* Прячем только когда JS точно жив: иначе при ошибке скрипта страница осталась бы пустой. */
.js [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- адаптив ---------- */
@media (max-width:900px){
  .hero,.work-hero,.split,.case-head{grid-template-columns:1fr}
  .hero .txt .inner{margin-left:0}
  .hero figure{min-height:clamp(260px,60vw,420px)}
  .nav ul{gap:16px}
}
@media (max-width:640px){
  .nav .in{flex-wrap:wrap}
  .navtoggle{display:block}
  .nav ul{display:none;width:100%;flex-direction:column;gap:0;padding-top:8px}
  .nav ul.open{display:flex}
  .nav ul li{border-top:1px solid var(--line)}
  .nav ul a{display:block;padding:13px 0;font-size:12px}
  /* Роль не прячем — клиент попросил её видеть на телефоне (29.07).
     Рядом с именем она не помещается, поэтому уводим под него отдельной строкой. */
  .nav .brandbox{display:flex;flex-direction:column;gap:3px}
  .nav .role{margin-left:0;font-size:8px;letter-spacing:.18em}
  .sec-head{flex-direction:column;align-items:flex-start;gap:8px}
  .logos{display:grid;grid-template-columns:1fr 1fr}
  .logos .cell{min-width:0;padding:20px 10px}
  .logos .cell+.cell::before{display:none}
  .logos .cell:nth-child(n+3){border-top:1px solid var(--hair)}
  .logos .cell:nth-child(even){border-left:1px solid var(--hair)}
  .foot .in{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js [data-reveal]{opacity:1;transform:none}
}