:root {
  --ink: #f3f0e8;
  --muted: #b9b2a6;
  --paper: #11100e;
  --line: rgba(243, 240, 232, .22);
  --warm: #d3b17a;
  --deep: #080807;
  --cream: #e8e1d4;
  --dark-ink: #11100e;
  --sans: Inter, Arial, Helvetica, sans-serif;
  --ease: cubic-bezier(.76, 0, .24, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0;
  overflow-x: clip;
  max-width: 100vw;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

.skip-link {
  position: fixed;
  left: 18px;
  top: 10px;
  z-index: 40;
  transform: translateY(-140%);
  background: var(--ink);
  color: var(--dark-ink);
  padding: 10px 14px;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--warm); outline-offset: 4px; }

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 26px clamp(18px, 4vw, 64px);
  font-size: 12px;
  color: var(--ink);
  transition: background .3s ease, padding .3s ease;
}
.site-header.is-scrolled {
  background: rgba(8, 8, 7, .88);
  backdrop-filter: blur(14px);
  padding-top: 18px;
  padding-bottom: 18px;
}
.nav-left, .nav-right { display: flex; gap: clamp(16px, 2vw, 34px); align-items: center; }
.nav-right { justify-content: flex-end; }
.nav-left a, .nav-right a { position: relative; white-space: nowrap; }
.nav-left a[aria-current=page]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: currentColor;
}
.brand { font-weight: 700; font-size: clamp(18px, 2vw, 28px); }
.budget-link { border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.menu-toggle {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  width: 38px;
  height: 24px;
  position: relative;
}
.menu-toggle span, .menu-toggle::before, .menu-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform .35s ease, top .35s ease, opacity .25s ease;
}
.menu-toggle::before { top: 2px; }
.menu-toggle span { top: 11px; }
.menu-toggle::after { top: 20px; }
.menu-open .menu-toggle::before { top: 11px; transform: rotate(38deg); }
.menu-open .menu-toggle span { opacity: 0; }
.menu-open .menu-toggle::after { top: 11px; transform: rotate(-38deg); }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: rgba(8, 8, 7, .97);
  color: var(--ink);
  transform: translateY(-100%);
  transition: transform .55s var(--ease);
  padding: 110px clamp(18px, 4vw, 64px) 50px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: end;
  overflow: hidden;
}
.menu-open .overlay { transform: translateY(0); }
.overlay-links {
  display: grid;
  gap: 10px;
  font-size: clamp(44px, 9vw, 150px);
  line-height: .84;
  font-weight: 650;
}
.overlay-side {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  text-transform: none;
  max-width: 440px;
}
.overlay-services {
  display: grid;
  gap: 8px;
  margin: 28px 0;
  text-transform: uppercase;
  color: var(--ink);
}

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: 120px clamp(18px, 4vw, 64px) 44px;
  overflow: hidden;
  isolation: isolate;
  background-size: cover;
  background-position: center;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: saturate(.95);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8,8,7,.42), rgba(8,8,7,.18) 45%, rgba(8,8,7,.78));
}
.hero-kicker {
  position: absolute;
  top: 118px;
  left: clamp(18px, 4vw, 64px);
  max-width: 620px;
  margin: 0;
  color: var(--cream);
  font-size: clamp(14px, 1.4vw, 20px);
  line-height: 1.35;
}
.hero-title {
  margin: 0 0 28px;
  font-size: clamp(52px, 7.5vw, 110px);
  line-height: .82;
  font-weight: 750;
  max-width: 1120px;
}
.hero-bottom {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 28px;
  align-items: end;
  width: 100%;
}
.project-meta {
  display: flex;
  gap: 14px;
  align-items: baseline;
  color: var(--cream);
  font-size: 13px;
}
.project-name { color: var(--muted); }
.skip {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 22px;
}
.view-link, .line-button {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
  font-weight: 650;
}

.section { padding: clamp(32px, 4vw, 56px) clamp(18px, 4vw, 64px); }
.section-head {
  display: grid;
  grid-template-columns: minmax(140px, .35fr) 1fr;
  gap: 28px;
  align-items: end;
  margin-bottom: 46px;
}
.section-head span, .phase, .filters, .fine-copy, small, .demo { color: var(--muted); }
.section-head h2 {
  margin: 0;
  font-size: clamp(16px, 1.8vw, 26px);
  line-height: .98;
  font-weight: 700;
}
.about-copy, .cta h2 {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 40px);
  line-height: .98;
  font-weight: 700;
}

.intro-lines {
  display: grid;
  gap: 6px;
  padding: clamp(24px, 3vw, 44px) clamp(18px, 4vw, 64px);
  font-size: clamp(28px, 4vw, 56px);
  line-height: .86;
  font-weight: 700;
}
.intro-lines span { white-space: nowrap; }
.intro-lines span:nth-child(1) { font-size: clamp(20px, 2.8vw, 42px); }
.intro-lines span:nth-child(2) { justify-self: end; text-align: right; font-size: clamp(30px, 4.8vw, 70px); }
.about-grid {
  display: grid;
  grid-template-columns: 1.5fr .5fr;
  gap: clamp(16px, 2.5vw, 40px);
  align-items: end;
  border-top: 1px solid var(--line);
}
.fine-copy {
  margin: 0;
  text-transform: none;
  font-size: clamp(12px, 1vw, 15px);
  color: var(--muted);
  max-width: 260px;
  align-self: end;
  line-height: 1.65;
}

.dual-images, .editorial-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(18px, 3vw, 42px);
  align-items: end;
}
.dual-images {
  gap: clamp(8px, 1vw, 14px);
  align-items: stretch;
}
.image-card, .project-card, .blog-card, .service-feature figure {
  position: relative;
  overflow: hidden;
  background: #1b1916;
}
.image-card { min-height: min(36vw, 440px); max-height: 440px; }
.image-card.small { min-height: 0; max-height: none; }
.image-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink);
  font-size: 12px;
  text-shadow: 0 1px 18px rgba(0,0,0,.7);
}

.services {
  display: grid;
  grid-template-columns: .32fr 1.68fr;
  gap: clamp(16px, 2.5vw, 40px);
  align-items: start;
  border-top: 1px solid var(--line);
}
.we-do {
  font-size: clamp(26px, 3.5vw, 52px);
  line-height: .82;
  font-weight: 760;
  position: sticky;
  top: 72px;
}
.service-list { display: grid; border-top: 1px solid var(--line); }
.service-item {
  display: grid;
  grid-template-columns: .65fr 1fr;
  gap: 28px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  transition: opacity .2s;
}
.service-list:hover .service-item { opacity: .4; }
.service-list:hover .service-item:hover { opacity: 1; }
.service-item span { font-size: clamp(14px, 1.5vw, 22px); line-height: 1; }
.service-item small {
  text-transform: none;
  font-size: 16px;
  line-height: 1.5;
  text-align: right;
}

.full-bleed { padding-left: 0; padding-right: 0; }
.full-bleed img { aspect-ratio: 16 / 8; max-height: 600px; }
.before-after {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 2;
  max-height: 572px;
  margin-inline: auto;
  background: #1b1916;
}
.before-after > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.before-layer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
}
.before-layer img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}
.ba-label {
  position: absolute;
  top: 16px;
  padding: 8px 11px;
  background: rgba(8, 8, 7, .72);
  font-size: 11px;
}
.ba-label.before { left: 16px; }
.ba-label.after { right: 16px; }
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 44px;
  transform: translateX(-50%);
  border: 0;
  background: transparent;
  cursor: ew-resize;
}
.ba-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--ink);
}
.ba-handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: rgba(8, 8, 7, .55);
}

.world {
  display: grid;
  grid-template-columns: .6fr 1.4fr;
  gap: 40px;
  align-items: center;
}
.world h2 { margin: 0; font-size: clamp(26px, 3.5vw, 52px); line-height: 1; }
.city-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: flex-end;
  font-size: clamp(12px, 1.4vw, 18px);
  line-height: .95;
}
.city-cloud span { color: var(--cream); }

.monograph {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(30px, 7vw, 110px);
  align-items: center;
  background: var(--cream);
  color: var(--dark-ink);
}
.book { position: relative; aspect-ratio: 4 / 5; max-height: 460px; overflow: hidden; }
.book img { max-height: 460px; width: 100%; object-fit: cover; }
.book::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.12); }
.book-title {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 1;
  font-size: clamp(28px, 3.5vw, 54px);
  line-height: .85;
  font-weight: 750;
}
.chapter-list { display: grid; margin-top: 44px; border-top: 1px solid rgba(17,16,14,.22); }
.chapter {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(17,16,14,.22);
}

.cta {
  display: grid;
  gap: 26px;
  border-top: 1px solid var(--line);
}
.cta p { margin: 0; color: var(--muted); }
.footer {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: clamp(30px, 7vw, 120px);
  border-top: 1px solid var(--line);
  padding-top: 70px;
  padding-bottom: 70px;
}
.footer-brand {
  font-size: clamp(26px, 3.8vw, 56px);
  line-height: .8;
  font-weight: 750;
}
.footer-lead { margin: 0 0 34px; font-size: clamp(13px, 1.1vw, 18px); line-height: 1.05; }
.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.footer-columns div { display: grid; gap: 8px; align-content: start; }
.footer-columns span, .footer-columns a, .demo {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.mobile-contact { display: none; }

.service-index, .project-grid, .blog-grid, .option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 42px);
}
.service-index { grid-template-columns: 1fr; gap: 0; }
.service-feature {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 34px;
  align-items: center;
  padding: 34px 0;
  border-top: 1px solid var(--line);
}
.service-feature.reverse figure { order: 2; }
.service-feature figure { aspect-ratio: 4 / 5; max-height: 460px; margin: 0; }
.service-feature h2, .project-card h2, .blog-card h2 {
  margin: 10px 0;
  font-size: clamp(28px, 3vw, 56px);
  line-height: .95;
}
.service-feature p, .project-card p, .blog-card p {
  margin: 0;
  color: var(--muted);
  text-transform: none;
  line-height: 1.5;
}

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.filters button {
  border: 1px solid var(--line);
  background: transparent;
  padding: 9px 14px;
  cursor: pointer;
}
.filters button[aria-pressed=true] { background: var(--ink); color: var(--dark-ink); }
.project-grid { align-items: start; }
.project-card { min-height: 480px; display: grid; align-content: end; padding: 20px; }
.project-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .76;
}
.project-card > *:not(img) { position: relative; z-index: 1; }
.project-card.portrait { margin-top: 90px; }

.editorial-grid figure { margin: 0; aspect-ratio: 4 / 5; max-height: 560px; overflow: hidden; }
.editorial-grid .tall { aspect-ratio: 3 / 5; max-height: 560px; }
.split-lists, .facts, .material-plan, .contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 6vw, 90px);
  border-top: 1px solid var(--line);
}
.split-lists ul, .facts { margin: 0; padding: 0; list-style: none; }
.split-lists li, .fact, .option, .process-page article {
  border-top: 1px solid var(--line);
  padding: 22px 0;
}
.material-plan .plan-placeholder { min-height: 360px; overflow: hidden; background: #1b1916; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatches span, .option {
  border: 1px solid var(--line);
  padding: 12px 14px;
}

.process-mini, .team {
  display: grid;
  gap: clamp(16px, 2.5vw, 40px);
  border-top: 1px solid var(--line);
}
.process-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.process-mini article, .team article { padding-top: 22px; }
.process-mini span, .team span { color: var(--muted); font-size: 12px; }
.process-mini h3 { margin: 10px 0; font-size: clamp(16px, 1.4vw, 22px); line-height: 1.05; }
.team h2 { margin: 8px 0 4px; font-size: clamp(18px, 1.8vw, 28px); line-height: 1; }
.process-mini p, .team p {
  margin: 0;
  color: var(--muted);
  text-transform: none;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.55;
}

.process-page {
  display: grid;
  gap: 0;
  padding-top: 110px;
}
.process-page article {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.phase {
  position: sticky;
  top: 104px;
  font-size: clamp(26px, 3vw, 44px);
  line-height: .9;
  font-weight: 700;
}
.process-page h2 {
  margin: 0 0 20px;
  font-size: clamp(24px, 2.8vw, 44px);
  line-height: .92;
}
.process-page p {
  margin: 0 0 16px;
  max-width: 920px;
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.4;
}
.process-page small {
  display: block;
  max-width: 900px;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.45;
}

.article {
  max-width: 900px;
  margin: 0 auto;
  text-transform: none;
  font-size: 19px;
  line-height: 1.65;
}
.article h2, .article h3 { text-transform: uppercase; line-height: 1.05; }
.article img { aspect-ratio: 16 / 10; margin: 42px 0; }
.lead { font-size: 24px; color: var(--cream); }
blockquote {
  margin: 42px 0;
  padding-left: 28px;
  border-left: 1px solid var(--warm);
  color: var(--cream);
}
.blog-card {
  min-height: 420px;
  display: grid;
  align-content: end;
  padding: 20px;
}
.blog-card img {
  position: absolute;
  inset: 0;
  opacity: .55;
}
.blog-card > *:not(img) { position: relative; }
.blog-card.featured { grid-column: span 2; min-height: 560px; }

.contact-layout form, .wizard {
  display: grid;
  gap: 14px;
}
label { display: grid; gap: 8px; color: var(--muted); }
input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  background: transparent;
  padding: 11px 14px;
}
textarea { min-height: 100px; resize: vertical; }
button[type=submit], .wizard button {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--dark-ink);
  padding: 13px 18px;
  cursor: pointer;
}
.error { border-color: #d86850; }
.form-status { min-height: 22px; color: var(--warm); text-transform: none; }
.wizard-step { display: grid; gap: 14px; }
.wizard-step[hidden] { display: none; }
.progress { height: 2px; background: var(--line); }
.progress span { display: block; height: 100%; background: var(--warm); }

/* Заголовок страниц без hero (presupuesto, legal, 404) */
.page-hero {
  display: grid;
  gap: 10px;
  padding: 150px clamp(18px, 4vw, 64px) 10px;
}
.page-hero p { margin: 0; color: var(--muted); font-size: 12px; }
.page-hero h1 { margin: 0; font-size: clamp(28px, 3.5vw, 52px); line-height: .95; font-weight: 750; }
.page-hero span { color: var(--muted); font-size: 13px; }

/* Wizard презупуesto */
.wizard { max-width: 1060px; margin-inline: auto; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 14px; color: var(--muted); font-size: 13px; }
.wizard-progress { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 13px; }
.wizard-progress div { flex: 1; height: 2px; background: var(--line); }
.wizard-progress i { display: block; height: 100%; width: 10%; background: var(--warm); transition: width .3s ease; }
input[type=checkbox] { width: 16px; height: 16px; margin: 0; padding: 0; border: 0; flex: none; accent-color: var(--warm); }
.option-grid label {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  padding: 13px 14px;
  cursor: pointer;
  color: var(--ink);
}
.form.inline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.upload {
  display: block;
  border: 1px dashed var(--line);
  padding: 30px 16px;
  text-align: center;
  cursor: pointer;
  color: var(--muted);
}
.upload input { display: none; }
.summary { border: 1px solid var(--line); padding: 18px; color: var(--muted); text-transform: none; line-height: 1.5; }
.wizard-actions { display: flex; gap: 12px; }

/* Контакты */
.contact-data { display: grid; gap: 8px; margin-top: 26px; color: var(--muted); }
.contact-data a { width: fit-content; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.check { display: flex; align-items: center; gap: 10px; }

/* FAQ на страницах услуг */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 650; }
.faq p { margin: 12px 0 0; color: var(--muted); text-transform: none; line-height: 1.5; max-width: 720px; }

/* Тёмный фон: бордеры .chapter вне светлой .monograph */
.related .chapter, .decisions .chapter, .decisions .chapter-list { border-color: var(--line); }
.quote p { margin: 14px 0 0; color: var(--muted); font-size: 12px; }

/* Появление: строки intro выезжают из-за краёв экрана */
.intro-lines { overflow: hidden; }
.intro-lines > span { display: block; overflow: hidden; }
.ln {
  display: inline-block;
  transform: translateX(-110%);
  opacity: 0;
  transition: transform 1.6s cubic-bezier(.16, 1, .3, 1),
              opacity 1.2s cubic-bezier(.16, 1, .3, 1);
}
.intro-lines > span:nth-child(2) .ln { transform: translateX(110%); }
.ln.go { transform: translateX(0); opacity: 1; }
.intro-lines > span:nth-child(2) .ln.go { transition-delay: .3s; }

/* Появление снизу для блоков */
.rv { opacity: 0; transform: translateY(90px); }
.rv.go {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.1s cubic-bezier(.16, 1, .3, 1),
              transform 1.2s cubic-bezier(.16, 1, .3, 1);
}
.rd1 { transition-delay: .12s; }
.rd2 { transition-delay: .26s; }
.rd3 { transition-delay: .40s; }
.rd4 { transition-delay: .54s; }
.rd5 { transition-delay: .68s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv, .ln { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media (max-width: 900px) {
  .site-header { grid-template-columns: auto 1fr auto; padding: 20px 18px; }
  .nav-left, .budget-link { display: none; }
  .brand { justify-self: center; font-size: 20px; }
  .hero { min-height: 92svh; padding: 92px 18px 24px; }
  .hero-kicker { top: 82px; left: 18px; right: 18px; }
  .hero-title { font-size: clamp(56px, 22vw, 112px); max-width: 100%; overflow-wrap: anywhere; }
  .hero-bottom { grid-template-columns: 1fr auto; }
  .skip { display: none; }
  .view-link { grid-column: 2; }
  .section { padding: 70px 18px; }
  .section-head { grid-template-columns: 1fr; }
  .intro-lines span { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
  .intro-lines span:nth-child(2) { justify-self: start; text-align: left; }
  .about-grid, .services, .world, .monograph, .overlay, .service-feature, .service-feature.reverse, .split-lists, .facts, .material-plan, .contact-layout, .footer, .process-page article, .blog-grid, .service-index, .project-grid, .option-grid, .footer-columns, .process-mini, .team {
    grid-template-columns: 1fr;
  }
  .service-feature.reverse figure { order: 0; }
  .dual-images, .editorial-grid { grid-template-columns: 1fr; }
  .image-card, .image-card.small { min-height: 78vw; }
  .services { min-height: auto; }
  .we-do { font-size: clamp(30px, 9vw, 40px); position: static; }
  .service-item { grid-template-columns: 1fr; }
  .service-item span { overflow-wrap: anywhere; }
  .service-item small { text-align: left; }
  .world { min-height: auto; overflow: hidden; }
  .city-cloud { min-height: auto; font-size: clamp(14px, 4vw, 18px); max-width: 100%; overflow: hidden; justify-content: flex-start; }
  .city-cloud span { max-width: 100%; overflow-wrap: anywhere; }
  .project-card, .project-card.portrait, .blog-card, .blog-card.featured { grid-column: auto; margin-top: 0; min-height: 78vw; }
  .overlay { padding-top: 94px; align-items: start; overflow: hidden; max-width: 100vw; }
  .overlay-links { font-size: clamp(44px, 14vw, 60px); max-width: 100%; overflow-wrap: anywhere; }
  .overlay-side, .overlay-services, .overlay a { max-width: 100%; overflow-wrap: anywhere; }
  .full-bleed img, .before-after { aspect-ratio: 4 / 5; }
  .phase { position: static; }
  .page-hero { padding-top: 120px; }
  .form.inline, .option-grid { grid-template-columns: 1fr; }
  .article { border-left: 0; border-right: 0; }
  .footer { padding-bottom: 116px; }
  .mobile-contact {
    position: fixed;
    z-index: 19;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: rgba(8, 8, 7, .92);
    backdrop-filter: blur(14px);
    border: 1px solid var(--line);
  }
  .mobile-contact a {
    text-align: center;
    padding: 13px 8px;
    font-size: 11px;
    border-right: 1px solid var(--line);
  }
  .mobile-contact a:last-child { border-right: 0; }
}