/* ============================================================================
   Site chrome in the white-and-ink style: the navbar on every page, and the
   footer's colours. Markup and script are in base.html.

   The navbar ("the bar") uses its own class names on purpose. The older
   stylesheets hold some 250 rules for .z2h-nav / .navbar; none of them reach
   .z2h-bar, so what is written here is what you get.

   Motion follows the house table (effects research, 2026-09-26): reveals slow
   and eased out, presses and colour changes quick.
   ========================================================================== */

/* ============================================================================
   What every page stands on. These rules used to come from unified.css and
   z2h-enhance.css, which a page in the white-and-ink style no longer loads.
   ========================================================================== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* a visitor who asks for less motion gets none: no animation, no transition (as unified.css had it) */
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Skip to the content: hidden until it takes focus */
.z2h-skip-link {
  position: absolute; left: -9999px; top: 1rem; z-index: 9999; padding: 0.55rem 1.2rem;
  background: #0b0a14; color: #fff; border-radius: 8px; box-shadow: none; font-weight: 700; font-size: 0.9rem; text-decoration: none;
}
.z2h-skip-link:focus { left: 1rem; color: #fff; outline: 2px solid #0b0a14; outline-offset: 3px; }

/* The page loader: a thin line along the top edge, shown only while a page is on its way */
.z2h-loadbar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 99999; pointer-events: none; opacity: 0; transition: opacity 0.18s ease; }
.z2h-loadbar__fill { display: block; height: 100%; width: 0; background: #0b0a14; }
.z2h-loadbar.is-active { opacity: 1; }
.z2h-loadbar.is-active .z2h-loadbar__fill { animation: z2h-bar-loading 1.4s cubic-bezier(0.2, 0.65, 0.3, 1) forwards; }
@keyframes z2h-bar-loading { 0% { width: 0; } 55% { width: 68%; } 100% { width: 92%; } }
@media (prefers-reduced-motion: reduce) { .z2h-loadbar.is-active .z2h-loadbar__fill { animation: none; width: 60%; } }

.z2h-bar,
.z2h-bar__veil {
  --bar-h: 80px;
  --bar-ink: #0b0a14;
  --bar-muted: #6b6680;
  --bar-line: rgba(11, 10, 20, 0.1);
  --bar-line-strong: rgba(11, 10, 20, 0.26);
  --bar-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bar-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --bar-gutter: clamp(1.25rem, 5vw, 4.5rem);
  --bar-maxw: 1240px;
}

.z2h-bar {
  position: sticky; top: 0; z-index: 1040; height: var(--bar-h);
  font-family: "Space Grotesk", system-ui, sans-serif; color: var(--bar-ink);
}
/* Two grounds behind the bar. At the top of a page it is plain white with no
   line; once the page moves under it, it turns to glass with a hairline. */
.z2h-bar::before,
.z2h-bar::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  transition: opacity 0.7s var(--bar-ease-out);
}
.z2h-bar::before { background: #fff; }
.z2h-bar::after {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
          backdrop-filter: blur(10px) saturate(150%);
  border-bottom: 1px solid var(--bar-line);
  opacity: 0;
}
.z2h-bar.is-scrolled::before { opacity: 0; }
.z2h-bar.is-scrolled::after { opacity: 1; }
/* while something hangs from the bar it is solid again */
.z2h-bar.is-mega-open::before,
.z2h-bar.is-sheet-open::before { opacity: 1; }

/* our own display rules must not undo the hidden attribute */
.z2h-bar [hidden] { display: none !important; }

.z2h-bar__row {
  height: 100%; width: min(100% - 2 * var(--bar-gutter), var(--bar-maxw)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

/* ── brand ── */
.z2h-bar .z2h-bar__brand { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 44px; color: var(--bar-ink); text-decoration: none; }
.z2h-bar__mark { width: 38px; height: 38px; flex: none; transition: transform 0.9s var(--bar-ease); }
.z2h-bar__brand:hover .z2h-bar__mark,
.z2h-bar__brand:focus-visible .z2h-bar__mark { transform: translate(2px, -2px); }
.z2h-bar__name { display: grid; gap: 0.3rem; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.03em; line-height: 1; }
.z2h-bar__name small { font-weight: 500; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bar-muted); }

/* ── links: a hairline draws itself under the word and stays on the page you are on ── */
.z2h-bar .z2h-bar__link {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
  font-weight: 500; font-size: 0.95rem; letter-spacing: -0.005em; color: var(--bar-ink);
  text-decoration: none; background: none; border: 0; cursor: pointer;
}
.z2h-bar__text { position: relative; }
.z2h-bar__text::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.9s var(--bar-ease-out);
}
.z2h-bar__link:hover .z2h-bar__text::after,
.z2h-bar__link:focus-visible .z2h-bar__text::after,
.z2h-bar__link.is-current .z2h-bar__text::after,
.z2h-bar__link[aria-expanded="true"] .z2h-bar__text::after { transform: scaleX(1); transform-origin: left; }

/* ── the one button: ink, and it turns to paper under the cursor ── */
.z2h-bar .z2h-bar__cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 1.15rem;
  border: 1px solid var(--bar-ink); border-radius: 8px; background: var(--bar-ink); color: #fff;
  font-weight: 600; font-size: 0.92rem; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
.z2h-bar .z2h-bar__cta:hover { background: #fff; color: var(--bar-ink); }
.z2h-bar .z2h-bar__cta:active { transform: translateY(1px); }

.z2h-bar a:focus-visible,
.z2h-bar button:focus-visible { outline: 2px solid var(--bar-ink); outline-offset: 3px; border-radius: 4px; }
.z2h-bar .z2h-bar__cta:focus-visible { border-radius: 8px; }

/* ── Educación: the toggle's plus lies down into a minus ── */
.z2h-mega-toggle__sign { position: relative; width: 9px; height: 9px; flex: none; opacity: 0.7; }
.z2h-mega-toggle__sign::before,
.z2h-mega-toggle__sign::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px;
  background: currentColor; border-radius: 1px; transition: transform 0.55s var(--bar-ease);
}
.z2h-mega-toggle__sign::after { transform: rotate(90deg); }
.z2h-mega-toggle[aria-expanded="true"] .z2h-mega-toggle__sign::after { transform: rotate(0deg); }

/* The panel. Its height is real (0fr to 1fr), so the bar is seen to grow.
   Hidden from the keyboard while closed; it closes faster than it opens. */
.z2h-mega {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 0.52s var(--bar-ease-out), visibility 0s linear 0.52s;
}
.z2h-mega__clip { overflow: hidden; min-height: 0; }
.z2h-mega-toggle[aria-expanded="true"] + .z2h-mega {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows 0.76s var(--bar-ease-out), visibility 0s;
}
.z2h-mega__cards { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 10px; }
/* the cards come into focus one after another, a little after the bar starts to grow */
.z2h-mega__cards > li {
  opacity: 0; transform: translateY(7px); filter: blur(4px);
  transition: opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}
.z2h-mega-toggle[aria-expanded="true"] + .z2h-mega .z2h-mega__cards > li {
  opacity: 1; transform: none; filter: none;
  transition: opacity 0.64s ease, transform 0.64s var(--bar-ease-out), filter 0.64s ease;
  transition-delay: calc(200ms + var(--i, 0) * 70ms);
}

/* A card: a small rectangle, the engraving beside the name. On hover the
   engraving rises slowly and the hairline draws under the name. */
.z2h-bar .z2h-mega__card {
  display: flex; align-items: center; gap: 0.7rem; min-height: 64px; padding: 7px 12px 7px 8px;
  border: 1px solid var(--bar-line); border-radius: 8px; background: #fff;
  color: var(--bar-ink); text-decoration: none;
  transition: border-color 0.5s var(--bar-ease-out);
}
.z2h-mega__art { width: 48px; height: 48px; flex: none; transition: transform 1.1s var(--bar-ease); }
.z2h-mega__name {
  position: relative; display: inline-block; font-weight: 600; font-size: 0.9rem;
  line-height: 1.15; letter-spacing: -0.01em; color: var(--bar-ink);
}
.z2h-mega__name::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.9s var(--bar-ease-out);
}
.z2h-bar .z2h-mega__card:hover,
.z2h-bar .z2h-mega__card:focus-visible { border-color: var(--bar-line-strong); }
.z2h-mega__card:hover .z2h-mega__art,
.z2h-mega__card:focus-visible .z2h-mega__art { transform: translateY(-4px); }
.z2h-mega__card:hover .z2h-mega__name::after,
.z2h-mega__card:focus-visible .z2h-mega__name::after,
.z2h-mega__card.is-current .z2h-mega__name::after { transform: scaleX(1); transform-origin: left; }
.z2h-bar .z2h-mega__card:focus-visible { border-radius: 8px; }

/* The veil behind the phone sheet. A touch on it closes the sheet. */
.z2h-bar__veil {
  position: fixed; inset: 0; z-index: 1039; background: rgba(11, 10, 20, 0.22);
  opacity: 0; transition: opacity 0.3s ease;
}
.z2h-bar__veil.is-on { opacity: 1; }
.z2h-bar__veil[hidden] { display: none; }

/* ── Desktop: everything in one row; the panel hangs from the bar's lower edge ── */
@media (min-width: 992px) {
  .z2h-bar__menu-btn { display: none; }
  .z2h-bar__panel { display: flex; align-items: center; gap: 2.4rem; }
  .z2h-bar__links { display: flex; align-items: center; gap: 2.1rem; list-style: none; margin: 0; padding: 0; }
  .z2h-bar__kicker { display: none; }
  .z2h-bar__actions { display: flex; align-items: center; gap: 1.5rem; }
  .z2h-bar .z2h-mega {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--bar-line);
  }
  .z2h-mega__cards {
    width: min(100% - 2 * var(--bar-gutter), var(--bar-maxw));
    grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 4px 0 22px;
  }
}

/* ── Phones and tablets: a word instead of a hamburger, and a sheet that
   comes down from under the bar with the options already laid out ── */
@media (max-width: 991.98px) {
  .z2h-bar .z2h-bar__menu-btn {
    display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; min-width: 56px;
    background: none; border: 0; padding: 0; cursor: pointer;
    font: 500 0.95rem "Space Grotesk", system-ui, sans-serif; color: var(--bar-ink);
  }
  .z2h-bar__panel {
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - var(--bar-h)); max-height: calc(100dvh - var(--bar-h)); overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem var(--bar-gutter) 1.5rem; background: #fff; border-bottom: 1px solid var(--bar-line);
    opacity: 0; transform: translateY(-6px); visibility: hidden;
    transition: opacity 0.26s ease, transform 0.26s ease, visibility 0s linear 0.26s;
  }
  .z2h-bar.is-sheet-open .z2h-bar__panel {
    opacity: 1; transform: none; visibility: visible;
    transition: opacity 0.42s ease, transform 0.42s var(--bar-ease-out), visibility 0s;
  }
  .z2h-bar__links { list-style: none; margin: 0; padding: 0; }
  .z2h-bar__links > li + li { border-top: 1px solid var(--bar-line); }
  .z2h-bar .z2h-bar__link { min-height: 54px; font-size: 1.05rem; width: 100%; }
  /* Educación is a heading here, and its cards are simply there */
  .z2h-bar .z2h-mega-toggle {
    pointer-events: none; min-height: 44px; font-size: 0.68rem; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--bar-muted);
  }
  .z2h-mega-toggle .z2h-bar__text::after,
  .z2h-mega-toggle__sign { display: none; }
  .z2h-bar .z2h-mega { grid-template-rows: 1fr; visibility: inherit; transition: none; }
  .z2h-mega__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-bottom: 1.1rem; }
  .z2h-mega__cards > li,
  .z2h-mega-toggle[aria-expanded] + .z2h-mega .z2h-mega__cards > li { opacity: 1; transform: none; filter: none; transition: none; }
  .z2h-bar .z2h-mega__card { min-height: 60px; }
  .z2h-mega__art { width: 44px; height: 44px; }
  .z2h-bar__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding-top: 1.1rem; border-top: 1px solid var(--bar-line); }
  .z2h-bar__actions:has(> [hidden]) { grid-template-columns: 1fr; }
  .z2h-bar .z2h-bar__actions .z2h-bar__link {
    justify-content: center; min-height: 48px; border: 1px solid var(--bar-line-strong); border-radius: 8px; font-size: 0.98rem; font-weight: 600;
  }
  .z2h-bar__actions .z2h-bar__text::after { display: none; }
  .z2h-bar .z2h-bar__cta { min-height: 48px; font-size: 0.98rem; }
  /* the sheet's rows arrive a beat apart */
  .z2h-bar__links > li,
  .z2h-bar__actions { opacity: 0; transform: translateY(6px); }
  .z2h-bar.is-sheet-open .z2h-bar__links > li,
  .z2h-bar.is-sheet-open .z2h-bar__actions {
    opacity: 1; transform: none;
    transition: opacity 0.5s ease, transform 0.6s var(--bar-ease-out);
    transition-delay: calc(90ms + var(--r, 0) * 60ms);
  }
}

/* The bar arrives once per visit, left to right, slowly (class set in base.html). */
@keyframes z2h-bar-arrive { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
html.z2h-bar-arrive .z2h-bar__brand,
html.z2h-bar-arrive .z2h-bar__menu-btn { animation: z2h-bar-arrive 1.1s var(--bar-ease-out) 0.12s both; }
@media (min-width: 992px) {
  /* the link, not its <li>: an animated transform on the <li> would become the containing block of the
     Educación panel, and the panel would be laid out inside that one item instead of across the bar */
  html.z2h-bar-arrive .z2h-bar__links > li > .z2h-bar__link { animation: z2h-bar-arrive 1.1s var(--bar-ease-out) calc(0.26s + var(--r, 0) * 0.11s) both; }
  html.z2h-bar-arrive .z2h-bar__actions { animation: z2h-bar-arrive 1.1s var(--bar-ease-out) 0.62s both; }
}

@media (prefers-reduced-motion: reduce) {
  .z2h-bar::before, .z2h-bar::after,
  .z2h-bar__mark, .z2h-bar__text::after, .z2h-bar .z2h-bar__cta,
  .z2h-mega, .z2h-mega-toggle[aria-expanded="true"] + .z2h-mega,
  .z2h-mega__cards > li, .z2h-mega-toggle[aria-expanded="true"] + .z2h-mega .z2h-mega__cards > li,
  .z2h-mega__art, .z2h-mega__name::after, .z2h-mega-toggle__sign::before, .z2h-mega-toggle__sign::after,
  .z2h-bar__panel, .z2h-bar.is-sheet-open .z2h-bar__panel,
  .z2h-bar.is-sheet-open .z2h-bar__links > li, .z2h-bar.is-sheet-open .z2h-bar__actions,
  .z2h-bar__veil { transition: none; }
  html.z2h-bar-arrive .z2h-bar__brand, html.z2h-bar-arrive .z2h-bar__menu-btn,
  html.z2h-bar-arrive .z2h-bar__links > li > .z2h-bar__link, html.z2h-bar-arrive .z2h-bar__actions { animation: none; }
  .z2h-mega__cards > li { filter: none; }
  .z2h-bar__brand:hover .z2h-bar__mark,
  .z2h-mega__card:hover .z2h-mega__art, .z2h-mega__card:focus-visible .z2h-mega__art { transform: none; }
}

/* ============================================================================
   THE FOOTER. Copied as it stood in unified.css (2026-10-12), which still carries it
   for the pages that load the old stylesheets; the colours of the new style follow.
   ========================================================================== */
/* Phase 4.3 → Aug 2026: "grand finale" ink footer + desktop scroll reveal.
   ANRO-style curtain: on desktop the page (.z2h-surface, see base.html) is an
   elevated opaque layer that lifts away and uncovers the footer pinned beneath
   it (position: sticky, zero JS). The footer renders static and stacked on
   mobile/tablet, short viewports, reduced motion, and admin/aca pages. */
.z2h-footer {
  --zf-bg: #0f0b1f;
  --zf-bg-2: #1a1330;
  --zf-text: #ece9f8;
  --zf-muted: #a89fc7;
  --zf-accent: #a78bfa;
  --zf-line: rgba(167, 139, 250, 0.16);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1000px 540px at 12% -12%, rgba(124, 58, 237, 0.34), transparent 62%),
    radial-gradient(860px 480px at 88% 115%, rgba(139, 92, 246, 0.18), transparent 60%),
    linear-gradient(180deg, var(--zf-bg-2), var(--zf-bg) 58%);
  color: var(--zf-text);
}

.z2h-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(167, 139, 250, 0.22) 16%,
    rgba(167, 139, 250, 0.72) 50%,
    rgba(167, 139, 250, 0.22) 84%,
    transparent 100%
  );
  pointer-events: none;
}

.zf-shell {
  padding-top: clamp(2.7rem, 5.4vw, 4.1rem);
  padding-bottom: 1.35rem;
}

/* Top zone: statement + newsletter */
.zf-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 400px);
  gap: 2rem clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.zf-kicker {
  margin: 0 0 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zf-accent);
}

.zf-headline {
  margin: 0;
  font-family: var(--u-font-heading, "Space Grotesk", ui-sans-serif, sans-serif);
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #ffffff;
}

.zf-headline em {
  font-style: normal;
  color: var(--zf-accent);
}

.zf-sub {
  margin: 1rem 0 0;
  max-width: 46ch;
  color: var(--zf-muted);
  font-size: 0.99rem;
  line-height: 1.65;
}

.zf-eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zf-accent);
}

/* Newsletter: underline-only field, ANRO-style */
.zf-news {
  padding-top: 0.35rem;
}

.zf-news__hint {
  margin: 0 0 1.05rem;
  color: var(--zf-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.zf-news__form {
  margin: 0;
}

.zf-news__row {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  border-bottom: 1px solid rgba(167, 139, 250, 0.34);
  transition: border-color 0.25s ease;
}

.zf-news__form:focus-within .zf-news__row {
  border-color: var(--zf-accent);
}

.zf-news__form.is-invalid .zf-news__row {
  border-color: #fb7185;
}

.zf-news__form.is-done .zf-news__row {
  border-color: rgba(134, 239, 172, 0.6);
}

.zf-news__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: #ffffff;
  font-size: 0.96rem;
  padding: 0.62rem 0;
}

.zf-news__input::placeholder {
  color: rgba(236, 233, 248, 0.38);
}

.zf-news__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  min-height: 44px;
  padding: 0 0.15rem;
  color: #cabffb;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.zf-news__btn:hover,
.zf-news__btn:focus-visible {
  color: #ffffff;
}

.zf-news__btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.zf-news__btn:focus-visible {
  outline: 2px solid var(--zf-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.zf-news__btn-arrow {
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.zf-news__btn:hover .zf-news__btn-arrow,
.zf-news__btn:focus-visible .zf-news__btn-arrow {
  transform: translateX(4px);
}

.zf-news__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.zf-news__msg {
  margin: 0.6rem 0 0;
  min-height: 1.25em;
  font-size: 0.86rem;
  color: var(--zf-muted);
}

.zf-news__msg.is-error {
  color: #fda4af;
}

.zf-news__msg.is-ok {
  color: #86efac;
}

/* Link columns */
.zf-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8rem clamp(1.6rem, 4vw, 3.2rem);
  margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
}

.zf-col {
  min-width: 0;
}

.zf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.zf-list a,
.zf-legal a {
  position: relative;
  display: inline-flex;
  width: fit-content;
  color: var(--zf-muted);
  font-weight: 600;
  font-size: 0.92rem;
  padding-bottom: 0.1rem;
  transition: color 0.22s ease;
}

.zf-list a::after,
.zf-legal a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #a78bfa, #8b5cf6);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.92s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.zf-list a:hover::after,
.zf-list a:focus-visible::after,
.zf-legal a:hover::after,
.zf-legal a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.zf-list a:not(:hover):not(:focus-visible)::after,
.zf-legal a:not(:hover):not(:focus-visible)::after {
  transform-origin: right center;
}

.zf-list a:hover,
.zf-list a:focus-visible,
.zf-legal a:hover,
.zf-legal a:focus-visible {
  color: #ffffff;
}

/* Bottom bar */
.zf-bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.05rem;
  border-top: 1px solid var(--zf-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
}

.zf-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.zf-brand:hover,
.zf-brand:focus-visible {
  color: #ffffff;
}

.zf-brand__glyph {
  display: grid;
  place-items: center;
  color: var(--zf-accent);
  font-size: 0.9rem;
}

.zf-copy {
  margin: 0;
  color: var(--zf-muted);
  font-size: 0.84rem;
}

.zf-legal {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.zf-legal a {
  font-size: 0.84rem;
}

/* Desktop curtain reveal — the page lifts away, the footer waits beneath.
   Gated: wide viewport + enough height (the sticky footer must be shorter
   than the viewport) + no reduced-motion + a page that shows the footer. */
@media (min-width: 992px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  body:not(.z2h-admin-skin) .z2h-surface {
    position: relative;
    z-index: 1;
    background: inherit;
    min-height: 100svh;
    box-shadow: 0 26px 54px rgba(10, 7, 22, 0.4);
  }

  body:not(.z2h-admin-skin) .z2h-footer {
    position: sticky;
    bottom: 0;
    z-index: 0;
  }

  body:not(.z2h-admin-skin) .zf-shell {
    padding-top: clamp(3.1rem, 6vh, 4.5rem);
  }
}

@media (max-width: 991.98px) {
  .zf-top {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .zf-news {
    max-width: 480px;
  }

  .zf-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .zf-cols {
    gap: 1.5rem 1.2rem;
  }

  .zf-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
  }

  .zf-legal {
    margin-left: 0;
    gap: 0.9rem;
  }
}

/* ============================================================================
   Footer: the same ink as the rest, no violet. Only colours change here; its
   layout and its reveal stay in unified.css.
   ========================================================================== */
.z2h-footer.z2h-footer {
  --zf-accent: rgba(255, 255, 255, 0.56);
  --zf-muted: rgba(255, 255, 255, 0.62);
  --zf-line: rgba(255, 255, 255, 0.14);
  background: #0b0a14;
}
.z2h-footer.z2h-footer::before { display: none; }
/* links in the footer carry no underline of their own (the old base stylesheet used to see to it) */
.z2h-footer a { text-decoration: none; }
/* its small headings are <h3>: they took the display face from the old stylesheet's rule for all headings */
.z2h-footer .zf-eyebrow { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; }
/* the footer's content keeps the same edges as the bar */
.z2h-footer .zf-shell { width: min(100% - 2 * clamp(1.25rem, 5vw, 4.5rem), 1240px); max-width: none; padding-inline: 0; }
.z2h-footer .zf-headline { color: rgba(255, 255, 255, 0.5); }
.z2h-footer .zf-headline em { color: #fff; }
.z2h-footer .zf-news__row { border-bottom-color: rgba(255, 255, 255, 0.3); }
.z2h-footer .zf-news__form:focus-within .zf-news__row { border-bottom-color: #fff; }
.z2h-footer .zf-news__btn { color: #fff; }
.z2h-footer .zf-list a::after,
.z2h-footer .zf-legal a::after { background: #fff; }
.z2h-footer .zf-brand__mark { width: 26px; height: 26px; filter: invert(1); }