/* ==========================================================================
   Kandilisa · Custom Styles
   Navy (base) + Gold (accent) + Ocean (accent-2) · glassmorphism · 3D feel
   ========================================================================== */

:root {
	--c-base:      #04112A;
	--c-base-alt:  #081C3F;
	--c-primary:   #0A2E63;
	--c-primary-2: #1B4A9A;
	--c-accent:    #D4A85A;
	--c-accent-2:  #4AD1C5;
	--c-contrast:  #F5F7FA;
	--c-muted:     #C7D0DE;
	--c-dim:       rgba(199, 208, 222, 0.7);
	--c-glass:     rgba(255, 255, 255, 0.05);
	--c-glass-bd:  rgba(255, 255, 255, 0.10);
	--c-glass-hi:  rgba(255, 255, 255, 0.18);
	--shadow-lg:   0 30px 90px -40px rgba(0, 0, 0, 0.65);
	--shadow-xl:   0 60px 140px -50px rgba(10, 46, 99, 0.6);
	--radius-lg:   26px;
	--radius-md:   18px;
	--ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--font-display: "Fraunces", "Times New Roman", serif;
	--font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono:    "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- base ---------- */
html {
	scroll-behavior: auto;
	scroll-padding-top: 160px; /* offset anchor jumps for the fixed header (desktop logo ~110px + padding) */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
@media (max-width: 900px) {
	html { scroll-padding-top: 110px; }
}
@media (max-width: 420px) {
	html { scroll-padding-top: 92px; }
}
html.lenis { height: auto; }
html.lenis, html.lenis body { overflow: clip; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

body {
	background: var(--c-base);
	color: var(--c-contrast);
	font-family: var(--font-body);
	overflow-x: hidden;
	position: relative;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	background:
		radial-gradient(1200px 800px at 10% -10%, rgba(27, 74, 154, 0.25), transparent 60%),
		radial-gradient(900px 700px at 95% 10%, rgba(74, 209, 197, 0.08), transparent 60%),
		radial-gradient(800px 900px at 50% 110%, rgba(212, 168, 90, 0.08), transparent 60%);
	pointer-events: none;
	z-index: -1;
}

/* Fullpage 3D scene canvas — fixed behind all content on desktop.
   On mobile, we collapse to an absolute-positioned background pinned to the
   top of the document so it never captures touch events on sections below. */
.scene-canvas-wrap {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none !important;
	overflow: hidden;
}
.scene-canvas-wrap *,
#scene-canvas,
.scene-grain {
	pointer-events: none !important;
	touch-action: auto;
}
#scene-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.scene-grain {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.18'/></svg>");
	opacity: 0.25;
	mix-blend-mode: overlay;
}

.site-main,
.site-header,
.site-footer { position: relative; z-index: 2; }

::selection { background: var(--c-accent); color: var(--c-base); }

/* ---------- custom cursor ---------- */
.cursor-ring {
	position: fixed;
	top: 0; left: 0;
	width: 36px; height: 36px;
	border: 1.5px solid var(--c-accent);
	border-radius: 999px;
	pointer-events: none;
	transform: translate(-50%, -50%);
	mix-blend-mode: difference;
	transition: width .25s var(--ease-out), height .25s var(--ease-out), background .25s var(--ease-out);
	z-index: 9999;
	will-change: transform;
}
.cursor-dot {
	position: fixed;
	top: 0; left: 0;
	width: 6px; height: 6px;
	background: var(--c-accent);
	border-radius: 999px;
	pointer-events: none;
	transform: translate(-50%, -50%);
	z-index: 10000;
	will-change: transform;
}
.cursor-trail {
	position: fixed;
	top: 0; left: 0;
	width: 10px; height: 10px;
	background: radial-gradient(circle, var(--c-accent-2), transparent 70%);
	border-radius: 999px;
	pointer-events: none;
	transform: translate(-50%, -50%);
	z-index: 9998;
	mix-blend-mode: screen;
	will-change: transform;
}
.cursor-ring.is-hover { width: 64px; height: 64px; background: rgba(212, 168, 90, 0.12); }
@media (hover: none), (max-width: 900px) {
	.cursor-ring, .cursor-dot, .cursor-trail { display: none; }
}

/* ---------- header ----------
   `position: fixed` guarantees the header stays visible even when the
   parent has overflow settings that could break `position: sticky`.
   The `backdrop-filter` lives on a pseudo-element so the mobile nav
   (also position:fixed) attaches to the viewport, not the header. */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	border-bottom: 1px solid var(--c-glass-bd);
	transition: padding .3s var(--ease-out), background .3s var(--ease-out);
}
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4,17,42,0.88), rgba(4,17,42,0.6));
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	z-index: -1;
	pointer-events: none;
}
.site-header.is-compact { padding-top: .5rem; padding-bottom: .5rem; }
.nav-shell {
	max-width: 1360px;
	margin-inline: auto;
	gap: 2rem;
}
.brand__mark { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; color: var(--c-contrast); }
.brand__glyph { color: var(--c-accent); display: inline-flex; }
.brand__logo { display: block; width: auto; height: 110px; max-width: none; }
@media (max-width: 900px) {
	.brand__logo { height: 64px; }
}
.brand__text { display: inline-flex; flex-direction: column; line-height: 1; font-family: var(--font-display); }
.brand__text strong { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; }
.brand__text em { font-size: .7rem; font-style: normal; letter-spacing: .25em; text-transform: uppercase; color: var(--c-dim); margin-top: .3rem; }

.primary-nav {
	display: flex;
	gap: 2rem;
	align-items: center;
}
.primary-nav a {
	position: relative;
	color: var(--c-muted);
	text-decoration: none;
	font-size: .9rem;
	font-weight: 500;
	letter-spacing: .01em;
	padding: .35rem 0;
	transition: color .2s var(--ease-out);
}
.primary-nav a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 1px;
	background: var(--c-accent);
	transition: width .3s var(--ease-out);
}
.primary-nav a:hover,
.primary-nav a.is-active { color: var(--c-contrast); }
.primary-nav a:hover::after,
.primary-nav a.is-active::after { width: 100%; }

.cta-pill {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.2rem;
	border-radius: 999px;
	background: var(--c-accent);
	color: var(--c-base);
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
	transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out);
	box-shadow: 0 8px 30px -10px rgba(212, 168, 90, 0.6);
}
.cta-pill:hover { transform: translateY(-2px); background: #E2BC74; box-shadow: 0 14px 40px -10px rgba(212, 168, 90, 0.75); }

.nav-toggle { display: none; background: transparent; border: 0; width: 40px; height: 40px; position: relative; cursor: pointer; }
.nav-toggle span { position: absolute; left: 8px; right: 8px; height: 2px; background: var(--c-contrast); transition: transform .3s var(--ease-out), opacity .3s var(--ease-out), top .3s var(--ease-out); border-radius: 2px; }
.nav-toggle span:nth-child(1) { top: 12px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

@media (max-width: 900px) {
	.primary-nav {
		position: fixed;
		inset: 0;
		padding: 5rem 2rem 2rem;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 1.5rem;
		background: rgba(4, 17, 42, 0.97);
		backdrop-filter: blur(24px) saturate(130%);
		-webkit-backdrop-filter: blur(24px) saturate(130%);
		transform: translateY(-110%);
		transition: transform .45s var(--ease-out), opacity .3s var(--ease-out);
		opacity: 0;
		visibility: hidden;
		z-index: 60;
		overflow-y: auto;
	}
	.primary-nav.is-open {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}
	.primary-nav a {
		font-size: 1.5rem;
		font-family: var(--font-display);
		color: var(--c-contrast);
		font-weight: 400;
		letter-spacing: -0.01em;
	}
	.primary-nav a::after { left: 50%; transform: translateX(-50%); }
	.primary-nav a:hover::after,
	.primary-nav a.is-active::after { width: 40%; }
	.cta-pill { display: none; }
	.nav-toggle { display: inline-block; position: relative; z-index: 65; }
	/* Lock page scroll while mobile menu is open */
	html.nav-open, html.nav-open body { overflow: hidden; touch-action: none; }
}

/* ---------- layout helpers ---------- */
.section {
	padding-block: clamp(5rem, 10vw, 9rem);
	position: relative;
}
.section__wrap {
	max-width: 1360px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
	position: relative;
}
.section__head {
	max-width: 780px;
	margin: 0 auto clamp(3rem, 6vw, 5rem);
	text-align: center;
}
.section__head--split {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 3rem;
	max-width: none;
	text-align: left;
	align-items: end;
}
@media (max-width: 900px) {
	.section__head--split { grid-template-columns: 1fr; }
}
.section__label {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--c-accent);
	padding: .45rem .9rem;
	border: 1px solid rgba(212, 168, 90, 0.25);
	border-radius: 999px;
	margin-bottom: 1.75rem;
	background: rgba(212, 168, 90, 0.05);
}
.section__title {
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 1.5rem + 3vw, 4.25rem);
	line-height: 1.04;
	letter-spacing: -0.03em;
	font-weight: 500;
	margin: 0 0 1.5rem;
	perspective: 1000px;
}
.section__title > span { display: block; transform-origin: 50% 100%; backface-visibility: hidden; }
.text-accent { perspective: 600px; display: inline-block; }
.text-accent .char { display: inline-block; backface-visibility: hidden; }
.text-accent {
	background: linear-gradient(100deg, var(--c-accent) 0%, #F5D58C 45%, var(--c-accent-2) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-style: italic;
	font-weight: 300;
}
.section__lead {
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
	line-height: 1.6;
	color: var(--c-muted);
	max-width: 60ch;
	margin-inline: auto;
}
.section__head--split .section__lead { margin: 0; }

/* ---------- glassmorphism ---------- */
.glass {
	position: relative;
	background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
	border: 1px solid var(--c-glass-bd);
	border-radius: var(--radius-lg);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.08);
	overflow: hidden;
}
.glass::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		radial-gradient(600px 180px at 0% 0%, rgba(74, 209, 197, 0.1), transparent 70%),
		radial-gradient(500px 220px at 100% 100%, rgba(212, 168, 90, 0.1), transparent 70%);
	pointer-events: none;
	mix-blend-mode: screen;
}
.glass-line {
	position: relative;
	padding: 2rem 2.5rem;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--c-glass-bd);
	border-bottom: 1px solid var(--c-glass-bd);
	margin-top: 4rem;
}
.glass-line > div { display: flex; flex-direction: column; gap: .4rem; }
.glass-line strong { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; }
.glass-line span { font-size: .9rem; color: var(--c-muted); }
@media (max-width: 800px) {
	.glass-line { grid-template-columns: 1fr; padding: 1.5rem; }
}

/* ---------- buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: 1rem 1.9rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: .95rem;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	border: 0;
	transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s var(--ease-out), color .3s var(--ease-out);
	position: relative;
	overflow: hidden;
}
.btn--primary {
	background: linear-gradient(100deg, var(--c-accent), #F5D58C);
	color: var(--c-base);
	box-shadow: 0 14px 40px -12px rgba(212, 168, 90, 0.55);
}
.btn--primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 22px 50px -12px rgba(212, 168, 90, 0.7);
}
.btn--ghost {
	background: transparent;
	color: var(--c-contrast);
	border: 1px solid var(--c-glass-bd);
	backdrop-filter: blur(10px);
}
.btn--ghost:hover {
	background: rgba(255,255,255,0.06);
	border-color: var(--c-accent);
	color: var(--c-accent);
}
.btn--full { width: 100%; }
.btn svg { transition: transform .3s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	padding-block: clamp(7rem, 14vh, 10rem) clamp(4rem, 10vh, 7rem);
}
.hero::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse 55% 40% at center, rgba(4,17,42,0.3), transparent 70%),
		linear-gradient(180deg, rgba(4,17,42,0) 0%, rgba(4,17,42,0.35) 60%, rgba(4,17,42,0.85) 100%);
	pointer-events: none;
	z-index: -1;
}

.hero__inner {
	position: relative;
	z-index: 2;
	max-width: 1360px;
	width: 100%;
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
	text-align: center;
}
.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	padding: .55rem 1.2rem;
	border: 1px solid var(--c-glass-bd);
	background: var(--c-glass);
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--c-muted);
	backdrop-filter: blur(12px);
	margin-bottom: 2rem;
}
.hero__dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--c-accent-2);
	box-shadow: 0 0 0 4px rgba(74,209,197,0.15);
	animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(74,209,197,0.5); }
	70% { box-shadow: 0 0 0 10px rgba(74,209,197,0); }
	100% { box-shadow: 0 0 0 0 rgba(74,209,197,0); }
}

.hero__title {
	font-family: var(--font-display);
	font-size: clamp(2.75rem, 1.5rem + 6vw, 7.5rem);
	line-height: 0.94;
	letter-spacing: -0.04em;
	font-weight: 400;
	margin: 0 0 2rem;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line--accent,
.hero__title .line--accent > span {
	font-style: italic;
	font-weight: 300;
	background: linear-gradient(100deg, var(--c-accent), #F5D58C, var(--c-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.hero__title [data-split] > span,
.hero__title .line > span { display: inline-block; }

.hero__lead {
	max-width: 680px;
	margin: 0 auto 2.5rem;
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
	line-height: 1.6;
	color: var(--c-muted);
}

.hero__actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-bottom: 4rem;
}

.hero__meta {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 2.5rem;
	justify-content: center;
	padding-top: 2rem;
	border-top: 1px solid var(--c-glass-bd);
	max-width: 720px;
	margin-inline: auto;
}
.hero__meta-item { display: flex; flex-direction: column; gap: .3rem; text-align: center; }
.hero__meta-item strong {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.2rem + 1vw, 2.5rem);
	font-weight: 500;
	color: var(--c-accent);
}
.hero__meta-item span { font-size: .85rem; color: var(--c-muted); letter-spacing: .02em; }
@media (max-width: 640px) {
	.hero__meta { grid-template-columns: 1fr; gap: 1.5rem; }
}

.hero__scroll {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--c-dim);
	text-decoration: none;
	z-index: 2;
}
.hero__scroll-line {
	width: 1px;
	height: 48px;
	background: linear-gradient(to bottom, var(--c-accent), transparent);
	position: relative;
	overflow: hidden;
}
.hero__scroll-line::after {
	content: "";
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 40%;
	background: var(--c-contrast);
	animation: drop 2.2s ease-in-out infinite;
}
@keyframes drop {
	0% { transform: translateY(-100%); }
	100% { transform: translateY(250%); }
}

/* marquee */
.marquee {
	position: relative;
	z-index: 2;
	overflow: hidden;
	border-top: 1px solid var(--c-glass-bd);
	border-bottom: 1px solid var(--c-glass-bd);
	padding-block: 1.25rem;
	margin-top: 4rem;
	background: rgba(4, 17, 42, 0.4);
	backdrop-filter: blur(10px);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.marquee__track {
	display: inline-flex;
	align-items: center;
	gap: 3rem;
	animation: marquee 40s linear infinite;
	font-family: var(--font-display);
	font-size: 1.15rem;
	color: var(--c-muted);
	white-space: nowrap;
	padding-left: 3rem;
}
.marquee__track span { font-weight: 400; }
.marquee__track span:nth-child(even) { color: var(--c-accent); font-size: .85rem; }
@keyframes marquee {
	to { transform: translateX(-50%); }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin-top: 3rem;
	perspective: 1200px;
}
@media (max-width: 800px) {
	.about-grid { grid-template-columns: 1fr; }
}
.about-card {
	padding: clamp(1.75rem, 3vw, 2.5rem);
	transition: transform .5s var(--ease-out), border-color .5s var(--ease-out);
	transform-style: preserve-3d;
}
.about-card:hover { border-color: rgba(212,168,90,0.4); }
.about-card__index {
	font-family: var(--font-mono);
	font-size: .8rem;
	letter-spacing: .2em;
	color: var(--c-accent);
	display: inline-block;
	margin-bottom: 1rem;
}
.about-card h3 {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0 0 .9rem;
	line-height: 1.15;
}
.about-card p { color: var(--c-muted); line-height: 1.6; font-size: .98rem; margin: 0; }

/* ==========================================================================
   STATS
   ========================================================================== */
.section--stats { padding-block: clamp(3rem, 6vw, 5rem); }
.stats-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	padding: 2.5rem;
	background: linear-gradient(120deg, rgba(10,46,99,0.5), rgba(8,28,63,0.4));
	border: 1px solid var(--c-glass-bd);
	border-radius: var(--radius-lg);
	backdrop-filter: blur(12px);
}
@media (max-width: 800px) {
	.stats-row { grid-template-columns: repeat(2, 1fr); padding: 1.5rem; }
}
.stat { display: flex; flex-direction: column; align-items: flex-start; position: relative; }
.stat__num {
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 2rem + 2vw, 4rem);
	line-height: 1;
	font-weight: 500;
	color: var(--c-contrast);
	display: inline-flex;
	align-items: baseline;
}
.stat__plus {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
	color: var(--c-accent);
	margin-left: .15rem;
	margin-top: -0.5rem;
}
.stat p { font-size: .88rem; color: var(--c-muted); margin: .25rem 0 0; }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.section--services { position: relative; }
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	perspective: 1400px;
}
.service-card {
	padding: 2.25rem 2rem 2.5rem;
	display: flex;
	flex-direction: column;
	min-height: 340px;
	transition: transform .5s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
	cursor: pointer;
	transform-style: preserve-3d;
	will-change: transform;
}
.service-card:hover { border-color: rgba(212,168,90,0.4); box-shadow: var(--shadow-xl), 0 0 0 1px rgba(212,168,90,0.1); }
.service-card--wide { grid-column: span 3; flex-direction: row; align-items: center; gap: 2rem; min-height: 200px; }
.service-card--wide .service-card__head { margin-bottom: 0; flex-shrink: 0; width: 140px; align-items: center; }
.service-card--wide h3 { margin-top: 0; }
@media (max-width: 1080px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .service-card--wide { grid-column: span 2; } }
@media (max-width: 700px) {
	.services-grid { grid-template-columns: 1fr; }
	.service-card--wide { grid-column: span 1; flex-direction: column; align-items: flex-start; }
	.service-card--wide .service-card__head { width: auto; }
}
.service-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}
.service-card__num {
	font-family: var(--font-mono);
	font-size: .8rem;
	letter-spacing: .2em;
	color: var(--c-accent);
}
.service-card__icon {
	width: 56px; height: 56px;
	color: var(--c-accent-2);
	padding: 12px;
	background: rgba(74,209,197,0.08);
	border: 1px solid rgba(74,209,197,0.2);
	border-radius: 14px;
	transition: transform .5s var(--ease-out), color .3s var(--ease-out);
}
.service-card:hover .service-card__icon {
	transform: rotate(-6deg) scale(1.05);
	color: var(--c-accent);
	border-color: rgba(212,168,90,0.4);
	background: rgba(212,168,90,0.08);
}
.service-card h3 {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0 0 .75rem;
	color: var(--c-contrast);
}
.service-card p { color: var(--c-muted); font-size: .94rem; line-height: 1.6; margin: 0 0 1.5rem; flex-grow: 1; }
.service-card__link {
	align-self: flex-start;
	color: var(--c-accent);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	gap: .4rem;
	align-items: center;
	padding: .6rem 1rem;
	border-radius: 999px;
	border: 1px solid rgba(212,168,90,0.3);
	transition: gap .3s var(--ease-out), background .3s var(--ease-out);
}
.service-card__link span { transition: transform .3s var(--ease-out); }
.service-card:hover .service-card__link { background: rgba(212,168,90,0.1); gap: .6rem; }
.service-card:hover .service-card__link span { transform: translateX(3px); }
.service-card__glow {
	position: absolute;
	inset: auto auto -40% -20%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(212,168,90,0.16), transparent 35%);
	opacity: 0;
	transition: opacity .4s var(--ease-out);
	pointer-events: none;
}
.service-card:hover .service-card__glow { opacity: 1; }

/* ==========================================================================
   WHY US
   ========================================================================== */
.why-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	border-top: 1px solid var(--c-glass-bd);
	border-left: 1px solid var(--c-glass-bd);
}
@media (max-width: 800px) { .why-list { grid-template-columns: 1fr; } }
.why-item {
	display: flex;
	gap: 1.25rem;
	padding: 2rem;
	border-right: 1px solid var(--c-glass-bd);
	border-bottom: 1px solid var(--c-glass-bd);
	transition: background .4s var(--ease-out);
	position: relative;
}
.why-item:hover { background: rgba(255,255,255,0.02); }
.why-item:hover .why-item__num { color: var(--c-accent); }
.why-item__num {
	font-family: var(--font-display);
	font-size: 2rem;
	line-height: 1;
	font-weight: 400;
	color: rgba(255,255,255,0.3);
	flex-shrink: 0;
	transition: color .3s var(--ease-out);
	font-style: italic;
}
.why-item h3 {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 500;
	margin: 0 0 .6rem;
	letter-spacing: -0.02em;
}
.why-item p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--c-muted); }

/* ==========================================================================
   REFERENCES
   ========================================================================== */
.ref-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	perspective: 1400px;
}
@media (max-width: 900px) { .ref-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ref-grid { grid-template-columns: 1fr; } }
.ref-card {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	transition: transform .4s var(--ease-out);
}
.ref-card:hover { transform: translateY(-4px); }
.ref-card strong {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--c-contrast);
	letter-spacing: -0.02em;
}
.ref-card span { color: var(--c-muted); font-size: .92rem; line-height: 1.55; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-layout {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 1.5rem;
}
@media (max-width: 1000px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-info { padding: 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.contact-info__row { display: flex; gap: 1rem; align-items: flex-start; }
.contact-info__icon {
	flex-shrink: 0;
	width: 44px; height: 44px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: rgba(212,168,90,0.1);
	color: var(--c-accent);
	border: 1px solid rgba(212,168,90,0.2);
}
.contact-info__row small {
	display: block;
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--c-dim);
	margin-bottom: .3rem;
}
.contact-info__row a { color: var(--c-contrast); text-decoration: none; font-weight: 500; font-size: 1rem; transition: color .2s; }
.contact-info__row a:hover { color: var(--c-accent); }
.contact-info__row p { margin: 0; color: var(--c-contrast); font-size: .98rem; line-height: 1.5; }
.contact-info__map {
	margin-top: auto;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--c-glass-bd);
	aspect-ratio: 16 / 9;
	background: rgba(0,0,0,0.3);
}
.contact-info__map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.6) invert(0.92) hue-rotate(180deg) contrast(0.85); }

.contact-form { padding: 2.5rem; display: flex; flex-direction: column; gap: 1rem; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.contact-form h3 { font-family: var(--font-display); font-size: 1.75rem; margin: 0; font-weight: 500; letter-spacing: -0.02em; }
.contact-form__lead { margin: 0 0 .5rem; color: var(--c-muted); font-size: .95rem; }
.contact-form__note { margin: 0; font-size: .8rem; color: var(--c-dim); text-align: center; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field > span {
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--c-dim);
}
.field input, .field select, .field textarea {
	appearance: none;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid var(--c-glass-bd);
	border-radius: 12px;
	padding: .9rem 1rem;
	color: var(--c-contrast);
	font-family: inherit;
	font-size: .95rem;
	transition: border-color .25s, background .25s;
	outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
	border-color: var(--c-accent);
	background: rgba(0, 0, 0, 0.4);
}
.field select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23C7D0DE' stroke-width='1.5'><path d='m1 1 5 5 5-5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
}
.field select option { background: var(--c-base); color: var(--c-contrast); }
.field textarea { resize: vertical; min-height: 120px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
	border-top: 1px solid var(--c-glass-bd);
	background: linear-gradient(180deg, transparent, rgba(4,17,42,0.9));
	margin-top: clamp(3rem, 8vw, 6rem);
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 3rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--c-glass-bd);
	max-width: 1360px;
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h4 {
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--c-accent);
	margin: 0 0 1.25rem;
	font-weight: 600;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.footer-col a { color: var(--c-muted); text-decoration: none; font-size: .92rem; transition: color .2s; }
.footer-col a:hover { color: var(--c-accent); }
.footer-col p { color: var(--c-muted); font-size: .92rem; line-height: 1.6; margin: 1rem 0 0; max-width: 32ch; }
.footer-col--brand .brand { display: inline-flex; gap: .85rem; align-items: center; }
.footer-col--brand .brand__glyph { color: var(--c-accent); }
.footer-col--brand .brand__logo { display: block; width: auto; height: 130px; }
.footer-col--brand .brand__text { display: inline-flex; flex-direction: column; line-height: 1; font-family: var(--font-display); }
.footer-col--brand .brand__text strong { font-size: 1.1rem; font-weight: 600; }
.footer-col--brand .brand__text em { font-size: .7rem; font-style: normal; letter-spacing: .25em; text-transform: uppercase; color: var(--c-dim); margin-top: .3rem; }
.footer-contact li { color: var(--c-muted); font-size: .92rem; line-height: 1.5; }

.footer-bottom {
	display: flex;
	justify-content: space-between;
	padding: 1.5rem clamp(1.25rem, 3vw, 2.5rem);
	font-family: var(--font-mono);
	font-size: .75rem;
	color: var(--c-dim);
	letter-spacing: .05em;
	max-width: 1360px;
	margin: 0 auto;
	flex-wrap: wrap;
	gap: 1rem;
}

/* ==========================================================================
   REVEAL / SCROLL animations
   Elements are visible by default. JS hides them with gsap.set only after
   confirming GSAP is loaded, then reveals on scroll. Graceful fallback:
   no JS = no hidden elements.
   ========================================================================== */
[data-reveal] { will-change: opacity, transform; }

/* 404 */
.error-404__inner { text-align: center; max-width: 600px; margin: 0 auto; padding-block: 4rem; }
.error-404__inner h1 {
	font-family: var(--font-display);
	font-size: clamp(6rem, 18vw, 14rem);
	margin: 0;
	line-height: 1;
	background: linear-gradient(100deg, var(--c-accent), #F5D58C, var(--c-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.error-404__inner p { color: var(--c-muted); margin: 1rem 0 2rem; font-size: 1.1rem; }

/* Page template (default) */
.page-template h1 { margin-bottom: 2rem; }
.page-template p { color: var(--c-muted); line-height: 1.7; }

/* -------- focus accessibility -------- */
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; }

/* ==========================================================================
   BLOG — listing + single post
   ========================================================================== */

/* Blog hero band (shared by home & archive) */
.blog-hero {
	position: relative;
	padding-block: clamp(6rem, 14vw, 9rem) clamp(3rem, 6vw, 4.5rem);
}
.blog-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 50% 50% at center top, rgba(212, 168, 90, 0.08), transparent 70%),
		linear-gradient(180deg, rgba(4,17,42,0.0), rgba(4,17,42,0.55));
	pointer-events: none;
	z-index: -1;
}
.blog-hero__head { max-width: 820px; text-align: center; margin: 0 auto; }
.blog-hero__title {
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	line-height: 1.04;
	letter-spacing: -0.035em;
	font-weight: 500;
	margin: 0 0 1.25rem;
}
.blog-hero__title > span { display: block; }
.blog-hero__lead {
	color: var(--c-muted);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
	line-height: 1.6;
	max-width: 60ch;
	margin: 0 auto;
}
.blog-hero__kicker { color: var(--c-muted); font-size: .95rem; margin-bottom: 1rem; }
.post-back {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--c-muted);
	text-decoration: none;
	font-size: .85rem;
	letter-spacing: .02em;
	margin-bottom: 1.5rem;
	transition: color .2s;
}
.post-back:hover { color: var(--c-accent); }

/* Blog list section */
.blog-list {
	padding-block: clamp(2rem, 4vw, 3rem) clamp(5rem, 10vw, 8rem);
}
.blog-query {
	max-width: 1280px;
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}
.blog-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
@media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .blog-grid { grid-template-columns: 1fr; } }

.blog-grid > li { list-style: none; margin: 0; padding: 0; }

/* Post card */
.post-card {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	transition: transform .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
	height: 100%;
}
.post-card:hover {
	transform: translateY(-4px);
	border-color: rgba(212, 168, 90, 0.4);
	box-shadow: var(--shadow-xl);
}
.post-card__cat a,
.post-card__cat {
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--c-accent) !important;
	text-decoration: none !important;
}
.post-card__cat a:hover { color: var(--c-accent-2) !important; }
.post-card__title,
.post-card__title a {
	font-family: var(--font-display);
	font-size: 1.35rem !important;
	line-height: 1.2 !important;
	font-weight: 500 !important;
	letter-spacing: -0.02em !important;
	color: var(--c-contrast) !important;
	text-decoration: none !important;
	margin: 0 !important;
	transition: color .25s;
}
.post-card:hover .post-card__title a { color: var(--c-accent) !important; }
.post-card__excerpt {
	color: var(--c-muted);
	font-size: .95rem !important;
	line-height: 1.55 !important;
	margin: 0 !important;
	flex-grow: 1;
}
.post-card__meta {
	padding-top: 0.75rem;
	border-top: 1px solid var(--c-glass-bd);
	margin-top: auto;
}
.post-card__date {
	font-family: var(--font-mono);
	font-size: .75rem !important;
	letter-spacing: .06em;
	color: var(--c-dim) !important;
}
.post-card__link {
	font-family: var(--font-body) !important;
	font-size: .85rem !important;
	font-weight: 600;
	color: var(--c-accent) !important;
	text-decoration: none !important;
	transition: gap .25s;
}
.post-card:hover .post-card__link { color: var(--c-accent-2) !important; }

/* Pagination */
.blog-pagination {
	max-width: 1280px;
	margin: 3rem auto 0 !important;
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
	gap: .5rem !important;
}
.blog-pagination a,
.blog-pagination .wp-block-query-pagination-numbers,
.blog-pagination .page-numbers {
	color: var(--c-muted) !important;
	text-decoration: none !important;
	padding: .55rem .9rem;
	border-radius: 999px;
	border: 1px solid var(--c-glass-bd);
	background: rgba(255,255,255,0.03);
	font-family: var(--font-mono);
	font-size: .85rem;
	transition: all .25s;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}
.blog-pagination a:hover,
.blog-pagination .page-numbers.current {
	color: var(--c-accent) !important;
	border-color: var(--c-accent);
	background: rgba(212, 168, 90, 0.08);
}
.blog-empty {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(3rem, 8vw, 5rem) clamp(1.25rem, 3vw, 2.5rem);
	color: var(--c-muted);
	font-size: 1.05rem;
}

/* ==========================================================================
   SINGLE POST
   ========================================================================== */

.post-article { padding-block: clamp(5rem, 10vw, 8rem) clamp(4rem, 8vw, 6rem); }

.post-hero { margin-bottom: 2.5rem; }
.post-hero__wrap {
	max-width: 820px;
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
	text-align: center;
}
.post-hero__wrap .post-back { display: inline-flex; }
.post-hero__cat,
.post-hero__cat a {
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--c-accent) !important;
	text-decoration: none !important;
	margin-bottom: 1.25rem !important;
	display: inline-block;
}
.post-hero__title {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 1.25rem + 3.5vw, 4rem) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.035em !important;
	font-weight: 500 !important;
	margin: 0 0 1.5rem !important;
}
.post-hero__meta {
	justify-content: center;
	gap: .6rem !important;
	color: var(--c-muted);
	font-size: .88rem;
	font-family: var(--font-mono);
	letter-spacing: .04em;
	margin-top: 1rem !important;
}
.post-hero__author { color: var(--c-contrast); font-weight: 500; }
.post-hero__sep   { opacity: .5; }

/* Featured image */
.post-hero__image {
	max-width: 1080px;
	margin: 0 auto 3rem !important;
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
	border-radius: 24px;
	overflow: hidden;
}
.post-hero__image img,
.post-hero__image figure {
	border-radius: 24px;
	width: 100%;
	height: auto;
	box-shadow: var(--shadow-xl);
}

/* Post content typography */
.post-content {
	max-width: 720px;
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
	color: var(--c-contrast);
	font-size: 1.05rem;
	line-height: 1.75;
}
.post-content > * + * { margin-top: 1.5em; }
.post-content p { margin: 0; }
.post-content h2 {
	font-size: clamp(1.6rem, 1.25rem + 1vw, 2.15rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-weight: 500;
	margin-top: 2.5em !important;
	margin-bottom: 0.8em !important;
}
.post-content h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem);
	line-height: 1.25;
	margin-top: 2em !important;
	margin-bottom: 0.6em !important;
	font-weight: 500;
}
.post-content h2:first-child,
.post-content h3:first-child { margin-top: 0 !important; }
.post-content a {
	color: var(--c-accent);
	text-decoration: underline;
	text-decoration-color: rgba(212, 168, 90, 0.45);
	text-underline-offset: 3px;
}
.post-content a:hover { color: var(--c-accent-2); text-decoration-color: currentColor; }
.post-content strong { color: var(--c-contrast); font-weight: 600; }
.post-content em { color: var(--c-accent); font-style: italic; }
.post-content ul, .post-content ol { padding-left: 1.25rem; }
.post-content ul li,
.post-content ol li { margin: 0.5em 0; color: var(--c-muted); }
.post-content ul li::marker { color: var(--c-accent); }
.post-content blockquote {
	border-left: 3px solid var(--c-accent);
	padding: 0.25em 0 0.25em 1.5em;
	font-family: var(--font-display);
	font-size: 1.35em;
	line-height: 1.4;
	font-style: italic;
	font-weight: 400;
	color: var(--c-contrast);
	margin-block: 2em !important;
}
.post-content blockquote p { margin: 0; }
.post-content blockquote cite {
	display: block;
	margin-top: 1em;
	font-family: var(--font-body);
	font-size: .8em;
	font-style: normal;
	color: var(--c-muted);
	letter-spacing: .05em;
	text-transform: uppercase;
}
.post-content figure {
	margin: 2em 0;
}
.post-content figure img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	display: block;
}
.post-content figcaption {
	text-align: center;
	color: var(--c-muted);
	font-size: .85rem;
	margin-top: .75em;
	font-style: italic;
}
.post-content code {
	font-family: var(--font-mono);
	font-size: .9em;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--c-glass-bd);
	padding: 0.1em 0.45em;
	border-radius: 6px;
	color: var(--c-accent);
}
.post-content pre {
	font-family: var(--font-mono);
	font-size: .9em;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--c-glass-bd);
	padding: 1.25em;
	border-radius: 14px;
	overflow-x: auto;
	line-height: 1.55;
}
.post-content pre code { background: transparent; border: 0; padding: 0; color: var(--c-contrast); }
.post-content hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--c-glass-bd), transparent);
	margin: 3em 0;
}
.post-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 2em 0;
	font-size: .95rem;
}
.post-content th, .post-content td {
	padding: 0.75em 1em;
	border-bottom: 1px solid var(--c-glass-bd);
	text-align: left;
}
.post-content th {
	color: var(--c-accent);
	font-family: var(--font-mono);
	font-size: .8em;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Post footer (tags, nav, cta) */
.post-foot {
	max-width: 820px;
	margin: 3rem auto 0 !important;
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}
.post-foot__tags {
	color: var(--c-muted);
	font-size: .85rem;
	margin-bottom: 2rem !important;
}
.post-foot__tags a {
	display: inline-block;
	color: var(--c-accent) !important;
	text-decoration: none !important;
	padding: .3rem .8rem;
	margin: .25rem .25rem .25rem 0;
	border: 1px solid rgba(212, 168, 90, 0.3);
	border-radius: 999px;
	font-size: .8rem;
	background: rgba(212, 168, 90, 0.06);
	transition: all .25s;
}
.post-foot__tags a:hover { background: rgba(212, 168, 90, 0.15); border-color: var(--c-accent); }

.post-nav {
	gap: 1rem !important;
	margin-block: 3rem !important;
	padding-block: 2rem;
	border-top: 1px solid var(--c-glass-bd);
	border-bottom: 1px solid var(--c-glass-bd);
}
.post-nav__prev,
.post-nav__next {
	color: var(--c-muted) !important;
	text-decoration: none !important;
	font-size: .95rem !important;
	line-height: 1.4;
	transition: color .25s;
	max-width: 45%;
}
.post-nav__prev:hover,
.post-nav__next:hover { color: var(--c-accent) !important; }
.post-nav__next { text-align: right; }

.post-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 2rem;
	border-radius: 24px;
	margin-top: 2rem;
	flex-wrap: wrap;
}
.post-cta small {
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--c-accent);
	display: block;
	margin-bottom: .4rem;
}
.post-cta h3 {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 500;
	letter-spacing: -0.015em;
	margin: 0 0 .5rem;
	line-height: 1.25;
}
.post-cta p { color: var(--c-muted); margin: 0; font-size: .95rem; }
.post-cta > div { flex: 1; min-width: 240px; }
@media (max-width: 640px) {
	.post-cta { padding: 1.5rem; }
	.post-cta .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   SCROLL-TO-TOP floating button
   ========================================================================== */
.scroll-top {
	position: fixed;
	right: clamp(1.25rem, 3vw, 2rem);
	bottom: clamp(1.25rem, 3vw, 2rem);
	width: 54px;
	height: 54px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--c-accent) 0%, #F5D58C 60%, var(--c-accent) 100%);
	color: var(--c-base);
	border: 0;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: 0 12px 34px -12px rgba(212, 168, 90, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	z-index: 45;
	transform: translateY(16px) scale(0.88);
	opacity: 0;
	visibility: hidden;
	transition:
		transform .35s var(--ease-out),
		opacity .3s var(--ease-out),
		box-shadow .3s var(--ease-out),
		visibility .3s;
	font-family: var(--font-body);
	-webkit-appearance: none;
	appearance: none;
}
.scroll-top.is-visible {
	transform: translateY(0) scale(1);
	opacity: 1;
	visibility: visible;
}
.scroll-top:hover {
	transform: translateY(-4px) scale(1.04);
	box-shadow: 0 18px 44px -10px rgba(212, 168, 90, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}
.scroll-top:active { transform: translateY(-1px) scale(0.98); }
.scroll-top:focus-visible { outline: 2px solid var(--c-contrast); outline-offset: 4px; }
.scroll-top svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	stroke-width: 2.4;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .3s var(--ease-out);
}
.scroll-top:hover svg { transform: translateY(-2px); }

@media (max-width: 720px) {
	.scroll-top {
		width: 48px;
		height: 48px;
		right: 1rem;
		bottom: 1rem;
	}
	.scroll-top svg { width: 20px; height: 20px; }
}

/* ==========================================================================
   TABLET & MOBILE RESPONSIVE — comprehensive adjustments
   ========================================================================== */

* { -webkit-tap-highlight-color: transparent; }
a, button, [role="button"] { -webkit-tap-highlight-color: rgba(212, 168, 90, 0.15); }

/* Avoid text overflow from long Turkish words */
.hero__title,
.section__title,
.about-card h3,
.service-card h3,
.why-item h3,
.ref-card strong {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}

@media (max-width: 900px) {
	.section { padding-block: clamp(3.5rem, 8vw, 5.5rem); }
	.section__head { margin-bottom: clamp(2rem, 5vw, 3rem); }
	.section__head--split { gap: 1.5rem; }
}

@media (max-width: 720px) {
	/* Hero — top padding must clear the fixed header (logo 64px + 2rem padding ≈ 7rem) */
	.hero { padding-block: 7.5rem 3rem; min-height: 100svh; }
	.hero__inner { padding-inline: 1.25rem; }
	.hero__eyebrow {
		font-size: .68rem;
		letter-spacing: .15em;
		padding: .4rem 0.9rem;
	}
	.hero__title {
		font-size: clamp(2rem, 9vw, 2.8rem);
		line-height: 1.02;
		letter-spacing: -0.035em;
		margin-bottom: 1.25rem;
	}
	.hero__lead {
		font-size: .95rem;
		line-height: 1.55;
		margin-bottom: 1.75rem;
		padding-inline: 0.25rem;
	}
	.hero__actions {
		flex-direction: column;
		align-items: stretch;
		gap: .75rem;
		width: 100%;
		margin-bottom: 2.5rem;
	}
	.hero__actions .btn { width: 100%; justify-content: center; }
	.hero__meta {
		grid-template-columns: 1fr;
		gap: .85rem;
		padding-top: 1.25rem;
		max-width: 320px;
	}
	.hero__meta-item {
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
		text-align: left;
		padding: .4rem .75rem;
		border: 1px solid var(--c-glass-bd);
		border-radius: 10px;
	}
	.hero__meta-item strong { font-size: 1.5rem; }
	.hero__scroll { display: none; }
	.marquee { margin-top: 2.5rem; padding-block: 0.9rem; }
	.marquee__track { font-size: .95rem; gap: 2rem; padding-left: 2rem; }

	/* Section headings */
	.section__title { font-size: clamp(1.6rem, 7vw, 2.25rem); letter-spacing: -0.025em; }
	.section__label { font-size: .65rem; letter-spacing: .2em; padding: .35rem .75rem; margin-bottom: 1.25rem; }
	.section__lead { font-size: .95rem; line-height: 1.55; }

	/* About */
	.about-grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
	.about-card { padding: 1.5rem; }
	.about-card h3 { font-size: 1.25rem; }
	.about-card p { font-size: .92rem; }
	.about-foot { padding: 1.25rem; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2rem; }

	/* Stats */
	.stats-row {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
		padding: 1.25rem;
	}
	.stat__num { font-size: 2rem; }

	/* Services */
	.services-grid { grid-template-columns: 1fr; gap: 1rem; }
	.service-card {
		min-height: auto;
		padding: 1.75rem 1.4rem 1.85rem;
	}
	.service-card--wide { flex-direction: column; align-items: flex-start; gap: 1rem; }
	.service-card h3 { font-size: 1.2rem; }
	.service-card p { font-size: .92rem; margin-bottom: 1.25rem; }
	.service-card__icon { width: 48px; height: 48px; }

	/* Why */
	.why-list { grid-template-columns: 1fr; border-left: 0; border-top: 0; }
	.why-item {
		padding: 1.25rem 0;
		border-right: 0;
		border-bottom: 1px solid var(--c-glass-bd);
	}
	.why-item h3 { font-size: 1.15rem; }
	.why-item p { font-size: .92rem; }
	.why-item__num { font-size: 1.6rem; }

	/* References */
	.ref-grid { grid-template-columns: 1fr; }
	.ref-card { padding: 1.25rem 1.5rem; }
	.ref-card strong { font-size: 1.2rem; }

	/* Contact */
	.contact-layout { grid-template-columns: 1fr; gap: 1rem; }
	.contact-info, .contact-form { padding: 1.5rem; }
	.contact-info__map { aspect-ratio: 4/3; }
	.contact-form h3 { font-size: 1.4rem; }
	.field-row { grid-template-columns: 1fr; gap: .75rem; }
	.field input, .field select, .field textarea {
		font-size: 16px; /* prevents iOS zoom on focus */
		padding: .85rem .9rem;
	}

	/* Footer */
	.footer-grid { grid-template-columns: 1fr; gap: 1.75rem; padding-bottom: 2rem; }
	.footer-bottom { flex-direction: column; align-items: flex-start; gap: .35rem; }

	/* Glass cards edge */
	.glass { border-radius: 20px; }

	/* Reduce 3D scene visual weight on mobile for readability */
	.scene-canvas-wrap { opacity: 0.55; }
}

@media (max-width: 420px) {
	.brand__text strong { font-size: 1rem; }
	.brand__text em { font-size: .62rem; letter-spacing: .2em; }
	.brand__logo { height: 56px; }
	.footer-col--brand .brand__logo { height: 100px; }
	.btn { padding: .9rem 1.4rem; font-size: .9rem; }
	.hero__title { font-size: clamp(1.85rem, 9.5vw, 2.4rem); }
	.section__title { font-size: clamp(1.5rem, 7.5vw, 2rem); }
	.primary-nav { padding: 4.5rem 1.5rem 1.5rem; }
	.primary-nav a { font-size: 1.3rem; }
}

/* iOS Safari safe-area-inset padding */
@supports (padding: max(0px)) {
	@media (max-width: 900px) {
		.site-header { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
		.hero__inner { padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); }
	}
}

/* Don't capture pointer events on hero title background — keep scroll working */
.hero, .section, .site-main { touch-action: pan-y; }

/* ==========================================================================
   TOUCH DEVICE HARDENING — force native scroll
   The `is-touch` class is set by JS when the device matches
   (hover:none) or has ontouchstart. This block guarantees the browser
   won't lock out vertical panning regardless of other CSS.
   ========================================================================== */
html.is-touch {
	overflow-y: auto !important;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	height: auto;
}
html.is-touch body {
	overflow-y: visible !important;
	overflow-x: hidden;
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
	position: relative;
	min-height: 100vh;
}
html.is-touch .site-main,
html.is-touch .hero,
html.is-touch .section,
html.is-touch .site-header,
html.is-touch .site-footer {
	touch-action: pan-y;
}

/* Fullpage fixed 3D scene is kept on touch — pointer-events:none on the
   wrapper + canvas + grain ensures touch events pass through to scroll. */

/* -------- reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.orbit { animation: none; }
	.marquee__track { animation: none; }
}