/*
Theme Name: Navdeep
Theme URI: http://localhost/navdeepyadav.in
Author: Navdeep Yadav
Author URI: http://localhost/navdeepyadav.in
Description: A bespoke personal-brand theme for Navdeep Yadav — Digital Marketing Educator & Industry Speaker. Ships an ACF-driven homepage covering webinars, workshops, topics, case studies, resources and enquiry capture, with five switchable brand palettes.
Version: 1.5.1
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: navdeep
Tags: personal-blog, portfolio, one-column, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. Palette — Aurora

   Every brand colour lives in the block below. The rest of the stylesheet
   only ever references these tokens, so a re-skin is an edit to one block.

   The client approved Aurora on 2026-09-15. The four alternative palettes
   and the floating switcher that offered them were removed on the same day;
   both are kept verbatim in inc/palettes-archive.css.txt, together with the
   steps to put either back.

   `--*-rgb` triplets exist so colours can be used at partial alpha
   via rgba(var(--accent-rgb), .12).
   ========================================================================== */

/* Aurora — emerald → violet. */
:root {
	--ink: #0a0f1f;
	--ink-rgb: 10, 15, 31;
	--ink-soft: #141b2e;
	--body: #525d73;
	--muted: #79839a;
	--faint: #9aa4b8;
	--placeholder: #a3adc0;
	--line: #e6e9f1;
	--line-soft: #f0f2f7;
	--bg-soft: #f7f8fc;
	--bg-dark: #080d1a;
	--code-fg: #e8ecf5;

	--accent: #00c48c;
	--accent-rgb: 0, 214, 143;
	--accent-deep: #00a97a;
	--accent-2: #6c4df6;
	--accent-2-rgb: 108, 77, 246;
	--accent-2-deep: #4d33c9;

	--accent-tint: #3defb4;
	--accent-2-tint: #a78bfa;

	--on-dark: #a9b3c7;
	--on-dark-strong: #c3cbdb;
	--on-dark-soft: #8e99b0;

	--up: #00a97a;
	--up-rgb: 0, 214, 143;
	--star: #f6ab4d;

	--av-1: linear-gradient(135deg, #00d68f, #00a97a);
	--av-2: linear-gradient(135deg, #6c4df6, #4d33c9);
	--av-3: linear-gradient(135deg, #f6ab4d, #e5842a);
	--av-4: linear-gradient(135deg, #4db8f6, #2b8fd0);

	--grad: linear-gradient(135deg, #00d68f 0%, #6c4df6 100%);

	--logo: url("assets/img/logo.svg");
	--logo-light: url("assets/img/logo-light.svg");
}

/* ==========================================================================
   2. Palette-independent tokens
   ========================================================================== */
:root {
	--bg: #ffffff;

	--grad-soft: linear-gradient(135deg, rgba(var(--accent-rgb), .12) 0%, rgba(var(--accent-2-rgb), .12) 100%);

	--r-xs: 8px;
	--r-sm: 12px;
	--r: 18px;
	--r-lg: 26px;
	--r-xl: 36px;
	--r-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(var(--ink-rgb), .05), 0 2px 8px rgba(var(--ink-rgb), .04);
	--shadow: 0 4px 12px rgba(var(--ink-rgb), .05), 0 16px 40px rgba(var(--ink-rgb), .07);
	--shadow-lg: 0 8px 24px rgba(var(--ink-rgb), .07), 0 32px 72px rgba(var(--ink-rgb), .11);
	--shadow-glow: 0 18px 50px rgba(var(--accent-2-rgb), .28);

	--font-head: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

	--container: 1200px;
	--gutter: 24px;
	--header-h: 82px;

	--ease: cubic-bezier(.4, 0, .2, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Colour changes should feel deliberate, not jarring. */
body,
.site-header,
.section--soft,
.section--dark,
.service-card,
.case-card,
.process-step,
.faq__item,
.post-card,
.contact-item,
.contact-form-wrap,
.dash-card,
.float-card,
.site-footer {
	transition: background-color .45s var(--ease), border-color .45s var(--ease),
		color .45s var(--ease);
}

/* ==========================================================================
   3. Reset & base
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 20px);
}

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

body.nav-open {
	overflow: hidden;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--accent-2);
	text-decoration: none;
	transition: color .25s var(--ease);
}

a:hover {
	color: var(--accent-2-deep);
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-head);
	color: var(--ink);
	line-height: 1.18;
	letter-spacing: -.02em;
	margin: 0 0 .6em;
	font-weight: 800;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.7vw, 2.85rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.15em; }

p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }

blockquote {
	margin: 2rem 0;
	padding: 1.4rem 1.8rem;
	border-left: 4px solid var(--accent);
	background: var(--bg-soft);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	font-size: 1.08rem;
	color: var(--ink-soft);
}

code, pre {
	font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
	font-size: .92em;
}

code {
	background: var(--bg-soft);
	padding: .15em .45em;
	border-radius: var(--r-xs);
	color: var(--accent-2);
}

pre {
	background: var(--ink);
	color: var(--code-fg);
	padding: 1.4rem;
	border-radius: var(--r-sm);
	overflow-x: auto;
}

pre code {
	background: none;
	color: inherit;
	padding: 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
}

th, td {
	padding: .75rem 1rem;
	border: 1px solid var(--line);
	text-align: left;
}

th { background: var(--bg-soft); color: var(--ink); font-weight: 700; }

hr {
	border: 0;
	height: 1px;
	background: var(--line);
	margin: 2.5rem 0;
}

::selection {
	background: rgba(var(--accent-2-rgb), .18);
	color: var(--ink);
}

:focus-visible {
	outline: 3px solid rgba(var(--accent-2-rgb), .45);
	outline-offset: 3px;
	border-radius: 4px;
}

.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: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	background: var(--ink);
	color: #fff;
	padding: .8rem 1.4rem;
	border-radius: 0 0 var(--r-xs) 0;
}

.skip-link:focus {
	left: 0;
	color: #fff;
}

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

.container--narrow { max-width: 820px; }

.section {
	position: relative;
	padding: clamp(72px, 9vw, 120px) 0;
}

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

.section--dark {
	background: var(--bg-dark);
	color: var(--on-dark);
}

.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #fff; }

.section-head {
	max-width: 720px;
	margin: 0 auto clamp(44px, 5vw, 68px);
	text-align: center;
}

.section-head--left {
	margin-inline: 0;
	text-align: left;
}

.section-head p {
	font-size: 1.08rem;
	color: var(--muted);
	margin-bottom: 0;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--font-body);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--accent-2);
	background: rgba(var(--accent-2-rgb), .08);
	border: 1px solid rgba(var(--accent-2-rgb), .16);
	padding: .42rem .95rem;
	border-radius: var(--r-pill);
	margin-bottom: 1.15rem;
}

.eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--grad);
}

.section--dark .eyebrow {
	color: var(--accent-tint);
	background: rgba(var(--accent-rgb), .1);
	border-color: rgba(var(--accent-rgb), .22);
}

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

.lead {
	font-size: 1.13rem;
	color: var(--muted);
	line-height: 1.75;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	font-family: var(--font-head);
	font-size: .95rem;
	font-weight: 700;
	line-height: 1;
	padding: 1.05rem 1.9rem;
	border-radius: var(--r-pill);
	border: 1.5px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
		background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

.btn svg { width: 17px; height: 17px; flex: none; }

.btn:hover { transform: translateY(-2px); }

.btn:active { transform: translateY(0); }

.btn--primary {
	background: var(--grad);
	background-size: 160% 160%;
	color: #fff;
	box-shadow: var(--shadow-glow);
}

.btn--primary:hover {
	color: #fff;
	background-position: 100% 100%;
	box-shadow: 0 22px 60px rgba(var(--accent-2-rgb), .38);
}

.btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--line);
}

.btn--ghost:hover {
	color: var(--ink);
	border-color: var(--ink);
	background: rgba(var(--ink-rgb), .03);
}

.btn--light {
	background: #fff;
	color: var(--ink);
}

.btn--light:hover { color: var(--ink); box-shadow: var(--shadow); }

.btn--outline-light {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .28);
}

.btn--outline-light:hover {
	color: #fff;
	border-color: #fff;
	background: rgba(255, 255, 255, .07);
}

.btn--sm { padding: .8rem 1.4rem; font-size: .88rem; }

.btn--block { width: 100%; }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: .93rem;
	color: var(--accent-2);
}

.link-arrow svg {
	width: 16px;
	height: 16px;
	transition: transform .3s var(--ease-out);
}

.link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   6. Site header
   ========================================================================== */
.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	height: var(--header-h);
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0);
	border-bottom: 1px solid transparent;
	transition: background-color .35s var(--ease), box-shadow .35s var(--ease),
		border-color .35s var(--ease), height .35s var(--ease);
}

.site-header.is-stuck {
	height: 70px;
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	backdrop-filter: blur(16px) saturate(180%);
	border-bottom-color: var(--line);
	box-shadow: 0 4px 24px rgba(var(--ink-rgb), .05);
}

/* Inner pages open on a dark banner, where a transparent header would leave
   the logo and nav as dark ink on a dark photo. Only the homepage, whose hero
   is light, gets to start see-through. */
body:not(.is-home) .site-header {
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	backdrop-filter: blur(16px) saturate(180%);
	border-bottom-color: var(--line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	width: 100%;
}

.site-brand {
	display: flex;
	align-items: center;
	flex: none;
	margin-right: auto;
}

.site-brand img,
.site-brand svg {
	height: 46px;
	width: auto;
	transition: height .35s var(--ease);
}

.is-stuck .site-brand img,
.is-stuck .site-brand svg { height: 40px; }

.site-brand__text {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--ink);
	letter-spacing: -.01em;
}

/* The palette token supplies the artwork, so only the active palette's SVG is
   ever fetched — no stack of hidden <img> tags to keep in sync. Lock-ups are
   312×72, hence the 4.33:1 boxes below. */
.site-brand__logo {
	display: block;
	width: 184px;
	height: 42px;
	background: var(--logo) left center / contain no-repeat;
	transition: width .35s var(--ease), height .35s var(--ease);
}

.is-stuck .site-brand__logo { width: 164px; height: 38px; }

/* Primary navigation
   Eight items plus the logo and the header button only clear 1200px if the
   links stay on one line and the padding stays tight. */
.primary-nav ul {
	display: flex;
	align-items: center;
	gap: .1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav a {
	position: relative;
	display: block;
	font-family: var(--font-head);
	font-size: .89rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--ink-soft);
	padding: .6rem .62rem;
	border-radius: var(--r-pill);
	transition: color .25s var(--ease), background-color .25s var(--ease);
}

.primary-nav a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: .3rem;
	width: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--grad);
	transform: translateX(-50%);
	transition: width .3s var(--ease-out);
}

.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav li.is-active > a { color: var(--accent-2); }

.primary-nav a:hover::after,
.primary-nav .current-menu-item > a::after,
.primary-nav li.is-active > a::after { width: 18px; }

.primary-nav .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 210px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: .5rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all .28s var(--ease-out);
}

.primary-nav li { position: relative; }

.primary-nav li:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-nav .sub-menu a { padding: .55rem .8rem; border-radius: var(--r-xs); }

.primary-nav .sub-menu a::after { display: none; }

.primary-nav .sub-menu a:hover { background: var(--bg-soft); }

.header-cta { flex: none; }

/* Mobile toggle */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--r-xs);
	cursor: pointer;
	flex: none;
}

.nav-toggle span {
	display: block;
	height: 2px;
	width: 100%;
	border-radius: 2px;
	background: var(--ink);
	transition: transform .3s var(--ease), opacity .25s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   7. Hero
   ========================================================================== */
.hero {
	position: relative;
	padding: calc(var(--header-h) + 70px) 0 clamp(70px, 8vw, 110px);
	overflow: hidden;
	background:
		radial-gradient(900px 520px at 78% 12%, rgba(var(--accent-2-rgb), .13), transparent 62%),
		radial-gradient(760px 460px at 10% 88%, rgba(var(--accent-rgb), .13), transparent 60%),
		var(--bg);
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(var(--ink-rgb), .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--ink-rgb), .035) 1px, transparent 1px);
	background-size: 62px 62px;
	-webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 40%, #000 20%, transparent 78%);
	mask-image: radial-gradient(ellipse 80% 62% at 50% 40%, #000 20%, transparent 78%);
	pointer-events: none;
}

.hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(40px, 5vw, 72px);
	align-items: center;
}

/* The headline is a long sentence rather than a two-word slogan, so it sits
   below the global h1 scale to keep the hero a sensible height. */
.hero h1 {
	font-size: clamp(2.05rem, 3.9vw, 3.05rem);
	margin-bottom: .55em;
}

.hero__sub {
	font-size: 1.15rem;
	color: var(--muted);
	max-width: 34em;
	margin-bottom: 2rem;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	margin-bottom: 2.6rem;
}

.hero__proof {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.avatar-stack { display: flex; }

.avatar-stack span {
	width: 42px;
	height: 42px;
	margin-left: -12px;
	border-radius: 50%;
	border: 2.5px solid #fff;
	display: grid;
	place-items: center;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: .82rem;
	color: #fff;
	box-shadow: var(--shadow-sm);
}

.avatar-stack span:first-child { margin-left: 0; }
.avatar-stack span:nth-child(1) { background: var(--av-1); }
.avatar-stack span:nth-child(2) { background: var(--av-2); }
.avatar-stack span:nth-child(3) { background: var(--av-3); }
.avatar-stack span:nth-child(4) { background: var(--av-4); }

.hero__proof-text {
	font-size: .92rem;
	line-height: 1.5;
	color: var(--muted);
}

.hero__proof-text strong {
	display: block;
	color: var(--ink);
	font-family: var(--font-head);
	font-weight: 700;
}

.stars { color: var(--star); letter-spacing: .12em; font-size: .85rem; }

/* Hero visual — analytics card */
.hero__visual { position: relative; }

.dash-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 1.6rem;
	box-shadow: var(--shadow-lg);
}

.dash-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.4rem;
}

.dash-card__title {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.02rem;
	color: var(--ink);
	margin: 0 0 .15rem;
}

.dash-card__sub { font-size: .8rem; color: var(--muted); }

.pill-up {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .8rem;
	font-weight: 700;
	font-family: var(--font-head);
	color: var(--up);
	background: rgba(var(--up-rgb), .12);
	padding: .35rem .7rem;
	border-radius: var(--r-pill);
	white-space: nowrap;
}

.pill-up svg { width: 13px; height: 13px; }

.chart {
	display: flex;
	align-items: flex-end;
	gap: clamp(6px, 1.4vw, 11px);
	height: 168px;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid var(--line-soft);
	margin-bottom: 1.3rem;
}

.chart__bar {
	position: relative;
	flex: 1;
	border-radius: 7px 7px 3px 3px;
	background: linear-gradient(180deg, rgba(var(--accent-2-rgb), .85), rgba(var(--accent-rgb), .75));
	height: var(--h, 40%);
	transform-origin: bottom;
	animation: barGrow 1.1s var(--ease-out) backwards;
}

.chart__bar:nth-child(1) { animation-delay: .05s; }
.chart__bar:nth-child(2) { animation-delay: .12s; }
.chart__bar:nth-child(3) { animation-delay: .19s; }
.chart__bar:nth-child(4) { animation-delay: .26s; }
.chart__bar:nth-child(5) { animation-delay: .33s; }
.chart__bar:nth-child(6) { animation-delay: .40s; }
.chart__bar:nth-child(7) { animation-delay: .47s; }
.chart__bar:nth-child(8) { animation-delay: .54s; }

.chart__bar--peak {
	background: var(--grad);
	box-shadow: 0 6px 18px rgba(var(--accent-2-rgb), .3);
}

@keyframes barGrow {
	from { transform: scaleY(0); opacity: .2; }
	to { transform: scaleY(1); opacity: 1; }
}

.dash-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .9rem;
}

.dash-metric__label {
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 700;
	margin-bottom: .2rem;
}

.dash-metric__value {
	font-family: var(--font-head);
	font-size: 1.28rem;
	font-weight: 800;
	color: var(--ink);
	line-height: 1.1;
}

.dash-metric__value small {
	font-size: .72rem;
	font-weight: 700;
	color: var(--up);
	margin-left: .2rem;
}

/* The two proof cards sit in a row under the session card — same look as
   before, just anchored to the layout instead of floating over it.
   Positioned, because .dash-card above is: without this the session card's
   large shadow paints over these and greys their white background. */
.hero__cards {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-top: 14px;
}

/* Same surface as .dash-card — white ground, same hairline border. */
.float-card {
	display: flex;
	align-items: center;
	gap: .7rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: .85rem 1rem;
	box-shadow: var(--shadow-sm);
}

.float-card__icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	color: #fff;
	flex: none;
}

.float-card__icon svg { width: 18px; height: 18px; }

.float-card--a .float-card__icon { background: var(--av-1); }
.float-card--b .float-card__icon { background: var(--av-2); }

/* Lets the text column shrink instead of forcing the flex row wider. */
.float-card > span:last-child { min-width: 0; }

.float-card__label {
	display: block;
	font-size: .7rem;
	color: var(--muted);
	font-weight: 600;
	line-height: 1.3;
}

.float-card__value {
	display: block;
	font-family: var(--font-head);
	font-size: .98rem;
	font-weight: 800;
	color: var(--ink);
	line-height: 1.2;
}

/* ==========================================================================
   8. Audience band
   ========================================================================== */
/* Heading on the left completes itself with the badges on the right, so the
   two columns are read as one sentence rather than as label + list. */
.audience-band {
	position: relative;
	padding: clamp(22px, 2.8vw, 34px) 0;
	border-block: 1px solid var(--line);
	background:
		radial-gradient(520px 180px at 10% 0%, rgba(var(--accent-rgb), .12), transparent 66%),
		radial-gradient(480px 170px at 92% 100%, rgba(var(--accent-2-rgb), .12), transparent 64%),
		var(--bg-soft);
	overflow: hidden;
}

/* A brand hairline so the band reads as a deliberate divider between the
   hero and the mission statement, not just a grey gap. */
.audience-band::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--grad);
	opacity: .55;
}

/* The heading takes only the width it needs so the badges get the rest of
   the row and stay on one line. */
.audience-band__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(16px, 2.2vw, 30px);
	align-items: center;
}

/* Matches the section headings elsewhere on the page. */
.audience-band__title {
	position: relative;
	font-size: clamp(1.9rem, 3.7vw, 2.85rem);
	letter-spacing: -.02em;
	margin: 0;
	padding-left: 1.15rem;
}

/* The accent runs down the side rather than sitting above the heading, so it
   adds brand colour without adding height to a strip this shallow. */
.audience-band__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: .14em;
	bottom: .14em;
	width: 4px;
	border-radius: var(--r-pill);
	background: var(--grad);
}

.audience-band__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: .55rem;
	padding: 0;
	margin: 0;
}

/* Weighted up so the pills hold their own against a 2.8rem heading. */
.audience-band__list li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--font-head);
	font-size: .95rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	padding: .58rem .95rem .58rem .78rem;
	border-radius: var(--r-pill);
	box-shadow: var(--shadow-sm);
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
		border-color .3s var(--ease);
}

/* The dot is what puts brand colour into an otherwise white row. */
.audience-band__list li::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--grad);
}

.audience-band__list li:hover {
	transform: translateY(-3px);
	border-color: rgba(var(--accent-2-rgb), .38);
	box-shadow: var(--shadow);
}

/* ==========================================================================
   9. Services
   ========================================================================== */
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.service-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 2.1rem 1.8rem;
	overflow: hidden;
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out),
		border-color .3s var(--ease);
}

.service-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--grad);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s var(--ease-out);
}

.service-card:hover {
	transform: translateY(-6px);
	border-color: transparent;
	box-shadow: var(--shadow-lg);
}

.service-card:hover::before { transform: scaleX(1); }

.service-card__icon {
	width: 54px;
	height: 54px;
	border-radius: 15px;
	display: grid;
	place-items: center;
	background: var(--grad-soft);
	color: var(--accent-2);
	margin-bottom: 1.35rem;
	transition: background .35s var(--ease), color .35s var(--ease),
		transform .45s var(--ease-out);
}

.service-card__icon svg { width: 25px; height: 25px; }

.service-card:hover .service-card__icon {
	background: var(--grad);
	color: #fff;
	transform: rotate(-6deg) scale(1.06);
}

.service-card h3 { font-size: 1.24rem; margin-bottom: .55rem; }

.service-card p { font-size: .95rem; margin-bottom: 1.15rem; }

.service-card__list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: .88rem;
}

.service-card__list li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: .42rem;
	color: var(--body);
}

.service-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .52em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--grad);
}

/* ==========================================================================
   10. Results / metrics
   ========================================================================== */
.stats-band {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.stat {
	background: var(--bg-dark);
	padding: 2.2rem 1.6rem;
	text-align: center;
}

.stat__value {
	font-family: var(--font-head);
	font-size: clamp(2.1rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1;
	margin-bottom: .5rem;
	background: linear-gradient(135deg, var(--accent-tint), var(--accent-2-tint));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.stat__label {
	font-size: .82rem;
	color: var(--on-dark-soft);
	letter-spacing: .04em;
}

.case-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.case-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 1.9rem 1.7rem;
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.case-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.case-card__tag {
	align-self: flex-start;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent-2);
	background: rgba(var(--accent-2-rgb), .08);
	padding: .3rem .7rem;
	border-radius: var(--r-pill);
	margin-bottom: 1.2rem;
}

.case-card__metric {
	font-family: var(--font-head);
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
	color: var(--ink);
	margin-bottom: .35rem;
}

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

.case-card__metric-label {
	font-size: .88rem;
	font-weight: 600;
	color: var(--muted);
	margin-bottom: 1.15rem;
}

.case-card__copy { font-size: .93rem; margin-bottom: 1.3rem; }

.case-card__foot {
	margin-top: auto;
	padding-top: 1.1rem;
	border-top: 1px solid var(--line-soft);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: .85rem;
}

.case-card__client { font-family: var(--font-head); font-weight: 700; color: var(--ink); }

.case-card__time { color: var(--muted); font-size: .8rem; }

/* ==========================================================================
   11. Process
   ========================================================================== */
.process-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	counter-reset: step;
}

.process-step {
	position: relative;
	padding: 2rem 1.5rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.process-step:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

.process-step__num {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--ink);
	color: #fff;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.05rem;
	margin-bottom: 1.2rem;
	transition: background .35s var(--ease);
}

.process-step:hover .process-step__num { background: var(--grad); }

.process-step h3 { font-size: 1.14rem; margin-bottom: .5rem; }

.process-step p { font-size: .92rem; margin: 0; }

.process-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 3.3rem;
	right: -15px;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--line);
	border-right: 2px solid var(--line);
	transform: rotate(45deg);
}

/* ==========================================================================
   12. About
   ========================================================================== */
.about-grid {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: clamp(40px, 5vw, 72px);
	align-items: center;
}

.about-figure { position: relative; }

.about-figure__frame {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--r-xl);
	background: var(--grad);
	display: grid;
	place-items: center;
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.about-figure__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-figure__initials {
	font-family: var(--font-head);
	font-size: clamp(4rem, 9vw, 6.5rem);
	font-weight: 800;
	color: rgba(255, 255, 255, .92);
	letter-spacing: -.04em;
}

.about-figure__badge {
	position: absolute;
	right: -18px;
	bottom: 34px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 1rem 1.2rem;
	box-shadow: var(--shadow);
	text-align: center;
	min-width: 140px;
}

.about-figure__badge strong {
	display: block;
	font-family: var(--font-head);
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.about-figure__badge span {
	font-size: .76rem;
	color: var(--muted);
	letter-spacing: .04em;
}

.about-list {
	list-style: none;
	padding: 0;
	margin: 1.6rem 0 2rem;
	display: grid;
	gap: .85rem;
}

.about-list li {
	position: relative;
	padding-left: 2.2rem;
	font-size: .98rem;
	color: var(--body);
}

.about-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .18em;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--grad-soft);
}

/* The tick is masked rather than inlined so it follows the palette. */
.about-list li::after {
	content: "";
	position: absolute;
	left: 0;
	top: .18em;
	width: 24px;
	height: 24px;
	background: var(--accent-2);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.skill-bars { display: grid; gap: 1.15rem; margin-top: 2rem; }

.skill__top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: .45rem;
	font-size: .88rem;
}

.skill__name { font-family: var(--font-head); font-weight: 700; color: var(--ink); }

.skill__pct { font-weight: 700; color: var(--accent-2); }

.skill__track {
	height: 8px;
	border-radius: var(--r-pill);
	background: var(--line-soft);
	overflow: hidden;
}

.skill__fill {
	height: 100%;
	width: 0;
	border-radius: var(--r-pill);
	background: var(--grad);
	transition: width 1.3s var(--ease-out);
}

.is-visible .skill__fill { width: var(--pct); }

/* ==========================================================================
   13. Testimonials
   ========================================================================== */
.testimonial-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.testimonial {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: var(--r-lg);
	padding: 2rem 1.8rem;
	transition: transform .4s var(--ease-out), background .35s var(--ease),
		border-color .35s var(--ease);
}

.testimonial:hover {
	transform: translateY(-5px);
	background: rgba(255, 255, 255, .07);
	border-color: rgba(var(--accent-2-rgb), .35);
}

.testimonial__quote {
	/* Overrides the global blockquote treatment. */
	margin: 0 0 1.6rem;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
	font-size: .99rem;
	line-height: 1.72;
	color: var(--on-dark-strong);
}

.testimonial__author {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin-top: auto;
	padding-top: 1.3rem;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.testimonial__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: .9rem;
	color: #fff;
	flex: none;
	background: var(--grad);
}

.testimonial__name {
	font-family: var(--font-head);
	font-weight: 700;
	color: #fff;
	font-size: .95rem;
	line-height: 1.3;
}

.testimonial__role { font-size: .81rem; color: var(--on-dark-soft); }

/* ==========================================================================
   14. FAQ
   ========================================================================== */
.faq { max-width: 820px; margin-inline: auto; }

.faq__item {
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: #fff;
	margin-bottom: 12px;
	overflow: hidden;
	transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.faq__item.is-open {
	border-color: rgba(var(--accent-2-rgb), .35);
	box-shadow: var(--shadow-sm);
}

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 1.35rem 1.6rem;
	font-family: var(--font-head);
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--ink);
}

.faq__icon {
	position: relative;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--grad-soft);
	transition: background .3s var(--ease), transform .35s var(--ease-out);
}

.faq__icon::before,
.faq__icon::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	background: var(--accent-2);
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: opacity .25s var(--ease), background .3s var(--ease);
}

.faq__icon::before { width: 11px; height: 2px; }
.faq__icon::after { width: 2px; height: 11px; }

.faq__item.is-open .faq__icon { background: var(--grad); transform: rotate(90deg); }
.faq__item.is-open .faq__icon::before,
.faq__item.is-open .faq__icon::after { background: #fff; }
.faq__item.is-open .faq__icon::after { opacity: 0; }

.faq__a {
	max-height: 0;
	overflow: hidden;
	transition: max-height .45s var(--ease-out);
}

.faq__a-inner {
	padding: 0 1.6rem 1.45rem;
	font-size: .96rem;
	color: var(--body);
}

/* ==========================================================================
   15. Blog cards
   ========================================================================== */
.post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.post-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.post-card__media {
	aspect-ratio: 16 / 10;
	background: var(--grad);
	overflow: hidden;
	position: relative;
}

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease-out);
}

.post-card:hover .post-card__media img { transform: scale(1.06); }

.post-card__media--empty { display: grid; place-items: center; }

.post-card__media--empty svg { width: 46px; height: 46px; color: rgba(255, 255, 255, .85); }

.post-card__body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }

.post-card__meta {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: .76rem;
	color: var(--muted);
	letter-spacing: .03em;
	margin-bottom: .8rem;
	text-transform: uppercase;
	font-weight: 600;
}

.post-card__meta span { width: 3px; height: 3px; border-radius: 50%; background: var(--line); }

.post-card h3 { font-size: 1.14rem; margin-bottom: .55rem; line-height: 1.35; }

.post-card h3 a { color: var(--ink); }

.post-card h3 a:hover { color: var(--accent-2); }

.post-card p { font-size: .93rem; margin-bottom: 1.2rem; }

.post-card .link-arrow { margin-top: auto; }

/* ==========================================================================
   16. CTA band + contact
   ========================================================================== */
.cta-band {
	position: relative;
	background: var(--grad);
	border-radius: var(--r-xl);
	padding: clamp(44px, 6vw, 72px) clamp(28px, 5vw, 64px);
	overflow: hidden;
	text-align: center;
	color: #fff;
}

.cta-band::before,
.cta-band::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	pointer-events: none;
}

.cta-band::before { width: 320px; height: 320px; top: -140px; right: -80px; }
.cta-band::after { width: 240px; height: 240px; bottom: -120px; left: -60px; }

.cta-band h2 { color: #fff; position: relative; margin-bottom: .5em; }

.cta-band p {
	position: relative;
	color: rgba(255, 255, 255, .9);
	font-size: 1.1rem;
	max-width: 46em;
	margin-inline: auto;
	margin-bottom: 2rem;
}

.cta-band__actions {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	justify-content: center;
}

.contact-grid {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(36px, 4.5vw, 64px);
	align-items: start;
}

.contact-info { display: grid; gap: 1.1rem; margin-top: 2rem; }

.contact-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.3rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	transition: border-color .3s var(--ease), transform .35s var(--ease-out);
}

.contact-item:hover { border-color: rgba(var(--accent-2-rgb), .35); transform: translateX(4px); }

.contact-item__icon {
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: var(--grad-soft);
	color: var(--accent-2);
	display: grid;
	place-items: center;
	flex: none;
}

.contact-item__icon svg { width: 20px; height: 20px; }

.contact-item__label {
	font-size: .74rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 700;
}

.contact-item__value {
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--ink);
	font-size: .98rem;
}

a.contact-item__value:hover { color: var(--accent-2); }

.contact-form-wrap {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: clamp(24px, 3.4vw, 40px);
	box-shadow: var(--shadow);
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.field { margin-bottom: 1.1rem; }

.field label {
	display: block;
	font-family: var(--font-head);
	font-size: .84rem;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: .45rem;
}

.field input,
.field select,
.field textarea {
	width: 100%;
	padding: .88rem 1.05rem;
	font-size: .95rem;
	color: var(--ink);
	background: var(--bg-soft);
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	transition: border-color .25s var(--ease), background .25s var(--ease),
		box-shadow .25s var(--ease);
}

.field textarea { resize: vertical; min-height: 130px; }

/* The browser's own select arrow ignores the field's padding and sits hard
   against the edge. Drawing it ourselves puts it on the same 1.05rem inset
   as the text, with room reserved on the right so the two never collide. */
.field select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 2.9rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2379839a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.05rem center;
	background-size: 15px;
}

/* Firefox keeps a focus ring inside the control on top of ours. */
.field select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--ink); }

.field input::placeholder,
.field textarea::placeholder { color: var(--placeholder); }

/* background-color, not the shorthand — the shorthand would drop the
   select's arrow image the moment the field took focus. */
.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	background-color: #fff;
	border-color: var(--accent-2);
	box-shadow: 0 0 0 4px rgba(var(--accent-2-rgb), .12);
}

.form-note { font-size: .82rem; color: var(--muted); margin-top: 1rem; text-align: center; }

.form-alert {
	padding: .95rem 1.15rem;
	border-radius: var(--r-sm);
	font-size: .92rem;
	margin-bottom: 1.4rem;
	border: 1px solid;
}

/* Status colours stay semantic — they do not follow the brand palette. */
.form-alert--ok { background: rgba(22, 163, 74, .09); border-color: rgba(22, 163, 74, .3); color: #15803d; }
.form-alert--err { background: rgba(239, 68, 68, .07); border-color: rgba(239, 68, 68, .28); color: #b91c1c; }

/* ==========================================================================
   17. Footer
   ========================================================================== */
.site-footer {
	background: var(--bg-dark);
	color: var(--on-dark-soft);
	padding: clamp(56px, 7vw, 84px) 0 0;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: clamp(28px, 4vw, 56px);
	padding-bottom: 48px;
}

.footer-brand__link { display: inline-block; }

.footer-brand__logo {
	display: block;
	width: 208px;
	height: 48px;
	background: var(--logo-light) left center / contain no-repeat;
	margin-bottom: 1.2rem;
}

/* Custom logo set in the Customizer falls back to a plain image. */
.footer-brand img,
.footer-brand svg { height: 48px; width: auto;}

.footer-brand p { font-size: .93rem; max-width: 32ch; margin-bottom: 1.4rem; }

.footer-col h4 {
	font-size: .8rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 1.15rem;
}

.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }

.footer-col a { color: var(--on-dark-soft); font-size: .93rem; }

.footer-col a:hover { color: var(--accent-tint); }

.social-row { display: flex; gap: .6rem; }

.social-row a {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .09);
	color: var(--on-dark-strong);
	transition: all .3s var(--ease-out);
}

.social-row a svg { width: 17px; height: 17px; }

.social-row a:hover {
	background: var(--grad);
	border-color: transparent;
	color: #fff;
	transform: translateY(-3px);
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 22px 0 28px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: .87rem;
}

.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }

.footer-bottom p { margin: 0; }

.footer-bottom a { color: var(--on-dark-soft); }

.footer-bottom a:hover { color: var(--accent-tint); }

/* Back to top */
.to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--grad);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: var(--shadow-glow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: all .35s var(--ease-out);
}

.to-top svg { width: 19px; height: 19px; }

.to-top.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }

.to-top:hover { transform: translateY(-3px); }

/* ==========================================================================
   18. Inner pages (page.php / single.php / archive)
   ========================================================================== */
/* Banner strip. Deliberately short — it introduces the page rather than
   filling the first screen — with the artwork set inline as --banner. */
.page-hero {
	position: relative;
	padding: calc(var(--header-h) + 30px) 0 34px;
	background: var(--banner, none) center / cover no-repeat, var(--bg-dark);
	text-align: center;
	overflow: hidden;
}

/* The veil keeps the heading readable whatever the image behind it. */
.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.page-hero--dark::before {
	background:
		radial-gradient(900px 300px at 50% 40%, rgba(8, 13, 26, .55), transparent 70%),
		linear-gradient(180deg, rgba(8, 13, 26, .72), rgba(8, 13, 26, .84));
}

.page-hero--light::before {
	background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .9));
}

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

.page-hero h1 {
	margin-bottom: .3em;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.page-hero__sub {
	max-width: 46em;
	margin: 0 auto .85rem;
	font-size: 1rem;
	line-height: 1.6;
}

/* Dark veil: everything inverts to white. */
.page-hero--dark h1 { color: #fff; }
.page-hero--dark .page-hero__sub { color: rgba(255, 255, 255, .82); }
.page-hero--dark .breadcrumbs { color: rgba(255, 255, 255, .62); }
.page-hero--dark .breadcrumbs a { color: rgba(255, 255, 255, .82); }
.page-hero--dark .breadcrumbs a:hover { color: #fff; }

.page-hero--dark .eyebrow {
	color: var(--accent-tint);
	background: rgba(var(--accent-rgb), .12);
	border-color: rgba(var(--accent-rgb), .28);
}

/* Light veil keeps the default ink colours, so only the sub-line needs saying. */
.page-hero--light .page-hero__sub { color: var(--muted); }

.breadcrumbs {
	font-size: .85rem;
	color: var(--muted);
	display: flex;
	gap: .5rem;
	justify-content: center;
	flex-wrap: wrap;
}

.entry-content { font-size: 1.03rem; }

.entry-content > * { margin-bottom: 1.3rem; }

.entry-content h2 { margin-top: 2.2rem; }

.entry-content h3 { margin-top: 1.8rem; }

.entry-content img,
.wp-block-image img { border-radius: var(--r-sm); }

.alignwide { max-width: min(1100px, 92vw); margin-inline: auto; }

.alignfull { max-width: none; }

.alignleft { float: left; margin: .3rem 1.6rem 1rem 0; }

.alignright { float: right; margin: .3rem 0 1rem 1.6rem; }

.aligncenter { margin-inline: auto; display: block; }

.wp-caption-text,
.wp-element-caption {
	font-size: .85rem;
	color: var(--muted);
	text-align: center;
	margin-top: .55rem;
}

.post-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	font-size: .87rem;
	color: var(--muted);
	margin-top: 1rem;
}

.pagination {
	display: flex;
	gap: .5rem;
	justify-content: center;
	margin-top: 3rem;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 .8rem;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-family: var(--font-head);
	font-weight: 700;
	font-size: .92rem;
	color: var(--ink);
	background: #fff;
	transition: all .28s var(--ease);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	background: var(--grad);
	border-color: transparent;
	color: #fff;
}

.error-404 { text-align: center; padding: clamp(90px, 12vw, 150px) 0; }

.error-404 .code {
	font-family: var(--font-head);
	font-size: clamp(6rem, 18vw, 12rem);
	font-weight: 800;
	line-height: 1;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 1rem;
}

/* Comments */
.comment-list { list-style: none; padding: 0; margin: 0 0 2.5rem; }

.comment-list li { margin-bottom: 1.4rem; }

.comment-body {
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 1.4rem 1.5rem;
}

.comment-list .children { list-style: none; padding-left: 1.6rem; margin-top: 1.4rem; }

/* ==========================================================================
   19. Reveal on scroll
   ========================================================================== */
.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}

.reveal.is-visible { opacity: 1; transform: none; }

.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }
.reveal[data-delay="5"] { transition-delay: .45s; }
.reveal[data-delay="6"] { transition-delay: .54s; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.reveal { opacity: 1; transform: none; }
	.skill__fill { width: var(--pct); }
}

/* ==========================================================================
   20. Education sections
   ========================================================================== */

/* --- Hero card checklist ------------------------------------------------ */
.dash-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.4rem;
	display: grid;
	gap: .7rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--line-soft);
}

.dash-list li {
	position: relative;
	padding-left: 1.9rem;
	font-size: .92rem;
	color: var(--body);
	line-height: 1.45;
}

.dash-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .05em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--grad-soft);
}

/* Masked so the tick follows the palette, same trick as .about-list. */
.dash-list li::after {
	content: "";
	position: absolute;
	left: 0;
	top: .05em;
	width: 20px;
	height: 20px;
	background: var(--accent-2);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* --- Core mission band -------------------------------------------------- */
.section--tight { padding: clamp(48px, 6vw, 76px) 0; }

.mission {
	position: relative;
	background: var(--grad);
	border-radius: var(--r-xl);
	padding: clamp(40px, 5.5vw, 68px) clamp(28px, 5vw, 72px);
	text-align: center;
	color: #fff;
	overflow: hidden;
	box-shadow: var(--shadow-glow);
}

.mission::before,
.mission::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	pointer-events: none;
}

.mission::before { width: 300px; height: 300px; top: -150px; left: -70px; }
.mission::after { width: 220px; height: 220px; bottom: -120px; right: -50px; }

.mission__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 1.1rem;
	border-radius: 16px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .28);
	color: #fff;
}

.mission__icon svg { width: 24px; height: 24px; }

.mission__label {
	position: relative;
	display: inline-block;
	font-family: var(--font-body);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
	margin-bottom: 1rem;
}

.mission__text {
	position: relative;
	font-family: var(--font-head);
	font-size: clamp(1.25rem, 2.6vw, 1.85rem);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -.01em;
	color: #fff;
	max-width: 26em;
	margin: 0 auto;
}

/* --- Shared editorial bits ---------------------------------------------- */
.section-head--wide { max-width: 900px; }

.closing-note {
	max-width: 720px;
	margin: clamp(32px, 4vw, 48px) auto 0;
	text-align: center;
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--muted);
}

.section-foot {
	margin: clamp(32px, 4vw, 48px) 0 0;
	text-align: center;
}

/* --- Topics ------------------------------------------------------------- */
/* One per row in a centred column, matching the FAQ list below it. */
.topic-grid {
	list-style: none;
	padding: 0;
	margin-inline: auto;
	max-width: 820px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.topic-card {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 1.1rem 1.6rem;
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
		border-color .3s var(--ease);
}

.topic-card:hover {
	transform: translateY(-4px);
	border-color: rgba(var(--accent-2-rgb), .3);
	box-shadow: var(--shadow);
}

/* The number sits beside the text, on a fixed width so every row's text
   starts on the same line, with a rule between the two. */
.topic-card__num {
	flex: none;
	min-width: 2.1em;
	padding-right: 1.4rem;
	border-right: 1px solid rgba(var(--ink-rgb), .13);
	font-family: var(--font-head);
	font-size: clamp(2.1rem, 2.6vw, 2.6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: border-color .3s var(--ease);
}

.topic-card:hover .topic-card__num {
	border-right-color: rgba(var(--accent-2-rgb), .3);
}

.topic-card__text {
	font-family: var(--font-head);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.45;
	color: var(--ink);
}

/* --- Approach ----------------------------------------------------------- */
.approach-chain {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem .7rem;
	font-size: clamp(1.4rem, 3.4vw, 2.35rem);
}

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

.approach-chain__arrow {
	color: var(--faint);
	font-weight: 400;
	font-size: .7em;
}

.approach-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
}

.approach-step {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 1.8rem 1.35rem;
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.approach-step:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

.approach-step__num {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--grad-soft);
	color: var(--accent-2);
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1rem;
	margin-bottom: 1rem;
	transition: background .35s var(--ease), color .35s var(--ease);
}

.approach-step:hover .approach-step__num { background: var(--grad); color: #fff; }

.approach-step h3 { font-size: 1.08rem; margin-bottom: .45rem; }

.approach-step p { font-size: .9rem; margin: 0; }

/* --- Session formats ---------------------------------------------------- */
.format-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.format-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 2rem 1.8rem;
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out),
		border-color .3s var(--ease);
}

.format-card:hover {
	transform: translateY(-6px);
	border-color: transparent;
	box-shadow: var(--shadow-lg);
}

.format-card__head {
	padding-bottom: 1.1rem;
	margin-bottom: 1.1rem;
	border-bottom: 1px solid var(--line-soft);
}

.format-card__head h3 { font-size: 1.35rem; margin-bottom: .35rem; }

.format-card__meta {
	display: inline-block;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--accent-2);
}

.format-card > p { font-size: .95rem; margin-bottom: 1.2rem; }

.format-card__list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	display: grid;
	gap: .55rem;
	font-size: .89rem;
}

.format-card__list li {
	position: relative;
	padding-left: 1.5rem;
	color: var(--body);
	line-height: 1.5;
}

.format-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--grad);
}

.format-card__cta { margin-top: auto; align-self: flex-start; }

/* --- About: role line + expertise tags ---------------------------------- */
.about-role {
	font-family: var(--font-head);
	font-size: .95rem;
	font-weight: 700;
	color: var(--accent-2);
	margin-bottom: 1.2rem;
}

.tag-cloud {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding: 0;
	margin: 1.4rem 0;
}

.tag {
	font-size: .84rem;
	font-weight: 600;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	padding: .42rem .9rem;
	border-radius: var(--r-pill);
	transition: border-color .3s var(--ease), transform .3s var(--ease-out);
}

.tag:hover { border-color: rgba(var(--accent-2-rgb), .4); transform: translateY(-2px); }

.about-closing {
	font-size: 1rem;
	color: var(--body);
	margin-bottom: 0;
}

/* --- Resources ---------------------------------------------------------- */
.resource-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.resource-card {
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 1.8rem 1.5rem;
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out),
		background .3s var(--ease);
}

.resource-card:hover {
	transform: translateY(-5px);
	background: #fff;
	box-shadow: var(--shadow);
}

.resource-card__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: var(--grad-soft);
	color: var(--accent-2);
	margin-bottom: 1.1rem;
}

.resource-card__icon svg { width: 21px; height: 21px; }

.resource-card h3 { font-size: 1.08rem; margin-bottom: .45rem; }

.resource-card p { font-size: .9rem; margin: 0; }

/* ==========================================================================
   21. Card surfaces

   A card always contrasts with the section it sits in: soft grey on a white
   section, white on a soft section. Declared here, after every card rule, so
   one pair of selectors covers the whole page instead of each component
   second-guessing its own background.

   Two things sit outside this. The hero is not a .section and keeps its own
   white cards. Contact is excluded on purpose — its detail tiles and the
   enquiry form stay white whatever they sit on.
   ========================================================================== */
.topic-card,
.format-card,
.service-card,
.approach-step,
.post-card,
.faq__item {
	background: var(--bg-soft);
	border-color: rgba(var(--ink-rgb), .13);
}

.section--soft .topic-card,
.section--soft .format-card,
.section--soft .service-card,
.section--soft .approach-step,
.section--soft .post-card,
.section--soft .faq__item {
	background: #fff;
	border-color: rgba(var(--ink-rgb), .13);
}

/* ==========================================================================
   22. Enquiry modal
   ========================================================================== */
.modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 40px);
	/* Scrolls the overlay, not the page, when the form is taller than the
	   viewport — the panel stays centred until it runs out of room. */
	overflow-y: auto;
}

/* An author `display` beats the browser's own [hidden] rule, so without this
   the overlay stays laid out and its backdrop swallows every click on the
   page. Must outrank .modal, hence the attribute in the selector. */
.modal[hidden] { display: none; }

.modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(8, 13, 26, .55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	animation: modalFade .25s var(--ease) both;
}

.modal__panel {
	position: relative;
	width: 100%;
	max-width: 580px;
	margin: auto;
	background: #fff;
	border-radius: var(--r-lg);
	padding: clamp(26px, 4vw, 40px);
	box-shadow: 0 32px 90px rgba(var(--ink-rgb), .3);
	animation: modalRise .32s var(--ease-out) both;
}

.modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	padding: 0;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--muted);
	cursor: pointer;
	transition: color .25s var(--ease), border-color .25s var(--ease),
		background .25s var(--ease);
}

.modal__close svg { width: 17px; height: 17px; }

.modal__close:hover {
	color: var(--ink);
	background: #fff;
	border-color: var(--ink);
}

.modal__title {
	font-size: clamp(1.4rem, 2.6vw, 1.8rem);
	margin: 0 2.4rem .5rem 0;
}

.modal__lead {
	font-size: .98rem;
	color: var(--muted);
	margin-bottom: 1.6rem;
}

/* The page behind must not scroll under the overlay. */
body.modal-open { overflow: hidden; }

@keyframes modalFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes modalRise {
	from { opacity: 0; transform: translateY(16px) scale(.98); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.modal__backdrop,
	.modal__panel { animation: none; }
}

/* ==========================================================================
   23. Responsive
   ========================================================================== */
@media (max-width: 1080px) {
	.services-grid,
	.case-grid,
	.testimonial-grid,
	.post-grid { grid-template-columns: repeat(2, 1fr); }

	.process-grid { grid-template-columns: repeat(2, 1fr); }

	.process-step:nth-child(2)::after { display: none; }

	.format-grid { grid-template-columns: repeat(2, 1fr); }

	/* Five across is too tight below this width; three then two reads better. */
	.approach-grid { grid-template-columns: repeat(3, 1fr); }

	.resource-grid { grid-template-columns: repeat(2, 1fr); }

	.footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
	:root { --header-h: 72px; }

	.hero__inner,
	.about-grid,
	.contact-grid { grid-template-columns: 1fr; }

	.hero__visual { order: -1; max-width: 520px; margin-inline: auto; width: 100%; }

	/* Side by side needs width the heading no longer has — stack instead,
	   and the badges line up under the heading rather than off to the right. */
	.audience-band__inner { grid-template-columns: 1fr; }

	.audience-band__list { justify-content: flex-start; }

	.about-figure { max-width: 400px; margin-inline: auto; }

	.stats-band { grid-template-columns: repeat(2, 1fr); }

	.approach-grid { grid-template-columns: repeat(2, 1fr); }

	.nav-toggle { display: flex; }

	.header-cta { display: none; }

	.primary-nav {
		position: fixed;
		inset: var(--header-h) 0 auto;
		max-height: 0;
		overflow: hidden;
		background: #fff;
		border-bottom: 1px solid transparent;
		transition: max-height .45s var(--ease-out), border-color .3s var(--ease);
	}

	.primary-nav.is-open {
		max-height: calc(100vh - var(--header-h));
		overflow-y: auto;
		border-bottom-color: var(--line);
		box-shadow: var(--shadow);
	}

	.primary-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 1rem var(--gutter) 1.6rem;
	}

	.primary-nav li { border-bottom: 1px solid var(--line-soft); }

	.primary-nav a { padding: 1rem .2rem; font-size: 1.02rem; border-radius: 0; }

	.primary-nav a::after { display: none; }

	.primary-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 .6rem .9rem;
	}
}

@media (max-width: 620px) {
	body { font-size: 16px; }

	.services-grid,
	.case-grid,
	.testimonial-grid,
	.post-grid,
	.process-grid,
	.dash-metrics,
	.form-row,
	.topic-grid,
	.approach-grid,
	.format-grid,
	.resource-grid { grid-template-columns: 1fr; }

	.process-step::after { display: none !important; }

	.stats-band { grid-template-columns: 1fr; }

	.footer-grid { grid-template-columns: 1fr; }

	.hero__actions .btn { flex: 1 1 100%; }

	/* Two of these side by side leaves too little room for the labels. */
	.hero__cards { grid-template-columns: 1fr; }

	.about-figure__badge { right: 8px; bottom: 12px; }

	.footer-bottom { flex-direction: column; text-align: center; }
}