/*
 * Chandan Digital - Main Stylesheet
 * Uses the CSS variables defined in style.css (the design system).
 */

/* =========================================================
   1. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
/* The root element clamps horizontal scrolling for the whole viewport. It must stay
   `hidden` rather than `clip`: the root's overflow propagates to the viewport, and a
   viewport whose horizontal axis is clipped stops scrolling vertically as well.
   The body then gets `clip`, which contains a stray wide child without becoming a
   scroll container — so the sticky header still resolves against the viewport. */
html { scroll-behavior: smooth; overflow-x: hidden; }
@supports (overflow: clip) {
	body { overflow-x: clip; }
}
body {
	margin: 0;
	font-family: var(--cd-font-body);
	color: var(--cd-text-color);
	background: var(--cd-bg-color);
	font-size: 16px;
	line-height: 1.7;
	width: 100%;
	max-width: 100%;
	/* Long URLs, product codes and unspaced headings are the most common cause of a
	   page that scrolls sideways on a 320px screen. */
	overflow-wrap: break-word;
}
img, svg, video, canvas, iframe, embed, object { max-width: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cd-primary-color); text-decoration: none; transition: color var(--cd-transition); }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
	font-family: var(--cd-font-heading);
	color: var(--cd-heading-color);
	line-height: 1.25;
	margin: 0 0 var(--cd-space-sm);
	font-weight: 700;
}
p { margin: 0 0 var(--cd-space-sm); }
button { font-family: inherit; cursor: pointer; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.cd-skip-link {
	position: absolute;
	top: -50px;
	left: 10px;
	background: var(--cd-primary-color);
	color: #fff;
	padding: 10px 18px;
	border-radius: var(--cd-border-radius-sm);
	z-index: 10000;
	transition: top var(--cd-transition);
}
.cd-skip-link:focus { top: 10px; color: #fff; }

:focus-visible {
	outline: 3px solid var(--cd-accent-color);
	outline-offset: 2px;
}

.cd-container {
	width: 100%;
	max-width: var(--cd-container-width);
	margin-inline: auto;
	padding-inline: var(--cd-space-md);
}
/* Grid and flex children default to min-width:auto, which lets a wide child (a table,
   a long word, a pre block) stretch its track past the viewport. */
.cd-container > *,
.cd-services-grid > *,
.cd-process-timeline > *,
.cd-why-choose-grid > *,
.cd-team-grid > *,
.cd-stats-grid > *,
.cd-portfolio-grid > *,
.cd-blog-grid > *,
.cd-pricing-grid > *,
.cd-testimonials-track > *,
.cd-footer-grid > * { min-width: 0; }

/* =========================================================
   2. SECTION HEADING / UTILITIES
   ========================================================= */
.cd-section-heading { max-width: 720px; margin: 0 0 var(--cd-space-xl); }
.cd-align-center { margin-left: auto; margin-right: auto; text-align: center; }
.cd-eyebrow {
	display: inline-block;
	color: var(--cd-primary-color);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: var(--cd-space-xs);
}
.cd-section-title { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: var(--cd-space-xs); }
.cd-section-subtitle { color: var(--cd-text-color); font-size: 1.05rem; }
.cd-empty-state {
	padding: var(--cd-space-lg);
	text-align: center;
	background: var(--cd-bg-alt-color);
	border-radius: var(--cd-border-radius);
	color: var(--cd-text-color);
}
.cd-image-placeholder, .cd-logo-placeholder {
	background: linear-gradient(135deg, var(--cd-bg-alt-color), var(--cd-border-color));
	border-radius: var(--cd-border-radius);
	width: 100%;
	aspect-ratio: 4 / 3;
}
.cd-logo-placeholder { aspect-ratio: 3 / 1; border-radius: var(--cd-border-radius-sm); }

/* =========================================================
   3. BUTTONS
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--cd-border-radius-sm);
	font-weight: 600;
	font-size: 0.95rem;
	border: 2px solid transparent;
	transition: transform var(--cd-transition), background var(--cd-transition), color var(--cd-transition), box-shadow var(--cd-transition);
	white-space: nowrap;
}
.btn { max-width: 100%; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn-primary { background: var(--cd-primary-color); color: #fff; box-shadow: var(--cd-shadow-sm); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--cd-secondary-color); color: #fff; box-shadow: var(--cd-shadow-md); }
.btn-secondary { background: var(--cd-secondary-color); color: #fff; }
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--cd-primary-color); color: #fff; }
.btn-outline { background: transparent; color: var(--cd-heading-color); border-color: var(--cd-border-color); }
.btn-outline:hover, .btn-outline:focus-visible { border-color: var(--cd-primary-color); color: var(--cd-primary-color); }
.btn-link { padding: 0; color: var(--cd-primary-color); font-weight: 600; }
.btn-link:hover { color: var(--cd-secondary-color); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* =========================================================
   4. HEADER
   ========================================================= */
.cd-header {
	position: relative;
	background: var(--cd-bg-color);
	border-bottom: 1px solid var(--cd-border-color);
	z-index: 500;
}
.cd-header-sticky { position: sticky; top: 0; }
.cd-header.is-scrolled { box-shadow: var(--cd-shadow-sm); }
.cd-header-transparent:not(.is-scrolled) {
	position: absolute;
	top: 0; left: 0; right: 0;
	background: transparent;
	border-bottom-color: transparent;
}
.cd-header-transparent:not(.is-scrolled) .cd-menu > li > a,
.cd-header-transparent:not(.is-scrolled) .cd-site-title {
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.cd-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cd-space-md);
	height: var(--cd-header-height);
}
.cd-site-title { font-family: var(--cd-font-heading); font-weight: 800; font-size: 1.4rem; color: var(--cd-heading-color); }
.custom-logo { max-height: 46px; width: auto; }

.cd-primary-navigation { flex: 1; display: flex; justify-content: center; }
.cd-menu { display: flex; align-items: center; gap: var(--cd-space-lg); }
.cd-menu > li { position: relative; }
.cd-menu > li > a {
	color: var(--cd-heading-color);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 8px 0;
	position: relative;
}
.cd-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 2px;
	background: var(--cd-primary-color);
	transition: width var(--cd-transition);
}
.cd-menu > li > a:hover::after, .cd-menu > li.current-menu-item > a::after, .cd-menu > li.cd-active-section > a::after { width: 100%; }
.cd-menu ul {
	position: absolute;
	top: 100%; left: 0;
	background: #fff;
	min-width: 220px;
	border-radius: var(--cd-border-radius-sm);
	box-shadow: var(--cd-shadow-lg);
	padding: var(--cd-space-xs) 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all var(--cd-transition);
}
.cd-menu li:hover > ul, .cd-menu li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
/* Sub-menus on the last two top-level items open leftwards so a 220px panel cannot
   hang off the right edge of the viewport. */
.cd-menu > li:nth-last-child(-n+2) > ul { left: auto; right: 0; }
.cd-menu ul { max-width: min(280px, calc(100vw - 32px)); }
.cd-menu ul li a { display: block; padding: 10px 18px; color: var(--cd-text-color); font-weight: 500; }
.cd-menu ul li a:hover { color: var(--cd-primary-color); background: var(--cd-bg-alt-color); }

.cd-header-actions { display: flex; align-items: center; gap: var(--cd-space-sm); }
.cd-icon-btn {
	background: transparent;
	border: none;
	color: var(--cd-heading-color);
	font-size: 1.2rem;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.cd-icon-btn:hover { background: var(--cd-bg-alt-color); }

.cd-hamburger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: none; width: 44px; height: 44px; }
.cd-hamburger span { width: 24px; height: 2px; background: var(--cd-heading-color); border-radius: 2px; transition: transform var(--cd-transition), opacity var(--cd-transition); }
.cd-header-transparent:not(.is-scrolled) .cd-hamburger span { background: #fff; }

/* ---------------------------------------------------------------
   Transparent header over the hero.

   The header floats on the hero artwork until the page scrolls, at
   which point it becomes a normal white bar. Menu text, the site
   title and the hamburger already flip to white; the logo and the
   search button did not, so a dark logo disappeared against a dark
   hero. Both logo variants are rendered and swapped here, because
   `is-scrolled` is added by JavaScript and the correct one cannot
   be chosen server-side.
   --------------------------------------------------------------- */

/* The search button inherits dark ink by default. */
.cd-header-transparent:not(.is-scrolled) .cd-icon-btn { color: #fff; }
.cd-header-transparent:not(.is-scrolled) .cd-icon-btn:hover,
.cd-header-transparent:not(.is-scrolled) .cd-icon-btn:focus-visible { background: rgba(255, 255, 255, 0.14); }

/* A short gradient gives the floating header an edge to sit on, so it
   reads as a header rather than as text loose on the artwork. Applied
   as a background rather than a pseudo-element to avoid fighting the
   hero's own stacking context. */
.cd-header-transparent:not(.is-scrolled) {
	background: linear-gradient( 180deg, rgba(4, 12, 28, 0.55) 0%, rgba(4, 12, 28, 0.28) 55%, rgba(4, 12, 28, 0) 100% );
}

/* =========================================================
   5. MOBILE NAV / SEARCH OVERLAY
   ========================================================= */
.cd-mobile-nav {
	position: fixed;
	top: 0; right: 0;
	width: min(340px, 86%);
	height: 100vh;
	height: 100dvh;
	/* Kept out of the layout entirely while closed. A fixed panel parked off-screen
	   with a transform still makes some mobile browsers report a wider page, which
	   is what made the page drift sideways as you scrolled. */
	visibility: hidden;
	pointer-events: none;
	background: var(--cd-bg-color);
	z-index: 1100;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
	box-shadow: var(--cd-shadow-lg);
}
.cd-mobile-nav.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.cd-mobile-nav-inner { padding: var(--cd-space-lg) var(--cd-space-md); }
.cd-mobile-nav-close { background: none; border: none; font-size: 2rem; line-height: 1; color: var(--cd-heading-color); position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.cd-mobile-menu li { border-bottom: 1px solid var(--cd-border-color); position: relative; }
.cd-mobile-menu li a { display: block; padding: 14px 44px 14px 0; font-weight: 600; color: var(--cd-heading-color); overflow-wrap: break-word; }
/* Sub-menu items are indented, lighter and un-bordered so the hierarchy reads at a
   glance. mobile-menu.js injects the toggle button and flips the list on click. */
.cd-mobile-menu ul { padding-left: 14px; border-left: 2px solid var(--cd-border-color); margin-bottom: 10px; display: none; }
.cd-mobile-menu ul li { border-bottom: 0; }
.cd-mobile-menu ul li a { padding: 9px 0; font-weight: 500; color: var(--cd-text-color); }
.cd-submenu-toggle {
	position: absolute;
	top: 6px;
	right: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cd-bg-alt-color);
	border: 1px solid var(--cd-border-color);
	border-radius: var(--cd-border-radius-sm);
	color: var(--cd-heading-color);
	font-size: 1.1rem;
	line-height: 1;
}
.cd-submenu-toggle[aria-expanded="true"] { background: var(--cd-primary-color); border-color: var(--cd-primary-color); color: #fff; }
.cd-mobile-cta { margin-top: var(--cd-space-md); width: 100%; }

.cd-mobile-nav-overlay {
	position: fixed; inset: 0;
	background: rgba(11, 30, 61, 0.5);
	z-index: 1050;
	opacity: 0;
	transition: opacity var(--cd-transition);
}
.cd-mobile-nav-overlay.is-visible { opacity: 1; }

.cd-search-overlay {
	position: fixed; inset: 0;
	background: rgba(11, 18, 38, 0.96);
	z-index: 1200;
	display: none;
	align-items: center;
	justify-content: center;
}
.cd-search-overlay:not([hidden]) { display: flex; }
.cd-search-form { display: flex; width: min(600px, calc(100% - 32px)); gap: 10px; }
.cd-search-form input { min-width: 0; }
.cd-search-form input {
	flex: 1;
	padding: 16px 20px;
	border-radius: var(--cd-border-radius-sm);
	border: none;
	font-size: 1.1rem;
}
.cd-search-form button { background: var(--cd-primary-color); color: #fff; border: none; padding: 0 22px; border-radius: var(--cd-border-radius-sm); }
.cd-search-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: #fff; font-size: 2.2rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }

/* =========================================================
   6. HERO
   ========================================================= */
.cd-hero {
	padding: calc(var(--cd-space-2xl) + 20px) 0 var(--cd-space-2xl);
	background: linear-gradient(180deg, var(--cd-bg-alt-color), var(--cd-bg-color));
	background-size: cover;
	background-position: center;
	position: relative;
}
.cd-hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--cd-space-xl); align-items: center; }
.cd-hero-title { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.cd-hero-description { font-size: 1.1rem; max-width: 540px; }
.cd-hero-buttons { display: flex; gap: var(--cd-space-sm); flex-wrap: wrap; margin: var(--cd-space-md) 0; }
.cd-hero-trust { display: flex; gap: var(--cd-space-md); flex-wrap: wrap; font-size: 0.9rem; color: var(--cd-text-color); }
.cd-hero-trust .dashicons { color: var(--cd-success-color); }

.cd-hero-visual { position: relative; }
.cd-hero-image { border-radius: var(--cd-border-radius-lg); box-shadow: var(--cd-shadow-lg); }
.cd-hero-placeholder { aspect-ratio: 1/1; border-radius: var(--cd-border-radius-lg); background: linear-gradient(135deg, var(--cd-primary-color), var(--cd-secondary-color)); opacity: 0.12; }
.cd-hero-floating-card {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	padding: 14px 18px;
	border-radius: var(--cd-border-radius);
	box-shadow: var(--cd-shadow-md);
	font-size: 0.85rem;
}
.cd-hero-floating-card .dashicons { font-size: 1.6rem; width: 1.6rem; height: 1.6rem; color: var(--cd-primary-color); }
.cd-hero-floating-card strong { display: block; font-size: 1rem; color: var(--cd-heading-color); }
.cd-float-1 { top: 6%; left: -6%; }
.cd-float-2 { bottom: 8%; right: -4%; }

/* =========================================================
   7. TRUSTED BY
   ========================================================= */
.cd-trusted-by { padding: var(--cd-space-lg) 0; border-bottom: 1px solid var(--cd-border-color); }
.cd-trusted-by-label { text-align: center; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cd-text-color); margin-bottom: var(--cd-space-md); }
.cd-logo-strip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cd-space-lg) var(--cd-space-xl);
	flex-wrap: wrap;
}
.cd-logo-strip .cd-logo-placeholder { width: 120px; height: 40px; }
.cd-logo-strip-link { display: inline-flex; align-items: center; }

/* Real client logos: one normalised height, greyscale until hovered, so a row of
   mismatched brand colours still reads as a single tidy strip. */
.cd-logo-strip img,
.cd-client-logo {
	max-height: 40px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter var(--cd-transition), opacity var(--cd-transition);
}
.cd-logo-strip img:hover,
.cd-client-logo-link:hover .cd-client-logo { filter: grayscale(0); opacity: 1; }
.cd-client-logo-link { display: inline-flex; align-items: center; }

/* =========================================================
   8. ABOUT
   ========================================================= */
.cd-about { padding: var(--cd-space-2xl) 0; }
.cd-about-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--cd-space-xl); align-items: center; }
.cd-about-visual { position: relative; }
.cd-about-visual img { border-radius: var(--cd-border-radius-lg); }
.cd-about-badge {
	position: absolute;
	bottom: -20px; right: -20px;
	background: var(--cd-primary-color);
	color: #fff;
	padding: 18px 22px;
	border-radius: var(--cd-border-radius);
	text-align: center;
	box-shadow: var(--cd-shadow-md);
}
.cd-about-badge strong { display: block; font-size: 1.6rem; }
.cd-about-badge span { font-size: 0.8rem; }
.cd-about-points { margin: var(--cd-space-md) 0; }
.cd-about-points li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cd-about-points .dashicons { color: var(--cd-success-color); }

/* =========================================================
   9. SERVICES
   ========================================================= */
.cd-services { padding: var(--cd-space-2xl) 0; background: var(--cd-bg-alt-color); }
/* auto-fit + minmax(min(100%, …)) is what makes the grid genuinely responsive: it
   drops from 4 columns to 3, 2 and finally 1 on its own, and the inner min(100%, …)
   stops a card from ever being wider than the space it has on a 320px screen. */
.cd-services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: var(--cd-space-md);
}
.cd-service-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	background: #fff;
	padding: var(--cd-space-lg) var(--cd-space-md);
	border-radius: var(--cd-border-radius-lg);
	border: 1px solid var(--cd-border-color);
	transition: transform var(--cd-transition), box-shadow var(--cd-transition), border-color var(--cd-transition);
}
.cd-service-card:hover { transform: translateY(-6px); box-shadow: var(--cd-shadow-md); border-color: transparent; }
.cd-service-card > p { font-size: 0.95rem; }
.cd-service-title { font-size: 1.1rem; }
.cd-service-title a { color: var(--cd-heading-color); }
.cd-service-link { margin-top: auto; padding-top: var(--cd-space-xs); font-weight: 600; font-size: 0.9rem; }

/* =========================================================
   10. PROCESS
   ========================================================= */
.cd-process { padding: var(--cd-space-2xl) 0; }
.cd-process-timeline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: var(--cd-space-md);
	position: relative;
}
.cd-process-step {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: var(--cd-space-md);
	background: var(--cd-bg-alt-color);
	border: 1px solid transparent;
	border-radius: var(--cd-border-radius-lg);
	position: relative;
	transition: transform var(--cd-transition), box-shadow var(--cd-transition), background var(--cd-transition), border-color var(--cd-transition);
}
.cd-process-step:hover {
	transform: translateY(-6px);
	background: var(--cd-bg-color);
	border-color: var(--cd-border-color);
	box-shadow: var(--cd-shadow-md);
}
.cd-process-number {
	display: block;
	font-family: var(--cd-font-heading);
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--cd-primary-color);
	opacity: 0.3;
}
.cd-process-title { font-size: 1.08rem; margin: 0 0 6px; }
.cd-process-desc { margin: 0; font-size: 0.93rem; }
/* Legacy markup (a Dashicon inside a step) still gets sensible sizing. */
.cd-process-step .dashicons { font-size: 1.6rem; width: 1.6rem; height: 1.6rem; color: var(--cd-primary-color); margin: 6px 0; }

/* =========================================================
   11. STATS
   ========================================================= */
.cd-stats { padding: var(--cd-space-xl) 0; background: var(--cd-dark-bg-color); color: #fff; }
.cd-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cd-space-md); text-align: center; }
.cd-stat-number { font-family: var(--cd-font-heading); font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 800; color: #fff; }
.cd-stat-label { color: rgba(255,255,255,0.75); font-size: 0.95rem; }

/* =========================================================
   12. PORTFOLIO
   ========================================================= */
.cd-portfolio { padding: var(--cd-space-2xl) 0; }
.cd-portfolio-filters { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: var(--cd-space-lg); }
.cd-filter-btn {
	background: var(--cd-bg-alt-color);
	border: 1px solid var(--cd-border-color);
	padding: 10px 20px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--cd-text-color);
}
.cd-filter-btn.is-active, .cd-filter-btn:hover { background: var(--cd-primary-color); color: #fff; border-color: var(--cd-primary-color); }
.cd-portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cd-space-md); }
.cd-portfolio-card { border-radius: var(--cd-border-radius); overflow: hidden; border: 1px solid var(--cd-border-color); transition: box-shadow var(--cd-transition); }
.cd-portfolio-card:hover { box-shadow: var(--cd-shadow-md); }
.cd-portfolio-card.is-hidden { display: none; }
.cd-portfolio-thumb img { aspect-ratio: 4/3; object-fit: cover; }
.cd-portfolio-body { padding: var(--cd-space-md); }
.cd-portfolio-category { font-size: 0.75rem; font-weight: 700; color: var(--cd-primary-color); text-transform: uppercase; }
.cd-portfolio-result { color: var(--cd-success-color); font-weight: 600; font-size: 0.9rem; }

/* =========================================================
   13. WHY CHOOSE US
   ========================================================= */
.cd-why-choose { padding: var(--cd-space-2xl) 0; background: var(--cd-bg-alt-color); }
.cd-why-choose-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cd-space-md); }
.cd-why-choose-card { background: #fff; padding: var(--cd-space-lg) var(--cd-space-md); border-radius: var(--cd-border-radius); text-align: center; }
.cd-why-choose-card .dashicons { font-size: 2.2rem; width: 2.2rem; height: 2.2rem; color: var(--cd-primary-color); }

/* =========================================================
   14. TEAM
   ========================================================= */
.cd-team { padding: var(--cd-space-2xl) 0; }
.cd-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cd-space-md); }
.cd-team-card { text-align: center; }
.cd-team-photo img { border-radius: var(--cd-border-radius-lg); aspect-ratio: 4/4.5; object-fit: cover; }
.cd-team-designation { color: var(--cd-primary-color); font-size: 0.9rem; font-weight: 600; }
.cd-team-social { display: flex; justify-content: center; gap: 10px; margin-top: 6px; }
.cd-team-social a { color: var(--cd-text-color); }
.cd-team-social a:hover { color: var(--cd-primary-color); }

/* =========================================================
   15. TESTIMONIALS
   ========================================================= */
.cd-testimonials { padding: var(--cd-space-2xl) 0; background: var(--cd-bg-alt-color); }
.cd-testimonials-track {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--cd-space-md);
}
.cd-testimonial-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #fff;
	padding: var(--cd-space-lg);
	border-radius: var(--cd-border-radius-lg);
	border: 1px solid var(--cd-border-color);
	margin: 0;
}
.cd-testimonial-rating .dashicons { color: #b45309; font-size: 1rem; width: 1rem; height: 1rem; }
.cd-testimonial-author { margin-top: auto; }

/* ---------- Google reviews ---------- */
.cd-stars { display: inline-flex; gap: 2px; }

.cd-greviews-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--cd-space-sm) var(--cd-space-lg);
	max-width: 100%;
	margin: 0 auto var(--cd-space-lg);
	padding: var(--cd-space-md) var(--cd-space-lg);
	background: var(--cd-bg-color);
	border: 1px solid var(--cd-border-color);
	border-radius: var(--cd-border-radius-lg);
	box-shadow: var(--cd-shadow-sm);
}
.cd-greviews-score { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.cd-greviews-number {
	font-family: var(--cd-font-heading);
	font-size: 2.1rem;
	font-weight: 800;
	line-height: 1;
	color: var(--cd-heading-color);
}
.cd-greviews-count { font-size: 0.9rem; color: var(--cd-text-color); }
.cd-greviews-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: var(--cd-heading-color); }
.cd-greviews-cta { white-space: normal; }
.cd-google-g { flex: 0 0 auto; display: block; }

.cd-greview-card { gap: 12px; }
.cd-greview-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cd-greview-avatar {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}
.cd-greview-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--cd-primary-color) 12%, transparent);
	color: var(--cd-primary-color);
	font-family: var(--cd-font-heading);
	font-weight: 800;
	font-size: 1.2rem;
	text-transform: uppercase;
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.cd-greview-initial { background: var(--cd-bg-alt-color); }
}
.cd-greview-meta { display: flex; flex-direction: column; min-width: 0; }
.cd-greview-author { font-style: normal; font-weight: 700; color: var(--cd-heading-color); overflow-wrap: anywhere; }
.cd-greview-author a { color: inherit; }
.cd-greview-author a:hover { color: var(--cd-primary-color); }
.cd-greview-when { font-size: 0.82rem; color: var(--cd-text-color); }
.cd-greview-source { margin-left: auto; flex: 0 0 auto; }
.cd-greview-text { margin: 0; overflow-wrap: break-word; }
.cd-greview-link { margin-top: auto; padding-top: 4px; font-size: 0.85rem; font-weight: 600; }

/* Editor-only note, matching the author-box hint on single posts. */
.cd-admin-hint {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	margin: 14px auto 0;
	padding: 10px 12px;
	max-width: 60ch;
	border: 1px dashed var(--cd-border-color);
	border-radius: var(--cd-border-radius-sm);
	background: var(--cd-bg-color);
	font-size: 0.85rem;
	text-align: left;
}
.cd-admin-hint .cd-icon { color: var(--cd-accent-color); margin-top: 3px; flex: 0 0 auto; }
.cd-testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: var(--cd-space-md); }
.cd-testimonial-avatar { border-radius: 50%; width: 48px; height: 48px; object-fit: cover; }
.cd-testimonial-author cite { font-style: normal; font-weight: 700; color: var(--cd-heading-color); display: block; }
.cd-testimonial-author span { font-size: 0.85rem; color: var(--cd-text-color); }

/* =========================================================
   16. PRICING
   ========================================================= */
.cd-pricing { padding: var(--cd-space-2xl) 0; }
.cd-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cd-space-md); align-items: stretch; }
.cd-pricing-card { position: relative; border: 1px solid var(--cd-border-color); border-radius: var(--cd-border-radius); padding: var(--cd-space-lg); }
.cd-pricing-card.is-recommended { border-color: var(--cd-primary-color); box-shadow: var(--cd-shadow-md); transform: scale(1.03); }
.cd-pricing-badge { position: absolute; top: -12px; right: 20px; background: var(--cd-accent-color); color: #fff; padding: 4px 14px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.cd-pricing-price { font-size: 2.2rem; font-weight: 800; color: var(--cd-heading-color); }
.cd-pricing-price span { font-size: 0.9rem; font-weight: 500; color: var(--cd-text-color); }
.cd-pricing-features { margin: var(--cd-space-md) 0; }
.cd-pricing-features li { display: flex; gap: 8px; margin-bottom: 8px; font-size: 0.9rem; }
.cd-pricing-features .dashicons { color: var(--cd-success-color); }

/* =========================================================
   17. FAQ ACCORDION
   ========================================================= */
.cd-faq { padding: var(--cd-space-2xl) 0; background: var(--cd-bg-alt-color); }
.cd-accordion { max-width: 800px; margin: 0 auto; }
.cd-accordion-item { border-bottom: 1px solid var(--cd-border-color); }
.cd-accordion-trigger {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: none;
	border: none;
	padding: 18px 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--cd-heading-color);
	text-align: left;
}
.cd-accordion-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.cd-accordion-icon::before, .cd-accordion-icon::after {
	content: "";
	position: absolute;
	background: var(--cd-primary-color);
	transition: transform var(--cd-transition);
}
.cd-accordion-icon::before { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
.cd-accordion-icon::after { left: 50%; top: 0; height: 100%; width: 2px; margin-left: -1px; }
.cd-accordion-trigger[aria-expanded="true"] .cd-accordion-icon::after { transform: rotate(90deg); opacity: 0; }
.cd-accordion-panel { overflow: hidden; }
.cd-accordion-body { padding-bottom: 18px; color: var(--cd-text-color); }

/* =========================================================
   18. BLOG
   ========================================================= */
.cd-blog-preview { padding: var(--cd-space-2xl) 0; }
.cd-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cd-space-md); }
.cd-blog-card { border-radius: var(--cd-border-radius); overflow: hidden; border: 1px solid var(--cd-border-color); }
.cd-blog-thumb img { aspect-ratio: 16/10; object-fit: cover; }
.cd-blog-body { padding: var(--cd-space-md); }
.cd-blog-meta { display: flex; gap: 12px; font-size: 0.8rem; color: var(--cd-text-color); margin-bottom: 8px; align-items: center; }
.cd-blog-category { color: var(--cd-primary-color); font-weight: 700; text-transform: uppercase; }
.cd-blog-title a, .cd-blog-body h3 a { color: var(--cd-heading-color); }

/* =========================================================
   19. CTA BANNER
   ========================================================= */
.cd-cta-banner { padding: var(--cd-space-2xl) 0; background: linear-gradient(120deg, var(--cd-primary-color), var(--cd-secondary-color)); }
.cd-cta-banner-inner { text-align: center; color: #fff; }
.cd-cta-banner-inner h2 { color: #fff; }
.cd-cta-banner-inner p { color: rgba(255,255,255,0.85); max-width: 560px; margin-left: auto; margin-right: auto; }
.cd-cta-banner .btn-primary { background: #fff; color: var(--cd-primary-color); }
.cd-cta-banner .btn-primary:hover { background: var(--cd-accent-color); color: #fff; }

/* =========================================================
   20. CONTACT
   ========================================================= */
.cd-contact { padding: var(--cd-space-2xl) 0; }
.cd-contact-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--cd-space-xl); }

/* A map panel with nothing to show collapses to one column rather than
   leaving an empty half-section. */
.cd-contact-inner--single { grid-template-columns: minmax(0, 1fr); }
.cd-contact-details { margin: var(--cd-space-md) 0; }
.cd-contact-details li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.cd-contact-details .dashicons { color: var(--cd-primary-color); }
.cd-contact-map iframe { width: 100%; border-radius: var(--cd-border-radius); border: 0; min-height: 240px; }

/* The contact section's right-hand column: form, map, or form then map.
   Chosen in Customizer -> Contact Details -> "Right column shows". */
.cd-contact-panel { display: flex; flex-direction: column; gap: var(--cd-space-md); }
.cd-contact-map-panel { flex: 1 1 auto; display: flex; }
.cd-contact-map-panel iframe { min-height: 420px; height: 100%; display: block; }

/* A map on its own gets the full column height rather than sitting short. */
.cd-contact-panel--map .cd-contact-map-panel iframe { min-height: 480px; }

@media (max-width: 768px) {
	.cd-contact-map-panel iframe,
	.cd-contact-panel--map .cd-contact-map-panel iframe { min-height: 300px; }
}

/* Result of a built-in contact form submission. The handler redirects back
   with ?cd_contact=sent|error; without a visible message a successful send
   is indistinguishable from a failure. */
.cd-form-notice {
	padding: 14px 16px;
	border-radius: var(--cd-border-radius-sm);
	margin-bottom: var(--cd-space-md);
	font-size: 0.95rem;
	line-height: 1.5;
	border: 1px solid transparent;
}
.cd-form-notice-success {
	background: #ecfdf5;
	border-color: #a7f3d0;
	color: #065f46;
}
.cd-form-notice-error {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}
.cd-contact-form-wrap { background: var(--cd-bg-alt-color); border-radius: var(--cd-border-radius); padding: var(--cd-space-lg); }
.cd-form-row { margin-bottom: var(--cd-space-sm); }
.cd-form-row label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
.cd-form-row input, .cd-form-row textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--cd-border-color);
	border-radius: var(--cd-border-radius-sm);
	font-family: inherit;
	font-size: 0.95rem;
}
.cd-form-row input:focus, .cd-form-row textarea:focus { border-color: var(--cd-primary-color); outline: none; }
.cd-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; }

/* =========================================================
   21. FOOTER
   ========================================================= */
/* The footer opens with a layered wave and lifts over the section above it. Every
   part of the decoration is a block-level, 100%-wide child clipped by the footer
   itself, so none of it can widen the page on a phone. */
/* Declared on :root, not on .cd-footer. The rule below has to read this from the
   footer's PREVIOUS SIBLING, and a var() that is undefined on the element being
   styled makes the whole declaration invalid at computed-value time — which would
   reset that element's padding-bottom to 0 and pull the content it holds (the
   comment form, most visibly) straight under the wave. */
:root { --cd-footer-curve-h: clamp(48px, 6vw, 84px); }

.cd-footer {
	position: relative;
	z-index: 1;
	color: rgba(255, 255, 255, 0.75);
	overflow-x: hidden;
}
@supports (overflow: clip) {
	.cd-footer { overflow-x: clip; }
}

/* The wave lifts over the section above it so the curve is cut out of that
   section's own colour, whatever it happens to be. That is only safe once we can
   also reserve the space it will cover, so both rules are gated on :has() together
   — a browser without it simply gets the wave sitting below the section instead of
   over it, which still looks right, just flatter. The fallback inside var() is a
   second line of defence against the reset described above. */
@supports selector(:has(*)) {
	.cd-footer { margin-top: calc(var(--cd-footer-curve-h, 84px) * -1); }
	body > *:has(+ .cd-footer) {
		padding-bottom: calc(var(--cd-footer-curve-h, 84px) + var(--cd-space-lg, 40px));
	}
}

.cd-footer-curve {
	display: block;
	width: 100%;
	height: var(--cd-footer-curve-h);
	line-height: 0;
	pointer-events: none;
}
.cd-footer-wave { display: block; width: 100%; height: 100%; }
.cd-footer-wave-back { fill: var(--cd-primary-color); opacity: 0.16; }
.cd-footer-wave-mid { fill: var(--cd-secondary-color); opacity: 0.45; }
.cd-footer-wave-front { fill: var(--cd-secondary-color); }

.cd-footer-body {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-top: var(--cd-space-xl);
	background:
		radial-gradient(120% 90% at 12% -10%, rgba(22, 82, 240, 0.28), transparent 62%),
		linear-gradient(168deg, var(--cd-secondary-color) 0%, var(--cd-dark-bg-color) 68%);
}
/* Two very soft colour washes give the flat navy some depth without turning into
   decoration you actually notice. */
.cd-footer-glow {
	position: absolute;
	z-index: -1;
	display: block;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(10px);
}
.cd-footer-glow-1 {
	top: -14%;
	right: -6%;
	width: min(460px, 60%);
	aspect-ratio: 1;
	background: radial-gradient(circle, color-mix(in srgb, var(--cd-primary-color) 45%, transparent), transparent 68%);
	opacity: 0.5;
}
.cd-footer-glow-2 {
	bottom: -18%;
	left: -8%;
	width: min(380px, 52%);
	aspect-ratio: 1;
	background: radial-gradient(circle, color-mix(in srgb, var(--cd-accent-color) 40%, transparent), transparent 70%);
	opacity: 0.28;
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.cd-footer-glow-1 { background: radial-gradient(circle, rgba(22, 82, 240, 0.45), transparent 68%); }
	.cd-footer-glow-2 { background: radial-gradient(circle, rgba(255, 122, 26, 0.4), transparent 70%); }
}

.cd-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
	gap: var(--cd-space-lg);
	padding-bottom: var(--cd-space-xl);
}
.cd-footer-col { min-width: 0; }
.cd-footer h4 {
	position: relative;
	margin-bottom: var(--cd-space-md);
	padding-bottom: 12px;
	color: #fff;
	font-size: 1rem;
}
.cd-footer h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background: var(--cd-accent-color);
}
.cd-footer-logo { color: #fff; font-family: var(--cd-font-heading); font-size: 1.3rem; }
.cd-footer-about p { max-width: 42ch; margin-top: var(--cd-space-sm); }
.cd-footer-menu li, .cd-footer-services li { margin-bottom: 10px; }
.cd-footer-menu li a, .cd-footer-services li a, .cd-footer-about p { color: rgba(255,255,255,0.72); }
.cd-footer-menu li a, .cd-footer-services li a {
	display: inline-block;
	transition: color var(--cd-transition), transform var(--cd-transition);
}
.cd-footer-menu li a:hover, .cd-footer-services li a:hover { color: #fff; transform: translateX(3px); }
.cd-footer-contact li { display: flex; gap: 10px; margin-bottom: 12px; }
.cd-footer-contact .dashicons { color: var(--cd-accent-color); }
.cd-footer-contact a, .cd-footer-contact span { color: rgba(255,255,255,0.72); min-width: 0; }
.cd-footer-contact a:hover { color: #fff; }
.cd-footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--cd-space-md); }
.cd-footer-social a {
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.1);
	color: #fff;
	transition: background var(--cd-transition), transform var(--cd-transition);
}
.cd-footer-social a:hover { background: var(--cd-primary-color); transform: translateY(-3px); }
.cd-footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: var(--cd-space-md) 0; }
.cd-footer-legal a { color: rgba(255,255,255,0.72); }
.cd-footer-legal a:hover { color: #fff; }

/* =========================================================
   22. BACK TO TOP
   ========================================================= */
.cd-back-to-top {
	position: fixed;
	bottom: 24px; right: 24px;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: var(--cd-primary-color);
	color: #fff;
	border: none;
	box-shadow: var(--cd-shadow-md);
	z-index: 400;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all var(--cd-transition);
}
.cd-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* =========================================================
   23. BLOG / SINGLE / ARCHIVE PAGES
   ========================================================= */
.cd-content-area { padding: var(--cd-space-xl) var(--cd-space-md); display: grid; grid-template-columns: 1fr 320px; gap: var(--cd-space-xl); align-items: start; }
.cd-content-full { grid-column: 1 / -1; }
.cd-archive-title { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.cd-single-title { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.cd-single-meta { display: flex; gap: 14px; font-size: 0.9rem; color: var(--cd-text-color); margin-bottom: var(--cd-space-md); }
.cd-single-thumb img { border-radius: var(--cd-border-radius); margin-bottom: var(--cd-space-md); }
.cd-single-body { max-width: 780px; }
.cd-single-body img { border-radius: var(--cd-border-radius-sm); }
.cd-share-buttons { display: flex; align-items: center; gap: 10px; margin: var(--cd-space-lg) 0; }
.cd-share-buttons a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--cd-bg-alt-color); color: var(--cd-heading-color); }
.cd-related-posts { margin-top: var(--cd-space-xl); }
.cd-breadcrumbs { font-size: 0.85rem; color: var(--cd-text-color); margin-bottom: var(--cd-space-md); }
.cd-breadcrumbs ol { display: flex; gap: 6px; flex-wrap: wrap; }
.cd-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--cd-border-color); }

.cd-widget { margin-bottom: var(--cd-space-lg); background: var(--cd-bg-alt-color); padding: var(--cd-space-md); border-radius: var(--cd-border-radius); }
.cd-widget-title { font-size: 1rem; margin-bottom: var(--cd-space-sm); }

.cd-comments-area { margin-top: var(--cd-space-xl); max-width: 780px; }
.cd-comment-list { margin-top: var(--cd-space-md); }
.cd-comment-form input, .cd-comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--cd-border-color);
	border-radius: var(--cd-border-radius-sm);
	margin-bottom: var(--cd-space-sm);
	font-family: inherit;
}

.cd-404 { padding: var(--cd-space-2xl) 0; text-align: center; }
.cd-404-code { font-size: 6rem; font-weight: 800; color: var(--cd-primary-color); opacity: 0.25; font-family: var(--cd-font-heading); }
.cd-404-search { max-width: 420px; margin: var(--cd-space-md) auto 0; }
.cd-404-search form { display: flex; gap: 8px; }
.cd-404-search input { flex: 1; padding: 12px 14px; border: 1px solid var(--cd-border-color); border-radius: var(--cd-border-radius-sm); }

/* Service / Portfolio / Team single pages */
.cd-service-hero { text-align: center; padding: var(--cd-space-2xl) 0 var(--cd-space-lg); background: var(--cd-bg-alt-color); }
.cd-service-hero-icon { font-size: 2.4rem; width: 2.4rem; height: 2.4rem; color: var(--cd-primary-color); }
.cd-service-hero-desc { max-width: 640px; margin: 0 auto var(--cd-space-md); }
.cd-service-block { margin: var(--cd-space-xl) 0; }
.cd-check-list li { display: flex; gap: 10px; margin-bottom: 10px; }
.cd-check-list .dashicons { color: var(--cd-success-color); }
.cd-process-list { padding-left: 20px; list-style: decimal; }
.cd-process-list li { margin-bottom: 8px; }

.cd-portfolio-single-header { text-align: center; margin-bottom: var(--cd-space-lg); }
.cd-portfolio-single-thumb img { border-radius: var(--cd-border-radius-lg); margin-bottom: var(--cd-space-lg); }
.cd-portfolio-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cd-space-md); background: var(--cd-bg-alt-color); padding: var(--cd-space-md); border-radius: var(--cd-border-radius); margin-bottom: var(--cd-space-lg); }
.cd-portfolio-meta-grid strong { display: block; font-size: 0.8rem; text-transform: uppercase; color: var(--cd-text-color); }

.cd-team-single-grid { display: grid; grid-template-columns: 340px 1fr; gap: var(--cd-space-xl); align-items: start; }
.cd-team-single-photo img { border-radius: var(--cd-border-radius-lg); }

/* Animations */
[data-cd-animate] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-cd-animate="fade-left"] { transform: translateX(30px); }
[data-cd-animate="fade-right"] { transform: translateX(-30px); }
[data-cd-animate].cd-in-view { opacity: 1; transform: translate(0, 0); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[data-cd-animate] { opacity: 1; transform: none; transition: none; }
	.btn:hover, .btn:focus-visible { transform: none; }
}

/* =========================================================
   24. SVG ICON SYSTEM
   Inline SVGs replace the Dashicons font for theme UI icons.
   ========================================================= */
.cd-icon {
	display: inline-block;
	flex: 0 0 auto;
	vertical-align: middle;
	color: currentColor;
}

/* Icon "chips" used on cards and process steps. */
.cd-service-icon,
.cd-process-icon,
.cd-why-choose-icon,
.cd-benefit-icon,
.cd-shero-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--cd-border-radius);
	background: color-mix(in srgb, var(--cd-primary-color) 10%, transparent);
	color: var(--cd-primary-color);
	margin-bottom: var(--cd-space-sm);
	transition: background var(--cd-transition), color var(--cd-transition);
}
/* Fallback for browsers without color-mix(). */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.cd-service-icon,
	.cd-process-icon,
	.cd-why-choose-icon,
	.cd-benefit-icon,
	.cd-shero-icon { background: var(--cd-bg-alt-color); }
}
.cd-service-card:hover .cd-service-icon {
	background: var(--cd-primary-color);
	color: #fff;
}
.cd-process-icon { width: 56px; height: 56px; margin: 14px 0 var(--cd-space-sm); border-radius: 16px; }
.cd-process-step:hover .cd-process-icon { background: var(--cd-primary-color); color: #fff; }
.cd-why-choose-icon { width: 52px; height: 52px; }

.cd-star { display: inline-flex; color: var(--cd-border-color); }
.cd-star.is-filled { color: #b45309; }
.cd-star.is-filled .cd-icon { fill: currentColor; }

/* Inline icons inside lists keep their optical alignment with the first line. */
.cd-check-list .cd-icon,
.cd-about-points .cd-icon,
.cd-hero-trust .cd-icon,
.cd-pricing-features .cd-icon { color: var(--cd-success-color); margin-top: 3px; }
.cd-contact-details .cd-icon { color: var(--cd-primary-color); margin-top: 3px; }
.cd-footer-contact .cd-icon { color: var(--cd-accent-color); margin-top: 3px; }
.cd-hero-floating-card .cd-icon { color: var(--cd-primary-color); }

/* =========================================================
   25. LOGO / BRANDING
   ========================================================= */
.cd-header-branding,
.cd-footer-branding { display: inline-flex; align-items: center; gap: 10px; }
.cd-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: var(--cd-logo-width, 180px);
	max-height: 56px;
	object-fit: contain;
}
.cd-footer-branding .cd-logo { max-width: var(--cd-footer-logo-width, 170px); }
.cd-logo-mobile-only { display: none; }

/* Logo variants for the transparent header.

   Both variants are rendered and CSS picks one, because the header reverts to
   a solid white bar on scroll (`is-scrolled` is added by JavaScript) and the
   logo has to change back with it.

   These rules MUST stay after `.cd-logo { display: block; }` above. They carry
   the same specificity, so source order is what decides; placed any earlier,
   `.cd-logo` wins, neither variant is hidden, and two logos appear side by
   side once the header turns solid. */
.cd-logo-ondark { display: none; }
.cd-header-transparent:not(.is-scrolled) .cd-logo-onlight { display: none; }
.cd-header-transparent:not(.is-scrolled) .cd-logo-ondark { display: block; }
.cd-site-title-inline { font-size: 1.05rem; }

/* The core custom-logo markup is still supported for any third-party output. */
.custom-logo { max-width: var(--cd-logo-width, 180px); max-height: 56px; width: auto; height: auto; }

/* =========================================================
   26. FOOTER BOTTOM (centred copyright)
   ========================================================= */
.cd-footer-bottom-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 8px;
	font-size: 0.85rem;
}
.cd-footer-copyright { margin: 0; text-align: center; }
.cd-footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cd-footer-legal a { margin: 0; }

/* =========================================================
   27. RICH TEXT (editor content on services and articles)
   ========================================================= */
.cd-rich-text { color: var(--cd-text-color); }
.cd-rich-text > * + * { margin-top: 1.15em; }
.cd-rich-text h2,
.cd-rich-text h3,
.cd-rich-text h4,
.cd-rich-text h5,
.cd-rich-text h6 { margin-top: 1.8em; margin-bottom: 0.6em; }
.cd-rich-text h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.cd-rich-text h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
.cd-rich-text h4 { font-size: 1.1rem; }
.cd-rich-text h5 { font-size: 1rem; }
.cd-rich-text h6 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cd-text-color); }

/* Offsets in-page anchor jumps so a sticky header never covers the heading. */
.cd-rich-text :is(h2, h3, h4, h5, h6)[id] { scroll-margin-top: calc(var(--cd-header-height) + 24px); }

.cd-rich-text p { margin-bottom: 0; }
.cd-rich-text a { text-decoration: underline; text-underline-offset: 3px; }
.cd-rich-text a:hover { color: var(--cd-secondary-color); }
.cd-rich-text strong { color: var(--cd-heading-color); }

.cd-rich-text ul,
.cd-rich-text ol { padding-left: 1.35em; }
.cd-rich-text ul { list-style: disc; }
.cd-rich-text ol { list-style: decimal; }
.cd-rich-text li { margin-bottom: 0.5em; }
.cd-rich-text li::marker { color: var(--cd-primary-color); }
.cd-rich-text ul ul,
.cd-rich-text ol ol { margin-top: 0.5em; }

.cd-rich-text img,
.cd-rich-text figure img { border-radius: var(--cd-border-radius); }
.cd-rich-text figure { margin: 0; }
.cd-rich-text figcaption {
	margin-top: 10px;
	font-size: 0.85rem;
	color: var(--cd-text-color);
	text-align: center;
}

.cd-rich-text blockquote {
	margin: 0;
	padding: var(--cd-space-sm) var(--cd-space-md);
	border-left: 4px solid var(--cd-primary-color);
	background: var(--cd-bg-alt-color);
	border-radius: 0 var(--cd-border-radius) var(--cd-border-radius) 0;
	font-size: 1.05em;
	color: var(--cd-heading-color);
}
.cd-rich-text blockquote p:last-child { margin-bottom: 0; }
.cd-rich-text blockquote cite { display: block; margin-top: 10px; font-size: 0.85rem; font-style: normal; color: var(--cd-text-color); }

/* Tables scroll inside their own wrapper so the page itself never scrolls sideways. */
.cd-rich-text .wp-block-table,
.cd-rich-text figure.wp-block-table { overflow-x: auto; }
.cd-rich-text table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
	display: table;
}
.cd-rich-text th,
.cd-rich-text td { padding: 12px 14px; border: 1px solid var(--cd-border-color); text-align: left; }
.cd-rich-text thead th { background: var(--cd-bg-alt-color); color: var(--cd-heading-color); font-weight: 700; }
.cd-rich-text tbody tr:nth-child(even) { background: color-mix(in srgb, var(--cd-bg-alt-color) 55%, transparent); }

.cd-rich-text pre {
	overflow-x: auto;
	padding: var(--cd-space-sm);
	background: var(--cd-dark-bg-color);
	color: #e6edf3;
	border-radius: var(--cd-border-radius);
	font-size: 0.9rem;
	line-height: 1.6;
}
.cd-rich-text code {
	font-size: 0.9em;
	background: var(--cd-bg-alt-color);
	padding: 2px 6px;
	border-radius: 4px;
}
.cd-rich-text pre code { background: none; padding: 0; color: inherit; }

.cd-rich-text hr {
	border: 0;
	border-top: 1px solid var(--cd-border-color);
	margin: var(--cd-space-lg) 0;
}
.cd-rich-text .wp-block-button__link { border-radius: var(--cd-border-radius-sm); }

/* Highlighted callout: add the "cd-note" class to any block in the editor. */
.cd-rich-text .cd-note {
	padding: var(--cd-space-sm) var(--cd-space-md);
	background: color-mix(in srgb, var(--cd-primary-color) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--cd-primary-color) 22%, transparent);
	border-radius: var(--cd-border-radius);
}

/* Optional 3-column variant of the shared services grid. auto-fit collapses the
   empty fourth track, so three cards still land on one row at full width while the
   grid keeps reflowing to two and then one column on smaller screens. */
.cd-services-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* Footnote under an administrator-only diagnostic message. */
.cd-admin-note {
	margin: 10px 0 0;
	font-size: 0.8rem;
	color: var(--cd-text-color);
	opacity: 0.75;
}