@font-face { font-family:Oswald; font-style:normal; font-weight:200 700; font-display:swap; src:url('assets/fonts/oswald-cyrillic.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:Oswald; font-style:normal; font-weight:200 700; font-display:swap; src:url('assets/fonts/oswald-latin.woff2') format('woff2'); 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:Manrope; font-style:normal; font-weight:200 800; font-display:swap; src:url('assets/fonts/manrope-cyrillic.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:Manrope; font-style:normal; font-weight:200 800; font-display:swap; src:url('assets/fonts/manrope-latin.woff2') format('woff2'); 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; }
:root { --ink:#11110f; --paper:#f3f1eb; --acid:#dfff1f; --orange:#fa4a22; --blue:#2354e8; --muted:#999994; --line:rgba(243,241,235,.22); --display:Oswald, 'Arial Narrow', sans-serif; --sans:Manrope, Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; font-family:var(--sans); } a { color:inherit; text-decoration:none; } .grain { position:fixed; inset:0; pointer-events:none; opacity:.2; z-index:4; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.site-header { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; padding:1.65rem clamp(1.25rem, 4vw, 5rem); font-size:.8rem; font-weight:700; letter-spacing:-.02em; } .wordmark { font-family:var(--display); font-size:1.8rem; letter-spacing:-.1em; line-height:.8; border:2px solid currentColor; padding:.12em .17em .18em .08em; } nav { display:flex; gap:2.25rem; margin-left:auto; margin-right:clamp(2rem,7vw,10rem); } nav a, .header-link { transition:opacity .2s ease; } nav a:hover, .header-link:hover { opacity:.55; } .header-link { display:flex; align-items:center; gap:.55rem; } .header-link span { font-size:1.35rem; line-height:0; }
.home-page { background:var(--ink); color:var(--paper); overflow-x:hidden; } .hero { min-height:calc(100vh - 5.5rem); display:grid; grid-template-columns:minmax(0,1.02fr) minmax(370px,.98fr); align-items:center; gap:1rem; padding:1rem clamp(1.25rem, 4vw, 5rem) 4.5rem; position:relative; } .hero-copy { position:relative; z-index:2; } .eyebrow, .section-index { margin:0 0 1rem; font-size:.67rem; font-weight:800; letter-spacing:.12em; line-height:1.35; text-transform:uppercase; } .hero h1 { font:700 clamp(4.5rem, 11vw, 11.5rem)/.83 var(--display); letter-spacing:-.075em; margin:.25rem 0 1.7rem; max-width:7ch; } .hero h1 .line { overflow:hidden; display:block; } .hero h1 .line span { display:block; animation:title-in .85s cubic-bezier(.16,1,.3,1) both; } .hero h1 .line:nth-child(2) span { animation-delay:.1s; } .hero h1 .line:nth-child(3) span { animation-delay:.2s; } .intro { max-width:27rem; color:#d1d0cb; font-size:clamp(1rem,1.3vw,1.22rem); line-height:1.5; margin:0 0 1.8rem; } .button { display:inline-flex; align-items:center; gap:2.2rem; padding:1.05rem 1.25rem; font-weight:800; font-size:.92rem; transition:transform .2s ease, background .2s ease; } .button:hover { transform:translate(-.2rem,-.2rem); } .button-acid { background:var(--acid); color:var(--ink); box-shadow:.25rem .25rem 0 var(--orange); } .button span { font-size:1.4rem; }
.hero-art { position:relative; min-height:36rem; margin-right:clamp(-2rem,-4vw,-.5rem); transform:translate(var(--move-x, 0),var(--move-y,0)); transition:transform .35s ease-out; } .hero-art img { position:absolute; width:88%; right:4%; top:10%; z-index:1; filter:drop-shadow(1.4rem 1.5rem 0 rgba(0,0,0,.3)); transform:rotate(-4deg); } .sticker, .poster, .scribble { position:absolute; z-index:2; font-weight:800; line-height:.98; } .sticker { top:3%; left:7%; width:9.7rem; height:9.7rem; background:var(--acid); color:var(--ink); border-radius:48% 45% 50% 42%; padding:2rem 1rem; transform:rotate(-10deg); text-align:center; font-family:var(--display); font-size:1.2rem; } .poster { padding:.85rem .6rem; font-family:var(--display); font-size:1.4rem; transform:rotate(-8deg); } .poster-left { left:0; top:38%; color:var(--ink); background:var(--paper); } .poster-right { right:0; top:16%; color:var(--ink); background:var(--orange); transform:rotate(5deg); } .scribble { right:3%; bottom:3%; background:var(--blue); padding:1rem .7rem; transform:rotate(-8deg); font-family:var(--display); font-size:1.35rem; } .tape { position:absolute; width:8rem; height:1.35rem; background:rgba(227,224,202,.72); z-index:3; } .tape-one { left:37%; top:11%; transform:rotate(8deg); } .tape-two { right:8%; top:55%; background:rgba(35,84,232,.88); transform:rotate(-22deg); } .scroll-cue { position:absolute; bottom:1.45rem; left:50%; display:grid; justify-items:center; gap:.35rem; font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; } .scroll-cue i { display:grid; place-content:center; width:2.8rem; height:2.8rem; border:1px solid var(--line); border-radius:50%; font-style:normal; font-size:1.2rem; }
.service-section, .approach-section, .contact-section { padding:clamp(5rem,10vw,10rem) clamp(1.25rem, 7vw, 10rem); } .service-section { background:var(--paper); color:var(--ink); } .section-index { color:inherit; opacity:.66; } h2 { font:600 clamp(2.6rem,5vw,6rem)/.98 var(--display); letter-spacing:-.045em; margin:0; } .services-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(17,17,15,.28); margin-top:4.5rem; } .service-card { min-height:18rem; padding:1.2rem 1.5rem 1rem 0; border-right:1px solid rgba(17,17,15,.28); display:flex; flex-direction:column; } .service-card + .service-card { padding-left:1.5rem; } .service-card:last-child { border-right:0; } .service-card span { font-size:.72rem; font-weight:800; } .service-card h3 { margin:auto 0 .5rem; font:500 clamp(1.8rem,2.5vw,3rem)/1 var(--display); } .service-card p { max-width:17rem; margin:0; font-size:.88rem; line-height:1.55; color:#595954; }
.approach-section { background:var(--orange); color:var(--ink); } .approach-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; margin-top:2rem; } .approach-layout em, .works-intro em { font-style:normal; color:var(--paper); } .approach-layout ol { list-style:none; margin:0; padding:0; border-top:1px solid rgba(17,17,15,.45); } .approach-layout li { display:grid; grid-template-columns:4rem 1fr; gap:.8rem; border-bottom:1px solid rgba(17,17,15,.45); padding:1.2rem 0; font-size:1rem; line-height:1.45; } .approach-layout b { font-size:.7rem; }
.contact-section { background:var(--ink); color:var(--paper); } .contact-section h2 { max-width:13ch; } .contact-section > p:last-child { max-width:34rem; color:#cbc9c1; line-height:1.55; margin:2rem 0 0; }
footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.7rem clamp(1.25rem,4vw,5rem); color:var(--paper); background:var(--ink); border-top:1px solid var(--line); font-size:.73rem; font-weight:700; } footer .wordmark { font-size:1.1rem; }
.reveal { opacity:0; transform:translateY(1.4rem); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); } .reveal.is-visible { opacity:1; transform:none; } @keyframes title-in { from { transform:translateY(120%); } to { transform:none; } }
.works-page { background:var(--paper); color:var(--ink); } .works-page .site-header { border-bottom:1px solid rgba(17,17,15,.2); } .works-page nav a.active { text-decoration:underline; text-underline-offset:.3rem; } .works-main { padding:clamp(4rem,9vw,9rem) clamp(1.25rem,7vw,10rem) 7rem; } .works-intro { display:grid; grid-template-columns:1.25fr .75fr; gap:2rem; align-items:end; margin-bottom:clamp(4rem,9vw,8rem); } .works-intro .section-index { grid-column:1/-1; } .works-intro h1 { margin:0; font:600 clamp(4rem,8vw,9rem)/.85 var(--display); letter-spacing:-.065em; } .works-intro > p:last-child { max-width:24rem; margin:0 0 .3rem; line-height:1.55; color:#565650; } .case-list { display:grid; gap:6.5rem; } .case-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(15rem,.38fr); gap:2rem; align-items:end; } .case-card:nth-child(even) { grid-template-columns:minmax(15rem,.38fr) minmax(0,1fr); } .case-card:nth-child(even) .case-visual { order:2; } .case-visual { position:relative; height:clamp(18rem,45vw,38rem); overflow:hidden; display:grid; place-content:center; color:var(--paper); } .case-visual span { z-index:1; font:600 clamp(3rem,8vw,9rem)/.8 var(--display); letter-spacing:-.08em; } .case-visual i { position:absolute; width:48%; aspect-ratio:1; border-radius:50%; background:currentColor; mix-blend-mode:difference; transform:translate(25%,-15%); } .case-one .case-visual { background:#1b2a21; } .case-two .case-visual { background:#d0c4af; color:#142ee1; } .case-three .case-visual { background:#e23b25; } .case-card p { font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin:0 0:1rem; } .case-card h2 { font-size:clamp(3rem,5vw,6rem); } .case-card > div:last-child > span { color:#777771; font-size:.8rem; }
@media (max-width: 760px) { .site-header { padding-top:1.25rem; } nav { display:none; } .header-link { font-size:.68rem; } .hero { min-height:auto; display:block; padding-top:3.5rem; } .hero h1 { font-size:clamp(4.3rem,20vw,7rem); } .hero-art { min-height:25rem; margin:1.2rem -1rem 0; } .hero-art img { width:80%; top:7%; } .sticker { width:7rem; height:7rem; padding:1.35rem .5rem; font-size:.95rem; } .poster { font-size:1rem; } .scribble { font-size:1rem; } .services-grid, .approach-layout, .works-intro, .case-card, .case-card:nth-child(even) { display:block; } .service-card { min-height:12rem; border-right:0; border-bottom:1px solid rgba(17,17,15,.28); padding:1.2rem 0; } .service-card + .service-card { padding-left:0; } .service-card h3 { margin:1.5rem 0 .4rem; } .approach-layout ol { margin-top:3rem; } .works-intro > p:last-child { margin-top:2rem; } .case-list { gap:4.5rem; } .case-card:nth-child(even) .case-visual { order:initial; } .case-card > div:last-child { margin-top:1rem; } footer { align-items:flex-start; flex-direction:column; } .scroll-cue { display:none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } .reveal { opacity:1; transform:none; } }

/* Version 2: typography, navigation, portfolio gallery and page transition. */
html { scroll-padding-top:2rem; }
body { overflow-x:hidden; }
button { font:inherit; }
a:focus-visible, button:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
.home-page a:focus-visible, .home-page button:focus-visible { outline-color:var(--acid); }
.site-header { gap:1.5rem; padding-block:1.35rem; font-size:.92rem; letter-spacing:0; }
.site-header nav { gap:2.5rem; margin-right:clamp(2rem,6vw,8rem); }
.site-header nav a { padding-block:.4rem; }
.header-link { padding:.55rem 0; border-bottom:1px solid currentColor; }
.wordmark { display:inline-flex; align-items:baseline; border:0; padding:0; font:700 2rem/1 var(--display); letter-spacing:-.04em; white-space:nowrap; }
.wordmark-dot { color:var(--acid); font-size:1.12em; line-height:0; }
.works-page .wordmark-dot { color:var(--orange); }
.mobile-only, .menu-toggle { display:none; }
.eyebrow, .section-index { font-size:.75rem; line-height:1.4; letter-spacing:.09em; }
.hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:calc(100svh - 5.2rem); }
.hero h1 { max-width:none; font-size:clamp(6rem,9.2vw,11rem); line-height:1.02; letter-spacing:-.035em; margin-bottom:1.4rem; }
.hero h1 .line { padding-block:.04em; margin-block:-.04em; }
.intro { font-size:clamp(1rem,1.3vw,1.25rem); }
.hero-art { transform:translate(var(--move-x, 0),calc(var(--move-y, 0px) + var(--scroll-y, 0px))); }
.sticker, .poster, .scribble { font-family:var(--display); font-weight:600; letter-spacing:.015em; }
.sticker { font-size:1.4rem; }
.poster { font-size:1.55rem; }
.scribble { font-size:1.5rem; }
.button { min-height:3.65rem; font-size:1rem; }
.button-acid { box-shadow:.3rem .3rem 0 var(--orange); }
.service-section, .approach-section, .contact-section { position:relative; }
h2 { line-height:1.12; letter-spacing:-.025em; }
.service-section h2 { max-width:19ch; }
.service-card h3 { line-height:1.12; }
.service-card p { font-size:.95rem; }
.approach-layout em { font-style:normal; color:var(--ink); text-decoration:underline; text-decoration-thickness:.06em; text-underline-offset:.1em; }
.approach-layout li { font-size:1.05rem; }
.contact-section { padding-block:clamp(5rem,10vw,9rem); border-top:.6rem solid var(--orange); }
.contact-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(18rem,.55fr); gap:clamp(2rem,6vw,7rem); align-items:end; }
.contact-section h2 { max-width:none; }
.contact-section h2 em { color:var(--acid); font-style:normal; }
.contact-action { padding-bottom:.4rem; }
.contact-action p { max-width:25rem; color:#d8d7ce; font-size:1.06rem; line-height:1.55; margin:0 0 2rem; }
.contact-action .button { color:var(--ink); }
.telegram-button { gap:.85rem; }
.telegram-button span { display:grid; place-items:center; width:1.35rem; height:1.35rem; border:1px solid currentColor; border-radius:50%; font-size:.9rem; }
.works-contact { display:grid; grid-template-columns:1fr 1.1fr; gap:2rem; align-items:end; padding:clamp(4.5rem,8vw,8rem) clamp(1.25rem,7vw,10rem); background:var(--ink); color:var(--paper); }
.works-contact h2 { margin:0 0 2rem; max-width:12ch; }
.works-contact h2 em { color:var(--acid); font-style:normal; }
footer { font-size:.82rem; }
footer a:last-child { border-bottom:1px solid transparent; }
footer a:last-child:hover { border-color:currentColor; }
.reveal { opacity:1; transform:none; }
.has-js .reveal { opacity:0; transform:translateY(1.5rem); }
.has-js .reveal.is-visible { opacity:1; transform:none; }
.page-curtain { position:fixed; inset:0; z-index:100; display:grid; place-content:center; background:var(--acid); color:var(--ink); transform:translateY(101%); transition:transform .72s cubic-bezier(.78,0,.18,1); pointer-events:none; }
.page-curtain span { font:700 clamp(3rem,8vw,8rem)/1 var(--display); letter-spacing:-.035em; transform:rotate(-4deg); }
.page-curtain.is-active { transform:translateY(0); }
.transition-arrival .page-curtain { transform:translateY(0); transition:none; }
.page-curtain.is-exiting { transform:translateY(-101%); transition:transform .62s cubic-bezier(.22,1,.36,1); }
.page-curtain.is-active, .transition-arrival .page-curtain, .page-curtain.is-exiting { pointer-events:auto; }
.works-page .works-main { animation:page-arrive .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes page-arrive { from { opacity:.55; transform:translateY(2rem); } to { opacity:1; transform:none; } }

.works-intro { align-items:end; margin-bottom:clamp(3rem,7vw,6rem); }
.works-intro h1 { font-size:clamp(4rem,7.2vw,8.5rem); line-height:1.08; letter-spacing:-.035em; }
.works-intro em { color:#64645c; font-style:normal; }
.works-intro > p:last-child { font-size:1.05rem; line-height:1.6; }
.case-list { gap:clamp(5rem,9vw,9rem); }
.case-card { grid-template-columns:minmax(0,1.6fr) minmax(17rem,.65fr); gap:clamp(2rem,4vw,5rem); align-items:center; }
.case-card:nth-child(even) { grid-template-columns:minmax(17rem,.65fr) minmax(0,1.6fr); }
.case-visual { height:clamp(24rem,40vw,39rem); display:block; overflow:hidden; isolation:isolate; background:#242520; }
.case-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.72)); z-index:1; }
.case-visual img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.16,1,.3,1); }
.case-card:hover .case-visual img { transform:scale(1.045); }
.case-visual span { position:absolute; left:clamp(1rem,3vw,3rem); bottom:clamp(1rem,3vw,3rem); font-size:clamp(4rem,8vw,9rem); line-height:1.05; letter-spacing:-.03em; color:#fff; z-index:2; }
.case-visual i { position:absolute; top:1.5rem; right:1.5rem; z-index:2; width:auto; aspect-ratio:auto; border-radius:0; background:none; mix-blend-mode:normal; transform:none; font:700 .8rem/1 var(--sans); color:#fff; }
.case-kicker { font-size:.76rem !important; letter-spacing:.08em; }
.case-copy h2 { font-size:clamp(3.4rem,5vw,6rem); line-height:1.05; margin-bottom:1rem; }
.case-copy .case-summary { margin:0 0 2.5rem; font-size:1.05rem; font-weight:500; letter-spacing:0; line-height:1.55; text-transform:none; color:#3e3e3a; }
.case-copy dl { margin:0; border-top:1px solid #bbb9b0; }
.case-copy dl > div { display:grid; grid-template-columns:5.5rem 1fr; gap:1rem; padding:.9rem 0; border-bottom:1px solid #bbb9b0; }
.case-copy dt { font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.case-copy dd { margin:0; font-size:.86rem; line-height:1.5; }

@media (max-width: 900px) {
  .hero { grid-template-columns:minmax(0,1fr) minmax(0,.9fr); }
  .hero h1 { font-size:clamp(5.7rem,10vw,9rem); }
  .hero-art { min-height:30rem; }
  .sticker { width:7.5rem; height:7.5rem; padding:1.25rem .5rem; font-size:1.1rem; }
  .poster, .scribble { font-size:1.15rem; }
  .contact-layout { grid-template-columns:1fr; }
  .case-card, .case-card:nth-child(even) { grid-template-columns:minmax(0,1.2fr) minmax(15rem,.8fr); gap:2rem; }
}
@media (max-width: 760px) {
  .site-header { position:relative; padding:1.1rem 1.25rem; gap:1rem; }
  .wordmark { font-size:1.75rem; }
  .header-link { margin-left:auto; font-size:.78rem; white-space:nowrap; }
  .menu-toggle { order:3; display:flex; width:2.6rem; height:2.6rem; flex-direction:column; justify-content:center; align-items:center; gap:.32rem; border:1px solid currentColor; background:transparent; color:inherit; cursor:pointer; }
  .menu-toggle span { display:block; width:1.1rem; height:2px; background:currentColor; transition:transform .2s ease; }
  .site-header.is-menu-open .menu-toggle span:first-child { transform:translateY(.26rem) rotate(45deg); }
  .site-header.is-menu-open .menu-toggle span:last-child { transform:translateY(-.26rem) rotate(-45deg); }
  .site-header nav { display:none; position:absolute; top:100%; left:0; right:0; z-index:20; margin:0; padding:1.25rem; flex-direction:column; gap:.5rem; background:var(--ink); color:var(--paper); border-top:1px solid rgba(255,255,255,.18); box-shadow:0 1rem 2rem rgba(0,0,0,.22); }
  .works-page .site-header nav { background:var(--paper); color:var(--ink); border-top:1px solid rgba(0,0,0,.18); }
  .site-header.is-menu-open nav { display:flex; }
  .site-header nav a { font-size:1rem; padding:.6rem 0; }
  .site-header nav .mobile-only { display:block; }
  .hero { display:block; padding-top:3.25rem; padding-bottom:1.5rem; }
  .hero h1 { font-size:clamp(3.65rem,16.4vw,6.8rem); line-height:1.04; letter-spacing:-.035em; margin:0 0 1.5rem; }
  .hero .intro { font-size:1rem; }
  .hero-art { min-height:24rem; margin:2rem -1.25rem 0; }
  .hero-art img { width:94%; right:-1%; top:7%; }
  .sticker { left:6%; top:0; }
  .poster-left { top:50%; }
  .poster-right { top:16%; }
  .scribble { bottom:2%; right:4%; }
  .tape-two { top:61%; }
  .service-section, .approach-section, .contact-section { padding-block:5rem; }
  h2 { font-size:clamp(2.6rem,10vw,4.5rem); }
  .contact-section h2 { max-width:15ch; }
  .contact-action p { margin-bottom:1.5rem; }
  .works-contact { grid-template-columns:1fr; padding-block:5rem; }
  .works-main { padding-top:4rem; }
  .works-intro h1 { font-size:clamp(3.8rem,13vw,6rem); }
  .works-intro > p:last-child { font-size:1rem; margin-top:1.5rem; }
  .case-card, .case-card:nth-child(even) { display:flex; flex-direction:column; align-items:stretch; gap:1.4rem; }
  .case-card:nth-child(even) .case-visual { order:0; }
  .case-visual { width:100%; height:clamp(19rem,78vw,32rem); }
  .case-visual span { font-size:clamp(3.4rem,13vw,6rem); }
  .case-copy { margin-top:0 !important; }
  .case-copy .case-summary { margin-bottom:1.5rem; }
}
@media (max-width: 390px) {
  .header-link { font-size:.7rem; }
  .header-link span { font-size:1rem; }
  .hero h1 { font-size:15.6vw; }
}
  @media (prefers-reduced-motion: reduce) {
    .has-js .reveal { opacity:1; transform:none; }
    .works-page .works-main { animation:none; }
    .page-curtain { display:none; }
}
.case-card{color:inherit;text-decoration:none;cursor:pointer}.case-card:focus-visible{outline:3px solid var(--blue);outline-offset:.6rem}.case-open{display:inline-flex;align-items:center;gap:2rem;margin-top:1.6rem;padding:.7rem 0;border-bottom:1px solid currentColor;color:var(--ink)!important;font-size:.79rem!important;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.case-open span{font-size:1.3rem;transition:transform .25s}.case-card:hover .case-open span,.case-card:focus-visible .case-open span{transform:translate(.25rem,-.25rem)}

/* KAPSOM identity: type-forward, direct and legible at every scale. */
.wordmark { letter-spacing:-.055em; }
.home-page .site-header::after { content:'СМЫСЛ / ФОРМА / КОД'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font:.62rem/1 var(--sans); font-weight:800; letter-spacing:.14em; color:var(--muted); }
.hero::before { content:'КАПСОМ / 01'; position:absolute; right:clamp(1.25rem,4vw,5rem); bottom:1.55rem; font:.62rem/1 var(--sans); font-weight:800; letter-spacing:.14em; color:var(--muted); }
.hero h1 { font-size:clamp(4.25rem,7.55vw,9rem); line-height:.88; max-width:8.6ch; }
.hero h1 .line-acid { color:var(--acid); }
.hero h1 .line:nth-child(4) span { animation-delay:.3s; }
.hero h1 .line-acid span { display:inline-block; position:relative; }
.hero h1 .line-acid span::after { content:''; position:absolute; left:.04em; right:-.05em; bottom:-.06em; height:.055em; background:var(--orange); transform:rotate(-1.5deg); }
.hero-copy::after { content:'ГОВОРИМ\AЗА БИЗНЕС'; white-space:pre; position:absolute; right:-4.5rem; bottom:2.4rem; padding:.45rem .6rem; background:var(--paper); color:var(--ink); font:600 1rem/.9 var(--display); transform:rotate(5deg); box-shadow:.18rem .18rem 0 var(--blue); }
.page-curtain span { font-size:clamp(3rem,10vw,10rem); letter-spacing:-.055em; }
.works-intro h1 { max-width:11ch; }
.works-intro em { color:var(--orange); }

@media (max-width: 1100px) {
  .home-page .site-header::after { display:none; }
  .hero-copy::after { display:none; }
}
@media (max-width: 760px) {
  .wordmark { font-size:1.55rem; }
  .hero h1 { font-size:clamp(3.25rem,14.5vw,5.8rem); line-height:.91; max-width:8.8ch; }
  .hero-copy { min-width:0; width:100%; overflow:hidden; }
  .hero .intro { width:100%; max-width:21rem; overflow-wrap:break-word; }
  .hero::before { display:none; }
  .works-intro h1 { font-size:clamp(3.2rem,12.4vw,5.5rem); line-height:1; }
}
@media (max-width: 390px) {
  .hero h1 { font-size:14.2vw; }
  .header-link { display:none; }
}