/* ==========================================================================
   Evermont International Academy — components.css
   Reusable interface parts. Page-specific composition lives in pages.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Document foundations
   -------------------------------------------------------------------------- */

body {
  background-color: var(--surface-page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

::selection {
  background-color: var(--c-mist);
  color: var(--c-navy);
}

/* Visible keyboard focus everywhere, never removed. */
:focus-visible {
  outline: var(--focus-ring) solid var(--c-focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   2. Layout helpers
   -------------------------------------------------------------------------- */

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

.container--narrow {
  max-width: var(--container-narrow);
}

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

.section--quiet {
  background-color: var(--surface-quiet);
}

.section--deep {
  background-color: var(--surface-deep);
  color: var(--ink-on-deep);
}

.section--raised {
  background-color: var(--surface-raised);
}

.section--hairline {
  border-top: var(--rule-hair) solid var(--c-line);
}

.stack > * + * {
  margin-top: var(--s-sm);
}

.stack-md > * + * {
  margin-top: var(--s-md);
}

.stack-lg > * + * {
  margin-top: var(--s-lg);
}

.measure {
  max-width: var(--measure);
}

.measure-tight {
  max-width: var(--measure-tight);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Typography primitives
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
  color: var(--ink-strong);
  font-weight: 400;
}

.h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: var(--lh-heading);
  letter-spacing: -0.012em;
  color: var(--ink-strong);
  font-weight: 400;
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: -0.008em;
  color: var(--ink-strong);
  font-weight: 400;
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--ink-strong);
  font-weight: 400;
}

.h4 {
  font-family: var(--font-body);
  font-size: var(--t-h4);
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink-strong);
}

.section--deep .display,
.hero .display,
.section--deep .h1,
.hero .h1,
.section--deep .h2,
.hero .h2,
.section--deep .h3,
.hero .h3,
.section--deep .h4,
.hero .h4 {
  color: var(--ink-on-deep);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-strong);
}

.section--deep .lead,
.hero .lead {
  color: var(--ink-on-deep);
}

.prose p,
.prose li {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: var(--s-sm);
}

.prose h2 {
  margin-top: var(--s-xl);
}

.prose h3 {
  margin-top: var(--s-lg);
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose ul li,
.prose ol li {
  margin-top: var(--s-2xs);
}

.prose a {
  color: var(--ink-strong);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--c-brass);
}

.prose a:hover {
  text-decoration-thickness: 2px;
}

.text-muted {
  color: var(--ink-muted);
}

.section--deep .text-muted,
.hero .text-muted {
  color: var(--c-on-navy-muted);
}

.small {
  font-size: var(--t-small);
}

.micro {
  font-size: var(--t-micro);
  line-height: 1.55;
}

/* Eyebrow — the recurring utility label used across every section. */
.eyebrow {
  font-family: var(--font-utility);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-brass-ink);
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  margin-bottom: var(--s-sm);
}

.eyebrow::before {
  content: "";
  inline-size: 1.75rem;
  block-size: var(--rule-brass);
  background-color: var(--c-brass);
  flex: none;
}

.section--deep .eyebrow,
.hero .eyebrow {
  color: var(--c-brass-lite);
}

.eyebrow--plain::before {
  display: none;
}

/* Chinese-language typographic treatment. */
.zh {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  letter-spacing: 0.08em;
}

/* Latin motto lockup. */
.motto {
  border-top: var(--rule-hair) solid var(--c-line-strong);
  padding-top: var(--s-sm);
  display: grid;
  gap: 0.15rem;
}

.motto__latin {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-h4);
  color: var(--ink-strong);
  letter-spacing: 0.02em;
}

.motto__english {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.section--deep .motto,
.hero .motto {
  border-top-color: var(--c-line-on-navy);
}

.section--deep .motto__latin,
.hero .motto__latin {
  color: var(--c-ivory);
}

.section--deep .motto__english,
.hero .motto__english {
  color: var(--c-on-navy-muted);
}

/* The footer sits on charcoal, so the motto lockup takes the same
   on-dark treatment as the navy sections. Without this the lockup inherits
   the light-ground ink colours and drops to roughly 1:1 contrast. */
.site-footer .motto {
  border-top-color: var(--c-line-on-navy);
}

.site-footer .motto__latin {
  color: var(--c-ivory);
}

.site-footer .motto__english {
  color: var(--c-on-navy-muted);
}

/* --------------------------------------------------------------------------
   4. Signature device — the ridgeline rule
   A fine brass line that steps once, echoing the mountain-line mark.
   Used to separate major movements of a page.
   -------------------------------------------------------------------------- */

.ridgeline {
  display: block;
  inline-size: 100%;
  block-size: 18px;
  color: var(--c-brass);
  opacity: 0.85;
}

.ridgeline svg {
  inline-size: 100%;
  block-size: 100%;
  display: block;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2xs);
  min-block-size: var(--touch-min);
  padding: 0.75rem 1.5rem;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-md);
  transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
  text-align: center;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background-color: var(--c-navy);
  color: var(--c-ivory);
  border-color: var(--c-navy);
}

.btn--primary:hover {
  background-color: var(--c-green);
  border-color: var(--c-green);
}

.btn--secondary {
  background-color: transparent;
  color: var(--ink-strong);
  border-color: var(--c-line-strong);
}

.btn--secondary:hover {
  border-color: var(--c-navy);
  background-color: rgba(16, 42, 67, 0.04);
}

.section--deep .btn--primary,
.hero .btn--primary {
  background-color: var(--c-ivory);
  color: var(--c-navy);
  border-color: var(--c-ivory);
}

.section--deep .btn--primary:hover,
.hero .btn--primary:hover {
  background-color: var(--c-white);
  border-color: var(--c-white);
}

.section--deep .btn--secondary,
.hero .btn--secondary {
  color: var(--c-ivory);
  border-color: var(--c-line-on-navy);
}

.section--deep .btn--secondary:hover,
.hero .btn--secondary:hover {
  border-color: var(--c-ivory);
  background-color: rgba(247, 244, 236, 0.08);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
}

/* Text link with brass underline, used for inline calls to action. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: var(--touch-min);
  font-weight: 600;
  font-size: var(--t-small);
  color: var(--ink-strong);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--c-brass);
  text-decoration-thickness: 1px;
}

.link-arrow:hover {
  text-decoration-thickness: 2px;
}

.link-arrow::after {
  content: "→";
  font-size: 1em;
  transition: transform var(--dur) var(--ease);
}

.link-arrow:hover::after {
  transform: translateX(3px);
}

.section--deep .link-arrow,
.hero .link-arrow {
  color: var(--c-ivory);
  text-decoration-color: var(--c-brass-lite);
}

/* --------------------------------------------------------------------------
   6. Skip link
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  transform: translateY(-120%);
  background-color: var(--c-navy);
  color: var(--c-ivory);
  padding: 0.875rem 1.5rem;
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   7. Status notice (persistent, site-wide)
   -------------------------------------------------------------------------- */

.status-notice {
  background-color: var(--c-navy);
  color: var(--c-ivory);
  border-bottom: var(--rule-brass) solid var(--c-brass);
}

.status-notice__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2xs) var(--s-md);
  padding-block: 0.875rem;
}

.status-notice__label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-brass-lite);
  flex: none;
}

.status-notice__copy {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--c-ivory);
  max-width: 78ch;
}

.status-notice__link {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--c-ivory);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--c-brass);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--touch-min);
}

/* --------------------------------------------------------------------------
   8. Site header and navigation
   -------------------------------------------------------------------------- */

.site-header {
  background-color: var(--surface-page);
  border-bottom: var(--rule-hair) solid var(--c-line);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  min-block-size: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  text-decoration: none;
  padding-block: 0.5rem;
}

/* Finalized crest lockup (crest + wordmark + Chinese name) rendered as one
   image. Height-constrained so it scales cleanly inside the sticky header;
   width is intrinsic to preserve the logo's aspect ratio. */
.brand__logo {
  display: block;
  height: 2.75rem;
  width: auto;
}

.brand__mark {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex: none;
  color: var(--c-navy);
}

.brand__text {
  display: grid;
  gap: 0.1rem;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-navy);
}

.brand__zh {
  font-size: var(--t-micro);
  color: var(--ink-muted);
  line-height: 1.1;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-block-size: var(--touch-min);
  min-inline-size: var(--touch-min);
  padding: 0.5rem 0.75rem;
  border: var(--rule-hair) solid var(--c-line-strong);
  border-radius: var(--radius-md);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-navy);
}

.nav-toggle__bars {
  display: grid;
  gap: 4px;
  inline-size: 18px;
}

.nav-toggle__bars span {
  display: block;
  block-size: 2px;
  background-color: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-md);
}

.primary-nav__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--touch-min);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-strong);
  text-decoration: none;
  border-bottom: var(--rule-brass) solid transparent;
  padding-block: 0.25rem;
}

.primary-nav__link:hover {
  border-bottom-color: var(--c-line-strong);
}

/* Current page is marked by weight and rule, never by colour alone. */
.primary-nav__link[aria-current="page"] {
  font-weight: 700;
  border-bottom-color: var(--c-brass);
}

.primary-nav__cta {
  margin-left: var(--s-2xs);
}

/* --------------------------------------------------------------------------
   9. Cards and panels
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  gap: var(--s-md);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.card {
  background-color: var(--surface-raised);
  border: var(--rule-hair) solid var(--c-line);
  border-top: var(--rule-brass) solid var(--c-brass);
  padding: var(--s-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
}

.card__index {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  color: var(--c-brass-ink);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--ink-strong);
}

.card__body {
  color: var(--ink);
  font-size: var(--t-small);
  line-height: 1.6;
}

.panel {
  background-color: var(--surface-raised);
  border: var(--rule-hair) solid var(--c-line);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.panel--quiet {
  background-color: var(--surface-quiet);
  border-color: transparent;
}

.panel--bordered {
  border-left: var(--rule-brass) solid var(--c-brass);
}

/* Qualifier block — the recurring "this is not a claim" note. */
.qualifier {
  border-top: var(--rule-hair) solid var(--c-line);
  padding-top: var(--s-sm);
  font-size: var(--t-small);
  color: var(--ink-muted);
  max-width: var(--measure);
}

.section--deep .qualifier,
.hero .qualifier {
  border-top-color: var(--c-line-on-navy);
  color: var(--c-on-navy-muted);
}

/* Disclosure list — used on the Institutional Preview page. */
.disclosure-list {
  display: grid;
  gap: 0;
  border-top: var(--rule-hair) solid var(--c-line);
}

.disclosure-list li {
  display: flex;
  gap: var(--s-sm);
  align-items: flex-start;
  padding-block: var(--s-sm);
  border-bottom: var(--rule-hair) solid var(--c-line);
}

.disclosure-list li::before {
  content: "";
  flex: none;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  margin-top: 0.45rem;
  border: var(--rule-brass) solid var(--c-brass);
  transform: rotate(45deg);
}

.disclosure-list li > span {
  max-width: var(--measure);
}

/* Standards list — checklist-style but explicitly future-facing. */
.standards-list {
  display: grid;
  gap: var(--s-2xs);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.standards-list li {
  display: flex;
  gap: var(--s-xs);
  align-items: baseline;
  padding: var(--s-xs) 0;
  border-bottom: var(--rule-hair) solid var(--c-line);
  font-size: var(--t-small);
}

.standards-list li::before {
  content: "";
  flex: none;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  background-color: var(--c-green);
  border-radius: 50%;
}

.section--deep .standards-list li,
.hero .standards-list li {
  border-bottom-color: var(--c-line-on-navy);
}

.section--deep .standards-list li::before,
.hero .standards-list li::before {
  background-color: var(--c-brass-lite);
}

/* Definition rows — used for values, meanings and configuration facts. */
.def-list {
  border-top: var(--rule-hair) solid var(--c-line-strong);
}

.def-row {
  display: grid;
  gap: var(--s-3xs) var(--s-lg);
  padding-block: var(--s-md);
  border-bottom: var(--rule-hair) solid var(--c-line);
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  align-items: baseline;
}

.def-row dt {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  color: var(--ink-strong);
}

.def-row dd {
  margin: 0;
  color: var(--ink);
  max-width: var(--measure);
  font-size: var(--t-small);
}

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--s-md);
  max-width: 38rem;
}

.field {
  display: grid;
  gap: var(--s-3xs);
}

.field__label {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-strong);
}

.field__hint {
  font-size: var(--t-micro);
  color: var(--ink-muted);
}

.field__required {
  color: var(--c-brass-ink);
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  inline-size: 100%;
  min-block-size: var(--touch-min);
  padding: 0.6875rem 0.875rem;
  background-color: var(--c-white);
  border: var(--rule-hair) solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--t-body);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease);
}

.field textarea {
  min-block-size: 8rem;
  resize: vertical;
  line-height: 1.55;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--c-navy);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--c-error-ink);
  border-inline-start-width: 4px;
}

.field__error {
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--c-error-ink);
  display: flex;
  gap: 0.375rem;
  align-items: flex-start;
  min-block-size: 0;
}

.field__error:not(:empty)::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
  margin-top: 0.15rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.6875rem;
  line-height: 1;
}

.field--consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-xs);
  align-items: start;
  padding: var(--s-sm);
  background-color: var(--surface-quiet);
  border-radius: var(--radius-sm);
}

.field--consent input[type="checkbox"] {
  /* 24px meets the WCAG 2.2 minimum target size (2.5.8) for the control
     itself. The associated label is clickable and far larger than 44px, so
     the effective target comfortably exceeds the site's 44px goal. */
  inline-size: 1.5rem;
  block-size: 1.5rem;
  min-block-size: 0;
  margin-top: 0.1rem;
  accent-color: var(--c-navy);
}

.field--consent .field__label {
  font-weight: 500;
  font-size: var(--t-small);
  line-height: 1.5;
}

.field--consent .field__error {
  grid-column: 1 / -1;
}

/* Form-level status message. Never announces a submission that did not occur. */
.form-status {
  border: var(--rule-hair) solid var(--c-line-strong);
  border-left: var(--rule-brass) solid var(--c-brass);
  background-color: var(--c-white);
  padding: var(--s-sm) var(--s-md);
  font-size: var(--t-small);
  color: var(--ink);
}

.form-status:empty {
  display: none;
}

.form-status__title {
  font-weight: 700;
  color: var(--ink-strong);
  display: block;
  margin-bottom: var(--s-3xs);
}

.form-note {
  font-size: var(--t-micro);
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--c-charcoal);
  color: var(--c-ivory);
  padding-block: var(--s-2xl) var(--s-lg);
  margin-top: auto;
}

.site-footer a {
  color: var(--c-ivory);
  text-decoration: none;
}

/* Links sitting inside a block of footer prose must be distinguishable by
   something other than colour, so they carry a permanent underline. Links in
   the footer navigation lists are already isolated on their own line. */
.site-footer p a,
.site-footer dd a,
.site-footer li a.link-inline {
  text-decoration: underline;
  text-decoration-color: var(--c-brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.site-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--c-brass);
}

.footer-grid {
  display: grid;
  gap: var(--s-xl);
  grid-template-columns: minmax(16rem, 1.4fr) repeat(auto-fit, minmax(11rem, 1fr));
  padding-bottom: var(--s-xl);
  border-bottom: var(--rule-hair) solid var(--c-line-on-navy);
}

.footer-brand__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer-brand__zh {
  font-size: var(--t-small);
  color: var(--c-on-navy-muted);
  margin-top: 0.25rem;
}

.footer-heading {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-brass-lite);
  margin-bottom: var(--s-xs);
}

.footer-list {
  display: grid;
  gap: 0;
}

.footer-list li a,
.footer-list li span {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--touch-min);
  font-size: var(--t-small);
}

/* The on-dark colours are scoped to the footer itself. The same list markup is
   reused on 404.html inside a light panel, where inheriting an on-navy muted
   ink would drop the links to about 1.3:1 against the mist ground. */
.site-footer .footer-list li a,
.site-footer .footer-list li span {
  color: var(--c-on-navy-muted);
}

.site-footer .footer-list li a:hover {
  color: var(--c-ivory);
}

.footer-status {
  margin-top: var(--s-lg);
  font-size: var(--t-small);
  color: var(--c-on-navy-muted);
  max-width: var(--measure);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-sm);
  padding-top: var(--s-md);
  font-size: var(--t-micro);
  color: var(--c-on-navy-muted);
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md);
}

/* --------------------------------------------------------------------------
   12. Motion — a single restrained reveal, disabled under reduced motion
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 1;
}

.js-motion .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}

.js-motion .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Honeypot ------------------------------------------------------------
   Removed from view and from the accessibility tree, but still submitted by
   automated agents. Not display:none, because some bots skip hidden inputs. */
.form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}