/* =========================================================================
   Connectix Advisory — Design System
   A calm, editorial, high-performance stylesheet for coaching & advisory sites.
   Palette: deep advisory blue (#1F3A5F) + anthracite on warm paper (#F6F3EE),
   with a warm brass accent (#B8863B) reserved for links & fine highlights.
   Headlines use the self-hosted Fraunces serif; body/UI use Inter.
   ========================================================================= */

/* ---------------------------------------------------------------- Fonts */
/* Self-hosted variable fonts with graceful system fallback.
   Drop `inter-var.woff2` and `fraunces-var.woff2` into /assets/fonts/
   to activate (see README). Both are auto-preloaded when present. */
@font-face {
	font-family: "InterVar";
	src: url("../fonts/inter-var.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-var.woff2") format("woff2-variations"),
	     url("../fonts/fraunces-var.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	font-style: normal;
}

/* ------------------------------------------------------------ Variables */
:root {
	/* Brand — deep advisory blue (also the dark-section ground).
	   NOTE: color values below are DEFAULTS. They are overridden at runtime by
	   the Customizer (Appearance → Customize → Design) via an inline :root block
	   injected in functions.php (advisory_dynamic_css). */
	--brand: #1f3a5f;
	--brand-600: #17304f;
	--brand-700: #112540;
	--brand-rgb: 31, 58, 95; /* rgb triplet of --brand, for rgba() */

	/* Warm brass accent — links, hover, fine highlights (never a button fill) */
	--accent: #b8863b;
	--accent-600: #9d6f2c;

	/* Neutrals — warm, paper-like */
	--ink: #1b1f26;
	--ink-rgb: 27, 31, 38;   /* rgb triplet of --ink */
	--ink-hi: #1a1c24;       /* gradient highlight stop (slightly lighter ink) */
	--ink-lo: #101116;       /* gradient shadow stop (darker ink) */
	--ink-2: #23272f;
	--heading-color: #1b1f26; /* H1–H4 color */
	--slate: #5c6675;
	--slate-2: #868f9d;
	--line: #e4ded4;
	--mist: #f6f3ee;
	--white: #ffffff;

	/* Semantic */
	--bg: var(--white);
	--fg: #23272f;
	--muted: var(--slate);

	/* Typography — serif display, sans body */
	--font-serif: "Fraunces", Georgia, "Times New Roman", serif;
	--font-sans: "InterVar", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--h1: clamp(2.5rem, 5.2vw, 4.1rem);
	--h2: clamp(1.9rem, 3.4vw, 2.8rem);
	--h3: clamp(1.15rem, 1.6vw, 1.4rem);
	--lead: clamp(1.08rem, 1.5vw, 1.3rem);

	/* Layout */
	--container: 1200px;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--radius: 6px;
	--radius-sm: 4px;

	/* Effects — warm-tinted shadows */
	--shadow-sm: 0 1px 2px rgba(27, 31, 38, .06), 0 2px 8px rgba(27, 31, 38, .05);
	--shadow-md: 0 10px 30px rgba(27, 31, 38, .10);
	--shadow-lg: 0 30px 60px rgba(27, 31, 38, .16);
	--ease: cubic-bezier(.22, 1, .36, 1);
	--speed: .5s;

	--header-h: 76px;

	/* Primary nav link size (overridable via Customizer → Header). */
	--nav-fs: 15px;
}

/* --------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	font-family: var(--font-sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--fg);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
a { color: var(--brand-600); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--accent-600); }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3, h4 {
	font-family: var(--font-serif);
	line-height: 1.14;
	font-weight: 560;
	letter-spacing: -.01em;
	color: var(--heading-color);
	font-optical-sizing: auto;
}
/* Large display headings opt into Fraunces' high-contrast display cut. */
h1 { font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------------------------------------ Utilities */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: fixed; top: -100px; left: 12px; z-index: 999;
	background: var(--ink); color: #fff; padding: .7rem 1rem; border-radius: 8px;
	transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

.eyebrow {
	display: inline-flex; align-items: center; gap: .6rem;
	font-size: .74rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
	color: var(--slate); margin-bottom: 1.1rem;
}
.eyebrow--light { color: rgba(255,255,255,.6); }

.tick { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* --------------------------------------------------------------- Buttons */
.btn {
	--btn-bg: var(--brand);
	--btn-fg: #fff;
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .8rem 1.5rem; border-radius: 999px;
	font-weight: 600; font-size: .95rem; letter-spacing: .01em;
	background: var(--btn-bg); color: var(--btn-fg);
	border: 1px solid transparent; cursor: pointer;
	transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
	will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { --btn-bg: var(--brand); box-shadow: 0 8px 20px rgba(var(--brand-rgb),.28); }
.btn--primary:hover { --btn-bg: var(--brand-600); color: #fff; box-shadow: 0 12px 26px rgba(var(--brand-rgb),.34); }
.btn--lg { padding: 1rem 1.9rem; font-size: 1.02rem; }
.btn--ghost {
	background: transparent; color: #fff; border-color: rgba(255,255,255,.35);
}
.btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.btn--ghost.btn--dark { color: var(--ink); border-color: var(--line); }
.btn--ghost.btn--dark:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------------------------------------------------------------- Header */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,.72);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.site-header__inner {
	display: flex; align-items: center; gap: 1.5rem;
	min-height: var(--header-h);
}
.site-branding { display: flex; align-items: center; }
.site-branding__logo { display: inline-flex; align-items: center; }
.site-branding .custom-logo { max-height: 52px; width: auto; }
.site-title { font-weight: 800; font-size: 1.35rem; color: var(--ink); letter-spacing: -.03em; }

/* ---- Header style variants ---- */
/* By default only the standard logo shows; the light logo is hidden. */
.site-branding__logo--light { display: none; }

/* DARK header: ink frosted bar, white nav + title. */
.site-header--dark { background: rgba(10,10,11,.8); }
.site-header--dark.is-scrolled { border-bottom-color: rgba(255,255,255,.1); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.site-header--dark .site-title { color: #fff; }
.site-header--dark .nav-menu a { color: rgba(255,255,255,.85); }
.site-header--dark .nav-menu a:hover,
.site-header--dark .nav-menu .current-menu-item > a,
.site-header--dark .nav-menu .current_page_item > a { color: #fff; background: rgba(255,255,255,.1); }
.site-header--dark .nav-toggle__bar { background: #fff; }

/* TRANSPARENT header: floats over the hero, turns frosted-white on scroll. */
.site-header--transparent { position: absolute; top: 0; left: 0; right: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header--transparent .site-title { color: #fff; }
.site-header--transparent .nav-menu a { color: rgba(255,255,255,.85); }
.site-header--transparent .nav-menu a:hover,
.site-header--transparent .nav-menu .current-menu-item > a,
.site-header--transparent .nav-menu .current_page_item > a { color: #fff; background: rgba(255,255,255,.12); }
.site-header--transparent .nav-toggle__bar { background: #fff; }
/* Once scrolled, snap to a solid frosted white bar with dark text. */
.site-header--transparent.is-scrolled {
	position: fixed;
	background: rgba(255,255,255,.72);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom-color: var(--line); box-shadow: var(--shadow-sm);
	animation: header-drop .35s var(--ease);
}
.site-header--transparent.is-scrolled .site-title { color: var(--ink); }
.site-header--transparent.is-scrolled .nav-menu a { color: var(--fg); }
.site-header--transparent.is-scrolled .nav-toggle__bar { background: var(--ink); }
@keyframes header-drop { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ---- Logo swapping for dark / transparent headers ---- */
/* When a dedicated light logo exists, show it while the bar is dark/transparent
   and swap back to the standard logo once the bar turns white on scroll. */
.site-header--dark.site-header--has-light-logo .site-branding__logo--standard,
.site-header--transparent.site-header--has-light-logo:not(.is-scrolled) .site-branding__logo--standard { display: none; }
.site-header--dark.site-header--has-light-logo .site-branding__logo--light,
.site-header--transparent.site-header--has-light-logo:not(.is-scrolled) .site-branding__logo--light { display: inline-flex; }

/* Fallback when NO light logo is provided: force the standard logo white
   while the bar is dark/transparent (loses brand red, but stays visible). */
.site-header--dark:not(.site-header--has-light-logo) .site-branding__logo--standard .custom-logo,
.site-header--transparent:not(.site-header--has-light-logo):not(.is-scrolled) .site-branding__logo--standard .custom-logo { filter: brightness(0) invert(1); }


.main-navigation { margin-left: auto; }
.nav-menu { display: flex; align-items: center; gap: .35rem; }
.nav-menu li { position: relative; }
.nav-menu a {
	display: block; padding: .55rem .85rem; border-radius: 8px;
	color: var(--fg); font-weight: 500; font-size: var(--nav-fs);
	transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a { color: var(--brand-600); background: var(--mist); }
.nav-menu .menu-item-has-children > a::after {
	content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .45em;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-1px); vertical-align: middle; opacity: .6;
}
/* Sub-menus */
.nav-menu ul {
	position: absolute; top: calc(100% + 10px); left: 0; min-width: 240px;
	background: #fff; border: 1px solid var(--line); border-radius: 12px;
	box-shadow: var(--shadow-md); padding: .5rem;
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav-menu ul ul { top: -.5rem; left: 100%; }
.nav-menu li:hover > ul,
.nav-menu li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu ul a { padding: .6rem .8rem; }

.site-header__cta { flex-shrink: 0; }

/* Nav toggle (mobile) */
.nav-toggle {
	display: none; width: 44px; height: 44px; margin-left: auto;
	background: transparent; border: 0; cursor: pointer;
	flex-direction: column; justify-content: center; gap: 5px;
}
.nav-toggle__bar { width: 24px; height: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------ Hero */
.hero {
	position: relative; overflow: hidden;
	background: radial-gradient(120% 120% at 80% 0%, var(--ink-hi) 0%, var(--ink) 55%);
	color: #fff;
	padding: clamp(5rem, 12vh, 9rem) 0 clamp(4rem, 9vh, 7rem);
	min-height: min(88vh, 820px);
	display: flex; align-items: center;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.hero__overlay {
	position: absolute; inset: 0;
	background:
		radial-gradient(60% 50% at 15% 90%, rgba(var(--brand-rgb),.22), transparent 70%),
		linear-gradient(180deg, transparent 55%, rgba(10,10,11,.55));
	pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; max-width: 900px; }
.hero__eyebrow {
	display: inline-flex; align-items: center; gap: .6rem;
	font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: rgba(255,255,255,.85);
	padding: .4rem .9rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
	background: rgba(255,255,255,.04); margin-bottom: 1.6rem;
}
.hero__title {
	color: #fff; font-size: var(--h1); font-weight: 800; letter-spacing: -.03em;
	max-width: 16ch; margin-bottom: 1.4rem;
}
.hero__text { color: rgba(255,255,255,.78); font-size: var(--lead); max-width: 58ch; margin-bottom: 2.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero__scroll {
	position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2;
	width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.35); border-radius: 999px;
}
.hero__scroll span {
	position: absolute; top: 8px; left: 50%; width: 3px; height: 8px; border-radius: 2px;
	background: #fff; transform: translateX(-50%); animation: scroll-dot 1.8s var(--ease) infinite;
}
@keyframes scroll-dot { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0;transform:translate(-50%,14px)} 100%{opacity:0} }

/* --- Light hero variant (bright, corporate) --- */
.hero--light {
	background: linear-gradient(180deg, #ffffff 0%, var(--mist) 100%);
	color: var(--ink);
}
.hero--light .hero__canvas { opacity: .6; }
.hero--light .hero__overlay {
	background:
		radial-gradient(55% 45% at 12% 92%, rgba(var(--brand-rgb),.10), transparent 70%),
		linear-gradient(180deg, transparent 60%, rgba(10,10,11,.04));
}
.hero--light .hero__eyebrow {
	color: var(--brand-600);
	border-color: var(--line);
	background: #fff;
}
.hero--light .hero__title { color: var(--ink); }
.hero--light .hero__text { color: var(--slate); }
/* Ghost button needs dark outline on a light background. */
.hero--light .btn--ghost { color: var(--ink); border-color: var(--line); }
.hero--light .btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.hero--light .hero__scroll { border-color: rgba(10,10,11,.25); }
.hero--light .hero__scroll span { background: var(--ink); }

/* --- Photo hero variant (full-bleed image, editorial) --- */
.hero--image { color: #fff; background: var(--ink); }
.hero--image .hero__media { position: absolute; inset: 0; z-index: 0; }
.hero--image .hero__img {
	width: 100%; height: 100%; object-fit: cover; object-position: center;
}
/* Legibility gradient: darker at the bottom-left where the copy sits. */
.hero--image .hero__overlay {
	background:
		linear-gradient(90deg, rgba(17,37,64,.72) 0%, rgba(17,37,64,.30) 45%, rgba(17,37,64,.05) 75%),
		linear-gradient(180deg, rgba(17,37,64,.10) 0%, transparent 30%, rgba(17,37,64,.55) 100%);
}
.hero--image .hero__eyebrow { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.06); }
.hero--image .hero__title { color: #fff; }
.hero--image .hero__text { color: rgba(255,255,255,.86); }
.hero--image .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.hero--image .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero--image .hero__scroll { border-color: rgba(255,255,255,.4); }
.hero--image .hero__scroll span { background: #fff; }


/* ------------------------------------------------------------- Trust bar */
.trust { border-bottom: 1px solid var(--line); background: var(--white); }
.trust__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-block: 1.4rem; }
.trust__label { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-2); }
.trust__list { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; margin-left: auto; }
.trust__item { font-weight: 600; color: var(--slate); font-size: .95rem; position: relative; }
.trust__item::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .6rem; border-radius: 50%; background: var(--brand); vertical-align: middle; }

/* -------------------------------------------------------------- Sections */
.section { padding: clamp(4rem, 9vh, 7.5rem) 0; }
.section--dark { background: var(--ink); color: #fff; }
.section--dark .section__title { color: #fff; }
.section__head { max-width: 720px; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.section__title { font-size: var(--h2); }

/* Grid helpers */
.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- Solutions */
.card--solution {
	position: relative; padding: 2rem 1.6rem 1.8rem;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
	overflow: hidden;
}
.card--solution::before {
	content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--brand);
	transition: width .4s var(--ease);
}
.card--solution:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card--solution:hover::before { width: 100%; }
.card--solution__num {
	position: absolute; top: 1.1rem; right: 1.3rem;
	font-size: 1rem; font-weight: 700; color: var(--line); letter-spacing: -.02em;
}
.card--solution__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; border-radius: 14px; margin-bottom: 1.2rem;
	background: var(--mist); color: var(--brand);
	transition: background .35s var(--ease), color .35s var(--ease);
}
.card--solution:hover .card--solution__icon { background: var(--brand); color: #fff; }
.card--solution__title { font-size: var(--h3); margin-bottom: .6rem; }
.card--solution__text { color: var(--muted); font-size: .98rem; }

/* -------------------------------------------------------------- Platform */
.platform__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .platform__grid { grid-template-columns: 1fr; } }
.platform__text { color: rgba(255,255,255,.75); font-size: var(--lead); margin: 1rem 0 1.8rem; max-width: 52ch; }
.platform__media { position: relative; }
/* Scale the chosen image to fill the media column. SVGs often report no (or a
   tiny) intrinsic size, so without an explicit width they render small — force
   full-width and let height follow so both raster and vector art fill the band
   like the placeholder does. */
.platform__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
}
/* If the art is a vector with a defined aspect ratio it will size naturally;
   for ones that don't, keep a pleasant band shape close to the placeholder. */
.platform__media img.platform__img[src$=".svg"] {
	aspect-ratio: 4 / 3;
	object-fit: contain;
}
.platform__placeholder {

	aspect-ratio: 4 / 3; border-radius: var(--radius);
	background: linear-gradient(160deg, var(--ink-hi), var(--ink-lo));
	border: 1px solid rgba(255,255,255,.08); padding: 1rem;
	display: grid; place-items: center;
}
/* --- Light platform variant --- */
.platform--light { background: var(--mist); border-block: 1px solid var(--line); }
.platform--light .platform__text { color: var(--slate); }
.platform--light .platform__placeholder {
	background: linear-gradient(160deg, #ffffff, var(--mist));
	border-color: var(--line);
}
/* Recolor the SVG placeholder strokes for a light background. */
.platform--light .platform__placeholder rect,
.platform--light .platform__placeholder circle:not([stroke="var(--brand)"]),
.platform--light .platform__placeholder path { stroke: rgba(10,10,11,.18) !important; }

/* --- Alternating layout: flip image to the left on odd showcases --- */
.platform--flip .platform__grid { grid-template-columns: .95fr 1.05fr; }
.platform--flip .platform__content { order: 2; }
.platform--flip .platform__media { order: 1; }
@media (max-width: 900px) {
	/* Stack cleanly on mobile: text first regardless of flip. */
	.platform--flip .platform__grid { grid-template-columns: 1fr; }
	.platform--flip .platform__content { order: 1; }
	.platform--flip .platform__media { order: 2; }
}

/* --- Rhythm between consecutive showcase bands --- */
/* Collapse doubled vertical padding where two bands of the same tone meet. */
.platform + .platform { padding-top: 0; }
.platform--dark + .platform--dark,
.platform--light + .platform--light { border-top: 1px solid var(--line); }

/* ---------------------------------------- Platforms — CARDS layout */
/* A tidy grid of premium product cards. Logo-friendly media area + hover
   lift with a brand top-accent, echoing the Solutions cards. */
.platforms-cards__grid { align-items: stretch; }
.platforms-cards__grid--2 { grid-template-columns: repeat(2, 1fr); }
.platforms-cards__grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .platforms-cards__grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
	.platforms-cards__grid--2,
	.platforms-cards__grid--3 { grid-template-columns: 1fr; }
}
/* In the Spotlight layout the card row follows a band; tighten the gap. */
.platform + .platforms-cards { padding-top: 0; }

.card--platform {
	position: relative; display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden; color: inherit;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card--platform::before {
	content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--brand);
	transition: width .4s var(--ease); z-index: 2;
}
a.card--platform:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
a.card--platform:hover::before { width: 100%; }

/* Media / logo area — object-fit: contain so product logos sit nicely. */
.card--platform__media {
	position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center;
	background: radial-gradient(120% 120% at 80% 0%, var(--ink-hi) 0%, var(--ink) 60%);
	padding: .5rem; overflow: hidden;
}
.card--platform__media::after {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(60% 60% at 20% 100%, rgba(var(--brand-rgb),.30), transparent 70%);
}
.card--platform__img {
	position: relative; z-index: 1; max-width: 100%; max-height: 100%;
	width: auto; height: auto; object-fit: contain;
}
.card--platform__mark {
	position: relative; z-index: 1;
	font-size: 3.4rem; font-weight: 800; color: rgba(255,255,255,.92); letter-spacing: -.03em;
}

.card--platform__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.5rem 1.7rem; }
.card--platform__eyebrow {
	font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--brand-600); margin-bottom: .6rem;
}
.card--platform__title { font-size: var(--h3); margin-bottom: .6rem; color: var(--ink); }
.card--platform__text { color: var(--muted); font-size: .98rem; margin-bottom: 1.1rem; }
.card--platform__more { margin-top: auto; font-weight: 600; color: var(--brand-600); font-size: .92rem; }
.card--platform__more::after { content: " →"; transition: margin-left .2s var(--ease); display: inline-block; }
a.card--platform:hover .card--platform__more::after { margin-left: .3rem; }
a.card--platform:hover .card--platform__title { color: var(--brand-600); }




/* ----------------------------------------------------------------- Stats */
.stats { background: var(--mist); padding: clamp(2.5rem, 6vh, 4rem) 0; border-block: 1px solid var(--line); }
.stat { text-align: center; }
.stat__value { display: block; font-size: clamp(2.2rem, 4.5vw, 3.2rem); font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.stat__label { color: var(--muted); font-size: .95rem; }

/* -------------------------------------------------------------- Approach */
.approach__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 3vw, 2rem); counter-reset: step; }
/* Five-step methods (e.g. VEPHL) get a 5-up row on wide screens. */
.approach__list--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1080px) { .approach__list--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .approach__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .approach__list { grid-template-columns: 1fr; } }
.approach__more { margin-top: clamp(2rem, 5vh, 3rem); }
.approach__step { position: relative; padding-top: 1.4rem; border-top: 2px solid var(--line); }
.approach__step::after {
	content: ""; position: absolute; top: -2px; left: 0; width: 46px; height: 2px; background: var(--brand);
}
.approach__num { display: block; font-size: 1rem; font-weight: 700; color: var(--brand); margin-bottom: .8rem; }
.approach__title { font-size: var(--h3); margin-bottom: .5rem; }
.approach__text { color: var(--muted); font-size: .96rem; }

/* ==========================================================================
   BLOG SYSTEM — cards, featured post, filter pills, related.
   All text colors are hardcoded (with !important where a card lives inside
   builder-managed markup) so a page-builder / plugin global text color
   (e.g. this site's Elementor kit paints body text #7A7A7A via the
   body-scoped .elementor-kit-NN selector) can NEVER wash out card text,
   regardless of stylesheet load order. Cards are 100% server-rendered and
   never depend on JS to become visible.
   ========================================================================== */
.insights { background: var(--mist); }

/* ---- Base card ---- */
.card--post {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card--post:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card--post__link { display: flex; flex-direction: column; height: 100%; color: inherit !important; text-decoration: none; }

/* Media + category badge + no-image fallback */
.card--post__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }
.card--post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card--post:hover .card--post__media img { transform: scale(1.06); }
.card--post__media-fallback {
	position: absolute; inset: 0; display: grid; place-items: center;
	background: radial-gradient(120% 120% at 80% 0%, var(--ink-hi) 0%, var(--ink) 60%);
}
.card--post__media-fallback::after {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(60% 60% at 20% 100%, rgba(var(--brand-rgb),.35), transparent 70%);
}
.card--post__media-mark { position: relative; z-index: 1; font-size: 3.4rem; font-weight: 800; color: rgba(255,255,255,.9); letter-spacing: -.03em; }
.card--post__badge {
	position: absolute; top: .85rem; left: .85rem; z-index: 2;
	padding: .32rem .7rem; border-radius: 999px;
	background: rgba(10,10,11,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	color: #fff !important; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}

/* Body */
.card--post__body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; background: #fff; }
.card--post .card--post__title { font-size: 1.2rem; line-height: 1.28; margin: .55rem 0 .6rem; color: var(--ink) !important; transition: color .2s var(--ease); }
.card--post:hover .card--post__title { color: var(--brand-600) !important; }
.card--post .card--post__excerpt { color: var(--slate) !important; font-size: .96rem; line-height: 1.6; margin-bottom: 1.1rem; }
.card--post .entry-meta,
.card--post .entry-meta__date,
.card--post .entry-meta__read { color: var(--slate-2) !important; }
.card--post .entry-meta__cats a { color: var(--brand-600) !important; }
.card--post__more { margin-top: auto; font-weight: 600; color: var(--brand-600) !important; font-size: .92rem; }
.card--post__more::after { content: " →"; transition: margin-left .2s var(--ease); }
.card--post:hover .card--post__more::after { margin-left: .25rem; }
.insights__more { text-align: center; margin-top: 2.6rem; }

/* ---- Featured split card (blog index, page 1) ---- */
.blog-featured { margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.card--post-featured { border-radius: var(--radius); }
.card--post-featured .card--post__link { flex-direction: row; }
.card--post-featured .card--post__media { flex: 0 0 55%; aspect-ratio: auto; min-height: 340px; }
.card--post-featured .card--post__body { justify-content: center; padding: clamp(1.6rem, 4vw, 3rem); }
.card--post-featured .card--post__title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.card--post-featured .card--post__excerpt { font-size: 1.05rem; }
.card--post-featured .card--post__media-mark { font-size: 5rem; }
@media (max-width: 780px) {
	.card--post-featured .card--post__link { flex-direction: column; }
	.card--post-featured .card--post__media { flex-basis: auto; aspect-ratio: 16 / 10; min-height: 0; }
}

/* ---- Category filter pills ---- */
.blog-filter { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.blog-filter__pill {
	display: inline-flex; align-items: center; padding: .5rem 1.05rem; border-radius: 999px;
	border: 1px solid var(--line); background: #fff; color: var(--slate) !important;
	font-size: .9rem; font-weight: 600; letter-spacing: .01em;
	transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.blog-filter__pill:hover { color: var(--brand-600) !important; border-color: var(--brand); transform: translateY(-1px); }
.blog-filter__pill.is-active { background: var(--ink); color: #fff !important; border-color: var(--ink); }

/* ---- Related posts ---- */
.related { background: var(--mist); border-top: 1px solid var(--line); }

/* ==========================================================================
   PAGE TEMPLATES — Hub, Detail, About, Services shared components.
   ========================================================================== */
/* Intro copy sitting above an auto card grid on hub/services pages. */
.hub__intro { max-width: 780px; margin: 0 auto clamp(2rem, 5vw, 3rem); }
.hub__intro .entry__content { font-size: 1.08rem; }
/* When an intro is followed directly by the grid, tighten the gap. */
.content-wrap > .hub__intro + .grid { margin-top: 0; }
/* Alternate approach strip background so it reads as a distinct band on
   inner pages (the homepage version sits on white). */
.approach--alt { background: var(--mist); border-block: 1px solid var(--line); }


/* ---- Shared meta line ---- */
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; font-size: .82rem; color: var(--slate-2); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.entry-meta > * + *::before { content: "•"; margin-right: .9rem; opacity: .5; }
.entry-meta__cats a { color: var(--brand-600); }


/* --------------------------------------------------------------- Contact */
.contact__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }
.contact__text { color: var(--muted); font-size: var(--lead); margin-top: 1rem; max-width: 46ch; }
.contact__form {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	padding: clamp(1.5rem, 4vw, 2.4rem); box-shadow: var(--shadow-md);
}
/* Style common Contact Form 7 fields to match the theme. */
.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form input[type="tel"],
.contact__form input[type="url"],
.contact__form textarea,
.contact__form select {
	width: 100%; padding: .85rem 1rem; margin-bottom: 1rem;
	border: 1px solid var(--line); border-radius: var(--radius-sm);
	font: inherit; background: #fff; color: var(--fg);
}
.contact__form textarea { min-height: 140px; resize: vertical; }
.contact__form input:focus,
.contact__form textarea:focus,
.contact__form select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12); }
.contact__form label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .92rem; }
.contact__form input[type="submit"],
.contact__form button[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center;
	padding: .85rem 1.8rem; border-radius: 999px; border: 0; cursor: pointer;
	background: var(--brand); color: #fff; font-weight: 600; font-size: .98rem; width: auto;
	box-shadow: 0 8px 20px rgba(var(--brand-rgb),.28); transition: transform .25s var(--ease), background .25s var(--ease);
}
.contact__form input[type="submit"]:hover,
.contact__form button[type="submit"]:hover { transform: translateY(-2px); background: var(--brand-600); }
.contact__form .wpcf7-not-valid-tip { color: var(--brand-700); font-size: .85rem; margin: -.6rem 0 .8rem; }
.contact__form .wpcf7-response-output { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: var(--radius-sm); }

/* -------------------------------------------------------------- CTA band */
.cta-band { background: linear-gradient(120deg, var(--brand-700), var(--brand)); color: #fff; }
.cta-band__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
	padding: clamp(3rem, 7vh, 5rem) 0;
}
.cta-band__title { color: #fff; font-size: var(--h2); max-width: 20ch; }
.cta-band__lead { color: rgba(255,255,255,.9); font-size: var(--lead); max-width: 55ch; margin-top: .8rem; }
.cta-band .btn--primary { background: #fff; color: var(--brand-700); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.cta-band .btn--primary:hover { background: var(--ink); color: #fff; }
/* Mobile: stack vertically, let the title wrap, and make the button a
   comfortable full-width tap target instead of overflowing the row. */
@media (max-width: 720px) {
	.cta-band__inner { flex-direction: column; align-items: flex-start; gap: 1.6rem; text-align: left; }
	.cta-band__title { max-width: none; font-size: clamp(1.6rem, 7vw, 2.1rem); }
	.cta-band__lead { max-width: none; }
	.cta-band .btn { width: 100%; }
}


/* ----------------------------------------------------- Page hero / inner */
.page-hero { background: var(--ink); color: #fff; padding: clamp(3rem, 7vh, 5rem) 0 clamp(2.2rem, 5vh, 3.2rem); }
.page-hero__title { color: #fff; font-size: var(--h2); max-width: 24ch; }
.page-hero__desc { color: rgba(255,255,255,.7); margin-top: .8rem; max-width: 60ch; }
.page-hero .entry-meta { color: rgba(255,255,255,.6); margin-top: 1rem; }
.page-hero .entry-meta__cats a { color: #ff8080; }

.breadcrumbs { margin-bottom: 1.2rem; }
.breadcrumbs__list { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; color: rgba(255,255,255,.55); }
.breadcrumbs__item:not(:last-child)::after { content: "/"; margin-left: .5rem; opacity: .5; }
.breadcrumbs a { color: rgba(255,255,255,.8); }
.breadcrumbs a:hover { color: #fff; }

.content-wrap { padding: clamp(3rem, 7vh, 5rem) var(--gutter); }
.content-wrap { max-width: var(--container); }
.entry--single, .entry--page { max-width: 780px; margin-inline: auto; }
.entry__featured { margin-bottom: 2rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }

/* Rich text (post/page content) */
.rich-text { font-size: 1.08rem; }
.rich-text > * + * { margin-top: 1.3rem; }
.rich-text h2 { font-size: 1.8rem; margin-top: 2.6rem; }
.rich-text h3 { font-size: 1.35rem; margin-top: 2rem; }
/* Default paragraph colour, but let the block editor's colour choice win and
   let paragraphs inside coloured groups (e.g. the dark hero) inherit their
   group's text colour instead of being forced dark-grey. */
.rich-text p:not(.has-text-color) { color: var(--fg); }
.rich-text .has-text-color p:not(.has-text-color) { color: inherit; }
.rich-text a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }
.rich-text ul, .rich-text ol { padding-left: 1.4rem; }
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
/* Pattern lists supply their own markers (brand tick / red dot), so suppress
   the generic disc bullets and the reading-column indent for them. */
.rich-text ul.advisory-checklist,
.rich-text ul.advisory-module-list { list-style: none; padding-left: 0; }
.rich-text li + li { margin-top: .5rem; }
.rich-text img { border-radius: var(--radius-sm); }
.rich-text blockquote {
	border-left: 3px solid var(--brand); padding: .4rem 0 .4rem 1.4rem;
	color: var(--ink); font-size: 1.2rem; font-style: italic;
}
.rich-text code { background: var(--mist); padding: .15em .4em; border-radius: 6px; font-size: .9em; }
.rich-text pre { background: var(--ink); color: #f4f4f4; padding: 1.2rem; border-radius: var(--radius-sm); overflow-x: auto; }

.entry__tags { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .92rem; }
.entry__tags a { display: inline-block; padding: .25rem .7rem; margin: .2rem; background: var(--mist); border-radius: 999px; color: var(--slate); }
.entry__tags-label { font-weight: 600; color: var(--ink); }

.post-nav { display: flex; justify-content: space-between; gap: 1rem; max-width: 780px; margin: 3rem auto 0; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.post-nav__prev, .post-nav__next { flex: 1; }
.post-nav__next { text-align: right; }
.post-nav a { display: inline-flex; flex-direction: column; gap: .25rem; color: var(--ink); font-weight: 600; }
.post-nav a:hover .post-nav__title { color: var(--brand-600); }
.post-nav__dir { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-2); }
.post-nav__title { color: var(--ink); font-size: 1.02rem; line-height: 1.3; transition: color .2s var(--ease); }


/* Archive grid */
.archive-grid { margin-top: 0; }
.pagination, .comments-area .navigation { margin-top: 3rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.nav-links .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 .6rem;
	border: 1px solid var(--line); border-radius: 10px; font-weight: 600; color: var(--fg);
}
.nav-links .page-numbers.current { background: var(--brand); border-color: var(--brand); color: #fff; }
.nav-links a.page-numbers:hover { border-color: var(--brand); color: var(--brand-600); }

.no-results { max-width: 640px; margin-inline: auto; text-align: center; }
.no-results h2 { font-size: var(--h2); margin-bottom: 1rem; }

/* ------------------------------------------------------------ Search form */
.search-form { display: flex; gap: .5rem; max-width: 460px; }
.search-form__field {
	flex: 1; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 999px;
	font: inherit; background: #fff; color: var(--fg);
}
.search-form__field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.15); }
.search-form__submit { padding: .8rem 1rem; }

/* ----------------------------------------------------------------- 404 */
.error-404 { text-align: center; max-width: 640px; margin-inline: auto; }
.error-404__code { font-size: clamp(5rem, 18vw, 10rem); font-weight: 800; color: var(--brand); line-height: 1; letter-spacing: -.04em; }
.error-404__title { font-size: var(--h2); margin: .5rem 0 1rem; }
.error-404__text { color: var(--muted); margin-bottom: 2rem; }
.error-404__actions { margin-bottom: 2.5rem; }
.error-404__search .search-form { margin-inline: auto; }

/* -------------------------------------------------------------- Comments */
.comments-area { max-width: 780px; margin: 3.5rem auto 0; }
.comments-title { font-size: 1.5rem; margin-bottom: 1.5rem; }
.comment-list, .comment-list ol { list-style: none; }
.comment-list .children { padding-left: 1.5rem; }
.comment-body { padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.comment-author { font-weight: 600; }
.comment-form { margin-top: 2.5rem; display: grid; gap: 1rem; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit;
}
.comment-form textarea:focus, .comment-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12); }

/* ---------------------------------------------------------------- Footer */
.site-footer { background: var(--ink); color: rgba(255,255,255,.72); }
.site-footer__grid {
	display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem);
	padding: clamp(3rem, 7vh, 5rem) var(--gutter); max-width: var(--container); margin-inline: auto;
}
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* Widget-driven footer: equal columns that adapt to the number of active
   columns (1–4). Falls back to 2-up then 1-up on smaller screens. */
.site-footer__grid--widgets { grid-template-columns: repeat(4, 1fr); }
.site-footer__grid--widgets[data-cols="1"] { grid-template-columns: 1fr; }
.site-footer__grid--widgets[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.site-footer__grid--widgets[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .site-footer__grid--widgets { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .site-footer__grid--widgets { grid-template-columns: 1fr; } }
.site-footer__widget-col .footer-widget { margin-bottom: 1.6rem; }
.site-footer__widget-col .footer-widget:last-child { margin-bottom: 0; }
.site-footer__widget-col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__widget-col li { margin-bottom: .6rem; }

.site-footer__logo .custom-logo { max-height: 40px; width: auto; }
/* Fallback: force the header logo to white when no dedicated footer logo is set. */
.site-footer__logo:not(.site-footer__logo--custom) .custom-logo { filter: brightness(0) invert(1); }
/* A user-uploaded footer logo is already light, so show it as-is. */
.site-footer__logo--custom .custom-logo { max-height: 48px; }

.site-footer__name { font-weight: 800; font-size: 1.4rem; color: #fff; }
.site-footer__tagline { margin-top: 1rem; max-width: 42ch; font-size: .96rem; }
.site-footer__heading { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.1rem; }
.site-footer__address { font-style: normal; line-height: 1.9; }
.site-footer__contact { margin-top: .8rem; line-height: 1.9; }
.site-footer__contact a { color: rgba(255,255,255,.72); }
.site-footer__contact a:hover { color: #fff; }
.site-footer__social { display: flex; gap: .6rem; margin-top: 1.4rem; }
.site-footer__social li { margin: 0; }
.site-footer__social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 10px;
	background: rgba(255,255,255,.06); color: rgba(255,255,255,.72);
	border: 1px solid rgba(255,255,255,.1);
	transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.site-footer__social a:hover { background: var(--brand); color: #fff; border-color: var(--brand); transform: translateY(-2px); }
.site-footer__menu li, .site-footer__legal li { margin-bottom: .6rem; }
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: #fff; }
.footer-widget__title { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }

.site-footer__socket { border-top: 1px solid rgba(255,255,255,.1); }
.site-footer__socket-inner {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	padding: 1.4rem var(--gutter); max-width: var(--container); margin-inline: auto; font-size: .88rem;
}
.site-footer__legal { display: flex; gap: 1.2rem; }
.site-footer__legal li { margin: 0; }
.site-footer__note { opacity: .8; }
.site-footer__note[hidden] { display: none; }
.site-footer__tagline[hidden] { display: none; }

/* --------------------------------------------------------- Scroll-to-top */
.scroll-top {
	position: fixed; right: 20px; bottom: 20px; z-index: 90;
	width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
	background: var(--ink); color: #fff; display: grid; place-items: center;
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .2s;
	box-shadow: var(--shadow-md);
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: var(--brand); }

/* ----------------------------------------------------- Reveal animations */
/* Only hide when JS is available (html.js). With no JS, content stays visible. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.js .reveal { opacity: 1 !important; transform: none !important; }
	.hero__scroll span { animation: none; }
}

/* ------------------------------------ Block editor color utility classes */
/* Mirrors theme.json / editor-color-palette so colors chosen in the editor
   render on the front end (we dequeue core global-styles for performance). */
.has-brand-color { color: var(--brand) !important; }
.has-brand-background-color { background-color: var(--brand) !important; }
.has-ink-color { color: var(--ink) !important; }
.has-ink-background-color { background-color: var(--ink) !important; }
.has-slate-color { color: var(--slate) !important; }
.has-slate-background-color { background-color: var(--slate) !important; }
.has-mist-color { color: var(--mist) !important; }
.has-mist-background-color { background-color: var(--mist) !important; }
.has-white-color { color: var(--white) !important; }
.has-white-background-color { background-color: var(--white) !important; }


/* ------------------------------------------------------ Mobile navigation */
@media (max-width: 860px) {
	.nav-toggle { display: flex; }
	.site-header__cta { display: none; }
	.main-navigation {
		position: fixed; inset: var(--header-h) 0 auto 0; margin: 0;
		background: #fff; border-bottom: 1px solid var(--line);
		max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); box-shadow: var(--shadow-md);
	}
	.main-navigation.is-open { max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
	.nav-menu { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1.5rem; }
	.nav-menu a { padding: .9rem .4rem; border-bottom: 1px solid var(--line); border-radius: 0; }
	.nav-menu ul {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; padding: 0 0 0 1rem; min-width: 0;
	}
	.nav-menu .menu-item-has-children > a::after { float: right; }
}

/* ==========================================================================
   TIER-1 COMPONENTS — Case Studies, Testimonials & FAQ (v1.9.0)
   ========================================================================== */

/* ---- Page hero variants (archive / case single lead) ---- */
.page-hero__lead {
	max-width: 62ch;
	margin-top: .9rem;
	font-size: 1.125rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .82);
}

/* ---- Case study cards (archive + related) ---- */
.card--case { position: relative; }
.card--case__metric {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin: 0 0 .35rem;
}
.card--case__metric-value {
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--brand-600);
	line-height: 1;
}
.card--case__metric-label {
	font-size: .82rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ---- Case study single ---- */
.content-wrap--case { max-width: 820px; margin-inline: auto; }
.case-metrics { padding-block: clamp(2rem, 5vw, 3.25rem); }

.case-narrative {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	margin-block: clamp(1.75rem, 4vw, 2.75rem);
}
@media (min-width: 780px) {
	.case-narrative { grid-template-columns: 1fr 1fr; }
}
.case-narrative__title {
	font-size: 1.35rem;
	margin: 0 0 .65rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--brand);
	display: inline-block;
}

/* ---- Case study details aside ---- */
.case-aside {
	margin-top: clamp(2rem, 5vw, 3rem);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--mist);
	border-radius: var(--radius);
	display: grid;
	gap: 1rem;
}
.case-aside__row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 1rem;
	align-items: start;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--line);
}
.case-aside__row:last-child { border-bottom: 0; padding-bottom: 0; }
.case-aside__label {
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--muted);
}
.case-aside__value { color: var(--ink); font-weight: 500; }
.case-aside__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.case-aside__chip {
	display: inline-flex;
	align-items: center;
	padding: .3rem .7rem;
	font-size: .82rem;
	font-weight: 600;
	color: var(--brand-700);
	background: rgba(var(--brand-rgb), .08);
	border-radius: 999px;
}

/* ---- Case archive grid safety ---- */
.case-grid .card--case { height: 100%; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials { background: var(--mist); }
.testimonials__grid {
	display: grid;
	gap: clamp(1.25rem, 3vw, 1.75rem);
	grid-template-columns: 1fr;
}
@media (min-width: 680px) { .testimonials__grid--2, .testimonials__grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .testimonials__grid--3 { grid-template-columns: repeat(3, 1fr); } }

.testimonial {
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial__quote {
	margin: 0;
	font-size: 1.075rem;
	line-height: 1.6;
	color: var(--ink);
	position: relative;
	padding-top: 1.75rem;
}
.testimonial__quote::before {
	content: "\201C";
	position: absolute;
	top: -.35rem;
	left: -.25rem;
	font-size: 3.25rem;
	line-height: 1;
	color: var(--brand);
	opacity: .28;
	font-family: var(--font-serif);
}
.testimonial__cite {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin-top: auto;
	font-style: normal;
}
.testimonial__logo img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	border-radius: 8px;
}
.testimonial__meta { display: flex; flex-direction: column; }
.testimonial__name { font-weight: 700; color: var(--ink); }
.testimonial__role { font-size: .86rem; color: var(--muted); }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq__list {
	display: grid;
	gap: .75rem;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.faq__item {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: #fff;
	overflow: hidden;
	transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq__item[open] { border-color: rgba(var(--brand-rgb), .35); box-shadow: var(--shadow-sm); }
.faq__q {
	cursor: pointer;
	list-style: none;
	padding: 1.15rem 3rem 1.15rem 1.25rem;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--ink);
	position: relative;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
	content: "";
	position: absolute;
	right: 1.25rem;
	top: 50%;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--brand);
	border-bottom: 2px solid var(--brand);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .25s var(--ease);
}
.faq__item[open] .faq__q::after { transform: translateY(-30%) rotate(-135deg); }
.faq__q:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.faq__a {
	padding: 0 1.25rem 1.25rem;
	color: var(--slate);
	line-height: 1.65;
}
.faq__a > :first-child { margin-top: 0; }
.faq__a > :last-child { margin-bottom: 0; }

/* Core Details block used by the "FAQ accordion" pattern */
.faq__list { display: grid; gap: .75rem; }
.faq__list .wp-block-details {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: #fff;
	padding: 1.15rem 1.25rem;
	transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq__list .wp-block-details[open] { border-color: rgba(var(--brand-rgb), .35); box-shadow: var(--shadow-sm); }
.faq__list .wp-block-details > summary {
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--ink);
	position: relative;
	padding-right: 1.75rem;
}
.faq__list .wp-block-details > summary::marker,
.faq__list .wp-block-details > summary::-webkit-details-marker { content: ""; display: none; }
.faq__list .wp-block-details > summary::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--brand);
	border-bottom: 2px solid var(--brand);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .25s var(--ease);
}
.faq__list .wp-block-details[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__list .wp-block-details > summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.faq__list .wp-block-details > :not(summary) { color: var(--slate); line-height: 1.65; }
.faq__list .wp-block-details > p:last-child { margin-bottom: 0; }
.faq__list .wp-block-details > :not(summary):first-of-type { margin-top: .85rem; }

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.empty-state {
	text-align: center;
	max-width: 560px;
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.empty-state__title { font-size: 1.6rem; margin: 0 0 .75rem; }
.empty-state__text { color: var(--muted); margin: 0 0 1.75rem; line-height: 1.6; }

/* Respect reduced motion for the new components. */
@media (prefers-reduced-motion: reduce) {
	.testimonial, .faq__item, .faq__q::after { transition: none; }
	.testimonial:hover { transform: none; }
}

/* ==========================================================================
   WIDE / LANDING PAGE TEMPLATE  (page-wide.php)
   A builder-friendly canvas for graphics-rich landing & product pages.
   Content flows at the full ~1200px width, and `.alignfull` blocks (e.g. the
   dark hero, colour bands) bleed edge to edge. Works with the block editor's
   native Group / Columns / Buttons blocks plus any Custom HTML.
   ========================================================================== */
.wide-page {
	/* Space below the fixed header; matches the .page-hero rhythm elsewhere. */
	padding-top: clamp(1rem, 3vh, 2rem);
}

/* Slim breadcrumb row (kept for wayfinding + SEO). Unlike the dark .page-hero,
   this row sits on the white page background, so the breadcrumb text needs the
   dark-on-light treatment (the base .breadcrumbs styles are white for use over
   the ink hero and would be invisible here). */
.wide-page__crumbs {
	padding-block: 1rem 1.25rem;
}
.wide-page__crumbs .breadcrumbs__list { color: var(--slate); }
.wide-page__crumbs .breadcrumbs a { color: var(--slate); }
.wide-page__crumbs .breadcrumbs a:hover { color: var(--brand-600); }
.wide-page__crumbs .breadcrumbs__item:not(:last-child)::after { color: var(--slate-2); }
.wide-page__crumbs .breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }


/* The content wrapper: normal blocks sit in a centred ~1200px column, while
   aligned blocks widen or go full-bleed. This mirrors WordPress' own
   constrained-layout behaviour without the narrow 780px reading clamp. */
.rich-text--wide {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Let full/wide-aligned blocks escape the padded column. */
.rich-text--wide > .alignwide {
	max-width: min(1360px, 96vw);
	margin-inline: auto;
}
.rich-text--wide > .alignfull {
	max-width: none;
	width: auto;
	/* Break out of the wrapper's horizontal padding to reach the viewport edge. */
	margin-inline: calc(var(--gutter) * -1);
}

/* Vertical rhythm between top-level sections on a landing page. Block groups
   supply their own internal padding, so we only add a modest gap and let the
   blocks' own spacing controls do the rest. */
.rich-text--wide > * + * { margin-top: 0; }

/* Ensure block Group backgrounds (dark hero, mist bands) render correctly and
   full-bleed groups still pad their inner content on small screens. */
.rich-text--wide .wp-block-group.has-background {
	/* Groups carry their own padding via block settings; nothing to override. */
}

/* Buttons: honour the block editor's chosen colours but keep a sensible
   fallback radius/weight consistent with the theme. */
.rich-text--wide .wp-block-button__link {
	font-weight: 700;
}

/* On very wide viewports, allow full-bleed sections to truly reach the edges
   even though the wrapper is centred. */
@media (min-width: 1264px) {
	.rich-text--wide > .alignfull {
		margin-inline: calc( 50% - 50vw );
	}
}

/* The wide template has no big page-hero, so give the first block a little
   breathing room from the breadcrumb without doubling up when it's a coloured
   full-bleed band. */
.rich-text--wide > :first-child { margin-top: 0; }

/* ==========================================================================
   BLOCK STYLES & PATTERN HELPERS  (inc/block-patterns.php)
   Styling for the "Connectix" block patterns and the custom block styles
   (Group/Columns → Card, Group → Dark band, Button → Ghost, Image → Shadow).
   ========================================================================== */

/* Card — white surface with subtle border + shadow. Applied to Group / Column /
   Columns via the "Card" block style, and used throughout the feature / pricing
   patterns. */
.is-style-advisory-card {
	background-color: var(--white, #fff);
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(10, 10, 11, 0.06);
}
/* When a card is itself a dark (featured) pricing column, drop the light border. */
.is-style-advisory-card.has-ink-background-color {
	border-color: transparent;
	box-shadow: 0 18px 44px rgba(10, 10, 11, 0.28);
}

/* Featured pricing card — lift it and flag it with a brand accent bar. */
.advisory-card--featured {
	position: relative;
	overflow: hidden;
}
.advisory-card--featured::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--brand);
}
@media (min-width: 782px) {
	.advisory-card--featured { transform: translateY(-12px); }
}

/* Feature / module cards grid (patterns: "Feature grid — 6 cards, addable" and
   "Module coverage"). These use WordPress' native Grid layout so each card is a
   real grid item the editor can drag-reorder and duplicate individually. Core
   emits the grid CSS from the block's layout attribute, but because the theme
   can dequeue core global-styles on some views, we mirror it here as a robust
   fallback so cards always reflow (auto-fill, min 20rem → 3-up, 2-up, 1-up). */
.advisory-feature-cards {
	--advisory-card-gap: var(--wp--preset--spacing--40, 1.5rem);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: var(--advisory-card-gap);
	align-items: stretch;
}
/* Each card fills its grid track (overrides any legacy flex max-width from
   pages built with the previous flex-based pattern markup). */
.advisory-feature-cards > .advisory-feature-card {
	max-width: none;
	height: 100%;
}


/* Module coverage — category cards whose body is a bulleted list. The card
   uses a flex column so the title stays put and lists of uneven length align
   neatly; a subtle top hairline separates the list from the heading. */
.advisory-module-cards {
	/* Force a real grid with equal 1fr tracks so every card is the same width,
	   overriding any legacy flex markup or differing core layout CSS. Column
	   count snaps to fixed 1 → 2 → 3 → 4 steps (never a loose auto-fill) so the
	   cards stay aligned in clean rows. */
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--advisory-card-gap, var(--wp--preset--spacing--40, 1.5rem));
	align-items: stretch;
}
/* 2-up on small tablets and larger. */
@media (min-width: 600px) {
	.advisory-module-cards { grid-template-columns: repeat(2, 1fr); }
}
/* 3-up on laptops. */
@media (min-width: 900px) {
	.advisory-module-cards { grid-template-columns: repeat(3, 1fr); }
}
/* 4-up on wide desktops. */
@media (min-width: 1200px) {
	.advisory-module-cards { grid-template-columns: repeat(4, 1fr); }
}
.advisory-module-cards > .advisory-feature-card,
.advisory-module-cards > .wp-block-group {
	/* Equal boxes: fill the grid track (width) and stretch to full row height. */
	max-width: none;
	width: auto;
	flex: none;
	height: 100%;
	display: flex;
	flex-direction: column;
	text-align: left;
}
.advisory-module-list {
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0.9rem 0 0;
	border-top: 1px solid rgba(10, 10, 11, 0.08);
}
.advisory-module-list li {
	position: relative;
	padding-left: 1.35rem;
	margin-bottom: 0.55rem;
	line-height: 1.45;
	font-size: 0.95rem;
	color: var(--slate, #5a6472);
}
.advisory-module-list li:last-child {
	margin-bottom: 0;
}
.advisory-module-list li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 0.62em;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--brand);
}


/* Dark band — quick way to make any Group a full-bleed dark section. */

.is-style-advisory-dark {
	background-color: var(--ink);
	color: #fff;
}
.is-style-advisory-dark :where(h1, h2, h3, h4, h5, h6) { color: #fff; }

/* Ghost button — outlined, transparent; pairs with the solid brand button. */
.wp-block-button.is-style-advisory-ghost .wp-block-button__link {
	background: transparent;
	border: 1.5px solid currentColor;
	box-shadow: none;
}
.wp-block-button.is-style-advisory-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-advisory-ghost .wp-block-button__link:focus {
	background: rgba(255, 255, 255, 0.12);
}

/* Image — soft shadow for screenshots / diagrams in split sections. */
.is-style-advisory-shadow img {
	border-radius: 14px;
	box-shadow: 0 20px 50px rgba(10, 10, 11, 0.16);
}

/* Checklist — replace default bullets with a brand tick. */
.advisory-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.advisory-checklist li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.7rem;
	line-height: 1.5;
}
.advisory-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background: var(--brand);
	/* White check mark drawn with a mask so it inherits crisp at any size. */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
}

@media (prefers-reduced-motion: reduce) {
	.advisory-card--featured { transform: none; }
}

/* ==========================================================================
   BLOCK ALIGNMENT ON THE DEFAULT PAGE / POST TEMPLATE
   The Connectix patterns are built with Align Full / Align Wide groups (dark
   hero, colour bands, etc). The Wide template (page-wide.php → .rich-text--wide)
   already handles these, but the *default* page & post templates render content
   inside a centred 780px column (.entry--page / .entry--single > .rich-text)
   with no alignment rules — so patterns dropped onto a normal page were clamped
   and full-bleed bands didn't bleed. These rules give the same edge-to-edge /
   widened behaviour on any template, so patterns work everywhere.
   ========================================================================== */
.rich-text:not(.rich-text--wide) > .alignwide {
	/* Widen beyond the 780px reading column up to the theme container. */
	width: min(var(--container, 1200px), 92vw);
	max-width: min(var(--container, 1200px), 92vw);
	margin-inline: auto;
}
.rich-text:not(.rich-text--wide) > .alignfull {
	/* Break out of the centred column to reach both viewport edges. */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}
/* Full-bleed bands carry their own inner padding via block settings, but keep a
   safe gutter on small screens so text never touches the edge. */
@media (max-width: 600px) {
	.rich-text:not(.rich-text--wide) > .alignfull {
		padding-inline: 0;
	}
}

/* ==========================================================================
   QUOTE BAND  (pattern: "Quote band" — core/quote, is-style-large)
   "is-style-large" is a core Quote style; ensure it reads as an on-brand pull
   quote even when core block-theme CSS is trimmed.
   ========================================================================== */
.wp-block-quote.is-style-large {
	border: 0;
	padding: 0;
	text-align: center;
}
.wp-block-quote.is-style-large p {
	font-size: clamp(1.4rem, 3.2vw, 2rem);
	line-height: 1.35;
	font-style: normal;
	color: var(--ink);
}
.wp-block-quote.is-style-large cite {
	display: block;
	margin-top: 1rem;
	font-size: 0.95rem;
	font-style: normal;
	color: var(--slate);
}