/* ==========================================================================
   VTO Ultimate — public marketing site
   "Editorial travel": warm paper, ink, hairlines, Fraunces serif display,
   full-bleed photography with scrim overlays.

   NOTE on gradients: the app-wide "no gradients" rule applies to flat UI
   surfaces. The linear-gradients in this file are photographic scrims only —
   a legibility requirement for text over imagery, not decoration.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Brand */
	--brand:      #0e93dd;
	--brand-dk:   #0b78b4;   /* solid button surface — AA with white text */
	--brand-deep: #0a4f76;   /* serif/icon accent on paper */
	--brand-50:   #e8f4fc;

	/* Editorial paper + ink */
	--paper:   #faf8f3;
	--paper-2: #f3efe7;
	--ink:     #1e232b;
	--body:    #4c545e;
	--muted:   #687077;
	--rule:    #e5ddcf;
	--terra:        #b35c2d; /* terracotta — numerals + small accents */
	--terra-bright: #d68d5c; /* terracotta lifted for night surfaces */
	--live-green:   #46c97a; /* departures-board live indicator */

	/* Night surfaces (header glass, CTA band, mock app rail) */
	--night:       #14181f;
	--night-2:     #1f242c;
	--on-night:    rgba(255, 255, 255, 0.78);
	--on-night-hi: #ffffff;

	/* Glass (echoes the login card) */
	--glass:        rgba(24, 29, 36, 0.62);
	--glass-border: rgba(255, 255, 255, 0.14);

	/* Semantic — form alerts + mock pills only */
	--c-green: #1c7a36;
	--c-coral: #b3261e;
	--c-teal:  #0f6371;
	--c-amber: #9a5b13;

	/* Shape / depth / rhythm */
	--radius-sm: 10px;
	--radius:    16px;
	--radius-lg: 22px;
	--shadow-soft:  0 1px 2px rgba(20, 24, 31, 0.05), 0 18px 44px -26px rgba(20, 24, 31, 0.25);
	--shadow-photo: 0 32px 80px -32px rgba(20, 24, 31, 0.45);
	--shadow-glass: 0 24px 60px rgba(0, 0, 0, 0.38);
	--maxw:      1200px;
	--maxw-text: 720px;
	--header-h:  76px;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   02. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.7;
	color: var(--body);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-dk); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--brand-deep); }

::selection { background: var(--brand-50); color: var(--brand-deep); }

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

.pub-container {
	width: 100%;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 24px;
}

.pub-main { display: block; }

/* Any future page that doesn't open with a photo hero still clears the
   fixed header. */
.pub-main > .pub-section:first-child { padding-top: calc(var(--header-h) + 64px); }

/* --------------------------------------------------------------------------
   03. Typography
   -------------------------------------------------------------------------- */
h1, h2 {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 540;
	color: var(--ink);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.9rem, 6.2vw, 5rem); }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.1rem); }

h1 em, h2 em {
	font-style: italic;
	font-weight: 500;
	color: inherit;
}

h3 {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--ink);
	line-height: 1.3;
	margin: 0 0 0.45em;
}

h4 {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 0.9em;
}

p { margin: 0 0 1em; }

.pub-lead {
	font-size: 1.22rem;
	line-height: 1.6;
	max-width: var(--maxw-text);
	margin-bottom: 1.4em;
}

/* Editorial eyebrow — hairline rule + serif numeral + tracked caps label. */
.pub-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 1.4em;
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.pub-eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--terra);
	flex: 0 0 auto;
}

.pub-eyebrow .pub-no {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-style: italic;
	font-weight: 560;
	font-size: 1.05rem;
	letter-spacing: 0;
	color: var(--terra);
	margin-right: -2px;
}

.pub-eyebrow svg { width: 16px; height: 16px; }

.pub-eyebrow-center { justify-content: center; }

/* Over-photo variant */
.pub-eyebrow-light { color: rgba(255, 255, 255, 0.85); }
.pub-eyebrow-light::before { background: rgba(255, 255, 255, 0.55); }
.pub-eyebrow-light .pub-no { color: #ffd9c0; }

/* Magazine credit line on photo sections. */
.pub-photo-credit {
	position: absolute;
	right: 28px;
	bottom: 22px;
	z-index: 3;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	display: flex;
	align-items: center;
	gap: 10px;
	pointer-events: none;
}

.pub-photo-credit::before {
	content: "";
	width: 22px;
	height: 1px;
	background: rgba(255, 255, 255, 0.45);
}

/* --------------------------------------------------------------------------
   04. Buttons
   -------------------------------------------------------------------------- */
.pub-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 26px;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 0.98rem;
	line-height: 1.2;
	cursor: pointer;
	transition: all 0.2s var(--ease);
	white-space: nowrap;
}

.pub-btn svg { width: 17px; height: 17px; transition: transform 0.2s var(--ease); }
.pub-btn:hover svg { transform: translateX(3px); }

.pub-btn-lg { padding: 16px 32px; font-size: 1.05rem; }

.pub-btn-primary {
	background: var(--brand-dk);
	color: #fff;
}
.pub-btn-primary:hover {
	background: var(--brand-deep);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-soft);
}

/* Hairline button on paper. */
.pub-btn-ghost {
	background: transparent;
	border-color: var(--ink);
	color: var(--ink);
}
.pub-btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* Frosted button over photography. */
.pub-btn-glass {
	background: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}
.pub-btn-glass:hover { background: rgba(255, 255, 255, 0.22); border-color: #fff; color: #fff; }

/* Light button on night surfaces. */
.pub-btn-light {
	background: var(--paper);
	color: var(--ink);
}
.pub-btn-light:hover {
	background: #fff;
	color: var(--ink);
	transform: translateY(-1px);
	box-shadow: var(--shadow-soft);
}

/* --------------------------------------------------------------------------
   05. Icons
   -------------------------------------------------------------------------- */
.pub-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	border-radius: var(--radius-sm);
	background: var(--paper-2);
	color: var(--brand-deep);
}
.pub-ico svg { width: 22px; height: 22px; }

/* Thin-stroke editorial variant — no tile, just the mark. */
.pub-ico-line {
	background: transparent;
	width: 30px;
	height: 30px;
	color: var(--brand-deep);
}
.pub-ico-line svg { width: 26px; height: 26px; stroke-width: 1.5; }

.pub-ico-sm {
	display: inline-flex;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
	color: var(--brand-deep);
}
.pub-ico-sm svg { width: 16px; height: 16px; }

/* Icon tile tone modifiers — background tint + matching icon colour. */
.pub-ico.ic-blue   { background: var(--brand-50); color: var(--brand-deep); }
.pub-ico.ic-teal   { background: #e2f6f9; color: var(--c-teal); }
.pub-ico.ic-amber  { background: #fdf0e0; color: var(--c-amber); }
.pub-ico.ic-coral  { background: #fbe9e8; color: var(--c-coral); }
.pub-ico.ic-green  { background: #e5f6ea; color: var(--c-green); }
.pub-ico.ic-indigo { background: #eef0fb; color: #4c4fb0; }

/* --------------------------------------------------------------------------
   06. Header / navigation — fixed frosted glass over the hero photo
   -------------------------------------------------------------------------- */
.pub-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	height: var(--header-h);
	background: rgba(20, 24, 31, 0.55);
	-webkit-backdrop-filter: blur(14px) saturate(130%);
	backdrop-filter: blur(14px) saturate(130%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.pub-header.is-stuck {
	background: rgba(20, 24, 31, 0.92);
	border-bottom-color: rgba(255, 255, 255, 0.12);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pub-header { background: rgba(20, 24, 31, 0.92); }
}

.pub-header-inner {
	height: var(--header-h);
	display: flex;
	align-items: center;
	gap: 28px;
}

.pub-brand { display: inline-flex; align-items: center; }
.pub-brand-logo { height: 34px; width: auto; }

.pub-nav { margin-left: auto; }

.pub-nav-list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pub-nav-list a {
	display: inline-block;
	padding: 9px 14px;
	font-weight: 500;
	font-size: 0.98rem;
	color: var(--on-night);
	border-radius: 8px;
	position: relative;
}

.pub-nav-list a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 4px;
	height: 1px;
	background: var(--on-night-hi);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s var(--ease);
}

.pub-nav-list a:hover { color: var(--on-night-hi); }
.pub-nav-list a:hover::after { transform: scaleX(1); }

.pub-nav-list a.is-active { color: var(--on-night-hi); }
.pub-nav-list a.is-active::after { transform: scaleX(1); }

.pub-nav-list a:focus-visible { outline-color: #fff; }

.pub-nav-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: 4px;
}

.pub-login { padding: 10px 20px; font-size: 0.92rem; }
.pub-login svg { width: 16px; height: 16px; }

/* Hamburger */
.pub-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.pub-nav-toggle span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--on-night-hi);
	border-radius: 2px;
	transition: all 0.25s var(--ease);
}

/* --------------------------------------------------------------------------
   07. Hero — full-bleed photography + scrims
   -------------------------------------------------------------------------- */
.pub-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(92vh, 880px);
	padding: calc(var(--header-h) + 48px) 0 96px;
	overflow: hidden;
	isolation: isolate;
}

.pub-photo-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* Scrim layers (legibility — see note at top of file). */
.pub-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to bottom, rgba(14, 18, 25, 0.62), rgba(14, 18, 25, 0) 180px),
		linear-gradient(rgba(16, 20, 27, 0.22), rgba(16, 20, 27, 0.22));
}

.pub-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgba(14, 18, 25, 0.80) 0%, rgba(14, 18, 25, 0.38) 42%, rgba(14, 18, 25, 0) 72%),
		linear-gradient(96deg, rgba(14, 18, 25, 0.55) 0%, rgba(14, 18, 25, 0) 60%);
}

.pub-hero--bright::before {
	background:
		linear-gradient(to bottom, rgba(14, 18, 25, 0.66), rgba(14, 18, 25, 0) 180px),
		linear-gradient(rgba(16, 20, 27, 0.34), rgba(16, 20, 27, 0.34));
}

.pub-hero-content {
	position: relative;
	z-index: 2;
	max-width: 720px;
}

.pub-hero-content h1 { color: #fff; margin-bottom: 0.4em; }
.pub-hero-content h1 em { color: #ffd9c0; }

.pub-hero-content .pub-lead {
	color: rgba(255, 255, 255, 0.88);
	max-width: 560px;
}

.pub-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 6px;
}

/* Orchestrated load — hero copy rises in sequence. */
.pub-hero-content > * {
	animation: pubRise 0.9s var(--ease) both;
}
.pub-hero-content > *:nth-child(1) { animation-delay: 0.05s; }
.pub-hero-content > *:nth-child(2) { animation-delay: 0.16s; }
.pub-hero-content > *:nth-child(3) { animation-delay: 0.27s; }
.pub-hero-content > *:nth-child(4) { animation-delay: 0.38s; }

@keyframes pubRise {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Slow settle on the photo itself. */
.pub-hero .pub-photo-img { animation: pubSettle 2.4s var(--ease) both; }

@keyframes pubSettle {
	from { transform: scale(1.045); }
	to   { transform: scale(1); }
}

/* Scroll cue */
.pub-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 26px;
	z-index: 3;
	width: 1px;
	height: 44px;
	background: rgba(255, 255, 255, 0.35);
	overflow: hidden;
}

.pub-scroll-cue::after {
	content: "";
	position: absolute;
	left: 0;
	top: -50%;
	width: 100%;
	height: 50%;
	background: #fff;
	animation: pubCue 2s var(--ease) infinite;
}

@keyframes pubCue {
	0%   { top: -50%; }
	100% { top: 110%; }
}

/* Sub-page banner heroes. */
.pub-hero-banner { min-height: min(56vh, 560px); padding-bottom: 72px; }
.pub-hero-banner h1 { font-size: clamp(2.6rem, 5vw, 4.1rem); }
.pub-hero-short { min-height: min(46vh, 470px); }

/* --------------------------------------------------------------------------
   08. Sections
   -------------------------------------------------------------------------- */
.pub-section { padding: clamp(72px, 9vw, 116px) 0; }

.pub-section-alt { background: var(--paper-2); }

/* Section that hands straight off to a full-bleed band (e.g. departures board). */
.pub-section-lead-in { padding-bottom: 0; }
.pub-section-lead-in .pub-section-head { margin-bottom: clamp(36px, 5vw, 52px); }

.pub-section-head {
	max-width: 780px;
	margin-bottom: clamp(40px, 6vw, 64px);
}

.pub-section-head-center {
	text-align: center;
	margin-inline: auto;
}

.pub-section-sub {
	font-size: 1.1rem;
	color: var(--muted);
	max-width: var(--maxw-text);
}

/* --------------------------------------------------------------------------
   09. Departures board — integration wall (partials/integrations.php)
   -------------------------------------------------------------------------- */
.pub-departures {
	background: var(--night);
	padding: clamp(48px, 7vw, 72px) 0;
}

.pub-departures-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 26px;
}

.pub-departures-head::after {
	content: "";
	order: 1;
	flex: 1;
	height: 1px;
	background: var(--glass-border);
}

.pub-departures-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--on-night);
	margin: 0;
}

.pub-live {
	order: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--on-night-hi);
}

.pub-live::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--live-green);
	animation: pub-pulse 2.4s var(--ease) infinite;
}

@keyframes pub-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

.pub-dep-row {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 10px 30px;
	padding: 17px 0;
	border-top: 1px solid var(--glass-border);
	align-items: baseline;
}

.pub-dep-row:last-child { border-bottom: 1px solid var(--glass-border); }

.pub-dep-cat {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--terra-bright);
}

.pub-dep-cat::after {
	content: "";
	flex: 1;
	border-bottom: 1px dotted var(--glass-border);
}

.pub-dep-marks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
}

.pub-dep-marks li {
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--on-night);
	transition: color 0.2s var(--ease);
	cursor: default;
}

.pub-dep-marks li:hover { color: var(--on-night-hi); }

.pub-dep-more {
	margin: 20px 0 0;
	font-size: 0.85rem;
	color: var(--on-night);
}

.pub-dep-more a {
	color: var(--on-night-hi);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s var(--ease);
}

.pub-dep-more a:hover { color: var(--terra-bright); }

/* --------------------------------------------------------------------------
   10. Split — sticky aside + item grid (Why VTO)
   -------------------------------------------------------------------------- */
.pub-split {
	display: grid;
	grid-template-columns: minmax(280px, 0.9fr) 1.5fr;
	gap: clamp(40px, 6vw, 88px);
	align-items: start;
}

.pub-split-aside { position: sticky; top: calc(var(--header-h) + 32px); }
.pub-split-aside p { margin-bottom: 1.6em; }

.pub-split-main {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 36px 40px;
}

.pub-split-item {
	border-top: 1px solid var(--rule);
	padding-top: 22px;
}

.pub-split-item .pub-ico,
.pub-split-item .pub-ico-line { margin-bottom: 14px; }

.pub-split-item h3 { font-size: 1.12rem; }
.pub-split-item p { margin: 0; font-size: 0.98rem; }

/* --------------------------------------------------------------------------
   11. Product mockup — "Inside the mid-office"
   -------------------------------------------------------------------------- */
.pub-mock-grid {
	display: grid;
	grid-template-columns: 1.18fr 0.82fr;
	gap: clamp(36px, 5vw, 72px);
	align-items: center;
}

.pub-mock-wrap { min-width: 0; }

.pub-mock {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-photo);
	overflow: hidden;
	font-family: var(--font-sans);
	line-height: 1.35;
	user-select: none;
	pointer-events: none;
}

/* Full-width topbar — mirrors the real app's dark horizontal navbar. */
.pub-mock-topbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 14px 0 0;
	height: 30px;
	background: #343a40;
	flex: 0 0 auto;
}

.pub-mock-topbar-brand {
	flex: 0 0 108px;
	padding: 0 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--brand);
}

.pub-mock-topbar-search {
	width: 130px;
	height: 18px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.15);
}

.pub-mock-topbar-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

.pub-mock-topbar-pill {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--brand);
	font-size: 8px;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
}

.pub-mock-topbar-pill i {
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.4);
	flex: 0 0 auto;
}

/* Sidebar + content row below the topbar. */
.pub-mock-layout {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* Sidebar — same dark bg + icon+text nav items as the real app. */
.pub-mock-sidebar {
	flex: 0 0 108px;
	background: #343a40;
	border-right: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	flex-direction: column;
	padding: 8px 0;
	overflow: hidden;
}

.pub-mock-sidebar-office {
	display: block;
	font-size: 7.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.32);
	padding: 2px 12px 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pub-mock-nav-item {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	font-size: 9px;
	color: rgba(255, 255, 255, 0.6);
	white-space: nowrap;
}

.pub-mock-nav-item i {
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.18);
	flex: 0 0 auto;
}

.pub-mock-nav-item.is-on {
	background: rgba(255, 255, 255, 0.09);
	color: #fff;
	border-right: 2px solid var(--brand);
}

.pub-mock-nav-item.is-on i { background: var(--brand); }

.pub-mock-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.pub-mock-top {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 16px;
	border-bottom: 1px solid var(--rule);
	font-size: 10.5px;
	color: var(--muted);
}

.pub-mock-top b { color: var(--ink); font-weight: 700; }

.pub-mock-search {
	margin-left: auto;
	width: 92px;
	height: 18px;
	border-radius: 9px;
	background: var(--paper-2);
}

.pub-mock-user {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--brand-50);
	color: var(--brand-deep);
	font-size: 8.5px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pub-mock-body {
	display: grid;
	grid-template-columns: 1fr 212px;
	gap: 12px;
	padding: 14px 16px;
}

.pub-mock-col { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.pub-mock-kpis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.pub-mock-kpi {
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	padding: 8px 11px;
}

.pub-mock-kpi span {
	display: block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.pub-mock-kpi b {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 600;
	font-size: 17px;
	color: var(--ink);
}

.pub-mock-panel {
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.pub-mock-panel-head {
	padding: 8px 12px;
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.pub-mock-row {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 12px;
	font-size: 10.5px;
	color: var(--muted);
}

.pub-mock-row + .pub-mock-row { border-top: 1px solid var(--rule); }

.pub-mock-avatar {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--brand-50);
	color: var(--brand-deep);
	font-size: 8px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pub-mock-row b { color: var(--ink); font-weight: 700; }

.pub-mock-amount { margin-left: auto; font-weight: 700; color: var(--ink); }

.pub-mock-pill {
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 2px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

.pub-mock-pill.is-blue  { background: var(--brand-50); color: var(--brand-deep); }
.pub-mock-pill.is-amber { background: #fdf0e0; color: var(--c-amber); }
.pub-mock-pill.is-teal  { background: #e2f6f9; color: var(--c-teal); }
.pub-mock-pill.is-green { background: #e5f6ea; color: var(--c-green); }

.pub-mock-side { display: flex; flex-direction: column; gap: 12px; }

.pub-mock-card {
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	padding: 11px 12px;
}

.pub-mock-card h5 {
	margin: 0 0 9px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.pub-mock-bar-label {
	display: flex;
	justify-content: space-between;
	font-size: 9.5px;
	color: var(--muted);
	margin-bottom: 4px;
}

.pub-mock-bar {
	height: 6px;
	border-radius: 999px;
	background: var(--paper-2);
	overflow: hidden;
	margin-bottom: 9px;
}

.pub-mock-bar i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--brand);
}

.pub-mock-bar i.is-green { background: var(--c-green); }

.pub-mock-bar i.w-100 { width: 100%; }
.pub-mock-bar i.w-38  { width: 38%; }

.pub-mock-chipline {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.pub-mock-chipline span {
	font-size: 8.5px;
	font-weight: 700;
	color: var(--muted);
	border: 1px solid var(--rule);
	border-radius: 999px;
	padding: 2px 8px;
}

.pub-mock-chart {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 54px;
	margin-bottom: 8px;
}

.pub-mock-chart i {
	flex: 1;
	background: var(--brand-50);
	border-radius: 3px 3px 0 0;
}

.pub-mock-chart i:nth-child(1) { height: 38%; }
.pub-mock-chart i:nth-child(2) { height: 56%; }
.pub-mock-chart i:nth-child(3) { height: 44%; }
.pub-mock-chart i:nth-child(4) { height: 72%; }
.pub-mock-chart i:nth-child(5) { height: 58%; }
.pub-mock-chart i:nth-child(6) { height: 90%; }
.pub-mock-chart i:nth-child(7) { height: 64%; }

.pub-mock-chart i.is-hi { background: var(--brand); }

.pub-mock-note-line { font-size: 9.5px; color: var(--muted); }
.pub-mock-note-line b { color: var(--ink); }

.pub-mock-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 16px;
	border-top: 1px solid var(--rule);
}

.pub-mock-tag {
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	border: 1px solid var(--rule);
	border-radius: 999px;
	padding: 3px 9px;
}

/* Annotation list beside the mockup. */
.pub-mock-notes {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
}

.pub-mock-notes li {
	display: flex;
	gap: 16px;
	padding: 18px 0;
	border-top: 1px solid var(--rule);
}

.pub-mock-notes b {
	display: block;
	color: var(--ink);
	font-size: 1.02rem;
	margin-bottom: 2px;
}

.pub-mock-notes p { margin: 0; font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   12. Steps — how it works
   -------------------------------------------------------------------------- */
.pub-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(28px, 4vw, 48px);
}

.pub-step {
	border-top: 1px solid var(--rule);
	padding-top: 20px;
}

.pub-step-num {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-style: italic;
	font-weight: 560;
	font-size: clamp(2.6rem, 4vw, 3.4rem);
	line-height: 1;
	color: var(--terra);
	margin-bottom: 18px;
}

.pub-step h3 { font-size: 1.15rem; }
.pub-step p { margin: 0; font-size: 0.98rem; }

/* --------------------------------------------------------------------------
   13. Photo interlude + heritage stat chips
   -------------------------------------------------------------------------- */
.pub-interlude {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(88px, 12vw, 150px) 0;
}

.pub-interlude::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(rgba(16, 20, 27, 0.38), rgba(16, 20, 27, 0.38));
}

.pub-interlude-head {
	text-align: center;
	max-width: 620px;
	margin: 0 auto clamp(36px, 5vw, 56px);
}

.pub-interlude-head h2 { color: #fff; }

.pub-stat-chips {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	max-width: 1020px;
	margin: 0 auto;
}

.pub-stat-chip {
	background: var(--glass);
	-webkit-backdrop-filter: blur(16px) saturate(130%);
	backdrop-filter: blur(16px) saturate(130%);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-glass);
	padding: 26px 24px 22px;
	text-align: center;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pub-stat-chip { background: rgba(24, 29, 36, 0.86); }
}

.pub-stat-num {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 600;
	font-size: clamp(2.1rem, 3.4vw, 2.9rem);
	line-height: 1.1;
	color: #fff;
}

.pub-stat-label {
	display: block;
	margin-top: 6px;
	font-size: 0.86rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   14. Testimonials — featured pull-quote + quote cards
   -------------------------------------------------------------------------- */
.pub-quote-featured {
	max-width: 880px;
	margin: 0 auto clamp(48px, 7vw, 80px);
	text-align: center;
	position: relative;
	padding-top: 44px;
}

.pub-quote-featured::before {
	content: "\201C";
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 5.5rem;
	line-height: 1;
	color: var(--terra);
}

.pub-quote-featured blockquote {
	margin: 0 0 22px;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-style: italic;
	font-weight: 480;
	font-size: clamp(1.5rem, 2.8vw, 2.1rem);
	line-height: 1.4;
	color: var(--ink);
}

.pub-quotes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	max-width: 1020px;
	margin: 0 auto;
}

.pub-quote {
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	padding: 30px 32px 26px;
	display: flex;
	flex-direction: column;
}

.pub-quote blockquote {
	margin: 0 0 18px;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-style: italic;
	font-weight: 460;
	font-size: 1.12rem;
	line-height: 1.55;
	color: var(--ink);
	flex: 1;
}

.pub-quote-by, .pub-quote-featured figcaption {
	font-size: 0.95rem;
}

.pub-quote-by b, .pub-quote-featured figcaption b {
	display: block;
	color: var(--ink);
	font-weight: 700;
}

.pub-quote-by span, .pub-quote-featured figcaption span {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   15. Pricing pitch
   -------------------------------------------------------------------------- */
.pub-pricing {
	display: grid;
	grid-template-columns: minmax(280px, 0.95fr) 1.05fr;
	gap: clamp(40px, 6vw, 88px);
	align-items: start;
}

.pub-pricing-aside p { margin-bottom: 1.6em; }

.pub-price-list { list-style: none; margin: 0; padding: 0; }

.pub-price-item {
	display: flex;
	gap: 26px;
	padding: 26px 0;
	border-top: 1px solid var(--rule);
}

.pub-price-item:last-of-type { border-bottom: 1px solid var(--rule); }

.pub-price-ord {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-style: italic;
	font-weight: 560;
	font-size: 1.6rem;
	line-height: 1.2;
	color: var(--terra);
	flex: 0 0 52px;
}

.pub-price-item h3 { font-size: 1.12rem; margin-bottom: 0.3em; }
.pub-price-item p { margin: 0; font-size: 0.98rem; }

.pub-price-note {
	margin-top: 18px;
	font-size: 0.9rem;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   16. Cards / panels / grids (sub-pages)
   -------------------------------------------------------------------------- */
.pub-grid { display: grid; gap: 24px; }
.pub-grid-2 { grid-template-columns: repeat(2, 1fr); }
.pub-grid-3 { grid-template-columns: repeat(3, 1fr); }

.pub-card {
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	padding: 34px 36px;
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.pub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-photo); }

.pub-card .pub-ico { margin-bottom: 18px; }

.pub-card h3 { font-size: 1.3rem; }

/* Content-rich card variant. */
.pub-card-lg {
	padding: clamp(36px, 5vw, 52px) clamp(34px, 4.5vw, 48px);
}

/* Editorial number plates — features page capability figures. */
.pub-feature-rows {
	display: flex;
	flex-direction: column;
	gap: clamp(56px, 8vw, 96px);
}

.pub-feature-row {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.pub-feature-row.is-reverse .pub-feature-figure { order: 2; }

.pub-feature-figure {
	position: relative;
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	background: var(--paper-2);
	min-height: 240px;
	padding: 26px;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
}

.pub-feature-figure .pub-ico,
.pub-feature-figure .pub-ico-line { position: relative; z-index: 1; }

.pub-feature-figure .fig-num {
	position: absolute;
	right: 6px;
	bottom: -54px;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-style: italic;
	font-weight: 600;
	font-size: clamp(7.5rem, 12vw, 10.5rem);
	line-height: 1;
	color: var(--terra);
	opacity: 0.16;
	pointer-events: none;
}

.pub-feature-body .pub-eyebrow { margin-bottom: 0.9em; }
.pub-feature-body h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); }

.pub-bullets {
	list-style: none;
	margin: 1.2em 0 0;
	padding: 0;
}

.pub-bullets li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 9px 0;
	font-size: 0.99rem;
}

.pub-bullets li + li { border-top: 1px solid var(--rule); }

.pub-bullets .pub-ico-sm { margin-top: 4px; }

/* --------------------------------------------------------------------------
   18. Definition lists / callout
   -------------------------------------------------------------------------- */
.pub-deflist {
	list-style: none;
	margin: 1.4em 0 0;
	padding: 0;
}

.pub-deflist li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 0;
}

.pub-deflist li + li { border-top: 1px solid var(--rule); }

.pub-deflist .pub-ico { width: 42px; height: 42px; }

.pub-dl-text strong {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 1px;
}

.pub-dl-text span { color: var(--ink); }

.pub-callout {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	margin-top: clamp(40px, 6vw, 64px);
	padding: clamp(28px, 4vw, 44px);
	background: var(--paper-2);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
}

.pub-callout h3 {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 540;
	font-size: 1.5rem;
}

.pub-callout p { margin: 0; }

/* --------------------------------------------------------------------------
   19. Contact — details + form card
   -------------------------------------------------------------------------- */
.pub-contact-grid {
	display: grid;
	grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
	gap: clamp(40px, 6vw, 80px);
	align-items: start;
}

.pub-contact-details h3 {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 540;
	font-size: 1.5rem;
}

.pub-contact-form {
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	padding: clamp(28px, 4vw, 44px);
}

.pub-form-title {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 540;
	font-size: 1.5rem;
	margin-bottom: 1em;
}

.pub-field { margin-bottom: 18px; }

.pub-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.pub-field label {
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 7px;
}

.pub-req { color: var(--terra); }

.pub-field input,
.pub-field textarea {
	width: 100%;
	padding: 13px 15px;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}

.pub-field input:focus,
.pub-field textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-50);
}

.pub-field textarea { resize: vertical; min-height: 140px; }

/* Honeypot — visually removed, still in the document for bots. */
.pub-hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pub-alert {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px 18px;
	border-radius: var(--radius-sm);
	margin-bottom: 24px;
	font-size: 0.97rem;
}

.pub-alert strong { display: block; color: var(--ink); }

.pub-alert-success {
	background: #e5f6ea;
	border: 1px solid #bfe5cb;
	color: var(--c-green);
}

.pub-alert-error {
	background: #fbe9e8;
	border: 1px solid #f0c4c1;
	color: var(--c-coral);
}

.pub-alert .pub-ico-sm { margin-top: 3px; color: currentColor; }

/* --------------------------------------------------------------------------
   20. 404 — full-bleed photo + frosted glass card (login's visual twin)
   -------------------------------------------------------------------------- */
.pub-404 {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--header-h) + 40px) 24px 64px;
}

.pub-404::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to bottom, rgba(14, 18, 25, 0.62), rgba(14, 18, 25, 0) 180px),
		linear-gradient(rgba(16, 20, 27, 0.30), rgba(16, 20, 27, 0.30));
}

.pub-glass-card {
	background: var(--glass);
	-webkit-backdrop-filter: blur(18px) saturate(130%);
	backdrop-filter: blur(18px) saturate(130%);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-glass);
	padding: clamp(36px, 6vw, 60px);
	max-width: 560px;
	text-align: center;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pub-glass-card { background: rgba(24, 29, 36, 0.88); }
}

.pub-glass-card .pub-eyebrow {
	justify-content: center;
	color: rgba(255, 255, 255, 0.8);
}
.pub-glass-card .pub-eyebrow::before { background: rgba(255, 255, 255, 0.5); }

.pub-glass-card h1 {
	color: #fff;
	font-size: clamp(2.2rem, 4.5vw, 3.1rem);
}

.pub-glass-card .pub-lead {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.08rem;
	margin-inline: auto;
}

.pub-glass-card .pub-hero-actions { justify-content: center; }

/* --------------------------------------------------------------------------
   21. CTA band — night
   -------------------------------------------------------------------------- */
.pub-cta {
	background: var(--night);
	padding: clamp(80px, 10vw, 130px) 0;
}

.pub-cta-inner {
	text-align: center;
	max-width: 720px;
}

.pub-cta h2 { color: #fff; }

.pub-cta p {
	color: var(--on-night);
	font-size: 1.15rem;
	margin-bottom: 1.8em;
}

.pub-cta .pub-hero-actions { justify-content: center; }

.pub-cta .pub-btn-primary { background: var(--brand); }
.pub-cta .pub-btn-primary:hover { background: var(--brand-dk); }

/* --------------------------------------------------------------------------
   22. Footer
   -------------------------------------------------------------------------- */
.pub-footer {
	background: var(--paper-2);
	border-top: 1px solid var(--rule);
}

.pub-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr 0.8fr;
	gap: 40px;
	padding: clamp(56px, 7vw, 80px) 24px;
}

.pub-footer-logo { height: 40px; width: auto; margin-bottom: 18px; }

.pub-footer-tag {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-style: italic;
	font-weight: 480;
	font-size: 1.08rem;
	color: var(--ink);
	max-width: 280px;
	margin: 0;
}

.pub-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pub-footer-col ul li { margin-bottom: 9px; }

.pub-footer-col ul a { color: var(--body); }
.pub-footer-col ul a:hover { color: var(--brand-deep); }

.pub-footer-contact li { color: var(--body); }

.pub-footer-social { display: flex; gap: 12px; }

.pub-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--rule);
	border-radius: 50%;
	color: var(--body);
	background: var(--paper);
	transition: all 0.2s var(--ease);
}

.pub-footer-social a:hover {
	color: #fff;
	background: var(--ink);
	border-color: var(--ink);
}

.pub-footer-social svg { width: 18px; height: 18px; }

.pub-footer-bottom {
	border-top: 1px solid var(--rule);
	padding: 20px 0;
}

.pub-footer-bottom p {
	margin: 0;
	font-size: 0.84rem;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   23. Reveal motion (driven by layout.php IntersectionObserver)
   -------------------------------------------------------------------------- */
.pub-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.pub-reveal.is-in {
	opacity: 1;
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   24. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.pub-mock-grid { grid-template-columns: 1fr; }
	.pub-mock-grid > * { max-width: 760px; }
}

@media (max-width: 940px) {
	.pub-split { grid-template-columns: 1fr; }
	.pub-split-aside { position: static; }
	.pub-feature-row,
	.pub-feature-row.is-reverse { grid-template-columns: 1fr; }
	.pub-feature-row.is-reverse .pub-feature-figure { order: 0; }
	.pub-feature-figure { min-height: 180px; }
	.pub-pricing { grid-template-columns: 1fr; }
	.pub-contact-grid { grid-template-columns: 1fr; }
	.pub-grid-2, .pub-grid-3 { grid-template-columns: 1fr; }
	.pub-stat-chips { grid-template-columns: repeat(2, 1fr); }
	.pub-quotes { grid-template-columns: 1fr; max-width: 640px; }
	.pub-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
	/* Drawer navigation */
	.pub-nav {
		position: fixed;
		top: var(--header-h);
		left: 0;
		right: 0;
		background: rgba(20, 24, 31, 0.97);
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		padding: 12px 24px 24px;
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: all 0.25s var(--ease);
	}

	.pub-nav.is-open {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	.pub-nav-list { flex-direction: column; align-items: stretch; gap: 2px; }

	.pub-nav-list a {
		display: block;
		padding: 14px 10px;
		font-size: 1.15rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.pub-nav-list a::after { content: none; }

	.pub-nav-toggle { display: flex; }

	.pub-login span { display: none; }
	.pub-login { padding: 10px 14px; }

	.pub-hero { padding-bottom: 80px; }
	.pub-scroll-cue { display: none; }
}

@media (max-width: 700px) {
	.pub-mock-body { grid-template-columns: 1fr; }
	.pub-mock-side { display: none; }
	.pub-dep-row { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 560px) {
	body { font-size: 16px; }
	.pub-container { padding: 0 18px; }
	.pub-hero { min-height: min(86vh, 760px); }
	.pub-hero-actions .pub-btn { width: 100%; }
	.pub-steps { grid-template-columns: 1fr; }
	.pub-split-main { grid-template-columns: 1fr; }
	.pub-stat-chips { grid-template-columns: 1fr 1fr; gap: 12px; }
	.pub-stat-chip { padding: 18px 14px 16px; }
	.pub-field-row { grid-template-columns: 1fr; gap: 0; }
	.pub-footer-grid { grid-template-columns: 1fr; gap: 32px; }
	.pub-card { padding: 26px 24px; }
	.pub-callout { flex-direction: column; }
	.pub-photo-credit { right: 18px; bottom: 16px; }
	.pub-mock-sidebar { display: none; }
	.pub-mock-topbar-pill { display: none; }
	.pub-mock-topbar-brand { flex-basis: auto; }
	.pub-mock-kpis { grid-template-columns: 1fr 1fr; }
	.pub-mock-kpi:nth-child(3) { display: none; }
	.pub-dep-marks { gap: 8px 22px; }
	.pub-dep-marks li { font-size: 0.82rem; }
}

/* --------------------------------------------------------------------------
   25. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.pub-scroll-cue { display: none; }

	.pub-reveal {
		opacity: 1;
		transform: none;
	}
}