@font-face{font-family:'Clash Grotesk';src:url(assets/fonts/clash.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Machina';src:url(assets/fonts/machina-reg.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Machina';src:url(assets/fonts/machina-ultra.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}
:root{--cream:#FBF8EC;--yellow:#F3EA9E;--ink:#17160F;--muted:#7c7a6c;--line:rgba(23,22,15,.15);--panel:#EFEBDB}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Roboto','Helvetica Neue',Arial,sans-serif;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.mcursor{position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:99999;transition:width .28s cubic-bezier(.2,.7,.2,1),height .28s cubic-bezier(.2,.7,.2,1),opacity .25s;will-change:transform}
.mcursor.big{width:54px;height:54px}
html.has-mcursor,html.has-mcursor *{cursor:none!important}
@media (hover:none),(pointer:coarse){.mcursor{display:none}html.has-mcursor,html.has-mcursor *{cursor:auto!important}}
.ital{font-family:'Roboto',serif;font-style:italic}
.mono-label{font-family:'Clash Grotesk',sans-serif;font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- HEADER (logo left, nav right) ---------- */
.hdr{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:18px clamp(20px,4vw,60px);background:var(--cream);border-bottom:1px solid var(--line)}
.hdr.over{position:absolute;left:0;right:0;background:transparent;border-bottom:0}
.hdr .logo{display:block;flex:0 0 auto}.hdr .logo svg{height:20px;width:auto;display:block}
.nav-d{display:flex;align-items:center;gap:1.7rem}
.nav-d a,.nav-mobile a,.nav-contact{font-family:'Clash Grotesk',sans-serif;font-weight:500;font-size:.86rem;letter-spacing:.09em;text-transform:uppercase}
.nav-d a{transition:opacity .2s}.nav-d a:hover{opacity:.55}
.nav-m{display:none;align-items:center;gap:1.1rem}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:30px;height:22px;background:none;border:0;cursor:pointer;padding:0}
.burger span{width:24px;height:1.5px;background:var(--ink);display:block;transition:.25s}
.hdr.open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hdr.open .burger span:nth-child(2){opacity:0}
.hdr.open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-mobile{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--line);
  flex-direction:column;gap:14px;padding:16px clamp(20px,4vw,60px) 22px;z-index:39}
.hdr.open .nav-mobile{display:flex}
@media(max-width:820px){ .nav-d{display:none} .nav-m{display:flex} }

/* ---------- shared footer ---------- */
.foot{padding:clamp(34px,6vh,66px) clamp(20px,4vw,60px);text-align:center;border-top:1px solid var(--line)}
.contacts{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.5rem 1.1rem;
  font-family:'Clash Grotesk',sans-serif;font-weight:500;font-size:.8rem;letter-spacing:.06em;color:var(--muted)}
.contacts a:hover{opacity:.6}.contacts .sep{opacity:.4}
.foot.over{border-top:0}

/* ---------- HOME ---------- */
.home{position:relative;height:100svh;min-height:100svh;overflow:hidden}
.home .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--cream) url(assets/hero.jpg) center center/cover no-repeat}
.home .footwrap{position:absolute;left:0;right:0;bottom:0}
.home .foot{border-top:0;padding-bottom:clamp(22px,3.4vh,40px)}

/* ---------- CONTACT ---------- */
.contact{position:relative;min-height:100svh;background:var(--yellow);display:flex;flex-direction:column}
.contact .mid{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem}
.contact .mail{font-family:'Neue Machina',sans-serif;font-weight:800;letter-spacing:-.01em;
  font-size:clamp(1.6rem,5.4vw,3.4rem);color:var(--ink);word-break:break-word}
.contact .mail:hover{opacity:.65}
.contact .cfoot{padding:0 0 clamp(24px,4vh,44px);text-align:center}

/* ---------- inner pages ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,60px)}
.section{padding:clamp(52px,9vh,116px) 0;border-bottom:1px solid var(--line)}
.section:last-of-type{border-bottom:0}
.lead-xl{font-family:'Neue Machina',sans-serif;font-weight:800;line-height:.99;font-size:clamp(2.1rem,6vw,4.4rem);letter-spacing:-.02em;max-width:16ch}
.body-lg{font-size:clamp(1rem,1.5vw,1.16rem);max-width:60ch;color:#33322a;margin-top:1.5rem}
.tags{margin-top:1.9rem;display:flex;gap:1.4rem;flex-wrap:wrap}
.tags span{font-family:'Clash Grotesk',sans-serif;font-weight:500;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.jump{margin-top:2.1rem;display:flex;gap:1.7rem;flex-wrap:wrap}
.jump a{font-family:'Clash Grotesk',sans-serif;font-weight:500;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px;transition:opacity .2s}
.jump a:hover{opacity:.5}
html{scroll-behavior:smooth}
.section[id]{scroll-margin-top:78px}
.manifesto{position:relative;overflow:hidden;background:var(--yellow)}
.manifesto .bg{position:absolute;inset:0;background:url(assets/manifesto.jpg) center/cover}
.manifesto .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(243,234,158,.80),rgba(251,248,236,.86))}
.manifesto .wrap{position:relative;z-index:1}
.manifesto .ital{font-size:clamp(1.4rem,3.5vw,2.6rem);line-height:1.28;max-width:22ch;color:#201e12}
.manifesto .ital + .ital{margin-top:1.3rem}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal,.reveal.in{transition:none;opacity:1;transform:none}}
.section.wwd4{background:var(--yellow)}
.e4{border-top:1px solid rgba(23,22,15,.22);padding:clamp(24px,4vh,44px) 0}
.e4:last-child{border-bottom:1px solid rgba(23,22,15,.22)}
.e4in{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.e4:hover .e4in{transform:translateX(14px)}
.e4 h3{font-family:'Neue Machina',sans-serif;font-weight:800;font-size:clamp(1.35rem,2.9vw,2rem)}
.e4 .slead{font-family:'Roboto',serif;font-style:italic;font-size:clamp(1.02rem,1.8vw,1.24rem);margin:.55rem 0 1rem;color:#2a2818;max-width:34ch}
.e4 .svcs{font-family:'Clash Grotesk',sans-serif;font-weight:500;font-size:.92rem;letter-spacing:.02em;color:#4a4733;max-width:72ch;line-height:1.85}
.section-title{font-family:'Neue Machina',sans-serif;font-weight:800;font-size:clamp(1.7rem,4.2vw,3.1rem);letter-spacing:-.01em;line-height:1}

/* steps */
.steps{margin-top:clamp(26px,5vh,52px)}
.step{display:grid;grid-template-columns:clamp(60px,9vw,110px) minmax(130px,1fr) 2fr;gap:1rem 2rem;align-items:baseline;padding:clamp(16px,2.3vh,26px) 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .n{font-family:'Neue Machina',sans-serif;font-size:clamp(1.3rem,3vw,2rem);color:var(--muted)}
.step .nm{font-family:'Neue Machina',sans-serif;font-weight:800;font-size:clamp(1.1rem,2.3vw,1.55rem)}
.step .ds{color:#33322a}

/* services (What we do) — single 'what we do', no business impact */
.svc{padding:clamp(28px,4.4vh,50px) 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 2.4rem}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc-l{display:flex;flex-direction:column}
.svc .n{font-family:'Neue Machina',sans-serif;font-size:clamp(1.1rem,2.2vw,1.5rem);color:var(--muted);margin-bottom:.5rem}
.svc h3{font-family:'Neue Machina',sans-serif;font-weight:800;font-size:clamp(1.4rem,3vw,2rem);line-height:1.02}
.svc .slead{font-family:'Roboto',serif;font-style:italic;font-size:clamp(1.02rem,1.8vw,1.25rem);color:#33322a;margin-top:.7rem;max-width:34ch}
.svc ul{list-style:none;align-self:center}
.svc li{padding:.34rem 0;font-size:.98rem;color:#2c2b22;border-bottom:1px solid rgba(23,22,15,.07)}

/* team (photos) */
.team{margin-top:clamp(28px,5vh,56px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,42px)}
.member .photo{aspect-ratio:3/4;background:var(--panel);border:1px solid var(--line);overflow:hidden;margin-bottom:1.1rem}
.member .photo img{width:100%;height:100%;object-fit:cover}
.member h3{font-family:'Neue Machina',sans-serif;font-weight:800;font-size:1.2rem;line-height:1.1}
.member .role{font-family:'Clash Grotesk',sans-serif;font-weight:500;font-size:.8rem;letter-spacing:.05em;color:var(--muted);margin:.35rem 0 .9rem}
.member p{font-size:.93rem;color:#3a392f;line-height:1.55}

/* projects grid: 4:3 landscape, caption under */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,30px);padding:clamp(28px,5vh,60px) 0 clamp(50px,8vh,100px)}
.tile{display:block}
.tile .frame{aspect-ratio:4/3;overflow:hidden;background:var(--panel);display:grid;place-items:center}
.tile .frame img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tile:hover .frame img{transform:scale(1.04)}
.tile .frame.ph span{font-family:'Clash Grotesk',sans-serif;font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#a5a291}
.tile .tcap{margin-top:.85rem;font-family:'Neue Machina',sans-serif;font-weight:800;font-size:clamp(1rem,1.7vw,1.28rem);color:var(--ink)}

/* case page — заходное фото в родной пропорции (без кропа) */
.case-hero{display:flex;justify-content:center;background:var(--cream);padding:clamp(14px,3vw,40px)}
.case-hero img{max-height:88svh;width:auto;max-width:100%;object-fit:contain;background:var(--panel)}
.case-intro{padding:clamp(30px,5vh,60px) 0 clamp(18px,3vh,32px)}
.case-feature{margin:clamp(14px,3vh,40px) 0}
.case-feature img{width:100%;height:auto;display:block;background:var(--panel)}
.case-name{font-family:'Neue Machina',sans-serif;font-weight:800;font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.05}
.case-sub{margin-top:.7rem;font-family:'Roboto',serif;font-style:italic;font-size:clamp(1.02rem,1.8vw,1.25rem);color:#33322a;max-width:44ch}
/* galleries — родной размер фото */
.gal{padding-bottom:clamp(40px,7vh,90px)}
.gal img,.gal video{display:block;background:var(--panel)}
.gal-stack{display:flex;flex-direction:column;gap:clamp(16px,3vh,40px)}
.gal-stack img,.gal-stack video{width:100%;height:auto}
.gal-solo img,.gal-solo video{width:100%;height:auto}
.gal-masonry{column-count:2;column-gap:clamp(14px,2vw,28px)}
.gal-masonry img{width:100%;height:auto;margin:0 0 clamp(14px,2vw,28px);break-inside:avoid}
.gal-grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px)}
.gal-grid2 img{width:100%;height:auto}
.video-ph{aspect-ratio:16/9;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;margin-bottom:clamp(16px,3vh,40px);font-family:'Clash Grotesk',sans-serif;font-weight:500;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#a5a291}
.backlink{display:inline-block;margin-top:1.4rem;font-family:'Clash Grotesk',sans-serif;font-weight:500;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:2px}
.backlink:hover{opacity:.6}
/* projects — masonry со сдвигами (вариант 5) */
.pv5{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,44px);align-items:start}
.pv5 .col{display:flex;flex-direction:column;gap:clamp(26px,4.5vh,64px)}
.pv5 .col2{margin-top:clamp(40px,10vh,130px)}
.pv5 .col1 .tile:nth-child(2){margin-left:clamp(0px,4vw,56px)}
.pv5 .col2 .tile:nth-child(3){margin-right:clamp(0px,3vw,44px)}
.pv5 .tile .ph{overflow:hidden;background:var(--panel)}
.pv5 .tile img{width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pv5 .tile:hover img{transform:scale(1.04)}
.pv5 .cap{margin-top:.75rem;font-family:'Neue Machina',sans-serif;font-weight:800;font-size:clamp(1rem,1.7vw,1.28rem);color:var(--ink)}
.pv5 .col2 .tile.reveal{transition-delay:.08s}

@media(max-width:820px){
  .team{grid-template-columns:1fr;gap:32px}
  .svc{grid-template-columns:1fr;gap:.7rem}
  .step{grid-template-columns:52px 1fr;gap:.3rem 1rem}.step .ds{grid-column:1/-1}
  .pgrid{grid-template-columns:1fr}
  .pv5{grid-template-columns:1fr}.pv5 .col2{margin-top:0}.pv5 .col1 .tile,.pv5 .col2 .tile{margin:0}
  .gal-masonry{column-count:1}
}