/*
Theme Name: Airo BTQ
Theme URI: https://airobtq.com
Author: Karina Loboda
Version: 2.1.0
Text Domain: airo-btq
*/

/* Начертания извлечены из HelveticaNeue.ttc (в нём 14 шрифтов) и подключены
   по отдельности. Раньше вся коллекция объявлялась одним @font-face на диапазон
   100–900, из-за чего браузер рисовал все веса одинаково — макетные 400 и 500
   не отличались от 300. Заодно 4.4 МБ превратились в 348 КБ. */
@font-face {
  font-family: 'HelveticaNeue';
  src: url('fonts/HelveticaNeue-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HelveticaNeue';
  src: url('fonts/HelveticaNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HelveticaNeue';
  src: url('fonts/HelveticaNeue-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --font:      'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --black:     #1D1D1D;
  --brown:     #382B22;
  --gray:      #8D8D8D;
  --lightgray: #D9D9D9;
  --line:      #D9D9D9;
  --pad:       46px;
  --header-h:  80px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background:#fff; color:var(--black); font-family:var(--font); font-weight:300; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }

/* ── HEADER ── */
.site-header {
  position: fixed; top:0; left:0; right:0;
  height: var(--header-h);
  background: #fff;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
}

.site-logo img { width: 160px; height: auto; }

.site-nav { display: flex; align-items: flex-start; gap: 50px; }

.nav-pages {
  display: flex;
  flex-direction: column;
  line-height: 1.6;
}
.nav-pages a {
  font-size: 18px;
  font-weight: 300;
  color: var(--black);
  text-decoration: none;
  transition: color .2s;
}
.nav-pages a:hover { color: var(--brown); text-decoration: underline; text-underline-offset: 3px; }

.nav-contact a {
  font-size: 18px;
  font-weight: 300;
  color: var(--black);
  text-decoration: none;
  transition: color .2s;
}
.nav-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }

.page-wrap { padding-top: var(--header-h); }

/* ── HERO ── */
.hero {
  height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
}

.hero-marquee {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 380px 1fr 1fr;
  align-items: center;
  padding: 0 var(--pad);
}

.hero-word {
  font-size: 22px;
  font-weight: 300;
  color: var(--gray);
  text-align: center;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.hero-photo-wrap {
  width: 380px;
  height: 100%;
  max-height: calc(100vh - var(--header-h) - 70px);
  overflow: hidden;
  position: relative;
}

.hero-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-photo-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  pointer-events: none;
  width: 90%;
}
.hero-photo-label .sub {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}
.hero-photo-label .main {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* "KNOW MORE" — прибита к низу первого экрана */
.hero-cta {
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}
.hero-cta-arrow { font-size: 16px; color: var(--black); line-height: 1; }
.hero-cta a {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  text-underline-offset: 3px;
}
.hero-cta a:hover {
  color: var(--brown);
  text-decoration: underline;
}

/* ── INTRO ── */
.intro { padding: 130px var(--pad) 100px; }
.intro-tagline { font-size: 17px; font-weight: 300; line-height: 1.7; max-width: 560px; margin-bottom: 24px; }
.intro-body { font-size: 17px; font-weight: 300; line-height: 1.7; max-width: 420px; margin-bottom: 20px; }
.intro-explore { font-size: 17px; font-weight: 300; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 6px; }
.intro-explore:hover { color: var(--brown); }

/* ── WORKS GRID ── */
.works-grid { padding: 120px var(--pad); display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; align-items: end; }
.work-item img { width: 100%; object-fit: cover; display: block; }
.work-item:nth-child(1) img { aspect-ratio: 1/1; }
.work-item:nth-child(2) img { aspect-ratio: 1/1.3; }
.work-item:nth-child(3) img { aspect-ratio: 1/1.3; }
.work-item:nth-child(4) img { aspect-ratio: 1/1; }
.work-caption { font-size: 14px; font-weight: 300; color: var(--gray); margin-top: 8px; }

/* ── DIAGRAM ── */
.diagram-section { padding: 120px var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.diagram-section img { width: 100%; }
.diagram-text { font-size: 20px; font-weight: 300; line-height: 1.6; text-align: right; max-width: 340px; margin-left: auto; }

/* ── SERVICES ── */
.services-section { padding: 120px var(--pad); display: grid; grid-template-columns: 1fr 1fr; }
.services-label { font-size: 22px; font-weight: 300; padding-top: 20px; }
.accordion { width: 100%; }
.acc-item { border-top: 1px solid var(--line); }
.acc-item:last-child { border-bottom: 1px solid var(--line); }
.acc-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; cursor: pointer; }
.acc-title { font-size: 22px; font-weight: 300; }
.acc-toggle { font-size: 22px; color: var(--gray); flex-shrink: 0; }
.acc-body { display: none; padding-bottom: 20px; font-size: 17px; font-weight: 300; line-height: 1.7; }
.acc-item.open .acc-toggle { transform: none; }
.acc-item.open .acc-body { display: block; }

/* ── BOTTOM CTA ── */
.bottom-cta { padding: 120px var(--pad); text-align: center; }
.bottom-cta-photo { width: 380px; margin: 0 auto 48px; aspect-ratio: 380/440; overflow: hidden; }
.bottom-cta-photo img { width: 100%; height: 100%; object-fit: cover; }
.bottom-cta-text { font-size: 22px; font-weight: 300; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 32px; }
.btn-start { font-size: 22px; font-weight: 300; text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; background: none; border: none; cursor: pointer; padding: 0; color: var(--black); }
.btn-start:hover { color: var(--brown); }

/* ── FOOTER ── */
.site-footer { border-top: 1px solid var(--line); padding: 40px var(--pad); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.footer-left {}
.footer-logo img { width: 200px; height: auto; margin-bottom: 12px; }
.footer-copy { font-size: 15px; font-weight: 300; color: var(--gray); }
.footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.footer-social { display: flex; gap: 20px; }
.footer-social a { font-size: 20px; font-weight: 300; color: var(--gray); transition: color .2s; }
.footer-social a:hover { color: var(--black); }
.footer-email { font-size: 20px; font-weight: 300; color: var(--gray); transition: color .2s; }
.footer-email:hover { color: var(--black); }
.footer-start { background: var(--lightgray); padding: 16px 28px; font-size: 22px; font-weight: 300; color: var(--black); text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; gap: 8px; transition: background .2s; }
.footer-start:hover { background: #c0c0c0; }

/* ── STUDIO PAGE ── */
.studio-layout { padding: 60px var(--pad) 80px; display: grid; grid-template-columns: 200px 1fr 1fr; gap: 80px; align-items: start; }
.studio-sidebar-title { font-size: 22px; font-weight: 700; text-transform: uppercase; margin-bottom: 28px; }
.studio-sidebar-nav a { display: block; font-size: 18px; font-weight: 300; color: var(--gray); margin-bottom: 8px; transition: color .2s; text-decoration: none; }
.studio-sidebar-nav a:hover { color: var(--black); }
.studio-sidebar-nav a.active { color: var(--black); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.studio-text { font-size: 20px; font-weight: 300; line-height: 1.7; }
.studio-text p { margin-bottom: 24px; }
.studio-founder { margin-top: 40px; }
.studio-founder-name { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 16px; }
.studio-founder-name::after { content: ''; width: 40px; height: 1px; background: var(--gray); flex-shrink: 0; }
.studio-founder-role { font-size: 13px; font-weight: 300; color: var(--gray); margin-top: 4px; }
.studio-photo img { width: 100%; height: 600px; object-fit: cover; object-position: top; }
.studio-vibe-layout { padding: 0 var(--pad) 80px; display: grid; grid-template-columns: 550px 1fr; gap: 20px; }
.studio-vibe-photos { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 32px; }
.studio-vibe-photos img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.studio-vibe-text { font-size: 20px; font-weight: 300; line-height: 1.7; }
.studio-approach-layout { padding: 0 var(--pad) 80px; display: grid; grid-template-columns: 550px 1fr; gap: 20px; }
.approach-diagram img { width: 100%; margin-bottom: 40px; }
.approach-texts { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.approach-text { font-size: 20px; font-weight: 300; line-height: 1.7; }
.approach-text p { margin-bottom: 20px; }

/* ── SERVICES PAGE ── */
.services-layout { padding: 60px var(--pad) 80px; display: grid; grid-template-columns: 200px 1fr 1fr; gap: 80px; align-items: start; }
.services-sidebar-title { font-size: 22px; font-weight: 700; text-transform: uppercase; margin-bottom: 28px; }
.services-sidebar-nav a { display: block; font-size: 18px; font-weight: 300; color: var(--gray); margin-bottom: 8px; transition: color .2s; text-decoration: none; }
.services-sidebar-nav a.active { color: var(--black); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.services-text { font-size: 20px; font-weight: 300; line-height: 1.7; }
.services-photos { display: flex; flex-direction: column; gap: 12px; }
.services-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ── PORTFOLIO PAGE ── */
.portfolio-layout { padding: 60px var(--pad) 80px; }
.portfolio-title { font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 48px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0 16px; }
.portfolio-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.portfolio-item-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 40px; }
.portfolio-item-name { font-size: 14px; font-weight: 300; }
.portfolio-item-explore { font-size: 14px; font-weight: 300; text-decoration: underline; text-underline-offset: 3px; }

/* ── CONTACT PAGE ── */
.contact-layout { padding: 60px var(--pad) 80px; display: grid; grid-template-columns: 200px 1fr 1fr 1fr; gap: 60px; align-items: start; }
.contact-title { font-size: 22px; font-weight: 700; text-transform: uppercase; }
.contact-col { font-size: 20px; font-weight: 300; line-height: 1.7; }
.contact-col a { text-decoration: underline; text-underline-offset: 3px; }
.contact-col .contact-email { display: block; margin: 20px 0; }
.contact-socials-label { font-size: 20px; font-weight: 300; }
.contact-socials-links { font-size: 20px; font-weight: 300; line-height: 1.7; }
.btn-start-project { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 300; text-decoration: underline; text-underline-offset: 4px; margin-top: 32px; }
.btn-start-project:hover { color: var(--brown); }
.contact-photos { display: flex; flex-direction: row; gap: 12px; grid-column: 4; align-self: end; }
.contact-photos img { width: 160px; height: 200px; object-fit: cover; }

/* ── ANIMATIONS ── */
.fade-in { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity: 1; transform: none; }

/* ── RESPONSIVE ── */
@media(max-width:1100px) {
  :root { --pad: 32px; }
  .hero-marquee { grid-template-columns: 1fr 1fr 300px 1fr 1fr; }
  .hero-photo-wrap { width: 300px; }
}
@media (max-width: 900px) {
  :root { --pad: 24px; --header-h: 64px; }
  .hero-marquee { grid-template-columns: 80px 260px 80px; }
  .hero-word:nth-child(1), .hero-word:nth-child(2) { display: none; }
  .hero-word:nth-child(4), .hero-word:nth-child(5) { display: none; }
  .works-grid { grid-template-columns: repeat(2,1fr); }
  .diagram-section { grid-template-columns: 1fr; }
  .diagram-text { text-align: left; margin: 0; }
  .services-section { grid-template-columns: 1fr; }
  .studio-layout { grid-template-columns: 160px 1fr; }
  .studio-layout .studio-photo { display: none; }
  .services-layout, .contact-layout { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  :root { --pad: 16px; }
  .nav-pages { display: none; }
  .works-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .studio-vibe-photos { grid-template-columns: 1fr; }
  .approach-texts { grid-template-columns: 1fr; }
}

/* ── LOGO: занимает ~33% ширины страницы ── */
.site-logo img {
  width: clamp(160px, 22vw, 260px);
  height: auto;
}

/* ── NAV: точные позиции из Figma (81% и 91%) ── */
.site-nav {
  position: absolute;
  right: var(--pad);
  top: 0;
  height: var(--header-h);
  display: flex;
  align-items: flex-start;
  padding-top: 22px;
  gap: 0;
}
.nav-pages {
  margin-right: 80px;
}

/* ── HERO PHOTO: точное соотношение из Figma h/w=1.25 ── */
.hero-marquee {
  grid-template-columns: 1fr 1fr 33vw 1fr 1fr;
}
.hero-photo-wrap {
  width: 33vw;
  max-width: 500px;
  aspect-ratio: unset;
  height: calc(100vh - var(--header-h) - 70px);
}

/* ── HERO FIX v2.2: точная симметрия из Figma ── */
/* Три равные колонки: 33.4% | 33.1% | 33.5% */
.hero-marquee {
  grid-template-columns: 1fr 1fr 33vw 1fr 1fr !important;
  padding: 0 46px !important;
}

/* Фото: вертикальное portrait, занимает 76% высоты экрана */
.hero-photo-wrap {
  width: 33vw !important;
  max-width: none !important;
  height: calc((100vh - var(--header-h)) * 0.9) !important;
  aspect-ratio: unset !important;
}

/* Слова marquee: равномерно в своих колонках */
.hero-word {
  text-align: center !important;
}

/* ── FIX v2.3 ── */

/* STRATEGY выровнен по левому краю как логотип */
.hero-marquee {
  grid-template-columns: 160px 1fr 33vw 1fr 160px !important;
  padding: 0 46px !important;
  column-gap: 0 !important;
}
.hero-word:nth-child(1) { text-align: left !important; }
.hero-word:nth-child(2) { text-align: center !important; }
.hero-word:nth-child(4) { text-align: center !important; }
.hero-word:nth-child(5) { text-align: right !important; }

/* Фото горизонтальное — широкое, кадрируем по центру */
.hero-photo-wrap {
  width: 33vw !important;
  height: calc((100vh - var(--header-h)) * 0.85) !important;
  aspect-ratio: unset !important;
}
.hero-photo-wrap img {
  object-fit: cover !important;
  object-position: center top !important;
}

/* ── FIX v2.4: PACKAGING DESIGN в одну строку ── */
.hero-word {
  white-space: nowrap !important;
  font-size: clamp(11px, 1.2vw, 22px) !important;
}

/* ── FIX v2.5: уменьшить отступы между словами ── */
.hero-marquee {
  column-gap: 0 !important;
  padding: 0 20px !important;
}
.hero-word {
  font-size: 18px !important;
}

/* ── FIX v2.6: все слова по центру своих колонок ── */
.hero-marquee {
  grid-template-columns: 1fr 1fr 33vw 1fr 1fr !important;
  padding: 0 40px !important;
}
.hero-word {
  text-align: center !important;
  font-size: 16px !important;
  white-space: nowrap !important;
}

/* ── FIX v2.7: шрифт marquee = размер текста на фото ── */
.hero-word {
  font-size: 22px !important;
}

/* ── FIX v2.8: фото квадратные, маленькие, как в макете ── */
.works-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  align-items: end !important;
}
.work-item img {
  aspect-ratio: 1/1 !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
/* Отменяем разные пропорции */
.work-item:nth-child(1) img,
.work-item:nth-child(2) img,
.work-item:nth-child(3) img,
.work-item:nth-child(4) img {
  aspect-ratio: 1/1 !important;
}

/* ── FIX v3.2: 2 центральных фото рядом ── */
.works-grid {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  padding: 120px var(--pad) !important;
}

.work-item {
  width: 220px !important;
  flex-shrink: 0 !important;
}

.work-item img {
  width: 220px !important;
  height: 220px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  aspect-ratio: 1/1 !important;
}

/* 2-е и 3-е фото — вплотную друг к другу */
.work-item:nth-child(2) { margin-right: 0 !important; }
.work-item:nth-child(3) { margin-left: 4px !important; }

/* Группируем центральные два вместе */
.works-grid {
  gap: 0 !important;
}
.work-item:nth-child(1) { margin-right: auto !important; }
.work-item:nth-child(4) { margin-left: auto !important; }

/* ── DIAGRAM DESKTOP (final) ── */
.diagram-section {
  display: block !important;
  position: relative !important;
  padding: 120px var(--pad) !important;
  min-height: unset !important;
}
.diagram-section img {
  width: 90% !important;
  max-width: 1200px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  mix-blend-mode: multiply !important;
}
.diagram-text {
  position: absolute !important;
  bottom: 250px !important;
  right: var(--pad) !important;
  text-align: right !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  max-width: 280px !important;
  padding-bottom: 0 !important;
}

/* ── SERVICES SECTION FIX ── */
.services-label {
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.acc-title {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 20px !important;
  color: var(--gray) !important;
}
.acc-item.open .acc-title {
  color: var(--black) !important;
}

/* Фото CTA опустить ниже */
.bottom-cta {
  padding-top: 120px !important;
}

/* ── FOOTER FIX ── */
.site-footer {
  padding: 24px var(--pad) !important;
  align-items: center !important;
}
.footer-logo img {
  width: 120px !important;
  margin-bottom: 6px !important;
}
.footer-copy {
  font-size: 13px !important;
}
.footer-right {
  align-items: flex-end !important;
  gap: 6px !important;
}
.footer-social {
  gap: 16px !important;
}
.footer-social a,
.footer-email {
  font-size: 16px !important;
}
.footer-start {
  font-size: 16px !important;
  padding: 14px 24px !important;
  margin-right: 0 !important;
}

/* ── FOOTER FINAL FIX ── */
.site-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  padding: 24px var(--pad) 0 var(--pad) !important;
  gap: 0 !important;
}
.footer-left {
  flex-shrink: 0 !important;
}
.footer-logo img {
  width: 100px !important;
  margin-bottom: 4px !important;
}
.footer-copy { font-size: 12px !important; }

/* Соцсети + email — правый блок без кнопки */
.footer-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  margin-right: 20px !important;
}
.footer-social { gap: 16px !important; }
.footer-social a, .footer-email { font-size: 15px !important; }

/* START A PROJECT — вплотную к правому краю, без отступа */
.footer-start {
  align-self: flex-end !important;
  font-size: 15px !important;
  padding: 20px 28px !important;
  margin-right: calc(-1 * var(--pad)) !important;
  flex-shrink: 0 !important;
}

/* ── FOOTER TAK SDELAI ── */
.site-footer {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: end !important;
  padding: 32px 0 0 var(--pad) !important;
  gap: 0 !important;
}
.footer-left { align-self: end !important; }
.footer-logo img {
  width: 280px !important;
  margin-bottom: 8px !important;
}
.footer-copy { font-size: 13px !important; }

.footer-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding-bottom: 16px !important;
  margin: 0 !important;
}
.footer-social { gap: 20px !important; }
.footer-social a, .footer-email {
  font-size: 16px !important;
  color: var(--black) !important;
}

.footer-start {
  align-self: end !important;
  font-size: 16px !important;
  padding: 28px 36px !important;
  margin: 0 !important;
  background: var(--lightgray) !important;
  text-decoration: underline !important;
}

/* ── FOOTER EXACT MATCH ── */
.site-footer {
  display: grid !important;
  grid-template-columns: 420px 1fr 200px !important;
  align-items: end !important;
  padding: 40px 0 0 var(--pad) !important;
  gap: 0 !important;
  overflow: hidden !important;
}
.footer-left {
  align-self: end !important;
  padding-bottom: 12px !important;
}
.footer-logo img {
  width: 380px !important;
  margin-bottom: 10px !important;
}
.footer-copy { font-size: 13px !important; color: var(--gray) !important; }

.footer-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding-bottom: 20px !important;
}
.footer-social { gap: 20px !important; }
.footer-social a { font-size: 16px !important; color: var(--black) !important; }
.footer-email { font-size: 16px !important; color: var(--black) !important; }

.footer-start {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  background: var(--lightgray) !important;
  padding: 0 !important;
  margin: 0 !important;
  align-self: stretch !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 80px !important;
}

/* ── FOOTER FINAL CORRECT ── */
.site-footer {
  display: flex !important;
  align-items: flex-end !important;
  padding: 0 0 0 var(--pad) !important;
  gap: 0 !important;
  min-height: 120px !important;
}
.footer-left {
  flex-shrink: 0 !important;
  padding-bottom: 12px !important;
  width: 320px !important;
}
.footer-logo img {
  width: 320px !important;
  margin-bottom: 8px !important;
}
.footer-copy { font-size: 12px !important; }

/* Центральная часть — контакты */
.footer-right {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding-left: 60px !important;
  padding-bottom: 16px !important;
  gap: 6px !important;
  margin: 0 !important;
}
.footer-social { gap: 20px !important; }
.footer-social a { font-size: 15px !important; color: var(--black) !important; }
.footer-email { font-size: 15px !important; color: var(--black) !important; }

/* Серая кнопка — прижата к правому и нижнему краю */
.footer-start {
  flex-shrink: 0 !important;
  align-self: flex-end !important;
  background: #D9D9D9 !important;
  padding: 20px 40px !important;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  white-space: nowrap !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ══ FOOTER CLEAN FINAL — перекрывает всё выше ══ */
.site-footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding: 0 0 0 var(--pad) !important;
  border-top: 1px solid var(--line) !important;
  gap: 0 !important;
  min-height: 110px !important;
}
.footer-left {
  width: 420px !important;
  flex-shrink: 0 !important;
  padding-bottom: 14px !important;
}
.footer-logo img {
  width: 420px !important;
  height: auto !important;
  margin-bottom: 8px !important;
}
.footer-copy {
  font-size: 12px !important;
  color: var(--gray) !important;
}
.footer-right {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: 0 0 14px 40px !important;
  margin: 0 !important;
  gap: 6px !important;
}
.footer-social {
  display: flex !important;
  flex-direction: row !important;
  gap: 20px !important;
}
.footer-social a {
  font-size: 15px !important;
  font-weight: 300 !important;
  color: var(--black) !important;
}
.footer-email {
  font-size: 15px !important;
  font-weight: 300 !important;
  color: var(--black) !important;
}
.footer-start {
  flex-shrink: 0 !important;
  align-self: flex-end !important;
  height: 110px !important;
  padding: 0 36px !important;
  background: #D9D9D9 !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: var(--black) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

/* ══ FOOTER NEW STRUCTURE ══ */
.site-footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  border-top: 1px solid var(--line) !important;
  padding: 0 0 0 var(--pad) !important;
  gap: 0 !important;
  min-height: 100px !important;
}
.footer-logo-block {
  width: 380px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding-bottom: 12px !important;
}
.footer-logo-img {
  width: 380px !important;
  height: auto !important;
  margin-bottom: 8px !important;
}
.footer-contacts {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-left: 60px !important;
  gap: 6px !important;
}
.footer-contacts .footer-social {
  display: flex !important;
  gap: 20px !important;
}
.footer-contacts .footer-social a {
  font-size: 15px !important;
  font-weight: 300 !important;
  color: var(--black) !important;
  text-decoration: none !important;
}
.footer-contacts .footer-email {
  font-size: 15px !important;
  font-weight: 300 !important;
  color: var(--black) !important;
  text-decoration: none !important;
}
.footer-start {
  flex-shrink: 0 !important;
  width: 220px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #D9D9D9 !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: var(--black) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  white-space: nowrap !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── LOGO 2X ── */
.footer-logo-block { width: 760px !important; }
.footer-logo-img { width: 160px !important; }

/* ── FOOTER TEXT BIGGER ── */
.footer-contacts .footer-social a { font-size: 22px !important; }
.footer-contacts .footer-email { font-size: 22px !important; }
.footer-contacts { gap: 10px !important; }
.footer-start { font-size: 22px !important; width: 280px !important; font-weight: 400 !important; }

/* ── FOOTER: no border, wider button ── */
.site-footer { border-top: none !important; }
.footer-start { width: 340px !important; }

/* ── STUDIO PAGE — sidebar fixed | text | photo+founder ── */
.studio-layout {
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  column-gap: 20px !important;
  align-items: start !important;
  padding: 60px 80px 80px 780px !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Левая колонка с навигацией — fixed, всегда видна */
.studio-sidebar {
  position: fixed !important;
  top: calc(var(--header-h) + 60px) !important;
  left: 80px !important;
  width: 180px !important;
}

.studio-sidebar-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 28px !important;
  color: var(--black) !important;
}

.studio-sidebar-nav a {
  display: block !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #b8b8b8 !important;
  margin-bottom: 10px !important;
  text-decoration: none !important;
}

.studio-sidebar-nav a.active {
  color: var(--black) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

/* Текст — средняя колонка */
.studio-text {
  max-width: 380px !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  font-weight: 300 !important;
}

.studio-text > p {
  margin-bottom: 24px !important;
}

/* Правая колонка: фото + подпись под ним */
.studio-photo {
  position: static !important;
  width: 100% !important;
  max-width: 320px !important;
  margin-top: 220px !important;
}

.studio-photo img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* KARINA LOBODA — под фото */
.studio-founder {
  margin-top: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.studio-founder-name {
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  color: var(--black) !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.studio-founder-name::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: #c8c8c8 !important;
  max-width: 80px !important;
}

.studio-founder-role {
  font-size: 13px !important;
  font-weight: 300 !important;
  color: #999 !important;
  margin-top: 0 !important;
}

/* Подчёркивание активной ссылки в верхнем меню */
.nav-pages a.active {
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  text-decoration-color: var(--black) !important;
}

/* Studio Vibe & Approach */
.studio-vibe-layout,
.studio-approach-layout {
  display: grid !important;
  grid-template-columns: 700px 1fr !important;
  column-gap: 20px !important;
  padding: 0 80px 80px 80px !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.studio-vibe-layout > div,
.studio-approach-layout > div {
  grid-column: 2 !important;
}

/* Mobile */
@media (max-width: 900px) {
  .studio-layout {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .studio-sidebar { position: static !important; }
  .studio-text { max-width: 100% !important; }
  .studio-photo { max-width: 400px !important; }
}

/* ── FLOATING PROJECT BUTTON + POPUP ── */
.project-btn-wrap {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9999;
}

.project-btn {
  background: #e0e0e0;
  border: none;
  padding: 28px 48px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.project-btn:hover { background: #d0d0d0; }

/* Overlay */
.project-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.3);
  justify-content: flex-end;
  align-items: flex-end;
}

.project-overlay.active { display: flex; }

/* Popup */
.project-popup {
  background: #e0e0e0;
  width: 100%;
  max-width: 560px;
  max-height: 96vh;
  overflow-y: auto;
  padding: 24px 36px 36px;
  position: relative;
}

.project-close {
  position: absolute;
  top: 16px;
  left: 20px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 400;
  color: #888;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.05em;
}

.project-title {
  font-size: 32px;
  font-weight: 300;
  font-family: 'Helvetica Neue', sans-serif;
  color: #1a1a1a;
  margin: 16px 0 12px;
  line-height: 1.15;
}

.project-subtitle {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #666;
  text-transform: uppercase;
  line-height: 1.6;
  margin-bottom: 16px;
}

.project-success {
  color: #3a7a3a;
  font-size: 13px;
  margin-bottom: 12px;
}

/* Form rows */
.pf-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid #aaa;
  padding: 10px 0;
  gap: 16px;
}

.pf-row label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1a1a;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 120px;
}

.pf-row input,
.pf-row select {
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
  text-align: right;
  width: 100%;
  cursor: pointer;
}

.pf-row input::placeholder { color: #999; }
.pf-row select { color: #888; cursor: pointer; }

.pf-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 24px;
  padding-bottom: 8px;
}

.pf-send {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a1a1a;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ── NEW POPUP LAYOUT ── */
.project-popup {
  background: #e0e0e0;
  width: 100%;
  max-width: 960px !important;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative;
  display: flex;
  flex-direction: column;
}

.project-close {
  position: absolute;
  top: 16px;
  left: 20px;
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 400;
  color: #888;
  cursor: pointer;
  font-family: inherit;
  z-index: 10;
}

.project-popup-inner {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100vh;
  overflow: hidden;
}

.project-popup-left {
  padding: 48px 32px 48px 40px;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid #ccc;
}

.project-popup-right {
  padding: 24px 36px 24px 28px;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.project-popup-right .project-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.project-title {
  font-size: 28px !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  margin: 0 0 16px !important;
  color: #1a1a1a;
}

.project-subtitle {
  font-size: 11px !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: #666;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

.project-form-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 12px;
}

/* Inputs */
.pf-row {
  border-bottom: 1px solid #bbb !important;
  padding: 4px 0 !important;
}

.pf-row input {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 11px;
  color: #1a1a1a;
}

.pf-row input::placeholder { color: #aaa; font-size: 11px; }

/* Textarea */
.pf-textarea { border-bottom: 1px solid #bbb !important; padding: 4px 0 !important; }
.pf-textarea textarea {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 11px;
  color: #1a1a1a;
  resize: none;
  line-height: 1.4;
}
.pf-textarea textarea::placeholder { color: #aaa; }

/* Chips */
.pf-chips-group { margin: 5px 0; }
.pf-chips-label {
  display: block;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 4px;
}

.pf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.chip {
  background: none;
  border: 1px solid #bbb;
  padding: 3px 9px;
  font-family: inherit;
  font-size: 9px;
  font-weight: 400;
  color: #555;
  cursor: pointer;
  border-radius: 20px;
  transition: all 0.15s;
}

.chip:hover { border-color: #1a1a1a; color: #1a1a1a; }
.chip.selected { background: #1a1a1a; color: #e0e0e0; border-color: #1a1a1a; }

/* Footer */
.pf-footer {
  margin-top: 8px !important;
  padding-bottom: 0 !important;
}

.pf-send {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

.pf-send::after { content: ''; }
.pf-error { color: #c0392b; font-size: 11px; letter-spacing: 0.05em; margin-bottom: 6px; }
.footer-logo-img { width: 160px; height: auto; display: block; }


@media (max-width: 900px) {
  .project-popup-inner { grid-template-columns: 1fr; }
  .project-popup { padding: 24px !important; }
}



/* ══════════════════════════════════════════
   MOBILE — max-width: 900px
══════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Header ── */
  .site-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 20px 16px !important;
  }

  .site-logo img { width: 110px !important; }

  .site-nav {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    gap: 4px 12px !important;
    height: auto !important;
    padding-top: 0 !important;
    max-width: 55% !important;
  }

  .nav-pages {
    display: contents !important;
  }

  .nav-pages a {
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  .nav-contact {
    display: block !important;
    font-size: 14px !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    white-space: nowrap !important;
  }

  /* ── Hero — возвращаем все скрытые слова ── */
  .hero-word:nth-child(1),
  .hero-word:nth-child(2),
  .hero-word:nth-child(4),
  .hero-word:nth-child(5) {
    display: block !important;
    text-align: center !important;
  }

  /* Все слова по центру, одинаковые */
  .hero-word {
    display: block !important;
    font-size: 17px !important;
    text-align: center !important;
    color: #c8c8c8 !important;
    line-height: 1.9 !important;
    letter-spacing: 0.06em !important;
    width: 100% !important;
    height: auto !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    padding: 0 !important;
  }

  /* Фото — на всю ширину без отступов, ПОСЛЕ всех слов */
  .hero-photo-wrap {
    order: 10 !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    overflow: hidden !important;
    margin-top: 20px !important;
    left: auto !important;
    padding: 0 !important;
  }

  .hero-photo-wrap img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Подпись под фото — по центру */
  .hero-photo-label {
    position: static !important;
    transform: none !important;
    text-align: center !important;
    padding: 14px 20px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-photo-label .sub {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    color: #999 !important;
    margin-bottom: 4px !important;
    display: block !important;
    text-transform: uppercase !important;
  }

  .hero-photo-label .main {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    display: block !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
  }

  .hero-cta {
    height: auto !important;
    padding: 16px 20px 8px !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    overflow: hidden !important;
  }

  .hero-cta a {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* ── Hero ── */
  .hero {
    display: block !important;
    min-height: auto !important;
    height: auto !important;
  }

  .hero-marquee {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    gap: 0 !important;
    padding: 40px 20px 0 !important;
    grid-template-columns: none !important;
  }

  .hero-word {
    display: block !important;
    font-size: 18px !important;
    text-align: center !important;
    color: #c8c8c8 !important;
    line-height: 2 !important;
    letter-spacing: 0.06em !important;
    width: 100% !important;
    height: auto !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    padding: 0 !important;
  }

  .hero-photo-wrap {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    overflow: hidden !important;
    margin-top: 24px !important;
    left: auto !important;
  }

  .hero-photo-wrap img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  .hero-photo-label {
    position: static !important;
    transform: none !important;
    color: #1a1a1a !important;
    text-align: center !important;
    padding: 16px 20px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-photo-label .sub {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    color: #999 !important;
    margin-bottom: 6px !important;
    display: block !important;
    text-transform: uppercase !important;
  }

  .hero-photo-label .main {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    display: block !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
  }

  .hero-cta {
    height: auto !important;
    padding: 20px 20px 8px !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
  }

  /* ── Intro ── */
  .intro {
    padding: 32px 20px !important;
    display: block !important;
  }
  .intro-tagline { font-size: 14px !important; line-height: 1.7 !important; margin-bottom: 14px !important; }
  .intro-body { font-size: 14px !important; line-height: 1.7 !important; }
  .intro-explore { font-size: 13px !important; }

  /* ── Works grid — шахматное расположение ── */
  .works-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 0 20px 32px !important;
  }

  .work-item {
    width: 55% !important;
  }

  .work-item:nth-child(1) { align-self: flex-start !important; margin-right: 0 !important; }
  .work-item:nth-child(2) { align-self: flex-end !important; margin-left: 0 !important; margin-right: 0 !important; }
  .work-item:nth-child(3) { align-self: flex-end !important; margin-left: 0 !important; margin-right: 0 !important; }
  .work-item:nth-child(4) { align-self: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; }

  .work-item img { width: 100% !important; height: auto !important; aspect-ratio: 3/4 !important; object-fit: cover !important; }
  .work-caption { font-size: 10px !important; margin-top: 4px !important; }

  /* ── Diagram — убираем overflow ── */
  .diagram-section {
    display: flex !important;
    flex-direction: column !important;
    padding: 32px 20px !important;
    gap: 16px !important;
    overflow: hidden !important;
  }
  .diagram-section img { width: 100% !important; height: auto !important; }
  .diagram-text { font-size: 15px !important; text-align: left !important; margin: 0 !important; position: static !important; max-width: 100% !important; }

  /* ── Services ── */
  .services-section {
    display: block !important;
    padding: 0 20px 32px !important;
  }
  .services-label { font-size: 13px !important; margin-bottom: 16px !important; }
  .acc-title { font-size: 15px !important; }
  .acc-body { font-size: 13px !important; line-height: 1.6 !important; padding: 12px 0 !important; }

  /* ── Bottom CTA ── */
  .bottom-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 32px 20px !important;
    text-align: center !important;
    gap: 0 !important;
  }
  .bottom-cta-photo { width: 100% !important; max-width: 280px !important; margin: 0 auto !important; }
  .bottom-cta-photo img { width: 100% !important; height: auto !important; }
  .bottom-cta-text { font-size: 18px !important; line-height: 1.35 !important; margin: 20px 0 !important; }
  .btn-start { font-size: 13px !important; }

  /* ── Footer ── */
  .site-footer {
    flex-direction: column !important;
    padding: 28px 20px !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }
  .footer-logo-img { width: 80px !important; height: 40px !important; object-fit: contain !important; }
  .footer-copy { font-size: 11px !important; color: #999 !important; }
  .footer-contacts { width: 100% !important; }
  .footer-social {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
    font-size: 14px !important;
  }
  .footer-email { font-size: 13px !important; margin-top: 6px !important; display: block !important; }

  /* ── Floating button ── */
  .project-btn { font-size: 12px !important; padding: 14px 18px !important; }

  /* ── Popup ── */
  .project-popup { max-width: 100% !important; height: 100vh !important; }
  .project-popup-inner { grid-template-columns: 1fr !important; height: 100vh !important; overflow: hidden !important; }
  .project-popup-left {
    padding: 44px 24px 14px !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid #ccc !important;
    justify-content: flex-start !important;
  }
  .project-title { font-size: 20px !important; margin-bottom: 0 !important; }
  .project-subtitle { display: none !important; }
  .project-popup-right { padding: 16px 24px 24px !important; height: calc(100vh - 100px) !important; overflow-y: auto !important; }

  /* ── Studio mobile ── */
  .studio-layout { display: block !important; padding: 32px 20px !important; }
  .studio-sidebar { position: static !important; width: auto !important; left: auto !important; margin-bottom: 24px !important; }
  .studio-text, .studio-photo { display: block !important; max-width: 100% !important; }
  .studio-photo { margin-top: 20px !important; }
  .studio-vibe-layout, .studio-approach-layout { display: block !important; padding: 0 20px 32px !important; }

  /* ── Contact mobile ── */
  .contact-layout { grid-template-columns: 1fr !important; padding: 32px 20px !important; gap: 24px !important; }
  .contact-photos { grid-column: 1 !important; }
  .contact-photos img { width: 45% !important; height: 110px !important; }
}

/* Diagram versions — desktop shows desktop, mobile shows mobile */
.diagram-mobile { display: none; }
.diagram-desktop { display: block; width: 100%; }

.footer-logo-img { width: 80px !important; height: 40px !important; object-fit: contain !important; }.footer-logo-block img { width: 300px !important; height: auto !important; }
/* diagram mobile helpers — desktop handled above */
.footer-logo-block img { width: 380px !important; height: auto !important; }


/* ══ FOOTER FINAL ══ */
.site-footer { border-top: none !important; }
.footer-logo-block { width: auto !important; padding-right: 32px !important; }
.footer-contacts {
  flex: unset !important;
  padding-left: 0 !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}
.footer-contacts .footer-social a,
.footer-contacts .footer-email {
  font-size: 13px !important;
  font-weight: 300 !important;
  color: var(--black) !important;
  text-decoration: none !important;
}

/* ══ FOOTER CONTACTS ALIGN BOTTOM ══ */
.footer-contacts {
  justify-content: flex-end !important;
  padding-bottom: 12px !important;
  padding-left: 32px !important;
}

/* ══ FOOTER CONTACTS LOWER ══ */
.footer-contacts {
  justify-content: flex-end !important;
  padding-bottom: 0px !important;
  align-self: flex-end !important;
}

/* ══ FOOTER CONTACTS TOP ══ */
.footer-contacts {
  align-self: flex-start !important;
  padding-top: 12px !important;
  padding-bottom: 0 !important;
  justify-content: flex-start !important;
}

/* ══ FOOTER CONTACTS SHIFT ══ */
.footer-contacts {
  margin-top: 20px !important;
  margin-left: 40px !important;
  align-self: flex-start !important;
  justify-content: flex-start !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
}

/* ══ FOOTER CONTACTS SHIFT 2 ══ */
.footer-contacts {
  margin-top: 40px !important;
  margin-left: 90px !important;
}

/* ══ FOOTER CONTACTS SHIFT 3 ══ */
.footer-contacts {
  margin-top: 35px !important;
  margin-left: 80px !important;
}

/* ══ FOOTER FONT SIZE ══ */
.footer-contacts .footer-social a,
.footer-contacts .footer-email {
  font-size: 17px !important;
}

/* ══ PROJECT BTN SMALLER ══ */
.project-btn {
  padding: 16px 28px !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
}

/* ══ PROJECT BTN FONT RESTORE ══ */
.project-btn {
  font-size: 18px !important;
  font-weight: 500 !important;
}

/* ══ HEADER OVERLAP FIX ══ */
.site-header {
  z-index: 1000 !important;
  background: #fff !important;
}



/* ══ CONTACT PAGE SPACING ══ */
.contact-layout {
  padding: 120px var(--pad) 120px !important;
}

/* ══ CONTACT PAGE FIXES ══ */
.contact-col { font-size: 17px !important; line-height: 1.7 !important; }
.contact-title { font-size: 17px !important; }
.contact-socials-label { font-size: 17px !important; }
.contact-socials-links { font-size: 17px !important; }
.contact-socials-links a { text-decoration: none !important; }
.contact-socials-links a:hover { text-decoration: underline !important; text-underline-offset: 3px !important; }
.btn-start-project {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  color: var(--black) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  font-family: inherit !important;
  text-transform: uppercase !important;
}

/* ══ CONTACT PHOTOS HORIZONTAL + SOCIALS FIX ══ */
@media (min-width: 901px) {
  .contact-photos img {
    width: 220px !important;
    height: 160px !important;
    object-fit: cover !important;
  }
}
.contact-socials {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin: 20px 0 !important;
}
.contact-socials-links {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}
.contact-socials-links br { display: none !important; }

/* ══ CONTACT SOCIALS SPACING ══ */
.contact-socials-links a {
  margin-right: 4px !important;
}

/* ══ CONTACT SOCIALS COLUMN ══ */
.contact-socials {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 16px !important;
}
.contact-socials-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.contact-socials-links br { display: none !important; }
.contact-socials-links a { margin-right: 0 !important; }

/* ══ CONTACT SOCIALS COMMA VIA CSS ══ */
.contact-socials-links a:not(:last-child)::after {
  content: ',' !important;
}

/* ══ CONTACT PAGE TOP SPACING ══ */
.contact-layout {
  padding-top: 160px !important;
}

/* ══ STUDIO VIBE TEXT 17px ══ */
.studio-vibe-text p { font-size: 17px !important; font-weight: 300 !important; line-height: 1.7 !important; margin-bottom: 16px !important; }

/* ══ STUDIO VIBE TEXT FIX ══ */
.studio-vibe-text p { font-size: 20px !important; font-weight: 300 !important; line-height: 1.7 !important; margin-bottom: 24px !important; }

/* ══ APPROACH TEXT 17px ══ */
.approach-text p { font-size: 17px !important; font-weight: 300 !important; line-height: 1.7 !important; margin-bottom: 24px !important; }

/* ══ APPROACH + VIBE TEXT 17px FINAL ══ */
.approach-text { font-size: 17px !important; }
.studio-vibe-text { font-size: 17px !important; }

/* ══ STUDIO TEXTS 17px FINAL ══ */
.studio-vibe-text,
.studio-vibe-text p,
.approach-text,
.approach-text p {
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
}
.studio-vibe-text p { margin-bottom: 24px !important; }
.approach-text p { margin-bottom: 24px !important; }

/* ══ MOBILE HEADER 2x2 GRID ══ */
@media (max-width: 900px) {
  .site-nav {
    display: grid !important;
    grid-template-columns: auto auto !important;
    gap: 4px 16px !important;
    max-width: 60% !important;
    justify-content: end !important;
    align-items: start !important;
  }
  .nav-pages {
    display: contents !important;
  }
  .nav-pages a,
  .nav-contact {
    font-size: 14px !important;
    white-space: nowrap !important;
    text-align: left !important;
  }
}

/* ══ MOBILE HEADER + HERO ADJUSTMENTS ══ */
@media (max-width: 900px) {
  .nav-pages a,
  .nav-contact {
    font-size: 16px !important;
  }
  .site-nav {
    gap: 8px 24px !important;
  }
  .hero-word {
    font-size: 19px !important;
    margin-bottom: 10px !important;
  }
  .hero-photo-label .sub {
    font-size: 13px !important;
    margin-bottom: 14px !important;
  }
  .hero-photo-label .main {
    font-size: 22px !important;
  }
  .hero-cta {
    margin-top: 24px !important;
  }
}

/* ══ MOBILE HERO COMPACT ══ */
@media (max-width: 900px) {
  .hero-marquee {
    padding-top: 50px !important;
    padding-bottom: 30px !important;
  }
  .hero-word {
    margin-bottom: 2px !important;
    line-height: 1.3 !important;
  }
  .hero-cta {
    margin-top: 40px !important;
  }
}

/* ══ MOBILE NAV ROWS CLOSER + PERCEPTION DARKER ══ */
@media (max-width: 900px) {
  .site-nav {
    gap: 2px 24px !important;
  }
  .hero-photo-label .main {
    font-weight: 500 !important;
    color: #000 !important;
  }
}

/* ══ INTRO SCROLL OFFSET ══ */
.intro,
#intro {
  scroll-margin-top: 80px !important;
}
@media (max-width: 900px) {
  .intro,
  #intro {
    scroll-margin-top: 100px !important;
  }
}

/* ══ INTRO SCROLL OFFSET MOBILE FIX ══ */
@media (max-width: 900px) {
  .intro,
  #intro {
    scroll-margin-top: 30px !important;
  }
}

/* ══ MOBILE FOOTER SOCIALS LEFT ══ */
@media (max-width: 900px) {
  .footer-contacts {
    margin-left: 0 !important;
    margin-top: 16px !important;
    padding-bottom: 80px !important;
  }
  .footer-contacts .footer-social {
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
  }
}

/* ══ MOBILE FOOTER LOGO BIGGER + CENTERED ══ */
@media (max-width: 900px) {
  .footer-logo-img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }
  .footer-logo-block {
    width: 100% !important;
    padding-right: 0 !important;
  }
}

/* ══ MOBILE FOOTER LOGO SIZE ADJUST ══ */
@media (max-width: 900px) {
  .footer-logo-img {
    width: 85% !important;
    margin: 0 auto !important;
  }
}

/* ══ MOBILE FOOTER LOGO ALIGN ══ */
@media (max-width: 900px) {
  .footer-logo-img {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;
  }
  .footer-logo-block {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ══════════════════════════════════════════
   PORTFOLIO PAGE v2 — horizontal carousel
══════════════════════════════════════════ */

.portfolio-layout {
  padding: 100px var(--pad) 80px;
}

.portfolio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.portfolio-title {
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.portfolio-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.portfolio-prev,
.portfolio-next {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  font-family: inherit;
  color: var(--black);
  padding: 0;
  line-height: 1;
  transition: opacity .2s;
}
.portfolio-prev:hover,
.portfolio-next:hover { opacity: .5; }

/* Carousel track — horizontal scroll, no scrollbar */
.portfolio-track {
  display: flex;
  gap: 16px;
  overflow-x: scroll;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.portfolio-track::-webkit-scrollbar { display: none; }

/* Each card */
.portfolio-item {
  flex: 0 0 360px;
}

.portfolio-item-img-wrap {
  display: block;
  overflow: hidden;
}

.portfolio-item img {
  width: 360px;
  height: 430px;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.portfolio-item:hover img { transform: scale(1.03); }

.portfolio-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0 0;
}

.portfolio-item-name {
  font-size: 14px;
  font-weight: 300;
  color: var(--black);
}

.portfolio-item-cat {
  font-size: 14px;
  font-weight: 300;
  color: var(--black);
}

.portfolio-item-explore {
  font-size: 14px;
  font-weight: 300;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.portfolio-item-explore:hover { color: var(--brown); }

/* ── Portfolio responsive ── */
@media (max-width: 900px) {
  .portfolio-item { flex: 0 0 280px; }
  .portfolio-item img { width: 280px; height: 340px; }
}
@media (max-width: 900px) {
  .portfolio-layout { padding: 60px 20px 60px; }
  .portfolio-item { flex: 0 0 75vw; }
  .portfolio-item img { width: 100%; height: 90vw; }
}

/* ══════════════════════════════════════════
   SERVICES PAGE v2 — Figma exact
══════════════════════════════════════════ */

.services-page-wrap {
  /* sidebar is position:fixed (left:80px, width:180px) — grid cols handle offset */
}

/* 3 cols: col1 = spacer under sidebar | col2 = sticky text | col3 = photos flush right */
.service-row {
  display: grid;
  grid-template-columns: 320px 1fr 38vw;
  align-items: start; /* required for sticky child */
  margin-bottom: 8px; /* gap between section modules = same as between photos */
}

/* Service heading — visible on mobile only, hidden on desktop */
.service-heading { display: none; }

/* Text sticks while photos scroll */
.service-text {
  grid-column: 2;
  position: sticky;
  top: calc(var(--header-h) + 60px);
  padding: 60px 60px 80px 20px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.service-text.svc-visible { opacity: 1; }
.service-text p + p { margin-top: 20px; }

/* Photos: col3, 3 images stacked with visible gap, flush right */
.service-photos {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service-photos img {
  flex: none;
  width: 100%;
  height: 56vh;
  object-fit: cover;
  display: block;
}

/* Sidebar nav tweaks */
.services-sidebar-nav a {
  font-size: 16px !important;
  font-weight: 300 !important;
  color: #c8c8c8 !important;
  margin-bottom: 10px !important;
  text-decoration: none !important;
}
.services-sidebar-nav a.active {
  color: var(--black) !important;
  font-weight: 300 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* ── Services responsive ── */
@media (max-width: 1100px) {
  .service-row {
    grid-template-columns: 260px 1fr 36vw;
  }
}

@media (max-width: 900px) {
  .service-row {
    grid-template-columns: 1fr 42vw;
  }
  .service-text {
    grid-column: 1;
    position: sticky;
    top: calc(var(--header-h) + 32px);
    padding: 40px 30px 40px 24px;
  }
  .service-photos {
    grid-column: 2;
  }
  .service-photos img { height: 35vh; }
}

/* 480px services block superseded by mobile block below */


/* ═══════════════════════════════════════
   PROJECT POPUP v2
═══════════════════════════════════════ */

/* Overlay */
.pop-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99000;
  flex-direction: row;
}
.pop-overlay.active { display: flex; }

/* Left: white panel */
.pop-left {
  flex: 1 1 57%;
  background: #fff;
  padding: 28px 46px;
  display: flex;
  flex-direction: column;
}
.pop-logo img { width: 130px; height: auto; display: block; }

/* Right: gray form panel */
.pop-right {
  flex: 0 0 43%;
  background: #e8e8e8;
  overflow-y: auto;
  padding: 44px 52px 60px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100vh;
}

/* Close button */
.pop-close {
  position: absolute;
  top: 28px;
  right: 32px;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  color: var(--black);
  z-index: 2;
  padding: 0;
}
.pop-close:hover { opacity: 0.5; }

/* Typography */
.pop-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  margin: 0 0 16px;
}
.pop-heading {
  font-size: 38px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--black);
  margin: 0 0 12px;
}
.pop-sub {
  font-size: 12px;
  font-weight: 300;
  color: #888;
  line-height: 1.6;
  margin: 0 0 28px;
}

/* 2-col field row */
.pop-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

/* Individual field */
.pop-field {
  margin-bottom: 24px;
}
.pop-field label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 7px;
}
.pop-field input {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #aaa;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 300;
  color: var(--black);
  padding: 5px 0 8px;
  border-radius: 0;
  -webkit-appearance: none;
}
.pop-field input:focus { border-bottom-color: var(--black); }

/* Chip groups */
.pop-group { margin-bottom: 20px; }
.pop-group-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888;
  margin: 0 0 10px;
  display: block;
}

/* Override chip sizing inside popup */
.pop-right .pf-chips { gap: 8px; margin: 0; }
.pop-right .chip {
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 300;
  border-color: #bbb;
  color: #999;
  border-radius: 100px;
}
.pop-right .chip:hover { border-color: var(--black); }
.pop-right .chip.selected {
  background: #888;
  border-color: #888;
  color: #fff;
}

/* Textarea */
.pop-group textarea {
  display: block;
  width: 100%;
  background: #ddd;
  border: 1px solid #c4c4c4;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  color: #444;
  padding: 12px 14px;
  resize: none;
  outline: none;
  min-height: 82px;
  box-sizing: border-box;
}
.pop-group textarea::placeholder { color: #999; }

/* Error */
.pop-error {
  font-size: 11px;
  color: #c0392b;
  letter-spacing: 0.04em;
  margin: 4px 0 8px;
}

/* Submit */
.pop-send-wrap {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
}
.pop-send {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  color: var(--black);
  padding: 0;
}
.pop-send:hover { opacity: 0.6; }

/* ── SUCCESS STATE ── */
.pop-success-wrap {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-height: calc(100vh - 104px);
}
.pop-success-wrap.visible { display: flex; }

.pop-success-check {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.pop-success-bottom { padding-top: 20px; }
.pop-success-title {
  font-size: 34px;
  font-weight: 300;
  line-height: 1.15;
  color: var(--black);
  margin: 0 0 12px;
}
.pop-success-desc {
  font-size: 12px;
  font-weight: 300;
  color: #666;
  line-height: 1.65;
  max-width: 300px;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .pop-left { display: none; }
  .pop-right { flex: 1; padding: 32px 28px 52px; }
  .pop-heading { font-size: 28px; }
}

@media (max-width: 900px) {
  .pop-right { padding: 28px 20px 48px; }
  .pop-row-2 { grid-template-columns: 1fr; }
  .pop-heading { font-size: 24px; }
}


/* ═══════════════════════════════════════
   MOBILE BURGER + DRAWER
═══════════════════════════════════════ */

/* Burger button — hidden on desktop */
.mob-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--black);
  line-height: 0;
  flex-shrink: 0;
}

/* Full-screen drawer overlay — above floating project btn (z-index: 9999) */
.mob-menu {
  position: fixed;
  inset: 0;
  z-index: 99500;
  display: flex;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s 0.35s;
}
.mob-menu.open {
  pointer-events: all;
  visibility: visible;
  transition: visibility 0s;
}

/* Dark strip on the left (tappable to close) */
.mob-menu-bg {
  flex: 0 0 11%;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.35s ease;
  cursor: pointer;
}
.mob-menu.open .mob-menu-bg {
  opacity: 1;
}

/* Gray panel sliding in from right */
.mob-menu-panel {
  flex: 1;
  background: #e8e8e8;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 64px;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mob-menu.open .mob-menu-panel {
  transform: translateX(0);
}

/* "close" text button */
.mob-menu-close {
  align-self: flex-end;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 300;
  color: #888;
  cursor: pointer;
  padding: 0;
  letter-spacing: 0.02em;
}

/* Nav links */
.mob-menu-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 36px;
}
.mob-menu-nav a {
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: #555;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s;
}
.mob-menu-nav a:hover { color: var(--black); }

/* START A PROJECT button */
.mob-menu-start {
  display: block;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 300;
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  padding: 0;
}

/* ══ SINGLE PROJECT PAGE ══════════════════════════════════════ */

/* Project header: title + meta above photos */
.proj-header {
  padding: 48px var(--pad) 36px;
  display: flex;
  align-items: baseline;
  gap: 32px;
}
.proj-title {
  font-size: 22px; font-weight: 300; letter-spacing: 0.02em;
}
.proj-meta { display: flex; gap: 20px; align-items: baseline; }
.proj-cat  { font-size: 12px; font-weight: 300; color: var(--gray); text-transform: uppercase; letter-spacing: 0.1em; }
.proj-year { font-size: 12px; font-weight: 300; color: var(--gray); }

/* Photo blocks */
.proj-block { margin-bottom: 8px; }
.proj-block--full img {
  width: 100%; height: 70vh;
  object-fit: cover; display: block;
}
.proj-block--half {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.proj-block--half img {
  width: 100%; height: 58vh;
  object-fit: cover; display: block;
}

/* Goal text section: left = empty spacer, right = text */
.proj-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 80px var(--pad);
}
.proj-info-spacer { /* intentionally empty */ }
.proj-goal-label {
  font-size: 11px; font-weight: 300;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 24px;
}
.proj-goal-text {
  font-size: 17px; font-weight: 300;
  line-height: 1.85; color: var(--black);
}

/* Back link */
.proj-back { padding: 48px var(--pad) 80px; }
.proj-back a {
  font-size: 14px; font-weight: 300;
  color: var(--gray); text-decoration: none;
  text-underline-offset: 3px;
}
.proj-back a:hover { color: var(--black); text-decoration: underline; }

/* ── Project page — mobile ── */
@media (max-width: 900px) {
  .proj-header { flex-direction: column; gap: 8px; padding: 32px 20px 24px; }
  .proj-title  { font-size: 20px; }
  .proj-block--full img { height: 56vw; }
  .proj-block--half     { gap: 4px; }
  .proj-block--half img { height: 44vw; }
  .proj-info {
    grid-template-columns: 1fr;
    padding: 40px 20px;
  }
  .proj-info-spacer { display: none; }
  .proj-goal-label  { text-align: left; }
  .proj-goal-text   { font-size: 15px; }
  .proj-back { padding: 32px 20px 60px; }
}

/* Footer logo link — neutral on all viewports */
.footer-logo-link {
  display: block;
  line-height: 0;
  text-decoration: none;
}

/* On mobile: show burger, hide desktop nav + full services mobile layout */
@media (max-width: 900px) {
  .mob-burger { display: flex !important; align-items: center; justify-content: center; }
  .site-nav    { display: none !important; }

  /* ── Services sidebar → static centered top block ── */
  #servicesSidebar {
    position: static !important;
    left: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 28px 20px 20px !important;
    text-align: center !important;
    background: none !important;
  }
  .services-sidebar-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--black) !important;
    margin-bottom: 14px !important;
  }
  .services-sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .services-sidebar-nav a {
    font-size: 14px !important;
    color: #c8c8c8 !important;
    font-weight: 300 !important;
    text-decoration: none !important;
  }
  .services-sidebar-nav a.active {
    color: var(--black) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }

  /* ── Service rows: single column ── */
  .service-row {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    margin-bottom: 0 !important;
  }

  /* ── Service text: static, centered, always visible ── */
  .service-text {
    grid-column: 1 !important;
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    text-align: center !important;
    padding: 32px 20px 20px !important;
    font-size: 15px !important;
  }

  /* ── Service heading: visible on mobile ── */
  .service-heading {
    display: block !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    color: var(--black) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    margin-bottom: 16px !important;
    text-align: center !important;
  }

  /* ── Photos: vertical column, full-width, centered ── */
  .service-photos {
    grid-column: 1 !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: auto !important;
    padding: 0 20px !important;
  }
  .service-photos img {
    flex: none !important;
    width: 100% !important;
    height: 72vw !important;
    max-width: 380px !important;
    object-fit: cover !important;
  }

  /* ── Studio page mobile ── */
  .studio-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 32px 20px 40px !important;
    text-align: center !important;
    gap: 24px !important;
  }
  .studio-sidebar {
    position: static !important;
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .studio-sidebar-nav { text-align: center !important; }
  .studio-text {
    text-align: center !important;
    font-size: 15px !important;
    max-width: 100% !important;
  }
  .studio-photo {
    width: 100% !important;
    max-width: 100% !important;
  }
  .studio-photo img {
    width: 100% !important;
    height: 56vh !important;
    object-fit: cover !important;
    object-position: top !important;
  }
  .studio-vibe-layout,
  .studio-approach-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 20px 40px !important;
    text-align: center !important;
  }
  .studio-vibe-photos {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 28px !important;
  }
  .studio-vibe-photos img {
    width: 68vw !important;
    height: 68vw !important;
    max-width: 280px !important;
    max-height: 280px !important;
    object-fit: cover !important;
  }
  .studio-vibe-text {
    text-align: center !important;
    font-size: 15px !important;
  }
  .approach-diagram {
    /* 80vw — доля экрана телефона. Выше 393 ширина упирается в 314:
       столько (80% от 393) диаграмма занимает в мобильном макете, и
       колонка там уже не растёт. Иначе на планшете диаграмма вылезала
       за колонку. */
    width: 80vw !important;
    max-width: 314.4px !important;
    margin: 0 auto 28px !important;
  }
  .approach-diagram img {
    width: 100% !important;
  }
  /* Switch diagram: hide desktop, show mobile vertical */
  .approach-diagram .diagram-desktop { display: none !important; }
  .approach-diagram .diagram-mobile  { display: block !important; width: 100% !important; margin: 0 !important; }
  .approach-texts {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    text-align: center !important;
  }
  .approach-text {
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.7 !important;
    text-align: center !important;
  }

  /* ── Mobile footer ── */
  .site-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 32px 24px 110px !important; /* 110px clears the fixed START A PROJECT button */
    gap: 0 !important;
    min-height: auto !important;
    justify-content: flex-start !important;
    border-top: none !important;
  }

  /* Dissolve the logo-block so logo + copyright
     become direct flex children of the footer */
  .footer-logo-block {
    display: contents !important;
  }

  /* 1 — logo */
  .footer-logo-link {
    order: 1;
    margin-bottom: 40px;
  }
  .footer-logo-img {
    width: 78vw !important;
    max-width: 420px !important;
    height: auto !important;
    margin-bottom: 0 !important;
  }

  /* 2 — social + email block */
  .footer-contacts {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 !important;
    gap: 10px !important;
  }
  .footer-contacts .footer-social {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 16px 24px !important;
  }
  .footer-contacts .footer-social a {
    font-size: 16px !important;
    color: var(--black) !important;
  }
  .footer-contacts .footer-email {
    font-size: 16px !important;
    color: var(--black) !important;
  }

  /* 3 — copyright */
  .footer-copy {
    order: 3;
    margin-top: 24px !important;
    padding-top: 0 !important;
    font-size: 13px !important;
    color: var(--gray) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   СВЕРКА С МАКЕТОМ FIGMA — главная страница
   Файл: airo web, фрейм «home page», ширина 1512.
   Значения сняты через Figma API, не на глаз.
   Блок идёт последним, чтобы перебить более ранние правки темы.
   Ограничен шириной от 901px: мобильные макеты (393px) — отдельная задача.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {

  /* ── Цвет текста: в макете тёплый #382B22, в теме был #1D1D1D ── */
  .site-nav a,
  .intro-tagline, .intro-body, .intro-explore,
  .diagram-text,
  .services-label, .acc-body,
  .bottom-cta-text, .btn-start,
  .footer-social a, .footer-email {
    color: var(--brown) !important;
  }

  /* ── Шапка ── */
  .site-logo img { width: 210px !important; height: 43px !important; object-fit: contain; object-position: left center; }
  .site-nav a { font-size: 18px !important; font-weight: 400 !important; line-height: 23px !important; }

  /* ── Первый экран ── */
  /* Макет: фото 502×416 на отметке x=505, y=239 — горизонтальное, не вертикальное */
  .hero-photo-wrap { width: 502px !important; height: 416px !important; aspect-ratio: auto !important; }
  .hero-photo-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .hero-word { font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important; }
  .hero-photo-label .sub  { font-size: 14px !important; font-weight: 400 !important; line-height: 12.7px !important; }
  .hero-photo-label .main { font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important; }
  /* Макет: стрелка 750–766, подпись 784. Раньше стрелка стояла на 769,
     а подпись я подтягивал вверх — из-за этого они наезжали друг на друга. */
  .hero-cta { display: flex !important; flex-direction: column !important;
              align-items: center !important; justify-content: flex-start !important;
              gap: 18px !important; }
  .hero-cta-arrow { margin: 0 !important; line-height: 16px !important; }
  .hero-cta a { font-size: 14px !important; font-weight: 400 !important; line-height: 12.7px !important;
                position: static !important; top: auto !important; margin: 0 !important; }

  /* ── Интро ── */
  /* В макете это один текстовый блок шириной 759, а не два узких */
  .intro-tagline, .intro-body {
    max-width: 759px !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    line-height: 23px !important;
  }
  .intro-tagline { margin-bottom: 23px !important; }
  .intro-body    { margin-bottom: 19px !important; }
  .intro-explore { font-size: 17px !important; font-weight: 300 !important; line-height: 19.5px !important; }

  /* ── Сетка работ ── */
  /* Макет: 220×209 (не квадрат), центральная пара с зазором 20px */
  .work-item img { height: 209px !important; aspect-ratio: auto !important; }
  .work-item:nth-child(3) { margin-left: 20px !important; }
  .work-caption { font-size: 14px !important; font-weight: 400 !important; line-height: 12.7px !important; text-transform: uppercase !important; }

  /* ── Диаграмма ── */
  .diagram-text { max-width: 301px !important; font-size: 20px !important; font-weight: 300 !important; line-height: 23px !important; }

  /* ── Услуги ── */
  .services-label { font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important; }
  .acc-title { font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important; color: var(--gray) !important; }
  .acc-body  { font-size: 20px !important; font-weight: 300 !important; line-height: 23px !important; }

  /* ── Нижний блок ── */
  /* Макет: фото 502×416, как и в первом экране */
  .bottom-cta-photo { width: 502px !important; height: 416px !important; aspect-ratio: auto !important; }
  .bottom-cta-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .bottom-cta-text { max-width: 455px !important; margin-left: auto !important; margin-right: auto !important;
                     font-size: 22px !important; font-weight: 400 !important; line-height: 28px !important; letter-spacing: 0 !important; }
  .btn-start { font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important; letter-spacing: 0 !important; }

  /* ── Подвал ── */
  .footer-logo-img { width: 421px !important; height: 86px !important; object-fit: contain; object-position: left center; }
  .footer-social a, .footer-email { font-size: 20px !important; font-weight: 300 !important; line-height: 23px !important; }
  .site-footer .footer-logo-block .footer-copy {
    font-size: 15px !important; font-weight: 400 !important; line-height: 17.9px !important;
    display: block !important; margin-top: -37px !important;
  }
}

/* ── Вертикальный ритм по макету ────────────────────────────────────
   Отступы секций подобраны так, чтобы каждый блок вставал на ту же
   отметку по вертикали, что и в Figma (отсчёт от верха фрейма). */
@media (min-width: 901px) {

  /* Шапка: в макете логотип и меню начинаются на отметке 25, нижняя
     граница меню — 94. Раньше содержимое центрировалось в 80px. */
  .site-header { height: 119px !important; align-items: flex-start !important; padding-top: 25px !important; }

  /* Первый экран. В теме высота считается от окна (100vh), а «бегущая
     строка» — flex-элемент с flex:1, поэтому обычный height на неё не
     действует. Отключаем растяжение и задаём геометрию макета:
     фото 239–655, слова по центру фото, стрелка на 750, подпись на 784.
     Отступ сверху 64 подобран так, чтобы центрирование дало ровно 159. */
  .hero-marquee { flex: none !important; height: 670px !important; padding-top: 64px !important; }

  /* Интро: заголовок на 967, «explore more» заканчивается на 1121 */
  .intro { padding-top: 51px !important; padding-bottom: 100px !important; }

  /* Работы: картинки на 1397, подписи на 1616 */
  .works-grid { padding-top: 176px !important; padding-bottom: 60px !important; }

  /* Диаграмма: 1741–2541, текст справа на 2319 */
  .diagram-section { padding-top: 54px !important; padding-bottom: 95px !important; }

  /* Услуги: заголовок на 2736 */
  .services-section { padding-top: 103px !important; padding-bottom: 20px !important; }

  /* Логотип в подвале: правило перебивалось более сильным селектором */
  .site-footer .footer-logo-block img.footer-logo-img {
    width: 421px !important; height: 86px !important;
    object-fit: contain; object-position: left center;
  }
}

/* ── Нижний блок и подвал: отметки макета 3339 / 3785 / 4113 ── */
@media (min-width: 901px) {
  .bottom-cta { padding-top: 123px !important; padding-bottom: 162px !important; }
  .bottom-cta-photo { margin-bottom: 30px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   СВЕРКА С МАКЕТОМ — страница Studio
   Фреймы 242:123 (founder), 242:285 (philosophy), 242:299 (approach).
   Боковая колонка в макете липкая и одинакова на всех трёх экранах.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {

  /* Боковая колонка: в макете x=46, заголовок на 170, пункты с шагом 35 */
  .studio-sidebar { left: 46px !important; width: 200px !important; top: calc(var(--header-h) + 90px) !important; }
  .studio-sidebar-title {
    font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important;
    text-transform: uppercase !important; color: #000 !important; margin-bottom: 31px !important;
  }
  .studio-sidebar-nav a {
    font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important;
    color: #666 !important; margin-bottom: 7px !important; text-transform: none !important;
  }
  .studio-sidebar-nav a.active { color: #000 !important; font-weight: 500 !important; }

  /* Раскладка: текст с 646 шириной 382, фото с 1092 шириной 373 */
  .studio-layout {
    grid-template-columns: 382px 373px !important;
    column-gap: 64px !important;
    padding: 74px 46px 80px 646px !important;
  }
  .studio-text { width: 382px !important; font-size: 20px !important; font-weight: 300 !important; line-height: 23px !important; color: #1D1D1D !important; }
  .studio-text p { margin-bottom: 23px !important; }
  .studio-photo { max-width: 373px !important; margin-top: 126px !important; text-align: left !important; }
  .studio-photo img { width: 373px !important; height: 433px !important; object-fit: cover !important; }

  /* Имя и должность в макете стоят в строку, между ними короткая черта */
  .studio-founder { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 63px !important; margin-top: 5px !important; }
  .studio-founder-name {
    font-size: 22px !important; font-weight: 400 !important; line-height: 28px !important;
    color: #767676 !important; letter-spacing: 0 !important; display: flex !important; align-items: center !important; gap: 36px !important;
  }
  .studio-founder-name::after { content: ''; display: block; width: 36px; height: 1px; background: #767676; }
  .studio-founder-role {
    font-size: 13px !important; font-weight: 400 !important; line-height: 13px !important;
    color: #767676 !important; margin: -1px 0 0 !important;
  }

  /* Экран philosophy: контент во второй колонке сетки, поэтому нужную
     отметку 646 задаём шириной первой колонки, а не отступом слева */
  .studio-vibe-layout {
    grid-template-columns: 580px 1fr !important;
    column-gap: 20px !important;
    padding: 0 46px 80px 46px !important;
  }
  .studio-vibe-photos { display: flex !important; gap: 12px !important; }
  .studio-vibe-photos img { width: 266px !important; height: 317px !important; object-fit: cover !important; }
  .studio-vibe-text { max-width: 710px !important; }
  .studio-vibe-text p { font-size: 20px !important; font-weight: 300 !important; line-height: 23px !important; color: #1D1D1D !important; margin-bottom: 23px !important; }

  /* Экран approach: диаграмма 875×405 с отметки 609 */
  .studio-approach-layout {
    grid-template-columns: 543px 1fr !important;
    column-gap: 20px !important;
    padding: 0 28px 80px 46px !important;
  }
  .approach-diagram img.diagram-desktop { width: 875px !important; height: 405px !important; object-fit: contain !important; }
  .approach-text p { font-size: 20px !important; font-weight: 300 !important; line-height: 23px !important; color: #1D1D1D !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   СВЕРКА С МАКЕТОМ — Services, Contact, Portfolio
   Фреймы 242:162, 242:138, 242:237.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {

  /* ── Services ──────────────────────────────────────────────────────
     Макет: колонка слева на 46, текст на 626 шириной 355,
     одна фотография 407×469 на отметке 1059. */
  .services-page-wrap .studio-sidebar { left: 46px !important; width: 300px !important; }
  .services-sidebar-title {
    font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important;
    text-transform: uppercase !important; color: #000 !important; margin-bottom: 31px !important;
  }
  .services-sidebar-nav a {
    font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important;
    color: #666 !important; margin: 0 0 7px !important;
    /* иначе «web design & development» переносится и ломает шаг 35 */
    white-space: nowrap !important;
  }
  .services-sidebar-nav { gap: 0 !important; }
  .services-sidebar-nav a.active { color: #000 !important; }

  .service-row {
    display: grid !important;
    grid-template-columns: 580px 355px 1fr !important;
    column-gap: 0 !important;
    padding: 149px 46px 0 46px !important;
    align-items: start !important;
  }
  .service-text { grid-column: 2 !important; width: 355px !important; padding: 0 !important; }
  /* Название услуги в макете есть только в боковой колонке —
     над текстом оно не дублируется */
  .service-heading { display: none !important; }
  .service-text p {
    font-size: 20px !important; font-weight: 300 !important; line-height: 23px !important;
    color: var(--brown) !important; margin-bottom: 23px !important;
  }
  /* Колонка из трёх фотографий: 407×469, зазор 8 (шаг 477 по макету) */
  .service-photos { grid-column: 3 !important; display: flex !important; flex-direction: column !important;
                    gap: 8px !important; width: 407px !important; margin: -59px 0 0 78px !important; }
  .service-photos img { width: 407px !important; height: 469px !important; object-fit: cover !important; flex: none !important; }

  /* ── Contact ───────────────────────────────────────────────────────
     Макет: заголовок 47/170, колонки на 319 и 706 шириной 281,
     почта на 448, соцсети на 517, кнопка на 651, фото 216×180 на 1021/1251. */
  /* Колонки: заголовок на 47, первая колонка на 319, вторая на 706.
     Отступ сверху считается от начала контента (шапка занимает 80). */
  .contact-layout {
    display: grid !important;
    grid-template-columns: 272px 281px 106px 281px 1fr !important;
    column-gap: 0 !important;
    padding: 90px 46px 80px 47px !important;
    align-items: start !important;
  }
  .contact-title {
    grid-column: 1 !important;
    font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important;
    text-transform: uppercase !important; color: #000 !important;
  }
  .contact-layout > .contact-col:nth-child(2) { grid-column: 2 !important; width: 281px !important; }
  .contact-layout > .contact-col:nth-child(3) { grid-column: 4 !important; width: 281px !important; }
  .contact-col p {
    font-size: 20px !important; font-weight: 300 !important; line-height: 23px !important;
    color: var(--brown) !important;
  }
  .contact-email {
    font-size: 20px !important; font-weight: 400 !important; line-height: 23px !important;
    color: var(--brown) !important; margin-top: 18px !important; display: block !important;
  }
  .contact-socials { margin-top: 46px !important; display: flex !important; gap: 41px !important; align-items: flex-start !important; }
  .contact-socials-label { font-size: 20px !important; font-weight: 400 !important; line-height: 23px !important; color: var(--brown) !important; }
  .contact-socials-links { display: flex !important; flex-direction: column !important; gap: 0 !important; }
  .contact-socials-links a { font-size: 20px !important; font-weight: 400 !important; line-height: 23px !important; color: var(--brown) !important; }
  .btn-start-project {
    font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important;
    text-transform: uppercase !important; color: var(--brown) !important; margin-top: 22px !important;
  }
  .contact-photos { grid-column: 5 !important; display: flex !important; gap: 14px !important; margin: 316px 0 0 34px !important; align-self: start !important; }
  .contact-photos img { width: 216px !important; height: 180px !important; object-fit: cover !important; }

  /* ── Portfolio ─────────────────────────────────────────────────────
     Макет: заголовок 47/238, карточки 375 шириной с шагом 388,
     фото 375×455 на отметке 299, подписи на 760. */
  .portfolio-layout { padding: 158px 0 80px 47px !important; }
  .portfolio-title {
    font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important;
    text-transform: uppercase !important; color: #000 !important;
  }
  /* Стрелки навигации не должны увеличивать высоту шапки:
     в макете карточки начинаются через 33px после заголовка */
  .portfolio-header { height: 28px !important; align-items: flex-start !important;
                      margin-bottom: 17px !important; padding-right: 46px !important; }
  .portfolio-track { gap: 13px !important; }
  .portfolio-item { width: 375px !important; flex: 0 0 375px !important; }
  .portfolio-item-img-wrap { width: 375px !important; height: 455px !important; }
  .portfolio-item-img-wrap img { width: 375px !important; height: 455px !important; object-fit: cover !important; }
  .portfolio-item-footer { margin-top: 0 !important; }
  .portfolio-item-name, .portfolio-item-cat, .portfolio-item-explore {
    font-size: 10px !important; font-weight: 300 !important; line-height: 12px !important;
    color: var(--brown) !important; text-transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   РАЗДЕЛ THE PERCEPTION METHOD — фрейм «home page v2» (304:2)
   Заголовок 46/2660, врезка 931/2660 шириной 535, линия на 2740,
   четыре карточки 690×220 в две колонки (46 и 776), ряды 2780 и 3000.
   ══════════════════════════════════════════════════════════════════════ */
.method-section { padding: 23px 46px 0; }
.method-head { display: grid; grid-template-columns: 885px 535px; align-items: start; }
.method-title {
  font-size: 22px; font-weight: 500; line-height: 27px;
  text-transform: uppercase; color: var(--brown); margin: 0;
}
.method-intro { font-size: 20px; font-weight: 300; line-height: 29px; color: var(--brown); margin: 0; }
.method-grid {
  display: grid; grid-template-columns: 690px 690px; column-gap: 40px; row-gap: 0;
  margin-top: 40px; border-top: 1px solid var(--line); padding-top: 49px;
}
.method-item { width: 690px; height: 220px; }
.method-num  { display: block; font-size: 52px; font-weight: 300; line-height: 52px; color: var(--brown); }
.method-name { font-size: 20px; font-weight: 500; line-height: 24px; color: var(--brown); margin: 14px 0 0; }
.method-text { font-size: 16px; font-weight: 300; line-height: 25px; color: var(--brown); margin: 14px 0 0; width: 690px; }

/* Фотополоса во всю ширину, 1512×416 в макете */
.method-band { width: 100%; margin-top: 22px; }
.method-band img { width: 100%; height: 416px; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .method-section { padding: 0 20px; }
  .method-head { grid-template-columns: 1fr; gap: 16px; }
  .method-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .method-item, .method-text { width: 100%; height: auto; }
  .method-band img { height: 220px; }
}

/* ══════════════════════════════════════════════════════════════════════
   СТРАНИЦА PRIVACY POLICY — фрейм 301:2 (1512×2957)
   Слева якоря на 46, справа разделы на 560 шириной 800.
   ══════════════════════════════════════════════════════════════════════ */
.privacy-layout { display: grid; grid-template-columns: 514px 800px; padding: 90px 46px 120px 46px; align-items: start; }
.privacy-sidebar { position: sticky; top: calc(var(--header-h) + 90px); }
.privacy-title { font-size: 22px; font-weight: 500; line-height: 28px; text-transform: uppercase; color: #000; margin: 0 0 31px; }
.privacy-nav { display: flex; flex-direction: column; }
.privacy-nav a { font-size: 22px; font-weight: 500; line-height: 28px; color: #666; text-decoration: none; margin-bottom: 7px; }
.privacy-nav a:hover, .privacy-nav a.active { color: #000; }
.privacy-updated { font-size: 16px; font-weight: 300; line-height: 20px; color: #666; margin-top: 28px; }
.privacy-lead { font-size: 17px; font-weight: 300; line-height: 26px; color: var(--brown); margin: 0 0 63px; }
.privacy-section { margin-bottom: 40px; }
.privacy-heading { font-size: 20px; font-weight: 500; line-height: 25px; text-transform: uppercase; color: #000; margin: 0 0 12px; }
.privacy-section p { font-size: 17px; font-weight: 300; line-height: 26px; color: var(--brown); margin: 0 0 26px; }
.privacy-section p:last-child { margin-bottom: 0; }
.footer-privacy { display: block; margin-top: 4px; }

@media (max-width: 900px) {
  .privacy-layout { grid-template-columns: 1fr; padding: 32px 20px 60px; gap: 32px; }
  .privacy-sidebar { position: static; }
  .privacy-nav a, .privacy-title { font-size: 18px; line-height: 24px; }
  .privacy-lead, .privacy-section p { font-size: 15px; line-height: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════
   МОБИЛЬНАЯ ВЕРСИЯ ПО МАКЕТУ — фрейм «home page» 242:396 (393×4860)
   Поля 35px, слова первого экрана по центру, работы в шахматном
   порядке 150×142, диаграмма выходит за края экрана.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Шапка: логотип 149×30 на отметке 21/31 */
  .site-header { height: 92px !important; align-items: flex-start !important; padding: 31px 21px 0 21px !important; }
  .site-logo img { width: 149px !important; height: 30px !important; object-fit: contain; object-position: left center; }
  .mob-burger { position: absolute !important; right: 37px !important; top: 43px !important; }
  .page-wrap { padding-top: 92px !important; }

  /* Первый экран: слова по центру, фото 320×265 */
  .hero { height: auto !important; }
  .hero-marquee {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    height: auto !important; padding: 66px 0 0 !important; gap: 6px !important;
  }
  .hero-word {
    display: block !important; width: auto !important; text-align: center !important;
    font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important;
    color: var(--gray) !important;
  }
  .hero-word:nth-child(1), .hero-word:nth-child(2),
  .hero-word:nth-child(4), .hero-word:nth-child(5) { display: block !important; }
  .hero-photo-wrap {
    order: 9 !important; width: 320px !important; height: 265px !important;
    margin: 25px auto 0 !important; max-width: none !important;
  }
  .hero-photo-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .hero-photo-label .sub  { font-size: 14px !important; font-weight: 400 !important; line-height: 13px !important; }
  .hero-photo-label .main { font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important; }
  .hero-cta { margin-top: 168px !important; }
  .hero-cta a { font-size: 14px !important; font-weight: 400 !important; line-height: 13px !important; }

  /* Интро: текст 322 шириной с отметки 35 */
  .intro { padding: 130px 35px 0 !important; }
  .intro-tagline, .intro-body {
    max-width: 322px !important; width: 322px !important;
    font-size: 20px !important; font-weight: 300 !important; line-height: 23px !important;
  }
  .intro-explore { font-size: 17px !important; font-weight: 300 !important; line-height: 20px !important;
                   margin-top: 47px !important; }

  /* Работы: шахматный порядок, картинки 150×142 */
  /* Шахматный порядок задаётся высотами рядов: в макете каждая следующая
     работа ниже предыдущей на 186, 214 и 215 пикселей */
  .works-grid {
    display: grid !important;
    grid-template-columns: 150px 150px !important;
    grid-template-rows: 186px 214px 215px auto !important;
    column-gap: 14px !important; row-gap: 0 !important;
    padding: 66px 35px 0 !important;
    justify-content: start !important;
    /* без этого работы прижимались к низу ряда и уезжали на 46px */
    align-items: start !important;
  }
  .work-item { width: 150px !important; }
  .work-item img { width: 150px !important; height: 142px !important; object-fit: cover !important; }
  .work-item:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; align-self: start !important; }
  .work-item:nth-child(2) { grid-column: 2 !important; grid-row: 2 !important; margin: 0 !important; align-self: start !important; }
  .work-item:nth-child(3) { grid-column: 2 !important; grid-row: 3 !important; margin: 0 !important; align-self: start !important; }
  .work-item:nth-child(4) { grid-column: 1 !important; grid-row: 4 !important; margin: 0 !important; align-self: start !important; }
  .work-caption { font-size: 14px !important; font-weight: 400 !important; line-height: 13px !important;
                  text-transform: uppercase !important; margin-top: 13px !important; }

  /* Диаграмма в макете шире экрана и выходит за края */
  .diagram-section { padding: 0 !important; }
  .diagram-section img { width: 423px !important; max-width: none !important; margin-left: -17px !important; }
  .diagram-text { position: static !important; max-width: 322px !important; margin: 24px 35px 0 !important;
                  font-size: 20px !important; line-height: 23px !important; text-align: left !important; }
}

/* ── Мобильная главная: часть ниже сетки работ ──────────────────────
   Отметки из фрейма 242:396. Раздел «perception method» в мобильных
   макетах не нарисован — он выкладывается в столбик по смыслу. */
@media (max-width: 900px) {

  /* Диаграмма и подпись под ней */
  .diagram-text { max-width: 303px !important; margin: 24px 45px 0 !important;
                  font-size: 20px !important; font-weight: 300 !important; line-height: 23px !important; }

  /* Услуги: заголовок в две строки, пункты с линиями во всю ширину */
  .services-section { display: block !important; padding: 88px 35px 0 !important; }
  .services-label { max-width: 216px !important; font-size: 22px !important; font-weight: 500 !important;
                    line-height: 28px !important; padding: 0 !important; margin-bottom: 62px !important; }
  .accordion { width: 335px !important; }
  .acc-item { border-top: none !important; border-bottom: 1px solid var(--line) !important; }
  .acc-title { font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important; }
  .acc-header { padding: 0 0 18px !important; }
  .acc-body { max-width: 323px !important; font-size: 20px !important; font-weight: 300 !important;
              line-height: 23px !important; padding-top: 20px !important; }

  /* Нижний блок: фото 314×260 по центру, текст 317, кнопка по центру */
  .bottom-cta { padding: 187px 35px 0 !important; }
  .bottom-cta-photo { width: 314px !important; max-width: 314px !important; height: 260px !important; margin: 0 auto 18px !important; }
  .bottom-cta-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .bottom-cta-text { max-width: 317px !important; margin: 0 auto !important;
                     font-size: 22px !important; font-weight: 400 !important; line-height: 28px !important; }
  .btn-start { display: block !important; margin: 73px auto 0 !important;
               font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important; }

  /* Подвал: логотип 348×70, соцсети в строку, почта и копирайт по центру */
  .site-footer { display: block !important; padding: 187px 18px 40px !important; text-align: center !important; }
  .footer-logo-block { display: block !important; width: auto !important; padding: 0 !important; }
  /* перебиваем .footer-logo-block img из более раннего блока */
  .site-footer .footer-logo-block img.footer-logo-img {
    width: 348px !important; height: 70px !important; object-fit: contain !important;
    margin: 0 auto !important;
  }
  .footer-contacts { width: 100% !important; padding: 0 !important; margin: 0 !important; }
  /* более сильный селектор: базовое правило задавало center и gap */
  .site-footer .footer-contacts .footer-social {
    display: flex !important; flex-wrap: nowrap !important;
    justify-content: space-between !important;
    width: 100% !important; padding: 0 !important; gap: 0 !important;
    margin-top: 28px !important;
  }
  .footer-social a { font-size: 20px !important; font-weight: 300 !important; line-height: 23px !important; }
  .footer-email { display: block !important; margin-top: 14px !important;
                  font-size: 20px !important; font-weight: 300 !important; line-height: 23px !important; }
  .footer-copy { display: block !important; width: 100% !important; text-align: center !important;
                 margin-top: 61px !important;
                 font-size: 15px !important; font-weight: 400 !important; line-height: 18px !important; }
  .footer-privacy { margin-top: 6px !important; }

  /* Раздел метода: в мобильном макете его нет, выкладываем в столбик */
  .method-section { padding: 88px 35px 0 !important; }
  .method-head { display: block !important; }
  .method-title { font-size: 22px !important; line-height: 28px !important; }
  .method-intro { margin-top: 18px !important; font-size: 20px !important; line-height: 23px !important; }
  .method-grid { display: block !important; margin-top: 32px !important; padding-top: 32px !important; }
  .method-item { width: 100% !important; height: auto !important; margin-bottom: 40px !important; }
  .method-text { width: 100% !important; }
  .method-band { margin-top: 40px !important; }
  .method-band img { height: 220px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   МОБИЛЬНЫЕ ВНУТРЕННИЕ СТРАНИЦЫ
   Фреймы: 242:480 studio, 242:517 services, 242:560 portfolio,
   242:369 contact. Общий приём макета: боковая колонка превращается
   в центрированный блок вверху, содержимое идёт под ним.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Studio ── */
  .studio-layout { display: block !important; padding: 11px 20px 0 !important; }
  .studio-sidebar { position: static !important; left: auto !important; width: 100% !important;
                    text-align: center !important; margin: 0 0 50px !important; }
  .studio-sidebar-title { font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important;
                          margin-bottom: 31px !important; }
  .studio-sidebar-nav { text-align: center !important; }
  .studio-sidebar-nav a { display: block !important; font-size: 22px !important; font-weight: 500 !important;
                          line-height: 28px !important; margin-bottom: 7px !important; }
  .studio-text { width: 335px !important; max-width: 335px !important; margin: 0 auto !important;
                 text-align: left !important; font-size: 20px !important; line-height: 23px !important; }
  .studio-photo { width: 373px !important; max-width: 373px !important; margin: 63px 0 0 -1px !important; }
  .studio-photo img { width: 373px !important; height: 433px !important; object-fit: cover !important; }
  .studio-founder { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important;
                    margin-top: 5px !important; }
  .studio-founder-name::after { display: none !important; }
  .studio-vibe-layout, .studio-approach-layout {
    display: block !important; padding: 63px 20px 0 !important;
  }
  .studio-vibe-photos { display: flex !important; gap: 8px !important; }
  .studio-vibe-photos img { width: 100% !important; height: auto !important; aspect-ratio: 266/317 !important; }
  .studio-vibe-text { max-width: 100% !important; }
  .approach-diagram img.diagram-desktop { width: 100% !important; height: auto !important; }
  .approach-texts { display: block !important; }

  /* ── Services ── */
  .services-page-wrap { display: block !important; }
  .services-page-wrap .studio-sidebar { position: static !important; left: auto !important; width: 100% !important;
                                        text-align: center !important; padding: 29px 20px 0 !important; margin: 0 !important; }
  .services-sidebar-title { font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important;
                            margin-bottom: 31px !important; }
  /* у контейнера flex-gap 6px, он складывался с margin и давал шаг 41 вместо 35 */
  .services-sidebar-nav { text-align: center !important; gap: 0 !important; }
  /* nowrap: «web design & development» иначе переносится и ломает шаг 35 */
  .services-sidebar-nav a { display: block !important; font-size: 22px !important; font-weight: 500 !important;
                            line-height: 28px !important; margin: 0 0 7px !important;
                            white-space: nowrap !important; }
  .service-row { display: block !important; padding: 60px 20px 0 !important; }
  .service-text { width: 100% !important; }
  .service-photos { width: 100% !important; margin: 24px 0 0 !important; }
  .service-photos img { width: 100% !important; height: auto !important; aspect-ratio: 407/469 !important; }

  /* ── Portfolio: в макете подпись стоит НАД фотографией ── */
  .portfolio-layout { padding: 29px 8px 0 !important; }
  .portfolio-title { text-align: center !important; display: block !important; }
  .portfolio-header { height: auto !important; display: block !important; margin-bottom: 46px !important;
                      padding: 0 !important; text-align: center !important; }
  .portfolio-nav { display: none !important; }
  .portfolio-track { gap: 20px !important; }
  .portfolio-item { width: 375px !important; flex: 0 0 375px !important;
                    display: flex !important; flex-direction: column-reverse !important; }
  .portfolio-item-img-wrap, .portfolio-item-img-wrap img { width: 375px !important; height: 455px !important; }
  .portfolio-item-footer { margin: 0 0 6px !important; }
  .portfolio-item-name, .portfolio-item-cat, .portfolio-item-explore {
    font-size: 9px !important; font-weight: 300 !important; line-height: 11px !important;
  }

  /* ── Contact ── */
  .contact-layout { display: block !important; padding: 37px 21px 0 !important; }
  .contact-title { margin-bottom: 20px !important; }
  .contact-layout > .contact-col { width: 100% !important; max-width: 281px !important; }
  .contact-layout > .contact-col:nth-child(3) { margin-top: 40px !important; }
  .contact-email { margin-top: 14px !important; }
  .contact-socials { margin-top: 41px !important; gap: 41px !important; }
  .btn-start-project { margin-top: 40px !important; }
  .contact-photos { margin: 40px 0 0 !important; gap: 14px !important; }
  .contact-photos img { width: 50% !important; height: auto !important; aspect-ratio: 216/180 !important; }

  /* ── Privacy ── */
  .privacy-layout { display: block !important; padding: 29px 21px 0 !important; }
  .privacy-sidebar { position: static !important; text-align: center !important; margin-bottom: 63px !important; }
  .privacy-nav a { display: block !important; }
}

/* ── Подвал по макету v2: логотип слева на 44/4993 (421×86), соцсети
   на 520, ниже строка почта 520 / копирайт 729 / privacy 938 ── */
@media (min-width: 901px) {
  .site-footer .footer-logo-block { padding-bottom: 0 !important; }
  /* колонка контактов в макете начинается на 520 */
  .site-footer .footer-contacts { margin-left: 21px !important; }
  .footer-meta { display: flex !important; align-items: baseline !important; }
  .footer-meta .footer-email   { width: 209px !important; margin: 0 !important; }
  .footer-meta .footer-copy    { width: 209px !important; margin: 0 !important; text-align: left !important; }
  .footer-meta .footer-privacy { margin: 0 !important; }
  .footer-privacy { font-size: 15px !important; font-weight: 400 !important; line-height: 17.9px !important;
                    color: #8D8D8D !important; }
}
@media (max-width: 900px) {
  .footer-meta { display: block !important; text-align: center !important; }
  .footer-meta .footer-email, .footer-meta .footer-copy { width: auto !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   ЦЕНТРИРОВАНИЕ КОЛОНКИ МАКЕТА
   Макет нарисован под ширину 1512, и все отметки (46, 646, 1059 и т.д.)
   отсчитываются от левого края этой колонки. На экранах шире её нужно
   центрировать, иначе содержимое прижимается влево.
   Центрируем автоматическими полями: они, в отличие от расчёта от 100vw,
   не учитывают ширину полосы прокрутки и потому точны.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1513px) {

  .page-wrap > section,
  .page-wrap > div,
  .site-footer {
    width: 100% !important;          /* без этого flex-подвал сжимался до ширины содержимого */
    max-width: 1512px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Шапка растянута во всю ширину ради белой подложки, но её содержимое
     должно стоять в колонке макета: 47 слева и 45 справа от края колонки. */
  .site-header {
    padding-left: max(47px, calc(50% - 709px)) !important;
    padding-right: max(45px, calc(50% - 711px)) !important;
  }

  /* Колонки, закреплённые к окну, тоже привязываем к колонке макета */
  .studio-sidebar,
  .services-page-wrap .studio-sidebar {
    left: max(46px, calc(50% - 710px)) !important;
  }
}

/* ── Подвал прижат к низу окна на коротких страницах ──────────────────
   Contact и Portfolio занимают меньше экрана, и подвал повисал посередине.
   В макете он всегда внизу экрана. */
body { display: flex; flex-direction: column; min-height: 100vh; }
.page-wrap { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

/* «Бегущая строка» первого экрана.
   В макете (1512) слова стоят на отметках 46, 266, фото 505–1007,
   затем 1043 и 1269. Равные колонки этого не дают: середина 502 съедает
   место, и слова слипаются. Задаём ширины колонок явно, по макету. */
@media (min-width: 901px) {
  .hero-marquee {
    grid-template-columns: 220px 239px 502px 262px 197px !important;
    justify-content: center !important;
    padding: 64px 46px 0 !important;
  }
  .hero-word { white-space: nowrap !important; }
  .hero-word:nth-child(1) { justify-self: start !important; }
  .hero-word:nth-child(2) { justify-self: start !important; }
  .hero-word:nth-child(4) { justify-self: center !important; }
  .hero-word:nth-child(5) { justify-self: start !important; }

  /* Меню в шапке: в макете пункты начинаются на 1226, кнопка на 1381.
     Меню позиционировано абсолютно и было привязано к правому краю окна —
     на широких экранах это уводило его за колонку макета. */
  .site-nav { gap: 88px !important; right: max(45px, calc(50% - 711px)) !important; }
  /* у блока пунктов был ещё правый отступ 80px, он складывался с зазором */
  .nav-pages { margin-right: 0 !important; }
}

/* Пустое место под будущую фотографию — высота из макета */
.method-band { height: 416px; margin-top: 22px; }
@media (max-width: 900px) { .method-band { height: 220px; margin-top: 40px; } }

/* ── Аккордеон услуг: в макете колонка начинается на 625 и шириной 831,
   а не с середины экрана. Заголовок «how we could help you?» на 46. ── */
@media (min-width: 901px) {
  .services-section {
    display: grid !important;
    grid-template-columns: 579px 831px !important;
    column-gap: 0 !important;
    padding-left: 46px !important;
    padding-right: 46px !important;
  }
  .accordion { width: 831px !important; }
}

/* ── Шаг пунктов аккордеона по макету ────────────────────────────────
   Макет: заголовки на 3775 / 3943 / 4001 / 4063, текст открытого
   пункта на 3831. Шаг закрытого пункта — 59, отступ до текста — 28. */
@media (min-width: 901px) {
  /* Шаг закрытого пункта: 28 (строка) + 29 (отступ) + 1 (линия) = 58,
     как между 3943 → 4001 в макете. Текст открытого пункта попадает на 3831. */
  .acc-header { padding: 0 0 29px !important; }
  .acc-body   { padding: 0 0 42px !important; }
  /* у заголовка раздела был свой отступ сверху, из-за него он не совпадал
     по высоте с первым пунктом */
  .services-label { padding-top: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   ЕДИНАЯ ТИПОГРАФИКА ПО МАКЕТУ
   После перестройки подвала копирайт переехал в другой блок, и прежние
   селекторы перестали попадать — кегли разъехались. Задаём по ролям,
   одинаково на всех страницах.
   Шкала макета: 22/500 заголовки, 20/300 основной текст, 18/400 меню,
   17/300 мелкий текст, 15/400 копирайт, 14 подписи.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  .site-footer .footer-contacts .footer-social a,
  .footer-meta .footer-email {
    font-size: 20px !important; font-weight: 300 !important; line-height: 23px !important;
    color: var(--brown) !important;
  }
  .footer-meta .footer-copy {
    font-size: 15px !important; font-weight: 400 !important; line-height: 18px !important;
    color: var(--gray) !important;
  }
  .footer-meta .footer-privacy {
    font-size: 14px !important; font-weight: 300 !important; line-height: 18px !important;
    color: var(--brown) !important;
  }
}

/* Активный пункт боковой навигации в макете того же начертания, что и
   остальные (22/500) — отличается только цветом. В теме он сбрасывался
   на 300 и на страницах получались разные кегли. */
@media (min-width: 901px) {
  .studio-sidebar-nav a.active,
  .services-sidebar-nav a.active,
  .privacy-nav a.active {
    font-size: 22px !important; font-weight: 500 !important; line-height: 28px !important;
  }
}
@media (max-width: 900px) {
  .studio-sidebar-nav a.active,
  .services-sidebar-nav a.active,
  .privacy-nav a.active { font-weight: 500 !important; }
}

/* Активный пункт подчёркивается — так сделано на studio и services,
   на privacy подчёркивания не было. Приводим к одному виду. */
.privacy-nav a.active,
.services-sidebar-nav a.active,
.studio-sidebar-nav a.active {
  color: #000 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  text-decoration-thickness: 1px !important;
}


/* ══════════════════════════════════════════════════════════════
   ПРОМЕЖУТОЧНЫЕ ШИРИНЫ 481–900

   В Figma нарисованы только два макета: 1512 и 393. Раньше в этой
   полосе работали остатки правил старой темы WordPress: колонка
   studio оставалась шириной 860 с отступом 780 слева, из-за чего
   текст и сайдбар уезжали за правый край экрана.

   Теперь здесь показывается мобильный макет — единственный, который
   для такой ширины нарисован. Его посадка выверена под 393, поэтому
   он не растягивается, а центрируется колонкой. Элементы с
   position: fixed центруются отдельно, чтобы не потерять прилипание
   к экрану при прокрутке.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 900px) {

  body {
    width: 393px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Шапка и плавающая кнопка — по центру той же колонки */
  .site-header {
    left: 50% !important;
    right: auto !important;
    width: 393px !important;
    transform: translateX(-50%) !important;
  }

  .project-btn-wrap {
    left: 50% !important;
    right: auto !important;
    width: 393px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  /* Меню-шторка и попап формы — в границах той же колонки */
  .mob-menu,
  .pop-overlay {
    left: 50% !important;
    right: auto !important;
    width: 393px !important;
    transform: translateX(-50%) !important;
  }
}