/*
 * Synaptic Group: site revisions.
 *
 * Loaded after global.css so these rules win on equal specificity. Kept as a
 * separate file rather than merged into the minified global.css bundle so the
 * revisions stay readable and reversible.
 *
 * Contents:
 *   1. Tokens
 *   2. Brand mark
 *   3. Page gutters
 *   4. Hero: layout, tagline, node glyph
 *   5. Hero: synapse network animation
 *   6. Footer
 *   7. Consultation booking calendar
 *   8. Service cards: expandable
 *   9. Industry index: sector families
 *  10. Leadership
 *  11. Prose flourish
 *  12. Fixes found by rendering audit
 *  13. Case studies: hero bands
 *  14. Proof figures: the qualifier line
 *  15. The Synaptic Way: a value chain
 *  16. The 26 August 2026 website review
 */

/* ---------------------------------------------------------------------------
 * 1. Tokens
 * ------------------------------------------------------------------------ */

:root {
	/* The brand mark renders at a true 5cm square. */
	--synaptic-logo-size: 5cm;

	/* Content sits 2cm in from the viewport edge, everywhere. */
	--synaptic-gutter: 2cm;
}

/* ---------------------------------------------------------------------------
 * 2. Brand mark
 *
 * Sits top-left of every page via the shared site header. The source PNG is
 * 512x512, so a 5cm (~189px) display size is still a downscale on a 2x screen
 * and stays crisp.
 * ------------------------------------------------------------------------ */

/* The sprite carries the <symbol> only; it must occupy no space. */
.synaptic-logo-sprite {
	height: 0;
	position: absolute;
	visibility: hidden;
	width: 0;
}

/* The mark is a vector that inherits its colour, so it can sit on navy in the
   header and be re-tinted anywhere else without a second asset. The viewBox is
   very slightly taller than wide, so a square box plus the default
   preserveAspectRatio contains it at 5cm without distorting it. */
.synaptic-logo,
.synaptic-site-branding img {
	color: var( --synaptic-cyan );
	display: block;
	height: var( --synaptic-logo-size );
	max-width: 100%;
	object-fit: contain;
	width: var( --synaptic-logo-size );
}

.synaptic-site-header__inner {
	gap: 1.5rem;
	padding-block: 0.5rem;
}

.synaptic-site-branding {
	flex: none;
}

/* The nav was set at 15px against a 48px mark. Next to a 5cm one it reads as
   an afterthought, so it steps up and spaces out to hold its own. */
.synaptic-primary-nav__list {
	gap: clamp( 1.1rem, 2.2vw, 2.25rem );
}

.synaptic-primary-nav__list a {
	font-size: clamp( 1rem, 0.95rem + 0.2vw, 1.1875rem );
	font-weight: 600;
	letter-spacing: 0.005em;
}

.synaptic-site-header__cta .synaptic-btn {
	font-size: clamp( 0.9375rem, 0.9rem + 0.15vw, 1.0625rem );
	padding: 0.85em 1.7em;
}

.synaptic-mobile-nav__list a {
	font-size: 1.125rem;
	font-weight: 600;
}

/* The footer lockup is a separate, smaller instance of the same symbol. */
.synaptic-logo--footer,
.synaptic-footer__col--brand .synaptic-logo,
.synaptic-footer__col--brand img {
	height: 4.5rem;
	width: 4.5rem;
}

/* Step the mark down on narrower screens so the header cannot swallow the
   viewport on a phone or a small laptop. */
@media ( max-width: 1200px ) {
	:root {
		--synaptic-logo-size: 3.6cm;
	}
}

@media ( max-width: 900px ) {
	:root {
		--synaptic-logo-size: 2.4cm;
	}
}

@media ( max-width: 600px ) {
	:root {
		--synaptic-logo-size: 1.8cm;
	}
}

/* ---------------------------------------------------------------------------
 * 3. Page gutters
 *
 * page.php and the landing / full-width templates render the_content()
 * straight into <article>, which had no horizontal padding at all: every
 * block ran to the viewport edge and clipped the first character of each
 * line. Every top-level block now sits in the same measure as the header and
 * footer containers.
 * ------------------------------------------------------------------------ */

/* The shell spans the window and is inset by the gutter, rather than being
   capped at 1280px and centred, which left very wide empty margins on a large
   display. */
.synaptic-container {
	max-width: none;
	padding-inline: var( --synaptic-gutter );
}

/* Taken as margin, not padding, so a block carrying its own internal padding
   (the CTA banner, the service cards) keeps it. */
.synaptic-page > *:not( .synaptic-hero ):not( .synaptic-container ):not( .alignfull ) {
	margin-inline: var( --synaptic-gutter );
	max-width: none;
}

/* Full-width sections keep their bleed, and inset their inner content. */
.synaptic-page > .alignfull {
	padding-inline: var( --synaptic-gutter );
}

/* Air between top-level SECTIONS. Scoped to the section components by name:
   applying it to every child put a 5.5rem gap between each heading and
   paragraph of a prose page, which is what broke the About page's spacing. */
.synaptic-page > .synaptic-value-prop,
.synaptic-page > .synaptic-services-grid,
.synaptic-page > .synaptic-stats,
.synaptic-page > .synaptic-case-study-grid,
.synaptic-page > .synaptic-industry-index,
.synaptic-page > .synaptic-industry-grid,
.synaptic-page > .synaptic-team-grid,
.synaptic-page > .synaptic-insights-feed,
.synaptic-page > .synaptic-testimonials,
.synaptic-page > .synaptic-methodology,
.synaptic-page > .synaptic-careers-list,
.synaptic-page > .synaptic-assessment,
.synaptic-page > .synaptic-contact-form,
.synaptic-page > .synaptic-cta-banner {
	margin-block-start: clamp( 3rem, 6vw, 5.5rem );
}

/* Prose rhythm: normal spacing for the text that sits between those sections. */
.synaptic-page > h1 {
	margin-block: 0 0.75rem;
}

.synaptic-page > h2 {
	margin-block-start: clamp( 2.25rem, 4vw, 3.25rem );
	margin-block-end: 0.75rem;
}

.synaptic-page > h3 {
	margin-block: 2rem 0.5rem;
}

.synaptic-page > p {
	margin-block: 0 1.1rem;
	max-width: 74ch;
}

.synaptic-page > .synaptic-breadcrumbs {
	margin-block-end: 1.5rem;
}

/* The hero already ends on its own band, so what follows needs less on top. */
.synaptic-page > .synaptic-hero + * {
	margin-block-start: clamp( 2.5rem, 5vw, 4.5rem );
}

/* 2cm is most of a phone screen, so the inset steps down on small viewports. */
@media ( max-width: 900px ) {
	:root {
		--synaptic-gutter: 1.25rem;
	}
}

/* ---------------------------------------------------------------------------
 * 4. Hero: layout, tagline, node glyph
 * ------------------------------------------------------------------------ */

/* The hero stacks: headline first, then the network as a band underneath.
   render.php prints the network before the content, so flex order puts it
   back below without touching the template. */
.synaptic-hero {
	display: flex;
	flex-direction: column;
	padding-block: clamp( 2.75rem, 5.5vw, 4.25rem );
}

.synaptic-hero__content {
	margin-inline: var( --synaptic-gutter );
	max-width: none;
	order: 1;
}

/* The band is drawn in a 600x100 viewBox and shown at the same 6:1 ratio, so
   the two scales match and the nodes are not stretched out of shape. */
.synaptic-hero__particles {
	aspect-ratio: 6 / 1;
	height: auto;
	inset: auto;
	margin-block-start: clamp( 1.5rem, 3.5vw, 2.75rem );
	min-height: 96px;
	order: 2;
	position: relative;
	width: 100%;
	z-index: 0;
}

/* The band is the bottom of the hero, so the section's own bottom padding
   would only push it away from the edge it is meant to sit on. */
.synaptic-hero--centered {
	padding-block-end: 0;
}

.synaptic-hero--centered .synaptic-hero__content {
	text-align: center;
}

.synaptic-hero--centered .synaptic-hero__subheadline {
	font-size: 1.0625rem;
	margin-block-end: 0;
	margin-inline: auto;
	max-width: 64ch;
}

.synaptic-hero--centered .synaptic-hero__ctas {
	justify-content: center;
}

/* The tagline reads in Synaptic cyan, on flat navy, with nothing behind it. */
.synaptic-hero__tagline-text {
	color: var( --synaptic-cyan );
}

.synaptic-hero__tagline {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: clamp( 1.4rem, 4.1vw, 3.125rem );
	font-weight: 700;
	gap: clamp( 0.6rem, 2.2vw, 2.25rem );
	justify-content: center;
	letter-spacing: 0.02em;
	line-height: 1.05;
	margin: 0 0 1.125rem;
	text-transform: uppercase;
	text-wrap: balance;
}

.synaptic-hero__tagline-word {
	align-items: center;
	display: inline-flex;
	gap: 0.38em;
	white-space: nowrap;
}

.synaptic-node-glyph {
	flex: none;
	height: 0.78em;
	width: 0.78em;
}

.synaptic-node-glyph__core {
	fill: var( --synaptic-green );
}

.synaptic-node-glyph__links line {
	stroke: var( --synaptic-cyan );
	stroke-linecap: round;
	stroke-width: 1.5;
}

.synaptic-node-glyph__links circle {
	fill: var( --synaptic-azure );
}

/* A slow charge on the glyph, matched to the network behind it. */
.synaptic-hero__tagline-word:nth-child( 1 ) .synaptic-node-glyph {
	animation: synaptic-glyph-charge 4.2s ease-in-out infinite;
}

.synaptic-hero__tagline-word:nth-child( 2 ) .synaptic-node-glyph {
	animation: synaptic-glyph-charge 4.2s ease-in-out -1.4s infinite;
}

.synaptic-hero__tagline-word:nth-child( 3 ) .synaptic-node-glyph {
	animation: synaptic-glyph-charge 4.2s ease-in-out -2.8s infinite;
}

@keyframes synaptic-glyph-charge {
	0%,
	100% {
		opacity: 0.72;
	}
	50% {
		opacity: 1;
	}
}

/* ---------------------------------------------------------------------------
 * 5. Hero: synapse network animation
 *
 * Three blocks, every pair wired, with light pulses running along all three
 * core links. Node and pulse positions are set by blocks/hero/view.js.
 * ------------------------------------------------------------------------ */

.synaptic-hero__edge {
	fill: none;
	stroke: var( --synaptic-azure );
}

/* The three links between the blocks: brighter, thicker, and flashing, so all
   three connections read as live rather than one pair carrying the animation. */
.synaptic-hero__edge--core {
	animation: synaptic-edge-flash 3.2s ease-in-out infinite;
	opacity: 0.62;
	stroke: var( --synaptic-cyan );
	stroke-width: 0.42;
}

.synaptic-hero__edge--core[ data-index='1' ] {
	animation-delay: -1.05s;
}

.synaptic-hero__edge--core[ data-index='2' ] {
	animation-delay: -2.1s;
}

.synaptic-hero__edge--branch {
	opacity: 0.34;
	stroke-width: 0.18;
}

@keyframes synaptic-edge-flash {
	0%,
	100% {
		opacity: 0.4;
	}
	50% {
		opacity: 0.95;
	}
}

.synaptic-hero__node--hub {
	fill: var( --synaptic-cyan );
	opacity: 0.92;
}

.synaptic-hero__node--satellite {
	fill: var( --synaptic-azure );
	opacity: 0.72;
}

.synaptic-hero__halo {
	animation: synaptic-halo-breathe 3.6s ease-in-out infinite;
	fill: none;
	opacity: 0.45;
	stroke: var( --synaptic-cyan );
	stroke-width: 0.26;
}

/* Keyed off data-hub rather than nth-of-type: the halo and the block it wraps
   are both <rect>, so type counting would land on the wrong element. */
.synaptic-hero__halo[ data-hub='1' ] {
	animation-delay: -1.2s;
}

.synaptic-hero__halo[ data-hub='2' ] {
	animation-delay: -2.4s;
}

@keyframes synaptic-halo-breathe {
	0%,
	100% {
		opacity: 0.18;
	}
	50% {
		opacity: 0.62;
	}
}

.synaptic-hero__pulse {
	fill: var( --synaptic-green );
	filter: drop-shadow( 0 0 1.4px var( --synaptic-green ) );
}

/* Pulses on the three core links carry the brightest burst. */
.synaptic-hero__pulse--core {
	fill: #fff;
	filter: drop-shadow( 0 0 2px var( --synaptic-cyan ) ) drop-shadow( 0 0 4.5px var( --synaptic-green ) );
}

/* The 30-second reversal: the whole network flares as the flow turns around. */
.synaptic-hero.is-reversing .synaptic-hero__edge--core {
	animation: synaptic-edge-reverse 0.9s ease-in-out;
	opacity: 0.95;
	stroke: var( --synaptic-green );
}

.synaptic-hero.is-reversing .synaptic-hero__halo {
	opacity: 0.85;
}

@keyframes synaptic-edge-reverse {
	0% {
		opacity: 0.3;
	}
	35% {
		opacity: 1;
	}
	100% {
		opacity: 0.4;
	}
}

/* Reduced motion, and the no-JS/static case: keep the network drawn and fully
   connected, but hold it still. global.css hides .synaptic-hero__particles on
   the static variant; once the network has been drawn there is something worth
   showing, so put it back. */
.synaptic-hero--static.has-network .synaptic-hero__particles {
	display: block;
}

.synaptic-hero--static .synaptic-hero__edge--core,
.synaptic-hero--static .synaptic-hero__halo,
.synaptic-hero--static .synaptic-node-glyph {
	animation: none;
}

.synaptic-hero--static .synaptic-hero__edge--core {
	opacity: 0.55;
}

.synaptic-hero--static .synaptic-hero__pulse {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 6. Footer
 *
 * Pull the Explore column across so its heading lines up against the
 * newsletter block rather than floating in the middle of the row.
 * ------------------------------------------------------------------------ */

.synaptic-footer__columns {
	grid-template-columns: 1.5fr 1fr 0.9fr 1.4fr;
}

.synaptic-footer__col--links {
	justify-self: end;
}

@media ( max-width: 900px ) {
	.synaptic-footer__columns {
		grid-template-columns: 1fr 1fr;
	}

	.synaptic-footer__col--links {
		justify-self: start;
	}
}

/* ---------------------------------------------------------------------------
 * 7. Consultation booking calendar
 * ------------------------------------------------------------------------ */

.synaptic-booking {
	border: 1px solid var( --synaptic-mist );
	border-radius: var( --synaptic-radius );
	margin-block: 2rem;
	padding: clamp( 1.25rem, 3vw, 2rem );
	scroll-margin-block: 2rem;
}

.synaptic-booking__intro {
	margin-bottom: 1.5rem;
}

.synaptic-booking__title {
	font-size: 1.125rem;
	margin: 0 0 0.375rem;
}

.synaptic-booking__note {
	color: var( --synaptic-slate );
	font-size: 0.875rem;
	margin: 0;
}

.synaptic-booking__header {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.synaptic-booking__month {
	font-size: 1rem;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
}

.synaptic-booking__nav {
	background: var( --synaptic-mist );
	border: 0;
	border-radius: var( --synaptic-radius );
	color: var( --synaptic-navy );
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0.25em 0.7em;
}

.synaptic-booking__nav:hover:not( :disabled ) {
	background: var( --synaptic-cyan );
}

.synaptic-booking__nav:disabled {
	cursor: not-allowed;
	opacity: 0.35;
}

.synaptic-booking__weekdays,
.synaptic-booking__grid {
	display: grid;
	gap: 0.25rem;
	grid-template-columns: repeat( 7, 1fr );
}

.synaptic-booking__weekday {
	color: var( --synaptic-slate );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding-block: 0.375rem;
	text-align: center;
	text-transform: uppercase;
}

.synaptic-booking__day {
	aspect-ratio: 1;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var( --synaptic-radius );
	color: inherit;
	font: inherit;
	font-variant-numeric: tabular-nums;
	padding: 0;
}

.synaptic-booking__day--empty {
	border: 0;
}

.synaptic-booking__day.is-available {
	background: var( --synaptic-mist );
	cursor: pointer;
	font-weight: 600;
}

.synaptic-booking__day.is-available:hover,
.synaptic-booking__day.is-available:focus-visible {
	background: var( --synaptic-cyan );
	color: var( --synaptic-navy );
}

.synaptic-booking__day.is-selected {
	background: var( --synaptic-navy );
	color: #fff;
}

/* Weekends, South African public holidays and past dates. */
.synaptic-booking__day.is-unavailable {
	background: repeating-linear-gradient(
		135deg,
		#f4f6f9,
		#f4f6f9 4px,
		#e8edf2 4px,
		#e8edf2 8px
	);
	color: var( --synaptic-slate );
	cursor: not-allowed;
	opacity: 0.75;
	text-decoration: line-through;
}

.synaptic-booking__day.is-today {
	outline: 2px solid var( --synaptic-azure );
	outline-offset: -2px;
}

.synaptic-booking__legend {
	color: var( --synaptic-slate );
	display: flex;
	flex-wrap: wrap;
	font-size: 0.75rem;
	gap: 1rem;
	list-style: none;
	margin: 0.875rem 0 0;
	padding: 0;
}

.synaptic-booking__legend li {
	align-items: center;
	display: flex;
	gap: 0.375rem;
}

.synaptic-booking__key {
	border-radius: 2px;
	display: block;
	height: 0.85em;
	width: 0.85em;
}

.synaptic-booking__key--open {
	background: var( --synaptic-mist );
}

.synaptic-booking__key--closed {
	background: repeating-linear-gradient(
		135deg,
		#f4f6f9,
		#f4f6f9 3px,
		#cbd5e1 3px,
		#cbd5e1 6px
	);
}

.synaptic-booking__slots {
	border-top: 1px solid var( --synaptic-mist );
	margin-top: 1.5rem;
	padding-top: 1.25rem;
}

.synaptic-booking__slots-title {
	font-size: 0.9375rem;
	margin: 0 0 0.75rem;
}

.synaptic-booking__slot-list {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat( auto-fill, minmax( 5.5rem, 1fr ) );
}

.synaptic-booking__slot {
	background: #fff;
	border: 1px solid var( --synaptic-mist );
	border-radius: var( --synaptic-radius );
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	padding: 0.6em 0.5em;
}

.synaptic-booking__slot:hover,
.synaptic-booking__slot:focus-visible {
	border-color: var( --synaptic-azure );
}

.synaptic-booking__slot.is-selected {
	background: var( --synaptic-navy );
	border-color: var( --synaptic-navy );
	color: #fff;
}

.synaptic-booking__empty {
	color: var( --synaptic-slate );
	font-size: 0.875rem;
	margin: 0;
}

.synaptic-booking__summary {
	font-size: 0.9375rem;
	margin: 1rem 0 0;
	min-height: 1.4em;
}

.synaptic-booking__summary[ data-state='ready' ] {
	color: var( --synaptic-cyan-deep );
	font-weight: 600;
}

.synaptic-booking__summary[ data-state='error' ] {
	color: #b3261e;
	font-weight: 600;
}

/* Submitting without a slot brings the picker forward. */
.synaptic-booking.has-error {
	border-color: #b3261e;
}

.synaptic-booking.is-flashing {
	animation: synaptic-booking-flash 0.9s ease-out;
}

@keyframes synaptic-booking-flash {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba( 179, 38, 30, 0 );
	}
	20% {
		box-shadow: 0 0 0 6px rgba( 179, 38, 30, 0.22 );
	}
	60% {
		box-shadow: 0 0 0 3px rgba( 179, 38, 30, 0.12 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.synaptic-booking.is-flashing {
		animation: none;
	}
}

/* ---------------------------------------------------------------------------
 * 8. Service cards: expandable
 *
 * Each pillar's sub-services previously only existed as a sentence buried on
 * its own page. The card opens to show them, built on <details> so it works
 * with no JavaScript, is keyboard operable, and stays findable by in-page
 * search.
 * ------------------------------------------------------------------------ */

.synaptic-services-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

.synaptic-service-card {
	border: 1px solid var( --synaptic-mist );
	border-radius: var( --synaptic-radius );
	color: inherit;
	padding: 0;
	text-decoration: none;
	transition: border-color 180ms ease;
}

.synaptic-service-card[ open ],
.synaptic-service-card:hover {
	border-color: var( --synaptic-azure );
}

.synaptic-service-card__summary {
	align-items: center;
	cursor: pointer;
	display: grid;
	gap: 0.25rem 1.5rem;
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	list-style: none;
	padding: 1.75rem 2rem;
}

.synaptic-service-card__summary::-webkit-details-marker {
	display: none;
}

.synaptic-service-card__index {
	color: var( --synaptic-azure );
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.synaptic-service-card__heading {
	display: block;
	font-size: clamp( 1.125rem, 1.6vw, 1.5rem );
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.synaptic-service-card__body {
	color: var( --synaptic-slate );
	display: block;
	font-size: 0.9375rem;
	margin-top: 0.35rem;
	max-width: 70ch;
}

/* A plus that becomes a minus: two bars, one rotated away on open. */
.synaptic-service-card__toggle {
	block-size: 1.25rem;
	flex: none;
	inline-size: 1.25rem;
	position: relative;
}

.synaptic-service-card__toggle::before,
.synaptic-service-card__toggle::after {
	background: var( --synaptic-azure );
	block-size: 2px;
	content: "";
	inline-size: 100%;
	inset-block-start: 50%;
	inset-inline-start: 0;
	position: absolute;
	transition: transform 260ms cubic-bezier( 0.16, 1, 0.3, 1 );
}

.synaptic-service-card__toggle::after {
	transform: rotate( 90deg );
}

.synaptic-service-card[ open ] .synaptic-service-card__toggle::after {
	transform: rotate( 0deg );
}

.synaptic-service-card__panel {
	border-top: 1px solid var( --synaptic-mist );
	margin-inline: 2rem;
	padding-block: 1.5rem 2rem;
}

.synaptic-service-card__covers {
	color: var( --synaptic-slate );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin: 0 0 1rem;
	margin-inline-end: -0.16em;
	text-transform: uppercase;
}

.synaptic-service-card__items {
	display: grid;
	gap: 0.875rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.synaptic-service-card__items li {
	padding-inline-start: 1.5em;
	position: relative;
}

/* The node bullet, carried over from the brand mark. */
.synaptic-service-card__items li::before {
	background: var( --synaptic-cyan );
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba( 0, 209, 213, 0.18 );
	content: "";
	height: 0.4em;
	inset-block-start: 0.62em;
	inset-inline-start: 0.25em;
	position: absolute;
	width: 0.4em;
}

.synaptic-service-card__item-label {
	font-weight: 700;
}

.synaptic-service-card__item-detail {
	color: var( --synaptic-slate );
}

.synaptic-service-card__item-label + .synaptic-service-card__item-detail::before {
	content: ": ";
}

.synaptic-service-card__link {
	color: var( --synaptic-cyan-deep );
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 700;
	margin-top: 1.5rem;
	text-decoration: none;
}

.synaptic-service-card__link::after {
	content: " \2192";
}

.synaptic-service-card__link:hover {
	text-decoration: underline;
}

/* The flat variant keeps the original behaviour for a pillar with nothing
   listed to reveal. */
.synaptic-service-card--flat {
	display: block;
	padding: 1.75rem 2rem;
}

@media ( max-width: 600px ) {
	.synaptic-service-card__summary {
		grid-template-columns: auto minmax( 0, 1fr );
		padding: 1.25rem;
	}

	.synaptic-service-card__toggle {
		grid-column: 2;
		justify-self: end;
	}

	.synaptic-service-card__panel {
		margin-inline: 1.25rem;
	}
}

/* ---------------------------------------------------------------------------
 * 9. Industry index: sector families
 * ------------------------------------------------------------------------ */

.synaptic-industry-index {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 22rem ), 1fr ) );
}

.synaptic-industry-family {
	border: 1px solid var( --synaptic-mist );
	border-radius: var( --synaptic-radius );
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
}

.synaptic-industry-family__header {
	align-items: center;
	display: flex;
	gap: 0.75rem;
}

.synaptic-industry-family__icon {
	color: var( --synaptic-cyan-deep );
	flex: none;
}

.synaptic-industry-family__name {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	margin: 0;
	margin-inline-end: auto;
}

.synaptic-industry-family__count {
	color: var( --synaptic-slate );
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The overlap: which pillars this family most often buys. */
.synaptic-industry-family__pillars {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 1.125rem 0 0;
}

.synaptic-industry-family__pillars-label {
	color: var( --synaptic-slate );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	width: 100%;
}

.synaptic-industry-family__pillar {
	background: rgba( 0, 209, 213, 0.1 );
	border-radius: 999px;
	color: var( --synaptic-cyan-deep );
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.3em 0.85em;
}

.synaptic-industry-family__list {
	border-top: 1px solid var( --synaptic-mist );
	display: grid;
	gap: 0;
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.synaptic-industry-family__list li + li {
	border-top: 1px solid var( --synaptic-mist );
}

.synaptic-industry-index .synaptic-industry-grid__item {
	border: 0;
	border-radius: 0;
	color: inherit;
	display: block;
	font-size: 0.9375rem;
	padding: 0.7rem 0;
	text-decoration: none;
	transition: color 150ms ease, padding-inline-start 150ms ease;
}

.synaptic-industry-index .synaptic-industry-grid__item:hover,
.synaptic-industry-index .synaptic-industry-grid__item:focus-visible {
	color: var( --synaptic-cyan-deep );
	padding-inline-start: 0.5rem;
}

/* ---------------------------------------------------------------------------
 * 10. Leadership
 * ------------------------------------------------------------------------ */

.synaptic-team-grid {
	gap: 2.5rem;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 20rem ), 1fr ) );
}

.synaptic-team-member {
	border-top: 2px solid var( --synaptic-navy );
	padding-top: 1.5rem;
}

.synaptic-team-member__photo {
	border-radius: var( --synaptic-radius );
	height: 8.5rem;
	margin-bottom: 1.25rem;
	object-fit: cover;
	width: 8.5rem;
}

/* Stands in until a headshot is uploaded. */
.synaptic-team-member__photo--monogram {
	align-items: center;
	background: linear-gradient( 145deg, var( --synaptic-navy ), #0a1550 );
	color: var( --synaptic-cyan );
	display: flex;
	font-size: 2.25rem;
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0.02em;
}

.synaptic-team-member h3 {
	font-size: 1.25rem;
	margin: 0;
}

.synaptic-team-member__role {
	color: var( --synaptic-cyan-deep );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin: 0.35rem 0 1rem;
	margin-inline-end: -0.16em;
	text-transform: uppercase;
}

.synaptic-team-member__bio p {
	color: var( --synaptic-slate );
	font-size: 0.9375rem;
	line-height: 1.62;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 11. Prose flourish
 *
 * The first paragraph after a page title carries the argument, and each
 * section heading gets a rule with a node on it.
 * ------------------------------------------------------------------------ */

.synaptic-page > h1 + p {
	color: var( --synaptic-ink );
	font-size: clamp( 1.125rem, 1.4vw, 1.3125rem );
	line-height: 1.5;
	max-width: 60ch;
}

.synaptic-page > h2 {
	border-top: 1px solid var( --synaptic-mist );
	color: var( --synaptic-navy );
	padding-top: 1.25rem;
	position: relative;
}

.synaptic-page > h2::before {
	background: var( --synaptic-cyan );
	block-size: 6px;
	content: "";
	inline-size: 6px;
	inset-block-start: -3px;
	inset-inline-start: 0;
	position: absolute;
	transform: rotate( 45deg );
}

/* ---------------------------------------------------------------------------
 * 12. Fixes found by rendering audit
 * ------------------------------------------------------------------------ */

/* No stylesheet in the theme ever set a font-family: the face was declared
   only in theme.json, which WordPress turns into CSS at runtime. Anywhere that
   generated CSS is absent (a preview, an editor iframe, a caching plugin that
   drops it) every element fell back to system UI at the browser default size.
   Stating it here makes the typography a property of the stylesheet rather
   than of the runtime. Same stack theme.json declares: Arial throughout, with
   Helvetica behind it for platforms that do not ship Arial. */
body,
button,
input,
optgroup,
select,
textarea {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

body {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
}

/* Header overflow between roughly 900px and 1200px. A 2cm gutter each side
   plus a 3.6cm mark left too little for seven nav items and a CTA, so the
   button was pushed past the viewport edge and the page scrolled sideways.
   Three defences: labels never break mid-word, the row may wrap rather than
   overflow, and the mark yields room earlier. */
.synaptic-primary-nav__list a,
.synaptic-site-header__cta .synaptic-btn {
	white-space: nowrap;
}

.synaptic-site-header__inner {
	flex-wrap: wrap;
}

.synaptic-primary-nav {
	min-width: 0;
}

.synaptic-primary-nav__list {
	flex-wrap: wrap;
}

@media ( max-width: 1400px ) {
	:root {
		--synaptic-logo-size: 4cm;
		--synaptic-gutter: 1.5cm;
	}
}

@media ( max-width: 1200px ) {
	:root {
		--synaptic-logo-size: 2.8cm;
		--synaptic-gutter: 1.25cm;
	}

	.synaptic-primary-nav__list {
		gap: 0.75rem 1rem;
	}
}

/* Nothing capped the width of a form once the page stopped being a centred
   column, so on a wide display the booking grid rendered 168px squares and a
   text input ran nearly 1300px. Reading measure is capped; the block still
   starts at the 2cm gutter rather than being centred in empty space. */
.synaptic-contact-form,
.synaptic-page > .synaptic-contact-form {
	max-width: 46rem;
}

/* The calendar sits centred in the booking block rather than hugging the left
   edge of a form that is much wider than it is. */
.synaptic-booking__calendar {
	margin-inline: auto;
	max-width: 30rem;
}

.synaptic-booking__intro,
.synaptic-booking__slots,
.synaptic-booking__confirmation {
	margin-inline: auto;
	max-width: 34rem;
}

.synaptic-booking__intro {
	text-align: center;
}

.synaptic-booking__note {
	margin-inline: auto;
}

.synaptic-booking__slots-title,
.synaptic-booking__summary {
	text-align: center;
}

.synaptic-booking__legend {
	justify-content: center;
}

.synaptic-booking__confirmation {
	text-align: center;
}

.synaptic-booking__confirmation-actions {
	justify-content: center;
}

.synaptic-booking__slot-list {
	margin-inline: auto;
	max-width: 34rem;
}

.synaptic-assessment {
	max-width: 46rem;
}

.synaptic-newsletter {
	max-width: 26rem;
}

/* ---------------------------------------------------------------------------
 * 13. Case studies: hero bands
 *
 * The Company Profile gives every engagement two full pages, so a tile with a
 * truncated excerpt undersells the work. Each case study is a full-width band
 * led by its headline outcome; the band is the link, the detail is on its own
 * page.
 * ------------------------------------------------------------------------ */

.synaptic-case-studies {
	border-top: 1px solid var( --synaptic-navy );
	display: block;
	margin-top: 0;
}

.synaptic-case-study {
	border-bottom: 1px solid var( --synaptic-mist );
	color: inherit;
	display: grid;
	gap: 0.5rem 3rem;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.1fr );
	padding-block: clamp( 2rem, 4vw, 3.5rem );
	position: relative;
	text-decoration: none;
}

.synaptic-case-study::before {
	background: linear-gradient( 90deg, rgba( 0, 209, 213, 0.08 ), transparent 70% );
	content: "";
	inset-block: 0;
	inset-inline: calc( var( --synaptic-gutter ) * -1 );
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 260ms cubic-bezier( 0.16, 1, 0.3, 1 );
}

.synaptic-case-study:hover::before,
.synaptic-case-study:focus-visible::before {
	opacity: 1;
}

.synaptic-case-study > * {
	position: relative;
}

.synaptic-case-study__eyebrow {
	color: var( --synaptic-cyan-deep );
	font-size: 0.6875rem;
	font-weight: 700;
	grid-column: 1 / -1;
	letter-spacing: 0.18em;
	margin-inline-end: -0.18em;
	text-transform: uppercase;
}

.synaptic-case-study__title {
	font-size: clamp( 1.5rem, 3vw, 2.5rem );
	font-weight: 700;
	grid-column: 1;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0.5rem 0 0;
	max-width: 22ch;
}

.synaptic-case-study__headline {
	align-self: start;
	grid-column: 2;
	grid-row: 2 / span 2;
	margin: 0.5rem 0 0;
}

.synaptic-case-study__figure {
	color: var( --synaptic-navy );
	display: block;
	font-size: clamp( 2.75rem, 6vw, 5rem );
	font-variant-numeric: tabular-nums lining-nums;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 0.9;
}

.synaptic-case-study__summary {
	color: var( --synaptic-slate );
	grid-column: 1;
	margin: 1rem 0 0;
	max-width: 52ch;
}

.synaptic-case-study__meta {
	display: block;
	grid-column: 1;
	margin-top: 1.25rem;
}

.synaptic-case-study__client {
	color: var( --synaptic-slate );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.synaptic-case-study__cta {
	color: var( --synaptic-cyan-deep );
	font-size: 0.875rem;
	font-weight: 700;
	grid-column: 1;
	margin-top: 1.25rem;
}

.synaptic-case-study__cta::after {
	content: " \2192";
	display: inline-block;
	transition: transform 260ms cubic-bezier( 0.16, 1, 0.3, 1 );
}

.synaptic-case-study:hover .synaptic-case-study__cta::after,
.synaptic-case-study:focus-visible .synaptic-case-study__cta::after {
	transform: translateX( 0.35rem );
}

@media ( max-width: 860px ) {
	.synaptic-case-study {
		grid-template-columns: 1fr;
	}

	.synaptic-case-study__headline,
	.synaptic-case-study__title,
	.synaptic-case-study__summary,
	.synaptic-case-study__meta,
	.synaptic-case-study__cta {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ---------------------------------------------------------------------------
 * 14. Proof figures: the qualifier line
 * ------------------------------------------------------------------------ */

.synaptic-stats {
	gap: 1rem;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 14rem ), 1fr ) );
	text-align: start;
}

.synaptic-stat {
	border-top: 2px solid var( --synaptic-navy );
	padding-top: 1.25rem;
}

.synaptic-stat__value {
	color: var( --synaptic-navy );
	font-size: clamp( 2.25rem, 4vw, 3.25rem );
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: -0.035em;
	line-height: 0.95;
}

.synaptic-stat__label {
	color: var( --synaptic-ink );
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	margin-top: 0.65rem;
}

/* The qualifier is what turns a claim into something checkable. */
.synaptic-stat__note {
	color: var( --synaptic-slate );
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	margin-top: 0.25rem;
}

/* ---------------------------------------------------------------------------
 * 15. The Synaptic Way: a value chain
 *
 * Six equal links that point into each other, rather than six separate boxes
 * with one of them drawn differently. The old layout gave stage 04 a dashed
 * white enclosure because it held three parallel strands; with the strands
 * folded into one named stage there is nothing left to enclose, and the odd
 * box out only made the chain look broken.
 * ------------------------------------------------------------------------ */

.synaptic-flow {
	display: grid;
	gap: 1.25rem;
}

.synaptic-flow__note {
	border-inline-start: 2px solid var( --synaptic-cyan );
	color: var( --synaptic-slate );
	font-size: 0.9375rem;
	margin: 0;
	max-width: 68ch;
	padding-inline-start: 1rem;
}

.synaptic-flow__track {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	padding: 0 0 0.5rem;
}

/* The arrowhead of one link sits inside the notch of the next, so the row
   reads as > > > > > without drawing a single separate arrow. */
.synaptic-flow__stage {
	--synaptic-chevron: 0.85rem;

	background: var( --synaptic-mist );
	color: var( --synaptic-ink );
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 0.2rem;
	justify-content: center;
	min-width: 8.5rem;
	padding: 0.7rem 1.5rem 0.7rem 2rem;
	clip-path: polygon(
		0 0,
		calc( 100% - var( --synaptic-chevron ) ) 0,
		100% 50%,
		calc( 100% - var( --synaptic-chevron ) ) 100%,
		0 100%,
		var( --synaptic-chevron ) 50%
	);
}

/* The chain starts square and ends in a point, so it has a beginning and a
   direction rather than being a loop of identical arrows. */
.synaptic-flow__stage:first-child {
	padding-inline-start: 1.1rem;
	clip-path: polygon(
		0 0,
		calc( 100% - var( --synaptic-chevron ) ) 0,
		100% 50%,
		calc( 100% - var( --synaptic-chevron ) ) 100%,
		0 100%
	);
}

.synaptic-flow__stage:last-child {
	background: var( --synaptic-navy );
	color: #fff;
}

.synaptic-flow__stage-number {
	color: var( --synaptic-cyan-deep );
	font-size: 0.625rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: 0.16em;
}

.synaptic-flow__stage:last-child .synaptic-flow__stage-number {
	color: var( --synaptic-green );
}

.synaptic-flow__stage-title {
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
}

/* Stacked, the chevrons would point sideways off the edge of a phone, so the
   chain becomes a column of plain links joined by a vertical connector. */
@media ( max-width: 900px ) {
	.synaptic-flow__track {
		flex-direction: column;
		gap: 0.75rem;
		overflow-x: visible;
	}

	.synaptic-flow__stage {
		border-radius: var( --synaptic-radius );
		clip-path: none;
		padding: 0.85rem 1.1rem;
		position: relative;
	}

	.synaptic-flow__stage:first-child {
		padding-inline-start: 1.1rem;
	}

	.synaptic-flow__stage + .synaptic-flow__stage::before {
		background: var( --synaptic-azure );
		block-size: 0.75rem;
		content: "";
		inline-size: 2px;
		inset-block-start: -0.75rem;
		inset-inline-start: 1.5rem;
		position: absolute;
	}
}

/* ---------------------------------------------------------------------------
 * 16. The 26 August 2026 website review
 * ------------------------------------------------------------------------ */

/* --- Section headings above the services grid and the proof figures ------ */

.synaptic-section-heading {
	border-top: 2px solid var( --synaptic-navy );
	color: var( --synaptic-navy );
	font-size: 1.125rem;
	letter-spacing: 0.04em;
	margin: 3.5rem 0 0;
	padding-top: 1rem;
	text-transform: uppercase;
}

.synaptic-section-heading + .synaptic-services-grid,
.synaptic-section-heading + .synaptic-stats {
	margin-top: 1.5rem;
}

/* --- Hero: one claim per line -------------------------------------------- */

/* Three separate claims run together read as one long sentence nobody
   finishes. Each now occupies its own line, and the block only splits where
   the writer put a full stop. */
.synaptic-hero__subheadline-line {
	display: block;
}

.synaptic-hero__subheadline-line + .synaptic-hero__subheadline-line {
	margin-top: 0.5rem;
}

/* --- Forms: the field is visible before you touch it --------------------- */

/* The border was mist on white, which is very nearly white on white: the
   fields only appeared once a browser drew its own hover or focus ring, so
   the form read as a column of labels with nothing to type into. */
.synaptic-form input[ type="email" ],
.synaptic-form input[ type="tel" ],
.synaptic-form input[ type="text" ],
.synaptic-form input[ type="url" ],
.synaptic-form select,
.synaptic-form textarea,
.synaptic-newsletter input[ type="email" ] {
	background: #fbfcfd;
	border: 1px solid #b7c2cf;
	border-radius: var( --synaptic-radius );
	box-shadow: inset 0 1px 2px rgba( 10, 15, 31, 0.06 );
	color: var( --synaptic-ink );
	font: inherit;
	padding: 0.7em 0.9em;
	width: 100%;
}

.synaptic-form textarea {
	resize: vertical;
}

.synaptic-form input:hover,
.synaptic-form select:hover,
.synaptic-form textarea:hover {
	border-color: var( --synaptic-slate );
}

.synaptic-form input:focus,
.synaptic-form select:focus,
.synaptic-form textarea:focus {
	border-color: var( --synaptic-cyan-deep );
	box-shadow: 0 0 0 3px rgba( 0, 178, 241, 0.22 );
	outline: none;
}

/* On the dark footer the same fields need the opposite contrast. */
.synaptic-site-footer .synaptic-newsletter input[ type="email" ] {
	background: rgba( 255, 255, 255, 0.06 );
	border-color: rgba( 255, 255, 255, 0.45 );
	box-shadow: none;
	color: #fff;
}

.synaptic-site-footer .synaptic-newsletter input[ type="email" ]::placeholder {
	color: rgba( 255, 255, 255, 0.65 );
}

/* --- Phone: number plus its dialling code -------------------------------- */

.synaptic-form__phone {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: minmax( 8rem, 15rem ) 1fr;
}

@media ( max-width: 600px ) {
	.synaptic-form__phone {
		grid-template-columns: 1fr;
	}
}

/* --- Client onboarding --------------------------------------------------- */

.synaptic-onboarding__form {
	display: grid;
	gap: 2.5rem;
	max-width: 46rem;
}

.synaptic-form__section {
	border: 0;
	border-top: 2px solid var( --synaptic-navy );
	margin: 0;
	padding: 1.5rem 0 0;
}

.synaptic-form__legend {
	align-items: baseline;
	color: var( --synaptic-navy );
	display: flex;
	font-size: 1.0625rem;
	font-weight: 700;
	gap: 0.75rem;
	letter-spacing: 0.02em;
	margin-bottom: 1.25rem;
	padding: 0;
	text-transform: uppercase;
}

.synaptic-form__legend-index {
	color: var( --synaptic-cyan-deep );
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.16em;
}

.synaptic-form__group-label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.75rem;
}

.synaptic-form__checks {
	display: grid;
	gap: 0.5rem;
}

.synaptic-form__check {
	align-items: start;
	border: 1px solid #b7c2cf;
	border-radius: var( --synaptic-radius );
	display: grid;
	font-weight: 400;
	gap: 0.75rem;
	grid-template-columns: auto 1fr;
	margin: 0;
	padding: 0.75rem 0.9rem;
}

.synaptic-form__check:hover {
	border-color: var( --synaptic-azure );
}

.synaptic-form__check input[ type="checkbox" ] {
	margin-top: 0.2rem;
}

/* The visitor's own words, with the capability they route to underneath, so
   picking an option and knowing what it books are the same action. */
.synaptic-form__check-signal {
	display: block;
	font-weight: 700;
}

.synaptic-form__check-route {
	color: var( --synaptic-slate );
	display: block;
	font-size: 0.8125rem;
	margin-top: 0.15rem;
}

.synaptic-onboarding__payment {
	border-top: 2px solid var( --synaptic-navy );
	margin-top: 3rem;
	max-width: 46rem;
	padding-top: 1.5rem;
}

.synaptic-onboarding__payment h2 {
	margin-top: 0;
}

.synaptic-onboarding__payment--empty {
	color: var( --synaptic-slate );
	font-size: 0.875rem;
}

/* --- Careers -------------------------------------------------------------- */

.synaptic-careers-list__cv {
	font-weight: 700;
	white-space: nowrap;
}

/* --- Leadership ----------------------------------------------------------- */

/* The headshots are circular crops that were matted onto black, so on a white
   page each one sat inside a hard black square. The files are now matted onto
   white; this keeps the corner soft if a replacement is ever uploaded with a
   background of its own. */
.synaptic-team-member__photo {
	background: #fff;
}

/* --- Social marks --------------------------------------------------------- */

/* The footer printed an empty span styled as a translucent circle, so a
   configured LinkedIn URL rendered as a blank grey dot. The marks are now real
   paths that take their colour from the link. */
.synaptic-social-icons__link {
	align-items: center;
	background: rgba( 255, 255, 255, 0.08 );
	border-radius: 50%;
	color: #fff;
	display: flex;
	height: 34px;
	justify-content: center;
	transition: background-color 160ms ease, color 160ms ease;
	width: 34px;
}

.synaptic-social-icons__link:hover,
.synaptic-social-icons__link:focus-visible {
	background: var( --synaptic-cyan );
	color: var( --synaptic-navy );
}

.synaptic-social-icons__glyph {
	display: block;
	height: 18px;
	width: 18px;
}

/* --- Page heading, intro and body sections ------------------------------- */

/* These used to be bare <h1>/<h2>/<p> children of .synaptic-page, so the
   spacing and the node rule above each heading were keyed to that. Now that
   the same copy is rendered from Synaptic Content inside two blocks, the same
   treatment is keyed to the blocks instead. */

.synaptic-page-intro__heading {
	margin-block: 0 0.75rem;
}

/* The first paragraph after a page title carries the argument. */
.synaptic-page-intro__lead {
	color: var( --synaptic-ink );
	font-size: clamp( 1.125rem, 1.4vw, 1.3125rem );
	line-height: 1.5;
	margin-block: 0 1.1rem;
	max-width: 60ch;
}

.synaptic-page > .synaptic-prose-sections {
	margin-block-start: clamp( 2.25rem, 4vw, 3.25rem );
}

.synaptic-prose-sections__section + .synaptic-prose-sections__section {
	margin-block-start: clamp( 2.25rem, 4vw, 3.25rem );
}

.synaptic-prose-sections h2 {
	border-top: 1px solid var( --synaptic-mist );
	color: var( --synaptic-navy );
	margin-block: 0 0.75rem;
	padding-top: 1.25rem;
	position: relative;
}

.synaptic-prose-sections h2::before {
	background: var( --synaptic-cyan );
	block-size: 6px;
	content: "";
	inline-size: 6px;
	inset-block-start: -3px;
	inset-inline-start: 0;
	position: absolute;
	transform: rotate( 45deg );
}

.synaptic-prose-sections p {
	margin-block: 0 1.1rem;
	max-width: 74ch;
}

/* --- Embedded Google Calendar -------------------------------------------- */

.synaptic-booking__embed {
	border-top: 1px solid var( --synaptic-mist );
	grid-column: 1 / -1;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
}

.synaptic-booking__embed-title {
	color: var( --synaptic-navy );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.synaptic-booking__embed-frame {
	border: 1px solid var( --synaptic-mist );
	border-radius: var( --synaptic-radius );
	display: block;
	height: 34rem;
	max-width: 100%;
	width: 100%;
}

@media ( max-width: 600px ) {
	.synaptic-booking__embed-frame {
		height: 26rem;
	}
}

/* --- Leadership profile link ---------------------------------------------- */

.synaptic-team-member__linkedin {
	align-items: center;
	color: var( --synaptic-cyan-deep );
	display: inline-flex;
	font-size: 0.8125rem;
	font-weight: 700;
	gap: 0.45rem;
	margin-top: 0.85rem;
	text-decoration: none;
}

.synaptic-team-member__linkedin:hover,
.synaptic-team-member__linkedin:focus-visible {
	color: var( --synaptic-navy );
	text-decoration: underline;
}

.synaptic-team-member__linkedin .synaptic-social-icons__glyph {
	height: 15px;
	width: 15px;
}

/* --- Booking: the reader's timezone --------------------------------------- */

/* One quiet line, not a label on every button. A visitor in Johannesburg
   should never notice this exists; one in London should never have to do
   arithmetic. */
.synaptic-booking__zone {
	align-items: center;
	color: var( --synaptic-slate );
	display: flex;
	flex-wrap: wrap;
	font-size: 0.8125rem;
	gap: 0.5rem;
	margin: 0 0 0.85rem;
}

.synaptic-booking__zone label {
	font-weight: 400;
	margin: 0;
}

.synaptic-booking__zone select {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var( --synaptic-mist );
	color: var( --synaptic-navy );
	font: inherit;
	font-weight: 700;
	padding: 0.1rem 0.2rem;
}

.synaptic-booking__zone select:focus-visible {
	border-bottom-color: var( --synaptic-cyan-deep );
	outline: none;
}