/*
 * SAI Insurance — design tokens and components.
 *
 * The token block is a direct port of the Tailwind `@theme` layer the React
 * build used, so colour, radius, and shadow values are identical. Everything
 * below it is hand-written CSS rather than utility classes, because Elementor
 * widgets emit semantic markup and there's no build step to purge with.
 */

/* -------------------------------------------------------------------------
 * Tokens
 * ---------------------------------------------------------------------- */

:root {
	/*
	 * The neutral ramp, every step on hue 220.
	 *
	 * It already was, apart from the one that mattered: ink, muted ink and
	 * both borders sat between 216 and 225 degrees, while the ground sat at
	 * 60 — a warm cream a full 160 degrees away from everything it touched.
	 * That cream is the ground generated "premium" pages default to. It is a
	 * good colour for a ceramics studio and it undersells a fifty-year-old
	 * brokerage quoting against a carrier.
	 *
	 * So the ground moves onto the ramp the rest of the system was already
	 * using, at the same lightness it had. Ink and border shift by a single
	 * channel step each, which nobody will see, so that the ramp is one
	 * temperature by construction rather than by coincidence.
	 *
	 * Navy and red are the brand and do not move.
	 */
	--sai-ink: #0f182a;
	--sai-ink-muted: #4b5b7c;
	--sai-surface: #f6f7f9;
	--sai-surface-elevated: #ffffff;
	--sai-border: #e4e7ec;
	--sai-border-strong: #c7ccd6;

	/* Navy primary, straight from the brand palette. */
	--sai-brand: #1c2433;
	--sai-brand-600: #2a3547;
	--sai-brand-700: #12182a;
	--sai-brand-soft: #eef0f4;
	--sai-brand-tint: #d5dbe4;

	/*
	 * Pure red is the signature colour but fails 4.5:1 as text. --sai-accent
	 * (5.6:1 on white) carries CTAs and copy; --sai-accent-bold is reserved
	 * for decorative fills and small marks.
	 */
	--sai-accent: #d10000;
	--sai-accent-600: #a60000;
	--sai-accent-bold: #ff0000;
	--sai-accent-soft: #fff0f0;

	--sai-success: #166534;
	--sai-warn: #9a6700;

	--sai-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
	--sai-font-serif: 'Newsreader', ui-serif, Georgia, serif;
	--sai-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

	/*
	 * Corner radius is a three-step scale named by role, not by size, plus a
	 * pill for things that are genuinely round. Six anonymous steps had grown
	 * up with no rule about which surface got which, and 2px had appeared
	 * alongside them; nobody notices any single value, everybody feels the
	 * absence of a system.
	 *
	 *   control  inputs, selects, buttons, chips, small notices
	 *   surface  cards, panels, forms, prose, search results
	 *   band     large full-width surfaces: CTA bands, assessment panels
	 *   pill     avatars, toggles, dots — things that are actually circular
	 *
	 * A button and the input beside it now share a radius, which is the point.
	 */
	--sai-radius-control: 8px;
	--sai-radius-surface: 14px;
	--sai-radius-band: 28px;
	--sai-radius-pill: 999px;

	--sai-shadow-soft: 0 1px 2px rgba(17, 24, 39, 0.04), 0 2px 8px rgba(17, 24, 39, 0.04);
	--sai-shadow-md: 0 2px 4px rgba(17, 24, 39, 0.06), 0 8px 24px rgba(17, 24, 39, 0.06);
	--sai-shadow-lg: 0 12px 40px rgba(17, 24, 39, 0.16);

	--sai-container: 72rem;
	--sai-container-narrow: 56rem;
	--sai-container-wide: 80rem;

	color-scheme: light;
}

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

/*
 * Tailwind's preflight carried this in the React build, and the hand-written
 * port dropped it. Without it every element that pairs a width with padding
 * measures wider than its parent: `.sai-container` resolves to 100% + 2.5rem,
 * so the document scrolls sideways on any viewport narrower than the
 * container plus its gutters, and the mobile menu button lands partly off the
 * right edge.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}

body {
	margin: 0;
	background: var(--sai-surface);
	color: var(--sai-ink);
	font-family: var(--sai-font-sans);
	font-feature-settings: 'ss01', 'cv11';
	line-height: 1.6;
}

.sai-site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.sai-main {
	flex: 1 0 auto;
	outline: none;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	color: var(--sai-ink);
	font-family: var(--sai-font-serif);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

p {
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

/*
 * Two-tone focus ring: a white gap inside a dark outer ring, so it stays
 * visible on the navy header and on the red buttons alike.
 */
:where(a, button, [role='button'], input, select, textarea, summary, [tabindex]):focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px #ffffff,
		0 0 0 5px var(--sai-ink);
}

::selection {
	background: var(--sai-brand);
	color: #ffffff;
}

.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;
}

.sai-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--sai-brand);
	border-bottom-right-radius: var(--sai-radius-control);
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-120%);
	transition: transform 0.15s ease-out;
}

.sai-skip-link:focus {
	transform: translateY(0);
}

/* -------------------------------------------------------------------------
 * Layout primitives
 * ---------------------------------------------------------------------- */

.sai-container {
	width: 100%;
	max-width: var(--sai-container);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.sai-container--narrow {
	max-width: var(--sai-container-narrow);
}

.sai-container--wide {
	max-width: var(--sai-container-wide);
}

.sai-section {
	padding-block: 5rem;
}

.sai-band {
	background: var(--sai-surface);
}

.sai-band--elevated {
	border-block: 1px solid var(--sai-border);
	background: var(--sai-surface-elevated);
}

.sai-grid {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sai-btn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2rem;
}

@media (min-width: 640px) {
	.sai-container {
		padding-inline: 2rem;
	}
}

@media (min-width: 768px) {
	.sai-grid--cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sai-grid--cols-3,
	.sai-grid--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sai-section {
		padding-block: 7rem;
	}

	.sai-grid--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sai-grid--cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Typography helpers
 * ---------------------------------------------------------------------- */

.sai-display {
	font-family: var(--sai-font-serif);
	font-variation-settings: 'opsz' 72;
	letter-spacing: -0.02em;
	line-height: 0.95;
}

.sai-section__heading {
	font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
	text-wrap: balance;
}

.sai-section__body {
	max-width: 42rem;
	margin-top: 1rem;
	color: var(--sai-ink-muted);
	font-size: 1.125rem;
	line-height: 1.7;
}

/* The signature italic-with-red-highlight treatment on emphasised phrases. */
.sai-emphasized em,
/*
 * Emphasis in a headline is the italic, and only the italic.
 *
 * This used to carry a translucent red bar behind the italic phrase as well,
 * a highlighter-pen effect. Two marks doing one job is one mark too many: the
 * italic already says "this is the part that matters", and the bar competed
 * with the accent colour everywhere else on the page while pinning the
 * emphasis to a rectangle that never quite fits the glyphs it sits behind.
 * Newsreader's italic is a true italic with real cursive letterforms, not a
 * slanted roman, so it carries the emphasis on its own.
 */
.sai-hero__title em {
	color: var(--sai-brand);
	font-style: italic;
}

.sai-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	color: var(--sai-ink-muted);
	font-family: var(--sai-font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.sai-eyebrow--accent {
	color: var(--sai-accent);
	font-family: var(--sai-font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
}

.sai-eyebrow--on-dark {
	color: rgba(255, 255, 255, 0.7);
}

.sai-eyebrow--plain {
	font-family: var(--sai-font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.22em;
}

.sai-red-rule {
	display: inline-block;
	width: 2.25rem;
	height: 3px;
	flex: 0 0 auto;
	border-radius: var(--sai-radius-control);
	background: var(--sai-accent-bold);
}

.sai-section-head {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.sai-section-head__main {
	max-width: 42rem;
}

.sai-section-head__main > * + * {
	margin-top: 0.75rem;
}

.sai-section-head--display .sai-section__heading {
	font-family: var(--sai-font-serif);
	font-variation-settings: 'opsz' 72;
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
	line-height: 0.95;
}

.sai-inline-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--sai-brand);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

.sai-inline-link:hover {
	text-decoration: underline;
}

@media (min-width: 640px) {
	.sai-section-head--split {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}

/* Long-form content: articles, principle bodies, plain pages. */

.sai-prose > * + * {
	margin-top: 1.25rem;
}

.sai-prose h2 {
	margin-top: 3rem;
	font-size: 1.875rem;
}

.sai-prose h3 {
	margin-top: 2.5rem;
	font-size: 1.375rem;
}

.sai-prose p,
.sai-prose li {
	color: var(--sai-ink);
	font-size: 1.125rem;
	line-height: 1.7;
}

.sai-prose ul,
.sai-prose ol {
	margin-left: 1.25rem;
	padding: 0;
}

.sai-prose ul {
	list-style: disc;
}

.sai-prose ol {
	list-style: decimal;
}

.sai-prose li {
	margin-top: 0.5rem;
	padding-left: 0.25rem;
}

.sai-prose li::marker {
	color: var(--sai-accent);
}

.sai-prose strong {
	color: var(--sai-ink);
	font-weight: 600;
}

.sai-prose a {
	color: var(--sai-brand);
	text-decoration: underline;
	text-decoration-color: var(--sai-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.sai-prose blockquote {
	margin: 2rem 0 0;
	padding-left: 1.25rem;
	border-left: 4px solid var(--sai-accent);
	color: var(--sai-ink);
	font-family: var(--sai-font-serif);
	font-size: 1.25rem;
	font-style: italic;
}

.sai-prose img {
	border-radius: var(--sai-radius-surface);
}

/* -------------------------------------------------------------------------
 * Icons, buttons, pills
 * ---------------------------------------------------------------------- */

.sai-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex: 0 0 auto;
}

.sai-icon--sm {
	width: 1rem;
	height: 1rem;
}

.sai-icon--xs {
	width: 0.875rem;
	height: 0.875rem;
}

.sai-icon--accent {
	color: var(--sai-accent);
}

.sai-icon--brand {
	color: var(--sai-brand);
}

.sai-btn {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	border: 0;
	border-radius: var(--sai-radius-control);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

/*
 * A press should feel like one. 2% is small enough that it reads as the
 * control taking the tap rather than as an animation, and it is the only
 * feedback a touch device gets, since hover never fires there.
 */
.sai-btn:active {
	transform: scale(0.98);
}

.sai-btn--lg {
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
}

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

.sai-btn--primary {
	background: var(--sai-accent);
	box-shadow: var(--sai-shadow-soft);
	color: #ffffff;
}

.sai-btn--primary:hover {
	background: var(--sai-accent-600);
}

.sai-btn--secondary {
	background: var(--sai-brand);
	box-shadow: var(--sai-shadow-soft);
	color: #ffffff;
}

.sai-btn--secondary:hover {
	background: var(--sai-brand-600);
}

.sai-btn--ghost {
	background: transparent;
	color: var(--sai-brand);
}

.sai-btn--ghost:hover {
	background: var(--sai-brand-soft);
}

.sai-btn--on-dark {
	color: #ffffff;
}

.sai-btn--on-dark:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* A quieter "link" button for use on the navy bands. */
.sai-btn--link-on-dark {
	padding-inline: 1rem;
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
}

.sai-btn--link-on-dark:hover {
	color: #ffffff;
}

.sai-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--sai-border-strong);
	border-radius: var(--sai-radius-pill);
	background: var(--sai-surface-elevated);
	color: var(--sai-ink-muted);
	font-size: 0.75rem;
	font-weight: 500;
}

.sai-pill--sm {
	padding: 0.15rem 0.6rem;
	border-color: var(--sai-border);
	background: var(--sai-surface);
	font-size: 0.6875rem;
}

.sai-pill--on-dark {
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(4px);
}

.sai-pill__icon {
	color: var(--sai-brand);
}

.sai-pill--on-dark .sai-pill__icon {
	color: inherit;
}

.sai-dot {
	display: inline-block;
	width: 0.375rem;
	height: 0.375rem;
	flex: 0 0 auto;
	margin-top: 0.55rem;
	border-radius: var(--sai-radius-pill);
	background: var(--sai-brand);
}

.sai-dot--accent {
	background: var(--sai-accent-bold);
}

/* -------------------------------------------------------------------------
 * Motion
 * ---------------------------------------------------------------------- */

.sai-fade-up {
	animation: sai-fade-up 780ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sai-fade-up--1 { animation-delay: 80ms; }
.sai-fade-up--2 { animation-delay: 160ms; }
.sai-fade-up--3 { animation-delay: 240ms; }
.sai-fade-up--4 { animation-delay: 320ms; }
.sai-fade-up--5 { animation-delay: 400ms; }

@keyframes sai-fade-up {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*
 * Scroll reveal.
 *
 * The same gesture the hero already makes, applied to blocks further down the
 * page: identical keyframe, curve, and stagger step. `.sai-reveal` is added by
 * JavaScript and only ever to elements that are below the fold at the time, so
 * nothing above the fold can flash, and a page with no JavaScript simply never
 * gets the class and renders as it always did. Both classes are removed once
 * the animation ends, which also drops the composited layer.
 */
.sai-reveal {
	opacity: 0;
	transform: translateY(14px);
}

.sai-reveal--in {
	animation: sai-fade-up 780ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/*
 * Header depth.
 *
 * At rest the bar is separated from the page by a hairline. Once the page has
 * scrolled, the hairline gives way to a soft shadow so the bar reads as
 * sitting above the content it now covers. Height never changes: condensing
 * the header on scroll costs layout shift for no real gain.
 */
.sai-header {
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.sai-header--scrolled {
	border-bottom-color: transparent;
	box-shadow: 0 10px 30px -18px rgba(2, 6, 23, 0.85);
}

/* The sentinel the header watches. Never painted, never focusable. */
.sai-scroll-sentinel {
	position: absolute;
	top: 0;
	height: 1px;
	width: 1px;
	pointer-events: none;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/*
	 * The blanket rule above collapses the animation to nothing, which would
	 * strand a `.sai-reveal` element at opacity 0. Reveal is skipped entirely
	 * in JavaScript under reduced motion, and this is the belt-and-braces.
	 */
	.sai-reveal {
		opacity: 1;
		transform: none;
	}

	/*
	 * `*, *::before, *::after` does not reach `::details-content`, so the FAQ
	 * disclosure needs naming outright or it keeps easing open for a visitor
	 * who asked for no motion.
	 */
	.sai-faq::details-content {
		transition-duration: 0.01ms !important;
	}
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.sai-header {
	position: sticky;
	top: 0;
	z-index: 40;
	border-bottom: 1px solid var(--sai-brand-700);
	background: var(--sai-brand);
	color: #ffffff;
}

@supports (backdrop-filter: blur(4px)) {
	.sai-header {
		background: color-mix(in srgb, var(--sai-brand) 95%, transparent);
		backdrop-filter: blur(8px);
	}
}

.sai-header__bar {
	display: flex;
	height: 4rem;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.sai-logo {
	flex: 0 0 auto;
	line-height: 0;
}

.sai-logo img {
	height: 2.5rem;
	width: auto;
}

.sai-logo__text {
	color: #ffffff;
	font-family: var(--sai-font-serif);
	font-size: 1.25rem;
	line-height: 1.2;
}

.sai-header__desktop {
	display: none;
	align-items: center;
	gap: 0.75rem;
}

.sai-nav__list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sai-nav__item {
	position: relative;
}

.sai-nav__link {
	position: relative;
	display: inline-flex;
	height: 2.5rem;
	align-items: center;
	gap: 0.25rem;
	padding-inline: 0.75rem;
	border: 0;
	border-radius: var(--sai-radius-control);
	background: none;
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: color 0.15s ease;
}

.sai-nav__link:hover,
.sai-nav__item.is-active .sai-nav__link {
	color: #ffffff;
}

.sai-nav__rule {
	position: absolute;
	inset-inline: 0.75rem;
	bottom: 0.25rem;
	height: 2px;
	border-radius: var(--sai-radius-control);
	background: var(--sai-accent-bold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.sai-nav__link:hover .sai-nav__rule,
.sai-nav__item.is-active .sai-nav__rule,
.sai-nav__trigger[aria-expanded='true'] .sai-nav__rule {
	transform: scaleX(1);
}

.sai-nav__chevron {
	transition: transform 0.2s ease;
}

.sai-nav__trigger[aria-expanded='true'] .sai-nav__chevron {
	transform: rotate(180deg);
}

.sai-header__cta {
	display: none;
	height: 2.5rem;
	align-items: center;
	padding-inline: 1rem;
	border-radius: var(--sai-radius-control);
	background: var(--sai-accent);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
	color: #ffffff;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.sai-header__cta:hover {
	background: var(--sai-accent-600);
}

.sai-header__tools {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sai-header__search {
	display: inline-flex;
	width: 2.5rem;
	height: 2.5rem;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--sai-radius-control);
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sai-header__search:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.sai-header__divider {
	display: none;
	width: 1px;
	height: 1.5rem;
	background: rgba(255, 255, 255, 0.2);
}

.sai-header__phone {
	display: none;
	align-items: center;
	gap: 0.5rem;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

.sai-header__phone:hover {
	color: #ffffff;
}

.sai-header__phone .sai-icon {
	color: var(--sai-accent-bold);
}

.sai-header__burger {
	display: inline-flex;
	width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--sai-radius-control);
	background: none;
	color: #ffffff;
	cursor: pointer;
}

@media (min-width: 640px) {
	.sai-header__bar {
		height: 5rem;
	}

	.sai-logo img {
		height: 3rem;
	}

	.sai-header__cta--compact {
		display: inline-flex;
	}
}

@media (min-width: 1024px) {
	.sai-header__desktop {
		display: flex;
	}

	.sai-header__cta {
		display: inline-flex;
	}

	.sai-header__cta--compact,
	.sai-header__burger {
		display: none;
	}
}

@media (min-width: 1280px) {
	.sai-header__divider,
	.sai-header__phone {
		display: inline-flex;
	}
}

/* Mega menu ------------------------------------------------------------- */

.sai-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 50;
	width: min(90vw, 900px);
	margin-top: 0.5rem;
	overflow: hidden;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-surface);
	background: var(--sai-surface-elevated);
	box-shadow: var(--sai-shadow-md);
	color: var(--sai-ink);
	transform: translateX(-50%);
}

.sai-mega[hidden] {
	display: none;
}

.sai-mega__cols {
	display: grid;
}

.sai-mega__col {
	padding: 1.25rem;
	border-bottom: 1px solid var(--sai-border);
}

.sai-mega__label {
	color: var(--sai-ink-muted);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sai-mega__col ul {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.sai-mega__col a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem;
	border-radius: var(--sai-radius-control);
	text-decoration: none;
}

.sai-mega__col a:hover {
	background: var(--sai-brand-soft);
}

.sai-mega__icon {
	display: inline-flex;
	width: 2rem;
	height: 2rem;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border-radius: var(--sai-radius-control);
	background: var(--sai-surface);
	color: var(--sai-brand);
}

.sai-mega__text {
	min-width: 0;
}

.sai-mega__name {
	display: block;
	overflow: hidden;
	font-size: 0.875rem;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sai-mega__blurb {
	display: block;
	overflow: hidden;
	color: var(--sai-ink-muted);
	font-size: 0.75rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sai-mega__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1.25rem;
	border-top: 1px solid var(--sai-border);
	background: var(--sai-surface);
	font-size: 0.875rem;
}

.sai-mega__all {
	color: var(--sai-brand);
	font-weight: 500;
	text-decoration: none;
}

.sai-mega__aside {
	color: var(--sai-ink-muted);
	text-decoration: none;
}

@media (min-width: 640px) {
	.sai-mega__cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sai-mega__col {
		border-bottom: 0;
		border-right: 1px solid var(--sai-border);
	}

	.sai-mega__col:last-child {
		border-right: 0;
	}
}

/* Mobile drawer --------------------------------------------------------- */

.sai-drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
}

.sai-drawer[hidden] {
	display: none;
}

.sai-drawer__backdrop {
	position: absolute;
	inset: 0;
	border: 0;
	background: rgba(15, 23, 42, 0.5);
	cursor: pointer;
}

.sai-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	width: min(86vw, 400px);
	height: 100%;
	flex-direction: column;
	overflow-y: auto;
	background: var(--sai-brand);
	box-shadow: var(--sai-shadow-lg);
	color: #ffffff;
	animation: sai-slide-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes sai-slide-in {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

.sai-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--sai-brand-700);
}

.sai-drawer__close {
	display: inline-flex;
	width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--sai-radius-control);
	background: none;
	color: #ffffff;
	cursor: pointer;
}

.sai-drawer__nav {
	flex: 1 1 auto;
	padding: 1.25rem;
}

.sai-drawer__list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sai-drawer__list a {
	display: block;
	padding: 0.75rem;
	border-radius: var(--sai-radius-control);
	color: rgba(255, 255, 255, 0.85);
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
}

.sai-drawer__list a:hover,
.sai-drawer__list .current-menu-item > a {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

.sai-drawer__products {
	margin-top: 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--sai-radius-control);
}

.sai-drawer__products summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	font-family: var(--sai-font-mono);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	list-style: none;
	text-transform: uppercase;
}

.sai-drawer__products summary::-webkit-details-marker {
	display: none;
}

.sai-drawer__products[open] summary .sai-icon {
	transform: rotate(180deg);
}

.sai-drawer__products ul {
	margin: 0;
	padding: 0 0.75rem 0.75rem;
	list-style: none;
}

.sai-drawer__products a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem;
	border-radius: var(--sai-radius-control);
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.875rem;
	text-decoration: none;
}

.sai-drawer__products a:hover {
	background: rgba(255, 255, 255, 0.05);
	color: #ffffff;
}

.sai-drawer__products .sai-icon {
	color: var(--sai-accent-bold);
}

.sai-drawer__foot {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: auto;
	padding: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sai-drawer__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

.sai-drawer__phone .sai-icon {
	color: var(--sai-accent-bold);
}

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */

.sai-hero {
	position: relative;
	overflow: hidden;
	padding-block: 4rem 6rem;
}

/*
 * The hero photograph sits under the wash, not behind a scrim.
 *
 * A full-bleed picture with a dark overlay dropped on top is the house style
 * of every insurance site that bought a template, and it makes the headline
 * fight the image for the same pixels. Instead the photograph is masked so it
 * is only ever at strength in the top-right, and has faded to nothing by the
 * time it reaches the column the copy is set in. The headline is then reading
 * against plain surface colour, and the photograph is atmosphere.
 */
.sai-hero__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 58% 54%;
	opacity: 0.6;
	pointer-events: none;
	-webkit-mask-image:
		linear-gradient(to right, transparent 6%, rgba(0, 0, 0, 0.55) 46%, #000 78%),
		linear-gradient(to bottom, #000 40%, transparent 92%);
	mask-image:
		linear-gradient(to right, transparent 6%, rgba(0, 0, 0, 0.55) 46%, #000 78%),
		linear-gradient(to bottom, #000 40%, transparent 92%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* Warms the photograph into the page rather than letting it sit on top. */
.sai-hero--photo .sai-hero__wash {
	background-image:
		linear-gradient(to right, var(--sai-surface) 12%, color-mix(in srgb, var(--sai-surface) 55%, transparent) 42%, transparent 66%),
		radial-gradient(ellipse 900px 500px at 85% 0%, color-mix(in srgb, var(--sai-brand-tint) 45%, transparent), transparent 70%);
	height: 100%;
}

@media (max-width: 60rem) {
	/*
	 * One column on a phone means the copy is over the photograph rather than
	 * beside it, so the horizontal fade has nothing left to fade towards.
	 */
	.sai-hero__photo {
		opacity: 0.28;
		-webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 88%);
		mask-image: linear-gradient(to bottom, #000 30%, transparent 88%);
	}
}

.sai-hero__wash {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: -1;
	height: 700px;
	pointer-events: none;
	background-image:
		radial-gradient(ellipse 900px 500px at 85% 0%, color-mix(in srgb, var(--sai-brand-tint) 65%, transparent), transparent 65%),
		radial-gradient(ellipse 700px 350px at 10% 90%, color-mix(in srgb, var(--sai-accent-soft) 75%, transparent), transparent 60%);
}

.sai-hero__grid {
	display: grid;
	max-width: var(--sai-container);
	margin-inline: auto;
	padding-inline: 1.25rem;
	gap: 3.5rem;
	align-items: center;
}

.sai-hero__title {
	margin-top: 1.75rem;
	color: var(--sai-ink);
	font-family: var(--sai-font-serif);
	font-variation-settings: 'opsz' 72;
	/*
	 * Retuned for Newsreader, which sets appreciably wider than Fraunces did
	 * at the same size: the headline grew from three lines to four on a
	 * 1440 viewport before this came down. Measured: 72px still wraps to four,
	 * 68px holds three with a 474px last line, so the ceiling is 4.25rem.
	 * Leading also moves above 1.0,
	 * because the italic phrase carries a descender and a sub-1.0 line box
	 * runs it into the line beneath.
	 */
	font-size: clamp(2.6rem, 1.3rem + 4.4vw, 4.25rem);
	letter-spacing: -0.015em;
	line-height: 1.04;

	/*
	 * `pretty` rather than `balance`. Balance evens the line widths, which on
	 * a headline this long spends an extra line to do it: measured at 1,730px
	 * of text in a 611px column, balance produced four lines of 335/374/491/530
	 * where filling produces three. Balance earns its place on two-line
	 * headings; here it just made the hero taller.
	 */
	text-wrap: pretty;
}

.sai-hero__body {
	max-width: 36rem;
	margin-top: 1.75rem;
	color: var(--sai-ink-muted);
	font-size: 1.125rem;
	line-height: 1.7;
}

.sai-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 2rem;
	margin-top: 2.5rem;
	color: var(--sai-ink-muted);
	font-size: 0.875rem;
}

.sai-hero__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--sai-ink);
	font-weight: 500;
	text-decoration: none;
}

.sai-hero__phone:hover {
	color: var(--sai-brand);
}

.sai-hero__phone-icon {
	color: var(--sai-accent);
}

@media (min-width: 640px) {
	.sai-hero {
		padding-block: 6rem 9rem;
	}

	.sai-hero__grid {
		padding-inline: 2rem;
	}

	.sai-hero__body {
		font-size: 1.25rem;
	}
}

@media (min-width: 1024px) {
	.sai-hero__grid {
		grid-template-columns: 7fr 5fr;
		gap: 2.5rem;
	}
}

/* Stat card ------------------------------------------------------------- */

.sai-statcard {
	position: relative;
	max-width: 28rem;
	margin-inline: auto;
}

.sai-statcard__blob {
	position: absolute;
	border-radius: var(--sai-radius-band);
}

.sai-statcard__blob--a {
	top: -1.5rem;
	left: -2rem;
	width: 7rem;
	height: 7rem;
	background: var(--sai-accent-soft);
}

.sai-statcard__blob--b {
	right: -1.25rem;
	bottom: -2rem;
	width: 8rem;
	height: 8rem;
	background: var(--sai-brand-tint);
}

.sai-statcard__inner {
	position: relative;
	overflow: hidden;
	padding: 2rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-band);
	background: var(--sai-surface-elevated);
	box-shadow: var(--sai-shadow-md);
}

.sai-statcard__figure {
	display: flex;
	align-items: flex-start;
	gap: 0.25rem;
	margin-top: 1.5rem;
}

.sai-statcard__number {
	color: var(--sai-brand);
	font-family: var(--sai-font-serif);
	font-variation-settings: 'opsz' 72;
	font-size: clamp(6rem, 4rem + 6vw, 9rem);
	font-style: italic;
	letter-spacing: -0.04em;
	line-height: 0.82;
}

.sai-statcard__suffix {
	margin-top: 0.5rem;
	color: var(--sai-accent-bold);
	font-family: var(--sai-font-serif);
	font-size: 3rem;
	font-style: italic;
	line-height: 1;
}

.sai-statcard__caption {
	margin-top: 0.25rem;
	color: var(--sai-ink);
	font-family: var(--sai-font-serif);
	font-size: 1.375rem;
	line-height: 1.35;
}

.sai-statcard__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 2rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sai-border);
}

/*
 * "LINES OF COVERAGE" wraps to two lines where "STATES" does not, which
 * dropped its figure 16px below its neighbour. Pinning each figure to the
 * bottom of its cell keeps the numbers on one baseline at any label length.
 */
.sai-statcard__stats > * {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.sai-statcard__stats dt {
	color: var(--sai-ink-muted);
	font-family: var(--sai-font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.sai-statcard__stats dd {
	margin: 0.25rem 0 0;
	color: var(--sai-brand);
	font-family: var(--sai-font-serif);
	font-variation-settings: 'opsz' 72;
	font-size: 1.875rem;
	font-style: italic;
	line-height: 1;
}

/* -------------------------------------------------------------------------
 * Icon cards
 * ---------------------------------------------------------------------- */

.sai-cards {
	position: relative;
}

.sai-cards--band {
	overflow: hidden;
	background: var(--sai-brand);
	color: #ffffff;
}

.sai-cards--band .sai-section__heading,
.sai-cards--band .sai-card__title {
	color: #ffffff;
}

.sai-cards--band .sai-section__body {
	color: rgba(255, 255, 255, 0.8);
}

.sai-cards__dots {
	position: absolute;
	inset: 0;
	opacity: 0.07;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 20% 20%, #fff 1px, transparent 1px),
		radial-gradient(circle at 70% 60%, #fff 1px, transparent 1px);
	background-size: 36px 36px, 48px 48px;
}

.sai-cards__inner {
	position: relative;
	max-width: var(--sai-container);
	margin-inline: auto;
	padding: 5rem 1.25rem;
	display: grid;
	gap: 3rem;
}

.sai-cards:not(.sai-cards--band) .sai-cards__inner {
	max-width: none;
	padding: 0;
}

.sai-cards__list {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sai-card {
	padding: 1.5rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-surface);
	background: var(--sai-surface-elevated);
}

.sai-cards--band .sai-card {
	border-color: rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(4px);
}

.sai-card__icon {
	display: inline-flex;
	width: 2.5rem;
	height: 2.5rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--sai-radius-control);
	background: var(--sai-accent);
	color: #ffffff;
}

.sai-cards--grid .sai-card__icon,
.sai-cards--list .sai-card__icon {
	border-radius: var(--sai-radius-control);
	background: var(--sai-brand-soft);
	color: var(--sai-brand);
}

.sai-card__number {
	color: var(--sai-accent);
	font-family: var(--sai-font-serif);
	font-size: 1.875rem;
	font-weight: 500;
}

.sai-card__title {
	margin-top: 1rem;
	font-size: 1.25rem;
	line-height: 1.35;
}

.sai-card__text {
	margin-top: 0.5rem;
	color: var(--sai-ink-muted);
	font-size: 0.875rem;
	line-height: 1.7;
}

.sai-cards--band .sai-card__text {
	color: rgba(255, 255, 255, 0.8);
}

.sai-cards--list .sai-cards__list {
	gap: 1.25rem;
}

.sai-cards--list .sai-card {
	display: flex;
	gap: 1rem;
	padding: 0;
	border: 0;
	background: none;
}

.sai-cards--list .sai-card__title {
	margin-top: 0;
	font-size: 1.125rem;
}

@media (min-width: 640px) {
	.sai-cards__inner {
		padding-inline: 2rem;
	}

	.sai-cards--cols-2 .sai-cards__list,
	.sai-cards--cols-3 .sai-cards__list,
	.sai-cards--cols-4 .sai-cards__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sai-cards__inner {
		padding-block: 7rem;
	}

	.sai-cards--band .sai-cards__inner {
		grid-template-columns: 5fr 7fr;
		align-items: start;
	}

	.sai-cards--cols-3 .sai-cards__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sai-cards--cols-4 .sai-cards__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Coverage categories and cards
 * ---------------------------------------------------------------------- */

.sai-categories__list {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sai-category {
	display: flex;
	height: 100%;
	flex-direction: column;
	padding: 1.75rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-surface);
	background: var(--sai-surface-elevated);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sai-category:hover {
	border-color: var(--sai-brand-tint);
	background: color-mix(in srgb, var(--sai-brand-soft) 40%, var(--sai-surface-elevated));
}

.sai-category__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}

.sai-category__title {
	color: var(--sai-ink);
	font-family: var(--sai-font-serif);
	font-size: 1.5rem;
	letter-spacing: -0.01em;
}

.sai-category__arrow,
.sai-coverage-card__arrow,
.sai-assessment-card__arrow {
	display: inline-flex;
	width: 2.25rem;
	height: 2.25rem;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-pill);
	color: var(--sai-brand);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sai-category:hover .sai-category__arrow,
.sai-coverage-card:hover .sai-coverage-card__arrow,
.sai-assessment-card:hover .sai-assessment-card__arrow {
	border-color: var(--sai-brand);
	background: var(--sai-brand);
	color: #ffffff;
}

.sai-category__text {
	margin-top: 0.75rem;
	color: var(--sai-ink-muted);
	font-size: 0.875rem;
	line-height: 1.7;
}

.sai-category__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.sai-coverage-card {
	display: flex;
	height: 100%;
	gap: 1rem;
	padding: 1.25rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-surface);
	background: var(--sai-surface-elevated);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.sai-coverage-card:hover {
	border-color: var(--sai-brand-tint);
}

.sai-coverage-card--stacked {
	flex-direction: column;
	padding: 1.5rem;
}

.sai-coverage-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}

.sai-coverage-card__icon {
	display: inline-flex;
	width: 3rem;
	height: 3rem;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border-radius: var(--sai-radius-control);
	background: var(--sai-brand-soft);
	color: var(--sai-brand);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sai-coverage-card--compact:hover .sai-coverage-card__icon {
	background: var(--sai-brand);
	color: #ffffff;
}

.sai-coverage-card__body {
	min-width: 0;
	flex: 1 1 auto;
}

.sai-coverage-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.sai-coverage-card__name {
	color: var(--sai-ink);
	font-family: var(--sai-font-serif);
	font-size: 1.125rem;
}

.sai-coverage-card--stacked .sai-coverage-card__name {
	display: block;
	margin-top: 1rem;
	font-size: 1.25rem;
	line-height: 1.35;
}

.sai-coverage-card__blurb {
	display: block;
	margin-top: 0.25rem;
	color: var(--sai-ink-muted);
	font-size: 0.875rem;
	line-height: 1.7;
}

.sai-coverage-card--compact .sai-coverage-card__arrow {
	width: 1rem;
	height: 1rem;
	border: 0;
	color: var(--sai-ink-muted);
}

.sai-coverage-card--compact:hover .sai-coverage-card__arrow {
	background: none;
	color: var(--sai-brand);
}

@media (min-width: 768px) {
	.sai-categories__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Services archive blocks ------------------------------------------------ */

.sai-services-block {
	display: grid;
	gap: 2.5rem;
}

.sai-services-block__lead > * + * {
	margin-top: 0.75rem;
}

@media (min-width: 1024px) {
	.sai-services-block {
		grid-template-columns: 4fr 8fr;
		gap: 2.5rem;
	}
}

/* -------------------------------------------------------------------------
 * States, stat band
 * ---------------------------------------------------------------------- */

.sai-states {
	display: grid;
	gap: 2.5rem;
	align-items: end;
}

.sai-states__numeral {
	margin-top: 1.5rem;
	color: var(--sai-brand);
	font-family: var(--sai-font-serif);
	font-variation-settings: 'opsz' 72;
	font-size: clamp(7rem, 3rem + 14vw, 14rem);
	font-style: italic;
	letter-spacing: -0.04em;
	line-height: 0.82;
}

.sai-states__note {
	max-width: 28rem;
	margin-top: 1rem;
	color: var(--sai-ink);
	font-size: 1.125rem;
}

.sai-states__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sai-states__list li {
	padding: 0.375rem 0 0.375rem 0.75rem;
	border-left: 2px solid var(--sai-accent-bold);
	color: var(--sai-ink);
	font-family: var(--sai-font-serif);
	font-size: 1.125rem;
}

.sai-statband {
	border-block: 1px solid var(--sai-border);
	background: var(--sai-surface-elevated);
	padding-block: 3rem;
}

.sai-statband__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem 1rem;
	max-width: var(--sai-container);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.sai-statband__item {
	text-align: center;
}

.sai-statband__value {
	display: inline-flex;
	align-items: flex-start;
	color: var(--sai-brand);
	font-family: var(--sai-font-serif);
	font-variation-settings: 'opsz' 72;
	font-size: clamp(4rem, 2rem + 6vw, 6.5rem);
	font-style: italic;
	letter-spacing: -0.03em;
	line-height: 1;
}

.sai-statband__suffix {
	margin-top: 0.25rem;
	color: var(--sai-accent-bold);
	font-size: 2rem;
}

.sai-statband__label {
	display: block;
	margin-top: 0.5rem;
	color: var(--sai-ink-muted);
	font-family: var(--sai-font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

@media (min-width: 640px) {
	.sai-states__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sai-statband__grid {
		padding-inline: 2rem;
	}
}

@media (min-width: 768px) {
	.sai-statband__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sai-states {
		grid-template-columns: 5fr 7fr;
		gap: 3.5rem;
	}
}

/* -------------------------------------------------------------------------
 * CTA band, callouts
 * ---------------------------------------------------------------------- */

.sai-ctaband {
	position: relative;
	overflow: hidden;
	padding: 3.5rem 2rem;
	border-radius: var(--sai-radius-band);
	background: var(--sai-brand);
	color: #ffffff;
}

.sai-ctaband__glow {
	position: absolute;
	top: -6rem;
	right: -6rem;
	width: 20rem;
	height: 20rem;
	border-radius: var(--sai-radius-pill);
	background: color-mix(in srgb, var(--sai-accent) 30%, transparent);
	filter: blur(64px);
	pointer-events: none;
}

.sai-ctaband__inner {
	position: relative;
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

.sai-ctaband__heading {
	color: #ffffff;
}

.sai-ctaband__heading em {
	color: #ffffff;
}

.sai-ctaband__body {
	max-width: 36rem;
	margin-top: 1rem;
	color: rgba(255, 255, 255, 0.8);
	font-size: 1.125rem;
}

.sai-ctaband__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.sai-callout {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-band);
	background: var(--sai-surface-elevated);
}

.sai-callout__title {
	font-size: 1.5rem;
}

.sai-callout__body {
	margin-top: 0.5rem;
	color: var(--sai-ink-muted);
}

@media (min-width: 640px) {
	.sai-ctaband {
		padding: 5rem 3.5rem;
	}

	.sai-callout {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 2.5rem;
	}
}

@media (min-width: 1024px) {
	.sai-ctaband__inner {
		grid-template-columns: 7fr 5fr;
	}

	.sai-ctaband__actions {
		justify-content: flex-end;
	}
}

/* -------------------------------------------------------------------------
 * Izzy
 * ---------------------------------------------------------------------- */

.sai-izzy {
	position: relative;
	display: inline-block;
}

.sai-izzy--avatar {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 2px solid var(--sai-border-strong);
	border-radius: var(--sai-radius-pill);
	background: var(--sai-surface-elevated);
}

.sai-izzy--avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.sai-izzy--full img {
	width: 100%;
	height: auto;
}

.sai-izzy__blob {
	position: absolute;
	z-index: -1;
}

.sai-izzy__blob--a {
	top: -1rem;
	right: -1rem;
	width: 6rem;
	height: 6rem;
	border-radius: var(--sai-radius-pill);
	background: var(--sai-accent-soft);
}

.sai-izzy__blob--b {
	bottom: -0.5rem;
	left: -1.5rem;
	width: 5rem;
	height: 5rem;
	border-radius: var(--sai-radius-band);
	background: var(--sai-brand-tint);
}

.sai-assess-teaser__inner {
	display: grid;
	gap: 2.5rem;
	align-items: center;
	padding: 2rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-band);
	background: var(--sai-surface-elevated);
}

.sai-assess-teaser__meta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
	color: var(--sai-ink-muted);
	font-size: 0.875rem;
}

.sai-assess-teaser__meta .sai-icon {
	color: var(--sai-brand);
}

.sai-izzy-band {
	position: relative;
	overflow: hidden;
	background: var(--sai-brand);
	color: #ffffff;
}

.sai-izzy-band__dots {
	position: absolute;
	inset: 0;
	opacity: 0.07;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 20% 20%, #fff 1px, transparent 1px),
		radial-gradient(circle at 70% 60%, #fff 1px, transparent 1px);
	background-size: 36px 36px, 48px 48px;
}

.sai-izzy-band__inner {
	position: relative;
	display: grid;
	gap: 3rem;
	align-items: center;
	max-width: var(--sai-container);
	margin-inline: auto;
	padding: 5rem 1.25rem;
}

.sai-izzy-band__copy .sai-section__heading,
.sai-izzy-band__copy .sai-section__heading em {
	color: #ffffff;
}

.sai-izzy-band__copy .sai-section__body {
	color: rgba(255, 255, 255, 0.8);
}

.sai-assess-hero {
	display: grid;
	gap: 3rem;
	align-items: center;
}

.sai-assess-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	margin-top: 2rem;
	color: var(--sai-ink-muted);
	font-size: 0.875rem;
}

.sai-assess-hero__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.sai-assess-hero__meta .sai-icon {
	color: var(--sai-brand);
}

.sai-assess-hero__mascot {
	display: flex;
	justify-content: center;
}

@media (min-width: 640px) {
	.sai-assess-teaser__inner {
		padding: 3rem;
	}

	.sai-izzy-band__inner {
		padding-inline: 2rem;
	}
}

@media (min-width: 1024px) {
	.sai-assess-teaser__inner {
		grid-template-columns: 4fr 8fr;
	}

	.sai-izzy-band__inner {
		grid-template-columns: 5fr 7fr;
		padding-block: 7rem;
	}

	.sai-assess-hero {
		grid-template-columns: 7fr 5fr;
	}

	.sai-assess-hero__mascot {
		justify-content: flex-end;
	}
}

/* -------------------------------------------------------------------------
 * Coverage detail sections
 * ---------------------------------------------------------------------- */

.sai-coverage-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--sai-brand);
	color: #ffffff;
}

.sai-coverage-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.sai-coverage-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.6;
}

.sai-coverage-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		var(--sai-brand),
		color-mix(in srgb, var(--sai-brand) 80%, transparent),
		color-mix(in srgb, var(--sai-brand) 30%, transparent)
	);
}

.sai-coverage-hero__inner {
	padding-block: 2rem 5rem;
}

/*
 * The breadcrumb and the title block are siblings here, where the React
 * original nested the title block in its own element and gave it `pt-12`.
 * Without that gap the category pill crowds the breadcrumb above it.
 */
.sai-coverage-hero__inner > .sai-pill {
	margin-top: 3rem;
}

@media (min-width: 640px) {
	.sai-coverage-hero__inner {
		padding-block: 2rem 7rem;
	}

	.sai-coverage-hero__inner > .sai-pill {
		margin-top: 4rem;
	}
}

.sai-coverage-hero__title {
	max-width: 40rem;
	margin-top: 1.25rem;
	color: #ffffff;
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
	line-height: 1.05;
	text-wrap: balance;
}

.sai-coverage-hero__tagline {
	max-width: 36rem;
	margin-top: 1.25rem;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.125rem;
	line-height: 1.7;
}

.sai-coverage-overview {
	display: grid;
	gap: 3rem;
}

.sai-coverage-overview__head > * + * {
	margin-top: 0.5rem;
}

.sai-coverage-details__cols {
	display: grid;
	gap: 2.5rem;
}

.sai-coverage-details__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.5rem;
}

.sai-tick-list {
	display: grid;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.sai-tick-list li {
	display: flex;
	gap: 0.75rem;
	padding: 1rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-control);
	background: var(--sai-surface);
	color: var(--sai-ink);
}

.sai-tick-list .sai-icon {
	margin-top: 0.2rem;
}

.sai-coverage-details__optional {
	margin-top: 2.5rem;
	padding: 1.5rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-surface);
	background: var(--sai-surface);
}

.sai-optional-list {
	display: grid;
	gap: 0.75rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.sai-optional-list li {
	display: flex;
	gap: 0.5rem;
	font-size: 0.875rem;
}

.sai-panel {
	padding: 1.5rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-surface);
	background: var(--sai-surface-elevated);
}

.sai-panel__title {
	font-size: 1.25rem;
}

.sai-panel__body {
	margin-top: 0.5rem;
	color: var(--sai-ink-muted);
}

.sai-faqs__list {
	max-width: 48rem;
	margin: 0 auto;
	padding: 0;
	border-block: 1px solid var(--sai-border);
	list-style: none;
}

.sai-faqs__list li + li {
	border-top: 1px solid var(--sai-border);
}

.sai-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.25rem;
	color: var(--sai-ink);
	cursor: pointer;
	font-family: var(--sai-font-serif);
	font-size: 1.125rem;
	list-style: none;
}

.sai-faq__q::-webkit-details-marker {
	display: none;
}

.sai-faq__chevron {
	margin-top: 0.25rem;
	color: var(--sai-ink-muted);
	transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sai-faq[open] .sai-faq__chevron {
	transform: rotate(90deg);
}

.sai-faq__a {
	padding-bottom: 1.25rem;
	color: var(--sai-ink-muted);
}

/*
 * Disclosure easing.
 *
 * `<details>` snaps. `::details-content` gives the answer a box to be animated
 * in, and `interpolate-size` is what makes a height of `auto` interpolable at
 * all, so the panel can grow to its natural height instead of a guessed one.
 * `content-visibility` rides along as a discrete transition, which is what
 * keeps the closing direction animating too: without it the browser hides the
 * content the instant `open` is removed and only the opening direction eases.
 *
 * `interpolate-size` is set on the element rather than the root because it
 * inherits, and turning keyword interpolation on for the whole document would
 * change how every other `auto` transition on the site behaves.
 *
 * All of it sits behind a support query. Where the pseudo-element is missing
 * the disclosure simply snaps, exactly as it does today.
 */
@supports selector(::details-content) {
	.sai-faq {
		interpolate-size: allow-keywords;
	}

	.sai-faq::details-content {
		block-size: 0;
		overflow: hidden;
		transition:
			block-size 240ms cubic-bezier(0.16, 1, 0.3, 1),
			content-visibility 240ms cubic-bezier(0.16, 1, 0.3, 1) allow-discrete;
	}

	.sai-faq[open]::details-content {
		block-size: auto;
	}
}

.sai-related__card {
	display: flex;
	height: 100%;
	gap: 1rem;
	padding: 1.25rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-surface);
	background: var(--sai-surface-elevated);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.sai-related__card:hover {
	border-color: var(--sai-brand-tint);
}

.sai-related__icon {
	display: inline-flex;
	width: 2.75rem;
	height: 2.75rem;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border-radius: var(--sai-radius-control);
	background: var(--sai-brand-soft);
	color: var(--sai-brand);
}

.sai-related__title {
	display: block;
	color: var(--sai-ink);
	font-family: var(--sai-font-serif);
	font-size: 1.125rem;
}

.sai-related__blurb {
	display: block;
	margin-top: 0.25rem;
	color: var(--sai-ink-muted);
	font-size: 0.875rem;
}

@media (min-width: 640px) {
	.sai-coverage-hero__inner {
		padding-block: 2.5rem 7rem;
	}

	.sai-optional-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sai-coverage-overview {
		grid-template-columns: 4fr 8fr;
	}

	.sai-coverage-details__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sai-optional-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Principles
 * ---------------------------------------------------------------------- */

.sai-principles__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sai-principle {
	display: grid;
	gap: 1.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--sai-border);
}

.sai-principle + .sai-principle {
	margin-top: 3rem;
}

.sai-principle__number {
	display: block;
	color: var(--sai-accent-bold);
	font-family: var(--sai-font-serif);
	font-variation-settings: 'opsz' 72;
	font-size: clamp(3.75rem, 2rem + 4vw, 6rem);
	font-style: italic;
	letter-spacing: -0.03em;
	line-height: 1;
}

.sai-principle__title {
	margin-top: 1rem;
	font-family: var(--sai-font-serif);
	font-variation-settings: 'opsz' 72;
	font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.25rem);
}

.sai-principle__body {
	color: var(--sai-ink-muted);
}

@media (min-width: 1024px) {
	.sai-principle {
		grid-template-columns: 4fr 8fr;
		gap: 3rem;
	}

	.sai-principle + .sai-principle {
		margin-top: 4rem;
	}
}

/* -------------------------------------------------------------------------
 * Resource cards, video
 * ---------------------------------------------------------------------- */

.sai-post-card {
	height: 100%;
}

.sai-post-card__link {
	display: block;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-surface);
	background: var(--sai-surface-elevated);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.sai-post-card__link:hover {
	border-color: var(--sai-brand-tint);
}

.sai-post-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--sai-brand-soft);
}

.sai-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.sai-post-card__link:hover .sai-post-card__media img {
	transform: scale(1.02);
}

.sai-post-card__scrim,
.sai-video__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15, 23, 42, 0.45), transparent 60%);
}

.sai-post-card__play,
.sai-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-flex;
	width: 3.5rem;
	height: 3.5rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--sai-radius-pill);
	background: var(--sai-accent);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2), var(--sai-shadow-lg);
	color: #ffffff;
	transform: translate(-50%, -50%);
	transition: transform 0.3s ease;
}

.sai-post-card__play .sai-icon,
.sai-video__play .sai-icon {
	transform: translateX(2px);
}

.sai-post-card__link:hover .sai-post-card__play {
	transform: translate(-50%, -50%) scale(1.05);
}

.sai-post-card__duration {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	padding: 0.25rem 0.5rem;
	border-radius: var(--sai-radius-control);
	background: rgba(15, 23, 42, 0.8);
	color: #ffffff;
	font-family: var(--sai-font-mono);
	font-size: 0.6875rem;
}

.sai-post-card__body {
	display: block;
	padding: 1.5rem;
}

.sai-post-card__kind {
	color: var(--sai-accent);
}

.sai-post-card__title {
	display: block;
	margin-top: 1rem;
	color: var(--sai-ink);
	font-family: var(--sai-font-serif);
	font-size: 1.25rem;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.sai-post-card__excerpt {
	display: block;
	margin-top: 0.5rem;
	color: var(--sai-ink-muted);
	font-size: 0.875rem;
	line-height: 1.7;
}

.sai-post-card__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
	color: var(--sai-ink-muted);
	font-size: 0.75rem;
}

.sai-post-card__read {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.sai-resource-grid__feature {
	margin-block: 1rem 3rem;
}

.sai-video {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	overflow: hidden;
	border-radius: var(--sai-radius-surface);
	background: var(--sai-ink);
}

.sai-video__poster {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.sai-video__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.9;
}

.sai-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (min-width: 640px) {
	.sai-post-card--featured .sai-post-card__link {
		display: grid;
		grid-template-columns: 3fr 2fr;
		align-items: stretch;
	}

	.sai-post-card--featured .sai-post-card__body {
		align-self: center;
		padding: 2.5rem;
	}

	.sai-post-card--featured .sai-post-card__title {
		font-size: 1.875rem;
	}

	.sai-video__play {
		width: 5rem;
		height: 5rem;
	}
}

/* -------------------------------------------------------------------------
 * Breadcrumbs, page headers, misc navigation
 * ---------------------------------------------------------------------- */

.sai-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sai-crumbs li {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
}

.sai-crumbs a {
	display: inline-block;
	padding-block: 0.25rem;
	text-decoration: none;
}

.sai-crumbs--light {
	color: var(--sai-ink-muted);
}

.sai-crumbs--light [aria-current] {
	color: var(--sai-ink);
}

.sai-crumbs--light a:hover {
	color: var(--sai-brand);
}

.sai-crumbs--dark {
	color: rgba(255, 255, 255, 0.7);
}

.sai-crumbs--dark [aria-current] {
	color: #ffffff;
}

.sai-crumbs--dark a:hover {
	color: #ffffff;
}

.sai-page-header {
	padding-block: 4rem;
}

/*
 * The React original ran these headers at `py-16 sm:py-20`, and the elevated
 * variant the assessments index uses at `sm:py-24`. Only the mobile value
 * came across, so every archive sat 16px tighter under the header than it
 * should at desktop, and the assessments index 32px tighter.
 */
@media (min-width: 640px) {
	.sai-page-header {
		padding-block: 5rem;
	}

	.sai-page-header--elevated {
		padding-block: 6rem;
	}
}

.sai-page-header--elevated,
.sai-template-resource .sai-resource__header {
	border-bottom: 1px solid var(--sai-border);
	background: var(--sai-surface-elevated);
}

.sai-page-header__title {
	margin-top: 1.25rem;
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
	text-wrap: balance;
}

.sai-page-header__body {
	max-width: 42rem;
	margin-top: 1.25rem;
	color: var(--sai-ink-muted);
	font-size: 1.125rem;
	line-height: 1.7;
}

.sai-back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 2rem;
	color: var(--sai-ink-muted);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

.sai-back-link:hover {
	color: var(--sai-brand);
}

.sai-pagination {
	margin-top: 3rem;
}

.sai-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sai-pagination .page-numbers {
	display: inline-flex;
	min-width: 2.5rem;
	height: 2.5rem;
	align-items: center;
	justify-content: center;
	padding-inline: 0.75rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-control);
	background: var(--sai-surface-elevated);
	color: var(--sai-ink);
	font-size: 0.875rem;
	text-decoration: none;
}

.sai-pagination .page-numbers.current {
	border-color: var(--sai-brand);
	background: var(--sai-brand);
	color: #ffffff;
}

.sai-empty {
	max-width: 36rem;
	padding: 2.5rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-band);
	background: var(--sai-surface-elevated);
}

.sai-empty__title {
	font-size: 1.5rem;
}

.sai-empty__body {
	margin-top: 0.75rem;
	color: var(--sai-ink-muted);
}

.sai-search-results {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sai-search-result a {
	display: block;
	padding: 1.25rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-surface);
	background: var(--sai-surface-elevated);
	text-decoration: none;
}

.sai-search-result a:hover {
	border-color: var(--sai-brand-tint);
}

.sai-search-result__kind {
	display: block;
	color: var(--sai-accent);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sai-search-result__title {
	display: block;
	margin-top: 0.35rem;
	color: var(--sai-ink);
	font-family: var(--sai-font-serif);
	font-size: 1.25rem;
}

.sai-search-result__excerpt {
	display: block;
	margin-top: 0.35rem;
	color: var(--sai-ink-muted);
	font-size: 0.875rem;
}

/* Resource single ------------------------------------------------------- */

.sai-resource__header {
	padding-block: 2.5rem 3rem;
}

.sai-resource__title {
	margin-top: 1.25rem;
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
	line-height: 1;
	text-wrap: balance;
}

.sai-resource__excerpt {
	margin-top: 1.5rem;
	color: var(--sai-ink-muted);
	font-size: 1.25rem;
	line-height: 1.6;
}

.sai-resource__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin-top: 2rem;
	color: var(--sai-ink-muted);
	font-size: 0.875rem;
}

.sai-resource__read {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.sai-resource__player {
	padding-block: 1rem 3.5rem;
	border-bottom: 1px solid var(--sai-border);
	background: var(--sai-surface-elevated);
}

.sai-resource__cover {
	position: relative;
	height: 40vh;
	min-height: 260px;
	margin: 0;
	overflow: hidden;
}

.sai-resource__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 640px) {
	.sai-resource__cover {
		height: 55vh;
	}
}

/* 404 ------------------------------------------------------------------- */

.sai-404__title {
	margin-top: 1.5rem;
	color: var(--sai-brand);
	font-family: var(--sai-font-serif);
	font-variation-settings: 'opsz' 72;
	font-size: clamp(3.75rem, 2rem + 8vw, 9rem);
	font-style: italic;
	letter-spacing: -0.02em;
	line-height: 0.9;
}

.sai-404__body {
	max-width: 36rem;
	margin-top: 1.5rem;
	color: var(--sai-ink-muted);
	font-size: 1.125rem;
}

.sai-404__list {
	display: grid;
	gap: 0.75rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.sai-404__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-control);
	background: var(--sai-surface-elevated);
	color: var(--sai-ink);
	font-weight: 500;
	text-decoration: none;
}

.sai-404__list a:hover {
	border-color: var(--sai-brand-tint);
}

.sai-404__list a > span {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.sai-404__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Coming soon
 * ---------------------------------------------------------------------- */

.sai-coming-soon {
	max-width: 48rem;
	padding: 2rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-band);
	background: var(--sai-surface-elevated);
}

.sai-coming-soon .sai-section__heading {
	margin-top: 1.5rem;
}

.sai-coming-soon__list {
	display: grid;
	gap: 0.75rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.sai-coming-soon__list li {
	display: flex;
	gap: 0.75rem;
	padding: 1rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-control);
	background: var(--sai-surface);
	font-size: 0.875rem;
}

.sai-coming-soon__foot {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--sai-border);
}

.sai-coming-soon__foot-title {
	font-size: 1.25rem;
}

.sai-coming-soon__foot-body {
	margin-top: 0.5rem;
	color: var(--sai-ink-muted);
}

@media (min-width: 640px) {
	.sai-coming-soon {
		padding: 3rem;
	}

	.sai-coming-soon__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Assessments
 * ---------------------------------------------------------------------- */

.sai-assessment__questions {
	display: grid;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sai-assessment__question {
	padding: 1.5rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-band);
	background: var(--sai-surface-elevated);
}

.sai-assessment__question.is-missing {
	border-color: var(--sai-accent);
}

.sai-assessment__question fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.sai-assessment__counter {
	display: block;
	color: var(--sai-ink-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sai-assessment__prompt {
	display: block;
	margin-top: 0.5rem;
	color: var(--sai-ink);
	font-family: var(--sai-font-serif);
	font-size: 1.25rem;
	line-height: 1.35;
}

.sai-assessment__help {
	margin-top: 0.5rem;
	color: var(--sai-ink-muted);
	font-size: 0.875rem;
}

.sai-assessment__options {
	display: grid;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.sai-assessment__option {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-control);
	background: var(--sai-surface);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sai-assessment__option:hover {
	border-color: var(--sai-brand-tint);
}

.sai-assessment__option:has(input:checked) {
	border-color: var(--sai-brand);
	background: var(--sai-brand-soft);
}

.sai-assessment__option input {
	width: 1rem;
	height: 1rem;
	accent-color: var(--sai-brand);
}

.sai-assessment__option-label {
	flex: 1 1 auto;
	color: var(--sai-ink);
}

.sai-assessment__check {
	color: var(--sai-brand);
	opacity: 0;
}

.sai-assessment__option:has(input:checked) .sai-assessment__check {
	opacity: 1;
}

.sai-assessment__missing,
.sai-assessment__unanswered {
	margin-top: 0.75rem;
	color: var(--sai-accent);
	font-size: 0.875rem;
}

.sai-assessment__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.5rem;
	padding: 1.5rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-surface);
	background: var(--sai-surface-elevated);
}

.sai-assessment__privacy {
	color: var(--sai-ink-muted);
	font-size: 0.875rem;
}

.sai-assessment__results {
	padding: 1.5rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-band);
	background: var(--sai-surface-elevated);
	outline: none;
}

.sai-assessment__results-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.sai-assessment__results-title {
	margin-top: 0.5rem;
	font-size: 1.5rem;
	line-height: 1.3;
}

.sai-assessment__tips {
	display: grid;
	gap: 1rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.sai-assessment__tip {
	display: flex;
	gap: 1rem;
	padding: 1.25rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-surface);
	background: var(--sai-surface);
}

.sai-assessment__tip .sai-icon {
	margin-top: 0.2rem;
}

.sai-assessment__tip-prompt {
	display: block;
	color: var(--sai-ink);
	font-weight: 500;
}

.sai-assessment__tip-body {
	display: block;
	margin-top: 0.25rem;
	color: var(--sai-ink-muted);
}

.sai-assessment__clear,
.sai-assessment__noscript {
	margin-top: 1.5rem;
	padding: 1.25rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-surface);
	background: var(--sai-surface);
	color: var(--sai-ink-muted);
}

.sai-assessment__note {
	margin-top: 2rem;
	padding: 1.25rem;
	border: 1px solid var(--sai-brand-tint);
	border-radius: var(--sai-radius-surface);
	background: var(--sai-brand-soft);
	color: var(--sai-ink);
	font-size: 0.875rem;
}

.sai-assessment__restart {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	gap: 0.5rem;
	padding-inline: 1rem;
	border: 0;
	border-radius: var(--sai-radius-control);
	background: none;
	color: var(--sai-ink-muted);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 500;
}

.sai-assessment__restart:hover {
	color: var(--sai-brand);
}

.sai-assessment-card {
	display: flex;
	height: 100%;
	flex-direction: column;
	padding: 1.5rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-surface);
	background: var(--sai-surface-elevated);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.sai-assessment-card:hover {
	border-color: var(--sai-brand-tint);
}

.sai-assessment-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}

.sai-assessment-card__title {
	margin-top: 1.5rem;
	color: var(--sai-ink);
	font-family: var(--sai-font-serif);
	font-size: 1.5rem;
}

.sai-assessment-card__blurb {
	margin-top: 0.5rem;
	color: var(--sai-ink-muted);
}

@media (min-width: 640px) {
	.sai-assessment__question,
	.sai-assessment__results {
		padding: 2.5rem;
	}

	.sai-assessment__prompt {
		font-size: 1.5rem;
	}

	.sai-assessment-card {
		padding: 2rem;
	}
}

/* -------------------------------------------------------------------------
 * Forms
 * ---------------------------------------------------------------------- */

.sai-form,
.sai-form-success {
	padding: 1.5rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-surface);
	background: var(--sai-surface-elevated);
}

.sai-form-success {
	text-align: center;
}

.sai-form-success__heading {
	font-size: 1.5rem;
}

.sai-form-success__body {
	margin-top: 0.75rem;
	color: var(--sai-ink-muted);
}

.is-hidden {
	display: none;
}

.sai-form__title {
	font-size: 1.5rem;
}

.sai-form__note {
	margin-top: 0.5rem;
	color: var(--sai-ink-muted);
	font-size: 0.875rem;
}

.sai-form__error {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--sai-accent);
	border-radius: var(--sai-radius-control);
	background: var(--sai-accent-soft);
	color: var(--sai-accent-600);
	font-size: 0.875rem;
}

/* Honeypot: off-screen but still focusable-hidden from assistive tech. */
.sai-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sai-form__grid {
	display: grid;
	gap: 1.25rem;
	margin-top: 1.5rem;
}

.sai-field__label {
	display: block;
	color: var(--sai-ink);
	font-size: 0.875rem;
	font-weight: 500;
}

.sai-required {
	margin-left: 0.15rem;
	color: var(--sai-accent);
}

.sai-input {
	display: block;
	width: 100%;
	min-height: 44px;
	margin-top: 0.375rem;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-control);
	background: var(--sai-surface-elevated);
	color: var(--sai-ink);
	font-family: inherit;
	font-size: 1rem;
}

.sai-input:focus {
	border-color: var(--sai-brand);
	outline: none;
}

.sai-input--textarea {
	resize: vertical;
}

.sai-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.sai-radio-grid {
	display: grid;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.sai-radio {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-control);
	background: var(--sai-surface);
	cursor: pointer;
}

.sai-radio:hover {
	border-color: var(--sai-brand-tint);
}

.sai-radio input {
	width: 1rem;
	height: 1rem;
	accent-color: var(--sai-brand);
}

.sai-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2rem;
}

.sai-form__footnote {
	max-width: 24rem;
	color: var(--sai-ink-muted);
	font-size: 0.75rem;
}

@media (min-width: 640px) {
	.sai-form,
	.sai-form-success {
		padding: 2rem;
	}

	.sai-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sai-field--full {
		grid-column: 1 / -1;
	}

	.sai-radio-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sai-radio-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Contact details, offices
 * ---------------------------------------------------------------------- */

.sai-contact-details__heading {
	font-size: 1.5rem;
}

.sai-contact-block {
	margin-top: 2rem;
}

.sai-phone-list {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.sai-phone-list li + li {
	margin-top: 0.5rem;
}

.sai-phone-list a {
	color: var(--sai-ink);
	font-size: 1.125rem;
	text-decoration: none;
}

.sai-phone-list a:hover {
	color: var(--sai-brand);
}

.sai-phone-list__primary {
	font-family: var(--sai-font-serif);
	font-size: 1.5rem !important;
}

.sai-phone-list__label {
	margin-left: 0.5rem;
	color: var(--sai-ink-muted);
	font-size: 0.875rem;
}

.sai-address {
	display: block;
	margin-top: 0.75rem;
	font-style: normal;
}

.sai-address__label {
	display: block;
	color: var(--sai-ink);
	font-weight: 500;
}

.sai-address__lines {
	display: block;
	margin-top: 0.25rem;
	color: var(--sai-ink-muted);
	font-size: 0.875rem;
	line-height: 1.6;
}

.sai-contact-block__value {
	margin-top: 0.75rem;
	color: var(--sai-ink);
}

.sai-contact-block__note {
	color: var(--sai-ink-muted);
	font-size: 0.875rem;
}

.sai-offices__list {
	display: grid;
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.sai-office {
	display: flex;
	gap: 1.25rem;
	padding: 1.75rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-band);
	background: var(--sai-surface-elevated);
}

.sai-office__icon {
	display: inline-flex;
	width: 3rem;
	height: 3rem;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border-radius: var(--sai-radius-control);
	background: var(--sai-brand-soft);
	color: var(--sai-brand);
}

.sai-office__kicker {
	color: var(--sai-ink-muted);
	font-family: var(--sai-font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.sai-office__title {
	margin-top: 0.5rem;
	font-family: var(--sai-font-serif);
	font-variation-settings: 'opsz' 72;
	font-size: 1.875rem;
}

.sai-office__address {
	margin-top: 0.75rem;
	color: var(--sai-ink-muted);
	font-size: 1.125rem;
	font-style: normal;
	line-height: 1.6;
}

.sai-office__address span {
	display: block;
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

.sai-footer {
	margin-top: 6rem;
	background: var(--sai-brand);
	color: #ffffff;
}

.sai-footer__grid {
	display: grid;
	gap: 2.5rem;
	padding-block: 3.5rem;
}

.sai-footer__tagline {
	max-width: 24rem;
	margin-top: 1rem;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.875rem;
	line-height: 1.7;
}

.sai-footer__address {
	margin-top: 1.5rem;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.875rem;
	font-style: normal;
	line-height: 1.7;
}

.sai-footer__social {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.sai-footer__social a {
	display: inline-flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--sai-radius-pill);
	color: rgba(255, 255, 255, 0.8);
	transition: border-color 0.15s ease, color 0.15s ease;
}

.sai-footer__social a:hover {
	border-color: #ffffff;
	color: #ffffff;
}

.sai-footer__heading {
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--sai-font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sai-footer__list {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}

.sai-footer__list li + li {
	margin-top: 0.25rem;
}

.sai-footer__list a {
	display: inline-block;
	padding-block: 0.25rem;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.sai-footer__list a:hover {
	color: #ffffff;
}

.sai-footer__list--phones span {
	display: block;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.75rem;
}

.sai-footer__legal {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-block: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.75rem;
}

.sai-footer__legal-extra {
	display: block;
}

/*
 * The studio credit. Quieter than the copyright line it sits under — it is an
 * attribution, not a claim on the page — and it takes the same underline the
 * rest of the footer's inline links use on hover, so it reads as part of the
 * legal block rather than an advert bolted to the bottom.
 */
.sai-footer__credit {
	/*
	 * Inline with the copyright, separated by a space rather than a bullet or
	 * a pipe: the two clauses are already distinct sentences and a divider
	 * between them is one mark more than the line needs.
	 */
	color: rgba(255, 255, 255, 0.45);
}

.sai-footer__credit a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}

.sai-footer__credit a:hover,
.sai-footer__credit a:focus-visible {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sai-footer__legal-links {
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sai-footer__legal-links a {
	color: inherit;
	text-decoration: none;
}

.sai-footer__legal-links a:hover {
	color: #ffffff;
}

@media (min-width: 768px) {
	.sai-footer__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.sai-footer__brand {
		grid-column: span 4;
	}

	.sai-footer__col {
		grid-column: span 2;
	}

	.sai-footer__legal {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* -------------------------------------------------------------------------
 * Search palette
 * ---------------------------------------------------------------------- */

.sai-palette {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 12vh;
}

.sai-palette[hidden] {
	display: none;
}

.sai-palette__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
}

.sai-palette__panel {
	position: relative;
	width: min(92vw, 640px);
	overflow: hidden;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-surface);
	background: var(--sai-surface-elevated);
	box-shadow: var(--sai-shadow-lg);
}

.sai-palette__field {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--sai-border);
	color: var(--sai-ink-muted);
}

.sai-palette__field input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	color: var(--sai-ink);
	font-family: inherit;
	font-size: 1rem;
	outline: none;
}

.sai-palette__close {
	display: inline-flex;
	width: 2rem;
	height: 2rem;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--sai-radius-control);
	background: none;
	color: var(--sai-ink-muted);
	cursor: pointer;
}

.sai-palette__results {
	max-height: 50vh;
	margin: 0;
	padding: 0.5rem;
	overflow-y: auto;
	list-style: none;
}

.sai-palette__results:empty {
	display: none;
}

.sai-palette__results a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.625rem 0.75rem;
	border-radius: var(--sai-radius-control);
	text-decoration: none;
}

.sai-palette__results li.is-active a,
.sai-palette__results a:hover {
	background: var(--sai-brand-soft);
}

.sai-palette__result-title {
	color: var(--sai-ink);
	font-weight: 500;
}

.sai-palette__result-sub {
	display: block;
	color: var(--sai-ink-muted);
	font-size: 0.75rem;
}

.sai-palette__result-kind {
	flex: 0 0 auto;
	color: var(--sai-ink-muted);
	font-family: var(--sai-font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.sai-palette__hint {
	padding: 0.625rem 1.25rem;
	border-top: 1px solid var(--sai-border);
	background: var(--sai-surface);
	color: var(--sai-ink-muted);
	font-size: 0.75rem;
}

/* -------------------------------------------------------------------------
 * Izzy chat
 * ---------------------------------------------------------------------- */

.sai-chat__fab {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 45;
	display: inline-flex;
	width: 3.5rem;
	height: 3.5rem;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--sai-radius-pill);
	background: var(--sai-accent);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3), var(--sai-shadow-lg);
	color: #ffffff;
	cursor: pointer;
	transition: transform 0.15s ease;
}

.sai-chat__fab:hover {
	transform: scale(1.04);
}

.sai-chat__fab .sai-icon {
	width: 1.75rem;
	height: 1.75rem;
}

.sai-chat__fab-close {
	display: none;
}

.sai-chat__fab[aria-expanded='true'] .sai-chat__fab-open {
	display: none;
}

.sai-chat__fab[aria-expanded='true'] .sai-chat__fab-close {
	display: inline-flex;
}

.sai-chat__panel {
	position: fixed;
	right: 0.75rem;
	bottom: 6rem;
	z-index: 50;
	display: flex;
	width: min(calc(100vw - 1.5rem), 400px);
	height: min(70vh, 580px);
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-surface);
	background: var(--sai-surface-elevated);
	box-shadow: var(--sai-shadow-lg);
}

.sai-chat__panel[hidden] {
	display: none;
}

.sai-chat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--sai-brand);
	color: #ffffff;
}

.sai-chat__identity {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.sai-chat__name {
	color: #ffffff;
	font-family: var(--sai-font-serif);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.2;
}

.sai-chat__role {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.sai-chat__close {
	display: inline-flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--sai-radius-control);
	background: none;
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;
}

.sai-chat__close:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.sai-chat__log {
	flex: 1 1 auto;
	padding: 1rem;
	overflow-y: auto;
	background: var(--sai-surface);
}

.sai-chat__messages {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sai-chat__message {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
}

.sai-chat__message--user {
	justify-content: flex-end;
}

.sai-chat__bubble {
	max-width: 80%;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-surface);
	border-bottom-left-radius: var(--sai-radius-control);
	background: var(--sai-surface-elevated);
	color: var(--sai-ink);
	font-size: 0.875rem;
	line-height: 1.6;
}

.sai-chat__message--user .sai-chat__bubble {
	border-color: transparent;
	border-bottom-left-radius: var(--sai-radius-surface);
	border-bottom-right-radius: var(--sai-radius-control);
	background: var(--sai-accent);
	color: #ffffff;
}

.sai-chat__suggestions {
	margin-top: 1.25rem;
}

.sai-chat__suggestions ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.sai-chat__chip {
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-pill);
	background: var(--sai-surface-elevated);
	color: var(--sai-ink);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.75rem;
}

.sai-chat__chip:hover {
	border-color: var(--sai-brand-tint);
	color: var(--sai-brand);
}

.sai-chat__form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	border-top: 1px solid var(--sai-border);
	background: var(--sai-surface-elevated);
}

.sai-chat__form input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--sai-border);
	border-radius: var(--sai-radius-control);
	background: var(--sai-surface);
	color: var(--sai-ink);
	font-family: inherit;
	font-size: 0.875rem;
	outline: none;
}

.sai-chat__form button {
	display: inline-flex;
	width: 2.5rem;
	height: 2.5rem;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--sai-radius-control);
	background: var(--sai-accent);
	color: #ffffff;
	cursor: pointer;
}

.sai-chat__form button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.sai-chat__typing {
	display: inline-flex;
	gap: 0.25rem;
	padding-block: 0.25rem;
}

.sai-chat__typing span {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--sai-radius-pill);
	background: var(--sai-ink-muted);
	animation: sai-typing 0.9s ease-in-out infinite;
}

.sai-chat__typing span:nth-child(2) { animation-delay: 0.15s; }
.sai-chat__typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes sai-typing {
	0%, 100% { opacity: 0.4; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(-3px); }
}

@media (min-width: 640px) {
	.sai-chat__fab {
		right: 1.5rem;
		bottom: 1.5rem;
		width: 4rem;
		height: 4rem;
	}

	.sai-chat__panel {
		right: 1.5rem;
	}
}

/* -------------------------------------------------------------------------
 * Page rhythm inside Elementor
 *
 * In the theme's own templates each block sits inside `.sai-section` and
 * `.sai-container`, which together supply the vertical and horizontal
 * rhythm. A page built in the editor has neither, so both axes are restored
 * here — otherwise consecutive sections butt straight up against each other
 * and every section picks its own left edge.
 * ---------------------------------------------------------------------- */

/*
 * Elementor's boxed sections carry their own measure: 1140px wide, and no
 * gutter at all below that. Left alone, an editor-built page sits 26px inside
 * the theme's rhythm at desktop and runs flush to the screen edge on mobile.
 * Handing Elementor the theme's container values gives a seeded page and a
 * template-rendered page one shared left edge.
 *
 * Only top-level sections are targeted, so a nested section inherits the
 * gutter from its parent instead of adding a second one. Both container
 * generations are covered: `.elementor-container` for the section markup the
 * importer seeds, `.e-con-inner` for the flexbox containers Elementor builds
 * for pages created in the editor today.
 */
.sai-main .elementor-top-section.elementor-section-boxed > .elementor-container,
.sai-main .e-con.e-parent.e-con-boxed > .e-con-inner {
	max-width: var(--sai-container);
	padding-inline: 1.25rem;
}

@media (min-width: 640px) {
	.sai-main .elementor-top-section.elementor-section-boxed > .elementor-container,
	.sai-main .e-con.e-parent.e-con-boxed > .e-con-inner {
		padding-inline: 2rem;
	}
}

/*
 * Membership rule for the exclusion list below: any section that declares its
 * own vertical padding goes in it. Those sections are excluded rather than
 * reset, because this rule would win on specificity and strip the padding they
 * need — which is how the hero ended up flush against the header, and how the
 * CTA band lost its top padding and gained 96px of dead space beneath it.
 *
 * Currently: the hero, the three full-bleed bands, the CTA band, and the
 * breadcrumbs. Add to it whenever a new section sets its own padding-block.
 */
.elementor-widget-container
	> :is([class^='sai-'], [class*=' sai-']):not(
		.sai-hero,
		.sai-cards--band,
		.sai-izzy-band,
		.sai-statband,
		.sai-ctaband,
		.sai-crumbs
	) {
	padding-block: 4.5rem;
}

/*
 * Two stacked sections should be one gap apart, not two.
 *
 * Every SAI widget carries its own vertical padding, so a section that
 * follows another contributes a top padding directly beneath the previous
 * section's bottom one: 96px + 96px, and 192px of empty page between the
 * cards and the form on Contact.
 *
 * The section-list path has always collapsed this — `.sai-section-box +
 * .sai-section-box` zeroes the second one's top. The Elementor path never
 * got the same rule, so the two render paths spaced their sections
 * differently and only the Elementor one looked wrong.
 *
 * Same exclusion list as the padding rule above: a hero or a full-bleed band
 * owns its spacing and must not be zeroed here either.
 *
 * The preceding section is excluded on the same grounds. A band's own bottom
 * padding is smaller than the section rhythm, so zeroing the top of whatever
 * follows leaves too little air rather than the right amount — which is what
 * pinched the "What guides us" eyebrow up against the stat band above it.
 */
.sai-main
	.elementor-top-section:not(
		:has(.sai-hero, .sai-cards--band, .sai-izzy-band, .sai-statband, .sai-ctaband)
	)
	+ .elementor-top-section
	.elementor-widget-container
	> :is([class^='sai-'], [class*=' sai-']):not(
		.sai-hero,
		.sai-cards--band,
		.sai-izzy-band,
		.sai-statband,
		.sai-ctaband,
		.sai-crumbs
	) {
	padding-block-start: 0;
}

/* Breadcrumbs are page furniture, not a section. */
.elementor-widget-container > .sai-crumbs {
	padding-block: 1.5rem 0;
}

@media (min-width: 1024px) {
	.elementor-widget-container
		> :is([class^='sai-'], [class*=' sai-']):not(
			.sai-hero,
			.sai-cards--band,
			.sai-izzy-band,
			.sai-statband,
			.sai-ctaband,
			.sai-crumbs
		) {
		padding-block: 6rem;
	}
}

/* -------------------------------------------------------------------------
 * Social Snap's floating share rail
 *
 * The plugin fixes a 52px bar to the left edge at z-index 999 and only hides
 * it on mobile, so on every width in between it sits on top of the page
 * rather than beside it. Measured at 1024px: the headline, the quote form and
 * the footer all start at 32px, so the bar covered 20px of each.
 *
 * There is room for it only once the centred container leaves a margin wider
 * than the bar. Content starts at `(100vw - 72rem) / 2 + 2rem`, so clearing
 * the bar's 52px with ~40px to spare needs about 1272px; 1280 is the nearest
 * standard breakpoint and yields 44px. Below that the bar hides, which is
 * what the plugin already does at the small end — this just moves the
 * threshold to where the layout actually has room.
 *
 * If the container width changes, this has to move with it.
 * ---------------------------------------------------------------------- */
@media (max-width: 1279px) {
	#ss-floating-bar.ss-left-sidebar {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Section boxes — the container Elementor used to supply
 *
 * A page laid out from a section list has no page builder wrapping its
 * sections, so nothing provides the max-width, the gutters, or the space
 * between one section and the next. `.sai-section-box` is that wrapper, and
 * it deliberately mirrors the two rules above it: the same container width
 * and inline padding as `.elementor-container`, and the same vertical rhythm
 * as the rule that spaces Elementor's widgets.
 *
 * Full-bleed sections are not wrapped at all, so there is nothing to exclude
 * here — see sai_full_bleed_sections() in the plugin.
 * ---------------------------------------------------------------------- */

.sai-section-box {
	width: 100%;
	max-width: var(--sai-container);
	margin-inline: auto;
	padding-inline: 1.25rem;
	padding-block: 4.5rem;
}

@media (min-width: 640px) {
	.sai-section-box {
		padding-inline: 2rem;
	}
}

@media (min-width: 1024px) {
	.sai-section-box {
		padding-block: 6rem;
	}
}

/* Breadcrumbs are page furniture, not a section — same as the Elementor rule. */
.sai-section-box--furniture {
	padding-block: 1.5rem 0;
}

/*
 * Consecutive boxes would otherwise stack a full rhythm at the seam, which
 * reads as a gap rather than a join. Halving both sides keeps the distance
 * between two sections the same as the distance to a full-bleed neighbour.
 */
.sai-section-box + .sai-section-box {
	padding-block-start: 0;
}

/* -------------------------------------------------------------------------
 * Editor-only affordances
 * ---------------------------------------------------------------------- */

/*
 * Marks copy the build drafted that SAI has not reviewed. Only editors ever
 * see these rows, so the badge exists to make that unmistakable while someone
 * reads the page in context.
 */
.sai-draft-badge {
	display: inline-block;
	margin-top: 0.75rem;
	padding: 0.125rem 0.5rem;
	border: 1px solid var(--sai-warn);
	border-radius: var(--sai-radius-control);
	color: var(--sai-warn);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sai-editor-notice {
	padding: 1rem;
	border: 1px dashed var(--sai-border-strong);
	border-radius: var(--sai-radius-control);
	background: var(--sai-surface);
	color: var(--sai-ink-muted);
	font-size: 0.875rem;
}

.sai-widget + .sai-widget {
	margin-top: 2rem;
}

.sai-widget__title {
	font-size: 1.125rem;
}

/* --------------------------------------------------------------------
 * Team
 *
 * A headshot is optional. Where one is missing the monogram takes the
 * same box and the same radius, so a partly-photographed team still
 * reads as one grid rather than a row with gaps in it.
 * ----------------------------------------------------------------- */

.sai-team__head {
	margin-block-end: 2.5rem;
	max-width: 46rem;
}

.sai-team__list {
	display: grid;
	gap: 2rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sai-team__member {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/*
 * Elementor ships `.elementor img { border-radius: 0 }`, which outranks a
 * single class and squared off every headshot the moment the page moved to
 * the Elementor path — while the monogram, being a span, kept its corners.
 * Two people side by side, one rounded and one not.
 *
 * `.sai-team` on the front carries enough specificity to win without
 * `!important`, and it reads as what it is: these belong to the team block.
 */
.sai-team .sai-team__photo,
.sai-team .sai-team__monogram {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1 / 1;
	border-radius: var(--sai-radius-surface);
	object-fit: cover;
	background: var(--sai-brand-soft);
}

.sai-team__monogram {
	display: grid;
	place-items: center;
	font-family: var(--sai-font-serif);
	font-size: clamp(2rem, 6vw, 3rem);
	color: var(--sai-brand);
	border: 1px solid var(--sai-border);
}

.sai-team__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.sai-team__name {
	margin: 0;
	font-family: var(--sai-font-serif);
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--sai-ink);
}

.sai-team__role {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sai-accent);
}

.sai-team__location {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	font-size: 0.875rem;
	color: var(--sai-ink-muted);
}

.sai-team__text {
	margin: 0.25rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--sai-ink-muted);
}

.sai-team__member .sai-inline-link {
	margin-block-start: 0.25rem;
}

@media (min-width: 640px) {
	.sai-team__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * A profile page holds one person, and the two-column rule above was still
 * splitting the row for them: the portrait came out at 206px against roughly
 * 254px for the same face on About, so the page about the person showed them
 * smaller than the page listing four of them. One column lets the portrait
 * fill its side of the masthead.
 */
@media (min-width: 640px) {
	.sai-team--cols-1 .sai-team__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 1024px) {
	.sai-team--cols-3 .sai-team__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sai-team--cols-4 .sai-team__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * A person can carry two routes — read about them, book time with them — and
 * on a four-column card they have to stack rather than run on one line.
 * A single link renders identically to before.
 */
.sai-team__links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
}

.sai-team__more {
	margin-block-start: 2rem;
}

/* --------------------------------------------------------------------
 * Column rows
 *
 * Authored widths arrive as a --sai-columns-template custom property
 * (widths="60,40" becomes "60fr 40fr"), so the ratio lives with the
 * content rather than being hard-coded per page.
 *
 * Single column below the large breakpoint. Source order decides what
 * comes first on narrow screens, which is why the seed lists the form
 * column first on the pages whose job is capturing a lead.
 * ----------------------------------------------------------------- */

.sai-columns {
	display: grid;
	gap: 2rem;
	align-items: start;

	/* The row is the container. Its children are unboxed below, so without
	   this the form would run to the window edge while the heading above it
	   stayed inside the grid. */
	width: 100%;
	max-width: var(--sai-container);
	margin-inline: auto;
	padding-inline: 1.25rem;
	padding-block: 0 4.5rem;
}

@media (min-width: 640px) {
	.sai-columns {
		padding-inline: 2rem;
	}
}

.sai-columns__col {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	min-width: 0;
}

@media (min-width: 1024px) {
	.sai-columns {
		grid-template-columns: var(--sai-columns-template, 1fr 1fr);
		gap: 3rem;
	}

	/* The narrow rail rides along with the form rather than restating a
	   full section head, so it reads as support, not as another section. */
	.sai-columns__col .sai-cards__inner,
	.sai-columns__col .sai-contact-details {
		padding-block: 0;
	}

	/*
	 * The rail's first line sits level with the form's.
	 *
	 * The form is a panel and carries 2rem of its own padding; the rail is
	 * bare text against the page. Aligning the two boxes therefore leaves
	 * their headings 32px apart, with "Reach us directly" floating above
	 * "Request a quote" — which reads as a mistake rather than a choice.
	 *
	 * Matching the panel's inset is what makes the two columns look set
	 * together. The value tracks `.sai-form`'s padding at this breakpoint;
	 * they have to move together.
	 *
	 * Applied on the widget wrapper for the Elementor path so it does not
	 * fight the higher-specificity section-rhythm rule that zeroes the inner
	 * element's top padding.
	 */
	.sai-columns__col .sai-contact-details {
		padding-block-start: 2rem;
	}
}

/*
 * The Elementor path needs the same two corrections, but at its own
 * breakpoint.
 *
 * `.sai-columns` is a grid that stays single-column until 1024px, so its
 * rules live in the block above. Elementor's columns go side by side at
 * 768px. Scoping these to 1024px therefore left 768–1023px with the rail
 * beside the form and neither correction applied: no gutter at all, and the
 * headings 33px out.
 *
 * padding-block-start aligns the rail's first line with the form's, matching
 * the panel's own inset. padding-inline-start supplies the gutter that
 * `.sai-columns` gets from `gap: 3rem` — the importer builds Elementor's
 * columns with `elementor-column-gap-no`, and neither the panel nor the rail
 * carries inline spacing of its own, so the two columns met at exactly the
 * same x. It goes on the rail rather than as a `gap` on the container because
 * Elementor's columns are percentage-width and a gap would push their total
 * past 100%.
 *
 * Both values track their `.sai-columns` counterparts; they have to move
 * together.
 */
@media (min-width: 768px) {
	.elementor-widget-sai-contact-details {
		padding-block-start: 2rem;
	}

	/*
	 * The gutter between any two columns in the main content.
	 *
	 * The importer builds Elementor's columns with `elementor-column-gap-no`,
	 * and nothing else supplies inline spacing, so sibling columns meet at
	 * exactly the same x. This has now been found three times: the contact
	 * rail against its form, the card list above that rail, and the profile
	 * masthead where the headline sat flush against the portrait.
	 *
	 * Written for any adjacent pair rather than for the page it was last seen
	 * on. Scoping it to a row containing a form fixed Contact and left the
	 * profiles broken; the fault is the layout, not the widget inside it.
	 *
	 * It goes on the column rather than as a `gap` on the container because
	 * Elementor's columns are percentage-width and a gap would push their
	 * total past 100%.
	 */
	.sai-main .elementor-top-section .elementor-column + .elementor-column {
		padding-inline-start: 3rem;
	}
}

/* A rail heading is supporting a form, not opening a page — display scale
   here shouts over the thing it is meant to reassure people about. */
.sai-columns__col .sai-section__heading,
.sai-columns__col .sai-contact-details__heading {
	font-size: 1.375rem;
	line-height: 1.25;
}

.sai-columns .sai-section-box {
	padding-block: 0;
	padding-inline: 0;
	max-width: none;
}