/* Hallmark · genre: modern-minimal · macrostructure: Long Document · theme: Cobalt · enrichment: Tier B SVG brand mark · nav: N5 (max ~560px, blur+saturate, top-centred) · footer: Ft5 (38ch, under-sentence, hairline) · contrast: pass (40–41) · mobile: pass (34, 49, 50–57) */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5 */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=Space+Grotesk:wght@500;600;700&display=swap');
@import url('./tokens.css');

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; scroll-behavior: smooth; }
body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.68; }
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { min-width: 0; overflow-wrap: anywhere; }
.skip-link { position: fixed; z-index: 30; inset: calc(var(--space-xl) * -2) auto auto var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-white); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; text-decoration: none; transition: inset var(--dur-short) var(--ease-out); }
.skip-link:focus { inset-block-start: var(--space-md); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.nav-pill { position: fixed; z-index: 20; top: var(--space-sm); left: 50%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-xs); width: calc(100% - var(--space-lg)); padding: var(--space-xs); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-round); background: color-mix(in oklch, var(--color-paper) 86%, transparent); box-shadow: 0 var(--space-sm) var(--space-lg) calc(var(--space-md) * -1) var(--color-shadow); backdrop-filter: blur(14px) saturate(120%); transform: translateX(-50%); }
.brand { display: inline-flex; align-items: center; min-width: 0; gap: var(--space-xs); color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; text-decoration: none; }
.brand__logo { width: 2.4rem; height: 2.7rem; object-fit: contain; }
.brand__text { display: grid; min-width: 0; }
.brand__full, .brand__short { white-space: nowrap; }
.brand__short { display: none; }
.brand__text small { color: var(--color-muted); font-family: var(--font-body); font-size: .64rem; font-weight: 600; letter-spacing: 0; }
.nav-links { display: none; gap: var(--space-md); margin: 0; padding: 0; font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; list-style: none; }
.nav-links a { position: relative; text-decoration: none; white-space: nowrap; }
.nav-links a::after { position: absolute; right: 0; bottom: -.3rem; left: 0; height: var(--rule-thin); background: var(--color-blue); content: ''; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-short) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; } }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: var(--space-sm) var(--space-md); border: var(--rule-thin) solid var(--color-blue); border-radius: var(--radius-round); background: var(--color-blue); color: var(--color-accent-ink); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; transition: background var(--dur-short) var(--ease-out); }
.button--secondary { background: transparent; color: var(--color-blue-deep); }
@media (hover: hover) and (pointer: fine) { .button:hover, .button.is-hover { background: var(--color-blue-deep); } }
.button:active, .button.is-active { background: var(--color-ink); }
.button.is-disabled, .button[aria-disabled='true'] { cursor: not-allowed; opacity: .55; pointer-events: none; }
.button[data-state='loading'] { cursor: progress; }
.button[data-state='error'] { background: var(--color-red); border-color: var(--color-red); }
.button[data-state='success'] { background: var(--color-blue-deep); }
.button__desktop { display: none; }
.nav-menu { position: relative; }
.nav-menu summary { display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; border-radius: 50%; color: var(--color-ink); cursor: pointer; font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; list-style: none; white-space: nowrap; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:active { background: var(--color-paper-alt); }
.menu-icon { display: grid; gap: .22rem; width: 1.2rem; }
.menu-icon span { display: block; height: 2px; border-radius: var(--radius-round); background: currentColor; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.nav-menu[open] .menu-icon span:first-child { transform: translateY(.31rem) rotate(45deg); }
.nav-menu[open] .menu-icon span:nth-child(2) { opacity: 0; }
.nav-menu[open] .menu-icon span:last-child { transform: translateY(-.31rem) rotate(-45deg); }
.nav-menu__panel { position: absolute; top: calc(100% + var(--space-xs)); right: 0; display: grid; min-width: 12rem; padding: var(--space-xs); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); box-shadow: 0 var(--space-md) var(--space-xl) calc(var(--space-md) * -1) var(--color-shadow); }
.nav-menu__panel a { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; padding: var(--space-sm); border-radius: var(--radius-sm); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav-menu__panel a::after { color: var(--color-blue); content: '\2192'; }
@media (hover: hover) and (pointer: fine) { .nav-menu__panel a:hover { background: var(--color-paper-alt); } }
.page { padding-inline: clamp(var(--space-md), 5vw, var(--space-xl)); }
.hero { display: grid; gap: var(--space-xl); max-width: 78rem; margin: 0 auto; padding-block: 9rem var(--space-2xl); }
.hero__copy { max-width: 44rem; }
.hero__place { margin-bottom: var(--space-md); color: var(--color-muted); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; }
.hero h1 { max-width: 10ch; margin-bottom: var(--space-lg); font-family: var(--font-display); font-size: var(--text-display); font-style: normal; font-weight: 700; letter-spacing: -.065em; line-height: .95; }
.hero h1 span { color: var(--color-blue); }
.hero__lede { max-width: 62ch; margin-bottom: var(--space-lg); font-size: var(--text-md); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero__mark { position: relative; display: grid; place-items: center; min-height: 17rem; border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper-alt); }
.hero__mark::before { position: absolute; inset: var(--space-md); border: var(--rule-thin) solid var(--color-white); border-radius: var(--radius-md); content: ''; }
.hero__mark img { position: relative; width: min(14rem, 50vw); height: auto; max-height: 20rem; object-fit: contain; }
.hero__mark p { position: absolute; right: var(--space-md); bottom: var(--space-md); left: var(--space-md); margin: 0; color: var(--color-blue-deep); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.notice { max-width: 78rem; margin: 0 auto; padding-block: var(--space-lg); border-block: var(--rule-thin) solid var(--color-rule); color: var(--color-ink-soft); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; }
.notice span { color: var(--color-red); }
.document { max-width: 65ch; margin: 0 auto; padding-block: var(--space-2xl); }
.document .lede { font-size: var(--text-lg); line-height: 1.45; }
.document h2 { margin: var(--space-xl) 0 var(--space-md); font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }
.document p { margin-bottom: var(--space-md); }
.document strong { font-weight: 600; }
.reasons { max-width: 78rem; margin: 0 auto; padding-block: 0 var(--space-2xl); }
.reasons__intro { max-width: 48rem; margin-bottom: var(--space-xl); font-size: var(--text-md); }
.reasons__list { margin: 0; padding: 0; list-style: none; counter-reset: reason; }
.reasons__list li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-lg); border-top: var(--rule-thin) solid var(--color-rule); counter-increment: reason; }
.reasons__list li::before { color: var(--color-blue); content: '0' counter(reason); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; }
.reasons__list h3 { margin-bottom: var(--space-xs); font-family: var(--font-display); font-size: var(--text-lg); font-style: normal; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }
.reasons__list p { max-width: 62ch; margin: 0; }
.principles { background: var(--color-ink); color: var(--color-paper); }
.principles__inner { max-width: 78rem; margin: 0 auto; padding-block: var(--space-2xl); }
.principles h2 { max-width: 14ch; margin-bottom: var(--space-xl); color: var(--color-white); font-family: var(--font-display); font-size: var(--text-2xl); font-style: normal; font-weight: 700; letter-spacing: -.055em; line-height: .98; }
.principles p { max-width: 62ch; color: var(--color-paper-alt); font-size: var(--text-md); }
.values { display: grid; gap: var(--space-sm); margin-top: var(--space-xl); font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 700; letter-spacing: -.06em; line-height: .9; }
.values span { display: block; padding-bottom: var(--space-sm); border-bottom: var(--rule-thin) solid var(--color-ink-soft); }
.values span:nth-child(2) { color: var(--color-paper-alt); }
.values span:nth-child(3) { color: var(--color-blue); }
.learning { display: grid; gap: var(--space-xl); max-width: 78rem; margin: 0 auto; padding-block: var(--space-2xl); }
.learning__copy { align-self: center; max-width: 38rem; }
.learning h2 { max-width: 13ch; margin-bottom: var(--space-md); font-family: var(--font-display); font-size: var(--text-2xl); font-style: normal; font-weight: 700; letter-spacing: -.055em; line-height: .98; }
.learning__media { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-paper-alt); }
.learning__media img { width: 100%; height: auto; object-fit: contain; }
.learning__media figcaption { padding: var(--space-sm) var(--space-md); color: var(--color-muted); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; }
.portal { display: grid; gap: var(--space-lg); max-width: 78rem; margin: 0 auto; padding: var(--space-xl); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper-alt); }
.portal h2 { margin-bottom: var(--space-sm); font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }
.portal p:not(.hero__place) { max-width: 55ch; margin-bottom: 0; }
.portal .button { width: max-content; align-self: center; }
.partnership { max-width: 65ch; margin: 0 auto; padding-block: var(--space-2xl); }
.partnership blockquote { margin: var(--space-xl) 0; padding-left: var(--space-lg); border-left: .25rem solid var(--color-red); color: var(--color-ink-soft); font-size: var(--text-lg); line-height: 1.35; }
.visit { max-width: 78rem; margin: 0 auto var(--space-2xl); padding: var(--space-xl); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper-alt); }
.visit h2 { max-width: 14ch; margin-bottom: var(--space-md); font-family: var(--font-display); font-size: var(--text-2xl); font-style: normal; font-weight: 700; letter-spacing: -.055em; line-height: .98; }
.visit p { max-width: 55ch; margin-bottom: var(--space-lg); }
.visit__details { display: grid; gap: var(--space-md); padding-top: var(--space-lg); border-top: var(--rule-thin) solid var(--color-rule); }
.visit__details p { margin: 0; }
.visit__details strong { display: block; margin-bottom: var(--space-2xs); font-family: var(--font-display); font-size: var(--text-sm); }
.visit__details a:not(.button) { color: var(--color-blue-deep); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; text-decoration-thickness: var(--rule-thin); text-underline-offset: .22em; }
.visit__details .button { width: max-content; }
.foot-statement { max-width: 78rem; margin: 0 auto; padding-block: var(--space-2xl) var(--space-xl); }
.foot-statement__line { max-width: 38ch; margin-bottom: var(--space-xl); font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.8rem); font-style: normal; font-weight: 700; letter-spacing: -.055em; line-height: .98; }
.foot-statement__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); justify-content: space-between; padding-top: var(--space-md); border-top: var(--rule-thin) solid var(--color-rule); color: var(--color-muted); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; }
.foot-statement__meta a { color: var(--color-ink); text-decoration: none; white-space: nowrap; }
html[data-enhanced='true'] [data-reveal] { opacity: 0; transform: translateY(var(--space-lg)); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
html[data-enhanced='true'] [data-reveal='left'] { transform: translateX(calc(var(--space-xl) * -1)); }
html[data-enhanced='true'] [data-reveal='right'] { transform: translateX(var(--space-xl)); }
html[data-enhanced='true'] [data-reveal].is-visible { opacity: 1; transform: translate(0); }
@media (max-width: 39.99rem) {
  .brand__full, .brand__text small { display: none; }
  .brand__short { display: inline; }
  .nav-pill { gap: var(--space-2xs); width: calc(100% - var(--space-xl)); padding: var(--space-2xs) var(--space-xs); }
  .button { padding-inline: var(--space-sm); }
  .hero { padding-block-start: 7.5rem; }
  .hero h1 { max-width: 12ch; font-size: clamp(2.1rem, 10vw, 2.75rem); line-height: 1; }
  .hero__lede { font-size: var(--text-base); }
  .hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__actions .button { min-width: 0; padding-inline: var(--space-xs); }
  .hero__mark { min-height: 15rem; }
  .visit { padding: var(--space-lg); }
  .visit h2 { font-size: clamp(2rem, 10vw, var(--text-2xl)); }
  .visit__details .button, .portal .button { width: 100%; }
  .document .lede, .principles p, .partnership blockquote { font-size: var(--text-md); }
  .foot-statement__line { font-size: clamp(2rem, 10vw, 2.8rem); }
}
@media (max-width: 22rem) {
  .nav-pill { grid-template-columns: minmax(0, 1fr) auto; }
  .nav-pill > .button { display: none; }
}
@media (min-width: 40rem) {
  .nav-pill { top: var(--space-md); grid-template-columns: auto auto auto; width: max-content; gap: var(--space-md); padding: var(--space-xs) var(--space-sm); }
  .button__mobile { display: none; }
  .button__desktop { display: inline; }
  .brand__full { display: inline; }
  .brand__short { display: none; }
  .brand__text small { display: block; }
  .nav-menu { display: none; }
  .nav-links { display: flex; }
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(17rem, .85fr); align-items: end; }
  .hero__mark { min-height: 26rem; }
  .learning { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
  .portal { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: var(--space-xl); align-items: start; }
  .visit__details { padding-top: 0; padding-left: var(--space-xl); border-top: 0; border-left: var(--rule-thin) solid var(--color-rule); }
}
@media (min-width: 60rem) { .hero { padding-block-start: 11rem; } .reasons__list li { grid-template-columns: 5rem minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 150ms !important; animation-duration: 150ms !important; animation-iteration-count: 1 !important; } html[data-enhanced='true'] [data-reveal] { opacity: 1; transform: none; } }