/* =========================================================
   HOME — one block per section, in page order.
   ========================================================= */

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: calc(var(--header-h) + clamp(1rem, 4vw, 4rem));
  padding-bottom: clamp(1.5rem, 3vw, 3rem);
  overflow: clip;
}

/* Soft light that drifts toward the pointer */
.hero__glow {
  position: absolute;
  top: 50%; left: 50%;
  width: min(120vw, 1200px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 11%, transparent) 0%, transparent 62%);
  filter: blur(30px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s linear 0.4s;
  will-change: transform;
}
.is-ready .hero__glow { opacity: 1; }

.hero__inner {
  align-self: center;
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 3rem);
  margin-bottom: clamp(1.5rem, 3vw, 3rem);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 0.55rem; }
.hero__meta span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.hero__title {
  font-size: var(--t-h1);
  line-height: 0.86;
  letter-spacing: -0.045em;
  font-variation-settings: "wght" 500, "wdth" 96;
  text-transform: uppercase;
}
/* The clipping window is grown top and bottom, then pulled back with
   negative margins. Without the top half, the tight line-height cuts
   the tilde off UPPERCASE Ñ and the accent off Á É Í Ó Ú — which the
   English copy never notices and the Spanish copy does on every page.
   The bottom half is deeper than it looks like it needs to be because
   the line is uppercase but the stressed word is not: `aguanta`, `que`
   and `holds` bring descenders that nothing else on the line has, and
   at 0.16em the g and the q came out sliced flat. */
.hero__line {
  display: block;
  overflow: hidden;
  padding-top: 0.2em;
  margin-top: -0.2em;
  padding-bottom: 0.34em;
  margin-bottom: -0.34em;
}
.hero__line > span {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  transform: translateY(105%);
  opacity: 0;
}
.is-ready .hero__line > span {
  animation: hero-line 1.15s var(--ease) forwards;
  animation-delay: calc(0.12s + var(--n) * 0.09s);
}
@keyframes hero-line { to { transform: translateY(0); opacity: 1; } }

.hero__line--indent { padding-left: clamp(2rem, 12vw, 14rem); }
.hero__em { --em-wght: 500; font-style: normal; text-transform: none;
            font-variation-settings: "wght" var(--em-wght), "wdth" var(--em-wdth); }

/* A drawn rule where the inline portrait used to sit: it keeps
   the rhythm of the headline without putting a face in it. */
.hero__dash {
  display: inline-block;
  width: clamp(48px, 7.5vw, 140px);
  height: clamp(4px, 0.5vw, 10px);
  border-radius: 100px;
  background: var(--accent);
  translate: 0 -0.14em;
  transform-origin: left center;
  scale: 0 1;
}
.is-ready .hero__dash { animation: hero-dash 0.9s var(--ease) 0.55s forwards; }
@keyframes hero-dash { to { scale: 1 1; } }
@media (prefers-reduced-motion: reduce) { .hero__dash { scale: 1 1; animation: none; } }

.hero__foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--gutter);
  position: relative;
  z-index: 1;
}
.hero__lead {
  max-width: 46ch;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.35rem);
  line-height: 1.45;
  color: var(--fg-dim);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-l) var(--ease) 0.85s, transform var(--dur-l) var(--ease) 0.85s;
}
.hero__lead b { color: var(--fg); font-variation-settings: "wght" 500; }
.is-ready .hero__lead { opacity: 1; transform: none; }

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  opacity: 0;
  transition: opacity var(--dur-l) linear 1.1s;
}
.is-ready .scroll-cue { opacity: 1; }
.scroll-cue i {
  display: block;
  width: 1px; height: 46px;
  background: linear-gradient(var(--fg), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  animation: cue 2s var(--ease-inout) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* ---------------------------------------------------------
   TICKER under the hero
   --------------------------------------------------------- */
.ticker {
  border-block: 1px solid var(--line);
  padding-block: clamp(0.8rem, 1.6vw, 1.4rem);
  background: var(--bg-raised);
}
.ticker .marquee__item {
  font-size: clamp(0.85rem, 0.7rem + 0.6vw, 1.15rem);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--fg-dim);
}
.ticker .marquee__item i { width: 5px; height: 5px; }

/* ---------------------------------------------------------
   INTRO / ABOUT
   --------------------------------------------------------- */
.intro__statement {
  font-size: clamp(1.5rem, 0.9rem + 2.6vw, 3.6rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  max-width: 20ch;
  font-variation-settings: "wght" 400;
}
/* El color y la trama los pone la regla de `em` en base.css: repetir
   `color` aquí ganaría por especificidad y taparía el rayado. */

.intro__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 7rem);
  align-items: start;
}
.intro__side { display: grid; gap: var(--stack); }
.intro__side p { color: var(--fg-dim); max-width: 42ch; }

/* The portrait is a cut-out PNG, so it sits ON a panel rather than
   filling a frame: contain, not cover, and bottom-aligned so she
   stands on the base of the box instead of floating in it. A flat
   dark background would swallow the black cardigan, hence the
   tinted panel behind. */
.intro__portrait {
  position: relative;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* Two washes: one behind the head, one at the base. Without the
     second, the black cardigan dissolves into the dark panel. */
  background:
    linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--accent) 13%, transparent) 100%),
    radial-gradient(120% 90% at 50% 8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    var(--bg-raised);
}
.intro__portrait img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
/* The rotating badge sits INSIDE the frame, laid over the photo
   itself rather than hanging off the corner: positive insets so no
   part of it is clipped by the frame's overflow, z-index so it
   always reads as being on top of her, and a ring + shadow so the
   disc separates from the image underneath instead of merging with
   it. Only the SVG spins — the star in the middle stays put. */
.intro__badge {
  position: absolute;
  z-index: 2;
  right: clamp(12px, 4%, 30px);
  bottom: clamp(12px, 4%, 30px);
  width: clamp(96px, 11vw, 150px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  color: var(--selection-fg);
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--selection-fg) 22%, transparent),
    0 14px 34px color-mix(in srgb, #000 42%, transparent);
}
.intro__badge svg { width: 100%; height: 100%; animation: spin 16s linear infinite; }
.intro__badge text { font-family: var(--font-mono); font-size: 9.2px; letter-spacing: 0.22em; text-transform: uppercase; fill: currentColor; }
.intro__badge span {
  position: absolute;
  font-size: 1.5rem;
  line-height: 1;
}
@keyframes spin { to { transform: rotate(360deg); } }

.facts { display: grid; gap: 0; margin-top: var(--stack); }
.facts li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--line-soft);
}
.facts li:last-child { border-bottom: 1px solid var(--line-soft); }
.facts b { font-variation-settings: "wght" 500; }

/* ---------------------------------------------------------
   WORK LIST
   --------------------------------------------------------- */
.work { position: relative; }
.work__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--stack);
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

.rows { border-top: 1px solid var(--line); }
.row { border-bottom: 1px solid var(--line); position: relative; }
.row a {
  position: relative;
  display: grid;
  /* number · title · tags · year · arrow */
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: clamp(0.8rem, 2.5vw, 2.5rem);
  padding-block: clamp(1.1rem, 2.4vw, 2.3rem);
  padding-inline: clamp(0.5rem, 1.5vw, 1.6rem);
  z-index: 1;
}
/* Fill that wipes up behind the row */
.row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-raised);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-m) var(--ease);
}
.row:hover::before { transform: scaleY(1); }

.row__n { color: var(--fg-dim); transition: color var(--dur-s) linear; }
.row__title {
  font-size: clamp(1.6rem, 0.9rem + 3.4vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variation-settings: "wght" 450, "wdth" 98;
  transition: transform var(--dur-m) var(--ease), color var(--dur-s) linear;
  text-transform: uppercase;
}
.row:hover .row__title { transform: translateX(clamp(8px, 1.6vw, 28px)); }
.row:hover .row__n { color: var(--accent); }
.row__tags, .row__year { color: var(--fg-dim); white-space: nowrap; }
.row__arrow {
  width: clamp(34px, 3.4vw, 52px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), transform var(--dur-m) var(--ease);
}
.row__arrow svg { width: 40%; height: 40%; stroke: currentColor; fill: none; stroke-width: 1.6; }
.row:hover .row__arrow {
  background: var(--accent);
  color: var(--selection-fg);
  border-color: transparent;
  transform: rotate(45deg);
}

/* Image that follows the pointer over the list.
   A disc, not a plate: small enough to read the row it is describing
   underneath, with the cover cropped inside it and a hairline ring in
   the colour of the discipline the row belongs to (the ring picks it
   up from --c, which data-disc sets — see work.css). */
.preview {
  --size: clamp(132px, 13vw, 210px);
  position: fixed;
  top: 0; left: 0;
  z-index: 700;
  width: var(--size);
  aspect-ratio: 1;
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);   /* centred on the pointer */
  pointer-events: none;
  opacity: 0;
  scale: 0.7;
  transition: opacity var(--dur-s) linear, scale var(--dur-m) var(--ease);
  will-change: transform;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, var(--fg)) 70%, transparent),
              0 18px 50px -12px rgb(0 0 0 / 0.55);
}
.preview.is-on { opacity: 1; scale: 1; }
.preview img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* The only thing written on the disc: one small word. No plate behind
   it and no ring around it — the disc is small, and anything else
   would cover the photograph it exists to show. A short shadow keeps
   the word readable over a light image. */
.preview__label {
  position: absolute;
  left: 0; right: 0;
  bottom: 15%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.8), 0 6px 22px rgb(0 0 0 / 0.5);
  pointer-events: none;
}
@media (pointer: coarse) { .preview { display: none; } }

/* ---------------------------------------------------------
   SERVICES (accordion)
   --------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.2rem, 2.2vw, 2rem);
  text-align: left;
}
.acc__head h3 {
  font-size: var(--t-h3);
  letter-spacing: -0.03em;
  transition: transform var(--dur-m) var(--ease), color var(--dur-s) linear;
}
.acc__item:hover h3 { transform: translateX(10px); }
.acc__item.is-open h3 { color: var(--accent); }
.acc__ico {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  flex-shrink: 0;
  transition: background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.acc__ico::before, .acc__ico::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 1.5px;
  background: currentColor;
  translate: -50% -50%;
  transition: transform var(--dur-m) var(--ease);
}
.acc__ico::after { transform: rotate(90deg); }
.acc__item.is-open .acc__ico { background: var(--accent); border-color: transparent; color: var(--selection-fg); }
.acc__item.is-open .acc__ico::after { transform: rotate(0deg); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-m) var(--ease);
}
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  padding: 0 0 clamp(1.5rem, 3vw, 2.6rem) clamp(0, 4vw, 5.4rem);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-m) var(--ease) 0.08s, transform var(--dur-m) var(--ease) 0.08s;
}
.acc__item.is-open .acc__body { opacity: 1; transform: none; }
.acc__body p { color: var(--fg-dim); max-width: 46ch; }
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; align-content: flex-start; }
.tag {
  padding: 0.42em 0.95em;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  transition: color var(--dur-s) linear, border-color var(--dur-s) linear;
}
.tag:hover { color: var(--fg); border-color: var(--fg); }

/* ---------------------------------------------------------
   PROCESS (sticky column + steps)
   --------------------------------------------------------- */
.process__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 8rem);
  align-items: start;
}
.process__sticky { position: sticky; top: calc(var(--header-h) + 3vh); }
.process__steps { display: grid; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.5vw, 2.4rem);
  padding-block: clamp(1.5rem, 3vw, 2.6rem);
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--accent);
  padding-top: 0.45em;
}
.step h3 { font-size: clamp(1.15rem, 0.95rem + 1vw, 1.9rem); margin-bottom: 0.5rem; }
.step p { color: var(--fg-dim); max-width: 52ch; margin: 0; }

/* ---------------------------------------------------------
   NUMBERS
   --------------------------------------------------------- */
.numbers {
  display: grid;
  /* Tres datos, tres columnas: reparten el ancho por igual y la fila queda
     equilibrada. Las reglas de tableta y teléfono viven en responsive.css y
     las comparte .case-meta, que sí tiene cuatro. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  border-top: 1px solid var(--line);
  padding-top: clamp(2rem, 4vw, 3.5rem);
}
/* Centrados dentro de su columna: con tres datos y el texto a la izquierda,
   el blanco se acumulaba todo al final de la fila. */
.numbers li { display: grid; gap: 0.4rem; justify-items: center; text-align: center; }
.numbers .num {
  font-size: clamp(2.6rem, 1rem + 6vw, 6.5rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.numbers .num sup { font-size: 0.3em; color: var(--accent); translate: 0 -0.2em; }

/* ---------------------------------------------------------
   TESTIMONIALS
   --------------------------------------------------------- */
.quotes { position: relative; }
.quote {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
  pointer-events: none;
}
.quote.is-on { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.quote blockquote {
  font-size: clamp(1.35rem, 0.9rem + 2.2vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
  max-width: 22ch;
  font-variation-settings: "wght" 400;
}
.quote blockquote::before { content: "“"; color: var(--accent); }
.quote blockquote::after { content: "”"; color: var(--accent); }
.quote figcaption { margin-top: clamp(1.2rem, 2.5vw, 2.2rem); }
.quotes__nav { display: flex; gap: 0.6rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.quotes__nav button {
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.quotes__nav button:hover { background: var(--fg); color: var(--bg); }
.quotes__nav svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ---------------------------------------------------------
   CONTACT / CTA
   --------------------------------------------------------- */
.cta { position: relative; overflow: clip; }
.cta__title {
  font-size: var(--t-giant);
  line-height: 0.82;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  font-variation-settings: "wght" 500, "wdth" 94;
}
.cta__title em { --em-wght: 500; text-transform: none; }

/* The headline is two deliberate lines, not one sentence left to
   wrap where it lands. Left to itself the question mark is its own
   split word and drops to the second line on its own, which reads
   as a typo the size of the page. So: the question is one line,
   the invitation is the next, and .cta__kw keeps the mark welded
   to the word it belongs to at every width. */
.cta__title .cta__line { display: block; }
.cta__title .cta__kw { white-space: nowrap; }

/* Email on the left, rotating stamp on the right */
.cta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(1.5rem, 3vw, 3rem);
}
.cta__mail {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.6rem);
  letter-spacing: -0.02em;
}

/* Rotating stamp */
.stamp {
  flex-shrink: 0;
  position: relative;
  width: clamp(110px, 13vw, 190px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--selection-fg);
}
.stamp svg { width: 100%; height: 100%; animation: spin 18s linear infinite; }
.stamp text { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; fill: currentColor; }
.stamp span { position: absolute; font-size: 1.8rem; line-height: 1; }

/* Form */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  margin-top: clamp(3rem, 6vw, 6rem);
}
.field { position: relative; }
.field--full { grid-column: 1 / -1; }
.field input,
.field textarea {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 1.4rem 0 0.8rem;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  letter-spacing: -0.01em;
  transition: border-color var(--dur-s) linear;
  border-radius: 0;
}
.field textarea { resize: vertical; min-height: 120px; }
.field label {
  position: absolute;
  left: 0; top: 1.4rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  pointer-events: none;
  transform-origin: left;
  transition: transform var(--dur-s) var(--ease), color var(--dur-s) linear;
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-1.35rem) scale(0.86);
  color: var(--accent);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field .err {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--accent-warm);
  min-height: 1em;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur-s) linear, transform var(--dur-s) var(--ease);
}
.field.is-bad .err { opacity: 1; transform: none; }
.field.is-bad input, .field.is-bad textarea { border-color: var(--accent-warm); }

.form__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.form__note { color: var(--fg-dim); font-family: var(--font-mono); font-size: var(--t-mono); }

/* The honeypot. A real person never sees this field and never
   fills it in; the bots that read the markup rather than the page
   fill in everything they find. Off-screen rather than
   display:none, because some bots skip hidden fields on purpose. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* While the request is in the air the button says so and stops
   accepting clicks, so nobody sends the same message four times
   because nothing appeared to happen. */
.form.is-sending button[type="submit"] { opacity: 0.55; pointer-events: none; }

/* One status line for all three outcomes. It is a live region, so
   a screen reader hears the result without having to go looking
   for it; sighted users get the colour. */
.form__status {
  grid-column: 1 / -1;
  display: none;
  gap: 0.6rem;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.form.is-sending .form__status,
.form.is-sent .form__status,
.form.is-error .form__status { display: flex; }
.form.is-sending .form__status { color: var(--fg-dim); }
.form.is-error .form__status { color: var(--accent-warm); }
.form__status a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.form__status a:hover { opacity: 0.75; }