/*
 * Section styles — one block per section type used by the block patterns.
 * See MARKUP-GUIDE.md for the markup each block expects.
 */

/* =========================================================
   HERO — grid background with floating dots + blurred orbs
   .hero (split: copy + media) | .hero--center | .hero--tall (home)
   ========================================================= */
.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: min(60vh, 720px);
	padding-block: clamp(3rem, 2rem + 4vw, 5rem);
	background: #fff;
}
.hero--tall { min-height: min(75vh, 820px); }
.hero--short { min-height: 0; padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }
.hero > * { position: relative; z-index: 2; }

/* Grid + floating particle dots layer */
.hero::before,
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
.hero::before {
	background-image:
		linear-gradient(rgba(14, 165, 233, 0.25) 1px, transparent 1px),
		linear-gradient(90deg, rgba(14, 165, 233, 0.25) 1px, transparent 1px),
		radial-gradient(circle at 25% 25%, rgba(14, 165, 233, 0.45) 0 0.24rem, transparent 0.3rem),
		radial-gradient(circle at 66% 33%, rgba(139, 92, 246, 0.45) 0 0.2rem, transparent 0.26rem),
		radial-gradient(circle at 50% 66%, rgba(6, 182, 212, 0.45) 0 0.24rem, transparent 0.3rem),
		radial-gradient(circle at 78% 50%, rgba(14, 165, 233, 0.4) 0 0.2rem, transparent 0.26rem);
	background-size: 50px 50px, 50px 50px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
	animation: hero-particles 20s ease-in-out infinite;
}
/* Blurred gradient orbs layer */
.hero::after {
	inset: -8rem -6rem -8rem -6rem;
	background:
		radial-gradient(circle at 12% 18%, rgba(14, 165, 233, 0.2) 0, rgba(14, 165, 233, 0.16) 22%, transparent 48%),
		radial-gradient(circle at 88% 28%, rgba(139, 92, 246, 0.16) 0, rgba(139, 92, 246, 0.12) 20%, transparent 45%),
		radial-gradient(circle at 45% 92%, rgba(6, 182, 212, 0.14) 0, rgba(6, 182, 212, 0.1) 24%, transparent 52%);
	filter: blur(72px);
	opacity: 0.15;
	transform-origin: center;
	animation: hero-float 28s ease-in-out infinite;
}
@keyframes hero-float {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	33% { transform: translate3d(28px, -24px, 0) scale(1.08); }
	66% { transform: translate3d(-18px, 16px, 0) scale(0.94); }
}
@keyframes hero-particles {
	0%, 100% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; opacity: 0.4; }
	50% { background-position: 0 0, 0 0, 80px -80px, -70px -65px, 60px -95px, -85px -50px; opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
	.hero::before, .hero::after { animation: none; }
}

.hero__inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--col-gap);
	align-items: center;
}
.hero--center .hero__inner {
	grid-template-columns: 1fr;
	text-align: center;
	justify-items: center;
}
.hero--center .hero__copy { max-width: 900px; }
.hero__copy .eyebrow { margin-bottom: 1rem; }
.hero__title {
	font-size: var(--fs-h1);
	font-weight: var(--fw-bold);
	margin-bottom: 1.5rem;
}
.hero__text {
	font-size: 1.125rem;
	margin-bottom: 0;
}
.hero__text p { margin-bottom: 1rem; }
.hero__text p:last-child { margin-bottom: 0; }
.hero__copy .btn-row { margin-top: 1.75rem; }
.hero--center .btn-row { justify-content: center; }
.hero--center .hero__text { max-width: 820px; margin-inline: auto; }
.hero__media img { border-radius: var(--radius-lg); width: 100%; }
.hero__media--contain img { border-radius: 0; width: auto; max-height: 520px; margin-inline: auto; }
.hero__media--svg svg { width: 100%; height: auto; }
.hero__date { color: var(--color-muted); margin: 0; }

@media (max-width: 991px) {
	.hero { min-height: 0; }
	.hero__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.hero__media { max-width: 560px; }
	.hero .btn-row { justify-content: center; }
	.hero--split-left-mobile .hero__inner { text-align: left; justify-items: stretch; }
}

/* =========================================================
   STATEMENT BAND — centred heading + line on a tinted/dark background
   .band | .band--dark | .band--image (style="--band-image:url(…)")
   ========================================================= */
.band {
	text-align: center;
	padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
	background: var(--pos-light);
}
.band__inner { max-width: 900px; margin-inline: auto; padding-inline: var(--gutter); }
.band__title { font-size: var(--fs-h2); margin-bottom: 0.75rem; }
.band__text { font-size: var(--fs-lead); color: var(--color-muted); margin: 0; }
.band .btn-row { justify-content: center; margin-top: 1.5rem; }
.band--dark { background: var(--pos-navy); color: #fff; }
.band--dark .band__title { color: #fff; }
.band--dark .band__text { color: rgba(255, 255, 255, 0.85); }
.band--image {
	position: relative;
	isolation: isolate;
	color: #fff;
	background: var(--pos-navy) var(--band-image) center / cover no-repeat;
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.band--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(3, 2, 19, 0.55);
	z-index: -1;
}
.band--image .band__title { color: #fff; font-size: var(--fs-h1); margin: 0; }
.band--image .band__text { color: rgba(255, 255, 255, 0.9); margin-top: 0.75rem; }
.band--gradient { background: var(--pos-gradient); color: #fff; }
.band--gradient .band__title { color: #fff; }
.band--gradient .band__text { color: rgba(255, 255, 255, 0.9); }

/* =========================================================
   LOGO STRIP — "Trusted by leading companies"
   ========================================================= */
.logos { text-align: center; }
.logos__heading {
	text-transform: uppercase;
	font-size: 1rem;
	font-weight: var(--fw-bold);
	color: var(--color-muted);
	margin-bottom: 2.5rem;
	letter-spacing: 0.02em;
}
.logos__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2rem clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}
.logos__grid img {
	height: 48px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
}
.logos__grid a { display: block; line-height: 0; }
.logos--sm .logos__grid img { height: 40px; }

/* =========================================================
   ICON ROW — inline items with an icon + short text (checks / features)
   ========================================================= */
.icon-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	text-align: center;
}
.icon-row--3 { grid-template-columns: repeat(3, 1fr); }
.icon-row--4 { grid-template-columns: repeat(4, 1fr); }
.icon-row--5 { grid-template-columns: repeat(5, 1fr); }
.icon-row__item { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.icon-row__icon { font-size: 2.5rem; color: var(--pos-primary); line-height: 1; }
.icon-row__icon img { height: 64px; width: auto; }
.icon-row__label { margin: 0; }
.icon-row__title { font-size: 1.1rem; margin-bottom: 0.25rem; }
@media (max-width: 900px) {
	.icon-row, .icon-row--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.icon-row, .icon-row--3, .icon-row--5 { grid-template-columns: 1fr; }
}

/* =========================================================
   SPLIT — image beside copy (the "Image & Text" component)
   .split | .split--reverse (image right) | .split--stack-reverse
   ========================================================= */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--col-gap);
	align-items: center;
}
.split--narrow-media { grid-template-columns: 5fr 7fr; }
.split--wide-media { grid-template-columns: 7fr 5fr; }
.split__media img {
	width: 100%;
	border-radius: var(--radius-lg);
}
.split__media--contain img { width: auto; max-height: 560px; margin-inline: auto; border-radius: 0; }
.split__media--square img { aspect-ratio: 1; object-fit: cover; }
.split__copy h2, .split__copy h3 { margin-bottom: 1.5rem; }
.split__copy > p:last-child { margin-bottom: 0; }
.split__copy .eyebrow { margin-bottom: 1rem; }
.split__copy .btn-row { margin-top: 1.5rem; }
.split--reverse .split__media { order: 2; }
.split--reverse.split--narrow-media { grid-template-columns: 7fr 5fr; }
.split--top { align-items: start; }
@media (max-width: 900px) {
	.split, .split--narrow-media, .split--wide-media, .split--reverse.split--narrow-media { grid-template-columns: 1fr; }
	.split__media { order: 0; }
	.split--reverse .split__media { order: 0; }
	.split--stack-reverse .split__media { order: 2; }
	.split__media--contain img { max-height: 420px; }
}

/* =========================================================
   FEATURE GRID — cards with an icon badge, title, text, link
   (uses .cards / .card from components.css)
   ========================================================= */
.features .section__head { margin-bottom: 2.5rem; }
.features .card__title { font-size: 1.75rem; }
.features--compact .card__title { font-size: 1.25rem; }
.features__note {
	margin-top: 2rem;
	text-align: center;
	color: var(--color-muted);
}

/* =========================================================
   SMARTSAM FRAME — "Ask, Don't Search" embedded assistant
   ========================================================= */
.sam-frame {
	max-width: 1000px;
	margin-inline: auto;
	text-align: center;
}
.sam-frame__text {
	max-width: 780px;
	margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
	color: var(--color-muted);
	font-size: 18px;
}
.sam-frame__browser {
	border: 1px solid rgba(11, 18, 32, 0.08);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--shadow-soft);
	text-align: left;
}
.sam-frame__topbar {
	height: 42px;
	background: linear-gradient(90deg, #0d152b 0%, #14284d 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	padding-inline: 1rem;
	gap: 0.45rem;
}
.sam-frame__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}
.sam-frame__dot--red { background: #ff5f57; }
.sam-frame__dot--yellow { background: #febc2e; }
.sam-frame__dot--green { background: #28c840; }
.sam-frame__title {
	margin-left: 0.85rem;
	font-size: 0.9rem;
	font-weight: var(--fw-medium);
	color: rgba(237, 244, 255, 0.84);
}
.sam-frame__screen {
	position: relative;
	background: #f3f5f8;
	min-height: 760px;
	height: min(70vh, 800px);
}
.sam-frame__screen iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: #f3f5f8;
	opacity: 0;
	transition: opacity 400ms ease;
}
.sam-frame__screen.is-loaded iframe { opacity: 1; }
.sam-frame__screen[data-pos-deferred]::before {
	/* loading spinner until the deferred iframe arrives */
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 3px solid rgba(14, 165, 233, 0.2);
	border-top-color: var(--pos-primary);
	border-radius: 50%;
	animation: pos-spin 0.9s linear infinite;
}
.sam-frame__screen.is-loaded::before { display: none; }
@keyframes pos-spin { to { transform: rotate(360deg); } }
@media (max-width: 575px) {
	.sam-frame__screen { min-height: 640px; height: 68vh; }
	.sam-frame__browser { border-radius: 10px; }
}

/* =========================================================
   REVIEWS — main testimonial card + up to three sub cards
   ========================================================= */
.reviews {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	--review-border: rgba(11, 18, 32, 0.12);
	--review-bg: #f4f6f8;
	--review-sector: #0b8fe0;
}
.reviews__sub { display: flex; flex-direction: column; gap: 1.5rem; height: 100%; }
.review-card {
	position: relative;
	display: block;
	height: 100%;
	border: 1px solid var(--review-border);
	border-radius: var(--radius-xl);
	background: var(--review-bg);
	color: var(--color-text);
	padding: clamp(1.25rem, 1.8vw, 2rem);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
a.review-card:hover,
a.review-card:focus-visible {
	border-color: rgba(14, 165, 233, 0.45);
	box-shadow: var(--shadow-card);
	color: var(--color-text);
}
.review-card--main {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	overflow: hidden;
}
.review-card--sub { min-height: 180px; padding-right: clamp(2.5rem, 3.2vw, 3.25rem); }
.review-card__quote-icon {
	position: absolute;
	top: clamp(1rem, 1.5vw, 1.5rem);
	right: clamp(1rem, 1.5vw, 1.5rem);
	line-height: 1;
	color: rgba(152, 162, 179, 0.45);
	font-size: clamp(2rem, 5vw, 5rem);
}
.review-card__client {
	font-size: clamp(1.5rem, 2.3vw, 2.15rem);
	margin-bottom: 0.45rem;
}
.review-card--sub .review-card__client { font-size: clamp(1.25rem, 1.55vw, 1.75rem); margin-bottom: 0.25rem; }
.review-card__sector { color: var(--review-sector); font-size: 1.05rem; margin-bottom: 1.3rem; }
.review-card__quote {
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.45;
	color: #21344d;
}
.review-card--sub .review-card__quote { font-size: 1.2rem; padding-right: 1rem; }
.review-card__author { margin-top: clamp(1.25rem, 2vw, 2rem); }
.review-card__author-name { font-size: 1.45rem; font-weight: var(--fw-bold); line-height: 1.2; }
.review-card__job { color: var(--color-muted); font-size: 1.1rem; line-height: 1.3; }
.review-card__stat { padding: 1.5rem 0 0; position: relative; z-index: 1; }
.review-card__stat-value {
	font-size: clamp(2.4rem, 4vw, 4.5rem);
	line-height: 0.95;
	font-weight: var(--fw-extrabold);
	color: var(--pos-primary);
	margin-bottom: 0.35rem;
}
.review-card__stat-label { max-width: 220px; font-size: 1.45rem; line-height: 1.3; color: #16263d; }
.review-card__image {
	position: absolute;
	bottom: 0;
	right: 5%;
	width: 35%;
	max-width: 260px;
}
@media (max-width: 900px) {
	.reviews { grid-template-columns: 1fr; }
	.review-card__quote { font-size: 1.15rem; }
	.review-card__stat-value { font-size: clamp(2rem, 11vw, 3rem); }
	.review-card__stat-label { font-size: 1.05rem; max-width: 170px; }
	.review-card__author-name { font-size: 1.2rem; }
}

/* =========================================================
   CTA FORM — copy beside a form card (home + contact + resources)
   .cta-form | .cta-form--grey (grey form card on white)
   ========================================================= */
.cta-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--col-gap);
	align-items: center;
}
.cta-form__copy h2 { margin-bottom: 1rem; }
.cta-form__copy .eyebrow { background: var(--pos-primary-subtle); border-color: var(--pos-primary-subtle); color: var(--pos-dark); }
.cta-form__copy p { color: var(--color-text); }
.cta-form__card {
	background: #fff;
	padding: 2rem;
	border-radius: var(--radius-lg);
}
.cta-form--grey .cta-form__card { background: var(--pos-light-grey); }
.cta-form__copy ul { padding-left: 1.25rem; }
.cta-form__copy hr { border: 0; border-top: 1px solid rgba(0, 0, 0, 0.12); margin: 1.25rem 0; }
.cta-form--wide-copy { grid-template-columns: 7fr 5fr; }
.cta-form--wide-form { grid-template-columns: 5fr 7fr; }
.cta-form--flat .cta-form__card { background: transparent; padding: 0; border-radius: 0; }
/* Dark section variant (home page CTA is a navy block on the live site) */
.bg-dark .cta-form__copy, .bg-navy .cta-form__copy { color: #fff; }
.bg-dark .cta-form__copy h2, .bg-navy .cta-form__copy h2,
.bg-dark .cta-form__copy p, .bg-navy .cta-form__copy p { color: #fff; }
.bg-dark .cta-form__copy hr, .bg-navy .cta-form__copy hr { border-top-color: rgba(255, 255, 255, 0.2); }
.bg-dark .cta-form__copy a:not(.btn), .bg-navy .cta-form__copy a:not(.btn) { color: #7dd3fc; }
.bg-dark .cta-form__copy .icon-list li > .ico, .bg-navy .cta-form__copy .icon-list li > .ico { color: #7dd3fc; }
.bg-dark .cta-form__card, .bg-navy .cta-form__card { color: var(--color-text); }
@media (max-width: 900px) {
	.cta-form, .cta-form--wide-copy, .cta-form--wide-form { grid-template-columns: 1fr; }
}

/* =========================================================
   IMAGE QUOTE — portrait beside a large quotation
   ========================================================= */
.image-quote {
	display: grid;
	grid-template-columns: minmax(170px, 250px) 1fr;
	gap: 1.75rem 5rem;
	align-items: center;
	padding: clamp(1.25rem, 2vw, 2.25rem);
	max-width: var(--container-medium);
	margin-inline: auto;
}
.image-quote__media {
	width: 100%;
	max-width: 250px;
	height: clamp(280px, 30vw, 300px);
	overflow: hidden;
	border-radius: var(--radius-lg);
}
.image-quote__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
.image-quote__icon {
	display: block;
	font-size: clamp(4rem, 7vw, 6.25rem);
	line-height: 0.65;
	margin-bottom: 0.55rem;
	color: var(--pos-dark);
	font-weight: var(--fw-extrabold);
}
.image-quote__quote {
	margin: 0;
	font-size: clamp(1.1rem, 3vw, 1.75rem);
	line-height: 1.35;
	font-weight: var(--fw-medium);
	color: var(--pos-dark);
}
.image-quote__name { margin-top: 1.25rem; font-size: 1.4rem; font-weight: var(--fw-bold); line-height: 1.2; }
.image-quote__title { margin-top: 0.35rem; opacity: 0.72; font-size: 1rem; line-height: 1.2; }
@media (max-width: 900px) {
	.image-quote { grid-template-columns: 1fr; gap: 1.25rem; }
	.image-quote__media { max-width: 220px; height: clamp(260px, 60vw, 320px); }
}

/* Image quote on a dark section (About page) */
.bg-dark .image-quote__quote, .bg-dark .image-quote__icon, .bg-dark .image-quote__name,
.bg-navy .image-quote__quote, .bg-navy .image-quote__icon, .bg-navy .image-quote__name { color: #fff; }
.bg-dark .image-quote__title, .bg-navy .image-quote__title { color: rgba(255, 255, 255, 0.8); opacity: 1; }

/* =========================================================
   STEPS — numbered process ("How We Work")
   ========================================================= */
.steps {
	--steps-icon: 56px;
	--steps-col: 72px;
	--steps-gap: 1.5rem;
	position: relative;
	max-width: 900px;
	margin-inline: auto;
}
.steps::before {
	content: "";
	position: absolute;
	left: calc(var(--steps-col) / 2 - 1px);
	top: calc(var(--steps-icon) / 2);
	bottom: calc(var(--steps-icon) / 2);
	width: 2px;
	background: var(--pos-primary);
	opacity: 0.45;
}
.steps__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--steps-col) 1fr;
	column-gap: 1rem;
	align-items: start;
}
.steps__item + .steps__item { margin-top: var(--steps-gap); }
.steps__num {
	position: relative;
	z-index: 1;
	width: var(--steps-icon);
	height: var(--steps-icon);
	margin-inline: auto;
	border-radius: 50%;
	background: var(--pos-gradient);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: var(--fw-bold);
	line-height: 1;
	box-shadow: 0 0 0 6px var(--pos-light);
}
.steps__body {
	background: rgba(255, 255, 255, 0.6);
	border-radius: 14px;
	padding: 1.5rem;
}
.bg-white .steps__body, .steps--flat .steps__body { background: var(--pos-light); }
.steps__title { font-size: 1.35rem; margin-bottom: 0.5rem; }
.steps__text { margin: 0; color: var(--color-text); }
.steps--icons .steps__num { font-size: 1.4rem; }
@media (max-width: 767px) {
	.steps { --steps-icon: 48px; --steps-col: 60px; --steps-gap: 1.25rem; }
	.steps__body { padding: 1.25rem; }
}

/* =========================================================
   LIST CARD — bordered panel with icon + heading + text rows
   ========================================================= */
.list-card {
	--list-card-border: rgba(11, 18, 32, 0.12);
	border: 1px solid var(--list-card-border);
	border-radius: var(--radius-xl);
	background: #fff;
	padding: clamp(1.25rem, 2.5vw, 2.5rem);
	max-width: var(--container-medium);
	margin-inline: auto;
}
.list-card__heading { font-size: 1.25rem; margin-bottom: 1.5rem; }
.list-card__items { display: flex; flex-direction: column; }
.list-card__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.75rem;
	align-items: start;
	padding: 1.25rem 0;
	border-top: 1px solid var(--list-card-border);
}
.list-card__item:first-child { border-top: 0; padding-top: 0; }
.list-card__item:last-child { padding-bottom: 0; }
.list-card__item h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.list-card__item p { margin: 0; font-size: 1.1rem; color: var(--color-muted); }
.list-card--spacious .list-card__item { padding: 2.5rem 0; }
.list-card--spacious .list-card__item:first-child { padding-top: 1rem; }
.list-card--dashed .list-card__item { border-top-style: dashed; }
@media (max-width: 600px) {
	.list-card__item { gap: 1rem; }
	.list-card__item p { font-size: 1rem; }
}

/* =========================================================
   ALTERNATING ROWS — cards with image one side, copy the other
   ("Featured Conversations" on the accountants post)
   ========================================================= */
.alt-rows { display: flex; flex-direction: column; gap: 1.85rem; }
.alt-rows__intro { max-width: 70ch; margin: 0 auto 2.2rem; text-align: center; }
.alt-rows__intro p { color: var(--color-muted); }
.alt-row {
	display: grid;
	grid-template-columns: 5fr 7fr;
	background: #fff;
	border: 1px solid rgba(17, 24, 39, 0.08);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 14px 38px rgba(17, 24, 39, 0.08);
}
.alt-row--reverse .alt-row__media { order: 2; }
.alt-row__media {
	position: relative;
	min-height: 320px;
	background: var(--pos-light-grey);
}
.alt-row__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 1.5rem 1.5rem 3rem;
}
.alt-row__media--cover img { object-fit: cover; object-position: center top; padding: 0; }
.alt-row__inset {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	width: min(34%, 170px);
	background: #fff;
	border-radius: 0.75rem;
	border: 1px solid rgba(17, 24, 39, 0.08);
	padding: 0.45rem;
	box-shadow: 0 10px 28px rgba(17, 24, 39, 0.18);
}
.alt-row__inset img { position: static; width: 100%; height: auto; border-radius: 0.45rem; object-fit: contain; }
.alt-row__body {
	padding: clamp(1.4rem, 2.35vw, 2.6rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.alt-row__title { font-size: 1.5rem; margin-bottom: 0.9rem; }
.alt-row__text { line-height: 1.6; }
.alt-row__text > :last-child { margin-bottom: 0; }
.alt-row__attribution { margin-top: 1.15rem; }
.alt-row__name { font-weight: var(--fw-bold); font-size: 1.15rem; line-height: 1.25; }
.alt-row__role { margin-top: 0.25rem; opacity: 0.75; }
.alt-row__cta { margin-top: 1.3rem; }
@media (max-width: 767px) {
	.alt-row { grid-template-columns: 1fr; }
	.alt-row--reverse .alt-row__media { order: 0; }
	.alt-row__media { min-height: 260px; }
	.alt-row__body { padding: 1.3rem 1.2rem 1.35rem; }
}

/* =========================================================
   TEAM GRID — portraits (About page)
   ========================================================= */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.team__member img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 273 / 333; object-fit: cover; margin-bottom: 1rem; }
.team__name { font-size: 1.15rem; font-weight: var(--fw-bold); margin-bottom: 1rem; }
.team__bio { line-height: 1.65rem; margin: 0; }
@media (max-width: 991px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .team { grid-template-columns: 1fr; } }

/* =========================================================
   TWO COLUMN — generic side-by-side panels (with optional panel bg)
   ========================================================= */
.two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--col-gap);
	align-items: center;
}
.two-col__panel { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius-lg); }
.two-col__panel--grey { background: var(--pos-light-grey); }
.two-col__panel--light { background: var(--pos-light); }
.two-col__panel--cyan { background: var(--pos-pale-cyan); }
.two-col__panel--dark { background: var(--pos-navy); color: #fff; }
.two-col__panel--dark h2, .two-col__panel--dark h3 { color: #fff; }
.two-col > div > img, .two-col__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* =========================================================
   PROSE — free text section (the "WYSIWYG" component)
   ========================================================= */
.prose { max-width: var(--container-medium); margin-inline: auto; }
.prose h2, .prose h3 { margin-bottom: 1.5rem; }
.prose h2 + p, .prose h3 + p { margin-top: -0.5rem; }
.prose--narrow { max-width: var(--container-narrow); }
.prose img { border-radius: var(--radius-lg); margin-block: 1.5rem; }
.prose ul li, .prose ol li { margin-bottom: 0.5rem; }

/* =========================================================
   LOGO CARD GRID — client/press logos in cards (post pages)
   ========================================================= */
.logo-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.logo-cards img { height: 56px; width: auto; max-width: 100%; object-fit: contain; margin-inline: auto; }
.logo-cards .card { align-items: center; justify-content: center; }
@media (max-width: 900px) { .logo-cards { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================
   FIGURE — captioned image (post body / explainer graphics)
   ========================================================= */
.figure { margin: 0 auto; max-width: var(--container-medium); }
.figure img { width: 100%; border-radius: var(--radius-lg); }
.figure figcaption { margin-top: 0.75rem; text-align: center; color: var(--color-muted); font-size: var(--fs-small); }

/* =========================================================
   CLOSING CTA — dark rounded panel with heading + buttons
   ========================================================= */
.cta-panel {
	background: var(--pos-navy);
	color: #fff;
	border-radius: var(--radius-xl);
	padding: clamp(2rem, 2rem + 3vw, 4rem);
	text-align: center;
}
.cta-panel h2 { color: #fff; margin-bottom: 0.75rem; }
.cta-panel p { color: rgba(255, 255, 255, 0.85); max-width: 720px; margin-inline: auto; }
.cta-panel .btn-row { justify-content: center; margin-top: 1.5rem; }
.cta-panel--gradient { background: var(--pos-gradient); }

/* =========================================================
   PAGE HERO (simple) — for legal pages / archives
   ========================================================= */
.page-hero {
	background: var(--pos-light);
	padding-block: clamp(2.5rem, 2rem + 3vw, 4rem);
	text-align: center;
}
.page-hero h1 { margin-bottom: 0.5rem; }
.page-hero p { color: var(--color-muted); margin: 0; }

/* Legal documents: readable column, native blocks */
.legal-doc {
	max-width: var(--container-narrow);
	margin-inline: auto;
	padding: var(--section-py) var(--gutter);
}
.legal-doc h2 { font-size: var(--fs-h3); margin-top: 2rem; }
.legal-doc h3 { font-size: 1.15rem; margin-top: 1.5rem; }
.legal-doc ul li { margin-bottom: 0.5rem; }

/* =========================================================
   BLOG — post card grid + single post layout
   ========================================================= */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(var(--blog-cols, 3), 1fr);
	gap: 1.5rem;
}
.post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--radius-lg);
	overflow: hidden;
	color: var(--color-text);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.post-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); color: var(--color-text); }
.post-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--pos-light-grey);
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: 1rem; }
.post-card__title {
	font-size: 1.25rem;
	font-weight: var(--fw-bold);
	color: var(--pos-primary);
	margin: 0 0 0.5rem;
	line-height: 1.3;
}
.post-card__date { font-size: var(--fs-small); color: rgba(0, 0, 0, 0.65); margin-bottom: 1rem; }
.post-card__excerpt { flex: 1; margin-bottom: 1rem; }
.post-card__more { align-self: flex-start; }
.blog-pagination { margin-top: 2rem; }
.blog-pagination ul { display: flex; justify-content: center; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.blog-pagination a, .blog-pagination span {
	display: inline-block;
	padding: 0.5rem 0.9rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	color: var(--pos-dark);
}
.blog-pagination .current { background: var(--pos-primary); border-color: var(--pos-primary); color: #fff; }
.blog-empty { text-align: center; color: var(--color-muted); }
@media (max-width: 991px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

/* Featured + latest posts block */
.fblog { display: grid; grid-template-columns: 7fr 5fr; gap: 1.5rem; }
.fblog--solo { grid-template-columns: 1fr; }
.fblog__heading { text-align: center; margin-bottom: 2rem; }
.fblog__list { display: flex; flex-direction: column; gap: 1rem; }
.fblog__item {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 1rem;
	align-items: center;
	color: var(--color-text);
	padding: 0.5rem;
	border-radius: var(--radius-md);
}
.fblog__item:hover { background: var(--pos-light); color: var(--color-text); }
.fblog__item-media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sm); background: var(--pos-light-grey); }
.fblog__item-media img { width: 100%; height: 100%; object-fit: cover; }
.fblog__item-date { display: block; font-size: var(--fs-small); color: var(--color-muted); }
.fblog__item-title { font-weight: var(--fw-semibold); color: var(--pos-dark); }
@media (max-width: 900px) { .fblog { grid-template-columns: 1fr; } }

/* Single post: hero uses .hero--center with category eyebrow; body below. */
.post-hero .hero__title { max-width: 1000px; }
.post-hero__meta { color: var(--color-muted); margin-top: 0.5rem; }
.post-hero__intro { font-size: var(--fs-lead); max-width: 820px; margin: 1.25rem auto 0; }

/* Article reading column */
.pos-content {
	max-width: var(--container-blog);
	margin-inline: auto;
	padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--gutter) var(--section-py);
	font-size: 1.0625rem;
	line-height: 1.7;
}
.pos-content > h2 { margin-top: 2.5rem; margin-bottom: 1rem; }
.pos-content > h3 { margin-top: 2rem; margin-bottom: 0.75rem; font-size: 1.35rem; }
.pos-content > p { margin-bottom: 1.25rem; }
.pos-content ul, .pos-content ol { margin-bottom: 1.5rem; }
.pos-content li { margin-bottom: 0.4rem; }
.pos-content img { border-radius: var(--radius-lg); }
.pos-content .split, .pos-content .cards, .pos-content .list-card, .pos-content .steps, .pos-content .alt-rows, .pos-content .image-quote, .pos-content .logo-cards {
	margin-block: 2.5rem;
}
.pos-content .full-bleed {
	/* let wide components break out of the reading column */
	width: min(var(--container-max), 100vw - 2 * var(--gutter));
	margin-left: 50%;
	transform: translateX(-50%);
}

/* --- Article components (see BLOG-STYLE-GUIDE.md) --- */
.pos-lead { font-size: 1.3rem; line-height: 1.55; color: var(--color-muted); font-weight: var(--fw-medium); }
.pos-eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--pos-primary);
	margin: 1.5rem 0 0.5rem;
}
.pos-arrow-list { list-style: none; padding-left: 0; margin: 0 0 1.5rem; }
.pos-arrow-list li { position: relative; padding-left: 1.6em; margin-bottom: 0.6rem; }
.pos-arrow-list li::before {
	content: "\2192"; /* → */
	position: absolute;
	left: 0;
	color: var(--pos-primary);
	font-weight: var(--fw-bold);
}
.pos-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0 2rem; }
.pos-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: 0.98rem; }
.pos-table-scroll .pos-table { margin: 0; min-width: 560px; }
.pos-table th, .pos-table td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--pos-grey-200); }
.pos-table thead th { background: var(--pos-primary); color: #fff; font-weight: var(--fw-semibold); }
.pos-table tbody td:first-child { font-weight: var(--fw-semibold); color: var(--pos-dark); }
.pos-table tbody tr:nth-child(even) td { background: var(--pos-light); }
.pos-panel {
	background: var(--pos-pale-cyan);
	border-left: 4px solid var(--pos-primary);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: 1.5rem 1.75rem;
	margin: 2rem 0;
}
.pos-panel > :last-child { margin-bottom: 0; }
.pos-panel__label {
	display: block;
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--pos-primary);
	margin-bottom: 0.75rem;
}
.pos-panel--highlight { background: #f3effd; border-left-color: var(--pos-secondary); }
.pos-panel--highlight .pos-panel__label { color: var(--pos-secondary); }
.pos-panel--grey { background: var(--pos-light); border-left-color: var(--pos-grey-500); }
.pos-panel--grey .pos-panel__label { color: var(--color-muted); }
.pos-banner {
	background: var(--pos-navy);
	color: #fff;
	border-radius: var(--radius-xl);
	padding: clamp(2rem, 1.5rem + 2vw, 3rem);
	text-align: center;
	margin: 2.5rem 0;
}
.pos-banner__title { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: var(--fw-bold); line-height: 1.3; margin-bottom: 0.75rem; color: #fff; }
.pos-banner__sub { color: rgba(255, 255, 255, 0.85); max-width: 720px; margin: 0 auto; }
.pos-banner .btn { margin-top: 1.5rem; }
.pos-banner--gradient { background: var(--pos-gradient); }
.pos-quote {
	margin: 2rem 0;
	padding: 1.5rem 1.5rem 1.5rem 2rem;
	border-left: 4px solid var(--pos-primary);
	background: var(--pos-light);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pos-quote p { font-size: 1.125rem; font-style: italic; line-height: 1.7; margin: 0; }
.pos-quote__cite { display: block; margin-top: 1rem; font-style: normal; font-weight: var(--fw-semibold); }
.pos-quote__cite span { display: block; font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--color-muted); }
.pos-video { margin: 2rem auto; }
.pos-video__title { font-size: 1.35rem; margin-bottom: 0.25rem; }
.pos-video__desc { color: var(--color-muted); margin-bottom: 1rem; }
.pos-video__frame { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.pos-video__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.pos-figure { margin: 2rem 0; }
.pos-figure figcaption { margin-top: 0.75rem; text-align: center; color: var(--color-muted); font-size: var(--fs-small); }
.pos-download {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	margin: 1rem 0;
	color: var(--pos-dark);
}
.pos-download:hover { border-color: var(--pos-primary); color: var(--pos-dark); }
.pos-download .ico { font-size: 1.5rem; color: var(--pos-primary); }

/* Descendant-specificity guard: centred components inside the reading column. */
.pos-content .pos-banner, .pos-content .pos-video { margin-inline: 0; }