@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/*
  Theme Name: TecnoRedes Perú
  Theme URI: https://tecnoredesperu.com
  Description: Tema corporativo de una sola página para TecnoRedes Perú — infraestructura y telecomunicaciones.
  Author: TecnoRedes Perú
  Version: 1.0.2
  License: GNU General Public License v2 or later
*/

:root {
  --navy: #071d3c; 
  --navy-deep: #06162e; 
  --blue: #2165f3; 
  --cyan: #5b92e5; /* Reemplazado cian brillante por azul claro corporativo */
  --ink: #102b4c; 
  --body-text: #607086; 
  --pale: #f5f8fc; 
  --line: #e2e9f1;
  --red: #ba2f41; /* Rojo corporativo */
}

*,
*::before,
*::after { 
  box-sizing: border-box; 
}

html { 
  scroll-behavior: smooth; 
  scroll-padding-top: 108px; 
}

body { 
  margin: 0; 
  font-family: 'Manrope', sans-serif; 
  color: var(--ink); 
  background: white; 
  -webkit-font-smoothing: antialiased; 
  overflow-x: clip; 
}

h1, h2, h3, p { 
  margin: 0; 
}

a { 
  color: inherit; 
  text-decoration: none; 
}

button { 
  font: inherit; 
}

button, a { 
  -webkit-tap-highlight-color: transparent; 
}

button:not(:disabled), a { 
  cursor: pointer; 
}

::selection { 
  background: var(--blue); 
  color: white; 
}

:focus-visible { 
  outline: 3px solid var(--blue); 
  outline-offset: 5px; 
}

.rail { 
  width: calc(100% - 100px); 
  max-width: 1250px; 
  margin-inline: auto; 
}

.section-space { 
  padding-block: 96px; 
}

h1, h2 { 
  font-family: 'Barlow Semi Condensed', sans-serif; 
  font-weight: 600; 
  letter-spacing: -.025em; 
}

h2 { 
  font-size: clamp(34px, 3.5vw, 47px); 
  line-height: 1.12; 
}

h3 { 
  font-size: 19px; 
  line-height: 1.35; 
  font-weight: 750; 
  letter-spacing: -.025em; 
}

.eyebrow { 
  font-size: 11px; 
  font-weight: 800; 
  letter-spacing: .18em; 
  color: var(--blue); 
  margin-bottom: 20px; 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  line-height: 1.6; 
}

.eyebrow::before { 
  content: ''; 
  width: 25px; 
  height: 2px; 
  background: currentColor; 
  flex-shrink: 0; 
}

.eyebrow.light { 
  color: var(--cyan); 
}

.cyan-dot { 
  color: var(--cyan); 
}

/* =========================================================
   BOTONES
   ========================================================= */
.button { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 22px; 
  padding: 17px 24px; 
  min-height: 52px; 
  border-radius: 6px; 
  border: 1px solid transparent; 
  font-weight: 700; 
  font-size: 12px; 
  line-height: 1.5; 
  transition: background .2s ease, transform .2s ease, border-color .2s ease; 
}

.button-primary { 
  color: white; 
  background: var(--blue); 
}

.button-primary:hover { 
  background: #1254db; 
  transform: translateY(-2px); 
}

.button:active { 
  transform: scale(.98); 
}

.button-outline { 
  color: white; 
  border-color: #ffffff50; 
  background: #ffffff04; 
}

.button-outline:hover { 
  background: #ffffff12; 
  border-color: var(--blue); 
}

.button-white { 
  background: white; 
  color: var(--blue); 
}

.button-white:hover { 
  background: #eaf5ff; 
  transform: translateY(-2px); 
}

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

/* =========================================================
   CABECERA Y NAVEGACIÓN
   ========================================================= */
.site-header { 
  position: sticky; 
  top: 0; 
  z-index: 40; 
  background: #fffffffa; 
  border-bottom: 1px solid var(--line); 
  backdrop-filter: blur(12px); 
}

.header-inner { 
  width: calc(100% - 100px); 
  max-width: 1350px; 
  height: 86px; 
  margin: auto; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 25px; 
}

.brand-logo { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  flex-shrink: 0; 
  color: var(--blue); 
}

.brand-logo strong { 
  display: block; 
  font-family: 'Barlow Semi Condensed', sans-serif; 
  font-size: 28px; 
  font-weight: 700; 
  letter-spacing: -.03em; 
  line-height: 1; 
  color: var(--ink); 
}

.brand-logo strong span { 
  color: var(--blue); 
}

.brand-logo small { 
  display: block; 
  font-size: 10px; 
  letter-spacing: .45em; 
  font-weight: 800; 
  color: var(--ink); 
  margin-top: 6px; 
}

.brand-light strong, 
.brand-light small { 
  color: white; 
}

.brand-light strong span { 
  color: white; 
}

.desktop-nav { 
  display: flex; 
  gap: 27px; 
  align-items: center; 
  margin-left: auto; 
}

.desktop-nav a { 
  font-size: 13px; 
  font-weight: 700; 
  padding-block: 15px; 
  transition: color .2s ease; 
  position: relative; 
}

.desktop-nav a::after { 
  content:''; 
  position:absolute; 
  bottom:5px; 
  left:0; 
  height:2px; 
  width:100%; 
  background: var(--red); /* Línea de hover en rojo corporativo */
  transform:scaleX(0); 
  transform-origin:left; 
  transition:transform .2s ease; 
}

.desktop-nav a:hover { 
  color: var(--red); 
}

.desktop-nav a:hover::after { 
  transform:scaleX(1); 
}

.header-cta { 
  min-height: 44px; 
  padding: 12px 17px; 
  gap: 15px; 
  margin-left: 9px; 
  font-size: 11px; 
  background-color: var(--navy) !important;
  color: white !important;
  border: 1px solid var(--red) !important;
}

.header-cta:hover {
  background-color: var(--red) !important;
}

.menu-toggle { 
  display: none; 
  background: transparent; 
  border: 0; 
  height: 44px; 
  width: 44px; 
  align-items: center; 
  justify-content: center; 
  color: var(--ink); 
}

.mobile-nav { 
  padding: 10px 24px 24px; 
  border-top: 1px solid var(--line); 
}

.mobile-nav a { 
  display: flex; 
  justify-content: space-between; 
  padding: 14px 0; 
  font-size: 15px; 
  border-bottom: 1px solid var(--line); 
}

/* =========================================================
   HERO / PORTADA
   ========================================================= */
.hero { 
  min-height: 660px; 
  position: relative; 
  color: white; 
  overflow: hidden; 
  background: var(--navy-deep); 
}

.hero-image, 
.hero-shade, 
.digital-grid { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  inset: 0; 
}

.hero-image { 
  object-fit: cover; 
  object-position: center; 
}

.hero-shade { 
  background: linear-gradient(90deg, #06162ef5 0%, #06162ee8 28%, #071d3c60 65%, #06162e38 100%), linear-gradient(0deg,#06162e99,transparent 35%); 
}

.digital-grid { 
  background-image: linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px); 
  background-size: 88px 88px; 
  pointer-events: none; 
}

.hero-content { 
  position: relative; 
  padding-top: 72px; 
  padding-bottom: 100px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}

.hero-copy { 
  max-width: 650px; 
}

.hero .eyebrow { 
  font-size: 10px; 
  letter-spacing: .14em; 
  margin-bottom: 22px; 
  color: #ffffff;
}

.hero .eyebrow::before { 
  display: none; 
}

.hero .eyebrow span { 
  width: 6px; 
  height: 6px; 
  border-radius: 50%; 
  background: var(--red); 
  box-shadow: 0 0 0 4px #ba2f4125; 
}

.hero h1 { 
  font-size: clamp(46px, 5.2vw, 73px); 
  line-height: 1.02; 
  letter-spacing: -.02em; 
}

.hero h1 span { 
  color: var(--cyan); /* Azul claro limpio */
}

.hero-description { 
  font-size: 14px; 
  line-height: 1.9; 
  color: #bfcde0; 
  max-width: 565px; 
  margin: 25px 0 28px; 
}

.hero-note { 
  border-left: 1px solid #ffffff30; 
  padding-left: 24px; 
  margin-top: 155px; 
  margin-right: 26px; 
}

.hero-note svg { 
  color: var(--cyan); 
  margin-bottom: 15px; 
}

.hero-note p { 
  font-family: 'Barlow Semi Condensed', sans-serif; 
  font-size: 24px; 
  line-height: 1.35; 
  font-weight: 400; 
}

.hero-note strong { 
  font-weight: 500; 
  color: var(--cyan); 
}

.note-rule { 
  display: block; 
  width: 42px; 
  height: 2px; 
  background: var(--red); 
  margin-top: 24px; 
}

.hero-bottom { 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  border-top: 1px solid #ffffff20; 
  min-height: 63px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  font-size: 9px; 
  letter-spacing: .14em; 
  color: #a4b5cd; 
}

.hero-bottom a { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  min-height: 44px; 
}

.hero-bottom svg { 
  color: var(--red); 
}

/* =========================================================
   SERVICIOS
   ========================================================= */
.section-heading { 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-end; 
  gap: 40px; 
  margin-bottom: 38px; 
}

.heading-aside { 
  font-size: 13px; 
  line-height: 1.8; 
  color: var(--body-text); 
  border-left: 1px solid var(--line); 
  padding-left: 24px; 
  margin-bottom: 5px; 
}

.service-grid { 
  display: grid; 
  grid-template-columns: repeat(4,1fr); 
  gap: 18px; 
}

.service-card { 
  padding: 28px 24px 23px; 
  border: 1px solid var(--line); 
  border-radius: 8px; 
  display: flex; 
  flex-direction: column; 
  position: relative; 
  overflow: hidden; 
  transition: transform .25s ease, border-color .25s ease, background .25s ease; 
}

.service-card::after { 
  content: ''; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  height: 3px; 
  width: 100%; 
  background: var(--red); 
  transform: scaleX(0); 
  transform-origin: left; 
  transition: transform .25s ease; 
}

.service-card:hover { 
  transform: translateY(-5px); 
  border-color: rgba(186, 47, 65, 0.4); 
  background: #fbfdff; 
}

.service-card:hover::after { 
  transform: scaleX(1); 
}

.service-top { 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-start; 
  margin-bottom: 25px; 
}

.icon-box { 
  width: 56px; 
  height: 56px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border: 1px solid #d8e8ff; 
  background: #f1f7ff; 
  color: var(--blue); 
  border-radius: 8px; 
}

.service-number { 
  font-family: 'Barlow Semi Condensed',sans-serif; 
  font-size: 13px; 
  color: #9badc2; 
  padding-top: 5px; 
}

.service-card h3 { 
  margin-bottom: 15px; 
  min-height: 51px; 
}

.service-card p { 
  font-size: 14px; 
  line-height: 1.8; 
  color: var(--body-text); 
  margin-bottom: 25px; 
}

.text-link { 
  display: flex; 
  justify-content: space-between; 
  width: 100%; 
  gap: 12px; 
  color: var(--blue); 
  border: 0; 
  background: transparent; 
  border-top: 1px solid var(--line); 
  padding-top: 20px; 
  margin-top: auto; 
  text-align: left; 
  font-size: 12px; 
  font-weight: 800; 
  min-height: 44px; 
}

.text-link:hover { 
  color: var(--red); 
}

/* =========================================================
   EXPERIENCIA / MÉTRICAS
   ========================================================= */
.experience { 
  background: var(--navy); 
  color: white; 
  position: relative; 
  overflow: hidden; 
}

.experience-inner { 
  position: relative; 
  padding-block: 68px 64px; 
}

.experience h2 { 
  font-size: 41px; 
}

.peru-map { 
  color: var(--cyan); 
  position: absolute; 
  width: 245px; 
  right: 5%; 
  top: -10px; 
  height: 360px; 
  opacity: 0.25;
}

.metrics { 
  display: grid; 
  grid-template-columns: 1fr 1.2fr 1fr; 
  margin-top: 38px; 
  max-width: 1060px; 
}

.metrics > div { 
  border-left: 1px solid #ffffff25; 
  padding: 0 35px; 
}

.metrics > div:first-child { 
  border-left: 0; 
  padding-left: 0; 
}

.metrics strong { 
  font-family: 'Barlow Semi Condensed',sans-serif; 
  font-size: 62px; 
  font-weight: 500; 
  line-height: 1; 
  letter-spacing: -.02em; 
}

.metrics strong span { 
  color: var(--cyan); 
}

.metrics strong small { 
  font-size: 36px; 
}

.metrics .metric-words { 
  font-size: 31px; 
  line-height: 1.2; 
  min-height: 74px; 
  display: block; 
}

.metrics > div:last-child strong { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
}

.metrics p { 
  font-size: 11px; 
  color: #a8bbd4; 
  margin-top: 13px; 
}

/* =========================================================
   ENFOQUE Y PROCESO
   ========================================================= */
.approach { 
  background: var(--pale); 
}

.approach-intro { 
  max-width: 380px; 
  font-size: 14px; 
  line-height: 1.9; 
  color: var(--body-text); 
  margin-bottom: 2px; 
}

.steps { 
  display: grid; 
  grid-template-columns: repeat(3,1fr); 
  gap: 48px; 
  margin-top: 47px; 
}

.step-line { 
  display: flex; 
  align-items: center; 
  gap: 22px; 
  margin-bottom: 23px; 
  color: var(--blue); 
}

.step-line span { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  font-size: 24px; 
  font-family: 'Barlow Semi Condensed',sans-serif; 
  font-weight: 500; 
  width: 58px; 
  height: 58px; 
  border-radius: 50%; 
  background: white; 
  border: 1px solid #d5e5fc; 
  flex-shrink: 0; 
}

.step-line i { 
  height: 1px; 
  width: 100%; 
  background: #ccdbee; 
}

.steps article:last-child .step-line svg { 
  color: var(--blue); 
}

.steps h3 { 
  font-size: 21px; 
  margin-bottom: 12px; 
}

.steps p { 
  max-width: 295px; 
  color: var(--body-text); 
  font-size: 14px; 
  line-height: 1.8; 
}

/* =========================================================
   PROYECTOS Y OTROS
   ========================================================= */
.projects { 
  min-height: 475px; 
  position: relative; 
  overflow: hidden; 
  color: white; 
  background: var(--navy); 
}

.projects > img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  position: absolute; 
  inset: 0; 
}

.projects-shade { 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(90deg,#071d3cf2 0%,#071d3cce 34%,#071d3c20 100%); 
}

.projects-inner { 
  position: relative; 
  padding-block: 74px 78px; 
}

.projects h2 { 
  font-size: 48px; 
}

.projects-inner > p:not(.eyebrow) { 
  max-width: 460px; 
  margin: 22px 0 27px; 
  line-height: 1.85; 
  color: #c4d1e3; 
  font-size: 14px; 
}

.project-caption { 
  position: absolute; 
  right: 50px; 
  bottom: 25px; 
  display: flex; 
  align-items: center; 
  gap: 9px; 
  color: #b9cee1; 
  font-size: 9px; 
  letter-spacing: .12em; 
}

.why-us { 
  display: grid; 
  grid-template-columns: .9fr 1.4fr; 
  gap: 65px; 
}

.why-heading > p:not(.eyebrow) { 
  font-size: 14px; 
  line-height: 1.8; 
  color: var(--body-text); 
  margin-top: 23px; 
}

.brand-lines { 
  display: flex; 
  gap: 7px; 
  margin-top: 30px; 
}

.brand-lines i { 
  width: 52px; 
  height: 3px; 
  background: var(--blue); 
}

.brand-lines i:nth-child(2) { 
  width: 29px; 
  background: var(--cyan); 
}

.brand-lines i:last-child { 
  width: 12px; 
  background: var(--navy); 
}

.strength-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  column-gap: 34px; 
}

.strength-grid article { 
  display: flex; 
  align-items: flex-start; 
  gap: 16px; 
  padding: 22px 0; 
  border-bottom: 1px solid var(--line); 
}

.strength-grid article:nth-child(-n+2) { 
  padding-top: 0; 
}

.strength-grid article:nth-last-child(-n+2) { 
  border-bottom: 0; 
  padding-bottom: 0; 
}

.strength-grid svg { 
  color: var(--blue); 
  flex-shrink: 0; 
  margin-top: 2px; 
}

.strength-grid h3 { 
  font-size: 15px; 
  margin-bottom: 9px; 
  letter-spacing: -.01em; 
}

.strength-grid p { 
  font-size: 13px; 
  line-height: 1.8; 
  color: var(--body-text); 
}

/* =========================================================
   CONTACTO Y FOOTER
   ========================================================= */
.contact { 
  position: relative; 
  overflow: hidden; 
  background: linear-gradient(115deg,#071d3c 5%,#1b2a47 65%,#06162e); 
  color: white; 
}

.contact::after { 
  content: ''; 
  width: 470px; 
  height: 470px; 
  border-radius: 50%; 
  border: 1px solid #ffffff15; 
  position: absolute; 
  right: -50px; 
  top: -110px; 
  pointer-events: none; 
  box-shadow: 0 0 0 70px #ffffff04,0 0 0 140px #ffffff03; 
}

.contact-inner { 
  padding-block: 70px; 
  display: grid; 
  grid-template-columns: 1.4fr 1fr; 
  gap: 100px; 
  position: relative; 
  z-index: 1; 
  align-items: center; 
}

.contact .eyebrow { 
  color: var(--cyan); 
}

.contact h2 { 
  font-size: 50px; 
}

.contact h2 span { 
  color: var(--cyan); 
}

.contact-inner > div > p:not(.eyebrow) { 
  margin-top: 22px; 
  font-size: 14px; 
  line-height: 1.9; 
  color: #daebff; 
  max-width: 570px; 
}

.contact-actions { 
  display: flex; 
  flex-direction: column; 
  align-items: flex-start; 
  gap: 18px; 
}

.contact-actions .button { 
  font-size: 14px; 
  padding: 20px 29px; 
  gap: 36px; 
  margin-bottom: 4px; 
  background: #ffffff;
  color: var(--navy);
  border-color: var(--red);
}

.contact-actions .button:hover {
  background: var(--red);
  color: #ffffff;
}

.contact-direct { 
  display: flex; 
  align-items: center; 
  gap: 11px; 
  font-size: 12px; 
}

.contact-direct:hover { 
  text-decoration: underline; 
}

.site-footer { 
  background: var(--navy-deep); 
  color: #a6b6cc; 
  padding-top: 59px; 
}

.footer-main { 
  display: grid; 
  grid-template-columns: 1.25fr .65fr 1fr 1.3fr; 
  gap: 45px; 
  padding-bottom: 48px; 
}

.footer-main h3 { 
  color: white; 
  font-size: 12px; 
  font-weight: 700; 
  letter-spacing: 0; 
  margin-bottom: 23px; 
}

.footer-main > div > a { 
  display: block; 
  font-size: 11px; 
  margin-bottom: 14px; 
}

.footer-main a:hover { 
  color: var(--cyan); 
}

.footer-main .brand-logo { 
  display: flex; 
  margin-bottom: 23px; 
}

.footer-brand > p { 
  font-size: 12px; 
  line-height: 1.8; 
}

.social-links { 
  display: flex; 
  gap: 10px; 
  margin-top: 20px; 
}

.social-links a { 
  width: 36px; 
  height: 36px; 
  border: 1px solid #ffffff20; 
  border-radius: 5px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

.footer-main .footer-contact a, 
.footer-contact p { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  font-size: 11px; 
  line-height: 1.7; 
}

.footer-contact svg { 
  color: var(--blue); 
  flex-shrink: 0; 
}

.footer-bottom { 
  border-top: 1px solid #ffffff14; 
  min-height: 63px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 25px; 
  font-size: 9px; 
}

.footer-bottom a { 
  display: flex; 
  align-items: center; 
  gap: 9px; 
  min-height: 44px; 
}

/* =========================================================
   MODAL
   ========================================================= */
.modal-backdrop { 
  position: fixed; 
  inset: 0; 
  z-index: 60; 
  background: #06162e80; 
  backdrop-filter: blur(3px); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 20px; 
  opacity: 0; 
  visibility: hidden; 
  transition: opacity .25s ease, visibility .25s ease; 
}

.modal-backdrop.open { 
  opacity: 1; 
  visibility: visible; 
}

.modal-card { 
  width: 100%; 
  max-width: 560px; 
  background: white; 
  border-radius: 12px; 
  padding: 40px; 
  transform: translateY(16px); 
  transition: transform .25s ease; 
  box-shadow: 0 30px 80px #06162e40; 
}

.modal-backdrop.open .modal-card { 
  transform: translateY(0); 
}

.modal-card .icon-box { 
  margin-bottom: 18px; 
}

.modal-card .eyebrow { 
  margin-bottom: 12px; 
}

.modal-card h3 { 
  font-size: 30px; 
  line-height: 1.15; 
  margin-bottom: 14px; 
}

.modal-card p { 
  font-size: 16px; 
  line-height: 1.7; 
  color: var(--body-text); 
}

.modal-card .button { 
  margin-top: 22px; 
}

.modal-close { 
  position: absolute; 
  top: 18px; 
  right: 18px; 
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  border: 1px solid var(--line); 
  background: white; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: var(--ink); 
}

.reveal { 
  transition: opacity .65s ease, transform .65s ease; 
}

.reveal-pending { 
  opacity: 0; 
  transform: translateY(20px); 
}

/* =========================================================
   MEDIA QUERIES / RESPONSIVE
   ========================================================= */
@media(min-width:1600px) { 
  .hero-image { object-position: center 55%; } 
}

@media(max-width:1150px) {
  .desktop-nav { gap: 17px; } 
  .header-inner { width:calc(100% - 56px); gap:18px; } 
  .header-cta { margin-left:0; padding-inline:12px; } 
  .rail { width:calc(100% - 64px); }
  .brand-logo strong { font-size:25px; } 
  .service-card { padding:24px 19px; } 
  .service-card h3 { font-size:17px; } 
  .hero-note { margin-right:0; } 
  .why-us { gap:40px; } 
  .footer-main { gap:25px; } 
  .contact-inner { gap:50px; }
}

@media(max-width:950px) {
  .desktop-nav { gap:15px; } 
  .desktop-nav a { font-size:11px; } 
  .header-cta { display:none; }
  .hero-note { display:none; } 
  .hero-copy { max-width:650px; } 
  .hero { min-height:650px; } 
  .hero-image { object-position:65% center; }
  .service-grid { grid-template-columns:repeat(2,1fr); gap:20px; } 
  .service-card h3 { min-height:0; font-size:19px; } 
  .service-card p { font-size:13px; } 
  .service-card { padding:28px; }
  .metrics > div { padding-inline:23px; } 
  .metrics .metric-words { font-size:27px; } 
  .why-us { grid-template-columns:1fr; gap:42px; } 
  .why-heading h2 br { display:none; } 
  .brand-lines { display:none; }
  .contact-inner { grid-template-columns:1.25fr 1fr; gap:30px; } 
  .contact h2 { font-size:43px; } 
  .footer-main { grid-template-columns:1.2fr 1fr; gap:40px; }
}

@media(max-width:700px) {
  html { scroll-padding-top:88px; } 
  .rail { width:calc(100% - 40px); } 
  .section-space { padding-block:62px; }
  .header-inner { height:74px; width:calc(100% - 36px); } 
  .brand-logo strong { font-size:25px; } 
  .brand-logo svg { width:35px; height:36px; } 
  .brand-logo small { font-size:9px; }
  .desktop-nav { display:none; } 
  .menu-toggle { display:flex; } 
  .header-cta { display:inline-flex; font-size:10px; padding:10px; min-height:42px; margin-left:auto; gap:8px; } 
  .header-cta svg { width:15px; }
  .hero { min-height:670px; } 
  .hero-content { padding-top:62px; padding-bottom:100px; } 
  .hero h1 { font-size:57px; } 
  .hero .eyebrow { font-size:9px; letter-spacing:.10em; }
  .hero-shade { background:linear-gradient(90deg,#06162eea,#06162ea0),linear-gradient(0deg,#06162e99,transparent); } 
  .hero-description { font-size:13px; max-width:520px; margin-top:24px; } 
  .hero-bottom > span { max-width:230px; font-size:8px; line-height:1.8; } 
  .hero-bottom a span { display:none; }
  .button { padding:15px 19px; font-size:11px; gap:15px; } 
  .section-heading { display:block; margin-bottom:30px; } 
  .heading-aside { display:none; } 
  .eyebrow { font-size:10px; margin-bottom:15px; } 
  h2 { font-size:37px; }
  .service-grid { gap:14px; } 
  .service-card { padding:23px 19px; } 
  .service-card h3 { font-size:17px; min-height:45px; } 
  .service-card p { font-size:13px; line-height:1.8; } 
  .service-top { margin-bottom:21px; } 
  .service-number { display:none; } 
  .text-link { font-size:10px; }
  .experience-inner { padding-block:58px; } 
  .experience h2 { font-size:36px; } 
  .peru-map { right:-35px; top:15px; width:220px; opacity:.6; } 
  .metrics { grid-template-columns:1fr; gap:25px; margin-top:35px; } 
  .metrics > div, .metrics > div:first-child { border-left:0; border-top:1px solid #ffffff22; padding:23px 0 0; } 
  .metrics strong { font-size:53px; } 
  .metrics .metric-words { font-size:30px; min-height:0; } 
  .metrics .metric-words br { display:none; } 
  .metrics p { font-size:12px; }
  .approach-intro { max-width:none; margin-top:22px; } 
  .steps { grid-template-columns:1fr; gap:28px; margin-top:30px; } 
  .step-line { margin-bottom:16px; } 
  .step-line span { width:49px; height:49px; font-size:22px; } 
  .steps p { max-width:none; }
  .projects { min-height:465px; } 
  .projects-inner { padding-block:60px 80px; } 
  .projects h2 { font-size:40px; } 
  .projects-shade { background:linear-gradient(90deg,#071d3cee,#071d3c90); } 
  .project-caption { left:20px; right:auto; font-size:8px; } 
  .projects > img { object-position:65% center; }
  .why-heading h2 br { display:initial; } 
  .strength-grid { gap:0 22px; } 
  .strength-grid article { display:block; padding-block:23px; } 
  .strength-grid svg { margin-bottom:12px; } 
  .strength-grid h3 { font-size:14px; } 
  .strength-grid p { font-size:13px; }
  .contact-inner { grid-template-columns:1fr; gap:33px; padding-block:55px; } 
  .contact h2 { font-size:44px; } 
  .contact-inner > div > p:not(.eyebrow) { font-size:13px; } 
  .contact-actions .button { font-size:13px; min-width:250px; padding:18px 24px; } 
  .contact-direct { font-size:12px; min-height:30px; }
  .site-footer { padding-top:45px; } 
  .footer-main {grid-template-columns:1fr 1fr; gap:36px 20px; padding-bottom:32px; } 
  .footer-brand { grid-column:1/-1; } 
  .footer-main .footer-contact { grid-column:1/-1; } 
  .footer-main > div > a { font-size:12px; min-height:28px; } 
  .footer-main .footer-contact a, .footer-contact p { font-size:12px; }
  .footer-bottom { align-items:flex-start; padding-block:20px; font-size:9px; gap:20px; } 
  .footer-bottom p { line-height:1.9; max-width:230px; } 
  .footer-bottom a { min-height:25px; white-space:nowrap; }
}

@media(max-width:400px) { 
  .header-cta { display:none; } 
  .hero h1 { font-size:49px; } 
  .hero .eyebrow { font-size:8px; } 
  .service-grid { grid-template-columns:1fr; } 
  .service-card h3 { min-height:0; } 
  .service-card p { font-size:13px; } 
  .button-row { gap:10px; } 
  .button-row .button { padding-inline:14px; } 
  .strength-grid { grid-template-columns:1fr; } 
  .strength-grid article { display:flex; gap:18px; } 
  .strength-grid article:nth-child(2) { padding-top:23px; } 
  .strength-grid article:nth-last-child(2) { border-bottom:1px solid var(--line); padding-bottom:23px; } 
}

@media(prefers-reduced-motion:reduce) { 
  html { scroll-behavior:auto; } 
  *,*::before,*::after { transition:none !important; animation:none !important; } 
  .reveal-pending { opacity:1; transform:none; } 
}