/* =====================================================================
   Makani Enjaz — main stylesheet (LIGHT THEME)

   Surfaces:
     • Page background ............ var(--nd-color-bg)        light gray
     • Card / panel ............... var(--nd-color-surface)   white
     • Body text .................. var(--nd-color-text)      Oxford Blue
     • Muted text ................. var(--nd-color-muted)     slate gray
     • Border / divider ........... var(--nd-color-border)    light gray
     • Accent ..................... var(--nd-color-accent)    metallic gold
     • Dark sections (hero/footer)  var(--nd-color-primary)   Oxford Blue
                                    var(--nd-color-hero-text) white

   Sections:
     1.  Reset / base
     2.  Layout primitives (container, section, eyebrow, headings, buttons)
     3.  Header / nav / mobile drawer / submenus
     4.  Hero
     5.  Intro / About
     6.  Services — homepage box grid (4×3 + Explore-All tile)
     7.  Services — taxonomy grid (full Services page)
     8.  Why / Stats
     9.  Testimonials
    10.  FAQ
    11.  Blog grid / single / page / archive / 404 / page-headers
    12.  Single service page
    13.  Page templates (about, contact, faq, services)
    14.  Footer (kept dark for visual closure)
    15.  Floating WhatsApp button
    16.  Utilities + accessibility
   ===================================================================== */

/* 0. Default design tokens (hardening) -------------------------------
   These :root defaults mirror the Customizer defaults and make the theme
   self-sufficient. inc/dynamic-css.php re-declares the same custom
   properties via wp_add_inline_style() with the user's chosen values,
   which override these because that inline block loads AFTER this file.

   Why this exists: some caching / CSS-optimization plugins strip or
   reorder inline <style> blocks on the live site. Without these defaults
   the custom properties would be undefined and every element that relies
   on them (colors, card/hero backgrounds, dropdown menus) would render
   transparent — i.e. "disappear". With them, the site still looks correct
   even if the inline overrides are removed. Do NOT remove this block. */
:root {
	--nd-color-primary:      #0F172A;
	--nd-color-secondary:    #1E293B;
	--nd-color-accent:       #C5A059;
	--nd-color-accent-rgb:   197,160,89;
	--nd-color-primary-rgb:  15,23,42;
	--nd-color-text-rgb:     15,23,42;
	--nd-color-bg:           #F8FAFC;
	--nd-color-surface:      #FFFFFF;
	--nd-color-surface-alt:  #F8FAFC;
	--nd-color-text:         #0F172A;
	--nd-color-muted:        #64748B;
	--nd-color-border:       #E2E8F0;
	--nd-color-hero-bg:      #0F172A;
	--nd-color-hero-text:    #FFFFFF;
	--nd-font-primary:       'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--nd-hero-overlay:       0.55;
}

/* 1. Reset / base ---------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
	margin: 0;
	max-width: 100%;
	overflow-x: clip; /* second guard; `clip` (not `hidden`) keeps position:sticky working */
	background: var(--nd-color-bg, #F8FAFC);
	color: var(--nd-color-text, #0F172A);
	font-family: var(--nd-font-primary, system-ui, sans-serif);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--nd-color-accent); }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
ul, ol { padding-inline-start: 0; list-style: none; margin: 0; }
p { margin: 0 0 1em; }

.nd-rtl { letter-spacing: 0; }
.nd-rtl body, .nd-rtl .nd-prose { line-height: 1.85; }

/* 2. Layout primitives ---------------------------------------------- */
.nd-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}
.nd-section { padding-block: clamp(4rem, 10vw, 8rem); position: relative; }
.nd-section--alt { background: var(--nd-color-surface); }
.nd-section--dark {
	background: var(--nd-color-primary);
	color: var(--nd-color-hero-text);
}
.nd-section__head { max-width: 720px; margin-bottom: clamp(2rem, 5vw, 4rem); }
.nd-section__head--center { margin-inline: auto; text-align: center; }
.nd-section__head--row { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; }
.nd-section__lede { color: var(--nd-color-muted); font-size: 1.125rem; }

.nd-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .15em;
	color: var(--nd-color-accent);
	margin: 0 0 1rem;
}
.nd-rtl .nd-eyebrow { letter-spacing: 0; }
.nd-eyebrow__dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--nd-color-accent);
	box-shadow: 0 0 0 4px rgba(var(--nd-color-accent-rgb), .15);
}

.nd-display, .nd-h1, .nd-h2, .nd-h3 { font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .5em; color: var(--nd-color-text); }
.nd-rtl .nd-display, .nd-rtl .nd-h1, .nd-rtl .nd-h2, .nd-rtl .nd-h3 { letter-spacing: 0; line-height: 1.3; }
.nd-display { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; }
.nd-h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
.nd-h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.nd-h3 { font-size: 1.25rem; }

.nd-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--nd-color-accent);
	font-weight: 600;
}
.nd-link .nd-icon { width: 1em; height: 1em; transition: transform .2s ease; }
.nd-link:hover .nd-icon { transform: translateX(4px); }
.nd-rtl .nd-link:hover .nd-icon { transform: translateX(-4px); }

.nd-icon { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; }
.nd-icon svg { width: 100%; height: 100%; }

.nd-btn {
	--btn-bg: transparent;
	--btn-color: var(--nd-color-text);
	--btn-border: var(--nd-color-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: .85rem 1.5rem;
	border-radius: 999px;
	border: 1px solid var(--btn-border);
	background: var(--btn-bg);
	color: var(--btn-color);
	font-weight: 600;
	font-size: .95rem;
	letter-spacing: .01em;
	transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
	white-space: nowrap;
}
.nd-btn:hover { transform: translateY(-1px); }
.nd-btn--accent {
	--btn-bg: var(--nd-color-accent);
	--btn-color: #FFFFFF;
	--btn-border: var(--nd-color-accent);
	box-shadow: 0 8px 24px -8px rgba(var(--nd-color-accent-rgb), .55);
}
.nd-btn--accent:hover { color: #FFFFFF; box-shadow: 0 14px 30px -10px rgba(var(--nd-color-accent-rgb), .7); }
.nd-btn--ghost {
	--btn-color: var(--nd-color-text);
	--btn-border: var(--nd-color-border);
	background: var(--nd-color-surface);
}
.nd-btn--ghost:hover { background: var(--nd-color-bg); border-color: var(--nd-color-accent); color: var(--nd-color-text); }
.nd-btn--lg { padding: 1.05rem 1.85rem; font-size: 1rem; }
.nd-btn--block { display: flex; width: 100%; }

/* On dark surfaces, ghost buttons need to invert. */
.nd-on-dark .nd-btn--ghost,
.nd-hero .nd-btn--ghost {
	--btn-color: #FFFFFF;
	--btn-border: rgba(255,255,255,.25);
	background: rgba(255,255,255,.06);
	backdrop-filter: blur(8px);
}
.nd-on-dark .nd-btn--ghost:hover,
.nd-hero .nd-btn--ghost:hover {
	background: rgba(255,255,255,.12);
	border-color: rgba(255,255,255,.45);
	color: #FFFFFF;
}

.nd-btn .nd-icon { width: 1.1em; height: 1.1em; }
.nd-rtl .nd-btn .nd-icon[data-icon="arrow"] svg { transform: scaleX(-1); }

/* 3. Header ---------------------------------------------------------- */
.nd-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 100;
	transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease, color .3s ease;
	border-bottom: 1px solid transparent;
}
/* Header sits over the hero (dark) — inverted by default. */
.nd-header[data-state="top"] {
	background: transparent;
	color: #FFFFFF;
}
.nd-header[data-state="scrolled"] {
	background: rgba(255,255,255,.96);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom-color: var(--nd-color-border);
	color: var(--nd-color-text);
}
/* On non-front-page (no big dark hero), use solid light header from the start. */
body:not(.home):not(.nd-has-hero) .nd-header {
	background: rgba(255,255,255,.96);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom-color: var(--nd-color-border);
	color: var(--nd-color-text);
}
.nd-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1.1rem;
}
.nd-logo { display: inline-flex; align-items: center; gap: .6rem; }
.nd-logo img { max-height: 44px; width: auto; }
.nd-logo__mark {
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: inherit;
}
.nd-rtl .nd-logo__mark { letter-spacing: 0; }

.nd-nav { flex: 1; }
.nd-nav__list {
	display: flex;
	justify-content: center;
	gap: clamp(.5rem, 2vw, 1.5rem);
	position: relative;
}
.nd-nav__list > li { position: relative; }
.nd-nav__list a {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .95rem;
	font-weight: 500;
	color: inherit;
	padding: .5rem .25rem;
	opacity: .85;
	transition: opacity .2s ease, color .2s ease;
}
.nd-nav__list a:hover,
.nd-nav__list .current-menu-item > a,
.nd-nav__list .current-menu-parent > a { opacity: 1; color: var(--nd-color-accent); }

/* Submenu (dropdown) ------------------------------------------------- */
.nd-nav__list .menu-item-has-children > a::after {
	content: '';
	width: 7px; height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: .6;
}
.nd-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	inset-inline-start: 0;
	min-width: 240px;
	background: var(--nd-color-surface);
	color: var(--nd-color-text);
	border: 1px solid var(--nd-color-border);
	border-radius: 14px;
	padding: .5rem;
	box-shadow: 0 24px 48px -16px rgba(15,23,42,.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	z-index: 10;
}
.nd-nav__list > li:hover > .sub-menu,
.nd-nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
.nd-nav__list .sub-menu li { position: relative; }
.nd-nav__list .sub-menu a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .75rem;
	padding: .65rem .9rem;
	border-radius: 8px;
	color: var(--nd-color-text);
	opacity: 1;
	font-weight: 500;
}
.nd-nav__list .sub-menu a:hover {
	background: var(--nd-color-bg);
	color: var(--nd-color-accent);
}
.nd-nav__list .sub-menu .menu-item-has-children > a::after {
	content: '';
	width: 6px; height: 6px;
	border: 0;
	border-right: 1.5px solid currentColor;
	border-top: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .55;
}
.nd-nav__list .sub-menu .sub-menu {
	top: -.5rem;
	inset-inline-start: 100%;
}
.nd-rtl .nd-nav__list .sub-menu .sub-menu { inset-inline-start: auto; inset-inline-end: 100%; }
.nd-rtl .nd-nav__list .sub-menu .menu-item-has-children > a::after { transform: rotate(-135deg); }

.nd-header__actions { display: flex; align-items: center; gap: .85rem; }
.nd-lang-switch {
	display: inline-flex;
	gap: .35rem;
	align-items: center;
	font-size: .85rem;
	letter-spacing: .04em;
	font-weight: 600;
	opacity: .7;
}
.nd-lang-switch__btn { padding: .25rem .35rem; }
.nd-lang-switch__btn.is-active { color: var(--nd-color-accent); opacity: 1; }

.nd-header__cta { padding: .65rem 1.25rem; font-size: .875rem; }

.nd-burger {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid currentColor;
	opacity: .8;
	border-radius: 12px;
}
.nd-burger__close { display: none; }
.nd-burger[aria-expanded="true"] .nd-burger__open { display: none; }
.nd-burger[aria-expanded="true"] .nd-burger__close { display: inline-flex; }

.nd-mobile {
	position: fixed;
	inset: 76px 0 0 0;
	background: var(--nd-color-surface);
	color: var(--nd-color-text);
	z-index: 99;
	padding-block: 2rem;
	overflow-y: auto;
}
.nd-mobile[hidden] { display: none; }
.nd-mobile__list { display: flex; flex-direction: column; gap: 0; }
.nd-mobile__list li { border-bottom: 1px solid var(--nd-color-border); }
.nd-mobile__list a { display: block; padding: 1.1rem 0; font-size: 1.1rem; font-weight: 500; }
.nd-mobile__list .sub-menu { padding-inline-start: 1rem; padding-block-end: .5rem; border-top: 1px dashed var(--nd-color-border); }
.nd-mobile__list .sub-menu a { font-size: 1rem; padding: .65rem 0; }
.nd-mobile .nd-btn { margin-top: 2rem; }

@media (max-width: 1024px) {
	.nd-nav, .nd-header__cta { display: none; }
	.nd-burger { display: inline-flex; }
}

/* Off-screen without causing horizontal overflow (the old `left:-9999px`
   broke RTL layouts — it pushed the document wide, so the page opened on a
   blank strip and the fixed header sat over white). The clip technique takes
   zero layout space in any direction. */
.nd-skip-link {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	background: var(--nd-color-accent);
	color: #FFFFFF;
	font-weight: 600;
	z-index: 999;
}
.nd-skip-link:focus {
	inset-inline-start: 0; top: 0;
	width: auto; height: auto;
	margin: 0; padding: .75rem 1rem;
	clip: auto; overflow: visible;
}

/* 4. Hero ------------------------------------------------------------ */
.nd-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-top: 6rem;
	padding-bottom: 4rem;
	background: var(--nd-color-hero-bg);
	color: var(--nd-color-hero-text);
	/* No-image fallback: layered radial glows + faint dot pattern so the hero
	   looks finished even before the user uploads a custom background image. */
	background-image:
		radial-gradient(circle at 80% 18%, rgba(var(--nd-color-accent-rgb), .18) 0%, transparent 55%),
		radial-gradient(circle at 12% 78%, rgba(var(--nd-color-accent-rgb), .10) 0%, transparent 50%);
}
.nd-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
	opacity: .55;
}
.nd-hero__bg {
	position: absolute;
	inset: 0;
	background-image: var(--nd-hero-image, none);
	background-size: cover;
	background-position: center;
	z-index: 0;
}
.nd-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.nd-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 50% 30%, rgba(var(--nd-color-primary-rgb), .35) 0%, rgba(var(--nd-color-primary-rgb), 1) 80%),
		linear-gradient(180deg, rgba(0,0,0,calc(var(--nd-hero-overlay) * .5)) 0%, rgba(0,0,0,var(--nd-hero-overlay)) 100%);
}
.nd-hero__inner { position: relative; z-index: 1; max-width: 880px; }
.nd-hero__title { color: var(--nd-color-hero-text); margin-bottom: 1.25rem; }
.nd-hero__sub {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	color: rgba(255,255,255,.78);
	margin-bottom: 2.25rem;
	max-width: 60ch;
}
.nd-hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 3rem; }
.nd-hero__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	color: rgba(255,255,255,.7);
	font-size: .9rem;
}
.nd-hero__quick li { display: inline-flex; align-items: center; gap: .55rem; }
.nd-hero__quick a:hover { color: var(--nd-color-accent); }
.nd-hero__quick-icon { color: var(--nd-color-accent); }

.nd-hero__scroll {
	position: absolute;
	inset-inline-start: 50%;
	bottom: 2rem;
	transform: translateX(-50%);
	width: 28px;
	height: 44px;
	border: 1px solid rgba(255,255,255,.3);
	border-radius: 14px;
	display: grid;
	place-items: start center;
	padding: 8px 0;
	z-index: 2;
}
.nd-hero__scroll-line { width: 2px; height: 8px; background: var(--nd-color-accent); border-radius: 2px; animation: nd-scroll 2s ease-in-out infinite; }
@keyframes nd-scroll {
	0%, 100% { transform: translateY(0); opacity: 1; }
	50% { transform: translateY(14px); opacity: 0; }
}

/* Page hero (sub-pages) — narrower, dark gradient strip ------------- */
.nd-page-hero {
	background: var(--nd-color-primary);
	color: var(--nd-color-hero-text);
	padding-block: clamp(8rem, 14vw, 12rem) clamp(3rem, 6vw, 5rem);
	position: relative;
	overflow: hidden;
}
.nd-page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 80% 20%, rgba(var(--nd-color-accent-rgb), .15) 0%, transparent 60%),
		radial-gradient(circle at 10% 80%, rgba(var(--nd-color-accent-rgb), .08) 0%, transparent 50%);
	z-index: 0;
}
.nd-page-hero__inner { position: relative; z-index: 1; }
.nd-page-hero h1 { color: var(--nd-color-hero-text); }
.nd-page-hero__sub { color: rgba(255,255,255,.72); font-size: 1.125rem; max-width: 60ch; }

.nd-breadcrumbs {
	display: flex;
	gap: .5rem;
	font-size: .875rem;
	color: rgba(255,255,255,.6);
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}
.nd-breadcrumbs a { color: rgba(255,255,255,.85); }
.nd-breadcrumbs a:hover { color: var(--nd-color-accent); }
.nd-breadcrumbs span:not(:last-child)::after { content: '/'; margin-inline-start: .5rem; opacity: .5; }
.nd-rtl .nd-breadcrumbs span:not(:last-child)::after { content: '\\'; }

/* 5. Intro / About --------------------------------------------------- */
.nd-intro { background: var(--nd-color-surface); }
.nd-intro__grid {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.nd-intro__body p { color: var(--nd-color-muted); font-size: 1.05rem; margin-bottom: 1.25em; }
.nd-intro__highlights {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1.5rem;
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--nd-color-border);
}
.nd-intro__highlights li { display: flex; gap: .75rem; align-items: flex-start; font-weight: 500; }
.nd-intro__highlights .nd-icon { color: var(--nd-color-accent); margin-top: .15em; }
.nd-intro__media { position: relative; }
.nd-intro__media img {
	width: 100%;
	border-radius: 20px;
	border: 1px solid var(--nd-color-border);
}
.nd-intro__media-tag {
	position: absolute;
	bottom: -1.5rem;
	inset-inline-start: -1.5rem;
	background: var(--nd-color-accent);
	color: #FFFFFF;
	padding: 1.25rem 1.5rem;
	border-radius: 14px;
	display: flex;
	align-items: baseline;
	gap: .5rem;
	box-shadow: 0 20px 40px -12px rgba(var(--nd-color-accent-rgb),.45);
}
.nd-intro__media-tag-num { font-size: 2.5rem; font-weight: 800; line-height: 1; }
.nd-intro__media-tag-num sup { font-size: .55em; }
.nd-intro__media-tag-label { font-size: .85rem; max-width: 8ch; line-height: 1.2; font-weight: 500; }

@media (max-width: 880px) {
	.nd-intro__grid { grid-template-columns: 1fr; }
	.nd-intro__highlights { grid-template-columns: 1fr; }
}

/* 6. Services — homepage box grid ----------------------------------- */
.nd-services { background: var(--nd-color-bg); }
.nd-services__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--nd-color-border);
	border: 1px solid var(--nd-color-border);
	border-radius: 4px;
	overflow: hidden;
}
.nd-service-tile {
	background: var(--nd-color-surface);
	padding: 2rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: .9rem;
	min-height: 240px;
	transition: background .2s ease, transform .2s ease;
	position: relative;
}
.nd-service-tile:hover { background: #FFFCF6; }
.nd-service-tile__icon {
	width: 40px;
	height: 40px;
	color: var(--nd-color-accent);
	margin-bottom: .25rem;
}
.nd-service-tile__icon svg { width: 100%; height: 100%; }
.nd-service-tile__title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--nd-color-text);
	margin: 0;
	line-height: 1.3;
}
.nd-service-tile__desc {
	color: var(--nd-color-muted);
	font-size: .9rem;
	line-height: 1.55;
	margin: 0;
}
.nd-service-tile a { display: block; }
.nd-service-tile--cta {
	background: linear-gradient(135deg, rgba(var(--nd-color-accent-rgb),.04) 0%, rgba(var(--nd-color-accent-rgb),.10) 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.nd-service-tile--cta:hover { background: linear-gradient(135deg, rgba(var(--nd-color-accent-rgb),.08) 0%, rgba(var(--nd-color-accent-rgb),.16) 100%); }
.nd-service-tile--cta .nd-service-tile__title { color: var(--nd-color-text); }
.nd-service-tile__cta-arrow {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--nd-color-accent);
	color: var(--nd-color-accent);
	display: grid;
	place-items: center;
	flex: none;
	transition: background .2s ease, color .2s ease;
}
.nd-service-tile--cta:hover .nd-service-tile__cta-arrow { background: var(--nd-color-accent); color: #FFFFFF; }
.nd-rtl .nd-service-tile__cta-arrow svg { transform: scaleX(-1); }

@media (max-width: 1024px) { .nd-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .nd-services__grid { grid-template-columns: 1fr; } }

/* 7. Services — taxonomy grid (full Services page categories) -------- */
.nd-services-categories { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.nd-service-category {
	background: var(--nd-color-surface);
	border: 1px solid var(--nd-color-border);
	border-radius: 18px;
	padding: clamp(1.5rem, 3vw, 2.5rem);
}
.nd-service-category__head {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--nd-color-border);
	margin-bottom: 1.5rem;
}
.nd-service-category__icon {
	width: 56px; height: 56px;
	display: grid; place-items: center;
	background: rgba(var(--nd-color-accent-rgb), .12);
	color: var(--nd-color-accent);
	border-radius: 14px;
	flex: none;
}
.nd-service-category__icon svg { width: 26px; height: 26px; }
.nd-service-category__title { font-size: 1.5rem; margin: 0; }
.nd-service-category__count { color: var(--nd-color-muted); font-size: .9rem; margin-top: .25rem; }
.nd-service-category__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .75rem 1.5rem;
}
.nd-service-category__list li a {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .85rem 1rem;
	border-radius: 10px;
	background: var(--nd-color-bg);
	color: var(--nd-color-text);
	font-weight: 500;
	font-size: .95rem;
	transition: background .2s ease, color .2s ease;
}
.nd-service-category__list li a:hover { background: rgba(var(--nd-color-accent-rgb),.1); color: var(--nd-color-accent); }
.nd-service-category__list .nd-icon { color: var(--nd-color-accent); flex: none; }

@media (max-width: 880px) { .nd-service-category__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .nd-service-category__list { grid-template-columns: 1fr; } }

/* 8. Why / Stats ----------------------------------------------------- */
.nd-why { background: var(--nd-color-surface); }
.nd-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.nd-why__item { text-align: center; padding: 1rem; }
.nd-why__icon {
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	margin: 0 auto 1.25rem;
	border-radius: 16px;
	background: rgba(var(--nd-color-accent-rgb), .12);
	color: var(--nd-color-accent);
}
.nd-why__icon svg { width: 28px; height: 28px; }
.nd-why__item p { color: var(--nd-color-muted); }

.nd-stats {
	background: var(--nd-color-primary);
	color: var(--nd-color-hero-text);
	padding-block: clamp(3rem, 6vw, 5rem);
}
.nd-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.nd-stat__value {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	color: var(--nd-color-accent);
	line-height: 1;
	margin-bottom: .5rem;
	letter-spacing: -.02em;
}
.nd-stat__label { color: rgba(255,255,255,.7); font-size: .95rem; letter-spacing: .03em; }

@media (max-width: 760px) {
	.nd-why__grid, .nd-stats__grid { grid-template-columns: 1fr 1fr; }
}

/* 9. Testimonials ---------------------------------------------------- */
.nd-testimonials { background: var(--nd-color-bg); }
.nd-testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.nd-testimonial {
	background: var(--nd-color-surface);
	border: 1px solid var(--nd-color-border);
	border-radius: 18px;
	padding: 2rem;
	margin: 0;
	position: relative;
}
.nd-testimonial__quote-icon {
	position: absolute;
	top: 1.5rem;
	inset-inline-end: 1.5rem;
	color: rgba(var(--nd-color-accent-rgb), .12);
	width: 56px;
	height: 56px;
}
.nd-testimonial__rating { display: flex; gap: .15rem; color: var(--nd-color-accent); margin-bottom: 1rem; }
.nd-testimonial__rating .nd-icon { width: 1em; height: 1em; }
.nd-testimonial__quote { font-style: normal; color: var(--nd-color-text); margin: 0 0 1.5rem; padding: 0; font-size: 1rem; line-height: 1.7; }
.nd-testimonial figcaption strong { display: block; color: var(--nd-color-text); font-weight: 600; }
.nd-testimonial figcaption span { color: var(--nd-color-muted); font-size: .875rem; }

@media (max-width: 960px) { .nd-testimonials__grid { grid-template-columns: 1fr; } }

/* 10. FAQ ------------------------------------------------------------ */
.nd-faq { background: var(--nd-color-surface); }
.nd-faq__list { max-width: 880px; margin-inline: auto; display: flex; flex-direction: column; gap: .75rem; }
.nd-faq__item {
	background: var(--nd-color-bg);
	border: 1px solid var(--nd-color-border);
	border-radius: 14px;
	padding: 1.5rem 1.75rem;
	transition: border-color .2s ease, background .2s ease;
}
.nd-faq__item[open] { border-color: var(--nd-color-accent); background: var(--nd-color-surface); }
.nd-faq__item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	font-weight: 600;
	font-size: 1.05rem;
	cursor: pointer;
	list-style: none;
	color: var(--nd-color-text);
}
.nd-faq__item summary::-webkit-details-marker { display: none; }
.nd-faq__icon {
	width: 24px;
	height: 24px;
	color: var(--nd-color-accent);
	transition: transform .25s ease;
	flex: none;
}
.nd-faq__item[open] .nd-faq__icon { transform: rotate(45deg); }
.nd-faq__answer { padding-top: 1rem; color: var(--nd-color-muted); }
.nd-faq__answer p { margin: 0; }

/* 11. Blog grid / single / page / archive / 404 / page-headers ------ */
.nd-blog { background: var(--nd-color-bg); }
.nd-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.nd-post-card {
	background: var(--nd-color-surface);
	border: 1px solid var(--nd-color-border);
	border-radius: 18px;
	overflow: hidden;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.nd-post-card:hover {
	transform: translateY(-4px);
	border-color: rgba(var(--nd-color-accent-rgb), .35);
	box-shadow: 0 30px 50px -28px rgba(15,23,42,.18);
}
.nd-post-card__media { display: block; aspect-ratio: 16/10; overflow: hidden; }
.nd-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.nd-post-card:hover .nd-post-card__media img { transform: scale(1.05); }
.nd-post-card__body { padding: 1.5rem; }
.nd-post-card__date { font-size: .8125rem; color: var(--nd-color-muted); text-transform: uppercase; letter-spacing: .1em; }
.nd-post-card__body h2, .nd-post-card__body h3 { margin: .5rem 0 .75rem; font-size: 1.2rem; }
.nd-post-card__body p { color: var(--nd-color-muted); }

@media (max-width: 880px) { .nd-blog__grid { grid-template-columns: 1fr; } }

/* Templates without a dark page-hero must clear the fixed header on EVERY
   screen. The `body:not(.home)` prefix raises specificity above the responsive
   `.nd-section { padding-block }` rules further down, so mobile can't override
   it and re-introduce the header overlap. */
body:not(.home) .nd-archive,
body:not(.home) .nd-page,
body:not(.home) .nd-404,
body:not(.home) .nd-single { padding-top: clamp(5.5rem, 4.5rem + 5vw, 7.5rem); }
.nd-page__inner, .nd-archive__inner { max-width: 760px; margin-inline: auto; padding-block: 0 clamp(3rem, 6vw, 5rem); }

/* Blog / CPT single article — readable measure (not full width) + styled
   media/date/cta. Header clearance is handled by the shared rule above. */
.nd-single { padding-bottom: clamp(3rem, 6vw, 5rem); }
.nd-single__inner { max-width: 760px; margin-inline: auto; }
.nd-single__head { margin-bottom: 1.75rem; }
.nd-single__date { display: inline-block; margin-top: .75rem; color: var(--nd-color-muted); font-size: .9rem; }
.nd-single__media { margin: 1.5rem 0 2rem; border-radius: 18px; overflow: hidden; }
.nd-single__media img { width: 100%; height: auto; display: block; }
.nd-single__cta { margin-top: 2.5rem; }
.nd-prose { color: var(--nd-color-text); font-size: 1.05rem; overflow-wrap: break-word; word-wrap: break-word; }
.nd-prose h2, .nd-prose h3, .nd-prose h4 { color: var(--nd-color-text); margin-top: 2em; }
.nd-prose a { color: var(--nd-color-accent); text-decoration: underline; text-underline-offset: 3px; }
/* Never let editor content (wide images, tables, embeds, code, long URLs)
   force horizontal page scroll on mobile. */
.nd-prose img, .nd-prose video, .nd-prose iframe, .nd-prose embed, .nd-prose object { max-width: 100%; height: auto; }
.nd-prose iframe { width: 100%; }
.nd-prose pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.nd-prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; }
.nd-prose figure, .nd-prose .wp-block-image { max-width: 100%; margin-inline: 0; }

.nd-pagination { margin-top: 3rem; }
.nd-pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.nd-pagination .page-numbers {
	min-width: 40px; height: 40px;
	display: inline-grid; place-items: center;
	border-radius: 10px;
	background: var(--nd-color-surface);
	border: 1px solid var(--nd-color-border);
	color: var(--nd-color-text);
	padding-inline: .5rem;
}
.nd-pagination .page-numbers.current { background: var(--nd-color-accent); color: #FFFFFF; border-color: var(--nd-color-accent); }

.nd-404 { padding-block: clamp(8rem, 14vw, 12rem) clamp(3rem,6vw,5rem); text-align: center; background: var(--nd-color-bg); }
.nd-404__inner { max-width: 560px; margin-inline: auto; }
.nd-404__actions { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }

.nd-search { display: flex; gap: .5rem; max-width: 420px; }
.nd-search input {
	flex: 1;
	padding: .85rem 1rem;
	border-radius: 999px;
	background: var(--nd-color-surface);
	border: 1px solid var(--nd-color-border);
	color: var(--nd-color-text);
	font: inherit;
}
.nd-search input::placeholder { color: var(--nd-color-muted); }

/* 12. Single service page ------------------------------------------- */
.nd-service-single { background: var(--nd-color-bg); }
.nd-service-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(2rem, 4vw, 4rem);
	padding-block: clamp(3rem, 6vw, 5rem);
}
.nd-service-single__main { background: var(--nd-color-surface); border: 1px solid var(--nd-color-border); border-radius: 18px; padding: clamp(1.5rem, 3vw, 2.5rem); }
.nd-service-single__main .nd-prose > *:first-child { margin-top: 0; }
.nd-service-single__intro { font-size: 1.125rem; color: var(--nd-color-muted); margin-bottom: 2rem; }

.nd-service-aside { display: flex; flex-direction: column; gap: 1.25rem; align-self: start; position: sticky; top: 100px; }
.nd-service-aside__card {
	background: var(--nd-color-surface);
	border: 1px solid var(--nd-color-border);
	border-radius: 18px;
	padding: 1.5rem;
}
.nd-service-aside__card--accent {
	background: var(--nd-color-primary);
	color: var(--nd-color-hero-text);
	border-color: transparent;
}
.nd-service-aside__card--accent h3 { color: var(--nd-color-hero-text); }
.nd-service-aside__card h3 { font-size: 1.1rem; margin: 0 0 1rem; }
.nd-service-aside__list { display: flex; flex-direction: column; gap: .65rem; }
.nd-service-aside__list a {
	display: flex; gap: .65rem; align-items: center;
	padding: .65rem .75rem;
	border-radius: 10px;
	color: var(--nd-color-text);
	font-weight: 500;
	font-size: .95rem;
}
.nd-service-aside__list a:hover { background: var(--nd-color-bg); color: var(--nd-color-accent); }
.nd-service-aside__list .nd-icon { color: var(--nd-color-accent); flex: none; }
.nd-service-aside__cta-actions { display: flex; flex-direction: column; gap: .75rem; }
.nd-service-aside__card--accent .nd-btn--ghost {
	--btn-color: #FFFFFF; --btn-border: rgba(255,255,255,.25);
	background: rgba(255,255,255,.06);
}

@media (max-width: 1024px) {
	.nd-service-single__layout { grid-template-columns: 1fr; }
	.nd-service-aside { position: static; }
}

/* 13. Page templates (about, contact, faq, services) ---------------- */
.nd-page-services .nd-services-categories { padding-block: clamp(3rem, 6vw, 5rem); }

.nd-page-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 4vw, 4rem);
	padding-block: clamp(3rem, 6vw, 5rem);
}
.nd-contact-card {
	background: var(--nd-color-surface);
	border: 1px solid var(--nd-color-border);
	border-radius: 18px;
	padding: 2rem;
}
.nd-contact-card h2 { margin: 0 0 1.5rem; font-size: 1.5rem; }
.nd-contact-card__row {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding-block: 1rem;
	border-bottom: 1px solid var(--nd-color-border);
}
.nd-contact-card__row:last-child { border-bottom: 0; }
.nd-contact-card__icon {
	width: 40px; height: 40px;
	display: grid; place-items: center;
	background: rgba(var(--nd-color-accent-rgb),.12);
	color: var(--nd-color-accent);
	border-radius: 10px;
	flex: none;
}
.nd-contact-card__label { font-size: .8rem; color: var(--nd-color-muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .25rem; }
.nd-contact-card__value { font-weight: 600; }
.nd-contact-card__value a { color: var(--nd-color-text); }
.nd-contact-card__value a:hover { color: var(--nd-color-accent); }
.nd-contact-card__map { margin-top: 1rem; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; border: 1px solid var(--nd-color-border); }
.nd-contact-card__map iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 880px) { .nd-page-contact__grid { grid-template-columns: 1fr; } }

/* About page extras */
.nd-page-about__values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.nd-page-about__value {
	background: var(--nd-color-surface);
	border: 1px solid var(--nd-color-border);
	border-radius: 16px;
	padding: 1.75rem;
}
.nd-page-about__value h3 { font-size: 1.15rem; margin: .75rem 0 .5rem; }
.nd-page-about__value p { color: var(--nd-color-muted); margin: 0; }
.nd-page-about__value .nd-icon { color: var(--nd-color-accent); width: 32px; height: 32px; }

@media (max-width: 880px) { .nd-page-about__values { grid-template-columns: 1fr; } }

/* 14. Footer (kept dark for visual closure) ------------------------- */
.nd-footer {
	background: var(--nd-color-primary);
	color: rgba(255,255,255,.85);
	padding-top: 6rem;
	padding-bottom: 2rem;
	position: relative;
}
.nd-footer .nd-h2 { color: #FFFFFF; }
.nd-footer__cta-card {
	background: linear-gradient(135deg, var(--nd-color-accent) 0%, color-mix(in srgb, var(--nd-color-accent) 70%, #FFFFFF) 100%);
	color: #FFFFFF;
	border-radius: 24px;
	padding: clamp(2.5rem, 5vw, 4rem);
	margin-bottom: 5rem;
	text-align: center;
}
.nd-footer__cta-card .nd-h2 { color: #FFFFFF; max-width: 18ch; margin-inline: auto; }
.nd-footer__cta-card .nd-eyebrow { color: rgba(255,255,255,.85); }
.nd-footer__cta-card .nd-eyebrow__dot { background: #FFFFFF; box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
.nd-footer__cta-actions { display: flex; gap: .85rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.nd-footer__cta-card .nd-btn--accent { --btn-bg: var(--nd-color-primary); --btn-color: #FFFFFF; --btn-border: var(--nd-color-primary); }
.nd-footer__cta-card .nd-btn--ghost  {
	--btn-color: #FFFFFF;
	--btn-border: rgba(255,255,255,.55);
	background: rgba(255,255,255,.12);
	backdrop-filter: blur(8px);
}
.nd-footer__cta-card .nd-btn--ghost:hover { background: rgba(255,255,255,.22); border-color: #FFFFFF; color: #FFFFFF; }

.nd-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 3rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.nd-footer__brand img { max-height: 48px; margin-bottom: 1.25rem; filter: brightness(0) invert(1); opacity: .9; }
.nd-footer__about { color: rgba(255,255,255,.7); max-width: 36ch; margin-bottom: 1.5rem; }
.nd-footer__heading {
	font-size: .85rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nd-color-accent);
	margin: 0 0 1.25rem;
	font-weight: 600;
}
.nd-footer__list { display: flex; flex-direction: column; gap: .85rem; }
.nd-footer__list li {
	display: flex;
	gap: .65rem;
	align-items: flex-start;
	color: rgba(255,255,255,.75);
	font-size: .9375rem;
}
.nd-footer__list .nd-icon { color: var(--nd-color-accent); margin-top: .2em; flex: none; }
.nd-footer__list--plain li { display: block; }
.nd-footer__list a { color: inherit; }
.nd-footer__list a:hover { color: var(--nd-color-accent); }

.nd-socials { display: flex; gap: .65rem; margin-top: 1.5rem; }
.nd-socials a {
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: 10px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.1);
	color: rgba(255,255,255,.7);
	transition: all .2s ease;
}
.nd-socials a:hover { background: var(--nd-color-accent); border-color: var(--nd-color-accent); color: #FFFFFF; }
.nd-socials .nd-icon { width: 18px; height: 18px; }

.nd-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 2rem;
	color: rgba(255,255,255,.55);
	font-size: .875rem;
	flex-wrap: wrap;
	gap: 1rem;
}
.nd-back-to-top { display: inline-flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.65); }
.nd-back-to-top:hover { color: var(--nd-color-accent); }
.nd-back-to-top .nd-icon { transform: rotate(-90deg); width: 1em; height: 1em; }

@media (max-width: 960px) { .nd-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .nd-footer__grid { grid-template-columns: 1fr; } }

/* 15. Floating WhatsApp button -------------------------------------- */
.nd-fab {
	position: fixed;
	bottom: clamp(1rem, 3vw, 1.5rem);
	inset-inline-end: clamp(1rem, 3vw, 1.5rem);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #FFFFFF;
	display: grid;
	place-items: center;
	box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .55);
	z-index: 90;
	transition: transform .2s ease;
}
.nd-fab:hover { transform: scale(1.08); color: #FFFFFF; }
.nd-fab .nd-icon { width: 28px; height: 28px; }

/* 16. Utilities + accessibility ------------------------------------- */
.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;
}
:focus-visible {
	outline: 2px solid var(--nd-color-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

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

.alignwide { max-width: 1100px; margin-inline: auto; }
.alignfull { width: 100vw; margin-inline: calc(50% - 50vw); }

/* 17. Service page — SEO & conversion blocks ------------------------- */
/* Quick-facts bar */
.nd-service-meta {
	list-style: none; margin: 0 0 2rem; padding: 1rem 1.25rem;
	display: flex; flex-wrap: wrap; gap: 1rem 2rem;
	background: var(--nd-color-surface, #fff);
	border: 1px solid var(--nd-color-border, #E2E8F0);
	border-radius: 14px;
}
.nd-service-meta li { display: flex; align-items: center; gap: .5rem; color: var(--nd-color-text, #0F172A); font-size: .95rem; }
.nd-service-meta .nd-icon { color: var(--nd-color-accent, #C5A059); flex: 0 0 auto; }
.nd-service-meta strong { font-weight: 700; }

/* Required-documents checklist */
.nd-docs { margin: 2.5rem 0; }
.nd-docs h2, .nd-how h2, .nd-faq--inline h2 { margin: 0 0 1.25rem; }
.nd-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.nd-check-list li { display: flex; align-items: flex-start; gap: .65rem; }
.nd-check-list .nd-icon {
	color: #fff; background: var(--nd-color-accent, #C5A059);
	width: 22px; height: 22px; border-radius: 50%; padding: 4px;
	flex: 0 0 auto; display: inline-flex;
}

/* How it works */
.nd-how { margin: 2.5rem 0; }
.nd-how__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: nd-step; }
.nd-how__step {
	position: relative; padding: 1.5rem; border-radius: 16px;
	background: var(--nd-color-surface, #fff);
	border: 1px solid var(--nd-color-border, #E2E8F0);
}
.nd-how__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: var(--nd-color-primary, #0F172A); color: #fff;
	font-weight: 800; margin-bottom: .75rem;
}
.nd-how__step h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.nd-how__step p { margin: 0; color: var(--nd-color-muted, #64748B); font-size: .92rem; line-height: 1.6; }

/* Trust chips in the sidebar CTA card */
.nd-trust-chips { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.nd-trust-chips li {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	flex: 1 1 0; min-width: 70px; padding: .5rem .35rem; border-radius: 12px;
	background: rgba(255,255,255,.10);
}
.nd-trust-chips strong { color: #fff; font-size: 1.05rem; line-height: 1.1; }
.nd-trust-chips span { color: rgba(255,255,255,.72); font-size: .68rem; margin-top: .2rem; }
.nd-service-aside__lead { margin: 0 0 1rem; color: rgba(255,255,255,.80); font-size: .95rem; }
.nd-service-aside__micro { margin: 1rem 0 0; color: rgba(255,255,255,.72); font-size: .8rem; display: flex; align-items: center; gap: .4rem; }
.nd-service-aside__micro .nd-icon { color: var(--nd-color-accent, #C5A059); }

/* WhatsApp lead form */
.nd-lead-form { display: grid; gap: .6rem; }
.nd-lead-form input {
	width: 100%; padding: .7rem .9rem; border-radius: 10px;
	border: 1px solid var(--nd-color-border, #E2E8F0);
	background: var(--nd-color-surface, #fff); color: var(--nd-color-text, #0F172A);
	font: inherit;
}
.nd-lead-form input:focus-visible { outline: 2px solid var(--nd-color-accent, #C5A059); outline-offset: 1px; }
.nd-lead-form__note { margin: .2rem 0 0; font-size: .78rem; color: var(--nd-color-muted, #64748B); }

/* Sticky mobile CTA bar */
.nd-sticky-cta { display: none; }
@media (max-width: 768px) {
	.nd-sticky-cta {
		position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
		display: flex; gap: .5rem; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
		background: var(--nd-color-surface, #fff);
		border-top: 1px solid var(--nd-color-border, #E2E8F0);
		box-shadow: 0 -8px 24px -12px rgba(15,23,42,.25);
	}
	.nd-sticky-cta .nd-btn { flex: 1; justify-content: center; }
	/* Give content room and avoid clashing with the global WhatsApp FAB. */
	body.single-nd_service { padding-bottom: 72px; }
	body.single-nd_service .nd-fab { display: none; }
	.nd-how__steps { grid-template-columns: 1fr; }
}

/* =====================================================================
   Mobile refinement (≤600px) — smaller type, tighter spacing,
   leaner layout. Below this breakpoint the design intentionally
   shrinks rather than just reflowing the desktop sizes.
   ===================================================================== */
@media (max-width: 600px) {
	body { font-size: 15px; line-height: 1.55; }
	.nd-rtl body { line-height: 1.75; }

	.nd-container { padding-inline: 1rem; }
	.nd-section { padding-block: 3rem; }
	.nd-section__head { margin-bottom: 1.75rem; }
	.nd-section__lede { font-size: 1rem; }

	.nd-display { font-size: 2.1rem; line-height: 1.18; }
	.nd-h1      { font-size: 1.75rem; }
	.nd-h2      { font-size: 1.4rem; }
	.nd-h3      { font-size: 1.05rem; }

	.nd-eyebrow { font-size: .7rem; letter-spacing: .12em; margin-bottom: .65rem; }

	/* Hero: fill the viewport so it lands as a full first-paint screen
	   on mobile. Use svh (small viewport height) so the URL bar doesn't
	   make the hero exceed the visible area. Vertically distribute content
	   so it spans the screen rather than clustering at the top. */
	.nd-hero {
		min-height: 100svh;
		padding-top: 5rem;
		padding-bottom: 2.5rem;
	}
	.nd-hero__inner {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		min-height: calc(100svh - 7.5rem);
		justify-content: space-between;
		padding-block: 1rem;
	}
	.nd-hero__title { margin-bottom: 0; }
	.nd-hero__sub { font-size: .95rem; margin-bottom: 0; max-width: 36ch; }
	.nd-hero__actions { gap: .6rem; margin-bottom: 0; flex-wrap: wrap; }
	.nd-hero__quick { gap: .65rem 1.25rem; font-size: .82rem; margin-top: auto; }
	.nd-hero__scroll { display: none; }
	.nd-btn { padding: .7rem 1.2rem; font-size: .875rem; }
	.nd-btn--lg { padding: .85rem 1.4rem; font-size: .9rem; }

	/* Page sub-hero: shrink padding so the title isn't lost mid-screen. */
	.nd-page-hero { padding-block: 6rem 2rem; }
	.nd-page-hero__sub { font-size: 1rem; }

	/* Service grid: stack into single column at this breakpoint. */
	.nd-services__grid { grid-template-columns: 1fr; }
	.nd-service-tile { padding: 1.5rem 1.25rem; min-height: 0; }
	.nd-service-tile__icon { width: 32px; height: 32px; }
	.nd-service-tile__title { font-size: 1.05rem; }
	.nd-service-tile__desc { font-size: .85rem; }

	/* Intro: stack copy above image, halve the radius accent. */
	.nd-intro__grid { gap: 2rem; }
	.nd-intro__media-tag { padding: .85rem 1rem; bottom: -1rem; inset-inline-start: -1rem; }
	.nd-intro__media-tag-num { font-size: 1.75rem; }
	.nd-intro__media-tag-label { font-size: .75rem; }

	.nd-why__icon { width: 52px; height: 52px; }
	.nd-stat__value { font-size: 2rem; }

	.nd-testimonial { padding: 1.5rem; }
	.nd-faq__item { padding: 1.1rem 1.25rem; }
	.nd-faq__item summary { font-size: .95rem; }

	.nd-footer { padding-top: 4rem; }
	.nd-footer__cta-card { padding: 2rem 1.25rem; margin-bottom: 3rem; }
	.nd-footer__grid { gap: 2rem; padding-bottom: 2rem; }
	.nd-footer__heading { font-size: .8rem; margin-bottom: 1rem; }
	.nd-footer__bottom { font-size: .8rem; }

	.nd-fab { width: 50px; height: 50px; }
	.nd-fab .nd-icon { width: 24px; height: 24px; }
}

@media (max-width: 380px) {
	.nd-display { font-size: 1.85rem; }
	.nd-h2      { font-size: 1.25rem; }
	.nd-hero__inner { gap: 1rem; }
	.nd-hero__quick { font-size: .78rem; }
}