/* WES base: tokens, font, reset, buttons.
 * Palette: near-black navy ground, electric blue accent, a trace of cyan,
 * and one warm amber reserved for the parcel and its route. */
@font-face {
	font-family: "Instrument Sans";
	src: url("../fonts/instrument-sans.woff2") format("woff2");
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;
}

:root {
	--ink: #05070e;
	--ink-2: #0a0e1b;
	--ink-3: #111729;
	--blue: #3b7bff;
	--blue-soft: #8db0ff;
	--cyan: #7fe7ff;
	--amber: #ffb054;
	--paper: #eef1f8;
	--paper-dim: rgba(238, 241, 248, .66);
	--paper-faint: rgba(238, 241, 248, .42);
	--line: rgba(238, 241, 248, .09);
	--line-strong: rgba(238, 241, 248, .18);
	--glass: rgba(14, 19, 36, .5);

	--font: "Instrument Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

	--gutter: clamp(16px, 4vw, 56px);
	--maxw: 1350px; /* content (text, nav) is contained; the hero globe may bleed past it */
	--header-h: 64px;
	--header-top: 16px;
	--section-pad: clamp(48px, 1.75rem + 3vw, 72px); /* one vertical rhythm: ~140px between sections on desktop, ~96px on phones */
	--head-gap: clamp(32px, 1.25rem + 2vw, 52px); /* section heading → its content */
	--ease: cubic-bezier(.22, .8, .24, 1);
	--ease-io: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--header-top) + 16px); }
body {
	margin: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; border-radius: 6px; }

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

.skip-link {
	position: fixed; left: 12px; top: -60px; z-index: 200;
	background: var(--paper); color: var(--ink); padding: 10px 16px; font-weight: 600; border-radius: 999px;
	transition: top .2s;
}
.skip-link:focus { top: 12px; }

html.menu-open, html.menu-open body { overflow: hidden; }

.fallback { padding: calc(var(--header-h) + var(--header-top) + 48px) var(--gutter) 64px; max-width: 800px; }

.kicker {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-faint);
}
.kicker::before { content: ""; width: 18px; height: 1px; background: currentColor; }

/* ---------- buttons ---------- */
.btn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 44px; padding: 0 20px; white-space: nowrap;
	font-size: 15px; font-weight: 600; letter-spacing: -.005em;
	border-radius: 999px;
	transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease), color .3s, translate .6s var(--ease);
}
.btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn--lg { min-height: 52px; padding: 0 26px; font-size: 15.5px; }
.btn .arrow { transition: transform .45s var(--ease); }
.btn:hover .arrow, .btn:focus-visible .arrow { transform: translateX(3px); }

/* Primary: luminous paper pill — reads as the single most important action. */
.btn--primary {
	background: var(--paper); color: var(--ink);
	box-shadow: inset 0 -1px 0 rgba(5, 7, 14, .12), 0 1px 0 rgba(255, 255, 255, .25), 0 8px 24px -10px rgba(141, 176, 255, .55);
}
.btn--primary { overflow: hidden; }
.btn--primary::after { /* light sweep on hover */
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: linear-gradient(105deg, transparent 35%, rgba(141, 176, 255, .45) 50%, transparent 65%);
	transform: translateX(-110%); transition: transform .9s var(--ease);
}
.btn--primary:hover::after, .btn--primary:focus-visible::after { transform: translateX(110%); }
.btn--primary:hover, .btn--primary:focus-visible {
	background: #fff;
	box-shadow: inset 0 -1px 0 rgba(5, 7, 14, .12), 0 1px 0 rgba(255, 255, 255, .3), 0 12px 36px -10px rgba(141, 176, 255, .8);
}

/* Ghost: glass outline. */
.btn--ghost {
	color: var(--paper);
	background: rgba(238, 241, 248, .04);
	border: 1px solid var(--line-strong);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn--ghost:hover, .btn--ghost:focus-visible { background: rgba(238, 241, 248, .09); border-color: rgba(238, 241, 248, .32); }
.btn .icon-track { color: var(--cyan); }

/* ---------- tracking form (hero + tracking section) ---------- */
.track-form {
	display: flex; align-items: center; gap: 10px;
	height: 54px; padding: 5px 5px 5px 16px; border-radius: 999px;
	background: rgba(238, 241, 248, .04); border: 1px solid var(--line-strong);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s;
}
.track-form:focus-within { border-color: rgba(141, 176, 255, .65); box-shadow: 0 0 0 4px rgba(59, 123, 255, .16); background: rgba(238, 241, 248, .06); }
.track-form__icon { display: grid; color: var(--cyan); }
.track-form input {
	flex: 1; min-width: 0; height: 100%; padding: 0;
	background: transparent; border: 0; outline: 0; /* focus is shown on the whole field */
	color: var(--paper); font: inherit; font-size: 15px; letter-spacing: .01em;
}
.track-form input::placeholder { color: var(--paper-faint); }
.track-form button {
	display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 18px; border-radius: 999px;
	background: rgba(238, 241, 248, .1); color: var(--paper); font-size: 14.5px; font-weight: 600;
	transition: background-color .25s;
}
.track-form button:hover, .track-form button:focus-visible { background: rgba(238, 241, 248, .18); }
.track-form button .arrow { transition: transform .45s var(--ease); }
.track-form button:hover .arrow { transform: translateX(3px); }
.track-form--lg { height: 64px; padding-left: 20px; }
.track-form--lg input { font-size: 17px; }
.track-form--lg button { padding: 0 24px; background: var(--paper); color: var(--ink); font-size: 15.5px; }
.track-form--lg button:hover, .track-form--lg button:focus-visible { background: #fff; }

/* ---------- shared section scaffolding ---------- */
.section { position: relative; padding: var(--section-pad) 0; }
.section__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section__head { max-width: 40rem; }
.section__head--center { margin: 0 auto; text-align: center; }
.section__head--center .kicker { justify-content: center; }
.section__title {
	margin-top: 18px;
	font-size: clamp(2rem, 1.1rem + 2.4vw, 3.2rem); font-weight: 600; line-height: 1.04; letter-spacing: -.038em;
}
.section__lede { margin-top: 16px; font-size: 16.5px; color: var(--paper-dim); }
.section__head--center .section__lede { margin-left: auto; margin-right: auto; max-width: 34rem; }

.sample-tag {
	display: inline-flex; align-items: center; vertical-align: middle;
	padding: 2px 8px; border-radius: 999px; margin-left: 8px;
	font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--amber); border: 1px dashed rgba(255, 176, 84, .55); background: rgba(255, 176, 84, .06);
}

/* Scroll parallax for photos inside an overflow-hidden frame. Native scroll-driven
 * animation: no JS, runs off the main thread; ignored where unsupported. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.parallax-img { scale: 1.14; animation: wes-parallax linear both; animation-timeline: view(); }
		@keyframes wes-parallax { from { translate: 0 -5%; } to { translate: 0 5%; } }
	}
}

.kicker::before { transform-origin: left; transition: transform .9s var(--ease) .15s; }

/* Word-by-word headlines ([data-split], split.js): each word rises out of a mask, blurred → sharp. */
@media (prefers-reduced-motion: no-preference) {
	html.has-reveal [data-split] .w { display: inline-block; overflow: clip; overflow-clip-margin: .06em; vertical-align: bottom; padding: 0 .02em .12em 0; margin-bottom: -.12em; }
	html.has-reveal [data-split] .w__i {
		display: inline-block; transform: translate3d(0, 108%, 0); opacity: 0;
		transition: transform 1.1s var(--ease), opacity .9s var(--ease), filter 1s var(--ease);
		transition-delay: calc(80ms + var(--wi) * 55ms);
	}
	html.has-reveal .is-in [data-split] .w__i, html.has-reveal [data-split].is-in .w__i { transform: none; opacity: 1; filter: none; }
	html.has-reveal [data-reveal]:not(.is-in) .kicker::before { transform: scaleX(0); }
}
/* Blur-to-sharp only where it is cheap (desktop GPUs); phones get the same rise without the filter. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) and (min-width: 900px) {
	html.has-reveal [data-split] .w__i { filter: blur(6px); }
	html.has-reveal .is-in [data-split] .w__i, html.has-reveal [data-split].is-in .w__i { filter: none; }
}

/* Generic scroll reveal: only hides when JS has opted in (html.has-reveal). */
@media (prefers-reduced-motion: no-preference) {
	html.has-reveal [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
	html.has-reveal [data-reveal].is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.btn, .btn .arrow, .btn--primary::after { transition: none; }
}