:root{
  /* точные токены из Figma (фрейм главной 369:383) */
  --bg:#F5F4F1;
  --panel:#E8E6E0;
  --ink:#1A1A18;
  --ink-mute:#8A8A85;
  --ink-dim:#A8A7A1;
  --line:#D9D8D4;
  --accent:#00E84B;
  --accent-soft:rgba(0,232,75,.08);
  --accent-line:rgba(0,232,75,.45);
  --pad:clamp(20px,4vw,56px);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;font-style:normal;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.serif{font-family:var(--serif)}
.it{font-family:var(--serif);font-style:italic}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* служебные капс-лейблы */
.label{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);
}
.dot{color:var(--accent)}

/* контейнер */
.wrap{padding-left:var(--pad);padding-right:var(--pad)}

/* ===== Header ===== */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--pad);
  color:var(--ink);transition:color .4s;
}
.hdr a,.hdr .label{color:var(--ink)}
.brand{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;position:relative;z-index:60}
.nav{display:flex;gap:28px;align-items:center}
.nav a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;transition:opacity .3s}
.nav a:hover{opacity:.55}
.nav a.active{color:var(--accent)}
.nav .num{color:var(--accent)}
.menu-btn{display:none;background:none;border:0;color:var(--ink);font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;position:relative;z-index:60}

/* ===== Hero (главная) ===== */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;padding-top:96px}
.hero-l{padding:0 var(--pad) 48px;display:flex;flex-direction:column}
.eyebrow{display:flex;align-items:center;gap:14px;padding-top:8px}
.eyebrow .rule{width:34px;height:1px;background:var(--ink)}
.hero h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(40px,5.8vw,96px);line-height:1.0;letter-spacing:-.02em;
  margin-top:7vh;
}
.hero h1 .ln{display:block;white-space:nowrap}
.hero h1 .it{font-weight:400}
.hero-cap{
  max-width:380px;border:1px solid var(--line);border-radius:4px;
  padding:12px 14px;font-size:13px;line-height:1.45;color:var(--ink-mute);
  position:relative;margin-top:auto;
}
.hero-star{font-family:var(--serif);color:var(--accent);font-size:30px;line-height:1;
  display:inline-block;margin-left:18px;vertical-align:middle}
.hero-r{background:var(--panel);position:relative;overflow:hidden}
.hero-r .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center}

/* когда в слот подставлено фото (демо или реальное) */
.has-img{background-size:cover;background-position:center;background-repeat:no-repeat}
.has-img .label{opacity:0}
/* видео в медиа-слоте (CMS) */
.cms-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* карусель (CMS) */
.carousel{display:block;position:relative;overflow:hidden;border-radius:4px;background:var(--panel)}
.carousel .label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.case-cover{aspect-ratio:16/10;margin-top:48px}
.carousel.carousel-on .label{display:none}
.carousel .c-track{display:flex;height:100%;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.carousel .c-slide{min-width:100%;height:100%;background-size:cover;background-position:center}
.carousel .c-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;background:rgba(27,27,24,.5);color:#fff;font-size:20px;line-height:1;transition:background .3s}
.carousel .c-btn:hover{background:var(--accent);color:#08210f}
.carousel .c-prev{left:14px}
.carousel .c-next{right:14px}
.carousel .c-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.carousel .c-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:background .3s}
.carousel .c-dot.on{background:#fff}
@media (max-width:640px){ .case-cover{aspect-ratio:4/5} .carousel .c-btn{width:36px;height:36px;font-size:17px} }

/* плейсхолдер-картинка (общий) */
.imgph{background:var(--panel);position:relative;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink-dim);overflow:hidden}
.imgph .label{color:var(--ink-dim)}

/* ===== Roles ===== */
.roles{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.role{padding:26px var(--pad);display:flex;align-items:baseline;gap:14px;border-left:1px solid var(--line)}
.role:first-child{border-left:0}
.role .num{font-size:11px;color:var(--ink-mute);letter-spacing:.1em}
.role .nm{font-family:var(--serif);font-size:clamp(18px,2vw,24px)}

/* ===== Секции ===== */
.sec{padding-top:clamp(64px,9vw,140px);padding-bottom:clamp(64px,9vw,140px)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:32px}
.sec-head .more{color:var(--accent);font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:opacity .3s}
.sec-head .more:hover{opacity:.6}

/* список работ */
.work-row{
  display:grid;grid-template-columns:48px 1fr auto auto;gap:24px;align-items:center;
  padding:26px 0;border-top:1px solid var(--line);
  transition:padding-left .45s cubic-bezier(.22,1,.36,1),background .45s;
}
.work-row:last-child{border-bottom:1px solid var(--line)}
.work-row:hover{padding-left:16px}
.work-row .w-idx{font-size:12px;color:var(--ink-dim)}
.work-row .w-name{font-family:var(--serif);font-size:clamp(20px,2.6vw,32px);line-height:1.1}
.work-row .w-tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{border:1px dashed var(--accent-line);background:var(--accent-soft);border-radius:40px;padding:5px 14px;font-size:11px;letter-spacing:.08em;color:var(--ink);white-space:nowrap}
.work-row .w-year{font-size:13px;color:var(--ink-mute);min-width:48px;text-align:right}
.work-row .arrow{display:inline-block;opacity:0;transform:translateX(-8px);transition:.4s;color:var(--accent)}
.work-row:hover .arrow{opacity:1;transform:translateX(0)}

/* ===== About ===== */
.about{display:grid;grid-template-columns:1fr 1fr;gap:48px;border-top:1px solid var(--line);padding-top:clamp(48px,7vw,110px)}
.about h2{font-family:var(--serif);font-size:clamp(44px,7vw,96px);line-height:.98;font-weight:400}
.about .lwt{display:inline-block;margin-top:20px;border-bottom:1px solid var(--ink);padding-bottom:4px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;transition:.3s}
.about .lwt:hover{border-color:var(--accent);color:var(--accent)}
.about-bio{font-size:15px;line-height:1.6;color:var(--ink-mute);max-width:520px;border:1px solid var(--line);border-radius:4px;padding:16px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.stat .n{font-family:var(--serif);font-size:clamp(30px,4vw,52px);line-height:1}
.stat .t{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-top:8px}

/* ===== Footer ===== */
.foot{display:grid;grid-template-columns:1fr 1fr;gap:48px;border-top:1px solid var(--line);
  margin-top:clamp(64px,10vw,160px);padding-top:clamp(48px,7vw,110px);padding-bottom:40px}
.foot h2{font-family:var(--serif);font-size:clamp(56px,11vw,150px);line-height:.9;font-weight:400}
.foot-links{display:flex;flex-direction:column;gap:16px;justify-content:center}
.foot-row{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:12px}
.foot-row .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.foot-row .v{font-size:15px;transition:color .3s}
.foot-row a.v:hover{color:var(--accent)}
.copy{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;
  margin-top:48px;font-size:11px;letter-spacing:.06em;color:var(--ink-dim);text-transform:uppercase}

/* ===== Шапка внутренней страницы (Projects / Case) ===== */
.page-top{padding-top:140px;padding-bottom:8px}
.page-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.page-eyebrow .rule{width:34px;height:1px;background:var(--ink)}
.page-title{font-family:var(--serif);font-weight:400;font-size:clamp(48px,9vw,128px);line-height:.96;letter-spacing:-.01em}
.page-title .it{font-weight:400}
.page-intro{max-width:560px;margin-top:24px;font-size:16px;line-height:1.6;color:var(--ink-mute)}

/* ===== Projects grid ===== */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:36px 0 8px}
.filters button{background:none;border:1px solid var(--line);border-radius:40px;padding:8px 18px;font:inherit;font-size:12px;color:var(--ink-mute);cursor:pointer;transition:.3s;letter-spacing:.04em}
.filters button:hover{border-color:var(--ink)}
.filters button.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,48px);margin-top:36px}
.proj-card{display:block}
.proj-card .thumb{aspect-ratio:4/5;border:1px solid var(--line);border-radius:4px;margin-bottom:16px;overflow:hidden}
.proj-card .thumb .imgph{width:100%;height:100%}
.proj-card:hover .thumb .ph-fill{transform:scale(1.03)}
.ph-fill{position:absolute;inset:0;background:var(--panel);transition:transform .8s cubic-bezier(.22,1,.36,1);display:flex;align-items:center;justify-content:center}
.proj-card .c-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.proj-card .c-name{font-family:var(--serif);font-size:clamp(20px,2.4vw,28px);line-height:1.15}
.proj-card .c-year{font-size:13px;color:var(--ink-mute);white-space:nowrap}
.proj-card .c-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ===== Case page ===== */
.case-head{padding-top:120px}
.back{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:28px;transition:.3s}
.back:hover{color:var(--accent)}
.case-title{font-family:var(--serif);font-weight:400;font-size:clamp(40px,7vw,104px);line-height:.98;letter-spacing:-.01em;max-width:14ch}
.case-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line);margin-top:48px;padding-top:24px}
.case-meta .m .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:8px}
.case-meta .m .v{font-size:15px}
.cover-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px);margin-top:48px}
.cover-grid .imgph{aspect-ratio:3/4;border-radius:4px}
.case-section{margin-top:clamp(48px,8vw,120px)}
.case-lead{font-family:var(--serif);font-size:clamp(24px,3.4vw,44px);line-height:1.25;max-width:20ch;font-weight:400}
.case-text{max-width:620px;margin-top:24px;font-size:16px;line-height:1.65;color:var(--ink-mute)}
.case-text + .case-text{margin-top:18px}
.media-full{aspect-ratio:16/9;border-radius:4px;margin-top:clamp(32px,5vw,72px)}
.media-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px);margin-top:clamp(32px,5vw,72px)}
.media-2 .imgph{aspect-ratio:4/5;border-radius:4px}
.media-phones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px);margin-top:clamp(32px,5vw,72px)}
.media-phones .imgph{aspect-ratio:9/16;border-radius:18px}
.case-next{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-top:1px solid var(--line);margin-top:clamp(64px,9vw,140px);padding-top:32px}
.case-next .label{margin-bottom:10px;display:block}
.case-next .nx-name{font-family:var(--serif);font-size:clamp(26px,4vw,52px);line-height:1.05}
.case-next .nx-arrow{color:var(--accent);display:inline-block;transition:transform .4s}
.case-next .nx-link:hover .nx-name{color:var(--accent)}
.case-next .nx-link:hover .nx-arrow{transform:translateX(10px)}
.case-next .nx-all{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;transition:color .3s}
.case-next .nx-all:hover{color:var(--accent)}

/* reveal: прячем ТОЛЬКО когда JS включил режим (.reveal-on). Без JS/reduced-motion контент виден всегда. */
.reveal-on [data-reveal]{opacity:0;transform:translateY(26px)}
.reveal-on [data-reveal].is-in{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}

/* ===== Responsive ===== */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-r{height:62vh;order:-1}
  .hero h1{margin-top:6vh}
  .hero-l{padding-top:24px;padding-bottom:40px}
  .roles{grid-template-columns:1fr}
  .role{border-left:0;border-top:1px solid var(--line)}
  .role:first-child{border-top:0}
  .about,.foot{grid-template-columns:1fr}
  .case-meta{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav{display:none}
  .menu-btn{display:block}
  body.menu-open{overflow:hidden}
  body.menu-open .nav{
    display:flex;flex-direction:column;gap:22px;align-items:flex-start;justify-content:center;
    position:fixed;inset:0;z-index:45;background:var(--bg);padding:0 var(--pad);
  }
  body.menu-open .nav a{font-family:var(--serif);font-size:34px;letter-spacing:0;text-transform:none}
  body.menu-open .nav a .num{font-size:18px}
  .work-row{grid-template-columns:28px 1fr;gap:10px;row-gap:10px}
  .work-row .w-tags{grid-column:2;justify-content:flex-start}
  .work-row .w-year{grid-column:1/-1;text-align:left;min-width:0}
  .stats{grid-template-columns:1fr 1fr}
  .foot-row{grid-template-columns:90px 1fr}
  .proj-grid{grid-template-columns:1fr;gap:32px}
  .cover-grid{grid-template-columns:1fr;gap:12px}
  .media-2,.media-phones{grid-template-columns:1fr}
  .media-phones .imgph{aspect-ratio:4/5}
}
@media (prefers-reduced-motion:reduce){
  .reveal-on [data-reveal]{opacity:1;transform:none}
}