/* Page ground: Cool Gray — the palette's "UI neutral / Background" role —
   so the Pure White cards lift off it (same 60/30/10 layering as the show
   schedule page; .legacy-content paints its own ground over the body) */
body { background: #E8EAEC; }
.legacy-content { background: #E8EAEC; }

/* ── Site button recipe, defined once ──
   Mirrors the Tailwind utilities every modern page uses for CTAs
   (h-11 px-8 text-base font-bold font-['Lato'], text-sm h-10 px-6 on
   phones). Every button on this page reads these variables, so nothing
   hardcodes its own font/size and one change here restyles them all. */
.legacy-content {
	--btn-font-family: var(--font-body);
	--btn-font-weight: 700;
	--btn-font-size: 16px;
	--btn-line-height: 24px;
	--btn-height: 44px;
	--btn-pad-x: 32px;
}
@media (max-width: 650px) {
	.legacy-content {
		--btn-font-size: 14px;
		--btn-height: 40px;
		--btn-pad-x: 24px;
	}
}

/* ── Site type scale, defined once ──
   Mirrors the Tailwind utilities the modern pages use for text, so every
   element on this page reads these tokens instead of hardcoding its own
   size (and none of them drift with viewport width like the old clamp()s):
   - headings: font-['Manrope'] capitalize, text-2xl -> md:text-4xl ->
     lg:text-5xl (24/36/48)
   - descriptions/body: font-['Lato'], text-sm -> md:text-base (14/16)
   - card titles: font-['Manrope'] bold text-base (16)
   - card copy: font-['Lato'] text-sm leading-5 (14/20)
   - eyebrows: font-['Manrope'] text-sm tracking-widest */
.legacy-content {
	--font-heading: 'Manrope', 'Lato', sans-serif;
	--font-body: 'Lato', sans-serif;
	--text-h1: 24px;
	--text-h2: 24px;
	--text-body: 14px;
	--leading-body: 1.55;
	--text-card-title: 16px;
	--text-card-body: 14px;
	--leading-card: 20px;
	--text-eyebrow: 14px;
	--eyebrow-tracking: 0.1em;
}
@media (min-width: 768px) {
	.legacy-content { --text-h1: 36px; --text-h2: 36px; --text-body: 16px; }
}
@media (min-width: 1024px) {
	.legacy-content { --text-h1: 48px; }
}

/* ── Hero: three independent layers + live text overlay ──
   The art is no longer one flattened image: the twinkly starfield, the
   lighter blue diagonal panel, and the tablets are separate layers that can
   be moved/resized on their own. Everything readable is real HTML so it
   stays sharp at every size. Palette only: #466587 primary action,
   #1D2940 ground, #9CA3AF secondary, #E8EAEC / #FFFFFF type. */
/* No max-width cap: the artwork stretches to any viewport (and any zoom level)
   so the page's white ground never shows beside or beyond it */
/* Art and copy overlay in one grid cell: the banner keeps its 1920/476
   proportion as a minimum (24.79vw = 476/1920) but stretches taller
   whenever the fixed type steps need more room than that */
#herowrap { position: relative; width: 100%; margin: 0 auto; background: #1D2940; display: grid; }
.hero-art {
	grid-area: 1 / 1;
	position: relative;
	min-height: 24.79vw;
	overflow: hidden;
	background: #1D2940;
}
/* Layer 1 — Midnight Navy "tech network" sky, fully procedural: the nebula
   ground is CSS gradients around #1D2940 and elite-hero.js draws slowly
   drifting interconnected dots on a device-pixel-ratio-aware canvas, so it
   renders pin-sharp at any size, zoom, or screen density — no bitmap.
   Decorative only (aria-hidden) and static under prefers-reduced-motion. */
.hero-stars {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 170% at 16% 22%, rgba(70, 101, 135, 0.30), transparent 58%),
		radial-gradient(95% 140% at 42% 95%, rgba(70, 101, 135, 0.16), transparent 55%),
		radial-gradient(150% 190% at 92% 6%, rgba(9, 14, 26, 0.60), transparent 62%),
		linear-gradient(115deg, #243052 0%, #1D2940 46%, #141C2E 100%);
}
.hero-stars canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
/* Layer 2 — lighter blue panel: a skewed rectangle, so the diagonal edge
   (55.5% at the top -> 44.5% at the bottom, same geometry as the old
   flattened art) comes from the skew and can be re-angled in one place */
.hero-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 55.5%;
	width: 70%;
	transform: skewX(-23.9deg);
	transform-origin: top left;
	background: linear-gradient(105deg, #D4D7E6 0%, #CACFE3 45%, #C9CBE0 100%);
}
/* Faint angular facet highlights sweeping across the panel, like the
   artwork's subtle geometric sheen — pure gradients, crisp at any scale */
.hero-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, 0.30) 30%, transparent 43%),
		linear-gradient(105deg, transparent 55%, rgba(255, 255, 255, 0.20) 68%, transparent 82%),
		linear-gradient(285deg, rgba(156, 163, 175, 0.12) 0%, transparent 30%);
	pointer-events: none;
}
/* Silver Blue bevel along the panel's slanted edge */
.hero-panel::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 46px;
	background: linear-gradient(to right, #9CA3AF, rgba(156, 163, 175, 0));
}
/* Layer 3 — the tablets, independent on top of the panel. The PNG is
   exported at 2x display size from the hi-res artwork so it stays clear
   on HiDPI screens. */
.hero-tablets {
	position: absolute;
	top: 3.5%;
	right: 11.3%;
	height: 93.4%;
	width: auto;
	filter: drop-shadow(0 14px 22px rgba(29, 41, 64, 0.35));
}
.hero-copy {
	grid-area: 1 / 1;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	width: 46%;
	padding: 28px 0 28px clamp(16px, 4.6vw, 88px);
	box-sizing: border-box;
}
/* #herowrap prefix: outranks legacy-header.css's `.legacy-content h1`
   (navy, centered, weight 300), which otherwise wins over a bare class */
#herowrap .hero-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-h1);
	line-height: 1.16;
	color: #FFFFFF;
	text-align: left;
	margin: 0 0 0.45em;
}
#herowrap .hero-title span { color: #9CA3AF; }
.hero-sub {
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	color: #E8EAEC;
	margin: 0 0 1.5em;
	max-width: 34em;
}
.hero-sub b { color: #FFFFFF; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 20px); }
/* Square corners per the Option 1 mockup: solid primary + outlined
   secondary. Typography and size come from the shared button variables. */
.hero-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--btn-font-family);
	font-weight: var(--btn-font-weight);
	font-size: var(--btn-font-size);
	line-height: var(--btn-line-height);
	height: var(--btn-height);
	padding: 0 var(--btn-pad-x);
	box-sizing: border-box;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
}
.hero-cta-primary { background: #466587; color: #FFFFFF; border: 1px solid #466587; }
.hero-cta-primary:hover, .hero-cta-primary:focus-visible { background: #1D2940; border-color: #9CA3AF; color: #FFFFFF; }
/* Translucent navy fill, not transparent: just above the 950px restack the
   panel's diagonal edge can sweep under the CTA row (the hero grows taller as
   the copy wraps, and media queries count the scrollbar while layout doesn't),
   which put white text on the light panel. The fill keeps the button legible
   wherever the edge lands; over the navy ground it reads the same as before. */
.hero-cta-secondary { background: rgba(29, 41, 64, 0.72); color: #FFFFFF; border: 1px solid #9CA3AF; }
.hero-cta-secondary:hover, .hero-cta-secondary:focus-visible { background: #1D2940; border-color: #FFFFFF; color: #FFFFFF; }

/* Phones and narrow tablets: restack — copy on a solid Midnight Navy block
   on top, the artwork cropped to the tablets below (same sub-950 switch as
   the home page's event banner, and it keeps the fixed type steps from
   colliding with the artwork) */
@media (max-width: 950px) {
	#herowrap { display: flex; flex-direction: column; }
	.hero-art { min-height: 0; }
	/* Same three layers, recomposed for the narrow art: mostly panel and
	   tablets with a sliver of starfield on the left (matches the old
	   right-side crop of the flattened image) */
	.hero-art {
		order: 2;
		aspect-ratio: 1100 / 476;
	}
	.hero-panel { left: 22.3%; width: 90%; }
	.hero-tablets { right: 8%; }
	.hero-copy {
		position: static;
		width: 100%;
		padding: 26px 20px 24px;
	}
	/* .hero-title, .hero-sub, and .hero-cta sizing all follow the shared
	   type/button tokens automatically */
}

/* Very small phones (Galaxy S8's 360px width and under): the two CTAs no
   longer fit side by side, so they restack as full-width bars */
@media (max-width: 360px) {
	.hero-ctas { flex-direction: column; align-items: stretch; width: 100%; }
	.hero-cta { width: 100%; }
}

.infodiv {
	display: flex; justify-content: center; align-items: center; gap: 18px;
	padding: 20px;
	/* Square-cornered site card instead of servicepage.css's 15px-rounded,
	   black-shadowed legacy box: Silver Blue hairline + soft navy shadow,
	   white surface on the Cool Gray page ground */
	border-radius: 0;
	border: 1px solid rgba(156, 163, 175, 0.35);
	box-shadow: 0 2px 14px rgba(29, 41, 64, 0.1);
}
.infodiv > div { min-width: 37.5%; text-align: center; }
/* Body copy: one centered summary paragraph, Lato at the site's body size
   (14px -> 16px), navy on white */
.infodiv > div > p {
	margin: 8px auto;
	max-width: 44em;
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	color: #1D2940;
	text-align: center;
}

/* Site-standard primary button (same recipe as the other modern pages:
   44px tall, 32px side padding, Lato bold 16px, solid Slate Blue, darker
   on hover, square corners) */
a.linebtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--btn-height);
	padding: 0 var(--btn-pad-x);
	margin: 14px auto 0;
	width: fit-content;
	background: #466587;
	border: none;
	border-radius: 0;
	color: #FFFFFF !important;
	font-family: var(--btn-font-family);
	font-weight: var(--btn-font-weight);
	font-size: var(--btn-font-size);
	line-height: var(--btn-line-height);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s;
}
a.linebtn:hover, a.linebtn:focus-visible { background-color: #3a5775; }

/* ── OMI Tablet advantages (service-page style cards) ── */
.advantages { max-width: 1280px; margin: 56px auto 40px; padding: 0 24px; text-align: center; }
.adv-eyebrow { font-family: var(--font-heading); font-size: var(--text-eyebrow); letter-spacing: var(--eyebrow-tracking); color: #1D2940; margin: 0; }
/* .advantages prefix: outranks legacy-header.css's `.legacy-content h2`
   (weight 300, --headertextcolor), same clash the hero title had */
.advantages .adv-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-h2); color: #1D2940; text-transform: capitalize; margin: 10px 0 8px; }
.advantages .adv-title span { color: #466587; }
/* Muted navy, not Silver Blue: silver is border-only in the palette and
   reads too faint as text on the Cool Gray ground */
.adv-sub { font-family: var(--font-body); color: rgba(29, 41, 64, 0.72); font-size: var(--text-body); margin: 0 0 36px; }
.adv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: left; }
.adv-card { background: #FFFFFF; outline: 1px solid rgba(156, 163, 175, 0.35); padding: 18px 18px 24px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 14px rgba(29, 41, 64, 0.1); transition: box-shadow .2s; }
.adv-card:hover { box-shadow: 0 12px 28px -14px rgba(29, 41, 64, 0.3); outline-color: #9CA3AF; }
.adv-media { height: 180px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #FFFFFF, #E8EAEC); }
.adv-media img { max-height: 160px; max-width: 78%; width: auto; object-fit: contain; }

/* Reward program tile: real HTML/CSS instead of a downscaled bitmap, so the
   text renders pin-sharp at any screen density. Same design as the old
   omireward.png, square corners per the site style. */
.rewardcard {
	position: relative;
	width: 92%;
	max-width: 300px;
	background: linear-gradient(150deg, #24354F 0%, #1D2940 55%, #172136 100%);
	padding: 16px 18px 14px;
	box-sizing: border-box;
	overflow: hidden;
	text-align: left;
	box-shadow: 0 10px 22px -12px rgba(29, 41, 64, 0.5);
	font-family: var(--font-body);
	color: #FFFFFF;
}
/* the two thin silver diagonals in the top-right corner */
.rewardcard::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 64px;
	height: 64px;
	background: repeating-linear-gradient(-45deg,
		transparent 0 18px,
		rgba(232, 234, 236, 0.6) 18px 19.5px,
		transparent 19.5px 38px);
	pointer-events: none;
}
.rw-label { font-family: var(--font-heading); font-size: 12px; letter-spacing: var(--eyebrow-tracking); color: #9CA3AF; }
.rw-row { display: flex; align-items: center; gap: 14px; margin: 12px 0; }
.rw-pct { font-family: var(--font-heading); font-weight: 700; font-size: 36px; line-height: 1; }
.rw-desc { font-size: 14px; line-height: 1.3; color: #E8EAEC; }
.rw-div { border-top: 1px solid rgba(156, 163, 175, 0.45); margin: 10px 0; }
.rw-note { display: block; font-weight: 700; font-size: 12px; margin-top: 10px; }
.adv-card h3 { font-family: var(--font-heading); font-size: var(--text-card-title); font-weight: 700; text-transform: capitalize; color: #1D2940; margin: 8px 0 0; }
.adv-card p { font-family: var(--font-body); font-size: var(--text-card-body); line-height: var(--leading-card); color: #727C8D; margin: 0; }
@media (max-width: 1100px) { .adv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .adv-grid { grid-template-columns: 1fr; } }

/* Video box: square corners and an #E8EAEC hairline, matching the site's
   card treatment instead of the legacy rounded blue frame */
video:not(:fullscreen) {
	display: block;
	border: 1px solid #E8EAEC;
	border-radius: 0;
	background-color: #1D2940;
	width: 100%;
}

@media (max-width: 900px) {
	.infodiv { padding: 10px; }
	#viddiv { width: 95%; max-width: 500px; }
	/* paragraph size follows the shared type tokens */
}

/* ── Application form popup (custom-crafting request format) ──
   Lives in a .popuphaver dialog like every other popup on the site (and this
   page's Terms/Policy): popup('popapply') opens it, the × or a backdrop
   click closes it via popdown/checkbackdrop. */
/* css/base.css's Tailwind preflight zeroes dialog margins, which pins
   showModal() dialogs to the top-left; restore native centering for every
   popup on this page (apply, terms, policy) */
dialog.popuphaver { margin: auto; }
dialog.popapply { width: min(864px, 96vw); }
dialog.popapply #applybox { margin: 0; padding: 0; max-width: none; }
dialog.popapply .applycard { max-height: 88dvh; overflow-y: auto; }
#applybox { width: 100%; max-width: 832px; margin: 8px auto 20px; padding: 0 16px; box-sizing: border-box; }
.applycard { background: #fff; border: 1px solid rgba(156, 163, 175, 0.35); overflow: hidden; box-shadow: 0 10px 30px -14px rgba(15, 23, 42, 0.3); text-align: left; }
.applyhead { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #E8EAEC; padding: 12px 24px; }
.applyclose { background: none; border: none; padding: 0 2px; font-size: 26px; line-height: 1; color: #727C8D; cursor: pointer; }
.applyclose:hover, .applyclose:focus-visible { color: #1D2940; }
.applyhead h2 { font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: #1D2940; margin: 0; }
.applynote { display: flex; gap: 8px; align-items: flex-start; margin: 20px 24px 4px; }
.applynote img { width: 24px; height: 24px; background: #F6F6F6; border-radius: 50%; padding: 4px; box-sizing: border-box; flex: none; }
.applynote p { font-family: var(--font-body); font-size: 14px; line-height: 1.45; color: #1D2940; margin: 0; }
#applybox .form { position: relative; padding: 16px 24px 20px; }
#applybox .form[inert]::before { content: ""; position: absolute; inset: 0; background: #0004 url(/static/img/icons/loading.svg) center / 15% no-repeat; z-index: 2; }
.applypanel { background: #F6F6F6; padding: 16px; }
.applysection { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: #1D2940; text-transform: uppercase; letter-spacing: 0.04em; margin: 18px 0 10px; }
.applysection:first-child { margin-top: 0; }
.applygrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.applyfield { display: flex; flex-direction: column; gap: 6px; }
.applyfield label { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: #1D2940; }
.applyfield label b, .applyreq b { color: #D31212; font-family: var(--font-heading); }
.applyfield input, .applyfield select {
	height: 40px; padding: 0 12px; width: 100%; box-sizing: border-box;
	background: #fff; border: 1px solid rgba(114, 124, 141, 0.3); border-radius: 0;
	font-family: var(--font-body); font-size: 14px; color: #1D2940;
	transition: border-color .15s;
}
.applyfield input:focus, .applyfield select:focus { outline: none; border-color: #466587; }
.applyfield input:disabled { background: #F6F6F6; color: #727C8D; }
.applyfield input::placeholder { color: #727C8D; }
#applybox .checkinvalid input:invalid:not(:focus),
#applybox .checkinvalid select:invalid:not(:focus) { border-color: #D31212; color: #D31212; }
.applyreq { font-family: var(--font-body); font-size: 12px; color: #1D2940; margin: 14px 0 0; }
#applybox #backtolog { display: flex; justify-content: flex-end; border-top: 1px solid #E8EAEC; margin: 14px -24px 0; padding: 16px 24px 0; }
.applysubmit {
	background: #466587; color: #fff; border: none; cursor: pointer;
	font-family: var(--btn-font-family); font-weight: var(--btn-font-weight);
	font-size: var(--btn-font-size); line-height: var(--btn-line-height);
	height: var(--btn-height); padding: 0 var(--btn-pad-x);
	transition: background-color .2s;
}
.applysubmit:hover, .applysubmit:focus-visible { background: #3a5775; }
@media (max-width: 640px) {
	.applygrid { grid-template-columns: 1fr; }
	.applynote { margin: 16px 16px 4px; }
	#applybox .form { padding: 12px 16px 16px; }
	#applybox #backtolog { margin: 14px -16px 0; padding: 12px 16px 0; }
}

.popup iframe {
	border: none;
	max-width: 100%;
	max-height: 66dvh;
}