/* ==========================================================================
   D3 Nova — core stylesheet
   1. Tokens  2. Reset  3. Type  4. Layout  5. Buttons  6. Surfaces
   7. Backgrounds  8. Header  9. Footer  10. Page hero  11. Motion
   12. Blog / prose  13. Forms  14. Utilities  15. Responsive
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
	/* Brand ramp */
	--blue-50:  #EFF6FF;
	--blue-100: #DBEAFE;
	--blue-200: #BFDBFE;
	--blue-400: #60A5FA;
	--blue-500: #3B82F6;
	--blue-600: #2563EB;
	--blue-700: #1D4ED8;
	--violet:   #7C3AED;
	--violet-400: #A78BFA;
	--cyan:     #22D3EE;
	--accent:   #EA580C; /* graphic / decorative only */
	--accent-strong: #C2410C; /* passes 4.5:1 with white text */

	/* Neutrals — light surface */
	--bg:        #F7F9FC;
	--bg-alt:    #EEF3FA;
	--surface:   #FFFFFF;
	--fg:        #0F172A;
	--fg-soft:   #334155;
	--muted-fg:  #4A5A70;
	--border:    #E2E8F0;
	--border-strong: #CBD5E1;

	/* Neutrals — night surface */
	--night:      #070B16;
	--night-2:    #0B1226;
	--night-3:    #131C33;
	--night-fg:   #E8EEF9;
	--night-muted:#9FB0C9;
	--night-border: rgba(255, 255, 255, .12);

	/* Type */
	--font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
	--font-body: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

	--fs-hero:  clamp(1.95rem, 1.15rem + 3.1vw, 3.45rem);
	--fs-h1:    clamp(2.1rem, 1.4rem + 2.9vw, 3.4rem);
	--fs-h2:    clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
	--fs-h3:    clamp(1.25rem, 1.05rem + .8vw, 1.55rem);
	--fs-lead:  clamp(1.02rem, .97rem + .35vw, 1.19rem);
	--fs-body:  1rem;
	--fs-sm:    .9375rem;
	--fs-xs:    .8125rem;

	/*
	 * Content heading scale. --fs-h1/h2 above are the homepage "billboard"
	 * sizes; inside article and page content every heading uses this smaller
	 * scale instead, so a blog post and a service page share one rhythm and
	 * an h2 never competes with the page-hero h1.
	 */
	--fs-ch2: clamp(1.6rem, 1.35rem + 1.05vw, 2.1rem);
	--fs-ch3: clamp(1.22rem, 1.12rem + .45vw, 1.45rem);
	--fs-ch4: clamp(1.05rem, 1.01rem + .18vw, 1.15rem);

	/* Space */
	--sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
	--sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
	--sp-9: 6rem;
	--section-y: clamp(2.5rem, 1.75rem + 3vw, 4.25rem);
	--container: 1220px;
	--gutter: clamp(1rem, .5rem + 2vw, 2rem);

	/* Radius + shadow */
	--r-sm: 10px;  --r-md: 16px;  --r-lg: 22px;  --r-xl: 30px;  --r-pill: 999px;
	--sh-1: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .05);
	--sh-2: 0 12px 28px -12px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .05);
	--sh-3: 0 30px 60px -24px rgba(30, 58, 138, .35);
	--sh-glow: 0 0 0 1px rgba(37, 99, 235, .18), 0 18px 40px -18px rgba(37, 99, 235, .55);

	/* Motion */
	--e-out: cubic-bezier(.22, .78, .3, 1);
	--e-spring: cubic-bezier(.34, 1.4, .48, 1);
	--t-fast: .18s;
	--t-mid: .32s;
	--t-slow: .6s;

	/* Gradients */
	--grad-brand: linear-gradient(115deg, var(--blue-600), var(--violet) 55%, var(--cyan));
	--grad-brand-soft: linear-gradient(115deg, rgba(37, 99, 235, .12), rgba(124, 58, 237, .12) 55%, rgba(34, 211, 238, .12));
	--grad-text: linear-gradient(100deg, var(--blue-500), var(--violet-400) 45%, var(--cyan));
}

/* 2. RESET ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
svg.ico { flex: none; }

a { color: var(--blue-700); text-decoration: none; transition: color var(--t-fast) var(--e-out); }
a:hover { color: var(--violet); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

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

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }

::selection { background: rgba(37, 99, 235, .18); }

:focus-visible {
	outline: 3px solid var(--blue-600);
	outline-offset: 3px;
	border-radius: 6px;
}

.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;
	top: -100px; left: 16px;
	z-index: 9999;
	padding: 12px 20px;
	background: var(--blue-600);
	color: #fff;
	border-radius: 0 0 12px 12px;
	transition: top var(--t-fast) var(--e-out);
}
.skip-link:focus { top: 0; color: #fff; }

/* 3. TYPE ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.025em;
	margin: 0 0 var(--sp-4);
	color: var(--fg);
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.015em; }
h4 { font-size: 1.15rem; letter-spacing: -.01em; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

.gradient-text {
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

h1 em, h2 em, h3 em, .sec-title em {
	font-style: normal;
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Section heading block */
.sec-head { max-width: 46rem; margin: 0 auto var(--sp-5); }
.sec-head--center { text-align: center; }
.sec-head--left { margin-left: 0; text-align: left; }
.sec-title { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.sec-lead { color: var(--muted-fg); font-size: var(--fs-lead); margin: 0; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0 0 var(--sp-3);
	padding: .4rem .9rem .4rem .7rem;
	border-radius: var(--r-pill);
	background: var(--grad-brand-soft);
	border: 1px solid rgba(37, 99, 235, .18);
	color: var(--blue-700);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1;
}
.eyebrow-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--blue-600);
	box-shadow: 0 0 0 4px rgba(37, 99, 235, .16);
	animation: d3pulse 2.6s var(--e-out) infinite;
}

/* 4. LAYOUT ---------------------------------------------------------------- */
.container {
	width: min(100% - (var(--gutter) * 2), var(--container));
	margin-inline: auto;
}
.container--narrow { width: min(100% - (var(--gutter) * 2), 860px); }

.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--flush-top { padding-top: 0; }

.section--night {
	background: var(--night);
	color: var(--night-fg);
	overflow: hidden;
}
.section--night h1, .section--night h2, .section--night h3, .section--night h4 { color: var(--night-fg); }
.section--night .sec-lead, .section--night p { color: var(--night-muted); }
.section--night .eyebrow {
	background: rgba(255, 255, 255, .06);
	border-color: var(--night-border);
	color: var(--blue-200);
}

.section--alt { background: var(--bg-alt); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

/* 5. BUTTONS --------------------------------------------------------------- */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 48px;
	padding: .85rem 1.5rem;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: -.005em;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--t-mid) var(--e-spring), box-shadow var(--t-mid) var(--e-out), background-color var(--t-mid) var(--e-out), color var(--t-mid) var(--e-out), border-color var(--t-mid) var(--e-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .btn-ico { transition: transform var(--t-mid) var(--e-spring); }
.btn:hover .btn-ico { transform: translateX(4px); }

.btn--primary {
	background: var(--blue-600);
	color: #fff;
	box-shadow: var(--sh-glow);
}
.btn--primary::before {
	content: "";
	position: absolute; inset: 0;
	z-index: -1;
	background: var(--grad-brand);
	opacity: 0;
	transition: opacity var(--t-mid) var(--e-out);
}
.btn--primary:hover { color: #fff; box-shadow: 0 0 0 1px rgba(37, 99, 235, .3), 0 22px 44px -18px rgba(37, 99, 235, .8); }
.btn--primary:hover::before { opacity: 1; }

.btn--accent { background: var(--accent-strong); color: #fff; box-shadow: 0 16px 34px -18px rgba(194, 65, 12, .9); }
.btn--accent:hover { background: #9A3412; color: #fff; }

.btn--ghost {
	background: transparent;
	color: var(--fg);
	border: 1.5px solid var(--border-strong);
}
.btn--ghost:hover { border-color: var(--blue-600); color: var(--blue-700); background: rgba(37, 99, 235, .05); }

.btn--light {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, .28);
	backdrop-filter: blur(10px);
}
.btn--light:hover { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .55); }

.btn--sm { min-height: 40px; padding: .55rem 1.1rem; font-size: var(--fs-xs); }

.link-more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--blue-700);
}
.link-more svg { transition: transform var(--t-mid) var(--e-spring); }
.link-more:hover svg { transform: translate(3px, -3px); }

/* 6. SURFACES -------------------------------------------------------------- */
.card {
	position: relative;
	padding: var(--sp-5);
	border-radius: var(--r-lg);
	background: var(--surface);
	border: 1px solid var(--border);
	box-shadow: var(--sh-1);
	transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out), border-color var(--t-mid) var(--e-out);
	overflow: hidden;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: rgba(37, 99, 235, .35); }

/* Glass card used on night sections */
.card--glass {
	background: rgba(255, 255, 255, .055);
	border: 1px solid var(--night-border);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 20px 44px -28px rgba(0, 0, 0, .9);
	color: var(--night-fg);
}
.card--glass:hover { background: rgba(255, 255, 255, .085); border-color: rgba(147, 197, 253, .45); }
.card--glass h3, .card--glass h4 { color: var(--night-fg); }
.card--glass p { color: var(--night-muted); }

/* Gradient hairline border on hover */
.card--edge::after {
	content: "";
	position: absolute; inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--grad-brand);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0;
	transition: opacity var(--t-mid) var(--e-out);
	pointer-events: none;
}
.card--edge:hover::after { opacity: 1; }

/* Cursor-follow spotlight (JS sets --mx/--my) */
.spotlight::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(37, 99, 235, .16), transparent 62%);
	opacity: 0;
	transition: opacity var(--t-mid) var(--e-out);
	pointer-events: none;
}
.spotlight:hover::before { opacity: 1; }
.section--night .spotlight::before {
	background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(96, 165, 250, .22), transparent 60%);
}

.icon-badge {
	display: inline-grid;
	place-items: center;
	width: 54px; height: 54px;
	border-radius: 16px;
	background: var(--grad-brand-soft);
	border: 1px solid rgba(37, 99, 235, .2);
	color: var(--blue-700);
	margin-bottom: var(--sp-4);
	transition: transform var(--t-mid) var(--e-spring), background var(--t-mid) var(--e-out), color var(--t-mid) var(--e-out);
}
.card:hover .icon-badge { transform: rotate(-6deg) scale(1.06); }
.section--night .icon-badge {
	background: rgba(96, 165, 250, .14);
	border-color: rgba(147, 197, 253, .28);
	color: var(--blue-200);
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .38rem .85rem;
	border-radius: var(--r-pill);
	background: var(--surface);
	border: 1px solid var(--border);
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--fg-soft);
	white-space: nowrap;
}
.section--night .chip {
	background: rgba(255, 255, 255, .06);
	border-color: var(--night-border);
	color: var(--night-fg);
}

/* 7. BACKGROUNDS ----------------------------------------------------------- */
.aurora {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.aurora-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .55;
	will-change: transform;
}
.aurora-blob--1 {
	width: 46vw; height: 46vw; min-width: 380px; min-height: 380px;
	top: -18%; left: -8%;
	background: radial-gradient(circle at 30% 30%, #2563EB, transparent 70%);
	animation: d3float1 22s var(--e-out) infinite alternate;
}
.aurora-blob--2 {
	width: 40vw; height: 40vw; min-width: 340px; min-height: 340px;
	top: -10%; right: -10%;
	background: radial-gradient(circle at 60% 40%, #7C3AED, transparent 70%);
	animation: d3float2 26s var(--e-out) infinite alternate;
}
.aurora-blob--3 {
	width: 34vw; height: 34vw; min-width: 280px; min-height: 280px;
	bottom: -22%; left: 32%;
	background: radial-gradient(circle at 50% 50%, #22D3EE, transparent 70%);
	opacity: .38;
	animation: d3float3 30s var(--e-out) infinite alternate;
}
.aurora-grid {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	color: rgba(255, 255, 255, .09);
}
.aurora--hero .aurora-blob { opacity: .6; }
.section:not(.section--night) .aurora-grid { color: rgba(15, 23, 42, .07); }
.section:not(.section--night) .aurora-blob { opacity: .22; }

.noise {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .35;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.section > .container { position: relative; z-index: 1; }

/* 8. HEADER ---------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 900;
	transition: background var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out), border-color var(--t-mid) var(--e-out);
	background: rgba(255, 255, 255, .82);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
	background: rgba(255, 255, 255, .93);
	border-bottom-color: var(--border);
	box-shadow: 0 10px 30px -22px rgba(15, 23, 42, .5);
}

.topbar {
	background: var(--night);
	color: var(--night-muted);
	font-size: var(--fs-xs);
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: 42px;
	flex-wrap: wrap;
}
.topbar a { color: var(--night-muted); display: inline-flex; align-items: center; gap: .45rem; }
.topbar a:hover { color: #fff; }
.topbar__list { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.topbar__social { display: flex; align-items: center; gap: .35rem; }
.topbar__social a {
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border-radius: 50%;
	border: 1px solid var(--night-border);
	transition: background var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-spring), border-color var(--t-fast) var(--e-out);
}
.topbar__social a:hover { background: var(--blue-600); border-color: var(--blue-600); color: #fff; transform: translateY(-2px); }

.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: 74px;
}

.brand { display: inline-flex; align-items: center; gap: .7rem; flex: none; }
.brand img { max-height: 46px; width: auto; }
.brand__text { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.03em; color: var(--fg); }

.nav-menu { display: flex; align-items: center; gap: .15rem; }
.nav-menu > li { position: relative; }
.nav-menu .nav-link {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .65rem .85rem;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--fg-soft);
	transition: color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out);
}
.nav-menu .nav-link:hover,
.nav-menu > li:hover > .nav-link,
.nav-menu > li:focus-within > .nav-link { color: var(--blue-700); background: rgba(37, 99, 235, .07); }
.nav-menu > li.current-menu-item > .nav-link,
.nav-menu > li.current-menu-ancestor > .nav-link,
.nav-menu > li.current_page_item > .nav-link { color: var(--blue-700); }
.nav-menu > li.current-menu-item > .nav-link::after,
.nav-menu > li.current_page_item > .nav-link::after {
	content: "";
	position: absolute;
	left: 50%; bottom: 4px;
	width: 18px; height: 3px;
	transform: translateX(-50%);
	border-radius: 3px;
	background: var(--grad-brand);
}
.nav-caret { transition: transform var(--t-mid) var(--e-out); opacity: .7; }
.nav-menu > li:hover > .nav-link .nav-caret { transform: rotate(180deg); }

.nav-menu .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	min-width: 280px;
	padding: .6rem;
	transform: translate(-50%, 10px);
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(18px);
	border: 1px solid var(--border);
	box-shadow: 0 28px 60px -28px rgba(15, 23, 42, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out), visibility var(--t-mid);
	z-index: 20;
}
.nav-menu > li:hover > .sub-menu,
.nav-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}
.nav-menu .sub-menu::before {
	content: "";
	position: absolute;
	top: -6px; left: 50%;
	width: 12px; height: 12px;
	transform: translateX(-50%) rotate(45deg);
	background: inherit;
	border-left: 1px solid var(--border);
	border-top: 1px solid var(--border);
}
.nav-menu .sub-link {
	display: block;
	padding: .6rem .85rem;
	border-radius: 10px;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--fg-soft);
	transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out), padding-left var(--t-fast) var(--e-out);
}
.nav-menu .sub-link:hover { background: var(--blue-50); color: var(--blue-700); padding-left: 1.15rem; }

.nav-actions { display: flex; align-items: center; gap: .6rem; flex: none; }

.nav-toggle-sub { display: none; }

.burger {
	display: none;
	width: 46px; height: 46px;
	place-items: center;
	border-radius: 12px;
	border: 1px solid var(--border);
	color: var(--fg);
	background: var(--surface);
}
.burger:hover { border-color: var(--blue-600); color: var(--blue-700); }

/* Mobile drawer */
.nav-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(92vw, 400px);
	z-index: 1000;
	background: var(--night);
	color: var(--night-fg);
	display: flex;
	flex-direction: column;
	padding: var(--sp-5) var(--sp-5) var(--sp-6);
	overflow: hidden;
	transform: translateX(105%);
	transition: transform var(--t-slow) var(--e-out);
	box-shadow: -30px 0 80px -30px rgba(0, 0, 0, .8);
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--sp-4); flex: none; }
.nav-drawer__close {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border-radius: 12px;
	border: 1px solid var(--night-border);
	color: var(--night-fg);
}
/* Drawer navigation. Its own `mnav` namespace so no desktop dropdown rule
   can reach it - that collision is what pushed the submenu out of the panel. */
.nav-drawer__nav { margin-inline: calc(var(--sp-5) * -1); padding-inline: var(--sp-5); }

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

.mnav__item { border-bottom: 1px solid var(--night-border); }

/* Items fan in behind the panel as it slides open. */
.nav-drawer.is-open .mnav__item {
	animation: mnavIn .4s var(--e-out) both;
	animation-delay: calc(60ms + var(--i) * 35ms);
}

@keyframes mnavIn {
	from { opacity: 0; transform: translateX(16px); }
	to   { opacity: 1; transform: none; }
}

.mnav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	width: 100%;
	min-height: 54px;
	padding: .85rem 0;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--font-display);
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--night-fg);
	cursor: pointer;
	transition: color var(--t-fast) var(--e-out);
}

.mnav__link:hover, .mnav__link:focus-visible { color: var(--blue-200); }
.mnav__link.is-current { color: var(--blue-200); }

.mnav__go { opacity: 0; transform: translateX(-4px); transition: opacity var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out); }
.mnav__link:hover .mnav__go { opacity: .7; transform: none; }

.mnav__caret {
	flex: none;
	color: var(--night-muted);
	transition: transform var(--t-mid) var(--e-out), color var(--t-fast) var(--e-out);
}
.mnav__item.is-open .mnav__caret { transform: rotate(180deg); color: var(--blue-200); }

/* Height is animated in JS from a measured value, so the panel starts at 0. */
.mnav__sub {
	height: 0;
	overflow: hidden;
	transition: height var(--t-mid) var(--e-out);
}

.mnav__sub-inner { padding-bottom: .7rem; }

.mnav__sub ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 .9rem;
	border-left: 2px solid var(--night-border);
}

.mnav__sublink {
	display: block;
	padding: .6rem .2rem;
	font-size: var(--fs-sm);
	color: var(--night-muted);
	transition: color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.mnav__sublink:hover, .mnav__sublink:focus-visible { color: #fff; transform: translateX(3px); }
.mnav__sublink.is-current { color: var(--blue-200); font-weight: 600; }

.drawer-mark { font-size: 1.15rem; margin-bottom: 0; }

.drawer-reach { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.drawer-reach__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-height: 46px;
	border-radius: 12px;
	border: 1px solid var(--night-border);
	background: rgba(255, 255, 255, .05);
	color: var(--night-fg);
	font-size: var(--fs-sm);
	font-weight: 600;
	transition: background var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.drawer-reach__btn:hover { background: rgba(255, 255, 255, .1); border-color: var(--blue-400); color: #fff; }
.drawer-reach__btn--wa:hover { border-color: #25D366; }

.drawer-hours { margin: 0; font-size: var(--fs-xs); color: var(--night-muted); }

@media (prefers-reduced-motion: reduce) {
	.nav-drawer.is-open .mnav__item { animation: none; }
	.mnav__sub { transition: none; }
}

.nav-drawer__nav { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.nav-drawer__foot { flex: none; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--night-border); display: grid; gap: .6rem; }
.nav-drawer__foot a.contact-row { display: flex; align-items: center; gap: .6rem; color: var(--night-muted); font-size: var(--fs-sm); }
.nav-drawer__foot a.contact-row:hover { color: #fff; }

.nav-scrim {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(3, 7, 18, .6);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--t-mid) var(--e-out), visibility var(--t-mid);
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

/* Scroll progress bar */
.scroll-progress {
	position: fixed;
	top: 0; left: 0;
	height: 3px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: var(--grad-brand);
	z-index: 1001;
	pointer-events: none;
}

/* 9. FOOTER ---------------------------------------------------------------- */
.site-footer {
	position: relative;
	background: var(--night);
	color: var(--night-muted);
	overflow: hidden;
	padding-top: var(--sp-6);
}
.site-footer h3, .site-footer h4 { color: #fff; }
.site-footer a { color: var(--night-muted); }
.site-footer a:hover { color: #fff; }

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
	gap: var(--sp-5) var(--sp-4);
	padding-bottom: var(--sp-5);
}
.footer-col { min-width: 0; }
.footer-title {
	font-family: var(--font-display);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: .85rem;
}
.footer-list { display: grid; gap: .38rem; list-style: none; margin: 0; padding: 0; }
.footer-list li { margin: 0; }
.footer-list a {
	display: block;
	font-size: var(--fs-sm);
	line-height: 1.45;
	transition: color var(--t-fast) var(--e-out);
}
.footer-list a:hover { color: #fff; }

.footer-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 190px;
	padding: .55rem .8rem;
	margin-bottom: .9rem;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .8);
	transition: transform var(--t-fast) var(--e-spring);
}
.footer-logo:hover { transform: translateY(-2px); }
.footer-logo img { display: block; width: 100%; height: auto; max-height: 40px; object-fit: contain; }

.footer-mark {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: .9rem;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
}
.footer-mark__d3 {
	display: inline-block;
	padding: .28em .42em;
	border-radius: 8px;
	background: var(--grad-brand);
	color: #fff;
}
.footer-mark__word { color: #fff; }
.footer-mark:hover .footer-mark__word { color: var(--blue-200); }
.footer-about { font-size: var(--fs-sm); line-height: 1.6; max-width: 34ch; margin-bottom: 0; }

.footer-office {
	display: flex;
	gap: .6rem;
	font-size: var(--fs-sm);
	margin-bottom: .6rem;
}
.footer-office svg { color: var(--blue-400); margin-top: 3px; }
.footer-office b { color: #fff; display: block; font-weight: 600; }

.footer-offices {
	padding-block: var(--sp-4);
	border-top: 1px solid var(--night-border);
}
.footer-offices__grid {
	display: grid;
	grid-template-columns: 3fr 1fr;
	gap: var(--sp-5);
	align-items: start;
}
.office-list--row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.footer-reach { display: grid; gap: .2rem; }
.footer-reach .footer-office { margin-bottom: .55rem; }

.footer-social { display: flex; gap: .45rem; margin-top: .9rem; }
.footer-social a {
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border-radius: 12px;
	border: 1px solid var(--night-border);
	transition: transform var(--t-fast) var(--e-spring), background var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.footer-social a:hover { background: var(--grad-brand); border-color: transparent; color: #fff; transform: translateY(-3px); }

.footer-creds {
	padding-block: var(--sp-4);
	border-top: 1px solid var(--night-border);
}

.cred-row {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cred {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .5rem .85rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--night-border);
}

.cred__ico { display: grid; place-items: center; color: var(--blue-400); flex: none; }
.cred__text { display: grid; line-height: 1.25; }
.cred__text b { color: #fff; font-size: var(--fs-xs); font-weight: 600; }
.cred__text i { font-style: normal; font-size: .72rem; color: var(--night-muted); }
.cred__img { display: block; height: 34px; width: auto; }

.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	flex-wrap: wrap;
	padding-block: .85rem;
	border-top: 1px solid var(--night-border);
	font-size: var(--fs-xs);
}

/* ------------------------------------------------- STICKY QUICK ACTIONS --- */
/* Replaces the old floating call button and the back-to-top control. */
.quick-actions {
	position: fixed;
	right: clamp(.85rem, 2vw, 1.5rem);
	bottom: clamp(.85rem, 2vw, 1.5rem);
	z-index: 950;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .6rem;
}

.qa {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 54px;
	padding: 0;
	border-radius: 99px;
	color: #fff;
	box-shadow: 0 14px 34px -12px rgba(2, 6, 23, .55);
	overflow: hidden;
	transition: gap var(--t-mid) var(--e-spring), padding var(--t-mid) var(--e-spring), transform var(--t-fast) var(--e-spring), box-shadow var(--t-fast) var(--e-out);
}

.qa__ico {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	flex: none;
}

/* The label is collapsed to zero width and expands on hover or focus, so the
   control stays out of the way until someone reaches for it. */
.qa__label {
	max-width: 0;
	opacity: 0;
	white-space: nowrap;
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 600;
	transition: max-width var(--t-mid) var(--e-spring), opacity var(--t-fast) var(--e-out), margin var(--t-mid) var(--e-spring);
}

.qa:hover, .qa:focus-visible { transform: translateY(-3px); box-shadow: 0 20px 44px -14px rgba(2, 6, 23, .6); }
.qa:hover .qa__label, .qa:focus-visible .qa__label { max-width: 140px; opacity: 1; margin-right: 1.1rem; }

.qa--wa { background: linear-gradient(135deg, #25D366, #10B981); }
.qa--call { background: var(--grad-brand); }

/* A slow pulse on WhatsApp only - two competing pulses read as an alarm. */
.qa__pulse {
	position: absolute;
	inset: 0;
	border-radius: 99px;
	box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
	animation: qaPulse 2.6s var(--e-out) infinite;
	pointer-events: none;
}

@keyframes qaPulse {
	0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
	70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
	100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.qa__pulse { animation: none; }
	.qa, .qa__label { transition: none; }
}

/* Icon only on touch. The labels were kept visible here because there is no
   hover to reveal them, but two labelled pills take up too much of a phone
   screen - the aria-label still names each button for screen readers. */
@media (hover: none), (max-width: 767px) {
	.qa__label { display: none; }
	.qa { height: 50px; }
	.qa__ico { width: 50px; height: 50px; }
}

.to-top {
	position: fixed;
	right: 22px; bottom: 22px;
	z-index: 800;
	width: 48px; height: 48px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--blue-600);
	color: #fff;
	box-shadow: 0 16px 34px -14px rgba(37, 99, 235, .9);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-spring), visibility var(--t-mid);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--violet); color: #fff; }

/* Floating call button (mobile) */
.float-call {
	position: fixed;
	left: 22px; bottom: 22px;
	z-index: 800;
	display: none;
	align-items: center;
	gap: .5rem;
	padding: .8rem 1.15rem;
	border-radius: var(--r-pill);
	background: var(--accent-strong);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-sm);
	box-shadow: 0 16px 34px -14px rgba(194, 65, 12, .95);
}
.float-call:hover { color: #fff; }

/* 10. PAGE HERO ------------------------------------------------------------ */
.page-hero {
	position: relative;
	background: var(--night);
	color: var(--night-fg);
	padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
	overflow: hidden;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero__title {
	color: #fff;
	font-size: var(--fs-h1);
	margin: 0;
	max-width: 22ch;
}
.page-hero__meta {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: var(--sp-4);
	color: var(--night-muted);
	font-size: var(--fs-sm);
}
.page-hero__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; }

.crumbs {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: var(--sp-4);
	font-size: var(--fs-xs);
	color: var(--night-muted);
	flex-wrap: wrap;
}
.crumbs a { color: var(--blue-200); }
.crumbs a:hover { color: #fff; }
.crumb-sep { opacity: .5; }

/* 11. MOTION --------------------------------------------------------------- */
/* The hidden start state is applied only when JS is running (the .js class is
   set by an inline snippet in the head). Without JS every element renders in
   its final, readable state - nothing is ever invisible to a user or crawler. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s var(--e-out), transform .7s var(--e-out);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-reveal="left"] { transform: translateX(-28px); }
.js [data-reveal="right"] { transform: translateX(28px); }
.js [data-reveal="zoom"] { transform: scale(.94); }
.js [data-reveal].is-in[data-reveal] { transform: none; }

@keyframes d3pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .38); }
	50% { box-shadow: 0 0 0 7px rgba(37, 99, 235, 0); }
}
@keyframes d3float1 {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(6%, 8%, 0) scale(1.12); }
}
@keyframes d3float2 {
	from { transform: translate3d(0, 0, 0) scale(1.05); }
	to   { transform: translate3d(-8%, 10%, 0) scale(.92); }
}
@keyframes d3float3 {
	from { transform: translate3d(0, 0, 0) scale(.95); }
	to   { transform: translate3d(10%, -8%, 0) scale(1.15); }
}
@keyframes d3marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes d3spin { to { transform: rotate(360deg); } }
@keyframes d3bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}
@keyframes d3shine {
	0% { transform: translateX(-120%) skewX(-18deg); }
	100% { transform: translateX(220%) skewX(-18deg); }
}

/* Marquee */
.marquee {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
	display: flex;
	width: max-content;
	gap: var(--sp-5);
	animation: d3marquee var(--marquee-speed, 38s) linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* 12. BLOG / PROSE --------------------------------------------------------- */
.main-wrap { padding-block: var(--section-y); }

.prose { font-size: 1.03rem; color: var(--fg-soft); line-height: 1.75; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--fs-ch2); margin-top: 1.9em; margin-bottom: .5em; color: var(--fg); }
.prose h3 { font-size: var(--fs-ch3); margin-top: 1.6em; margin-bottom: .4em; color: var(--fg); }
.prose h4 { font-size: var(--fs-ch4); margin-top: 1.4em; margin-bottom: .35em; color: var(--fg); }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose ul > li { list-style: disc; margin-bottom: .5em; }
.prose ol > li { list-style: decimal; margin-bottom: .5em; }
.prose img { border-radius: var(--r-md); box-shadow: var(--sh-1); }
.prose blockquote {
	margin: 1.6em 0;
	padding: 1.2rem 1.5rem;
	border-left: 3px solid var(--blue-600);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	background: var(--blue-50);
	color: var(--fg);
	font-size: 1.08rem;
}
.prose code {
	padding: .15em .4em;
	border-radius: 6px;
	background: var(--bg-alt);
	font-size: .9em;
}
.prose pre {
	padding: 1.1rem 1.25rem;
	border-radius: var(--r-md);
	background: var(--night);
	color: var(--night-fg);
	overflow-x: auto;
}
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { padding: .7rem .9rem; border: 1px solid var(--border); text-align: left; }
.prose th { background: var(--bg-alt); font-family: var(--font-display); }
.prose figure { margin: 1.6em 0; }
.prose figcaption { font-size: var(--fs-xs); color: var(--muted-fg); text-align: center; margin-top: .6em; }

.post-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.post-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-alt); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--e-out); }
.post-card:hover .post-card__media img { transform: scale(1.06); }
.post-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.post-card__meta { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); color: var(--muted-fg); }
.post-card__title { font-size: 1.12rem; margin: 0; }
.post-card__title a { color: var(--fg); }
.post-card__title a:hover { color: var(--blue-700); }
.post-card__excerpt { font-size: var(--fs-sm); color: var(--muted-fg); margin: 0; }
.post-card__more { margin-top: auto; padding-top: .6rem; }

.tag-pill {
	display: inline-block;
	padding: .3rem .75rem;
	border-radius: var(--r-pill);
	background: var(--blue-50);
	color: var(--blue-700);
	font-size: var(--fs-xs);
	font-weight: 600;
}

.pagination { display: flex; justify-content: center; gap: .4rem; margin-top: var(--sp-7); flex-wrap: wrap; }
.pagination .page-numbers {
	min-width: 44px; height: 44px;
	display: grid; place-items: center;
	padding: 0 .8rem;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--fg-soft);
	font-weight: 600;
	font-size: var(--fs-sm);
}
.pagination .page-numbers:hover { border-color: var(--blue-600); color: var(--blue-700); }
.pagination .page-numbers.current { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }

.widget { margin-bottom: var(--sp-5); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.widget-title { font-size: 1.05rem; margin-bottom: var(--sp-3); }
.widget ul li { padding: .4rem 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-sm); }
.widget ul li:last-child { border-bottom: 0; }

/* 13. FORMS ---------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="password"], input[type="number"], select, textarea {
	width: 100%;
	padding: .85rem 1.05rem;
	border-radius: 12px;
	border: 1.5px solid var(--border);
	background: var(--surface);
	color: var(--fg);
	transition: border-color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--blue-600);
	box-shadow: 0 0 0 4px rgba(37, 99, 235, .14);
}
textarea { min-height: 140px; resize: vertical; }
label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: .4rem; color: var(--fg); }

input[type="submit"], button[type="submit"], .wpcf7-submit {
	width: auto;
	min-height: 48px;
	padding: .85rem 1.6rem;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--blue-600);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--sh-glow);
	transition: transform var(--t-mid) var(--e-spring), background var(--t-mid) var(--e-out);
}
input[type="submit"]:hover, button[type="submit"]:hover, .wpcf7-submit:hover { transform: translateY(-2px); background: var(--blue-700); }

.search-form { display: flex; gap: .5rem; }
.search-form .search-submit { flex: none; }

/* 14. UTILITIES ------------------------------------------------------------ */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; }
.w-full { width: 100%; }
.relative { position: relative; }
.hide-sm { display: initial; }
.only-sm { display: none; }

/* 15. RESPONSIVE ----------------------------------------------------------- */
/* Five footer columns need real width; below that the brand block goes full
   width and the four link columns share the row. */
@media (max-width: 1280px) {
	.footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.footer-brand { grid-column: 1 / -1; }
	.footer-about { max-width: 60ch; }
}

@media (max-width: 1080px) {
	.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer-brand { grid-column: 1 / -1; }
	.footer-offices__grid { grid-template-columns: 1fr; }
	.office-list--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
	.nav-menu.nav-menu--desktop { display: none; }
	.burger { display: grid; }
	.nav-actions .btn--primary { display: none; }
	.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.topbar__list .topbar-hide-md { display: none; }
}

@media (max-width: 767px) {
	:root {
		--section-y: clamp(2.5rem, 1.75rem + 4vw, 4rem);

		/* Phone-sized type. The desktop clamps bottomed out far too large:
		   the headline alone was 31px, which read as shouting on a 390px screen. */
		--fs-hero: 1.62rem;
		--fs-h1:   1.62rem;
		--fs-h2:   1.38rem;
		--fs-h3:   1.12rem;
		--fs-lead: 1rem;
		--fs-body: .97rem;
		--fs-sm:   .9rem;
	}

	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
	/* Two columns pairs Services with Digital marketing, and Hire with Company,
	   instead of one very long single-column stack. */
	.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
	.footer-brand { grid-column: 1 / -1; }
	.office-list--row { grid-template-columns: 1fr; }
	.footer-bottom { justify-content: center; text-align: center; }

	/* Only the nav row sticks - the contact bar scrolls away, so a phone is not
	   giving up 100px of screen to it permanently. */
	.site-header { position: static; }
	.nav-bar {
		position: sticky;
		top: 0;
		z-index: 900;
		min-height: 62px;
		background: rgba(255, 255, 255, .95);
		backdrop-filter: blur(16px) saturate(160%);
		-webkit-backdrop-filter: blur(16px) saturate(160%);
		box-shadow: 0 10px 30px -24px rgba(15, 23, 42, .5);
	}
	.brand img { max-height: 36px; }

	/* Phone and email on one line, nothing else - the bar was taking 54px. */
	.topbar { font-size: .74rem; }
	.topbar__inner { justify-content: center; min-height: 0; padding-block: .28rem; gap: 0; flex-wrap: nowrap; }
	.topbar__list { gap: .9rem; justify-content: center; flex-wrap: nowrap; }
	.topbar__list a { gap: .3rem; white-space: nowrap; }
	.topbar__list svg { width: 13px; height: 13px; }
	/* The global 44px touch-target rule was setting the bar's height. Phone and
	   email are also offered as full-size buttons in the drawer, so a 34px tap
	   target here is a fair trade for the screen space. */
	.topbar a { min-height: 34px; }
	.topbar__social { display: none; }

	.hide-sm { display: none; }
	.only-sm { display: initial; }

	h1, h2, h3 { letter-spacing: -.015em; }
	h1, h2 { line-height: 1.18; }

	/* Long unbroken strings (URLs, emails, code) were forcing a horizontal
	   scrollbar on narrow screens. */
	body { overflow-x: hidden; }
	h1, h2, h3, h4, p, li, a, td, th { overflow-wrap: anywhere; }
	pre, code, table { max-width: 100%; overflow-x: auto; }
}

/* 16. REDUCED MOTION ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	[data-reveal] { opacity: 1 !important; transform: none !important; }
	.marquee__track { animation: none !important; transform: none !important; }
	.aurora-blob { animation: none !important; }
	.btn:hover, .card:hover { transform: none !important; }
}

/* 17. CTA BAND (rendered by footer.php on every page) ---------------------- */
.cta-band {
	position: relative;
	background: var(--night-2);
	color: var(--night-fg);
	overflow: hidden;
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
.cta-band__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.4fr .9fr;
	gap: var(--sp-6);
	align-items: center;
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	border-radius: var(--r-xl);
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--night-border);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 1);
}
.cta-band__title { color: #fff; font-size: var(--fs-h2); margin-bottom: .6rem; }
.cta-band__lead { color: var(--night-muted); margin: 0; max-width: 52ch; }
.cta-band__actions { display: flex; flex-direction: column; gap: .7rem; align-items: stretch; }
.cta-band__actions .btn { width: 100%; }

@media (max-width: 860px) {
	.cta-band__inner { grid-template-columns: 1fr; }
	.cta-band__actions { flex-direction: row; flex-wrap: wrap; }
	.cta-band__actions .btn { width: auto; flex: 1 1 200px; }
}

/* 18. TOUCH TARGETS -------------------------------------------------------- */
/* Pointer-coarse devices get the 44x44 minimum on every compact link. */
@media (hover: none), (max-width: 767px) {
	/* The utility bar is compact by design and both links are repeated as
	   full-size buttons in the drawer, so 34px here rather than 44px. */
	.topbar__list a,
	.topbar__list > li > span {
		min-height: 34px;
		display: inline-flex;
		align-items: center;
	}
	.topbar__social a { width: 44px; height: 44px; }

	.nav-drawer__foot a.contact-row { min-height: 44px; }
	.mnav__link { min-height: 54px; }
	.mnav__sublink { min-height: 44px; display: flex; align-items: center; }

	.footer-list a { padding-block: .3rem; }
	.footer-social a { width: 46px; height: 46px; }
	.footer-bottom .cluster a { min-height: 44px; display: inline-flex; align-items: center; }

	.link-more { min-height: 44px; }
}

/* 19. FOOTER OFFICE LIST --------------------------------------------------- */
.office-list { display: grid; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.office {
	display: flex;
	gap: .65rem;
	font-size: var(--fs-sm);
	line-height: 1.5;
}
.office__pin {
	display: grid; place-items: center;
	width: 30px; height: 30px;
	flex: none;
	border-radius: 9px;
	background: rgba(96, 165, 250, .14);
	border: 1px solid var(--night-border);
	color: var(--blue-400);
}
.office b {
	display: block;
	color: #fff;
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -.01em;
}
.office__country { color: var(--night-muted); font-weight: 400; }
.office i { font-style: normal; font-size: var(--fs-xs); color: var(--night-muted); }