:root {
	--bg: #01001c;
	--navy: #020033;
	--card: #060735;
	--card-2: #090b45;
	--blue: #0086fe;
	--blue-dark: #0047ab;
	--sky: #00b0f0;
	--text: #eef4ff;
	--muted: #9aa6cf;
	--dim: #5d6a9c;
	--peach: #8fd3ff;
	--line: rgba(200, 225, 255, 0.09);
	--line-2: rgba(200, 225, 255, 0.16);
	--grad: linear-gradient(100deg, #c4e9ff 0%, #0086fe 45%, #3d6bff 100%);
	--wrap: 1240px;
	--gutter: 24px;
	--radius: 28px;
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);

	/* accent */
	--accent: #ffc83d;
	--accent-ink: #020033;
	--accent-glow: rgba(255, 200, 61, 0.45);
	--hl: #ffc83d;
	--hl-solid: #ffc83d;
	--plus: #ffc83d;
	color-scheme: dark;
	/* original "working" icon from the current site, used as a mask */
	--working: url("data:image/png;base64,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");
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: "Inter", system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	letter-spacing: -0.005em;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sprite { display: none; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--hl-solid); outline-offset: 4px; border-radius: 8px; }

.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.narrow { max-width: 1040px; }

/* Logo, identical to the original header mark */
.logo {
	display: inline-flex;
	align-items: baseline;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
}
.logo-o {
	display: inline-block;
	width: 0.58em;
	height: 0.58em;
	margin: 0 0.005em 0 0.035em;
	border-radius: 50%;
	background: #00b0f0;
	transform: translateY(0.02em);
}
.logo-sm { font-size: 1.05rem; }

/* Shared type, after the Nocturne system */
.label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
	font-size: 13px;
	font-weight: 550;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--peach);
}
.label::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.7; }
.h-xl { font-size: clamp(40px, 6vw, 88px); line-height: 0.98; letter-spacing: -0.045em; font-weight: 560; text-wrap: balance; }
.h-xl em { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
.h-md { font-size: clamp(38px, 5vw, 72px); }
.h-sm { font-size: clamp(34px, 4vw, 56px); }
.section-head { margin-bottom: clamp(48px, 7vw, 80px); }
.mini-label { margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
mark { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: "Instrument Serif", serif; font-style: italic; font-size: 1.12em; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	height: 48px;
	padding: 0 22px;
	border-radius: 999px;
	font-weight: 550;
	font-size: 15px;
	letter-spacing: -0.01em;
	white-space: nowrap;
	transition: transform 0.4s var(--ease), background 0.3s, box-shadow 0.4s var(--ease), color 0.3s;
}
.btn svg { font-size: 1.05em; transition: transform 0.4s var(--ease); }
.btn-lg { height: 54px; padding: 0 28px; font-size: 16px; }
.btn-light { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 10px 30px -10px var(--accent-glow); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset, 0 18px 40px -12px var(--accent-glow); }
.btn-light:hover svg { transform: translateX(3px); }
.btn-ghost { color: var(--text); background: rgba(225, 238, 255, 0.04); box-shadow: 0 0 0 1px var(--line-2) inset; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-ghost:hover { background: rgba(225, 238, 255, 0.09); }

.icon-badge {
	display: grid;
	place-items: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: linear-gradient(160deg, rgba(150, 215, 255, 0.16), rgba(61, 107, 255, 0.06));
	box-shadow: 0 0 0 1px rgba(150, 215, 255, 0.18) inset, 0 10px 30px -12px rgba(0, 134, 254, 0.5);
	color: var(--hl);
	font-size: 22px;
}

/* Loader */
.loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; align-content: center; gap: 28px; background: var(--navy); pointer-events: none; }
.loader-logo { display: flex; align-items: baseline; padding: 0.1em 0.05em; overflow: hidden; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: clamp(2.6rem, 7vw, 4.4rem); letter-spacing: -0.03em; line-height: 1; color: #fff; }
.ll-o { display: inline-block; width: 0.58em; height: 0.58em; margin: 0 0.005em 0 0.035em; border-radius: 50%; background: #00b0f0; transform: translateY(0.02em); }
.ll-a, .ll-b { display: inline-block; }
.loader-bar { width: 140px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.loader-bar i { display: block; width: 100%; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); }
.no-js .loader, .is-loaded .loader { display: none; }

/* Nav, after Nocturne */
.nav {
	position: fixed;
	top: 16px;
	left: 50%;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: min(calc(100% - 32px), 1120px);
	padding: 8px 8px 8px 22px;
	border-radius: 999px;
	background: rgba(2, 0, 51, 0.55);
	box-shadow: 0 0 0 1px var(--line) inset, 0 20px 50px -20px rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	transform: translateX(-50%);
}
.brand .logo { font-size: 22px; }
.nav-links { display: flex; gap: 4px; }
.nav-links a { padding: 8px 14px; border-radius: 999px; font-size: 14.5px; color: var(--muted); transition: color 0.3s, background 0.3s; }
.nav-links a:hover, .nav-links a.active { color: var(--text); background: rgba(225, 238, 255, 0.06); }
.nav-cta { height: 40px; padding: 0 18px; font-size: 14px; }
.burger { display: none; position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(225, 238, 255, 0.07); cursor: pointer; }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--text); transition: transform 0.4s var(--ease); }
.burger span:first-child { top: 18px; }
.burger span:last-child { top: 25px; }
.menu-open .burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.menu {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 36px;
	padding: 100px 28px 40px;
	background: rgba(2, 0, 51, 0.96);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s var(--ease), visibility 0.4s;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.menu nav { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.menu .btn { margin-bottom: auto; }
.menu nav a { font-size: 2.3rem; font-weight: 560; letter-spacing: -0.04em; color: var(--text); }
.menu-open .menu { opacity: 1; visibility: visible; }
@media (max-height: 620px) {
	.menu { padding: 84px 28px 28px; gap: 20px; }
	.menu nav a { font-size: 1.7rem; }
}
@media (max-height: 440px) {
	.menu { flex-direction: row; align-items: center; justify-content: space-between; padding: 76px 28px 20px; gap: 24px; }
	.menu nav { margin: 0; }
	.menu nav a { font-size: 1.35rem; line-height: 1.4; }
	.menu .btn { margin: 0; flex: none; }
}

/* HERO */
.hero { position: relative; padding-bottom: 30vh; overflow: hidden; isolation: isolate; }
.scene { position: absolute; inset: 0; z-index: -1; }
.sky {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 60% at 50% 0%, #0b0a5c 0%, rgba(11, 10, 92, 0) 60%),
		linear-gradient(180deg, #020033 0, #06065a 22vh, #102c94 42vh, #2563cf 56vh, #5aaef0 66vh, #2f6fd2 74vh, #0a1f70 96vh, #020033 130vh);
}
.glow {
	position: absolute;
	left: 50%;
	top: 66vh;
	width: 140vw;
	height: 46vh;
	transform: translate(-50%, -50%);
	background: radial-gradient(50% 50% at 50% 50%, rgba(0, 176, 240, 0.5), rgba(0, 134, 254, 0.16) 45%, rgba(0, 134, 254, 0) 70%);
	filter: blur(10px);
}
.layer { position: absolute; left: -2%; width: 104%; will-change: transform; }
.layer svg { display: block; width: 100%; height: 100%; stroke: none; }
.scene [data-city="far"] { top: 34vh; height: 60vh; opacity: 0.9; }
.scene [data-city="mid"] { top: 48vh; height: 62vh; }
.scene [data-city="near"] { top: 64vh; height: 110vh; }
.mist {
	position: absolute;
	left: 0;
	right: 0;
	top: 60vh;
	height: 22vh;
	background: linear-gradient(180deg, rgba(140, 205, 250, 0), rgba(140, 205, 250, 0.18) 50%, rgba(140, 205, 250, 0));
	filter: blur(8px);
}
.layer-front { bottom: -50vh; height: 96vh; z-index: 3; }

.hero-copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(118px, 15vh, 160px) var(--gutter) 0;
	text-align: center;
}
.hero-logo {
	display: inline-flex;
	align-items: baseline;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: clamp(min(64px, 15.6vw), 11.5vw, 176px);
	letter-spacing: -0.03em;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
	text-shadow: 0 10px 60px rgba(0, 134, 254, 0.55);
}
.hero-logo .logo-o { box-shadow: 0 0 30px rgba(0, 176, 240, 0.85), 0 0 80px rgba(0, 176, 240, 0.45); }
.hero-title {
	margin-top: clamp(16px, 2.4vh, 26px);
	font-size: clamp(26px, 3.3vw, 50px);
	font-weight: 560;
	line-height: 1.05;
	letter-spacing: -0.04em;
	color: var(--text);
	text-shadow: 0 6px 30px rgba(2, 0, 51, 0.6);
}
.hero-title em { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.05em; text-shadow: none; }
.hero-sub { margin-top: 14px; color: var(--text); font-size: 15px; font-weight: 500; }
.hero-sub span { margin-left: 6px; color: var(--muted); font-weight: 400; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

.window-wrap { position: relative; z-index: 2; width: min(1180px, 100% - var(--gutter) * 2); margin: clamp(48px, 7vh, 72px) auto 0; perspective: 1600px; }
.window {
	display: grid;
	grid-template-columns: 236px 1fr;
	height: clamp(420px, 44vw, 640px);
	padding: 8px;
	border: 1px solid rgba(190, 220, 255, 0.24);
	border-radius: 30px;
	background: linear-gradient(180deg, rgba(20, 28, 96, 0.78), rgba(4, 4, 46, 0.9));
	box-shadow: 0 60px 140px rgba(0, 4, 40, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	transform-origin: 50% 0%;
}
.window-side { display: flex; flex-direction: column; gap: 2px; padding: 16px 10px; }
.ws-brand { padding: 4px 12px 22px; }
.window-side a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--muted); font-size: 14.5px; font-weight: 500; transition: background 0.25s, color 0.25s; }
.window-side a svg { font-size: 1.1rem; color: var(--dim); transition: color 0.25s; }
.window-side a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.window-side a:hover svg { color: var(--hl); }
.window-main { position: relative; border-radius: 22px; overflow: hidden; background: #0b1250; }
.window-main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scale(1.08); }
.window-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 0, 51, 0) 40%, rgba(2, 0, 51, 0.55) 100%), linear-gradient(90deg, rgba(0, 71, 171, 0.25), rgba(0, 0, 0, 0) 50%); }
.window-chip { position: absolute; display: flex; gap: 12px; align-items: center; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 16px; background: rgba(255, 255, 255, 0.76); color: var(--navy); box-shadow: 0 20px 50px rgba(2, 0, 51, 0.25); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.window-chip b { display: block; font-size: 14.5px; font-weight: 600; }
.window-chip small { display: block; color: #3d4566; font-size: 12.5px; line-height: 1.35; }
.chip-a { left: 28px; top: 28px; max-width: 340px; }
.chip-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--hl-solid); color: #fff; font-size: 1.1rem; }
.chip-icon { color: var(--navy); }
.chip-b { right: 28px; top: 28px; flex-direction: column; align-items: flex-start; gap: 0; }

/* ABOUT + figures */
.about { position: relative; z-index: 4; margin-top: -22vh; padding-bottom: 180px; }
.lede { font-size: clamp(1.6rem, 3.1vw, 2.55rem); line-height: 1.28; letter-spacing: -0.03em; font-weight: 500; }
.lede .w { display: inline; }
.stats { display: grid; grid-template-columns: 1.15fr 1.15fr 0.9fr; gap: 16px; margin-top: clamp(80px, 9vw, 120px); }
.stat {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 36px 32px 30px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: linear-gradient(180deg, rgba(16, 26, 100, 0.55), rgba(4, 4, 40, 0.3));
	overflow: hidden;
}
.stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(0, 176, 240, 0), rgba(0, 176, 240, 0.8), rgba(0, 176, 240, 0)); }
.stat-n {
	display: flex;
	align-items: flex-start;
	font-family: "Instrument Serif", Georgia, serif;
	font-size: clamp(76px, 8.6vw, 136px);
	line-height: 0.85;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}
.stat-n sup { position: relative; top: 0.08em; font-size: 0.4em; line-height: 1; vertical-align: top; }
.stat-l { max-width: 26ch; margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 15px; }
.stat-since { flex-direction: column-reverse; justify-content: flex-end; }
.stat-since .stat-n { font-size: clamp(60px, 6.2vw, 100px); }
.stat-since .stat-l { margin: 0 0 22px; padding: 0 0 12px; border-top: 0; border-bottom: 1px solid var(--line-2); }

/* Odometer: each digit carries its own slice of the shared gradient */
.odo { display: inline-flex; height: 1em; line-height: 1; overflow: hidden; padding-bottom: 0.02em; }
.odo-col { display: inline-block; height: 1em; overflow: hidden; }
.odo-strip { display: flex; flex-direction: column; transition: transform 2.4s var(--ease); will-change: transform; }
.odo-strip span, .grad-piece {
	display: block;
	height: 1em;
	line-height: 1;
	text-align: center;
	background: var(--grad);
	background-size: var(--gw, 100%) 100%;
	background-position: calc(var(--gx, 0px) * -1) 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.grad-piece { display: inline-block; height: auto; }

/* WHY: stacked cards */
.why { padding: 40px 0 120px; }
.stack { display: grid; gap: 28px; }
.card {
	position: sticky;
	top: 104px;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	min-height: 540px;
	padding: 10px;
	border-radius: 36px;
	background: linear-gradient(160deg, #0a0d4e 0%, #050738 65%);
	box-shadow: 0 0 0 1px var(--line-2) inset, 0 -40px 100px -40px rgba(0, 0, 0, 0.95), 0 0 120px -50px rgba(0, 134, 254, 0.5);
	transform-origin: 50% 0%;
}
.card:nth-child(2) { top: 122px; }
.card:nth-child(3) { top: 140px; }
.card:nth-child(4) { top: 158px; }
.card:nth-child(5) { top: 176px; }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(1, 0, 25, var(--shade, 0)); pointer-events: none; }
.card-visual {
	position: relative;
	border-radius: 28px;
	overflow: hidden;
	background:
		radial-gradient(70% 60% at 30% 100%, rgba(0, 176, 240, 0.4), rgba(0, 176, 240, 0) 70%),
		radial-gradient(60% 60% at 90% 0%, rgba(0, 71, 171, 0.8), rgba(0, 71, 171, 0) 70%),
		linear-gradient(160deg, #13208a, #050a4a);
}
.card-copy { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: clamp(28px, 4.4vw, 60px); }
.card-copy h3 { font-size: clamp(30px, 3.2vw, 46px); font-weight: 560; letter-spacing: -0.045em; line-height: 1.04; }
.card-copy p { color: var(--muted); font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.7; }
.card-copy strong { color: var(--text); font-weight: 600; }
/* Short screens: tighter stacked cards so each one fits while pinned; if one still cannot fit, the script lets the cards scroll normally */
.stack-flat .card { position: relative; top: 0 !important; }
@media (min-width: 901px) and (max-height: 860px) {
	.card { top: 86px; min-height: 430px; }
	.card:nth-child(2) { top: 98px; }
	.card:nth-child(3) { top: 110px; }
	.card:nth-child(4) { top: 122px; }
	.card:nth-child(5) { top: 134px; }
	.card-copy { gap: 14px; padding: 24px clamp(28px, 3.6vw, 48px); }
	.card-copy h3 { font-size: clamp(26px, 2.7vw, 38px); }
	.card-copy p { font-size: 15px; line-height: 1.6; }
}

.charges { border-top: 1px solid var(--line-2); }
.charges-title { padding: 16px 0 6px; color: var(--dim) !important; font-size: 12px !important; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.charge { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--line-2); font-size: 15px; color: var(--muted); }
.charge b { text-align: right; font-weight: 600; color: var(--peach); }
.charge b { color: var(--hl); }

.visual-crs, .visual-care, .visual-track { display: grid; place-items: center; padding: 40px; }
.visual-names { display: grid; place-items: center; padding: 36px; perspective: 1400px; }
.cert { position: relative; width: min(330px, 74%); padding: 30px 28px 24px; border-radius: 4px; background: #fbfaf6; color: #1a1d3a; box-shadow: -26px 36px 56px -8px rgba(1, 0, 30, 0.55), -5px 7px 16px rgba(1, 0, 30, 0.3); transform: rotateY(-14deg) rotateX(5deg) rotateZ(-3deg); transition: transform 1.2s var(--ease); }
.card:hover .cert { transform: rotateY(-8deg) rotateX(3deg) rotateZ(-2deg); }
.cert::before { content: ""; position: absolute; inset: 9px; border: 1.5px solid rgba(0, 71, 171, 0.55); outline: 1px solid rgba(0, 71, 171, 0.22); outline-offset: 3px; pointer-events: none; }
.cert small { display: block; text-align: center; font: 600 8.5px/1.2 "Inter", sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: #5a6080; }
.cert h4 { margin: 10px 0 14px; text-align: center; font: 400 19px/1.12 "Instrument Serif", serif; letter-spacing: 0.04em; text-transform: uppercase; }
.cert-line { text-align: center; font: 500 10.5px/1 "Inter", sans-serif; color: #5a6080; }
.cert-name { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 16px; }
.cert-blank { display: block; width: 58%; height: 16px; border-radius: 3px; background: linear-gradient(90deg, #d6dcee 0, #eef1f9 40%, #d6dcee 80%); background-size: 200% 100%; animation: shimmer 2.2s linear infinite; }
.cert-name b { font: 700 13px/1 "Inter", sans-serif; letter-spacing: 0.04em; white-space: nowrap; }
@keyframes shimmer { to { background-position: -200% 0; } }
.cert-lines i { display: block; height: 5px; margin: 9px 0; border-radius: 3px; background: #dfe4f1; }
.cert-sign { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 20px; padding-top: 6px; }
.cert-scribble { width: 92px; height: 32px; fill: none; stroke: #1a2a7a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cert-sub { white-space: nowrap; font: 600 8px/1 "Inter", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #5a6080; }
.cert-stamp { position: absolute; right: -22px; bottom: 34px; display: grid; place-items: center; align-content: center; gap: 2px; width: 98px; height: 98px; border: 3px double var(--hl); border-radius: 50%; background: rgba(2, 0, 51, 0.9); color: var(--hl); font: 800 11px/1 "Inter", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 14px 30px rgba(1, 0, 30, 0.5); transform: rotate(-14deg); animation: stamp-in 6s var(--ease) infinite; }
.cert-stamp svg { font-size: 22px; stroke-width: 2.2; }
@keyframes stamp-in { 0% { opacity: 0; transform: rotate(-14deg) scale(1.6); } 9%, 90% { opacity: 1; transform: rotate(-14deg) scale(1); } 100% { opacity: 0; transform: rotate(-14deg) scale(1); } }

.crs-panel, .care { width: min(390px, 100%); padding: 18px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 22px; background: rgba(255, 255, 255, 0.1); box-shadow: 0 30px 80px rgba(2, 0, 51, 0.45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

.visual-map { display: grid; place-items: center; padding: 70px 26px; }
.mys { width: 100%; height: auto; overflow: visible; }
.mys-land { fill: url(#landg); stroke: rgba(170, 215, 255, 0.55); stroke-width: 0.8; filter: drop-shadow(0 10px 24px rgba(0, 0, 40, 0.5)); }
.mys-route { fill: none; stroke: var(--hl); stroke-width: 1.6; stroke-dasharray: 4 5; animation: dash 1.4s linear infinite; }
.mys-node { fill: #fff; stroke: var(--hl-solid); stroke-width: 2.4; }
.mys-node.origin { fill: var(--hl); stroke: #fff; }
@keyframes dash { to { stroke-dashoffset: -18; } }
.map-tag { position: absolute; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 14px; background: rgba(255, 255, 255, 0.88); color: var(--navy); box-shadow: 0 16px 40px rgba(2, 0, 51, 0.3); }
.map-tag small { display: block; color: #4a5378; font-size: 11.5px; font-weight: 500; }
.map-tag b { display: block; font-size: 15px; }
.tag-w { left: 6%; bottom: 8%; }
.tag-e { right: 6%; top: 7%; text-align: right; }

.crs-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 14px; font-size: 13.5px; font-weight: 600; }
.crs-badge { padding: 5px 9px; border-radius: 8px; background: #fff; color: var(--blue-dark); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; }
.crs-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; font-size: 14.5px; }
.crs-row + .crs-row { margin-top: 4px; }
.crs-row em { font-family: inherit; font-style: normal; font-size: 12px; color: var(--muted); }
.crs-check { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 15px; }
.crs-row.live { background: rgba(255, 255, 255, 0.12); }
.crs-row.live .crs-check { background: var(--hl); color: var(--navy); }
.crs-row.live em { color: var(--hl); font-weight: 600; }

.care { display: grid; gap: 10px; }
a.care-row { transition: background 0.3s; }
a.care-row:hover { background: rgba(255, 255, 255, 0.14); }
.care-row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.08); }
.care-row b { display: block; font-size: 15px; }
.care-row small { display: block; color: var(--muted); font-size: 13px; }
.care-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--grad); color: var(--navy); font-weight: 700; }
.care-call { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.track { width: min(420px, 100%); text-align: center; }
.track-since { position: relative; margin-bottom: 2px; font-family: "Instrument Serif", serif; font-style: italic; font-size: clamp(22px, 2.4vw, 32px); color: var(--hl); }
.track-year { font-family: "Instrument Serif", serif; font-size: clamp(90px, 10vw, 150px); line-height: 0.9; letter-spacing: -0.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* SERVICES */
.services { padding: 120px 0 0; }
.expertise { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.expertise-head { position: sticky; top: 120px; }
.note { display: inline-flex; margin-top: 32px; padding: 12px 18px; border-radius: 14px; background: rgba(0, 134, 254, 0.08); box-shadow: 0 0 0 1px rgba(0, 134, 254, 0.2) inset; color: var(--peach); font-size: 15px; }
.expertise-body { display: flex; flex-direction: column; gap: 28px; padding-top: 44px; }
.expertise-body p { color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.65; }
.expertise-body .lead { color: var(--text); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -0.03em; }

.rail { position: relative; margin-top: 150px; overflow: hidden; }
.rail-pin { padding: 40px 0; }
.rail-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 44px; }
.rail-progress { flex: none; width: 200px; height: 2px; margin-bottom: 16px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.rail-progress i { display: block; height: 100%; background: var(--hl); transform-origin: left; transform: scaleX(0); }
.rail-track { display: flex; gap: 20px; width: max-content; padding: 0 max(var(--gutter), (100vw - var(--wrap)) / 2); }
.crit {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 380px;
	height: 340px;
	padding: 32px;
	border-radius: var(--radius);
	background: linear-gradient(160deg, #0c0f56 0%, #060838 60%);
	box-shadow: 0 0 0 1px var(--line-2) inset;
	overflow: hidden;
}
.crit::after { content: ""; position: absolute; right: -30%; bottom: -40%; width: 90%; height: 80%; background: radial-gradient(closest-side, rgba(0, 134, 254, 0.3), rgba(0, 134, 254, 0)); pointer-events: none; }
.crit-n { font-family: "Instrument Serif", serif; font-style: italic; font-size: 22px; color: var(--peach); }
.crit-body { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; gap: 20px; margin-top: 28px; }
.crit-body p { margin-top: auto; }
.crit-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(160deg, rgba(150, 215, 255, 0.16), rgba(61, 107, 255, 0.06)); box-shadow: 0 0 0 1px rgba(150, 215, 255, 0.18) inset; color: var(--hl); font-size: 26px; }
.ico-working { display: block; width: 30px; height: 30px; background: currentColor; -webkit-mask: var(--working) center / contain no-repeat; mask: var(--working) center / contain no-repeat; }
.crit p { font-size: 23px; font-weight: 520; line-height: 1.22; letter-spacing: -0.03em; }
.crit strong { font-weight: 600; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* PACKAGE, after Nocturne */
.package { padding: 0; }
.package-pin { display: flex; align-items: center; height: 100vh; overflow: hidden; }
.package-track { display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); width: max-content; padding: 0 max(var(--gutter), (100vw - var(--wrap)) / 2); will-change: transform; }
.pk-intro { flex: none; width: min(440px, 80vw); }
.scroll-hint { display: inline-flex; gap: 8px; margin-top: 36px; color: var(--dim); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.scroll-hint span { animation: nudge 1.6s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }
.pk-photo { flex: none; width: min(64vw, 820px, calc((100vh - 170px) * 1.601)); border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-2), 0 50px 100px -40px rgba(0, 0, 0, 0.9); }
.pk-photo img { width: 100%; height: auto; aspect-ratio: 927 / 579; object-fit: cover; transform: scale(1.15); will-change: transform; }
.pk-list { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.pk-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: none;
	width: clamp(240px, 22vw, 300px);
	height: clamp(320px, 54vh, 420px);
	padding: 24px 26px 22px;
	border-radius: 28px;
	background: linear-gradient(170deg, #0b0e50, #050733);
	box-shadow: 0 0 0 1px var(--line-2) inset;
	overflow: hidden;
}
.pk-item::after { content: ""; position: absolute; left: -30%; bottom: -40%; width: 120%; height: 70%; background: radial-gradient(ellipse, rgba(0, 134, 254, 0.18), transparent 60%); }
.pk-item:nth-child(even) { transform: translateY(36px); }
.pk-n { position: relative; z-index: 3; flex: none; font-size: clamp(52px, min(7vw, 12vh), 110px); line-height: 0.9; letter-spacing: -0.06em; font-weight: 600; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pk-name { position: relative; z-index: 3; flex: none; font-size: clamp(17px, 2.9vh, 24px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 540; }

/* Each sticker sits in the space between the number and the name, scaled to fit it, so it can never reach either */
.pk-stickers { position: relative; z-index: 2; flex: 1 1 0; min-height: 0; margin: 2px 0 10px; pointer-events: none; }
.sticker { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 9px rgba(0, 0, 20, 0.5)); will-change: transform; transition: transform 0.6s var(--ease), filter 0.6s var(--ease); }
@media (hover: hover) {
	/* Only the sticker reacts, not the card. The scroll animation drives .pk-stickers, so the sticker's own transform is free for the hover */
	.sticker { pointer-events: auto; }
	.sticker:hover { transform: translateY(-10px) scale(1.1) rotate(-3deg); filter: drop-shadow(0 18px 16px rgba(0, 0, 20, 0.55)); }
	.pk-item:nth-child(even) .sticker:hover { transform: translateY(-10px) scale(1.1) rotate(3deg); }
}

/* PURCHASE, after Nocturne */
.purchase { padding: 150px 0 60px; }
.purchase-card {
	position: relative;
	padding: clamp(36px, 6vw, 88px);
	border-radius: 40px;
	background: linear-gradient(160deg, #0a1068, #04052e 70%);
	box-shadow: 0 0 0 1px var(--line-2) inset;
	overflow: hidden;
}
.purchase-glow { position: absolute; right: -20%; top: -40%; width: 70%; height: 90%; background: radial-gradient(circle, rgba(61, 107, 255, 0.28), transparent 60%); filter: blur(20px); pointer-events: none; }
.purchase-card > * { position: relative; }
.flow {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-areas: "dec not not ." "s1 s2 s3 res";
	gap: 76px 48px;
	align-items: stretch;
	margin-top: 56px;
}
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flow-lines path.edge { fill: none; stroke: rgba(160, 205, 255, 0.55); stroke-width: 1.6; stroke-linejoin: round; marker-end: url(#flow-arrow); }
.flow-lines marker path { fill: rgba(160, 205, 255, 0.8); }
.flow-lines text { fill: var(--muted); font: 600 12px "Inter", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
.fnode { position: relative; z-index: 1; }
#f-dec { grid-area: dec; }
#f-not { grid-area: not; }
#f-1 { grid-area: s1; }
#f-2 { grid-area: s2; }
#f-3 { grid-area: s3; }
#f-res { grid-area: res; }
.fdecision { display: grid; place-items: center; min-height: 190px; padding: 0 30px; text-align: center; }
.fd-shape { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(150, 215, 255, 0.22), rgba(61, 107, 255, 0.1)); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.fd-shape::after { content: ""; position: absolute; inset: 1.5px; background: linear-gradient(160deg, #0f1a78, #070a4a); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.fdecision p { position: relative; max-width: 150px; font-size: 18px; font-weight: 560; letter-spacing: -0.02em; line-height: 1.2; }
.fside { align-self: center; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-radius: 20px; border: 1px dashed rgba(160, 205, 255, 0.35); background: rgba(225, 238, 255, 0.03); }
.fside p { color: var(--muted); font-size: 16px; line-height: 1.6; }
.fstep { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 22px; background: linear-gradient(180deg, rgba(20, 30, 120, 0.6), rgba(6, 8, 56, 0.6)); box-shadow: 0 0 0 1px var(--line-2) inset; }
.fnum { font-family: "Instrument Serif", serif; font-style: italic; font-size: 26px; line-height: 1; color: var(--peach); }
.fstep h3 { font-size: 20px; font-weight: 560; letter-spacing: -0.025em; line-height: 1.2; }
.fstep p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.fstep i { color: var(--text); }
.fresult { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 26px; border-radius: 22px; background: rgba(0, 134, 254, 0.12); box-shadow: 0 0 0 1px rgba(0, 134, 254, 0.4) inset, 0 30px 60px -30px rgba(0, 134, 254, 0.6); }
.fresult p { font-size: clamp(20px, 1.7vw, 25px); font-weight: 560; letter-spacing: -0.025em; line-height: 1.2; }
.fresult { background: rgba(255, 200, 61, 0.09); box-shadow: 0 0 0 1px rgba(255, 200, 61, 0.45) inset, 0 30px 60px -30px rgba(255, 200, 61, 0.35); }
.purchase-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--line-2); }

/* PROHIBITED ACTIVITIES */
.prohibited { padding: 60px 0 160px; }
.prohibited-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 80px); align-items: start; padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-2); }
.prohibited-text { color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.7; }

/* FAQ */
.faq { padding: 40px 0 170px; }
.faq-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-head { position: sticky; top: 120px; }
.faq-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 44px; padding: 28px; border-radius: var(--radius); background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: 0 0 0 1px var(--line-2) inset; }
.faq-aside h3 { font-size: 22px; font-weight: 560; letter-spacing: -0.03em; }
.faq-list { border-top: 1px solid var(--line-2); }
.qa { border-bottom: 1px solid var(--line-2); }
.qa-q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	width: 100%;
	padding: 28px 0;
	border: 0;
	background: none;
	color: var(--text);
	text-align: left;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 520;
	letter-spacing: -0.02em;
	line-height: 1.3;
	cursor: pointer;
}
.qa-q i { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2) inset; transition: background 0.4s, box-shadow 0.4s, transform 0.5s var(--ease); }
.qa-q i::before, .qa-q i::after { content: ""; position: absolute; left: 12px; right: 12px; top: 18.25px; height: 1.5px; background: var(--plus); transition: transform 0.5s var(--ease), background 0.3s; }
.qa-q i::after { transform: rotate(90deg); }
.qa-q:hover i { background: rgba(225, 238, 255, 0.08); }
.qa-q i { box-shadow: 0 0 0 1px rgba(255, 200, 61, 0.45) inset; }
.qa.open .qa-q i { background: var(--accent); box-shadow: none; transform: rotate(180deg); }
.qa.open .qa-q i::before, .qa.open .qa-q i::after { background: var(--accent-ink); }
.qa.open .qa-q i::after { transform: rotate(0); }
.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease); }
.qa-a > div { overflow: hidden; }
.qa-a p { max-width: 62ch; padding: 0 56px 28px 0; color: var(--muted); }
.qa-a strong { color: var(--text); }
.qa.open .qa-a { grid-template-rows: 1fr; }

/* CONTACT */
.contact { padding: 40px 0 140px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; }
.contact-cards { display: grid; gap: 20px; }
.ccard { display: flex; flex-direction: column; gap: 6px; padding: 30px; border-radius: var(--radius); background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: 0 0 0 1px var(--line-2) inset; transition: transform 0.5s var(--ease), box-shadow 0.5s; }
a.ccard:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(0, 134, 254, 0.4) inset; }
.ccard .icon-badge { margin-bottom: 14px; }
.ccard-label { color: var(--dim); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.ccard-value { font-size: clamp(28px, 2.6vw, 38px); font-weight: 560; letter-spacing: -0.04em; font-style: normal; }
.ccard-value.sm { color: var(--muted); font-size: 16px; font-weight: 400; letter-spacing: 0; line-height: 1.6; overflow-wrap: anywhere; }
a.ccard-value:hover { color: var(--text); }
.map-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--hl); font-weight: 600; font-size: 15px; }
.map { min-height: 520px; border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: 0 0 0 1px var(--line-2); }
.map iframe { display: block; width: 100%; height: 100%; min-height: 520px; border: 0; }

/* FOOTER, after Nocturne */
.footer { position: relative; padding: clamp(80px, 10vw, 120px) var(--gutter) 72px; border-top: 1px solid var(--line); overflow: hidden; }
.footer-cols { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: 40px; max-width: var(--wrap); margin: 0 auto; color: var(--muted); font-size: 15.5px; }
.footer ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.footer a { transition: color 0.3s; }
.footer a:hover { color: var(--text); }
.footer-cols p + p { margin-top: 8px; }
.footer-company { color: var(--text); font-weight: 600; }
.footer-reg { margin-bottom: 14px; color: var(--dim); font-size: 13.5px; }
.footer-phone { color: var(--text); font-size: 24px; font-weight: 560; letter-spacing: -0.03em; }
.wordmark { margin-top: clamp(60px, 8vw, 100px); overflow: hidden; line-height: 1; text-align: center; }
.wordmark span {
	display: inline-block;
	padding: 0 0.03em;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 16.2vw;
	line-height: 1.08;
	padding-top: 0.04em;
	margin-bottom: -0.06em;
	letter-spacing: -0.03em;
	white-space: nowrap;
	background: linear-gradient(180deg, rgba(150, 215, 255, 0.9), rgba(61, 107, 255, 0.25) 70%, transparent 95%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
/* The dot fades with the letters: the same gradient stops, mapped to the dot's position inside the wordmark (1.12em tall, dot starts 0.376em down) */
.wm-o { display: inline-block; width: 0.58em; height: 0.58em; margin: 0 0.005em 0 0.035em; border-radius: 50%; background: linear-gradient(180deg, rgba(0, 176, 240, 1) 0%, rgba(0, 120, 254, 0.45) 70%, rgba(0, 120, 254, 0) 95%) 0 -0.376em / 100% 1.12em no-repeat; transform: translateY(0.02em); }

/* Responsive */
@media (max-width: 1080px) {
	.nav-links a { padding: 8px 10px; }
	.window { grid-template-columns: 200px 1fr; }
	.card-copy { padding: 36px; }
}

@media (max-width: 900px) {
	.nav { padding: 6px 6px 6px 18px; }
	.nav-links, .nav-cta { display: none; }
	.burger { display: block; }

	.hero { padding-bottom: 46vw; }
	.window { grid-template-columns: 1fr; height: auto; }
	.window-side { display: none; }
	.window-main { aspect-ratio: 4 / 3.2; }
	.chip-a { left: 14px; top: 14px; right: 14px; max-width: none; }
	.chip-b { display: none; }
	.layer-front { bottom: -40vh; height: calc(46vw + 60vh); }
	.about { margin-top: 0; padding-bottom: 120px; }
	.stats { grid-template-columns: 1fr 1fr; }
	.stat-since { grid-column: 1 / -1; }

	.card { position: relative; top: 0 !important; grid-template-columns: 1fr; min-height: 0; }
	.card-visual { min-height: 300px; }
	.visual-names { min-height: 400px; }
	.card-copy { padding: 28px 18px 24px; }

	.expertise { grid-template-columns: 1fr; gap: 0; }
	.expertise-head { position: static; }


	.purchase { padding-top: 60px; }
	.flow { grid-template-columns: 1fr; grid-template-areas: "dec" "not" "s1" "s2" "s3" "res"; gap: 52px; }
	.fdecision { margin-left: 34px; min-height: 160px; }
	.fside { margin-left: 34px; }
	.fdecision p { max-width: 170px; }
	.prohibited-grid { grid-template-columns: 1fr; gap: 24px; }
	.prohibited { padding-bottom: 120px; }
	.faq { padding-bottom: 120px; }
	.faq-grid { grid-template-columns: 1fr; }
	.faq-head { position: static; }
	.contact-grid { grid-template-columns: 1fr; }
	.map, .map iframe { min-height: 380px; }
	.footer-cols { grid-template-columns: 1fr 1fr; }
	.footer-cols > div:last-child { grid-column: 1 / -1; }
}

/* The sideways rows become vertical stacks on narrow screens and on very short windows, where pinning them would cut them off */
@media (max-width: 900px), (max-height: 509px) {
	.rail { margin-top: 110px; }
	.rail-head { flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 32px; }
	.rail-progress { display: none; }
	.rail-track { flex-direction: column; width: auto; padding: 0 var(--gutter); }
	.crit { width: 100%; height: auto; min-height: 270px; }
	.crit p { font-size: 21px; }
	.package { padding: 110px 0; }
	.package-pin { height: auto; display: block; overflow: visible; }
	.package-track { flex-direction: column; align-items: stretch; width: auto; padding: 0 var(--gutter); }
	.pk-intro, .pk-photo { width: 100%; }
	.pk-photo img { transform: none; }
	.scroll-hint { display: none; }
	.pk-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
	.pk-item, .pk-item:nth-child(even) { width: auto; height: auto; min-height: 300px; padding: 22px; transform: none; }
	.pk-n { font-size: 56px; }
	.pk-name { font-size: 19px; }
	.pk-stickers { flex: none; height: clamp(130px, 30vw, 210px); margin: 4px 0 8px; }
}

/* Short desktop windows: tighter pinned rows, and nothing sticky that is taller than the window */
@media (min-width: 901px) and (max-height: 700px) {
	.expertise-head, .faq-head { position: static; }
}
@media (min-width: 901px) and (min-height: 510px) and (max-height: 700px) {
	.rail-pin { padding: 24px 0; }
	.rail-head { margin-bottom: 24px; }
	.rail-head .h-xl { font-size: clamp(30px, 4.2vw, 52px); }
	.crit { height: 290px; padding: 24px; }
	.crit-body { margin-top: 16px; gap: 14px; }
	.crit-icon { width: 48px; height: 48px; font-size: 22px; }
	.crit p { font-size: 20px; }
}

/* No scripts, or reduced motion: no pinned sideways rows, everything stays reachable */
html.static-layout .card, html.no-js .card { position: relative; top: 0 !important; }
@media (min-width: 901px) and (min-height: 510px) {
	html.static-layout .rail-track, html.no-js .rail-track { flex-wrap: wrap; width: auto; }
	html.static-layout .rail-progress, html.no-js .rail-progress { display: none; }
	html.static-layout .package-pin, html.no-js .package-pin { height: auto; display: block; padding: 40px 0 0; overflow: visible; }
	html.static-layout .package-track, html.no-js .package-track { flex-wrap: wrap; align-items: flex-start; row-gap: 40px; width: auto; }
	html.static-layout .pk-intro, html.no-js .pk-intro { width: 100%; }
	html.static-layout .pk-photo img, html.no-js .pk-photo img { transform: none; }
	html.static-layout .scroll-hint, html.no-js .scroll-hint { display: none; }
	html.static-layout .pk-list, html.no-js .pk-list { flex-wrap: wrap; }
	html.static-layout .pk-item:nth-child(even), html.no-js .pk-item:nth-child(even) { transform: none; }
}

@media (max-width: 560px) {
	:root { --gutter: 16px; }
	body { font-size: 16px; }
	.brand .logo { font-size: 20px; }
	.hero-copy { padding-top: 110px; }
	.hero-sub span { display: block; margin: 4px 0 0; }
	.btn-lg { height: 50px; padding: 0 22px; font-size: 15px; }
	.window-wrap { margin-top: 44px; }
	.window { padding: 6px; border-radius: 22px; }
	.window-main { border-radius: 17px; }
	.window-chip { padding: 10px 12px; }
	.chip-icon { width: 30px; height: 30px; }
	.card { padding: 6px; border-radius: 26px; }
	.card-visual { border-radius: 21px; }
	.visual-crs, .visual-care, .visual-track { padding: 22px; }
	.visual-names { padding: 22px; }
	.cert { width: 84%; padding: 24px 20px 20px; }
	.cert-sub { font-size: 7px; letter-spacing: 0.1em; }
	.visual-map { padding: 84px 12px; }
	.map-tag { padding: 8px 11px; }
	.map-tag b { font-size: 13.5px; }
	.charge { flex-direction: column; gap: 2px; }
	.charge b { text-align: left; }
	.crit { padding: 24px; }
	.pk-item, .pk-item:nth-child(even) { min-height: 250px; padding: 18px; }
	.pk-name { font-size: 17px; }
	.pk-stickers { height: 128px; }
	.qa-q { gap: 14px; padding: 22px 0; }
	.qa-a p { padding-right: 0; }
	.faq-aside, .ccard { padding: 22px; }
	.purchase-card { border-radius: 28px; padding: 30px 20px; }
	.purchase-actions .btn { width: 100%; }
	.footer-cols { grid-template-columns: 1fr; }
	.stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
	.loader { display: none; }
}

/* Lenis base styles (v1.3.4), inlined to avoid a render-blocking CDN request */
html.lenis,html.lenis body{height:auto}.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-smooth iframe{pointer-events:none}.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}