.mc-hero { --mc-hero-sidebar-width: 32.7%; position: relative; display: grid; grid-template-columns: minmax(0,1fr) var(--mc-hero-sidebar-width); height: max(650px,56.25vw); overflow: clip; isolation: isolate; background: #101b2c; color: #EAE5D8; }
.mc-hero-background { position: absolute; inset: 0; z-index: -2; }
.mc-hero-background::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#09152a25,#070b1b15 35%,#070b1b88); }
.mc-hero-background .mc-hero-poster, .mc-hero-background .mc-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mc-hero-video:not(.is-playing) { opacity: 0; }
.mc-hero-main { min-width: 0; position: relative; }
.mc-hero .mc-hero-headline { position: absolute; bottom: 2.2vw; left: 1.5vw; width: calc(100% - 3vw); margin: 0; font: 400 8.65vw/.81 var(--mc-font-display); letter-spacing: -.02em; text-transform: uppercase; color: inherit; }
.mc-hero-headline span { display: block; }
.mc-hero-headline span:last-child { font-size: .67em; line-height: 1.2; letter-spacing: -.02em; margin-top: .15em; }
.mc-hero-scroll { position: absolute; right: 1.8vw; bottom: 1.2vw; display: flex; gap: 10px; align-items: center; font-size: clamp(11px,.94vw,18px); text-transform: uppercase; opacity: .7; }
.mc-hero-sidebar { position: relative; min-width: 0; height: 100%; border-left: 1px solid #EAE5D833; background: #17223542; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mc-hero-projects, .mc-hero-project { position: absolute; inset: 0; }
.mc-hero-project[hidden] { display: none !important; }
.mc-hero .mc-hero-project-title { position: absolute; z-index: 1; top: 15.4%; left: 12%; width: 76%; margin: 0; color: inherit; font: 400 3.35vw/.81 var(--mc-font-display); letter-spacing: -.02em; text-transform: uppercase; text-align: center; pointer-events: none; }
.mc-hero-project-image { position: absolute; top: 23.6%; left: 15.3%; width: 70.3%; aspect-ratio: 1; display: block; }
.mc-hero-project-image img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.mc-hero-address { position: absolute; top: 70.4%; left: 15.3%; width: 75%; display: flex; align-items: center; gap: 12px; margin: 0; font: 400 clamp(12px,.94vw,18px)/1.4 var(--mc-font-body); }
.mc-hero-address svg { flex: 0 0 28px; width: 28px; height: 28px; }
.mc-hero-count { position: absolute; top: 80.9%; left: 0; width: 100%; display: flex; justify-content: center; align-items: baseline; font: 400 1.4vw/1 var(--mc-font-display); letter-spacing: -.02em; pointer-events: none; }
.mc-hero-count b { font: inherit; font-size: 3.45vw; }
.mc-hero-count-divider { font-size: 4vw; padding-inline: 3px 12px; }
.mc-hero-project-link { position: absolute; z-index: 2; right: -3.1vw; top: 26.6%; width: 10.6vw; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1px solid #EAE5D8b3; border-radius: 50%; background: #17223585; color: inherit; font-size: clamp(10px,.68vw,14px); text-transform: uppercase; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.mc-hero-project-link::after { content: ''; position: absolute; inset: 5px; border: 1px solid #EAE5D880; border-radius: inherit; pointer-events: none; }
.mc-hero-progress { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); fill: none; stroke: #EAE5D8; stroke-width: 1.5; transform: rotate(-90deg); pointer-events: none; }
.mc-hero-progress circle { stroke-dasharray: 100; stroke-dashoffset: 100; }
.mc-hero-project-link span { position: relative; right: .6vw; }
.mc-hero-project-link:hover { background: #172235b3; }
.mc-hero a:focus-visible, .mc-hero button:focus-visible { outline: 2px solid #EAE5D8; outline-offset: 5px; }
.mc-hero-motion { position: absolute; z-index: 4; left: 20px; top: 100px; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mc-hero-motion:focus-visible { width: auto; height: auto; padding: 10px 16px; clip-path: none; border: 1px solid #EAE5D8; background: #00022E; color: #EAE5D8; }
body.home .mc-header.e-con { width: 67.3%; padding: 1.4vw 2vw; margin-inline: 0; }
body.home .mc-header .mc-header-logo { width: 14.5vw; }
@supports not (backdrop-filter: blur(1px)) {
  .mc-hero-sidebar { background: #172235bd; }
}
@media (min-width: 1025px) {
  body.home .mc-hero { height: 100vh; }
  body.home .mc-hero .mc-hero-project-title { font-size: min(3.35vw,6vh); }
  body.home .mc-hero-project-image { left: 50%; width: min(70.3%,42vh); transform: translateX(-50%); }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .mc-hero { --mc-hero-sidebar-width: 38%; }
  body.home .mc-header.e-con { width: 62%; padding: 24px 20px; }
  body.home .mc-header .mc-header-logo { width: 180px; }
  .mc-hero .mc-hero-headline { font-size: 7.8vw; bottom: 4vw; }
  .mc-hero .mc-hero-project-title { font-size: 4vw; }
  .mc-hero-project-image { left: 12%; width: 76%; }
  .mc-hero-address { left: 12%; width: 80%; }
  .mc-hero-project-link { width: 13vw; right: -2vw; }
}
@media (max-width: 767px) {
  body.home .mc-header.e-con { width: 100%; padding: 22px 20px; }
  body.home .mc-header .mc-header-logo { width: clamp(120px,38vw,155px); }
  .mc-hero { height: auto; display: block; }
  .mc-hero-main { min-height: 480px; height: 65svh; }
  .mc-hero .mc-hero-headline { left: 20px; width: calc(100% - 40px); bottom: 65px; font-size: 11.6vw; line-height: .95; }
  .mc-hero-scroll { right: 20px; bottom: 24px; }
  .mc-hero-sidebar { height: max(660px,160vw); border-left: 0; border-top: 1px solid #EAE5D833; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .mc-hero .mc-hero-project-title { top: 8%; left: 8%; width: 84%; font-size: clamp(42px,8.7vw,66px); }
  .mc-hero-project-image { top: 22%; left: 9%; width: 77%; }
  .mc-hero-address { top: 72%; left: 9%; width: 82%; font-size: 14px; }
  .mc-hero-project-link { top: 26%; width: clamp(104px,25vw,155px); right: 0; font-size: 11px; }
  .mc-hero-project-link span { right: 4px; }
  .mc-hero-count { top: 85%; font-size: 23px; }
  .mc-hero-count b { font-size: 60px; }
  .mc-hero-count-divider { font-size: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-hero * { transition: none !important; }
  .mc-hero-progress { display: none; }
}