/*
Theme Name: Novago
Theme URI: https://www.novago.be
Description: Novago — global transport & logistics by road, sea and air. Warm, light palette with a navy + gold accent taken from the company presentation.
Author: Novago
Version: 2.8.5
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: novago
*/

/* =========================================================================
   1. Design tokens
   ========================================================================= */
:root {
	--void: #f7f2e8;
	--ink: #efe5d4;
	--surface: #fffdf8;
	--surface-2: #f4ebdd;
	--line: rgba(58, 44, 26, 0.14);
	--line-strong: rgba(58, 44, 26, 0.26);
	--fog: #d8cbb2;

	--text: #211d16;
	--text-dim: #5b5245;
	--text-faint: #948873;

	/* Accent system — navy + gold, taken from the company presentation.
	   --signal (navy) carries all accent TEXT and numbers; --gold is the
	   decorative glint (dashes, bullets, timeline dots, rail, hero glow). */
	--signal: #0b2545;
	--signal-soft: #c9a227;
	--signal-deep: #08192f;

	--navy: #0b2545;
	--navy-soft: #173a68;
	--gold: #c9a227;
	--gold-deep: #a9861a;

	--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	--radius-sm: 4px;
	--radius-md: 10px;
	--radius-lg: 16px;

	--shadow-card: 0 1px 2px rgba(45, 34, 18, 0.05), 0 14px 34px -14px rgba(45, 34, 18, 0.14);
	--shadow-lift: 0 2px 6px rgba(45, 34, 18, 0.07), 0 30px 70px -24px rgba(45, 34, 18, 0.22);

	--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

	--container: 80rem;
	--gutter: 1.25rem;
}
@media (min-width: 640px) { :root { --gutter: 2rem; } }
@media (min-width: 1024px) { :root { --gutter: 3rem; } }

/* =========================================================================
   2. Base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { border-color: var(--line); }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	background: var(--void);
	color-scheme: light;
	scroll-padding-top: 5rem;
}
body {
	margin: 0;
	min-height: 100dvh;
	background: var(--void);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease-expo); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { color: var(--text); font-weight: 600; }
::selection { background: var(--signal); color: #fff; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
	position: fixed; left: 1rem; top: -100px; z-index: 200;
	background: var(--signal); color: #fff; padding: .6rem 1rem;
	font-family: var(--font-mono); font-size: .85rem; border-radius: var(--radius-sm);
	transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

/* =========================================================================
   3. Layout primitives
   ========================================================================= */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(3.75rem, 11vw, 9rem); }
.section--raised { background: var(--ink); }

.section-rule {
	height: 1px; border: 0;
	background: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
}
.hairline {
	height: 1px; border: 0;
	background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
}

/* =========================================================================
   4. Type helpers
   ========================================================================= */
.display-hero {
	font-family: var(--font-display); font-weight: 600;
	line-height: 1; letter-spacing: -0.035em;
	font-size: clamp(2.35rem, 6vw, 5rem);
	overflow-wrap: break-word;
}
.display-section {
	font-family: var(--font-display); font-weight: 700;
	line-height: 1.15; letter-spacing: -0.02em;
	font-size: clamp(1.8rem, 4.4vw, 3.4rem);
	overflow-wrap: break-word;
}
.lede {
	font-size: clamp(1.05rem, 1.7vw, 1.3rem);
	line-height: 1.6; color: var(--text-dim); text-wrap: pretty;
}
.eyebrow {
	display: inline-flex; align-items: center; gap: .75rem;
	font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
	letter-spacing: 0.26em; text-transform: uppercase; color: var(--signal);
}
.eyebrow__index { color: var(--gold-deep); }
.eyebrow__dash { width: 1.5rem; height: 1px; background: var(--gold); }
.eyebrow--light { color: var(--gold); }
.mono-label {
	font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
	letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint);
}
.rule-quote {
	border-left: 2px solid var(--signal); padding-left: 1.25rem;
	font-family: var(--font-display); font-size: clamp(1.15rem, 2.4vw, 1.5rem);
	letter-spacing: -0.02em; color: var(--text);
}
.panel {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}

/* =========================================================================
   5. Buttons
   ========================================================================= */
.btn {
	--btn-h: 2.75rem;
	display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
	min-height: var(--btn-h); padding-inline: 1.25rem;
	font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
	letter-spacing: 0.18em; text-transform: uppercase;
	border: 1px solid transparent; cursor: pointer;
	transition: all .3s var(--ease-expo);
}
.btn svg { flex: none; width: 1rem; height: 1rem; transition: transform .3s var(--ease-expo); }
.btn--lg { --btn-h: 3.5rem; padding-inline: 1.75rem; font-size: 0.82rem; }
.btn--primary { background: var(--navy); color: var(--gold); }
.btn--primary:hover { background: var(--navy-soft); color: var(--gold); }
.btn--primary:hover svg { transform: translateX(4px); }
.btn--secondary { border-color: var(--line-strong); color: var(--text); }
.btn--secondary:hover { border-color: var(--navy); color: var(--navy); }
/* Ghost — for use on dark imagery (hero) */
.btn--ghost { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

/* =========================================================================
   6. Header / navigation
   ========================================================================= */
.site-header {
	position: fixed; inset-inline: 0; top: 0; z-index: 100;
	border-bottom: 1px solid transparent;
	transition: background-color .4s var(--ease-expo), border-color .4s var(--ease-expo);
}
.site-header.is-scrolled {
	/* Solid bar — no backdrop-filter. A blur on a scroll-fixed element forces
	   the GPU to re-sample the page behind it every frame (scroll jank). */
	background: var(--void);
	border-bottom-color: var(--line);
}

/* At the very top the header sits over the dark hero photo — flip the marks
   and links to light so they stay legible. Reverts on scroll (cream bar). */
.site-header:not(.is-scrolled) .wordmark { color: #fff; }
.site-header:not(.is-scrolled) .wordmark__mark { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); }
.site-header:not(.is-scrolled) .nav-desktop__links { color: rgba(255, 255, 255, 0.72); }
.site-header:not(.is-scrolled) .nav-desktop__links a:hover,
.site-header:not(.is-scrolled) .nav-desktop__links a.is-active { color: #fff; }
.site-header:not(.is-scrolled) .nav-desktop__divider { background: rgba(255, 255, 255, 0.24); }
.site-header:not(.is-scrolled) .nav-cta { background: var(--gold); color: var(--signal-deep); }
.site-header:not(.is-scrolled) .nav-cta:hover { background: #fff; color: var(--signal-deep); }
.site-header:not(.is-scrolled) .lang-switch__item { color: rgba(255, 255, 255, 0.6); }
.site-header:not(.is-scrolled) .lang-switch__item:hover,
.site-header:not(.is-scrolled) .lang-switch__item.is-current { color: #fff; }
.site-header:not(.is-scrolled) .lang-switch__sep { color: rgba(255, 255, 255, 0.4); }
.site-header:not(.is-scrolled) .nav-toggle { color: #fff; }

/* Mobile menu open — the real header bar stays pinned on top of the overlay
   (logo, wordmark, language switcher, close X). Force it solid + dark marks
   regardless of scroll position. */
.is-menu-open .site-header { background: var(--void); border-bottom-color: var(--line); }
.is-menu-open .site-header .wordmark { color: var(--text); }
.is-menu-open .site-header .wordmark__mark { box-shadow: 0 2px 10px -3px color-mix(in srgb, var(--navy) 55%, transparent); }
.is-menu-open .site-header .lang-switch__item { color: var(--text-faint); }
.is-menu-open .site-header .lang-switch__item:hover,
.is-menu-open .site-header .lang-switch__item.is-current { color: var(--signal); }
.is-menu-open .site-header .lang-switch__sep { color: var(--text-faint); }
.is-menu-open .site-header .nav-toggle { color: var(--text); }
.site-header__bar {
	display: flex; align-items: center; justify-content: space-between;
	height: 4rem;
	max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
}
@media (min-width: 640px) { .site-header__bar { height: 4.5rem; } }

.wordmark { display: inline-flex; align-items: center; gap: .625rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 1.05rem; color: var(--text); }
@media (min-width: 640px) { .wordmark { letter-spacing: 0.24em; font-size: 1.1rem; } }
.wordmark__mark {
	flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.1rem; height: 2.1rem; padding: 0.34rem;
	color: var(--navy);
	background: var(--gold);
	border-radius: 9px;
	box-shadow: 0 2px 10px -3px color-mix(in srgb, var(--navy) 55%, transparent);
}
.wordmark__mark svg { width: 100%; height: 100%; display: block; }
@media (min-width: 640px) { .wordmark__mark { width: 2.35rem; height: 2.35rem; border-radius: 10px; } }
.site-footer .wordmark__mark { width: 2.6rem; height: 2.6rem; border-radius: 11px; }

.nav-desktop { display: none; align-items: center; gap: 1.75rem; }
.nav-desktop__links { display: flex; align-items: center; gap: 1.5rem; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-dim); }
.nav-desktop__links a { position: relative; padding-block: .25rem; }
.nav-desktop__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--gold); transition: right .25s var(--ease-expo); }
.nav-desktop__links a:hover { color: var(--text); }
.nav-desktop__links a:hover::after { right: 0; }
.nav-desktop__divider { width: 1px; height: 1rem; background: var(--line-strong); }
.nav-cta {
	display: inline-flex; align-items: center; height: 2.5rem; padding-inline: 1.25rem;
	background: var(--navy); color: var(--gold);
	font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
	transition: background-color .3s var(--ease-expo);
}
.nav-cta:hover { background: var(--navy-soft); color: var(--gold); }

.nav-mobile-controls { display: flex; align-items: center; gap: .75rem; }
.nav-toggle {
	position: relative; z-index: 60; width: 2.5rem; height: 2.5rem; margin-right: -.5rem;
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 0; cursor: pointer; color: var(--text);
}
.nav-toggle__box { position: relative; width: 1.5rem; height: .875rem; }
.nav-toggle__box span { position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform .3s var(--ease-expo), opacity .2s ease, top .3s var(--ease-expo); }
.nav-toggle__box span:nth-child(1) { top: 0; }
.nav-toggle__box span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle__box span:nth-child(3) { bottom: 0; }
.is-menu-open .nav-toggle__box span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.is-menu-open .nav-toggle__box span:nth-child(2) { opacity: 0; }
.is-menu-open .nav-toggle__box span:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* Full-screen menu — sibling of <header> so nothing traps it, toggled via
   the `hidden` attribute (out of the paint tree when closed = no scroll
   cost) and faded with `.is-menu-in`. */
.nav-overlay {
	/* opens BELOW the fixed header (which stays visible on top), so the
	   4rem/4.5rem header bar keeps showing the logo + language switcher */
	position: fixed; inset: 4rem 0 0; z-index: 90;
	background: var(--void);
	padding: 1.5rem var(--gutter) calc(env(safe-area-inset-bottom) + 2.5rem);
	overflow-y: auto; overscroll-behavior: contain;
	opacity: 0; transform: translateY(-8px); pointer-events: none;
	transition: opacity .26s var(--ease-expo), transform .26s var(--ease-expo);
}
@media (min-width: 640px) { .nav-overlay { top: 4.5rem; } }
.nav-overlay[hidden] { display: none; }
.is-menu-in .nav-overlay { opacity: 1; transform: none; pointer-events: auto; }

/* Page frozen in place while the menu is open — no jump, no reflow flash.
   `top` is set inline to -scrollY by the script. */
body.is-menu-open {
	position: fixed;
	inset-inline: 0;
	width: 100%;
	overflow: hidden;
}

.nav-overlay__links { border-top: 1px solid var(--line); }
.nav-overlay__links li { border-bottom: 1px solid var(--line); }
.nav-overlay__links a {
	display: flex; align-items: baseline; gap: 1rem;
	padding-block: 1.25rem;
	font-family: var(--font-display); font-size: 1.6rem; line-height: 1; letter-spacing: -0.02em; color: var(--text);
}
.nav-overlay__links a:active { color: var(--signal); }
.nav-overlay__num { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint); }
.nav-overlay__cta { margin-top: 2rem; width: 100%; }
.nav-overlay__tagline { margin-top: 2rem; font-family: var(--font-display); font-size: 1.125rem; letter-spacing: -0.02em; color: var(--text-dim); }
.nav-overlay__contact { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .5rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint); }

@media (min-width: 1024px) {
	.nav-desktop { display: flex; }
	.nav-mobile-controls { display: none; }
	.nav-overlay { display: none; }
}

.lang-switch { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; }
.lang-switch__item { color: var(--text-faint); text-transform: uppercase; transition: color .2s ease; }
.lang-switch__item:hover { color: var(--text); }
.lang-switch__item.is-current { color: var(--signal); }
.lang-switch__sep { margin-inline: .375rem; color: var(--text-faint); }

/* =========================================================================
   7. Hero — full-bleed freight photo, message over a dark scrim
   ========================================================================= */
.hero {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; align-items: center;
	/* Always fills the viewport on every screen — no bottom gap, next section
	   never peeks in. svh (not dvh) so the mobile URL bar doesn't cause a
	   scroll-time resize; min-height (not height) so tall copy on a short
	   window still grows the section instead of being clipped. */
	min-height: 100vh;
	min-height: 100svh;
	padding-top: clamp(5rem, 4rem + 4vw, 7rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	background: var(--signal-deep);
}
/* Mobile browsers that draw the page under a translucent bottom toolbar
   (e.g. on iPhone) show more than 100svh on first paint, which left a strip
   of the next section visible. Extend the backdrop to the largest viewport
   and add the difference to the bottom padding, so the copy stays centred in
   the small viewport exactly as before. On desktop lvh = svh: no change. */
@supports (height: 100lvh) {
	.hero {
		min-height: 100lvh;
		padding-bottom: calc(clamp(2.5rem, 5vw, 4rem) + (100lvh - 100svh));
	}
}
.hero__bg, .hero__video {
	position: absolute; inset: 0; z-index: -3;
	width: 100%; height: 100%;
	object-fit: cover; object-position: 58% 50%;
}
/* The loop sits over the still and only becomes visible once it is playing. */
.hero__video { z-index: -2; opacity: 0; transition: opacity 1.4s ease; }
.hero__video.is-playing { opacity: 1; }
.hero__scrim {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		/* navy from the left carries the copy; top and bottom only frame the shot */
		linear-gradient(90deg,
			rgba(8, 25, 47, 0.92) 0%, rgba(8, 25, 47, 0.74) 34%,
			rgba(8, 25, 47, 0.30) 62%, rgba(8, 25, 47, 0) 84%),
		linear-gradient(180deg,
			rgba(8, 25, 47, 0.58) 0%, rgba(8, 25, 47, 0.12) 26%,
			rgba(8, 25, 47, 0.12) 62%, rgba(8, 25, 47, 0.72) 100%);
}
.hero__inner {
	position: relative; z-index: 1; width: 100%;
}
.hero__text { max-width: 42rem; }
.hero__text .eyebrow { flex-wrap: wrap; row-gap: .35rem; }
.hero__title { margin-top: 1.4rem; max-width: 20ch; color: #fff; text-wrap: balance; }
.hero__lede { margin-top: 1.4rem; max-width: 46ch; color: rgba(255, 255, 255, 0.82); }
.hero__actions { margin-top: 2rem; display: flex; flex-direction: column; gap: .75rem; }
.hero__actions .btn { width: 100%; }
/* gold-filled primary so it carries on the dark photo (matches the header CTA) */
.hero__actions .btn--primary { background: var(--gold); color: var(--signal-deep); }
.hero__actions .btn--primary:hover { background: #fff; color: var(--signal-deep); }

@media (min-width: 640px) {
	.hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
	.hero__actions .btn { width: auto; }
}
@media (min-width: 1024px) {
	.hero__text { max-width: 40rem; }
	.hero__title { max-width: 18ch; }
}

/* =========================================================================
   8. Section heading
   ========================================================================= */
.s-head { display: flex; flex-direction: column; gap: 1.5rem; }
.s-head--center { align-items: center; text-align: center; }
.s-head__title { max-width: 22ch; }
.s-head--center .s-head__title { max-width: 24ch; }
.s-head__lede { max-width: 54ch; }
.s-head--center .s-head__lede { margin-inline: auto; }

/* =========================================================================
   9. About
   ========================================================================= */
.about-grid { display: grid; gap: 2rem; }
.stats { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 1rem; }
.stat { display: flex; flex-direction: column; gap: .5rem; padding: 1.75rem; }
.stat__num { font-family: var(--font-display); font-weight: 700; line-height: .85; letter-spacing: -0.04em; color: var(--gold); font-size: clamp(2.75rem, 8vw, 3.75rem); font-variant-numeric: tabular-nums; }
.stat__label { font-size: 0.92rem; line-height: 1.5; color: var(--text-dim); }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .about-grid { grid-template-columns: 1fr 1.05fr; gap: 4rem; align-items: start; } }

/* =========================================================================
   10. Stepper (heritage + process)
   ========================================================================= */
.stepper { position: relative; display: grid; gap: 0; }
.stepper__rail { position: absolute; left: 6px; top: .5rem; bottom: .5rem; width: 1px; background: var(--line); }
.stepper__fill { position: absolute; left: 6px; top: .5rem; width: 1px; background: var(--gold); height: 0; transition: height 1.4s var(--ease-expo); }
.stepper.is-visible .stepper__fill { height: calc(100% - 1rem); }
.step { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1rem 0 1rem 2rem; }
.step__node { position: absolute; left: 0; top: 22px; width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--gold); background: var(--void); z-index: 1; }
.section--raised .step__node { background: var(--ink); }
.step__n { font-family: var(--font-mono); font-size: 0.7rem; color: var(--navy); }
.step h3 { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.02em; color: var(--text); }
.step p { font-size: 0.85rem; line-height: 1.6; color: var(--text-dim); }

@media (min-width: 1024px) {
	.stepper--4 { grid-template-columns: repeat(4, 1fr); }
	.stepper--5 { grid-template-columns: repeat(5, 1fr); }
	.stepper { column-gap: 1.25rem; row-gap: 2.5rem; }
	.stepper__rail { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 1px; }
	.stepper__fill { left: 0; top: 7px; height: 1px !important; width: 0; transition: width 1.4s var(--ease-expo); }
	.stepper.is-visible .stepper__fill { width: 100%; }
	.step { padding: 0; }
	.step__node { position: static; margin-bottom: .75rem; }
	.stepper--labels .step h3 { font-size: 1rem; }
}

/* =========================================================================
   11. Services — modes, support grid, detail panels
   ========================================================================= */
.modes { margin-top: clamp(2.5rem, 6vw, 3.5rem); display: grid; gap: 1rem; }
.mode { display: flex; flex-direction: column; gap: .625rem; padding: 1.9rem; }
.mode__kicker { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--signal); }
.mode h3 { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -0.02em; color: var(--text); }
.mode p { font-size: 0.9rem; line-height: 1.6; color: var(--text-dim); }
@media (min-width: 768px) { .modes { grid-template-columns: repeat(3, 1fr); } }

/* Photo-backed mode cards — dark image, gradient wash, light copy pinned low */
.mode--photo {
	position: relative; overflow: hidden; isolation: isolate;
	justify-content: flex-end; min-height: 17rem;
	padding: 1.75rem; border-color: transparent;
}
.mode__bg {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
	transition: transform .5s var(--ease-expo);
}
/* road: frame the cab of the truck further up the road, not the near wheel */
.mode--road .mode__bg { object-position: 80% 12%; }
.mode--photo::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg,
		rgba(8, 20, 36, 0.15) 0%, rgba(8, 20, 36, 0.5) 52%, rgba(8, 20, 36, 0.88) 100%);
}
.mode--photo .mode__kicker { color: var(--gold); }
.mode--photo h3 { color: #fff; }
.mode--photo p { color: rgba(255, 255, 255, 0.82); }
@media (hover: hover) {
	.mode--photo:hover .mode__bg { transform: scale(1.05); }
}
@media (min-width: 768px) { .mode--photo { min-height: 20rem; } }

.svc-grid { margin-top: clamp(2.5rem, 6vw, 3.5rem); display: none; gap: 1rem; }
.svc-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.6rem; transition: transform .3s var(--ease-expo), box-shadow .3s var(--ease-expo); }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.svc-card__n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--navy); transition: color .3s ease; }
.svc-card:hover .svc-card__n { color: var(--gold-deep); }
.svc-card h3 { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text); }
.svc-card p { font-size: 0.875rem; line-height: 1.6; color: var(--text-dim); }
@media (min-width: 1024px) {
	.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
	.svc-deck { display: none; }
}

.panels { margin-top: 1rem; display: grid; gap: 1rem; }
.detail-panel { padding: 1.9rem; }
.detail-panel h3 { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text); margin-bottom: 1rem; }
.detail-panel ul { display: flex; flex-direction: column; gap: .625rem; }
.detail-panel li { position: relative; padding-left: 1.4rem; font-size: 0.9rem; line-height: 1.55; color: var(--text-dim); }
.detail-panel li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 999px; background: var(--gold); }
@media (min-width: 900px) { .panels { grid-template-columns: 1fr 1fr; } }

/* =========================================================================
   12. Why choose
   ========================================================================= */
.why-grid { display: grid; gap: 3rem; }
.why-points { display: flex; flex-direction: column; gap: .75rem; }
.why-point { display: flex; gap: 1rem; padding: 1.35rem; }
.why-point__n {
	margin-top: .125rem; flex: none;
	width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid color-mix(in srgb, var(--navy) 30%, var(--line)); border-radius: 999px;
	font-family: var(--font-mono); font-size: 0.7rem; color: var(--navy);
}
.why-point h3 { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.02em; color: var(--text); }
.why-point p { margin-top: .375rem; font-size: 0.92rem; line-height: 1.6; color: var(--text-dim); }
@media (min-width: 1024px) {
	.why-grid { grid-template-columns: 1fr 1.15fr; gap: 5rem; }
	.why-head { position: sticky; top: 7rem; align-self: start; }
}

/* =========================================================================
   13. Mission & Vision
   ========================================================================= */
.mv { margin-top: clamp(2rem, 5vw, 3rem); display: grid; gap: 1rem; }
.mv__card { padding: 2.25rem; display: flex; flex-direction: column; gap: 1rem; }
.mv__label { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--signal); }
.mv__card p { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6; color: var(--text-dim); }
@media (min-width: 900px) { .mv { grid-template-columns: 1fr 1fr; } }

/* =========================================================================
   14. Quality checklist
   ========================================================================= */
.checklist { margin-top: clamp(2rem, 5vw, 3rem); display: flex; flex-direction: column; gap: .75rem; }
.check-row { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.35rem; font-size: 0.95rem; color: var(--text); }
.check-row__icon {
	flex: none; width: 2rem; height: 2rem; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-deep);
}
.check-row__icon svg { width: 1.1rem; height: 1.1rem; }

/* =========================================================================
   15. Organisation
   ========================================================================= */
.org-grid { margin-top: clamp(2rem, 5vw, 3rem); display: grid; gap: 1rem; }
.org-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem; }
.org-card__n { font-family: var(--font-mono); font-size: 0.7rem; color: var(--signal); }
.org-card h3 { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.02em; color: var(--text); }
.org-card p { font-size: 0.88rem; line-height: 1.6; color: var(--text-dim); }
@media (min-width: 640px) { .org-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .org-grid { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================================
   16. Commitment
   ========================================================================= */
.commit-grid { margin-top: clamp(2rem, 5vw, 3rem); display: grid; gap: 2.5rem 2rem; }
.commit-item { border-top: 1px solid var(--line-strong); padding-top: 1.25rem; }
.commit-item h3 { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.02em; color: var(--text); }
.commit-item p { margin-top: .5rem; font-size: 0.9rem; line-height: 1.6; color: var(--text-dim); }
@media (min-width: 640px) { .commit-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .commit-grid { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================================
   17. Contact
   ========================================================================= */
.contact-grid { margin-top: clamp(2.5rem, 6vw, 3.5rem); display: grid; gap: 1rem; }
.office { padding: 1.75rem; display: flex; flex-direction: column; gap: .375rem; }
.office__label { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); }
.office__value { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.02em; color: var(--text); }
.office__link { font-size: 1rem; color: var(--text); }
.office__link:hover { color: var(--signal); }
.office--wide { gap: 1.25rem; }
.office--wide .office__pair { display: flex; flex-direction: column; gap: .25rem; }
@media (min-width: 640px) {
	.contact-grid { grid-template-columns: 1fr 1fr; }
	.office--wide { grid-column: 1 / -1; flex-direction: row; gap: 3rem; }
}
.contact-foot { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.contact-foot__note { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--text-faint); max-width: 48ch; }

/* =========================================================================
   18. Support cards — native horizontal scroll-snap strip (mobile)
   ========================================================================= */
.svc-deck { margin-inline: calc(var(--gutter) * -1); }
.deck__list {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--gutter);
	padding: 0.25rem var(--gutter) 0.75rem;
	scrollbar-width: none;
}
.deck__list::-webkit-scrollbar { display: none; }
.deck__card {
	flex: 0 0 82%;
	scroll-snap-align: center;
	padding: 1.5rem;
	display: flex; flex-direction: column;
}
.deck__card .n { font-family: var(--font-mono); font-size: 0.7rem; color: var(--signal); }
.deck__card h3 { margin-top: .5rem; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text); }
.deck__card p { margin-top: .5rem; font-size: 0.875rem; line-height: 1.6; color: var(--text-dim); }
@media (min-width: 480px) { .deck__card { flex-basis: 58%; } }
@media (min-width: 768px) { .deck__card { flex-basis: 42%; } }

/* =========================================================================
   19. Footer
   ========================================================================= */
.site-footer { position: relative; background: var(--ink); }
.site-footer .section-rule { position: absolute; inset-inline: var(--gutter); top: 0; max-width: var(--container); margin-inline: auto; }
.site-footer__grid { display: grid; gap: 3rem; padding-block: 4rem; }
.site-footer__brand { display: flex; flex-direction: column; gap: 1.25rem; }
.site-footer__tagline { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: -0.02em; color: var(--text); }
.site-footer__desc { max-width: 36ch; font-size: 0.875rem; line-height: 1.6; color: var(--text-faint); }
.site-footer__social { display: flex; gap: .625rem; margin-top: .25rem; }
.social-icons__item {
	display: flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem; border-radius: 999px;
	border: 1px solid var(--line-strong); color: var(--text-dim);
	transition: color .2s var(--ease-expo), border-color .2s var(--ease-expo), background-color .2s var(--ease-expo), transform .2s var(--ease-expo);
}
.social-icons__item:hover, .social-icons__item:focus-visible {
	color: var(--surface); background: var(--signal); border-color: var(--signal);
	transform: translateY(-2px);
}
.social-icons__icon { width: 1.1rem; height: 1.1rem; }
.footer-col h3 { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; }
.footer-col ul { margin-top: .75rem; display: flex; flex-direction: column; gap: .625rem; font-size: 0.875rem; color: var(--text-dim); }
.footer-col a:hover { color: var(--signal); }
.footer-col .lang-row { padding-top: .75rem; }
.footer-col .lang-row .mono-label { display: block; margin-bottom: .5rem; }
.site-footer__base { padding-bottom: 4rem; font-size: 0.75rem; color: var(--text-faint); }
.site-footer__base .hairline { margin-bottom: 2rem; }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; } }

/* =========================================================================
   20. Reveal on scroll
   ========================================================================= */
.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-visible { opacity: 1; transition: opacity .4s ease; }
/* Stagger children settle in like crates being set down: lift + a hair of
   scale so they read as "placed", not just faded. transform/opacity only. */
.js [data-reveal-stagger] > * { opacity: 0; }
.js [data-reveal-stagger].is-visible > * { opacity: 1; transition: opacity .4s ease; }

/* =========================================================================
   21. Grain overlay
   ========================================================================= */
.grain {
	position: fixed; inset: 0; z-index: 60; pointer-events: none;
	/* No mix-blend-mode: a full-viewport fixed blend layer must be re-composited
	   over the scrolling page every frame — a prime cause of scroll jank,
	   worst during the rubber-band at the very bottom. Plain overlay instead. */
	opacity: 0.03;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================================
   22. Interior pages (page.php / 404)
   ========================================================================= */
.page-hero { padding-top: 8rem; padding-bottom: 3rem; background: var(--ink); border-bottom: 1px solid var(--line); }
.entry { padding-block: 4rem; }
.page-body { max-width: 44rem; margin-inline: auto; }
.page-body h2 { margin: 2rem 0 .75rem; font-size: 1.6rem; }
.page-body p { margin-bottom: 1.1rem; }
.page-body a { color: var(--signal); }
.nf { text-align: center; max-width: 40rem; margin-inline: auto; }
.nf .btn { margin-top: 1.5rem; }

/* =========================================================================
   23. Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	html { scroll-behavior: auto; }
	.js [data-reveal], .js [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
	.stepper__fill { transition: none !important; }
}

/* =========================================================================
   24. Hover affordances
   --------------------------------------------------------------------------
   Kept deliberately tiny: a subtle lift on cards when a real pointer hovers,
   and the desktop nav active-section marker. No scroll-linked animation.
   ========================================================================= */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.panel:not(.deck__card):not(.deck__sizer) {
		transition: transform .3s var(--ease-expo), box-shadow .3s var(--ease-expo), border-color .3s var(--ease-expo);
	}
	.panel:not(.deck__card):not(.deck__sizer):hover {
		transform: translateY(-3px);
		box-shadow: var(--shadow-lift);
		border-color: color-mix(in srgb, var(--signal) 26%, var(--line));
	}
}

/* Desktop nav — active-section indicator */
.nav-desktop__links a.is-active { color: var(--text); }
.nav-desktop__links a.is-active::after { right: 0; }

/* =========================================================================
   25. Marquee — navy band, brand phrases on a slow loop
   --------------------------------------------------------------------------
   One transform animation on a single element: it runs on the compositor
   thread and never touches the main thread, so it does not affect scroll.
   Track holds the phrase set twice; translateX(-50%) lands on an identical
   frame = seamless. Pauses for reduced-motion and on hover.
   ========================================================================= */
.marquee {
	overflow: hidden;
	background: var(--signal);
	border-block: 1px solid color-mix(in srgb, var(--signal) 60%, #000);
	padding-block: 0.95rem;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
	display: flex; align-items: center; width: max-content;
	animation: novago-marquee 204s linear infinite;
}
.marquee__item {
	flex: none;
	font-family: var(--font-display); font-weight: 600;
	font-size: clamp(1rem, 0.85rem + 1vw, 1.6rem);
	letter-spacing: 0.01em; color: var(--void); white-space: nowrap;
	padding-inline: clamp(1.1rem, 3vw, 2.25rem);
}
.marquee__sep {
	flex: none; width: 0.5rem; height: 0.5rem; border-radius: 999px;
	background: var(--gold);
}
@keyframes novago-marquee { to { transform: translateX(-50%); } }
@media (hover: hover) {
	.marquee:hover .marquee__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
	.marquee__track { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.75rem 0; }
	.marquee__track > :nth-child(n + 7) { display: none; }
}

/* =========================================================================
   26. Teklif Al — quote-request modal
   --------------------------------------------------------------------------
   Sibling of <header>, toggled via `hidden` (out of the paint tree when
   closed) and faded/lifted in with `.is-in`, same pattern as .nav-overlay.
   Sits above the fixed header (z-index 100) and the mobile nav (90).
   ========================================================================= */
.quote-modal {
	position: fixed; inset: 0; z-index: 150;
	display: flex; align-items: flex-end; justify-content: center;
	opacity: 0; transition: opacity .3s var(--ease-expo);
}
.quote-modal[hidden] { display: none; }
.quote-modal.is-in { opacity: 1; }
@media (min-width: 640px) {
	.quote-modal { align-items: center; padding: 2rem; }
}

.quote-modal__backdrop {
	position: absolute; inset: 0;
	background: color-mix(in srgb, var(--signal-deep) 72%, transparent);
}

.quote-modal__panel {
	position: relative; z-index: 1; width: 100%; max-width: 30rem;
	max-height: min(88dvh, 44rem); overflow-y: auto;
	background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	box-shadow: var(--shadow-lift);
	padding: 1.75rem var(--gutter) 2.25rem;
	transform: translateY(16px);
	transition: transform .3s var(--ease-expo);
}
.quote-modal.is-in .quote-modal__panel { transform: none; }
@media (min-width: 640px) {
	.quote-modal__panel { border-radius: var(--radius-lg); padding: 2.5rem; }
}

.quote-modal__close {
	position: absolute; top: 1rem; right: 1rem;
	display: flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem; border-radius: 999px;
	color: var(--text-dim); cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.quote-modal__close:hover { background: var(--surface-2); color: var(--text); }
.quote-modal__close svg { width: 1.1rem; height: 1.1rem; }

.quote-modal__title { font-size: clamp(1.5rem, 3vw, 1.9rem); padding-right: 2.5rem; }
.quote-modal__lede { margin-top: .5rem; color: var(--text-dim); font-size: 0.95rem; line-height: 1.5; }

.quote-form { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.quote-form__field { display: flex; flex-direction: column; gap: .375rem; }
.quote-form__field[hidden] { display: none; }
.quote-form__field label {
	font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint);
}
.quote-form__optional { text-transform: none; letter-spacing: normal; }

.quote-form__field input,
.quote-form__field select,
.quote-form__field textarea {
	width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
	background: var(--surface); color: var(--text);
	padding: .7rem .8rem; font-family: var(--font-sans); font-size: 0.95rem;
	transition: border-color .2s ease;
}
.quote-form__field select { appearance: auto; }
.quote-form__field input:focus-visible,
.quote-form__field select:focus-visible,
.quote-form__field textarea:focus-visible { border-color: var(--signal); }
.quote-form__field textarea { resize: vertical; min-height: 5rem; }

.quote-form__type-options { display: flex; gap: .625rem; margin-top: .375rem; }
.quote-form__type-option { flex: 1; }
/* Comes after the generic `.quote-form__field input` rule above so its
   visually-hidden box wins the cascade cleanly (equal specificity, later
   wins) instead of silently inheriting width/padding/border back. */
.quote-form__type-option input {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.quote-form__type-option span {
	display: flex; align-items: center; justify-content: center;
	min-height: 2.75rem; padding-inline: .75rem;
	border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
	font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em;
	color: var(--text-dim); cursor: pointer; text-align: center;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.quote-form__type-option input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--gold); }
.quote-form__type-option input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }

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

.quote-form__submit { width: 100%; margin-top: .25rem; }
.quote-form__submit:disabled { opacity: .6; cursor: not-allowed; }

.quote-form__status { min-height: 1.2em; font-size: 0.85rem; color: var(--text-dim); }
.quote-form__status.is-error { color: #b3261e; }
.quote-form__status.is-success { color: #2e7d32; }
.quote-form__field-error { margin: 0; font-size: 0.8rem; color: #b3261e; }

/* =========================================================================
   27. Bilgi Merkezi (blog) — v2
   Brand tokens only (navy / gold / cream, Inter). One memorable element:
   the article's sections drawn as a transport route with stops. Everything
   else stays quiet: no boxed cards, sentence-case labels, one link per item.
   ========================================================================= */

/* ---- Hero (index + article): photo under a navy scrim ------------------ */
.blog-hero {
	position: relative; overflow: hidden;
	padding-top: clamp(7.5rem, 14vw, 10rem); padding-bottom: clamp(3.5rem, 8vw, 5.5rem);
	background: linear-gradient(160deg, var(--navy-soft), var(--signal-deep));
	color: #fff;
}
.blog-hero .container { position: relative; display: flex; flex-direction: column; gap: 1.1rem; }
.blog-hero__title { max-width: 18ch; }
.blog-hero__lede { max-width: 56ch; color: rgba(255, 255, 255, 0.78); }
.blog-hero--photo {
	background:
		linear-gradient(100deg, rgba(8, 25, 47, 0.95) 0%, rgba(11, 37, 69, 0.86) 45%, rgba(11, 37, 69, 0.55) 100%),
		var(--hero-img) center 55% / cover no-repeat,
		var(--signal-deep);
}
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; color: rgba(255, 255, 255, 0.62); }
.breadcrumb a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.25); text-underline-offset: 3px; }
.breadcrumb a:hover { color: #fff; text-decoration-color: var(--gold); }
.breadcrumb [aria-current] { color: rgba(255, 255, 255, 0.9); }

/* Article hero: the photo fills the band; dark left for the text */
.blog-hero--post { min-height: clamp(22rem, 42vw, 30rem); display: flex; align-items: flex-end; padding-bottom: clamp(3rem, 7vw, 4.5rem); }
.blog-hero--post > .container { width: 100%; }
.blog-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; max-width: 46rem; }
.blog-hero--post .blog-hero__title { max-width: 24ch; color: #fff; }
.blog-hero--post.blog-hero--photo {
	background:
		linear-gradient(100deg, rgba(8, 25, 47, 0.94) 0%, rgba(11, 37, 69, 0.78) 42%, rgba(11, 37, 69, 0.28) 100%),
		var(--hero-img) center / cover no-repeat,
		var(--signal-deep);
}
.blog-hero__meta { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; font-size: .95rem; color: rgba(255, 255, 255, 0.72); }
@media (max-width: 767px) {
	.blog-hero--post.blog-hero--photo {
		background:
			linear-gradient(180deg, rgba(8, 25, 47, 0.55) 0%, rgba(8, 25, 47, 0.9) 70%),
			var(--hero-img) center / cover no-repeat,
			var(--signal-deep);
	}
}

/* ---- Topic label (sentence case, not an eyebrow) ----------------------- */
.topic {
	display: inline-block; padding: .28rem .7rem; border-radius: 999px;
	font-size: .8rem; font-weight: 600; line-height: 1.2; letter-spacing: 0;
	color: var(--navy); background: rgba(201, 162, 39, 0.18);
}
.topic--on-dark { color: #f4dc8a; background: rgba(201, 162, 39, 0.2); border: 1px solid rgba(201, 162, 39, 0.35); }

/* ---- Teasers: one link per item, stretched over the whole item --------- */
.post-item { position: relative; }
.post-item__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-item__link:focus-visible { outline: none; }
.post-item:focus-within { outline: 2px solid var(--signal); outline-offset: 6px; border-radius: 6px; }
.post-item__media { overflow: hidden; background: var(--navy); border-radius: 12px; }
.post-item__media img { width: 100%; height: 100%; object-fit: cover; }
.post-item__body { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.post-item__title { line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.post-item__title a { transition: color .2s var(--ease-expo); }
.post-item:hover .post-item__title a { color: var(--signal); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.post-item__excerpt { color: var(--text-dim); line-height: 1.65; max-width: 60ch; }
.post-item__meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .85rem; color: var(--text-faint); }

/* Feature: newest article */
.post-item--feature { display: grid; gap: 1.75rem; padding-bottom: clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1px solid var(--line-strong); }
.post-item--feature .post-item__media { aspect-ratio: 16 / 10; border-radius: 16px; }
.post-item--feature .post-item__title { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 700; }
.post-item--feature .post-item__excerpt { font-size: 1.08rem; }
@media (min-width: 900px) {
	.post-item--feature { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
}

/* Rows: scannable list */
.post-rows { display: flex; flex-direction: column; }
.post-item--row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.1rem; align-items: start; padding-block: 1.6rem; border-bottom: 1px solid var(--line); }
.post-item--row .post-item__media { aspect-ratio: 4 / 3; border-radius: 10px; }
.post-item--row .post-item__title { font-size: 1.15rem; font-weight: 650; }
.post-item--row .post-item__excerpt { font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 639px) { .post-item--row .post-item__excerpt { display: none; } }
@media (min-width: 640px) {
	.post-item--row { grid-template-columns: 12rem minmax(0, 1fr); gap: 1.75rem; padding-block: 2rem; }
	.post-item--row .post-item__title { font-size: 1.35rem; }
}

/* Tiles: home page */
.post-tiles { display: grid; gap: 2rem 1.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 640px) { .post-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .post-tiles { grid-template-columns: repeat(4, 1fr); } }
.post-item--tile { display: flex; flex-direction: column; gap: 1rem; }
.post-item--tile .post-item__media { aspect-ratio: 16 / 10; }
.post-item--tile .post-item__title { font-size: 1.08rem; font-weight: 650; }

.blog-list { padding-top: clamp(2.5rem, 5vw, 4rem); }
.text-link { font-weight: 600; color: var(--signal); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.text-link:hover { text-decoration-color: var(--signal); }

/* ---- Article layout: route + reading column ---------------------------- */
.post-layout { display: grid; gap: 0; }
@media (min-width: 1100px) {
	.post-layout { grid-template-columns: 15.5rem minmax(0, 44rem); gap: clamp(3rem, 5vw, 5rem); justify-content: center; }
}

/* The route: sections as stops on a gold line */
.post-layout__aside { padding-top: clamp(2rem, 5vw, 3rem); }
.route { font-size: .92rem; }
.route__summary {
	display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none;
	min-height: 3rem; padding: .75rem 1rem; border: 1px solid var(--line-strong); border-radius: 10px;
	font-weight: 600; color: var(--text); background: var(--surface);
}
.route__summary::-webkit-details-marker { display: none; }
.route__summary::after { content: ""; width: .55rem; height: .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease-expo); }
.route[open] .route__summary::after { transform: rotate(-135deg) translateY(-2px); }
.route__title { display: none; font-weight: 600; color: var(--text); margin-bottom: 1rem; }
.route__stops { position: relative; margin-top: 1rem; padding-left: 1.6rem; }
.route__stops::before {
	content: ""; position: absolute; left: .44rem; top: .75rem; bottom: .75rem; width: 2px;
	background: repeating-linear-gradient(to bottom, var(--gold) 0 6px, transparent 6px 11px);
}
.route__stops li { position: relative; }
.route__stops a { display: block; padding: .45rem 0; line-height: 1.4; color: var(--text-dim); text-wrap: pretty; }
.route__stops a::before {
	content: ""; position: absolute; left: -1.6rem; top: .72rem; width: .95rem; height: .95rem; box-sizing: border-box;
	border: 2px solid var(--gold); border-radius: 50%; background: var(--void);
	transition: background-color .25s var(--ease-expo), transform .25s var(--ease-expo);
}
.route__stops a:hover { color: var(--text); }
.route__stops a.is-passed::before { background: var(--gold); }
.route__stops a.is-active { color: var(--text); font-weight: 600; }
.route__stops a.is-active::before { background: var(--gold); transform: scale(1.25); box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.22); }
@media (min-width: 1100px) {
	.post-layout__aside { padding-top: clamp(2.5rem, 6vw, 4rem); }
	.route { position: sticky; top: 6.5rem; }
	.route__summary { display: none; }
	.route__title { display: block; }
	.route__stops { margin-top: 0; }
}

/* ---- Reading column ----------------------------------------------------- */
.prose { max-width: 44rem; width: 100%; margin-inline: auto; padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 4.5rem); font-size: 1.1rem; line-height: 1.78; }
.prose > * + * { margin-top: 1.2rem; }
.prose__lead { font-size: clamp(1.15rem, 1.8vw, 1.3rem); line-height: 1.7; color: var(--text-dim); }
.prose h2 { margin-top: 3rem; font-size: clamp(1.45rem, 2.6vw, 1.8rem); line-height: 1.25; scroll-margin-top: 6.5rem; }
.prose h3 { margin-top: 2rem; font-size: 1.2rem; line-height: 1.35; }
.prose h2 + *, .prose h3 + * { margin-top: .75rem; }
.prose a { color: var(--signal); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { display: flex; flex-direction: column; gap: .6rem; }
.prose ul li { position: relative; padding-left: 1.5rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .85em; width: .75rem; height: 2px; background: var(--gold); }
.prose ol { counter-reset: step; }
.prose ol li { position: relative; padding-left: 2.4rem; counter-increment: step; }
.prose ol li::before {
	content: counter(step); position: absolute; left: 0; top: .1em;
	display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
	font-size: .8rem; font-weight: 700; color: var(--navy); background: rgba(201, 162, 39, 0.22);
}
.prose strong { color: var(--text); }
.prose .table-wrap { overflow-x: auto; margin-top: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.prose table { width: 100%; border-collapse: collapse; font-size: .93rem; line-height: 1.55; }
.prose th, .prose td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose thead th { background: var(--navy); color: #fff; font-weight: 600; font-size: .86rem; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody td:first-child { font-weight: 600; color: var(--text); min-width: 6.5rem; }
/* Narrow screens: each table row becomes a stacked card, cells labelled
   with their column heading (data-label is added in inc/blog.php). */
@media (max-width: 640px) {
	.prose .table-wrap { overflow: visible; border: 0; background: none; }
	.prose table, .prose tbody, .prose tr, .prose td { display: block; width: 100%; }
	.prose thead { display: none; }
	.prose tbody tr { margin-bottom: .9rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
	.prose tbody td { border-bottom: 1px solid var(--line); padding: .65rem .9rem; }
	.prose tbody td:first-child { background: var(--navy); color: #fff; }
	.prose tbody td:not(:first-child)::before {
		content: attr(data-label); display: block; margin-bottom: .2rem;
		font-size: .75rem; font-weight: 600; color: var(--text-faint);
	}
	.prose tbody tr td:last-child { border-bottom: 0; }
}
.prose .callout {
	padding: 1.25rem 1.4rem; border-left: 3px solid var(--gold);
	background: var(--surface-2); border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-size: 1rem; line-height: 1.7;
}
.prose .callout strong { display: block; margin-bottom: .25rem; }
.post__note { margin-top: 3rem !important; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .88rem; line-height: 1.6; color: var(--text-faint); }

/* ---- Next guide --------------------------------------------------------- */
.next-guide { padding-bottom: clamp(3.5rem, 7vw, 5rem); }
.next-guide__link {
	display: grid; gap: 1.25rem; align-items: center; max-width: calc(15.5rem + 44rem + 5rem); margin-inline: auto;
	padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: 16px; background: var(--navy); color: #fff;
	transition: background-color .25s var(--ease-expo);
}
.next-guide__link:hover { background: var(--navy-soft); }
.next-guide__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; }
.next-guide__media img { width: 100%; height: 100%; object-fit: cover; }
.next-guide__text { display: flex; flex-direction: column; gap: .55rem; }
.next-guide__label { font-size: .9rem; font-weight: 600; color: #f4dc8a; }
.next-guide__title { font-size: clamp(1.3rem, 2.6vw, 1.75rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.next-guide__excerpt { color: rgba(255, 255, 255, 0.72); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 768px) { .next-guide__link { grid-template-columns: 16rem minmax(0, 1fr); gap: 2rem; } }

/* ---- More guides + quote band ------------------------------------------ */
.blog-more { padding-top: clamp(3rem, 7vw, 5rem); }
.blog-more__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.blog-more__title { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; }
.blog-more .post-rows { margin-top: 1rem; }

.blog-cta { background: linear-gradient(160deg, var(--navy), var(--signal-deep)); color: #fff; }
.blog-cta__inner { display: flex; flex-direction: column; gap: 2rem; padding-block: clamp(3.5rem, 8vw, 5rem); }
.blog-cta__title { max-width: 24ch; font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
.blog-cta__text { margin-top: 1rem; max-width: 52ch; color: rgba(255, 255, 255, 0.76); }
.blog-cta .btn--primary { background: var(--gold); color: var(--signal-deep); }
.blog-cta .btn--primary:hover { background: #fff; color: var(--signal-deep); }
@media (min-width: 900px) { .blog-cta__inner { flex-direction: row; align-items: center; justify-content: space-between; } .blog-cta__btn { flex: none; } }

@media (prefers-reduced-motion: reduce) {
	.route__stops a::before, .post-item__title a, .next-guide__link { transition: none; }
}

/* Desktop nav with seven items (Blog added): tighter spacing so every
   language fits on one line — NL labels are the longest. Narrow desktops
   (1024–1279px) are tightened further. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.nav-desktop { gap: 1rem; }
	.nav-desktop__links { gap: .85rem; font-size: 0.64rem; letter-spacing: 0.1em; }
	.nav-desktop__links a { white-space: nowrap; }
	.nav-cta { padding-inline: .85rem; font-size: 0.66rem; letter-spacing: 0.1em; white-space: nowrap; }
	.site-header .wordmark { letter-spacing: 0.16em; }
}
@media (min-width: 1280px) {
	.nav-desktop { gap: 1.25rem; }
	.nav-desktop__links { gap: 1.1rem; letter-spacing: 0.13em; }
	.nav-desktop__links a { white-space: nowrap; }
}

/* Live-chat greeting card — the site's own one-time greeting, sitting just
   above the Tawk.to bubble (bottom right). Shown/hidden by the inline
   script in functions.php (novago_tawkto_chat). */
.chat-greet {
	position: fixed; right: 20px; bottom: 96px; z-index: 80;
	width: min(20rem, calc(100vw - 40px));
	background: var(--surface); color: var(--text);
	border: 1px solid var(--line); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lift);
	opacity: 0; transform: translateY(10px);
	transition: opacity .3s var(--ease-expo), transform .45s var(--ease-expo);
}
.chat-greet[hidden] { display: none; }
.chat-greet.is-in { opacity: 1; transform: none; }
.chat-greet::after {
	content: ""; position: absolute; right: 26px; bottom: -7px;
	width: 12px; height: 12px; background: var(--surface);
	border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
	transform: rotate(45deg);
}
.chat-greet__body {
	display: flex; flex-direction: column; align-items: flex-start; gap: .45rem;
	width: 100%; padding: 1rem 2.75rem 1.05rem 1.15rem;
	font: inherit; color: inherit; text-align: left;
	background: none; border: 0; border-radius: inherit; cursor: pointer;
}
.chat-greet__label {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--signal);
}
.chat-greet__dot {
	width: 8px; height: 8px; border-radius: 999px; background: #2f9e5f;
	box-shadow: 0 0 0 3px rgba(47, 158, 95, .18);
}
.chat-greet__text { font-size: .95rem; line-height: 1.5; }
.chat-greet__cta {
	margin-top: .15rem; font-size: .85rem; font-weight: 600; color: var(--navy);
	transition: color .2s ease;
}
.chat-greet__cta span { display: inline-block; color: var(--gold-deep); transition: transform .2s ease; }
.chat-greet__body:hover .chat-greet__cta { color: var(--navy-soft); }
.chat-greet__body:hover .chat-greet__cta span { transform: translateX(3px); }
.chat-greet__body:focus-visible, .chat-greet__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.chat-greet__close {
	position: absolute; top: .5rem; right: .5rem; z-index: 1;
	display: grid; place-items: center; width: 2rem; height: 2rem;
	color: var(--text-faint); background: none; border: 0; border-radius: 999px; cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.chat-greet__close:hover { color: var(--text); background: var(--surface-2); }
@media (max-width: 480px) {
	.chat-greet { right: 16px; bottom: 88px; width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) {
	.chat-greet, .chat-greet__cta span { transition: none; transform: none; }
}