@font-face {
  font-family: "DIN-black";
  src: url("/assets/fonts/DIN-Black.woff2") format("woff2"),
    url("/assets/fonts/DIN-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* 2026-07-29: clean image-only hero with editorial block below. */
.hero-section {
  background: #171717 !important;
  height: auto !important;
  min-height: calc(100svh + clamp(24rem, 38vw, 33rem)) !important;
  overflow: visible !important;
  position: relative !important;
}

@supports (height: 100dvh) {
  .hero-section {
    min-height: calc(100dvh + clamp(24rem, 38vw, 33rem)) !important;
  }
}

.hero-slide {
  height: 100svh !important;
  inset: 0 0 auto !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  position: absolute !important;
}

@supports (height: 100dvh) {
  .hero-slide {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}

.hero-image {
  transform: translate3d(0, var(--hero-parallax-y, 0px), 0) scale(var(--hero-parallax-scale, 1.018)) !important;
  transform-origin: center center !important;
  transition: transform 0.18s ease-out !important;
  will-change: transform !important;
}

.hero-shade {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.04) 42%, rgba(0, 0, 0, 0.14) 100%) !important;
  height: 100svh !important;
  inset: 0 0 auto !important;
  pointer-events: none !important;
}

@supports (height: 100dvh) {
  .hero-shade {
    height: 100dvh !important;
  }
}

.hero-slider-ui,
.hero-slider-actions,
.hero-slider-progress,
.scroll-mark {
  display: none !important;
  pointer-events: none !important;
}

.hero-content {
  align-items: center !important;
  background: #171717 !important;
  bottom: auto !important;
  color: #f6f6f3 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(1.35rem, 2.2vw, 2rem) !important;
  justify-content: center !important;
  left: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  min-height: clamp(24rem, 38vw, 33rem) !important;
  opacity: 1 !important;
  padding: clamp(4.5rem, 7vw, 7.5rem) clamp(1.35rem, 6vw, 5rem) clamp(4.75rem, 7vw, 7rem) !important;
  position: absolute !important;
  right: 0 !important;
  text-align: center !important;
  top: 100svh !important;
  transform: none !important;
  width: 100% !important;
  z-index: 4 !important;
}

@supports (height: 100dvh) {
  .hero-content {
    top: 100dvh !important;
  }
}

.hero-content::before {
  display: none !important;
}

.hero-content h1 {
  color: #f6f6f3 !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(3.4rem, 7.1vw, 8.15rem) !important;
  font-weight: 560 !important;
  letter-spacing: -0.085em !important;
  line-height: 0.78 !important;
  margin: 0 auto !important;
  max-width: min(980px, 92vw) !important;
  text-transform: uppercase !important;
}

.hero-title-line {
  display: block !important;
  white-space: nowrap !important;
}

.hero-content p {
  color: rgba(246, 246, 243, 0.82) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(1.02rem, 1.25vw, 1.42rem) !important;
  font-weight: 380 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.48 !important;
  margin: 0 auto !important;
  max-width: min(1040px, 82vw) !important;
  text-wrap: balance !important;
}

.hero-link {
  color: #f6f6f3 !important;
  font-size: clamp(0.82rem, 0.86vw, 0.95rem) !important;
  font-weight: 650 !important;
  letter-spacing: -0.015em !important;
  margin-top: clamp(0.75rem, 1.2vw, 1.1rem) !important;
  padding-bottom: 0.35rem !important;
}

.hero-link::after {
  background: rgba(246, 246, 243, 0.82) !important;
}

.hero-link:hover {
  color: #ffffff !important;
}

@media (max-width: 820px) {
  .hero-section {
    min-height: calc(100svh + 26rem) !important;
  }

  @supports (height: 100dvh) {
    .hero-section {
      min-height: calc(100dvh + 26rem) !important;
    }
  }

  .hero-content {
    min-height: 26rem !important;
    padding: 4.25rem 1.35rem 4.5rem !important;
  }

  .hero-content h1 {
    font-size: clamp(2.65rem, 12.2vw, 4.75rem) !important;
    letter-spacing: -0.09em !important;
    max-width: 94vw !important;
  }

  .hero-content p {
    font-size: clamp(0.98rem, 4vw, 1.18rem) !important;
    line-height: 1.5 !important;
    max-width: min(32rem, 88vw) !important;
  }
}





/* 2026-07-29: stable final hero reveal. Prevent slider updates from disturbing the editorial block. */
.hero-section {
  background: #171717 !important;
  contain: layout paint !important;
}

.hero-slide {
  contain: layout paint !important;
  height: 100svh !important;
  min-height: 100svh !important;
}

@supports (height: 100dvh) {
  .hero-slide {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}

.hero-image {
  height: 100% !important;
  object-fit: cover !important;
  width: 100% !important;
}

.hero-content {
  background: #171717 !important;
  flex: 0 0 clamp(35rem, 49vw, 44rem) !important;
  isolation: isolate !important;
  min-height: clamp(35rem, 49vw, 44rem) !important;
  overflow: clip !important;
  position: relative !important;
  transform: none !important;
}

.hero-content h1 {
  line-height: 0.9 !important;
}

.hero-title-line {
  display: block !important;
  white-space: nowrap !important;
}

.hero-title-line + .hero-title-line {
  margin-top: clamp(0.5rem, 1.05vw, 1.08rem) !important;
}

.hero-letter {
  animation: none !important;
  display: inline-block !important;
  filter: none !important;
  opacity: 0 !important;
  transform: translate3d(0, 0.58em, 0) rotateX(16deg) !important;
  transform-origin: center bottom !important;
  transition:
    opacity 0.74s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition-delay: var(--letter-delay, 0s) !important;
  will-change: opacity, transform !important;
}

.hero-content.is-title-visible .hero-letter {
  animation: none !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) rotateX(0deg) !important;
}

.hero-content p,
.hero-content .hero-link {
  animation: none !important;
  opacity: 0 !important;
  transform: translate3d(0, 1.1rem, 0) !important;
  transition:
    opacity 0.86s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.96s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform !important;
}

.hero-content.is-title-visible p,
.hero-content.is-title-visible .hero-link {
  animation: none !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

.hero-content.is-title-visible p {
  transition-delay: 0.48s !important;
}

.hero-content.is-title-visible .hero-link {
  transition-delay: 0.68s !important;
}

@media (max-width: 820px) {
  .hero-content {
    flex-basis: 32rem !important;
    min-height: 32rem !important;
  }

  .hero-title-line + .hero-title-line {
    margin-top: 0.44rem !important;
  }
}

/* 2026-07-29: keep the editorial hero block fixed while the slider crossfades. */
.hero-section {
  padding-top: 100svh !important;
  position: relative !important;
}

@supports (height: 100dvh) {
  .hero-section {
    padding-top: 100dvh !important;
  }
}

.hero-section > .hero-slide {
  inset: 0 0 auto 0 !important;
  position: absolute !important;
}

.hero-section > .hero-shade {
  height: 100svh !important;
  inset: 0 0 auto 0 !important;
  position: absolute !important;
}

@supports (height: 100dvh) {
  .hero-section > .hero-shade {
    height: 100dvh !important;
  }
}

/* 2026-07-29: definitive hero reveal layer; must remain at EOF. */
.hero-section {
  contain: layout paint !important;
}

.hero-slide {
  flex: 0 0 100svh !important;
}

@supports (height: 100dvh) {
  .hero-slide {
    flex-basis: 100dvh !important;
  }
}

.hero-content {
  flex: 0 0 clamp(31rem, 45vw, 40rem) !important;
  min-height: clamp(31rem, 45vw, 40rem) !important;
  overflow: hidden !important;
}

.hero-content h1 {
  line-height: 0.86 !important;
}

.hero-title-line {
  display: block !important;
  white-space: nowrap !important;
}

.hero-title-line + .hero-title-line {
  margin-top: clamp(0.34rem, 0.9vw, 0.92rem) !important;
}

.hero-letter {
  animation: none !important;
  display: inline-block !important;
  filter: blur(7px) !important;
  opacity: 0 !important;
  transform: translate3d(0, 0.34em, 0) !important;
  will-change: opacity, transform, filter !important;
}

.hero-content.is-title-visible .hero-letter {
  animation: heroLetterRevealPremium 0.98s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  animation-delay: var(--letter-delay, 0s) !important;
}

.hero-content.is-title-visible p,
.hero-content.is-title-visible .hero-link {
  animation: heroCopyRevealPremium 0.95s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.hero-content.is-title-visible p {
  animation-delay: 0.34s !important;
}

.hero-content.is-title-visible .hero-link {
  animation-delay: 0.52s !important;
}

@keyframes heroLetterRevealPremium {
  0% {
    filter: blur(7px);
    opacity: 0;
    transform: translate3d(0, 0.34em, 0);
  }

  100% {
    filter: blur(0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes heroCopyRevealPremium {
  0% {
    filter: blur(5px);
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
  }

  100% {
    filter: blur(0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-letter,
  .hero-content p,
  .hero-link {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 820px) {
  .hero-content {
    flex-basis: 30rem !important;
    min-height: 30rem !important;
  }

  .hero-title-line + .hero-title-line {
    margin-top: 0.28rem !important;
  }
}

/* 2026-07-29: final viewport-triggered hero title reveal. */
.hero-section {
  contain: layout paint !important;
}

.hero-slide {
  flex: 0 0 100svh !important;
}

@supports (height: 100dvh) {
  .hero-slide {
    flex-basis: 100dvh !important;
  }
}

.hero-content {
  flex: 0 0 clamp(31rem, 45vw, 40rem) !important;
  min-height: clamp(31rem, 45vw, 40rem) !important;
  overflow: hidden !important;
}

.hero-content h1 {
  line-height: 0.86 !important;
}

.hero-title-line {
  display: block !important;
}

.hero-title-line + .hero-title-line {
  margin-top: clamp(0.34rem, 0.9vw, 0.92rem) !important;
}

.hero-letter {
  animation: none !important;
  display: inline-block !important;
  opacity: 0 !important;
  transform: translate3d(0, 0.34em, 0) !important;
  filter: blur(7px) !important;
  will-change: opacity, transform, filter !important;
}

.hero-content.is-title-visible .hero-letter {
  animation: heroLetterRevealPremium 0.98s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  animation-delay: var(--letter-delay, 0s) !important;
}

.hero-content.is-title-visible p,
.hero-content.is-title-visible .hero-link {
  animation: heroCopyRevealPremium 0.95s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.hero-content.is-title-visible p {
  animation-delay: 0.34s !important;
}

.hero-content.is-title-visible .hero-link {
  animation-delay: 0.52s !important;
}

@keyframes heroLetterRevealPremium {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.34em, 0);
    filter: blur(7px);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes heroCopyRevealPremium {
  0% {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-letter,
  .hero-content p,
  .hero-link {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

@media (max-width: 820px) {
  .hero-content {
    flex-basis: 30rem !important;
    min-height: 30rem !important;
  }

  .hero-title-line + .hero-title-line {
    margin-top: 0.28rem !important;
  }
}

/* 2026-07-29: stable hero block and viewport-triggered title reveal. */
.hero-section {
  contain: layout paint !important;
}

.hero-slide {
  flex: 0 0 100svh !important;
}

@supports (height: 100dvh) {
  .hero-slide {
    flex-basis: 100dvh !important;
  }
}

.hero-content {
  flex: 0 0 clamp(31rem, 45vw, 40rem) !important;
  min-height: clamp(31rem, 45vw, 40rem) !important;
  overflow: hidden !important;
}

.hero-content h1 {
  line-height: 0.86 !important;
}

.hero-title-line {
  display: block !important;
}

.hero-title-line + .hero-title-line {
  margin-top: clamp(0.34rem, 0.9vw, 0.92rem) !important;
}

.hero-letter {
  display: inline-block !important;
  opacity: 0;
  transform: translate3d(0, 0.34em, 0);
  filter: blur(7px);
  will-change: opacity, transform, filter;
}

.hero-content.is-title-visible .hero-letter {
  animation: heroLetterRevealPremium 0.98s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--letter-delay, 0s);
}

.hero-content.is-title-visible p,
.hero-content.is-title-visible .hero-link {
  animation: heroCopyRevealPremium 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-content.is-title-visible p {
  animation-delay: 0.34s;
}

.hero-content.is-title-visible .hero-link {
  animation-delay: 0.52s;
}

@keyframes heroLetterRevealPremium {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.34em, 0);
    filter: blur(7px);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes heroCopyRevealPremium {
  0% {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-letter,
  .hero-content p,
  .hero-link {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

@media (max-width: 820px) {
  .hero-content {
    flex-basis: 30rem !important;
    min-height: 30rem !important;
  }

  .hero-title-line + .hero-title-line {
    margin-top: 0.28rem !important;
  }
}

/* 2026-07-29: refined hero title spacing and letter-by-letter reveal. */
.hero-content h1 {
  line-height: 0.82 !important;
}

.hero-title-line {
  display: block !important;
}

.hero-title-line + .hero-title-line {
  margin-top: clamp(0.24rem, 0.72vw, 0.72rem) !important;
}

.hero-letter {
  animation: heroLetterReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--letter-delay, 0s);
  display: inline-block !important;
  opacity: 0;
  transform: translate3d(0, 0.42em, 0);
  will-change: opacity, transform;
}

@keyframes heroLetterReveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.42em, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-letter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 2026-07-29: final winning layer for the clean hero parallax. */
.hero-section {
  min-height: auto !important;
}

.hero-slide {
  inset: auto !important;
  left: 0 !important;
  position: sticky !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  z-index: 1 !important;
}

.hero-slide::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.06) 46%, rgba(0, 0, 0, 0.2) 100%) !important;
  content: "" !important;
  inset: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 2 !important;
}

.hero-shade {
  display: none !important;
}

.hero-content {
  margin-top: 0 !important;
  min-height: clamp(30rem, 45vw, 40rem) !important;
  padding-bottom: clamp(6rem, 9vw, 9rem) !important;
  padding-top: clamp(6rem, 9vw, 9rem) !important;
  position: relative !important;
  top: auto !important;
  z-index: 3 !important;
}

.hero-content h1 {
  font-size: clamp(3.85rem, 7.55vw, 8.7rem) !important;
}

.hero-content p {
  font-size: clamp(1.08rem, 1.36vw, 1.52rem) !important;
  max-width: min(1120px, 84vw) !important;
}

@media (max-width: 820px) {
  .hero-content {
    min-height: 30rem !important;
    padding-bottom: 5.5rem !important;
    padding-top: 5.35rem !important;
  }

  .hero-content h1 {
    font-size: clamp(2.9rem, 12.8vw, 5rem) !important;
  }
}

/* 2026-07-29: stronger clean-hero treatment. Image stays fixed while the editorial block rises below it. */
.hero-section {
  min-height: auto !important;
}

.hero-slide {
  inset: auto !important;
  left: 0 !important;
  position: sticky !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  z-index: 1 !important;
}

.hero-slide::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.06) 46%, rgba(0, 0, 0, 0.2) 100%) !important;
  content: "" !important;
  inset: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 2 !important;
}

.hero-shade {
  display: none !important;
}

.hero-content {
  margin-top: 0 !important;
  min-height: clamp(30rem, 45vw, 40rem) !important;
  padding-bottom: clamp(6rem, 9vw, 9rem) !important;
  padding-top: clamp(6rem, 9vw, 9rem) !important;
  position: relative !important;
  top: auto !important;
  z-index: 3 !important;
}

.hero-content h1 {
  font-size: clamp(3.85rem, 7.55vw, 8.7rem) !important;
}

.hero-content p {
  font-size: clamp(1.08rem, 1.36vw, 1.52rem) !important;
  max-width: min(1120px, 84vw) !important;
}

@media (max-width: 820px) {
  .hero-content {
    min-height: 30rem !important;
    padding-bottom: 5.5rem !important;
    padding-top: 5.35rem !important;
  }

  .hero-content h1 {
    font-size: clamp(2.9rem, 12.8vw, 5rem) !important;
  }
}

/* 2026-07-29: make the clean hero feel intentional with a sticky parallax image and a larger editorial block. */
.hero-section {
  min-height: auto !important;
}

.hero-slide {
  inset: auto !important;
  left: 0 !important;
  position: sticky !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  z-index: 1 !important;
}

.hero-slide::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.06) 46%, rgba(0, 0, 0, 0.2) 100%) !important;
  content: "" !important;
  inset: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 2 !important;
}

.hero-shade {
  display: none !important;
}

.hero-content {
  margin-top: 0 !important;
  min-height: clamp(30rem, 45vw, 40rem) !important;
  padding-bottom: clamp(6rem, 9vw, 9rem) !important;
  padding-top: clamp(6rem, 9vw, 9rem) !important;
  position: relative !important;
  top: auto !important;
  z-index: 3 !important;
}

.hero-content h1 {
  font-size: clamp(3.85rem, 7.55vw, 8.7rem) !important;
}

.hero-content p {
  font-size: clamp(1.08rem, 1.36vw, 1.52rem) !important;
  max-width: min(1120px, 84vw) !important;
}

@media (max-width: 820px) {
  .hero-content {
    min-height: 30rem !important;
    padding-bottom: 5.5rem !important;
    padding-top: 5.35rem !important;
  }

  .hero-content h1 {
    font-size: clamp(2.9rem, 12.8vw, 5rem) !important;
  }
}

/* Contact direct layout restore - approved pre-crash version */
.contact-section[data-contact-layout="direct"] {
  --contact-direct-line: rgba(23, 23, 23, 0.12);
  --contact-direct-muted: rgba(23, 23, 23, 0.58);
  --contact-direct-card: rgba(255, 255, 255, 0.82);
  background: #fff !important;
  color: #171717 !important;
  padding: clamp(4.6rem, 7vw, 7.4rem) 0 clamp(4.3rem, 6vw, 6.4rem) !important;
  overflow: hidden !important;
}

.contact-section[data-contact-layout="direct"]::before,
.contact-section[data-contact-layout="direct"]::after {
  display: none !important;
}

.contact-section[data-contact-layout="direct"] .contact-grid {
  width: min(100% - 54px, 1240px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.22fr) minmax(360px, 0.88fr) !important;
  grid-template-areas:
    "hero hero"
    "left cta" !important;
  gap: clamp(2.4rem, 5.8vw, 7.2rem) clamp(1.8rem, 3vw, 2.25rem) !important;
  padding: 0 !important;
}

.contact-section[data-contact-layout="direct"] .contact-grid::before,
.contact-section[data-contact-layout="direct"] .contact-grid::after {
  display: none !important;
}

.contact-direct-hero {
  grid-area: hero;
  min-height: clamp(250px, 22vw, 340px);
  position: relative;
  display: grid;
  align-items: start;
}

.contact-direct-title {
  max-width: min(700px, 58vw);
  position: relative;
  z-index: 2;
}

.contact-direct-title .contact-redesign-eyebrow {
  margin: 0 0 1.35rem;
  color: #8c8f91;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: clamp(0.72rem, 0.8vw, 0.84rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contact-direct-title .contact-redesign-eyebrow::before,
.contact-direct-title .contact-redesign-eyebrow::after {
  display: none !important;
}

.contact-direct-title h2 {
  margin: 0 0 clamp(1.15rem, 2vw, 1.7rem);
  color: #171717;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: clamp(4.1rem, 7.2vw, 6.7rem);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.82;
  text-transform: none !important;
}

.contact-direct-title .contact-redesign-copy {
  max-width: 640px;
  margin: 0;
  color: rgba(23, 23, 23, 0.68);
  font-size: clamp(1.02rem, 1.2vw, 1.2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.5;
}

.contact-direct-number {
  position: absolute;
  top: clamp(-1.6rem, -1vw, -0.75rem);
  right: 0;
  color: rgba(23, 23, 23, 0.055);
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: clamp(7.5rem, 12vw, 11.2rem);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 0.75;
  pointer-events: none;
}

.contact-direct-body {
  display: contents;
}

.contact-direct-stack {
  grid-area: left;
  display: grid;
  gap: 1.05rem;
}

.contact-direct-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--contact-direct-line);
  border-radius: 10px;
  overflow: hidden;
}

.contact-direct-card {
  min-height: 166px;
  background: var(--contact-direct-card);
  border: 0;
  border-right: 1px solid var(--contact-direct-line);
  border-bottom: 1px solid var(--contact-direct-line);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 1rem;
  align-content: start;
  padding: clamp(1.4rem, 2vw, 1.75rem);
}

.contact-direct-card:nth-child(2n) {
  border-right: 0;
}

.contact-direct-card:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.contact-direct-icon {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(23, 23, 23, 0.08);
  border-radius: 50%;
  background: rgba(23, 23, 23, 0.035);
  color: rgba(23, 23, 23, 0.54);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-direct-text {
  min-width: 0;
  display: grid;
  gap: 0.28rem;
}

.contact-direct-text small {
  color: #929292;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-direct-text strong {
  color: #171717;
  font-size: 0.86rem;
  font-weight: 650;
}

.contact-direct-text a,
.contact-direct-text span {
  color: #171717;
  font-size: clamp(0.95rem, 1vw, 1.04rem);
  font-weight: 520;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.contact-direct-social {
  min-height: 94px;
  border: 1px solid var(--contact-direct-line);
  border-radius: 10px;
  background: var(--contact-direct-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 1.25rem clamp(1.35rem, 2vw, 1.65rem);
}

.contact-direct-social > span {
  color: #929292;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-section[data-contact-layout="direct"] .social-links {
  display: flex !important;
  align-items: center;
  gap: 0.7rem;
  margin: 0 !important;
}

.contact-section[data-contact-layout="direct"] .social-links a {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(23, 23, 23, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(23, 23, 23, 0.035) !important;
  color: #171717 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.contact-section[data-contact-layout="direct"] .social-links a:hover,
.contact-section[data-contact-layout="direct"] .social-links a:focus-visible {
  background: #171717 !important;
  color: #fff !important;
  border-color: #171717 !important;
  transform: translateY(-2px);
}

.contact-section[data-contact-layout="direct"] .contact-editorial-cta {
  grid-area: cta;
  min-height: 464px;
  border: 1px solid var(--contact-direct-line);
  border-radius: 10px;
  background: rgba(23, 23, 23, 0.025);
  display: grid;
  align-content: center;
  gap: clamp(1.25rem, 2vw, 1.7rem);
  padding: clamp(2.5rem, 4vw, 3.15rem);
}

.contact-editorial-line {
  width: 68px;
  height: 1px;
  background: rgba(23, 23, 23, 0.26);
  display: block;
  margin-bottom: 0.7rem;
}

.contact-section[data-contact-layout="direct"] .contact-editorial-cta h3 {
  max-width: 420px;
  margin: 0;
  color: #171717;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: clamp(2.25rem, 3.5vw, 3.65rem);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.92;
}

.contact-section[data-contact-layout="direct"] .contact-editorial-cta p {
  max-width: 460px;
  margin: 0;
  color: rgba(23, 23, 23, 0.68);
  font-size: clamp(0.98rem, 1.06vw, 1.12rem);
  line-height: 1.5;
}

.contact-section[data-contact-layout="direct"] .contact-editorial-button {
  width: 100%;
  max-width: 398px;
  min-height: 58px;
  margin-top: 0.25rem;
  border-radius: 7px;
  background: #171717;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  transition: transform 0.22s ease, background 0.22s ease;
}

.contact-section[data-contact-layout="direct"] .contact-editorial-button:hover,
.contact-section[data-contact-layout="direct"] .contact-editorial-button:focus-visible {
  background: #000;
  transform: translateY(-2px);
}

.contact-section[data-contact-layout="direct"] .contact-form,
.contact-section[data-contact-layout="direct"] .contact-visual,
.contact-section[data-contact-layout="direct"] .contact-map {
  display: none !important;
}

@media (max-width: 820px) {
  .contact-section[data-contact-layout="direct"] {
    padding: clamp(3.4rem, 11vw, 4.8rem) 0 clamp(3.6rem, 12vw, 5.2rem) !important;
  }

  .contact-section[data-contact-layout="direct"] .contact-grid {
    width: min(100% - 32px, 680px) !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "hero"
      "left"
      "cta" !important;
    gap: 1.35rem !important;
  }

  .contact-direct-hero {
    min-height: auto;
    padding-bottom: 1.6rem;
  }

  .contact-direct-title {
    max-width: 100%;
  }

  .contact-direct-title h2 {
    font-size: clamp(3.25rem, 17vw, 5rem);
  }

  .contact-direct-title .contact-redesign-copy {
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.56;
  }

  .contact-direct-number {
    top: -1.25rem;
    right: -0.2rem;
    font-size: clamp(6rem, 24vw, 8.5rem);
  }

  .contact-direct-cards {
    grid-template-columns: 1fr;
  }

  .contact-direct-card {
    min-height: 128px;
    border-right: 0;
    border-bottom: 1px solid var(--contact-direct-line) !important;
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 1.25rem;
  }

  .contact-direct-card:last-child {
    border-bottom: 0 !important;
  }

  .contact-direct-social {
    min-height: 82px;
    padding: 1rem 1.15rem;
  }

  .contact-section[data-contact-layout="direct"] .contact-editorial-cta {
    min-height: auto;
    padding: 1.65rem;
  }

  .contact-section[data-contact-layout="direct"] .contact-editorial-cta h3 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .contact-section[data-contact-layout="direct"] .contact-editorial-button {
    max-width: 100%;
  }
}

.contact-visual,
.contact-intro-copy {
  display: none;
}

@media (min-width: 821px) {
  .contact-section {
    background:
      linear-gradient(90deg, #17171709 0 1px, transparent 1px 100%) 6.2vw 0 / 1px 100% no-repeat,
      var(--portfolio-bg) !important;
  }

  .contact-section::after {
    display: none !important;
  }

  .contact-grid {
    --contact-header-height: clamp(430px, 27vw, 515px);
    grid-template-rows: var(--contact-header-height) minmax(500px, auto) !important;
    min-height: calc(var(--contact-header-height) + 500px) !important;
  }

  .contact-visual {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 100% !important;
    min-height: var(--contact-header-height) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .contact-visual::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(23, 23, 23, 0.12), rgba(23, 23, 23, 0.02) 62%, rgba(246, 243, 237, 0.08)) !important;
    pointer-events: none !important;
  }

  .contact-visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 48% !important;
    filter: saturate(0.78) contrast(0.97) !important;
  }

  .contact-grid::before {
    color: rgba(246, 243, 237, 0.82) !important;
    font-family: "DIN-black", var(--font-sans), Arial, sans-serif !important;
    font-size: 100px !important;
    font-weight: 900 !important;
    letter-spacing: -5px !important;
    line-height: 74px !important;
    right: calc(50% - 11px) !important;
    top: clamp(4.25rem, 4.7vw, 5.7rem) !important;
    z-index: 4 !important;
  }

  .contact-info {
    background: var(--portfolio-bg) !important;
    grid-template-rows: var(--contact-header-height) minmax(0, 1fr) !important;
    isolation: isolate;
  }

  .contact-info > .section-kicker {
    align-self: start !important;
    color: #7f7f7f !important;
    font-family: var(--font-serif), Georgia, serif !important;
    font-size: clamp(2.85rem, 3.25vw, 4.35rem) !important;
    font-weight: 500 !important;
    height: auto !important;
    min-height: 0 !important;
    letter-spacing: 0 !important;
    line-height: 0.98 !important;
    margin: 0 !important;
    max-width: clamp(30rem, 37vw, 45rem) !important;
    padding: clamp(5.2rem, 6.4vw, 7rem) clamp(4.4rem, 8vw, 8.9rem) 0 clamp(5.95rem, 9.4vw, 10.6rem) !important;
    position: relative !important;
    text-transform: none !important;
  }

  .contact-info > .section-kicker::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: clamp(4.4rem, 8vw, 8.9rem) !important;
    top: clamp(5.25rem, 6.45vw, 7.05rem) !important;
    width: 1px !important;
    height: 96px !important;
    background: rgba(28, 27, 25, 0.14) !important;
  }

  .contact-info > .section-kicker::after {
    content: none !important;
    display: none !important;
  }

  .contact-intro-copy {
    color: #9b9b9b !important;
    display: block !important;
    font-family: var(--font-sans), Arial, sans-serif !important;
    font-size: clamp(0.9rem, 0.92vw, 1.02rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.62 !important;
    margin: clamp(1.25rem, 1.45vw, 1.65rem) 0 0 !important;
    max-width: clamp(25rem, 33vw, 39rem) !important;
    padding-left: 1.65rem !important;
    text-transform: none !important;
  }

  .contact-intro-copy span {
    display: block !important;
  }

  .contact-intro-copy span + span {
    margin-top: 0.85rem !important;
  }

  .contact-info::before {
    content: none !important;
    display: none !important;
  }

  .contact-info::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: clamp(4.4rem, 8vw, 8.9rem) !important;
    right: clamp(4.4rem, 7vw, 8rem) !important;
    top: calc(var(--contact-header-height) - clamp(4.2rem, 4.8vw, 5.6rem)) !important;
    height: 1px !important;
    background: rgba(28, 27, 25, 0.12) !important;
    z-index: 2 !important;
  }

  .contact-info address {
    background: var(--portfolio-bg) !important;
    border-top: 1px solid rgba(28, 27, 25, 0.12) !important;
    padding-top: clamp(4.6rem, 5.7vw, 6rem) !important;
  }

  .contact-form {
    background: var(--ivory) !important;
  }
}

/* Final desktop contact override: must stay at EOF. */
@media (min-width: 821px) {
  .contact-section {
    background:
      linear-gradient(90deg, #17171709 0 1px, transparent 1px 100%) 6.2vw 0 / 1px 100% no-repeat,
      var(--portfolio-bg) !important;
  }

  .contact-section::after {
    display: none !important;
  }

  .contact-grid {
    --contact-header-height: clamp(430px, 27vw, 515px);
    grid-template-rows: var(--contact-header-height) minmax(500px, auto) !important;
    min-height: calc(var(--contact-header-height) + 500px) !important;
  }

  .contact-visual {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 100% !important;
    min-height: var(--contact-header-height) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .contact-visual::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(23, 23, 23, 0.12), rgba(23, 23, 23, 0.02) 62%, rgba(246, 243, 237, 0.08)) !important;
    pointer-events: none !important;
  }

  .contact-visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 48% !important;
    filter: saturate(0.78) contrast(0.97) !important;
  }

  .contact-grid::before {
    color: rgba(246, 243, 237, 0.82) !important;
    font-family: "DIN-black", var(--font-sans), Arial, sans-serif !important;
    font-size: 100px !important;
    font-weight: 900 !important;
    letter-spacing: -5px !important;
    line-height: 74px !important;
    right: calc(50% - 11px) !important;
    top: clamp(4.25rem, 4.7vw, 5.7rem) !important;
    z-index: 4 !important;
  }

  .contact-info {
    background: var(--portfolio-bg) !important;
    grid-template-rows: var(--contact-header-height) minmax(0, 1fr) !important;
    isolation: isolate;
  }

  .contact-info > .section-kicker {
    align-self: start !important;
    color: #7f7f7f !important;
    font-family: var(--font-serif), Georgia, serif !important;
    font-size: clamp(2.85rem, 3.25vw, 4.35rem) !important;
    font-weight: 500 !important;
    height: auto !important;
    min-height: 0 !important;
    letter-spacing: 0 !important;
    line-height: 0.98 !important;
    margin: 0 !important;
    max-width: clamp(30rem, 37vw, 45rem) !important;
    padding: clamp(5.2rem, 6.4vw, 7rem) clamp(4.4rem, 8vw, 8.9rem) 0 clamp(5.95rem, 9.4vw, 10.6rem) !important;
    position: relative !important;
    text-transform: none !important;
  }

  .contact-info > .section-kicker::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: clamp(4.4rem, 8vw, 8.9rem) !important;
    top: clamp(5.25rem, 6.45vw, 7.05rem) !important;
    width: 1px !important;
    height: 96px !important;
    background: rgba(28, 27, 25, 0.14) !important;
  }

  .contact-info > .section-kicker::after {
    content: none !important;
    display: none !important;
  }

  .contact-intro-copy {
    color: #9b9b9b !important;
    display: block !important;
    font-family: var(--font-sans), Arial, sans-serif !important;
    font-size: clamp(0.9rem, 0.92vw, 1.02rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.62 !important;
    margin: clamp(1.25rem, 1.45vw, 1.65rem) 0 0 !important;
    max-width: clamp(25rem, 33vw, 39rem) !important;
    padding-left: 1.65rem !important;
    text-transform: none !important;
  }

  .contact-intro-copy span {
    display: block !important;
  }

  .contact-intro-copy span + span {
    margin-top: 0.85rem !important;
  }

  .contact-info::before {
    content: none !important;
    display: none !important;
  }

  .contact-info::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: clamp(4.4rem, 8vw, 8.9rem) !important;
    right: clamp(4.4rem, 7vw, 8rem) !important;
    top: calc(var(--contact-header-height) - clamp(4.2rem, 4.8vw, 5.6rem)) !important;
    height: 1px !important;
    background: rgba(28, 27, 25, 0.12) !important;
    z-index: 2 !important;
  }

  .contact-info address {
    background: var(--portfolio-bg) !important;
    border-top: 1px solid rgba(28, 27, 25, 0.12) !important;
    padding-top: clamp(4.6rem, 5.7vw, 6rem) !important;
  }

  .contact-form {
    background: var(--ivory) !important;
  }
}

/* Desktop contact rebuild: real image + selectable intro copy. */
.contact-visual,
.contact-intro-copy {
  display: none;
}

@media (min-width: 821px) {
  .contact-section {
    background:
      linear-gradient(90deg, #17171709 0 1px, transparent 1px 100%) 6.2vw 0 / 1px 100% no-repeat,
      var(--portfolio-bg) !important;
  }

  .contact-section::after {
    display: none !important;
  }

  .contact-grid {
    --contact-header-height: clamp(430px, 27vw, 515px);
    grid-template-rows: var(--contact-header-height) minmax(500px, auto) !important;
    min-height: calc(var(--contact-header-height) + 500px) !important;
  }

  .contact-visual {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 100% !important;
    min-height: var(--contact-header-height) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .contact-visual::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(23, 23, 23, 0.12), rgba(23, 23, 23, 0.02) 62%, rgba(246, 243, 237, 0.08)) !important;
    pointer-events: none !important;
  }

  .contact-visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 48% !important;
    filter: saturate(0.78) contrast(0.97) !important;
  }

  .contact-grid::before {
    color: rgba(246, 243, 237, 0.82) !important;
    font-family: "DIN-black", var(--font-sans), Arial, sans-serif !important;
    font-size: 100px !important;
    font-weight: 900 !important;
    letter-spacing: -5px !important;
    line-height: 74px !important;
    right: calc(50% - 11px) !important;
    top: clamp(4.25rem, 4.7vw, 5.7rem) !important;
    z-index: 4 !important;
  }

  .contact-info {
    background: var(--portfolio-bg) !important;
    grid-template-rows: var(--contact-header-height) minmax(0, 1fr) !important;
    isolation: isolate;
  }

  .contact-info > .section-kicker {
    align-self: start !important;
    color: #7f7f7f !important;
    font-family: var(--font-serif), Georgia, serif !important;
    font-size: clamp(2.85rem, 3.25vw, 4.35rem) !important;
    font-weight: 500 !important;
    height: auto !important;
    min-height: 0 !important;
    letter-spacing: 0 !important;
    line-height: 0.98 !important;
    margin: 0 !important;
    max-width: clamp(30rem, 37vw, 45rem) !important;
    padding: clamp(5.2rem, 6.4vw, 7rem) clamp(4.4rem, 8vw, 8.9rem) 0 clamp(5.95rem, 9.4vw, 10.6rem) !important;
    position: relative !important;
    text-transform: none !important;
  }

  .contact-info > .section-kicker::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: clamp(4.4rem, 8vw, 8.9rem) !important;
    top: clamp(5.25rem, 6.45vw, 7.05rem) !important;
    width: 1px !important;
    height: 96px !important;
    background: rgba(28, 27, 25, 0.14) !important;
  }

  .contact-info > .section-kicker::after {
    content: none !important;
    display: none !important;
  }

  .contact-intro-copy {
    color: #9b9b9b !important;
    display: block !important;
    font-family: var(--font-sans), Arial, sans-serif !important;
    font-size: clamp(0.9rem, 0.92vw, 1.02rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.62 !important;
    margin: clamp(1.25rem, 1.45vw, 1.65rem) 0 0 !important;
    max-width: clamp(25rem, 33vw, 39rem) !important;
    padding-left: 1.65rem !important;
    text-transform: none !important;
  }

  .contact-intro-copy span {
    display: block !important;
  }

  .contact-intro-copy span + span {
    margin-top: 0.85rem !important;
  }

  .contact-info::before {
    content: none !important;
    display: none !important;
  }

  .contact-info::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: clamp(4.4rem, 8vw, 8.9rem) !important;
    right: clamp(4.4rem, 7vw, 8rem) !important;
    top: calc(var(--contact-header-height) - clamp(4.2rem, 4.8vw, 5.6rem)) !important;
    height: 1px !important;
    background: rgba(28, 27, 25, 0.12) !important;
    z-index: 2 !important;
  }

  .contact-info address {
    background: var(--portfolio-bg) !important;
    border-top: 1px solid rgba(28, 27, 25, 0.12) !important;
    padding-top: clamp(4.6rem, 5.7vw, 6rem) !important;
  }

  .contact-form {
    background: var(--ivory) !important;
  }
}

@font-face {
  font-family: "DIN";
  src: url("/assets/fonts/DIN-Regular.woff2") format("woff2"),
    url("/assets/fonts/DIN-Regular.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

.projects-section {
  background: linear-gradient(90deg, #17171709 0 1px, transparent 1px 100%) 6.2vw 0 / 1px 100% no-repeat, var(--ivory);
  padding: 0 !important;
}

.projects-section .section-inner {
  width: 100%;
}

.projects-heading {
  --portfolio-header-height: clamp(430px, 27vw, 515px);
  border: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 !important;
  width: 100vw;
  min-height: var(--portfolio-header-height);
  margin: 0 calc(50% - 50vw) 0 !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #969696 0 calc(50% - 4px), var(--ivory) calc(50% - 4px) 100%);
  border-bottom: 0 !important;
}

.project-grid,
.project-list {
  width: 100%;
}

.project-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 0 !important;
}

.project-card {
  background: var(--ivory) !important;
  border-radius: 0 !important;
  border: 0 !important;
}

.project-card button {
  inset: 0 !important;
  border-radius: 0 !important;
}

.project-card button::after {
  inset: 14px !important;
}

.project-list {
  gap: 0 !important;
}

.project-list-item {
  background: var(--ivory) !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

.modal-layer {
  --modal-bg: var(--ivory);
}

.project-modal,
.modal-content,
.modal-body {
  background: var(--ivory) !important;
}

.studio-section {
  background: var(--ivory) !important;
  border: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.studio-grid {
  width: 100% !important;
  max-width: none !important;
  min-height: clamp(500px, 28.25vw, 620px);
  margin: 0 !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr auto;
  gap: 0 !important;
  align-items: stretch !important;
  background: linear-gradient(90deg, #969696 0 50%, transparent 50% 100%);
  position: relative;
  overflow: hidden;
}

.studio-grid::before {
  content: "02";
  color: var(--portfolio-bg);
  font-family: "DIN-black", sans-serif !important;
  font-size: 100px;
  font-weight: 900;
  letter-spacing: -5px;
  line-height: 74px !important;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 3;
  top: 17%;
  right: calc(50% - 11px);
}

.studio-grid::after {
  content: "";
  background:
    linear-gradient(90deg, rgba(23, 23, 23, 0.04), rgba(23, 23, 23, 0)),
    url("/images/studio/equipo-roitenberg.webp") center 44% / cover no-repeat;
  position: absolute;
  z-index: 4;
  inset: 0 0 0 calc(50% - 1px);
}

.studio-heading,
.studio-copy,
.studio-stats {
  grid-column: 1;
  position: relative;
  z-index: 2;
}

.studio-heading {
  max-width: none !important;
  padding: clamp(5.3rem, 7vw, 8rem) clamp(3rem, 4.5vw, 5.4rem) 0 clamp(5.7rem, 8vw, 8.2rem);
  display: block !important;
}

.studio-heading::after {
  content: "";
  display: block !important;
  width: 1px;
  height: 120px;
  background: rgba(246, 243, 237, 0.22);
  position: absolute;
  left: 62px !important;
  top: 112px !important;
}

.studio-copy::after {
  content: "";
  display: block !important;
  height: 1px;
  background: rgba(246, 243, 237, 0.24);
  position: absolute;
  left: 90px !important;
  right: 90px !important;
  bottom: clamp(0.55rem, 1vw, 1.05rem);
}

.studio-heading .section-kicker {
  color: var(--ivory) !important;
  font-family: "DIN-black", var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(1.25rem, 1.65vw, 2rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.045em !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-transform: none !important;
}

.studio-heading .section-kicker::before {
  display: none !important;
}

.studio-grid h2,
.studio-heading-logo {
  display: none !important;
}

.studio-content {
  display: contents !important;
}

.studio-copy {
  max-width: none !important;
  min-height: 0 !important;
  border: 0 !important;
  gap: 0 !important;
  align-content: start !important;
  padding: clamp(1.8rem, 2.7vw, 3.2rem) clamp(4rem, 6.4vw, 7.4rem) clamp(2.55rem, 3.2vw, 3.9rem) clamp(5.7rem, 8vw, 8.2rem) !important;
  display: block !important;
}

.studio-copy::before {
  display: none !important;
}

.studio-copy p {
  color: var(--ivory) !important;
  max-width: 860px !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(0.72rem, 0.84vw, 1rem) !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.7 !important;
  margin: 0 !important;
  text-transform: none !important;
}

.studio-copy .editorial-link {
  display: none !important;
}

.studio-stats {
  align-self: end;
  position: relative;
  border-top: 0 !important;
  border-bottom: 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(0.72rem, 1vw, 1.1rem);
  margin: 0 !important;
  padding: clamp(1.35rem, 1.85vw, 2.05rem) clamp(4.9rem, 6.9vw, 7.8rem) clamp(3rem, 4vw, 4.5rem) clamp(5.7rem, 8vw, 8.2rem) !important;
  background: transparent;
  box-shadow: none;
}

.studio-stats div {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 820ms ease,
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
  display: grid;
  grid-template-rows: minmax(0, 1fr) 1px auto;
  row-gap: clamp(0.72rem, 0.78vw, 0.95rem);
  align-content: stretch;
  border: 1px solid rgba(251, 249, 244, 0.2) !important;
  border-radius: 7px;
  min-height: clamp(7rem, 7.65vw, 8.9rem) !important;
  background:
    linear-gradient(135deg, rgba(251, 249, 244, 0.13), rgba(251, 249, 244, 0.038) 62%),
    rgba(23, 23, 23, 0.038);
  box-shadow:
    inset 0 1px 0 rgba(251, 249, 244, 0.15),
    0 14px 32px rgba(23, 23, 23, 0.07);
  padding: clamp(1.14rem, 1.28vw, 1.48rem) clamp(1rem, 1.15vw, 1.35rem) clamp(1.04rem, 1.12vw, 1.26rem) !important;
  position: relative;
  overflow: hidden;
}

.studio-stats div::before {
  content: "";
  width: 42%;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 38%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.08) 62%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: blur(0.5px);
  pointer-events: none;
  position: absolute;
  z-index: 1;
  top: -28%;
  bottom: -28%;
  left: -58%;
  transform: skewX(-18deg);
  opacity: 0;
}

.studio-stats.is-visible div::before {
  animation: studio-glass-sheen 4.8s cubic-bezier(0.22, 1, 0.36, 1) 520ms 1 both;
}

.studio-stats.is-visible div:nth-child(2)::before {
  animation-delay: 780ms;
}

.studio-stats.is-visible div:nth-child(3)::before {
  animation-delay: 1040ms;
}

.studio-stats div:hover::before {
  animation: studio-glass-sheen 1.65s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
}

.studio-stats div::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, rgba(251, 249, 244, 0.34), rgba(251, 249, 244, 0));
  grid-row: 2;
  position: relative;
  z-index: 2;
  right: auto;
  bottom: auto;
  left: auto;
  opacity: 0.64;
}

.studio-stats.is-visible div {
  opacity: 1;
  transform: translateY(0);
}

.studio-stats.is-visible div:nth-child(2) {
  transition-delay: 90ms;
}

.studio-stats.is-visible div:nth-child(3) {
  transition-delay: 180ms;
}

.studio-stats div:first-child {
  padding-left: clamp(1rem, 1.25vw, 1.45rem) !important;
}

.studio-stats dt {
  color: #fffdf8 !important;
  align-items: end;
  align-self: end;
  display: flex;
  font-family: var(--font-serif), Georgia, serif;
  font-size: clamp(2.18rem, 2.75vw, 3.38rem) !important;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
  line-height: 0.84 !important;
  padding-bottom: 0;
  text-shadow: none;
  position: relative;
  z-index: 3;
}

.studio-stats div:first-child dt {
  font-size: clamp(1.7rem, 2.1vw, 2.62rem) !important;
  letter-spacing: -0.016em;
}

.studio-stats div:nth-child(2) dt,
.studio-stats div:nth-child(3) dt {
  justify-content: center;
  text-align: center;
}

.studio-stats dd {
  color: rgba(251, 249, 244, 0.84) !important;
  align-items: center;
  gap: 0.56rem;
  display: grid;
  grid-template-columns: clamp(1.12rem, 1.08vw, 1.34rem) minmax(0, 1fr);
  max-width: none !important;
  align-self: end;
  margin-top: 0 !important;
  font-family: var(--font-sans), Arial, sans-serif;
  font-size: clamp(0.69rem, 0.7vw, 0.8rem) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.18 !important;
  padding-top: 0;
  text-transform: none;
  position: relative;
  z-index: 3;
}

.studio-stats dd::before {
  content: "";
  width: clamp(1.12rem, 1.08vw, 1.34rem);
  height: clamp(1.12rem, 1.08vw, 1.34rem);
  opacity: 0.82;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  justify-self: start;
}

.studio-stats div:first-child dd::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fbf9f4'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2018h16'/%3E%3Cpath%20d='M7%2015V6h10v9'/%3E%3Cpath%20d='M10%209h4'/%3E%3Cpath%20d='M10%2012h7'/%3E%3C/svg%3E");
}

.studio-stats div:nth-child(2) dd::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fbf9f4'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2020V8l7-4%207%204v12'/%3E%3Cpath%20d='M9%2020v-7h6v7'/%3E%3Cpath%20d='M8%2010h.01'/%3E%3Cpath%20d='M16%2010h.01'/%3E%3C/svg%3E");
}

.studio-stats div:nth-child(3) dd::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fbf9f4'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8'/%3E%3Cpath%20d='M12%208v4l3%202'/%3E%3C/svg%3E");
}

@keyframes studio-glass-sheen {
  0% {
    left: -58%;
    opacity: 0;
  }

  18% {
    opacity: 0.75;
  }

  48% {
    opacity: 0.45;
  }

  100% {
    left: 118%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-stats div::before {
    animation: none !important;
    display: none;
  }
}

.projects-heading::before {
  content: "01";
  position: absolute;
  z-index: 1;
  top: 16%;
  right: calc(50% - 11px);
  color: var(--portfolio-bg);
  font-family: "DIN-black", sans-serif !important;
  font-size: 100px;
  font-weight: 900;
  letter-spacing: -5px;
  line-height: 74px !important;
  margin: 0;
  padding: 0;
}

.projects-title-block {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  border: 0 !important;
  padding: 110px 90px !important;
  position: relative;
}

.projects-title-block::before {
  content: "";
  position: absolute;
  left: 62px;
  top: 112px;
  width: 1px;
  height: 120px;
  background: rgba(28, 27, 25, 0.18);
}

.projects-title-block::after {
  content: "";
  position: absolute;
  left: 90px;
  right: 90px;
  bottom: 92px;
  height: 1px;
  background: rgba(28, 27, 25, 0.14);
}

.projects-title-block .section-kicker {
  display: none;
}

.projects-title-block h2 {
  color: #7f7f7f !important;
  font-family: var(--font-serif), Georgia, serif !important;
  font-size: clamp(2.25rem, 2.45vw, 3rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  line-height: 1 !important;
  text-transform: none;
  position: relative;
}

.projects-title-block h2::before {
  content: none;
}

.projects-title-block p:not(.section-kicker) {
  max-width: 655px !important;
  margin-top: 90px !important;
  color: #9b9b9b !important;
  font-family: var(--font-sans), Arial, sans-serif;
  font-size: clamp(1.12rem, 1.18vw, 1.34rem) !important;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.85 !important;
  text-transform: none;
  position: relative;
}

.projects-filter-area {
  position: absolute;
  top: 230px;
  right: calc(50% + 64px);
  width: 396px !important;
  max-width: 396px !important;
  min-width: 396px !important;
  margin: 0;
  padding: 0;
  transform: none;
  display: block !important;
  z-index: 2;
}

.projects-heading .projects-filter-area,
.projects-heading .project-filters {
  box-sizing: border-box;
}

.project-filters {
  width: 396px !important;
  max-width: 396px !important;
  min-width: 396px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  gap: 0;
  border: 0 !important;
  background: transparent !important;
}

.projects-heading .project-filters button {
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  min-height: 0 !important;
  padding: 14px 0 13px !important;
  color: var(--portfolio-bg) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(246, 243, 237, 0.5) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 17px !important;
  text-align: right;
  text-transform: uppercase !important;
}

.projects-heading .project-filters button:last-child {
  border-bottom: 0 !important;
}

.projects-heading .project-filters button span {
  display: block;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  text-align: right !important;
  text-transform: uppercase !important;
}

.projects-heading .project-filters button:first-child span {
  position: static;
  font-size: inherit;
  text-indent: 0;
}

.projects-heading .project-filters button:first-child span::after {
  content: none;
}

.project-filters button small {
  display: none !important;
}

.project-filters button::after {
  display: none !important;
}

.project-filters button:hover,
.project-filters button:focus-visible,
.project-filters button.is-active {
  color: var(--portfolio-bg) !important;
}

.projects-total {
  display: none !important;
}

.projects-controls {
  position: absolute;
  z-index: 3;
  top: 430px;
  right: calc(50% + 64px);
  width: 396px;
  justify-content: flex-end !important;
  align-items: center;
  border-bottom: 0;
  margin: 0;
  padding: 0 !important;
}

.project-grid,
.project-list {
  margin-top: 0 !important;
}

.project-view-switch {
  margin-left: auto;
  color: var(--portfolio-bg);
}

.project-view-switch span {
  color: rgba(246, 243, 237, 0.82);
  font-family: var(--font-sans), Arial, sans-serif;
  text-transform: none;
}

.project-view-switch button {
  color: var(--portfolio-bg);
  border-color: rgba(246, 243, 237, 0.36);
}

.project-view-switch button.is-active {
  color: #969696;
  background: var(--portfolio-bg);
  border-color: var(--portfolio-bg);
}

.project-view-switch button:hover,
.project-view-switch button:focus-visible {
  border-color: rgba(246, 243, 237, 0.8);
}

@media (max-width: 1100px) {
  .studio-stats {
    gap: 0.75rem;
    padding-right: clamp(2rem, 5vw, 4rem) !important;
    padding-left: clamp(2rem, 5vw, 4rem) !important;
  }

  .studio-stats div {
    min-height: 7rem !important;
  }

  .projects-heading {
    --portfolio-header-height: auto;
    grid-template-columns: 1fr;
    background: var(--portfolio-bg);
  }

  .projects-heading::before {
    top: 2.2rem;
    right: 1.5rem;
    left: auto;
    color: rgba(150, 150, 150, 0.23);
    font-size: clamp(4.5rem, 18vw, 7rem);
  }

  .projects-filter-area {
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch !important;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0 1rem 2rem;
    background: #969696;
  }

  .projects-title-block {
    grid-column: 1;
    padding: clamp(3rem, 9vw, 5rem) 1rem clamp(2.4rem, 7vw, 4rem) !important;
  }

  .projects-title-block p:not(.section-kicker) {
    margin-top: 2rem !important;
    font-size: clamp(1.08rem, 4vw, 1.4rem) !important;
    line-height: 1.7 !important;
  }
}

@media (max-width: 820px) {
  .studio-stats {
    grid-template-columns: 1fr !important;
    padding: 1rem 1rem 2.2rem !important;
  }

  .studio-stats div {
    min-height: 6.5rem !important;
    padding: 1rem !important;
  }

  .studio-stats div::after {
    bottom: auto;
  }

  .projects-section {
    padding-top: 0 !important;
  }

  .project-filters {
    grid-template-columns: 1fr 1fr;
    border: 0 !important;
  }

  .project-filters button {
    min-height: 48px !important;
    padding-right: 0.85rem !important;
  }

  .project-filters button:nth-child(n) {
    border-left: 0 !important;
    border-top: 0 !important;
  }

  .projects-controls {
    position: static;
    width: auto;
    justify-content: flex-end !important;
    margin: 0 0 1.25rem;
    padding: 0 !important;
  }
}

@media (max-width: 520px) {
  .projects-heading::before {
    top: 2rem;
    right: 1rem;
  }

  .projects-title-block h2 {
    font-size: 1.35rem !important;
  }

  .project-filters {
    grid-template-columns: 1fr;
  }
}

.contact-section {
  --contact-line: rgba(28, 27, 25, 0.14);
  --contact-soft-line: rgba(28, 27, 25, 0.09);
  --contact-text: #33312d;
  --contact-muted: #85827d;
  background: var(--ivory) !important;
  border: 0 !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}

.contact-section::after {
  content: "";
  background:
    linear-gradient(90deg, rgba(23, 23, 23, 0.16), rgba(23, 23, 23, 0.02) 58%, rgba(246, 243, 237, 0.1)),
    url("/images/hero/hero-citadel-innovacion-20260730.webp") center 48% / cover no-repeat;
  filter: saturate(0.78) contrast(0.97);
  height: clamp(360px, 28vw, 520px);
  width: 50%;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
}

.contact-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: clamp(360px, 28vw, 520px) minmax(470px, auto) !important;
  gap: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  min-height: clamp(830px, 61vw, 980px);
  margin: 0 calc(50% - 50vw) !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}

.contact-grid::before {
  content: "03";
  color: var(--portfolio-bg);
  font-family: "DIN-black", sans-serif !important;
  font-size: 100px;
  font-weight: 900;
  letter-spacing: -5px;
  line-height: 74px !important;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 3;
  top: clamp(4.25rem, 4.7vw, 5.7rem);
  right: calc(50% - 11px);
}

.contact-grid::after {
  display: none !important;
}

.contact-info {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid !important;
  grid-template-rows: clamp(360px, 28vw, 520px) minmax(0, 1fr);
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
}

.contact-info > .section-kicker {
  align-self: center;
  color: var(--contact-text) !important;
  font-family: var(--font-serif), Georgia, serif !important;
  font-size: clamp(2.35rem, 3.05vw, 4rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 clamp(4.4rem, 8vw, 8.9rem) !important;
  text-transform: none !important;
}

.contact-info > .section-kicker::before {
  display: none !important;
}

.contact-info > .section-kicker::after {
  display: none !important;
}

.contact-info::before {
  content: "Ante cualquier consulta, no dudes en contactarnos.";
  max-width: 310px;
  color: var(--contact-muted);
  font-family: var(--font-sans), Arial, sans-serif;
  font-size: clamp(0.78rem, 0.82vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.75;
  text-transform: none;
  position: absolute;
  z-index: 2;
  top: clamp(210px, 16.2vw, 302px);
  left: clamp(4.4rem, 8vw, 8.9rem);
}

.contact-info address {
  grid-row: 2;
  align-content: start;
  border-top: 1px solid var(--contact-line);
  display: grid !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: clamp(5.2rem, 6.9vw, 6.5rem) clamp(5.2rem, 8vw, 9.4rem) 0 !important;
}

.contact-info address p {
  align-items: center;
  border-bottom: 1px solid var(--contact-line);
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: clamp(1.1rem, 1.5vw, 1.65rem);
  margin: 0 !important;
  padding: clamp(1.25rem, 1.7vw, 1.8rem) 0 !important;
}

.contact-info address p:first-child {
  padding-top: 0 !important;
}

.contact-info address p:last-child {
  border-bottom: 0;
}

.contact-info address svg {
  width: 46px !important;
  height: 46px !important;
  color: rgba(28, 27, 25, 0.58);
  border: 1px solid rgba(28, 27, 25, 0.18);
  border-radius: 50%;
  padding: 12px;
}

.contact-info address span,
.contact-info address a {
  border-left: 1px solid var(--contact-line);
  color: var(--contact-muted) !important;
  display: block;
  font-family: var(--font-sans), Arial, sans-serif;
  font-size: clamp(0.82rem, 0.82vw, 0.96rem);
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: 1.65;
  padding-left: clamp(1rem, 1.35vw, 1.45rem);
  text-decoration: none !important;
}

.contact-info address p:nth-child(1) span::before,
.contact-info address p:nth-child(2) a::before,
.contact-info address p:nth-child(3) a::before {
  color: var(--contact-text);
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  margin-bottom: 0.48rem;
  text-transform: uppercase;
}

.contact-info address p:nth-child(1) span::before {
  content: "Estudio";
}

.contact-info address p:nth-child(2) a::before {
  content: "Teléfono";
}

.contact-info address p:nth-child(3) a::before {
  content: "Mail";
}

.contact-section .social-links {
  display: none !important;
}

.contact-form {
  grid-column: 1;
  grid-row: 2;
  align-self: stretch;
  border-top: 1px solid var(--contact-line);
  display: block !important;
  margin: 0 !important;
  padding: clamp(2.65rem, 4.05vw, 4.8rem) clamp(5.3rem, 8vw, 8.5rem) clamp(3rem, 4.8vw, 5.1rem) !important;
  position: relative;
  z-index: 1;
}

.contact-form > .section-kicker {
  color: transparent !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  margin: 0 0 clamp(1.8rem, 2.3vw, 2.65rem) !important;
  padding-left: 28px !important;
  position: relative;
}

.contact-form > .section-kicker::before {
  display: none !important;
}

.contact-form > .section-kicker::after {
  content: "Envíanos tu mensaje";
  color: var(--contact-text);
  font-family: var(--font-sans), Arial, sans-serif;
  font-size: clamp(0.86rem, 0.92vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
}

.contact-form .form-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.8rem, 1vw, 1.15rem) !important;
}

.contact-form .field {
  margin: 0 0 clamp(0.8rem, 1vw, 1.15rem) !important;
  position: relative;
}

.contact-form .field label {
  color: rgba(51, 49, 45, 0.58) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  line-height: 1 !important;
  pointer-events: none;
  position: absolute;
  left: 1.08rem;
  top: 0.92rem;
  text-transform: uppercase;
  z-index: 1;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100% !important;
  color: var(--contact-text) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(28, 27, 25, 0.18) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: 0.92rem !important;
  min-height: 68px !important;
  outline: 0 !important;
  padding: 2.3rem 1.05rem 0.9rem !important;
  transition: border-color 180ms ease, background 180ms ease;
}

.contact-form select {
  appearance: none;
  cursor: pointer;
  padding-right: 4.4rem !important;
}

.contact-form .contact-building-field::before {
  content: "";
  width: 42px;
  height: calc(100% - 2px);
  border-left: 1px solid rgba(28, 27, 25, 0.12);
  pointer-events: none;
  position: absolute;
  z-index: 2;
  top: 1px;
  right: 1px;
}

.contact-form .contact-building-field::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid rgba(51, 49, 45, 0.72);
  border-bottom: 1.5px solid rgba(51, 49, 45, 0.72);
  pointer-events: none;
  position: absolute;
  z-index: 3;
  top: calc(50% - 6px);
  right: 18px;
  transform: rotate(45deg);
  transition: transform 180ms ease, border-color 180ms ease;
}

.contact-form .contact-building-field:hover::after,
.contact-form .contact-building-field:focus-within::after {
  border-color: var(--contact-text);
  transform: translateY(2px) rotate(45deg);
}

.contact-form .contact-building-field:focus-within::before {
  border-left-color: rgba(28, 27, 25, 0.24);
}

.contact-form select:invalid,
.contact-form select option[value=""] {
  color: rgba(51, 49, 45, 0.68);
}

.contact-form select option {
  color: var(--contact-text);
  background: var(--ivory);
}

.contact-form textarea {
  min-height: 156px !important;
  resize: vertical;
}

.contact-form input:hover,
.contact-form textarea:hover,
.contact-form select:hover,
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(28, 27, 25, 0.4) !important;
}

.contact-form .field-error {
  color: #8d3731 !important;
  font-size: 0.72rem !important;
  margin: 0.35rem 0 0 !important;
}

.contact-form .form-honeypot {
  height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
}

.contact-form .form-submit {
  min-width: 220px;
  min-height: 58px;
  color: var(--contact-text) !important;
  background: transparent !important;
  border: 1px solid rgba(28, 27, 25, 0.2) !important;
  border-radius: 0 !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  margin-top: 0.2rem !important;
  padding: 0 1.45rem !important;
  text-transform: uppercase !important;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}

.contact-form .form-submit [aria-hidden="true"] {
  display: none !important;
}

.contact-form .form-submit:hover,
.contact-form .form-submit:focus-visible {
  color: var(--ivory) !important;
  background: var(--contact-text) !important;
  border-color: var(--contact-text) !important;
}

.contact-form .form-submit:disabled {
  cursor: wait;
  opacity: 0.62;
}

.contact-form .form-status {
  min-height: 1.3rem;
  color: var(--contact-muted) !important;
  font-size: 0.82rem !important;
  margin: 1rem 0 0 !important;
}

@media (max-width: 1100px) {
  .contact-grid {
    grid-template-rows: clamp(310px, 34vw, 430px) minmax(420px, auto) !important;
    min-height: auto;
  }

  .contact-section::after {
    height: clamp(310px, 34vw, 430px);
    width: 50%;
  }

  .contact-info {
    grid-template-rows: clamp(310px, 34vw, 430px) minmax(0, 1fr);
  }

  .contact-grid::after {
    top: clamp(310px, 34vw, 430px);
  }

  .contact-info > .section-kicker {
    padding-inline: clamp(2.5rem, 5vw, 4.5rem) !important;
  }

  .contact-info::before {
    left: clamp(2.5rem, 5vw, 4.5rem);
  }

  .contact-info address,
  .contact-form {
    padding-inline: clamp(2.5rem, 5vw, 4.5rem) !important;
  }
}

@media (max-width: 820px) {
  .contact-section::after {
    height: clamp(270px, 66vw, 390px);
    width: 100%;
    inset: 0 0 auto;
  }

  .contact-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: clamp(270px, 66vw, 390px) auto auto !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .contact-grid::before {
    top: 1.35rem;
    right: 0.85rem;
    color: rgba(246, 243, 237, 0.74);
    font-size: clamp(4.5rem, 18vw, 7rem);
  }

  .contact-grid::after {
    display: none;
  }

  .contact-info {
    grid-column: 1;
    grid-row: 2;
    display: block !important;
  }

  .contact-info > .section-kicker {
    padding: clamp(2.8rem, 9vw, 4rem) 1rem 0 !important;
    font-size: clamp(2.75rem, 12vw, 4.2rem) !important;
  }

  .contact-info::before {
    display: block;
    max-width: 26rem;
    margin: 1.5rem 1rem 2.2rem;
    position: static;
  }

  .contact-info address {
    border-top: 1px solid var(--contact-line);
    padding: 1.9rem 1rem 2.2rem !important;
  }

  .contact-info address p {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 1rem;
  }

  .contact-info address svg {
    width: 42px !important;
    height: 42px !important;
    padding: 11px;
  }

  .contact-form {
    grid-column: 1;
    grid-row: 3;
    padding: 2.1rem 1rem 2.8rem !important;
  }

  .contact-form .form-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .contact-form .form-submit {
    width: 100%;
  }
}

/* Mobile stabilization layer: keep desktop editorial overrides from leaking into narrow screens. */
@media (max-width: 820px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .section-inner,
  .projects-section .section-inner {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  .projects-heading {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
    background: var(--ivory) !important;
  }

  .projects-heading::before {
    top: 1.35rem !important;
    right: 0.85rem !important;
    color: rgba(150, 150, 150, 0.18) !important;
    font-size: clamp(4.65rem, 23vw, 6.25rem) !important;
    line-height: 0.78 !important;
  }

  .projects-title-block {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 3.75rem 1rem 2.2rem !important;
  }

  .projects-title-block::before {
    left: 1rem !important;
    top: 3.85rem !important;
    height: 72px !important;
    background: rgba(28, 27, 25, 0.14) !important;
  }

  .projects-title-block::after {
    left: 1rem !important;
    right: 1rem !important;
    bottom: 1.25rem !important;
    background: rgba(28, 27, 25, 0.12) !important;
  }

  .projects-title-block h2 {
    font-size: clamp(2.2rem, 11vw, 3.3rem) !important;
    line-height: 0.96 !important;
    padding-left: 1.35rem !important;
  }

  .projects-title-block p:not(.section-kicker) {
    max-width: none !important;
    margin: 1.55rem 0 0 !important;
    padding-left: 1.35rem !important;
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
  }

  .projects-filter-area {
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 1.35rem 1rem 1.1rem !important;
    background: #969696 !important;
    transform: none !important;
  }

  .projects-heading .project-filters,
  .project-filters {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .projects-heading .project-filters button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0.82rem 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
  }

  .projects-controls {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    justify-content: flex-end !important;
    padding: 0 1rem 1.35rem !important;
    margin: 0 !important;
    background: #969696 !important;
  }

  .project-view-switch {
    margin-left: 0 !important;
  }

  .project-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .project-card,
  .project-card.portrait,
  .project-card.landscape,
  .project-card.wide {
    width: 100% !important;
    min-height: 178px !important;
    aspect-ratio: 1.9 !important;
  }

  .project-card-content {
    inset: 0.9rem !important;
  }

  .project-card strong {
    max-width: 92% !important;
    font-size: clamp(1.35rem, 6vw, 1.85rem) !important;
    line-height: 1 !important;
  }

  .project-list {
    width: 100% !important;
    padding: 0 !important;
    gap: 8px !important;
  }

  .project-list-item {
    border-radius: 0 !important;
  }

  .project-list-item button {
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
    padding: 0 !important;
  }

  .project-list-image {
    border-radius: 0 !important;
  }

  .project-card.is-mobile-hidden,
  .project-list-item.is-mobile-hidden {
    display: none !important;
  }

  .mobile-projects-more-wrap {
    background: var(--ivory) !important;
    display: flex !important;
    justify-content: center !important;
    padding: 1.05rem 1rem 2.15rem !important;
  }

  .mobile-projects-more-wrap[hidden] {
    display: none !important;
  }

  .mobile-projects-more {
    align-items: center !important;
    background: transparent !important;
    border: 1px solid rgba(23, 23, 23, 0.22) !important;
    border-radius: 0 !important;
    color: #171717 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    font-family: var(--font-sans), Arial, sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    justify-content: center !important;
    letter-spacing: 0.26em !important;
    min-height: 3.2rem !important;
    min-width: min(100%, 13.8rem) !important;
    padding: 0.95rem 1.45rem !important;
    position: relative !important;
    text-transform: uppercase !important;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease !important;
  }

  .mobile-projects-more::after {
    content: "->";
    font-size: 0.9rem;
    letter-spacing: 0;
    margin-left: 0.82rem;
    transform: translateY(-1px);
  }

  .mobile-projects-more:active {
    background: #171717 !important;
    border-color: #171717 !important;
    color: var(--ivory) !important;
  }

  .modal-layer {
    padding: 0.7rem !important;
    align-items: center !important;
  }

  .project-modal {
    width: calc(100vw - 2rem) !important;
    max-width: calc(100% - 2rem) !important;
    max-height: calc(100dvh - 1.4rem) !important;
    border-radius: 8px !important;
  }

  .modal-content {
    padding: 0.95rem !important;
  }

  .modal-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.9rem !important;
  }

  .modal-info {
    display: contents !important;
  }

  .modal-header {
    order: 1 !important;
    padding-right: 3rem !important;
  }

  .project-gallery {
    order: 3 !important;
  }

  .modal-accordion {
    order: 2 !important;
    margin-top: 0 !important;
  }

  .modal-project-nav {
    order: 4 !important;
  }

  .gallery-main {
    aspect-ratio: 1.18 !important;
  }

  .gallery-thumbnails {
    grid-template-columns: repeat(4, minmax(64px, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .hero-content {
    width: calc(100% - 2rem) !important;
    margin-left: 1rem !important;
    padding-top: 31svh !important;
  }

  .hero-content::before {
    left: 0 !important;
  }

  .hero-content h1 {
    font-size: clamp(2.7rem, 12vw, 3.8rem) !important;
    line-height: 0.96 !important;
  }

  .hero-content p {
    max-width: 21rem !important;
    font-size: 0.92rem !important;
  }

  .studio-grid {
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(280px, 58vw) auto auto !important;
    background: #969696 !important;
  }

  .studio-grid::before {
    top: 1.35rem !important;
    right: 0.85rem !important;
    color: rgba(246, 243, 237, 0.72) !important;
    font-size: clamp(4.65rem, 23vw, 6.25rem) !important;
  }

  .studio-grid::after {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    min-height: 280px !important;
    width: 100% !important;
  }

  .studio-heading,
  .studio-copy,
  .studio-stats {
    grid-column: 1 !important;
  }

  .studio-heading {
    grid-row: 2 !important;
    padding: 2.15rem 1rem 0 !important;
  }

  .studio-heading::after,
  .studio-copy::after {
    display: none !important;
  }

  .studio-heading .section-kicker {
    font-size: clamp(1.7rem, 8vw, 2.45rem) !important;
  }

  .studio-copy {
    grid-row: 3 !important;
    padding: 1.35rem 1rem 1.5rem !important;
  }

  .studio-copy p {
    max-width: none !important;
    font-size: 0.84rem !important;
    letter-spacing: 0.035em !important;
    line-height: 1.7 !important;
  }

  .studio-stats {
    grid-row: 4 !important;
    gap: 0.58rem !important;
    justify-items: center !important;
    padding: 0 1rem 1.65rem !important;
  }

  .studio-stats div {
    width: min(100%, 18.75rem) !important;
    min-height: 5.85rem !important;
    row-gap: 0.56rem !important;
    padding: 0.9rem 1rem !important;
  }

  .studio-stats dt {
    font-size: clamp(2rem, 10vw, 2.5rem) !important;
    line-height: 0.86 !important;
  }

  .studio-stats div:first-child dt {
    font-size: clamp(1.58rem, 8vw, 2.06rem) !important;
  }

  .studio-stats div::after {
    opacity: 0.48 !important;
  }

  .studio-stats dd {
    color: rgba(251, 249, 244, 0.9) !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.04em !important;
    gap: 0.48rem !important;
    grid-template-columns: 1rem minmax(0, 1fr) !important;
  }

  .studio-stats dd::before {
    height: 1rem !important;
    width: 1rem !important;
  }

  .contact-info address span,
  .contact-info address a {
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    min-height: 64px !important;
  }
}

@media (min-width: 821px) {
  .mobile-projects-more-wrap {
    display: none !important;
  }
}

/* Contact typography polish: keep labels readable without forced uppercase. */
.contact-info address p:nth-child(1) span::before,
.contact-info address p:nth-child(2) a::before,
.contact-info address p:nth-child(3) a::before {
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.035em !important;
  text-transform: none !important;
}

.contact-info address p:nth-child(2) a::before {
  content: "Teléfono" !important;
}

.contact-form > .section-kicker::after {
  content: "Envíanos tu mensaje" !important;
  font-size: clamp(0.95rem, 1vw, 1.12rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.045em !important;
  text-transform: none !important;
}

.contact-form .field label {
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.035em !important;
  text-transform: none !important;
}

.contact-form .form-submit {
  gap: 0.7rem !important;
  font-size: 0.94rem !important;
  letter-spacing: 0.035em !important;
  text-transform: none !important;
}

@media (max-width: 820px) {
  .studio-section {
    padding-top: clamp(0.55rem, 2.6vw, 0.9rem) !important;
  }
}

@media (max-width: 820px) {
  .contact-info > .section-kicker {
    padding-top: clamp(2.25rem, 7vw, 3.1rem) !important;
  }

  .contact-info::before {
    margin: 1.1rem 1rem 1.55rem !important;
    line-height: 1.55 !important;
  }

  .contact-info address {
    padding: 1.35rem 1rem 1.55rem !important;
  }

  .contact-info address p {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 0.85rem !important;
    min-height: 0 !important;
    padding: 0.82rem 0 !important;
  }

  .contact-info address p:first-child {
    padding-top: 0 !important;
  }

  .contact-info address p:last-child {
    padding-bottom: 0 !important;
  }

  .contact-info address svg {
    width: 38px !important;
    height: 38px !important;
    padding: 10px !important;
  }

  .contact-info address span,
  .contact-info address a {
    padding-left: 0.85rem !important;
  }

  .contact-form {
    padding: 1.65rem 1rem 2.25rem !important;
  }

  .contact-form > .section-kicker {
    margin-bottom: 1.25rem !important;
  }

  .contact-form .field {
    margin-bottom: 0.52rem !important;
  }

  .contact-form .field label {
    top: 0.68rem !important;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    min-height: 54px !important;
    padding: 1.72rem 0.95rem 0.54rem !important;
  }

  .contact-form textarea {
    min-height: 104px !important;
  }

  .contact-form .contact-building-field::before {
    width: 40px !important;
  }

  .contact-form .contact-building-field::after {
    right: 17px !important;
  }

  .contact-form .form-submit {
    min-height: 50px !important;
    margin-top: 0.35rem !important;
  }
}

@media (max-width: 820px) {
  .site-header:has(.mobile-panel.is-open) {
    background: transparent !important;
    border-bottom-color: transparent !important;
  }

  .site-header:has(.mobile-panel.is-open) .site-logo img {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .site-header:has(.mobile-panel.is-open) .mobile-menu-button {
    color: #171717 !important;
    background: rgba(246, 243, 237, 0.76) !important;
    border-color: rgba(23, 23, 23, 0.12) !important;
  }

  .mobile-panel {
    width: min(78vw, 330px) !important;
    max-width: 330px !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    inset: 0 0 0 auto !important;
    padding: calc(var(--header-height, 74px) + 1.65rem) 1.25rem 2rem !important;
    background: var(--ivory) !important;
    border-left: 1px solid rgba(23, 23, 23, 0.12) !important;
    box-shadow: -24px 0 70px rgba(23, 23, 23, 0) !important;
    overflow-y: auto !important;
    transform: translateX(104%) !important;
    transition:
      transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 420ms ease !important;
  }

  .mobile-panel.is-open {
    box-shadow:
      -100vw 0 0 100vw rgba(0, 0, 0, 0.68),
      -18px 0 48px rgba(23, 23, 23, 0.18) !important;
    transform: translateX(0) !important;
  }

  .mobile-panel nav {
    min-height: auto !important;
    align-content: start !important;
    gap: 0 !important;
  }

  .mobile-panel a {
    color: #171717 !important;
    min-height: 54px !important;
    padding: 0.78rem 0 !important;
    border-bottom: 1px solid rgba(23, 23, 23, 0.1) !important;
    font-family: var(--font-sans), Arial, sans-serif !important;
    font-size: 0.96rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.15 !important;
    text-transform: none !important;
  }

  .mobile-panel a:hover,
  .mobile-panel a:focus-visible {
    color: #000 !important;
    padding-left: 0.35rem !important;
  }
}

@media (max-width: 820px) {
  .project-grid,
  .project-list {
    box-sizing: border-box !important;
    padding-inline: clamp(0.75rem, 3.6vw, 1rem) !important;
  }
}

@media (max-width: 520px) {
  .studio-stats {
    width: min(calc(100% - 2rem), 23rem) !important;
    margin-inline: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    justify-items: stretch !important;
    padding: 0.95rem 0 1.7rem !important;
    border-top: 1px solid rgba(251, 249, 244, 0.24) !important;
    border-bottom: 1px solid rgba(251, 249, 244, 0.16) !important;
  }

  .studio-stats div {
    width: 100% !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    align-content: center !important;
    column-gap: 0 !important;
    row-gap: 0.42rem !important;
    padding: 0.45rem 0.52rem !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .studio-stats div:first-child {
    grid-column: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  .studio-stats dt {
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: clamp(1.68rem, 7.4vw, 2.05rem) !important;
    line-height: 0.92 !important;
    padding: 0 !important;
  }

  .studio-stats div:first-child dt {
    font-size: clamp(0.98rem, 4.7vw, 1.18rem) !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
  }

  .studio-stats div::after {
    content: "" !important;
    width: 1px !important;
    height: 3.35rem !important;
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    align-self: auto !important;
    background: rgba(251, 249, 244, 0.2) !important;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;
    opacity: 1 !important;
  }

  .studio-stats div:last-child::after {
    display: none !important;
  }

  .studio-stats dd {
    align-self: center !important;
    justify-content: center !important;
    text-align: center !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    font-size: 0.64rem !important;
    letter-spacing: 0.018em !important;
    line-height: 1.15 !important;
  }

  .studio-stats dd::before {
    display: none !important;
  }
}

@media (max-width: 820px) {
  .contact-info {
    display: flex !important;
    flex-direction: column !important;
  }

  .contact-info > .section-kicker {
    order: 1 !important;
  }

  .contact-info::before {
    order: 2 !important;
  }

  .contact-info address {
    order: 3 !important;
  }
}

/* Final mobile and delivery polish */
@media (max-width: 820px) {
  .hero-section {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: none !important;
  }

  @supports (height: 100dvh) {
    .hero-section {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }

  .hero-slider-ui {
    bottom: clamp(4.15rem, 12vw, 5.25rem) !important;
  }

  .hero-slider-actions {
    bottom: calc(clamp(4.15rem, 12vw, 5.25rem) - 13px) !important;
  }

  .hero-slider-progress {
    bottom: clamp(3.75rem, 10.8vw, 4.85rem) !important;
  }

  .project-grid {
    padding-top: clamp(0.85rem, 3.4vw, 1.15rem) !important;
  }

  .project-card,
  .project-card.portrait,
  .project-card.landscape,
  .project-card.wide {
    min-height: clamp(218px, 58vw, 246px) !important;
    aspect-ratio: 1.46 !important;
  }

  .project-card-content {
    inset: 1rem !important;
  }

  .project-card strong {
    font-size: clamp(1.5rem, 6.9vw, 2.12rem) !important;
  }

  .modal-layer {
    padding: 0.5rem !important;
  }

  .project-modal {
    width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
    max-height: calc(100dvh - 1rem) !important;
    border-radius: 6px !important;
  }

  .modal-content {
    padding: 0.85rem !important;
  }

  .modal-body {
    gap: 0.78rem !important;
  }

  .modal-header {
    padding-right: 2.65rem !important;
  }

  .modal-header h2 {
    font-size: clamp(2.45rem, 13vw, 3.55rem) !important;
    line-height: 0.92 !important;
  }

  .modal-accordion {
    padding-block: 0.2rem !important;
  }

  .modal-accordion dl,
  .modal-accordion .technical-list {
    gap: 0 !important;
  }

  .gallery-main {
    aspect-ratio: 1.32 !important;
  }

  .gallery-thumbnails {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 0.55rem !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    padding: 0.05rem 0 0.35rem !important;
    scrollbar-width: none;
  }

  .gallery-thumbnails::-webkit-scrollbar {
    display: none;
  }

  .gallery-thumbnails button {
    flex: 0 0 76px !important;
    width: 76px !important;
  }

  .modal-project-nav {
    min-height: 54px !important;
  }
}

.project-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 2.2rem);
  background: rgba(13, 13, 12, 0.92);
  color: var(--ivory);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.project-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.project-lightbox__top,
.project-lightbox__bottom {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  z-index: 2;
}

.project-lightbox__title {
  font-family: var(--font-serif), Georgia, serif;
  font-size: clamp(1.35rem, 4vw, 2.6rem);
  line-height: 1;
}

.project-lightbox__meta {
  color: rgba(246, 243, 237, 0.68);
  font-family: var(--font-sans), Arial, sans-serif;
  font-size: 0.82rem;
}

.project-lightbox__stage {
  min-height: 0;
  display: grid;
  place-items: center;
}

.project-lightbox__stage img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.project-lightbox button {
  appearance: none;
  min-width: 42px;
  min-height: 42px;
  border: 1px solid rgba(246, 243, 237, 0.28);
  background: rgba(246, 243, 237, 0.04);
  color: var(--ivory);
  cursor: pointer;
  font-family: var(--font-sans), Arial, sans-serif;
  transition: background 180ms ease, border-color 180ms ease;
}

.project-lightbox button:hover,
.project-lightbox button:focus-visible {
  background: rgba(246, 243, 237, 0.14);
  border-color: rgba(246, 243, 237, 0.56);
}

.project-lightbox__controls {
  display: flex;
  gap: 0.55rem;
}

.project-lightbox__counter {
  color: rgba(246, 243, 237, 0.7);
  font-family: var(--font-sans), Arial, sans-serif;
  font-size: 0.82rem;
}

body.roitenberg-menu-guarded {
  overflow: hidden;
  touch-action: none;
}

body.project-lightbox-open {
  overflow: hidden;
}

#proyectos,
#estudio,
#contacto {
  scroll-margin-top: calc(var(--header-height, 74px) + 2px);
}

.mobile-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 72;
  background: rgba(0, 0, 0, 0.66);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.mobile-menu-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 820px) {
  #proyectos,
  #estudio,
  #contacto {
    scroll-margin-top: calc(var(--header-height, 74px) + 2px) !important;
  }

  .mobile-panel {
    display: flex !important;
    flex-direction: column !important;
    z-index: 74 !important;
  }

  .mobile-menu-button {
    z-index: 75 !important;
  }

  .mobile-panel-extra {
    border-top: 1px solid rgba(23, 23, 23, 0.1) !important;
    display: grid !important;
    gap: 1.05rem !important;
    margin-top: auto !important;
    padding-top: 1.28rem !important;
  }

  .mobile-panel-logo {
    display: block !important;
    filter: invert(1) !important;
    height: auto !important;
    opacity: 0.78 !important;
    width: min(182px, 72%) !important;
  }

  .mobile-panel-contact {
    color: rgba(23, 23, 23, 0.64) !important;
    display: grid !important;
    gap: 0.68rem !important;
    font-family: var(--font-sans), Arial, sans-serif !important;
    font-size: 0.78rem !important;
    line-height: 1.42 !important;
  }

  .mobile-panel-contact p {
    margin: 0 !important;
  }

  .mobile-panel-contact span {
    color: rgba(23, 23, 23, 0.92) !important;
    display: block !important;
    font-size: 0.62rem !important;
    font-weight: 760 !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    margin-bottom: 0.24rem !important;
    text-transform: uppercase !important;
  }

  .mobile-panel-extra a {
    border-bottom: 0 !important;
    color: rgba(23, 23, 23, 0.66) !important;
    display: inline-flex !important;
    font-size: 0.78rem !important;
    font-weight: 540 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.35 !important;
    min-height: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
  }

  .mobile-panel-extra a:hover,
  .mobile-panel-extra a:focus-visible {
    color: #171717 !important;
    padding-left: 0 !important;
  }

  .mobile-panel-socials {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.52rem 0.85rem !important;
    padding-top: 0.1rem !important;
  }

  .mobile-panel-socials a {
    color: rgba(23, 23, 23, 0.82) !important;
    font-size: 0.62rem !important;
    font-weight: 780 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
  }
}

@media (max-width: 820px) {
  .project-list {
    background: var(--ivory) !important;
    gap: 0.58rem !important;
    padding: clamp(0.82rem, 3.4vw, 1.12rem) clamp(0.72rem, 3.6vw, 1rem) 0 !important;
  }

  .project-list-item {
    background: rgba(255, 255, 255, 0.42) !important;
    border: 1px solid rgba(23, 23, 23, 0.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .project-list-item button {
    align-items: center !important;
    display: grid !important;
    grid-template-columns: clamp(84px, 27vw, 108px) minmax(0, 1fr) auto !important;
    gap: 0.78rem !important;
    min-height: clamp(90px, 24vw, 108px) !important;
    padding: 0.5rem 0.68rem 0.5rem 0.5rem !important;
    text-align: left !important;
    width: 100% !important;
  }

  .project-list-image {
    aspect-ratio: 1.08 !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  .project-list-main {
    display: grid !important;
    gap: 0.26rem !important;
    min-width: 0 !important;
  }

  .project-list-main > span {
    color: rgba(23, 23, 23, 0.54) !important;
    font-family: var(--font-sans), Arial, sans-serif !important;
    font-size: 0.58rem !important;
    font-weight: 760 !important;
    letter-spacing: 0.13em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  .project-list-main strong {
    color: #171717 !important;
    display: block !important;
    font-family: var(--font-serif), Georgia, serif !important;
    font-size: clamp(1.12rem, 5vw, 1.52rem) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 0.95 !important;
    overflow-wrap: anywhere !important;
  }

  .project-list-meta {
    display: none !important;
  }

  .project-list-action {
    align-items: center !important;
    border-left: 1px solid rgba(23, 23, 23, 0.11) !important;
    color: #171717 !important;
    display: inline-flex !important;
    font-family: var(--font-sans), Arial, sans-serif !important;
    font-size: 0.55rem !important;
    font-weight: 820 !important;
    height: 2.5rem !important;
    justify-content: center !important;
    gap: 0.3rem !important;
    letter-spacing: 0.08em !important;
    line-height: 1.05 !important;
    min-width: 4.75rem !important;
    padding-left: 0.6rem !important;
    text-transform: uppercase !important;
    white-space: normal !important;
  }

  .project-list-action svg {
    display: block !important;
    height: 16px !important;
    width: 16px !important;
  }
}

@media (max-width: 520px) {
  .studio-grid {
    background: #969696 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto minmax(280px, 64vw) !important;
  }

  .studio-grid::before {
    color: var(--ivory) !important;
    font-family: var(--font-sans), Arial, sans-serif !important;
    font-size: clamp(4.85rem, 23vw, 6.4rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.055em !important;
    line-height: 0.74 !important;
    right: 0.72rem !important;
    top: 1.22rem !important;
    z-index: 6 !important;
  }

  .studio-heading {
    grid-row: 1 !important;
    padding: 5.3rem 1rem 0 !important;
  }

  .studio-copy {
    grid-row: 2 !important;
    padding: 1.2rem 1rem 1.35rem !important;
  }

  .studio-stats {
    grid-row: 3 !important;
    padding: 0 1rem 1.55rem !important;
  }

  .studio-grid::after {
    grid-row: 4 !important;
    min-height: clamp(280px, 64vw, 390px) !important;
  }
}

@media (max-width: 820px) {
  .site-header {
    z-index: 1200 !important;
  }

  .mobile-menu-scrim {
    z-index: 1180 !important;
    background: rgba(0, 0, 0, 0.52) !important;
    backdrop-filter: none !important;
  }

  .mobile-panel {
    position: fixed !important;
    z-index: 1202 !important;
    box-shadow: -18px 0 48px rgba(23, 23, 23, 0) !important;
  }

  .mobile-panel.is-open {
    box-shadow: -18px 0 48px rgba(23, 23, 23, 0.18) !important;
  }

  .mobile-menu-button {
    position: relative !important;
    z-index: 1203 !important;
  }
}

@media (max-width: 820px) {
  .contact-section {
    background: var(--ivory) !important;
    overflow: hidden !important;
  }

  .contact-grid {
    background: transparent !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    width: 100% !important;
  }

  .contact-grid::before {
    color: var(--ivory) !important;
    font-family: "DIN-black", var(--font-sans), Arial, sans-serif !important;
    font-size: clamp(4.85rem, 23vw, 6.4rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.055em !important;
    line-height: 0.74 !important;
    right: 0.72rem !important;
    top: 1.22rem !important;
    z-index: 4 !important;
  }

  .contact-section::after {
    background:
      linear-gradient(90deg, rgba(23, 23, 23, 0.08), rgba(23, 23, 23, 0.01) 58%, rgba(246, 243, 237, 0.08)),
      url("/images/hero/hero-citadel-innovacion-20260730.webp") center 48% / cover no-repeat !important;
    display: block !important;
    filter: saturate(0.8) contrast(0.98) !important;
    height: clamp(260px, 66vw, 390px) !important;
    inset: auto !important;
    left: auto !important;
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    z-index: 1 !important;
  }

  .contact-info {
    background: #969696 !important;
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: clamp(255px, 64vw, 340px) !important;
    padding: clamp(5.35rem, 18vw, 6.5rem) 1rem clamp(2.45rem, 9vw, 3.15rem) !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .contact-info > .section-kicker {
    color: var(--ivory) !important;
    font-family: var(--font-serif), Georgia, serif !important;
    font-size: clamp(2.3rem, 11vw, 3.45rem) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 0.95 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
  }

  .contact-info::before {
    color: rgba(246, 243, 237, 0.82) !important;
    display: block !important;
    font-family: var(--font-sans), Arial, sans-serif !important;
    font-size: clamp(0.86rem, 3.8vw, 1rem) !important;
    font-weight: 500 !important;
    letter-spacing: 0.025em !important;
    line-height: 1.65 !important;
    margin: 1.15rem 0 0 !important;
    max-width: 19.5rem !important;
    position: static !important;
    text-transform: none !important;
  }

  .contact-info address,
  .contact-section .social-links {
    display: none !important;
  }

  .contact-form {
    background: var(--ivory) !important;
    border-top: 0 !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: clamp(1.85rem, 7vw, 2.4rem) 1rem clamp(2.35rem, 8vw, 3rem) !important;
    position: relative !important;
    z-index: 2 !important;
  }
}

@media (max-width: 820px) {
  .studio-grid {
    background: var(--portfolio-bg) !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto minmax(280px, 64vw) !important;
  }

  .studio-grid::before {
    color: rgba(150, 150, 150, 0.23) !important;
    font-family: "DIN-black", var(--font-sans), Arial, sans-serif !important;
    font-size: clamp(4.85rem, 23vw, 6.4rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.055em !important;
    line-height: 0.74 !important;
    right: 0.72rem !important;
    top: 2rem !important;
    z-index: 3 !important;
  }

  .studio-heading {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 3.75rem 1rem 0 !important;
    position: relative !important;
  }

  .studio-heading::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 1rem !important;
    top: 3.85rem !important;
    width: 1px !important;
    height: 72px !important;
    background: rgba(28, 27, 25, 0.14) !important;
  }

  .studio-heading::after {
    display: none !important;
  }

  .studio-heading .section-kicker {
    color: #7f7f7f !important;
    font-family: var(--font-serif), Georgia, serif !important;
    font-size: clamp(2.2rem, 11vw, 3.3rem) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 0.96 !important;
    margin: 0 !important;
    padding-left: 1.35rem !important;
    text-transform: none !important;
  }

  .studio-heading .section-kicker::before {
    display: none !important;
  }

  .studio-copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 1.55rem 1rem 2.2rem !important;
    position: relative !important;
  }

  .studio-copy::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 1rem !important;
    right: 1rem !important;
    bottom: 1.25rem !important;
    height: 1px !important;
    background: rgba(28, 27, 25, 0.12) !important;
  }

  .studio-copy p {
    color: #9b9b9b !important;
    font-family: var(--font-sans), Arial, sans-serif !important;
    font-size: 0.98rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    max-width: none !important;
    padding-left: 1.35rem !important;
  }

  .studio-stats {
    grid-column: 1 !important;
    grid-row: 3 !important;
    background: var(--portfolio-bg) !important;
  }

  .studio-stats dt {
    color: var(--portfolio-text) !important;
  }

  .studio-stats dd {
    color: var(--portfolio-muted) !important;
  }

  .studio-stats dd::before {
    opacity: 0.72 !important;
    filter: none !important;
  }

  .studio-grid::after {
    grid-column: 1 !important;
    grid-row: 4 !important;
    min-height: clamp(280px, 64vw, 390px) !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
  }

  .contact-grid {
    background: transparent !important;
    grid-template-rows: auto auto !important;
  }

  .contact-grid::before {
    color: rgba(150, 150, 150, 0.23) !important;
    font-family: "DIN-black", var(--font-sans), Arial, sans-serif !important;
    font-size: clamp(4.85rem, 23vw, 6.4rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.055em !important;
    line-height: 0.74 !important;
    right: 0.72rem !important;
    top: 2rem !important;
    z-index: 3 !important;
  }

  .contact-info {
    background: var(--portfolio-bg) !important;
    min-height: 0 !important;
    padding: 3.75rem 1rem 2.2rem !important;
    position: relative !important;
  }

  .contact-info > .section-kicker {
    color: #7f7f7f !important;
    font-family: var(--font-serif), Georgia, serif !important;
    font-size: clamp(2.2rem, 11vw, 3.3rem) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 0.96 !important;
    margin: 0 !important;
    padding: 0 0 0 1.35rem !important;
    position: relative !important;
    text-transform: none !important;
  }

  .contact-info > .section-kicker::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.1rem !important;
    width: 1px !important;
    height: 72px !important;
    background: rgba(28, 27, 25, 0.14) !important;
  }

  .contact-info::before {
    color: #9b9b9b !important;
    font-family: var(--font-sans), Arial, sans-serif !important;
    font-size: 0.98rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.65 !important;
    margin: 1.55rem 0 0 !important;
    max-width: 22rem !important;
    padding-left: 1.35rem !important;
  }

  .contact-info::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 1rem !important;
    right: 1rem !important;
    bottom: 1.25rem !important;
    height: 1px !important;
    background: rgba(28, 27, 25, 0.12) !important;
  }

  .contact-form {
    background: var(--ivory) !important;
  }
}

@media (max-width: 820px) {
  .studio-stats dt,
  .studio-stats div:first-child dt {
    color: var(--portfolio-text) !important;
    font-size: clamp(1.34rem, 5.85vw, 1.68rem) !important;
    letter-spacing: 0 !important;
    line-height: 0.94 !important;
  }

  .studio-stats div::after {
    background: rgba(28, 27, 25, 0.13) !important;
  }

  .contact-info {
    min-height: clamp(350px, 86vw, 430px) !important;
    padding: 3.35rem 1rem 3.5rem !important;
  }

  .contact-info > .section-kicker {
    padding-left: 1.35rem !important;
  }

  .contact-info > .section-kicker::before {
    height: 92px !important;
    top: 0.08rem !important;
  }

  .contact-info > .section-kicker::after {
    content: "Ante cualquier consulta, no dudes en contactarnos.\A\AProyectamos cada encargo con una mirada precisa sobre contexto, función y viabilidad, acompañando el proceso desde la idea inicial hasta su concreción." !important;
    color: #9b9b9b !important;
    display: block !important;
    font-family: var(--font-sans), Arial, sans-serif !important;
    font-size: 0.98rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.65 !important;
    margin: 1.55rem 0 0 !important;
    max-width: 23rem !important;
    padding: 0 !important;
    text-transform: none !important;
    white-space: pre-line !important;
  }

  .contact-info::before {
    content: none !important;
    display: none !important;
  }

  .contact-info::after {
    bottom: 2rem !important;
  }
}

@media (min-width: 821px) {
  .contact-section {
    background:
      linear-gradient(90deg, #17171709 0 1px, transparent 1px 100%) 6.2vw 0 / 1px 100% no-repeat,
      var(--portfolio-bg) !important;
  }

  .contact-grid {
    --contact-header-height: clamp(430px, 27vw, 515px);
    grid-template-rows: var(--contact-header-height) minmax(500px, auto) !important;
    min-height: calc(var(--contact-header-height) + 500px) !important;
  }

  .contact-section::after {
    height: var(--contact-header-height) !important;
  }

  .contact-grid::before {
    color: rgba(246, 243, 237, 0.82) !important;
    font-family: "DIN-black", var(--font-sans), Arial, sans-serif !important;
    font-size: 100px !important;
    font-weight: 900 !important;
    letter-spacing: -5px !important;
    line-height: 74px !important;
    right: calc(50% - 11px) !important;
    top: clamp(4.25rem, 4.7vw, 5.7rem) !important;
    z-index: 4 !important;
  }

  .contact-info {
    background: var(--portfolio-bg) !important;
    grid-template-rows: var(--contact-header-height) minmax(0, 1fr) !important;
    isolation: isolate;
  }

  .contact-info > .section-kicker {
    align-self: start !important;
    color: #7f7f7f !important;
    font-family: var(--font-serif), Georgia, serif !important;
    font-size: clamp(3.05rem, 3.95vw, 5.05rem) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 0.96 !important;
    margin: 0 !important;
    max-width: 34rem !important;
    padding: clamp(5.2rem, 6.4vw, 7rem) clamp(4.4rem, 8vw, 8.9rem) 0 clamp(5.95rem, 9.4vw, 10.6rem) !important;
    position: relative !important;
    text-transform: none !important;
  }

  .contact-info > .section-kicker::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: clamp(4.4rem, 8vw, 8.9rem) !important;
    top: clamp(5.25rem, 6.45vw, 7.05rem) !important;
    width: 1px !important;
    height: 96px !important;
    background: rgba(28, 27, 25, 0.14) !important;
  }

  .contact-info > .section-kicker::after {
    content: "Ante cualquier consulta, no dudes en contactarnos.\A\AProyectamos cada encargo con una mirada precisa sobre contexto, función y viabilidad, acompañando el proceso desde la idea inicial hasta su concreción." !important;
    color: #9b9b9b !important;
    display: block !important;
    font-family: var(--font-sans), Arial, sans-serif !important;
    font-size: clamp(0.94rem, 0.96vw, 1.08rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.72 !important;
    margin: clamp(1.45rem, 1.7vw, 1.9rem) 0 0 !important;
    max-width: clamp(28rem, 35vw, 44rem) !important;
    padding-left: 1.65rem !important;
    text-transform: none !important;
    white-space: pre-line !important;
  }

  .contact-info::before {
    content: none !important;
    display: none !important;
  }

  .contact-info::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: clamp(4.4rem, 8vw, 8.9rem) !important;
    right: clamp(4.4rem, 7vw, 8rem) !important;
    top: calc(var(--contact-header-height) - clamp(4.2rem, 4.8vw, 5.6rem)) !important;
    height: 1px !important;
    background: rgba(28, 27, 25, 0.12) !important;
    z-index: 2 !important;
  }

  .contact-info address {
    background: var(--portfolio-bg) !important;
    border-top: 1px solid rgba(28, 27, 25, 0.12) !important;
    padding-top: clamp(4.6rem, 5.7vw, 6rem) !important;
  }

  .contact-form {
    background: var(--ivory) !important;
  }
}

/* Final desktop contact override: generated at EOF. */
@media (min-width: 821px) {
  .contact-section {
    background:
      linear-gradient(90deg, #17171709 0 1px, transparent 1px 100%) 6.2vw 0 / 1px 100% no-repeat,
      var(--portfolio-bg) !important;
  }

  .contact-section::after {
    display: none !important;
  }

  .contact-grid {
    --contact-header-height: clamp(430px, 27vw, 515px);
    grid-template-rows: var(--contact-header-height) minmax(500px, auto) !important;
    min-height: calc(var(--contact-header-height) + 500px) !important;
  }

  .contact-visual {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 100% !important;
    min-height: var(--contact-header-height) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .contact-visual::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(23, 23, 23, 0.12), rgba(23, 23, 23, 0.02) 62%, rgba(246, 243, 237, 0.08)) !important;
    pointer-events: none !important;
  }

  .contact-visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 48% !important;
    filter: saturate(0.78) contrast(0.97) !important;
  }

  .contact-grid::before {
    color: rgba(246, 243, 237, 0.82) !important;
    font-family: "DIN-black", var(--font-sans), Arial, sans-serif !important;
    font-size: 100px !important;
    font-weight: 900 !important;
    letter-spacing: -5px !important;
    line-height: 74px !important;
    right: calc(50% - 11px) !important;
    top: clamp(4.25rem, 4.7vw, 5.7rem) !important;
    z-index: 4 !important;
  }

  .contact-info {
    background: var(--portfolio-bg) !important;
    grid-template-rows: var(--contact-header-height) minmax(0, 1fr) !important;
    isolation: isolate;
  }

  .contact-info > .section-kicker {
    align-self: start !important;
    color: #7f7f7f !important;
    font-family: var(--font-serif), Georgia, serif !important;
    font-size: clamp(2.85rem, 3.25vw, 4.35rem) !important;
    font-weight: 500 !important;
    height: auto !important;
    min-height: 0 !important;
    letter-spacing: 0 !important;
    line-height: 0.98 !important;
    margin: 0 !important;
    max-width: clamp(30rem, 37vw, 45rem) !important;
    padding: clamp(5.2rem, 6.4vw, 7rem) clamp(4.4rem, 8vw, 8.9rem) 0 clamp(5.95rem, 9.4vw, 10.6rem) !important;
    position: relative !important;
    text-transform: none !important;
  }

  .contact-info > .section-kicker::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: clamp(4.4rem, 8vw, 8.9rem) !important;
    top: clamp(5.25rem, 6.45vw, 7.05rem) !important;
    width: 1px !important;
    height: 96px !important;
    background: rgba(28, 27, 25, 0.14) !important;
  }

  .contact-info > .section-kicker::after {
    content: none !important;
    display: none !important;
  }

  .contact-intro-copy {
    color: #9b9b9b !important;
    display: block !important;
    font-family: var(--font-sans), Arial, sans-serif !important;
    font-size: clamp(0.9rem, 0.92vw, 1.02rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.62 !important;
    margin: clamp(1.25rem, 1.45vw, 1.65rem) 0 0 !important;
    max-width: clamp(25rem, 33vw, 39rem) !important;
    padding-left: 1.65rem !important;
    text-transform: none !important;
  }

  .contact-intro-copy span {
    display: block !important;
  }

  .contact-intro-copy span + span {
    margin-top: 0.85rem !important;
  }

  .contact-info::before {
    content: none !important;
    display: none !important;
  }

  .contact-info::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: clamp(4.4rem, 8vw, 8.9rem) !important;
    right: clamp(4.4rem, 7vw, 8rem) !important;
    top: calc(var(--contact-header-height) - clamp(4.2rem, 4.8vw, 5.6rem)) !important;
    height: 1px !important;
    background: rgba(28, 27, 25, 0.12) !important;
    z-index: 2 !important;
  }

  .contact-info address {
    background: var(--portfolio-bg) !important;
    border-top: 1px solid rgba(28, 27, 25, 0.12) !important;
    padding-top: clamp(4.6rem, 5.7vw, 6rem) !important;
  }

  .contact-form {
    background: var(--ivory) !important;
  }
}
/* Final contact text rhythm refinement. */
@media (min-width: 821px) {
  .contact-info > .section-kicker {
    box-sizing: border-box !important;
    max-width: none !important;
    width: 100% !important;
    padding: clamp(11.5rem, 12vw, 13rem) clamp(3rem, 5vw, 5rem) 0 clamp(5.95rem, 9.4vw, 10.6rem) !important;
  }

  .contact-info > .section-kicker::before {
    top: clamp(11.55rem, 12.05vw, 13.05rem) !important;
  }

  .contact-intro-copy {
    max-width: min(42rem, 100%) !important;
  }
}
/* Final mobile drawer identity and contact block. */
@media (max-width: 820px) {
  .mobile-panel {
    width: min(82vw, 342px) !important;
    max-width: 342px !important;
    background: var(--portfolio-bg) !important;
    padding: 2.15rem 1.35rem 1.35rem !important;
  }

  .mobile-panel-brand {
    display: grid !important;
    gap: 0.72rem !important;
    margin: 0 0 2.35rem !important;
    padding-right: 3.6rem !important;
  }

  .mobile-panel-brand .mobile-panel-logo {
    display: block !important;
    filter: none !important;
    height: auto !important;
    max-width: 178px !important;
    opacity: 0.88 !important;
    width: 70% !important;
  }

  .mobile-panel-brand p {
    color: rgba(23, 23, 23, 0.52) !important;
    font-family: var(--font-sans), Arial, sans-serif !important;
    font-size: 0.76rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    max-width: 13.5rem !important;
  }

  .mobile-panel nav {
    border-top: 1px solid rgba(23, 23, 23, 0.12) !important;
  }

  .mobile-panel nav a,
  .mobile-panel a {
    font-size: clamp(1.38rem, 7vw, 1.9rem) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    min-height: 58px !important;
    text-transform: none !important;
  }

  .mobile-panel-extra {
    border-top: 1px solid rgba(23, 23, 23, 0.12) !important;
    display: grid !important;
    gap: 1.1rem !important;
    margin-top: auto !important;
    padding-top: 1.25rem !important;
  }

  .mobile-panel-contact {
    color: rgba(23, 23, 23, 0.62) !important;
    display: grid !important;
    gap: 0.68rem !important;
    font-family: var(--font-sans), Arial, sans-serif !important;
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
  }

  .mobile-panel-contact p {
    margin: 0 !important;
  }

  .mobile-panel-contact span {
    color: rgba(23, 23, 23, 0.92) !important;
    display: block !important;
    font-size: 0.62rem !important;
    font-weight: 760 !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    margin-bottom: 0.34rem !important;
    text-transform: uppercase !important;
  }

  .mobile-panel-extra a {
    border-bottom: 0 !important;
    color: rgba(23, 23, 23, 0.66) !important;
    display: inline-flex !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
  }

  .mobile-panel-extra a:hover,
  .mobile-panel-extra a:focus-visible {
    color: #171717 !important;
    padding-left: 0 !important;
  }

  .mobile-panel-socials {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.52rem 0.85rem !important;
    padding-top: 0.1rem !important;
  }

  .mobile-panel-socials a {
    color: rgba(23, 23, 23, 0.82) !important;
    font-size: 0.62rem !important;
    font-weight: 780 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
  }
}
/* Mobile drawer logo contrast refinement. */
@media (max-width: 820px) {
  .mobile-panel-brand .mobile-panel-logo {
    filter: invert(1) !important;
    opacity: 0.9 !important;
  }
}

/* Contact social replacement: WhatsApp uses the same quiet data-row language. */
.contact-info address p.contact-phone-row a::before,
.contact-info address p.contact-whatsapp-row a::before,
.contact-info address p.contact-email-row a::before {
  color: var(--contact-text);
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  margin-bottom: 0.48rem;
  text-transform: uppercase;
}

.contact-info address p.contact-phone-row a::before {
  content: "Teléfono" !important;
}

.contact-info address p.contact-whatsapp-row a::before {
  content: "WhatsApp" !important;
}

.contact-info address p.contact-email-row a::before {
  content: "Mail" !important;
}

.contact-info address p.contact-whatsapp-row svg {
  color: rgba(28, 27, 25, 0.62) !important;
}

/* Contact detail micro-interactions. */
.contact-info address p {
  transition: background 220ms ease, padding-left 220ms ease !important;
}

.contact-info address svg {
  transition:
    background 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease !important;
}

.contact-info address span,
.contact-info address a {
  transition: color 220ms ease, transform 220ms ease !important;
}

.contact-info address p:hover svg,
.contact-info address p:focus-within svg {
  background: rgba(23, 23, 23, 0.055) !important;
  border-color: rgba(23, 23, 23, 0.38) !important;
  box-shadow: 0 12px 28px rgba(23, 23, 23, 0.08) !important;
  color: rgba(23, 23, 23, 0.9) !important;
  transform: translateY(-2px) scale(1.04) !important;
}

.contact-info address p:hover span,
.contact-info address p:hover a,
.contact-info address p:focus-within span,
.contact-info address p:focus-within a {
  color: rgba(23, 23, 23, 0.9) !important;
}

.contact-info address a:hover,
.contact-info address a:focus-visible {
  text-decoration: none !important;
}

@media (max-width: 820px) {
  .contact-info address p:active svg {
    background: rgba(23, 23, 23, 0.07) !important;
    border-color: rgba(23, 23, 23, 0.42) !important;
    color: rgba(23, 23, 23, 0.92) !important;
    transform: scale(1.03) !important;
  }
}

/* Mobile modal close affordance: always visible and thumb-friendly. */
@media (max-width: 820px) {
  .modal-layer {
    inset: 0 !important;
    z-index: 10000 !important;
  }

  body:has(.modal-layer) .site-header {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-100%) !important;
  }

  .modal-layer .modal-close {
    align-items: center !important;
    background: rgba(23, 23, 23, 0.94) !important;
    border: 1px solid rgba(251, 249, 244, 0.32) !important;
    border-radius: 999px !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28) !important;
    color: var(--ivory) !important;
    display: inline-flex !important;
    gap: 0.52rem !important;
    height: 46px !important;
    justify-content: center !important;
    min-width: 104px !important;
    padding: 0 0.92rem !important;
    position: fixed !important;
    bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    right: max(0.85rem, env(safe-area-inset-right)) !important;
    top: auto !important;
    width: auto !important;
    z-index: 10040 !important;
  }

  .modal-layer .modal-close::before {
    content: "Cerrar";
    font-family: var(--font-sans), Arial, sans-serif;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
  }

  .modal-layer .modal-close svg {
    height: 18px !important;
    width: 18px !important;
  }

  .modal-layer .modal-close:active {
    transform: scale(0.98) !important;
  }

  .modal-header {
    padding-top: 0 !important;
  }

  .modal-content {
    padding-bottom: 4.75rem !important;
  }
}

@media (max-width: 420px) {
  .modal-layer .modal-close {
    height: 44px !important;
    min-width: 96px !important;
    padding-inline: 0.78rem !important;
  }
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url("./assets/fonts/neue-montreal/NeueMontreal-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url("./assets/fonts/neue-montreal/NeueMontreal-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url("./assets/fonts/neue-montreal/NeueMontreal-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url("./assets/fonts/neue-montreal/NeueMontreal-Bold.otf") format("opentype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url("./assets/fonts/neue-montreal/NeueMontreal-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url("./assets/fonts/neue-montreal/NeueMontreal-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url("./assets/fonts/neue-montreal/NeueMontreal-BoldItalic.otf") format("opentype");
  font-weight: 700 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("./assets/fonts/helvetica-now/HelveticaNowDisplayLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("./assets/fonts/helvetica-now/HelveticaNowDisplay.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("./assets/fonts/helvetica-now/HelveticaNowDisplayMedium.otf") format("opentype");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("./assets/fonts/helvetica-now/HelveticaNowDisplayBold.otf") format("opentype");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("./assets/fonts/helvetica-now/HelveticaNowDisplayBlack.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display Condensed";
  src: url("./assets/fonts/helvetica-now/HelveticaNowDisplay-Cn.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display Condensed";
  src: url("./assets/fonts/helvetica-now/HelveticaNowDisplay-CnMed.otf") format("opentype");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display Condensed";
  src: url("./assets/fonts/helvetica-now/HelveticaNowDisplay-CnBd.otf") format("opentype");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display Condensed";
  src: url("./assets/fonts/helvetica-now/HelveticaNowDisplay-CnBlk.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Typography rebrand: embedded Helvetica Now with PP Neue Montreal fallback. */
:root,
.cormorant_garamond_8c3b9d52-module__VjA0Pa__variable,
.manrope_2d7cbcb9-module__6dMWna__variable {
  --roitenberg-grotesk: "Helvetica Now Display", "PP Neue Montreal", "Neue Haas Grotesk Text Pro", "Neue Haas Grotesk Display Pro", "Helvetica Neue", "Suisse Int'l", "Suisse Intl", Arial, sans-serif;
  --roitenberg-display: "Helvetica Now Display", "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif;
  --font-sans: var(--roitenberg-grotesk) !important;
  --font-serif: var(--roitenberg-grotesk) !important;
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--roitenberg-grotesk) !important;
}

.hero-content h1,
.projects-title-block h2,
.studio-grid h2,
.studio-stats dt,
.project-card strong,
.project-list-main strong,
.modal-header h2,
.modal-project-nav button span,
.not-found-grid h1 {
  font-family: var(--roitenberg-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.hero-content h1,
.projects-title-block h2,
.studio-grid h2,
.not-found-grid h1 {
  line-height: 0.96 !important;
}

.modal-header h2 {
  line-height: 0.94 !important;
}

.project-card strong {
  line-height: 1.02 !important;
}

.section-kicker,
.project-category,
.editorial-link,
.project-filters button,
.form-submit,
.desktop-nav a,
.mobile-panel a,
.modal-accordion-trigger span,
.technical-data dd span,
.modal-project-nav button small,
.contact-info address p.contact-phone-row a::before,
.contact-info address p.contact-whatsapp-row a::before,
.contact-info address p.contact-email-row a::before {
  font-family: var(--roitenberg-grotesk) !important;
}

/* Contact section rebrand: card-based form inspired by the supplied reference. */
.contact-section {
  --contact-card: rgba(255, 255, 255, 0.72);
  --contact-ink: #101421;
  --contact-warm: #a77a43;
  --contact-border: rgba(16, 20, 33, 0.13);
  --contact-shadow: 0 22px 70px rgba(23, 23, 23, 0.08);
  background:
    radial-gradient(circle at 2.8rem 2.4rem, rgba(167, 122, 67, 0.34) 0 1.2px, transparent 1.3px) 0 0 / 22px 22px no-repeat,
    radial-gradient(circle at calc(100% - 2.8rem) 10rem, rgba(167, 122, 67, 0.3) 0 1.2px, transparent 1.3px) 100% 0 / 22px 22px no-repeat,
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(246, 243, 237, 0.82)),
    var(--ivory) !important;
  padding: clamp(4.6rem, 7vw, 7.2rem) 0 clamp(4.8rem, 7vw, 7.6rem) !important;
}

.contact-section::after {
  display: none !important;
}

.contact-grid {
  display: grid !important;
  grid-template-columns: minmax(17rem, 24rem) minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-items: start !important;
  gap: clamp(1.1rem, 2.1vw, 2rem) clamp(1.4rem, 2.4vw, 2.4rem) !important;
  width: min(calc(100% - clamp(2rem, 8vw, 9rem)), 94rem) !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

.contact-grid::before,
.contact-grid::after {
  display: none !important;
}

.contact-redesign-intro {
  grid-column: 1 / -1 !important;
  max-width: 58rem !important;
  margin: 0 auto clamp(1.3rem, 2.2vw, 2.4rem) !important;
  text-align: center !important;
}

.contact-redesign-eyebrow {
  align-items: center !important;
  color: var(--contact-warm) !important;
  display: flex !important;
  gap: 1.45rem !important;
  justify-content: center !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: clamp(0.72rem, 0.84vw, 0.88rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  margin: 0 0 clamp(0.7rem, 1vw, 0.9rem) !important;
  text-transform: none !important;
}

.contact-redesign-eyebrow::before,
.contact-redesign-eyebrow::after {
  content: "" !important;
  width: clamp(2.2rem, 4vw, 4.2rem) !important;
  height: 1px !important;
  background: rgba(167, 122, 67, 0.55) !important;
}

.contact-redesign-intro h2 {
  color: var(--contact-ink) !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: clamp(3.3rem, 6.4vw, 6.7rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.86 !important;
  margin: 0 !important;
}

.contact-redesign-copy {
  color: rgba(16, 20, 33, 0.66) !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: clamp(1rem, 1.25vw, 1.22rem) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  margin: clamp(1rem, 1.5vw, 1.35rem) auto 0 !important;
  max-width: 50rem !important;
}

.contact-info {
  grid-column: 1 !important;
  grid-row: 2 !important;
  background: var(--contact-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 16px !important;
  box-shadow: var(--contact-shadow) !important;
  display: block !important;
  margin: 0 !important;
  min-height: 0 !important;
  padding: clamp(1.25rem, 1.9vw, 1.8rem) clamp(1.25rem, 1.9vw, 1.8rem) !important;
}

.contact-info > .section-kicker,
.contact-info > .section-kicker::before,
.contact-info > .section-kicker::after,
.contact-info::before,
.contact-info::after {
  display: none !important;
  content: none !important;
}

.contact-info address {
  border: 0 !important;
  display: grid !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.contact-info address p {
  align-items: center !important;
  border-bottom: 1px solid rgba(16, 20, 33, 0.1) !important;
  display: grid !important;
  gap: 1rem !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  margin: 0 !important;
  padding: 1.05rem 0 !important;
}

.contact-info address p:first-child {
  padding-top: 0 !important;
}

.contact-info address p:last-child {
  border-bottom: 0 !important;
}

.contact-info address svg {
  background: rgba(167, 122, 67, 0.08) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--contact-warm) !important;
  height: 42px !important;
  padding: 10px !important;
  width: 42px !important;
}

.contact-info address span,
.contact-info address a {
  border-left: 0 !important;
  color: rgba(16, 20, 33, 0.82) !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  padding-left: 0 !important;
}

.contact-info address p.contact-address-row span::before,
.contact-info address p.contact-phone-row a::before,
.contact-info address p.contact-whatsapp-row a::before,
.contact-info address p.contact-email-row a::before {
  color: var(--contact-ink) !important;
  display: block !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  margin-bottom: 0.28rem !important;
  text-transform: none !important;
}

.contact-info address p.contact-address-row span::before {
  content: "Dirección" !important;
}

.contact-info address p.contact-phone-row a::before {
  content: "Teléfono" !important;
}

.contact-info address p.contact-whatsapp-row a::before {
  content: "WhatsApp" !important;
}

.contact-info address p.contact-email-row a::before {
  content: "Correo" !important;
}

.contact-section .social-links {
  border-top: 1px solid rgba(16, 20, 33, 0.1) !important;
  display: flex !important;
  gap: 0.85rem !important;
  justify-content: center !important;
  margin: 1.1rem 0 0 !important;
  padding: 1.1rem 0 0 !important;
}

.contact-section .social-links a {
  align-items: center !important;
  background: rgba(255, 255, 255, 0.46) !important;
  border: 1px solid rgba(16, 20, 33, 0.12) !important;
  border-radius: 999px !important;
  color: var(--contact-ink) !important;
  display: inline-flex !important;
  height: 42px !important;
  justify-content: center !important;
  min-width: 42px !important;
  padding: 0 0.72rem !important;
  text-decoration: none !important;
}

.contact-section .social-links a.whatsapp {
  font-size: 0 !important;
}

.contact-section .social-links a.whatsapp::before {
  content: "W" !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

.contact-visual {
  grid-column: 1 !important;
  grid-row: 3 !important;
  background:
    radial-gradient(circle at 56% 48%, var(--contact-ink) 0 9px, transparent 10px),
    radial-gradient(circle at 56% 48%, rgba(16, 20, 33, 0.15) 0 28px, transparent 29px),
    linear-gradient(30deg, transparent 0 46%, rgba(167, 122, 67, 0.18) 46.3% 47%, transparent 47.3% 100%),
    linear-gradient(120deg, transparent 0 38%, rgba(16, 20, 33, 0.08) 38.2% 39%, transparent 39.2% 100%),
    linear-gradient(0deg, rgba(16, 20, 33, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 20, 33, 0.055) 1px, transparent 1px),
    rgba(255, 255, 255, 0.52) !important;
  background-size: auto, auto, auto, auto, 42px 42px, 42px 42px, auto !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 46px rgba(23, 23, 23, 0.06) !important;
  display: block !important;
  height: clamp(132px, 12vw, 170px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

.contact-visual::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(48% + 7px) !important;
  width: 16px !important;
  height: 16px !important;
  background: var(--contact-ink) !important;
  border-radius: 70% 70% 70% 0 !important;
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.contact-visual img {
  display: none !important;
}

.contact-form {
  grid-column: 2 !important;
  grid-row: 2 / span 2 !important;
  background: var(--contact-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 16px !important;
  box-shadow: var(--contact-shadow) !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.25rem 1.4rem !important;
  margin: 0 !important;
  padding: clamp(1.7rem, 2.5vw, 2.55rem) !important;
}

.contact-form > .section-kicker {
  color: var(--contact-ink) !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: clamp(1.12rem, 1.35vw, 1.35rem) !important;
  font-weight: 600 !important;
  grid-column: 1 / -1 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  margin: 0 0 0.1rem !important;
  padding: 0 !important;
  text-transform: none !important;
}

.contact-form > .section-kicker::before,
.contact-form > .section-kicker::after {
  display: none !important;
  content: none !important;
}

.contact-form .form-row {
  display: contents !important;
}

.contact-form .field {
  margin: 0 !important;
  position: relative !important;
}

.contact-form .field label,
.contact-work-field legend {
  color: var(--contact-ink) !important;
  display: block !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  margin: 0 0 0.62rem !important;
  padding: 0 !important;
  position: static !important;
  text-transform: none !important;
}

.contact-form input,
.contact-form select {
  background: rgba(255, 255, 255, 0.64) !important;
  border: 1px solid var(--contact-border) !important;
  border-radius: 9px !important;
  color: var(--contact-ink) !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 400 !important;
  min-height: 56px !important;
  padding: 0 1rem !important;
}

.contact-form input::placeholder {
  color: rgba(16, 20, 33, 0.42) !important;
}

.contact-form input:hover,
.contact-form input:focus {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(167, 122, 67, 0.5) !important;
  box-shadow: 0 0 0 4px rgba(167, 122, 67, 0.08) !important;
}

.contact-hidden-field,
.contact-form .contact-hidden-field {
  display: none !important;
}

.contact-work-field {
  border: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.contact-work-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.55rem !important;
}

.contact-work-option {
  align-items: center !important;
  background: rgba(255, 255, 255, 0.64) !important;
  border: 1px solid var(--contact-border) !important;
  border-radius: 9px !important;
  color: rgba(16, 20, 33, 0.76) !important;
  cursor: pointer !important;
  display: flex !important;
  gap: 0.52rem !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  min-height: 56px !important;
  padding: 0 0.72rem !important;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
}

.contact-work-option input {
  appearance: none !important;
  height: 1px !important;
  min-height: 1px !important;
  opacity: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.contact-work-check {
  align-items: center !important;
  border: 1px solid rgba(16, 20, 33, 0.24) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  flex: 0 0 18px !important;
  height: 18px !important;
  justify-content: center !important;
  width: 18px !important;
}

.contact-work-check::after {
  content: "" !important;
  background: var(--contact-warm) !important;
  border-radius: 999px !important;
  height: 8px !important;
  opacity: 0 !important;
  transform: scale(0.55) !important;
  transition: opacity 180ms ease, transform 180ms ease !important;
  width: 8px !important;
}

.contact-work-option:has(input:checked) {
  background: rgba(167, 122, 67, 0.09) !important;
  border-color: rgba(167, 122, 67, 0.54) !important;
  color: var(--contact-ink) !important;
  box-shadow: 0 0 0 4px rgba(167, 122, 67, 0.07) !important;
}

.contact-work-option:has(input:checked) .contact-work-check {
  border-color: rgba(167, 122, 67, 0.78) !important;
}

.contact-work-option:has(input:checked) .contact-work-check::after {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.contact-form .form-honeypot {
  display: none !important;
}

.contact-form .form-submit {
  align-items: center !important;
  background: var(--contact-ink) !important;
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: 0 16px 32px rgba(16, 20, 33, 0.16) !important;
  color: #fff !important;
  display: inline-flex !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 650 !important;
  grid-column: 1 / -1 !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  margin: 0.35rem 0 0 !important;
  min-height: 58px !important;
  padding: 0 1.4rem !important;
  text-transform: none !important;
  width: 100% !important;
}

.contact-form .form-submit::before {
  content: "" !important;
  width: 19px !important;
  height: 19px !important;
  border: 2px solid var(--contact-warm) !important;
  border-left-color: transparent !important;
  border-bottom-color: transparent !important;
  transform: rotate(45deg) skew(-9deg, -9deg) !important;
}

.contact-form .form-submit:hover,
.contact-form .form-submit:focus-visible {
  background: #050918 !important;
  box-shadow: 0 18px 38px rgba(16, 20, 33, 0.22) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

.contact-form .form-status {
  color: rgba(16, 20, 33, 0.62) !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: 0.9rem !important;
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  min-height: 1.25rem !important;
  text-align: center !important;
}

@media (max-width: 980px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    width: min(calc(100% - 2rem), 44rem) !important;
  }

  .contact-redesign-intro,
  .contact-info,
  .contact-visual,
  .contact-form {
    grid-column: 1 !important;
  }

  .contact-info {
    grid-row: auto !important;
  }

  .contact-visual {
    grid-row: auto !important;
  }

  .contact-form {
    grid-row: auto !important;
    grid-template-columns: 1fr !important;
  }

  .contact-work-options {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 560px) {
  .contact-section {
    padding: 4rem 0 4.4rem !important;
  }

  .contact-redesign-eyebrow {
    gap: 0.9rem !important;
    font-size: 0.68rem !important;
  }

  .contact-redesign-intro h2 {
    font-size: clamp(3.25rem, 16vw, 4.7rem) !important;
  }

  .contact-redesign-copy {
    font-size: 0.98rem !important;
  }

  .contact-info,
  .contact-form {
    border-radius: 14px !important;
    padding: 1.15rem !important;
  }

  .contact-info address p {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

  .contact-info address svg {
    height: 38px !important;
    width: 38px !important;
  }

  .contact-work-options {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-07-23 client review pass: cleaner white system, taller blocks, separated stats. */
:root {
  --ivory: #ffffff;
  --portfolio-bg: #ffffff;
  --portfolio-text: #171717;
  --portfolio-muted: #777777;
  --section-gray: #969696;
  --section-number-color: rgba(255, 255, 255, 0.92);
}

html,
body,
main,
.projects-section,
.studio-section,
.contact-section {
  background: #ffffff !important;
}

.hero-content::before,
.scroll-mark,
.hero-slider-progress,
.projects-title-block::before,
.projects-title-block::after,
.studio-heading::before,
.studio-heading::after,
.studio-copy::after,
.contact-info > .section-kicker::before,
.contact-info > .section-kicker::after,
.contact-info::before,
.contact-info::after,
.contact-redesign-eyebrow::before,
.contact-redesign-eyebrow::after {
  display: none !important;
  content: none !important;
}

.hero-content h1,
.projects-title-block h2,
.studio-heading .section-kicker,
.contact-redesign-intro h2,
.contact-form > .section-kicker,
.not-found-grid h1 {
  text-transform: uppercase !important;
}

.hero-content h1 {
  letter-spacing: -0.018em !important;
  max-width: min(920px, 72vw) !important;
}

.hero-content p {
  max-width: min(680px, 58vw) !important;
  font-size: clamp(1rem, 1.14vw, 1.25rem) !important;
  line-height: 1.65 !important;
}

.projects-heading {
  --portfolio-header-height: clamp(560px, 34vw, 700px) !important;
  background: linear-gradient(90deg, var(--section-gray) 0 calc(50% - 4px), #ffffff calc(50% - 4px) 100%) !important;
  min-height: var(--portfolio-header-height) !important;
}

.projects-heading::before,
.studio-grid::before,
.contact-grid::before {
  color: var(--section-number-color) !important;
  font-family: var(--roitenberg-display) !important;
  font-size: clamp(6.25rem, 6.35vw, 7.35rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  line-height: 1 !important;
  right: calc(50% + 24px) !important;
  top: clamp(4.1rem, 5vw, 5.6rem) !important;
  z-index: 4 !important;
}

.projects-title-block {
  padding: clamp(7rem, 8.1vw, 9.4rem) clamp(5rem, 8vw, 9rem) !important;
}

.projects-title-block h2 {
  color: #707070 !important;
  font-size: clamp(2.6rem, 3.4vw, 4.5rem) !important;
  line-height: 0.92 !important;
}

.projects-title-block p:not(.section-kicker) {
  max-width: min(760px, 42vw) !important;
  margin-top: clamp(4.5rem, 5.4vw, 6.4rem) !important;
  font-size: clamp(1.2rem, 1.38vw, 1.58rem) !important;
  line-height: 1.75 !important;
}

.projects-filter-area {
  top: clamp(15.2rem, 17.2vw, 20rem) !important;
}

.projects-controls {
  top: clamp(27.2rem, 30.2vw, 34rem) !important;
}

.studio-grid {
  min-height: clamp(560px, 34vw, 700px) !important;
  background: linear-gradient(90deg, var(--section-gray) 0 50%, transparent 50% 100%) !important;
}

.studio-heading {
  padding: clamp(7rem, 8.1vw, 9.4rem) clamp(4rem, 6vw, 7rem) 0 clamp(5.7rem, 8vw, 8.2rem) !important;
}

.studio-heading .section-kicker {
  color: #ffffff !important;
  font-size: clamp(2.6rem, 3.4vw, 4.5rem) !important;
  letter-spacing: -0.03em !important;
  line-height: 0.94 !important;
}

.studio-copy {
  padding: clamp(3.8rem, 5vw, 5.8rem) clamp(5rem, 7vw, 8rem) clamp(4.6rem, 5.6vw, 6.4rem) clamp(5.7rem, 8vw, 8.2rem) !important;
}

.studio-copy p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: clamp(1.02rem, 1.18vw, 1.32rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.78 !important;
  max-width: min(760px, 40vw) !important;
}

.studio-section .studio-stats {
  display: none !important;
}

.studio-stats-separator {
  background: #ffffff !important;
  padding: clamp(4.4rem, 6.4vw, 6.8rem) clamp(1rem, 5vw, 5.8rem) !important;
  position: relative;
  z-index: 2;
}

.studio-stats-separator-inner {
  margin: 0 auto;
  max-width: 1180px;
  position: relative;
}

.studio-stats-separator-inner::before,
.studio-stats-separator-inner::after {
  background: rgba(23, 23, 23, 0.1) !important;
  content: "" !important;
  display: block !important;
  position: absolute !important;
}

.studio-stats-separator-inner::before {
  height: 1px !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
}

.studio-stats-separator-inner::after {
  bottom: 0 !important;
  height: 1px !important;
  left: 0 !important;
  right: 0 !important;
}

.studio-stats-separator .studio-stats {
  display: grid !important;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.82fr) minmax(0, 0.82fr) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.studio-stats-separator .studio-stats div {
  align-items: start !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-right: 1px solid rgba(23, 23, 23, 0.11) !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  justify-items: start !important;
  min-height: clamp(150px, 12vw, 188px) !important;
  overflow: visible !important;
  padding: clamp(2.1rem, 2.9vw, 3.1rem) clamp(1.4rem, 3vw, 3.8rem) !important;
  position: relative;
  row-gap: clamp(1rem, 1.25vw, 1.35rem) !important;
}

.studio-stats-separator .studio-stats div:last-child {
  border-right: 0 !important;
}

.studio-stats-separator .studio-stats div::before {
  background: rgba(23, 23, 23, 0.18) !important;
  content: "" !important;
  display: block !important;
  height: 1px !important;
  left: clamp(1.4rem, 3vw, 3.8rem) !important;
  position: absolute !important;
  top: clamp(1.3rem, 1.75vw, 1.9rem) !important;
  transform: none !important;
  width: clamp(2.4rem, 3.2vw, 4.1rem) !important;
}

.studio-stats-separator .studio-stats div::after {
  display: none !important;
}

.studio-stats-separator .studio-stats dt,
.studio-stats-separator .studio-stats div:first-child dt {
  align-items: center !important;
  color: #171717 !important;
  display: flex !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: clamp(3rem, 4.35vw, 5.05rem) !important;
  font-weight: 500 !important;
  justify-content: flex-start !important;
  letter-spacing: -0.025em !important;
  line-height: 1.04 !important;
  margin: 0 !important;
  padding: clamp(0.9rem, 1vw, 1.1rem) 0 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.studio-stats-separator .studio-stats div:first-child dt {
  font-size: clamp(2.85rem, 4.05vw, 4.68rem) !important;
  letter-spacing: -0.03em !important;
}

.studio-stats-separator .studio-stats div:nth-child(2) dt,
.studio-stats-separator .studio-stats div:nth-child(3) dt {
  font-size: clamp(3.35rem, 4.75vw, 5.4rem) !important;
  letter-spacing: -0.02em !important;
}

.studio-stats-separator .studio-stats dd {
  color: rgba(23, 23, 23, 0.62) !important;
  display: block !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: clamp(0.86rem, 0.92vw, 1rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  text-transform: none !important;
}

.studio-stats-separator .studio-stats dd::before {
  display: none !important;
}

.contact-section {
  background: #ffffff !important;
  padding-top: clamp(4.8rem, 7vw, 7.4rem) !important;
}

.contact-redesign-intro {
  margin-bottom: clamp(2rem, 3vw, 3.2rem) !important;
}

.contact-grid {
  position: relative !important;
}

.contact-grid::before {
  content: "03" !important;
  display: block !important;
  position: absolute !important;
  inset: auto auto auto auto !important;
  left: clamp(0.2rem, 1.2vw, 1.1rem) !important;
  top: clamp(-2.35rem, -2.2vw, -1.1rem) !important;
  color: rgba(150, 150, 150, 0.18) !important;
  pointer-events: none !important;
}

.contact-redesign-intro h2 {
  color: #171717 !important;
  font-size: clamp(3.8rem, 6.7vw, 7.2rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.88 !important;
}

.contact-redesign-copy {
  max-width: 62rem !important;
  font-size: clamp(1.08rem, 1.28vw, 1.3rem) !important;
}

.contact-info,
.contact-form,
.contact-visual {
  background: #ffffff !important;
  border: 1px solid rgba(23, 23, 23, 0.08) !important;
}

/* 2026-07-27: subtle breathing room between project gallery and section 02. */
.studio-section {
  margin-top: clamp(0.55rem, 0.9vw, 1.1rem) !important;
}

.studio-heading .section-kicker {
  font-family: var(--roitenberg-display) !important;
  font-weight: 500 !important;
}

@media (max-width: 1100px) {
  .projects-heading,
  .studio-grid {
    min-height: clamp(560px, 58vw, 700px) !important;
  }

  .projects-heading::before,
  .studio-grid::before,
  .contact-grid::before {
    right: 2rem !important;
    top: 2rem !important;
  }
}

@media (max-width: 820px) {
  .studio-section {
    margin-top: 0.65rem !important;
  }

  .projects-heading,
  .studio-grid {
    background: #ffffff !important;
  }

  .projects-heading::before,
  .studio-grid::before,
  .contact-grid::before {
    color: rgba(150, 150, 150, 0.22) !important;
    left: auto !important;
    right: 1.35rem !important;
    top: 1.55rem !important;
    font-size: clamp(4.4rem, 21vw, 6rem) !important;
    line-height: 1 !important;
  }

  .projects-title-block,
  .studio-heading,
  .contact-info {
    padding-top: 4.65rem !important;
  }

  .projects-title-block h2,
  .studio-heading .section-kicker,
  .contact-info > .section-kicker,
  .contact-redesign-intro h2 {
    text-transform: uppercase !important;
  }

  .projects-title-block p:not(.section-kicker),
  .studio-copy p {
    max-width: none !important;
    font-size: 1rem !important;
  }

  .studio-section .studio-stats {
    display: none !important;
  }

  .studio-stats-separator {
    padding: 2.25rem 1.05rem 2.55rem !important;
  }

  .studio-stats-separator-inner::before,
  .studio-stats-separator-inner::after {
    background: rgba(23, 23, 23, 0.09) !important;
  }

  .studio-stats-separator .studio-stats {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .studio-stats-separator .studio-stats div {
    border-bottom: 1px solid rgba(23, 23, 23, 0.09) !important;
    border-right: 0 !important;
    min-height: 104px !important;
    padding: 1.28rem 0.3rem 1.2rem !important;
    row-gap: 0.62rem !important;
  }

  .studio-stats-separator .studio-stats div:last-child {
    border-bottom: 0 !important;
  }

  .studio-stats-separator .studio-stats div::before {
    left: 0.3rem !important;
    top: 1rem !important;
    width: 2.2rem !important;
  }

  .studio-stats-separator .studio-stats dt,
  .studio-stats-separator .studio-stats div:first-child dt {
    font-size: clamp(2.3rem, 10vw, 3rem) !important;
    padding-top: 0.8rem !important;
  }

  .studio-stats-separator .studio-stats div:nth-child(2) dt,
  .studio-stats-separator .studio-stats div:nth-child(3) dt {
    font-size: clamp(2.55rem, 11vw, 3.15rem) !important;
  }

  .studio-stats-separator .studio-stats dd {
    font-size: 0.84rem !important;
  }
}

/* Final brand asset refresh: use the new transparent logo variants by context. */
.site-logo img,
.footer-brand img,
.studio-heading-logo,
.mobile-panel-brand .mobile-panel-logo {
  display: block !important;
  filter: none !important;
  height: auto !important;
  object-fit: contain !important;
}

.site-logo img {
  content: url("/images/brand/logo-secondary-white.png?v=20260729logo2") !important;
  max-height: 58px !important;
  opacity: 0.96 !important;
  width: clamp(168px, 13vw, 220px) !important;
}

.site-header.is-solid .site-logo img,
.site-header.is-scrolled .site-logo img,
.site-header:has(.mobile-panel.is-open) .site-logo img,
body:has(.modal-layer) .site-header .site-logo img {
  content: url("/images/brand/logo-secondary-black.png?v=20260729logo2") !important;
  opacity: 1 !important;
}

.studio-heading-logo {
  content: url("/images/brand/logo-secondary-black.png?v=20260729logo2") !important;
  max-height: none !important;
  opacity: 0.9 !important;
  width: clamp(180px, 15vw, 248px) !important;
}

.footer-brand img {
  content: url("/images/brand/logo-secondary-white.png?v=20260729logo2") !important;
  max-height: 76px !important;
  opacity: 0.92 !important;
  width: clamp(176px, 15vw, 248px) !important;
}

@media (max-width: 820px) {
  .site-logo img {
    max-height: 52px !important;
    width: clamp(140px, 43vw, 176px) !important;
  }

  .mobile-panel-brand .mobile-panel-logo {
    content: url("/images/brand/logo-secondary-black.png?v=20260729logo2") !important;
    filter: none !important;
    max-height: 56px !important;
    max-width: 196px !important;
    opacity: 0.95 !important;
    width: min(196px, 78%) !important;
  }
}

/* Static-export paint guard: never leave key content hidden if JS hydration is slow. */
.hero-content,
.project-card,
.project-list-item {
  opacity: 1 !important;
  transform: none !important;
}

.hero-slide {
  opacity: 1 !important;
}

/* Hero refinements: keep the main line elegant on narrow screens and hide slider controls without removing them. */
.hero-content {
  max-width: min(82vw, 1040px) !important;
}

.hero-content h1 {
  max-width: min(82vw, 960px) !important;
  text-wrap: balance !important;
  white-space: normal !important;
}

.hero-title-line {
  display: block !important;
  white-space: nowrap !important;
}

.hero-slider-ui,
.hero-slider-actions {
  display: none !important;
  pointer-events: none !important;
}

@media (max-width: 820px) {
  .hero-content {
    max-width: min(92vw, 35rem) !important;
  }

  .hero-content h1 {
    font-size: clamp(2.25rem, 9.15vw, 3rem) !important;
    line-height: 0.92 !important;
    max-width: min(92vw, 34rem) !important;
  }
}

@media (max-width: 360px) {
  .hero-content h1 {
    font-size: clamp(2.05rem, 8.9vw, 2.6rem) !important;
  }
}

/* Final proportional pass: cleaner hero split, lighter footer, and minimal work-type choices. */
.hero-content h1 {
  max-width: min(78vw, 880px) !important;
}

.hero-title-line {
  display: block !important;
}

.contact-form {
  border-color: rgba(23, 23, 23, 0.075) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 55px rgba(23, 23, 23, 0.055) !important;
  gap: 1.15rem 1.25rem !important;
}

.contact-form input,
.contact-form select {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(23, 23, 23, 0.13) !important;
  border-radius: 4px !important;
}

.contact-work-field {
  grid-column: 1 / -1 !important;
}

.contact-work-options {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border: 1px solid rgba(23, 23, 23, 0.13) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.contact-work-option {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 0 !important;
  border-right: 1px solid rgba(23, 23, 23, 0.11) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  justify-content: center !important;
  min-height: 54px !important;
  padding: 0 0.7rem !important;
}

.contact-work-option:last-child {
  border-right: 0 !important;
}

.contact-work-check {
  border-color: rgba(23, 23, 23, 0.28) !important;
  flex-basis: 16px !important;
  height: 16px !important;
  width: 16px !important;
}

.contact-work-check::after {
  background: #171717 !important;
  height: 7px !important;
  width: 7px !important;
}

.contact-work-option:has(input:checked) {
  background: #171717 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.contact-work-option:has(input:checked) .contact-work-check {
  border-color: rgba(255, 255, 255, 0.82) !important;
}

.contact-work-option:has(input:checked) .contact-work-check::after {
  background: #ffffff !important;
}

.contact-form .form-submit {
  border-radius: 4px !important;
  box-shadow: none !important;
  min-height: 56px !important;
}

.site-footer {
  background: #171717 !important;
  padding: clamp(1.45rem, 2.2vw, 2.15rem) clamp(1.1rem, 4vw, 5rem) !important;
}

.footer-inner {
  align-items: center !important;
  display: grid !important;
  gap: 1rem !important;
  grid-template-columns: auto 1fr auto !important;
  margin: 0 auto !important;
  max-width: 1480px !important;
  min-height: auto !important;
  width: 100% !important;
}

.footer-main {
  align-items: center !important;
  display: contents !important;
}

.footer-brand img {
  max-height: 34px !important;
  opacity: 0.94 !important;
  width: clamp(138px, 10vw, 176px) !important;
}

.footer-main p {
  color: rgba(255, 255, 255, 0.52) !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

.footer-meta {
  align-items: center !important;
  display: inline-flex !important;
  gap: 1rem !important;
  justify-content: flex-end !important;
}

.footer-credit {
  color: rgba(255, 255, 255, 0.58) !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.footer-credit:hover,
.footer-credit:focus-visible {
  color: #ffffff !important;
}

.back-to-top {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  height: 36px !important;
  width: 36px !important;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: #ffffff !important;
  color: #171717 !important;
}

@media (max-width: 820px) {
  .hero-content h1 {
    font-size: clamp(2.35rem, 9.5vw, 3.15rem) !important;
    max-width: 92vw !important;
  }

  .contact-work-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .contact-work-option:nth-child(2) {
    border-right: 0 !important;
  }

  .contact-work-option:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(23, 23, 23, 0.11) !important;
  }

  .footer-inner {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .footer-meta {
    justify-content: center !important;
  }
}

/* Contact minimal refinement: remove template-like cards and return to an editorial form system. */
.contact-section {
  background: #ffffff !important;
  padding: clamp(4.6rem, 6.6vw, 7rem) 0 clamp(4.8rem, 7vw, 7.4rem) !important;
}

.contact-grid {
  display: grid !important;
  grid-template-columns: minmax(230px, 300px) minmax(0, 720px) !important;
  gap: clamp(2.2rem, 5vw, 5.8rem) !important;
  width: min(calc(100% - clamp(2rem, 8vw, 9rem)), 1120px) !important;
}

.contact-redesign-intro {
  grid-column: 1 / -1 !important;
  margin: 0 0 clamp(1.8rem, 3vw, 3rem) !important;
  max-width: 720px !important;
  text-align: left !important;
}

.contact-redesign-eyebrow {
  color: rgba(23, 23, 23, 0.48) !important;
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.72rem !important;
}

.contact-redesign-eyebrow::before,
.contact-redesign-eyebrow::after {
  display: none !important;
  content: none !important;
}

.contact-redesign-intro h2 {
  color: #171717 !important;
  font-size: clamp(2.7rem, 4.7vw, 5.4rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.9 !important;
}

.contact-redesign-copy {
  color: rgba(23, 23, 23, 0.58) !important;
  font-size: clamp(0.98rem, 1.08vw, 1.12rem) !important;
  line-height: 1.58 !important;
  margin: 1rem 0 0 !important;
  max-width: 620px !important;
}

.contact-info {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  grid-column: 1 !important;
  padding: 0 !important;
}

.contact-info address {
  border-top: 1px solid rgba(23, 23, 23, 0.08) !important;
  gap: 0 !important;
}

.contact-info address p {
  border-bottom: 1px solid rgba(23, 23, 23, 0.075) !important;
  gap: 0.82rem !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  padding: 0.82rem 0 !important;
}

.contact-info address svg {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(23, 23, 23, 0.52) !important;
  height: 17px !important;
  padding: 0 !important;
  width: 17px !important;
}

.contact-info address span,
.contact-info address a {
  color: rgba(23, 23, 23, 0.68) !important;
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
}

.contact-info address p.contact-address-row span::before,
.contact-info address p.contact-phone-row a::before,
.contact-info address p.contact-whatsapp-row a::before,
.contact-info address p.contact-email-row a::before {
  color: rgba(23, 23, 23, 0.9) !important;
  font-size: 0.69rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 0.18rem !important;
}

.contact-info address p.contact-address-row span::before {
  content: "Dirección" !important;
}

.contact-info address p.contact-phone-row a::before {
  content: "Teléfono" !important;
}

.contact-section .social-links {
  border-top: 0 !important;
  justify-content: flex-start !important;
  margin-top: 1.25rem !important;
  padding-top: 0 !important;
}

.contact-section .social-links a {
  background: transparent !important;
  border-color: rgba(23, 23, 23, 0.12) !important;
  color: rgba(23, 23, 23, 0.72) !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 0.6rem !important;
}

.contact-section .social-links a:hover,
.contact-section .social-links a:focus-visible {
  background: #171717 !important;
  border-color: #171717 !important;
  color: #ffffff !important;
}

.contact-visual {
  display: none !important;
}

.contact-form {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.95rem 1.45rem !important;
  padding: 0 !important;
}

.contact-form > .section-kicker {
  color: rgba(23, 23, 23, 0.9) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 0.2rem !important;
}

.contact-form .field {
  margin: 0 !important;
}

.contact-form .field label {
  color: rgba(23, 23, 23, 0.48) !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  margin: 0 0 0.18rem !important;
}

.contact-form input,
.contact-form select {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(23, 23, 23, 0.18) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #171717 !important;
  font-size: 0.94rem !important;
  min-height: 42px !important;
  padding: 0.15rem 0 0.62rem !important;
}

.contact-form input::placeholder {
  color: rgba(23, 23, 23, 0.34) !important;
}

.contact-form input:hover,
.contact-form input:focus,
.contact-form select:hover,
.contact-form select:focus {
  background: transparent !important;
  border-color: rgba(23, 23, 23, 0.72) !important;
  box-shadow: none !important;
}

.contact-work-field {
  display: none !important;
}

.contact-building-field {
  grid-column: 1 / -1 !important;
  position: relative !important;
}

.contact-building-field select {
  appearance: none !important;
  cursor: pointer !important;
  padding-right: 2rem !important;
}

.contact-building-field::after {
  content: "" !important;
  border-bottom: 1px solid rgba(23, 23, 23, 0.54) !important;
  border-right: 1px solid rgba(23, 23, 23, 0.54) !important;
  height: 8px !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 0.2rem !important;
  top: 2.02rem !important;
  transform: rotate(45deg) !important;
  width: 8px !important;
}

.contact-form .form-submit {
  background: transparent !important;
  border: 1px solid rgba(23, 23, 23, 0.32) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #171717 !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  gap: 0.72rem !important;
  justify-self: start !important;
  letter-spacing: 0.12em !important;
  margin-top: 0.3rem !important;
  min-height: 42px !important;
  min-width: 0 !important;
  padding: 0 1.05rem !important;
  text-transform: uppercase !important;
  width: auto !important;
}

.contact-form .form-submit::before {
  display: none !important;
}

.contact-form .form-submit::after {
  content: "\2192" !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  transition: transform 180ms ease !important;
}

.contact-form .form-submit:hover,
.contact-form .form-submit:focus-visible {
  background: #171717 !important;
  border-color: #171717 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  transform: none !important;
}

.contact-form .form-submit:hover::after,
.contact-form .form-submit:focus-visible::after {
  transform: translateX(3px) !important;
}

.contact-form .form-status {
  color: rgba(23, 23, 23, 0.5) !important;
  font-size: 0.8rem !important;
  min-height: 1rem !important;
  text-align: left !important;
}

@media (max-width: 980px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 1.8rem !important;
    width: min(calc(100% - 2rem), 44rem) !important;
  }

  .contact-form {
    grid-column: 1 !important;
  }
}

@media (max-width: 560px) {
  .contact-redesign-intro h2 {
    font-size: clamp(2.7rem, 13vw, 4rem) !important;
  }

  .contact-form {
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
  }
}

/* Contact polish pass: tighter, quieter, less template-like. */
.contact-section {
  padding: clamp(4.2rem, 5.8vw, 6.4rem) 0 clamp(4.4rem, 6.2vw, 6.8rem) !important;
}

.contact-grid {
  grid-template-columns: minmax(220px, 282px) minmax(0, 680px) !important;
  gap: clamp(2rem, 4.2vw, 4.7rem) !important;
  align-items: start !important;
}

.contact-redesign-intro {
  margin-bottom: clamp(1.35rem, 2.2vw, 2.35rem) !important;
}

.contact-redesign-intro h2 {
  letter-spacing: -0.045em !important;
}

.contact-redesign-copy {
  max-width: 560px !important;
}

.contact-info > .section-kicker,
.contact-form > .section-kicker {
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 1.1rem !important;
  text-transform: none !important;
}

.contact-info address {
  border-top: 0 !important;
}

.contact-info address p {
  border-bottom: 0 !important;
  gap: 0.74rem !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  padding: 0.62rem 0 0.72rem !important;
  position: relative !important;
}

.contact-info address p:not(:last-child)::after {
  background: rgba(23, 23, 23, 0.085) !important;
  bottom: 0 !important;
  content: "" !important;
  height: 1px !important;
  left: 2.1rem !important;
  position: absolute !important;
  width: min(152px, calc(100% - 2.1rem)) !important;
}

.contact-info address svg {
  color: rgba(23, 23, 23, 0.46) !important;
  height: 15px !important;
  margin-top: 0.18rem !important;
  width: 15px !important;
}

.contact-info address span,
.contact-info address a {
  color: rgba(23, 23, 23, 0.66) !important;
  font-size: 0.8rem !important;
  line-height: 1.42 !important;
}

.contact-info address p.contact-address-row span::before,
.contact-info address p.contact-phone-row a::before,
.contact-info address p.contact-whatsapp-row a::before,
.contact-info address p.contact-email-row a::before {
  color: rgba(23, 23, 23, 0.86) !important;
  font-size: 0.66rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
}

.contact-section .social-links {
  gap: 0.42rem !important;
  margin-top: 1rem !important;
}

.contact-section .social-links a {
  border-color: rgba(23, 23, 23, 0.11) !important;
  height: 31px !important;
  min-width: 31px !important;
  padding: 0 0.56rem !important;
}

.contact-form {
  gap: 0.72rem 1.15rem !important;
  max-width: 680px !important;
}

.contact-form .field label {
  font-size: 0.64rem !important;
  letter-spacing: 0.045em !important;
  margin-bottom: 0.1rem !important;
  text-transform: none !important;
}

.contact-form input,
.contact-form select {
  font-size: 0.9rem !important;
  min-height: 36px !important;
  padding: 0.05rem 0 0.5rem !important;
}

.contact-building-field::after {
  height: 7px !important;
  right: 0.1rem !important;
  top: 1.68rem !important;
  width: 7px !important;
}

.contact-form .form-submit {
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.055em !important;
  margin-top: 0.1rem !important;
  min-height: 38px !important;
  padding: 0 0.95rem !important;
  text-transform: none !important;
}

.contact-form .form-submit::after {
  font-size: 0.9rem !important;
}

.contact-grid::before {
  left: auto !important;
  right: clamp(1rem, 3vw, 3.4rem) !important;
  top: clamp(-3.6rem, -3.2vw, -2.15rem) !important;
  color: rgba(150, 150, 150, 0.22) !important;
  z-index: 0 !important;
}

/* 2026-07-27: client request - stronger studio counters. */
.studio-stats-separator {
  padding-block: clamp(4.9rem, 7.1vw, 7.8rem) !important;
}

.studio-stats-separator .studio-stats {
  grid-template-columns: minmax(0, 1.52fr) minmax(0, 0.78fr) minmax(0, 0.78fr) !important;
}

.studio-stats-separator .studio-stats div {
  padding-block: clamp(1.65rem, 2.25vw, 2.35rem) !important;
}

.studio-stats-separator .studio-stats dt,
.studio-stats-separator .studio-stats div:first-child dt {
  font-size: clamp(3.35rem, 5.15vw, 5.65rem) !important;
  letter-spacing: -0.034em !important;
  line-height: 0.92 !important;
}

.studio-stats-separator .studio-stats div:nth-child(2) dt,
.studio-stats-separator .studio-stats div:nth-child(3) dt {
  font-size: clamp(4rem, 5.95vw, 6.35rem) !important;
  letter-spacing: -0.026em !important;
}

.studio-stats-separator .studio-stats dd {
  font-size: clamp(0.98rem, 1.02vw, 1.14rem) !important;
  margin-top: clamp(0.76rem, 0.95vw, 1.08rem) !important;
}

@media (max-width: 820px) {
  .studio-stats-separator {
    padding-block: 2.65rem 2.95rem !important;
  }

  .studio-stats-separator .studio-stats div {
    min-height: 118px !important;
    padding-block: 1.35rem !important;
  }

  .studio-stats-separator .studio-stats dt,
  .studio-stats-separator .studio-stats div:first-child dt {
    font-size: clamp(2.75rem, 12.2vw, 3.65rem) !important;
  }

  .studio-stats-separator .studio-stats div:nth-child(2) dt,
  .studio-stats-separator .studio-stats div:nth-child(3) dt {
    font-size: clamp(3.15rem, 13.5vw, 4.1rem) !important;
  }
}

/* 2026-07-27: contact social buttons - true circles and high-contrast hover. */
.contact-section .social-links a {
  align-items: center !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  color: rgba(23, 23, 23, 0.78) !important;
  display: inline-flex !important;
  flex: 0 0 42px !important;
  height: 42px !important;
  justify-content: center !important;
  min-height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  width: 42px !important;
}

.contact-section .social-links a svg,
.contact-section .social-links a .whatsapp-mark {
  color: currentColor !important;
  display: block !important;
  flex: 0 0 auto !important;
  height: 18px !important;
  stroke: currentColor !important;
  width: 18px !important;
}

.contact-section .social-links a.whatsapp {
  font-size: 0 !important;
}

.contact-section .social-links a.whatsapp::before,
.contact-section .social-links a.whatsapp::after {
  content: none !important;
  display: none !important;
}

.contact-section .social-links a:hover,
.contact-section .social-links a:focus-visible {
  background: #171717 !important;
  border-color: #171717 !important;
  color: #ffffff !important;
}

.contact-section .social-links a:hover svg,
.contact-section .social-links a:focus-visible svg,
.contact-section .social-links a:hover .whatsapp-mark,
.contact-section .social-links a:focus-visible .whatsapp-mark {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

@media (max-width: 560px) {
  .contact-section .social-links a {
    flex-basis: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    min-width: 40px !important;
    width: 40px !important;
  }
}

/* 2026-07-27: audit-final mobile fixes. Keep this at EOF so it wins the cascade. */
@media (max-width: 820px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  #proyectos,
  #estudio,
  #contacto {
    scroll-margin-top: 82px !important;
  }

  .projects-heading {
    display: grid !important;
    gap: 1.55rem !important;
    min-height: auto !important;
    padding: 4.9rem 1rem 1.85rem !important;
  }

  .projects-title-block,
  .projects-filter-area,
  .projects-controls {
    left: auto !important;
    margin: 0 !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
  }

  .projects-title-block h2 {
    color: #171717 !important;
    font-size: clamp(2.35rem, 12vw, 3.45rem) !important;
    font-weight: 440 !important;
    letter-spacing: -0.018em !important;
    line-height: 0.98 !important;
  }

  .projects-title-block p:not(.section-kicker) {
    color: rgba(23, 23, 23, 0.62) !important;
    font-size: 0.98rem !important;
    line-height: 1.58 !important;
    margin-top: 1.18rem !important;
    max-width: 21rem !important;
  }

  .projects-heading .project-filters,
  .project-filters {
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  .projects-controls {
    align-items: center !important;
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0 1rem 0.88rem !important;
  }

  .project-grid,
  .project-list {
    gap: 0.58rem !important;
    margin-top: 0 !important;
    padding: 0 1rem !important;
  }

  .project-card button {
    min-height: 226px !important;
  }

  .mobile-projects-more-wrap {
    padding: 1rem 1rem 2rem !important;
  }

  .projects-heading::before,
  .studio-grid::before,
  .contact-grid::before {
    color: rgba(150, 150, 150, 0.18) !important;
    font-family: var(--roitenberg-display), Arial, sans-serif !important;
    font-size: clamp(4.7rem, 22vw, 6.2rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;
    line-height: 0.9 !important;
    right: 1.12rem !important;
    top: 1.15rem !important;
  }

  .studio-section,
  .studio-grid {
    background: #ffffff !important;
  }

  .studio-section {
    margin-top: 0 !important;
  }

  .studio-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .studio-heading {
    min-height: 0 !important;
    padding: 4.9rem 1rem 0 !important;
  }

  .studio-heading .section-kicker {
    color: #171717 !important;
    font-family: var(--roitenberg-display), Arial, sans-serif !important;
    font-size: clamp(2.2rem, 11vw, 3.25rem) !important;
    font-weight: 440 !important;
    letter-spacing: -0.015em !important;
    line-height: 0.98 !important;
    text-transform: none !important;
  }

  .studio-content {
    display: block !important;
  }

  .studio-copy {
    display: block !important;
    padding: 1.05rem 1rem 2.2rem !important;
  }

  .studio-copy p {
    color: rgba(23, 23, 23, 0.66) !important;
    font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.62 !important;
    max-width: 22rem !important;
  }

  .studio-copy .editorial-link {
    color: #171717 !important;
    margin-top: 1.25rem !important;
  }

  .studio-grid::after {
    aspect-ratio: 1.12 !important;
    background-position: center top !important;
    display: block !important;
    height: auto !important;
    margin-top: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  .studio-stats-separator {
    background: #ffffff !important;
    padding: 2.15rem 1rem 2.25rem !important;
  }

  .studio-stats-separator .studio-stats {
    display: grid !important;
    gap: 0.72rem !important;
    grid-template-columns: 1fr !important;
  }

  .studio-stats-separator .studio-stats div {
    align-items: center !important;
    background: rgba(255, 255, 255, 0.74) !important;
    border: 1px solid rgba(23, 23, 23, 0.095) !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 40px rgba(23, 23, 23, 0.045) !important;
    display: grid !important;
    grid-template-columns: minmax(8.8rem, 0.9fr) minmax(0, 1fr) !important;
    min-height: 84px !important;
    padding: 1rem 1.05rem !important;
    row-gap: 0 !important;
  }

  .studio-stats-separator .studio-stats div::before {
    display: none !important;
  }

  .studio-stats-separator .studio-stats dt,
  .studio-stats-separator .studio-stats div:first-child dt,
  .studio-stats-separator .studio-stats div:nth-child(2) dt,
  .studio-stats-separator .studio-stats div:nth-child(3) dt {
    color: #171717 !important;
    font-family: var(--roitenberg-display), Arial, sans-serif !important;
    font-size: clamp(2.1rem, 11vw, 3.05rem) !important;
    font-weight: 520 !important;
    letter-spacing: -0.02em !important;
    line-height: 0.95 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .studio-stats-separator .studio-stats dd {
    align-self: center !important;
    color: rgba(23, 23, 23, 0.58) !important;
    font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
    font-size: 0.98rem !important;
    font-weight: 420 !important;
    letter-spacing: 0 !important;
    line-height: 1.22 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .contact-section {
    background: #ffffff !important;
  }

  .contact-grid {
    display: grid !important;
    gap: 1rem !important;
    grid-template-columns: 1fr !important;
    max-width: none !important;
    padding: 0 1rem 2.7rem !important;
  }

  .contact-redesign-intro {
    margin: 0 !important;
    max-width: none !important;
    padding: 4.9rem 0 1.35rem !important;
  }

  .contact-redesign-eyebrow {
    color: rgba(23, 23, 23, 0.58) !important;
    font-size: 0.88rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .contact-redesign-intro h2 {
    color: #171717 !important;
    font-family: var(--roitenberg-display), Arial, sans-serif !important;
    font-size: clamp(2.55rem, 14vw, 4.05rem) !important;
    font-weight: 440 !important;
    letter-spacing: -0.018em !important;
    line-height: 0.98 !important;
    margin-top: 0.4rem !important;
    text-transform: none !important;
  }

  .contact-redesign-copy {
    color: rgba(23, 23, 23, 0.62) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-top: 1rem !important;
    max-width: 22rem !important;
  }

  .contact-grid .contact-form {
    align-self: stretch !important;
    display: grid !important;
    flex-direction: initial !important;
    gap: 0.85rem !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 1.05rem !important;
    width: 100% !important;
  }

  .contact-grid .contact-form .form-row {
    display: grid !important;
    gap: 0.85rem !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .contact-grid .contact-form .field,
  .contact-grid .contact-form .contact-building-field {
    display: grid !important;
    flex: none !important;
    gap: 0.4rem !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  .contact-grid .contact-form .field label {
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .contact-grid .contact-form input,
  .contact-grid .contact-form textarea,
  .contact-grid .contact-form select {
    font-size: 1rem !important;
    line-height: 1.35 !important;
    min-height: 48px !important;
    width: 100% !important;
  }

  .contact-grid .contact-form textarea {
    min-height: 96px !important;
  }

  .contact-grid .contact-building-field::after {
    top: 2.58rem !important;
  }

  .contact-grid .contact-form .form-submit {
    font-size: 0.96rem !important;
    min-height: 50px !important;
    width: 100% !important;
  }

  .contact-section .social-links {
    justify-content: flex-start !important;
    padding: 1rem !important;
  }

  .contact-map iframe {
    aspect-ratio: 1.22 !important;
    min-height: 280px !important;
  }

  .contact-info address {
    padding: 1rem !important;
  }

  .contact-info address p {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }
}

/* 2026-07-27: hidden legacy contact fields must not reserve mobile space. */
@media (max-width: 820px) {
  .contact-grid .contact-form .field.contact-hidden-field {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    visibility: hidden !important;
  }
}

/* 2026-07-27: final override for Fekete-inspired metric cards. */
.studio-stats-separator {
  background:
    radial-gradient(circle at 12% 28%, rgba(23, 23, 23, 0.035), transparent 28%),
    #ffffff !important;
  overflow: hidden !important;
  padding: clamp(4.9rem, 7.2vw, 8.2rem) clamp(1rem, 5vw, 6rem) !important;
}

.studio-stats-separator .studio-stats {
  align-items: stretch !important;
  display: grid !important;
  gap: clamp(1.1rem, 1.8vw, 1.85rem) !important;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.86fr) minmax(0, 0.86fr) !important;
  max-width: min(1320px, 92vw) !important;
}

.studio-stats-separator .studio-stats div {
  align-content: end !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(23, 23, 23, 0.085) !important;
  border-radius: clamp(18px, 1.45vw, 24px) !important;
  box-shadow: 0 30px 80px rgba(23, 23, 23, 0.055) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: start !important;
  min-height: clamp(230px, 19vw, 305px) !important;
  overflow: hidden !important;
  padding: clamp(1.45rem, 2.15vw, 2.45rem) !important;
  row-gap: clamp(0.72rem, 0.9vw, 1rem) !important;
}

.studio-stats-separator .studio-stats div::after {
  background: rgba(23, 23, 23, 0.12) !important;
  bottom: clamp(4.45rem, 5.3vw, 5.75rem) !important;
  content: "" !important;
  display: block !important;
  height: 1px !important;
  left: clamp(1.45rem, 2.15vw, 2.45rem) !important;
  position: absolute !important;
  right: clamp(1.45rem, 2.15vw, 2.45rem) !important;
  top: auto !important;
}

.studio-stats-separator .studio-stats dt,
.studio-stats-separator .studio-stats div:first-child dt,
.studio-stats-separator .studio-stats div:nth-child(2) dt,
.studio-stats-separator .studio-stats div:nth-child(3) dt {
  align-items: baseline !important;
  color: #171717 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  font-family: var(--roitenberg-display), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(5.2rem, 9.15vw, 9.7rem) !important;
  font-weight: 430 !important;
  gap: 0.18em !important;
  letter-spacing: -0.065em !important;
  line-height: 0.78 !important;
  padding: 0 0 clamp(1.35rem, 1.65vw, 1.85rem) !important;
  white-space: nowrap !important;
}

.studio-stats-separator .studio-stats div:first-child dt {
  font-size: clamp(4.2rem, 7.4vw, 7.85rem) !important;
  letter-spacing: -0.075em !important;
}

.studio-stats-separator .studio-stats div:nth-child(2) dt,
.studio-stats-separator .studio-stats div:nth-child(3) dt {
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

.studio-stat-number,
.studio-stat-suffix {
  display: inline-block !important;
}

.studio-stat-suffix {
  color: rgba(23, 23, 23, 0.52) !important;
  font-size: 0.22em !important;
  font-weight: 460 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  transform: translateY(-0.16em) !important;
}

.studio-stats-separator .studio-stats dd {
  color: rgba(23, 23, 23, 0.54) !important;
  font-family: var(--roitenberg-grotesk), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(0.9rem, 0.95vw, 1.02rem) !important;
  font-weight: 440 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

.studio-stats-separator .studio-stats div:nth-child(2) dd,
.studio-stats-separator .studio-stats div:nth-child(3) dd {
  text-align: center !important;
  width: 100% !important;
}

@media (max-width: 1024px) {
  .studio-stats-separator .studio-stats {
    grid-template-columns: 1fr !important;
  }

  .studio-stats-separator .studio-stats div {
    min-height: 178px !important;
  }
}

@media (max-width: 820px) {
  .studio-stats-separator {
    padding: 2.45rem 1rem 2.8rem !important;
  }

  .studio-stats-separator .studio-stats {
    gap: 0.82rem !important;
  }

  .studio-stats-separator .studio-stats div {
    min-height: 138px !important;
    padding: 1.16rem 1.18rem !important;
  }

  .studio-stats-separator .studio-stats div::after {
    bottom: 3.75rem !important;
    left: 1.18rem !important;
    right: 1.18rem !important;
  }

  .studio-stats-separator .studio-stats dt,
  .studio-stats-separator .studio-stats div:first-child dt,
  .studio-stats-separator .studio-stats div:nth-child(2) dt,
  .studio-stats-separator .studio-stats div:nth-child(3) dt {
    font-size: clamp(4.15rem, 18vw, 5.25rem) !important;
    padding-bottom: 1.15rem !important;
  }

  .studio-stats-separator .studio-stats div:first-child dt {
    font-size: clamp(3.2rem, 13.6vw, 4.2rem) !important;
  }

  .studio-stats-separator .studio-stats div:nth-child(2) dt,
  .studio-stats-separator .studio-stats div:nth-child(3) dt,
  .studio-stats-separator .studio-stats div:nth-child(2) dd,
  .studio-stats-separator .studio-stats div:nth-child(3) dd {
    justify-content: flex-start !important;
    text-align: left !important;
    width: auto !important;
  }
}

/* 2026-07-29: final contact restore, approved pre-crash composition. */
.contact-section[data-contact-layout="direct"] {
  background: #f7f7f5 !important;
  color: #171717 !important;
  overflow: hidden !important;
  padding: clamp(4.6rem, 7.2vw, 7rem) 0 clamp(4.2rem, 6vw, 6.2rem) !important;
}

.contact-section[data-contact-layout="direct"] .contact-grid {
  display: grid !important;
  gap: clamp(2rem, 3vw, 2.75rem) !important;
  grid-template-columns: 1fr !important;
  max-width: min(1180px, calc(100vw - clamp(2rem, 5vw, 4rem))) !important;
  padding: 0 !important;
}

.contact-direct-hero {
  display: grid !important;
  gap: 2rem !important;
  grid-template-columns: minmax(0, 0.72fr) auto !important;
  min-height: clamp(210px, 20vw, 265px) !important;
  position: relative !important;
}

.contact-redesign-eyebrow {
  color: rgba(23, 23, 23, 0.48) !important;
  font-family: var(--roitenberg-grotesk), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(0.72rem, 0.8vw, 0.82rem) !important;
  font-weight: 680 !important;
  letter-spacing: 0.14em !important;
  margin: 0 0 1.05rem !important;
  text-transform: uppercase !important;
}

.contact-direct-title h2 {
  color: #171717 !important;
  font-family: var(--roitenberg-display), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(4.9rem, 8.2vw, 7.8rem) !important;
  font-weight: 440 !important;
  letter-spacing: -0.085em !important;
  line-height: 0.83 !important;
  margin: 0 !important;
  text-transform: none !important;
}

.contact-redesign-copy {
  color: rgba(23, 23, 23, 0.66) !important;
  font-family: var(--roitenberg-grotesk), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(1.04rem, 1.1vw, 1.18rem) !important;
  font-weight: 420 !important;
  line-height: 1.58 !important;
  margin: clamp(1.1rem, 1.5vw, 1.45rem) 0 0 !important;
  max-width: 40rem !important;
}

.contact-direct-number {
  align-self: start !important;
  color: rgba(23, 23, 23, 0.055) !important;
  font-family: var(--roitenberg-display), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(7rem, 13vw, 13.25rem) !important;
  font-weight: 520 !important;
  letter-spacing: -0.105em !important;
  line-height: 0.72 !important;
  margin-right: -0.05em !important;
}

.contact-direct-body {
  display: grid !important;
  gap: clamp(2rem, 3vw, 2.6rem) !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.86fr) !important;
  grid-template-areas: "stack cta" !important;
  align-items: stretch !important;
}

.contact-direct-stack {
  display: grid !important;
  gap: 1.15rem !important;
  grid-area: stack !important;
  min-width: 0 !important;
}

.contact-direct-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

.contact-direct-card,
.contact-direct-social,
.contact-editorial-cta {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(23, 23, 23, 0.095) !important;
  border-radius: 12px !important;
  box-shadow: 0 26px 76px rgba(23, 23, 23, 0.055) !important;
}

.contact-direct-card {
  display: grid !important;
  gap: 0.9rem !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  min-height: 158px !important;
  padding: clamp(1.25rem, 1.75vw, 1.65rem) !important;
}

.contact-direct-icon,
.contact-section[data-contact-layout="direct"] .social-links a {
  align-items: center !important;
  aspect-ratio: 1 !important;
  background: #f1f1ef !important;
  border: 1px solid rgba(23, 23, 23, 0.08) !important;
  border-radius: 50% !important;
  color: rgba(23, 23, 23, 0.64) !important;
  display: inline-flex !important;
  justify-content: center !important;
}

.contact-direct-icon {
  height: 44px !important;
  width: 44px !important;
}

.contact-direct-text {
  min-width: 0 !important;
}

.contact-direct-text small,
.contact-direct-social > span {
  color: rgba(23, 23, 23, 0.48) !important;
  display: block !important;
  font-family: var(--roitenberg-grotesk), var(--font-sans), Arial, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.15 !important;
  margin-bottom: 0.46rem !important;
  text-transform: uppercase !important;
}

.contact-direct-text strong {
  color: #171717 !important;
  display: block !important;
  font-family: var(--roitenberg-grotesk), var(--font-sans), Arial, sans-serif !important;
  font-size: 0.96rem !important;
  font-weight: 560 !important;
  line-height: 1.22 !important;
  margin-bottom: 0.48rem !important;
}

.contact-direct-text a,
.contact-direct-text span {
  color: #171717 !important;
  display: block !important;
  font-family: var(--roitenberg-grotesk), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(0.98rem, 1vw, 1.08rem) !important;
  font-weight: 520 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
  text-decoration: none !important;
}

.contact-direct-social {
  align-items: center !important;
  display: flex !important;
  justify-content: space-between !important;
  min-height: 92px !important;
  padding: 1.35rem 1.55rem !important;
}

.contact-section[data-contact-layout="direct"] .social-links {
  align-items: center !important;
  display: flex !important;
  gap: 0.82rem !important;
  justify-content: flex-end !important;
  padding: 0 !important;
}

.contact-section[data-contact-layout="direct"] .social-links a {
  height: 46px !important;
  width: 46px !important;
}

.contact-section[data-contact-layout="direct"] .social-links a:hover,
.contact-section[data-contact-layout="direct"] .social-links a:focus-visible {
  background: #171717 !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

.contact-editorial-cta {
  align-content: center !important;
  display: grid !important;
  grid-area: cta !important;
  min-height: 100% !important;
  padding: clamp(2.35rem, 3.6vw, 3.25rem) !important;
}

.contact-editorial-line {
  background: rgba(23, 23, 23, 0.18) !important;
  display: block !important;
  height: 1px !important;
  margin-bottom: clamp(2rem, 3vw, 2.8rem) !important;
  width: 68px !important;
}

.contact-editorial-cta h3 {
  color: #171717 !important;
  font-family: var(--roitenberg-display), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(2.35rem, 4vw, 4.35rem) !important;
  font-weight: 450 !important;
  letter-spacing: -0.085em !important;
  line-height: 0.95 !important;
  margin: 0 0 clamp(1.6rem, 2.25vw, 2.05rem) !important;
  max-width: 25rem !important;
}

.contact-editorial-cta p {
  color: rgba(23, 23, 23, 0.68) !important;
  font-family: var(--roitenberg-grotesk), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(1rem, 1.04vw, 1.12rem) !important;
  font-weight: 420 !important;
  line-height: 1.58 !important;
  margin: 0 0 clamp(2rem, 2.6vw, 2.55rem) !important;
  max-width: 27rem !important;
}

.contact-editorial-button {
  align-items: center !important;
  background: #171717 !important;
  border-radius: 7px !important;
  color: #fff !important;
  display: flex !important;
  font-family: var(--roitenberg-grotesk), var(--font-sans), Arial, sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 620 !important;
  justify-content: space-between !important;
  min-height: 58px !important;
  padding: 0 1.25rem !important;
  text-decoration: none !important;
  width: 100% !important;
}

.contact-editorial-button:hover,
.contact-editorial-button:focus-visible {
  background: #2a2a2a !important;
  transform: translateY(-2px) !important;
}

.contact-section[data-contact-layout="direct"] .contact-form,
.contact-section[data-contact-layout="direct"] .contact-info,
.contact-section[data-contact-layout="direct"] .contact-map,
.contact-section[data-contact-layout="direct"] .contact-visual {
  display: none !important;
}

@media (max-width: 900px) {
  .contact-section[data-contact-layout="direct"] {
    padding: 4.2rem 0 3.6rem !important;
  }

  .contact-section[data-contact-layout="direct"] .contact-grid {
    max-width: calc(100vw - 2rem) !important;
  }

  .contact-direct-hero {
    gap: 1.3rem !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .contact-direct-number {
    font-size: clamp(5.9rem, 30vw, 8.4rem) !important;
    justify-self: end !important;
    order: -1 !important;
    position: absolute !important;
    right: 0 !important;
    top: -0.2rem !important;
    z-index: 0 !important;
  }

  .contact-direct-title {
    position: relative !important;
    z-index: 1 !important;
  }

  .contact-direct-title h2 {
    font-size: clamp(4rem, 16vw, 5.65rem) !important;
  }

  .contact-redesign-copy {
    font-size: 1rem !important;
    max-width: 100% !important;
  }

  .contact-direct-body,
  .contact-direct-cards {
    grid-template-columns: 1fr !important;
  }

  .contact-direct-body {
    grid-template-areas: "stack" "cta" !important;
  }

  .contact-direct-card {
    min-height: 132px !important;
  }

  .contact-direct-social {
    align-items: flex-start !important;
    display: grid !important;
    gap: 1.2rem !important;
  }

  .contact-section[data-contact-layout="direct"] .social-links {
    justify-content: flex-start !important;
  }

  .contact-editorial-cta {
    min-height: 0 !important;
    padding: 2rem !important;
  }

  .contact-editorial-cta h3 {
    font-size: clamp(2.8rem, 11vw, 4rem) !important;
  }
}

/* 2026-07-29: premium contact polish. */
.contact-section[data-contact-layout="direct"] {
  background:
    linear-gradient(180deg, rgba(23, 23, 23, 0.025), rgba(23, 23, 23, 0) 18rem),
    #f7f7f5 !important;
  padding: clamp(5.2rem, 7.8vw, 8rem) 0 clamp(5.1rem, 6.4vw, 7rem) !important;
}

.contact-section[data-contact-layout="direct"] .contact-grid {
  gap: clamp(3.1rem, 4.8vw, 5rem) !important;
  max-width: min(1200px, calc(100vw - clamp(3rem, 7vw, 6.5rem))) !important;
}

.contact-direct-hero {
  align-items: start !important;
  grid-template-columns: minmax(0, 0.76fr) minmax(9rem, auto) !important;
  min-height: clamp(230px, 20vw, 292px) !important;
}

.contact-redesign-eyebrow {
  color: rgba(23, 23, 23, 0.46) !important;
  font-size: clamp(0.68rem, 0.72vw, 0.78rem) !important;
  letter-spacing: 0.16em !important;
  margin-bottom: clamp(1.15rem, 1.7vw, 1.7rem) !important;
}

.contact-direct-title h2 {
  font-size: clamp(4.45rem, 7.3vw, 6.85rem) !important;
  font-weight: 430 !important;
  letter-spacing: -0.068em !important;
  line-height: 0.86 !important;
}

.contact-redesign-copy {
  color: rgba(23, 23, 23, 0.6) !important;
  font-size: clamp(1.02rem, 1.05vw, 1.15rem) !important;
  line-height: 1.72 !important;
  margin-top: clamp(1.35rem, 2vw, 1.9rem) !important;
  max-width: 41.5rem !important;
}

.contact-direct-number {
  color: rgba(23, 23, 23, 0.048) !important;
  font-size: clamp(7.4rem, 12.2vw, 12.6rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.095em !important;
  transform: translateY(-0.1em) !important;
}

.contact-direct-body {
  gap: clamp(1.45rem, 2.6vw, 2.25rem) !important;
  grid-template-columns: minmax(0, 1.22fr) minmax(340px, 0.86fr) !important;
}

.contact-direct-stack {
  gap: clamp(1rem, 1.4vw, 1.25rem) !important;
}

.contact-direct-cards {
  gap: clamp(0.82rem, 1.05vw, 1rem) !important;
}

.contact-direct-card,
.contact-direct-social,
.contact-editorial-cta {
  background: rgba(255, 255, 255, 0.64) !important;
  border: 1px solid rgba(23, 23, 23, 0.075) !important;
  border-radius: 9px !important;
  box-shadow: 0 18px 55px rgba(23, 23, 23, 0.038) !important;
}

.contact-direct-card {
  align-items: start !important;
  gap: clamp(0.95rem, 1.25vw, 1.18rem) !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  min-height: clamp(145px, 11.3vw, 170px) !important;
  padding: clamp(1.38rem, 1.8vw, 1.85rem) !important;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
}

.contact-direct-card:hover {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(23, 23, 23, 0.14) !important;
  box-shadow: 0 24px 68px rgba(23, 23, 23, 0.06) !important;
  transform: translateY(-2px) !important;
}

.contact-direct-icon,
.contact-section[data-contact-layout="direct"] .social-links a {
  background: rgba(23, 23, 23, 0.035) !important;
  border-color: rgba(23, 23, 23, 0.08) !important;
  color: rgba(23, 23, 23, 0.58) !important;
}

.contact-direct-icon {
  height: 42px !important;
  width: 42px !important;
}

.contact-direct-icon svg {
  height: 18px !important;
  width: 18px !important;
}

.contact-direct-text small,
.contact-direct-social > span {
  color: rgba(23, 23, 23, 0.48) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.115em !important;
  margin-bottom: 0.72rem !important;
}

.contact-direct-text strong {
  display: none !important;
}

.contact-direct-text a,
.contact-direct-text span {
  color: rgba(23, 23, 23, 0.9) !important;
  font-size: clamp(1rem, 1.03vw, 1.12rem) !important;
  font-weight: 480 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.38 !important;
}

.contact-direct-social {
  min-height: 88px !important;
  padding: 1.25rem 1.45rem !important;
}

.contact-section[data-contact-layout="direct"] .social-links a {
  height: 42px !important;
  width: 42px !important;
}

.contact-section[data-contact-layout="direct"] .social-links a svg {
  height: 17px !important;
  width: 17px !important;
}

.contact-section[data-contact-layout="direct"] .social-links a:hover,
.contact-section[data-contact-layout="direct"] .social-links a:focus-visible {
  background: #171717 !important;
  border-color: #171717 !important;
  color: #fff !important;
  box-shadow: 0 14px 32px rgba(23, 23, 23, 0.18) !important;
}

.contact-editorial-cta {
  align-content: end !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(247, 247, 245, 0.72)),
    #fff !important;
  min-height: clamp(430px, 34vw, 520px) !important;
  padding: clamp(2.25rem, 3.1vw, 3rem) !important;
}

.contact-editorial-line {
  background: rgba(23, 23, 23, 0.16) !important;
  margin-bottom: clamp(2.25rem, 3.6vw, 3.25rem) !important;
  width: 64px !important;
}

.contact-editorial-cta h3 {
  font-size: clamp(2.35rem, 3.6vw, 3.95rem) !important;
  font-weight: 430 !important;
  letter-spacing: -0.078em !important;
  line-height: 0.98 !important;
  margin-bottom: clamp(1.4rem, 2vw, 1.85rem) !important;
}

.contact-editorial-cta p {
  color: rgba(23, 23, 23, 0.62) !important;
  font-size: clamp(1rem, 1.02vw, 1.1rem) !important;
  line-height: 1.68 !important;
  margin-bottom: clamp(2rem, 2.8vw, 2.65rem) !important;
}

.contact-editorial-button {
  border-radius: 6px !important;
  font-size: 0.94rem !important;
  font-weight: 560 !important;
  min-height: 54px !important;
  padding: 0 1.18rem !important;
}

@media (max-width: 900px) {
  .contact-section[data-contact-layout="direct"] {
    padding: 4.3rem 0 3.8rem !important;
  }

  .contact-section[data-contact-layout="direct"] .contact-grid {
    gap: 2.2rem !important;
    max-width: calc(100vw - 2rem) !important;
  }

  .contact-direct-title h2 {
    font-size: clamp(3.55rem, 14.5vw, 5rem) !important;
    letter-spacing: -0.065em !important;
  }

  .contact-redesign-copy {
    line-height: 1.6 !important;
  }

  .contact-direct-number {
    font-size: clamp(5.7rem, 27vw, 8rem) !important;
  }

  .contact-direct-card {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    min-height: 118px !important;
    padding: 1.18rem !important;
  }

  .contact-direct-icon {
    height: 40px !important;
    width: 40px !important;
  }

  .contact-direct-social {
    min-height: 0 !important;
    padding: 1.18rem !important;
  }

  .contact-editorial-cta {
    min-height: 0 !important;
    padding: 1.55rem !important;
  }

  .contact-editorial-line {
    margin-bottom: 1.7rem !important;
  }

  .contact-editorial-cta h3 {
    font-size: clamp(2.45rem, 10vw, 3.55rem) !important;
  }
}

/* 2026-07-28: mobile UX polish for header/menu, hero, projects and contact. */
@media (max-width: 820px) {
  .site-header {
    min-height: 128px !important;
  }

  .site-header .site-logo img {
    height: auto !important;
    max-width: min(258px, 66vw) !important;
    width: min(258px, 66vw) !important;
  }

  .mobile-menu-button {
    align-items: center !important;
    display: inline-flex !important;
    height: 44px !important;
    justify-content: center !important;
    width: 44px !important;
  }

  .mobile-panel.is-open {
    inset: 128px 0 0 auto !important;
    max-width: min(86vw, 390px) !important;
    overflow-y: auto !important;
  }

  .hero-section {
    min-height: calc(100svh - 128px) !important;
  }

  .hero-content {
    bottom: auto !important;
    left: clamp(1.35rem, 7vw, 2.2rem) !important;
    max-width: min(84vw, 22rem) !important;
    top: 27% !important;
  }

  .hero-content h1 {
    font-size: clamp(3.05rem, 14vw, 4.35rem) !important;
    letter-spacing: -0.07em !important;
    line-height: 0.9 !important;
    max-width: 9.6em !important;
  }

  .hero-content p {
    font-size: clamp(1.02rem, 4.3vw, 1.18rem) !important;
    line-height: 1.58 !important;
    margin-top: 1.35rem !important;
    max-width: 18.5rem !important;
  }

  .hero-link {
    font-size: 0.83rem !important;
    margin-top: 2.1rem !important;
  }

  .projects-section {
    background: #fff !important;
  }

  .projects-section .section-inner {
    padding-left: clamp(1.4rem, 7vw, 2rem) !important;
    padding-right: clamp(1.4rem, 7vw, 2rem) !important;
  }

  .projects-heading {
    background: transparent !important;
    display: block !important;
    min-height: 0 !important;
    padding: clamp(3.25rem, 12vw, 4.4rem) 0 0 !important;
    position: relative !important;
  }

  .projects-heading::before {
    color: rgba(23, 23, 23, 0.06) !important;
    content: "01" !important;
    font-family: var(--roitenberg-display), var(--font-sans), Arial, sans-serif !important;
    font-size: clamp(5.8rem, 25vw, 7.4rem) !important;
    font-weight: 520 !important;
    letter-spacing: -0.08em !important;
    line-height: 0.8 !important;
    position: absolute !important;
    right: 0.18rem !important;
    top: 2.65rem !important;
    transform: none !important;
    z-index: 0 !important;
  }

  .projects-title-block {
    max-width: none !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .projects-title-block h2 {
    font-size: clamp(3.4rem, 15.6vw, 4.65rem) !important;
    font-weight: 430 !important;
    letter-spacing: -0.075em !important;
    line-height: 0.92 !important;
    margin: 0 !important;
  }

  .projects-title-block p:not(.section-kicker) {
    color: rgba(23, 23, 23, 0.62) !important;
    font-size: clamp(1.02rem, 4.25vw, 1.16rem) !important;
    line-height: 1.65 !important;
    margin: 1.35rem 0 0 !important;
    max-width: 24rem !important;
  }

  .projects-heading .projects-filter-area {
    background: transparent !important;
    margin: 2.05rem 0 0 !important;
    max-width: none !important;
    padding: 0 !important;
    position: static !important;
    width: 100% !important;
  }

  .projects-heading .project-filters,
  .project-filters {
    background: rgba(23, 23, 23, 0.055) !important;
    border: 1px solid rgba(23, 23, 23, 0.085) !important;
    border-radius: 18px !important;
    display: grid !important;
    gap: 0.42rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 0 !important;
    max-width: none !important;
    padding: 0.42rem !important;
    width: 100% !important;
  }

  .projects-heading .project-filters button,
  .project-filters button {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 13px !important;
    color: rgba(23, 23, 23, 0.66) !important;
    display: flex !important;
    font-family: var(--roitenberg-grotesk), var(--font-sans), Arial, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 440 !important;
    justify-content: center !important;
    letter-spacing: 0.01em !important;
    min-height: 42px !important;
    padding: 0.72rem 0.78rem !important;
    text-align: center !important;
    text-transform: none !important;
    width: 100% !important;
  }

  .projects-heading .project-filters button span,
  .project-filters button span {
    text-align: center !important;
    width: auto !important;
  }

  .project-filters button small {
    display: none !important;
  }

  .project-filters button.is-active {
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(23, 23, 23, 0.075) !important;
    color: #171717 !important;
  }

  .projects-total {
    display: none !important;
  }

  .projects-controls {
    background: transparent !important;
    border: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin: 1rem 0 0 !important;
    padding: 0 !important;
    position: static !important;
    width: 100% !important;
  }

  .project-view-switch {
    background: rgba(23, 23, 23, 0.055) !important;
    border: 1px solid rgba(23, 23, 23, 0.085) !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    gap: 0.28rem !important;
    padding: 0.28rem !important;
    width: auto !important;
  }

  .project-view-switch span {
    display: none !important;
  }

  .project-view-switch button {
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: rgba(23, 23, 23, 0.52) !important;
    height: 40px !important;
    width: 40px !important;
  }

  .project-view-switch button.is-active {
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(23, 23, 23, 0.07) !important;
    color: #171717 !important;
  }

  .project-grid,
  .project-list {
    margin-top: 1.1rem !important;
  }

  .contact-section {
    background: #fff !important;
  }

  .contact-section .section-inner,
  .contact-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .contact-redesign-intro {
    padding-left: clamp(1.4rem, 7vw, 2rem) !important;
    padding-right: clamp(1.4rem, 7vw, 2rem) !important;
  }

  .contact-redesign-intro h2 {
    font-family: var(--roitenberg-display), var(--font-sans), Arial, sans-serif !important;
    font-size: clamp(3.55rem, 16vw, 4.85rem) !important;
    font-weight: 430 !important;
    letter-spacing: -0.075em !important;
    line-height: 0.92 !important;
  }

  .contact-redesign-copy {
    color: rgba(23, 23, 23, 0.62) !important;
    font-family: var(--roitenberg-grotesk), var(--font-sans), Arial, sans-serif !important;
    font-size: clamp(1.02rem, 4.25vw, 1.16rem) !important;
    line-height: 1.65 !important;
    max-width: 24rem !important;
  }

  .contact-info,
  .contact-map,
  .contact-form {
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  .contact-info address,
  .contact-section .social-links,
  .contact-grid .contact-form {
    padding-left: clamp(1.4rem, 7vw, 2rem) !important;
    padding-right: clamp(1.4rem, 7vw, 2rem) !important;
  }

  .contact-grid .contact-form {
    background: #fff !important;
    border-top: 1px solid rgba(23, 23, 23, 0.08) !important;
    padding-bottom: 2rem !important;
    padding-top: 1.75rem !important;
  }

  .contact-form > .section-kicker {
    font-family: var(--roitenberg-display), var(--font-sans), Arial, sans-serif !important;
    font-size: 1.45rem !important;
    font-weight: 440 !important;
    letter-spacing: -0.035em !important;
    text-transform: none !important;
  }

  .contact-grid .contact-form .field label {
    color: rgba(23, 23, 23, 0.62) !important;
    font-family: var(--roitenberg-grotesk), var(--font-sans), Arial, sans-serif !important;
    font-size: 0.96rem !important;
    font-weight: 420 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .contact-grid .contact-form input,
  .contact-grid .contact-form textarea,
  .contact-grid .contact-form select {
    border-radius: 16px !important;
    font-family: var(--roitenberg-grotesk), var(--font-sans), Arial, sans-serif !important;
    font-size: 1rem !important;
    letter-spacing: 0 !important;
  }
}

/* 2026-07-27: final EOF override, editorial metrics without card background. */
.studio-stats-separator .studio-stats {
  border-bottom: 1px solid rgba(23, 23, 23, 0.12) !important;
  border-top: 1px solid rgba(23, 23, 23, 0.12) !important;
  gap: 0 !important;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.92fr) minmax(0, 0.92fr) !important;
}

.studio-stats-separator .studio-stats div {
  align-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-right: 1px solid rgba(23, 23, 23, 0.11) !important;
  box-shadow: none !important;
  min-height: clamp(170px, 13.5vw, 225px) !important;
  padding: clamp(2rem, 3vw, 3.25rem) clamp(1.4rem, 3vw, 3.4rem) !important;
  row-gap: clamp(0.82rem, 1.05vw, 1.12rem) !important;
}

.studio-stats-separator .studio-stats div:last-child {
  border-right: 0 !important;
}

.studio-stats-separator .studio-stats div::before,
.studio-stats-separator .studio-stats div::after {
  display: none !important;
}

.studio-stats-separator .studio-stats dt,
.studio-stats-separator .studio-stats div:first-child dt,
.studio-stats-separator .studio-stats div:nth-child(2) dt,
.studio-stats-separator .studio-stats div:nth-child(3) dt {
  align-items: baseline !important;
  color: #171717 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  font-family: var(--roitenberg-display), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(4.6rem, 8vw, 8.65rem) !important;
  font-weight: 430 !important;
  gap: 0 !important;
  justify-content: flex-start !important;
  letter-spacing: -0.07em !important;
  line-height: 0.78 !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  width: 100% !important;
}

.studio-stats-separator .studio-stats div:first-child dt {
  font-size: clamp(4.8rem, 8.35vw, 8.95rem) !important;
}

.studio-stat-prefix,
.studio-stat-number,
.studio-stat-suffix {
  display: inline-block !important;
}

.studio-stat-prefix {
  color: rgba(23, 23, 23, 0.5) !important;
  font-size: 0.34em !important;
  font-weight: 470 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  margin-right: 0.08em !important;
  transform: translateY(-0.42em) !important;
}

.studio-stat-suffix {
  color: rgba(23, 23, 23, 0.58) !important;
  font-size: 0.42em !important;
  font-weight: 470 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  margin-left: 0.08em !important;
  transform: translateY(-0.02em) !important;
}

.studio-stats-separator .studio-stats dd,
.studio-stats-separator .studio-stats div:nth-child(2) dd,
.studio-stats-separator .studio-stats div:nth-child(3) dd {
  color: rgba(23, 23, 23, 0.64) !important;
  font-size: clamp(0.95rem, 0.98vw, 1.08rem) !important;
  font-weight: 430 !important;
  justify-content: flex-start !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  width: 100% !important;
}

@media (max-width: 1024px) {
  .studio-stats-separator .studio-stats {
    grid-template-columns: 1fr !important;
  }

  .studio-stats-separator .studio-stats div {
    border-right: 0 !important;
    border-top: 1px solid rgba(23, 23, 23, 0.1) !important;
    min-height: 132px !important;
  }

  .studio-stats-separator .studio-stats div:first-child {
    border-top: 0 !important;
  }
}

@media (max-width: 820px) {
  .studio-stats-separator .studio-stats div {
    min-height: 118px !important;
    padding: 1.35rem 0 !important;
  }

  .studio-stats-separator .studio-stats dt,
  .studio-stats-separator .studio-stats div:first-child dt,
  .studio-stats-separator .studio-stats div:nth-child(2) dt,
  .studio-stats-separator .studio-stats div:nth-child(3) dt {
    font-size: clamp(3.35rem, 16vw, 4.75rem) !important;
  }

  .studio-stats-separator .studio-stats div:first-child dt {
    font-size: clamp(3.65rem, 17vw, 5rem) !important;
  }
}

/* 2026-07-27: metrics without card background, with plus sign before values. */
.studio-stats-separator .studio-stats {
  border-bottom: 1px solid rgba(23, 23, 23, 0.12) !important;
  border-top: 1px solid rgba(23, 23, 23, 0.12) !important;
  gap: 0 !important;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.92fr) minmax(0, 0.92fr) !important;
}

.studio-stats-separator .studio-stats div {
  align-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-right: 1px solid rgba(23, 23, 23, 0.11) !important;
  box-shadow: none !important;
  min-height: clamp(170px, 13.5vw, 225px) !important;
  padding: clamp(2rem, 3vw, 3.25rem) clamp(1.4rem, 3vw, 3.4rem) !important;
  row-gap: clamp(0.82rem, 1.05vw, 1.12rem) !important;
}

.studio-stats-separator .studio-stats div:last-child {
  border-right: 0 !important;
}

.studio-stats-separator .studio-stats div::before,
.studio-stats-separator .studio-stats div::after {
  display: none !important;
}

.studio-stats-separator .studio-stats dt,
.studio-stats-separator .studio-stats div:first-child dt,
.studio-stats-separator .studio-stats div:nth-child(2) dt,
.studio-stats-separator .studio-stats div:nth-child(3) dt {
  align-items: baseline !important;
  color: #171717 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  font-family: var(--roitenberg-display), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(4.6rem, 8vw, 8.65rem) !important;
  font-weight: 430 !important;
  gap: 0 !important;
  justify-content: flex-start !important;
  letter-spacing: -0.07em !important;
  line-height: 0.78 !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  width: 100% !important;
}

.studio-stats-separator .studio-stats div:first-child dt {
  font-size: clamp(4.8rem, 8.35vw, 8.95rem) !important;
}

.studio-stat-prefix,
.studio-stat-number,
.studio-stat-suffix {
  display: inline-block !important;
}

.studio-stat-prefix {
  color: rgba(23, 23, 23, 0.5) !important;
  font-size: 0.34em !important;
  font-weight: 470 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  margin-right: 0.08em !important;
  transform: translateY(-0.42em) !important;
}

.studio-stat-suffix {
  color: rgba(23, 23, 23, 0.58) !important;
  font-size: 0.42em !important;
  font-weight: 470 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  margin-left: 0.08em !important;
  transform: translateY(-0.02em) !important;
}

.studio-stats-separator .studio-stats dd,
.studio-stats-separator .studio-stats div:nth-child(2) dd,
.studio-stats-separator .studio-stats div:nth-child(3) dd {
  color: rgba(23, 23, 23, 0.64) !important;
  font-size: clamp(0.95rem, 0.98vw, 1.08rem) !important;
  font-weight: 430 !important;
  justify-content: flex-start !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  width: 100% !important;
}

@media (max-width: 1024px) {
  .studio-stats-separator .studio-stats {
    grid-template-columns: 1fr !important;
  }

  .studio-stats-separator .studio-stats div {
    border-right: 0 !important;
    border-top: 1px solid rgba(23, 23, 23, 0.1) !important;
    min-height: 132px !important;
  }

  .studio-stats-separator .studio-stats div:first-child {
    border-top: 0 !important;
  }
}

@media (max-width: 820px) {
  .studio-stats-separator .studio-stats div {
    min-height: 118px !important;
    padding: 1.35rem 0 !important;
  }

  .studio-stats-separator .studio-stats dt,
  .studio-stats-separator .studio-stats div:first-child dt,
  .studio-stats-separator .studio-stats div:nth-child(2) dt,
  .studio-stats-separator .studio-stats div:nth-child(3) dt {
    font-size: clamp(3.35rem, 16vw, 4.75rem) !important;
  }

  .studio-stats-separator .studio-stats div:first-child dt {
    font-size: clamp(3.65rem, 17vw, 5rem) !important;
  }
}

/* 2026-07-27: editorial metric treatment inspired by Fekete reference. */
.studio-stats-separator {
  background:
    radial-gradient(circle at 12% 28%, rgba(23, 23, 23, 0.035), transparent 28%),
    #ffffff !important;
  overflow: hidden !important;
  padding: clamp(4.9rem, 7.2vw, 8.2rem) clamp(1rem, 5vw, 6rem) !important;
}

.studio-stats-separator-inner {
  max-width: min(1320px, 92vw) !important;
}

.studio-stats-separator-inner::before,
.studio-stats-separator-inner::after {
  display: none !important;
}

.studio-stats-separator .studio-stats {
  align-items: stretch !important;
  display: grid !important;
  gap: clamp(1.1rem, 1.8vw, 1.85rem) !important;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.86fr) minmax(0, 0.86fr) !important;
}

.studio-stats-separator .studio-stats div {
  align-content: end !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(23, 23, 23, 0.085) !important;
  border-radius: clamp(18px, 1.45vw, 24px) !important;
  box-shadow: 0 30px 80px rgba(23, 23, 23, 0.055) !important;
  display: grid !important;
  isolation: isolate !important;
  justify-items: start !important;
  min-height: clamp(230px, 19vw, 305px) !important;
  overflow: hidden !important;
  padding: clamp(1.45rem, 2.15vw, 2.45rem) !important;
  position: relative !important;
  row-gap: clamp(0.72rem, 0.9vw, 1rem) !important;
}

.studio-stats-separator .studio-stats div::before {
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.85) 44%, transparent 72%) !important;
  content: "" !important;
  display: block !important;
  height: 160% !important;
  left: -70% !important;
  opacity: 0 !important;
  position: absolute !important;
  top: -30% !important;
  transform: rotate(12deg) translateX(-18%) !important;
  transition: opacity 0.45s ease, transform 1.15s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  width: 42% !important;
  z-index: -1 !important;
}

.studio-stats-separator .studio-stats.is-visible div::before,
.studio-stats-separator .studio-stats div:hover::before {
  opacity: 0.5 !important;
  transform: rotate(12deg) translateX(520%) !important;
}

.studio-stats-separator .studio-stats div::after {
  background: rgba(23, 23, 23, 0.12) !important;
  bottom: clamp(4.45rem, 5.3vw, 5.75rem) !important;
  content: "" !important;
  display: block !important;
  height: 1px !important;
  left: clamp(1.45rem, 2.15vw, 2.45rem) !important;
  position: absolute !important;
  right: clamp(1.45rem, 2.15vw, 2.45rem) !important;
  top: auto !important;
}

.studio-stats-separator .studio-stats dt,
.studio-stats-separator .studio-stats div:first-child dt,
.studio-stats-separator .studio-stats div:nth-child(2) dt,
.studio-stats-separator .studio-stats div:nth-child(3) dt {
  align-items: baseline !important;
  color: #171717 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  font-family: var(--roitenberg-display), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(5.2rem, 9.15vw, 9.7rem) !important;
  font-weight: 430 !important;
  gap: 0.18em !important;
  justify-content: flex-start !important;
  letter-spacing: -0.065em !important;
  line-height: 0.78 !important;
  margin: 0 !important;
  padding: 0 0 clamp(1.35rem, 1.65vw, 1.85rem) !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.studio-stats-separator .studio-stats div:first-child dt {
  font-size: clamp(4.2rem, 7.4vw, 7.85rem) !important;
  letter-spacing: -0.075em !important;
}

.studio-stats-separator .studio-stats div:nth-child(2) dt,
.studio-stats-separator .studio-stats div:nth-child(3) dt {
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

.studio-stat-number {
  display: inline-block !important;
}

.studio-stat-suffix {
  color: rgba(23, 23, 23, 0.52) !important;
  display: inline-block !important;
  font-size: 0.22em !important;
  font-weight: 460 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  transform: translateY(-0.16em) !important;
}

.studio-stats-separator .studio-stats dd {
  color: rgba(23, 23, 23, 0.54) !important;
  font-family: var(--roitenberg-grotesk), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(0.9rem, 0.95vw, 1.02rem) !important;
  font-weight: 440 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  text-align: left !important;
  text-transform: none !important;
}

.studio-stats-separator .studio-stats div:nth-child(2) dd,
.studio-stats-separator .studio-stats div:nth-child(3) dd {
  text-align: center !important;
  width: 100% !important;
}

@media (max-width: 1024px) {
  .studio-stats-separator .studio-stats {
    grid-template-columns: 1fr !important;
  }

  .studio-stats-separator .studio-stats div {
    min-height: 178px !important;
  }
}

@media (max-width: 820px) {
  .studio-stats-separator {
    padding: 2.45rem 1rem 2.8rem !important;
  }

  .studio-stats-separator .studio-stats {
    gap: 0.82rem !important;
  }

  .studio-stats-separator .studio-stats div {
    border-radius: 18px !important;
    min-height: 138px !important;
    padding: 1.16rem 1.18rem !important;
  }

  .studio-stats-separator .studio-stats div::after {
    bottom: 3.75rem !important;
    left: 1.18rem !important;
    right: 1.18rem !important;
  }

  .studio-stats-separator .studio-stats dt,
  .studio-stats-separator .studio-stats div:first-child dt,
  .studio-stats-separator .studio-stats div:nth-child(2) dt,
  .studio-stats-separator .studio-stats div:nth-child(3) dt {
    font-size: clamp(4.15rem, 18vw, 5.25rem) !important;
    letter-spacing: -0.065em !important;
    padding-bottom: 1.15rem !important;
  }

  .studio-stats-separator .studio-stats div:first-child dt {
    font-size: clamp(3.2rem, 13.6vw, 4.2rem) !important;
  }

  .studio-stats-separator .studio-stats dd,
  .studio-stats-separator .studio-stats div:nth-child(2) dd,
  .studio-stats-separator .studio-stats div:nth-child(3) dd {
    font-size: 0.98rem !important;
    text-align: left !important;
    width: auto !important;
  }

  .studio-stats-separator .studio-stats div:nth-child(2) dt,
  .studio-stats-separator .studio-stats div:nth-child(3) dt {
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

/* 2026-07-27: hidden legacy contact fields must not reserve mobile space. */
@media (max-width: 820px) {
  .contact-grid .contact-form .field.contact-hidden-field {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    visibility: hidden !important;
  }
}

/* 2026-07-27: complete mobile audit pass for sections 01, 02 and 03. */
@media (max-width: 820px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  #proyectos,
  #estudio,
  #contacto {
    scroll-margin-top: 82px !important;
  }

  .projects-heading {
    display: grid !important;
    gap: 1.55rem !important;
    min-height: auto !important;
    padding: 4.9rem 1rem 1.85rem !important;
  }

  .projects-heading::before,
  .studio-grid::before,
  .contact-grid::before {
    color: rgba(150, 150, 150, 0.18) !important;
    font-family: var(--roitenberg-display), Arial, sans-serif !important;
    font-size: clamp(4.7rem, 22vw, 6.2rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;
    line-height: 0.9 !important;
    right: 1.12rem !important;
    top: 1.15rem !important;
  }

  .projects-title-block {
    max-width: none !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .projects-title-block h2 {
    color: #171717 !important;
    font-family: var(--roitenberg-display), Arial, sans-serif !important;
    font-size: clamp(2.35rem, 12vw, 3.45rem) !important;
    font-weight: 440 !important;
    letter-spacing: -0.018em !important;
    line-height: 0.98 !important;
  }

  .projects-title-block p:not(.section-kicker) {
    color: rgba(23, 23, 23, 0.62) !important;
    font-size: 0.98rem !important;
    line-height: 1.58 !important;
    margin-top: 1.18rem !important;
    max-width: 21rem !important;
  }

  .projects-filter-area,
  .projects-controls {
    left: auto !important;
    margin: 0 !important;
    max-width: none !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
  }

  .projects-heading .project-filters,
  .project-filters {
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  .projects-controls {
    align-items: center !important;
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0 1rem 0.88rem !important;
  }

  .project-grid,
  .project-list {
    gap: 0.58rem !important;
    margin-top: 0 !important;
    padding: 0 1rem !important;
  }

  .project-card button {
    min-height: 226px !important;
  }

  .mobile-projects-more-wrap {
    padding: 1rem 1rem 2rem !important;
  }

  .studio-section {
    background: #ffffff !important;
    margin-top: 0 !important;
  }

  .studio-grid {
    background: #ffffff !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .studio-heading,
  .studio-copy {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .studio-heading {
    min-height: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 4.9rem !important;
  }

  .studio-heading .section-kicker {
    color: #171717 !important;
    font-family: var(--roitenberg-display), Arial, sans-serif !important;
    font-size: clamp(2.2rem, 11vw, 3.25rem) !important;
    font-weight: 440 !important;
    letter-spacing: -0.015em !important;
    line-height: 0.98 !important;
    text-transform: none !important;
  }

  .studio-content {
    display: block !important;
  }

  .studio-copy {
    display: block !important;
    padding-bottom: 2.2rem !important;
    padding-top: 1.05rem !important;
  }

  .studio-copy p {
    color: rgba(23, 23, 23, 0.66) !important;
    font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.62 !important;
    max-width: 22rem !important;
  }

  .studio-copy .editorial-link {
    color: #171717 !important;
    margin-top: 1.25rem !important;
  }

  .studio-grid::after {
    aspect-ratio: 1.12 !important;
    background-position: center top !important;
    display: block !important;
    height: auto !important;
    margin-top: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  .studio-stats-separator {
    background: #ffffff !important;
    padding: 2.15rem 1rem 2.25rem !important;
  }

  .studio-stats-separator .studio-stats {
    display: grid !important;
    gap: 0.72rem !important;
    grid-template-columns: 1fr !important;
  }

  .studio-stats-separator .studio-stats div {
    align-items: center !important;
    background: rgba(255, 255, 255, 0.74) !important;
    border: 1px solid rgba(23, 23, 23, 0.095) !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 40px rgba(23, 23, 23, 0.045) !important;
    display: grid !important;
    grid-template-columns: minmax(8.8rem, 0.9fr) minmax(0, 1fr) !important;
    min-height: 84px !important;
    padding: 1rem 1.05rem !important;
    row-gap: 0 !important;
  }

  .studio-stats-separator .studio-stats div::before {
    display: none !important;
  }

  .studio-stats-separator .studio-stats dt,
  .studio-stats-separator .studio-stats div:first-child dt,
  .studio-stats-separator .studio-stats div:nth-child(2) dt,
  .studio-stats-separator .studio-stats div:nth-child(3) dt {
    color: #171717 !important;
    font-family: var(--roitenberg-display), Arial, sans-serif !important;
    font-size: clamp(2.1rem, 11vw, 3.05rem) !important;
    font-weight: 520 !important;
    letter-spacing: -0.02em !important;
    line-height: 0.95 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .studio-stats-separator .studio-stats dd {
    align-self: center !important;
    color: rgba(23, 23, 23, 0.58) !important;
    font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
    font-size: 0.98rem !important;
    font-weight: 420 !important;
    letter-spacing: 0 !important;
    line-height: 1.22 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .contact-section {
    background: #ffffff !important;
  }

  .contact-grid {
    display: grid !important;
    gap: 1rem !important;
    grid-template-columns: 1fr !important;
    max-width: none !important;
    padding: 0 1rem 2.7rem !important;
  }

  .contact-grid::before {
    right: 1.12rem !important;
    top: 1.15rem !important;
  }

  .contact-redesign-intro {
    margin: 0 !important;
    max-width: none !important;
    padding: 4.9rem 0 1.35rem !important;
  }

  .contact-redesign-eyebrow {
    color: rgba(23, 23, 23, 0.58) !important;
    font-size: 0.88rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .contact-redesign-intro h2 {
    color: #171717 !important;
    font-family: var(--roitenberg-display), Arial, sans-serif !important;
    font-size: clamp(2.55rem, 14vw, 4.05rem) !important;
    font-weight: 440 !important;
    letter-spacing: -0.018em !important;
    line-height: 0.98 !important;
    margin-top: 0.4rem !important;
    text-transform: none !important;
  }

  .contact-redesign-copy {
    color: rgba(23, 23, 23, 0.62) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-top: 1rem !important;
    max-width: 22rem !important;
  }

  .contact-form {
    align-self: stretch !important;
    display: grid !important;
    gap: 0.85rem !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 1.05rem !important;
    width: 100% !important;
  }

  .contact-form .form-row {
    display: grid !important;
    gap: 0.85rem !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .contact-form .field,
  .contact-form .contact-building-field {
    display: grid !important;
    gap: 0.4rem !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  .contact-form .field label {
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    font-size: 1rem !important;
    line-height: 1.35 !important;
    min-height: 48px !important;
    width: 100% !important;
  }

  .contact-form textarea {
    min-height: 96px !important;
  }

  .contact-building-field::after {
    top: 2.58rem !important;
  }

  .contact-form .form-submit {
    font-size: 0.96rem !important;
    min-height: 50px !important;
    width: 100% !important;
  }

  .contact-section .social-links {
    justify-content: flex-start !important;
    padding: 1rem !important;
  }

  .contact-map iframe {
    aspect-ratio: 1.22 !important;
    min-height: 280px !important;
  }

  .contact-info address {
    padding: 1rem !important;
  }

  .contact-info address p {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }
}

/* 2026-07-27: final icon rendering guard. Lucide icons stay outline; WhatsApp stays solid. */
.contact-section .social-links a svg:not(.whatsapp-mark) {
  fill: none !important;
  stroke: currentColor !important;
}

.contact-section .social-links a .whatsapp-mark {
  fill: currentColor !important;
  stroke: none !important;
}

.contact-section .social-links a:hover svg:not(.whatsapp-mark),
.contact-section .social-links a:focus-visible svg:not(.whatsapp-mark) {
  fill: none !important;
  stroke: #ffffff !important;
}

.contact-section .social-links a:hover .whatsapp-mark,
.contact-section .social-links a:focus-visible .whatsapp-mark {
  fill: #ffffff !important;
  stroke: none !important;
}

/* 2026-07-27: keep Lucide social icons stroked; only WhatsApp is solid. */
.contact-section .social-links a svg:not(.whatsapp-mark) {
  fill: none !important;
  stroke: currentColor !important;
}

.contact-section .social-links a .whatsapp-mark {
  fill: currentColor !important;
  stroke: none !important;
}

.contact-section .social-links a:hover svg:not(.whatsapp-mark),
.contact-section .social-links a:focus-visible svg:not(.whatsapp-mark) {
  fill: none !important;
  stroke: #ffffff !important;
}

.contact-section .social-links a:hover .whatsapp-mark,
.contact-section .social-links a:focus-visible .whatsapp-mark {
  fill: #ffffff !important;
  stroke: none !important;
}

/* 2026-07-27: final social contact polish after card refinements. */
.contact-section .social-links a {
  align-items: center !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  flex: 0 0 42px !important;
  height: 42px !important;
  justify-content: center !important;
  min-height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  width: 42px !important;
}

.contact-section .social-links a.whatsapp {
  font-size: 0 !important;
}

.contact-section .social-links a.whatsapp::before,
.contact-section .social-links a.whatsapp::after {
  content: none !important;
  display: none !important;
}

.contact-section .social-links a svg,
.contact-section .social-links a .whatsapp-mark {
  color: currentColor !important;
  fill: currentColor !important;
  height: 18px !important;
  stroke: currentColor !important;
  width: 18px !important;
}

.contact-section .social-links a:hover,
.contact-section .social-links a:focus-visible {
  background: #171717 !important;
  border-color: #171717 !important;
  color: #ffffff !important;
}

.contact-section .social-links a:hover svg,
.contact-section .social-links a:focus-visible svg,
.contact-section .social-links a:hover .whatsapp-mark,
.contact-section .social-links a:focus-visible .whatsapp-mark {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

@media (max-width: 560px) {
  .contact-section .social-links a {
    flex-basis: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    min-width: 40px !important;
    width: 40px !important;
  }
}

.contact-form .contact-building-field::before {
  display: none !important;
  content: none !important;
}

@media (max-width: 980px) {
  .contact-grid {
    gap: 1.65rem !important;
  }

  .contact-info {
    max-width: 22rem !important;
  }
}

@media (max-width: 560px) {
  .contact-section {
    padding-top: 3.8rem !important;
  }

  .contact-grid {
    gap: 1.35rem !important;
  }

  .contact-form {
    gap: 0.78rem !important;
  }

  .contact-form .form-submit {
    justify-self: stretch !important;
    justify-content: center !important;
  }
}

/* Subtle typography and line-weight pass. */
.desktop-nav a,
.mobile-panel a {
  font-weight: 450 !important;
  letter-spacing: 0.015em !important;
}

.desktop-nav a {
  font-size: 0.78rem !important;
}

.projects-heading .project-filters button,
.project-filters button {
  border-bottom-color: rgba(255, 255, 255, 0.32) !important;
  font-weight: 500 !important;
  letter-spacing: 0.012em !important;
}

.projects-heading .project-filters button span {
  font-weight: 500 !important;
}

.editorial-link,
.project-cta,
.project-list-action,
.modal-accordion-trigger span,
.technical-data dd span,
.form-submit {
  font-weight: 500 !important;
  letter-spacing: 0.018em !important;
}

.projects-title-block p,
.studio-copy p,
.contact-redesign-copy,
.contact-info address span,
.contact-info address a,
.contact-form input,
.contact-form select {
  font-weight: 400 !important;
}

.contact-info address p:not(:last-child)::after {
  background: rgba(23, 23, 23, 0.06) !important;
  height: 1px !important;
}

.contact-form input,
.contact-form select {
  border-bottom-color: rgba(23, 23, 23, 0.14) !important;
  font-size: 0.96rem !important;
  min-height: 38px !important;
}

.contact-form input::placeholder {
  color: rgba(23, 23, 23, 0.42) !important;
}

.contact-form .field label {
  color: rgba(23, 23, 23, 0.54) !important;
  font-size: 0.67rem !important;
}

.contact-form .form-submit {
  border-color: rgba(23, 23, 23, 0.24) !important;
  font-size: 0.75rem !important;
}

.contact-map {
  margin-top: 1.05rem !important;
  overflow: hidden !important;
  position: relative !important;
  width: min(100%, 236px) !important;
}

.contact-map::before {
  background: rgba(23, 23, 23, 0.06) !important;
  content: "" !important;
  display: block !important;
  height: 1px !important;
  margin-bottom: 0.82rem !important;
  width: 7.5rem !important;
}

.contact-map iframe {
  aspect-ratio: 1.52 !important;
  border: 0 !important;
  display: block !important;
  filter: grayscale(1) contrast(0.92) brightness(1.03) !important;
  height: auto !important;
  opacity: 0.86 !important;
  width: 100% !important;
}

.contact-map:hover iframe,
.contact-map:focus-within iframe {
  filter: grayscale(0.72) contrast(0.96) brightness(1.02) !important;
  opacity: 0.96 !important;
}

.footer-brand img {
  max-height: 44px !important;
  width: clamp(168px, 12.2vw, 224px) !important;
}

.site-footer {
  padding-block: clamp(1.65rem, 2.35vw, 2.45rem) !important;
}

@media (max-width: 980px) {
  .contact-map {
    width: min(100%, 25rem) !important;
  }
}

@media (max-width: 560px) {
  .contact-form input,
  .contact-form select {
    font-size: 0.98rem !important;
  }

  .contact-map {
    width: 100% !important;
  }

  .contact-map iframe {
    aspect-ratio: 1.75 !important;
  }
}

/* Contact left rail refinement: larger copy and a more intentional map block. */
.contact-grid {
  grid-template-columns: minmax(260px, 340px) minmax(0, 660px) !important;
}

.contact-info > .section-kicker {
  font-size: 0.96rem !important;
  margin-bottom: 1.18rem !important;
}

.contact-info address p {
  gap: 0.86rem !important;
  grid-template-columns: 23px minmax(0, 1fr) !important;
  padding: 0.74rem 0 0.84rem !important;
}

.contact-info address svg {
  height: 17px !important;
  margin-top: 0.2rem !important;
  width: 17px !important;
}

.contact-info address span,
.contact-info address a {
  color: rgba(23, 23, 23, 0.72) !important;
  font-size: 0.92rem !important;
  line-height: 1.46 !important;
}

.contact-info address p.contact-address-row span::before,
.contact-info address p.contact-phone-row a::before,
.contact-info address p.contact-whatsapp-row a::before,
.contact-info address p.contact-email-row a::before {
  color: rgba(23, 23, 23, 0.9) !important;
  font-size: 0.72rem !important;
  margin-bottom: 0.2rem !important;
}

.contact-info address p:not(:last-child)::after {
  left: 2.34rem !important;
  width: min(182px, calc(100% - 2.34rem)) !important;
}

.contact-section .social-links {
  margin-top: 1.2rem !important;
}

.contact-map {
  background: #f7f7f4 !important;
  border: 1px solid rgba(23, 23, 23, 0.09) !important;
  margin-top: 1.22rem !important;
  padding: 0.42rem !important;
  width: min(100%, 330px) !important;
}

.contact-map::before {
  display: none !important;
  content: none !important;
}

.contact-map iframe {
  aspect-ratio: 1.22 !important;
  filter: grayscale(0.88) contrast(0.96) brightness(1.04) !important;
  opacity: 0.95 !important;
}

.contact-map-caption {
  align-items: center !important;
  border-top: 1px solid rgba(23, 23, 23, 0.08) !important;
  display: flex !important;
  gap: 0.8rem !important;
  justify-content: space-between !important;
  padding: 0.72rem 0.16rem 0.18rem !important;
}

.contact-map-caption span,
.contact-map-caption a {
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: 0.75rem !important;
  line-height: 1.25 !important;
}

.contact-map-caption span {
  color: rgba(23, 23, 23, 0.66) !important;
}

.contact-map-caption a {
  color: rgba(23, 23, 23, 0.92) !important;
  flex: 0 0 auto !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.contact-map-caption a::after {
  content: "\2192" !important;
  display: inline-block !important;
  margin-left: 0.42rem !important;
  transition: transform 180ms ease !important;
}

.contact-map-caption a:hover::after,
.contact-map-caption a:focus-visible::after {
  transform: translateX(3px) !important;
}

@media (max-width: 980px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
  }

  .contact-info {
    max-width: 25rem !important;
  }
}

@media (max-width: 560px) {
  .contact-info {
    max-width: none !important;
  }

  .contact-map {
    width: 100% !important;
  }

  .contact-map iframe {
    aspect-ratio: 1.45 !important;
  }
}

/* Site coherence pass: align contact/form rhythm with the editorial system. */
.contact-section {
  --contact-line: rgba(23, 23, 23, 0.105);
  --contact-line-strong: rgba(23, 23, 23, 0.2);
  --contact-muted: rgba(23, 23, 23, 0.58);
  --contact-soft: rgba(23, 23, 23, 0.035);
  color: #171717 !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
}

.contact-grid {
  align-items: start !important;
  gap: clamp(2.8rem, 5vw, 5.6rem) !important;
  grid-template-columns: minmax(280px, 360px) minmax(0, 680px) !important;
  max-width: 1180px !important;
}

.contact-redesign-intro {
  margin-bottom: clamp(2.1rem, 3.5vw, 3.8rem) !important;
  max-width: 780px !important;
}

.contact-redesign-eyebrow {
  color: rgba(23, 23, 23, 0.52) !important;
  font-size: clamp(0.72rem, 0.72vw, 0.8rem) !important;
  font-weight: 450 !important;
  letter-spacing: 0.045em !important;
  text-transform: none !important;
}

.contact-redesign-intro h2 {
  color: #171717 !important;
  font-family: var(--roitenberg-display), Arial, sans-serif !important;
  font-size: clamp(3.2rem, 5.1vw, 5.85rem) !important;
  font-weight: 440 !important;
  letter-spacing: -0.018em !important;
  line-height: 0.96 !important;
  text-transform: none !important;
}

.contact-redesign-copy {
  color: var(--contact-muted) !important;
  font-size: clamp(1rem, 1.03vw, 1.08rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.68 !important;
  max-width: 650px !important;
}

.contact-info,
.contact-form {
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
}

.contact-info > .section-kicker,
.contact-form > .section-kicker {
  color: #171717 !important;
  font-family: var(--roitenberg-display), Arial, sans-serif !important;
  font-size: clamp(1.12rem, 1.1vw, 1.28rem) !important;
  font-weight: 450 !important;
  height: auto !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  margin: 0 0 clamp(1.1rem, 1.45vw, 1.55rem) !important;
  min-height: 0 !important;
  text-transform: none !important;
}

.contact-info address {
  border-top: 1px solid var(--contact-line) !important;
}

.contact-info address p {
  border-bottom: 1px solid var(--contact-line) !important;
  gap: 0.95rem !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  padding: 0.92rem 0 !important;
}

.contact-info address p:not(:last-child)::after {
  display: none !important;
  content: none !important;
}

.contact-info address svg {
  color: rgba(23, 23, 23, 0.55) !important;
  height: 18px !important;
  margin-top: 0.16rem !important;
  stroke-width: 1.55 !important;
  width: 18px !important;
}

.contact-info address span,
.contact-info address a {
  color: rgba(23, 23, 23, 0.7) !important;
  font-size: clamp(0.94rem, 0.95vw, 1.01rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.48 !important;
}

.contact-info address p.contact-address-row span::before,
.contact-info address p.contact-phone-row a::before,
.contact-info address p.contact-whatsapp-row a::before,
.contact-info address p.contact-email-row a::before {
  color: #171717 !important;
  font-size: 0.74rem !important;
  font-weight: 520 !important;
  letter-spacing: 0.018em !important;
  line-height: 1.1 !important;
  margin-bottom: 0.24rem !important;
  text-transform: none !important;
}

.contact-section .social-links {
  gap: 0.52rem !important;
  margin-top: 1.12rem !important;
}

.contact-section .social-links a {
  border-color: var(--contact-line-strong) !important;
  border-radius: 999px !important;
  color: rgba(23, 23, 23, 0.76) !important;
  font-size: 0.78rem !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 0.72rem !important;
}

.contact-map {
  background: rgba(255, 255, 255, 0.46) !important;
  border: 1px solid var(--contact-line) !important;
  border-radius: 0 !important;
  margin-top: 1.25rem !important;
  padding: 0 !important;
  width: min(100%, 360px) !important;
}

.contact-map iframe {
  aspect-ratio: 1.42 !important;
  filter: grayscale(0.92) contrast(0.96) brightness(1.04) !important;
  opacity: 0.96 !important;
}

.contact-map-caption {
  border-top: 1px solid var(--contact-line) !important;
  padding: 0.78rem 0.9rem !important;
}

.contact-map-caption span,
.contact-map-caption a {
  font-size: 0.78rem !important;
  letter-spacing: 0 !important;
}

.contact-form {
  align-content: start !important;
  background:
    linear-gradient(90deg, var(--contact-soft) 0 1px, transparent 1px 100%) 0 0 / 1px 100% no-repeat,
    transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  column-gap: clamp(1.35rem, 2.2vw, 2rem) !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  padding: 0 0 0 clamp(1.1rem, 1.55vw, 1.5rem) !important;
  row-gap: clamp(1.02rem, 1.3vw, 1.28rem) !important;
}

.contact-form > .section-kicker {
  grid-column: 1 / -1 !important;
  margin-bottom: 0.08rem !important;
}

.contact-form .form-row {
  display: contents !important;
  margin: 0 !important;
}

.contact-form .field {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.34rem !important;
  margin: 0 !important;
  min-width: 0 !important;
}

.contact-form .field label {
  color: rgba(23, 23, 23, 0.58) !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: clamp(0.82rem, 0.82vw, 0.9rem) !important;
  font-weight: 430 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  text-transform: none !important;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(23, 23, 23, 0.16) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #171717 !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: clamp(1rem, 1.02vw, 1.08rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.32 !important;
  min-height: 42px !important;
  padding: 0.12rem 0 0.58rem !important;
  width: 100% !important;
}

.contact-form textarea {
  min-height: 96px !important;
  resize: vertical !important;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(23, 23, 23, 0.38) !important;
}

.contact-form input:hover,
.contact-form textarea:hover,
.contact-form select:hover,
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-bottom-color: rgba(23, 23, 23, 0.62) !important;
  outline: 0 !important;
}

.contact-hidden-field {
  display: none !important;
}

.contact-building-field {
  grid-column: 1 / -1 !important;
}

.contact-building-field select {
  cursor: pointer !important;
  padding-right: 2.2rem !important;
}

.contact-building-field::after {
  border-bottom-color: rgba(23, 23, 23, 0.5) !important;
  border-right-color: rgba(23, 23, 23, 0.5) !important;
  height: 7px !important;
  right: 0.18rem !important;
  top: 2.18rem !important;
  width: 7px !important;
}

.contact-form .form-submit {
  align-items: center !important;
  background: transparent !important;
  border: 1px solid rgba(23, 23, 23, 0.24) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #171717 !important;
  display: inline-flex !important;
  font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
  font-size: clamp(0.94rem, 0.9vw, 1rem) !important;
  font-weight: 430 !important;
  gap: 0.82rem !important;
  grid-column: 1 / -1 !important;
  justify-self: start !important;
  letter-spacing: 0 !important;
  margin-top: 0.22rem !important;
  min-height: 46px !important;
  padding: 0 1.18rem !important;
  text-transform: none !important;
  width: auto !important;
}

.contact-form .form-submit::after {
  content: "\2192" !important;
  display: inline-block !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

.contact-form .form-submit span[aria-hidden="true"] {
  display: none !important;
}

.contact-form .form-submit:hover,
.contact-form .form-submit:focus-visible {
  background: #171717 !important;
  border-color: #171717 !important;
  color: #ffffff !important;
}

.contact-form .form-status {
  color: rgba(23, 23, 23, 0.62) !important;
  font-size: 0.88rem !important;
  grid-column: 1 / -1 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

@media (max-width: 980px) {
  .contact-grid {
    gap: 2.2rem !important;
    grid-template-columns: 1fr !important;
  }

  .contact-info,
  .contact-form {
    grid-column: 1 !important;
    max-width: none !important;
  }

  .contact-form {
    padding-left: 1rem !important;
  }
}

@media (max-width: 560px) {
  .contact-redesign-intro h2 {
    font-size: clamp(2.65rem, 16vw, 4.05rem) !important;
  }

  .contact-form {
    display: flex !important;
    padding-left: 0.88rem !important;
    row-gap: 1rem !important;
  }

  .contact-form .field label {
    font-size: 0.86rem !important;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    font-size: 1rem !important;
    min-height: 42px !important;
  }

  .contact-form textarea {
    min-height: 88px !important;
  }

  .contact-form .form-submit {
    min-height: 46px !important;
    padding-inline: 1.05rem !important;
  }
}

/* 2026-07-27: remove the secondary black logo from section 02. */
.studio-heading-logo {
  display: none !important;
}

/* 2026-07-27: final form cleanup after runtime field normalization. */
.contact-form .field.contact-hidden-field {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  visibility: hidden !important;
}

.contact-form {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
}

/* 2026-07-27: contact readable scale, closer to the project's technical data. */
.contact-redesign-copy {
  font-size: clamp(1.05rem, 1.14vw, 1.24rem) !important;
  line-height: 1.72 !important;
}

.contact-info address p {
  gap: 1.05rem !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  padding: 1.02rem 0 !important;
}

.contact-info address svg {
  height: 20px !important;
  width: 20px !important;
}

.contact-info address span,
.contact-info address a {
  font-size: clamp(1.04rem, 1.1vw, 1.2rem) !important;
  line-height: 1.55 !important;
}

.contact-info address p.contact-address-row span::before,
.contact-info address p.contact-phone-row a::before,
.contact-info address p.contact-whatsapp-row a::before,
.contact-info address p.contact-email-row a::before {
  font-size: clamp(0.86rem, 0.82vw, 0.94rem) !important;
  margin-bottom: 0.3rem !important;
}

.contact-form {
  row-gap: clamp(1.16rem, 1.55vw, 1.48rem) !important;
}

.contact-form > .section-kicker {
  font-size: clamp(1.24rem, 1.25vw, 1.42rem) !important;
}

.contact-form .field {
  gap: 0.42rem !important;
}

.contact-form .field label {
  font-size: clamp(0.96rem, 0.94vw, 1.06rem) !important;
  line-height: 1.24 !important;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  font-size: clamp(1.08rem, 1.12vw, 1.22rem) !important;
  line-height: 1.36 !important;
  min-height: 48px !important;
  padding-bottom: 0.68rem !important;
}

.contact-building-field::after {
  top: 2.5rem !important;
}

.contact-form .form-submit {
  font-size: clamp(1rem, 1vw, 1.08rem) !important;
  min-height: 50px !important;
  padding-inline: 1.28rem !important;
}

.contact-map-caption span,
.contact-map-caption a {
  font-size: clamp(0.88rem, 0.86vw, 0.96rem) !important;
}

@media (max-width: 560px) {
  .contact-info address span,
  .contact-info address a,
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    font-size: 1.06rem !important;
  }

  .contact-form .field label {
    font-size: 0.94rem !important;
  }
}

/* 2026-07-27: contact cards A+B / C, with softer visual detail. */
.contact-section {
  --contact-card-bg: rgba(255, 255, 255, 0.78);
  --contact-card-border: rgba(23, 23, 23, 0.105);
  --contact-card-shadow: 0 18px 55px rgba(23, 23, 23, 0.075);
  --contact-icon-bg: rgba(167, 122, 67, 0.12);
  --contact-icon-ink: #9b7140;
}

.contact-grid {
  align-items: start !important;
  gap: clamp(1.8rem, 3.2vw, 3rem) !important;
  grid-template-columns: minmax(300px, 370px) minmax(0, 760px) !important;
  max-width: 1230px !important;
}

.contact-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.05rem !important;
}

.contact-info address {
  background: var(--contact-card-bg) !important;
  border: 1px solid var(--contact-card-border) !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: 0 13px 38px rgba(23, 23, 23, 0.045) !important;
  padding: clamp(1.15rem, 1.55vw, 1.55rem) clamp(1rem, 1.45vw, 1.35rem) 0.2rem !important;
}

.contact-info address p {
  border-bottom-color: rgba(23, 23, 23, 0.075) !important;
  gap: 1rem !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  padding: 0.95rem 0 !important;
}

.contact-info address p:first-child {
  padding-top: 0 !important;
}

.contact-info address p:last-child {
  border-bottom: 0 !important;
  padding-bottom: 0.95rem !important;
}

.contact-info address svg {
  align-self: start !important;
  background: var(--contact-icon-bg) !important;
  border: 1px solid rgba(167, 122, 67, 0.13) !important;
  border-radius: 999px !important;
  color: var(--contact-icon-ink) !important;
  height: 42px !important;
  margin-top: 0 !important;
  padding: 10px !important;
  stroke-width: 1.65 !important;
  width: 42px !important;
}

.contact-info address span,
.contact-info address a {
  color: rgba(23, 23, 23, 0.76) !important;
}

.contact-info address p.contact-address-row span::before,
.contact-info address p.contact-phone-row a::before,
.contact-info address p.contact-whatsapp-row a::before,
.contact-info address p.contact-email-row a::before {
  color: rgba(23, 23, 23, 0.92) !important;
  font-weight: 540 !important;
}

.contact-section .social-links {
  background: var(--contact-card-bg) !important;
  border: 1px solid var(--contact-card-border) !important;
  border-radius: 0 0 18px 18px !important;
  border-top: 0 !important;
  box-shadow: 0 18px 45px rgba(23, 23, 23, 0.055) !important;
  gap: 0.68rem !important;
  margin-top: -1.05rem !important;
  padding: 0.95rem clamp(1rem, 1.45vw, 1.35rem) 1.2rem !important;
}

.contact-section .social-links a {
  background: rgba(167, 122, 67, 0.095) !important;
  border-color: rgba(167, 122, 67, 0.16) !important;
  color: rgba(23, 23, 23, 0.76) !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 0.86rem !important;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease !important;
}

.contact-section .social-links a:hover,
.contact-section .social-links a:focus-visible {
  background: #171717 !important;
  border-color: #171717 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.contact-map {
  background: var(--contact-card-bg) !important;
  border: 1px solid var(--contact-card-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--contact-card-shadow) !important;
  margin-top: 0 !important;
  overflow: hidden !important;
  padding: 0.48rem !important;
  width: 100% !important;
}

.contact-map iframe {
  aspect-ratio: 1.52 !important;
  border-radius: 14px 14px 10px 10px !important;
}

.contact-map-caption {
  border-top: 0 !important;
  padding: 0.82rem 0.52rem 0.28rem !important;
}

.contact-form {
  background: var(--contact-card-bg) !important;
  border: 1px solid var(--contact-card-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--contact-card-shadow) !important;
  column-gap: clamp(1.1rem, 1.55vw, 1.65rem) !important;
  padding: clamp(1.35rem, 2.1vw, 2rem) !important;
  row-gap: clamp(1.05rem, 1.42vw, 1.35rem) !important;
}

.contact-form::before {
  display: none !important;
  content: none !important;
}

.contact-form .field {
  gap: 0.5rem !important;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(23, 23, 23, 0.13) !important;
  border-radius: 12px !important;
  min-height: 54px !important;
  padding: 0.72rem 1rem !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}

.contact-form textarea {
  min-height: 112px !important;
}

.contact-form input:hover,
.contact-form textarea:hover,
.contact-form select:hover,
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  background: #ffffff !important;
  border-color: rgba(23, 23, 23, 0.28) !important;
  box-shadow: 0 0 0 4px rgba(167, 122, 67, 0.075) !important;
}

.contact-building-field::after {
  right: 1rem !important;
  top: 3rem !important;
}

.contact-form .form-submit {
  background: #171717 !important;
  border-color: #171717 !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 30px rgba(23, 23, 23, 0.16) !important;
  color: #ffffff !important;
  justify-content: center !important;
  min-height: 56px !important;
  padding-inline: 1.35rem !important;
  width: 100% !important;
}

.contact-form .form-submit::before {
  display: none !important;
  content: none !important;
}

.contact-form .form-submit:hover,
.contact-form .form-submit:focus-visible {
  background: #2a2a2a !important;
  border-color: #2a2a2a !important;
  box-shadow: 0 18px 36px rgba(23, 23, 23, 0.2) !important;
  transform: translateY(-1px) !important;
}

.contact-form .form-status {
  min-height: 1rem !important;
}

@media (max-width: 980px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
  }

  .contact-form {
    padding: clamp(1.18rem, 5vw, 1.55rem) !important;
  }
}

@media (max-width: 560px) {
  .contact-info address,
  .contact-section .social-links,
  .contact-map,
  .contact-form {
    border-radius: 14px !important;
  }

  .contact-section .social-links {
    margin-top: 0 !important;
    padding-top: 1rem !important;
  }

  .contact-form {
    gap: 1rem !important;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    min-height: 52px !important;
    padding-inline: 0.9rem !important;
  }
}

/* 2026-07-27: test layout with compact C and full-width map aligned to it. */
@media (min-width: 981px) {
  .contact-grid {
    align-items: start !important;
    grid-auto-flow: row !important;
    grid-template-columns: minmax(300px, 370px) minmax(0, 700px) !important;
    max-width: 1190px !important;
  }

  .contact-info {
    display: contents !important;
  }

  .contact-info > .section-kicker {
    display: none !important;
  }

  .contact-info address {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .contact-section .social-links {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .contact-form {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    max-width: 700px !important;
    padding: clamp(1.2rem, 1.65vw, 1.62rem) !important;
    row-gap: clamp(0.82rem, 1.05vw, 1.06rem) !important;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    min-height: 50px !important;
    padding-block: 0.62rem !important;
  }

  .contact-form textarea {
    min-height: 96px !important;
  }

  .contact-form .form-submit {
    min-height: 52px !important;
  }

  .contact-building-field::after {
    top: 2.78rem !important;
  }

  .contact-map {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    margin-top: clamp(0.55rem, 1vw, 0.9rem) !important;
    width: 100% !important;
  }

  .contact-map iframe {
    aspect-ratio: 3.4 !important;
    min-height: 260px !important;
  }
}

/* 2026-07-27: smaller contact card typography, closer to technical-data labels. */
.contact-info address span,
.contact-info address a {
  font-size: clamp(0.92rem, 0.92vw, 1.02rem) !important;
  line-height: 1.46 !important;
}

.contact-info address p.contact-address-row span::before,
.contact-info address p.contact-phone-row a::before,
.contact-info address p.contact-whatsapp-row a::before,
.contact-info address p.contact-email-row a::before,
.contact-form .field label {
  font-size: clamp(0.78rem, 0.74vw, 0.86rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.012em !important;
  line-height: 1.18 !important;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  font-size: clamp(0.94rem, 0.95vw, 1.04rem) !important;
  line-height: 1.34 !important;
}

.contact-form .form-submit {
  font-size: clamp(0.92rem, 0.9vw, 0.98rem) !important;
}

.contact-map-caption span,
.contact-map-caption a {
  font-size: clamp(0.76rem, 0.74vw, 0.84rem) !important;
}

/* Contact final polish: clearer cards, balanced form rhythm and full-color map. */
.contact-section .social-links {
  border-top: 1px solid var(--contact-card-border) !important;
  border-radius: 18px !important;
  margin-top: 0 !important;
  padding-top: 1.08rem !important;
}

.contact-map iframe,
.contact-map:hover iframe,
.contact-map:focus-within iframe {
  filter: none !important;
  opacity: 1 !important;
}

.contact-form .form-status:empty {
  display: none !important;
  margin: 0 !important;
  min-height: 0 !important;
}

.contact-form .form-submit::before,
.contact-form .form-submit::after {
  content: none !important;
  display: none !important;
}

@media (min-width: 981px) {
  .contact-info address {
    align-self: start !important;
    grid-row: 2 !important;
  }

  .contact-section .social-links {
    align-self: end !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .contact-form {
    align-content: start !important;
    align-self: start !important;
    grid-row: 2 !important;
    padding-bottom: clamp(1.2rem, 1.65vw, 1.62rem) !important;
  }

  .contact-form .form-submit {
    margin-top: clamp(0.55rem, 0.9vw, 0.85rem) !important;
  }

  .contact-map {
    grid-row: 3 !important;
    margin-top: clamp(0.9rem, 1.35vw, 1.2rem) !important;
  }
}

@media (max-width: 560px) {
  .contact-info address span,
  .contact-info address a,
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    font-size: 0.98rem !important;
  }

  .contact-form .field label {
    font-size: 0.82rem !important;
  }
}

/* 2026-07-27: final social contact polish after every contact override. */
.contact-section .social-links a {
  align-items: center !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  flex: 0 0 42px !important;
  height: 42px !important;
  justify-content: center !important;
  min-height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  width: 42px !important;
}

.contact-section .social-links a.whatsapp {
  font-size: 0 !important;
}

.contact-section .social-links a.whatsapp::before,
.contact-section .social-links a.whatsapp::after {
  content: none !important;
  display: none !important;
}

.contact-section .social-links a svg {
  color: currentColor !important;
  fill: none !important;
  height: 18px !important;
  stroke: currentColor !important;
  width: 18px !important;
}

.contact-section .social-links a .whatsapp-mark {
  color: currentColor !important;
  fill: currentColor !important;
  height: 18px !important;
  stroke: none !important;
  width: 18px !important;
}

.contact-section .social-links a:hover,
.contact-section .social-links a:focus-visible {
  background: #171717 !important;
  border-color: #171717 !important;
  color: #ffffff !important;
}

.contact-section .social-links a:hover svg,
.contact-section .social-links a:focus-visible svg {
  color: #ffffff !important;
  fill: none !important;
  stroke: #ffffff !important;
}

.contact-section .social-links a:hover .whatsapp-mark,
.contact-section .social-links a:focus-visible .whatsapp-mark {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: none !important;
}

@media (max-width: 560px) {
  .contact-section .social-links a {
    flex-basis: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    min-width: 40px !important;
    width: 40px !important;
  }
}

/* 2026-07-27: audit-final mobile fixes. Keep this at EOF so it wins the cascade. */
@media (max-width: 820px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  #proyectos,
  #estudio,
  #contacto {
    scroll-margin-top: 82px !important;
  }

  .projects-heading {
    display: grid !important;
    gap: 1.55rem !important;
    min-height: auto !important;
    padding: 4.9rem 1rem 1.85rem !important;
  }

  .projects-title-block,
  .projects-filter-area,
  .projects-controls {
    left: auto !important;
    margin: 0 !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
  }

  .projects-title-block h2 {
    color: #171717 !important;
    font-size: clamp(2.35rem, 12vw, 3.45rem) !important;
    font-weight: 440 !important;
    letter-spacing: -0.018em !important;
    line-height: 0.98 !important;
  }

  .projects-title-block p:not(.section-kicker) {
    color: rgba(23, 23, 23, 0.62) !important;
    font-size: 0.98rem !important;
    line-height: 1.58 !important;
    margin-top: 1.18rem !important;
    max-width: 21rem !important;
  }

  .projects-heading .project-filters,
  .project-filters {
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  .projects-controls {
    align-items: center !important;
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0 1rem 0.88rem !important;
  }

  .project-grid,
  .project-list {
    gap: 0.58rem !important;
    margin-top: 0 !important;
    padding: 0 1rem !important;
  }

  .project-card button {
    min-height: 226px !important;
  }

  .mobile-projects-more-wrap {
    padding: 1rem 1rem 2rem !important;
  }

  .projects-heading::before,
  .studio-grid::before,
  .contact-grid::before {
    color: rgba(150, 150, 150, 0.18) !important;
    font-family: var(--roitenberg-display), Arial, sans-serif !important;
    font-size: clamp(4.7rem, 22vw, 6.2rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;
    line-height: 0.9 !important;
    right: 1.12rem !important;
    top: 1.15rem !important;
  }

  .studio-section,
  .studio-grid {
    background: #ffffff !important;
  }

  .studio-section {
    margin-top: 0 !important;
  }

  .studio-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .studio-heading {
    min-height: 0 !important;
    padding: 4.9rem 1rem 0 !important;
  }

  .studio-heading .section-kicker {
    color: #171717 !important;
    font-family: var(--roitenberg-display), Arial, sans-serif !important;
    font-size: clamp(2.2rem, 11vw, 3.25rem) !important;
    font-weight: 440 !important;
    letter-spacing: -0.015em !important;
    line-height: 0.98 !important;
    text-transform: none !important;
  }

  .studio-content {
    display: block !important;
  }

  .studio-copy {
    display: block !important;
    padding: 1.05rem 1rem 2.2rem !important;
  }

  .studio-copy p {
    color: rgba(23, 23, 23, 0.66) !important;
    font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.62 !important;
    max-width: 22rem !important;
  }

  .studio-copy .editorial-link {
    color: #171717 !important;
    margin-top: 1.25rem !important;
  }

  .studio-grid::after {
    aspect-ratio: 1.12 !important;
    background-position: center top !important;
    display: block !important;
    height: auto !important;
    margin-top: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  .studio-stats-separator {
    background: #ffffff !important;
    padding: 2.15rem 1rem 2.25rem !important;
  }

  .studio-stats-separator .studio-stats {
    display: grid !important;
    gap: 0.72rem !important;
    grid-template-columns: 1fr !important;
  }

  .studio-stats-separator .studio-stats div {
    align-items: center !important;
    background: rgba(255, 255, 255, 0.74) !important;
    border: 1px solid rgba(23, 23, 23, 0.095) !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 40px rgba(23, 23, 23, 0.045) !important;
    display: grid !important;
    grid-template-columns: minmax(8.8rem, 0.9fr) minmax(0, 1fr) !important;
    min-height: 84px !important;
    padding: 1rem 1.05rem !important;
    row-gap: 0 !important;
  }

  .studio-stats-separator .studio-stats div::before {
    display: none !important;
  }

  .studio-stats-separator .studio-stats dt,
  .studio-stats-separator .studio-stats div:first-child dt,
  .studio-stats-separator .studio-stats div:nth-child(2) dt,
  .studio-stats-separator .studio-stats div:nth-child(3) dt {
    color: #171717 !important;
    font-family: var(--roitenberg-display), Arial, sans-serif !important;
    font-size: clamp(2.1rem, 11vw, 3.05rem) !important;
    font-weight: 520 !important;
    letter-spacing: -0.02em !important;
    line-height: 0.95 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .studio-stats-separator .studio-stats dd {
    align-self: center !important;
    color: rgba(23, 23, 23, 0.58) !important;
    font-family: var(--roitenberg-grotesk), Arial, sans-serif !important;
    font-size: 0.98rem !important;
    font-weight: 420 !important;
    letter-spacing: 0 !important;
    line-height: 1.22 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .contact-section {
    background: #ffffff !important;
  }

  .contact-grid {
    display: grid !important;
    gap: 1rem !important;
    grid-template-columns: 1fr !important;
    max-width: none !important;
    padding: 0 1rem 2.7rem !important;
  }

  .contact-redesign-intro {
    margin: 0 !important;
    max-width: none !important;
    padding: 4.9rem 0 1.35rem !important;
  }

  .contact-redesign-eyebrow {
    color: rgba(23, 23, 23, 0.58) !important;
    font-size: 0.88rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .contact-redesign-intro h2 {
    color: #171717 !important;
    font-family: var(--roitenberg-display), Arial, sans-serif !important;
    font-size: clamp(2.55rem, 14vw, 4.05rem) !important;
    font-weight: 440 !important;
    letter-spacing: -0.018em !important;
    line-height: 0.98 !important;
    margin-top: 0.4rem !important;
    text-transform: none !important;
  }

  .contact-redesign-copy {
    color: rgba(23, 23, 23, 0.62) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-top: 1rem !important;
    max-width: 22rem !important;
  }

  .contact-grid .contact-form {
    align-self: stretch !important;
    display: grid !important;
    flex-direction: initial !important;
    gap: 0.85rem !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 1.05rem !important;
    width: 100% !important;
  }

  .contact-grid .contact-form .form-row {
    display: grid !important;
    gap: 0.85rem !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .contact-grid .contact-form .field,
  .contact-grid .contact-form .contact-building-field {
    display: grid !important;
    flex: none !important;
    gap: 0.4rem !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  .contact-grid .contact-form .field label {
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .contact-grid .contact-form input,
  .contact-grid .contact-form textarea,
  .contact-grid .contact-form select {
    font-size: 1rem !important;
    line-height: 1.35 !important;
    min-height: 48px !important;
    width: 100% !important;
  }

  .contact-grid .contact-form textarea {
    min-height: 96px !important;
  }

  .contact-grid .contact-building-field::after {
    top: 2.58rem !important;
  }

  .contact-grid .contact-form .form-submit {
    font-size: 0.96rem !important;
    min-height: 50px !important;
    width: 100% !important;
  }

  .contact-section .social-links {
    justify-content: flex-start !important;
    padding: 1rem !important;
  }

  .contact-map iframe {
    aspect-ratio: 1.22 !important;
    min-height: 280px !important;
  }

  .contact-info address {
    padding: 1rem !important;
  }

  .contact-info address p {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }
}

/* 2026-07-27: EOF mobile contact spacing guard. */
@media (max-width: 820px) {
  .contact-grid .contact-form .field.contact-hidden-field {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    visibility: hidden !important;
  }
}

/* 2026-07-27: true EOF override for Fekete-inspired metric cards. */
.studio-stats-separator .studio-stats {
  gap: clamp(1.1rem, 1.8vw, 1.85rem) !important;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.86fr) minmax(0, 0.86fr) !important;
}

.studio-stats-separator .studio-stats div {
  align-content: end !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(23, 23, 23, 0.085) !important;
  border-radius: clamp(18px, 1.45vw, 24px) !important;
  box-shadow: 0 30px 80px rgba(23, 23, 23, 0.055) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: start !important;
  min-height: clamp(230px, 19vw, 305px) !important;
  padding: clamp(1.45rem, 2.15vw, 2.45rem) !important;
  row-gap: clamp(0.72rem, 0.9vw, 1rem) !important;
}

.studio-stats-separator .studio-stats div::after {
  background: rgba(23, 23, 23, 0.12) !important;
  bottom: clamp(4.45rem, 5.3vw, 5.75rem) !important;
  content: "" !important;
  display: block !important;
  height: 1px !important;
  left: clamp(1.45rem, 2.15vw, 2.45rem) !important;
  position: absolute !important;
  right: clamp(1.45rem, 2.15vw, 2.45rem) !important;
  top: auto !important;
}

.studio-stats-separator .studio-stats dt,
.studio-stats-separator .studio-stats div:first-child dt,
.studio-stats-separator .studio-stats div:nth-child(2) dt,
.studio-stats-separator .studio-stats div:nth-child(3) dt {
  align-items: baseline !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  font-family: var(--roitenberg-display), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(5.2rem, 9.15vw, 9.7rem) !important;
  font-weight: 430 !important;
  gap: 0.18em !important;
  letter-spacing: -0.065em !important;
  line-height: 0.78 !important;
  padding: 0 0 clamp(1.35rem, 1.65vw, 1.85rem) !important;
  white-space: nowrap !important;
}

.studio-stats-separator .studio-stats div:first-child dt {
  font-size: clamp(4.2rem, 7.4vw, 7.85rem) !important;
  letter-spacing: -0.075em !important;
}

.studio-stats-separator .studio-stats div:nth-child(2) dt,
.studio-stats-separator .studio-stats div:nth-child(3) dt,
.studio-stats-separator .studio-stats div:nth-child(2) dd,
.studio-stats-separator .studio-stats div:nth-child(3) dd {
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

.studio-stat-number,
.studio-stat-suffix {
  display: inline-block !important;
}

.studio-stat-suffix {
  color: rgba(23, 23, 23, 0.52) !important;
  font-size: 0.22em !important;
  font-weight: 460 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  transform: translateY(-0.16em) !important;
}

@media (max-width: 1024px) {
  .studio-stats-separator .studio-stats {
    grid-template-columns: 1fr !important;
  }

  .studio-stats-separator .studio-stats div {
    min-height: 178px !important;
  }
}

@media (max-width: 820px) {
  .studio-stats-separator .studio-stats div {
    min-height: 138px !important;
    padding: 1.16rem 1.18rem !important;
  }

  .studio-stats-separator .studio-stats div::after {
    bottom: 3.75rem !important;
    left: 1.18rem !important;
    right: 1.18rem !important;
  }

  .studio-stats-separator .studio-stats dt,
  .studio-stats-separator .studio-stats div:first-child dt,
  .studio-stats-separator .studio-stats div:nth-child(2) dt,
  .studio-stats-separator .studio-stats div:nth-child(3) dt {
    font-size: clamp(4.15rem, 18vw, 5.25rem) !important;
    padding-bottom: 1.15rem !important;
  }

  .studio-stats-separator .studio-stats div:first-child dt {
    font-size: clamp(3.2rem, 13.6vw, 4.2rem) !important;
  }

  .studio-stats-separator .studio-stats div:nth-child(2) dt,
  .studio-stats-separator .studio-stats div:nth-child(3) dt,
  .studio-stats-separator .studio-stats div:nth-child(2) dd,
  .studio-stats-separator .studio-stats div:nth-child(3) dd {
    justify-content: flex-start !important;
    text-align: left !important;
    width: auto !important;
  }
}

/* 2026-07-29: final premium polish for restored contact section. */
#contacto.contact-section[data-contact-layout="direct"] {
  background:
    linear-gradient(180deg, rgba(23, 23, 23, 0.028), rgba(23, 23, 23, 0) 16rem),
    #f7f7f5 !important;
  color: #171717 !important;
  padding: clamp(5.6rem, 8.2vw, 8rem) clamp(1.45rem, 3vw, 3.1rem) clamp(5.2rem, 7.4vw, 7.2rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-wrap {
  display: grid !important;
  gap: clamp(4.8rem, 7vw, 7.2rem) !important;
  max-width: min(1500px, 95vw) !important;
  margin: 0 auto !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title {
  align-items: start !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: clamp(1.8rem, 4vw, 4rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title .section-kicker {
  color: rgba(23, 23, 23, 0.52) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(0.74rem, 0.76vw, 0.86rem) !important;
  font-weight: 620 !important;
  letter-spacing: 0.18em !important;
  margin: 0 0 clamp(1.05rem, 1.6vw, 1.5rem) !important;
  text-transform: uppercase !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title h2 {
  color: #171717 !important;
  font-family: var(--roitenberg-display), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(4.55rem, 7.1vw, 6.95rem) !important;
  font-weight: 430 !important;
  letter-spacing: -0.072em !important;
  line-height: 0.86 !important;
  margin: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title p:not(.section-kicker) {
  color: rgba(23, 23, 23, 0.64) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(1.02rem, 1.1vw, 1.2rem) !important;
  font-weight: 390 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.7 !important;
  margin: clamp(1.45rem, 2.25vw, 2.1rem) 0 0 !important;
  max-width: 48rem !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-number {
  color: rgba(23, 23, 23, 0.055) !important;
  font-family: var(--roitenberg-display), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(6.1rem, 10vw, 10rem) !important;
  font-weight: 560 !important;
  letter-spacing: -0.09em !important;
  line-height: 0.72 !important;
  transform: translateY(-0.2rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-body {
  align-items: stretch !important;
  display: grid !important;
  gap: clamp(1.55rem, 2.35vw, 2.35rem) !important;
  grid-template-columns: minmax(0, 1.22fr) minmax(340px, 0.86fr) !important;
  grid-template-areas: "stack cta" !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-stack {
  display: grid !important;
  gap: clamp(1.05rem, 1.35vw, 1.35rem) !important;
  grid-area: stack !important;
  min-width: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-cards {
  display: grid !important;
  gap: clamp(1.05rem, 1.35vw, 1.35rem) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-card,
#contacto[data-contact-layout="direct"] .contact-direct-socials,
#contacto[data-contact-layout="direct"] .contact-editorial-cta {
  background: rgba(255, 255, 255, 0.68) !important;
  border: 1px solid rgba(23, 23, 23, 0.085) !important;
  border-radius: 12px !important;
  box-shadow: 0 22px 70px rgba(23, 23, 23, 0.045) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-card {
  align-items: flex-start !important;
  display: grid !important;
  gap: 1rem !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  min-height: clamp(150px, 10vw, 176px) !important;
  padding: clamp(1.45rem, 1.85vw, 1.9rem) !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-card:hover {
  border-color: rgba(23, 23, 23, 0.18) !important;
  box-shadow: 0 30px 90px rgba(23, 23, 23, 0.075) !important;
  transform: translateY(-2px) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon,
#contacto[data-contact-layout="direct"] .contact-direct-socials a {
  align-items: center !important;
  aspect-ratio: 1 / 1 !important;
  background: rgba(23, 23, 23, 0.045) !important;
  border: 1px solid rgba(23, 23, 23, 0.075) !important;
  border-radius: 999px !important;
  color: rgba(23, 23, 23, 0.64) !important;
  display: inline-flex !important;
  justify-content: center !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon {
  height: 46px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon svg {
  height: 17px !important;
  width: 17px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text {
  color: rgba(23, 23, 23, 0.92) !important;
  display: grid !important;
  gap: 0.36rem !important;
  min-width: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text em {
  color: rgba(23, 23, 23, 0.48) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: 0.72rem !important;
  font-style: normal !important;
  font-weight: 650 !important;
  letter-spacing: 0.13em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text strong {
  display: none !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text span,
#contacto[data-contact-layout="direct"] .contact-direct-text a {
  color: #171717 !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(0.98rem, 1.04vw, 1.14rem) !important;
  font-weight: 470 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
  text-decoration: none !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-socials {
  align-items: center !important;
  display: flex !important;
  justify-content: space-between !important;
  min-height: 94px !important;
  padding: 1.15rem clamp(1.45rem, 1.85vw, 1.9rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-socials span {
  color: rgba(23, 23, 23, 0.52) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-socials div {
  display: flex !important;
  gap: 0.72rem !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-socials a {
  height: 46px !important;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-socials a:hover {
  background: #171717 !important;
  border-color: #171717 !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-socials svg {
  height: 17px !important;
  width: 17px !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-cta {
  align-content: end !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.54)),
    rgba(255, 255, 255, 0.66) !important;
  display: grid !important;
  grid-area: cta !important;
  min-height: 100% !important;
  padding: clamp(2.1rem, 3.15vw, 3.2rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-cta::before {
  background: rgba(23, 23, 23, 0.22) !important;
  content: "" !important;
  display: block !important;
  height: 1px !important;
  margin-bottom: clamp(1.8rem, 2.7vw, 2.7rem) !important;
  width: 72px !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-cta h3 {
  color: #171717 !important;
  font-family: var(--roitenberg-display), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(2.9rem, 4.2vw, 4.35rem) !important;
  font-weight: 430 !important;
  letter-spacing: -0.074em !important;
  line-height: 0.9 !important;
  margin: 0 !important;
  max-width: 12ch !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-cta p {
  color: rgba(23, 23, 23, 0.65) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(1rem, 1.02vw, 1.12rem) !important;
  font-weight: 390 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.58 !important;
  margin: clamp(1.5rem, 2vw, 2rem) 0 clamp(1.9rem, 2.5vw, 2.65rem) !important;
  max-width: 32rem !important;
}

#contacto[data-contact-layout="direct"] .contact-cta-button {
  align-items: center !important;
  background: #171717 !important;
  border-radius: 7px !important;
  color: #fff !important;
  display: flex !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: 0.94rem !important;
  font-weight: 560 !important;
  justify-content: space-between !important;
  letter-spacing: -0.01em !important;
  min-height: 58px !important;
  padding: 0 1.3rem !important;
  text-decoration: none !important;
  transition: background 180ms ease, transform 180ms ease !important;
  width: min(100%, 26rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-cta-button:hover {
  background: #000 !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 900px) {
  #contacto.contact-section[data-contact-layout="direct"] {
    padding: 4.2rem 1.28rem 4.6rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-wrap {
    gap: 2.7rem !important;
    max-width: none !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-title {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-title h2 {
    font-size: clamp(3.7rem, 16vw, 5rem) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-title p:not(.section-kicker) {
    font-size: 1rem !important;
    line-height: 1.58 !important;
    margin-top: 1.2rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-number {
    font-size: clamp(5.4rem, 25vw, 8rem) !important;
    justify-self: end !important;
    margin-top: -4.6rem !important;
    opacity: 0.88 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-body {
    gap: 1rem !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "stack" "cta" !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-cards {
    grid-template-columns: 1fr !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-card {
    min-height: 126px !important;
    padding: 1.18rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-socials {
    min-height: 86px !important;
    padding: 1rem 1.18rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-editorial-cta {
    min-height: 360px !important;
    padding: 1.55rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-editorial-cta h3 {
    font-size: clamp(2.6rem, 12vw, 3.45rem) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-cta-button {
    width: 100% !important;
  }
}

/* 2026-07-29: selector correction for actual injected contact DOM. */
#contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
  display: grid !important;
  gap: clamp(2.55rem, 3.8vw, 4.15rem) !important;
  grid-template-columns: 1fr !important;
  max-width: min(1500px, 94vw) !important;
  padding: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-hero {
  align-items: start !important;
  display: grid !important;
  gap: clamp(2rem, 4vw, 4.4rem) !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title {
  display: block !important;
  max-width: 58rem !important;
}

#contacto[data-contact-layout="direct"] .contact-redesign-eyebrow {
  color: rgba(23, 23, 23, 0.52) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(0.74rem, 0.76vw, 0.86rem) !important;
  font-weight: 620 !important;
  letter-spacing: 0.17em !important;
  line-height: 1 !important;
  margin: 0 0 clamp(1.12rem, 1.55vw, 1.55rem) !important;
  text-transform: uppercase !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title h2 {
  color: #171717 !important;
  font-family: var(--roitenberg-display), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(4.25rem, 7vw, 6.85rem) !important;
  font-weight: 430 !important;
  letter-spacing: -0.074em !important;
  line-height: 0.88 !important;
  margin: 0 !important;
  text-align: left !important;
}

#contacto[data-contact-layout="direct"] .contact-redesign-copy {
  color: rgba(23, 23, 23, 0.64) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(1.02rem, 1.06vw, 1.18rem) !important;
  font-weight: 390 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.68 !important;
  margin: clamp(1.35rem, 1.9vw, 1.9rem) 0 0 !important;
  max-width: 640px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title p.contact-redesign-copy {
  max-width: 640px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-number {
  align-self: start !important;
  color: rgba(23, 23, 23, 0.055) !important;
  justify-self: end !important;
  margin: 0 !important;
  transform: none !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text small {
  color: rgba(23, 23, 23, 0.48) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.13em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

@media (min-width: 901px) {
  #contacto[data-contact-layout="direct"] .contact-direct-body {
    margin-top: 0 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-editorial-cta {
    min-height: clamp(424px, 34vw, 548px) !important;
  }
}

@media (min-width: 901px) {
  #contacto.contact-section[data-contact-layout="direct"] {
    padding-top: clamp(4.4rem, 6.4vw, 6.2rem) !important;
  }
}

@media (max-width: 900px) {
  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    gap: 2.35rem !important;
    max-width: none !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-hero {
    grid-template-columns: 1fr !important;
    gap: 0.8rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-redesign-eyebrow {
    margin-bottom: 0.95rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-title h2 {
    font-size: clamp(3.55rem, 15vw, 4.8rem) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-redesign-copy {
    font-size: 1rem !important;
    line-height: 1.58 !important;
    margin-top: 1.1rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-number {
    font-size: clamp(5.2rem, 24vw, 7.4rem) !important;
    margin-top: -4.2rem !important;
  }
}

/* 2026-07-29: compact premium contact direction. */
#contacto.contact-section[data-contact-layout="direct"] {
  background: #f6f6f3 !important;
  padding: clamp(3.25rem, 5.4vw, 5rem) clamp(1.2rem, 3vw, 3rem) !important;
}

#contacto.contact-section[data-contact-layout="direct"]::before,
#contacto.contact-section[data-contact-layout="direct"]::after {
  display: none !important;
}

#contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
  display: grid !important;
  gap: clamp(1.35rem, 2.2vw, 2.35rem) !important;
  max-width: min(1180px, 92vw) !important;
  padding: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-hero {
  align-items: start !important;
  border-bottom: 1px solid rgba(23, 23, 23, 0.1) !important;
  display: grid !important;
  gap: clamp(1rem, 2.4vw, 2rem) !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  padding: 0 0 clamp(1rem, 1.55vw, 1.45rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title {
  display: block !important;
  max-width: 650px !important;
}

#contacto[data-contact-layout="direct"] .contact-redesign-eyebrow {
  color: rgba(23, 23, 23, 0.48) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(0.66rem, 0.66vw, 0.75rem) !important;
  font-weight: 520 !important;
  letter-spacing: 0.13em !important;
  line-height: 1 !important;
  margin: 0 0 clamp(0.75rem, 1vw, 0.95rem) !important;
  text-transform: uppercase !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title h2 {
  color: #171717 !important;
  font-family: var(--roitenberg-display), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(3.1rem, 5.45vw, 5.15rem) !important;
  font-weight: 430 !important;
  letter-spacing: -0.07em !important;
  line-height: 0.9 !important;
  margin: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title p.contact-redesign-copy {
  color: rgba(23, 23, 23, 0.63) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(0.9rem, 0.95vw, 1rem) !important;
  font-weight: 390 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.52 !important;
  margin: clamp(0.85rem, 1.1vw, 1.15rem) 0 0 !important;
  max-width: 575px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-number {
  align-self: start !important;
  color: rgba(23, 23, 23, 0.055) !important;
  font-family: var(--roitenberg-display), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(4.1rem, 6.4vw, 6.25rem) !important;
  font-weight: 430 !important;
  justify-self: end !important;
  letter-spacing: -0.08em !important;
  line-height: 0.78 !important;
  margin: 0 !important;
  opacity: 1 !important;
  position: static !important;
  transform: none !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-body {
  align-items: stretch !important;
  display: grid !important;
  gap: clamp(0.8rem, 1.35vw, 1.05rem) !important;
  grid-template-areas: "stack cta" !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.62fr) !important;
  margin: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-stack {
  display: grid !important;
  gap: clamp(0.7rem, 1vw, 0.9rem) !important;
  grid-area: stack !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-cards {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  gap: clamp(0.58rem, 0.8vw, 0.76rem) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  overflow: visible !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-card {
  align-content: center !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.58) !important;
  border: 1px solid rgba(23, 23, 23, 0.09) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 32px rgba(23, 23, 23, 0.035) !important;
  display: grid !important;
  gap: 0.72rem !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  min-height: clamp(94px, 7.2vw, 116px) !important;
  padding: clamp(0.86rem, 1vw, 1.05rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-card:hover {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(23, 23, 23, 0.14) !important;
  box-shadow: 0 18px 36px rgba(23, 23, 23, 0.055) !important;
  transform: translateY(-1px) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon {
  align-items: center !important;
  background: rgba(23, 23, 23, 0.04) !important;
  border: 1px solid rgba(23, 23, 23, 0.08) !important;
  border-radius: 999px !important;
  color: rgba(23, 23, 23, 0.62) !important;
  display: flex !important;
  height: 34px !important;
  justify-content: center !important;
  width: 34px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon svg {
  height: 15px !important;
  width: 15px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text {
  display: grid !important;
  gap: 0.18rem !important;
  min-width: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text small {
  color: rgba(23, 23, 23, 0.46) !important;
  font-size: 0.64rem !important;
  font-weight: 560 !important;
  letter-spacing: 0.1em !important;
  line-height: 1 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text strong {
  display: none !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text span,
#contacto[data-contact-layout="direct"] .contact-direct-text a {
  color: #171717 !important;
  display: inline-block !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(0.84rem, 0.86vw, 0.95rem) !important;
  font-weight: 450 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.28 !important;
  overflow-wrap: anywhere !important;
  text-decoration: none !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-social {
  align-items: center !important;
  background: rgba(255, 255, 255, 0.52) !important;
  border: 1px solid rgba(23, 23, 23, 0.08) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  display: flex !important;
  justify-content: space-between !important;
  min-height: 62px !important;
  padding: 0.72rem 0.95rem !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-social > span {
  color: rgba(23, 23, 23, 0.48) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: 0.66rem !important;
  font-weight: 560 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-social .social-links {
  display: flex !important;
  gap: 0.5rem !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-social .social-links a {
  align-items: center !important;
  background: rgba(23, 23, 23, 0.035) !important;
  border: 1px solid rgba(23, 23, 23, 0.08) !important;
  border-radius: 999px !important;
  color: rgba(23, 23, 23, 0.74) !important;
  display: flex !important;
  height: 36px !important;
  justify-content: center !important;
  padding: 0 !important;
  width: 36px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-social .social-links a:hover,
#contacto[data-contact-layout="direct"] .contact-direct-social .social-links a:focus-visible {
  background: #171717 !important;
  border-color: #171717 !important;
  color: #ffffff !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-social .social-links svg,
#contacto[data-contact-layout="direct"] .contact-direct-social .social-links .whatsapp-mark {
  height: 15px !important;
  width: 15px !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-cta {
  align-content: space-between !important;
  background: rgba(255, 255, 255, 0.68) !important;
  border: 1px solid rgba(23, 23, 23, 0.09) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 42px rgba(23, 23, 23, 0.04) !important;
  display: grid !important;
  gap: clamp(0.9rem, 1.3vw, 1.2rem) !important;
  grid-area: cta !important;
  min-height: 100% !important;
  padding: clamp(1.25rem, 1.8vw, 1.85rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-line {
  background: rgba(23, 23, 23, 0.16) !important;
  display: block !important;
  height: 1px !important;
  margin: 0 !important;
  width: 46px !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-cta h3 {
  color: #171717 !important;
  font-family: var(--roitenberg-display), var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(1.9rem, 2.6vw, 2.85rem) !important;
  font-weight: 430 !important;
  letter-spacing: -0.065em !important;
  line-height: 0.97 !important;
  margin: 0 !important;
  max-width: 12.4ch !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-cta p {
  color: rgba(23, 23, 23, 0.62) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(0.86rem, 0.88vw, 0.96rem) !important;
  font-weight: 390 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.48 !important;
  margin: 0 !important;
  max-width: 25rem !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-button {
  align-items: center !important;
  background: #171717 !important;
  border: 1px solid #171717 !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  display: flex !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 560 !important;
  justify-content: space-between !important;
  letter-spacing: 0 !important;
  min-height: 46px !important;
  padding: 0 0.95rem !important;
  text-decoration: none !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-button:hover,
#contacto[data-contact-layout="direct"] .contact-editorial-button:focus-visible {
  background: transparent !important;
  color: #171717 !important;
}

#contacto[data-contact-layout="direct"] .contact-form,
#contacto[data-contact-layout="direct"] .contact-map,
#contacto[data-contact-layout="direct"] .contact-visual {
  display: none !important;
}

@media (max-width: 900px) {
  #contacto.contact-section[data-contact-layout="direct"] {
    padding: 3rem 1rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    gap: 1.25rem !important;
    max-width: none !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-hero {
    gap: 0.5rem !important;
    grid-template-columns: 1fr auto !important;
    padding-bottom: 1rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-redesign-eyebrow {
    font-size: 0.62rem !important;
    margin-bottom: 0.65rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-title h2 {
    font-size: clamp(3rem, 14vw, 4.25rem) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-title p.contact-redesign-copy {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    margin-top: 0.75rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-number {
    font-size: clamp(3.8rem, 17vw, 5rem) !important;
    margin-top: 0.05rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-body {
    gap: 0.75rem !important;
    grid-template-areas: "stack" "cta" !important;
    grid-template-columns: 1fr !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-cards {
    gap: 0.55rem !important;
    grid-template-columns: 1fr !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-card {
    min-height: 82px !important;
    padding: 0.82rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-social {
    min-height: 58px !important;
    padding: 0.68rem 0.82rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-editorial-cta {
    min-height: 0 !important;
    padding: 1.05rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-editorial-cta h3 {
    font-size: clamp(1.85rem, 9vw, 2.45rem) !important;
    max-width: 12ch !important;
  }
}

/* 2026-07-29: contact refinement, smaller editorial modules. */
#contacto.contact-section[data-contact-layout="direct"] {
  padding: clamp(2.7rem, 4.6vw, 4.2rem) clamp(1.1rem, 2.8vw, 2.6rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
  gap: clamp(1rem, 1.55vw, 1.65rem) !important;
  max-width: min(1100px, 91vw) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-hero {
  min-height: clamp(132px, 15vw, 176px) !important;
  padding-bottom: clamp(1rem, 1.7vw, 1.35rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-redesign-eyebrow {
  margin-bottom: clamp(0.6rem, 0.8vw, 0.82rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title h2 {
  font-size: clamp(2.85rem, 5vw, 4.65rem) !important;
  letter-spacing: -0.075em !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title p.contact-redesign-copy {
  font-size: clamp(0.86rem, 0.9vw, 0.96rem) !important;
  line-height: 1.44 !important;
  margin-top: clamp(0.75rem, 1vw, 1rem) !important;
  max-width: 47rem !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-number {
  font-size: clamp(4rem, 5.9vw, 5.8rem) !important;
  right: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-body {
  align-items: start !important;
  gap: clamp(0.8rem, 1.25vw, 1.15rem) !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.56fr) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-stack {
  gap: clamp(0.62rem, 0.8vw, 0.8rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-cards {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(23, 23, 23, 0.07) !important;
  border-radius: 10px !important;
  gap: 0 !important;
  overflow: hidden !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: clamp(82px, 6.1vw, 98px) !important;
  padding: clamp(0.76rem, 1vw, 0.95rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-card:nth-child(odd) {
  border-right: 1px solid rgba(23, 23, 23, 0.065) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-card:nth-child(-n + 2) {
  border-bottom: 1px solid rgba(23, 23, 23, 0.065) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon {
  height: 30px !important;
  width: 30px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon svg {
  height: 13px !important;
  width: 13px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text {
  gap: 0.34rem !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text small,
#contacto[data-contact-layout="direct"] .contact-direct-social > span {
  font-size: 0.6rem !important;
  letter-spacing: 0.085em !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text span,
#contacto[data-contact-layout="direct"] .contact-direct-text a {
  font-size: clamp(0.8rem, 0.82vw, 0.9rem) !important;
  line-height: 1.24 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-social {
  background: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(23, 23, 23, 0.07) !important;
  border-radius: 10px !important;
  min-height: 54px !important;
  padding: 0.58rem 0.82rem !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-social .social-links a {
  height: 32px !important;
  width: 32px !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-cta {
  align-content: start !important;
  background: rgba(255, 255, 255, 0.54) !important;
  border-color: rgba(23, 23, 23, 0.075) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  gap: clamp(0.8rem, 1.05vw, 1rem) !important;
  min-height: 0 !important;
  padding: clamp(1.05rem, 1.45vw, 1.45rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-line {
  background: rgba(23, 23, 23, 0.13) !important;
  margin-bottom: clamp(0.6rem, 0.8vw, 0.75rem) !important;
  width: 38px !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-cta h3 {
  font-size: clamp(1.75rem, 2.28vw, 2.45rem) !important;
  letter-spacing: -0.07em !important;
  max-width: 12.7ch !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-cta p {
  font-size: clamp(0.82rem, 0.84vw, 0.92rem) !important;
  line-height: 1.42 !important;
  max-width: 23rem !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-button {
  border-radius: 5px !important;
  font-size: 0.78rem !important;
  min-height: 42px !important;
  margin-top: clamp(0.25rem, 0.55vw, 0.5rem) !important;
}

@media (max-width: 900px) {
  #contacto.contact-section[data-contact-layout="direct"] {
    padding: 2.55rem 1rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    gap: 0.95rem !important;
    max-width: none !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-hero {
    min-height: 0 !important;
    padding-bottom: 0.95rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-title h2 {
    font-size: clamp(2.7rem, 13vw, 3.75rem) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-body {
    gap: 0.62rem !important;
    grid-template-columns: 1fr !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-cards {
    grid-template-columns: 1fr !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-card {
    border-bottom: 1px solid rgba(23, 23, 23, 0.065) !important;
    border-right: 0 !important;
    min-height: 74px !important;
    padding: 0.74rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-card:last-child {
    border-bottom: 0 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-social {
    min-height: 52px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-editorial-cta {
    padding: 0.95rem !important;
  }
}

/* 2026-07-29: definitive mobile drawer polish. */
@media (max-width: 820px) {
  body.roitenberg-menu-guarded {
    overflow: hidden !important;
    touch-action: none !important;
  }

  .mobile-menu-scrim {
    background: rgba(0, 0, 0, 0.56) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 1180 !important;
  }

  .site-header:has(.mobile-panel.is-open) {
    background: transparent !important;
    border-bottom-color: transparent !important;
    pointer-events: none !important;
  }

  .site-header:has(.mobile-panel.is-open) .site-logo {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  .site-header:has(.mobile-panel.is-open) .mobile-menu-button {
    align-items: center !important;
    background: rgba(246, 246, 243, 0.96) !important;
    border: 1px solid rgba(23, 23, 23, 0.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #171717 !important;
    display: inline-flex !important;
    height: 44px !important;
    justify-content: center !important;
    pointer-events: auto !important;
    position: fixed !important;
    right: clamp(0.9rem, 4vw, 1.15rem) !important;
    top: clamp(0.9rem, 4vw, 1.15rem) !important;
    width: 44px !important;
    z-index: 1210 !important;
  }

  .mobile-panel {
    background: #f6f6f3 !important;
    bottom: 0 !important;
    box-shadow: -18px 0 46px rgba(23, 23, 23, 0) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    inset: 0 0 0 auto !important;
    max-height: 100dvh !important;
    max-width: min(88vw, 360px) !important;
    overflow-y: auto !important;
    padding: clamp(1.35rem, 4vw, 1.65rem) clamp(1.1rem, 4vw, 1.35rem) 1.15rem !important;
    position: fixed !important;
    top: 0 !important;
    transform: translateX(104%) !important;
    width: min(88vw, 360px) !important;
    z-index: 1202 !important;
  }

  .mobile-panel.is-open {
    box-shadow: -18px 0 46px rgba(23, 23, 23, 0.16) !important;
    inset: 0 0 0 auto !important;
    transform: translateX(0) !important;
  }

  .mobile-panel-brand {
    gap: 0.52rem !important;
    margin: 0 3.8rem 1.8rem 0 !important;
    padding: 0 !important;
  }

  .mobile-panel-brand .mobile-panel-logo {
    content: url("/images/brand/logo-secondary-black.png?v=20260729logo2") !important;
    filter: none !important;
    max-height: 54px !important;
    max-width: min(205px, 72vw) !important;
    opacity: 1 !important;
    width: min(205px, 72vw) !important;
  }

  .mobile-panel-brand p {
    color: rgba(23, 23, 23, 0.52) !important;
    font-size: 0.74rem !important;
    line-height: 1.42 !important;
  }

  .mobile-panel nav {
    border-top: 1px solid rgba(23, 23, 23, 0.1) !important;
    display: grid !important;
    gap: 0 !important;
    min-height: auto !important;
  }

  .mobile-panel nav a {
    align-items: center !important;
    border-bottom: 1px solid rgba(23, 23, 23, 0.09) !important;
    color: #171717 !important;
    display: flex !important;
    font-family: var(--font-sans), Arial, sans-serif !important;
    font-size: clamp(1.52rem, 7vw, 2rem) !important;
    font-weight: 430 !important;
    justify-content: flex-start !important;
    letter-spacing: -0.035em !important;
    line-height: 1 !important;
    min-height: 58px !important;
    padding: 0.68rem 0 !important;
    text-transform: none !important;
  }

  .mobile-panel nav a:hover,
  .mobile-panel nav a:focus-visible {
    color: #171717 !important;
    opacity: 0.62 !important;
    padding-left: 0 !important;
  }

  .mobile-panel-extra {
    border-top: 1px solid rgba(23, 23, 23, 0.1) !important;
    gap: 0.85rem !important;
    margin-top: 1.2rem !important;
    padding-top: 0.95rem !important;
  }

  .mobile-panel-contact {
    color: rgba(23, 23, 23, 0.58) !important;
    gap: 0.52rem !important;
    font-size: 0.74rem !important;
    line-height: 1.36 !important;
  }

  .mobile-panel-contact span {
    color: rgba(23, 23, 23, 0.88) !important;
    font-size: 0.58rem !important;
    font-weight: 620 !important;
    letter-spacing: 0.09em !important;
    margin-bottom: 0.12rem !important;
  }

  .mobile-panel-extra a {
    color: rgba(23, 23, 23, 0.66) !important;
    font-size: 0.74rem !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .mobile-panel-socials {
    gap: 0.46rem 0.72rem !important;
    padding-top: 0.05rem !important;
  }

  .mobile-panel-socials a {
    font-size: 0.58rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.08em !important;
  }
}

/* 2026-07-29: final hero cleanup override. Keep the slider as image-only and move copy below. */
.hero-section {
  background: #171717 !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  position: relative !important;
}

@supports (height: 100dvh) {
  .hero-section {
    min-height: auto !important;
  }
}

.hero-slide {
  height: 100svh !important;
  inset: auto !important;
  left: 0 !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  position: sticky !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  z-index: 1 !important;
}

@supports (height: 100dvh) {
  .hero-slide {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}

.hero-image {
  transform: translate3d(0, var(--hero-parallax-y, 0px), 0) scale(var(--hero-parallax-scale, 1.018)) !important;
  transform-origin: center center !important;
  transition: transform 0.18s ease-out !important;
  will-change: transform !important;
}

.hero-shade {
  display: none !important;
}

.hero-slide::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.06) 46%, rgba(0, 0, 0, 0.2) 100%) !important;
  content: "" !important;
  inset: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 2 !important;
}

.hero-slider-ui,
.hero-slider-actions,
.hero-slider-progress,
.scroll-mark {
  display: none !important;
  pointer-events: none !important;
}

.hero-content {
  align-items: center !important;
  background: #171717 !important;
  bottom: auto !important;
  color: #f6f6f3 !important;
  display: flex !important;
  flex: 0 0 clamp(34rem, 48vw, 43rem) !important;
  flex-direction: column !important;
  gap: clamp(1.35rem, 2.2vw, 2rem) !important;
  justify-content: center !important;
  left: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  min-height: clamp(34rem, 48vw, 43rem) !important;
  opacity: 1 !important;
  overflow: hidden !important;
  padding: clamp(6rem, 9vw, 9rem) clamp(1.35rem, 6vw, 5rem) clamp(6rem, 9vw, 9rem) !important;
  position: relative !important;
  right: 0 !important;
  text-align: center !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  z-index: 4 !important;
}

@supports (height: 100dvh) {
  .hero-content {
    top: auto !important;
  }
}

.hero-content::before {
  display: none !important;
}

.hero-content h1 {
  color: #f6f6f3 !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(3.85rem, 7.55vw, 8.7rem) !important;
  font-weight: 560 !important;
  letter-spacing: -0.085em !important;
  line-height: 0.86 !important;
  margin: 0 auto !important;
  max-width: min(980px, 92vw) !important;
  text-transform: uppercase !important;
}

.hero-title-line {
  display: block !important;
  white-space: nowrap !important;
}

.hero-title-line + .hero-title-line {
  margin-top: clamp(0.34rem, 0.9vw, 0.92rem) !important;
}

.hero-letter {
  animation: none !important;
  display: inline-block !important;
  filter: blur(8px) !important;
  opacity: 0 !important;
  transform: translate3d(0, 0.42em, 0) scale(0.985) !important;
  transform-origin: center bottom !important;
  transition:
    opacity 0.82s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.82s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.08s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition-delay: var(--letter-delay, 0s) !important;
  will-change: opacity, transform, filter !important;
}

.hero-content.is-title-visible .hero-letter {
  animation: none !important;
  filter: blur(0) !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.hero-content p,
.hero-content .hero-link {
  opacity: 0 !important;
  transform: translate3d(0, 1.15rem, 0) !important;
  transition:
    opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform !important;
}

.hero-content.is-title-visible p,
.hero-content.is-title-visible .hero-link {
  animation: none !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

.hero-content.is-title-visible p {
  transition-delay: 0.36s !important;
}

.hero-content.is-title-visible .hero-link {
  transition-delay: 0.56s !important;
}

.hero-content p {
  color: rgba(246, 246, 243, 0.82) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(1.08rem, 1.36vw, 1.52rem) !important;
  font-weight: 380 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.48 !important;
  margin: 0 auto !important;
  max-width: min(1120px, 84vw) !important;
  text-wrap: balance !important;
}

.hero-link {
  color: #f6f6f3 !important;
  font-size: clamp(0.82rem, 0.86vw, 0.95rem) !important;
  font-weight: 650 !important;
  letter-spacing: -0.015em !important;
  margin-top: clamp(0.75rem, 1.2vw, 1.1rem) !important;
  padding-bottom: 0.35rem !important;
}

.hero-link::after {
  background: rgba(246, 246, 243, 0.82) !important;
}

.hero-link:hover {
  color: #ffffff !important;
}

@media (max-width: 820px) {
  .hero-section {
    min-height: auto !important;
  }

  @supports (height: 100dvh) {
    .hero-section {
      min-height: auto !important;
    }
  }

  .hero-content {
    flex-basis: 31rem !important;
    min-height: 31rem !important;
    padding: 5.35rem 1.35rem 5.5rem !important;
  }

  .hero-content h1 {
    font-size: clamp(2.9rem, 12.8vw, 5rem) !important;
    letter-spacing: -0.09em !important;
    max-width: 94vw !important;
  }

  .hero-title-line + .hero-title-line {
    margin-top: 0.3rem !important;
  }

  .hero-content p {
    font-size: clamp(0.98rem, 4vw, 1.18rem) !important;
    line-height: 1.5 !important;
    max-width: min(32rem, 88vw) !important;
  }
}
/* 2026-07-29: final stronger premium reveal for the hero title. */
.hero-title-line + .hero-title-line {
  margin-top: clamp(0.56rem, 1.18vw, 1.18rem) !important;
}

.hero-letter {
  filter: blur(13px) !important;
  opacity: 0 !important;
  transform: translate3d(0, 0.9em, 0) rotateX(24deg) scale(0.96) !important;
  transform-origin: 50% 100% !important;
  transition:
    opacity 0.92s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition-delay: var(--letter-delay, 0s) !important;
}

.hero-content.is-title-visible .hero-letter {
  filter: blur(0) !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) !important;
}

.hero-content.is-title-visible p {
  transition-delay: 0.72s !important;
}

.hero-content.is-title-visible .hero-link {
  transition-delay: 0.94s !important;
}

@media (max-width: 820px) {
  .hero-title-line + .hero-title-line {
    margin-top: 0.5rem !important;
  }

  .hero-letter {
    filter: blur(10px) !important;
    transform: translate3d(0, 0.72em, 0) rotateX(20deg) scale(0.97) !important;
    transition-duration: 0.92s, 1s, 1.08s !important;
  }
}

/* 2026-07-29: hero copy scale requested by client. */
.hero-content p {
  font-size: clamp(1.2rem, 1.54vw, 1.7rem) !important;
  line-height: 1.5 !important;
  max-width: min(1180px, 86vw) !important;
}

.hero-link {
  font-size: clamp(0.94rem, 0.98vw, 1.06rem) !important;
  margin-top: clamp(1rem, 1.45vw, 1.35rem) !important;
  padding-bottom: 0.42rem !important;
}

/* 2026-07-31: slight hero headline reduction requested by client. */
.hero-content h1 {
  font-size: clamp(3.28rem, 6.56vw, 7.45rem) !important;
}

@media (max-width: 820px) {
  .hero-content h1 {
    font-size: clamp(2.55rem, 11.2vw, 4.32rem) !important;
  }
}

.hero-link svg {
  height: 18px !important;
  width: 18px !important;
}

@media (max-width: 820px) {
  .hero-content p {
    font-size: clamp(1.04rem, 4.45vw, 1.26rem) !important;
    line-height: 1.56 !important;
    max-width: min(34rem, 90vw) !important;
  }

  .hero-link {
    font-size: clamp(0.9rem, 3.55vw, 1rem) !important;
    margin-top: 1.55rem !important;
  }

  .hero-link svg {
    height: 17px !important;
    width: 17px !important;
  }
}

.studio-copy p + p {
  margin-top: clamp(1rem, 1.35vw, 1.45rem) !important;
}

/* 2026-07-30: match Contacto title scale with El estudio. */
#contacto[data-contact-layout="direct"] .contact-direct-title h2 {
  font-size: clamp(3.25rem, 4.1vw, 5.15rem) !important;
  line-height: 1.02 !important;
}

/* 2026-07-30: editorial contact section inspired by architectural folio layouts. */
#contacto.contact-section[data-contact-layout="direct"] {
  background: #fbfaf7 !important;
  border-top: 1px solid rgba(23, 23, 23, 0.08) !important;
  padding: clamp(5rem, 7.8vw, 8rem) 0 clamp(2rem, 3.4vw, 3rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
  display: grid !important;
  gap: clamp(2rem, 5vw, 6.25rem) !important;
  grid-template-areas:
    "intro body"
    "media body" !important;
  grid-template-columns: minmax(360px, 0.88fr) minmax(500px, 0.82fr) !important;
  max-width: min(1340px, calc(100vw - 72px)) !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-hero {
  align-self: end !important;
  grid-area: intro !important;
  min-height: auto !important;
  padding: 0 !important;
  position: relative !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title {
  max-width: 34rem !important;
  padding: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-redesign-eyebrow {
  color: #171717 !important;
  font-size: 0.76rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.28em !important;
  line-height: 1 !important;
  margin: 0 0 clamp(1.35rem, 2vw, 2rem) !important;
  text-transform: uppercase !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title h2 {
  color: #171717 !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(5.2rem, 8.1vw, 8.4rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.085em !important;
  line-height: 0.86 !important;
  margin: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-title-rule {
  background: #171717 !important;
  display: block !important;
  height: 2px !important;
  margin: clamp(1.4rem, 2.2vw, 2.1rem) 0 clamp(1.4rem, 2.2vw, 2rem) !important;
  width: 46px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title p.contact-redesign-copy {
  color: rgba(23, 23, 23, 0.62) !important;
  font-size: clamp(1rem, 1.08vw, 1.18rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.48 !important;
  margin: 0 !important;
  max-width: 31rem !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-number {
  display: none !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-media {
  align-self: end !important;
  background: #ece7df !important;
  grid-area: media !important;
  height: clamp(260px, 27vw, 390px) !important;
  margin: clamp(2.7rem, 5vw, 5rem) 0 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-media::after {
  background: linear-gradient(180deg, rgba(251, 250, 247, 0) 45%, rgba(23, 23, 23, 0.16) 100%) !important;
  content: "" !important;
  inset: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-media img {
  filter: saturate(0.74) contrast(0.97) brightness(1.04) !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 52% !important;
  transform: scale(1.015) !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-body {
  align-self: start !important;
  display: grid !important;
  gap: clamp(0.9rem, 1.2vw, 1.15rem) !important;
  grid-area: body !important;
  grid-template-columns: 1fr !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-stack {
  display: grid !important;
  gap: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-cards {
  background: rgba(255, 255, 255, 0.36) !important;
  border: 1px solid rgba(23, 23, 23, 0.13) !important;
  border-radius: 0 !important;
  display: grid !important;
  gap: 0 !important;
  grid-template-columns: 1fr !important;
  overflow: hidden !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-card {
  align-items: stretch !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(23, 23, 23, 0.11) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: clamp(70px, 7vw, 96px) minmax(0, 1fr) !important;
  min-height: clamp(88px, 8.1vw, 116px) !important;
  padding: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-card:last-child {
  border-bottom: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-card:nth-child(odd),
#contacto[data-contact-layout="direct"] .contact-direct-card:nth-child(-n + 2) {
  border-right: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon {
  align-items: center !important;
  align-self: stretch !important;
  background: rgba(23, 23, 23, 0.015) !important;
  border-right: 1px solid rgba(23, 23, 23, 0.1) !important;
  color: #171717 !important;
  display: flex !important;
  height: auto !important;
  justify-content: center !important;
  width: auto !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon svg,
#contacto[data-contact-layout="direct"] .contact-direct-icon .whatsapp-mark {
  height: 25px !important;
  width: 25px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text {
  align-content: center !important;
  display: grid !important;
  gap: 0.62rem !important;
  min-width: 0 !important;
  padding: clamp(1.1rem, 1.6vw, 1.55rem) clamp(1.4rem, 2.6vw, 2.5rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text small {
  color: rgba(23, 23, 23, 0.56) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text strong {
  display: none !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text span,
#contacto[data-contact-layout="direct"] .contact-direct-text a {
  color: #171717 !important;
  display: block !important;
  font-size: clamp(1rem, 1.05vw, 1.16rem) !important;
  font-weight: 470 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.28 !important;
  overflow-wrap: anywhere !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-social {
  align-items: stretch !important;
  background: rgba(255, 255, 255, 0.36) !important;
  border: 1px solid rgba(23, 23, 23, 0.13) !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(160px, 0.72fr) !important;
  min-height: 150px !important;
  padding: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-social-copy {
  align-content: center !important;
  display: grid !important;
  gap: 0.62rem !important;
  padding: clamp(1.2rem, 1.8vw, 1.7rem) clamp(1.4rem, 2.4vw, 2.1rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-social-copy span {
  color: rgba(23, 23, 23, 0.62) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

#contacto[data-contact-layout="direct"] .contact-social-copy p {
  color: rgba(23, 23, 23, 0.58) !important;
  font-size: clamp(0.88rem, 0.92vw, 1rem) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  max-width: 15rem !important;
}

#contacto[data-contact-layout="direct"] .contact-social-list {
  align-content: center !important;
  border-left: 1px solid rgba(23, 23, 23, 0.1) !important;
  display: grid !important;
  gap: 0 !important;
  padding: clamp(1rem, 1.6vw, 1.5rem) clamp(1.2rem, 2.1vw, 2rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-social-list a {
  align-items: center !important;
  color: #171717 !important;
  display: flex !important;
  font-size: clamp(0.9rem, 0.92vw, 1rem) !important;
  font-weight: 500 !important;
  justify-content: space-between !important;
  letter-spacing: -0.015em !important;
  line-height: 1 !important;
  min-height: 34px !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

#contacto[data-contact-layout="direct"] .contact-social-list a:hover,
#contacto[data-contact-layout="direct"] .contact-social-list a:focus-visible {
  opacity: 0.58 !important;
  transform: translateX(3px) !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-button {
  align-items: center !important;
  background: #171717 !important;
  border: 1px solid #171717 !important;
  border-radius: 0 !important;
  color: #fbfaf7 !important;
  display: flex !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  justify-content: space-between !important;
  letter-spacing: 0.26em !important;
  margin-top: clamp(0.8rem, 1.1vw, 1rem) !important;
  min-height: clamp(60px, 5.4vw, 78px) !important;
  padding: 0 clamp(1.4rem, 2.2vw, 2.2rem) !important;
  text-transform: uppercase !important;
  transition: background 0.24s ease, color 0.24s ease !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-button:hover,
#contacto[data-contact-layout="direct"] .contact-editorial-button:focus-visible {
  background: transparent !important;
  color: #171717 !important;
}

@media (max-width: 900px) {
  #contacto.contact-section[data-contact-layout="direct"] {
    padding: clamp(3.25rem, 12vw, 5rem) 1rem 0 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    gap: 1.4rem !important;
    grid-template-areas:
      "intro"
      "body"
      "media" !important;
    grid-template-columns: 1fr !important;
    max-width: none !important;
  }

  #contacto[data-contact-layout="direct"] .contact-redesign-eyebrow {
    margin-bottom: 1.2rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-title h2 {
    font-size: clamp(4rem, 18vw, 6.2rem) !important;
    line-height: 0.9 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-title-rule {
    margin: 1.15rem 0 1.2rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-title p.contact-redesign-copy {
    font-size: clamp(1rem, 4.25vw, 1.15rem) !important;
    max-width: 29rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-media {
    height: min(68vw, 320px) !important;
    margin: 1.35rem -1rem 0 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-card {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    min-height: 88px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-text {
    padding: 1rem 1.05rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-text span,
  #contacto[data-contact-layout="direct"] .contact-direct-text a {
    font-size: 1rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-social {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-social-list {
    border-left: 0 !important;
    border-top: 1px solid rgba(23, 23, 23, 0.1) !important;
    padding-top: 0.55rem !important;
  }
}

/* 2026-07-30: rebalance editorial contact columns. */
#contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
  gap: clamp(2.4rem, 4.2vw, 5.2rem) !important;
  grid-template-columns: minmax(430px, 0.92fr) minmax(620px, 1fr) !important;
  max-width: min(1460px, calc(100vw - 92px)) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title {
  max-width: 42rem !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title p.contact-redesign-copy {
  max-width: 38rem !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-body {
  max-width: 650px !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-card {
  grid-template-columns: clamp(82px, 6.5vw, 104px) minmax(0, 1fr) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text {
  padding-right: clamp(1.8rem, 3.2vw, 3.2rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text span,
#contacto[data-contact-layout="direct"] .contact-direct-text a {
  overflow-wrap: normal !important;
  word-break: normal !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-social {
  grid-template-columns: minmax(250px, 0.92fr) minmax(210px, 0.7fr) !important;
}

@media (max-width: 1180px) and (min-width: 901px) {
  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    gap: 2.4rem !important;
    grid-template-columns: minmax(360px, 0.82fr) minmax(560px, 1fr) !important;
    max-width: min(1120px, calc(100vw - 56px)) !important;
  }
}

@media (max-width: 900px) {
  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    grid-template-columns: 1fr !important;
    max-width: none !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-body {
    max-width: none !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-text span,
  #contacto[data-contact-layout="direct"] .contact-direct-text a {
    overflow-wrap: anywhere !important;
  }
}

/* 2026-07-30: rebuild Contacto proportions against the approved reference. */
#contacto.contact-section[data-contact-layout="direct"] {
  --contact-page-x: clamp(3.5rem, 7.2vw, 7.25rem);
  background: #fbfaf7 !important;
  overflow: hidden !important;
  padding: clamp(5.6rem, 8.2vw, 8.4rem) 0 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
  column-gap: clamp(4.5rem, 9.4vw, 10.5rem) !important;
  display: grid !important;
  grid-template-areas:
    "intro body"
    "media body" !important;
  grid-template-columns: minmax(420px, 1fr) minmax(520px, 548px) !important;
  max-width: none !important;
  padding-left: var(--contact-page-x) !important;
  padding-right: var(--contact-page-x) !important;
  row-gap: clamp(4.6rem, 7vw, 7rem) !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-hero {
  align-self: start !important;
  min-height: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title {
  max-width: 600px !important;
}

#contacto[data-contact-layout="direct"] .contact-redesign-eyebrow {
  color: #171717 !important;
  font-size: clamp(0.72rem, 0.72vw, 0.82rem) !important;
  font-weight: 650 !important;
  letter-spacing: 0.33em !important;
  margin-bottom: clamp(1.7rem, 2.2vw, 2.35rem) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title h2 {
  color: #171717 !important;
  font-size: clamp(6rem, 8vw, 8.55rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.086em !important;
  line-height: 0.88 !important;
}

#contacto[data-contact-layout="direct"] .contact-title-rule {
  height: 2px !important;
  margin: clamp(2rem, 2.8vw, 2.85rem) 0 clamp(1.7rem, 2.2vw, 2.2rem) !important;
  width: 50px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title p.contact-redesign-copy {
  color: rgba(23, 23, 23, 0.62) !important;
  font-size: clamp(1.06rem, 1.05vw, 1.22rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.42 !important;
  max-width: 470px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-media {
  align-self: end !important;
  grid-area: media !important;
  height: clamp(310px, 25vw, 365px) !important;
  justify-self: start !important;
  margin: 0 0 0 calc(-1 * var(--contact-page-x)) !important;
  max-width: 612px !important;
  width: calc(100% + var(--contact-page-x)) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-media img {
  object-position: 50% 50% !important;
  transform: none !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-media::before {
  align-items: center !important;
  background: rgba(251, 250, 247, 0.34) !important;
  border: 1px solid rgba(23, 23, 23, 0.12) !important;
  border-radius: 999px !important;
  color: rgba(23, 23, 23, 0.58) !important;
  content: "+" !important;
  display: flex !important;
  font-size: 1.35rem !important;
  height: 92px !important;
  justify-content: center !important;
  position: absolute !important;
  right: -46px !important;
  top: -46px !important;
  width: 92px !important;
  z-index: 2 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-media::after {
  background: linear-gradient(180deg, rgba(251, 250, 247, 0) 48%, rgba(23, 23, 23, 0.09) 100%) !important;
  z-index: 1 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-body {
  align-self: start !important;
  justify-self: end !important;
  max-width: 548px !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-cards {
  background: transparent !important;
  border: 1px solid rgba(23, 23, 23, 0.12) !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-card {
  grid-template-columns: 96px minmax(0, 1fr) !important;
  min-height: 112px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon {
  background: rgba(23, 23, 23, 0.018) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text {
  gap: 0.74rem !important;
  padding: 1.45rem 2.6rem !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text small {
  color: rgba(23, 23, 23, 0.52) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.16em !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text span,
#contacto[data-contact-layout="direct"] .contact-direct-text a {
  color: #171717 !important;
  font-size: clamp(1.02rem, 1.02vw, 1.14rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.3 !important;
  overflow-wrap: normal !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-social {
  background: transparent !important;
  border: 1px solid rgba(23, 23, 23, 0.12) !important;
  border-top: 0 !important;
  grid-template-columns: minmax(210px, 1fr) minmax(190px, 0.9fr) !important;
  min-height: 170px !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-social-copy {
  padding: 1.55rem 2.1rem !important;
}

#contacto[data-contact-layout="direct"] .contact-social-copy p {
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
  max-width: 14rem !important;
}

#contacto[data-contact-layout="direct"] .contact-social-list {
  padding: 1.45rem 1.95rem !important;
}

#contacto[data-contact-layout="direct"] .contact-social-list a {
  font-size: 0.92rem !important;
  min-height: 38px !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-button {
  margin-top: 14px !important;
  min-height: 86px !important;
  padding: 0 2.2rem !important;
  width: 100% !important;
}

@media (max-width: 1180px) and (min-width: 901px) {
  #contacto.contact-section[data-contact-layout="direct"] {
    --contact-page-x: clamp(2rem, 4.2vw, 3.5rem);
  }

  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    column-gap: clamp(2.5rem, 5vw, 4.2rem) !important;
    grid-template-columns: minmax(360px, 1fr) minmax(500px, 540px) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-title h2 {
    font-size: clamp(5.1rem, 7vw, 6.5rem) !important;
  }
}

@media (max-width: 900px) {
  #contacto.contact-section[data-contact-layout="direct"] {
    --contact-page-x: 1rem;
    padding-top: clamp(3.5rem, 12vw, 5rem) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    gap: 1.45rem !important;
    grid-template-areas:
      "intro"
      "body"
      "media" !important;
    grid-template-columns: 1fr !important;
    padding-left: var(--contact-page-x) !important;
    padding-right: var(--contact-page-x) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-title h2 {
    font-size: clamp(4.35rem, 18vw, 6.1rem) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-media {
    height: min(64vw, 310px) !important;
    margin: 1.2rem calc(-1 * var(--contact-page-x)) 0 !important;
    max-width: none !important;
    width: calc(100% + (var(--contact-page-x) * 2)) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-media::before {
    display: none !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-card {
    grid-template-columns: 66px minmax(0, 1fr) !important;
    min-height: 88px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-text {
    padding: 1.05rem 1.1rem !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-text span,
  #contacto[data-contact-layout="direct"] .contact-direct-text a {
    overflow-wrap: anywhere !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-social {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
}

/* 2026-07-30: final editorial Contacto layout, kept isolated from older contact experiments. */
#contacto.contact-section[data-contact-layout="direct"] {
  --contact-ink: #171717;
  --contact-muted: rgba(23, 23, 23, 0.58);
  --contact-line: rgba(23, 23, 23, 0.13);
  --contact-paper: #fbfaf7;
  background: var(--contact-paper) !important;
  border-top: 1px solid rgba(23, 23, 23, 0.08) !important;
  color: var(--contact-ink) !important;
  overflow: hidden !important;
  padding: clamp(88px, 8vw, 124px) 0 clamp(66px, 7vw, 96px) !important;
}

#contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
  align-items: start !important;
  column-gap: clamp(64px, 7.4vw, 112px) !important;
  display: grid !important;
  grid-template-areas:
    "intro body"
    "media body" !important;
  grid-template-columns: minmax(0, 1fr) minmax(500px, 548px) !important;
  margin: 0 auto !important;
  max-width: min(1480px, calc(100vw - 96px)) !important;
  padding: 0 !important;
  row-gap: clamp(54px, 5vw, 82px) !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-hero {
  grid-area: intro !important;
  min-height: 0 !important;
  position: relative !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title {
  max-width: 660px !important;
}

#contacto[data-contact-layout="direct"] .contact-redesign-eyebrow {
  color: var(--contact-ink) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(11px, 0.72vw, 13px) !important;
  font-weight: 560 !important;
  letter-spacing: 0.34em !important;
  line-height: 1 !important;
  margin: 0 0 clamp(26px, 2.2vw, 38px) !important;
  text-transform: uppercase !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title h2 {
  color: var(--contact-ink) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(72px, 8vw, 136px) !important;
  font-weight: 420 !important;
  letter-spacing: -0.072em !important;
  line-height: 0.86 !important;
  margin: 0 !important;
  text-transform: none !important;
}

#contacto[data-contact-layout="direct"] .contact-title-rule {
  background: var(--contact-ink) !important;
  display: block !important;
  height: 2px !important;
  margin: clamp(28px, 2.8vw, 46px) 0 clamp(24px, 2.2vw, 34px) !important;
  width: 52px !important;
}

#contacto[data-contact-layout="direct"] .contact-redesign-copy {
  color: rgba(23, 23, 23, 0.66) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(17px, 1.05vw, 20px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.46 !important;
  margin: 0 !important;
  max-width: 560px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-number {
  color: rgba(23, 23, 23, 0.055) !important;
  display: block !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(92px, 11vw, 158px) !important;
  font-weight: 650 !important;
  letter-spacing: -0.075em !important;
  line-height: 0.8 !important;
  position: absolute !important;
  right: 0 !important;
  top: -8px !important;
  z-index: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-media {
  grid-area: media !important;
  height: clamp(330px, 29vw, 430px) !important;
  margin: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  position: relative !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-media img {
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-media::before,
#contacto[data-contact-layout="direct"] .contact-direct-media::after {
  display: none !important;
}

#contacto[data-contact-layout="direct"] .contact-stamp {
  align-items: center !important;
  background: rgba(251, 250, 247, 0.62) !important;
  border: 1px solid rgba(23, 23, 23, 0.14) !important;
  border-radius: 999px !important;
  color: rgba(23, 23, 23, 0.58) !important;
  display: flex !important;
  flex-direction: column !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  height: 96px !important;
  justify-content: center !important;
  letter-spacing: 0.12em !important;
  line-height: 1.25 !important;
  position: absolute !important;
  right: -38px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  top: -48px !important;
  width: 96px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-body {
  align-self: start !important;
  grid-area: body !important;
  justify-self: end !important;
  max-width: 548px !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-panel {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid var(--contact-line) !important;
  border-radius: 0 !important;
  display: block !important;
  overflow: hidden !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-row {
  align-items: stretch !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--contact-line) !important;
  color: var(--contact-ink) !important;
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) !important;
  min-height: 112px !important;
  text-decoration: none !important;
  transition: background-color 280ms ease, color 280ms ease !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-row:hover {
  background: rgba(23, 23, 23, 0.025) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon {
  align-items: center !important;
  background: rgba(23, 23, 23, 0.018) !important;
  border-right: 1px solid var(--contact-line) !important;
  color: rgba(23, 23, 23, 0.82) !important;
  display: flex !important;
  height: auto !important;
  justify-content: center !important;
  width: auto !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon svg {
  height: 25px !important;
  width: 25px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text {
  align-content: center !important;
  display: grid !important;
  gap: 11px !important;
  min-width: 0 !important;
  padding: 26px 42px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text small {
  color: rgba(23, 23, 23, 0.56) !important;
  display: block !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text strong {
  color: var(--contact-ink) !important;
  display: block !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(16px, 1.02vw, 19px) !important;
  font-weight: 430 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.34 !important;
  overflow-wrap: anywhere !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-social {
  background: transparent !important;
  border: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.95fr) !important;
  min-height: 170px !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-social-copy {
  border-right: 1px solid var(--contact-line) !important;
  padding: 34px 42px !important;
}

#contacto[data-contact-layout="direct"] .contact-social-copy span {
  color: rgba(23, 23, 23, 0.58) !important;
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
}

#contacto[data-contact-layout="direct"] .contact-social-copy p {
  color: rgba(23, 23, 23, 0.58) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  max-width: 230px !important;
}

#contacto[data-contact-layout="direct"] .contact-social-list {
  display: grid !important;
  padding: 29px 34px !important;
}

#contacto[data-contact-layout="direct"] .contact-social-list a {
  align-items: center !important;
  border: 0 !important;
  color: var(--contact-ink) !important;
  display: flex !important;
  font-size: 16px !important;
  font-weight: 430 !important;
  justify-content: space-between !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  min-height: 36px !important;
  text-decoration: none !important;
}

#contacto[data-contact-layout="direct"] .contact-social-list a span {
  transition: transform 280ms ease !important;
}

#contacto[data-contact-layout="direct"] .contact-social-list a:hover span {
  transform: translateX(5px) !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-button {
  align-items: center !important;
  background: var(--contact-ink) !important;
  border: 1px solid var(--contact-ink) !important;
  border-radius: 2px !important;
  color: #fff !important;
  display: flex !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 620 !important;
  justify-content: space-between !important;
  letter-spacing: 0.26em !important;
  margin-top: 14px !important;
  min-height: 84px !important;
  padding: 0 34px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: background-color 300ms ease, color 300ms ease !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-button:hover {
  background: transparent !important;
  color: var(--contact-ink) !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-button-mark {
  align-items: center !important;
  border: 1px solid currentColor !important;
  border-radius: 999px !important;
  display: flex !important;
  height: 42px !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  transition: transform 300ms ease !important;
  width: 42px !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-button:hover .contact-editorial-button-mark {
  transform: translate(3px, -3px) !important;
}

@media (max-width: 1180px) and (min-width: 901px) {
  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    column-gap: clamp(42px, 5vw, 62px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(470px, 520px) !important;
    max-width: min(1180px, calc(100vw - 56px)) !important;
  }
}

@media (max-width: 900px) {
  #contacto.contact-section[data-contact-layout="direct"] {
    padding: 64px 0 54px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    display: grid !important;
    gap: 30px !important;
    grid-template-areas:
      "intro"
      "media"
      "body" !important;
    grid-template-columns: 1fr !important;
    max-width: none !important;
    padding: 0 22px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-title {
    max-width: none !important;
  }

  #contacto[data-contact-layout="direct"] .contact-redesign-eyebrow {
    margin-bottom: 22px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-title h2 {
    font-size: clamp(58px, 18vw, 74px) !important;
    letter-spacing: -0.075em !important;
  }

  #contacto[data-contact-layout="direct"] .contact-title-rule {
    margin: 25px 0 22px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-redesign-copy {
    font-size: 17px !important;
    line-height: 1.5 !important;
    max-width: 95% !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-number {
    font-size: 92px !important;
    right: 0 !important;
    top: 0 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-media {
    height: min(64vw, 310px) !important;
    margin: 10px 0 0 !important;
    width: 100% !important;
  }

  #contacto[data-contact-layout="direct"] .contact-stamp {
    display: none !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-body {
    max-width: none !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-row {
    grid-template-columns: 66px minmax(0, 1fr) !important;
    min-height: 92px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-icon svg {
    height: 22px !important;
    width: 22px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-text {
    gap: 8px !important;
    padding: 20px 18px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-text strong {
    font-size: 16px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-social {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-social-copy {
    border-bottom: 1px solid var(--contact-line) !important;
    border-right: 0 !important;
    padding: 24px 24px 18px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-social-list {
    padding: 18px 24px 24px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-editorial-button {
    min-height: 68px !important;
    padding: 0 22px !important;
  }
}

/* 2026-07-30: Contacto width guard. Older experiments left the body as a two-column grid. */
#contacto[data-contact-layout="direct"] .contact-direct-body {
  display: block !important;
  grid-template-columns: none !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-panel,
#contacto[data-contact-layout="direct"] .contact-editorial-button {
  max-width: none !important;
  width: 100% !important;
}

/* 2026-07-30: Contacto proportion pass. Lighter, more editorial, less administrative. */
#contacto.contact-section[data-contact-layout="direct"] {
  background: #fbfaf7 !important;
  padding: 72px 0 80px !important;
}

#contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
  align-items: start !important;
  column-gap: clamp(56px, 6vw, 96px) !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(460px, 0.75fr) !important;
  max-width: 1440px !important;
  padding-inline: clamp(32px, 5vw, 72px) !important;
  row-gap: clamp(36px, 3.8vw, 52px) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-number {
  display: none !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title {
  max-width: 620px !important;
}

#contacto[data-contact-layout="direct"] .contact-redesign-eyebrow {
  font-size: clamp(11px, 0.68vw, 12px) !important;
  font-weight: 540 !important;
  letter-spacing: 0.3em !important;
  margin-bottom: clamp(18px, 1.6vw, 26px) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title h2 {
  font-size: clamp(76px, 7vw, 116px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.88 !important;
}

#contacto[data-contact-layout="direct"] .contact-title-rule {
  height: 2px !important;
  margin: clamp(22px, 2vw, 32px) 0 clamp(18px, 1.7vw, 26px) !important;
  max-width: 120px !important;
  width: 48px !important;
}

#contacto[data-contact-layout="direct"] .contact-redesign-copy {
  font-size: 17px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.45 !important;
  max-width: 520px !important;
  text-wrap: pretty !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-media {
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  max-height: 480px !important;
  min-height: 400px !important;
  overflow: visible !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-media img {
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-stamp {
  background: rgba(251, 250, 247, 0.9) !important;
  border-color: rgba(20, 20, 20, 0.12) !important;
  color: rgba(20, 20, 20, 0.48) !important;
  font-size: 8.5px !important;
  height: clamp(72px, 5.8vw, 84px) !important;
  letter-spacing: 0.1em !important;
  line-height: 1.2 !important;
  right: 16px !important;
  top: 16px !important;
  width: clamp(72px, 5.8vw, 84px) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-body {
  max-width: none !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-panel {
  background: rgba(251, 250, 247, 0.68) !important;
  border-color: rgba(20, 20, 20, 0.14) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-row {
  border-bottom-color: rgba(20, 20, 20, 0.14) !important;
  grid-template-columns: 84px minmax(0, 1fr) !important;
  min-height: 108px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon {
  background: transparent !important;
  border-right-color: rgba(20, 20, 20, 0.14) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon svg {
  border: 1px solid rgba(20, 20, 20, 0.14) !important;
  border-radius: 999px !important;
  box-sizing: content-box !important;
  color: rgba(20, 20, 20, 0.76) !important;
  height: 19px !important;
  padding: 12px !important;
  width: 19px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text {
  gap: 9px !important;
  padding: 24px 32px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text small {
  color: rgba(20, 20, 20, 0.58) !important;
  font-size: 10px !important;
  font-weight: 560 !important;
  letter-spacing: 0.14em !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text strong {
  color: rgba(20, 20, 20, 0.92) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.3 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-social {
  border-top: 0 !important;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.92fr) !important;
  min-height: 132px !important;
}

#contacto[data-contact-layout="direct"] .contact-social-copy {
  border-right-color: rgba(20, 20, 20, 0.14) !important;
  padding: 26px 32px !important;
}

#contacto[data-contact-layout="direct"] .contact-social-copy span {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 10px !important;
}

#contacto[data-contact-layout="direct"] .contact-social-copy p {
  font-size: 14px !important;
  line-height: 1.42 !important;
  max-width: 210px !important;
}

#contacto[data-contact-layout="direct"] .contact-social-list {
  padding: 22px 30px !important;
}

#contacto[data-contact-layout="direct"] .contact-social-list a {
  font-size: 14px !important;
  min-height: 30px !important;
}

#contacto[data-contact-layout="direct"] .contact-social-list a:hover span {
  transform: translateX(4px) !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-button {
  font-size: 12px !important;
  font-weight: 570 !important;
  height: 72px !important;
  letter-spacing: 0.14em !important;
  min-height: 72px !important;
  padding: 0 28px !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-button-mark {
  height: 42px !important;
  width: 42px !important;
}

@media (max-width: 1180px) and (min-width: 901px) {
  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    column-gap: clamp(42px, 5vw, 58px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(430px, 0.74fr) !important;
    padding-inline: clamp(28px, 4vw, 48px) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-row {
    grid-template-columns: 78px minmax(0, 1fr) !important;
  }
}

@media (max-width: 900px) {
  #contacto.contact-section[data-contact-layout="direct"] {
    padding: 58px 0 56px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    gap: 28px !important;
    padding-inline: 22px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-title h2 {
    font-size: clamp(56px, 17vw, 72px) !important;
    line-height: 0.9 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-media {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-row {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    min-height: 90px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-icon svg {
    height: 18px !important;
    padding: 10px !important;
    width: 18px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-text {
    padding: 18px 18px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-text strong {
    font-size: 16px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-social {
    min-height: 0 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-social-copy,
  #contacto[data-contact-layout="direct"] .contact-social-list {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-editorial-button {
    height: 66px !important;
    min-height: 66px !important;
  }
}

/* 2026-07-30: Contacto mobile guard. Keep the editorial grid from collapsing to 0px. */
@media (max-width: 900px) {
  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "intro"
      "media"
      "body" !important;
    width: 100% !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-hero,
  #contacto[data-contact-layout="direct"] .contact-direct-media,
  #contacto[data-contact-layout="direct"] .contact-direct-body,
  #contacto[data-contact-layout="direct"] .contact-direct-panel,
  #contacto[data-contact-layout="direct"] .contact-editorial-button {
    justify-self: stretch !important;
    max-width: none !important;
    width: 100% !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-hero {
    display: block !important;
  }
}

/* 2026-07-30: Contacto desktop alignment. Right column begins at the image edge. */
@media (min-width: 901px) {
  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    grid-template-areas:
      "intro ."
      "media body" !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-body {
    align-self: start !important;
  }
}

/* 2026-07-30: Contact image and social circle scale. */
@media (min-width: 901px) {
  #contacto[data-contact-layout="direct"] .contact-direct-media {
    aspect-ratio: 16 / 9 !important;
    max-height: 560px !important;
    min-height: 470px !important;
  }
}

.contact-section .social-links a,
#contacto[data-contact-layout="direct"] .contact-direct-socials a {
  flex-basis: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  width: 36px !important;
}

.contact-section .social-links a svg,
.contact-section .social-links a .whatsapp-mark,
#contacto[data-contact-layout="direct"] .contact-direct-socials a svg {
  height: 16px !important;
  width: 16px !important;
}

@media (max-width: 560px) {
  .contact-section .social-links a,
  #contacto[data-contact-layout="direct"] .contact-direct-socials a {
    flex-basis: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    width: 34px !important;
  }
}

/* 2026-07-30: Contact rows icon-cell correction. Keep icons as small editorial accents. */
#contacto[data-contact-layout="direct"] .contact-direct-panel {
  border: 1px solid rgba(20, 20, 20, 0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-row {
  align-items: stretch !important;
  border-bottom: 1px solid rgba(20, 20, 20, 0.10) !important;
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) !important;
  min-height: 104px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-row:last-of-type {
  border-bottom: 1px solid rgba(20, 20, 20, 0.10) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon {
  align-items: center !important;
  background: transparent !important;
  border-right: 1px solid rgba(20, 20, 20, 0.10) !important;
  box-sizing: border-box !important;
  color: rgba(20, 20, 20, 0.76) !important;
  display: flex !important;
  height: 100% !important;
  justify-content: center !important;
  padding: 0 !important;
  position: relative !important;
  width: 88px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon::before {
  background: transparent !important;
  border: 1px solid rgba(20, 20, 20, 0.14) !important;
  border-radius: 999px !important;
  content: "" !important;
  height: 44px !important;
  left: 50% !important;
  position: absolute !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 44px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon svg,
#contacto[data-contact-layout="direct"] .contact-direct-icon .whatsapp-mark {
  border: 0 !important;
  box-sizing: border-box !important;
  color: currentColor !important;
  height: 18px !important;
  padding: 0 !important;
  position: relative !important;
  stroke-width: 1.7 !important;
  width: 18px !important;
  z-index: 1 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text {
  gap: 8px !important;
  padding: 22px 28px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text small {
  color: rgba(20, 20, 20, 0.58) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text strong {
  color: #111 !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.28 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-social {
  border-top: 0 !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(178px, 0.78fr) !important;
  min-height: 126px !important;
}

#contacto[data-contact-layout="direct"] .contact-social-copy {
  border-right: 1px solid rgba(20, 20, 20, 0.10) !important;
  padding: 24px 28px !important;
}

#contacto[data-contact-layout="direct"] .contact-social-list {
  align-content: center !important;
  padding: 20px 28px !important;
}

#contacto[data-contact-layout="direct"] .contact-social-list a {
  font-size: 14px !important;
  min-height: 30px !important;
}

@media (max-width: 900px) {
  #contacto[data-contact-layout="direct"] .contact-direct-row {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    min-height: 96px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-icon {
    width: 76px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-icon::before {
    height: 40px !important;
    width: 40px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-icon svg,
  #contacto[data-contact-layout="direct"] .contact-direct-icon .whatsapp-mark {
    height: 17px !important;
    width: 17px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-text {
    padding: 20px 22px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-social {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-social-copy {
    border-bottom: 1px solid rgba(20, 20, 20, 0.10) !important;
    border-right: 0 !important;
    padding: 22px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-social-list {
    padding: 18px 22px 22px !important;
  }
}

/* 2026-07-30: Contact structural recovery after reverting the broken final pass. */
#contacto[data-contact-layout="direct"] {
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
  align-items: end !important;
  display: grid !important;
  gap: clamp(48px, 5vw, 80px) !important;
  grid-template-areas:
    "intro body"
    "media body" !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(500px, 0.8fr) !important;
  margin-inline: auto !important;
  max-width: 1440px !important;
  padding-inline: 32px !important;
  width: min(100%, 1440px) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-hero {
  grid-area: intro !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-media {
  grid-area: media !important;
  min-height: 560px !important;
  overflow: hidden !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-media img {
  display: block !important;
  height: 100% !important;
  min-height: 560px !important;
  object-fit: cover !important;
  object-position: center !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-body {
  align-self: end !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  grid-area: body !important;
  justify-self: stretch !important;
  max-width: none !important;
  min-width: 0 !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-panel {
  min-width: 0 !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-editorial-button {
  box-sizing: border-box !important;
  grid-column: auto !important;
  max-width: none !important;
  position: static !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-row {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  min-height: 104px !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon {
  align-items: center !important;
  align-self: stretch !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-right: 1px solid rgba(20, 20, 20, 0.12) !important;
  box-shadow: none !important;
  display: flex !important;
  height: auto !important;
  justify-content: center !important;
  padding: 0 !important;
  position: relative !important;
  width: 76px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon::before {
  content: none !important;
  display: none !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon-circle {
  align-items: center !important;
  aspect-ratio: 1 / 1 !important;
  background: transparent !important;
  border: 1px solid rgba(20, 20, 20, 0.16) !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex: 0 0 40px !important;
  height: 40px !important;
  justify-content: center !important;
  width: 40px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-icon-circle svg,
#contacto[data-contact-layout="direct"] .contact-direct-icon-circle .whatsapp-mark {
  border: 0 !important;
  height: 17px !important;
  padding: 0 !important;
  width: 17px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 22px 28px !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-row-phone strong,
#contacto[data-contact-layout="direct"] .contact-direct-row-whatsapp strong,
#contacto[data-contact-layout="direct"] .contact-direct-row-mail strong {
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  word-break: normal !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-social {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.85fr) !important;
  width: 100% !important;
}

#contacto[data-contact-layout="direct"] .contact-social-list a {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

@media (max-width: 1050px) {
  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    align-items: start !important;
    gap: 32px !important;
    grid-template-areas:
      "intro"
      "media"
      "body" !important;
    grid-template-columns: 1fr !important;
    padding-inline: 24px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-body {
    align-self: start !important;
    width: 100% !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-media,
  #contacto[data-contact-layout="direct"] .contact-direct-media img {
    min-height: 0 !important;
  }
}

@media (max-width: 620px) {
  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    padding-inline: 18px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-row {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-icon {
    width: 64px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-icon-circle {
    flex-basis: 38px !important;
    height: 38px !important;
    width: 38px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-row-phone strong,
  #contacto[data-contact-layout="direct"] .contact-direct-row-whatsapp strong,
  #contacto[data-contact-layout="direct"] .contact-direct-row-mail strong {
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-social {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-07-30: Contact section number and white background alignment. */
#contacto.contact-section[data-contact-layout="direct"],
#contacto[data-contact-layout="direct"] {
  background: #fff !important;
}

#contacto.contact-section[data-contact-layout="direct"]::before,
#contacto.contact-section[data-contact-layout="direct"]::after {
  display: none !important;
}

#contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
  background: #fff !important;
}

#contacto[data-contact-layout="direct"] .contact-redesign-eyebrow {
  display: none !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-hero {
  min-height: clamp(320px, 32vw, 455px) !important;
  position: relative !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-number {
  color: rgba(23, 23, 23, 0.06) !important;
  display: block !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: clamp(5.2rem, 7.2vw, 8.5rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.075em !important;
  line-height: 0.78 !important;
  pointer-events: none !important;
  position: absolute !important;
  right: clamp(0px, 1.8vw, 28px) !important;
  top: clamp(4px, 1.2vw, 18px) !important;
  z-index: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title {
  isolation: isolate !important;
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 900px) {
  #contacto[data-contact-layout="direct"] .contact-direct-hero {
    min-height: 0 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-number {
    font-size: clamp(4.7rem, 24vw, 6.4rem) !important;
    right: 0 !important;
    top: -0.18em !important;
  }
}

/* 2026-07-30: Contact vertical rhythm refinement. */
#contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
  row-gap: clamp(22px, 2.6vw, 38px) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-hero {
  align-items: end !important;
  display: grid !important;
  min-height: clamp(260px, 24vw, 350px) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title {
  transform: translateY(clamp(10px, 1.1vw, 18px)) !important;
}

@media (max-width: 900px) {
  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    row-gap: 24px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-title {
    transform: none !important;
  }
}

/* 2026-07-30: Align contact section number with title. */
#contacto[data-contact-layout="direct"] .contact-direct-number {
  color: #171717 !important;
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
}

@media (max-width: 900px) {
  #contacto[data-contact-layout="direct"] .contact-direct-number {
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
  }
}

/* 2026-07-30: Contact gray section and right-side number alignment. */
#contacto.contact-section[data-contact-layout="direct"],
#contacto[data-contact-layout="direct"],
#contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
  background: var(--section-gray, #969696) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-hero {
  align-items: flex-start !important;
  column-gap: clamp(22px, 3vw, 48px) !important;
  display: flex !important;
  justify-content: flex-start !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title {
  flex: 0 1 auto !important;
  max-width: min(620px, 38vw) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-number {
  align-self: flex-start !important;
  color: var(--section-number-color, rgba(255, 255, 255, 0.92)) !important;
  display: block !important;
  flex: 0 0 auto !important;
  left: auto !important;
  opacity: 1 !important;
  order: 2 !important;
  position: static !important;
  right: auto !important;
  top: auto !important;
  transform: translateY(clamp(6px, 0.8vw, 12px)) !important;
}

@media (max-width: 900px) {
  #contacto[data-contact-layout="direct"] .contact-direct-hero {
    column-gap: 18px !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-title {
    max-width: min(72vw, 430px) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-number {
    font-size: clamp(4.2rem, 20vw, 6.2rem) !important;
    transform: translateY(2px) !important;
  }
}

/* 2026-07-30: Remove divider above the left contact image. */
#contacto[data-contact-layout="direct"] .contact-direct-hero {
  border-bottom: 0 !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-media {
  border-top: 0 !important;
}

/* 2026-07-30: Match left contact image height to the right column. */
@media (min-width: 901px) {
  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    align-items: stretch !important;
    grid-template-areas:
      "intro ."
      "media body" !important;
    grid-template-rows: auto minmax(0, auto) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-media {
    align-self: stretch !important;
    aspect-ratio: auto !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-media img {
    height: 100% !important;
    min-height: 0 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-body {
    align-self: stretch !important;
    height: 100% !important;
  }
}

/* 2026-07-30: Cap contact image to the CTA baseline. */
@media (min-width: 901px) {
  #contacto[data-contact-layout="direct"] .contact-direct-media {
    height: min(100%, clamp(500px, 36vw, 620px)) !important;
    max-height: clamp(500px, 36vw, 620px) !important;
  }
}

/* 2026-07-30: Let contact image end at the CTA bottom edge. */
@media (min-width: 901px) {
  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    align-items: stretch !important;
    grid-template-rows: auto auto !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-media {
    align-self: stretch !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-body {
    align-self: stretch !important;
  }
}

/* 2026-07-30: Lock contact image bottom to the CTA bottom by layout. */
@media (min-width: 901px) {
  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    align-items: stretch !important;
    grid-template-areas:
      "intro ."
      "media body" !important;
    grid-template-rows: auto auto !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-body {
    align-self: stretch !important;
    height: auto !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-media {
    align-self: stretch !important;
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-media img {
    display: block !important;
    height: 100% !important;
    inset: 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: cover !important;
    position: absolute !important;
    width: 100% !important;
  }
}

/* 2026-07-30: Contact editorial marker placement. */
#contacto[data-contact-layout="direct"] .contact-title-rule {
  display: none !important;
}

@media (min-width: 901px) {
  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    position: relative !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-hero {
    position: static !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-number {
    color: rgba(20, 20, 20, 0.06) !important;
    font-size: clamp(72px, 8vw, 120px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.075em !important;
    line-height: 1 !important;
    opacity: 1 !important;
    order: initial !important;
    pointer-events: none !important;
    position: absolute !important;
    right: clamp(32px, 3.8vw, 60px) !important;
    top: clamp(10px, 1.1vw, 18px) !important;
    transform: none !important;
    z-index: 0 !important;
  }
}

/* 2026-07-30: Contact composition unification. */
@media (min-width: 901px) {
  #contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
    row-gap: clamp(28px, 2.35vw, 34px) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-hero {
    align-items: flex-start !important;
    min-height: 0 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-title h2 {
    font-size: clamp(4.75rem, 6.75vw, 5.45rem) !important;
    font-weight: 390 !important;
    letter-spacing: -0.058em !important;
    line-height: 0.92 !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-number {
    color: rgba(20, 20, 20, 0.055) !important;
    font-size: clamp(72px, 7.3vw, 112px) !important;
    right: clamp(24px, 2.5vw, 42px) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-panel {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(20, 20, 20, 0.105) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-row {
    border-bottom-color: rgba(20, 20, 20, 0.075) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-icon {
    border-right-color: rgba(20, 20, 20, 0.075) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-text small {
    color: rgba(20, 20, 20, 0.52) !important;
  }

  #contacto[data-contact-layout="direct"] .contact-direct-text strong {
    font-weight: 420 !important;
  }
}

/* 2026-07-30: Final contact color correction. */
#contacto.contact-section[data-contact-layout="direct"],
#contacto[data-contact-layout="direct"],
#contacto[data-contact-layout="direct"] .contact-grid[data-direct-contact="ready"] {
  background: #fff !important;
}

#contacto.contact-section[data-contact-layout="direct"]::before,
#contacto.contact-section[data-contact-layout="direct"]::after {
  display: none !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-number {
  color: rgba(20, 20, 20, 0.16) !important;
}

#contacto[data-contact-layout="direct"] .contact-direct-title p.contact-redesign-copy,
#contacto[data-contact-layout="direct"] .contact-redesign-copy {
  margin-top: clamp(18px, 1.55vw, 26px) !important;
  max-width: min(720px, 54vw) !important;
}

/* 2026-07-31: Desktop header contrast over hero images. */
@media (min-width: 821px) {
  .site-header:not(.is-scrolled):not(.is-solid):not(:has(.mobile-panel.is-open)) {
    background:
      linear-gradient(
        180deg,
        rgba(8, 8, 8, 0.82) 0%,
        rgba(8, 8, 8, 0.64) 62%,
        rgba(8, 8, 8, 0.24) 100%
      ) !important;
    border-bottom: 0 !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
  }

  .site-header:not(.is-scrolled):not(.is-solid):not(:has(.mobile-panel.is-open))::before,
  .site-header:not(.is-scrolled):not(.is-solid):not(:has(.mobile-panel.is-open))::after {
    content: none !important;
    display: none !important;
  }

  .desktop-nav a {
    font-size: clamp(0.82rem, 0.82vw, 0.92rem) !important;
    font-weight: 720 !important;
    letter-spacing: 0.018em !important;
  }
}

/* 2026-08-04: accessible project filter states across pointer types. */
@media (min-width: 821px) and (max-width: 1024px) {
  .projects-heading + .projects-controls {
    padding-top: 94px !important;
    pointer-events: none !important;
  }

  .projects-heading + .projects-controls .project-view-switch {
    margin-top: 0 !important;
    pointer-events: auto !important;
  }
}

.projects-heading .project-filters button,
.project-filters button {
  position: relative !important;
  color: rgba(246, 243, 237, 0.92) !important;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease !important;
}

.projects-heading .project-filters button span,
.project-filters button span,
.projects-heading .project-filters button small,
.project-filters button small {
  color: inherit !important;
  display: inline-block !important;
  transition:
    color 180ms ease,
    opacity 180ms ease !important;
}

.projects-heading .project-filters button.is-active,
.projects-heading .project-filters button[aria-pressed="true"],
.project-filters button.is-active,
.project-filters button[aria-pressed="true"] {
  color: #ffffff !important;
  border-bottom-color: rgba(255, 255, 255, 0.74) !important;
}

.projects-heading .project-filters button.is-active span,
.projects-heading .project-filters button[aria-pressed="true"] span,
.project-filters button.is-active span,
.project-filters button[aria-pressed="true"] span,
.projects-heading .project-filters button.is-active small,
.projects-heading .project-filters button[aria-pressed="true"] small,
.project-filters button.is-active small,
.project-filters button[aria-pressed="true"] small {
  color: inherit !important;
}

.projects-heading .project-filters button:focus-visible,
.project-filters button:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.82) !important;
  outline-offset: 3px !important;
}

@media (hover: hover) and (pointer: fine) {
  .projects-heading .project-filters button:hover,
  .project-filters button:hover {
    background: rgba(255, 255, 255, 0.75) !important;
    border-bottom-color: rgba(255, 255, 255, 0.78) !important;
    color: #171717 !important;
  }

  .projects-heading .project-filters button:hover span,
  .project-filters button:hover span,
  .projects-heading .project-filters button:hover small,
  .project-filters button:hover small {
    color: #171717 !important;
  }
}

@media (hover: none), (pointer: coarse), (max-width: 820px) {
  .projects-heading + .projects-controls {
    padding-top: 0 !important;
  }

  .projects-heading + .projects-controls .project-view-switch {
    margin-top: 0 !important;
  }

  .projects-heading .project-filters button,
  .project-filters button {
    background: transparent !important;
    color: #575757 !important;
  }

  .projects-heading .project-filters button.is-active,
  .projects-heading .project-filters button[aria-pressed="true"],
  .project-filters button.is-active,
  .project-filters button[aria-pressed="true"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #171717 !important;
    font-weight: 560 !important;
  }

  .projects-heading .project-filters button.is-active span,
  .projects-heading .project-filters button[aria-pressed="true"] span,
  .project-filters button.is-active span,
  .project-filters button[aria-pressed="true"] span,
  .projects-heading .project-filters button.is-active small,
  .projects-heading .project-filters button[aria-pressed="true"] small,
  .project-filters button.is-active small,
  .project-filters button[aria-pressed="true"] small {
    color: #171717 !important;
  }

  .projects-heading .project-filters button:active,
  .project-filters button:active {
    background: rgba(255, 255, 255, 0.9) !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #171717 !important;
  }

  .projects-heading .project-filters button:active span,
  .project-filters button:active span,
  .projects-heading .project-filters button:active small,
  .project-filters button:active small {
    color: #171717 !important;
  }

  .projects-heading .project-filters button:focus-visible,
  .project-filters button:focus-visible {
    outline: 1px solid rgba(23, 23, 23, 0.45) !important;
    outline-offset: 3px !important;
  }
}

@media (hover: hover) and (pointer: fine) and (max-width: 820px) {
  .projects-heading .project-filters button:hover,
  .project-filters button:hover {
    background: rgba(255, 255, 255, 0.75) !important;
    background-color: rgba(255, 255, 255, 0.75) !important;
    color: #171717 !important;
  }

  .projects-heading .project-filters button:hover span,
  .project-filters button:hover span,
  .projects-heading .project-filters button:hover small,
  .project-filters button:hover small {
    color: #171717 !important;
  }
}

/* 2026-07-31: Contact marker aligned with 01/02 numerators. */
#contacto[data-contact-layout="direct"] .contact-direct-number {
  font-family: "DIN-black", var(--font-sans), Arial, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.075em !important;
  line-height: 0.78 !important;
}

/* 2026-08-04: keep desktop project view controls inside the gray section flow. */
@media (min-width: 1025px) {
  .projects-section .projects-heading {
    margin-bottom: 0 !important;
    overflow: visible !important;
  }

  .projects-section .projects-heading + .projects-controls {
    align-items: center !important;
    background: linear-gradient(90deg, var(--section-gray, #969696) 0 calc(50% - 4px), #ffffff calc(50% - 4px) 100%) !important;
    bottom: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    left: auto !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 30px calc(50% + 64px) 56px 0 !important;
    pointer-events: none !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
  }

  .projects-section .projects-heading + .projects-controls .project-view-switch {
    align-self: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    pointer-events: auto !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }
}

/* 2026-08-05: social network links hidden until final URLs are provided. */
#contacto[data-contact-layout="direct"] .contact-direct-social,
#contacto[data-contact-layout="direct"] .contact-direct-socials,
#contacto[data-contact-layout="direct"] .contact-social-copy,
#contacto[data-contact-layout="direct"] .contact-social-list,
.contact-section .social-links,
.mobile-panel-socials,
.footer-socials,
.site-footer .social-links {
  display: none !important;
}