/* IN RUN WE TRUST — адаптация шаблона vanta-loop.
   Сначала шрифты и сброс, затем стили шаблона (сжаты в строку на правило), в конце — правки
   под IN RUN WE TRUST: у каждой помечено «шаблон: …», что именно в шаблоне пришлось чинить. */

@font-face { font-family: 'Onest'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../fonts/onest-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../fonts/onest-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../fonts/onest-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 }
/* AF Serif — Noto Serif Display с шириной 72 %: узкая антиква с кириллицей и курсивом вместо Instrument Serif. */
@font-face { font-family: 'AF Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/af-serif-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face { font-family: 'AF Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/af-serif-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: 'AF Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/af-serif-italic-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face { font-family: 'AF Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/af-serif-italic-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 }

/* Сброс вместо Tailwind CDN: из классов Tailwind в экспорте были только три утилиты на роликах,
   но страница рассчитана на preflight (кегль и вес заголовков, отступы абзацев, списки, кнопки). */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0 }
ul { list-style: none; margin: 0; padding: 0 }
b, strong { font-weight: bolder }
small { font-size: 80% }
img, svg, canvas { display: block; vertical-align: middle }
img { max-width: 100%; height: auto }
button { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; text-transform: none; background-color: transparent; background-image: none; cursor: pointer }
input { font-family: inherit; font-size: 100%; color: inherit; margin: 0; padding: 0 }
input::placeholder { color: var(--muted); opacity: 1 }

/* ==========================================================================
   Стили шаблона
   ========================================================================== */
:root { --ink: #09090b; --paper: #f3f1eb; --orange: #ff521b; --blue: #073bc7; --muted: #72716d; --line: rgba(9, 9, 11, .16) }
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--ink); color: #fff; font-family: var(--sans); overflow-x: hidden }
body.loading { overflow: hidden }
a { color: inherit; text-decoration: none }
button, input { font: inherit }
.hero { height: 100svh; min-height: 700px; position: relative; overflow: hidden; background: #06163d }
.hero__image { position: absolute; width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); animation: heroZoom 2.2s cubic-bezier(.22, 1, .36, 1) .5s forwards }
@keyframes heroZoom { to { transform: scale(1) } }
.hero__wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 13, 48, .55), transparent 52%), linear-gradient(0deg, rgba(0, 0, 0, .26), transparent 35%) }
.hero__micro { position: absolute; top: 82px; left: 1.25rem; right: 1.25rem; display: flex; justify-content: space-between; font-size: 10px; text-transform: uppercase; letter-spacing: .08em }
.hero__copy { position: absolute; left: 2vw; top: 22%; max-width: 920px }
.eyebrow, .section-label { text-transform: uppercase; letter-spacing: .1em; font-size: 10px }
.hero__headline { font-family: var(--serif); font-size: clamp(4.1rem, 7.7vw, 8.5rem); line-height: .78; letter-spacing: -.055em; font-weight: 400; margin: 1rem 0 }
.hero__headline span { display: block; transform: translateY(110%); opacity: 0; animation: lineUp 1.1s cubic-bezier(.22, 1, .36, 1) forwards }
.hero__headline span:nth-child(2) { animation-delay: .12s }
@keyframes lineUp { to { transform: translateY(0); opacity: 1 } }
.hero__dek { font-size: clamp(.9rem, 1.25vw, 1.1rem); line-height: 1.45; width: min(390px, 80vw) }
.reveal { opacity: 0; transform: translateY(20px); animation: reveal .8s ease 1.4s forwards }
@keyframes reveal { to { opacity: 1; transform: none } }
.hero__word { position: absolute; bottom: -2.5vw; left: 1vw; font-weight: 600; font-size: clamp(5.8rem, 15vw, 16rem); line-height: .75; white-space: nowrap; letter-spacing: -.09em; color: var(--orange) }
.manifesto { height: 440vh; background: #050505 }
.manifesto__sticky { height: 100vh; position: sticky; top: 0; overflow: hidden; display: grid; place-items: center }
.manifesto__line { position: relative; z-index: 8; text-align: center; font-size: clamp(3.4rem, 6.8vw, 8rem); line-height: .88; letter-spacing: -.07em; margin: 0; font-weight: 500 }
.manifesto__line span { display: block; opacity: .18; transition: opacity .2s }
.collage { position: absolute; inset: 0 }
.tile { position: absolute; margin: 0; overflow: hidden; opacity: 0; transform: translateY(45px) scale(.8); will-change: transform, opacity }
.tile img { width: 100%; height: 100%; object-fit: cover }
.tile--a { width: 34vw; height: 54vh; left: 7vw; top: 22vh }
.tile--b { width: 27vw; height: 34vh; right: 7vw; top: 9vh }
.tile--c { width: 31vw; height: 38vh; right: 10vw; bottom: 6vh }
.tile--d { width: 20vw; height: 30vh; left: 18vw; top: 3vh; background: #0b35c0 }
.orb { width: 12vw; height: 12vw; border-radius: 50%; background: var(--orange); filter: blur(2px); position: absolute; left: 4vw; top: 6vh; box-shadow: 0 0 80px #ff521b }
.tile--e { width: 18vw; height: 23vh; left: 40vw; bottom: 5vh; background: var(--paper); color: #111; display: grid; place-items: center }
.glyph { font-size: 8vw; font-weight: 600; letter-spacing: -.1em }
.side-index { position: absolute; right: 1.2rem; top: 50%; writing-mode: vertical-rl; font-size: 9px; text-transform: uppercase; letter-spacing: .14em; display: flex; gap: 1rem; color: #aaa }
.projects { background: #050505 }
.project { height: 95vh; min-height: 650px; position: relative; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .15) }
.project>img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1) }
.project:hover>img { transform: scale(1.035) }
.project__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .34), transparent 55%), linear-gradient(0deg, rgba(0, 0, 0, .38), transparent 45%) }
.project__copy { position: absolute; left: 1.25rem; bottom: 1.25rem }
.project__copy p { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 .4rem }
.project__copy h3 { font-size: clamp(2.6rem, 4.7vw, 5.5rem); line-height: .9; letter-spacing: -.07em; margin: 0 }
.project__visit { position: absolute; right: 1.3rem; bottom: 1.3rem; border-radius: 50%; width: 82px; height: 82px; background: var(--paper); color: #111; display: grid; place-items: center; text-align: center; font-size: 10px; text-transform: uppercase; padding: 1rem; transition: transform .3s }
.project__visit:hover { transform: rotate(8deg) scale(1.08) }
.story { background: #050505; padding: 12vw 1.25rem 8vw }
.story__intro { display: grid; grid-template-columns: 1fr 2.3fr 1fr; gap: 2rem; align-items: end; margin-bottom: 6vw }
.section-label { display: flex; gap: .55rem; align-items: center }
.section-label span { width: 6px; height: 6px; border-radius: 50%; background: var(--orange) }
.story__intro h2, .services h2, .plans h2, .faq h2, .voices h2, .journal h2 { font-size: clamp(3rem, 7vw, 8rem); line-height: .86; letter-spacing: -.075em; margin: 0; font-weight: 500 }
.story__intro>p:last-child { font-size: 14px; line-height: 1.5; color: #aaa }
.story__grid { display: grid; grid-template-columns: 3fr 1fr; gap: 1rem; height: 50vw; max-height: 700px }
.reel-card { position: relative; overflow: hidden }
.reel-card img { width: 100%; height: 100%; object-fit: cover }
.stat-card { border-top: 1px solid #555; padding: 1rem; display: flex; flex-direction: column }
.stat-card strong { font-size: clamp(4rem, 9vw, 10rem); letter-spacing: -.09em; margin-top: auto }
.stat-card i { font-size: 2rem; color: var(--orange) }
.stat-card p { font-size: 12px; color: #aaa }
.services, .plans, .faq, .voices, .journal { background: var(--paper); color: var(--ink); padding: 10vw 1.25rem }
.services__title { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: end; margin-bottom: 8vw }
.services__title>p:last-child { color: var(--muted); font-size: 16px; line-height: 1.4 }
.service-list a { display: grid; grid-template-columns: 7% 28% 1fr 20%; gap: 1rem; align-items: center; border-top: 1px solid var(--line); padding: 2.5rem 0 }
.service-list a:last-child { border-bottom: 1px solid var(--line) }
.service-list h3 { font-size: clamp(2rem, 4vw, 4.8rem); letter-spacing: -.06em; margin: 0 }
.service-list p { max-width: 440px; color: var(--muted) }
.service-list span, .service-list b { font-size: 10px; text-transform: uppercase; font-weight: 500 }
.capabilities { display: grid; grid-template-columns: 1.2fr 1fr 1fr; background: var(--paper); color: #fff; padding: 0 1.25rem 10vw }
.capability { min-height: 520px; padding: 2rem; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate }
.capability:after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 38%); opacity: 0; transition: opacity .55s }
.capability:hover:after { opacity: 1 }
.capability--blue { background: var(--blue) }
.capability--cream { background: #ddd8cd; color: #111 }
.capability--orange { background: var(--orange) }
.capability h3 { font-size: 2rem; letter-spacing: -.05em; margin: .5rem 0 }
.capability p { font-size: 12px; max-width: 260px; margin: 0; line-height: 1.45 }
.system-board { position: absolute; top: 10%; left: 9%; width: 82%; padding: 14px; background: #f7f4ed; color: #111; box-shadow: 18px 22px 0 rgba(0, 0, 0, .12); transition: transform .7s cubic-bezier(.16, 1, .3, 1), box-shadow .7s }
.capability:hover .system-board { transform: translate(-8px, -9px) rotate(-1.5deg); box-shadow: 28px 32px 0 rgba(0, 0, 0, .13) }
.system-board__top, .system-board__foot { display: flex; justify-content: space-between; align-items: center; font-size: 9px; text-transform: uppercase; letter-spacing: .08em }
.system-board__top b { font-weight: 500; color: var(--orange) }
.system-board__top b:before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-right: 5px }
.system-board__bars { display: grid; gap: 11px; margin: 25px 0 17px }
.system-board__bars i { height: 1px; background: #b7b5b0; position: relative }
.system-board__bars i:after { content: ""; position: absolute; right: 0; top: -2px; width: 26%; height: 5px; background: var(--blue) }
.system-board__bars i:nth-child(2):after { width: 52%; background: var(--orange) }
.system-board__bars i:nth-child(3):after { width: 15%; background: #111 }
.prototype-stack { position: absolute; top: 10%; left: 50%; width: 57%; aspect-ratio: 1; transform: translateX(-50%); transition: transform .8s cubic-bezier(.16, 1, .3, 1) }
.prototype-stack i { position: absolute; display: block; inset: 0; border: 1px solid #111; background: #f0ede5; transform: rotate(14deg) }
.prototype-stack i:nth-child(2) { background: #ff521b; transform: rotate(-18deg) translate(-14px, 15px) }
.prototype-stack i:nth-child(3) { background: #111; transform: rotate(30deg) translate(4px, -2px) }
.prototype-stack b { position: absolute; z-index: 2; inset: 31%; display: grid; place-items: center; background: #2b4fd6; color: #fff; font-size: 10px; letter-spacing: .06em; transform: rotate(30deg) }
.capability:hover .prototype-stack { transform: translateX(-50%) rotate(-10deg) scale(1.06) }
.signal-field { position: absolute; inset: 7% 8% 35%; border-radius: 50%; background: repeating-radial-gradient(circle at center, transparent 0 20px, rgba(255, 255, 255, .76) 21px 23px); transition: transform .9s cubic-bezier(.16, 1, .3, 1) }
.signal-field:before { content: ""; position: absolute; inset: 18%; border: 1px solid rgba(255, 255, 255, .65); border-radius: 50%; box-shadow: 0 0 0 23px rgba(255, 255, 255, .08), 0 0 0 46px rgba(255, 255, 255, .05) }
.signal-field:after { content: "01.00"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 11px; letter-spacing: .1em }
.capability:hover .signal-field { transform: scale(1.1) rotate(12deg) }
.plans { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8vw }
.plans__head>p:not(.section-label) { max-width: 460px; color: var(--muted); font-size: 16px; line-height: 1.5 }
.plan-card { background: #fff; border: 1px solid #ddd; padding: 2rem; display: flex; flex-direction: column; min-height: 580px }
.plan-card h3 { font-size: 5rem; letter-spacing: -.08em; margin: 1rem 0 }
.plan-card>strong { font-size: 2rem; margin: 2rem 0 }
.plan-card>strong small { font-size: .7rem }
.plan-card ul { list-style: none; padding: 0; border-top: 1px solid #ddd }
.plan-card li { padding: .7rem 0; border-bottom: 1px solid #ddd; font-size: 13px }
.button { display: flex; justify-content: space-between; align-items: center; background: var(--orange); color: white; padding: 1rem 1.2rem; margin-top: auto; border-radius: 2px; text-transform: uppercase; font-size: 11px; letter-spacing: .08em }
.faq { display: grid; grid-template-columns: 1fr 1.3fr; gap: 9vw; padding-top: 4vw }
.accordion article { border-top: 1px solid var(--line) }
.accordion article:last-child { border-bottom: 1px solid var(--line) }
.accordion button { width: 100%; border: 0; background: none; display: flex; justify-content: space-between; padding: 1.5rem 0; text-align: left; cursor: pointer }
.accordion button i { font-style: normal; font-size: 1.4rem; transition: transform .3s }
.accordion p { max-height: 0; overflow: hidden; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; transition: max-height .5s, padding .5s }
.accordion article.open p { max-height: 160px; padding: 0 0 1.5rem }
.accordion article.open i { transform: rotate(45deg) }
.voices { padding-top: 4vw }
.voices__head { display: grid; grid-template-columns: 1fr 2fr; margin-bottom: 7vw }
.quote-track { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.quote-track figure { margin: 0; padding: 2.5rem; min-height: 430px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between }
.quote-track figure:last-child { border: 0 }
.quote-track blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 3rem); line-height: 1.04 }
.quote-track figcaption { display: flex; align-items: center; gap: 1rem }
.quote-track img { width: 54px; height: 65px; object-fit: cover }
.quote-track span { display: flex; flex-direction: column }
.quote-track small { color: var(--muted); margin-top: .25rem }
.journal { padding-top: 4vw }
.journal__head { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: end; margin-bottom: 5vw }
.journal__head p:last-child { font-size: 13px; color: var(--muted) }
.journal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem }
.journal__art { height: 30vw; max-height: 480px; position: relative; overflow: hidden; background: #111 }
.journal__art>span { position: absolute; right: 1rem; top: 1rem; background: #fff; color: #111; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center }
.journal__grid small { display: block; margin-top: 1rem; color: var(--muted); text-transform: uppercase; font-size: 9px }
.journal__grid h3 { font-size: clamp(1.3rem, 2vw, 2rem); letter-spacing: -.04em; margin: .6rem 0; line-height: 1.05 }
.contact { min-height: 80vh; background: #080808; color: #fff; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 5vw 1.25rem }
.contact:before, .contact:after { content: ""; position: absolute; width: 45vw; height: 45vw; border: 1px solid #333; border-radius: 50% }
.contact:before { left: -20vw; top: 10% }
.contact:after { right: -20vw; bottom: -30% }
.contact__noise { position: absolute; inset: 0; opacity: .12; 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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E") }
.contact>p, .contact h2, .contact__actions { position: relative; z-index: 2 }
.contact>p { text-transform: uppercase; letter-spacing: .1em; font-size: 10px }
.contact h2 { font-size: clamp(3.5rem, 7.5vw, 9rem); line-height: .85; letter-spacing: -.07em; margin: 2rem 0; font-weight: 500 }
.contact h2 em { font-family: var(--serif); color: var(--orange); font-weight: 400 }
.contact__actions { display: flex; align-items: center; gap: 2rem }
.button--light { background: white; color: #111; width: 190px }
.contact__actions>a:last-child { font-size: 11px; border-bottom: 1px solid #555; padding-bottom: .2rem }
.footer { background: var(--paper); color: var(--ink); overflow: hidden }
.footer__marquee { display: flex; white-space: nowrap; border-bottom: 1px solid var(--line); color: var(--blue); font-size: 13vw; line-height: .78; font-weight: 600; letter-spacing: -.09em; padding: 2vw 0 1vw; animation: marquee 22s linear infinite }
.footer__marquee span { display: block }
@keyframes marquee { to { transform: translateX(-50%) } }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr 2fr 1.5fr; padding: 3rem 1.25rem; gap: 3rem }
.footer__grid>div { display: flex; flex-direction: column; gap: .45rem; font-size: 12px }
.footer__grid small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .7rem }
.footer__meta { justify-content: flex-end }
@media(max-width:760px) {
  .hero__copy { top: 26%; left: 1.1rem }
  .hero__headline { font-size: 19vw }
  .hero__word { font-size: 22vw; bottom: -1vw }
  .hero__image { object-position: 61% center }
  .manifesto { height: 330vh }
  .manifesto__line { font-size: 13vw }
  .tile--a { width: 62vw }
  .tile--b { width: 50vw }
  .tile--c { width: 55vw }
  .project { height: 78svh }
  .project__visit { width: 68px; height: 68px }
  .story__intro, .services__title, .journal__head { grid-template-columns: 1fr; gap: 1.5rem }
  .story__grid { grid-template-columns: 1fr; height: auto }
  .reel-card { height: 65vw }
  .stat-card { min-height: 330px }
  .service-list a { grid-template-columns: 10% 1fr }
  .service-list p, .service-list b { grid-column: 2 }
  .capabilities { grid-template-columns: 1fr; padding: 0 }
  .capability { min-height: 430px }
  .plans, .faq { grid-template-columns: 1fr }
  .plan-card { min-height: 520px }
  .voices__head { grid-template-columns: 1fr; gap: 1.5rem }
  .quote-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory }
  .quote-track figure { min-width: 85vw; scroll-snap-align: start }
  .journal__grid { grid-template-columns: 1fr }
  .journal__art { height: 80vw }
  .contact__actions { flex-direction: column }
  .footer__grid { grid-template-columns: 1fr 1fr }
  .footer__meta { grid-column: 1/-1 }
}
@media(prefers-reduced-motion:reduce) {
  * { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important }
}

/* Template 2 motion system: expanding media portal, pinned editorial type and stacked cards */
.portal { height: 430vh; background: var(--paper); color: var(--ink); position: relative; z-index: 3; border-radius: 0 0 12px 12px }
.portal__stage { position: sticky; top: 0; height: 100vh; overflow: hidden }
.portal__corner { position: absolute; top: 2.2vw; z-index: 3; font-size: clamp(3.5rem, 7.5vw, 9rem); line-height: .8; letter-spacing: -.08em }
.portal__corner--left { left: 1.2vw }
.portal__corner--right { right: 1.2vw; font-family: var(--serif); font-weight: 400 }
.portal__frame { position: absolute; left: 50%; top: 50%; width: 12vw; height: 9vw; min-width: 120px; min-height: 86px; transform: translate(-50%, -50%); overflow: hidden; will-change: width, height, border-radius }
.portal__frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); will-change: transform }
.portal__duotone { position: absolute; inset: 0; background: #ef3c28; mix-blend-mode: multiply; opacity: .28 }
.portal__dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--ink) }
.portal__dot--a { left: 64%; top: 14% }
.portal__dot--b { right: 9%; bottom: 11% }
.portal__labels { position: absolute; inset: auto 1.2rem 1.1rem; display: flex; justify-content: space-between; font-size: 8px; text-transform: uppercase; letter-spacing: .08em }
.portal__title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 1.2vw; z-index: 4; color: #fff; font-size: clamp(4.5rem, 11vw, 13rem); letter-spacing: -.085em; line-height: .8; pointer-events: none; opacity: 0 }
.portal__title em { font-family: var(--serif); font-weight: 400; color: var(--orange) }
.intro-fold { height: 290vh; background: var(--paper); color: var(--ink); position: relative; z-index: 4; border-radius: 0 0 12px 12px }
.intro-fold__sticky { height: 100vh; position: sticky; top: 0; overflow: hidden; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 3fr; padding: 2vw 1.25rem }
.intro-fold__label { font-family: var(--serif); font-size: 2rem }
.intro-fold__statement { font-size: clamp(3rem, 5.8vw, 7rem); line-height: .88; letter-spacing: -.07em; margin: 0; max-width: 1280px }
.intro-fold__statement i { font-family: var(--serif); font-weight: 400 }
.intro-fold__float { position: absolute; margin: 0; width: 7vw; height: 10vw; min-width: 70px; min-height: 95px; right: 7vw; bottom: 7vh; overflow: hidden }
.intro-fold__float img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center }
.intro-fold__index { position: absolute; bottom: 1.2rem; left: 27%; font-size: 8px; text-transform: uppercase; letter-spacing: .1em }
.project { border-radius: 12px 12px 0 0; transform-origin: center top }
.services { position: relative; z-index: 4; border-radius: 12px 12px 0 0 }
.service-list a { position: relative; overflow: hidden; transition: background-color .35s, color .35s, padding .35s }
.service-list a:hover { background: var(--blue); color: #fff; padding-left: 1rem; padding-right: 1rem }
.service-list a:hover p { color: #c9d4ff }
.journal { border-radius: 12px 12px 0 0; position: relative; z-index: 5 }
@media(max-width:760px) {
  .portal { height: 330vh }
  .portal__corner { font-size: 18vw; top: 1.2rem }
  .portal__frame { width: 28vw; height: 21vw }
  .portal__labels span:nth-child(2) { display: none }
  .portal__title { font-size: 19vw }
  .intro-fold { height: 220vh }
  .intro-fold__sticky { grid-template-columns: 1fr; padding: 1.2rem }
  .intro-fold__label { font-size: 1.3rem }
  .intro-fold__statement { font-size: 12vw; margin-top: 14vh }
  .intro-fold__float { width: 18vw; height: 27vw }
  .intro-fold__index { left: 1.2rem }
}

/* Studio access deck */
.plans { align-items: start }
.pricing-deck { height: 620px; position: relative; width: min(100%, 530px); margin-left: auto; isolation: isolate; touch-action: pan-y }
.pricing-deck__hint { position: absolute; z-index: 10; top: -2.1rem; right: 0; margin: 0; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em }
.pricing-deck__hint span { color: var(--orange); font-size: 14px; vertical-align: -1px }
.plan-card { position: absolute; inset: 0; min-height: 0; margin: 0; background: #fdfcf9; border: 1px solid rgba(9, 9, 11, .2); box-shadow: 0 18px 45px rgba(24, 19, 12, .07); will-change: transform; user-select: none; cursor: grab }
.plan-card:active { cursor: grabbing }
.plan-card--core { background: #fffdf8 }
.plan-card--scale { background: #f7f0e7 }
.plan-card--partner { background: #eeece5 }
.plan-card__top { display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; letter-spacing: .09em; font-size: 9px; color: var(--muted) }
.plan-card__top span { color: var(--orange) }
.plan-card h3 { font-size: clamp(4rem, 6vw, 5.7rem); line-height: .8; margin: 1.25rem 0 .8rem }
.plan-card p { max-width: 295px; color: var(--muted); line-height: 1.45; font-size: 14px }
.plan-card strong { font-size: 2.25rem; margin: 2rem 0 1.2rem; letter-spacing: -.05em }
.plan-card strong small { font-size: .68rem; letter-spacing: 0; text-transform: uppercase }
.plan-card .button { pointer-events: auto }
.plan-card.is-front { box-shadow: 0 26px 68px rgba(24, 19, 12, .16) }
.plan-card.is-dragging { transition: none !important }
.pricing-deck.is-dragging .pricing-deck__hint { opacity: 0 }
.pricing-deck:not(.is-dragging) .plan-card { transition: transform .7s cubic-bezier(.16, 1, .3, 1), box-shadow .5s ease }

/* FAQ — active-line system */
.accordion { border-bottom: 1px solid var(--line) }
.accordion article { position: relative; border-top: 1px solid var(--line); transition: background .35s ease, padding .35s ease }
.accordion article:last-child { border-bottom: 0 }
.accordion article:before { content: ""; position: absolute; inset: 0; background: rgba(255, 82, 27, .055); opacity: 0; transition: opacity .35s; pointer-events: none }
.accordion article:hover:before, .accordion article.open:before { opacity: 1 }
.accordion button { position: relative; z-index: 1; padding: 1.45rem 1rem; width: 100%; align-items: center; transition: padding .35s, color .35s }
.accordion button:hover { padding-left: 1.45rem; color: var(--orange) }
.accordion button span { display: flex; gap: 1rem; align-items: center; font-size: clamp(1rem, 1.35vw, 1.25rem); letter-spacing: -.03em }
.accordion button b { font-size: 9px; letter-spacing: .1em; color: var(--orange); font-weight: 500 }
.accordion button i { width: 28px; height: 28px; border: 1px solid rgba(9, 9, 11, .24); border-radius: 50%; position: relative; display: block; flex: 0 0 auto; transition: background .35s, border-color .35s, transform .35s }
.accordion button i:before, .accordion button i:after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform .35s }
.accordion button i:after { transform: translate(-50%, -50%) rotate(90deg) }
.accordion article.open button { padding-left: 1.45rem; color: var(--orange) }
.accordion article.open button i { background: var(--orange); border-color: var(--orange); color: #fff; transform: rotate(180deg) }
.accordion article.open button i:after { transform: translate(-50%, -50%) rotate(0deg) }
.accordion p { position: relative; z-index: 1; max-width: 630px; padding: 0 1rem 0 1.45rem; font-size: 15px; line-height: 1.55; transition: max-height .55s cubic-bezier(.16, 1, .3, 1), padding .55s cubic-bezier(.16, 1, .3, 1), opacity .3s; opacity: 0 }
.accordion article.open p { max-height: 190px; padding: 0 2rem 1.6rem 1.45rem; opacity: 1 }

/* Testimonial portrait takeover */
.quote-track { border: 0; gap: 1px; background: var(--line) }
.quote-card { position: relative; overflow: hidden; background: var(--paper); isolation: isolate; transition: color .5s ease }
.quote-card:before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(2, 4, 8, .05), rgba(2, 4, 8, .78)); opacity: 0; transition: opacity .55s ease }
.quote-card__image { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center; opacity: 0; transform: scale(1.12); filter: saturate(.85); transition: opacity .55s ease, transform 1s cubic-bezier(.16, 1, .3, 1), filter .55s ease }
.quote-card__content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; transition: transform .55s cubic-bezier(.16, 1, .3, 1) }
.quote-card figcaption { justify-content: space-between }
.quote-card figcaption i { font-style: normal; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); transition: background .45s, border-color .45s }
.quote-card:hover { color: #fff }
.quote-card:hover:before { opacity: 1 }
.quote-card:hover .quote-card__image { opacity: 1; transform: scale(1); filter: saturate(1.04) }
.quote-card:hover .quote-card__content { transform: translateY(-3px) }
.quote-card:hover figcaption small { color: rgba(255, 255, 255, .75) }
.quote-card:hover figcaption i { background: var(--orange); border-color: var(--orange) }
@media(max-width:760px) {
  .pricing-deck { height: 545px; width: 100%; margin-top: 3rem }
  .pricing-deck__hint { left: 0; right: auto; top: -2.1rem }
  .plan-card { padding: 1.45rem }
  .plan-card h3 { font-size: 4.25rem }
  .plan-card strong { margin: 1.25rem 0 .8rem }
  .plan-card li { padding: .5rem 0 }
  .accordion button { padding: .95rem .2rem }
  .accordion button span { gap: .65rem }
  .accordion article.open button { padding-left: .65rem }
  .accordion p { font-size: 14px; padding-left: .65rem }
  .accordion article.open p { padding-left: .65rem }
  .quote-track { gap: 1px }
  .quote-card:hover { color: var(--ink) }
  .quote-card:hover:before, .quote-card:hover .quote-card__image { opacity: 0 }
  .quote-card:hover .quote-card__content { transform: none }
}

/* Hero video — full-frame pixelation */

/* ==========================================================================
   Правки шаблона под IN RUN WE TRUST
   ========================================================================== */

/* шаблон: DM Sans и Instrument Serif названы в стилях, но не подключены (в <head> только preconnect),
   и кириллицы в обоих нет. Стоят Onest и узкая антиква AF Serif (Noto Serif Display, ширина 72 %). */
:root { --sans: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --serif: 'AF Serif', 'Times New Roman', Georgia, serif; --nav-h: 68px }
::selection { background: var(--orange); color: #fff }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px }
.arr { display: inline-block; width: .82em; height: .82em; flex: none; vertical-align: -.06em }

/* шаблон: заставка ждёт window.load и ещё полторы секунды, запасного выхода нет. Здесь её снимает
   скрипт по готовности DOM, а если скрипт не отработал — анимация loaderOut. */
.loader { position: fixed; inset: 0; z-index: 1000; background: #070707; display: none; place-items: center; clip-path: inset(0); transition: clip-path .7s cubic-bezier(.76, 0, .24, 1) }
html.motion .loader { display: grid; animation: loaderOut .01s linear 3.5s forwards }
.loader.done { clip-path: inset(0 0 100% 0) }
.loader__mark { font-size: clamp(3rem, 8vw, 7rem); letter-spacing: -.06em; font-weight: 500 }
.loader__line { position: absolute; bottom: 0; left: 0; height: 4px; background: var(--orange); animation: load .5s ease both }
@keyframes load { from { width: 0 } to { width: 100% } }
@keyframes loaderOut { to { visibility: hidden } }

/* шаблон: кольцо-указатель до первого движения мыши лежит в левом верхнем углу */
.cursor { width: 18px; height: 18px; border: 1px solid #fff; border-radius: 50%; position: fixed; left: 0; top: 0; z-index: 999; pointer-events: none; mix-blend-mode: difference; transform: translate(-50%, -50%); opacity: 0; transition: width .2s, height .2s, opacity .2s }
.cursor.is-on { opacity: 1 }
.cursor.is-hover { width: 54px; height: 54px }
@media (hover: none), (pointer: coarse) { .cursor { display: none } }

/* шаблон: шапка стоит абсолютом на первом экране — дальше по странице навигации нет, а на телефоне
   нет и меню. Здесь шапка фиксированная: уезжает при прокрутке вниз, возвращается при прокрутке вверх,
   цвет берёт у секции под собой (data-tone), под ней подложка в цвет секции. */
.nav { position: fixed; z-index: 60; top: 0; left: 0; width: 100%; height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 1.25rem; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; color: #fff; transition: transform .45s cubic-bezier(.22, 1, .36, 1), color .3s }
.nav::before { content: ""; position: absolute; inset: 0 0 -26px; z-index: -1; background: linear-gradient(rgba(5, 5, 5, .94) 58%, rgba(5, 5, 5, 0)); opacity: 0; transition: opacity .3s; pointer-events: none }
.nav.is-scrolled::before { opacity: 1 }
.nav.is-light { color: var(--ink) }
.nav.is-light::before { background: linear-gradient(rgba(243, 241, 235, .96) 55%, rgba(243, 241, 235, 0)) }
.nav.is-hidden { transform: translateY(-120%) }
.nav__logo { justify-self: start; width: 158px; height: 24px; background: currentColor; -webkit-mask: url(../img/logo.svg) left center / contain no-repeat; mask: url(../img/logo.svg) left center / contain no-repeat }
.nav__links { display: flex; gap: 2rem }
.nav__links a { position: relative; padding: .5rem 0 }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s }
.nav__links a:hover::after { transform: scaleX(1) }
.nav__talk { justify-self: end; display: inline-flex; align-items: center; gap: .5em; border: 1px solid rgba(255, 255, 255, .45); border-radius: 99px; padding: .7rem 1rem; transition: background .25s, color .25s, border-color .25s }
.nav__talk:hover { background: #fff; color: #000 }
.nav.is-light .nav__talk { border-color: rgba(9, 9, 11, .35) }
.nav.is-light .nav__talk:hover { background: var(--ink); color: #fff }
.nav__burger { display: none; justify-self: end; width: 44px; height: 44px; position: relative }
.nav__burger i { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .3s, top .3s }
.nav__burger i:first-child { top: 17px }
.nav__burger i:last-child { top: 26px }
.nav__burger[aria-expanded="true"] i:first-child { top: 21.5px; transform: rotate(45deg) }
.nav__burger[aria-expanded="true"] i:last-child { top: 21.5px; transform: rotate(-45deg) }
.menu { position: fixed; inset: 0; z-index: 55; background: var(--ink); color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: calc(var(--nav-h) + 1.5rem) 1.25rem 1.5rem; overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s }
.menu.is-open { visibility: visible; opacity: 1; transition: opacity .3s }
.menu nav { display: grid }
.menu nav a { font-size: clamp(1.9rem, 8.4vw, 3rem); letter-spacing: -.045em; line-height: 1.1; padding: .55rem 0; border-bottom: 1px solid rgba(255, 255, 255, .14) }
.menu .button { margin-top: 0 }
body.menu-open { overflow: hidden }
@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto }
  .nav__links, .nav__talk { display: none }
  .nav__burger { display: block }
}
@media (min-width: 901px) { .menu { display: none } }

/* Кнопки */
.button { gap: 1.4rem }
.button--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .5); transition: background .25s, color .25s }
.button--ghost:hover { background: #fff; color: var(--ink) }
.button--light { width: auto }

/* Первый экран.
   шаблон: на первом экране ролик во весь кадр, а кнопки нет вовсе (только ссылка в шапке).
   Здесь фото стоит справа и растворено в фоне маской, текст — на ровном тёмном, под ним две кнопки.
   шаблон: абзац появляется через 1,4 с после загрузки — здесь всё на экране меньше чем за секунду.
   шаблон: наезд кадра (animation … forwards) перебивает инлайновый transform, которым скрипт ведёт
   параллакс, — параллакс не работает. Здесь наезд у картинки, параллакс у обёртки. */
.hero { background: #0a0b0d; min-height: 640px }
.hero__media { position: absolute; inset: 0 0 0 auto; width: 66vw; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36%); mask-image: linear-gradient(90deg, transparent 0, #000 36%) }
.hero__image { inset: 0; object-position: 50% 6%; transform: scale(1.1); animation: heroZoom 1.8s cubic-bezier(.22, 1, .36, 1) .25s forwards }
.hero__media canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; opacity: 0; transition: opacity .2s }
.hero__media canvas.is-on { opacity: 1 }
.hero__wash { background: linear-gradient(90deg, rgba(10, 11, 13, .55), transparent 60%), linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 40%) }
.hero__micro { top: calc(var(--nav-h) + 14px); font-size: 11px }
.hero__micro span { display: inline-flex; align-items: center; gap: .45em }
.hero__copy { top: 21%; max-width: min(920px, 62vw) }
.hero__headline { font-family: var(--serif); font-size: clamp(3.4rem, 7.4vw, 8.2rem); line-height: .92; letter-spacing: -.02em; margin: 1rem 0 1.5rem }
.hero__headline span { animation-duration: .9s; animation-delay: .25s }
.hero__headline span:nth-child(2) { animation-delay: .35s }
.reveal { animation-duration: .6s; animation-delay: .45s }
.hero__dek { width: min(430px, 84vw); font-size: clamp(.95rem, 1.2vw, 1.1rem) }
.hero__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.7rem }
.hero__cta .button { display: inline-flex; margin-top: 0; padding: .95rem 1.15rem }
/* шаблон: слово внизу рассчитано на 10 знаков при 15vw; у IN RUN WE TRUST их 15 — кегль от ширины окна */
.hero__word { left: 1.3vw; right: auto; bottom: -1.7vw; font-size: 12.25vw; letter-spacing: -.065em; line-height: .78 }
.hero__tag { position: absolute; z-index: 3; right: 1.25rem; bottom: calc(9.6vw + .9rem); display: inline-flex; align-items: center; gap: .55rem; background: rgba(0, 0, 0, .58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; border-radius: 99px; padding: .62rem .9rem; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; transition: background .25s }
.hero__tag:hover { background: rgba(0, 0, 0, .8) }
.hero__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex: none }

/* Портал */
.portal__corner { top: calc(var(--nav-h) + .4vw); font-size: clamp(2.6rem, 7vw, 8.4rem); letter-spacing: -.065em; font-weight: 500 }
.portal__corner--right { font-family: var(--serif); letter-spacing: -.03em; font-weight: 400 }
.portal__labels { font-size: 11px }
.portal__title { padding: 0 4.5vw; font-size: clamp(3rem, 9.6vw, 11.5rem); letter-spacing: -.065em; font-weight: 500; text-shadow: 0 2px 50px rgba(0, 0, 0, .4) }
.portal__title em { font-family: var(--serif); font-style: normal; font-weight: 400 }
.portal__frame img { object-position: 42% 50% }

/* Вступление */
.intro-fold__sticky { padding-top: calc(var(--nav-h) + .6vw) }
.intro-fold__label { font-family: var(--serif) }
.intro-fold__statement { font-size: clamp(2.2rem, 5.2vw, 6.2rem); line-height: .98; letter-spacing: -.05em; max-width: 57vw }
.intro-fold__statement i { font-family: var(--serif); letter-spacing: -.02em }
.intro-fold__float img { object-position: 34% 24% }
.intro-fold__index { font-size: 11px }

/* Манифест.
   шаблон: трекинг −.07em и интерлиньяж .88 подобраны под латиницу; три строки по 20–28 знаков при 6.8vw
   шире экрана — кегль меньше. */
.manifesto__line { font-size: clamp(2rem, 4.9vw, 5.8rem); line-height: 1.02; letter-spacing: -.05em; padding: 0 5vw; text-shadow: 0 0 34px rgba(0, 0, 0, .6) }
.tile--a img { object-position: 58% 40% }
.tile--c img { object-position: 50% 30% }
.glyph { font-size: 4.4vw; letter-spacing: -.06em }
.side-index { font-size: 11px }

/* Три состояния капсулы (в шаблоне — три проекта) */
.project__shade { background: linear-gradient(90deg, rgba(0, 0, 0, .52), transparent 62%), linear-gradient(0deg, rgba(0, 0, 0, .66), transparent 54%) }
.project--wave > img { object-position: 50% 24% }
.project--echo > img { object-position: 50% 30% }
.project--padre > img { object-position: 50% 36% }
.project__copy { right: 8.5rem; max-width: 780px }
.project__copy p { font-size: 11px }
.project__copy h3 { font-weight: 500; line-height: .95; letter-spacing: -.06em }
.project__copy .project__mood { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 1.9vw, 1.95rem); line-height: 1.1; text-transform: none; letter-spacing: 0; margin: .75rem 0 .6rem }
.project__copy .project__price { margin: 0; opacity: .86 }
.project__visit { width: 92px; height: 92px; font-size: 10.5px; letter-spacing: .04em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: 0 }

/* Заголовки секций.
   шаблон: 7vw с трекингом −.075em и интерлиньяжем .86 — в кириллице буквы слипаются, а русские
   заголовки длиннее и не помещаются в свою колонку. */
.story__intro h2, .services h2, .plans h2, .faq h2, .voices h2, .journal h2 { font-size: clamp(2.3rem, 4.7vw, 5.3rem); line-height: .98; letter-spacing: -.052em; text-wrap: balance }
.eyebrow, .section-label { font-size: 11px }

/* Проверка бегом */
.story__intro > p:last-child { font-size: 15px }
.stat-card small { font-size: 12px; color: #aaa; text-transform: uppercase; letter-spacing: .08em }
.stat-card strong { display: flex; align-items: baseline; gap: .12em; font-size: clamp(4rem, 9vw, 10rem); line-height: .9; letter-spacing: -.07em; font-weight: 600; margin-top: auto }
.stat-card strong i { font-size: .34em; font-style: normal; letter-spacing: 0; color: var(--orange) }
.stat-card p { font-size: 13.5px; line-height: 1.45; margin-top: .9rem }

/* Экипировка: строки — ссылки */
.service-list a { color: inherit }
.service-list h3 { font-size: clamp(1.7rem, 3.1vw, 3.6rem); line-height: 1; letter-spacing: -.05em; font-weight: 500 }
.service-list p { font-size: 15px; line-height: 1.45 }
.service-list span { font-size: 11px }
.service-list b { font-size: 13px; letter-spacing: .04em; justify-self: end; white-space: nowrap }
.services__title > p:last-child { font-size: 16px }

/* Три карточки */
.capability h3 { font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.06; font-weight: 500 }
.capability p { font-size: 13.5px; max-width: 300px }
.system-board__top, .system-board__foot { font-size: 10px }
.prototype-stack b { font-size: 13px; font-weight: 500 }
.signal-field:after { content: "HALO" }

/* Колода очков */
.pricing-deck { height: 668px }
.pricing-deck__hint { top: -2.9rem; display: flex; align-items: center; gap: .7rem; font-size: 11px }
.pricing-deck__hint button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(9, 9, 11, .22); border-radius: 50%; color: var(--orange); transition: background .25s, color .25s, border-color .25s }
.pricing-deck__hint button:hover { background: var(--orange); border-color: var(--orange); color: #fff }
.plan-card { padding: 1.5rem 2rem 2rem }
.plan-card__top { font-size: 11px }
.plan-card__top small { font-size: inherit }
.plan-card__img { width: 64%; aspect-ratio: 760 / 433; object-fit: contain; margin: .8rem auto 0; mix-blend-mode: multiply; pointer-events: none }
.plan-card h3 { font-size: clamp(2.4rem, 3.4vw, 3.4rem); line-height: .96; letter-spacing: -.055em; font-weight: 500; margin: .7rem 0 .5rem }
.plan-card p { max-width: 350px }
.plan-card strong { font-size: 2rem; font-weight: 600; margin: 1rem 0 .8rem }
.plan-card strong small { font-size: .5em; font-weight: 400; text-transform: none; color: var(--muted); margin-right: .25em }
.plan-card li { padding: .6rem 0; font-size: 13.5px }

/* Вопросы.
   шаблон: ответ ограничен 190px — длинный текст обрезается; высоту считает скрипт. */
.accordion button b { font-size: 11px }
.accordion article.open p { max-height: var(--h, 340px) }
.accordion p a { border-bottom: 1px solid currentColor }
.accordion p a:hover { color: var(--orange) }

/* Команда.
   шаблон: портрет появляется только по наведению — на телефоне его не увидеть. В подписи стоит
   маленький портрет; на десктопе по наведению он уступает место большому. */
.quote-track blockquote { font-family: var(--serif); font-size: clamp(1.6rem, 2.3vw, 2.7rem); line-height: 1.08 }
.quote-track small { font-size: 12px }
.quote-card figcaption img { object-position: 50% 26%; flex: none; transition: opacity .4s }
@media (hover: hover) and (min-width: 761px) { .quote-card:hover figcaption img { opacity: 0 } }

/* Новости: карточки — ссылки на канал */
/* шаблон: верх секции скруглён, а над ней такая же светлая «Команда» — в углах чёрными клиньями проступал фон страницы */
.journal { border-radius: 0 }
.journal__head p:last-child { font-size: 14px; line-height: 1.5 }
.journal__head p a { border-bottom: 1px solid currentColor }
.journal__grid a { display: block; color: inherit }
.journal__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.16, 1, .3, 1) }
.journal__grid a:hover .journal__art img { transform: scale(1.045) }
.journal__art > span { transition: background .3s, color .3s }
.journal__grid a:hover .journal__art > span { background: var(--orange); color: #fff }
.journal__grid small { font-size: 11px; letter-spacing: .06em }
.journal__grid h3 { font-size: clamp(1.2rem, 1.6vw, 1.6rem); line-height: 1.14; font-weight: 500 }

/* Контакты и подвал */
.contact > p { font-size: 11px }
.contact h2 { font-size: clamp(3rem, 7vw, 8.4rem); line-height: .96; letter-spacing: -.055em }
.contact h2 em { font-family: var(--serif); letter-spacing: -.02em }
.contact__actions > a:last-child { font-size: 13px }
/* шаблон: бегущая строка шириной в экран сдвигается на половину своей ширины, а не на длину одного
   повтора — петля прыгает, а линия под строкой уезжает вместе с ней. */
.footer__marquee { width: max-content; border-bottom: 0; font-size: 11vw; letter-spacing: -.07em }
.footer__grid { border-top: 1px solid var(--line) }
.footer__grid { grid-template-columns: 1fr 1.3fr 2fr 1.7fr }
.footer__grid > div { font-size: 13px }
.footer__grid > div a:hover { color: var(--orange) }
.footer__grid small { font-size: 11px }
.ask small { display: block }
.ask label { display: flex; border-bottom: 1px solid var(--ink); margin-top: 1.1rem }
.ask input { border: 0; background: none; padding: .8rem 0; width: 100%; outline: none; font-size: 15px }
.ask button { padding: 0 .5rem; font-size: 15px }
.ask button:hover { color: var(--orange) }
.ask__note { display: block; margin-top: .6rem; font-size: 12px; color: var(--muted) }
.footer__meta small { margin: 0; line-height: 1.5 }

@media (max-width: 1023px) {
  /* первый экран на планшете и телефоне: фото во весь кадр, текст внизу на затемнении */
  .hero__media { inset: 0; width: 100%; -webkit-mask-image: none; mask-image: none }
  .hero__image { object-position: 50% 0 }
  .hero__wash { background: linear-gradient(0deg, rgba(5, 5, 6, .92) 12%, rgba(5, 5, 6, .55) 46%, transparent 72%) }
  .hero__copy { top: auto; left: 1.25rem; right: 1.25rem; bottom: calc(12.25vw + 1.5rem); max-width: 640px }
  .hero__headline { font-size: clamp(3rem, 13.4vw, 6.2rem) }
  .hero__tag { right: auto; left: 1.25rem; bottom: auto; top: calc(var(--nav-h) + 42px) }
  .plans { grid-template-columns: 1fr }
  .pricing-deck { margin: 3.2rem auto 0 }
  .footer__grid { grid-template-columns: 1fr 1fr }
  .ask, .footer__meta { grid-column: 1 / -1 }
  .footer__meta { justify-content: flex-start }
}

/* Телефон.
   шаблон: слово первого экрана не помещается в ширину и обрезается, названия в углах портала и
   строка портала рассчитаны на 4–5 знаков, кадр вступления ложится на текст. */
@media (max-width: 760px) {
  .hero { min-height: 620px }
  .hero__micro span:last-child { display: none }
  .hero__copy { left: 1.1rem; right: 1.1rem; max-width: none }
  .hero__headline { margin: .7rem 0 1rem }
  .hero__cta { margin-top: 1.2rem }
  .hero__cta .button { flex: 1 1 100%; justify-content: space-between }
  .hero__tag { left: 1.1rem; font-size: 10px }
  .portal__corner { font-size: 11.6vw; top: calc(var(--nav-h) + .4rem) }
  .portal__labels { font-size: 10px }
  .portal__title { flex-direction: column; justify-content: center; gap: .08em; font-size: 17vw; padding: 0 }
  .intro-fold__statement { font-size: 9.6vw; margin-top: 9vh; max-width: none }
  .manifesto__line { font-size: 8.4vw; padding: 0 1rem }
  .manifesto__line span { text-wrap: balance }
  .side-index { display: none }
  .glyph { font-size: 9vw }
  .tile--e { width: 30vw }
  .project--wave > img { object-position: 26% 24% }
  .project--echo > img { object-position: 42% 30% }
  .project--padre > img { object-position: 62% 36% }
  .project__copy { right: 1.25rem; bottom: 6.6rem }
  /* на телефоне текст стоит выше и шире: на белой майке Wave Motion подпись и цены терялись — затемнение плотнее и выше */
  .project__shade { background: linear-gradient(0deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .62) 36%, transparent 64%) }
  .project__visit { width: 76px; height: 76px }
  .story__intro h2, .services h2, .plans h2, .faq h2, .voices h2, .journal h2 { font-size: 10.4vw }
  .stat-card { min-height: 0; padding: 1.4rem 0 0 }
  .stat-card strong { margin-top: 1.5rem }
  .service-list b { justify-self: start }
  .pricing-deck { height: 600px }
  .pricing-deck__hint { top: -2.9rem }
  .plan-card { padding: 1.2rem 1.35rem 1.4rem }
  .plan-card__img { width: 56% }
  .plan-card h3 { font-size: 2.5rem }
  .plan-card strong { margin: .7rem 0 .5rem; font-size: 1.8rem }
  .contact h2 { font-size: 12.5vw }
  .footer__marquee { font-size: 15vw }
}

/* низкий телефон: абзац первого экрана уступает место лицу на фото */
@media (max-width: 760px) and (max-height: 720px) { .hero__dek { display: none } }

/* Без скрипта и при prefers-reduced-motion (нет класса motion): всё в конечном виде, без закреплений.
   шаблон: при prefers-reduced-motion портал остаётся пустой сценой на 430vh с кадром 12vw, вступление
   и манифест — пустыми экранами, колода показывает одну карточку. */
html:not(.motion) .hero__headline span, html:not(.motion) .reveal { animation: none; opacity: 1; transform: none }
html:not(.motion) .hero__image { animation: none; transform: none }
html:not(.motion) .tile { opacity: 1; transform: none }
html:not(.motion) .portal { height: auto }
html:not(.motion) .portal__stage { position: relative; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; padding: calc(var(--nav-h) + 1rem) 1.25rem 1.4rem }
html:not(.motion) .portal__corner { position: static }
html:not(.motion) .portal__corner--right { text-align: right }
html:not(.motion) .portal__frame { position: relative; left: auto; top: auto; transform: none; grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 16 / 9 }
html:not(.motion) .portal__frame img { transform: none }
html:not(.motion) .portal__dot, html:not(.motion) .portal__title { display: none }
html:not(.motion) .portal__labels { position: static; grid-column: 1 / -1 }
html:not(.motion) .intro-fold { height: auto }
html:not(.motion) .intro-fold__sticky { position: relative; height: auto; padding-bottom: 4rem; row-gap: 2rem }
html:not(.motion) .intro-fold__float { position: relative; right: auto; bottom: auto; grid-column: -2; width: min(340px, 62vw); height: auto; aspect-ratio: 2 / 3 }
html:not(.motion) .intro-fold__index { position: static; grid-column: -2 }
html:not(.motion) .manifesto { height: auto }
html:not(.motion) .manifesto__sticky { position: relative; min-height: 100vh }
html:not(.motion) .manifesto__line span { opacity: 1 }
html:not(.motion) .pricing-deck { height: auto; display: grid; gap: 1rem; margin-top: 2rem }
html:not(.motion) .pricing-deck__hint { display: none }
html:not(.motion) .plan-card { position: relative; inset: auto; cursor: auto; user-select: auto }
html:not(.motion) .accordion p { max-height: none; opacity: 1; padding: 0 2rem 1.6rem 1.45rem }
html:not(.motion) .footer__marquee { animation: none }
html:not(.js) .nav { position: absolute }
html:not(.js) .nav__burger { display: none }
@media (max-width: 760px) {
  html:not(.motion) .accordion p { padding: 0 .65rem 1.2rem }
  html:not(.motion) .portal__corner { font-size: 10.4vw; white-space: nowrap }
  html:not(.motion) .intro-fold__float, html:not(.motion) .intro-fold__index { grid-column: 1 }
}