:root {

  --bg: #090a0c;

  --bg-panel: #121316;

  --bg-soft: #f5f2ee;

  --text-light: #f6f0ea;

  --text-dark: #1a1816;

  --muted-light: rgba(246, 240, 234, 0.8);

  --muted-dark: rgba(26, 24, 22, 0.72);

  --line-light: rgba(255, 255, 255, 0.14);

  --line-dark: rgba(31, 23, 18, 0.12);

  --accent: #b62f25;

  --accent-deep: #8e2018;

  --container: min(1280px, calc(100vw - 64px));

  --shadow: 0 26px 80px rgba(0, 0, 0, 0.32);

}



* {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  min-width: 320px;

  background: var(--bg);

  color: var(--text-light);

  font-family: "Manrope", "Segoe UI", sans-serif;

}



body.nav-open {

  overflow: hidden;

}



img {

  display: block;

  width: 100%;

}



button,

a {

  -webkit-tap-highlight-color: transparent;

}



button {

  font: inherit;

}



.shell {

  width: var(--container);

  margin: 0 auto;

}



.hero {

  position: relative;

  min-height: 790px;

  background: #060708;

  overflow: hidden;

  --hero-copy-shift: 0px;

  --hero-copy-opacity: 1;

  --hero-indicator-shift: 0px;

  --hero-indicator-opacity: 1;

  --hero-backdrop-shift: 0px;

}



.hero-backdrop,

.hero-overlay {

  position: absolute;

  inset: 0;

}



.hero-backdrop {

  background:

    linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.48) 24%, rgba(0, 0, 0, 0.14) 58%, rgba(0, 0, 0, 0.18) 100%),

    linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.18)),

    url('./images/hero-architecture.png') center center / cover no-repeat;

  transform: translate3d(0, var(--hero-backdrop-shift), 0) scale(1.015);

  will-change: transform;

}



.hero-overlay {

  background: linear-gradient(180deg, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3) 100%);

}



.topbar {

  position: relative;

  z-index: 3;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 18px;

}



.brand {

  display: inline-flex;

  align-items: center;

  gap: 14px;

  text-decoration: none;

}



.brand-icon {

  display: inline-flex;

  width: 56px;

  height: 56px;

  overflow: hidden;

  flex: 0 0 auto;

}



.brand-icon img {

  width: 174px;

  max-width: none;

  height: 56px;

  object-fit: cover;

  object-position: left center;

}



.brand-icon-full {

  width: 174px;

  overflow: visible;

}



.brand-icon-full img {

  width: 174px;

  height: 56px;

  object-fit: contain;

  object-position: left center;

}



.brand-logo-only,

.footer-brand-head-logo-only {

  gap: 0;

}



.brand-logo-only .brand-text,

.footer-brand-head-logo-only .footer-brand-text {

  display: none;

}



.brand-text {

  display: grid;

  gap: 2px;

}



.brand-text strong,

.footer-brand-text strong {

  color: rgba(246, 240, 234, 0.96);

  font-size: 26px;

  font-weight: 600;

  letter-spacing: 0.04em;

  font-family: "Noto Serif SC", serif;

}



.brand-text small,

.footer-brand-text small {

  color: rgba(246, 240, 234, 0.58);

  font-size: 12px;

  letter-spacing: 0.12em;

}



.site-nav {

  display: flex;

  align-items: center;

  gap: 30px;

}



.site-nav a,

.footer-nav a,

.lang-switch {

  color: rgba(246, 240, 234, 0.92);

  text-decoration: none;

  font-size: 14px;

  letter-spacing: 0.04em;

}



.site-nav a,

.footer-nav a {

  position: relative;

}



.site-nav a::after,

.footer-nav a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -10px;

  width: 100%;

  height: 2px;

  background: var(--accent);

  transform: scaleX(0);

  transform-origin: center;

  transition: transform 220ms ease;

}



.site-nav a:hover::after,

.site-nav a:focus-visible::after,

.footer-nav a:hover::after,

.footer-nav a:focus-visible::after,

.site-nav a.is-active::after {

  transform: scaleX(1);

}



.lang-switch {

  border: 0;

  background: transparent;

  cursor: pointer;

  padding: 0;

}



.lang-switch:hover,

.site-nav a:hover,

.footer-nav a:hover {

  color: #ffffff;

}



.nav-toggle {

  display: none;

}



.hero-content {

  position: relative;

  z-index: 3;

  display: grid;

  grid-template-columns: 86px minmax(0, 1fr) 80px;

  align-items: end;

  min-height: 700px;

  padding-bottom: 34px;

}



.hero-rail {

  display: grid;

  justify-items: center;

  gap: 10px;

  color: rgba(246, 240, 234, 0.86);

  align-self: center;

}



.hero-rail-index {

  font-size: 26px;

  font-family: "Cormorant Garamond", serif;

}



.hero-rail-line {

  width: 1px;

  height: 126px;

  background: rgba(255, 255, 255, 0.28);

}



.hero-rail-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.35);

  transition: background-color 180ms ease, transform 180ms ease;

}



.hero-rail-dot.is-active {

  background: var(--accent);

  transform: scale(1.18);

}



.hero-copy {

  max-width: 650px;

  padding-bottom: 72px;

  transform: translate3d(0, var(--hero-copy-shift), 0);

  opacity: var(--hero-copy-opacity);

  will-change: transform, opacity;

}



.hero-copy h1,

.about-kicker-block h2,

.section-label,

.services-headline,

.footer-brand p {

  margin: 0;

}



.hero-copy h1,

.about-kicker-block h2,

.value-item h3,

.service-item h3 {

  font-family: "Noto Serif SC", "Cormorant Garamond", serif;

}



.hero-copy h1 {

  font-size: clamp(3.7rem, 6vw, 5.35rem);

  font-weight: 600;

  letter-spacing: 0.04em;

  line-height: 1.04;

}



.hero-title-kicker {

  display: block;

  margin-bottom: 6px;

  color: rgba(246, 240, 234, 0.96);

  font-size: clamp(2rem, 3.2vw, 3.1rem);

  line-height: 1.05;

  white-space: nowrap;

}



.hero-title-main {

  display: block;

  white-space: nowrap;

}



.hero-subtitle {

  margin: 26px 0 34px;

  max-width: 760px;

  color: var(--text-light);

  font-size: clamp(1rem, 1.28vw, 1.18rem);

  font-family: "Noto Serif SC", serif;

}



.hero-subtitle-link {

  color: var(--accent);

  text-decoration: none;

  margin-left: 14px;

  font-weight: 500;

  transition: opacity 0.2s ease;

  white-space: nowrap;

}



.hero-subtitle-link:hover {

  opacity: 0.82;

  text-decoration: underline;

}



@media (max-width: 560px) {

  .hero-subtitle-link {

    display: block;

    margin-left: 0;

    margin-top: 8px;

  }

}





.hero-button {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 52px;
  padding: 0 28px;

  background: linear-gradient(135deg, #bf372b, #991f18);

  color: #fff;

  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 18px 42px rgba(150, 31, 24, 0.28);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, filter 180ms ease;
}

.hero-button:hover,
.hero-button:focus-visible {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #cf4337, #a7281f);
  box-shadow: 0 24px 50px rgba(150, 31, 24, 0.36);
  filter: saturate(1.04);
}

.hero-button:active {
  transform: translateY(0);
  box-shadow: 0 14px 32px rgba(150, 31, 24, 0.24);
}


.hero-button-arrow {

  font-size: 18px;

}



.scroll-indicator {

  align-self: end;

  justify-self: center;

  margin-bottom: 8px;

  color: rgba(246, 240, 234, 0.92);

  text-decoration: none;

  text-align: center;

  transform: translate3d(0, var(--hero-indicator-shift), 0);

  opacity: var(--hero-indicator-opacity);

  will-change: transform, opacity;

}



.scroll-indicator span {

  display: block;

  font-size: 56px;

  line-height: 0.9;

  font-family: "Cormorant Garamond", serif;

}



.scroll-indicator small {

  display: block;

  margin-top: 8px;

  font-size: 11px;

  letter-spacing: 0.2em;

}



.scroll-indicator span,

.scroll-indicator small {

  animation: heroScrollPulse 1.9s ease-in-out infinite;

}



.scroll-indicator small {

  animation-delay: 0.14s;

}



@keyframes heroScrollPulse {



  0%,

  100% {

    transform: translateY(0);

    opacity: 0.84;

  }



  50% {

    transform: translateY(6px);

    opacity: 1;

  }

}



.about-band {

  background:

    linear-gradient(90deg, rgba(245, 242, 238, 0.82), rgba(245, 242, 238, 0.7) 28%, rgba(245, 242, 238, 0.38) 54%, rgba(245, 242, 238, 0.12) 76%, rgba(245, 242, 238, 0.04) 100%),

    url('./images/about-band-bg.png') center center / cover no-repeat;

  color: var(--text-dark);

  border-top: 1px solid rgba(255, 255, 255, 0.04);

}



.about-grid {

  display: grid;

  grid-template-columns: 1.25fr 1fr 0.7fr;

  gap: 32px;

  align-items: center;

  min-height: 214px;

}



.band-kicker,

.section-label {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 18px;

  font-size: 13px;

  letter-spacing: 0.05em;

}



.band-kicker {

  color: var(--accent);

}



.band-kicker-en,

.section-label span:last-child,

.section-label-dark span:last-child {

  color: rgba(116, 108, 101, 0.68);

  font-family: "Cormorant Garamond", serif;

  font-size: 24px;

  line-height: 0.9;

}



.about-kicker-block h2 {

  font-size: clamp(2rem, 3.8vw, 3.3rem);

  line-height: 1.25;

  font-weight: 500;

}



.about-title-line {

  display: block;

  white-space: nowrap;

}



body[data-lang='en'] .about-kicker-block h2 {

  max-width: none;

  font-size: clamp(1.46rem, 1.95vw, 1.86rem);

  line-height: 1.18;

  letter-spacing: 0.01em;

  font-family: "Cormorant Garamond", Georgia, serif !important;

  font-weight: 600 !important;

  font-style: normal;

  font-synthesis: none;

}





.about-copy {

  max-width: 420px;

  color: var(--muted-dark);

  font-size: 16px;

  line-height: 1.9;

}



.about-accent {

  justify-self: stretch;

  align-self: stretch;

  background:

    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),

    linear-gradient(135deg, rgba(182, 47, 37, 0.08), transparent 55%);

}



.projects-section {

  padding: 28px 0 10px;

  background: #090a0c;

}



.projects-layout {

  display: grid;

  grid-template-columns: 320px minmax(0, 1fr);

  gap: 28px;

}



.projects-side {

  padding-top: 26px;

}



.section-label,

.section-label-dark {

  gap: 12px;

}



.section-label span:first-child,

.section-label-dark span:first-child {

  position: relative;

  padding-bottom: 14px;

  color: var(--text-light);

  font-family: "Noto Serif SC", serif;

  font-size: 28px;

}



.section-label span:first-child::after,

.section-label-dark span:first-child::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 22px;

  height: 2px;

  background: var(--accent);

}



.section-label-dark span:first-child {

  color: var(--text-dark);

}



.projects-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 74px;
  color: rgba(246, 240, 234, 0.92);
  text-decoration: none;
  font-size: 15px;
  cursor: pointer;
  transition: transform 180ms ease, color 180ms ease, opacity 180ms ease;
}

.projects-link:hover,
.projects-link:focus-visible {
  transform: translateX(4px);
  color: #ffffff;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;

}



.project-card {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  background: #101114;
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

a.project-card {
  color: inherit;
  text-decoration: none;
}


.project-card-lg {

  grid-column: span 2;

  grid-row: span 2;

  min-height: 344px;

}



.project-card-tall {

  grid-row: span 1;

  height: 172px;

}



.project-card-xl {

  grid-column: span 3;

  grid-row: span 1;

  height: 172px;

}



.project-card img,
.value-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 360ms ease, filter 360ms ease;
}


.value-image {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.project-card::after,
.value-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.58));
  transition: background 220ms ease, opacity 220ms ease;
}

.project-card:hover,
.project-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.42);
}

.project-card:hover img,
.project-card:focus-visible img {
  transform: scale(1.05);
  filter: saturate(1.04) contrast(1.02);
}

.project-card:hover::after,
.project-card:focus-visible::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.42));
}


.project-card-tall img,

.project-card-xl img {

  display: block;

  height: 172px;

}



.project-card-copy {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  z-index: 1;
  transition: transform 220ms ease, opacity 220ms ease;
}

.project-card:hover .project-card-copy,
.project-card:focus-visible .project-card-copy {
  transform: translateY(-2px);
}


.project-card-copy h3 {

  margin: 0;

  color: #ffffff;

  font-size: 20px;

  font-weight: 500;

  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

}



.services-band {

  background:

    linear-gradient(180deg, rgba(245, 242, 238, 0.98), rgba(245, 242, 238, 0.95)),

    url('./work/844187c774bec6d14fb37f5a1e9c8ceb.jpg') left center / auto 100% no-repeat;

  color: var(--text-dark);

  padding: 26px 0 22px;

}



.services-headline {

  margin-bottom: 24px;

}



.services-row {

  display: grid;

  grid-template-columns: repeat(6, minmax(0, 1fr));

  border-top: 1px solid var(--line-dark);

  border-bottom: 1px solid var(--line-dark);

}



.service-item {

  display: grid;

  grid-template-columns: 40px minmax(0, 1fr);

  gap: 12px;

  padding: 22px 18px 20px;

  border-right: 1px solid var(--line-dark);

}



.service-item:last-child {

  border-right: 0;

}



.service-item>div {

  min-width: 0;

}



.service-item h3,

.value-item h3 {

  margin: 0 0 10px;

  font-size: 20px;

  font-weight: 600;

  color: #201d1b;

}



.service-item h3 {

  font-size: 17px;

  white-space: nowrap;

}



body[data-lang='en'] .services-row {

  grid-template-columns: repeat(3, minmax(0, 1fr));

}



body[data-lang='en'] .service-item {

  grid-template-columns: 36px minmax(0, 1fr);

  gap: 14px;

  min-height: 168px;

}



body[data-lang='en'] .service-item:nth-child(3n) {

  border-right: 0;

}



body[data-lang='en'] .service-item:nth-child(-n+3) {

  border-bottom: 1px solid var(--line-dark);

}



body[data-lang='en'] .service-item h3 {

  white-space: normal;

  overflow-wrap: anywhere;

  line-height: 1.22;

  font-size: 15px;

}



@media (max-width: 900px) {

  .topbar {

    align-items: center;

    gap: 12px;

  }



  .brand.brand-logo-only {

    display: flex;

    align-items: center;

    min-width: 0;

    flex: 1 1 auto;

  }



  .brand.brand-logo-only .brand-text {

    display: none;

  }



  .brand.brand-logo-only .brand-icon,

  .brand.brand-logo-only .brand-icon-full {

    width: min(44vw, 174px);

    height: 56px;

    overflow: visible;

  }



  .brand.brand-logo-only .brand-icon img,

  .brand.brand-logo-only .brand-icon-full img {

    width: 100%;

    height: 56px;

    object-fit: contain;

    object-position: left center;

  }



  .nav-toggle {

    display: inline-flex;

    flex: 0 0 44px;

  }



  .site-nav {

    display: grid !important;

    position: absolute;

    top: calc(100% + 10px);

    left: 0;

    right: 0;

    inset: auto 0 auto 0;

    gap: 18px;

    padding: 18px;

    background: rgba(11, 11, 13, 0.96);

    border: 1px solid rgba(255, 255, 255, 0.08);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(-8px);

    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;

    z-index: 20;

  }



  body.nav-open .site-nav {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);

  }



  .footer-layout {

    grid-template-columns: 1fr;

    gap: 18px;

    justify-items: start;

  }



  .footer-brand,

  .footer-brand-head,

  .footer-nav,

  .footer-contact-block,

  .footer-bottom {

    width: 100%;

    justify-self: start;

    justify-items: start;

    text-align: left;

  }



  .footer-nav {

    display: grid;

    gap: 14px;

    justify-content: flex-start;

  }



  .footer-contact-block {

    gap: 10px;

  }



  .footer-bottom {

    display: grid;

    gap: 10px;

  }

}



@media (max-width: 900px) {

  .topbar {

    position: relative;

    align-items: flex-start;

    z-index: 50;

  }



  .site-nav {

    position: absolute !important;

    top: 100% !important;

    left: 0 !important;

    right: 0 !important;

    inset: auto 0 auto 0 !important;

    display: none !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transform: translateY(0) !important;

    z-index: 49 !important;

  }



  body.nav-open .site-nav {

    display: grid !important;

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

  }



  .nav-toggle {

    position: relative;

    z-index: 51;

    margin-top: 2px;

    margin-left: auto;

  }

}



@media (max-width: 900px) {

  body.nav-open {

    overflow: visible;

  }



  .topbar.shell {

    position: fixed !important;

    top: 0;

    left: 0;

    right: 0;

    width: 100%;

    padding: 8px 16px;

    background: rgba(6, 7, 8, 0.62);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    z-index: 80 !important;

  }



  .hero-content.shell {

    padding-top: 220px;

  }



  .site-nav {

    top: calc(100% + 8px) !important;

    max-height: calc(100vh - 96px);

    overflow-y: auto;

    z-index: 79 !important;

  }



  .nav-toggle {

    z-index: 81 !important;

  }

}



@media (max-width: 900px) {

  .hero {

    min-height: 640px;

  }



  .hero-content {

    min-height: 560px;

    align-content: start;

  }



  .hero-copy {

    padding-bottom: 12px;

    margin-top: 0;

  }



  .hero-copy h1 {

    margin-top: 0;

  }



  .hero-subtitle {

    margin: 18px 0 26px;

  }

}



@media (max-width: 900px) {

  .footer-brand {

    width: 100%;

    text-align: center;

    display: grid;

    justify-items: center;

  }



  .footer-brand-head.footer-brand-head-logo-only {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

  }



  .footer-brand-head.footer-brand-head-logo-only .footer-brand-icon,

  .footer-brand-head.footer-brand-head-logo-only .brand-icon-full {

    width: min(52vw, 174px);

    height: 56px;

    overflow: visible;

  }



  .footer-brand-head.footer-brand-head-logo-only .footer-brand-icon img,

  .footer-brand-head.footer-brand-head-logo-only .brand-icon-full img {

    width: 100%;

    height: 56px;

    object-fit: contain;

    object-position: center;

  }



  .footer-brand p {

    text-align: center;

    width: 100%;

  }



  .footer-contact-block,

  .footer-bottom {

    justify-self: center !important;

    justify-items: center !important;

    text-align: center !important;

  }



  .footer-contact-block {

    width: 100%;

    display: grid;

    justify-content: center;

    margin: 0 auto;

    place-items: center;

  }

}



.service-item p,

.value-item p,

.footer-contact-block p,

.footer-contact-block a,

.footer-brand p,

.footer-bottom p {

  margin: 0;

  font-size: 14px;

  line-height: 1.8;

}



.service-item p {

  color: var(--muted-dark);

}



.service-icon,

.value-item-icon {

  position: relative;

  width: 30px;

  height: 30px;

  color: var(--accent);

}



.icon-building,

.icon-chair,

.icon-tree,

.icon-shop,

.icon-grid,

.icon-cube {

  border: 1.6px solid currentColor;

}



.icon-building::before,

.icon-building::after,

.icon-shop::before,

.icon-grid::before,

.icon-grid::after,

.icon-cube::before,

.icon-cube::after,

.icon-chair::before,

.icon-chair::after,

.icon-tree::before,

.icon-tree::after,

.value-item-icon::before,

.value-item-icon::after {

  content: "";

  position: absolute;

}



.icon-building::before {

  inset: 6px 9px 6px 9px;

  border-left: 1.6px solid currentColor;

  border-right: 1.6px solid currentColor;

}



.icon-building::after {

  left: 6px;

  right: 6px;

  top: 11px;

  height: 1.6px;

  background: currentColor;

}



.icon-chair {

  border-top-left-radius: 12px;

  border-top-right-radius: 12px;

  border-bottom: 0;

}



.icon-chair::before {

  left: 7px;

  right: 7px;

  bottom: 4px;

  height: 8px;

  border: 1.6px solid currentColor;

  border-top: 0;

}



.icon-chair::after {

  left: 5px;

  bottom: -5px;

  width: 20px;

  height: 1.6px;

  background: currentColor;

}



.icon-tree {

  border: 0;

}



.icon-tree::before {

  left: 4px;

  top: 2px;

  width: 0;

  height: 0;

  border-left: 11px solid transparent;

  border-right: 11px solid transparent;

  border-bottom: 18px solid currentColor;

  opacity: 0.85;

}



.icon-tree::after {

  left: 13px;

  top: 18px;

  width: 4px;

  height: 12px;

  background: currentColor;

}



.icon-shop::before {

  inset: 10px 4px 4px 4px;

  border: 1.6px solid currentColor;

}



.icon-grid::before {

  left: 9px;

  top: 0;

  bottom: 0;

  width: 1.6px;

  background: currentColor;

}



.icon-grid::after {

  top: 9px;

  left: 0;

  right: 0;

  height: 1.6px;

  background: currentColor;

}



.icon-cube {

  transform: rotate(45deg);

}



.icon-cube::before {

  inset: 5px;

  border: 1.6px solid currentColor;

}



.services-summary {

  margin: 14px 0 0;

  text-align: center;

  color: var(--muted-dark);

  font-size: 22px;

  font-family: "Noto Serif SC", serif;

}



.value-section {

  padding: 0;

  background: #0a0b0d;

}



.value-layout {

  position: relative;

  width: 100vw;

  margin-left: calc(50% - 50vw);

  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(420px, 48vw);

  align-items: stretch;

  min-height: 242px;

  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.28)), url('./images/value-banner-generated.png') left center / cover no-repeat;

}



.value-title-overlay {

  position: absolute;

  left: calc((100vw - var(--container)) / 2);

  top: 42px;

  z-index: 2;

}



.value-title-overlay .section-label {

  display: flex;

  justify-content: flex-start;

  align-items: flex-end;

  text-align: left;

}



.value-title-overlay .section-label span:first-child {

  color: #fff2ec;

}



.value-title-overlay .section-label span:last-child {

  color: rgba(246, 240, 234, 0.42);

}



.value-image {

  display: none;

}



.value-content {

  grid-column: 2;

  display: grid;

  align-content: center;

  gap: 18px;

  padding: 28px max(28px, calc((100vw - var(--container)) / 2)) 28px 34px;

  background: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.72) 18%, rgba(0, 0, 0, 0.94) 100%);

}



.value-list {

  display: grid;

  grid-template-columns: 1fr;

  gap: 18px;

}



.value-item {

  display: grid;

  grid-template-columns: 34px 1fr;

  gap: 16px;

  align-items: start;

  padding-left: 6px;

  border-left: 1px solid rgba(255, 255, 255, 0.18);

}



.value-item:first-child {

  border-left: 0;

  padding-left: 0;

}



.value-item h3 {

  color: #fff2ec;

  font-size: 22px;

}



.value-item p {

  color: rgba(246, 240, 234, 0.78);

}



.value-item-icon {

  border: 1.6px solid currentColor;

  border-radius: 50%;

}



.value-item-icon::before {

  inset: 8px;

  border: 1.6px solid currentColor;

  border-radius: 50%;

}



.value-item-icon-chart {

  border: 0;

  border-radius: 0;

}



.value-item-icon-chart::before,

.value-item-icon-chart::after {

  bottom: 4px;

  width: 4px;

  background: currentColor;

}



.value-item-icon-chart::before {

  left: 6px;

  height: 10px;

  box-shadow: 8px -5px 0 currentColor, 16px -12px 0 currentColor;

}



.value-item-icon-chart::after {

  left: 4px;

  right: 4px;

  height: 1.6px;

  bottom: 2px;

}



.value-item-icon-stack {

  border: 0;

}



.value-item-icon-stack::before,

.value-item-icon-stack::after {

  left: 4px;

  right: 4px;

  height: 8px;

  border: 1.6px solid currentColor;

}



.value-item-icon-stack::before {

  top: 4px;

}



.value-item-icon-stack::after {

  top: 16px;

}



.site-footer {
  padding: 16px 0 26px;
  background: #0a0b0d;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.portfolio-page .hero-backdrop {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 24%, rgba(0, 0, 0, 0.18) 60%, rgba(0, 0, 0, 0.28) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.16)),
    var(--portfolio-hero-image, url('./images/hero-architecture.png')) center center / cover no-repeat;
}

.inner-hero {
  min-height: 520px;
}

.portfolio-hero-content {
  grid-template-columns: minmax(0, 1fr);
  min-height: 430px;
  align-items: end;
}

.portfolio-hero-copy {
  max-width: 820px;
  padding-bottom: 56px;
}

.portfolio-kicker {
  margin-bottom: 22px;
}

.portfolio-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.portfolio-count {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(246, 240, 234, 0.88);
  background: rgba(8, 8, 10, 0.24);
  backdrop-filter: blur(10px);
}

.portfolio-section {
  padding: 42px 0 30px;
  background:
    radial-gradient(circle at top right, rgba(182, 47, 37, 0.14), transparent 28%),
    #090a0c;
}

.portfolio-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.portfolio-summary {
  margin: 0;
  color: rgba(246, 240, 234, 0.66);
  font-size: 15px;
  line-height: 1.8;
}

.portfolio-masonry {
  --portfolio-columns: 4;
  display: grid;
  grid-template-columns: repeat(var(--portfolio-columns), minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.portfolio-column {
  display: grid;
  gap: 18px;
  align-content: start;
}

.portfolio-item {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #101114;
  box-shadow: var(--shadow);
}

.portfolio-item-media {
  position: relative;
  width: 100%;
  background: #101114;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 360ms ease;
}

.portfolio-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}

.portfolio-item:hover img {
  transform: scale(1.03);
}

.portfolio-item-copy {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 1;
}

.portfolio-item-copy h3,
.portfolio-item-copy p {
  margin: 0;
}

.portfolio-item-copy h3 {
  color: #fff;
  font-family: "Noto Serif SC", "Cormorant Garamond", serif;
  font-size: 22px;
  font-weight: 500;
  text-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

.portfolio-item-copy p {
  margin-top: 6px;
  color: rgba(246, 240, 234, 0.72);
  font-size: 12px;
  letter-spacing: 0.18em;
}

.portfolio-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  margin-top: 10px;
  color: rgba(246, 240, 234, 0.72);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.portfolio-loader[data-state="done"] {
  color: rgba(246, 240, 234, 0.48);
}

.portfolio-sentinel {
  width: 100%;
  height: 2px;
}


.footer-layout {

  display: grid;

  grid-template-columns: 240px 1fr;

  align-items: center;

  gap: 32px;

}



.footer-brand img {

  width: 150px;

}



.footer-brand p {

  margin-top: 18px;

  color: rgba(246, 240, 234, 0.74);

  font-family: "Noto Serif SC", serif;

  font-size: 20px;

}



.footer-nav {

  display: flex;

  justify-content: center;

  gap: 36px;

}



.footer-contact-block {

  display: grid;

  gap: 8px;

  justify-self: end;

  justify-items: end;

  text-align: right;

}



.footer-contact-block a,

.footer-contact-block p,

.footer-bottom p {

  color: rgba(246, 240, 234, 0.72);

  text-decoration: none;

}



.footer-bottom {

  display: flex;

  flex-wrap: wrap;

  gap: 10px 32px;

  margin-top: 14px;

  padding-top: 16px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.reveal {

  opacity: 0;

  transform: translateY(28px);

  transition: opacity 680ms ease, transform 680ms ease;

}



.reveal.is-visible {

  opacity: 1;

  transform: translateY(0);

}



#about,

#projects,

#services,

#value,

#contact {

  scroll-margin-top: 86px;

}



@media (max-width: 1180px) {
  :root {

    --container: min(100vw - 40px, 100%);

  }



  .projects-layout,

  .value-layout,

  .footer-layout {

    grid-template-columns: 1fr;

  }



  .projects-side {

    padding-top: 0;

  }



  .projects-link {

    margin-top: 18px;

  }



  .projects-grid,

  .services-row,

  .value-list {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }



  .service-item:nth-child(3n) {

    border-right: 0;

  }



  .value-layout {

    width: 100%;

    margin-left: 0;

    grid-template-columns: 1fr;

  }



  .value-title-overlay {

    position: static;

    left: auto;

    top: auto;

    padding: 24px 24px 0;

  }



  .value-content {

    grid-column: auto;

    gap: 20px;

    padding: 0 24px 24px;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.72) 56%, rgba(0, 0, 0, 0.92) 100%);

  }



  .footer-nav,
  .footer-contact-block {
    justify-content: flex-start;
    text-align: left;
  }

  .portfolio-masonry {
    --portfolio-columns: 3;
  }
}


@media (max-width: 900px) {

  :root {

    --container: min(100vw - 24px, 100%);

  }



  .hero {

    min-height: 700px;

  }



  .topbar {

    padding-top: 12px;

  }



  .brand-text strong {

    font-size: 22px;

  }



  .brand-text small {

    font-size: 11px;

  }



  .nav-toggle {

    display: inline-flex;

    flex-direction: column;

    justify-content: center;

    gap: 5px;

    width: 44px;

    height: 44px;

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.2);

    color: #fff;

  }



  .nav-toggle span {

    width: 18px;

    height: 1px;

    margin: 0 auto;

    background: currentColor;

    transition: transform 220ms ease, opacity 220ms ease;

  }



  body.nav-open .nav-toggle span:first-child {

    transform: translateY(3px) rotate(45deg);

  }



  body.nav-open .nav-toggle span:last-child {

    transform: translateY(-3px) rotate(-45deg);

  }



  .brand-icon {

    display: inline-flex;

    width: 56px;

    height: 56px;

    overflow: hidden;

    flex: 0 0 auto;

  }



  .brand-icon img {

    width: 174px;

    max-width: none;

    height: 56px;

    object-fit: cover;

    object-position: left center;

  }



  .brand-text {

    display: grid;

    gap: 2px;

  }



  .brand-text strong,

  .footer-brand-text strong {

    color: rgba(246, 240, 234, 0.96);

    font-size: 26px;

    font-weight: 600;

    letter-spacing: 0.04em;

    font-family: "Noto Serif SC", serif;

  }



  .brand-text small,

  .footer-brand-text small {

    color: rgba(246, 240, 234, 0.58);

    font-size: 12px;

    letter-spacing: 0.12em;

  }



  .site-nav {

    position: fixed;

    inset: 72px 12px auto;

    display: grid;

    gap: 18px;

    padding: 18px;

    background: rgba(11, 11, 13, 0.96);

    border: 1px solid rgba(255, 255, 255, 0.08);

    opacity: 0;

    visibility: hidden;

    transform: translateY(-8px);

    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;

    z-index: 20;

  }



  body.nav-open .brand-icon {

    display: inline-flex;

    width: 56px;

    height: 56px;

    overflow: hidden;

    flex: 0 0 auto;

  }



  .brand-icon img {

    width: 174px;

    max-width: none;

    height: 56px;

    object-fit: cover;

    object-position: left center;

  }



  .brand-text {

    display: grid;

    gap: 2px;

  }



  .brand-text strong,

  .footer-brand-text strong {

    color: rgba(246, 240, 234, 0.96);

    font-size: 26px;

    font-weight: 600;

    letter-spacing: 0.04em;

    font-family: "Noto Serif SC", serif;

  }



  .brand-text small,

  .footer-brand-text small {

    color: rgba(246, 240, 234, 0.58);

    font-size: 12px;

    letter-spacing: 0.12em;

  }



  .site-nav {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

  }



  .site-nav a::after,

  .footer-nav a::after {

    bottom: -6px;

  }



  .hero-content {

    grid-template-columns: 1fr;

    min-height: 620px;

    align-content: start;

  }



  .hero-rail,

  .scroll-indicator {

    display: none;

  }



  .hero-copy {

    padding-bottom: 40px;

    max-width: 430px;

  }



  .hero-copy h1 {

    font-size: clamp(2.7rem, 11vw, 4.5rem);

  }



  .hero-subtitle {

    font-size: 1.2rem;

  }



  .about-grid,
  .projects-grid,
  .services-row,
  .value-list {
    display: grid;
    grid-template-columns: 1fr;

    gap: 18px;
  }

  .portfolio-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .portfolio-masonry {
    --portfolio-columns: 2;
    gap: 14px;
  }

  .portfolio-column {
    gap: 14px;
  }

  @media (max-width: 560px) {
    .hero {

      min-height: 620px;

    }



    .hero-button {

      width: 100%;

      justify-content: center;

    }



    .about-kicker-block h2,

    .section-label span:first-child,

    .section-label-dark span:first-child,

    .services-summary {

      font-size: 1.20rem;

    }



    body[data-lang='en'] .about-kicker-block h2 {

      max-width: 100%;

      font-size: 1.7rem;

      line-height: 1.2;

      letter-spacing: 0.01em;

    }



    .band-kicker-en,

    .section-label span:last-child,

    .section-label-dark span:last-child {

      font-size: 18px;

    }



    .service-item {

      grid-template-columns: 36px 1fr;

      gap: 14px;

    }



    .footer-bottom {
      display: grid;
      gap: 10px;
    }

    .inner-hero {
      min-height: 460px;
    }

    .portfolio-hero-copy {
      padding-bottom: 12px;
    }

    .portfolio-count,
    .hero-button {
      width: 100%;
      justify-content: center;
    }

    .portfolio-masonry {
      --portfolio-columns: 1;
      gap: 14px;
    }

    .portfolio-column {
      gap: 14px;
    }
  }


  @media (prefers-reduced-motion: reduce) {

    html {

      scroll-behavior: auto;

    }



    *,

    *::before,

    *::after {

      animation: none !important;

      transition: none !important;

    }



    .reveal {

      opacity: 1;

      transform: none;

    }



    .scroll-indicator span,

    .scroll-indicator small {

      animation: none;

    }

  }























  .projects-side .section-label {

    display: flex;

    flex-wrap: nowrap;

    align-items: flex-end;

    white-space: nowrap;

  }



  .projects-side .section-label span:first-child {

    font-size: 24px;

    white-space: nowrap;

  }



  .projects-side .section-label span:last-child {

    white-space: nowrap;

  }



















































  body[data-lang='en'] .service-item h3 {

    white-space: normal;

    overflow-wrap: anywhere;

    line-height: 1.22;

    font-size: 15px;

  }





  @media (max-width: 900px) {

    .site-footer .footer-layout {

      display: grid !important;

      grid-template-columns: 1fr !important;

      justify-items: center !important;

      text-align: center !important;

    }



    .site-footer .footer-brand,

    .site-footer .footer-brand-head,

    .site-footer .footer-contact-block,

    .site-footer .footer-bottom {

      width: 100% !important;

      margin-left: auto !important;

      margin-right: auto !important;

      justify-self: center !important;

      justify-items: center !important;

      text-align: center !important;

    }



    .site-footer .footer-contact-block {

      display: grid !important;

      gap: 10px !important;

      place-items: center !important;

      width: fit-content !important;

      max-width: 100% !important;

    }



    .site-footer .footer-contact-block a,

    .site-footer .footer-contact-block p,

    .site-footer .footer-brand p,

    .site-footer .footer-bottom p {

      width: auto !important;

      max-width: 100% !important;

      text-align: center !important;

    }



    .site-footer .footer-brand-head-logo-only {

      display: flex !important;

      justify-content: center !important;

      align-items: center !important;

    }

  }



  @media (max-width: 900px) {

    .topbar.shell {

      padding: 2px 12px !important;

    }



    .hero-content.shell {

      padding-top: 42px !important;

    }



    .hero {

      min-height: 560px !important;

    }



    .hero-content {

      min-height: 460px !important;

      align-content: start !important;

    }



    .hero-copy {

      padding-bottom: 0 !important;

      margin-top: 120px !important;

      max-width: 430px;

    }



    .hero-copy h1 {

      margin-top: 0 !important;

    }



    .hero-subtitle {

      margin: 12px 0 18px !important;

    }

  }



  /* Mobile English Services Optimization */

  @media (max-width: 900px) {

    body[data-lang='en'] .services-row {

      grid-template-columns: 1fr !important;

      border-bottom: 0 !important;

    }



    body[data-lang='en'] .service-item {

      border-right: 0 !important;

      border-bottom: 1px solid var(--line-dark) !important;

      min-height: auto !important;

      padding: 24px 16px !important;

    }



    body[data-lang='en'] .service-item:last-child {

      border-bottom: 0 !important;

    }



    body[data-lang='en'] .service-item h3 {

      font-size: 18px !important;

      margin-bottom: 8px !important;

    }



    body[data-lang='en'] .service-item p {

      font-size: 14px !important;

      line-height: 1.6 !important;

    }

  }