/* NUON Multi-page · extra styles for page-specific sections */

/* ---------- PAGE NAV (multi-page version) ---------- */
.nav__link.is-current {
  color: var(--ink-900);
  background: var(--ink-50);
}
.nav__link.is-current::after {
  content: ""; display: block; height: 2px; width: 16px; margin: 4px auto -2px;
  background: var(--nuon-gradient);
  border-radius: 999px;
}

/* ---------- PAGE HERO (smaller than home hero) ---------- */
.page-hero {
  padding: 56px 0 56px;
  border-bottom: 1px solid var(--divider);
  position: relative;
}
.page-hero__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: end;
}
.page-hero__breadcrumb {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 24px;
}
.page-hero__breadcrumb a { color: var(--ink-400); }
.page-hero__breadcrumb a:hover { color: var(--nuon-azul); }
.page-hero__breadcrumb .sep { color: var(--nuon-azul); opacity: 0.5; }
.page-hero__breadcrumb .current { color: var(--nuon-azul); }

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.96;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink-900);
  margin: 0;
  text-wrap: balance;
}
.page-hero__title .grad { background: var(--nuon-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-hero__lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 480px;
}

@media (max-width: 900px) { .page-hero__inner { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- MINI CTA ---------- */
.mini-cta {
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: 64px 0;
  background: var(--ink-0);
}
.mini-cta__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  align-items: center;
  gap: 48px;
}
.mini-cta__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 0.96;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink-900);
  margin: 0;
}
.mini-cta__title .grad { background: var(--nuon-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mini-cta__lede { font-size: 14px; color: var(--ink-500); line-height: 1.55; }
@media (max-width: 900px) { .mini-cta__inner { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- HOME TILES (short home) ---------- */
.home-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tile {
  border: 1px solid var(--divider);
  border-radius: 16px;
  padding: 32px 28px;
  background: var(--ink-0);
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
  transition: all var(--dur-base) var(--ease-standard);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.tile::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); }
.tile:hover::before { transform: scaleX(1); }
.tile__num { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--ink-400); }
.tile__overline { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.tile__title { font-family: var(--font-sans); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--ink-900); margin-top: 8px; }
.tile__body { font-size: 14px; color: var(--ink-500); line-height: 1.55; flex: 1; }
.tile__link { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 900px) { .home-tiles { grid-template-columns: 1fr; } }

/* ---------- HOME MANIFIESTO STRIP ---------- */
.home-manifest {
  padding: var(--section-y) 0;
  background: var(--ink-900);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.home-manifest::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 50% 40% at 30% 30%, rgba(216,131,255,.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 70% 70%, rgba(0,150,255,.10), transparent 60%),
    linear-gradient(rgba(26,46,107,.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,46,107,.45) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
}
.home-manifest > * { position: relative; }
.home-manifest__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: end; }
.home-manifest__overline { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--nuon-cian); margin-bottom: 32px; display: block; }
.home-manifest__quote {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.home-manifest__quote em {
  font-style: normal; font-weight: 600;
  background: var(--nuon-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 900px) { .home-manifest__inner { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- ARCHITECTURE (Producto) ---------- */
.arch {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: stretch;
}
.arch__layers { display: flex; flex-direction: column; gap: 8px; }
.arch__layer {
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 20px 24px;
  background: var(--ink-0);
  display: grid;
  grid-template-columns: 56px auto 1fr;
  gap: 20px;
  align-items: start;
  position: relative;
  transition: all var(--dur-base) var(--ease-standard);
  border-left: 4px solid var(--accent);
}
.arch__layer:hover { background: linear-gradient(180deg, #fff 0%, #F4F8FD 100%); }
.arch__layer-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: .04em;
  padding-top: 2px;
}
.arch__layer-name {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  line-height: 1;
}
.arch__layer-desc { font-size: 13px; color: var(--ink-500); line-height: 1.55; }

.arch__diagram {
  border: 1px solid rgba(0,150,255,.16);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(122,177,255,.08), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F8FD 100%);
  position: relative;
  overflow: hidden;
  padding: 24px;
}
.arch__diagram::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,150,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,150,255,.05) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.arch__diagram-svg { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 480px; }

@media (max-width: 1000px) { .arch { grid-template-columns: 1fr; } }

/* ---------- SPECS TABLE ---------- */
.specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--divider); }
.spec {
  padding: 28px 24px;
  border-right: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  background: var(--ink-0);
}
.spec:nth-child(4n) { border-right: 0; }
.spec__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 14px; }
.spec__value { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--ink-900); letter-spacing: -0.015em; }
.spec__value .u { font-family: var(--font-sans); font-weight: 400; font-size: 14px; color: var(--ink-500); margin-left: 6px; }
.spec__sub { margin-top: 12px; font-size: 12px; color: var(--ink-500); line-height: 1.5; }

@media (max-width: 900px) {
  .specs { grid-template-columns: repeat(2, 1fr); }
  .spec:nth-child(2n) { border-right: 0; }
}

/* ---------- API / CODE BLOCK ---------- */
.api {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: stretch;
}
.api__intro { display: flex; flex-direction: column; gap: 24px; }
.api__bullets { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.api__bullet { display: flex; align-items: start; gap: 12px; font-size: 14px; color: var(--ink-600); }
.api__bullet::before {
  content: "▸"; color: var(--nuon-azul); font-family: var(--font-mono); flex-shrink: 0;
}
.api__code {
  background: var(--ink-900);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(122,177,255,.18);
  box-shadow: 0 20px 50px -20px rgba(13,20,40,.3);
}
.api__code-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(13,20,40,.6);
  border-bottom: 1px solid rgba(122,177,255,.14);
}
.api__code-dots { display: flex; gap: 6px; }
.api__code-dots span { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.18); }
.api__code-file { font-family: var(--font-mono); font-size: 11px; color: rgba(184,196,216,.7); letter-spacing: .06em; }
.api__code pre {
  margin: 0; padding: 20px 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  color: #cdd6e6;
  overflow-x: auto;
}
.api__code .kw { color: #D883FF; }
.api__code .str { color: #76D6FF; }
.api__code .com { color: rgba(184,196,216,0.45); }
.api__code .fn { color: #7A81FF; }

@media (max-width: 1000px) { .api { grid-template-columns: 1fr; } }

/* ---------- COVERAGE MAP ---------- */
.coverage-map {
  position: relative;
  border: 1px solid rgba(0,150,255,.16);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(122,177,255,.06), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F8FD 100%);
  padding: 32px;
  overflow: hidden;
  min-height: 560px;
}
.coverage-map::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,150,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,150,255,.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.coverage-map__inner { position: relative; z-index: 1; height: 100%; }
.coverage-map svg { width: 100%; height: auto; min-height: 480px; display: block; }
.coverage-legend {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,150,255,.18);
  border-radius: 10px;
  padding: 12px 16px;
  display: grid; gap: 6px;
  z-index: 2;
}
.coverage-legend .head { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--nuon-azul); margin-bottom: 4px; }
.coverage-legend .row { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; font-size: 11px; color: var(--ink-700); }
.coverage-legend .row .num { font-family: var(--font-mono); font-size: 10px; color: var(--ink-400); }
.coverage-legend .dot { width: 8px; height: 8px; border-radius: 999px; }

/* ---------- REG GRID ---------- */
.reg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.reg-card {
  border: 1px solid var(--divider);
  border-radius: 16px;
  padding: 28px;
  background: var(--ink-0);
  display: flex; flex-direction: column; gap: 14px;
}
.reg-card__head { display: flex; align-items: center; gap: 16px; }
.reg-card__flag {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--ink-900); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  letter-spacing: .04em;
}
.reg-card__name { font-family: var(--font-display); font-size: 36px; color: var(--ink-900); letter-spacing: -0.01em; line-height: 1; }
.reg-card__body { color: var(--ink-500); font-size: 14px; line-height: 1.6; }
.reg-card__regs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.reg-card__reg { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; background: var(--ink-50); color: var(--ink-700); }
@media (max-width: 900px) { .reg-grid { grid-template-columns: 1fr; } }

/* ---------- TIMELINE ---------- */
.timeline {
  position: relative;
  display: flex; flex-direction: column;
  padding-left: 60px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 24px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--nuon-cian) 0%, var(--nuon-azul) 25%, var(--nuon-indigo) 50%, var(--nuon-magenta) 75%, var(--nuon-rosa) 100%);
  opacity: 0.6;
}
.tl-event {
  padding: 24px 0;
  border-bottom: 1px solid var(--divider);
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  align-items: start;
}
.tl-event::before {
  content: "";
  position: absolute;
  left: -42px; top: 32px;
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--ink-0);
  border: 2px solid var(--nuon-azul);
  box-shadow: 0 0 0 4px rgba(0,150,255,.12);
}
.tl-event__when { font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; color: var(--ink-400); }
.tl-event__when .year { font-family: var(--font-display); font-size: 36px; line-height: 1; color: var(--ink-900); letter-spacing: -0.01em; display: block; margin-bottom: 4px; }
.tl-event__title { font-weight: 700; font-size: 18px; color: var(--ink-900); margin-bottom: 8px; }
.tl-event__body { color: var(--ink-500); font-size: 14px; line-height: 1.6; max-width: 640px; }

/* ---------- CASOS — full grid (6) ---------- */
.casos--all { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1000px) { .casos--all { grid-template-columns: 1fr; } }

/* ---------- LOGOS STRIP ---------- */
.logos-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.logo-cell {
  padding: 32px 16px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink-400);
  letter-spacing: -0.01em;
  border-right: 1px solid var(--divider);
  transition: color var(--dur-base);
}
.logo-cell:nth-child(4n) { border-right: 0; }
.logo-cell:nth-child(n+5) { border-top: 1px solid var(--divider); }
.logo-cell:hover { color: var(--ink-900); }
@media (max-width: 900px) {
  .logos-strip { grid-template-columns: repeat(2, 1fr); }
  .logo-cell:nth-child(2n) { border-right: 0; }
  .logo-cell:nth-child(n+3) { border-top: 1px solid var(--divider); }
}

/* ---------- BREAKDOWN bars ---------- */
.breakdown { display: flex; flex-direction: column; gap: 18px; }
.bd-row { display: grid; grid-template-columns: 200px 1fr 80px; gap: 24px; align-items: center; }
.bd-row__label { font-size: 14px; color: var(--ink-700); }
.bd-row__bar { height: 12px; background: var(--ink-50); border-radius: 6px; overflow: hidden; }
.bd-row__fill { height: 100%; border-radius: 6px; background: var(--accent); }
.bd-row__value { font-family: var(--font-display); font-size: 28px; letter-spacing: -0.01em; color: var(--ink-900); text-align: right; line-height: 1; }
.bd-row__value .u { font-family: var(--font-sans); font-weight: 400; font-size: 12px; color: var(--ink-500); margin-left: 2px; }
@media (max-width: 700px) { .bd-row { grid-template-columns: 1fr; gap: 6px; } .bd-row__value { text-align: left; } }

/* ---------- BENEFITS ---------- */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.benefit {
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 24px;
  background: var(--ink-0);
  display: flex; flex-direction: column; gap: 12px;
}
.benefit__num { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--nuon-azul); }
.benefit__title { font-weight: 700; font-size: 18px; color: var(--ink-900); }
.benefit__body { font-size: 14px; color: var(--ink-500); line-height: 1.55; }
@media (max-width: 900px) { .benefits { grid-template-columns: 1fr; } }

/* ---------- PROCESS STEPS ---------- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--ink-900); position: relative; }
.process::before {
  content: ""; position: absolute; top: -1px; left: 0;
  height: 2px; background: var(--nuon-gradient);
  width: 25%;
}
.process-step {
  padding: 28px 24px;
  border-right: 1px solid var(--divider);
  background: var(--ink-0);
}
.process-step:last-child { border-right: 0; }
.process-step__num { font-family: var(--font-display); font-size: 64px; color: var(--ink-200); letter-spacing: -0.02em; line-height: 1; margin-bottom: 16px; }
.process-step__title { font-weight: 700; font-size: 18px; color: var(--ink-900); margin-bottom: 8px; }
.process-step__sub { font-size: 13px; color: var(--ink-500); line-height: 1.5; margin-bottom: 16px; }
.process-step__time { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--nuon-azul); }
@media (max-width: 900px) { .process { grid-template-columns: 1fr; } .process-step { border-right: 0; border-bottom: 1px solid var(--divider); } }

/* ---------- TESTIMONIO ---------- */
.testimonio {
  background: var(--ink-900); color: #fff;
  padding: 80px 0; position: relative; overflow: hidden;
}
.testimonio::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 50% 40% at 30% 30%, rgba(122,177,255,.10), transparent 60%),
    linear-gradient(rgba(26,46,107,.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,46,107,.45) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
}
.testimonio > * { position: relative; }
.testimonio__quote {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 980px;
  margin: 0 0 32px;
  color: #fff;
  text-wrap: balance;
}
.testimonio__author {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--nuon-cian);
}

/* ---------- FEATURED INSIGHT ---------- */
.featured-insight {
  border: 1px solid var(--divider);
  border-radius: 20px;
  padding: 56px;
  background: linear-gradient(135deg, var(--ink-0) 0%, var(--ink-50) 100%);
  position: relative;
  overflow: hidden;
  margin-bottom: 64px;
}
.featured-insight::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--nuon-gradient);
}
.featured-insight__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; }
.featured-insight__title {
  font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.15;
  color: var(--ink-900);
  margin: 16px 0 24px;
  text-wrap: balance;
}
.featured-insight__body { font-size: 16px; color: var(--ink-500); line-height: 1.6; margin-bottom: 24px; }
.featured-insight__author { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-500); }
.featured-insight__readtime { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--nuon-azul); }

@media (max-width: 900px) { .featured-insight { padding: 32px; } .featured-insight__inner { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- INSIGHTS FILTERS ---------- */
.insight-filters {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--divider);
}
.insight-filter {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--divider);
  background: transparent;
  color: var(--ink-500);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-standard);
}
.insight-filter:hover { color: var(--ink-900); border-color: var(--ink-700); }
.insight-filter.is-active { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }

/* ---------- CONTACT FORM ---------- */
.contact { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; }
.form-card {
  border: 1px solid var(--divider);
  border-radius: 20px;
  padding: 40px;
  background: var(--ink-0);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.form-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--nuon-gradient);
}
.form-card__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; }
.form-card__title { font-family: var(--font-sans); font-weight: 700; font-size: 24px; color: var(--ink-900); margin: 0; }
.form-card__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-400); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); }
.field input, .field select, .field textarea {
  border: 1px solid var(--border-1);
  background: var(--ink-0);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-sans); font-size: 14px;
  color: var(--ink-800);
  transition: all var(--dur-base) var(--ease-standard);
  outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--nuon-azul);
  box-shadow: 0 0 0 4px rgba(0,150,255,.12);
}
.field textarea { resize: vertical; min-height: 100px; font-family: var(--font-sans); }
.form-submit { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; }
.form-success {
  display: none;
  text-align: center;
  padding: 40px 0;
}
.form-success.is-on { display: block; }
.form-success__icon {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: rgba(18,196,187,.12);
  color: var(--success);
  display: grid; place-items: center;
  margin: 0 auto 20px;
}
.form-success__title { font-family: var(--font-display); font-size: 40px; color: var(--ink-900); letter-spacing: -0.01em; margin-bottom: 12px; }
.form-success__title .grad { background: var(--nuon-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.form-success__body { color: var(--ink-500); font-size: 15px; line-height: 1.6; max-width: 360px; margin: 0 auto; }

.contact__side { display: flex; flex-direction: column; gap: 32px; }
.alt-list { display: flex; flex-direction: column; gap: 14px; }
.alt-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 14px;
}
.alt-row .l { color: var(--ink-500); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.alt-row .v { color: var(--ink-900); font-weight: 500; }

@media (max-width: 1000px) { .contact { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } }

/* ---------- OFFICES ---------- */
.offices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.office {
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 24px;
  background: var(--ink-0);
  display: flex; flex-direction: column; gap: 12px;
}
.office__city { font-family: var(--font-display); font-size: 36px; line-height: 1; color: var(--ink-900); letter-spacing: -0.01em; }
.office__country { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--nuon-azul); }
.office__address { font-size: 13px; color: var(--ink-600); line-height: 1.55; }
.office__role { font-size: 12px; color: var(--ink-500); padding-top: 12px; border-top: 1px solid var(--divider); margin-top: auto; }
.office__tz { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--ink-400); }
@media (max-width: 1100px) { .offices { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .offices { grid-template-columns: 1fr; } }

/* ---------- ADVISORS ---------- */
.advisors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .advisors { grid-template-columns: repeat(2, 1fr); } }

/* ---------- INVESTORS strip (logos) ---------- */
.investors {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider);
}
.investor-cell {
  padding: 40px 24px;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ink-500);
  border-right: 1px solid var(--divider);
  text-align: center;
}
.investor-cell:nth-child(3n) { border-right: 0; }
.investor-cell:nth-child(n+4) { border-top: 1px solid var(--divider); }
@media (max-width: 700px) { .investors { grid-template-columns: 1fr 1fr; } .investor-cell:nth-child(3n) { border-right: 1px solid var(--divider); } .investor-cell:nth-child(2n) { border-right: 0; } }