/* Visualine Core — public experience */
@view-transition { navigation: auto; }

:root {
  --vl-font-sans: "Poppins", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --vl-font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --vl-bg: #efebe5;
  --vl-bg-soft: #e5e1db;
  --vl-bg-elevated: #f8f5f0;
  --vl-text: #171719;
  --vl-text-soft: #717171;
  --vl-line: rgba(23, 24, 19, 0.18);
  --vl-line-strong: rgba(23, 24, 19, 0.38);
  --vl-dark: #171719;
  --vl-dark-soft: #202124;
  --vl-dark-elevated: #2a2c2f;
  --vl-light: #f7f4ed;
  --vl-light-soft: #aeacab;
  --vl-accent: #667585;
  --vl-accent-deep: #4f6072;
  --vl-danger: #a63232;
  --vl-success: #2e7148;
  --vl-shadow: 0 30px 80px rgba(22, 23, 18, 0.12);
  --vl-header-height: 84px;
  --vl-container: min(1440px, calc(100vw - 80px));
  --vl-reading: 760px;
  --vl-radius: 0px;
  --vl-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vl-fast: 180ms;
  --vl-medium: 480ms;
  color-scheme: light;
}

html[data-vl-theme="dark"] {
  --vl-bg: #171719;
  --vl-bg-soft: #202124;
  --vl-bg-elevated: #2a2c2f;
  --vl-text: #f7f4ed;
  --vl-text-soft: #aeacab;
  --vl-line: rgba(240, 238, 228, 0.17);
  --vl-line-strong: rgba(240, 238, 228, 0.38);
  --vl-accent-deep: #667585;
  --vl-shadow: 0 34px 90px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
  background: var(--vl-bg);
  scrollbar-color: var(--vl-text-soft) var(--vl-bg);
  scrollbar-width: thin;
}

html[data-vl-theme] {
  transition: background-color 320ms ease, color 320ms ease;
}

body.vl-site {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--vl-bg);
  color: var(--vl-text);
  font-family: var(--vl-font-sans);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.vl-menu-open,
body.vl-lightbox-open {
  overflow: hidden;
}

body.vl-site *,
body.vl-site *::before,
body.vl-site *::after {
  box-sizing: border-box;
}

body.vl-site img,
body.vl-site svg,
body.vl-site video,
body.vl-site canvas,
body.vl-site model-viewer {
  display: block;
  max-width: 100%;
}

body.vl-site img {
  height: auto;
}

body.vl-site a {
  color: inherit;
  text-decoration: none;
}

body.vl-site button,
body.vl-site input,
body.vl-site select,
body.vl-site textarea {
  font: inherit;
}

body.vl-site button,
body.vl-site select {
  cursor: pointer;
}

body.vl-site button {
  color: inherit;
}

body.vl-site ::selection {
  background: var(--vl-accent);
  color: #11120f;
}

body.vl-site :focus-visible {
  outline: 2px solid var(--vl-accent-deep);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.vl-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.vl-skip-link {
  position: fixed;
  z-index: 10000;
  top: 12px;
  left: 12px;
  transform: translateY(-150%);
  padding: 12px 18px;
  background: var(--vl-accent);
  color: #11120f;
  font-weight: 700;
  transition: transform var(--vl-fast) ease;
}

.vl-skip-link:focus {
  transform: translateY(0);
}

.vl-main {
  min-height: 70vh;
}

.vl-container {
  width: var(--vl-container);
  margin-inline: auto;
}

.vl-section {
  position: relative;
  padding: clamp(88px, 10vw, 168px) 0;
  background: var(--vl-bg);
  color: var(--vl-text);
}

.vl-section--dark {
  --vl-text: #f3f0e7;
  --vl-text-soft: #aeb1a7;
  --vl-line: rgba(243, 240, 231, 0.18);
  --vl-line-strong: rgba(243, 240, 231, 0.4);
  --vl-accent-deep: #667585;
  background: var(--vl-dark);
  color: var(--vl-text);
}

.vl-section--stone {
  background: var(--vl-bg-soft);
}

.vl-kicker {
  margin: 0 0 22px;
  color: currentColor;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-transform: uppercase;
}

.vl-kicker::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  margin: 0 12px 3px 0;
  background: currentColor;
  opacity: 0.6;
}

.vl-lead {
  max-width: 780px;
  margin: 0;
  color: var(--vl-text-soft);
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  line-height: 1.55;
}

.vl-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  margin-bottom: clamp(48px, 7vw, 94px);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--vl-line);
}

.vl-section-heading > div {
  max-width: 980px;
}

.vl-section-heading h2 {
  max-width: 980px;
  margin: 0;
  font-family: var(--vl-font-display);
  font-size: clamp(2.6rem, 5.7vw, 6.5rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.vl-section-heading--dark {
  color: #f3f0e7;
}

.vl-text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  transition: gap var(--vl-fast) ease, opacity var(--vl-fast) ease;
}

.vl-text-link:hover {
  gap: 19px;
  opacity: 0.72;
}

.vl-text-link svg,
.vl-button svg,
.vl-header svg,
.vl-footer svg,
.vl-whatsapp-float svg,
.vl-project-card svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.vl-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.vl-button {
  position: relative;
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  overflow: hidden;
  padding: 14px 22px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
  transition: color var(--vl-fast) ease, background-color var(--vl-fast) ease, border-color var(--vl-fast) ease, transform var(--vl-fast) ease;
}

.vl-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(102%);
  background: var(--vl-accent);
  transition: transform 340ms var(--vl-ease);
}

.vl-button:hover::before {
  transform: translateY(0);
}

.vl-button:hover {
  color: #11120f;
  border-color: var(--vl-accent);
}

.vl-button:active {
  transform: translateY(1px);
}

.vl-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.vl-button--light {
  z-index: 0;
  border-color: #f3f0e7;
  background: #f3f0e7;
  color: #11120f;
}

.vl-button--light::before {
  background: var(--vl-accent);
}

.vl-button--ghost-light {
  z-index: 0;
  border-color: rgba(243, 240, 231, 0.55);
  color: #f3f0e7;
}

.vl-button--dark {
  z-index: 0;
  border-color: var(--vl-text);
  background: var(--vl-text);
  color: var(--vl-bg);
}

.vl-js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 780ms var(--vl-ease) var(--reveal-delay, 0ms), transform 780ms var(--vl-ease) var(--reveal-delay, 0ms);
}

.vl-js [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Header */
.vl-header {
  position: fixed;
  z-index: 950;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--vl-header-height);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: #f7f5ef;
  transition: height 300ms var(--vl-ease), color 300ms ease, background-color 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease;
}

.vl-header.is-scrolled,
body:not(.home) .vl-header,
body.vl-page-project .vl-header {
  height: 72px;
  border-color: var(--vl-line);
  background: color-mix(in srgb, var(--vl-bg) 90%, transparent);
  color: var(--vl-text);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
}

.vl-header__inner {
  display: grid;
  width: var(--vl-container);
  height: 100%;
  grid-template-columns: minmax(170px, 0.7fr) auto minmax(270px, 0.7fr);
  align-items: center;
  margin-inline: auto;
}

.vl-brand {
  display: inline-flex;
  width: max-content;
  align-items: center;
  font-size: 1.3rem;
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 1;
  view-transition-name: visualine-brand;
}

.vl-brand__image {
  width: auto;
  max-width: 188px;
  max-height: 36px;
  object-fit: contain;
}

.vl-brand__logos {
  display: inline-grid;
  align-items: center;
}

.vl-brand__logos > * {
  grid-area: 1 / 1;
}

.vl-brand__image--dark {
  display: none;
}

.vl-brand__image--dark:only-child {
  display: block;
}

html[data-vl-theme="dark"] .vl-brand__image--light:has(+ .vl-brand__image--dark) {
  display: none;
}

html[data-vl-theme="dark"] .vl-brand__image--dark {
  display: block;
}

.vl-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 40px);
}

.vl-nav a {
  position: relative;
  padding: 28px 0;
  font-size: 0.76rem;
  font-weight: 670;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.vl-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 21px;
  left: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right;
  background: currentColor;
  transition: transform 320ms var(--vl-ease);
}

.vl-nav a:hover::after,
.vl-nav a.is-current::after {
  transform: scaleX(1);
  transform-origin: left;
}

.vl-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.vl-icon-button,
.vl-menu-toggle {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid currentColor;
  background: transparent;
}

.vl-icon-button svg {
  width: 18px;
  height: 18px;
  transition: transform 420ms var(--vl-ease);
}

.vl-icon-button:hover svg {
  transform: rotate(30deg);
}

.vl-header__cta {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 10px 17px;
  background: #f7f5ef;
  color: #11120f;
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.04em;
  transition: background-color var(--vl-fast) ease, color var(--vl-fast) ease;
}

.vl-header.is-scrolled .vl-header__cta,
body:not(.home) .vl-header__cta,
body.vl-page-project .vl-header__cta {
  background: var(--vl-text);
  color: var(--vl-bg);
}

.vl-header__cta:hover {
  background: var(--vl-accent) !important;
  color: #11120f !important;
}

.vl-language-switcher {
  position: relative;
}

.vl-language-switcher > button {
  display: inline-flex;
  height: 42px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.08em;
}

.vl-language-switcher > button svg {
  width: 15px;
  height: 15px;
  transition: transform var(--vl-fast) ease;
}

.vl-language-switcher.is-open > button svg {
  transform: rotate(180deg);
}

.vl-language-switcher > div {
  position: absolute;
  z-index: 20;
  top: calc(100% + 12px);
  right: 0;
  width: 180px;
  padding: 8px;
  border: 1px solid var(--vl-line);
  background: var(--vl-bg-elevated);
  color: var(--vl-text);
  box-shadow: var(--vl-shadow);
}

.vl-language-switcher > div a {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  padding: 10px;
  font-size: 0.78rem;
  font-weight: 730;
}

.vl-language-switcher > div a small {
  color: var(--vl-text-soft);
  font-weight: 500;
}

.vl-language-switcher > div a:hover,
.vl-language-switcher > div a.is-current {
  background: var(--vl-bg-soft);
}

.vl-menu-toggle {
  display: none;
  border: 0;
}

.vl-menu-toggle > span:not(.vl-sr-only) {
  position: absolute;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: transform 300ms var(--vl-ease), opacity 200ms ease;
}

.vl-menu-toggle > span:nth-child(1) { transform: translateY(-6px); }
.vl-menu-toggle > span:nth-child(3) { transform: translateY(6px); }
.vl-menu-toggle[aria-expanded="true"] > span:nth-child(1) { transform: rotate(45deg); }
.vl-menu-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
.vl-menu-toggle[aria-expanded="true"] > span:nth-child(3) { transform: rotate(-45deg); }

.vl-mobile-menu {
  position: fixed;
  z-index: -1;
  inset: 0;
  padding: calc(var(--vl-header-height) + 32px) 26px 30px;
  background: var(--vl-dark);
  color: #f3f0e7;
  overflow-y: auto;
}

.vl-mobile-menu nav {
  display: flex;
  min-height: calc(100svh - 190px);
  flex-direction: column;
  justify-content: center;
}

.vl-mobile-menu nav > a {
  padding: 12px 0;
  border-bottom: 1px solid rgba(243, 240, 231, 0.15);
  font-family: var(--vl-font-display);
  font-size: clamp(2.1rem, 10vw, 4rem);
  line-height: 1.05;
}

.vl-mobile-menu nav > .vl-mobile-menu__cta {
  margin-top: 24px;
  border: 0;
  color: var(--vl-accent);
  font-family: var(--vl-font-sans);
  font-size: 0.9rem;
  font-weight: 730;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vl-mobile-menu__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid rgba(243, 240, 231, 0.2);
}

.vl-mobile-menu__bottom > button {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: none;
}

.vl-mobile-menu__bottom svg {
  width: 18px;
}

.vl-scroll-progress {
  position: fixed;
  z-index: 955;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
}

.vl-scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--vl-accent);
}

/* Homepage hero */
.vl-hero {
  position: relative;
  display: grid;
  min-height: max(760px, 100svh);
  overflow: hidden;
  align-items: end;
  background: #11120f;
  color: #f7f5ef;
  isolation: isolate;
}

.vl-hero__image {
  position: absolute;
  z-index: -3;
  inset: -5%;
  transform: translate3d(calc(var(--pointer-x, 0) * -12px), calc(var(--pointer-y, 0) * -8px + var(--scroll-shift, 0px)), 0) scale(1.07);
  transition: transform 1.1s var(--vl-ease);
}

.vl-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vl-hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 12, 10, 0.55) 0%, rgba(11, 12, 10, 0.1) 34%, rgba(11, 12, 10, 0.76) 100%),
    linear-gradient(90deg, rgba(8, 9, 7, 0.62) 0%, rgba(8, 9, 7, 0.06) 60%, rgba(8, 9, 7, 0.28) 100%);
}

.vl-spatial-canvas {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  mix-blend-mode: screen;
  opacity: 0.72;
}

.vl-hero__grid,
.vl-page-hero__grid,
.vl-contact-band__grid,
.vl-auth__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.085) 1px, transparent 1px);
  background-size: max(80px, 8vw) max(80px, 8vw);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 86%);
  opacity: 0.4;
}

.vl-hero__content {
  position: relative;
  z-index: 2;
  padding: calc(var(--vl-header-height) + 90px) 0 clamp(56px, 8vh, 100px);
}

.vl-hero__content > .vl-kicker {
  margin-bottom: clamp(36px, 7vh, 72px);
}

.vl-hero h1 {
  max-width: 1260px;
  margin: 0;
  font-family: var(--vl-font-display);
  font-size: clamp(4.2rem, 9.2vw, 10.7rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.84;
  text-wrap: balance;
  view-transition-name: visualine-title;
}

.vl-hero__bottom {
  display: grid;
  grid-template-columns: minmax(280px, 620px) auto;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-top: clamp(44px, 7vh, 82px);
}

.vl-hero__bottom > p {
  max-width: 650px;
  margin: 0;
  color: rgba(247, 245, 239, 0.82);
  font-size: clamp(1.02rem, 1.45vw, 1.32rem);
  line-height: 1.6;
}

.vl-hero__location {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: clamp(28px, 4vh, 48px) 0 0;
  color: rgba(247, 245, 239, 0.65);
  font-size: 0.72rem;
  font-weight: 620;
  letter-spacing: 0.05em;
}

.vl-hero__location svg {
  width: 17px;
  height: 17px;
}

.vl-hero__scroll {
  position: absolute;
  z-index: 3;
  right: clamp(24px, 3vw, 56px);
  bottom: clamp(32px, 5vw, 72px);
  display: grid;
  width: 42px;
  height: 66px;
  place-items: center;
  border: 1px solid rgba(247,245,239,.45);
  border-radius: 99px;
}

.vl-hero__scroll span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f7f5ef;
  animation: vl-scroll-cue 1.8s ease-in-out infinite;
}

@keyframes vl-scroll-cue {
  0%, 100% { transform: translateY(-9px); opacity: .35; }
  50% { transform: translateY(9px); opacity: 1; }
}

/* Project cards and selections */
.vl-project-mosaic {
  display: grid;
  grid-template-columns: 1.38fr 0.82fr 0.82fr;
  grid-template-rows: repeat(2, minmax(280px, 36vw));
  gap: 18px;
}

.vl-project-card {
  min-width: 0;
  transition: opacity 260ms ease, transform 420ms var(--vl-ease);
}

.vl-project-card[hidden] {
  display: none !important;
}

.vl-project-card > a {
  display: block;
  height: 100%;
}

.vl-project-card figure {
  position: relative;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
  margin: 0;
  background: var(--vl-bg-soft);
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 450ms var(--vl-ease), box-shadow 450ms var(--vl-ease);
}

.vl-project-card figure::after,
.vl-path-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(255,255,255,.2), transparent 38%);
  opacity: 0;
  transition: opacity 300ms ease;
}

.vl-project-card:hover figure::after,
.vl-path-card:hover::after {
  opacity: 1;
}

.vl-project-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 950ms var(--vl-ease), filter 350ms ease;
}

.vl-project-card:hover figure img {
  transform: scale(1.035);
}

.vl-project-card__open {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  display: grid;
  width: 46px;
  height: 46px;
  transform: translate3d(0, -8px, 30px);
  place-items: center;
  background: rgba(17,18,15,.84);
  color: #fff;
  opacity: 0;
  transition: opacity 240ms ease, transform 360ms var(--vl-ease);
}

.vl-project-card:hover .vl-project-card__open {
  transform: translate3d(0, 0, 30px);
  opacity: 1;
}

.vl-project-card__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
  padding-top: 17px;
}

.vl-project-card__meta p {
  margin: 0 0 4px;
  color: var(--vl-text-soft);
  font-size: 0.68rem;
  font-weight: 680;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vl-project-card__meta h3 {
  margin: 0;
  font-family: var(--vl-font-display);
  font-size: clamp(1.45rem, 2.3vw, 2.35rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.vl-project-card__meta > span {
  color: var(--vl-text-soft);
  font-size: 0.76rem;
  text-align: right;
}

.vl-project-card__excerpt {
  max-width: 640px;
  margin: 12px 0 0;
  color: var(--vl-text-soft);
  font-size: 0.9rem;
}

.vl-project-card--mosaic-1 {
  grid-row: 1 / 3;
}

.vl-project-card--mosaic-1 figure,
.vl-project-card--mosaic-2 figure,
.vl-project-card--mosaic-3 figure,
.vl-project-card--mosaic-4 figure {
  height: calc(100% - 82px);
}

.vl-project-card--mosaic-1 .vl-project-card__meta h3 {
  font-size: clamp(2rem, 3vw, 3.6rem);
}

/* Paths */
.vl-paths__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--vl-line);
  border-left: 1px solid var(--vl-line);
}

.vl-path-card {
  position: relative;
  display: grid;
  min-height: 620px;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  padding: clamp(28px, 4vw, 58px);
  border-right: 1px solid var(--vl-line);
  border-bottom: 1px solid var(--vl-line);
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: background-color 420ms ease, transform 450ms var(--vl-ease);
}

.vl-path-card:hover {
  background: var(--vl-dark-soft);
}

.vl-path-card__number {
  font-size: 0.72rem;
  font-weight: 740;
  letter-spacing: 0.16em;
}

.vl-path-card__graphic {
  position: relative;
  display: grid;
  width: min(380px, 75%);
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  place-items: center;
  transform-style: preserve-3d;
  transition: transform 900ms var(--vl-ease);
}

.vl-path-card:hover .vl-path-card__graphic {
  transform: rotate(8deg) scale(1.03);
}

.vl-path-card__graphic > span {
  position: absolute;
  border: 1px solid currentColor;
  opacity: 0.35;
}

.vl-path-card--architecture .vl-path-card__graphic > span:nth-child(1) { inset: 7%; transform: rotate(0deg); }
.vl-path-card--architecture .vl-path-card__graphic > span:nth-child(2) { inset: 22%; transform: rotate(45deg); }
.vl-path-card--architecture .vl-path-card__graphic > span:nth-child(3) { inset: 38%; background: var(--vl-accent); border-color: var(--vl-accent); opacity: .85; }
.vl-path-card--visualization .vl-path-card__graphic > span { border-radius: 50%; }
.vl-path-card--visualization .vl-path-card__graphic > span:nth-child(1) { inset: 8%; transform: rotateX(68deg); }
.vl-path-card--visualization .vl-path-card__graphic > span:nth-child(2) { inset: 24%; transform: rotateY(68deg); }
.vl-path-card--visualization .vl-path-card__graphic > span:nth-child(3) { inset: 40%; border-color: var(--vl-accent); box-shadow: 0 0 50px rgba(102,117,133,.25); opacity: 1; }

.vl-path-card h3 {
  max-width: 520px;
  margin: 0 0 20px;
  font-family: var(--vl-font-display);
  font-size: clamp(2.3rem, 4vw, 5.2rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.vl-path-card p {
  max-width: 590px;
  margin: 0 0 32px;
  color: var(--vl-text-soft);
}

/* Case / process / studio teaser */
.vl-case__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: clamp(60px, 9vw, 150px);
}

.vl-case__copy h2,
.vl-intro-statement h2,
.vl-local h2,
.vl-contact-band h2,
.vl-studio-teaser h2 {
  margin: 0 0 30px;
  font-family: var(--vl-font-display);
  font-size: clamp(2.7rem, 5.5vw, 6.5rem);
  font-weight: 400;
  letter-spacing: -0.048em;
  line-height: 0.98;
}

.vl-case__copy > p:not(.vl-kicker),
.vl-local p:not(.vl-kicker),
.vl-studio-teaser__copy > p:not(.vl-kicker) {
  max-width: 650px;
  margin: 0 0 34px;
  color: var(--vl-text-soft);
  font-size: 1.04rem;
}

.vl-case__visual {
  position: relative;
  padding: 0 44px 44px 0;
}

.vl-case__visual > a {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.vl-case__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--vl-ease);
}

.vl-case__visual > a:hover img {
  transform: scale(1.035);
}

.vl-case__visual > a > span {
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 15px;
  background: rgba(17,18,15,.88);
  color: #fff;
  font-size: .72rem;
  font-weight: 720;
}

.vl-case__measure {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  width: 72%;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  color: var(--vl-text-soft);
  font-size: .68rem;
}

.vl-case__measure i {
  height: 1px;
  background: var(--vl-line-strong);
}

.vl-process__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--vl-line);
  border-left: 1px solid var(--vl-line);
}

.vl-process__grid article {
  min-height: 330px;
  padding: clamp(24px, 3vw, 42px);
  border-right: 1px solid var(--vl-line);
  border-bottom: 1px solid var(--vl-line);
}

.vl-process__grid article > span {
  display: block;
  margin-bottom: clamp(60px, 8vw, 120px);
  color: var(--vl-text-soft);
  font-size: .72rem;
  font-weight: 720;
  letter-spacing: .14em;
}

.vl-process__grid h3 {
  margin: 0 0 16px;
  font-family: var(--vl-font-display);
  font-size: clamp(1.65rem, 2.5vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.vl-process__grid p {
  margin: 0;
  color: var(--vl-text-soft);
  font-size: .9rem;
}

.vl-studio-teaser__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: clamp(60px, 9vw, 150px);
}

.vl-studio-teaser__image {
  position: relative;
  min-height: 680px;
}

.vl-studio-teaser__image img {
  width: 100%;
  height: 680px;
  object-fit: cover;
}

.vl-studio-teaser__label {
  position: absolute;
  right: -20px;
  bottom: 28px;
  padding: 11px 16px;
  background: var(--vl-dark);
  color: #f3f0e7;
  font-size: .68rem;
  font-weight: 720;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Page heroes */
.vl-page-hero {
  position: relative;
  display: flex;
  min-height: min(840px, 88svh);
  align-items: flex-end;
  overflow: hidden;
  padding: calc(var(--vl-header-height) + 88px) 0 clamp(70px, 8vw, 120px);
  background: var(--vl-bg-soft);
  isolation: isolate;
}

.vl-page-hero__grid {
  background-image:
    linear-gradient(var(--vl-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--vl-line) 1px, transparent 1px);
  opacity: .65;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.9));
}

.vl-page-hero__content {
  position: relative;
  z-index: 3;
}

.vl-page-hero h1 {
  max-width: 1180px;
  margin: 0 0 44px;
  font-family: var(--vl-font-display);
  font-size: clamp(4rem, 8.5vw, 10.5rem);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: .88;
  text-wrap: balance;
}

.vl-page-hero .vl-lead {
  max-width: 740px;
}

.vl-page-hero__image {
  position: absolute;
  z-index: 1;
  right: -4vw;
  bottom: -5%;
  width: 44vw;
  height: 74%;
  transform: rotate(-3deg);
  opacity: .72;
  mix-blend-mode: luminosity;
}

.vl-page-hero__image::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(90deg, var(--vl-bg-soft), transparent 45%);
}

.vl-page-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vl-page-hero__wireframe {
  position: absolute;
  z-index: 1;
  right: 4vw;
  bottom: 8%;
  width: min(480px, 36vw);
  aspect-ratio: 1;
  transform: rotateX(65deg) rotateZ(-28deg);
  transform-style: preserve-3d;
}

.vl-page-hero__wireframe span {
  position: absolute;
  inset: calc(var(--i, 0) * 10%);
  border: 1px solid var(--vl-line-strong);
  box-shadow: 0 0 30px rgba(102,117,133,.08);
}

.vl-page-hero__wireframe span:nth-child(1) { --i: 0; transform: translateZ(0); }
.vl-page-hero__wireframe span:nth-child(2) { --i: 1; transform: translateZ(42px); }
.vl-page-hero__wireframe span:nth-child(3) { --i: 2; transform: translateZ(84px); }
.vl-page-hero__wireframe span:nth-child(4) { --i: 3; transform: translateZ(126px); }
.vl-page-hero__wireframe span:nth-child(5) { --i: 4; transform: translateZ(168px); border-color: var(--vl-accent-deep); }

.vl-intro-statement__grid {
  display: grid;
  grid-template-columns: .42fr 1.58fr;
  gap: 50px;
}

.vl-intro-statement h2 {
  max-width: 1000px;
}

.vl-intro-statement .vl-intro-statement__grid > div > p {
  max-width: 780px;
  color: var(--vl-text-soft);
  font-size: 1.08rem;
}

/* Services */
.vl-service-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--vl-line);
  border-left: 1px solid var(--vl-line);
}

.vl-service-card {
  min-height: 440px;
  padding: clamp(26px, 3vw, 44px);
  border-right: 1px solid var(--vl-line);
  border-bottom: 1px solid var(--vl-line);
}

.vl-service-card > span {
  display: block;
  margin-bottom: 72px;
  color: var(--vl-text-soft);
  font-size: .7rem;
  letter-spacing: .14em;
}

.vl-service-card h3 {
  margin: 0 0 18px;
  font-family: var(--vl-font-display);
  font-size: clamp(1.8rem, 2.7vw, 3rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.02;
}

.vl-service-card p {
  margin: 0 0 28px;
  color: var(--vl-text-soft);
}

.vl-service-card ul,
.vl-service-row ul,
.vl-contact-page__list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vl-service-card li,
.vl-service-row li {
  position: relative;
  padding: 8px 0 8px 18px;
  border-top: 1px solid var(--vl-line);
  color: var(--vl-text-soft);
  font-size: .82rem;
}

.vl-service-card li::before,
.vl-service-row li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  transform: translateY(-50%);
  border: 1px solid currentColor;
  border-radius: 50%;
}

.vl-local__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(70px, 10vw, 170px);
}

.vl-local__map {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--vl-line);
  background-image:
    linear-gradient(var(--vl-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--vl-line) 1px, transparent 1px);
  background-size: 48px 48px;
}

.vl-local__rings {
  position: absolute;
  inset: 10%;
}

.vl-local__rings span {
  position: absolute;
  inset: calc(var(--ring, 0) * 14%);
  border: 1px solid var(--vl-line-strong);
  border-radius: 50%;
}

.vl-local__rings span:nth-child(1) { --ring: 0; }
.vl-local__rings span:nth-child(2) { --ring: 1; }
.vl-local__rings span:nth-child(3) { --ring: 2; }
.vl-local__rings i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--vl-accent-deep);
  box-shadow: 0 0 0 16px color-mix(in srgb, var(--vl-accent-deep) 14%, transparent);
}

.vl-local__map b {
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-size: .66rem;
  letter-spacing: .1em;
  text-align: right;
}

.vl-project-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.vl-project-card--strip figure {
  aspect-ratio: 4 / 3;
  min-height: 0;
}

.vl-formats__grid,
.vl-principles__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--vl-line);
  border-left: 1px solid var(--vl-line);
}

.vl-formats__grid article,
.vl-principles__grid article {
  min-height: 480px;
  padding: clamp(24px, 3vw, 42px);
  border-right: 1px solid var(--vl-line);
  border-bottom: 1px solid var(--vl-line);
}

.vl-formats__grid article > span,
.vl-principles__grid article > span {
  font-size: .7rem;
  letter-spacing: .14em;
}

.vl-format-icon {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 58px auto 54px;
  transform-style: preserve-3d;
}

.vl-format-icon i {
  position: absolute;
  inset: 0;
  border: 1px solid var(--vl-line-strong);
  transition: transform 800ms var(--vl-ease);
}

.vl-format-icon i:nth-child(2) { transform: rotate(45deg) scale(.72); }
.vl-format-icon i:nth-child(3) { transform: rotate(22deg) scale(.4); border-color: var(--vl-accent); background: rgba(102,117,133,.08); }
.vl-formats__grid article:hover .vl-format-icon i:nth-child(1) { transform: rotate(25deg); }
.vl-formats__grid article:hover .vl-format-icon i:nth-child(2) { transform: rotate(75deg) scale(.72); }
.vl-formats__grid article:hover .vl-format-icon i:nth-child(3) { transform: rotate(-12deg) scale(.45); }
.vl-format-icon--2 i { border-radius: 50%; }
.vl-format-icon--3 { transform: rotateX(62deg) rotateZ(-25deg); }
.vl-format-icon--4 i:nth-child(1),
.vl-format-icon--4 i:nth-child(2) { border-radius: 50%; }

.vl-formats__grid h3,
.vl-principles__grid h3 {
  margin: 0 0 16px;
  font-family: var(--vl-font-display);
  font-size: clamp(1.65rem, 2.25vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.04;
}

.vl-formats__grid p,
.vl-principles__grid p {
  margin: 0;
  color: var(--vl-text-soft);
  font-size: .9rem;
}

.vl-experience-lab__head {
  display: grid;
  grid-template-columns: .45fr 1.1fr .75fr;
  align-items: start;
  gap: 40px;
  margin-bottom: 70px;
}

.vl-experience-lab__head h2 {
  margin: 0;
  font-family: var(--vl-font-display);
  font-size: clamp(2.8rem, 5vw, 6rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .98;
}

.vl-experience-lab__head > p:last-child {
  margin: 0;
  color: var(--vl-text-soft);
}

/* Interactive plan */
.vl-plan-demo,
.vl-plan-explorer {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--vl-line);
  background:
    radial-gradient(circle at 60% 30%, color-mix(in srgb, var(--vl-accent-deep) 12%, transparent), transparent 34%),
    var(--vl-bg-soft);
}

.vl-plan-demo {
  min-height: 720px;
}

.vl-plan-demo__stage,
.vl-plan-explorer__stage {
  position: relative;
  display: grid;
  width: min(780px, 80%);
  aspect-ratio: 1.4;
  place-items: center;
  margin: 90px auto 40px;
  transform: perspective(1300px) rotateX(var(--plan-rotate-x, 62deg)) rotateZ(var(--plan-rotate-z, -18deg)) scale(var(--plan-scale, .92));
  transform-style: preserve-3d;
  cursor: grab;
  touch-action: none;
  transition: transform 220ms var(--vl-ease);
}

.vl-plan-demo__stage.is-dragging,
.vl-plan-explorer__stage.is-dragging {
  cursor: grabbing;
  transition: none;
}

.vl-plan-demo__layer,
.vl-plan-explorer__layer,
.vl-plan-explorer__pdf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(calc(var(--layer) * 58px));
  border: 1px solid color-mix(in srgb, var(--vl-accent-deep) 55%, transparent);
  background: color-mix(in srgb, var(--vl-bg-elevated) 86%, transparent);
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  color: var(--vl-text);
  object-fit: contain;
  opacity: calc(1 - var(--layer) * .09);
}

.vl-plan-demo__layer {
  padding: 20px;
}

.vl-plan-explorer__pdf {
  display: grid;
  place-items: center;
  padding: 40px;
  text-align: center;
}

.vl-plan-explorer__pdf span {
  display: inline-grid;
  width: 70px;
  height: 70px;
  place-items: center;
  border: 1px solid currentColor;
  font-weight: 800;
}

.vl-plan-demo__controls,
.vl-plan-explorer__controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 34px 0;
}

.vl-plan-demo__controls button,
.vl-plan-explorer__controls button {
  min-width: 48px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--vl-line-strong);
  background: var(--vl-bg-elevated);
}

.vl-plan-demo__controls button:hover,
.vl-plan-explorer__controls button:hover {
  background: var(--vl-text);
  color: var(--vl-bg);
}

.vl-plan-demo__legend {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: flex;
  gap: 20px;
  color: var(--vl-text-soft);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vl-plan-demo__legend span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vl-plan-demo__legend i {
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

/* Services index */
.vl-services-index__list {
  border-top: 1px solid var(--vl-line-strong);
}

.vl-service-row {
  display: grid;
  grid-template-columns: 72px minmax(260px, 1.2fr) minmax(260px, .8fr) 50px;
  align-items: start;
  gap: 34px;
  padding: 48px 0;
  border-bottom: 1px solid var(--vl-line);
}

.vl-service-row__number {
  color: var(--vl-text-soft);
  font-size: .7rem;
  letter-spacing: .14em;
}

.vl-service-row__copy .vl-kicker {
  margin-bottom: 12px;
}

.vl-service-row__copy h2 {
  margin: 0 0 14px;
  font-family: var(--vl-font-display);
  font-size: clamp(2rem, 3.8vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .98;
}

.vl-service-row__copy > p:not(.vl-kicker) {
  max-width: 650px;
  margin: 0;
  color: var(--vl-text-soft);
}

.vl-service-row > a {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--vl-line-strong);
  transition: background-color var(--vl-fast) ease, color var(--vl-fast) ease;
}

.vl-service-row > a:hover {
  background: var(--vl-text);
  color: var(--vl-bg);
}

.vl-two-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--vl-line);
  border-left: 1px solid var(--vl-line);
}

.vl-two-paths > div {
  min-height: 470px;
  padding: clamp(34px, 5vw, 72px);
  border-right: 1px solid var(--vl-line);
  border-bottom: 1px solid var(--vl-line);
}

.vl-two-paths h2 {
  max-width: 620px;
  margin: clamp(80px, 10vw, 140px) 0 30px;
  font-family: var(--vl-font-display);
  font-size: clamp(2.3rem, 4.2vw, 5rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .98;
}

/* Project archive */
.vl-project-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 58px;
}

.vl-project-filters button {
  min-height: 42px;
  padding: 8px 15px;
  border: 1px solid var(--vl-line);
  background: transparent;
  color: var(--vl-text-soft);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.vl-project-filters button:hover,
.vl-project-filters button.is-active {
  border-color: var(--vl-text);
  background: var(--vl-text);
  color: var(--vl-bg);
}

.vl-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(58px, 7vw, 108px) 24px;
}

.vl-project-card--grid figure {
  aspect-ratio: 16 / 10;
  min-height: 0;
}

.vl-project-empty {
  padding: 80px 0;
  border-top: 1px solid var(--vl-line);
  color: var(--vl-text-soft);
  text-align: center;
}

/* Studio */
.vl-studio-hero {
  padding: calc(var(--vl-header-height) + 90px) 0 clamp(80px, 10vw, 150px);
}

.vl-studio-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: end;
  gap: clamp(70px, 9vw, 150px);
}

.vl-studio-hero h1 {
  max-width: 930px;
  margin: 0 0 38px;
  font-family: var(--vl-font-display);
  font-size: clamp(4rem, 8vw, 9.5rem);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: .87;
}

.vl-studio-hero__image {
  position: relative;
  min-height: 720px;
}

.vl-studio-hero__image img {
  width: 100%;
  height: 720px;
  object-fit: cover;
}

.vl-studio-hero__image > span {
  position: absolute;
  right: -22px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
  background: var(--vl-dark);
  color: #f3f0e7;
  font-weight: 720;
}

.vl-studio-hero__image small {
  color: #aeb1a7;
  font-size: .68rem;
  font-weight: 500;
}

.vl-studio-copy > .vl-container {
  display: grid;
  grid-template-columns: .35fr 1.65fr;
  gap: 40px;
}

.vl-studio-copy__number {
  color: var(--vl-text-soft);
  font-size: .72rem;
  letter-spacing: .14em;
}

.vl-studio-copy__body p {
  max-width: 1050px;
  margin: 0 0 42px;
  font-family: var(--vl-font-display);
  font-size: clamp(1.9rem, 3.5vw, 4.4rem);
  letter-spacing: -.035em;
  line-height: 1.18;
}

.vl-studio-signature {
  padding-top: 60px;
  padding-bottom: 100px;
}

.vl-studio-signature__line {
  height: 1px;
  margin-bottom: 36px;
  background: var(--vl-line);
}

.vl-studio-signature p {
  margin: 0;
  font-family: var(--vl-font-display);
  font-size: clamp(2.6rem, 5vw, 5.7rem);
  font-style: italic;
}

.vl-studio-signature span {
  color: var(--vl-text-soft);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Contact */
.vl-contact-page {
  min-height: 100svh;
  padding: calc(var(--vl-header-height) + 90px) 0 clamp(100px, 10vw, 160px);
}

.vl-contact-page__grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(60px, 9vw, 150px);
}

.vl-contact-page__intro h1 {
  max-width: 780px;
  margin: 0 0 38px;
  font-family: var(--vl-font-display);
  font-size: clamp(4rem, 7.3vw, 8.8rem);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: .88;
}

.vl-contact-page__direct {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  margin: 48px 0 70px;
}

.vl-contact-page__direct a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid currentColor;
  font-weight: 660;
}

.vl-contact-page__direct span {
  color: var(--vl-text-soft);
}

.vl-contact-page__list h2 {
  margin: 0 0 20px;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.vl-contact-page__list li {
  padding: 10px 0;
  border-top: 1px solid var(--vl-line);
  color: var(--vl-text-soft);
}

.vl-contact-page__form {
  padding: clamp(26px, 4vw, 58px);
  border: 1px solid var(--vl-line);
  background: var(--vl-bg-elevated);
  box-shadow: var(--vl-shadow);
}

.vl-contact-form,
.vl-auth form {
  display: grid;
  gap: 20px;
}

.vl-contact-form label,
.vl-auth form label {
  display: grid;
  gap: 8px;
}

.vl-contact-form label > span,
.vl-auth form label > span {
  color: var(--vl-text-soft);
  font-size: .7rem;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vl-form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.vl-contact-form input,
.vl-contact-form select,
.vl-contact-form textarea,
.vl-auth input {
  width: 100%;
  min-height: 52px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--vl-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--vl-text);
  outline: 0;
  transition: border-color var(--vl-fast) ease;
}

.vl-contact-form textarea {
  min-height: 130px;
  resize: vertical;
}

.vl-contact-form input:focus,
.vl-contact-form select:focus,
.vl-contact-form textarea:focus,
.vl-auth input:focus {
  border-color: var(--vl-accent-deep);
}

.vl-file-field {
  padding: 20px;
  border: 1px dashed var(--vl-line-strong);
}

.vl-file-field input {
  min-height: auto;
  border: 0;
  font-size: .8rem;
}

.vl-file-field small {
  color: var(--vl-text-soft);
  font-size: .7rem;
}

.vl-consent {
  display: grid !important;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 10px !important;
}

.vl-consent input,
.vl-checkbox input {
  width: 17px;
  min-height: 17px;
  margin: 3px 0 0;
  accent-color: var(--vl-accent-deep);
}

.vl-consent > span {
  letter-spacing: 0 !important;
  line-height: 1.55;
  text-transform: none !important;
}

.vl-consent a {
  border-bottom: 1px solid currentColor;
}

.vl-honeypot {
  position: absolute !important;
  left: -9999px !important;
}

.vl-form-status {
  min-height: 1.4em;
  color: var(--vl-text-soft);
  font-size: .82rem;
}

.vl-form-status.is-success { color: var(--vl-success); }
.vl-form-status.is-error { color: var(--vl-danger); }
.vl-contact-form.is-sent { animation: vl-form-success 900ms var(--vl-ease); }

@keyframes vl-form-success {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(.992); box-shadow: 0 0 0 12px color-mix(in srgb, var(--vl-success) 8%, transparent); }
}

/* Legal */
.vl-legal-page {
  padding: calc(var(--vl-header-height) + 90px) 0 130px;
}

.vl-legal-page__grid {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: clamp(70px, 10vw, 160px);
}

.vl-legal-page aside {
  position: sticky;
  top: 120px;
  align-self: start;
}

.vl-legal-page h1 {
  margin: 0 0 24px;
  font-family: var(--vl-font-display);
  font-size: clamp(3rem, 6vw, 7rem);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .95;
}

.vl-legal-page aside > p:last-child {
  color: var(--vl-text-soft);
}

.vl-legal-page article {
  max-width: var(--vl-reading);
}

.vl-legal-page article h2 {
  margin: 55px 0 14px;
  font-family: var(--vl-font-display);
  font-size: 2rem;
  font-weight: 400;
}

.vl-legal-page article h2:first-child { margin-top: 0; }
.vl-legal-page article p { color: var(--vl-text-soft); }
.vl-legal-page article a { border-bottom: 1px solid currentColor; }

/* Project single */
.vl-project-hero {
  padding: calc(var(--vl-header-height) + 90px) 0 80px;
}

.vl-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(70px, 8vw, 130px);
  color: var(--vl-text-soft);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vl-breadcrumb a:hover { color: var(--vl-text); }

.vl-project-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: end;
  gap: clamp(60px, 9vw, 150px);
}

.vl-project-hero h1 {
  margin: 0;
  font-family: var(--vl-font-display);
  font-size: clamp(4.3rem, 9.5vw, 11rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .84;
  view-transition-name: visualine-project-title;
}

.vl-project-hero__grid > div:last-child {
  padding-bottom: 16px;
}

.vl-project-hero__grid .vl-text-link {
  margin-top: 34px;
}

.vl-project-cover {
  width: calc(100vw - 32px);
  margin: 0 auto;
  view-transition-name: visualine-project-cover;
}

.vl-project-cover > img {
  width: 100%;
  height: min(82svh, 980px);
  object-fit: cover;
}

.vl-project-cover figcaption {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  color: var(--vl-text-soft);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.vl-project-overview__grid {
  display: grid;
  grid-template-columns: .38fr 1.62fr;
  gap: clamp(70px, 10vw, 170px);
}

.vl-project-overview aside {
  align-self: start;
  position: sticky;
  top: 120px;
}

.vl-project-overview dl {
  margin: 0;
}

.vl-project-overview dl > div {
  padding: 15px 0;
  border-top: 1px solid var(--vl-line);
}

.vl-project-overview dt {
  color: var(--vl-text-soft);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.vl-project-overview dd {
  margin: 4px 0 0;
  font-size: .92rem;
}

.vl-project-overview__story {
  max-width: 970px;
}

.vl-story-block {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px 30px;
  padding: 0 0 clamp(70px, 9vw, 130px);
}

.vl-story-block > span {
  grid-row: 1 / 3;
  color: var(--vl-text-soft);
  font-size: .7rem;
  letter-spacing: .14em;
}

.vl-story-block h2 {
  margin: 0 0 22px;
  font-family: var(--vl-font-display);
  font-size: clamp(2.5rem, 4.5vw, 5.4rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .98;
}

.vl-story-block p {
  max-width: 740px;
  margin: 0 0 18px;
  color: var(--vl-text-soft);
  font-size: 1.02rem;
}

/* Immersive modules */
.vl-immersive__stack {
  display: grid;
  gap: 72px;
}

.vl-immersive-module {
  border-top: 1px solid var(--vl-line);
  padding-top: 34px;
}

.vl-immersive-module__head {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: start;
  margin-bottom: 34px;
}

.vl-immersive-module__head > span {
  color: var(--vl-text-soft);
  font-size: .72rem;
  letter-spacing: .14em;
}

.vl-immersive-module__head .vl-kicker {
  margin-bottom: 8px;
}

.vl-immersive-module__head h3 {
  max-width: 900px;
  margin: 0;
  font-family: var(--vl-font-display);
  font-size: clamp(2.1rem, 4.2vw, 5rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .98;
}

.vl-model-viewer {
  width: 100%;
  height: min(78svh, 900px);
  min-height: 560px;
  background:
    radial-gradient(circle at 50% 45%, rgba(102,117,133,.1), transparent 32%),
    #171914;
  --poster-color: transparent;
}

.vl-model-load,
.vl-model-ar,
.vl-panorama > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 13px 20px;
  border: 1px solid rgba(243,240,231,.45);
  background: rgba(17,18,15,.84);
  color: #f3f0e7;
  font-size: .75rem;
  font-weight: 740;
  letter-spacing: .05em;
}

.vl-model-load svg,
.vl-model-ar svg,
.vl-panorama > button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.vl-model-ar {
  position: absolute;
  right: 18px;
  bottom: 18px;
  border-color: var(--vl-accent);
  background: var(--vl-accent);
  color: #11120f;
}

.vl-model-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255,255,255,.12);
}

.vl-model-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--vl-accent);
}

.vl-model-viewer.is-loaded .vl-model-progress { opacity: 0; }
.vl-model-viewer.has-error { outline: 1px solid var(--vl-danger); }

.vl-panorama {
  position: relative;
  display: grid;
  height: min(72svh, 820px);
  min-height: 520px;
  place-items: center;
  overflow: hidden;
  background-image: linear-gradient(rgba(10,11,9,.35), rgba(10,11,9,.65)), var(--panorama-preview);
  background-position: center;
  background-size: cover;
}

.vl-panorama::before {
  content: "360°";
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.45);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.vl-panorama.is-loaded::before { display: none; }
.vl-panorama.has-error { outline: 1px solid var(--vl-danger); }

.vl-panorama-scenes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.vl-panorama-scenes button {
  padding: 9px 13px;
  border: 1px solid var(--vl-line);
  background: transparent;
  color: var(--vl-text-soft);
  font-size: .7rem;
}

.vl-panorama-scenes button.is-active,
.vl-panorama-scenes button:hover {
  border-color: var(--vl-accent);
  color: var(--vl-accent);
}

.vl-plan-module .vl-plan-explorer {
  min-height: 700px;
  background: #171914;
}

.vl-plan-module .vl-plan-explorer__stage {
  width: min(850px, 80%);
  margin-top: 110px;
}

.vl-before-after {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #222;
}

.vl-before-after__after,
.vl-before-after__before,
.vl-before-after__before img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vl-before-after__before {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
}

.vl-before-after__before img {
  width: auto;
  max-width: none;
  width: 100%;
  max-width: none;
}

.vl-before-after input {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}

.vl-before-after__handle {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: #fff;
  pointer-events: none;
}

.vl-before-after__handle::before {
  content: "↔";
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #11120f;
  font-size: 1.2rem;
}

.vl-before-after b {
  position: absolute;
  z-index: 4;
  top: 18px;
  padding: 8px 11px;
  background: rgba(17,18,15,.75);
  color: #fff;
  font-size: .67rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.vl-before-after .is-before { left: 18px; }
.vl-before-after .is-after { right: 18px; }

.vl-video-embed,
.vl-video-direct {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.vl-video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.vl-external-experience {
  display: grid;
  min-height: 320px;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 22px;
  padding: 40px;
  border: 1px solid var(--vl-line);
}

.vl-external-experience > span {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid currentColor;
}

.vl-external-experience svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
}

/* Gallery */
.vl-project-gallery__head {
  display: grid;
  grid-template-columns: .45fr 1.55fr;
  align-items: start;
  margin-bottom: 50px;
}

.vl-project-gallery__head h2 {
  margin: 0;
  font-family: var(--vl-font-display);
  font-size: clamp(2.7rem, 5vw, 6rem);
  font-weight: 400;
  letter-spacing: -.045em;
}

.vl-project-gallery__grid {
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: minmax(220px, 28vw);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.vl-project-gallery__grid figure {
  min-width: 0;
  margin: 0;
}

.vl-project-gallery__grid figure.is-wide {
  grid-column: 1 / -1;
}

.vl-project-gallery__grid figure.is-tall {
  grid-row: span 2;
}

.vl-project-gallery__grid button {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: var(--vl-bg-soft);
}

.vl-project-gallery__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 850ms var(--vl-ease);
}

.vl-project-gallery__grid button:hover img {
  transform: scale(1.025);
}

.vl-project-gallery__grid button > span {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  background: rgba(17,18,15,.84);
  color: #fff;
  opacity: 0;
  transition: opacity 220ms ease;
}

.vl-project-gallery__grid button:hover > span { opacity: 1; }
.vl-project-gallery__grid figcaption {
  padding: 10px 0 0;
  color: var(--vl-text-soft);
  font-size: .74rem;
}

/* Contact band */
.vl-contact-band {
  position: relative;
  overflow: hidden;
  padding: clamp(100px, 13vw, 200px) 0;
  background: var(--vl-dark);
  color: #f3f0e7;
  isolation: isolate;
}

.vl-contact-band__grid {
  z-index: -1;
  opacity: .35;
}

.vl-contact-band__inner {
  text-align: center;
}

.vl-contact-band h2 {
  max-width: 1100px;
  margin-inline: auto;
}

.vl-contact-band__inner > p:not(.vl-kicker) {
  max-width: 720px;
  margin: 0 auto 38px;
  color: #b8bbb0;
  font-size: 1.04rem;
}

.vl-contact-band .vl-button-row {
  justify-content: center;
}

/* Footer */
.vl-footer {
  padding: clamp(80px, 10vw, 150px) 0 24px;
  background: #0d0e0c;
  color: #f3f0e7;
}

.vl-footer__top {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(70px, 10vw, 160px);
  padding-bottom: 80px;
}

.vl-footer__statement h2 {
  max-width: 900px;
  margin: 0 0 38px;
  font-family: var(--vl-font-display);
  font-size: clamp(3rem, 6vw, 7.2rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .92;
}

.vl-footer__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 52px 28px;
}

.vl-footer__columns > div:last-child {
  grid-column: 1 / -1;
}

.vl-footer__columns h3 {
  margin: 0 0 20px;
  color: #8f9288;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.vl-footer__columns a,
.vl-footer__columns span {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 8px 0;
  color: #c9cbbf;
  font-size: .83rem;
}

.vl-footer__columns a:hover { color: #fff; }

.vl-language-select select {
  width: 100%;
  min-height: 44px;
  padding: 8px 36px 8px 12px;
  border: 1px solid rgba(243,240,231,.25);
  border-radius: 0;
  background: transparent;
  color: #f3f0e7;
}

.vl-footer__theme {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(243,240,231,.25);
  background: transparent;
  color: #f3f0e7;
}

.vl-footer__theme svg { width: 18px; }

.vl-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(243,240,231,.16);
}

.vl-footer__socials,
.vl-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.vl-footer__socials a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #a9aca1;
  font-size: .68rem;
}

.vl-footer__socials a:hover { color: #fff; }
.vl-footer__socials svg { width: 17px; height: 17px; }
.vl-footer__legal { color: #7f8278; font-size: .65rem; }
.vl-footer__legal a:hover { color: #fff; }

.vl-whatsapp-float {
  position: fixed;
  z-index: 700;
  right: 22px;
  bottom: 22px;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  background: #11120f;
  color: #fff;
  box-shadow: 0 14px 35px rgba(0,0,0,.24);
  transition: transform 250ms var(--vl-ease), background-color 250ms ease, color 250ms ease;
}

.vl-whatsapp-float:hover {
  transform: translateY(-4px) rotate(-5deg);
  background: var(--vl-accent);
  color: #11120f;
}

.vl-whatsapp-float svg { width: 24px; height: 24px; }

/* Lightbox */
.vl-lightbox {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  grid-template-columns: 68px 1fr 68px;
  place-items: center;
  padding: 30px;
  background: rgba(8,9,7,.96);
  color: #fff;
}

.vl-lightbox > button {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  background: transparent;
  color: #fff;
  font-size: 2rem;
}

.vl-lightbox > [data-lightbox-close] {
  position: absolute;
  top: 22px;
  right: 22px;
}

.vl-lightbox figure {
  display: grid;
  max-width: min(1500px, 86vw);
  max-height: 88vh;
  place-items: center;
  margin: 0;
}

.vl-lightbox img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
}

.vl-lightbox figcaption {
  padding-top: 12px;
  color: rgba(255,255,255,.65);
  font-size: .72rem;
}

/* Auth */
body.vl-private-page {
  background: var(--vl-bg);
}

.vl-auth {
  display: grid;
  min-height: 100svh;
  grid-template-columns: 1.1fr .9fr;
}

.vl-auth__visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: clamp(40px, 6vw, 90px);
  background:
    linear-gradient(180deg, rgba(17,18,15,.2), rgba(17,18,15,.84)),
    url("https://visualine.com.ar/wp-content/uploads/2025/06/exterior_pileta_bretes.jpg") center / cover;
  color: #f3f0e7;
}

.vl-auth__visual > div:last-child {
  position: relative;
  z-index: 2;
}

.vl-auth__visual span {
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .12em;
}

.vl-auth__visual h1 {
  max-width: 760px;
  margin: 50px 0 24px;
  font-family: var(--vl-font-display);
  font-size: clamp(3.3rem, 6.5vw, 8rem);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: .88;
}

.vl-auth__visual p { color: #c7c9c0; }

.vl-auth__form {
  display: grid;
  place-items: center;
  padding: 50px;
}

.vl-auth__form > div {
  width: min(480px, 100%);
}

.vl-auth__form h2 {
  margin: 0 0 14px;
  font-family: var(--vl-font-display);
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 400;
  letter-spacing: -.04em;
}

.vl-auth__form > div > p:not(.vl-kicker) {
  color: var(--vl-text-soft);
}

.vl-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: .76rem;
}

.vl-auth__row .vl-checkbox {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
}

.vl-auth__message {
  margin: 18px 0;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--vl-success) 45%, var(--vl-line));
  background: color-mix(in srgb, var(--vl-success) 8%, transparent);
  font-size: .82rem;
}

.vl-auth__message.is-error {
  border-color: color-mix(in srgb, var(--vl-danger) 55%, var(--vl-line));
  background: color-mix(in srgb, var(--vl-danger) 8%, transparent);
}

.vl-auth__back {
  display: inline-block;
  margin-top: 26px;
  color: var(--vl-text-soft);
  font-size: .76rem;
}

/* Custom cursor */
.vl-cursor {
  position: fixed;
  z-index: 3000;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  mix-blend-mode: difference;
}

.vl-cursor span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1);
  border: 1px solid #fff;
  border-radius: 50%;
  background: #fff;
  transition: transform 260ms var(--vl-ease), background-color 200ms ease;
}

.vl-cursor.is-visible { opacity: 1; }
.vl-cursor.is-active span { transform: scale(2.4); background: transparent; }

/* Responsive */
@media (max-width: 1280px) {
  :root {
    --vl-container: min(100% - 56px, 1240px);
  }
  .vl-header__inner {
    grid-template-columns: minmax(145px, .55fr) auto minmax(240px, .55fr);
  }
  .vl-nav { gap: 20px; }
  .vl-nav a { font-size: .7rem; }
  .vl-header__cta { padding-inline: 13px; }
  .vl-project-mosaic { grid-template-rows: repeat(2, minmax(260px, 33vw)); }
}

@media (max-width: 1040px) {
  :root {
    --vl-container: min(100% - 40px, 940px);
    --vl-header-height: 72px;
  }
  .vl-header__inner { grid-template-columns: 1fr auto; }
  .vl-nav,
  .vl-header__cta,
  .vl-header__actions > .vl-language-switcher,
  .vl-header__actions > .vl-theme-toggle { display: none; }
  .vl-menu-toggle { display: inline-grid; position: relative; }
  .vl-header__actions { gap: 0; }
  .vl-hero { min-height: max(760px, 100svh); }
  .vl-hero h1 { font-size: clamp(4rem, 13vw, 8rem); }
  .vl-hero__bottom { grid-template-columns: 1fr; }
  .vl-project-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }
  .vl-project-card--mosaic-1 { grid-column: 1 / -1; grid-row: auto; }
  .vl-project-card--mosaic-1 figure { aspect-ratio: 16 / 10; }
  .vl-project-card--mosaic-2 figure,
  .vl-project-card--mosaic-3 figure,
  .vl-project-card--mosaic-4 figure { aspect-ratio: 4 / 3; }
  .vl-paths__grid,
  .vl-case__grid,
  .vl-studio-teaser__grid,
  .vl-local__grid,
  .vl-studio-hero__grid,
  .vl-contact-page__grid,
  .vl-legal-page__grid,
  .vl-project-hero__grid,
  .vl-project-overview__grid,
  .vl-footer__top {
    grid-template-columns: 1fr;
  }
  .vl-path-card { min-height: 540px; }
  .vl-case__visual { width: min(760px, 100%); margin-left: auto; }
  .vl-process__grid,
  .vl-formats__grid,
  .vl-principles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vl-studio-teaser__image,
  .vl-studio-teaser__image img,
  .vl-studio-hero__image,
  .vl-studio-hero__image img { min-height: 0; height: min(70svh, 760px); }
  .vl-page-hero__image,
  .vl-page-hero__wireframe { opacity: .28; }
  .vl-intro-statement__grid,
  .vl-studio-copy > .vl-container,
  .vl-project-gallery__head { grid-template-columns: 1fr; }
  .vl-intro-statement__grid > .vl-kicker { margin-bottom: 0; }
  .vl-service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vl-experience-lab__head { grid-template-columns: 1fr; }
  .vl-experience-lab__head .vl-kicker { margin-bottom: 0; }
  .vl-service-row { grid-template-columns: 54px 1fr 1fr 48px; gap: 24px; }
  .vl-project-overview aside,
  .vl-legal-page aside { position: static; }
  .vl-project-overview aside dl { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 30px; }
  .vl-footer__top { gap: 80px; }
  .vl-auth { grid-template-columns: 1fr; }
  .vl-auth__visual { min-height: 55svh; }
}

@media (max-width: 760px) {
  :root {
    --vl-container: calc(100% - 30px);
  }
  body.vl-site { font-size: 15px; }
  .vl-section { padding: 78px 0; }
  .vl-section-heading {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
    margin-bottom: 44px;
  }
  .vl-section-heading h2 { font-size: clamp(2.45rem, 12vw, 4.5rem); }
  .vl-hero__content { padding-bottom: 48px; }
  .vl-hero h1 { font-size: clamp(3.6rem, 17vw, 6.4rem); }
  .vl-hero__bottom { margin-top: 38px; }
  .vl-hero__bottom .vl-button-row { width: 100%; }
  .vl-hero__bottom .vl-button { flex: 1 1 100%; }
  .vl-hero__scroll { display: none; }
  .vl-spatial-canvas { opacity: .45; }
  .vl-project-mosaic,
  .vl-project-grid,
  .vl-project-strip__grid,
  .vl-service-cards,
  .vl-two-paths,
  .vl-paths__grid,
  .vl-process__grid,
  .vl-formats__grid,
  .vl-principles__grid {
    grid-template-columns: 1fr;
  }
  .vl-project-card--mosaic-1 { grid-column: auto; }
  .vl-project-card--mosaic-1 figure,
  .vl-project-card--mosaic-2 figure,
  .vl-project-card--mosaic-3 figure,
  .vl-project-card--mosaic-4 figure,
  .vl-project-card--grid figure,
  .vl-project-card--strip figure {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .vl-project-card__meta { grid-template-columns: 1fr; gap: 6px; }
  .vl-project-card__meta > span { text-align: left; }
  .vl-path-card { min-height: 500px; padding: 26px; }
  .vl-path-card__graphic { width: 68%; }
  .vl-case__visual { padding: 0 20px 24px 0; }
  .vl-process__grid article { min-height: 290px; }
  .vl-process__grid article > span { margin-bottom: 70px; }
  .vl-studio-teaser__label,
  .vl-studio-hero__image > span { right: 10px; }
  .vl-page-hero { min-height: 720px; }
  .vl-page-hero h1 { font-size: clamp(3.6rem, 16vw, 6.5rem); }
  .vl-page-hero__image { right: -25%; width: 90vw; }
  .vl-page-hero__wireframe { right: -22%; width: 80vw; }
  .vl-service-card { min-height: 390px; }
  .vl-local__map { min-height: 440px; }
  .vl-formats__grid article,
  .vl-principles__grid article { min-height: 410px; }
  .vl-plan-demo { min-height: 560px; }
  .vl-plan-demo__stage,
  .vl-plan-explorer__stage { width: 92%; margin-top: 72px; }
  .vl-plan-demo__legend { position: static; flex-direction: column; padding: 0 20px 20px; }
  .vl-service-row {
    grid-template-columns: 45px 1fr 44px;
    gap: 18px;
  }
  .vl-service-row > ul { grid-column: 2 / -1; }
  .vl-two-paths > div { min-height: 400px; padding: 28px; }
  .vl-two-paths h2 { margin-top: 80px; }
  .vl-project-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .vl-project-filters button { flex: 0 0 auto; }
  .vl-studio-hero h1,
  .vl-contact-page__intro h1,
  .vl-project-hero h1 { font-size: clamp(3.7rem, 17vw, 6.8rem); }
  .vl-studio-copy__body p { font-size: clamp(1.7rem, 8vw, 3rem); }
  .vl-form-grid-2 { grid-template-columns: 1fr; }
  .vl-contact-page__form { padding: 24px 20px; }
  .vl-project-cover { width: 100%; }
  .vl-project-cover > img { height: 64svh; }
  .vl-project-cover figcaption { padding-inline: 15px; }
  .vl-project-overview aside dl { grid-template-columns: 1fr; }
  .vl-story-block { grid-template-columns: 45px 1fr; gap: 8px 16px; }
  .vl-immersive-module__head { grid-template-columns: 45px 1fr; }
  .vl-model-viewer,
  .vl-panorama { min-height: 460px; height: 64svh; }
  .vl-plan-module .vl-plan-explorer { min-height: 560px; }
  .vl-before-after { aspect-ratio: 4 / 3; }
  .vl-project-gallery__grid { grid-template-columns: 1fr; grid-auto-rows: minmax(280px, 76vw); }
  .vl-project-gallery__grid figure.is-wide { grid-column: auto; }
  .vl-project-gallery__grid figure.is-tall { grid-row: auto; }
  .vl-footer__columns { grid-template-columns: 1fr; }
  .vl-footer__columns > div:last-child { grid-column: auto; }
  .vl-footer__bottom { align-items: flex-start; flex-direction: column; }
  .vl-lightbox { grid-template-columns: 44px 1fr 44px; padding: 14px; }
  .vl-lightbox > button { width: 40px; height: 40px; }
  .vl-auth__visual { min-height: 46svh; padding: 28px; }
  .vl-auth__form { padding: 45px 20px; }
  .vl-cursor { display: none; }
}

@media (max-width: 480px) {
  .vl-brand { font-size: 1.12rem; }
  .vl-hero { min-height: 780px; }
  .vl-hero h1 { font-size: clamp(3.4rem, 18vw, 5.3rem); }
  .vl-button-row { flex-direction: column; }
  .vl-button-row .vl-button { width: 100%; }
  .vl-section-heading h2,
  .vl-case__copy h2,
  .vl-intro-statement h2,
  .vl-local h2,
  .vl-contact-band h2,
  .vl-studio-teaser h2 { font-size: clamp(2.35rem, 13vw, 3.8rem); }
  .vl-project-card figure { min-height: 260px; }
  .vl-path-card { min-height: 460px; }
  .vl-path-card__graphic { width: 72%; }
  .vl-studio-teaser__image,
  .vl-studio-teaser__image img,
  .vl-studio-hero__image,
  .vl-studio-hero__image img { height: 55svh; }
  .vl-page-hero { min-height: 650px; }
  .vl-page-hero h1 { font-size: clamp(3.15rem, 17vw, 5rem); }
  .vl-local__map { min-height: 360px; }
  .vl-plan-demo { min-height: 500px; }
  .vl-plan-demo__stage,
  .vl-plan-explorer__stage { margin-top: 60px; }
  .vl-service-row { grid-template-columns: 35px 1fr 38px; }
  .vl-service-row__copy h2 { font-size: 2.25rem; }
  .vl-contact-page { padding-top: calc(var(--vl-header-height) + 55px); }
  .vl-studio-hero h1,
  .vl-contact-page__intro h1,
  .vl-project-hero h1 { font-size: clamp(3.15rem, 18vw, 5rem); }
  .vl-model-viewer,
  .vl-panorama { min-height: 390px; height: 56svh; }
  .vl-model-ar { right: 10px; bottom: 10px; }
  .vl-lightbox { grid-template-columns: 1fr; }
  .vl-lightbox > [data-lightbox-prev],
  .vl-lightbox > [data-lightbox-next] { position: absolute; bottom: 18px; }
  .vl-lightbox > [data-lightbox-prev] { left: 18px; }
  .vl-lightbox > [data-lightbox-next] { right: 18px; }
  .vl-lightbox figure { max-width: 94vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .vl-hero__image { transform: scale(1.04); }
  .vl-spatial-canvas,
  .vl-cursor { display: none; }
}

@media print {
  .vl-header,
  .vl-footer,
  .vl-whatsapp-float,
  .vl-scroll-progress,
  .vl-contact-band,
  .vl-lightbox,
  .vl-project-filters { display: none !important; }
  body.vl-site { background: #fff; color: #000; }
  .vl-main { padding-top: 0; }
  .vl-section { padding: 30px 0; break-inside: avoid; }
  .vl-project-cover > img { height: auto; }
}

/* --- Visual refinement update --- */
:root {
  --vl-accent: #667585;
  --vl-accent-deep: #4f6072;
  --vl-success: #527453;
}

html[data-vl-theme="dark"] {
  --vl-accent-deep: #aeb9c3;
}

body.vl-site ::selection {
  background: var(--vl-accent);
  color: #11120f;
}

.vl-spatial-canvas,
.vl-page-hero__wireframe,
.vl-path-card__graphic,
.vl-format-icon {
  display: none !important;
}

.vl-hero__grid,
.vl-page-hero__grid,
.vl-contact-band__grid {
  opacity: .12;
}

.vl-hero h1 {
  max-width: 980px;
  font-size: clamp(3.4rem, 7.6vw, 7.2rem);
  line-height: .9;
}

.vl-page-hero h1 {
  font-size: clamp(3rem, 6vw, 5.8rem);
  line-height: .92;
}

.vl-section-heading h2,
.vl-case__copy h2,
.vl-intro-statement__grid h2,
.vl-studio-hero h1,
.vl-contact-page__intro h1,
.vl-project-hero h1 {
  font-size: clamp(2.8rem, 5.4vw, 5.6rem);
  line-height: .95;
}

.vl-contact-band h2 {
  font-size: clamp(2.7rem, 5.2vw, 5rem);
  line-height: .95;
}

.vl-button {
  min-height: 54px;
  padding: 14px 24px;
  font-size: .8rem;
  letter-spacing: .08em;
}

.vl-button--dark {
  border-color: #171813;
  background: #171813;
  color: #f5f2e9;
}

.vl-button--dark:hover {
  color: #11120f;
  border-color: var(--vl-accent);
}

.vl-button--light {
  border-color: #f5f2e9;
  background: #f5f2e9;
  color: #171813;
}

.vl-button--ghost-light {
  border-color: rgba(245, 242, 233, .65);
  color: #f5f2e9;
}

.vl-header__cta {
  background: #171813;
  color: #f5f2e9;
}

.vl-project-mosaic {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(300px, 28vw));
}

.vl-project-card--mosaic-1 {
  grid-row: auto;
}

.vl-project-card--mosaic-1 figure,
.vl-project-card--mosaic-2 figure,
.vl-project-card--mosaic-3 figure,
.vl-project-card--mosaic-4 figure {
  height: calc(100% - 104px);
}

.vl-project-card--mosaic-1 .vl-project-card__meta h3 {
  font-size: clamp(1.7rem, 2.4vw, 2.6rem);
}

.vl-path-card {
  min-height: 540px;
  grid-template-rows: auto auto 1fr;
  gap: 22px;
}

.vl-path-card__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--vl-line);
  background: var(--vl-bg-soft);
}

.vl-path-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vl-path-card__body {
  display: grid;
  align-content: start;
  gap: 16px;
}

.vl-path-card__body h3 {
  margin: 0;
  font-family: var(--vl-font-display);
  font-size: clamp(2rem, 3vw, 3.25rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .96;
}

.vl-path-card__body p {
  margin: 0;
  color: var(--vl-text-soft);
}

.vl-formats__grid article {
  min-height: 320px;
  padding-top: 30px;
}

.vl-formats__grid article h3 {
  margin-top: 0;
  font-size: clamp(1.9rem, 2.4vw, 2.7rem);
}

.vl-page-hero {
  overflow: hidden;
}

.vl-page-hero__stack {
  position: absolute;
  right: clamp(28px, 5vw, 80px);
  bottom: 60px;
  z-index: 1;
  display: grid;
  gap: 16px;
  width: min(42vw, 620px);
  pointer-events: none;
}

.vl-page-hero__stack-item {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: var(--vl-shadow);
}

.vl-page-hero__stack-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vl-page-hero__stack-item--1 { width: 100%; aspect-ratio: 4 / 3; }
.vl-page-hero__stack-item--2 { width: 76%; margin-left: auto; aspect-ratio: 1 / 1; }
.vl-page-hero__stack-item--3 { width: 68%; aspect-ratio: 16 / 10; }

.vl-contact-page__direct {
  display: grid;
  gap: 10px;
}

.vl-contact-page__direct strong {
  font-size: 1rem;
  letter-spacing: .02em;
}

.vl-contact-page__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 22px;
}

.vl-contact-page__socials a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--vl-text-soft);
  font-size: .88rem;
}

.vl-contact-page__socials a:hover {
  color: var(--vl-text);
}

.vl-contact-form .vl-button {
  width: 100%;
  max-width: 340px;
}

.vl-contact-form button span {
  display: inline-block;
}

.vl-contact-band .vl-button-row {
  justify-content: center;
}

.vl-footer__columns > div:first-child,
.vl-footer__columns > div:nth-child(2),
.vl-footer__columns > div:nth-child(3) {
  min-width: 0;
}

@media (max-width: 1200px) {
  .vl-page-hero__stack { width: min(46vw, 520px); }
}

@media (max-width: 1024px) {
  .vl-project-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .vl-project-card--mosaic-1 figure,
  .vl-project-card--mosaic-2 figure,
  .vl-project-card--mosaic-3 figure,
  .vl-project-card--mosaic-4 figure {
    height: auto;
    min-height: 320px;
    aspect-ratio: 4 / 3;
  }

  .vl-paths__grid {
    grid-template-columns: 1fr;
  }

  .vl-path-card {
    min-height: auto;
  }

  .vl-page-hero__stack {
    position: static;
    width: 100%;
    max-width: none;
    margin: 24px auto 0;
    padding: 0 40px 40px;
  }
}

@media (max-width: 767px) {
  .vl-hero h1 {
    font-size: clamp(2.9rem, 15vw, 4.9rem);
  }

  .vl-page-hero h1,
  .vl-section-heading h2,
  .vl-case__copy h2,
  .vl-intro-statement__grid h2,
  .vl-studio-hero h1,
  .vl-contact-page__intro h1,
  .vl-project-hero h1,
  .vl-contact-band h2 {
    font-size: clamp(2.45rem, 13vw, 4.35rem);
  }

  .vl-path-card__body h3,
  .vl-formats__grid article h3 {
    font-size: clamp(1.65rem, 9vw, 2.25rem);
  }

  .vl-contact-form .vl-button {
    max-width: none;
  }

  .vl-page-hero__stack {
    padding: 0 24px 28px;
  }
}