/*!
 * CSS Logistics — Main Design System
 * Converted from the client's static HTML reference into a maintainable,
 * component-based stylesheet. Colors, type and spacing are all driven by
 * CSS custom properties on :root so the palette can be changed centrally.
 * Responsive breakpoint overrides live in responsive.css, loaded after
 * this file.
 */

/* =========================================================
   0. Design tokens
   ========================================================= */
:root {
	--navy: #16283D;
	--blue: #1470B8;
	--blue-dark: #0E5590;
	--sky: #4FA8DC;
	--paper: #FFFFFF;
	--paper-2: #F2F6F9;
	--paper-3: #E9EFF4;
	--ink: #1B2733;
	--slate: #5B6B7A;
	--line: #DCE4EA;
	--line-dark: rgba(255, 255, 255, 0.14);
	--white: #FFFFFF;

	--font-heading: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
	--font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

	--section-pad: 96px;
	--container-max: 1180px;
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin: 0;
	font-weight: 800;
	color: var(--navy);
}

p {
	margin: 0 0 1em;
}

a {
	color: inherit;
	text-decoration: none;
}

img, svg {
	display: block;
	max-width: 100%;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button, input, select, textarea {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

.mono {
	font-family: var(--font-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wrap {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 32px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 8px; left: 8px;
	width: auto; height: auto;
	clip: auto;
	z-index: 100000;
	background: var(--navy);
	color: var(--white);
	padding: 12px 20px;
	font-family: var(--font-mono);
	text-transform: uppercase;
	font-size: 13px;
}

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================
   2. Preloader
   ========================================================= */
#preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--paper);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.5s ease;
}
#preloader.is-hidden {
	opacity: 0;
	pointer-events: none;
}
.preload-mark {
	position: relative;
	width: 190px;
	overflow: hidden;
	text-align: center;
}
.preload-mark img {
	width: 100%;
	display: block;
	margin: 0 auto;
	animation: preloadPulse 1.6s ease-in-out infinite;
}
.preload-mark::after {
	content: "";
	position: absolute;
	top: 0; left: -60%;
	width: 35%; height: 100%;
	background: linear-gradient(120deg, transparent, rgba(20, 112, 184, 0.35), transparent);
	transform: skewX(-18deg);
	animation: preloadShimmer 1.7s ease-in-out infinite;
}
.preload-label {
	position: absolute;
	bottom: -34px; left: 0; right: 0;
	text-align: center;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--slate);
}
@keyframes preloadPulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.045); opacity: 0.9; }
}
@keyframes preloadShimmer {
	0% { left: -60%; }
	100% { left: 130%; }
}

/* =========================================================
   3. Buttons
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: 2px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
	background: none;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-dark); }
.btn-ghost { border-color: var(--navy); color: var(--navy); }
.btn-ghost:hover { background: var(--paper-2); }
.btn-ghost-light { border-color: rgba(255, 255, 255, 0.7); color: var(--white); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.1); }
.btn-navy { border-color: var(--navy); color: var(--navy); }
.btn-navy:hover { background: var(--navy); color: var(--white); }
.btn:disabled { opacity: 0.6; cursor: progress; transform: none; }

/* =========================================================
   4. Header / Navigation
   ========================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--white);
	border-bottom: 1px solid var(--line);
	transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled {
	box-shadow: 0 8px 24px -18px rgba(22, 40, 61, 0.35);
}
.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	gap: 20px;
}
.logo {
	display: flex;
	align-items: center;
	gap: 11px;
	position: relative;
}
.logo img, .custom-logo-link img {
	height: 40px;
	width: auto;
	display: block;
}
.logo-word {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 22px;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--navy);
	text-transform: uppercase;
}
.logo-todo-flag {
	position: absolute;
	top: -6px;
	right: -10px;
	width: 16px; height: 16px;
	background: #C0392B;
	color: #fff;
	border-radius: 50%;
	font-size: 11px;
	line-height: 16px;
	text-align: center;
	font-weight: 700;
	font-family: var(--font-mono);
	cursor: help;
}
.nav-links, .nav-links-list {
	display: flex;
	align-items: center;
	gap: 34px;
}
.nav-links-list a, .nav-links a {
	color: var(--navy);
	font-size: 14px;
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.78;
	transition: opacity 0.15s ease;
}
.nav-links-list a:hover, .nav-links a:hover { opacity: 1; color: var(--blue); }
.nav-cta { display: flex; gap: 10px; flex: none; }
.burger { display: none; background: none; border: none; color: var(--navy); padding: 6px; cursor: pointer; }

/* =========================================================
   5. Hero
   ========================================================= */
.hero {
	background: var(--paper-2);
	color: var(--ink);
	position: relative;
	overflow: hidden;
	padding-bottom: 0;
}
.ticker {
	overflow: hidden;
	white-space: nowrap;
	background: var(--navy);
}
.ticker-track {
	display: inline-flex;
	animation: ticker 26s linear infinite;
	padding: 11px 0;
	width: max-content;
}
@keyframes ticker {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.ticker span {
	font-family: var(--font-mono);
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--white);
	opacity: 0.8;
	padding: 0 22px;
	border-right: 1px solid var(--line-dark);
}
.hero-inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px;
	align-items: center;
	padding: 64px 0 60px;
}
.eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-mono);
	font-size: 12.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 18px;
}
.eyebrow::before {
	content: "";
	width: 22px; height: 2px;
	background: var(--blue);
	display: inline-block;
}
.hero h1 {
	color: var(--navy);
	font-size: clamp(36px, 5.2vw, 64px);
	line-height: 1.02;
	margin-bottom: 22px;
	text-transform: none;
}
.hero p.lead {
	font-size: 17px;
	line-height: 1.65;
	color: var(--slate);
	max-width: 480px;
	margin-bottom: 32px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero animated graphic */
.hero-graphic {
	position: relative;
	aspect-ratio: 1 / 1;
	max-width: 460px;
	margin-left: auto;
}
.hero-graphic__globe {
	width: 100%;
	height: 100%;
	border-radius: 18px;
	box-shadow: 0 30px 60px -24px rgba(22, 40, 61, 0.45);
}
.hero-graphic__route {
	stroke-dashoffset: 0;
	animation: dashFlow 6s linear infinite;
}
@keyframes dashFlow {
	to { stroke-dashoffset: -140; }
}
.hero-graphic__dot {
	transform-box: fill-box;
	transform-origin: center;
	animation: dotPulse 2.4s ease-in-out infinite;
}
.hero-graphic__dot--b { animation-delay: 0.5s; }
.hero-graphic__dot--c { animation-delay: 1s; }
@keyframes dotPulse {
	0%, 100% { opacity: 0.55; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.5); }
}
.hero-graphic__card {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(22, 40, 61, 0.72);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--white);
	padding: 10px 14px;
	border-radius: 4px;
	box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.5);
	animation: floatCard 5s ease-in-out infinite;
}
.hero-graphic__card em {
	display: block;
	font-size: 10px;
	color: #9FB4C4;
	font-style: normal;
}
.hero-graphic__card strong {
	display: block;
	font-size: 13px;
	font-weight: 600;
}
.hero-graphic__icon {
	flex: none;
	width: 30px; height: 30px;
	background: rgba(79, 168, 220, 0.18);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sky);
}
.hero-graphic__card--1 { top: 6%; left: 2%; animation-delay: 0s; }
.hero-graphic__card--2 { top: 46%; right: 0; animation-delay: 1.2s; }
.hero-graphic__card--3 { bottom: 6%; left: 10%; animation-delay: 2.1s; }
@keyframes floatCard {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}
.hero-photo {
	aspect-ratio: 1/1;
	max-width: 460px;
	margin-left: auto;
	overflow: hidden;
	border-radius: 4px;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   6. Stats
   ========================================================= */
.stats {
	background: var(--white);
	border-bottom: 1px solid var(--line);
	position: relative;
}
.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.stat {
	text-align: center;
	padding: 34px 16px;
	border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat b {
	font-family: var(--font-heading);
	font-size: clamp(30px, 3.4vw, 42px);
	color: var(--blue);
	display: block;
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 6px;
}
.stat span {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--slate);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* =========================================================
   7. Section basics
   ========================================================= */
section { padding: var(--section-pad) 0; }
.alt-bg { background: var(--paper-2); }
.sec-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 52px;
	border-bottom: 2px solid var(--navy);
	padding-bottom: 20px;
}
.sec-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-bottom: none;
	gap: 10px;
}
.sec-head--center h2 { margin-bottom: 6px; }
.sec-head--center p { max-width: 560px; }
.sec-head .tag, .tag {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--blue);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 8px;
	display: block;
}
.sec-head h2 { font-size: clamp(30px, 4vw, 44px); }
.sec-head p { max-width: 340px; color: var(--slate); font-size: 14.5px; line-height: 1.6; }

/* Scroll-reveal (progressive enhancement; content is visible without JS) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   8. Services
   ========================================================= */
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	background: var(--line);
}
.tag-card {
	background: var(--white);
	padding: 34px 28px;
	position: relative;
	transition: background 0.18s ease;
}
.tag-card:hover { background: var(--paper-2); }
.tag-card__media { margin: -34px -28px 20px; aspect-ratio: 16/10; overflow: hidden; }
.tag-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tag-num {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--slate);
	display: block;
	margin-bottom: 18px;
}
.tag-card h3 { font-size: 24px; margin-bottom: 10px; line-height: 1.05; }
.tag-card p { font-size: 14px; color: var(--slate); line-height: 1.6; margin: 0 0 16px; }
.tag-chip {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--blue);
	border: 1px solid var(--blue);
	padding: 3px 9px;
}
.tag-card__link { position: absolute; inset: 0; }
.tag-card--cta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--navy);
}
.tag-card--cta h3 { color: var(--white); font-size: 22px; }
.tag-card--cta p { color: #C4D3DE; }
.tag-card--cta .btn { width: fit-content; }

/* =========================================================
   9. Industries
   ========================================================= */
.industries-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.industry-card {
	position: relative;
	aspect-ratio: 4/3;
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--paper-3);
}
.industry-card img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}
.industry-card:hover img { transform: scale(1.06); }
.industry-card::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(22, 40, 61, 0.85) 0%, rgba(22, 40, 61, 0.2) 55%, rgba(22, 40, 61, 0) 75%);
	z-index: 1;
}
.industry-name {
	position: absolute; left: 18px; bottom: 14px; z-index: 2;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 21px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--white);
}

/* Themed placeholder tile (used until real photography is uploaded) */
.media-placeholder {
	position: relative;
	width: 100%; height: 100%;
	overflow: hidden;
	background: var(--navy);
}
.media-placeholder svg { width: 100%; height: 100%; }
.media-placeholder__label {
	position: absolute;
	bottom: 10px; left: 12px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	z-index: 2;
}
.industry-card .media-placeholder,
.tag-card__media .media-placeholder,
.why-collage__tile .media-placeholder,
.about-photo .media-placeholder {
	position: absolute; inset: 0;
}
.about-photo .media-placeholder__label { font-size: 13px; }
.industry-card .media-placeholder__label,
.why-collage__tile .media-placeholder__label { display: none; }

/* =========================================================
   10. Why CSS Logistics
   ========================================================= */
.why-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
.why-copy h2 { font-size: clamp(28px, 3.6vw, 40px); margin: 8px 0 22px; }
.why-quote {
	margin: 0 0 26px;
	padding-left: 18px;
	border-left: 3px solid #E0A526;
	font-size: 17px;
	color: var(--ink);
	font-weight: 500;
	line-height: 1.5;
}
.why-points {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 24px;
	margin-bottom: 30px;
}
.why-points li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--navy);
}
.why-points__check {
	flex: none;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--navy);
	color: var(--white);
	display: flex; align-items: center; justify-content: center;
}
.why-collage { position: relative; }
.why-badge {
	position: absolute;
	top: -22px; left: 6%;
	z-index: 3;
	background: var(--white);
	box-shadow: 0 20px 40px -18px rgba(22, 40, 61, 0.35);
	padding: 16px 22px;
	border-radius: 4px;
}
.why-badge b { display: block; font-family: var(--font-heading); font-size: 24px; color: var(--blue); }
.why-badge span { font-size: 10.5px; color: var(--slate); }
.why-collage__grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	grid-template-rows: repeat(2, 1fr);
	gap: 10px;
	aspect-ratio: 4/3.3;
}
.why-collage__tile { position: relative; overflow: hidden; border-radius: 2px; }
.why-collage__tile--main { grid-row: 1 / 3; }
.why-collage__tile img { width: 100%; height: 100%; object-fit: cover; }
.why-collage__caption {
	position: absolute;
	left: 10px; bottom: 8px; z-index: 2;
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--white);
	text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.why-collage__tile::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(22,40,61,0.75), rgba(22,40,61,0) 60%);
	z-index: 1;
}

/* =========================================================
   11. Our Process
   ========================================================= */
.process-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	position: relative;
}
.process-steps::before {
	content: "";
	position: absolute;
	top: 22px; left: 12%; right: 12%;
	height: 2px;
	background-image: linear-gradient(to right, var(--blue) 50%, transparent 0%);
	background-size: 12px 2px;
	z-index: 0;
}
.process-step { text-align: center; padding: 0 12px; position: relative; z-index: 1; }
.process-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--white);
	border: 2px solid var(--blue);
	color: var(--blue);
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 14px;
}
.process-step:first-child .process-step__num { background: var(--blue); color: var(--white); }
.process-step h3 { font-size: 19px; margin-bottom: 8px; }
.process-step p { font-size: 13.5px; color: var(--slate); line-height: 1.6; max-width: 220px; margin: 0 auto; }

/* =========================================================
   12. About / Company Story
   ========================================================= */
.about-intro {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	margin-bottom: 56px;
}
.about-intro h2 { font-size: clamp(26px, 3.6vw, 38px); margin-bottom: 18px; }
.about-intro p { color: var(--slate); font-size: 15.5px; line-height: 1.75; margin: 0 0 14px; }
.story-label {
	font-family: var(--font-mono); font-size: 11.5px; color: var(--blue);
	text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 10px;
}
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); }
.mv-card { background: var(--white); padding: 30px 26px; }
.mv-card h3 { font-size: 22px; margin-bottom: 12px; }
.mv-card p { font-size: 14.5px; color: var(--slate); line-height: 1.7; margin: 0; }
.about-photo {
	border: 1px solid var(--line);
	aspect-ratio: 21/8;
	overflow: hidden;
	position: relative;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =========================================================
   13. Contact
   ========================================================= */
.contact { background: var(--paper-3); }
.contact-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 2px solid var(--navy);
}
.contact-left { background: var(--navy); color: var(--white); padding: 52px 44px; }
.contact-left .tag { color: var(--sky); }
.contact-left h2 { color: var(--white); font-size: clamp(28px, 3.6vw, 38px); margin-bottom: 18px; }
.contact-left p { color: #C4D3DE; font-size: 14.5px; line-height: 1.7; margin-bottom: 28px; max-width: 380px; }
.contact-line { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-dark); }
.contact-line:last-of-type { border-bottom: 1px solid var(--line-dark); }
.contact-line .l {
	font-family: var(--font-mono); font-size: 11px; color: #8FA3B3;
	text-transform: uppercase; letter-spacing: 0.08em; width: 90px; flex: none;
}
.contact-line a, .contact-line span.v { font-size: 14.5px; color: var(--white); }
.contact-line a:hover { color: var(--sky); }
.contact-left .social-links { margin-top: 26px; }
.contact-left .social-link { color: var(--sky); }

.contact-right { background: var(--white); padding: 52px 44px; }
.field { margin-bottom: 18px; }
.field label {
	display: block; font-family: var(--font-mono);
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
	color: var(--slate); margin-bottom: 7px;
}
.field input, .field select, .field textarea {
	width: 100%;
	border: 1.5px solid var(--line);
	background: var(--paper-2);
	padding: 11px 13px;
	font-family: var(--font-body);
	font-size: 14.5px;
	color: var(--ink);
	transition: border-color 0.15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
	border-color: var(--blue);
	outline: none;
}
.field textarea { resize: vertical; min-height: 80px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select {
	border-color: #C0392B;
}
.field--honeypot {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	left: -9999px;
}
.contact-right .btn { width: 100%; margin-top: 6px; }
.form-notice {
	display: none;
	padding: 12px 14px;
	margin-bottom: 16px;
	font-size: 13.5px;
	border-radius: 3px;
}
.form-notice.is-success { display: block; background: #E4F3E8; color: #1F7A3D; border: 1px solid #BFE3C8; }
.form-notice.is-error { display: block; background: #FBEAE8; color: #A5311F; border: 1px solid #F1C6C0; }

/* =========================================================
   14. Footer
   ========================================================= */
.site-footer { background: var(--navy); color: #C4D3DE; padding: 44px 0 28px; }
.footer-top {
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px;
	padding-bottom: 28px; border-bottom: 1px solid var(--line-dark); margin-bottom: 22px;
}
.logo-badge {
	display: inline-flex; align-items: center; gap: 14px;
	background: var(--white);
	padding: 12px 20px;
	border-radius: 6px;
}
.logo-badge img { height: 48px; width: auto; }
.footer-links-list, .footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links-list a, .footer-links a {
	font-family: var(--font-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: #C4D3DE;
}
.footer-links-list a:hover, .footer-links a:hover { color: var(--sky); }
.social-links { display: flex; gap: 14px; }
.social-link {
	width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--line-dark);
	border-radius: 50%;
	color: #C4D3DE;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.social-link:hover { color: var(--sky); border-color: var(--sky); }
.footer-contact {
	display: flex; gap: 28px; flex-wrap: wrap;
	font-size: 13.5px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line-dark);
	margin-bottom: 16px;
}
.footer-contact__item a { color: #C4D3DE; }
.footer-contact__item a:hover { color: var(--sky); }
.footer-bottom {
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
	font-size: 12.5px; font-family: var(--font-mono); color: #8FA3B3;
}

/* =========================================================
   15. Blog / standard content templates
   ========================================================= */
.page-wrap { display: grid; grid-template-columns: 1fr; gap: 48px; padding: 64px 0; }
.page-wrap.has-sidebar { grid-template-columns: 1fr 300px; align-items: start; }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.blog-card { border: 1px solid var(--line); background: var(--white); }
.blog-card__media { display: block; aspect-ratio: 16/10; overflow: hidden; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { padding: 24px; }
.entry-header .cat-links {
	font-family: var(--font-mono); font-size: 11px; color: var(--blue);
	text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-bottom: 8px;
}
.entry-title { font-size: 22px; margin-bottom: 10px; text-transform: none; }
.entry-title a:hover { color: var(--blue); }
.entry-meta { font-size: 11px; color: var(--slate); margin-bottom: 14px; }
.entry-content { font-size: 15px; line-height: 1.75; color: var(--ink); }
.entry-content p { margin-bottom: 1.2em; }
.blog-card__more {
	display: inline-block; margin-top: 14px;
	font-size: 12px; color: var(--blue); font-weight: 600;
}
.page-content .entry-title { font-size: clamp(28px, 4vw, 40px); text-transform: uppercase; margin-bottom: 24px; }
.page-thumbnail { margin-bottom: 32px; aspect-ratio: 21/9; overflow: hidden; }
.page-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.archive-title { font-size: clamp(26px, 4vw, 36px); margin-bottom: 12px; }
.archive-description { color: var(--slate); margin-bottom: 20px; }
.page-links { font-family: var(--font-mono); font-size: 12px; margin-top: 24px; }
.page-links .page-number {
	display: inline-block; border: 1px solid var(--line); padding: 4px 10px; margin: 0 4px;
}
.nav-links-post { display: flex; justify-content: space-between; margin-top: 40px; gap: 20px; }
.widget-title { font-family: var(--font-heading); font-size: 18px; margin-bottom: 14px; }
.widget { margin-bottom: 40px; }
.widget ul li { padding: 6px 0; border-bottom: 1px dotted var(--line); font-size: 14px; }

.error-404-wrap { text-align: center; padding: 100px 0; }
.error-404-code {
	font-size: 14px; color: var(--blue); display: block; margin-bottom: 16px;
}
.error-404-wrap h1 { font-size: clamp(30px, 5vw, 48px); margin-bottom: 16px; }
.error-404-wrap p { max-width: 480px; margin: 0 auto 32px; color: var(--slate); }
.error-404-wrap .hero-ctas { justify-content: center; margin-bottom: 36px; }
.search-form { display: flex; gap: 10px; max-width: 420px; margin: 0 auto; }
.search-form label { flex: 1; }
.search-field {
	width: 100%; border: 1.5px solid var(--line); padding: 11px 13px; font-size: 14.5px;
}
.search-submit {
	font-family: var(--font-mono); text-transform: uppercase; font-size: 13px; font-weight: 600;
	background: var(--blue); color: var(--white); border: none; padding: 0 20px; cursor: pointer;
}

/* Front page extra content (if editor adds body content to the front page). */
.front-page-extra { padding: 64px 0; }

/* =========================================================
   16. Track Shipment page
   ========================================================= */
.track-hero {
	background: var(--navy);
	color: var(--white);
	padding: 72px 0 56px;
	text-align: center;
}
.track-hero .eyebrow { color: var(--sky); justify-content: center; }
.track-hero .eyebrow::before { background: var(--sky); }
.track-hero h1 { color: var(--white); font-size: clamp(32px, 4.6vw, 48px); margin-bottom: 14px; }
.track-hero .lead { color: #C4D3DE; max-width: 520px; margin: 0 auto 32px; }
.track-form {
	display: flex;
	gap: 10px;
	max-width: 480px;
	margin: 0 auto;
	flex-wrap: wrap;
}
.track-form input {
	flex: 1;
	min-width: 220px;
	border: 1.5px solid var(--line-dark);
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
	padding: 13px 16px;
	font-size: 15px;
}
.track-form input::placeholder { color: #8FA3B3; }
.track-form input:focus { border-color: var(--sky); outline: none; }
.track-hint { margin-top: 16px; color: #8FA3B3; font-size: 11px; }

.track-results-section { padding: 56px 0 var(--section-pad); }
.track-results-section .form-notice { max-width: 640px; margin: 0 auto 24px; text-align: center; }

.track-result {
	max-width: 720px;
	margin: 0 auto;
	border: 2px solid var(--navy);
	padding: 36px 40px;
	background: var(--white);
}
.track-result__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 28px;
}
.track-result__label {
	display: block;
	font-size: 11px;
	color: var(--slate);
	margin-bottom: 6px;
}
#track-number-display { font-size: 26px; letter-spacing: 0.02em; }
.track-status-badge {
	flex: none;
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 7px 14px;
	border-radius: 3px;
	background: var(--blue);
	color: var(--white);
}
.track-status-badge.is-delivered { background: #1F7A3D; }
.track-status-badge.is-delayed { background: #C0392B; }

.track-delayed-note {
	background: #FBEAE8;
	color: #A5311F;
	border: 1px solid #F1C6C0;
	padding: 12px 16px;
	font-size: 13.5px;
	margin-bottom: 26px;
	border-radius: 3px;
}

.track-progress {
	display: flex;
	justify-content: space-between;
	gap: 4px;
	margin-bottom: 32px;
	position: relative;
}
.track-progress::before {
	content: "";
	position: absolute;
	top: 7px; left: 4%; right: 4%;
	height: 2px;
	background: var(--line);
	z-index: 0;
}
.track-progress__step {
	flex: 1;
	text-align: center;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.track-progress__dot {
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--white);
	border: 2px solid var(--line);
}
.track-progress__step.is-complete .track-progress__dot { background: var(--blue); border-color: var(--blue); }
.track-progress__step.is-current .track-progress__dot { box-shadow: 0 0 0 4px rgba(20, 112, 184, 0.18); }
.track-progress__label { font-size: 9.5px; color: var(--slate); max-width: 76px; line-height: 1.3; }
.track-progress__step.is-complete .track-progress__label { color: var(--navy); font-weight: 600; }

.track-details {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px 28px;
	margin-bottom: 8px;
}
.track-details__item span {
	display: block;
	font-size: 10.5px;
	color: var(--slate);
	margin-bottom: 4px;
}
.track-details__item strong { font-size: 15px; color: var(--ink); font-weight: 600; }

.track-notes {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}
.track-notes span { display: block; font-size: 10.5px; color: var(--slate); margin-bottom: 6px; }
.track-notes p { font-size: 14px; color: var(--ink); margin: 0; line-height: 1.6; }

.track-updated { margin-top: 24px; font-size: 10.5px; color: var(--slate); }

.track-cta {
	text-align: center;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--line);
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.track-cta p { color: var(--slate); margin-bottom: 14px; }