/* Ohio Blue Print · front end
   Solid color only: no gradients, no decorative shadows, no glow.
   Mobile first. Every selector is scoped to .obp-* classes. */

:root {
	--obp-ink: #08090b;
	--obp-ink-2: #111317;
	--obp-ink-3: #1a1d22;
	--obp-line: #2a2e36;
	--obp-line-2: #3b404a;
	--obp-paper: #f3f4f6;
	--obp-paper-2: #b3b8c2;
	--obp-paper-3: #8a909b;
	--obp-blue: #2457e6;
	--obp-blue-hi: #3a6bff;
	--obp-blue-ink: #7fa4ff;
	--obp-crown: #e8b93a;
	--obp-error: #ff8a80;

	--obp-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
	--obp-body: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
	--obp-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

	--obp-radius: 6px;
	--obp-container: 1280px;
	--obp-gutter: 16px;
	--obp-header-h: 64px;
	--obp-ease: cubic-bezier(.2, .7, .2, 1);

	color-scheme: dark;
}

@media (min-width: 640px) { :root { --obp-gutter: 24px; } }
@media (min-width: 960px) { :root { --obp-gutter: 40px; --obp-header-h: 76px; } }

/* ---------- Base ---------- */

.obp-page {
	margin: 0;
	background: var(--obp-ink);
	color: var(--obp-paper);
	font: 400 1rem/1.6 var(--obp-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
.obp-page *, .obp-page *::before, .obp-page *::after { box-sizing: border-box; }
/* Zero-specificity resets so component classes (e.g. .obp-wrap margins) always win. */
:where(.obp-page) img { max-width: 100%; height: auto; display: block; }
:where(.obp-page) a { color: inherit; }
:where(.obp-page) :is(h1, h2, h3, p, dl, dd, figure) { margin: 0; }
:where(.obp-page) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
.obp-page :focus-visible { outline: 3px solid var(--obp-crown); outline-offset: 3px; }
.obp-page [hidden] { display: none !important; }
.obp-page ::selection { background: var(--obp-blue); color: #fff; }
html:has(.obp-page) { scroll-padding-top: calc(var(--obp-header-h) + 16px); }

.obp-wrap {
	width: min(100% - (var(--obp-gutter) * 2), var(--obp-container));
	margin-inline: auto;
}

.obp-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.obp-skip {
	position: absolute; left: 12px; top: -100px; z-index: 100;
	background: var(--obp-crown); color: var(--obp-ink); padding: 10px 16px;
	font-weight: 700; text-decoration: none; border-radius: var(--obp-radius);
}
.obp-skip:focus { top: 12px; }

.obp-label {
	font: 500 .75rem/1.3 var(--obp-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--obp-paper-3);
}

.obp-icon { width: 1.15em; height: 1.15em; flex: none; }

.obp-optional { font-weight: 400; color: var(--obp-paper-3); }

/* ---------- Buttons and links ---------- */

.obp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .6em;
	min-height: 52px; padding: 0 24px;
	border: 2px solid transparent; border-radius: var(--obp-radius);
	font: 700 1rem/1 var(--obp-body); letter-spacing: .01em;
	text-decoration: none; cursor: pointer;
	transition: background-color .2s var(--obp-ease), border-color .2s var(--obp-ease), color .2s var(--obp-ease);
	-webkit-tap-highlight-color: transparent;
}
.obp-btn .obp-icon--arrow { transition: transform .25s var(--obp-ease); }
.obp-btn:hover .obp-icon--arrow { transform: translateX(3px); }
.obp-btn:active { transform: translateY(1px); }
.obp-btn--primary { background: var(--obp-blue); color: #fff; }
.obp-btn--primary:hover { background: var(--obp-blue-hi); }
.obp-btn--ghost { background: transparent; color: var(--obp-paper); border-color: var(--obp-line-2); }
.obp-btn--ghost:hover { border-color: var(--obp-paper); }
.obp-btn--inverse { background: var(--obp-ink); color: #fff; }
.obp-btn--inverse:hover { background: var(--obp-ink-3); }
.obp-btn--large { min-height: 60px; padding: 0 32px; font-size: 1.0625rem; }
.obp-btn[disabled] { opacity: .6; cursor: progress; }

.obp-link {
	display: inline-flex; align-items: center; gap: .5em;
	color: var(--obp-blue-ink); font-weight: 700; text-decoration: none;
	border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.obp-link:hover { color: var(--obp-paper); }
.obp-link-inline { color: var(--obp-blue-ink); text-underline-offset: 3px; }
.obp-link-inline:hover { color: var(--obp-paper); }

/* ---------- Header ---------- */

.obp-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--obp-ink);
	border-bottom: 1px solid var(--obp-line);
	transition: transform .35s var(--obp-ease);
	will-change: transform;
}
/* Slides away while scrolling down, returns on any scroll up (obp.js). */
.obp-header.is-hidden { transform: translateY(calc(-100% - 2px)); }

/* Home page: the header floats over the hero photo with no background of its own,
   then picks up the solid ink bar once the hero has scrolled away (obp.js adds .is-solid). */
.obp-header--overlay {
	position: fixed; left: 0; right: 0; top: 0;
	background: transparent;
	border-bottom-color: transparent;
	transition: transform .35s var(--obp-ease), background-color .3s var(--obp-ease), border-color .3s var(--obp-ease);
}
.obp-header--overlay.is-solid,
.obp-header--overlay:has([aria-expanded="true"]) { background: var(--obp-ink); border-bottom-color: var(--obp-line); }
.obp-header--overlay:not(.is-solid) .obp-call { border-color: #fff; color: #fff; }
.obp-header--overlay:not(.is-solid) .obp-menu-toggle { border-color: rgba(255, 255, 255, .7); color: #fff; }
.obp-header--overlay:not(.is-solid) .obp-nav__link { color: #fff; }
@media (max-width: 782px) { .admin-bar .obp-header--overlay { top: 46px; } }
.admin-bar .obp-header.is-hidden { transform: translateY(calc(-100% - 50px)); }
.admin-bar .obp-header { top: 46px; }
@media (min-width: 783px) { .admin-bar .obp-header { top: 32px; } }
@media (max-width: 600px) { .admin-bar .obp-header { top: 0; } }

.obp-header__inner {
	width: min(100% - (var(--obp-gutter) * 2), 1440px);
	margin-inline: auto;
	height: var(--obp-header-h);
	display: flex; align-items: center; gap: 16px;
}
.obp-header__brand { display: block; flex: none; line-height: 0; }
.obp-header__logo { width: 104px; height: auto; }
@media (min-width: 960px) { .obp-header__logo { width: 128px; } }
.obp-header__wordmark { font: 800 1.5rem/1 var(--obp-display); text-transform: uppercase; }

.obp-header__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.obp-call {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 0 14px;
	border: 2px solid var(--obp-paper); border-radius: var(--obp-radius);
	font-weight: 700; text-decoration: none; white-space: nowrap;
	transition: background-color .2s var(--obp-ease), color .2s var(--obp-ease);
}
.obp-call:hover { background: var(--obp-paper); color: var(--obp-ink); }
.obp-call__full { display: none; font-variant-numeric: tabular-nums; }
@media (min-width: 480px) {
	.obp-call__short { display: none; }
	.obp-call__full { display: inline; }
}

.obp-menu-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0;
	background: transparent; color: var(--obp-paper);
	border: 2px solid var(--obp-line-2); border-radius: var(--obp-radius); cursor: pointer;
}
.obp-menu-toggle .obp-icon { width: 22px; height: 22px; }
.obp-menu-toggle__close { display: none; }
.obp-menu-toggle[aria-expanded="true"] .obp-menu-toggle__open { display: none; }
.obp-menu-toggle[aria-expanded="true"] .obp-menu-toggle__close { display: inline-flex; }

.obp-nav {
	position: fixed; inset: var(--obp-header-h) 0 auto 0; z-index: 49;
	background: var(--obp-ink); border-bottom: 1px solid var(--obp-line);
	padding: 8px var(--obp-gutter) 24px;
	display: none;
}
.admin-bar .obp-nav { top: calc(var(--obp-header-h) + 46px); }
.obp-nav.is-open { display: block; }
.obp-nav__link {
	display: block; padding: 14px 0;
	border-bottom: 1px solid var(--obp-line);
	font: 800 1.75rem/1.1 var(--obp-display); text-transform: uppercase; letter-spacing: .01em;
	text-decoration: none;
}
.obp-nav__link--apply { color: var(--obp-blue-ink); }
.obp-nav__link[aria-current="page"] { color: var(--obp-blue-ink); }

@media (min-width: 960px) {
	.obp-menu-toggle { display: none; }
	.obp-nav {
		position: static; display: block; padding: 0; border: 0; background: none;
		margin-left: 24px;
	}
	.obp-nav__list { display: flex; gap: 4px; }
	.obp-nav__link {
		padding: 10px 12px; border: 0;
		font: 600 .9375rem/1 var(--obp-body); text-transform: none; letter-spacing: 0;
		color: var(--obp-paper-2);
	}
	.obp-nav__link:hover, .obp-nav__link[aria-current="page"] { color: var(--obp-paper); }
	.obp-nav__link--apply { color: var(--obp-blue-ink); }
}

/* ---------- Hero ----------
   Photography first: the slideshow fills the screen behind the transparent header.
   Copy sits straight on the photo. Contrast comes from one even, solid dim over the
   whole image (no gradient, no panel) plus heavy type. */

.obp-hero {
	position: relative;
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: min(100svh, 1000px);
	background: var(--obp-ink-2);
	color: #fff;
}

.obp-hero__media { position: absolute; inset: 0; }
.obp-hero__frame { position: absolute; inset: 0; overflow: hidden; }
.obp-hero__frame::after { content: ""; position: absolute; inset: 0; z-index: 3; background: rgba(8, 9, 11, .42); }

.obp-slide { position: absolute; inset: 0; margin: 0; opacity: 0; }
/* The incoming photo sits underneath at full opacity; the outgoing one fades off the top. */
.obp-slide.is-active { opacity: 1; z-index: 1; }
.obp-slide.is-leaving { opacity: 0; z-index: 2; transition: opacity 1.6s var(--obp-ease); }
.obp-slide img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: var(--pos, 50% 50%);
	transform: scale(1);
	transform-origin: var(--pos, 50% 50%);
}
.obp-slide.is-active img, .obp-slide.is-leaving img { animation: obp-drift var(--obp-slide-ms, 7000ms) linear forwards; }
.obp-slide.is-leaving img { animation-play-state: paused; }
.obp-hero.is-paused .obp-slide img { animation-play-state: paused; }
@keyframes obp-drift { to { transform: scale(1.06); } }

.obp-hero__copy {
	position: relative; z-index: 4;
	display: flex; flex-direction: column; gap: 14px;
	padding: calc(var(--obp-header-h) + 32px) var(--obp-gutter) calc(28px + env(safe-area-inset-bottom));
}
.obp-hero__eyebrow {
	display: flex; align-items: center; gap: 10px;
	color: #fff; letter-spacing: .12em;
}
.obp-hero__eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--obp-blue-ink); flex: none; }
.obp-hero__title {
	font: 800 clamp(2.75rem, 13vw, 4.25rem)/.88 var(--obp-display);
	text-transform: uppercase;
	letter-spacing: -.005em;
	max-width: 10ch;
	text-wrap: balance;
}
.obp-hero__text { font-size: 1rem; line-height: 1.5; max-width: 30rem; color: #fff; }
.obp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 6px; }
.obp-hero__link {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
	color: #fff; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.obp-hero__link .obp-icon { transition: transform .25s var(--obp-ease); }
.obp-hero__link:hover .obp-icon { transform: translateX(3px); }

@media (max-width: 479px) {
	.obp-hero__actions .obp-btn--primary { width: 100%; }
	.obp-hero__actions { gap: 4px 24px; }
}

@media (min-width: 768px) {
	.obp-hero__frame::after { background: rgba(8, 9, 11, .36); }
	.obp-hero__copy {
		width: min(100% - (var(--obp-gutter) * 2), var(--obp-container));
		margin-inline: auto;
		padding: calc(var(--obp-header-h) + 48px) 0 clamp(48px, 8vh, 96px);
		gap: 20px;
	}
	.obp-hero__title { font-size: clamp(4rem, 7.2vw, 7rem); max-width: 11ch; }
	.obp-hero__text { font-size: 1.1875rem; }
}

/* Desktop: copy and buttons centred, anchored low so the puppy's face (upper middle
   of the frame) stays clear of the headline. */
@media (min-width: 1024px) {
	.obp-hero__copy { align-items: center; text-align: center; padding-bottom: clamp(40px, 6vh, 72px); gap: 16px; }
	.obp-hero__title { font-size: clamp(3.25rem, 5vw, 5.5rem); max-width: 14ch; }
	.obp-hero__text { max-width: 34rem; }
	.obp-hero__actions { justify-content: center; }
}

/* Landscape phones: a short screen, so a smaller headline and no supporting line. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 959px) {
	.obp-hero__copy { padding-top: calc(var(--obp-header-h) + 16px); padding-bottom: 20px; gap: 10px; }
	.obp-hero__title { font-size: clamp(2.25rem, 7vw, 3rem); max-width: none; }
	.obp-hero__text { display: none; }
	.obp-hero__actions .obp-btn--primary { width: auto; }
}

/* ---------- Trust bar ----------
   A slow ticker of the approved claims. The phone number and deposit terms live in the
   contact block and footer, where the links stay still and easy to tap. */

.obp-trust { background: var(--obp-ink); border-bottom: 1px solid var(--obp-line); }

.obp-marquee {
	overflow: hidden;
	padding-block: 18px;
}
.obp-marquee__track { display: flex; width: max-content; animation: obp-marquee 42s linear infinite; }
.obp-marquee:hover .obp-marquee__track,
.obp-marquee:focus-within .obp-marquee__track { animation-play-state: paused; }
.obp-marquee__group { display: flex; flex-shrink: 0; }
.obp-marquee__item {
	display: flex; align-items: center; gap: 28px; padding-right: 28px;
	font: 700 1.125rem/1 var(--obp-display);
	text-transform: uppercase; letter-spacing: .06em;
	white-space: nowrap;
}
.obp-marquee__item::after { content: ""; width: 7px; height: 7px; background: var(--obp-blue-ink); flex: none; }
@keyframes obp-marquee { to { transform: translateX(-50%); } }

@media (min-width: 768px) {
	.obp-marquee { padding-block: 22px; }
	.obp-marquee__item { font-size: 1.375rem; gap: 40px; padding-right: 40px; }
}

/* Reduced motion: no ticker. The same items wrap into a calm static list. */
@media (prefers-reduced-motion: reduce) {
	.obp-marquee__track { animation: none; width: auto; justify-content: center; }
	.obp-marquee__group { flex-wrap: wrap; justify-content: center; row-gap: 12px; padding-inline: var(--obp-gutter); }
	.obp-marquee__group--copy { display: none; }
}

/* ---------- Sections ---------- */

.obp-intro, .obp-process, .obp-cta, .obp-faq, .obp-contact {
	padding-block: clamp(56px, 9vw, 128px);
}

.obp-intro__grid { display: grid; gap: 24px; }
.obp-intro__title, .obp-process__title, .obp-cta__title, .obp-updates__title,
.obp-contact__title, .obp-faq__title, .obp-closed__title, .obp-status__title, .obp-doc__title, .obp-apply__title {
	font: 800 clamp(2.25rem, 6vw, 4.5rem)/.95 var(--obp-display);
	text-transform: uppercase;
	letter-spacing: -.005em;
	text-wrap: balance;
}
.obp-intro__body { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.obp-intro__body p { font-size: clamp(1.0625rem, 1vw + .85rem, 1.3125rem); color: var(--obp-paper-2); max-width: 38rem; }
@media (min-width: 960px) {
	.obp-intro__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; }
	.obp-intro__title { max-width: 14ch; }
}

/* Updates: the one solid blue band on the page. */
.obp-updates { background: var(--obp-blue); color: #fff; padding-block: clamp(48px, 7vw, 96px); }
.obp-updates__grid { display: grid; gap: 28px; }
.obp-updates__title { font-size: clamp(2rem, 5vw, 3.5rem); }
.obp-updates__text { margin-top: 14px; max-width: 34rem; font-size: 1.0625rem; color: #e4eaff; }
.obp-signup { display: grid; gap: 14px; align-content: start; }
.obp-signup__fields { display: grid; gap: 14px; }
.obp-signup .obp-btn { width: 100%; }
.obp-signup__status:empty { display: none; }
.obp-signup__status { font-weight: 700; padding: 12px 14px; background: var(--obp-ink); border-radius: var(--obp-radius); }
.obp-field--inverse .obp-field__label { color: #fff; }
.obp-field--inverse .obp-optional { color: #dce5ff; }
.obp-field--inverse .obp-input { background: #fff; color: var(--obp-ink); border-color: #fff; }
.obp-updates .obp-field__error { color: #fff; background: var(--obp-ink); padding: 8px 12px; border-radius: var(--obp-radius); }
@media (min-width: 640px) {
	.obp-signup__fields { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
	.obp-signup .obp-btn { width: auto; justify-self: start; }
}
@media (min-width: 1024px) {
	.obp-updates__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
}

/* Process: a real sequence, so it is numbered. */
.obp-process__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.obp-process__steps { display: grid; gap: 0; counter-reset: none; border-top: 1px solid var(--obp-line); }
.obp-process__step {
	display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; row-gap: 6px;
	padding: 24px 0; border-bottom: 1px solid var(--obp-line);
}
.obp-process__num {
	grid-row: span 2;
	font: 500 .875rem/1.6 var(--obp-mono); color: var(--obp-crown);
}
.obp-process__step-title { font: 700 1.25rem/1.25 var(--obp-body); }
.obp-process__step p { color: var(--obp-paper-2); }
@media (min-width: 768px) {
	.obp-process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 0; }
	.obp-process__step { border-top: 1px solid var(--obp-line); border-bottom: 0; padding: 28px 0 8px; }
}
@media (min-width: 1200px) {
	.obp-process__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
	.obp-process__step { grid-template-columns: 1fr; }
	.obp-process__num { grid-row: auto; margin-bottom: 12px; }
}

/* Our happy families: two rows of hand-over photos drifting in opposite directions,
   looping without a seam (each track holds two identical groups and moves by half). */
.obp-families { padding-block: clamp(56px, 9vw, 128px); border-top: 1px solid var(--obp-line); overflow: hidden; }
.obp-families__head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
.obp-families__title { font: 800 clamp(2.25rem, 6vw, 4.5rem)/.95 var(--obp-display); text-transform: uppercase; }
.obp-families__text { color: var(--obp-paper-2); font-size: 1.0625rem; max-width: 36rem; }
@media (min-width: 1100px) {
	.obp-families__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 64px; }
}

.obp-families__rows { display: grid; gap: clamp(14px, 2vw, 24px); }
.obp-families__row { overflow: hidden; }
.obp-families__track { display: flex; width: max-content; animation: obp-families-left 60s linear infinite; }
.obp-families__row--right .obp-families__track { animation-name: obp-families-right; }
.obp-families__row:hover .obp-families__track { animation-play-state: paused; }
.obp-families__group { display: flex; gap: clamp(14px, 2vw, 24px); padding-right: clamp(14px, 2vw, 24px); }
@keyframes obp-families-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes obp-families-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.obp-families__card {
	position: relative; flex: none;
	width: 260px; aspect-ratio: 5 / 4;
	border-radius: 16px; overflow: hidden;
	background: var(--obp-ink-2);
}
.obp-families__card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.obp-families__name {
	position: absolute; left: 12px; bottom: 12px;
	padding: 6px 12px; border-radius: 999px;
	background: var(--obp-paper); color: var(--obp-ink);
	font-weight: 600; font-size: .875rem; line-height: 1.2;
}
@media (min-width: 768px) { .obp-families__card { width: 340px; } }

/* Reduced motion: still rows the visitor can scroll sideways themselves. */
@media (prefers-reduced-motion: reduce) {
	.obp-families__row { overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--obp-gutter); }
	.obp-families__track { animation: none; }
	.obp-families__group + .obp-families__group { display: none; }
	.obp-families__card { scroll-snap-align: start; }
}

.obp-cta { background: var(--obp-ink-2); border-block: 1px solid var(--obp-line); }
.obp-cta__grid { display: grid; gap: 28px; align-items: end; }
.obp-cta__text { margin-top: 16px; max-width: 40rem; color: var(--obp-paper-2); font-size: 1.0625rem; }
@media (max-width: 479px) { .obp-cta .obp-btn { width: 100%; } }
@media (min-width: 960px) { .obp-cta__grid { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; } }

/* Recognition: the owner's award graphics, shown whole (never cropped) with a plain caption. */
.obp-recognition { padding-block: clamp(56px, 9vw, 128px); border-top: 1px solid var(--obp-line); }
.obp-recognition__head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 44rem; }
.obp-recognition__title { font: 800 clamp(2.25rem, 6vw, 4.5rem)/.95 var(--obp-display); text-transform: uppercase; text-wrap: balance; }
.obp-recognition__text { color: var(--obp-paper-2); font-size: 1.0625rem; }
.obp-recognition__list { display: grid; gap: 32px; }
.obp-recognition__figure { margin: 0; display: grid; gap: 14px; }
.obp-recognition__link { display: block; border-radius: 16px; overflow: hidden; border: 1px solid var(--obp-line-2); line-height: 0; transition: border-color .2s var(--obp-ease); }
.obp-recognition__link:hover { border-color: var(--obp-blue-ink); }
.obp-recognition__link img { width: 100%; height: auto; }
.obp-recognition__caption { font-weight: 700; font-size: 1.0625rem; line-height: 1.4; }
@media (min-width: 768px) {
	.obp-recognition__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); align-items: start; }
}
@media (min-width: 1100px) {
	.obp-recognition__list { max-width: 1100px; }
}

.obp-faq__grid { display: grid; gap: 32px; }
.obp-faq__item { border-top: 1px solid var(--obp-line); }
.obp-faq__item summary { cursor: pointer; padding: 20px 0; font-weight: 700; font-size: 1.125rem; }
.obp-faq__answer { padding-bottom: 20px; color: var(--obp-paper-2); }
@media (min-width: 960px) { .obp-faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }

/* Contact and footer */
.obp-contact { border-top: 1px solid var(--obp-line); }
.obp-contact__grid { display: grid; gap: 40px; }
.obp-contact__lead { display: flex; flex-direction: column; gap: 14px; }
.obp-contact__name { color: var(--obp-paper-2); font-size: 1.125rem; }
.obp-contact__list { margin: 0; display: grid; gap: 28px; }
.obp-contact__list dd { margin: 8px 0 0; }
.obp-contact__value {
	font: 700 clamp(1.25rem, 3vw, 1.75rem)/1.2 var(--obp-body);
	text-decoration: none; overflow-wrap: anywhere;
}
.obp-contact__value:hover { color: var(--obp-blue-ink); }
.obp-contact__value--email { font-size: clamp(1.0625rem, 2.4vw, 1.375rem); }
.obp-social { display: flex; flex-wrap: wrap; gap: 10px; }
.obp-social__link {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 0 14px;
	border: 1px solid var(--obp-line-2); border-radius: var(--obp-radius);
	text-decoration: none; font-weight: 600;
}
.obp-social__link:hover { border-color: var(--obp-paper); }
.obp-social__link .obp-icon { width: 18px; height: 18px; }
@media (min-width: 960px) { .obp-contact__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; } }

.obp-footer { border-top: 1px solid var(--obp-line); padding-block: 32px calc(32px + env(safe-area-inset-bottom)); }
.obp-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.obp-footer__emblem img { width: 64px; height: 64px; object-fit: contain; }
.obp-footer__copy { color: var(--obp-paper-3); font-size: .875rem; }
.obp-footer__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-left: auto; }
.obp-footer__links a { color: var(--obp-paper-2); font-size: .875rem; display: inline-block; padding: 10px 0; }
.obp-footer__links a:hover { color: var(--obp-paper); }
@media (max-width: 639px) { .obp-footer__links { margin-left: 0; width: 100%; } }
.obp-footer__credit {
	flex: 1 1 100%; margin-top: 8px; padding-top: 16px; text-align: center;
	border-top: 1px solid var(--obp-line);
	font-size: .8125rem; color: var(--obp-paper-3);
}
.obp-footer__credit a { color: var(--obp-paper-2); text-underline-offset: 3px; display: inline-block; padding-block: 8px; }
.obp-footer__credit a:hover { color: var(--obp-blue-ink); }

/* ---------- Forms (shared) ---------- */

.obp-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.obp-field__label { font-weight: 700; font-size: 1rem; line-height: 1.35; padding: 0; }
.obp-field__help { font-size: .875rem; color: var(--obp-paper-3); }
.obp-field__error { font-size: .9375rem; font-weight: 600; color: var(--obp-error); }
.obp-field__error::before { content: "! "; font-family: var(--obp-mono); }

.obp-input {
	width: 100%; min-height: 52px; padding: 12px 14px;
	background: var(--obp-ink); color: var(--obp-paper);
	border: 1px solid var(--obp-line-2); border-radius: var(--obp-radius);
	font: 400 1rem/1.4 var(--obp-body);
	transition: border-color .15s var(--obp-ease);
	-webkit-appearance: none; appearance: none;
}
.obp-input::placeholder { color: var(--obp-paper-3); opacity: 1; }
.obp-input:hover { border-color: var(--obp-paper-3); }
.obp-input:focus { border-color: var(--obp-blue-ink); outline: 2px solid var(--obp-blue-ink); outline-offset: 0; }
.obp-input[aria-invalid="true"] { border-color: var(--obp-error); }
.obp-input--area { min-height: 96px; resize: vertical; }
.obp-select { position: relative; }
.obp-select::after {
	content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
	border-right: 2px solid var(--obp-paper-2); border-bottom: 2px solid var(--obp-paper-2);
	transform: rotate(45deg); pointer-events: none;
}
.obp-select .obp-input { padding-right: 40px; }
.obp-select option { background: var(--obp-ink-2); color: var(--obp-paper); }

.obp-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.obp-notice {
	margin-block: 16px; padding: 14px 16px;
	border: 1px solid var(--obp-crown); border-left-width: 4px; border-radius: var(--obp-radius);
	background: var(--obp-ink-2); color: var(--obp-paper);
}
.obp-notice--error { border-color: var(--obp-error); }

/* ---------- Application (home #apply section and /apply/) ---------- */

.obp-apply-section { border-top: 1px solid var(--obp-line); background: var(--obp-ink); }

.obp-apply__head { padding-block: clamp(32px, 6vw, 72px) clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--obp-line); }
.obp-apply__head .obp-wrap { display: flex; flex-direction: column; gap: 14px; }
.obp-apply__lede { max-width: 44rem; color: var(--obp-paper-2); font-size: 1.0625rem; }

.obp-apply__layout {
	display: grid; gap: 40px;
	padding-block: clamp(24px, 4vw, 48px) clamp(56px, 8vw, 112px);
}
@media (min-width: 1100px) {
	.obp-apply__layout { grid-template-columns: minmax(0, 760px) minmax(280px, 340px); justify-content: space-between; gap: 64px; }
}

.obp-form { min-width: 0; }

.obp-progress { margin-bottom: 28px; }
.obp-progress__text { font: 500 .875rem/1.4 var(--obp-mono); color: var(--obp-paper-2); margin-bottom: 12px; letter-spacing: .02em; }
.obp-progress__bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.obp-progress__seg { height: 4px; background: var(--obp-line); border-radius: 2px; transition: background-color .35s var(--obp-ease); }
.obp-progress__seg.is-done { background: var(--obp-blue-ink); }
.obp-progress__seg.is-current { background: var(--obp-paper); }

.obp-form__alert {
	margin-bottom: 24px; padding: 14px 16px;
	border: 1px solid var(--obp-error); border-left-width: 4px; border-radius: var(--obp-radius);
	background: var(--obp-ink-2);
}

.obp-step { animation: obp-step-in .35s var(--obp-ease); }
@keyframes obp-step-in { from { opacity: 0; transform: translateY(8px); } }
.obp-step__title { font: 800 clamp(2rem, 5vw, 3rem)/1 var(--obp-display); text-transform: uppercase; }
.obp-step__title:focus { outline: none; }
.obp-step__intro { margin-top: 10px; color: var(--obp-paper-2); max-width: 40rem; }
.obp-step__fields {
	margin-top: 28px;
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 20px;
}
@media (min-width: 640px) {
	.obp-step__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.obp-step__fields > .obp-field { grid-column: 1 / -1; }
	.obp-step__fields > .obp-field--half { grid-column: auto; }
}

/* Choice cards: radio inputs stay in the DOM and keyboard order. */
.obp-choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.obp-choice .obp-field__label { margin-bottom: 12px; display: block; }
.obp-choice__grid {
	display: grid; gap: 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
	.obp-choice__grid { grid-template-columns: repeat(min(var(--cols, 2), 3), minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.obp-choice__grid { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
}
.obp-choice__card {
	position: relative; display: flex; align-items: flex-start; gap: 10px;
	min-height: 56px; padding: 14px 14px;
	background: var(--obp-ink-2);
	border: 1px solid var(--obp-line-2); border-radius: var(--obp-radius);
	cursor: pointer; min-width: 0;
	transition: border-color .15s var(--obp-ease), background-color .15s var(--obp-ease);
}
.obp-choice__card:hover { border-color: var(--obp-paper-3); }
.obp-choice__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.obp-choice__tick {
	flex: none; width: 20px; height: 20px; margin-top: 1px;
	border: 2px solid var(--obp-line-2); border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	color: transparent;
	transition: background-color .15s var(--obp-ease), border-color .15s var(--obp-ease);
}
.obp-choice__tick .obp-icon { width: 12px; height: 12px; }
.obp-choice__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.obp-choice__title { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.obp-choice__sub { font-size: .8125rem; line-height: 1.35; color: var(--obp-paper-3); }
.obp-choice__input:checked ~ .obp-choice__tick { background: var(--obp-blue); border-color: var(--obp-blue); color: #fff; }
.obp-choice__card:has(.obp-choice__input:checked) { border-color: var(--obp-blue-ink); background: #101c3a; }
.obp-choice__card:has(.obp-choice__input:focus-visible) { outline: 3px solid var(--obp-crown); outline-offset: 2px; }
.obp-choice[aria-invalid="true"] .obp-choice__card { border-color: var(--obp-error); }
.obp-choice__card:has(.obp-choice__input:checked) .obp-choice__sub { color: var(--obp-paper-2); }

/* Checkbox */
.obp-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 4px 0; }
.obp-check__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.obp-check__box {
	flex: none; width: 24px; height: 24px;
	border: 2px solid var(--obp-paper-3); border-radius: 4px;
	display: inline-flex; align-items: center; justify-content: center;
	color: transparent; background: var(--obp-ink);
}
.obp-check__box .obp-icon { width: 14px; height: 14px; }
.obp-check__label { font-weight: 600; line-height: 1.45; padding-top: 1px; }
.obp-check__input:checked + .obp-check__box { background: var(--obp-blue); border-color: var(--obp-blue); color: #fff; }
.obp-check__input:focus-visible + .obp-check__box { outline: 3px solid var(--obp-crown); outline-offset: 2px; }
.obp-check__input[aria-invalid="true"] + .obp-check__box { border-color: var(--obp-error); }
.obp-field--checkbox .obp-field__help { padding-left: 36px; }

.obp-form__nav {
	display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap;
	margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--obp-line);
}
.obp-form__nav [data-obp-next], .obp-form__nav [data-obp-submit] { margin-left: auto; }
@media (max-width: 479px) {
	.obp-form__nav { flex-direction: column-reverse; }
	.obp-form__nav .obp-btn { width: 100%; margin-left: 0; }
}
.obp-form__saving { margin-top: 12px; color: var(--obp-paper-2); min-height: 1.5em; }

/* Review */
.obp-review { margin-top: 28px; display: grid; gap: 4px; }
.obp-review__group { border-top: 1px solid var(--obp-line); padding: 18px 0 8px; }
.obp-review__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.obp-review__title { font: 500 .8125rem/1.3 var(--obp-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--obp-paper-3); }
.obp-review__edit {
	background: none; border: 0; padding: 8px 0; cursor: pointer;
	color: var(--obp-blue-ink); font: 700 .9375rem var(--obp-body); text-decoration: underline; text-underline-offset: 3px;
}
.obp-review dl { margin: 0; }
.obp-review__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 0; }
.obp-review__row dt { color: var(--obp-paper-3); font-size: .875rem; }
.obp-review__row dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 640px) {
	.obp-review__row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; }
}

.obp-terms {
	margin-top: 28px; padding: 20px;
	background: var(--obp-ink-2); border: 1px solid var(--obp-line); border-radius: var(--obp-radius);
	display: grid; gap: 12px;
}
.obp-terms__title { font: 700 1.125rem/1.3 var(--obp-body); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.obp-terms__version { font: 400 .75rem var(--obp-mono); color: var(--obp-paper-3); }
.obp-terms p { color: var(--obp-paper-2); }
.obp-terms__links { font-size: .9375rem; }

/* Blueprint panel: the answers drawn up as a spec sheet. */
.obp-blueprint { display: none; }
@media (min-width: 1100px) {
	.obp-blueprint {
		display: block; align-self: start;
		position: sticky; top: calc(var(--obp-header-h) + 32px);
		padding: 24px;
		border: 1px solid var(--obp-blue-ink);
		border-radius: var(--obp-radius);
		background-color: var(--obp-ink);
		/* Drafting grid as an SVG tile: solid hairlines, not a gradient. */
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0V24M0 24H24' fill='none' stroke='%237fa4ff' stroke-opacity='.08'/%3E%3C/svg%3E");
		background-size: 24px 24px;
	}
}
.obp-blueprint__kicker { font: 800 1.75rem/1 var(--obp-display); text-transform: uppercase; color: var(--obp-blue-ink); margin-bottom: 18px; }
.obp-blueprint__list { margin: 0; display: grid; gap: 0; }
.obp-blueprint__row { padding: 10px 0; border-top: 1px dashed rgba(127, 164, 255, .35); display: grid; gap: 2px; }
.obp-blueprint__row dt { font: 500 .6875rem/1.3 var(--obp-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--obp-blue-ink); }
.obp-blueprint__row dd { margin: 0; font-weight: 700; color: var(--obp-paper-3); transition: color .3s var(--obp-ease); }
.obp-blueprint__row.is-set dd { color: var(--obp-paper); }
.obp-blueprint__foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(127, 164, 255, .35); font: 500 .8125rem var(--obp-mono); color: var(--obp-paper-2); }

.obp-closed { padding-block: clamp(40px, 7vw, 96px); display: grid; gap: 18px; }
.obp-closed p { color: var(--obp-paper-2); font-size: 1.0625rem; }
.obp-closed__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Status and document pages ---------- */

.obp-status__wrap, .obp-doc__wrap { max-width: 760px; padding-block: clamp(40px, 7vw, 96px); display: grid; gap: 18px; }
.obp-status__title { font-size: clamp(2.25rem, 6vw, 3.75rem); }
.obp-status__lede { color: var(--obp-paper-2); font-size: 1.0625rem; }
.obp-status__ref { display: grid; gap: 6px; padding: 20px; border: 1px solid var(--obp-blue-ink); border-radius: var(--obp-radius); }
.obp-status__ref-value { font: 500 clamp(1.5rem, 5vw, 2.25rem)/1.1 var(--obp-mono); letter-spacing: .04em; overflow-wrap: anywhere; }
.obp-status__states { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--obp-line); border-radius: var(--obp-radius); }
.obp-status__states > div { padding: 16px; display: grid; gap: 4px; min-width: 0; }
.obp-status__states > div + div { border-left: 1px solid var(--obp-line); }
.obp-status__states dd { margin: 0; font-weight: 700; }
.obp-status__h2, .obp-doc__h2 { font: 700 1.375rem/1.3 var(--obp-body); margin-top: 18px; }
.obp-status__next { display: grid; gap: 14px; justify-items: start; color: var(--obp-paper-2); }
.obp-status__small { font-size: .875rem; color: var(--obp-paper-3); }
.obp-review--static { margin-top: 0; }
.obp-doc__wrap p { color: var(--obp-paper-2); font-size: 1.0625rem; }

/* ---------- Profile ---------- */

.obp-profile__wrap { max-width: 760px; padding-block: clamp(40px, 7vw, 96px); display: grid; gap: 18px; }
.obp-profile__email { overflow-wrap: anywhere; }
.obp-profile__apps { display: grid; gap: 16px; margin-top: 8px; }
.obp-profile__app { border: 1px solid var(--obp-line-2); border-radius: var(--obp-radius); padding: 20px; display: grid; gap: 16px; background: var(--obp-ink-2); }
.obp-profile__app-head { display: grid; gap: 6px; }
.obp-profile__date { font-size: .875rem; color: var(--obp-paper-3); }
.obp-profile__summary { color: var(--obp-paper-2); }
.obp-profile__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.obp-profile__note { color: var(--obp-paper-2); flex: 1 1 100%; }
.obp-signin { display: grid; gap: 16px; max-width: 480px; }
.obp-signin .obp-btn { justify-self: start; }
@media (max-width: 479px) { .obp-signin .obp-btn, .obp-profile__actions .obp-btn { width: 100%; } }

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
	.obp-page *, .obp-page *::before, .obp-page *::after {
		animation-duration: .01ms !important; animation-iteration-count: 1 !important;
		transition-duration: .01ms !important; scroll-behavior: auto !important;
	}
	.obp-slide img { animation: none !important; transform: none !important; }
}

/* Ultrawide: keep line lengths and the hero in proportion. */
@media (min-width: 2000px) {
	:root { --obp-container: 1440px; }
	.obp-hero { min-height: min(calc(100svh - var(--obp-header-h)), 1080px); }
}