@font-face {
  font-family: Manrope;
  src: url('/fonts/manrope-400.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Manrope;
  src: url('/fonts/manrope-700.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: Manrope;
  src: url('/fonts/manrope-800.ttf') format('truetype');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  font-family: Manrope, Arial, Helvetica, sans-serif;
  color: #eeeae3;
  background: #101416;
  --scene-blue: #3c88b7;
  --scene-white: #eeeae3;
  --scene-muted: #b7bec1;
  --scene-ink: #101416;
  --scene-rule: rgba(160, 169, 175, 0.28);
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  font-family: Manrope, Arial, Helvetica, sans-serif;
  background: var(--scene-ink);
  color: var(--scene-white);
}

#main {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; background: #397dab; padding: 16px; }
.skip-link:focus { top: 16px; }

.landing-scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #101416;
}

.landing-scene .scene-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.landing-scene::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  background: linear-gradient(90deg, rgba(7, 11, 14, 0.79), rgba(7, 11, 14, 0.2) 60%, rgba(7, 11, 14, 0.24));
  pointer-events: none;
}

.site-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  height: 72px;
  padding: 0 6.35vw 0 4.9vw;
}

.brand-name {
  color: #eeeae3;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  text-decoration: none;
  flex: none;
}

.logo-mark {
  display: block;
  width: 3vw;
  height: 3.4vw;
  overflow: visible;
}

.logo-piece {
  transform-box: fill-box;
  transform-origin: center;
  animation: logo-assemble 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.logo-white {
  --piece-x: -20px;
  --piece-y: 12px;
}

.logo-top {
  --piece-x: 0px;
  --piece-y: -24px;
  animation-delay: 120ms;
}

.logo-bottom {
  --piece-x: 20px;
  --piece-y: 12px;
  animation-delay: 240ms;
}

.brand-link:hover .logo-white {
  transform: translate(-3px, 2px);
}

.brand-link:hover .logo-top {
  transform: translateY(-3px);
}

.brand-link:hover .logo-bottom {
  transform: translate(3px, 2px);
}

@keyframes logo-assemble {
  from {
    opacity: 0;
    translate: var(--piece-x) var(--piece-y);
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.site-nav .nav-links {
  position: absolute;
  right: 17.4vw;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.65vw, 36px);
  margin: 0;
}

.site-nav .nav-links a {
  color: rgba(238, 234, 227, 0.82);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  transition: color 250ms ease;
}

.site-nav .nav-links a:hover {
  color: white;
}

.language-switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: clamp(28px, 3.5vw, 48px);
  padding-left: clamp(28px, 3.5vw, 48px);
  transform: none;
}

.language-switch::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 29px;
  transform: translateY(-50%);
  background: rgba(238, 234, 227, 0.28);
  content: '';
}

.language-switch a {
  display: grid;
  min-width: 18px;
  min-height: 36px;
  place-items: center;
  background: none;
  color: rgba(238, 234, 227, 0.68);
  font: 400 14px Manrope, sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  transition: color 200ms ease;
}

.language-switch a[aria-current='page'] {
  color: #f1eee7;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.menu-toggle {
  display: none;
}

.hero-motto {
  position: relative;
  width: 6vw;
  margin-left: 3vw;
  color: #9ba2a6;
  font: 400 0.67vw/1.75 'DM Mono', monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.hero-motto::before {
  position: absolute;
  top: 1.6vw;
  right: 10.5vw;
  width: 6.5vw;
  height: 1px;
  background: #7d8589;
  content: '';
}

.landing-hero {
  display: flex;
  align-items: flex-start;
}

.landing-hero::after {
  background: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(54vw, 900px);
  padding: 22vh 0 0 5.15vw;
}

.eyebrow {
  margin: 0 0 2rem;
  color: rgba(226, 230, 231, 0.72);
  font: 400 clamp(0.65rem, 0.9vw, 0.78rem)/1.5 Manrope, sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.hero-content h1,
#solutions-title,
.process-copy h2,
.enquiry-copy h2 {
  margin: 0;
  color: var(--scene-white);
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 0.98;
}

.hero-content h1 {
  max-width: 100%;
  font-size: clamp(3.6rem, 6.2vw, 6.6rem);
}

.hero-content .lead {
  max-width: 41rem;
  margin: 1.8rem 0 0;
  color: rgba(235, 235, 231, 0.84);
  font-size: clamp(1.05rem, 1.55vw, 1.42rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.primary-action,
.contact-form .primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  min-height: 3.7rem;
  padding: 0.9rem 1.7rem;
  border: 0;
  border-radius: 0;
  background: var(--scene-blue);
  box-shadow: none;
  color: var(--scene-white);
  font: 700 clamp(0.9rem, 1.05vw, 1.08rem)/1.2 Manrope, sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  transition: background 180ms ease, transform 220ms ease;
}

.primary-action:hover,
.contact-form .primary-action:hover {
  transform: translateY(-2px);
  background: #4d92c2;
  box-shadow: none;
}

.primary-action span:last-child {
  font-size: 1.5em;
  line-height: 1;
}

.hero-content .primary-action {
  min-width: 16.5rem;
  margin-top: 2rem;
}

#soluciones {
  display: block;
  padding: 0;
  background: #0c1216;
}

#soluciones::after {
  background: none;
}

#solutions-title {
  position: absolute;
  top: 3.8%;
  left: 4.7%;
  z-index: 1;
  max-width: none;
  font-size: clamp(2.6rem, 4.7vw, 5.2rem);
  line-height: 0.9;
}

.solutions-body {
  position: absolute;
  inset: 21.4% 4.4% 7.2% 57.2%;
  display: block;
  z-index: 1;
}

.solutions-visual {
  display: none;
}

.solutions-visual {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #12191e;
}

.solutions-visual .scene-art {
  object-position: center 58%;
}

.service-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.service-list article {
  padding: 1.35rem 0 1.2rem;
  border-top: 1px solid var(--scene-rule);
}

.service-list article > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  gap: 1rem;
  align-items: start;
  color: inherit;
  text-decoration: none;
}

.service-copy {
  display: block;
  min-width: 0;
}

.service-arrow {
  justify-self: end;
  padding-top: 0.2rem;
  color: #5f92bd;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  transition: transform 300ms ease;
}

.service-list article > a:hover .service-arrow {
  transform: translateX(5px);
}

.service-list h3 {
  margin: 0 0 0.45rem;
  color: var(--scene-white);
  font-size: clamp(1.65rem, 2.65vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1.05;
}

.service-list h3 span {
  color: #5f92bd;
}

.service-list p,
.support {
  margin: 0;
  max-width: 35rem;
  color: var(--scene-muted);
  font-size: clamp(0.82rem, 1.18vw, 1.12rem);
  line-height: 1.48;
}

.included {
  margin: auto 0 0;
  color: #b7bec1;
  font-size: clamp(0.62rem, 0.8vw, 0.78rem);
  letter-spacing: 0.08em;
  line-height: 1.6;
  word-spacing: 0.3rem;
}

.included::first-letter {
  color: var(--scene-blue);
}

.support {
  display: none;
}

#proceso {
  display: block;
  padding: 0;
  background: #0b1115;
}

#proceso::before {
  content: none;
}

#proceso::after {
  background: none;
}

.process-copy,
.faq {
  position: absolute;
  z-index: 1;
  min-width: 0;
}

.process-copy {
  top: 17.8%;
  left: 4.7%;
  width: 43.5%;
}

.process-copy h2 {
  max-width: none;
  font-size: min(7.25vw, 13vh);
  line-height: 0.9;
}

.blue-period {
  color: var(--scene-blue);
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 2.2vh;
  margin: 5.5vh 0 0;
  padding: 0;
  list-style: none;
}

.steps li {
  display: grid;
  grid-template-columns: 6.9rem minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  padding: 0;
  border: 0;
}

.steps li > div {
  min-height: 5rem;
  padding-left: 1.4rem;
  border-left: 1px solid var(--scene-rule);
}

.step-number {
  color: var(--scene-blue);
  font-size: min(4.8vw, 8.8vh);
  font-weight: 700;
  letter-spacing: -0.07em;
  line-height: 1;
}

.steps li .step-number {
  color: #3c88b7;
  font-family: Manrope, sans-serif;
  font-size: min(6vw, 10vh);
  font-weight: 700;
  line-height: 0.95;
}

.steps h3 {
  margin: 0 0 0.35rem;
  color: var(--scene-white);
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.045em;
}

.steps p,
.faq p {
  margin: 0;
  color: var(--scene-muted);
  font-size: 1rem;
  line-height: 1.5;
}

.faq {
  top: 12.7%;
  right: 4.5%;
  bottom: 14.5%;
  width: 45.5%;
  padding-top: 0;
  padding-left: 3.4vw;
  border-left: 1px solid var(--scene-rule);
}

.faq h3 {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0 0 5.4vh;
  color: rgba(230, 234, 234, 0.72);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.faq h3::after {
  flex: 1;
  height: 1px;
  background: var(--scene-rule);
  content: '';
}

.faq details {
  padding: 0 0 0.6vh;
  border-top: 1px solid var(--scene-rule);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 4.1vh 0 2.3vh;
  color: var(--scene-white);
  cursor: pointer;
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.15;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary span {
  flex: 0 0 auto;
  color: var(--scene-blue);
  font-size: 0;
}

.faq summary span::after {
  content: '+';
  font-size: 1.65rem;
  font-weight: 400;
}

.faq details[open] summary {
  color: var(--scene-blue);
}

.faq details[open] summary span::after {
  content: '\2212';
}

.faq details > p {
  max-width: 42rem;
  padding: 0 1.2rem 1.8vh 0;
}

.process-kicker,
.process-brand,
.process-footer {
  position: absolute;
  z-index: 1;
  color: rgba(230, 234, 234, 0.72);
  font: 400 0.62rem/1.5 'DM Mono', monospace;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.process-kicker {
  top: 11.4%;
  left: 4.5%;
  display: flex;
  align-items: center;
  gap: 1.3rem;
}

.process-kicker::after {
  width: 10.3vw;
  height: 1px;
  background: var(--scene-rule);
  content: '';
}

.process-brand {
  top: 4.5%;
  right: 4.5%;
  font-size: 0.52rem;
  letter-spacing: 0.34em;
}

.process-footer {
  right: 4.5%;
  bottom: 4.5%;
  left: 4.5%;
  display: flex;
  justify-content: space-between;
  font-size: 0.52rem;
  letter-spacing: 0.3em;
}

#contacto {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
  padding: 0;
  background: #0d1418;
}

#contacto::after {
  background: linear-gradient(90deg, rgba(8, 13, 16, 0.58), rgba(8, 13, 16, 0.3) 52%, rgba(8, 13, 16, 0.4));
}

#contacto > .scene-art {
  filter: grayscale(1);
}

.contact-identity {
  position: absolute;
  top: 12.4%;
  left: 4.8%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  color: #c5c9cb;
  font: 700 0.7rem/1.3 'DM Mono', monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.contact-identity small {
  color: rgba(194, 202, 206, 0.54);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.28em;
}

.contact-blue-rule {
  display: block;
  width: 4.7vw;
  height: 2px;
  margin-bottom: 2.6vh;
  background: #3c88b7;
}

.enquiry-layout {
  position: absolute;
  inset: 25.3% 2% 12% 4.8%;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 4.5vw;
  align-items: start;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.enquiry-copy {
  min-width: 0;
}

.enquiry-copy h2 {
  max-width: none;
  font-size: min(5.9vw, 10.5vh);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.055em;
}

.enquiry-copy > p {
  max-width: 35rem;
  margin: 1.35vw 0 0;
  color: var(--scene-muted);
  font-size: 1.7vw;
  line-height: 1.2;
}

.enquiry-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 3.2vw;
}

.enquiry-links a {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: var(--scene-blue);
  font-size: 1.4vw;
  line-height: 1.3;
  text-decoration: none;
}

.enquiry-links svg {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.contact-form {
  align-self: start;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 27px 24px;
  gap: 12px;
  border: 0;
  background: rgba(12, 18, 22, 0.96);
  box-shadow: none;
}

.contact-form .form-heading {
  color: var(--scene-white);
  font-size: 1.65vw;
  letter-spacing: -0.035em;
}

.contact-form label {
  gap: 0.45rem;
  color: #d2d9dc;
  font-size: 0.67rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-form input:not([type='checkbox']),
.contact-form textarea {
  min-height: 2.8rem;
  padding: 0.65rem 0.8rem;
  border-color: rgba(179, 190, 196, 0.38);
  background: rgba(23, 31, 36, 0.9);
  font: 400 0.9rem/1.45 Manrope, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.contact-form textarea {
  min-height: 6.4rem;
  max-height: 8rem;
}

.contact-form .form-privacy {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  min-height: 26px;
  color: #aeb8bd;
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: none;
}

.contact-form .form-privacy a {
  color: var(--scene-blue);
}

.contact-form .primary-action {
  min-height: 3rem;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}

.contact-form .form-status {
  min-height: 0;
}

#contacto footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 11.5vh;
  gap: 1.5rem;
  margin: 0;
  padding: 2.8vh 4.8vw 1vh;
  border-top: 1px solid var(--scene-rule);
  color: rgba(210, 218, 221, 0.68);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#contacto footer small {
  display: block;
  margin-top: 0.25rem;
  color: rgba(210, 218, 221, 0.55);
  font-size: 0.56rem;
}

#contacto footer a {
  text-decoration: none;
}

.scene-pagination {
  position: fixed;
  top: 50%;
  right: 0.85rem;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transform: translateY(-50%);
}

.scene-pagination a {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
}

.scene-pagination span {
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: rgba(238, 234, 227, 0.7);
  transition: background 220ms ease, transform 220ms ease;
}

.scene-pagination a[aria-current='page'] span {
  transform: scale(1.8);
  background: #72b6e9;
}

.landing-scene.is-active > [data-reveal] {
  animation: scene-content-enter 760ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.landing-scene.is-active .hero-content [data-reveal],
.landing-scene.is-active .solutions-body [data-reveal],
.landing-scene.is-active .process-copy [data-reveal],
.landing-scene.is-active .steps [data-reveal],
.landing-scene.is-active .faq[data-reveal],
.landing-scene.is-active .enquiry-layout [data-reveal] {
  animation: scene-content-enter 760ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.landing-scene.is-active .hero-content [data-reveal]:nth-child(2),
.landing-scene.is-active .solutions-body article:nth-child(2),
.landing-scene.is-active .steps li:nth-child(2) {
  animation-delay: 100ms;
}

.landing-scene.is-active .hero-content [data-reveal]:nth-child(3),
.landing-scene.is-active .solutions-body article:nth-child(3),
.landing-scene.is-active .steps li:nth-child(3) {
  animation-delay: 180ms;
}

.landing-scene.is-active .hero-content [data-reveal]:nth-child(4),
.landing-scene.is-active .steps li:nth-child(4) {
  animation-delay: 260ms;
}

@keyframes scene-content-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }

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

@media (max-width: 1050px) {
  .solutions-body {
    gap: 4.5%;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  }

  .service-list article {
    padding-block: 1.15rem;
  }

  .enquiry-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr);
    gap: 3vw;
  }
}

@media (min-width: 761px) {
  .site-nav .nav-links {
    gap: 2.25vw;
  }
  .site-nav .nav-links a {
    font-size: 14px;
  }
}

@media (max-width: 760px) {
  .site-nav {
    top: 18px;
    left: 6%;
    right: 5%;
    height: 44px;
    gap: 18px;
    padding: 0;
  }

  .brand-name {
    font-size: 15px;
  }

  .site-nav .nav-links {
    display: none;
  }

  .site-nav .nav-links.open {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 28px;
    border: 1px solid #536374;
    background: rgba(16, 26, 35, 0.96);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  }

  .site-nav .nav-links a {
    font-size: 13px;
    line-height: 1.5;
  }

  .language-switch {
    gap: 4px;
    margin-left: auto;
    padding-left: 0;
    border-left: 0;
  }

  .language-switch::before {
    display: none;
  }

  .language-switch a {
    min-width: 38px;
    min-height: 44px;
    font-size: 12px;
  }

  .menu-toggle {
    display: block;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    color: var(--scene-white);
    font-size: 24px;
  }

  .hero-motto {
    display: none;
  }

  .landing-scene .scene-art {
    object-position: 60% center;
  }

  .landing-hero::after {
    background: none;
  }

  .hero-content {
    align-self: flex-end;
    width: 100%;
    padding: 0 1.4rem 9vh;
  }

  .hero-content h1 {
    max-width: 9ch;
    font-size: clamp(3.25rem, 14vw, 5.4rem);
  }

  .hero-content .lead {
    max-width: 27rem;
    margin-top: 1.1rem;
    font-size: clamp(1rem, 4.2vw, 1.25rem);
  }

  .hero-content .primary-action {
    min-width: 15rem;
    margin-top: 1.5rem;
  }

  .eyebrow {
    margin-bottom: 1.1rem;
    font-size: 0.62rem;
  }

  #soluciones {
    display: block;
  }

  #soluciones::after {
    background: linear-gradient(180deg, rgba(8, 13, 16, 0.42), rgba(8, 13, 16, 0.18) 28%, rgba(8, 13, 16, 0.84) 58%, rgba(8, 13, 16, 0.94));
  }

  #solutions-title {
    top: 7.5%;
    left: 6%;
    right: 7%;
    font-size: clamp(2.4rem, 10vw, 4rem);
  }

  .solutions-body {
    inset: 29% 6% 6%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }

  .solutions-visual {
    display: none;
  }

  .service-list {
    justify-content: center;
  }

  .service-list article > a {
    grid-template-columns: minmax(0, 1fr) 1.4rem;
    gap: 0.5rem;
  }

  .service-arrow {
    font-size: 1.4rem;
  }

  .service-list article {
    padding: 0.8rem 0;
  }

  .service-list h3 {
    margin-bottom: 0.25rem;
    font-size: clamp(1.35rem, 6vw, 1.9rem);
  }

  .service-list p,
  .support {
    font-size: clamp(0.85rem, 3.7vw, 1rem);
    line-height: 1.4;
  }

  .included {
    margin-top: 0.9rem;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
  }

  #proceso {
    display: block;
    padding: 0;
  }

  #proceso::before {
    content: none;
  }

  #proceso::after {
    background: none;
  }

  .process-kicker {
    top: 6%;
    left: 6%;
    font-size: 0.55rem;
  }

  .process-kicker::after {
    width: 12vw;
  }

  .process-brand {
    top: 6%;
    right: 6%;
    font-size: 0.48rem;
  }

  .process-copy {
    top: 13%;
    left: 6%;
    width: 88%;
  }

  .process-copy h2 {
    max-width: none;
    font-size: clamp(2.2rem, 9.5vw, 3.5rem);
  }

  .steps {
    gap: 1vh;
    margin-top: 3.2vh;
  }

  .steps li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
  }

  .steps li > div {
    min-height: 0;
    padding-left: 0;
    border-left: 0;
  }

  .step-number {
    font-size: clamp(2.2rem, 9vw, 3.3rem);
  }

  .steps li .step-number {
    display: none;
  }

  .steps h3 {
    margin-bottom: 0.2rem;
    font-size: 1.1rem;
  }

  .steps p,
  .faq p {
    font-size: 0.84rem;
    line-height: 1.42;
  }

  .faq h3 {
    gap: 0.7rem;
    margin-bottom: 1vh;
    font-size: 0.58rem;
  }

  .faq {
    top: 55%;
    right: 6%;
    bottom: 11%;
    left: 6%;
    width: auto;
    overflow-y: auto;
    padding: 0;
    border-left: 0;
  }

  .faq summary {
    padding: 0.8vh 0;
    font-size: clamp(0.9rem, 4vw, 1.15rem);
  }

  .faq summary span::after {
    font-size: 1.2rem;
  }

  .faq details > p {
    padding-bottom: 0.9rem;
  }

  .process-footer {
    right: 6%;
    bottom: 3.5%;
    left: 6%;
    font-size: 0.42rem;
    letter-spacing: 0.14em;
  }

  #contacto {
    display: block;
    padding: 0;
  }

  #contacto::after {
    background: linear-gradient(180deg, rgba(8, 13, 16, 0.34), rgba(8, 13, 16, 0.78));
  }

  #contacto .scene-art {
    object-position: 70% center;
    opacity: 1;
  }

  .contact-identity {
    top: 7%;
    left: 6%;
    gap: 0.3rem;
    font-size: 0.56rem;
  }

  .contact-identity small {
    font-size: 0.48rem;
  }

  .contact-blue-rule {
    width: 2.5rem;
    margin-bottom: 1.4vh;
  }

  .enquiry-layout {
    inset: 17% 6% 13%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.2vh;
    margin: 0;
  }

  .enquiry-copy h2 {
    max-width: none;
    font-size: clamp(2.2rem, 8.5vw, 3.5rem);
    line-height: 0.95;
  }

  .enquiry-copy > p {
    margin-top: 1rem;
    font-size: 0.95rem;
  }

  .enquiry-links {
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.8rem;
  }

  .enquiry-links a {
    gap: 0.65rem;
    font-size: 0.84rem;
  }

  .enquiry-links svg {
    flex-basis: 1.4rem;
    width: 1.4rem;
    height: 1.4rem;
  }

  .contact-form {
    flex: 0 0 auto;
    gap: 0.45rem;
    padding: 0.65rem;
  }

  .contact-form .form-heading {
    font-size: 0.98rem;
  }

  .contact-form label {
    gap: 0.2rem;
    font-size: 0.62rem;
  }

  .contact-form .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
  }

  .contact-form input:not([type='checkbox']),
  .contact-form textarea {
    min-height: 2.45rem;
    padding: 0.45rem 0.55rem;
    font-size: 0.75rem;
  }

  .contact-form textarea {
    min-height: 3.1rem;
  }

  .contact-form .form-privacy {
    min-height: 1.5rem;
    font-size: 0.58rem;
  }

  .contact-form .primary-action {
    min-height: 2.75rem;
    padding: 0.65rem 0.8rem;
    font-size: 0.82rem;
  }

  .contact-form .form-status {
    min-height: 0;
    font-size: 0.62rem;
  }

  #contacto footer {
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr;
    height: 10vh;
    gap: 0.3rem;
    margin: 0;
    padding: 1.5vh 6%;
    font-size: 0.52rem;
    letter-spacing: 0.11em;
  }

  #contacto footer small {
    font-size: 0.46rem;
  }

  .scene-pagination {
    right: 0.25rem;
    gap: 0;
  }

  .scene-pagination a {
    width: 1.25rem;
    height: 1.25rem;
  }
}

@media (max-width: 390px) {
  .hero-content h1 {
    font-size: 3.05rem;
  }

  .contact-form .form-row {
    gap: 0.5rem;
  }

  .contact-form .form-row label {
    min-width: 0;
  }
}

@media (max-height: 720px) and (min-width: 761px) {
  .hero-content {
    padding-top: 20vh;
  }

  #proceso {
    padding-top: 6vh;
    padding-bottom: 5vh;
  }

  .steps {
    margin-top: 2vh;
  }

  .steps li {
    padding-block: 1vh;
  }

  .faq h3 {
    margin-bottom: 1vh;
  }

  .faq summary {
    padding-block: 1.3vh;
  }

  .enquiry-layout {
    margin-top: 0;
  }

  .contact-form {
    padding-block: 1.2rem;
    gap: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (min-width: 761px) {
  #main {
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    scroll-snap-type: none;
  }

  .landing-scene {
    position: absolute;
    inset: 0;
    visibility: hidden;
    height: 100vh;
    height: 100svh;
    opacity: 0;
    scroll-snap-align: none;
    transform-origin: center top;
    will-change: transform, opacity;
  }

  .landing-scene.is-active {
    visibility: visible;
    opacity: 1;
  }
}

.solutions-visual {
  isolation: isolate;
}

.solutions-visual .scene-art {
  z-index: 0;
}

.primary-action {
  min-height: 44px;
  padding: 1.05vw 2.15vw;
  border-radius: 2px;
  background: #377aa8;
  color: #f4f2ee;
  font-size: 1.1vw;
  letter-spacing: 0.04em;
  transition: background 250ms ease, transform 350ms ease;
}

.hero-content .primary-action,
.contact-form .primary-action {
  min-height: 44px;
  padding: 1.05vw 2.15vw;
  border: 0;
  border-radius: 2px;
  background: #377aa8;
  box-shadow: none;
  color: #f4f2ee;
  font: 400 1.1vw/1.3 Manrope, sans-serif;
  letter-spacing: 0.04em;
}

.primary-action:hover {
  transform: translateY(-3px);
  background: #4c91c0;
}

.primary-action span {
  transition: transform 350ms ease;
}

.primary-action:hover span {
  transform: translateX(5px);
}

.hero-content .primary-action {
  min-width: 16.5rem;
  font-size: clamp(0.9rem, 1.1vw, 1.1rem);
  letter-spacing: 0.04em;
  padding: 1.5vw 2.15vw;
}

.contact-form .primary-action {
  min-height: 50px;
  padding: 14px 22px;
  border-radius: 0;
  background: #285d80;
  color: #eeeae3;
  font: 700 15px/1.4 Manrope, sans-serif;
  letter-spacing: 0;
}

.contact-form .primary-action:hover {
  transform: translateY(-2px);
  background: #326f98;
}

.faq summary span {
  position: relative;
  width: 1.3rem;
  height: 1.3rem;
  color: transparent;
  font-size: 0;
}

.faq summary span::before,
.faq summary span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: '';
  background: var(--scene-blue);
  transition: transform 420ms cubic-bezier(0.22, 0.68, 0.2, 1);
}

.faq summary span::before {
  width: 1px;
  height: 1.15rem;
  transform: translate(-50%, -50%) scaleY(1);
}

.faq summary span::after {
  width: 1.15rem;
  height: 1px;
  transform: translate(-50%, -50%);
}

.faq details[open] summary span::before {
  transform: translate(-50%, -50%) scaleY(0);
}

.faq details[open] summary span::after {
  content: '';
  transform: translate(-50%, -50%);
}

.faq details > p {
  overflow: hidden;
}

.skip-link {
  position: fixed;
  top: 0;
  left: 1.25rem;
  z-index: 60;
  padding: 0.8rem 1rem;
  transform: translateY(calc(-100% - 1rem));
  background: #397dab;
  color: #fff;
  text-decoration: none;
  transition: transform 180ms ease;
}

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

@media (max-width: 760px) {
  .solutions-visual {
    z-index: 0;
  }

  .service-list {
    position: relative;
    z-index: 1;
  }

  .primary-action {
    padding: 14px 20px;
    font-size: 14px;
  }

  .hero-content .primary-action {
    min-width: 15rem;
    font-size: 14px;
  }

  .hero-content .primary-action {
    min-height: 44px;
    padding: 14px 20px;
  }

  .contact-form .primary-action {
    min-height: 50px;
    padding: 14px 22px;
    font-size: 15px;
  }
}

/* Use the portfolio's shared header geometry and control styling verbatim. */
.site-nav.nav-wrap {
  position: absolute;
  top: 3.2%;
  right: 4.3%;
  left: 4.4%;
  display: flex;
  align-items: center;
  gap: 4vw;
  width: auto;
  height: auto;
  padding: 0;
}

.site-nav .logo-mark {
  width: 3vw;
  height: 3.4vw;
}

.site-nav .nav-links {
  position: static;
  display: flex;
  align-items: center;
  gap: 2.5vw;
  margin: 0;
}

.site-nav .nav-links a {
  color: #afb5b8;
  font-size: 0.7vw;
  letter-spacing: 0.2em;
  line-height: normal;
  text-transform: uppercase;
}

.site-nav .language-switch {
  gap: 0.35vw;
  margin-left: auto;
  padding-left: 0;
  border: 0;
  transform: translateX(-7vw);
}

.site-nav .language-switch button {
  display: grid;
  min-width: 2.2vw;
  min-height: 36px;
  padding: 0;
  border: 0;
  place-items: center;
  background: none;
  color: #7e898f;
  font: 400 0.68vw 'DM Mono', monospace;
  cursor: pointer;
}

.site-nav .language-switch button[aria-pressed='true'] {
  color: #f1eee7;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.site-nav .hero-motto {
  position: relative;
  width: 6vw;
  margin-left: 3vw;
  color: #9ba2a6;
  font: 400 0.67vw/1.75 'DM Mono', monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.site-nav .hero-motto::before {
  position: absolute;
  top: 1.6vw;
  right: 10.5vw;
  width: 6.5vw;
  height: 1px;
  background: #7d8589;
  content: '';
}

@media (max-width: 760px) {
  .site-nav.nav-wrap {
    top: 18px;
    right: 5%;
    left: 6%;
    gap: 18px;
  }

  .site-nav .logo-mark {
    width: 36px;
    height: 41px;
  }

  .site-nav .hero-motto {
    display: none;
  }

  .site-nav .language-switch {
    gap: 4px;
    margin-left: auto;
    padding-left: 0;
    transform: none;
  }

  .site-nav .language-switch button {
    min-width: 38px;
    min-height: 44px;
    padding: 1px 6px;
    font: 400 12px 'DM Mono';
    letter-spacing: 0;
  }

  .site-nav .nav-links {
    display: none;
  }

  .site-nav .nav-links.open {
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 28px;
    border: 1px solid #536374;
    background: #101a23f5;
    box-shadow: 0 24px 60px #0008;
  }

  .site-nav .nav-links a {
    font-size: 13px;
    line-height: 1.5;
  }

  .site-nav .menu-toggle {
    display: block;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    appearance: none;
    background: none;
    font: inherit;
    font-size: 24px;
  }

  .site-nav .menu-toggle:focus-visible {
    outline: 2px solid #8fc8f1;
    outline-offset: 4px;
  }
}