/* Olligents global styles. Design tokens live in theme.json; custom properties here use --olligents-. */

:root {
	--olligents-navy: var(--wp--preset--color--navy);
	--olligents-grey: #f4f4f4;
	--olligents-amber: #f6b52e;
	/* The widest the content gets; backgrounds can still run edge to edge */
	--olligents-max: 1600px;
	/* Width of the wide panels: up to the maximum, with a gutter that grows on wide screens */
	--olligents-wide: min(var(--olligents-max), 100% - 2 * clamp(0px, 5vw, 144px));
	/* Narrower again, for text-led sections whose lines would get too long */
	--olligents-text-wide: min(1280px, var(--olligents-wide));
	--olligents-blue: var(--wp--preset--color--blue);
	--olligents-heading: var(--wp--preset--color--heading);
	--olligents-contact: var(--wp--preset--color--contact);
}

html { scroll-behavior: smooth; }

body { -webkit-font-smoothing: antialiased; }

/* Sections butt up against each other; spacing is their own padding */
.wp-site-blocks > *,
.site-main > * { margin-block: 0; }

.wp-element-button,
.wp-block-button__link { transition: filter 0.2s ease, transform 0.2s ease; }
.wp-element-button:hover,
.wp-block-button__link:hover { filter: brightness(1.1); transform: translateY(-1px); }

.eyebrow {
	margin: 0 0 0.3em;
	color: var(--olligents-blue);
	font-size: clamp(1rem, 1.3vw, 1.35rem);
	font-weight: 500;
	line-height: 1.3;
}

/* Two-tone lede: navy, with a blue second line marked with the text colour
   format */
.lede {
	color: var(--olligents-heading);
	font-size: clamp(1.35rem, 2.1vw, 2.1rem);
	font-weight: 600;
	line-height: 1.4;
}

.wp-block-button.button-large .wp-block-button__link { padding: 1.05em 2.4em; font-size: clamp(0.85rem, 1vw, 1.05rem); border-radius: 14px; }
.wp-block-button.button-small .wp-block-button__link { padding: 0.9em 1.4em; font-size: 0.65rem; }

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
}

/* The dark sections' backdrop: navy, with the design's blue (#050daa)
   glowing in from the top-left and bottom-right corners, and only faintly
   along the other edges */
:root {
	--olligents-radial:
		radial-gradient(ellipse min(45vw, 760px) min(60vw, 700px) at 0% 0%, #050daa, rgb(5 13 170 / 0.35) 45%, transparent),
		radial-gradient(ellipse min(45vw, 760px) min(60vw, 700px) at 100% 100%, #050daa, rgb(5 13 170 / 0.35) 45%, transparent),
		radial-gradient(closest-side, transparent 80%, rgb(5 13 170 / 0.18)),
		var(--olligents-navy);
}

/* Fade in and slide up on first coming into view: the children of any
   .reveal-children (global.js adds .reveal, so nothing hides without it) */
.reveal {
	opacity: 0;
	transform: translateY(48px);
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

/* One screen over the glowing loop (a video), anchored bottom right: the
   messaging on the left, the logo and the hero stats on the right (above,
   on phones). The navy matches the video's own */
.hero {
	position: relative;
	overflow: hidden;
	background: #040827;
	color: #fff;
}

.hero__video {
	position: absolute;
	inset: 0;
	margin: 0;
	/* Fades in from the navy as the page loads */
	animation: hero-video-in 6s ease-in-out 0.3s both;
}

@keyframes hero-video-in { from { opacity: 0; } }

.hero__video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right bottom;
}

.hero__inner { position: relative; }

.hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, auto);
	/* The buttons run the full width under the stats, so they stay side by
	   side however narrow the left column gets */
	grid-template-areas:
		"intro   logo"
		"heading stats"
		"text    stats"
		"actions actions";
	/* From the top, any spare height going to the foot, over the image */
	align-content: start;
	gap: 0 clamp(32px, 4.5vw, 80px);
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100svh;
	/* Wider than the other sections, so the heading keeps to two lines */
	max-width: 1760px;
	margin-inline: auto;
	/* Room at the foot for the nav pill */
	padding: clamp(28px, 5.5vh, 64px) clamp(16px, 7vw, 128px) clamp(120px, 15vh, 170px);
}

.hero__inner > * { margin: 0; }

.hero__logo { grid-area: logo; justify-self: end; align-self: start; width: clamp(150px, 12.5vw, 220px); }
.hero__logo img { display: block; width: 100%; height: auto; }

.hero__intro { grid-area: intro; align-self: center; }
.hero__intro > * { margin: 0; }

.hero .hero__eyebrow {
	color: var(--olligents-blue);
	font-size: clamp(0.95rem, 1.3vw, 1.4rem);
	font-weight: 700;
	letter-spacing: 0.25em;
	line-height: 1.3;
	text-transform: uppercase;
}

.hero .hero__powered { margin-top: 0.3em; font-size: clamp(0.9rem, 1.05vw, 1.15rem); }

.hero .hero__heading {
	grid-area: heading;
	max-width: 15em;
	margin-top: clamp(32px, 8vh, 96px);
	font-size: clamp(2.3rem, 3.9vw, 4.4rem);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.hero .hero__text {
	grid-area: text;
	max-width: 37em;
	margin-top: clamp(20px, 3.5vh, 40px);
	font-size: clamp(1rem, 1.25vw, 1.35rem);
	line-height: 1.55;
}

.hero__actions {
	grid-area: actions;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px 32px;
	margin-top: clamp(28px, 6vh, 64px);
}

.hero__actions .wp-block-buttons { margin: 0; }
.hero__cta { display: flex; flex-direction: column; align-items: center; }

.hero .hero__note {
	margin: 1.6em 0 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}

/* The heading arrives letter by letter, then the paragraph fades in and the
   buttons rise up (global.js adds the classes; without it all is there) */
.hero.is-intro .hero__text { opacity: 0; transition: opacity 1s ease; }
.hero.is-intro .hero__actions { opacity: 0; transform: translateY(48px); transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.hero.is-intro.is-text-in .hero__text,
.hero.is-intro.is-actions-in .hero__actions { opacity: 1; transform: none; }

/* Hero stats, stacked in one place. The blue line is a wiper: it sweeps
   right across the stat showing to clear it, then back to bring on the
   next, which is revealed behind it, and rests as its left border
   (global.js). Without the script, the first is shown with a plain border */
.hero-stats {
	grid-area: stats;
	position: relative;
	display: grid;
	align-self: center;
	width: clamp(260px, 25vw, 440px);
	margin-top: clamp(32px, 8vh, 96px);
}

.hero-stat {
	grid-area: 1 / 1;
	/* Each its own height, so the line matches the stat that's showing */
	align-self: start;
	padding-left: clamp(24px, 2.8vw, 50px);
	color: var(--olligents-blue);
}

.hero-stat > * { margin: 0; }
.hero-stat__figure { font-size: clamp(3.5rem, 6.3vw, 7rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }
.hero-stat__label { margin-top: 0.4em; font-size: clamp(1.1rem, 1.6vw, 1.75rem); font-weight: 600; line-height: 1.5; }

.hero-stats:not(.is-cycling) .hero-stat:first-child { border-left: 3px solid; }
.hero-stats:not(.is-cycling) .hero-stat:not(:first-child),
.hero-stats.is-cycling .hero-stat:not(.is-in) { visibility: hidden; }

.hero-stats__line {
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	background: var(--olligents-blue);
}

/* Narrower: one column, the logo at the very top */
@media (max-width: 900px) {
	.hero__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "logo" "intro" "heading" "text" "actions" "stats";
		align-content: start;
		padding-top: 32px;
	}

	.hero__logo { justify-self: start; width: 150px; margin-bottom: 28px; }
	.hero .hero__note { display: none; }
	.hero .hero__heading { margin-top: 28px; }
	.hero-stats { width: auto; margin-top: 40px; }

	/* The loop smaller, along the foot, coming up to just below the stats
	   (the top half of the video is dark), so their blue text never sits on
	   the glow */
	.hero__video { inset: auto 0 0 auto; width: 160%; }
	.hero__video video { height: auto; aspect-ratio: 16 / 9; }
	.hero__inner { padding-bottom: calc(160vw * 9 / 16 * 0.5); }
}

/* Words stay intact so the heading still wraps naturally */
.reveal-word { display: inline-block; white-space: nowrap; }
.reveal-char { display: inline-block; }

/* ---------- Sticky bottom nav ---------- */

.nav {
	position: fixed;
	left: 50%;
	bottom: 32px;
	z-index: 10;
	display: flex;
	gap: 10px;
	transform: translateX(-50%);
}

.nav > * { margin: 0; }

.nav__logo,
.nav nav.nav__links {
	display: flex;
	align-items: center;
	height: 64px;
	border-radius: 999px;
	/* Starts as navy glass over the hero, turns grey once past it (global.js) */
	background: rgba(16, 20, 84, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	transition: background-color 0.4s ease, border-color 0.4s ease;
}

/* Matches brand.vettvangur.is over light sections: a 2.1% dark tint, a
   hairline border and a light blur */
.nav.is-solid .nav__logo,
.nav.is-solid nav.nav__links {
	background: rgba(11, 20, 35, 0.021);
	border-color: rgba(11, 20, 35, 0.07);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.nav.is-solid nav.nav__links { color: #000; }
.nav.is-solid .nav__logo img { filter: brightness(0); } /* white SVG to black */
.nav.is-solid .nav__progress { background: rgba(11, 20, 35, 0.07); }

/* White version over dark sections with the is-nav-white class, using the
   reference site's values for its dark mode */
.nav.is-white .nav__logo,
.nav.is-white nav.nav__links {
	background: rgba(248, 250, 251, 0.021);
	border-color: rgba(248, 250, 251, 0.08);
}

.nav.is-white nav.nav__links { color: #fff; }
.nav.is-white .nav__logo img { filter: none; }
.nav.is-white .nav__progress { background: rgba(248, 250, 251, 0.1); }
.nav.is-white .nav__progress > span { background: #fff; }

.nav__logo { padding: 0 24px; }
.nav__logo a { display: block; }
.nav__logo img { display: block; width: 48px; max-width: none; height: auto; transition: filter 0.4s ease; } /* the SVG has no size of its own */

.nav nav.nav__links {
	padding: 0 12px;
	/* Links inherit this: core's navigation styles set them to inherit */
	color: #fff;
	transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}
.nav ul.nav__links { gap: 0; }

.nav nav.nav__links a {
	position: relative;
	display: block;
	padding: 10px 22px;
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

/* Track under the label, shown only for the section in view */
.nav__progress {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 4px;
	height: 2px;
	background: rgba(255, 255, 255, 0.15);
	opacity: 0;
	transition: opacity 0.3s ease, background-color 0.4s ease;
}

.nav__progress > span {
	display: block;
	height: 100%;
	background: var(--olligents-blue);
	transform: scaleX(var(--progress, 0));
	transform-origin: left;
	transition: background-color 0.4s ease;
}

.nav__links a.is-active .nav__progress { opacity: 1; }

/* On hover the label slides up and out, and its copy (a text shadow one
   line below) slides up into its place */
.nav__links .wp-block-navigation-item__label {
	display: inline-block;
	height: 1.4em;
	overflow: hidden;
	line-height: 1.4;
	vertical-align: top;
}

.nav__roll {
	display: block;
	text-shadow: 0 1.4em 0 currentColor;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav__links a:hover .nav__roll,
.nav__links a:focus-visible .nav__roll { transform: translateY(-1.4em); }

@media (prefers-reduced-motion: reduce) {
	.nav__roll { transition: none; }
	.nav__links a:hover .nav__roll,
	.nav__links a:focus-visible .nav__roll { transform: none; }
}

/* Medium screens: seven links need tighter spacing to fit the pill */
@media (min-width: 901px) and (max-width: 1240px) {
	.nav__logo { padding: 0 18px; }
	.nav nav.nav__links a { padding-inline: 12px; font-size: 0.9rem; }
}

@media (max-width: 900px) {
	.nav { gap: 8px; bottom: 16px; width: calc(100% - 32px); justify-content: center; }
	.nav__logo, .nav nav.nav__links { height: 52px; }
	.nav__logo { padding: 0 16px; }
	.nav__logo img { width: 40px; }
	.nav nav.nav__links { padding: 0 6px; overflow-x: auto; scrollbar-width: none; }
	.nav nav.nav__links a { padding: 8px 10px; font-size: 0.85rem; }
	.nav__progress { left: 10px; right: 10px; }
}

/* The logo only goes once the links need the room */
@media (max-width: 460px) {
	.nav__logo { display: none; }
}

@media (max-width: 520px) {
	.nav nav.nav__links { padding: 0 4px; }
	.nav nav.nav__links a { padding: 8px 7px; font-size: 0.78rem; }
	.nav__progress { left: 7px; right: 7px; }
}

/* Phones: the pill gives way to a menu button at the top right,
   opening the links in a panel from the right (global.js adds .has-menu, so
   without JavaScript phones keep the pill) */
.nav__toggle,
.nav__backdrop,
.nav__links .nav__top { display: none; }

@media (max-width: 781px) {
	.nav.has-menu {
		left: auto;
		right: 0;
		top: 16px;
		bottom: auto;
		width: auto;
		transform: none;
	}

	/* Unless the floating menu is on (Appearance → Theme settings), the
	   button sits at the top of the page and scrolls away with it */
	body:not(.has-floating-menu) .nav.has-menu { position: absolute; }

	.nav.has-menu .nav__logo { display: none; }

	/* The button: the nav's glass, in whichever version the nav is showing */
	.nav.has-menu .nav__toggle {
		position: relative;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 52px;
		height: 52px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-right: 0; /* flush against the screen's edge */
		border-radius: 16px 0 0 16px;
		background: rgba(16, 20, 84, 0.55);
		color: #fff;
		-webkit-backdrop-filter: blur(16px) saturate(140%);
		backdrop-filter: blur(16px) saturate(140%);
		cursor: pointer;
		transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
	}

	.nav.has-menu.is-solid .nav__toggle {
		border-color: rgba(11, 20, 35, 0.07);
		background: rgba(255, 255, 255, 0.55);
		color: #000;
	}

	.nav.has-menu.is-white .nav__toggle {
		border-color: rgba(248, 250, 251, 0.2);
		background: rgba(248, 250, 251, 0.12);
		color: #fff;
	}

	/* Three lines, turning into a cross while open */
	.nav__toggle span {
		grid-area: 1 / 1;
		width: 22px;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform 0.3s ease, opacity 0.2s ease;
	}

	.nav__toggle span:nth-child(1) { transform: translateY(-7px); }
	.nav__toggle span:nth-child(3) { transform: translateY(7px); }
	/* Open, over the navy panel: white whatever section is behind */
	.nav.has-menu.is-open .nav__toggle { border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.1); color: #fff; }
	.nav.is-open .nav__toggle span:nth-child(1) { transform: rotate(45deg); }
	.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
	.nav.is-open .nav__toggle span:nth-child(3) { transform: rotate(-45deg); }

	/* The panel: always navy, whichever section is behind */
	.nav.has-menu nav.nav__links {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		box-sizing: border-box;
		width: min(320px, 84vw);
		height: auto;
		padding: 96px 28px 32px;
		overflow-y: auto;
		border: 0;
		border-radius: 24px 0 0 24px;
		background: rgba(2, 5, 68, 0.94);
		color: #fff;
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.45s;
	}

	.nav.is-open nav.nav__links {
		transform: none;
		visibility: visible;
		transition-delay: 0s;
	}

	.nav.has-menu ul.nav__links { flex-direction: column; align-items: stretch; gap: 4px; }
	.nav.has-menu .nav__links .nav__top { display: block; }

	.nav.has-menu nav.nav__links a {
		padding: 12px 0;
		font-size: 1.35rem;
	}

	.nav.has-menu .nav__progress { left: 0; right: 0; bottom: 6px; background: rgba(255, 255, 255, 0.15); }
	.nav.has-menu .nav__progress > span { background: var(--olligents-blue); }

	/* The page behind, dimmed; a tap on it closes the menu */
	.nav.has-menu .nav__backdrop {
		position: fixed;
		inset: 0;
		z-index: 0;
		display: block;
		background: rgba(2, 5, 68, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s ease, visibility 0s 0.35s;
	}

	.nav.is-open .nav__backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }

	/* The room left for the bottom nav isn't needed */
	.has-nav-menu .section--blue { padding-bottom: clamp(54px, 6.8vw, 95px); }
	.has-nav-menu .site-footer { padding-bottom: 48px; }
}

@media (max-width: 781px) and (prefers-reduced-motion: reduce) {
	.nav.has-menu nav.nav__links,
	.nav.has-menu .nav__backdrop,
	.nav__toggle span { transition: none; }
}

/* ---------- Sections ---------- */

.section {
	padding: clamp(54px, 6.8vw, 95px) 16px;
	text-align: center;
	font-size: clamp(0.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: var(--olligents-heading);
}

.section > * { margin-block: 0 1.2em; }
/* The small "Olligents" sits close above its heading */
.section > .eyebrow { margin-bottom: 0.5em; }
.section > p { max-width: 720px; margin-left: auto; margin-right: auto; }

.section h2 {
	margin-bottom: 0.25em;
	color: var(--olligents-heading);
	font-size: clamp(3rem, 6vw, 6rem);
	letter-spacing: -0.01em;
}

.section > .lede { max-width: 1000px; margin-bottom: 1.4em; }
.section > .section__intro { max-width: 500px; }

/* Left-aligned sections, with their panels, keep to the text width */
.section--wide { text-align: left; }
.section--wide > *,
.section--wide > p { max-width: var(--olligents-text-wide); margin-left: auto; margin-right: auto; }
.section--wide > .panel { width: var(--olligents-text-wide); }

/* Meet your team: a wider introduction, above the landscape cards */
.section--solutions > p { max-width: 940px; }
.section--solutions > .solutions__endorsed { margin-top: 1.8em; }

/* The carousel runs edge to edge, past the section padding, up to the maximum width */
.section > .wp-block-olligents-agent-carousel {
	max-width: var(--olligents-max);
	margin-top: clamp(48px, 6vw, 96px);
	margin-inline: max(-16px, (100% - var(--olligents-max)) / 2);
}

.section > .section__note {
	/* Lined up with the right-hand edge of the case study box above */
	max-width: min(1200px, 100%);
	text-align: right;
	margin-top: 1.6em;
	color: var(--olligents-heading);
	font-size: 0.85rem;
	opacity: 0.8;
}

.section > .wp-block-olligents-case-study-tabs {
	width: min(1200px, 100%);
	max-width: none;
	margin-top: clamp(40px, 4.5vw, 72px);
}

/* Data security and privacy: a quieter band on the warm off-white */
.section--data { padding-block: clamp(56px, 6vw, 110px); background: #faf7f4; }
.section--data > p { max-width: 940px; }
.section.section--data h2 { margin-bottom: 0.5em; font-size: clamp(2.2rem, 3.8vw, 4rem); }

.section .data-security__badges { width: clamp(230px, 21vw, 340px); margin: clamp(32px, 3.5vw, 64px) auto 0; }
.data-security__badges img { display: block; width: 100%; height: auto; }

.section--blue {
	padding-bottom: 160px; /* clear the fixed nav */
	background: var(--olligents-contact);
	color: #fff;
}

/* "Have a question?" and the FAQs button, in the form's pill style rather
   than the usual spaced capitals */
.section--blue > .contact__question { margin: 1.5em 0 0.9em; color: #fff; font-size: clamp(1.4rem, 2vw, 2rem); }
.section--blue > .contact__faqs .wp-block-button__link {
	min-width: 13em;
	padding: 0.75em 2em;
	border-radius: 16px;
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}
.section--blue > .wp-block-olligents-contact-form { margin-top: 3.2em; }
.section--blue > .contact__faqs + .wp-block-olligents-contact-form { margin-top: 4.5em; }

/* LinkedIn, under the form */
.section > .contact__linkedin { width: clamp(44px, 4.2vw, 72px); margin: clamp(16px, 2.3vw, 40px) auto 0; } /* about 85px below Send at 1920px wide, as in the design */
.contact__linkedin a { display: block; transition: opacity 0.2s ease, transform 0.2s ease; }
.contact__linkedin a:hover,
.contact__linkedin a:focus-visible { opacity: 0.85; transform: translateY(-2px); }
.contact__linkedin img { display: block; width: 100%; height: auto; }

/* ---------- Grey panel, holding tabs ---------- */

.panel {
	width: var(--olligents-wide);
	margin: clamp(64px, 8vw, 120px) auto 0;
	padding: clamp(40px, 5vw, 88px) clamp(16px, 5vw, 80px);
	border-radius: 40px;
	background: var(--olligents-grey);
	box-sizing: border-box;
	text-align: center;
}

.panel > * { margin-block: 0 1.2em; }

.panel .panel__title {
	margin-bottom: clamp(32px, 3.5vw, 56px);
	color: var(--olligents-blue);
	font-size: clamp(1.4rem, 2vw, 2.25rem);
}

.panel .panel__heading { font-size: clamp(2.4rem, 3.8vw, 4rem); margin-bottom: 0.4em; }
.panel > .lede { margin-bottom: 1em; }
.panel__text { max-width: 860px; margin-inline: auto; }

.panel > .wp-block-olligents-tabs {
	max-width: 1424px;
	margin: clamp(32px, 3.5vw, 48px) auto clamp(48px, 5vw, 72px);
}

.panel > :last-child { margin-bottom: 0; }

/* A tab: heading and text beside an illustration */
.tab-columns.wp-block-columns { align-items: center; gap: clamp(24px, 4vw, 64px); margin: 0; color: var(--olligents-heading); }
.tab-columns h3 { margin: 0 0 0.5em; font-size: clamp(1.2rem, 1.8vw, 1.4375rem); line-height: 1.3; color: var(--olligents-heading); } /* 23px */
.tab-columns p { margin: 0 0 1em; font-size: 0.9375rem; line-height: 1.5333; } /* 15px on 23px */

.tab-illustration { margin: 0 auto; max-width: 220px; } /* about a fifth of the tab card, as in the design */
.tab-illustration img { display: block; width: 100%; height: auto; }

/* An illustration that stands on the bottom edge of the tab card */
.tab-columns .wp-block-column:has(> .is-flush-bottom) { align-self: flex-end; }
.tab-illustration.is-flush-bottom { margin-bottom: calc(-1 * var(--tabs-padding-bottom, 0px)); }
/* Sized by height, as in the design, so switching tabs doesn't change the card's height */
.tab-illustration.is-flush-bottom { max-width: none; }
.tab-illustration.is-flush-bottom { --figure-height: clamp(170px, 16vw, 250px); }
.tab-illustration.is-flush-bottom img { width: auto; max-width: 100%; height: var(--figure-height); margin-inline: auto; object-fit: contain; object-position: bottom; }
/* Every tab keeps room for the figure, so switching tabs doesn't change
   the card's height */
.tab-columns .wp-block-column:has(> .is-flush-bottom) { min-height: calc(clamp(170px, 16vw, 250px) - var(--tabs-padding-bottom, 0px)); display: flex; flex-direction: column; justify-content: flex-end; }

@media (max-width: 781px) {
	.tab-illustration { max-width: 200px; }
	.section h2 { font-size: 2.5rem; }

	/* No side margins of their own on phones: the section's padding is enough */
	.panel,
	.section--wide > .panel { width: auto; border-radius: 24px; }
	.section--wide > *,
	.section--wide > p { max-width: none; }
}

/* ---------- How it works ---------- */

/* On the blue gradient, as set in Figma, with navy and white type */
.how {
	--how-navy: #033371;
	background: linear-gradient(170deg, #74c3ff 32%, #0090ff 68%, #640a40 100%);
	color: var(--how-navy);
	/* The cards start well below their places (global.js) */
	overflow: clip;
	text-align: left;
}

.how > * { max-width: min(1440px, var(--olligents-wide)); margin-inline: auto; }
.how .eyebrow { margin-bottom: 0.5em; color: var(--olligents-heading); }
.how h2 { margin-bottom: 0.5em; color: #fff; }
.how .lede { color: var(--how-navy); }

.how__intro.wp-block-columns { gap: clamp(32px, 4vw, 80px); margin-bottom: 0; }
.how__title > *, .how__text > * { margin-block: 0; }
.how__text { padding-top: clamp(0px, 9vw, 175px); }
.how__text p + p { margin-top: 1.4em; }

.how .how__challenges {
	margin-block: clamp(56px, 6.5vw, 120px) clamp(32px, 3vw, 56px);
	text-align: center;
	font-size: clamp(1.8rem, 3.3vw, 3.6rem);
	line-height: 1.2;
}

/* Three cards, each stepped down a little from the one before */
.how .challenges {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.5vw, 48px);
	align-items: start;
	margin-bottom: clamp(16px, 2vw, 40px);
}

.challenges > :nth-child(2) { margin-top: clamp(24px, 3.3vw, 64px); }
.challenges > :nth-child(3) { margin-top: clamp(48px, 6.6vw, 128px); }

.challenge {
	position: relative;
	will-change: transform, opacity;
	padding: clamp(24px, 2.4vw, 48px);
	border-radius: clamp(16px, 1.6vw, 28px);
	background: #fff;
	box-shadow: 0 20px 50px rgba(3, 51, 113, 0.12);
	font-size: clamp(0.95rem, 1.05vw, 1.15rem);
	line-height: 1.5;
}

.challenge > * { margin-block: 0; }

.challenge__icon {
	position: absolute;
	top: clamp(20px, 2vw, 40px);
	right: clamp(20px, 2vw, 40px);
	width: clamp(26px, 2.2vw, 40px);
}

.challenge__icon img { display: block; width: 100%; height: auto; }

.challenge .challenge__label {
	margin-top: clamp(12px, 1.5vw, 28px);
	color: var(--olligents-blue);
	font-size: clamp(1.1rem, 1.4vw, 1.55rem);
	font-weight: 600;
	line-height: 1.3;
}

.challenge .challenge__problem,
.challenge .challenge__solution {
	font-size: clamp(1.35rem, 1.9vw, 2.05rem);
	font-weight: 600;
	line-height: 1.3;
}

.challenge .challenge__problem { padding-right: 1em; color: #f04438; }
.challenge .challenge__solution { margin: 1.1em 0 0.2em; color: var(--how-navy); }
.challenge strong { font-weight: 600; }

@media (max-width: 900px) {
	.how__text { padding-top: 0; }
	.how .challenges { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
	.challenges > :nth-child(n) { margin-top: 0; }
}

/* ---------- Working with us ---------- */

/* "Your journey" on a dark blue gradient, the tabs' white card below */
.journey {
	background: linear-gradient(120deg, #033371 35%, #0a64dc 100%);
	color: #fff;
	text-align: left;
}

.journey > * { max-width: min(1440px, var(--olligents-wide)); margin-inline: auto; }
.journey__intro > * { margin-block: 0; }
.journey__intro > .eyebrow { margin-bottom: 0.5em; }
.journey h2 { margin-bottom: 0.55em; }
.journey .lede { margin-bottom: 0.9em; color: #fff; }
.journey__intro > p:last-child { max-width: 32em; }

/* The tabs' white card runs off the bottom of the section, square there */
.journey { padding-bottom: 0; overflow: clip; } /* clip: it slides up into place */
.journey > .wp-block-olligents-tabs { margin: clamp(40px, 4.5vw, 72px) auto 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Wider pill tabs, all the same width, in bold */
.journey .tabs__tab { min-width: clamp(8em, 13vw, 12.5em); font-weight: 600; }

/* Each tab: a small label, a large blue title, the text (and on the first,
   a button), beside a large illustration standing on the card's foot */
.journey .tab-columns .tab-eyebrow { margin: 0 0 0.3em; font-size: clamp(0.85rem, 0.95vw, 1rem); font-weight: 500; }
.journey .tab-columns h3 { margin-bottom: 0.7em; font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1.2; }
.journey .tab-columns p:not(.tab-eyebrow) { max-width: 28em; font-size: clamp(1rem, 1.45vw, 1.5rem); line-height: 1.45; }
.journey .tab-columns .wp-block-buttons { margin-top: 1.6em; }
.journey .tab-columns .button-small .wp-block-button__link { padding: 1.1em 1.6em; border-color: var(--olligents-contact); border-radius: 14px; color: var(--olligents-heading); }
.journey .tab-columns .button-small .wp-block-button__link:hover,
.journey .tab-columns .button-small .wp-block-button__link:focus-visible { background: var(--olligents-contact); color: #fff; filter: none; }
.journey .tab-columns > .wp-block-column:first-child { align-self: center; padding-left: clamp(0px, 4vw, 96px); }
.journey .tab-illustration.is-flush-bottom { --figure-height: clamp(220px, 27vw, 430px); }
/* Every tab keeps room for the tallest, so switching doesn't move the card */
.journey .tab-columns .wp-block-column:has(> .is-flush-bottom) { min-height: calc(clamp(220px, 27vw, 430px) - var(--tabs-padding-bottom, 0px)); }

@media (max-width: 781px) {
	.journey > * { max-width: none; }
	.journey .tabs__tab { min-width: 0; }
	.journey .tab-columns > .wp-block-column:first-child { padding: 0; }
}

/* ---------- Rolling numbers (global.js) ---------- */

.roll-run { white-space: nowrap; }

/* Each digit's column: as wide as its own digit, with the strip of 0–9
   rolling through it, faded out at the top and bottom edges */
.roll-digit {
	/* Room above and below for the fade, so it only touches the gaps
	   between digits, never a digit at rest */
	--roll-fade: 0.15em;
	position: relative;
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	margin-block: calc(-1 * var(--roll-fade));
	padding-block: var(--roll-fade);
	-webkit-mask-image: linear-gradient(transparent, #000 var(--roll-fade), #000 calc(100% - var(--roll-fade)), transparent);
	mask-image: linear-gradient(transparent, #000 var(--roll-fade), #000 calc(100% - var(--roll-fade)), transparent);
}

.roll-digit__size { visibility: hidden; }

/* Each digit in the strip has the column's padding too, so at rest its
   neighbours sit wholly outside the column */
.roll-digit__strip {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	will-change: transform;
}

.roll-digit__strip > span { padding-block: var(--roll-fade); }

/* The number as a whole fades and slides up as its digits roll */
.roll-number .roll-number__visual {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.3em);
	transition: opacity 0.8s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.roll-number.is-rolled .roll-number__visual { opacity: 1; transform: none; }
.roll-number.is-static .roll-digit { -webkit-mask-image: none; mask-image: none; }
.roll-number.is-static .roll-number__visual { transition: none; }

.roll-number__text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Why we created Olligents ---------- */

.purpose { overflow-x: clip; }
.section > .purpose__pressure { margin-top: 2em; }
.section > .purpose__text { max-width: 820px; }
.section > .purpose__diagram { width: min(600px, 100%); margin: clamp(32px, 4vw, 64px) auto 0; }
.purpose__diagram img,
.purpose__diagram svg { display: block; width: 100%; height: auto; }
.section > .purpose__roles { margin: clamp(64px, 7vw, 110px) auto 0.9em; font-size: clamp(1.5rem, 2.2vw, 2.4rem); line-height: 1.3; }
.purpose__pressure strong { font-weight: 600; }

/* Statistic cards: one open, the others narrow strips that open it in
   their place when chosen (global.js). Work in progress in the design */
.purpose .stats {
	display: flex;
	gap: clamp(8px, 1.2vw, 16px);
	max-width: 790px;
	height: clamp(280px, 27vw, 350px);
	margin: clamp(40px, 4.5vw, 64px) auto 0;
	text-align: left;
}

.stat {
	position: relative;
	flex: 0 0 clamp(64px, 10vw, 130px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
	padding: clamp(24px, 4vw, 56px);
	border-radius: clamp(16px, 1.6vw, 24px);
	overflow: hidden;
	color: #fff;
	transition: flex-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1), flex-basis 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Level, without the flow layout's gap above all but the first */
.stats > .stat { margin: 0; }
.stat.is-open { flex: 1 1 0; }
.stat:not(.is-open) { cursor: pointer; }
.stat:not(.is-open):hover { filter: brightness(1.08); }
.stat:focus-visible { outline: 3px solid var(--olligents-blue); outline-offset: 3px; }

/* The content keeps the open card's width, so it doesn't rewrap as it opens */
.stat > * {
	width: clamp(240px, 32vw, 400px);
	margin: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.stat.is-open > * { opacity: 1; transition-delay: 0.3s; }

.stat .stat__figure { font-size: clamp(3.5rem, 6vw, 6rem); font-weight: 700; line-height: 1; }
/* Figures with words in, e.g. Nearly 14 hours, smaller to fit */
.stat .stat__figure.is-long { font-size: clamp(2.4rem, 3.8vw, 3.8rem); line-height: 1.05; }
.stat .stat__text { margin-top: 0.4em; font-size: clamp(1.05rem, 1.6vw, 1.55rem); font-weight: 600; line-height: 1.45; }
/* The auto-play countdown in the open card's corner (global.js): a white
   pie that empties as the card's time runs out */
.stat > .stat__timer {
	position: absolute;
	top: clamp(16px, 2vw, 26px);
	right: clamp(16px, 2vw, 26px);
	width: clamp(18px, 1.6vw, 24px);
	height: auto;
	opacity: 0.85;
}

.stat__timer svg { display: block; width: 100%; height: auto; overflow: visible; }
.stat__timer circle { fill: none; stroke: #fff; }
.stat__timer-ring { stroke-width: 2; opacity: 0.5; }
/* A stroke as wide as the circle is across draws a pie; it's taken away
   clockwise from the top */
.stat__timer-pie {
	stroke-width: 15;
	stroke-dasharray: 100;
	transform: rotate(-90deg) scaleY(-1);
	transform-origin: center;
}

.stat__timer.is-running .stat__timer-pie { animation: stat-countdown var(--stat-interval, 7s) linear forwards; }
.stat__timer.is-paused .stat__timer-pie { animation-play-state: paused; }
@keyframes stat-countdown { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 100; } }

.stat .stat__source { margin-top: 1.6em; font-size: 0.7rem; font-weight: 600; }
.stat__source a { color: inherit; }

/* The quote beside a picture that runs to the right edge of the screen */
.purpose > .purpose__quote {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	gap: clamp(32px, 5vw, 96px);
	align-items: center;
	max-width: var(--olligents-max);
	margin: clamp(64px, 8vw, 120px) max(-16px, (100% - var(--olligents-max)) / 2) 0 auto;
	padding-left: clamp(0px, 7vw, 120px);
	text-align: left;
}

.purpose__quote > * { margin: 0; }

.purpose__quote .wp-block-quote {
	padding: 0 0 0 clamp(20px, 2vw, 28px);
	border: 0;
	border-left: 2px solid var(--olligents-blue);
	color: var(--olligents-blue);
	font-size: clamp(1.3rem, 2.05vw, 2.15rem);
	font-weight: 600;
	line-height: 1.6;
}

.purpose__quote .wp-block-quote p { margin: 0; }

/* Heavy rounded quote marks (assets/media/quote-*.svg, in the text's
   colour), one above the quote and one after its last word. Drawn, not
   typed, so they look the same whatever fonts the visitor has */
.purpose__quote .wp-block-quote p::before,
.purpose__quote .wp-block-quote p::after {
	content: "";
	display: inline-block;
	width: 1.2em;
	height: 0.83em;
	background: currentColor;
	-webkit-mask: var(--quote-mark) center / contain no-repeat;
	mask: var(--quote-mark) center / contain no-repeat;
}

.purpose__quote .wp-block-quote p::before { --quote-mark: url(../media/quote-open.svg); display: block; margin-bottom: 0.3em; }
.purpose__quote .wp-block-quote p::after { --quote-mark: url(../media/quote-close.svg); margin-left: 0.35em; vertical-align: -0.05em; }

.purpose__quote .wp-block-quote cite {
	display: block;
	margin-top: 1em;
	color: var(--olligents-heading);
	font-size: clamp(0.85rem, 0.95vw, 1rem);
	font-style: normal;
	font-weight: 600;
}

.purpose__media {
	overflow: hidden;
	/* A little taller than the video, as in the design: it crops only the
	   video's sides, clear of its captions */
	aspect-ratio: 16 / 10;
	border-radius: clamp(40px, 6vw, 96px) 0 0 clamp(40px, 6vw, 96px);
	background: var(--olligents-navy);
}

.purpose__media video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Once the picture no longer reaches the edge, round all its corners */
@media (min-width: 1633px) {
	.purpose__media { border-radius: clamp(40px, 6vw, 96px); }
}

@media (max-width: 781px) {
	/* Phones: narrower strips and smaller type, with the open card's text
	   kept to the width it has (the group's, less the strips and padding) */
	.purpose .stats { container-type: inline-size; height: 340px; gap: 8px; }
	.stat { flex-basis: 44px; padding: 22px; border-radius: 16px; }
	.stat > * { width: calc(100cqw - 2 * 44px - 2 * 8px - 2 * 22px); }
	.stat .stat__figure { font-size: 2.8rem; }
	.stat .stat__figure.is-long { font-size: 2rem; }
	.stat .stat__text { font-size: 1rem; line-height: 1.4; }
	.stat .stat__source { margin-top: 1.2em; }
	.stat > .stat__timer { top: 14px; right: 14px; width: 18px; }
	.purpose > .purpose__quote { grid-template-columns: 1fr; margin-left: 0; padding-left: 0; }
	.purpose__media { margin-right: -16px; }
}

/* ---------- Why us ---------- */

.section--dark {
	padding-block: clamp(80px, 11vw, 220px);
	background: var(--olligents-radial);
	color: #fff;
}

.section--dark .lede { color: #fff; }
.section--dark > p:not(.lede, .eyebrow) { max-width: 760px; }

/* A white card with Oliver Wight and MyExoBrain either side of the line
   that joins them. Clipped all round, as the card starts below its place
   as it rises in (global.js) */
.section--dark:has(.partners) { padding-top: max(32px, 5vw); padding-bottom: clamp(48px, 5.5vw, 110px); overflow: clip; }

.partners {
	width: min(1180px, 100%);
	margin: clamp(40px, 5vw, 80px) auto 0;
	text-align: left;
}

.partners > .partners__card {
	position: relative;
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
	padding: clamp(40px, 5.5vw, 80px) clamp(28px, 5vw, 72px);
	border-radius: 16px;
	background: #fff;
	color: var(--olligents-heading);
}

.partners__card > * { margin: 0; }
.partners__partner > * { margin: 0 0 1.6em; }
.partners__partner > :last-child { margin-bottom: 0; }

.partners__logo { display: flex; justify-content: center; min-height: 42px; align-items: center; }
.partners__logo img { display: block; width: 100%; height: auto; }
.partners__logo--oliver-wight img { width: clamp(130px, 13vw, 175px); }
.partners__logo--myexobrain img { width: clamp(140px, 14vw, 190px); }

/* Visit Oliver Wight: blue, filling in on hover */
.partners .wp-block-buttons { justify-content: center; }
.partners .is-style-outline .wp-block-button__link { border-color: var(--olligents-blue); color: var(--olligents-blue); }
.partners .is-style-outline .wp-block-button__link:hover,
.partners .is-style-outline .wp-block-button__link:focus-visible { background: var(--olligents-blue); color: #fff; filter: none; }

.partners ul { padding-left: 1.1em; font-size: clamp(0.85rem, 0.95vw, 1rem); line-height: 1.55; }
.partners li + li { margin-top: 0.6em; }

.partners__statement {
	align-self: center;
	font-size: clamp(1.2rem, 1.9vw, 1.75rem);
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-wrap: balance;
}

/* Each award: its badge, centred in a narrow column, beside its name */
.awards > * + * { margin-top: 1.4em; }

.award {
	display: grid;
	grid-template-columns: clamp(56px, 6vw, 84px) minmax(0, 1fr);
	gap: clamp(14px, 1.6vw, 22px);
	align-items: center;
}

.award > * { margin: 0; }
.award__badge { justify-self: center; }
.award__badge img { display: block; width: auto; max-width: 100%; max-height: clamp(48px, 4.6vw, 64px); margin-inline: auto; }
.award__text { font-size: 0.8rem; line-height: 1.5; }
.award__text strong { display: inline-block; margin-bottom: 0.15em; font-size: 0.9rem; font-weight: 600; line-height: 1.45; }

/* Phones and tablets: one column, Oliver Wight, the line, MyExoBrain, and
   the awards as a row of badges without their text (the images' alt text
   names them), to keep the column short */
@media (max-width: 900px) {
	.partners > .partners__card { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 40px 24px; }
	.partners__partner { max-width: 420px; justify-self: center; }
	.partners__statement { padding-block: 32px; border-block: 1px solid #dde3ea; }
	.partners ul { font-size: 0.95rem; }

	.awards { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 32px; }
	.awards > * + * { margin-top: 0; }
	.award { display: block; }
	.award__text { display: none; }
	.award__badge img { max-height: 56px; }
}

/* ---------- Page header (e.g. Insights) ---------- */

.page-hero {
	padding: clamp(80px, 9vw, 150px) 16px clamp(64px, 7vw, 120px);
	background:
		radial-gradient(ellipse 50% 90% at 0% 0%, #0a14a8, transparent 70%),
		radial-gradient(ellipse 40% 80% at 100% 100%, #0a14c8, transparent 70%),
		var(--olligents-navy);
	color: #fff;
	text-align: center;
	font-size: clamp(1rem, 1.25vw, 1.25rem);
	line-height: 1.6;
}

.page-hero > * { max-width: 720px; margin: 0 auto 1em; }
/* Headings can run wider than the text, e.g. Frequently Asked Questions */
.page-hero > h1 { max-width: 1100px; }
.page-hero > :last-child { margin-bottom: 0; }
.page-hero .eyebrow { margin-bottom: 0.2em; }

.page-hero h1 {
	margin-bottom: 0.25em;
	color: #fff;
	font-size: clamp(3rem, 6vw, 6rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.page-hero .lede { margin-bottom: 1.2em; }

.section--insights {
	padding-block: clamp(56px, 6vw, 100px) clamp(80px, 9vw, 140px);
}

.section > .wp-block-olligents-insights-grid {
	max-width: var(--olligents-text-wide);
	margin-inline: auto;
}

/* ---------- Cookie banner (CookieConsent) ---------- */

#cc-main {
	--cc-font-family: var(--wp--preset--font-family--poppins);
	--cc-modal-border-radius: 16px;
	--cc-btn-border-radius: 10px;
	--cc-primary-color: var(--olligents-heading);
	--cc-secondary-color: var(--wp--preset--color--ink);
	--cc-link-color: var(--olligents-blue);
	--cc-btn-primary-bg: var(--olligents-contact);
	--cc-btn-primary-border-color: var(--olligents-contact);
	--cc-btn-primary-hover-bg: var(--olligents-heading);
	--cc-btn-primary-hover-border-color: var(--olligents-heading);
	--cc-btn-secondary-bg: var(--olligents-grey);
	--cc-btn-secondary-border-color: var(--olligents-grey);
	--cc-btn-secondary-color: var(--olligents-heading);
	--cc-btn-secondary-hover-bg: #e6e9ef;
	--cc-btn-secondary-hover-border-color: #e6e9ef;
	--cc-toggle-on-bg: var(--olligents-contact);
	--cc-cookie-category-block-bg: var(--olligents-grey);
	--cc-cookie-category-block-border: var(--olligents-grey);
	--cc-separator-border-color: #e6e9ef;
}

#cc-main .cm__title,
#cc-main .pm__title { font-weight: 600; }

/* Above the fixed nav pill */
#cc-main { z-index: 20; }

/* Ordinary pages (legal pages and the like): a shorter header */
.page-hero--compact { padding-block: clamp(64px, 7vw, 110px) clamp(48px, 5vw, 80px); }
.page-hero--compact h1 { font-size: clamp(2.4rem, 4.5vw, 4.25rem); margin-bottom: 0; }

/* Long-form text: left aligned, at a readable measure */
.section--text {
	padding-block: clamp(56px, 6vw, 96px) clamp(96px, 9vw, 150px);
	text-align: left;
	font-size: 1rem;
	line-height: 1.7;
}

.section--text .wp-block-post-content { max-width: 760px; margin-inline: auto; }
.section--text .wp-block-post-content > * { margin-block: 0 1.1em; }
.section--text h2 {
	margin: 2em 0 0.6em;
	color: var(--olligents-heading);
	font-size: clamp(1.35rem, 1.8vw, 1.6rem);
	line-height: 1.3;
}
.section--text h3 { margin: 1.6em 0 0.5em; color: var(--olligents-heading); font-size: 1.1rem; }
.section--text .wp-block-post-content > :first-child { margin-top: 0; }
.section--text ul { padding-left: 1.3em; }
.section--text li { margin-bottom: 0.4em; }

/* FAQs: each question a Details block, opening like an accordion, with a
   plus that turns into a minus */
.section--faqs .wp-block-post-content { max-width: 880px; }
.section--faqs .wp-block-post-content > .wp-block-details { margin: 0; border-bottom: 1px solid #d5dbe5; }
.section--faqs .wp-block-post-content > .wp-block-details:first-child { border-top: 1px solid #d5dbe5; }

.section--faqs .wp-block-details summary {
	position: relative;
	padding: 1.3em 3em 1.3em 0;
	color: var(--olligents-heading);
	font-size: clamp(1.1rem, 1.5vw, 1.35rem);
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.section--faqs .wp-block-details summary::-webkit-details-marker { display: none; }
.section--faqs .wp-block-details summary:hover,
.section--faqs .wp-block-details[open] summary { color: var(--olligents-blue); }
.section--faqs .wp-block-details summary:focus-visible { outline: 2px solid var(--olligents-blue); outline-offset: 4px; border-radius: 4px; }

.section--faqs .wp-block-details summary::before,
.section--faqs .wp-block-details summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.4em;
	width: 16px;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: var(--olligents-blue);
	transition: transform 0.25s ease;
}

.section--faqs .wp-block-details summary::after { transform: rotate(90deg); }
.section--faqs .wp-block-details[open] summary::after { transform: rotate(0deg); }

.section--faqs .wp-block-details > :not(summary) { margin: 0 0 1em; padding-right: 3em; color: var(--olligents-heading); }
.section--faqs .wp-block-details > :last-child { margin-bottom: 1.5em; }
.section--faqs .wp-block-details[open] > :not(summary) { animation: faq-open 0.35s ease; }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
	.section--faqs .wp-block-details[open] > :not(summary) { animation: none; }
}

/* The page's closing contact band */
.section--blue > .faqs__still { margin-bottom: 0.4em; font-size: clamp(2rem, 3.6vw, 3.6rem); }
.section--text table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.section--text .wp-block-table thead { border-bottom: 2px solid var(--olligents-heading); }
.section--text .wp-block-table th,
.section--text .wp-block-table td { padding: 0.6em 0.8em; border: 0; border-bottom: 1px solid #e6e9ef; text-align: left; vertical-align: top; }
.section--text th { color: var(--olligents-heading); font-weight: 600; }
.section--text .wp-block-table { overflow-x: auto; }
.section--text .is-style-note { padding: 1em 1.2em; border-radius: 10px; background: var(--olligents-grey); font-size: 0.9rem; }

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

.site-footer {
	padding: clamp(80px, 9vw, 130px) clamp(16px, 5vw, 84px) 130px; /* clear the fixed nav */
	background:
		radial-gradient(ellipse 50% 70% at 0% 0%, #0a14a8, transparent 70%),
		radial-gradient(ellipse 45% 70% at 100% 100%, #0a14c8, transparent 70%),
		var(--olligents-navy);
	color: #fff;
	text-align: center;
}

.site-footer > * { margin: 0 auto; }

.site-footer .site-footer__logo { width: clamp(190px, 17vw, 260px); } /* the wordmark about as wide as before */
.site-footer__logo a { display: block; }
.site-footer__logo img { display: block; width: 100%; height: auto; }

.site-footer .site-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin-top: clamp(64px, 7vw, 120px);
	font-size: 0.85rem;
}

.site-footer__links a { color: inherit; text-decoration: none; }

/* Company details on the left, copyright and credits on the right, under a hairline */
.site-footer .site-footer__legal {
	color: #b4b4c7;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px 48px;
	max-width: var(--olligents-max);
	margin-top: clamp(40px, 4.5vw, 72px);
	padding-top: clamp(28px, 2.5vw, 40px);
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	font-size: 0.72rem;
	line-height: 2;
	text-align: left;
}

.site-footer__legal > * { margin: 0; }
.site-footer .site-footer__credits { text-align: right; }
.site-footer__credits a { color: inherit; text-decoration: none; }
.site-footer__credits a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 700px) {
	.site-footer .site-footer__legal { flex-direction: column; text-align: center; }
	.site-footer .site-footer__credits { text-align: center; }
}
.site-footer__links a:hover { text-decoration: underline; }

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