/* ------------ Reveal on scroll ------------ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s cubic-bezier(.2,.8,.2,1), transform 0.9s cubic-bezier(.2,.8,.2,1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}
@media (max-width: 540px) {
  .field-row { grid-template-columns: 1fr; }
}

/* ------------ Mobile nav ------------ */
/* On mobile (incl. portrait tablets), the animated scroll-state transition
   is jittery — backdrop-filter repaints and color-mix bg fade combine into
   an awkward "half-transparent / half-blurred" frame as you cross the 20px
   threshold. Snap straight to the solid scrolled appearance instead, with
   no animated background/padding transition, and use a solid (not blurred)
   bg so the bar always reads cleanly against any underlying content. */
@media (max-width: 880px) {
  .nav {
    transition: color 0.3s ease, border-color 0.3s ease;
  }
  .nav.scrolled {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 14px 0;
  }
  .nav.scrolled.menu-open {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* While the mobile menu is open, force the bar into its solid scrolled
     look regardless of scroll position, so opening the menu near the top
     of the hero doesn't expose the dark hero-state styling under the
     white overlay. */
  .nav.menu-open {
    background: var(--bg) !important;
    color: var(--ink) !important;
    border-bottom-color: var(--rule) !important;
  }
  .nav.menu-open .logo-mark { border-color: var(--ink); color: var(--ink); }
  .nav.menu-open .logo-text .name { color: var(--ink); }
  .nav.menu-open .logo-text .sub { color: var(--muted); }
  .nav-links {      position: fixed;
    inset: 0;
    background: var(--bg);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 80px 32px;
    gap: 8px;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(.7,0,.2,1);
    z-index: 200;
    overflow-y: auto;
  }
  .nav-links.open { transform: translateX(0); }
  /* Override hero-state color rules with higher specificity */
  .nav .nav-links a,
  .nav.scrolled .nav-links a {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--ink) !important;
    padding: 12px 0;
  }
  .nav .nav-links a:hover,
  .nav.scrolled .nav-links a:hover { color: var(--brass-deep) !important; }
  /* CTA inside mobile menu */
  .nav .nav-links .nav-cta,
  .nav.scrolled .nav-links .nav-cta {
    margin-top: 20px;
    font-size: 28px !important;
    padding: 20px 36px !important;
    color: var(--ink) !important;
    border-color: var(--ink) !important;
  }
  .nav .nav-links .nav-cta span { color: var(--ink) !important; }
  /* Hamburger sits above the fullscreen overlay */
  .menu-toggle {
    display: block;
    position: fixed;
    top: 14px;
    right: clamp(20px, 4vw, 56px);
    z-index: 300;
  }
  /* Spans always readable: force ink when menu is open */
  .menu-toggle span { background: currentColor; }
}
/* Must be outside media query to beat hero-state rule */
#menuToggle.open span { background: var(--ink) !important; }