/* ============================================================================
   hopeopens.com
   The brand tokens, the type scale, the spacing rhythm, the focus behaviour and
   the motion are carried from the product's design system verbatim, so somebody
   clicking from here into the demonstration does not meet a seam. This file is
   hand written and depends on nothing: a marketing site that needs a build step
   to change a headline is a marketing site that does not get changed.
   ========================================================================== */

/* ---------- Fonts, self hosted (SIL OFL, see fonts/LICENSES.md) ----------- */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
  font-style: normal;
}

/* ---------- Brand tokens, exact and unchanged ---------------------------- */
:root {
  --hope-navy: #073b63;
  --hope-gold: #f7c64a;
  --growth-green: #6f9e32;
  --open-white: #ffffff;
  --soft-gray: #f5f7f8;
  --charcoal: #2d2d2d;

  --navy-900: #052b49;
  --navy-800: #084b77;
  --navy-700: #0b5f91;
  --navy-300: #86b1ca;
  --navy-100: #d6e1ea;
  --navy-050: #eef3f7;
  --gold-900: #6b4b00;
  --gold-800: #8a6100;
  --gold-100: #fdf3d3;
  --green-800: #3f5c1b;
  --ink-500: #4a5560;
  --ink-600: #3a4750;
  --warm-050: #fbf7ef;

  --font-heading: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;

  --radius-control: 4px;
  --radius-card: 8px;
}

/* ---------- Base ---------------------------------------------------------- */
/* The product inherits this from Tailwind's preflight. This file has no framework, so it says it: without
   it .container is 100% wide plus 32px of padding on each side, which is 1088px in a 1024px viewport and
   a sideways scroll on every page. */
*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--open-white);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.647;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--hope-navy);
  letter-spacing: -0.01em;
  font-weight: 700;
  text-wrap: balance;
  margin: 0 0 16px;
}
h1 { font-size: 2rem; line-height: 1.25; }
h2 { font-size: 1.5rem; line-height: 1.33; }
h3 { font-size: 1.25rem; line-height: 1.4; font-weight: 600; }
@media (min-width: 768px) {
  h1 { font-size: 2.75rem; line-height: 1.18; }
  h2 { font-size: 1.75rem; line-height: 1.29; }
}

p { margin: 0 0 16px; max-width: 68ch; }
a { color: var(--navy-700); }
p a, li a { text-underline-offset: 4px; }
img { max-width: 100%; height: auto; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 8px; }

:focus-visible {
  outline: 3px solid var(--hope-gold);
  outline-offset: 2px;
  border-radius: 2px;
}
.band-navy :focus-visible { outline-color: var(--hope-gold); }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--hope-navy); color: #fff; padding: 0.6rem 1rem;
  border-radius: var(--radius-control); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.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;
}

/* A standalone link is a target, not a word in a sentence. WCAG 2.5.8. */
.tap { display: inline-flex; align-items: center; min-height: 44px; }

.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 640px) { .container { padding-inline: 24px; } }
@media (min-width: 1024px) { .container { padding-inline: 32px; } }

.eyebrow {
  color: var(--gold-900);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.lede { font-size: 1.1875rem; line-height: 1.58; color: var(--ink-600); max-width: 36rem; }
.measure { max-width: 68ch; }
.muted { color: var(--ink-500); }

/* ---------- Bands --------------------------------------------------------- */
.band { padding-block: 56px; background: var(--open-white); }
@media (min-width: 768px) { .band { padding-block: 96px; } }
.band-gray { background: var(--soft-gray); }
.band-cream { background: var(--warm-050); }
.band-navy { background: var(--hope-navy); color: #fff; }
.band-navy h1, .band-navy h2, .band-navy h3 { color: #fff; }
.band-navy p { color: rgba(235, 244, 250, 0.92); }
.band-navy a { color: var(--hope-gold); }
.band-navy .lede { color: rgba(235, 244, 250, 0.92); }
.band-tight { padding-block: 40px; }

.split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 5fr 7fr; gap: 56px; }
}
.split > * { min-width: 0; }

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: var(--radius-control);
  font-family: var(--font-heading); font-size: 1.0625rem; line-height: 1.4; font-weight: 700;
  border: 1.5px solid transparent; text-decoration: none; cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn-primary { background: var(--hope-navy); color: #fff; }
.btn-primary:hover { background: var(--navy-900); }
.btn-outline { background: #fff; color: var(--hope-navy); border-color: var(--hope-navy); }
.btn-outline:hover { background: var(--navy-050); }
.btn-outline-light { background: transparent; color: #fff; border-color: #fff; }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); }
.btn-lg { min-height: 52px; padding-inline: 24px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 479px) { .btn-row .btn { width: 100%; } }

/* ---------- Hairline lists ------------------------------------------------ */
.rule-list { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--navy-100); }
.rule-list > li { border-bottom: 1px solid var(--navy-100); margin: 0; padding: 20px 0; }
.rule-title {
  display: block; font-family: var(--font-heading); font-weight: 700;
  color: var(--hope-navy); font-size: 1.0625rem; margin-bottom: 4px;
}
.rule-list p { margin: 0; color: var(--ink-600); }

/* ---------- Header and footer -------------------------------------------- */
.site-header { border-bottom: 1px solid var(--navy-100); background: #fff; }
.site-header .container { display: flex; align-items: center; gap: 24px; min-height: 72px; padding-block: 12px; flex-wrap: wrap; }
.site-logo { display: inline-flex; align-items: center; }
.site-logo img { height: 40px; width: auto; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; }
.nav-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.9375rem;
  color: var(--hope-navy); text-decoration: none; border-radius: var(--radius-control);
}
.nav-link:hover { background: var(--navy-050); }
.nav-link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--hope-gold); }

.site-footer { background: var(--navy-900); color: rgba(235, 244, 250, 0.92); padding-block: 48px; }
.site-footer h2 { color: #fff; font-size: 1.125rem; }
.site-footer a { color: var(--hope-gold); text-underline-offset: 4px; }
.site-footer p { max-width: 68ch; }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr; gap: 56px; } }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-boundary { border-top: 1px solid rgba(255, 255, 255, 0.18); margin-top: 32px; padding-top: 24px; font-size: 0.9375rem; }

/* ---------- The doorway --------------------------------------------------- */
.doorway { color: var(--hope-navy); display: block; }
.doorway-frame {
  display: flex; align-items: center; justify-content: center;
  background: var(--warm-050); border: 1px solid var(--navy-100);
  border-radius: var(--radius-card); aspect-ratio: 4 / 3; max-height: 420px;
}
.band-navy .doorway { color: #fff; }
.band-navy .doorway-frame { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.22); }

/* ---------- Form ---------------------------------------------------------- */
.field { display: block; margin-bottom: 24px; max-width: 34rem; }
.field > span { display: block; margin-bottom: 8px; font-weight: 600; color: var(--hope-navy); }
.input, .textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--charcoal);
  background: #fff; border: 1.5px solid var(--navy-300); border-radius: var(--radius-control);
}
.textarea { min-height: 8rem; resize: vertical; }
.input:focus-visible, .textarea:focus-visible { border-color: var(--hope-navy); }
.hint { display: block; margin-top: 6px; font-size: 0.9375rem; color: var(--ink-500); }

.notice {
  border-left: 3px solid var(--hope-navy); background: var(--navy-050);
  padding: 16px 20px; margin: 0 0 24px; max-width: 44rem;
}
.notice p:last-child { margin-bottom: 0; }

/* ---------- Reveal on first sight ---------------------------------------- */
/* Applied by scripts/reveal.js only once it has run, so a page without JavaScript
   renders everything visible rather than blank. The class goes on <html>, which
   means the first paint already knows which way it is going. */
.js-reveal .reveal { opacity: 0; transform: translateY(12px); }
.js-reveal .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity 520ms ease, transform 520ms ease;
}

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