/* ==========================================================================
   SMCPL — Design System & Component Styles
   Child theme of Kadence. Loaded after Kadence's generated CSS.

   TABLE OF CONTENTS
   1.  Design tokens (CSS custom properties)
   2.  Base typography & globals
   3.  Layout helpers (sections, inner widths)
   4.  Buttons
   5.  Header / navigation
   6.  Eyebrow + section headings
   7.  Hero
   8.  Trust strip
   9.  Card grid (services overview) + icons
   10. "Why SMCPL" feature points
   11. "How it works" steps
   12. Navy CTA band
   13. Services page
   14. About page (story, values)
   15. Contact page (form / book / details)
   16. Fluent Forms styling
   17. Footer
   18. Utilities & responsive
   ========================================================================== */

/* 1. DESIGN TOKENS ---------------------------------------------------------- */
:root {
	--smcpl-navy: #0d1b2a;
	--smcpl-navy-700: #14283d;
	--smcpl-accent: #2563eb;
	--smcpl-accent-600: #1d4ed8;
	--smcpl-accent-700: #1e40af;
	--smcpl-white: #ffffff;
	--smcpl-light: #f6f8fb;
	--smcpl-muted: #475569;
	--smcpl-text: #1e293b;
	--smcpl-border: #e2e8f0;

	--smcpl-radius: 12px;
	--smcpl-radius-sm: 8px;
	--smcpl-radius-pill: 999px;

	--smcpl-shadow-sm: 0 1px 2px rgba(13, 27, 42, .06), 0 1px 3px rgba(13, 27, 42, .05);
	--smcpl-shadow: 0 4px 6px -1px rgba(13, 27, 42, .07), 0 2px 4px -2px rgba(13, 27, 42, .06);
	--smcpl-shadow-lg: 0 20px 35px -12px rgba(13, 27, 42, .18);

	--smcpl-section-y: clamp(3.5rem, 7vw, 6.5rem);
	--smcpl-gap: clamp(1.25rem, 2.5vw, 2rem);

	/* Horizontal page gutter. Inherits Kadence's content edge padding so full-bleed
	   section content lines up exactly with the header nav and footer, and never
	   touches the screen edge on tablet/mobile. */
	--smcpl-edge: var(--global-content-edge-padding, 1.5rem);

	--smcpl-font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--smcpl-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* 2. BASE TYPOGRAPHY & GLOBALS --------------------------------------------- */
body {
	font-family: var(--smcpl-font-body);
	color: var(--smcpl-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
	font-family: var(--smcpl-font-head);
	color: var(--smcpl-navy);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

p { line-height: 1.65; }

a { color: var(--smcpl-accent); }
a:hover { color: var(--smcpl-accent-700); }

/* Visible, on-brand focus state for keyboard users (accessibility). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid rgba(37, 99, 235, .45);
	outline-offset: 2px;
	border-radius: var(--smcpl-radius-sm);
}

/* 3. LAYOUT HELPERS -------------------------------------------------------- */
.smcpl-section {
	padding-top: var(--smcpl-section-y);
	padding-bottom: var(--smcpl-section-y);
}
.smcpl-section--light { background-color: var(--smcpl-light); }
.smcpl-section--white { background-color: var(--smcpl-white); }

/* Full-bleed bands break out of Kadence's constrained, padded content area, so
   they arrive with no horizontal padding — restore the page gutter here so their
   inner content never runs into the screen edge on tablet/mobile. The inner
   blocks keep their own max-width + auto-centering, so desktop is unaffected.
   Selector specificity (0,3,0) intentionally beats Kadence's
   `.entry-content .alignfull { padding-left:0 }` (0,2,0). */
.entry-content .alignfull.smcpl-hero,
.entry-content .alignfull.smcpl-trust,
.entry-content .alignfull.smcpl-section {
	padding-left: var(--smcpl-edge);
	padding-right: var(--smcpl-edge);
}

/* Kadence wraps page content in #primary with a 2rem block margin. Remove it so
   the hero meets the header cleanly and the navy CTA meets the navy footer with
   no white sliver between them. (Every page opens with its own padded section.) */
#primary {
	margin-top: 0;
	margin-bottom: 0;
}

/* A narrower measure for intros / centered lead copy. */
.smcpl-measure { max-width: 760px; margin-left: auto; margin-right: auto; }
.smcpl-center { text-align: center; }

/* Lead paragraph under intros. */
.smcpl-lead {
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	color: var(--smcpl-muted);
	line-height: 1.6;
}

/* 4. BUTTONS --------------------------------------------------------------- */
.wp-block-button__link,
.smcpl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: var(--smcpl-font-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	padding: .95rem 1.6rem;
	border-radius: var(--smcpl-radius-sm);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
	border: 2px solid transparent;
	cursor: pointer;
}

/* Primary (accent-blue filled) — default for core buttons. */
.wp-block-button__link {
	background-color: var(--smcpl-accent);
	color: #fff;
	box-shadow: var(--smcpl-shadow);
}
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: var(--smcpl-accent-700);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--smcpl-shadow-lg);
}

/* Secondary / outline — add class "is-style-outline" or "smcpl-btn-secondary". */
.wp-block-button.is-style-outline .wp-block-button__link,
.smcpl-btn-secondary .wp-block-button__link {
	background-color: transparent;
	color: var(--smcpl-navy);
	border-color: var(--smcpl-border);
	box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.smcpl-btn-secondary .wp-block-button__link:hover {
	background-color: var(--smcpl-navy);
	color: #fff;
	border-color: var(--smcpl-navy);
	transform: translateY(-2px);
}

/* Buttons sitting on the navy CTA band. */
.smcpl-section--navy .wp-block-button__link {
	background-color: var(--smcpl-accent);
	color: #fff;
}
.smcpl-section--navy .wp-block-button__link:hover {
	background-color: #fff;
	color: var(--smcpl-navy);
}

/* Button group spacing. */
.wp-block-buttons { gap: .85rem; }

/* 5. HEADER / NAVIGATION --------------------------------------------------- */
/* Subtle hairline + clean white header. */
.site-header-row-container.site-header-focus-item,
.site-main-header-wrap {
	border-bottom: 1px solid var(--smcpl-border);
}

/* SVG header wordmark — keep aspect ratio and a comfortable height. */
.site-branding .custom-logo.smcpl-logo {
	width: auto;
	height: 42px;
	max-width: 220px;
}

/* Primary nav links. */
.header-navigation .menu-item > a {
	font-family: var(--smcpl-font-body);
	font-weight: 500;
	color: var(--smcpl-navy);
}
.header-navigation .menu-item > a:hover,
.header-navigation .current-menu-item > a {
	color: var(--smcpl-accent);
}

/* Kadence header "Book a Call" button (the anchor itself carries .header-button). */
.header-button-wrap a.header-button {
	background-color: var(--smcpl-accent);
	border-color: var(--smcpl-accent);
	color: #fff;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.1;
	border-radius: var(--smcpl-radius-sm);
	padding: .7rem 1.3rem;
	box-shadow: var(--smcpl-shadow);
	transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.header-button-wrap a.header-button:hover,
.header-button-wrap a.header-button:focus {
	background-color: var(--smcpl-accent-700);
	border-color: var(--smcpl-accent-700);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--smcpl-shadow-lg);
}

/* 6. EYEBROW + SECTION HEADINGS -------------------------------------------- */
.smcpl-eyebrow {
	display: inline-block;
	font-family: var(--smcpl-font-body);
	font-weight: 600;
	font-size: .8rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--smcpl-accent);
	margin-bottom: 1rem;
}

.smcpl-section-title {
	font-size: clamp(1.9rem, 3.4vw, 2.8rem);
	margin-bottom: .75rem;
}
.smcpl-section-subhead {
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	color: var(--smcpl-muted);
	max-width: 640px;
}
.smcpl-center .smcpl-section-subhead { margin-left: auto; margin-right: auto; }

/* 7. HERO ------------------------------------------------------------------ */
.smcpl-hero {
	position: relative;
	overflow: hidden;
	padding-top: clamp(3rem, 6vw, 5.5rem);
	padding-bottom: clamp(3rem, 6vw, 5.5rem);
	background:
		radial-gradient(60% 120% at 90% 8%, rgba(37, 99, 235, .10) 0%, rgba(37, 99, 235, 0) 55%),
		linear-gradient(180deg, #ffffff 0%, var(--smcpl-light) 100%);
}
/* Two-column hero: text left, image right. Text stays left-aligned because the
   column is a flow container (no constrained auto-margins). */
.smcpl-hero-cols { align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.smcpl-hero-text .smcpl-eyebrow { margin-bottom: 1.1rem; }
.smcpl-hero-text h1 {
	font-size: clamp(2.1rem, 4vw, 3.4rem);
	line-height: 1.08;
	margin: 0 0 1.2rem;
}
.smcpl-hero-text .smcpl-hero-sub {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	color: var(--smcpl-muted);
	max-width: 48ch;
	margin: 0 0 1.9rem;
}
/* Hero image — rounded & shadowed, with a soft accent block behind it. */
.smcpl-hero-media { position: relative; }
.smcpl-hero-media::before {
	content: "";
	position: absolute;
	right: -14px;
	bottom: -16px;
	width: 64%;
	height: 64%;
	background: linear-gradient(135deg, rgba(37, 99, 235, .20), rgba(37, 99, 235, .05));
	border-radius: 18px;
	z-index: 0;
}
.smcpl-hero-media .wp-block-image { position: relative; z-index: 1; margin: 0; }
.smcpl-hero-media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 20%;
	border-radius: 16px;
	box-shadow: var(--smcpl-shadow-lg);
	display: block;
}

/* 8. TRUST STRIP ----------------------------------------------------------- */
.smcpl-trust {
	border-top: 1px solid var(--smcpl-border);
	border-bottom: 1px solid var(--smcpl-border);
	background: var(--smcpl-white);
}
.smcpl-trust .smcpl-trust-list {
	list-style: none;
	margin: 0;
	padding: 1.25rem 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .75rem 2rem;
}
.smcpl-trust .smcpl-trust-list li {
	color: var(--smcpl-muted);
	font-size: .92rem;
	font-weight: 500;
	letter-spacing: .01em;
	display: flex;
	align-items: center;
	gap: 2rem;
}
.smcpl-trust .smcpl-trust-list li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--smcpl-accent);
	flex: none;
	margin-right: .65rem;
}

/* 9. CARD GRID (services overview) + ICONS --------------------------------- */
.smcpl-cards {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smcpl-gap);
	margin-top: 2.5rem;
}
.smcpl-cards .wp-block-column,
.smcpl-card {
	flex: 1 1 240px;
	background: var(--smcpl-white);
	border: 1px solid var(--smcpl-border);
	border-radius: var(--smcpl-radius);
	padding: 1.75rem;
	box-shadow: var(--smcpl-shadow-sm);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	display: flex;
	flex-direction: column;
}
.smcpl-cards .wp-block-column:hover,
.smcpl-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--smcpl-shadow-lg);
	border-color: rgba(37, 99, 235, .35);
}
.smcpl-card h3 { font-size: 1.25rem; margin: 0 0 .6rem; }
.smcpl-card p { color: var(--smcpl-muted); margin: 0 0 1.1rem; }
.smcpl-card .smcpl-card-link {
	margin-top: auto;
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}
.smcpl-card .smcpl-card-link::after {
	content: "\2192"; /* → */
	transition: transform .15s ease;
}
.smcpl-card:hover .smcpl-card-link::after { transform: translateX(4px); }

/* Icon chip — drawn with a ::before so cards stay pure, editable blocks.
   Add an icon by giving the card/feature/detail a .smcpl-i-* modifier class. */
.smcpl-card::before,
.smcpl-feature::before,
.smcpl-contact-detail::before {
	content: "";
	display: block;
	width: 52px;
	height: 52px;
	border-radius: var(--smcpl-radius-sm);
	background-color: rgba(37, 99, 235, .1);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 26px 26px;
	margin-bottom: 1.2rem;
	flex: none;
}
.smcpl-i-call::before    { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 13v-2a8 8 0 0 1 16 0v2"/><rect x="2.5" y="13" width="4" height="6" rx="1.5"/><rect x="17.5" y="13" width="4" height="6" rx="1.5"/><path d="M20 19a4 4 0 0 1-4 3h-2"/></svg>'); }
.smcpl-i-office::before  { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="6" rx="1.5"/><rect x="4" y="14" width="16" height="6" rx="1.5"/><path d="M8 7h.01M8 17h.01"/></svg>'); }
.smcpl-i-leads::before   { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5"/></svg>'); }
.smcpl-i-team::before    { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3"/><path d="M3 20a6 6 0 0 1 12 0"/><path d="M16 5.5a3 3 0 0 1 0 5.5"/><path d="M18 14a6 6 0 0 1 3 5"/></svg>'); }
.smcpl-i-clock::before   { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>'); }
.smcpl-i-people::before  { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="8" r="3.2"/><path d="M4 20a6 6 0 0 1 12 0"/><path d="m17 11 2 2 4-4"/></svg>'); }
.smcpl-i-shield::before  { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 5 6v5c0 4.5 3 8 7 10 4-2 7-5.5 7-10V6z"/><path d="m9 12 2 2 4-4"/></svg>'); }
.smcpl-i-chart::before   { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20V4"/><path d="M4 20h16"/><rect x="7" y="12" width="3" height="5"/><rect x="12" y="8" width="3" height="9"/><rect x="17" y="5" width="3" height="12"/></svg>'); }
.smcpl-i-mail::before    { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>'); }
.smcpl-i-pin::before     { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z"/><circle cx="12" cy="10" r="2.5"/></svg>'); }

/* 10. "WHY SMCPL" FEATURE POINTS ------------------------------------------- */
.smcpl-features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--smcpl-gap);
	margin-top: 2.5rem;
}
.smcpl-feature {
	background: var(--smcpl-white);
	border: 1px solid var(--smcpl-border);
	border-radius: var(--smcpl-radius);
	padding: 1.6rem 1.75rem;
}
.smcpl-feature h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.smcpl-feature p { color: var(--smcpl-muted); margin: 0; }

/* 11. "HOW IT WORKS" STEPS ------------------------------------------------- */
.smcpl-steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smcpl-gap);
	margin-top: 2.5rem;
	counter-reset: smcpl-step;
}
.smcpl-step {
	flex: 1 1 240px;
	position: relative;
	padding: 1.75rem;
	background: var(--smcpl-white);
	border: 1px solid var(--smcpl-border);
	border-radius: var(--smcpl-radius);
}
.smcpl-step::before {
	counter-increment: smcpl-step;
	content: "0" counter(smcpl-step);
	font-family: var(--smcpl-font-head);
	font-weight: 800;
	font-size: 1.6rem;
	color: var(--smcpl-accent);
	display: block;
	margin-bottom: .85rem;
	letter-spacing: -0.02em;
}
.smcpl-step h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.smcpl-step p { color: var(--smcpl-muted); margin: 0; }

/* 12. NAVY CTA BAND -------------------------------------------------------- */
.smcpl-section--navy {
	background:
		radial-gradient(70% 140% at 50% 0%, rgba(37, 99, 235, .25) 0%, rgba(37, 99, 235, 0) 55%),
		var(--smcpl-navy);
	color: rgba(255, 255, 255, .85);
	text-align: center;
}
.smcpl-section--navy h2 {
	color: #fff;
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
	margin: 0 0 .9rem;
}
.smcpl-section--navy p {
	color: rgba(255, 255, 255, .8);
	max-width: 60ch;
	margin: 0 auto 2rem;
	font-size: 1.1rem;
}

/* 13. SERVICES PAGE -------------------------------------------------------- */
.smcpl-service {
	background: var(--smcpl-white);
	border: 1px solid var(--smcpl-border);
	border-radius: var(--smcpl-radius);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	box-shadow: var(--smcpl-shadow-sm);
}
.smcpl-service + .smcpl-service { margin-top: var(--smcpl-gap); }
.smcpl-service h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 1rem; }
.smcpl-service p { color: var(--smcpl-muted); }
.smcpl-service .smcpl-included-label,
.smcpl-included-label {
	display: block;
	font-family: var(--smcpl-font-body);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--smcpl-navy);
	margin: 1.5rem 0 .75rem;
}
/* "What's included" checklist. */
.smcpl-included {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .5rem 1.5rem;
}
.smcpl-included li {
	position: relative;
	padding-left: 1.85rem;
	color: var(--smcpl-text);
	line-height: 1.5;
}
.smcpl-included li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .15em;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background-color: rgba(37, 99, 235, .12);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 5 5 9-10"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
}
/* Outcome callout (white so it stands out on either section background). */
.smcpl-outcome {
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--smcpl-border);
	border-left: 3px solid var(--smcpl-accent);
	background: #fff;
	border-radius: 0 var(--smcpl-radius-sm) var(--smcpl-radius-sm) 0;
	box-shadow: var(--smcpl-shadow-sm);
}

/* Alternating image + text service sections (Services page). */
.smcpl-service-split { align-items: stretch; gap: clamp(1.75rem, 4vw, 3.5rem); }
.smcpl-service-split .smcpl-svc-media { display: flex; }
.smcpl-service-split .smcpl-svc-media .wp-block-image { margin: 0; width: 100%; display: flex; }
.smcpl-service-split .smcpl-svc-media img {
	width: 100%;
	height: 100%;
	min-height: 340px;
	object-fit: cover;
	border-radius: var(--smcpl-radius);
	box-shadow: var(--smcpl-shadow-lg);
	display: block;
}
.smcpl-svc-text h2 { margin-top: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.smcpl-svc-text > p:first-of-type { color: var(--smcpl-muted); }
/* On desktop, flip every other row so the image alternates sides. */
@media (min-width: 782px) {
	.smcpl-service-split--rev { flex-direction: row-reverse; }
}
@media (max-width: 781px) {
	.smcpl-service-split .smcpl-svc-media img { min-height: 0; aspect-ratio: 4 / 3; }
}
.smcpl-outcome p { margin: 0; color: var(--smcpl-navy); font-weight: 500; }
.smcpl-outcome strong { color: var(--smcpl-accent); }

/* Industries chips. */
.smcpl-industries {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
}
.smcpl-industries li {
	background: var(--smcpl-white);
	border: 1px solid var(--smcpl-border);
	border-radius: var(--smcpl-radius-pill);
	padding: .6rem 1.2rem;
	font-weight: 500;
	color: var(--smcpl-navy);
	box-shadow: var(--smcpl-shadow-sm);
}

/* 14. ABOUT PAGE ----------------------------------------------------------- */
.smcpl-story p { color: var(--smcpl-muted); font-size: 1.05rem; }
.smcpl-values {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--smcpl-gap);
	margin-top: 2.5rem;
}
.smcpl-value {
	background: var(--smcpl-white);
	border: 1px solid var(--smcpl-border);
	border-top: 3px solid var(--smcpl-accent);
	border-radius: var(--smcpl-radius);
	padding: 1.6rem 1.75rem;
}
.smcpl-value h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.smcpl-value p { color: var(--smcpl-muted); margin: 0; }

/* Team placeholder. */
.smcpl-team-placeholder {
	margin-top: 2rem;
	padding: clamp(2rem, 5vw, 3.5rem);
	text-align: center;
	border: 2px dashed var(--smcpl-border);
	border-radius: var(--smcpl-radius);
	background: var(--smcpl-light);
	color: var(--smcpl-muted);
}

/* Reusable image + text split (e.g. About → "How we work"). */
.smcpl-split { align-items: center; gap: clamp(1.75rem, 5vw, 3.5rem); }
.smcpl-split-media .wp-block-image { margin: 0; }
.smcpl-split-media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--smcpl-radius);
	box-shadow: var(--smcpl-shadow-lg);
	display: block;
}
.smcpl-split-text .smcpl-eyebrow { margin-bottom: .75rem; }
.smcpl-split-text .smcpl-section-title { margin-top: 0; }
.smcpl-split-text p { color: var(--smcpl-muted); }

/* 15. CONTACT PAGE --------------------------------------------------------- */
.smcpl-contact-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-top: 2.5rem;
	align-items: start;
}
.smcpl-contact-panel {
	background: var(--smcpl-white);
	border: 1px solid var(--smcpl-border);
	border-radius: var(--smcpl-radius);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: var(--smcpl-shadow-sm);
}
.smcpl-contact-panel h2 { font-size: 1.4rem; margin: 0 0 .35rem; }
.smcpl-contact-panel > p { color: var(--smcpl-muted); }

/* Calendly placeholder box (shown only until the embed is added). */
.smcpl-calendly-placeholder {
	margin-top: 1.25rem;
	padding: 2.5rem 1.5rem;
	text-align: center;
	border: 2px dashed var(--smcpl-border);
	border-radius: var(--smcpl-radius-sm);
	background: var(--smcpl-light);
	color: var(--smcpl-muted);
	font-size: .95rem;
}

/* Calendly inline embed — fill the booking panel and stay responsive. The
   !important overrides Calendly's inline min-width:320px so it can shrink to
   the panel on small phones instead of forcing a horizontal scroll. */
.smcpl-contact-panel .calendly-inline-widget {
	margin-top: 1.25rem;
	width: 100%;
	min-width: 0 !important;
	border-radius: var(--smcpl-radius-sm);
	overflow: hidden;
}

/* Contact details row. */
.smcpl-contact-details {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smcpl-gap);
	margin-top: 2.5rem;
}
.smcpl-contact-detail {
	flex: 1 1 220px;
	background: var(--smcpl-white);
	border: 1px solid var(--smcpl-border);
	border-radius: var(--smcpl-radius);
	padding: 1.5rem;
}
.smcpl-contact-detail::before { width: 44px; height: 44px; margin-bottom: .9rem; background-size: 22px 22px; }
.smcpl-contact-detail h3 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--smcpl-muted); margin: 0 0 .4rem; font-family: var(--smcpl-font-body); }
.smcpl-contact-detail p { margin: 0; color: var(--smcpl-navy); font-weight: 500; }
.smcpl-contact-detail a { font-weight: 600; }

/* 16. FLUENT FORMS STYLING ------------------------------------------------- */
.fluentform .ff-el-input--label label,
.fluentform label {
	font-weight: 600;
	color: var(--smcpl-navy);
	font-size: .92rem;
}
.fluentform .ff-el-form-control {
	border: 1px solid var(--smcpl-border) !important;
	border-radius: var(--smcpl-radius-sm) !important;
	padding: .8rem .9rem !important;
	font-family: var(--smcpl-font-body) !important;
	font-size: 1rem !important;
	color: var(--smcpl-text) !important;
	background: #fff !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fluentform .ff-el-form-control:focus {
	border-color: var(--smcpl-accent) !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important;
	outline: none !important;
}
.fluentform .ff-btn-submit {
	background-color: var(--smcpl-accent) !important;
	border: none !important;
	color: #fff !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	padding: .95rem 1.8rem !important;
	border-radius: var(--smcpl-radius-sm) !important;
	box-shadow: var(--smcpl-shadow);
	transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
	cursor: pointer;
}
.fluentform .ff-btn-submit:hover {
	background-color: var(--smcpl-accent-700) !important;
	transform: translateY(-2px);
	box-shadow: var(--smcpl-shadow-lg);
}
.fluentform .ff-message-success,
.ff-message-success {
	background: var(--smcpl-light);
	border: 1px solid var(--smcpl-border);
	border-left: 3px solid var(--smcpl-accent);
	border-radius: var(--smcpl-radius-sm);
	padding: 1rem 1.25rem;
	color: var(--smcpl-navy);
}

/* 17. FOOTER --------------------------------------------------------------- */
.smcpl-footer {
	background: var(--smcpl-navy);
	color: rgba(255, 255, 255, .72);
}
.smcpl-footer__inner {
	max-width: var(--global-calc-content-width, 1290px);
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 4.5rem) var(--global-content-edge-padding, 1.5rem) 2.5rem;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
}
.smcpl-footer__logo img { max-width: 180px; height: auto; display: block; }
.smcpl-footer__tagline {
	font-family: var(--smcpl-font-head);
	font-weight: 700;
	color: #fff;
	font-size: 1.05rem;
	margin: 1.1rem 0 .6rem;
	letter-spacing: -0.01em;
}
.smcpl-footer__desc { font-size: .95rem; line-height: 1.6; max-width: 38ch; margin: 0; }
.smcpl-footer__heading {
	font-family: var(--smcpl-font-body);
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	margin: 0 0 1.1rem;
}
.smcpl-footer__links,
.smcpl-footer__contact,
.smcpl-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
}
.smcpl-footer__links li,
.smcpl-footer__contact li { margin-bottom: .6rem; }
.smcpl-footer a {
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	transition: color .15s ease;
}
.smcpl-footer a:hover { color: #fff; }
.smcpl-footer__social { display: flex; gap: 1rem; margin-top: 1.1rem; }
.smcpl-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.smcpl-footer__bar p {
	max-width: var(--global-calc-content-width, 1290px);
	margin: 0 auto;
	padding: 1.5rem var(--global-content-edge-padding, 1.5rem);
	font-size: .85rem;
	color: rgba(255, 255, 255, .55);
}

/* 18. UTILITIES & RESPONSIVE ----------------------------------------------- */
.smcpl-mt-0 { margin-top: 0 !important; }
.smcpl-mb-0 { margin-bottom: 0 !important; }

/* Neutralise core flow-layout vertical margins on grid/flex children so the
   CSS grids/flex rows align cleanly. */
.smcpl-features > *,
.smcpl-values > *,
.smcpl-contact-grid > *,
.smcpl-contact-details > * { margin-block: 0; }

@media (max-width: 900px) {
	.smcpl-contact-grid { grid-template-columns: 1fr; }
	.smcpl-footer__inner { grid-template-columns: 1fr 1fr; }
	.smcpl-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 781px) {
	.smcpl-features,
	.smcpl-values,
	.smcpl-included { grid-template-columns: 1fr; }
	.smcpl-trust .smcpl-trust-list { gap: .5rem 1.25rem; }
	/* Shorter, wider hero image when stacked on mobile. */
	.smcpl-hero-media img { aspect-ratio: 4 / 3; }
	.smcpl-hero-media::before { display: none; }
	.smcpl-hero-media { margin-top: 1.5rem; }
}

@media (max-width: 600px) {
	.smcpl-footer__inner { grid-template-columns: 1fr; }
}

/* Mobile header: keep logo + compact CTA + hamburger on one tidy row. */
@media (max-width: 768px) {
	.site-branding .custom-logo.smcpl-logo { height: 32px; max-width: 150px; }
	.site-mobile-header-wrap .header-button-wrap a.header-button {
		font-size: .8rem;
		padding: .5rem .8rem;
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
	.smcpl-card:hover,
	.wp-block-button__link:hover { transform: none; }
}