/* Anisimov Media — static copy of anisimov.media
   Base type: Clash Display. Palette lifted from the original build. */

@font-face{font-family:Clash;src:url(../fonts/clash-200.woff) format("woff");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:Clash;src:url(../fonts/clash-300.woff) format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Clash;src:url(../fonts/clash-400.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Clash;src:url(../fonts/clash-500.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Clash;src:url(../fonts/clash-600.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Clash;src:url(../fonts/clash-700.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}

/* Clash Display carries no Cyrillic, so Russian text used to drop to a generic
   system face. Unbounded steps in for it: a wide geometric grotesque with a
   tall x-height and blunt terminals, the closest Cyrillic match to Clash that
   is free to use. Variable, 200-900. Three subsets: Latin (letters, digits,
   punctuation), Cyrillic, and a tiny extra file for the ruble sign and the few
   Latin letters Clash does not have. */
@font-face{
  font-family:Unbounded;src:url(../fonts/unbounded-latin.woff2) format("woff2");
  font-weight:200 900;font-style:normal;font-display:swap;
  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:Unbounded;src:url(../fonts/unbounded-cyrillic.woff2) format("woff2");
  font-weight:200 900;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:Unbounded;src:url(../fonts/unbounded-latin-ext.woff2) format("woff2");
  font-weight:200 900;font-style:normal;font-display:swap;
  unicode-range:U+010D,U+0161,U+20BD,U+2713,U+2715;
}

:root{
  --base:#151515;
  --base2:#1d1d1d;
  --primary:#fc2846;
  --text:#f2e8de;
  --line:#2f2f2f;
  --pad:16px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--base);color:var(--text);
  font-family:Clash,Unbounded,system-ui,sans-serif;font-weight:500;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
/* Русская версия — один шрифт целиком: кириллица, цифры, латиница и знаки. */
html[lang="ru"] body{font-family:Unbounded,system-ui,sans-serif}
body.locked{overflow:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,ul,figure,menu{margin:0;padding:0}
ul,menu{list-style:none}
::selection{background:var(--primary);color:#fff}

.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.grid12{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(min-width:768px){
  :root{--pad:24px}
  .grid12{grid-template-columns:repeat(12,1fr);gap:16px}
}

/* ---------- shared bits ---------- */
.kicker{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:color-mix(in srgb,var(--text) 45%,transparent);font-weight:500;
}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid var(--primary);color:var(--primary);border-radius:999px;
  padding:14px 30px;font-size:18px;font-weight:600;letter-spacing:.02em;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
  cursor:pointer;
}
.pill:hover{background:var(--primary);color:var(--base)}
.pill:active{transform:scale(.97)}

/* letter-by-letter hover effect, same trick as the original menu */
.letters{position:relative;display:block;width:max-content;overflow:hidden;
  vertical-align:top;line-height:1;height:1em}
.letters .row1,.letters .row2{display:block;line-height:1;height:1em;white-space:nowrap}
.letters .row1 span,.letters .row2 span{display:inline-block}
.letters .row2{position:absolute;left:0;bottom:0;transition:transform .42s var(--ease)}
.letters:hover .row2{transform:translateY(-100%)}

/* ---------- header ---------- */
.hdr{
  position:fixed;top:0;left:0;width:100%;z-index:80;
  padding:16px var(--pad);pointer-events:none;
}
/* The header floats over the page with no panel of its own, so a soft scrim
   keeps the wordmark readable when a form field or a heading slides underneath.
   It fades out below, which leaves the header looking unboxed. */
.hdr::before{
  content:"";position:absolute;left:0;right:0;top:0;height:250%;
  background:linear-gradient(to bottom,var(--base) 0%,var(--base) 38%,rgba(21,21,21,0) 100%);
  z-index:-1;pointer-events:none;
}
.hdr .inner{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:12px}
.hdr a,.hdr button{pointer-events:auto}
.logo{font-size:20px;font-weight:700;color:var(--primary);text-transform:lowercase;letter-spacing:-.01em}
.menu-btn{justify-self:center;font-size:18px;font-weight:600;padding:0;line-height:1;white-space:nowrap}

/* ---------- menu overlay ---------- */
.ov{
  position:fixed;inset:0;z-index:75;background:var(--base2);
  transform:translateY(100%);transition:transform .68s var(--ease);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:0 var(--pad) 24px;overflow:auto;
}
.ov.open{transform:none}
.ov-top{padding:92px 0 0}
.ov nav{margin-left:8.333%}
@media(max-width:767px){.ov nav{margin-left:0}}
.ov nav a{
  display:block;font-size:clamp(44px,11vw,96px);font-weight:700;line-height:1.02;
  text-transform:lowercase;letter-spacing:-.02em;
}
.ov .reel{margin-top:28px;display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.ov .reel figure{grid-column:1/4;aspect-ratio:16/9;border-radius:10px;overflow:hidden}
.ov .reel video{width:100%;height:100%;object-fit:cover}
@media(max-width:767px){.ov .reel figure{grid-column:1/13;max-width:420px}}
.ov-links{margin-top:28px;display:flex;gap:0;border-top:2px solid var(--line);margin-left:8.333%}
@media(max-width:767px){.ov-links{margin-left:0}}
.ov-links li{flex:1;text-align:center;border-left:2px solid var(--line)}
.ov-links li:first-child{border-left:0}
.ov-links a{
  display:block;padding:14px 6px;font-size:24px;font-weight:600;text-transform:lowercase;
  transition:color .3s;
}
.ov-links a:hover{color:var(--primary)}
@media(max-width:767px){.ov-links a{font-size:16px;padding:10px 4px}}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:16vh;padding-bottom:24px}
@media(min-width:768px){.hero{padding-top:26vh}}
.hero .lead{
  grid-column:1/5;font-size:13px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;line-height:1.1;text-align:center;
}
@media(min-width:768px){
  .hero .lead{grid-column:1/5;text-align:left;font-size:15px}
  .hero .lead br{display:block}
}
.socials{grid-column:1/5;display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:10px}
@media(min-width:768px){
  .hero .socials{grid-column:5/13;grid-row:1;flex-direction:row;justify-content:space-between;
    align-items:flex-start;margin-top:0;padding-top:2px}
}
.hero .socials a{font-size:18px;font-weight:600;line-height:1.15;transition:color .3s}
@media(min-width:768px){.hero .socials a{font-size:20px}}
.hero .socials a:hover{color:var(--primary)}
.hero .wordmark{grid-column:1/-1;color:var(--primary);width:100%;height:auto;margin-top:10px}
.card{
  padding:12% 12% 30%;border:1px solid rgba(242,232,222,.14);border-radius:12px;
  backdrop-filter:blur(6px);background:rgba(255,255,255,.03);
}
.card img{width:100%;height:auto;border-radius:8px}
.card figcaption{margin-top:8px}
.card figcaption a{font-size:14px;font-weight:700;transition:color .3s}
.card figcaption a:hover{color:var(--primary)}

/* ---------- manifesto ---------- */
.manifesto{padding:64px 0 96px}
.card-col{grid-column:2/5;align-self:center}
.txt-col{grid-column:2/5;padding:56px 0 64px}
/* На телефоне грид схлопывается в четыре колонки, а блоки остаются в
   колонках 2–5: отступ съезжает на четверть экрана. На узком экране
   карточка и текст занимают всю ширину, как и задумано. */
@media(max-width:767px){
  .card-col{grid-column:1/-1}
  .txt-col{grid-column:1/-1;padding:40px 0 56px}
}
@media(min-width:768px){
  .manifesto{padding:96px 0 120px}
  .card-col{grid-column:3/6}
  .txt-col{grid-column:7/12;padding:32px 0}
}
.manifesto .txt{font-size:20px;line-height:1.18;font-weight:500}
@media(min-width:768px){.manifesto .txt{font-size:24px}}
.manifesto .txt b{font-weight:500;font-size:.85em}
.manifesto .txt + .txt{margin-top:24px}
.manifesto .txt{opacity:.9}
/* ---------- credits ---------- */
.credits{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);display:grid;gap:18px}
@media(min-width:768px){.credits{grid-template-columns:repeat(2,1fr);gap:24px 36px}}
.cred h4{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--primary);margin-bottom:7px}
.cred p{font-size:15px;line-height:1.5;opacity:.78}

/* ---------- what i shoot ---------- */
.svc{padding-top:100px}
.svc-list{margin-top:40px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
@media(min-width:768px){.svc-list{grid-template-columns:repeat(2,1fr)}}
.svc-item{background:var(--base);padding:26px 28px 28px}
.svc-item h4{font-size:19px;font-weight:700;line-height:1.15;margin-bottom:9px}
.svc-item p{font-size:15px;line-height:1.5;opacity:.72}
.svc-note{margin-top:20px;font-size:14px;line-height:1.5;opacity:.58;max-width:62ch}
@media(max-width:767px){.svc-item{padding:22px 20px 24px}}


/* ---------- logo marquee ---------- */
.marquee{overflow:hidden;padding-bottom:32px}
/* One optical height for every logo. The old fixed 128px square shrank wide
   marks (a 256x39 source) to a 20px sliver that read as a broken image. */
.marquee .track{display:flex;align-items:center;width:max-content;height:46px;animation:slide 34s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee img{height:30px;width:auto;max-width:190px;object-fit:contain;margin:0 18px;opacity:.45;transition:opacity .4s}
.marquee img:hover{opacity:1}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- play reel ---------- */
.reel-sec{position:relative;height:185vh}
.reel-sticky{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.reel-sticky{--scale0:.62;--scale1:1}
.reel-sticky video{
  width:min(72%,1000px);max-height:86svh;aspect-ratio:16/9;border-radius:12px;
  object-fit:contain;background:#000;transform:scale(var(--scale0));opacity:0;
  will-change:transform,opacity;
}
@media(max-width:767px){
  /* A 185vh section is ~1700px of scrolling on a phone to reveal one clip, and a
     16:9 frame boxed inside it leaves the screen mostly empty. Shorten the run
     and let the reel go full-bleed so the width is actually used. */
  .reel-sec{height:120vh}
  .reel-sticky{--scale0:.92;grid-template-rows:auto auto;align-content:center}
  .reel-sticky video{grid-row:1;width:100%;max-height:60svh;border-radius:0}
}
.reel-sticky .caption{
  position:absolute;inset:auto 0 auto 0;top:50%;transform:translateY(-50%);
  display:flex;justify-content:space-between;padding:0 var(--pad);pointer-events:none;z-index:3;
  font-size:clamp(34px,6.4vw,92px);font-weight:700;color:var(--primary);
  text-transform:uppercase;line-height:1;
  transition:opacity .2s linear;opacity:1;
}
.reel-hit{position:absolute;inset:0;z-index:2;cursor:pointer}
/* This has to come after the base .caption rule: a media query adds no
   specificity, so a mobile override placed earlier loses to it and the caption
   stays absolutely centred over the frame instead of sitting under the reel. */
@media(max-width:767px){
  .reel-sticky .caption{grid-row:2;position:static;transform:none;justify-content:center;gap:14px;
    padding:22px 0 26px;font-size:10vw;z-index:3}
  /* Unbounded is far wider than the Clash it stands in for, and "Смотреть ролик"
     at 10vw runs past the edge of a phone. Measured: the phrase is about 12em
     wide, so 8vw is the ceiling — 7.5vw keeps a margin. */
  html[lang="ru"] .reel-sticky .caption{font-size:7.5vw;gap:10px}
}

/* ---------- showcase ---------- */
.block{padding:60px 0 40px}
.block h2{
  font-size:clamp(34px,7.6vw,104px);font-weight:700;line-height:.98;
  text-transform:capitalize;letter-spacing:-.02em;
}
.block .more{display:grid;place-items:center;margin-top:40px}
.vgrid{display:grid;gap:16px;margin-top:40px}
@media(min-width:768px){
  .vgrid{grid-template-columns:repeat(12,1fr)}
  .vgrid figure:nth-child(1){grid-column:1/7}
  .vgrid figure:nth-child(2){grid-column:4/10}
  .vgrid figure:nth-child(3){grid-column:7/13}
  .vgrid figure:nth-child(4){grid-column:7/13}
}
/* Footage is 16:9; a 4:3 box left black bars top and bottom that read as a
   failed poster. Matching the box to the source kills the dead space. */
.vgrid video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:#000}
.vgrid figure{margin:-6px 0 24px}

.pmarq{margin-top:40px;display:grid;gap:16px;overflow:hidden}
.pmarq .row{display:flex;width:max-content;gap:16px;will-change:transform}
/* The marquee crops every frame to a 3:2 landscape box. Landscape shots fill it
   edge to edge, but a 2:3 portrait loses its top and bottom — heads and feet —
   under a centred crop. Anchoring higher keeps faces in frame. */
.pmarq .row img{width:min(600px,72vw);height:min(400px,54vw);object-fit:cover;object-position:50% 28%;border-radius:8px;flex:none}
.pmarq .row.slow{animation:slide 40s linear infinite}
.pmarq .row.rev{animation:slideBack 46s linear infinite}
@keyframes slideBack{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(max-width:767px){
  .pmarq .row img{width:78vw;height:52vw}
}

/* ---------- contact ---------- */
.contact{padding:120px 0 80px}
.contact h2{
  font-size:clamp(34px,7.6vw,104px);font-weight:700;line-height:1.02;text-align:center;
}
.contact .pair{margin-top:56px;align-items:start}
@media(min-width:768px){
  .contact .card-col{grid-column:3/6;align-self:start}
  .contact .txt-col{grid-column:8/11;padding:24px 0}
}
.contact .txt{font-size:20px;font-weight:600;line-height:1.2}
.contact .txt + .txt{margin-top:20px}
.contact .pill{margin-top:24px}
@media(min-width:768px){
  .contact .txt{font-size:24px}
}

/* ---------- footer ---------- */
.foot{background:var(--base2);border-radius:12px 12px 0 0;padding:64px 0 0;position:relative;overflow:hidden}
@media(min-width:768px){.foot{width:calc(100% - 32px);margin:0 16px;border-radius:12px 12px 0 0}}
.foot-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(max-width:767px){
  .foot-grid .g{display:grid;grid-template-columns:1fr;gap:28px}
}
@media(min-width:768px){
  .foot-grid{display:block}
  .foot-grid .g{display:grid;grid-template-columns:repeat(12,1fr);gap:56px 16px}
  .foot-grid .sitemap{grid-column:1/5}
  .foot-grid .ig{grid-column:1/5}
  .foot-grid .tg{grid-column:5/9}
  .foot-grid .mail{grid-column:9/13}
}
.foot h4{font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:color-mix(in srgb,var(--text) 60%,transparent);margin-bottom:10px}
.foot li a{display:inline-block;font-size:15px;font-weight:700;text-transform:lowercase;transition:color .3s;padding:2px 0;overflow-wrap:anywhere}
@media(min-width:768px){.foot li a{font-size:20px}}
.foot li a:hover{color:var(--primary)}
.foot .wordmark{margin-top:72px;margin-bottom:-2%;width:100%;color:var(--primary)}

/* The hosting platform drops a "Made with Spru" badge into the page at
   runtime, inside a closed shadow root. The host element itself is in the
   light DOM, so hiding that host is enough to keep it off the page. */
#spru-pages-badge-host{display:none !important}

/* ---------- inquiry form ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.brief{
  margin-top:64px;padding:56px 0 0;border-top:2px solid var(--line);
  scroll-margin-top:80px;
}
.brief h3{
  font-size:clamp(26px,4vw,44px);font-weight:700;line-height:1.05;margin-top:0;
}
.brief-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:32px}
@media(min-width:768px){
  .brief-grid{grid-template-columns:repeat(2,1fr);gap:24px 32px}
  .brief-grid .full{grid-column:1/-1}
}
.field label{
  display:block;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;margin-bottom:8px;
  color:color-mix(in srgb,var(--text) 55%,transparent);
}
.field input,.field select,.field textarea{
  width:100%;padding:12px 0;background:transparent;color:var(--text);
  border:0;border-bottom:2px solid var(--line);border-radius:0;
  font:inherit;font-size:17px;transition:border-color .3s,color .3s;
  appearance:none;-webkit-appearance:none;
}
.field textarea{min-height:96px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--primary);
}
.field input::placeholder,.field textarea::placeholder{
  color:color-mix(in srgb,var(--text) 30%,transparent);
}
.field select{
  cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text) 50%),
                   linear-gradient(135deg,var(--text) 50%,transparent 50%);
  background-position:calc(100% - 14px) calc(50% + 2px),calc(100% - 9px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field select option{background:var(--base2);color:var(--text)}
.brief .pill{margin-top:32px}
.brief-note{
  margin-top:20px;font-size:13px;line-height:1.6;
  color:color-mix(in srgb,var(--text) 45%,transparent);
}
.brief-note a{text-decoration:underline;text-underline-offset:3px}
.brief-status{margin-top:20px;font-size:15px;font-weight:600;min-height:22px}
.brief-status.ok{color:var(--primary)}
.brief-status.err{color:var(--text)}
.brief-done{display:none}

/* ---------- language switch ---------- */
.lang{
  display:flex;gap:8px;align-items:center;justify-content:center;
  margin:32px 8.333% 0;padding-top:20px;border-top:2px solid var(--line);
}
.lang a{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb,var(--text) 45%,transparent);transition:color .3s;
}
.lang a:hover{color:var(--primary)}
.lang a[aria-current="true"]{color:var(--primary)}
.lang .sep{color:color-mix(in srgb,var(--text) 25%,transparent)}

/* ---------- page titles ---------- */
.pagehead{padding:110px 0 24px}
.pagehead h1{font-size:clamp(40px,9vw,116px);font-weight:700;text-align:center;line-height:1}
.pagehead-sub{
  margin-top:18px;text-align:center;font-size:15px;line-height:1.5;font-weight:500;
  color:color-mix(in srgb,var(--text) 55%,transparent);max-width:44ch;margin-left:auto;margin-right:auto;
}

/* ---------- videos page ---------- */
.vstrip{margin-top:24px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab}
.vstrip::-webkit-scrollbar{display:none}
.vstrip.drag{cursor:grabbing;scroll-behavior:auto}
.vstrip .line{display:flex;gap:16px;padding:0 16px 4px;width:max-content}
.vstrip .line + .line{padding-top:0}
.vstrip video{
  width:min(646px,78vw);height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;flex:none;background:#000;
}
@media(max-width:767px){
  .vstrip{display:none}
  .vstack{display:grid;gap:16px;padding:0 16px 48px}
  .vstack video{
    width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:#000;
  }
}
@media(min-width:768px){.vstack{display:none}}

/* ---------- videos page: player + index of works ---------- */
.stage{margin-top:24px}
.stage-frame{
  position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;
  border:1px solid var(--line);border-radius:14px;
}
.stage-frame > *{position:absolute;inset:0;width:100%;height:100%}
.stage-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.stage-frame video{object-fit:cover}
.stage-frame [hidden]{display:none!important}
.stage-meta{
  display:flex;gap:14px 24px;align-items:baseline;justify-content:space-between;flex-wrap:wrap;
  padding:20px 2px 0;
}
.stage-title{font-size:clamp(21px,3.2vw,34px);font-weight:700;line-height:1.06;letter-spacing:-.01em}
.stage-note{margin-top:7px;font-size:14px;font-weight:500;color:color-mix(in srgb,var(--text) 55%,transparent)}
.stage-link{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;white-space:nowrap;
  color:var(--primary);border-bottom:1px solid color-mix(in srgb,var(--primary) 45%,transparent);
  padding-bottom:4px;transition:color .3s var(--ease),border-color .3s var(--ease);
}
.stage-link:hover{color:var(--text);border-color:var(--text)}
.strip-kicker{margin-top:44px}

/* cards in the index strip: a click swaps the player */
.vcard{position:relative;flex:none;display:block;padding:0;line-height:0;background:#000;border-radius:12px;overflow:hidden}
.vcard video,.vcard img{
  width:min(646px,78vw);height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:#000;display:block;
}
.vcard::after{
  content:"";position:absolute;inset:0;border-radius:12px;border:1px solid transparent;pointer-events:none;
  transition:border-color .3s var(--ease);
}
.vcard:hover::after,.vcard:focus-visible::after{border-color:color-mix(in srgb,var(--primary) 65%,transparent)}
.vcard.is-active::after{border-color:var(--primary)}
.vcard-tag{
  position:absolute;left:10px;top:10px;z-index:2;line-height:1;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  background:var(--primary);color:#fff;padding:6px 10px;border-radius:999px;
}
@media(max-width:767px){
  .vstack .vcard video,.vstack .vcard img{width:100%}
}

/* ---------- photos page ---------- */
.masonry{margin-top:24px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:768px){.masonry{grid-template-columns:repeat(4,1fr);margin-top:64px}}
.masonry figure{margin:0}
.masonry img{width:100%;height:auto;border-radius:10px;background:var(--base2)}
.masonry figcaption{margin-top:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--text) 45%,transparent)}

.reel-modal{
  position:fixed;inset:0;z-index:90;background:var(--base);display:grid;place-items:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.reel-modal.open{opacity:1;pointer-events:auto}
.reel-modal figure{width:min(1200px,100%)}
.reel-modal video{width:100%;max-height:82svh;border-radius:12px;background:#000}
.reel-modal button{
  position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:10px;
  background:var(--base2);font-size:18px;font-weight:700;
}

@media (prefers-reduced-motion:reduce){
  .marquee .track,.pmarq .row{animation:none}
  .letters .row2{transition:none}
}

/* Touch targets. On a phone the menu button was 18px tall and the footer and
   language links under 30px — well below the ~44px a thumb lands on reliably.
   Padding grows the hit area and leaves the type looking exactly as before. */
@media(max-width:767px){
  .menu-btn{position:relative}
  /* The label is a two-row letter animation clipped to a single line, so making
     the box taller would expose the spare row underneath. Reach the 44px target
     with an invisible overlay instead of touching the button's own height. */
  .menu-btn::after{content:"";position:absolute;left:-10px;right:-10px;top:-13px;bottom:-13px}
  .socials a,.card figcaption a{padding:11px 0;display:inline-flex;align-items:center}
  .foot li a{padding:10px 0;display:inline-flex;align-items:center;min-height:44px}
  .lang{gap:16px}
  .lang a{padding:14px 3px;display:inline-flex;align-items:center;min-height:44px}
}

/* Clash Display tops out at 700, so asking for more leaves the Latin headings
   exactly as they were — but it moves Cyrillic onto Unbounded 800, which is
   what it takes for a Russian headline to carry the same visual punch as its
   Clash counterpart. */
.reel-sticky .caption,.block h2,.contact h2,.pagehead h1,.block-h{font-weight:800}
.masonry figure.more-photo{display:none}
.masonry.show-all figure.more-photo{display:block}
.gallery-more{display:grid;place-items:center;margin-top:48px}


/* ---------- mobile fixes ---------- */
/* Three pills of different widths in a ragged row, the longest one (the email
   address) wider than the phone. One wrapping row on desktop, a full-width
   stack below 560px. */
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.cta .pill{margin-top:0}
@media(max-width:560px){
  .cta{flex-direction:column;align-items:stretch}
  .cta .pill{width:100%;font-size:16px;padding:14px 18px}
}




/* ---------- packages ---------- */
/* A price list the client can judge on their own: the ladder starts at the
   smallest real product and climbs to a full crew, so the cheapest tier never
   looks like a discount of the largest one. */
.packs{padding-top:100px}
.packs-lead{margin-top:20px;font-size:16px;line-height:1.55;opacity:.72;max-width:62ch}
.packs-list{margin-top:40px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
@media(min-width:768px){.packs-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1280px){.packs-list{grid-template-columns:repeat(4,1fr)}}
.pkg{background:var(--base);padding:24px 22px 26px;display:flex;flex-direction:column;gap:11px}
.pkg-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pkg h4{font-size:17px;font-weight:700;line-height:1.2;margin:0}
.pkg-price{font-size:17px;font-weight:800;color:var(--primary);white-space:nowrap}
.pkg p{font-size:14px;line-height:1.5;opacity:.72;margin:0}
.pkg-meta{font-size:11px;letter-spacing:.07em;text-transform:uppercase;opacity:.42;margin-top:auto;padding-top:12px}
/* русские названия длиннее — цена всегда под заголовком, иначе карточки рвутся */
html[lang="ru"] .pkg-top{flex-direction:column;align-items:flex-start;gap:4px}
@media(max-width:520px){
  .pkg-top{flex-direction:column;align-items:flex-start;gap:4px}
}
.packs-note{margin-top:20px;font-size:14px;line-height:1.55;opacity:.58;max-width:72ch}

/* monthly package — a retainer, not a one-off price tier */
.monthly{margin-top:64px;border:1px solid var(--line);border-radius:16px;background:var(--base2);padding:clamp(22px,4vw,48px)}
.monthly-head{display:grid;gap:22px;align-items:start}
@media(min-width:900px){.monthly-head{grid-template-columns:1fr auto;gap:48px}}
.monthly-kicker{margin:0 0 10px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--primary);font-weight:700}
.monthly-head h3{margin:0;font-size:clamp(26px,4.2vw,44px);font-weight:800;line-height:1.04;letter-spacing:-.02em;max-width:19ch}
.monthly-lead{margin:14px 0 0;font-size:16px;line-height:1.55;opacity:.72;max-width:56ch}
.monthly-price{display:flex;flex-direction:column;gap:4px;white-space:nowrap}
.monthly-amount{font-size:clamp(26px,3.6vw,42px);font-weight:900;color:var(--primary);letter-spacing:-.02em;line-height:1}
.monthly-per{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.45}
@media(min-width:900px){.monthly-price{text-align:right;align-items:flex-end}}
.monthly-grid{margin-top:34px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
@media(min-width:700px){.monthly-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.monthly-grid{grid-template-columns:repeat(4,1fr)}}
.monthly-card{background:var(--base2);padding:22px 20px 24px}
.monthly-card h4{margin:0 0 13px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.55;font-weight:700}
.monthly-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.monthly-card li{font-size:14px;line-height:1.45;opacity:.78;padding-left:16px;position:relative}
.monthly-card li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--primary)}
.monthly-foot{margin-top:28px}
.monthly-foot .pill{font-size:16px;padding:12px 26px}
@media(max-width:520px){
  .monthly-foot .pill{width:100%}
}

/* the panel that replaces the form once the brief is sent */
.brief-done{display:none}
.brief-done h3{font-size:26px;font-weight:900;line-height:1.1;margin-bottom:12px}
.brief-done p{font-size:16px;line-height:1.55;opacity:.82;max-width:52ch}
.brief-done-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.brief-done-links .pill{margin-top:0}
@media(max-width:560px){
  .brief-done-links{flex-direction:column;align-items:stretch}
  .brief-done-links .pill{width:100%;text-align:center}
}

/* ---------- длинный адрес в круглой кнопке ---------- */
/* Пилюля с радиусом 999px «съедает» длинный текст: буквы вылезают за изгиб
   на полпути к краю. Адрес набираем на ступень мельче, кнопка-действие
   остаётся крупной, радиус остаётся круглым. */
.pill-mail{border-radius:14px;max-width:100%;overflow-wrap:anywhere}
@media(max-width:560px){
  .cta .pill-mail,.brief-done-links .pill-mail{font-size:15px;padding:13px 18px;border-radius:12px}
}