/* ==========================================================================
   Bertier — hoja de estilos
   Una sola presentación: azul tinta institucional puntuando un fondo claro.
   Sin fotografía. El apoyo visual es un campo de curvas de nivel por página,
   generado con marching squares sobre un campo escalar distinto en cada una.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tipografías, servidas desde el propio dominio
   Subconjunto latino + acentos del español. Ningún tercero recibe la visita.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/serif-i400.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/serif-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Superficies */
  --paper: #f4f3f0;
  --surface: #ffffff;
  --ink: #0b2033;

  /* Texto */
  --text: #1c2b39;
  --text-strong: #0b2033;
  --muted: #57687a;

  /* Hairlines */
  --line: #dcdad4;
  --line-strong: #c3c0b8;

  /* Acento */
  --accent: #1b4fbf;
  --accent-hover: #123a91;
  --focus: #1b4fbf;

  /* Sobre azul tinta */
  --on-ink: #eef1f4;
  --on-ink-muted: #9db0c1;
  --on-ink-line: rgba(238, 241, 244, 0.2);
  --on-ink-accent: #8fb0f7;

  /* Familias */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Escala tipográfica */
  --fs-display-xl: clamp(2.3rem, 3.9vw, 3.6rem);
  --fs-display-l: clamp(2rem, 3.3vw, 3rem);
  --fs-display-m: clamp(1.55rem, 2.3vw, 2.25rem);
  --fs-display-s: clamp(1.15rem, 1.5vw, 1.35rem);
  --fs-lead: clamp(1.0625rem, 1.2vw, 1.2rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.7rem;

  /* Métrica */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --col-gap: clamp(1.25rem, 2.4vw, 2.5rem);
  --band-y: clamp(3.5rem, 6vw, 6.5rem);
  /* Alto real de la cabecera: 1.1rem + 1.1rem de padding + 2.05rem del
     wordmark + 1px de borde = 69px. Se declara 1px menos para que el hero
     sobre por un pelo en vez de dejar una franja clara abajo. */
  --head-h: 68px;
  --measure: 66ch;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

svg {
  display: block;
}

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

::selection {
  background: var(--ink);
  color: var(--paper);
}

:target {
  scroll-margin-top: 6.5rem;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip:focus {
  left: var(--gutter);
  top: 0.75rem;
}

/* --------------------------------------------------------------------------
   3. Estructura
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}

.band {
  padding-block: var(--band-y);
}

.band--surface {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.band--ink {
  background: var(--ink);
  color: var(--on-ink);
  --text: var(--on-ink);
  --text-strong: var(--on-ink);
  --muted: var(--on-ink-muted);
  --line: var(--on-ink-line);
  --line-strong: var(--on-ink-line);
  --accent: var(--on-ink-accent);
  --accent-hover: #c3d6ff;
  --focus: var(--on-ink-accent);
}

/* --------------------------------------------------------------------------
   4. Tipografía
   -------------------------------------------------------------------------- */

.label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.label--accent {
  color: var(--accent);
}

.display-xl,
.display-l,
.display-m,
.display-s {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--text-strong);
}

.display-xl {
  font-size: var(--fs-display-xl);
  line-height: 1.09;
  letter-spacing: -0.02em;
  max-width: 19ch;
  text-wrap: balance;
}

.display-l {
  font-size: var(--fs-display-l);
  line-height: 1.1;
  letter-spacing: -0.018em;
  max-width: 24ch;
  text-wrap: balance;
}

.display-m {
  font-size: var(--fs-display-m);
  line-height: 1.16;
  letter-spacing: -0.015em;
  max-width: 26ch;
  text-wrap: balance;
}

.display-s {
  font-size: var(--fs-display-s);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  max-width: 50ch;
}

.prose {
  max-width: var(--measure);
  text-wrap: pretty;
}

.prose + .prose {
  margin-top: 1.1em;
}

.note {
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 60ch;
  text-wrap: pretty;
}

.aside {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
  text-wrap: pretty;
}

/* Enlaces de navegación: color y flecha; el subrayado aparece al pasar. */
.link {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  transition: color 120ms ease;
}

.link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.link--lg {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.link__arrow {
  display: inline-block;
  transition: transform 140ms ease;
}

.link:hover .link__arrow {
  transform: translateX(4px);
}

/* Botón de acción */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 1.05em 1.7em;
  border: 0;
  line-height: 1;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.cta:hover {
  background: var(--accent-hover);
}

.cta:hover .link__arrow {
  transform: translateX(4px);
}

/* Sobre tinta el acento es claro, así que el botón se invierte. */
.site-foot .cta,
.band--ink .cta {
  background: var(--on-ink);
  color: var(--ink);
}

.site-foot .cta:hover,
.band--ink .cta:hover {
  background: #ffffff;
}

/* --------------------------------------------------------------------------
   6. Cabecera
   -------------------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ink);
  color: var(--on-ink);
  border-bottom: 1px solid var(--on-ink-line);
}

.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-block: 1.1rem;
}

.wordmark {
  display: block;
  color: var(--on-ink);
  line-height: 0;
}

/* Fijado por alto y no por ancho: así la cabecera mide lo mismo en todo ancho
   de pantalla y el hero puede calcular exactamente cuánto le queda. */
.wordmark svg {
  height: 2.05rem;
  width: auto;
}

.nav {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.nav__link {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-ink-muted);
  padding-bottom: 0.3em;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-bottom-color 120ms ease;
}

.nav__link:hover {
  color: var(--on-ink);
}

.nav__link[aria-current="page"] {
  color: var(--on-ink);
  border-bottom-color: var(--on-ink-accent);
}

/* --------------------------------------------------------------------------
   7. Hero — campo de tinta a sangre con el dibujo cruzándolo
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 7.5rem);
  min-height: max(30rem, calc(100svh - var(--head-h)));
  display: flex;
  align-items: center;
}

/* Campo de curvas de nivel. Mismo tratamiento en el hero de Inicio y en las
   cabeceras de las páginas interiores: sangra por la derecha y se disuelve
   hacia la izquierda para que el titular nunca caiga sobre el trazo. */
.terrain {
  position: absolute;
  inset: 0 0 0 auto;
  width: 55%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%);
  mask-image: linear-gradient(to right, transparent 0%, #000 40%);
}

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

.hero__inner {
  position: relative;
}

.hero__label {
  margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem);
}

.hero__lead {
  margin-top: clamp(1.5rem, 2.4vw, 2rem);
  max-width: 42ch;
}

/* Definición institucional, a dos columnas */
.definition {
  row-gap: 1.5rem;
}

.definition__label {
  display: block;
  grid-column: 1 / -1;
  margin-bottom: 0.5rem;
}

.definition__a {
  grid-column: 1 / span 6;
}

.definition__b {
  grid-column: 7 / span 6;
}

.definition p {
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   8. Encabezados
   -------------------------------------------------------------------------- */

/* Todo encabezado nace en la columna 1 y baja: etiqueta, titular, bajada. */
.section-head {
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.section-head__label {
  display: block;
  margin-bottom: 0.9rem;
}

.section-head__lead {
  margin-top: 1.5rem;
}

.page-head {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 5.5vw, 5.5rem);
}

/* Las páginas de contenido abren igual que Inicio: el azul llena la pantalla.
   Las de utilidad (privacidad, gracias, 404) se quedan en banda, porque una
   pantalla completa de tinta antes de dos párrafos de texto legal sobra. */
.page-head--full {
  display: flex;
  align-items: center;
  min-height: max(30rem, calc(100svh - var(--head-h)));
}

.page-head > .wrap {
  position: relative;
}

.page-head__label {
  display: block;
  margin-bottom: 0.9rem;
}

.page-head__lead {
  margin-top: 2.1rem;
  color: var(--on-ink-muted);
}

/* --------------------------------------------------------------------------
   9. Líneas de servicio — resumen en Inicio
   -------------------------------------------------------------------------- */

.tiles {
  border-top: 1px solid var(--line);
}

.tiles__item {
  grid-column: span 6;
  border-bottom: 1px solid var(--line);
}

.tile {
  display: block;
  height: 100%;
  padding-block: clamp(1.5rem, 2.4vw, 2rem);
  color: inherit;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.tile:hover {
  background: var(--paper);
}

.tile__name {
  font-family: var(--serif);
  font-size: var(--fs-display-s);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin-bottom: 0.6rem;
}

.tile__arrow {
  display: inline-block;
  color: var(--accent);
  transition: transform 140ms ease;
}

.tile:hover .tile__arrow {
  transform: translateX(4px);
}

.tile__desc {
  max-width: 46ch;
  text-wrap: pretty;
}

.lines__more {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   10. Líneas de servicio — desarrollo en Servicios
   -------------------------------------------------------------------------- */

.service {
  padding-block: clamp(2.25rem, 3.8vw, 3.25rem);
  border-top: 1px solid var(--line);
  row-gap: 1.25rem;
  align-items: start;
}

.service__name {
  grid-column: 1 / span 4;
}

.service__desc {
  grid-column: 5 / span 4;
  text-wrap: pretty;
}

.service__problem {
  grid-column: 9 / span 4;
}

.service__problem-label {
  display: block;
  margin-bottom: 0.65rem;
}

/* --------------------------------------------------------------------------
   11. Modelo de dos etapas
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */

.contact {
  row-gap: clamp(2.5rem, 4vw, 3.5rem);
}

.contact__form {
  grid-column: 1 / span 6;
}

.contact__aside {
  grid-column: 7 / span 6;
}

.contact__aside-title {
  display: block;
  margin-bottom: 1rem;
}

.contact__aside .stage__list {
  margin-top: 0;
}

.field + .field {
  margin-top: 1.5rem;
}

.field label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 0.8rem 1rem;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  transition: border-color 120ms ease;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
}

.field textarea {
  min-height: 11rem;
  resize: vertical;
}

.field__hint {
  margin-top: 0.6rem;
  font-size: var(--fs-small);
  color: var(--muted);
  text-wrap: pretty;
}

.form__actions {
  margin-top: 2rem;
}

/* Se muestra mientras falte configurar el endpoint, o mientras el action
   contenga un correo a la vista. Desaparece al pegar el identificador. */
.form__warning {
  display: none;
}

.form[action*="@"] .form__warning,
.form[action$="SU_ID"] .form__warning {
  display: block;
  margin-bottom: 1.75rem;
  padding: 0.9rem 1.1rem;
  background: #fff3b0;
  border-left: 3px solid #b8860b;
  color: #4a3800;
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Texto legal: una sola columna, mismo riel que el resto del sitio.
   -------------------------------------------------------------------------- */

.terms {
  border-top: 1px solid var(--line);
}

.terms__item {
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}

.terms__name {
  margin-bottom: 0.9rem;
}

.terms__note {
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

/* Trampa para bots. Fuera de pantalla en vez de display:none, porque hay
   programas que saltan los campos ocultos por completo. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.stages {
  row-gap: clamp(2rem, 3.5vw, 2.75rem);
}

.stage {
  grid-column: span 6;
  padding-top: 1.25rem;
  border-top: 2px solid var(--accent);
}

.stage__label {
  display: block;
  margin-bottom: 0.9rem;
}

.stage__name {
  margin-bottom: 0.7rem;
}

.stage__desc {
  max-width: 46ch;
  text-wrap: pretty;
}

/* Lo que cubre cada compromiso, en filas separadas por hairline. */
.stage__list {
  margin-top: 1.35rem;
  border-top: 1px solid var(--line);
}

.stage__list li {
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--muted);
  text-wrap: pretty;
}

.argument {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: clamp(1.5rem, 2.4vw, 1.75rem);
  border-top: 1px solid var(--line);
  row-gap: 0.9rem;
}

.argument__label {
  display: block;
  grid-column: 1 / -1;
}

.argument__a {
  grid-column: 1 / span 6;
}

.argument__b {
  grid-column: 7 / span 6;
}

.argument p {
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   12. Sectores
   -------------------------------------------------------------------------- */

.sectors {
  row-gap: 1.5rem;
}

.sectors__item {
  grid-column: span 4;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.sectors__name {
  font-family: var(--serif);
  font-size: var(--fs-display-s);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-strong);
  margin-bottom: 0.5rem;
}

.sectors__desc {
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   13. Enfoque — calendario de trabajo
   La regla vertical de la izquierda une las etapas: es lo que hace que se
   lean como secuencia y no como lista. Se corta en el punto de decisión y
   sigue en trazos después de la quinta, que no tiene término.
   -------------------------------------------------------------------------- */

.steps__head {
  padding-bottom: 0.9rem;
}

.steps__head-stage {
  grid-column: 2 / span 3;
}

.steps__head-what {
  grid-column: 5 / span 4;
}

.steps__head-get {
  grid-column: 9 / span 4;
}

.steps {
  --step-pad: clamp(1.6rem, 2.8vw, 2.4rem);
  border-top: 1px solid var(--line-strong);
}

.steps__item {
  border-bottom: 1px solid var(--line);
  row-gap: 0.75rem;
  align-items: stretch;
}

.steps__num {
  grid-column: 1 / span 1;
  padding-top: calc(var(--step-pad) + 0.3em);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.steps__stage {
  grid-column: 2 / span 3;
  position: relative;
  padding-block: var(--step-pad);
  padding-left: clamp(1.1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--line-strong);
}

.steps__flag {
  display: block;
  margin-bottom: 0.5rem;
}

.steps__what,
.steps__get {
  padding-block: var(--step-pad);
  text-wrap: pretty;
}

.steps__what {
  grid-column: 5 / span 4;
}

.steps__get {
  grid-column: 9 / span 4;
  color: var(--muted);
}

/* La quinta no termina: la regla la cruza en acento y sigue en trazos. */
.steps__item--open .steps__stage {
  border-left-color: var(--accent);
}

.steps__item--open .steps__stage::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 100%;
  width: 1px;
  height: 3.5rem;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--accent) 0 5px,
    transparent 5px 11px
  );
}

.steps__item--open .steps__num {
  color: var(--accent);
}

/* El punto de decisión parte la secuencia justo donde el cliente decide. */
.gate {
  padding-block: clamp(1.5rem, 2.6vw, 2.1rem);
  border-top: 2px solid var(--accent);
  row-gap: 0.7rem;
}

.gate__label {
  grid-column: 1 / span 3;
  color: var(--accent);
}

.closing {
  row-gap: clamp(2.25rem, 4vw, 3rem);
}

.closing__lead {
  grid-column: 1 / span 6;
}

.closing__body {
  grid-column: 7 / span 6;
}

.closing__label {
  display: block;
  margin-bottom: 0.9rem;
}

.closing__title {
  margin-bottom: 1.5rem;
}

.gate__text {
  grid-column: 5 / span 8;
  font-family: var(--serif);
  font-size: var(--fs-display-s);
  line-height: 1.35;
  color: var(--text-strong);
  max-width: 48ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   14. Pie
   -------------------------------------------------------------------------- */

.site-foot {
  background: var(--ink);
  color: var(--on-ink);
  border-top: 1px solid var(--on-ink-line);
  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
  --muted: var(--on-ink-muted);
  --line: var(--on-ink-line);
  --accent: var(--on-ink-accent);
  --accent-hover: #c3d6ff;
  --focus: var(--on-ink-accent);
}

.foot__grid {
  row-gap: clamp(2.5rem, 4vw, 3rem);
  align-items: start;
}

.foot__brand {
  grid-column: 1 / span 3;
  align-self: center;
  color: var(--on-ink);
}

.foot__brand svg {
  width: clamp(180px, 19vw, 235px);
  height: auto;
}

.foot__nav {
  grid-column: 5 / span 2;
}

.foot__services {
  grid-column: 7 / span 3;
}

.foot__contact {
  grid-column: 10 / span 3;
}

.foot__col-title {
  display: block;
  margin-bottom: 1rem;
  color: var(--on-ink);
}

.foot__list li + li {
  margin-top: 0.55rem;
}

.foot__list a {
  font-size: var(--fs-small);
  color: var(--on-ink-muted);
  text-decoration: none;
  transition: color 120ms ease;
}

.foot__list a:hover {
  color: var(--on-ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.foot__instruction {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.4;
  max-width: 24ch;
  margin-bottom: 1.4rem;
}

/* Mismo aire arriba y abajo del botón. */
.foot__contact .cta {
  margin-bottom: 1.4rem;
}

.foot__place {
  font-size: var(--fs-small);
  color: var(--on-ink-muted);
}

.foot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 4.5vw, 4rem);
  padding-top: 1.35rem;
  border-top: 1px solid var(--on-ink-line);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .hero,
  .page-head--full {
    display: block;
    padding-bottom: 0;
    min-height: 0;
  }

  .terrain {
    position: static;
    width: 100%;
    margin-top: clamp(2rem, 5vw, 3rem);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .terrain img {
    height: auto;
    aspect-ratio: 16 / 8;
  }

  .page-head .terrain img {
    aspect-ratio: 16 / 6;
  }

  .contact__form,
  .contact__aside,
  .closing__lead,
  .closing__body,
  .service__name,
  .service__desc,
  .service__problem {
    grid-column: 1 / -1;
  }

  .service__name {
    max-width: none;
  }

  .definition__a,
  .definition__b,
  .argument__a,
  .argument__b {
    grid-column: 1 / span 8;
  }

  .steps__what {
    grid-column: 5 / span 8;
  }

  .steps__get {
    grid-column: 9 / span 4;
  }

  .sectors__item {
    grid-column: span 12;
  }

  .display-xl {
    max-width: 20ch;
  }

  .display-l,
  .display-m {
    max-width: 30ch;
  }

  .foot__brand {
    grid-column: 1 / -1;
  }

  .foot__nav,
  .foot__services,
  .foot__contact {
    grid-column: span 4;
  }
}

@media (max-width: 700px) {
  .definition__a,
  .definition__b,
  .argument__a,
  .argument__b,
  .stage,
  .foot__nav,
  .foot__services,
  .foot__contact {
    grid-column: 1 / -1;
  }

  .tiles {
    grid-template-columns: 1fr;
  }

  .tiles__item {
    grid-column: 1 / -1;
  }

  .steps__head {
    display: none;
  }

  .steps__num {
    grid-column: 1 / -1;
    padding-top: var(--step-pad);
    padding-bottom: 0;
  }

  .steps__stage,
  .steps__what,
  .steps__get {
    grid-column: 1 / -1;
    padding-block: 0;
    padding-left: 0;
    border-left: 0;
  }

  .steps__item {
    padding-bottom: var(--step-pad);
    row-gap: 0.6rem;
  }

  .steps__item--open .steps__stage::after {
    display: none;
  }

  .gate__label,
  .closing {
  row-gap: clamp(2.25rem, 4vw, 3rem);
}

.closing__lead {
  grid-column: 1 / span 6;
}

.closing__body {
  grid-column: 7 / span 6;
}

.closing__label {
  display: block;
  margin-bottom: 0.9rem;
}

.closing__title {
  margin-bottom: 1.5rem;
}

.gate__text {
    grid-column: 1 / -1;
  }

  .display-xl,
  .display-l,
  .display-m {
    max-width: none;
  }
}

@media (max-width: 520px) {
  .site-head__inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  .nav {
    gap: 1.25rem;
  }

  .foot__bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}