/* =========================================================
   Simple Wire — hoja de estilos única
   Paleta derivada del logo: azul y rojo de Texas + cromo.
   ========================================================= */

:root {
  /* superficies */
  --void: #060a14;
  --panel: #0c1322;
  --panel2: #111a2c;
  --edge: #1e2a42;
  --edge-hover: #33456b;

  /* marca */
  --blue: #3b7be0; /* azul Texas aclarado para fondo oscuro */
  --blue-deep: #00246b; /* azul del logo, para fondos */
  --red: #e0334c;
  --red-deep: #c41230; /* rojo del logo */
  --chrome: #d8dee9;

  /* texto */
  --text: #e9effa;
  --muted: #8794ad;

  /* estado dinámico del plano (lo cambia app.js) */
  --glow: #3b7be0;
  --glow-a: 0.16;
  --lit: #ffd9a0;
  --tv-luz: #bfd8ff;   /* luz fria de pantalla */

  /* tipografía */
  --display: "Archivo", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --pad: clamp(20px, 5vw, 72px);
  --max: 1240px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--void);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
}
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
h1 {
  font-size: clamp(2.5rem, 7vw, 5.1rem);
}
h2 {
  font-size: clamp(1.85rem, 4.2vw, 3rem);
}
h3 {
  font-size: 1.12rem;
  font-weight: 700;
  font-stretch: 105%;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  display: block;
  margin-bottom: 14px;
}
.eyebrow.red {
  color: var(--red);
}
.lede {
  color: var(--muted);
  font-size: 1.06rem;
  max-width: 56ch;
}

/* accesibilidad: salto al contenido */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue);
  color: #050810;
  padding: 10px 16px;
  z-index: 100;
  border-radius: 0 0 6px 0;
}
.skip:focus {
  left: 0;
}

/* ---------------------------------------------------------
   FIRMA DE MARCA — cinta de 8 conductores, estándar T568B
   Orden real de pares dentro de un Cat6.
   --------------------------------------------------------- */
.ribbon {
  display: flex;
  height: 8px;
  width: 100%;
}
.ribbon i {
  flex: 1;
}
.ribbon.thin {
  height: 8px;
  opacity: 0.55;
}
.w1 {
  background: repeating-linear-gradient(90deg, #ff8a3d 0 3px, #e8e8e8 3px 6px);
} /* blanco-naranja */
.w2 {
  background: #ff8a3d;
} /* naranja */
.w3 {
  background: repeating-linear-gradient(90deg, #3fbf6a 0 3px, #e8e8e8 3px 6px);
} /* blanco-verde */
.w4 {
  background: #2f6fd0;
} /* azul */
.w5 {
  background: repeating-linear-gradient(90deg, #2f6fd0 0 3px, #e8e8e8 3px 6px);
} /* blanco-azul */
.w6 {
  background: #3fbf6a;
} /* verde */
.w7 {
  background: repeating-linear-gradient(90deg, #8a6440 0 3px, #e8e8e8 3px 6px);
} /* blanco-café */
.w8 {
  background: #8a6440;
} /* café */

/* --------------------------- header --------------------------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #060a14ee;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--edge);
}
.bar {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 74px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.mark {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}
.mark img {
  height: 44px;
  width: auto;
  display: block;
  flex: none;
}
.mark .wm {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.mark b {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: 0.02em;
  font-size: 1.06rem;
  color: var(--chrome);
}
.mark small {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

nav {
  display: flex;
  gap: 4px;
}
nav a {
  font-size: 0.9rem;
  color: var(--muted);
  padding: 8px 13px;
  border-radius: 6px;
  transition:
    color 0.18s,
    background 0.18s;
}
nav a:hover {
  color: var(--text);
  background: var(--panel2);
}
nav a[aria-current="page"] {
  color: var(--blue);
  background: #3b7be014;
}

.lang {
  display: flex;
  border: 1px solid var(--edge);
  border-radius: 7px;
  overflow: hidden;
  flex: none;
}
.lang button {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  background: none;
  border: 0;
  color: var(--muted);
  padding: 7px 10px;
  cursor: pointer;
  transition:
    color 0.18s,
    background 0.18s;
}
.lang button.on {
  background: var(--blue);
  color: #050810;
  font-weight: 500;
}
.burger {
  display: none;
  background: none;
  border: 1px solid var(--edge);
  border-radius: 7px;
  color: var(--text);
  padding: 7px 10px;
  cursor: pointer;
  font-size: 1rem;
}

/* --------------------------- layout --------------------------- */
main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}
section {
  padding: clamp(56px, 8vw, 100px) 0;
  border-top: 1px solid var(--edge);
}
section.first {
  border-top: 0;
}

/* --------------------------- hero --------------------------- */
/* overflow-x:clip recorta el resplandor de ::before, que se sale un 40% por
   cada lado y en movil empujaba el documento a 563px sobre un viewport de 430.
   clip y no hidden: hidden crearia un contenedor de scroll y romperia el
   position:sticky del header. Y es el unico valor que deja el otro eje en
   visible, para que el resplandor siga sangrando hacia arriba y abajo. */
.hero {
  position: relative;
  overflow-x: clip;
  padding: clamp(44px, 7vw, 76px) 0 clamp(40px, 6vw, 60px);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -40% auto -40%;
  height: 110%;
  background: radial-gradient(58% 52% at 46% 30%, var(--glow) 0%, transparent 68%);
  opacity: var(--glow-a);
  filter: blur(30px);
  pointer-events: none;
  transition:
    opacity 0.9s ease,
    background 0.9s ease;
  z-index: 0;
}
.hero > * {
  position: relative;
  z-index: 1;
}
.hero h1 {
  max-width: 16ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--blue);
}
.hero .lede {
  margin-top: 22px;
}

/* plano interactivo + consola */
.stage {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: 14px;
  overflow: hidden;
}
.plan {
  background: var(--panel);
  padding: 26px;
}
.plan svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Luz: los stops leen --lit, así que app.js solo cambia esa variable y la
   opacidad de cada .wash. screen aclara el fondo en vez de promediarse con
   él — sin esto el crema sobre el panel oscuro da caqui lodoso. */
#wash .s0 {
  stop-color: var(--lit);
  stop-opacity: 1;
}
#wash .s1 {
  stop-color: var(--lit);
  stop-opacity: 0.42;
}
#wash .s2 {
  stop-color: var(--lit);
  stop-opacity: 0;
}
.room .wash {
  fill: url(#wash);
  mix-blend-mode: screen;
  transition: opacity 0.75s ease;
}

/* Derrame: la misma silueta desenfocada debajo, para que la luz se salga
   del muro. Va a menos opacidad que el wash (la escala app.js). */
.room .bleed {
  fill: var(--lit);
  filter: url(#bleed);
  mix-blend-mode: screen;
  transition: opacity 0.75s ease;
}

/* Jerarquia de muros: interiores finos, envolvente exterior gruesa. */
.room .wall {
  fill: none;
  stroke: var(--edge);
  stroke-width: 1.1;
  transition: stroke 0.75s ease;
}
.room.lit .wall {
  stroke: color-mix(in srgb, var(--lit) 38%, var(--edge));
}
.doors line {
  stroke: var(--edge-hover);
  stroke-width: 1.1;
  stroke-linecap: round;
}
.envelope {
  fill: none;
  stroke: var(--edge-hover);
  stroke-width: 2.6;
}

/* Luminaria: ancla el gradiente y dice "aqui hay un dispositivo". */
.room .lamp {
  fill: var(--edge-hover);
  transition:
    fill 0.75s ease,
    filter 0.75s ease;
}
.room.lit .lamp {
  fill: var(--lit);
  filter: drop-shadow(0 0 2.5px var(--lit));
}

.room text {
  font-family: var(--mono);
  font-size: 18.5px;
  letter-spacing: 0.06em;
  fill: var(--muted);
  transition: fill 0.75s ease;
}
.room.lit text {
  fill: var(--lit);
}

/* ---------------------------------------------------------
   VISTA ISOMETRICA DEL PLANO (portada) — acotado a .iso para
   que las reglas de la planta 2D no se pisen. Ver tools/iso.py
   --------------------------------------------------------- */
/* Caras de muro: la izquierda mas oscura que la derecha, que es lo que
   produce la lectura de volumen. Se tinen cuando el cuarto esta encendido. */
.iso .wall-l {
  fill: var(--panel);
  stroke: var(--edge);
  stroke-width: 0.8;
  transition: fill 0.75s ease;
}
.iso .wall-r {
  fill: var(--panel2);
  stroke: var(--edge);
  stroke-width: 0.8;
  transition: fill 0.75s ease;
}
.iso .room.lit .wall-l {
  fill: color-mix(in srgb, var(--lit) 10%, var(--panel));
}
.iso .room.lit .wall-r {
  fill: color-mix(in srgb, var(--lit) 16%, var(--panel2));
}

/* El piso solo lleva contorno: el relleno lo pone .wash. */
.iso .wall {
  fill: none;
  stroke: var(--edge);
  stroke-width: 0.9;
}
.iso .room.lit .wall {
  stroke: color-mix(in srgb, var(--lit) 34%, var(--edge));
}

/* Etiquetas centradas sobre el piso. Se dejan sin sesgo isometrico a
   proposito: el texto inclinado se vuelve dificil de leer a este tamano. */
.iso text {
  text-anchor: middle;
  font-size: 9px;
}

/* Con render raster puesto, los muros vectoriales sobran y solo queda la luz. */
.iso-render .wall,
.iso-render .wall-l,
.iso-render .wall-r {
  display: none;
}
/* Con la imagen el viewBox pasa de 571 a 1536 de ancho, asi que todo lo que
   se mide en unidades de usuario hay que reescalarlo ~2.7x. */
.iso-render text {
  font-size: 33px;
  paint-order: stroke;
  stroke: #060a14;
  stroke-width: 0.14em;
  stroke-linejoin: round;
}
.iso-render .lamp {
  r: 5;
}

/* ---------------------------------------------------------
   TELE ENCENDIDA — solo en "Noche de cine"
   La opacidad del grupo la manda --tv, que pone paint() igual que --dim.
   El parpadeo va en el poligono de dentro, no en el grupo: las opacidades
   anidadas se multiplican, asi que animar la de dentro no pisa a --tv.
   --------------------------------------------------------- */
.tv {
  opacity: var(--tv, 0);
  transition: opacity 0.75s ease;
  pointer-events: none;
}
.tv-screen {
  fill: var(--tv-luz);
  mix-blend-mode: screen;
  filter: url(#tvglow);
  animation: tv-parpadeo 4.6s ease-in-out infinite;
}
.tv-spill {
  fill: var(--tv-luz);
  mix-blend-mode: screen;
  filter: url(#bleed);
  opacity: 0.16;
}
@keyframes tv-parpadeo {
  0%, 100% { opacity: 1; }
  18% { opacity: 0.86; }
  33% { opacity: 1; }
  52% { opacity: 0.91; }
  71% { opacity: 0.82; }
  86% { opacity: 0.97; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-screen { animation: none; }
}
/* En modo de ajuste se ve siempre, para poder calzarla con la imagen. */
.iso-fit .tv { opacity: 1 !important; }
.iso-fit .tv-screen,
.iso-fit .tv-spill {
  fill: #00e5ff;
  fill-opacity: 0.45;
  filter: none;
  stroke: #00e5ff;
  stroke-width: 4;
  animation: none;
}

/* ---- PRUEBA: rotulos ocultos en la vista con render ----------------------
   En el render el mobiliario ya identifica cada cuarto (cama, sofa, inodoro),
   asi que los rotulos compiten con la foto en vez de aportar. En la planta 2D
   de index.html si hacen falta, porque ahi no hay nada que distinga un cuarto
   de otro, por eso esta regla esta acotada a .iso-render.
   Para recuperarlos: borrar este bloque. -------------------------------- */
.iso-render text {
  display: none;
}
.iso-render .room.lit .lamp {
  filter: drop-shadow(0 0 7px var(--lit));
}
/* Atenuado global por escena. El render es de dia y brillante, asi que en modo
   screen la luz apenas se nota: hay que bajar la casa entera para que los
   charcos destaquen. El velo va en el azul del sitio, no en gris neutro. */
.iso-render image {
  filter: brightness(calc(1 - var(--dim, 0) * 0.62)) saturate(calc(1 - var(--dim, 0) * 0.5));
  transition: filter 0.75s ease;
}
.iso-render .noche {
  fill: var(--void);
  opacity: calc(var(--dim, 0) * 0.45);
  transition: opacity 0.75s ease;
}

/* Modo de ajuste: contornos magenta sobre la imagen para ver si los poligonos
   caen sobre los cuartos del render. Se apaga con AJUSTE=False en iso.py. */
.iso-fit .wall {
  display: block;
  fill: #ff00a8;
  fill-opacity: 0.3;
  stroke: #ff00a8;
  stroke-width: 5;
}
.iso-fit .wash,
.iso-fit .bleed {
  opacity: 0 !important;
}
.iso-fit .lamp {
  fill: #00ff88;
  r: 9;
}

.console {
  background: var(--panel2);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.scenes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.scene {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 9px;
  color: var(--muted);
  font-family: var(--body);
  font-size: 0.83rem;
  font-weight: 500;
  padding: 13px 10px;
  cursor: pointer;
  text-align: left;
  line-height: 1.2;
  transition:
    border-color 0.2s,
    color 0.2s,
    background 0.2s;
}
.scene:hover {
  border-color: var(--edge-hover);
  color: var(--text);
}
.scene.on {
  border-color: var(--blue);
  color: var(--blue);
  background: #3b7be012;
}

.readout {
  border-top: 1px solid var(--edge);
  padding-top: 18px;
  display: grid;
  gap: 11px;
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.row span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.row b {
  font-family: var(--mono);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text);
}
.row b.warm {
  color: var(--lit);
}
.row b.armed {
  color: var(--red);
}
.row b.calm {
  color: var(--blue);
}
.hint {
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.45;
}

/* --------------------------- bloques --------------------------- */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 38px;
}
.cell {
  background: var(--panel);
  padding: 30px 26px;
  transition: background 0.25s;
}
.cell:hover {
  background: var(--panel2);
}
.cell p {
  color: var(--muted);
  font-size: 0.93rem;
  margin-top: 10px;
}
.cell .ico {
  font-size: 1.4rem;
  display: block;
  margin-bottom: 16px;
  color: var(--blue);
}

.svc {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 34px;
  padding: 34px 0;
  border-top: 1px solid var(--edge);
}
.svc:first-of-type {
  border-top: 0;
}
.svc .tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  padding-top: 5px;
}
.svc p {
  color: var(--muted);
  margin-top: 10px;
  max-width: 62ch;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}
.chip {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  border: 1px solid var(--edge);
  border-radius: 20px;
  padding: 5px 11px;
}

.work {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 38px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 14px;
  overflow: hidden;
  transition:
    border-color 0.25s,
    transform 0.25s;
}
.card:hover {
  border-color: var(--edge-hover);
  transform: translateY(-3px);
}
.card .art {
  height: 150px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--edge);
}
.card .art i {
  position: absolute;
  inset: 0;
  opacity: 0.9;
}
.card .body {
  padding: 24px;
}
.card p {
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 9px;
}
.specs {
  display: flex;
  gap: 22px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--edge);
  flex-wrap: wrap;
}
.spec u {
  display: block;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.spec b {
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--blue);
}

/* --------------------------- contacto --------------------------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
  margin-top: 38px;
}
.field {
  margin-bottom: 16px;
}
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--body);
  font-size: 0.95rem;
  padding: 12px 14px;
  transition: border-color 0.2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue);
  outline: none;
}
.field textarea {
  min-height: 104px;
  resize: vertical;
}
.send {
  background: var(--red-deep);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.1s;
}
.send:hover {
  background: var(--red);
}
.send:active {
  transform: translateY(1px);
}
.note {
  margin-top: 14px;
  font-size: 0.86rem;
  color: var(--blue);
  display: none;
}
.note.on {
  display: block;
}
/* Verde para el acuse de recibo, rojo para lo que hay que corregir. El azul
   de .note se queda para los estados neutros, como "Enviando...". */
.note.ok {
  color: #3fbf6a;
}
.note.mal {
  color: var(--red);
}

/* Honeypot del formulario. Se esconde fuera de pantalla y NO con
   display:none a proposito: los bots que valen algo saltan los campos con
   display:none o visibility:hidden justamente porque son la señal obvia de
   una trampa. Uno desplazado fuera del viewport les parece un campo normal,
   que es lo que queremos que crean. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.aside {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 28px;
}
.aside .row2 {
  padding: 14px 0;
  border-top: 1px solid var(--edge);
}
.aside .row2:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.aside u {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 5px;
}
.aside b {
  font-weight: 500;
  font-size: 0.95rem;
}

/* --------------------------- cta + footer --------------------------- */
.cta {
  text-align: center;
  padding: clamp(56px, 8vw, 92px) 0;
}
.cta h2 {
  max-width: 18ch;
  margin: 0 auto;
}
.cta .lede {
  margin: 18px auto 30px;
}

footer {
  border-top: 1px solid var(--edge);
  margin-top: 20px;
}
.fbar {
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px var(--pad);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.fbar small {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.fbar .mark img {
  height: 36px;
}

/* --------------------------- animación --------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------
   LEGIBILIDAD DE LOS ROTULOS DEL PLANO
   La tipografia va en unidades del viewBox, asi que se encoge junto con el
   SVG: en movil el plano baja a ~266px sobre un viewBox de 1536 (factor 0.17)
   y 25 unidades acababan siendo 4.3px reales. Aqui se compensa el factor para
   dejarlos en ~15px de pantalla en todo el rango.

   El bache raro esta justo encima de 900px: al volver a dos columnas la
   columna del plano se estrecha de golpe, asi que ahi hacen falta MAS
   unidades que en movil ancho, no menos.

   Los selectores de .iso-render llevan .room de mas para ganarle por
   especificidad a .room text, que si no empataria y decidiria el orden.
   --------------------------------------------------------- */
@media (max-width: 1383px) {
  .room text {
    font-size: clamp(8.5px, calc(25px - 1.2vw), 14px);
  }
  .iso-render .room text {
    font-size: clamp(30px, calc(98px - 5vw), 56px);
  }
}
@media (max-width: 900px) {
  .room text {
    font-size: clamp(7.9px, calc(32.4px - 2.72vw), 23px);
  }
  .iso-render .room text {
    font-size: clamp(30px, calc(125px - 10.5vw), 88px);
  }
}

/* --------------------------- responsive --------------------------- */
@media (max-width: 900px) {
  .stage,
  .contact {
    grid-template-columns: 1fr;
  }
  .grid3,
  .work {
    grid-template-columns: 1fr;
  }
  .svc {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  nav {
    display: none;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--edge);
    flex-direction: column;
    padding: 10px var(--pad) 18px;
  }
  nav.open {
    display: flex;
  }
  .burger {
    display: block;
  }
  .mark small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}