/* ==========================================================================
   Base — reset, root element defaults, typography, utilities
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* Opt-in rather than sitting on html directly: the browser's own jump to a
   #hash on page load obeys scroll-behavior too, and landing on, say,
   index.html#visa-categories from another page animated the scroll from
   the very top, sweeping past sections mid scroll-reveal on the way down.
   main.js adds this class once that initial jump has had a chance to
   settle, so a fresh page load lands instantly while an in-page anchor
   click afterward still scrolls smoothly. */
html.smooth-scroll {
  scroll-behavior: smooth;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--color-text-body);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

/* Every heading element takes the display face, so heading typography is
   consistent without each section restating it. The few places that use a
   heading tag for a label rather than a heading (.eyebrow, the footer
   column labels) set --font-body back explicitly. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--color-text-heading);
}

p {
  max-width: 75ch;
}

/* ---- Focus states: visible + accessible ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-gold-400);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- Utilities ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-md);
  z-index: 1000;
  background: var(--color-navy-800);
  color: var(--color-white);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-sm);
  transition: top var(--duration-base) var(--ease-standard);
}

.skip-link:focus {
  top: var(--space-md);
}

/* Any in-page anchor target lands below the sticky header instead of
   partially behind it. */
[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-lg));
}

.container {
  width: 100%;
  max-width: calc(var(--container-max) + (var(--container-pad) * 2));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* A page whose content is shorter than the screen would otherwise show the
   dark footer part-way up the viewport. This keeps a section at least one
   screen tall — the header is in flow (sticky, not fixed), so its height
   comes off the top. Content stays top-aligned; only the background grows. */
.fills-viewport {
  min-height: calc(100vh - var(--header-height));
}

@supports (height: 100svh) {
  .fills-viewport {
    min-height: calc(100svh - var(--header-height));
  }
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold-text);
  margin-bottom: 0;
}

/* Sections with a navy ground need the light gold back: --color-gold-text
   is tuned for light backgrounds (5.26:1 on white) and drops to 2.7:1 on
   navy, while the display gold runs the other way. Listed by section
   rather than a modifier class so the markup stays identical everywhere. */
.stand-banner .eyebrow,
.pricing .eyebrow,
.closing-cta .eyebrow,
.audience .eyebrow {
  color: var(--color-gold-300);
}

.eyebrow--center {
  text-align: center;
  /* p is capped at 75ch above, so the box is narrower than the section and
     would otherwise sit hard left — centring the text inside it is not
     enough, the box has to be centred too. */
  margin-inline: auto;
}

/* Eyebrow flanked by short rules, as on the resources page. The rules are
   pseudo-elements so the variant stays a drop-in on the same markup. */
.eyebrow--ruled {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.section-heading {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-text-heading);
  margin-bottom: var(--space-md);
}

.section-heading--sm {
  font-size: var(--fs-display-md);
}

.section-heading--light {
  color: var(--color-white-off);
}

.section-heading--center {
  text-align: center;
  margin-inline: auto;
}

.section-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--color-text-body);
  max-width: 62ch;
}

.section-lead--on-dark {
  color: var(--color-text-on-dark-muted);
}

/* A tinted heading navy rather than the grey body colour — used where the
   lead introduces a block set in the same navy as the heading above it. */
.section-lead--navy {
  color: rgba(19, 41, 75, 0.8);
}

@media (max-width: 639px) {
  .section-lead {
    font-size: var(--fs-body);
  }
}

/* ---------------------------------------------------------------------
   SCROLL REVEAL

   Content eases up into place as it enters the viewport instead of
   snapping in fully formed. Which elements take part is decided in
   main.js (initScrollReveal), which tags them with data-reveal — the
   markup stays clean and the list lives in one place.

   The hidden state is scoped to .js-reveal on <html>, set by that same
   function. So if the script never runs, or the visitor asks for reduced
   motion, none of this applies and the page renders as plain static
   content rather than staying invisible.
   --------------------------------------------------------------------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-rise)) scale(var(--reveal-scale));
  transition:
    opacity var(--duration-reveal) var(--ease-reveal) var(--reveal-delay, 0ms),
    transform var(--duration-reveal) var(--ease-reveal) var(--reveal-delay, 0ms);
}

/* Sticky boxes fade without the rise: a translate on a sticky element is
   not clamped by its containing block, so it can push the box up out of
   its own section (see the note on .clarity__media in sections.css). */
.js-reveal [data-reveal='fade'] {
  transform: none;
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

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

/* Keeps a short term from breaking across lines. Used on the visa codes,
   where the hyphen is a legal break opportunity the browser will take —
   leaving "EB-" at the end of one line and "1A" at the start of the next. */
.nowrap {
  white-space: nowrap;
}