/* ==========================================================================
   Client-specific overrides — loaded after tectera's custom.css.
   Put brand colors, fonts, and per-project tweaks here.
   ========================================================================== */

:root {
	--brand-primary: #0d6efd;   /* replace with client brand color */
	--brand-dark: #212529;
}

/* ==========================================================================
   Home hero — gradient background, left copy, orbiting integrations on right.
   Sits under the fixed transparent header (header.css handles the header).
   Font: Saira (loaded in functions.php — needs weights 300/400/500/600).
   ========================================================================== */

.hero {
	--hero-ink: #0b3a5e;
	--hero-accent: #f58445;
	--hero-mint: #9fd4bf;

	position: relative;
	overflow: hidden;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding: calc(var(--header-h, 96px) + 40px) var(--header-gutter, 24px) 72px;
	color: #fff;
	font-family: 'Saira', sans-serif;
	background:
		radial-gradient(ellipse 38% 42% at 76% 20%, rgba(224, 160, 80, .50), transparent 72%),
		radial-gradient(ellipse 30% 30% at 100% 0%, rgba(110, 110, 120, .45), transparent 70%),
		linear-gradient(180deg, #15496b 0%, #1a6070 20%, #208a7c 45%, #249880 64%, #8b9462 84%, #d98e5e 100%);
}

.hero__inner {
	width: 100%;
	max-width: var(--header-max, 1280px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
	align-items: center;
	gap: 48px;
}
/* ---------- Copy ---------- */
.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 32px;
	padding: 7px 18px 7px 16px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	font-size: 14px;
	line-height: 21px;
	font-weight: 500;
	letter-spacing: .01em;
}

.hero__dots { display: inline-flex; gap: 6px; }
.hero__dots i { display: block; width: 6px; height: 6px; border-radius: 50%; }
.hero__dots i:nth-child(1) { background: #f08a4b; }
.hero__dots i:nth-child(2) { background: #2fa58a; }
.hero__dots i:nth-child(3) { background: #8fb0b2; }

.hero__title {
	margin: 0 0 28px;
	font-size: clamp(2.5rem, 4.8vw, 3.3rem);
	line-height: 1.04;
	font-weight: 400;
	letter-spacing: -.012em;
	color: #fff;
}

.hero__title-accent {
	background: linear-gradient(90deg, var(--hero-accent) 0%, #c9a26b 38%, var(--hero-mint) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.hero__lead {
	max-width: 35rem;
	margin: 0 0 40px;
	font-size: clamp(1rem, 1.25vw, 1.125rem);
	line-height: 1.7;
	font-weight: 300;
	color: rgba(255, 255, 255, .92);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 49px;
	padding: 0 24px;
	font-size: 15px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 0;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.hero-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.hero-btn--primary { background: #fff; color: var(--hero-ink); }
.hero-btn--primary:hover { background: #eef3f5; color: var(--hero-ink); }
.hero-btn__arrow { transition: transform .2s ease; }
.hero-btn--primary:hover .hero-btn__arrow { transform: translateX(4px); }

.hero-btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .04);
}
.hero-btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .5); }

/* ---------- Orbit ---------- */

.hero__visual { display: flex; justify-content: center; }

.orbit {
	--orbit: clamp(300px, 36vw, 480px);
	--s: calc(var(--orbit) * .072);          /* icon tile size */
	position: relative;
	width: var(--orbit);
	aspect-ratio: 1;
}

.orbit__ring {
	--dir: normal;
	--dir-inv: reverse;
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--ring);
	height: var(--ring);
	margin: calc(var(--ring) / -2) 0 0 calc(var(--ring) / -2);
	border-radius: 50%;
	animation: orbit-spin var(--dur) linear infinite;
	animation-direction: var(--dir);
	will-change: transform;
}

/* the visible ring line, with gaps cut out where the icons sit */
.orbit__ring::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, .38);
	-webkit-mask-image: var(--gaps);
	mask-image: var(--gaps);
}

.orbit__ring--outer  { --ring: var(--orbit);              --dur: 140s; --gaps: repeating-conic-gradient(from 21deg,  transparent 0 18deg, #000 18deg 60deg); }
.orbit__ring--middle { --ring: calc(var(--orbit) * .765); --dur: 100s; --dir: reverse; --dir-inv: normal;
                       --gaps: repeating-conic-gradient(from -10deg, transparent 0 20deg, #000 20deg 60deg); }
.orbit__ring--inner  { --ring: calc(var(--orbit) * .5);   --dur: 70s;  --gaps: repeating-conic-gradient(from 76deg,  transparent 0 28deg, #000 28deg 120deg); }

.orbit__item {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	transform: rotate(var(--a)) translateY(calc(var(--ring) / -2));
}
.orbit__upright {
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(calc(var(--a) * -1));
}

/* tile / glyph counter-rotate against the ring so logos always stay upright */
.orbit__tile,
.orbit__glyph {
	position: absolute;
	top: 0;
	left: 0;
	animation: orbit-spin var(--dur) linear infinite;
	animation-direction: var(--dir-inv);
}

.orbit__tile {
	--w: calc(var(--s) * var(--wx, 1));
	width: var(--w);
	height: var(--s);
	margin: calc(var(--s) / -2) 0 0 calc(var(--w) / -2);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--s) * .16);
	background: #fff;
	border-radius: calc(var(--s) * .2);
	box-shadow: 0 6px 18px rgba(8, 30, 50, .14);
}
.orbit__tile img { display: block; width: 100%; height: 100%; object-fit: contain; }

.orbit__fallback {
	font-size: calc(var(--s) * .3);
	font-weight: 600;
	color: var(--hero-ink);
}

.orbit__glyph {
	--g: calc(var(--orbit) * .05);
	width: var(--g);
	height: var(--g);
	margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2);
	color: rgba(255, 255, 255, .92);
}
.orbit__glyph svg { display: block; width: 100%; height: 100%; }

.orbit__core {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--orbit) * .218);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 28%, #2f6c72 0%, #1b4a62 55%, #153a54 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 22px 50px rgba(8, 30, 50, .35);
}
.orbit__core img,
.orbit__core svg { width: 48%; height: auto; display: block; }

@keyframes orbit-spin { to { transform: rotate(360deg); } }

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
	.hero { min-height: 0; padding-bottom: 64px; }
	.hero__inner { grid-template-columns: 1fr; gap: 56px; }
	.orbit { --orbit: min(86vw, 460px); }
}

@media (max-width: 575px) {
	.hero__actions .hero-btn { width: 100%; }
	.hero__badge { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.orbit__ring,
	.orbit__tile,
	.orbit__glyph { animation: none; }
}

/* ==========================================================================
   Logo strip — below the hero (template-parts/logo-strip.php)
   ========================================================================== */

.logo-strip {
	padding: 76px var(--header-gutter, 24px) 80px;
	background: #fff;
	border-bottom: 1px solid #eef1f5;
	font-family: 'Saira', sans-serif;
	overflow: hidden;
}

.logo-strip__inner {
	max-width: var(--header-max, 1280px);
	margin: 0 auto 44px;
}

.logo-strip__label {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	color: #134767;
}
.logo-strip__label::before {
	content: "";
	flex: 0 0 32px;
	height: 1px;
	background: #d7dee5;
}

/* the track bleeds to the screen edges; names are cropped like the design */
.logo-strip__slider {
	margin: 0 calc(var(--header-gutter, 24px) * -1);
}
.logo-strip__item.splide__slide {
	display: flex;
	align-items: center;
	width: auto;
	padding: 0 42px;           /* 84px between names */
	white-space: nowrap;
}

.logo-strip__name {
	font-size: 18px;
	line-height: 1.5;
	font-weight: 500;
	color: #9aa6b1;
	transition: color .2s ease;
}
.logo-strip__item:hover .logo-strip__name { color: #134767; }

.logo-strip__item img {
	display: block;
	height: 48px;
	width: auto;
	filter: grayscale(1);
	opacity: .6;
	transition: opacity .2s ease, filter .2s ease;
}
.logo-strip__item:hover img { opacity: 1; filter: none; }

@media (max-width: 767px) {
	.logo-strip { padding: 52px var(--header-gutter, 24px) 56px; }
	.logo-strip__inner { margin-bottom: 32px; }
	.logo-strip__label { font-size: 14px; }
	.logo-strip__name { font-size: 16px; }
	.logo-strip__item.splide__slide { padding: 0 28px; }
}

/* ==========================================================================
   The Problem (v2) — template-parts/problem.php
   Desktop graphic is a 986 x 539 design canvas: card slots are placed in %
   and every size is a multiple of --u (= 1 design px), so it scales as one.
   Motion states only apply under .has-motion (added by JS, never when the
   visitor prefers reduced motion). Below 992px the cards stack.
   ========================================================================== */

.pb, .pb *, .pb *::before, .pb *::after { box-sizing: border-box; }
.pb {
	--pb-ink: #171717;
	--pb-navy: #134767;
	--pb-teal: #23967f;
	--pb-mint: #88f1f8;
	--pb-muted: #7b8895;
	--pb-bg: #f7f7f8;
	position: relative;
	padding: 72px var(--header-gutter, 24px) 56px;
	background: var(--pb-bg);
	font-family: 'Saira', sans-serif;
	overflow: hidden;
}
.pb__inner { max-width: var(--header-max, 1280px); margin: 0 auto; }

.pb__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--pb-navy);
}
.pb__eyebrow-line {
	flex: 0 0 32px;
	height: 1px;
	background: #c7c8ca;
	transform-origin: left center;
}

.pb__title {
	position: relative;
	z-index: 2;
	max-width: 21em;
	margin: 0 0 16px;
	font-size: clamp(2rem, 3.06vw, 2.75rem);
	line-height: 1.14;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--pb-ink);
}
/* heading word reveal (words are wrapped by JS) */
.pb-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.pb-w__i { display: inline-block; will-change: transform; }

/* ---------- stage ---------- */

.pb-stage {
	--u: 1px;
	position: relative;
	width: min(100%, 986px);
	aspect-ratio: 986 / 539;
	margin: 0 auto;
	container-type: inline-size;
}
@supports (width: 1cqw) {
	.pb-stage > * { --u: calc(100cqw / 986); }
}

.pb-wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 0;
}
.pb-wire__base {
	stroke: var(--pb-teal);
	stroke-width: 1.4;
	stroke-dasharray: 5 9;
	opacity: .3;
}
.pb-wire__hot {
	stroke: var(--pb-teal);
	stroke-width: 1.6;
	stroke-linecap: round;
	opacity: 0;
	transition: opacity .35s ease;
}
.pb-wire.is-hot .pb-wire__base { opacity: .55; }
.pb-wire.is-hot .pb-wire__hot { opacity: .9; }
.pb-packet, .pb-packet__glow, .pb-packet__tail { opacity: 0; }
.pb-packet { fill: var(--pb-teal); }
.pb-packet__glow { fill: rgba(35, 150, 127, .22); }
.pb-packet__tail { stroke-width: 2.4; stroke-linecap: round; }

.pb-nodes { margin: 0; padding: 0; list-style: none; }
.pb-node {
	position: absolute;
	z-index: 1;
	width: calc(var(--u) * 206);
	margin: 0;
	padding: 0;
}
.pb-node--slot1 { left: 6.09%;  top: 14.34%; }
.pb-node--slot2 { left: 39.6%;  top: 1.86%; }
.pb-node--slot3 { left: 73.02%; top: 12.95%; }
.pb-node--slot4 { left: 1.01%;  top: 74.82%; }
.pb-node--slot5 { left: 78.09%; top: 76.4%; }
.pb-node--core  { left: 31.73%; top: 42.43%; width: calc(var(--u) * 402.6); z-index: 2; }

/* ---------- service card ---------- */

.pb-card {
	--rx: 0deg;
	--ry: 0deg;
	--mx: 50%;
	--my: 50%;
	position: relative;
	box-sizing: border-box;
	padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 17);
	background: #fff;
	border-radius: calc(var(--u) * 10);
	box-shadow: 0 1px 2px rgba(13, 55, 82, .03), 0 calc(var(--u) * 10) calc(var(--u) * 26) calc(var(--u) * -12) rgba(13, 55, 82, .12);
	transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
	transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
	overflow: hidden;
	isolation: isolate;
}
.pb-card__shine {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(calc(var(--u) * 180) circle at var(--mx) var(--my), rgba(136, 241, 248, .22), transparent 70%);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}
.pb-card__icon { display: block; width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
.pb-card__icon img { display: block; width: 100%; height: 100%; }
.pb-card__title {
	margin: calc(var(--u) * 12) 0 0;
	font-family: inherit;
	font-size: calc(var(--u) * 16);
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: .005em;
	color: var(--pb-navy);
}
.pb-card__meta {
	margin: calc(var(--u) * 12) 0 0;
	font-size: calc(var(--u) * 12);
	line-height: 1.3;
	color: var(--pb-muted);
}

.pb-node.is-linked .pb-card,
.pb-node:not(.pb-node--core):hover .pb-card {
	box-shadow: 0 0 0 1px rgba(35, 150, 127, .28), 0 calc(var(--u) * 18) calc(var(--u) * 36) calc(var(--u) * -14) rgba(13, 55, 82, .22);
}
.pb-node:hover .pb-card__shine,
.pb-node.is-linked .pb-card__shine { opacity: 1; }

/* ---------- centre card ---------- */

.pb-core {
	padding: calc(var(--u) * 29);
	border-radius: calc(var(--u) * 14.5);
	overflow: visible;
	box-shadow: 0 1px 2px rgba(13, 55, 82, .04), 0 calc(var(--u) * 36) calc(var(--u) * 73) calc(var(--u) * -31) rgba(13, 55, 82, .2);
}
.pb-core::after {                       /* ping ring when a data pulse lands */
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 1px rgba(35, 150, 127, .4), 0 0 calc(var(--u) * 24) rgba(136, 241, 248, .35);
	opacity: 0;
	pointer-events: none;
}
.pb-core__aura {                        /* soft rotating glow behind the centre card */
	position: absolute;
	inset: 8% 6%;
	z-index: -1;
	border-radius: 50%;
	background: conic-gradient(from var(--pb-a, 0deg), rgba(136, 241, 248, .0), rgba(136, 241, 248, .55), rgba(35, 150, 127, .35), rgba(242, 140, 70, .28), rgba(136, 241, 248, .0));
	filter: blur(calc(var(--u) * 46));
	opacity: 0;
	pointer-events: none;
}
.pb-core__logo { display: block; width: calc(var(--u) * 33); height: calc(var(--u) * 35); }
.pb-core__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pb-core__title {
	margin: calc(var(--u) * 18) 0 calc(var(--u) * 14);
	font-family: inherit;
	font-size: calc(var(--u) * 29);
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -.005em;
	color: var(--pb-ink);
}
.pb-core__text {
	margin: 0;
	font-size: calc(var(--u) * 13);
	line-height: 1.54;
	color: #636466;
}
.pb-tags {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--u) * 6);
	margin: calc(var(--u) * 20) 0 0;
	padding: 0;
	list-style: none;
}
.pb-tag {
	margin: 0;
	padding: calc(var(--u) * 6) calc(var(--u) * 9);
	font-size: calc(var(--u) * 9.5);
	line-height: 1.1;
	letter-spacing: .02em;
	color: #939598;
	background: #f1f5f8;
	border-radius: calc(var(--u) * 3);
	transition: background-color .35s ease, color .35s ease, transform .45s cubic-bezier(.2, .9, .3, 1.4), box-shadow .35s ease;
	cursor: default;
}
.pb-tag.is-lit,
.pb-tag.is-linked {
	color: var(--pb-navy);
	background: #d3f7f3;
	box-shadow: inset 0 0 0 1px rgba(35, 150, 127, .3);
	transform: translateY(calc(var(--u) * -2));
}

.pb-spine { display: none; }

/* ---------- motion (JS adds .has-motion, then .is-in / .is-online) ---------- */

.pb.has-motion .pb__eyebrow-line { transform: scaleX(0); transition: transform .8s cubic-bezier(.6, 0, .2, 1); }
.pb.has-motion .pb__eyebrow-text { opacity: 0; transform: translateX(-8px); transition: opacity .6s ease .25s, transform .6s ease .25s; }
.pb.has-motion .pb-w__i { transform: translateY(110%) rotate(4deg); transform-origin: left bottom; transition: transform 1s cubic-bezier(.2, .8, .2, 1) calc(.2s + var(--wi) * 55ms); }
.pb.has-motion.is-in .pb__eyebrow-line,
.pb.has-motion.is-in .pb__eyebrow-text,
.pb.has-motion.is-in .pb-w__i { opacity: 1; transform: none; }

/* desktop: JS drives the node transforms + opacity frame by frame */
.pb.has-motion.is-scrub .pb-node { will-change: transform, opacity; }
.pb.has-motion.is-scrub .pb-wire__base { animation: pb-flow 1.4s linear infinite; }
.pb.has-motion .pb-wire { opacity: 0; transition: opacity .6s ease; }
.pb.has-motion .pb-wire.is-drawn { opacity: 1; }

.pb.has-motion .pb-card__icon { transform: scale(.4) rotate(-25deg); opacity: 0; transition: transform .7s cubic-bezier(.2, 1.4, .4, 1), opacity .3s ease; transition-delay: calc(.15s + var(--i, 0) * 60ms); }
.pb.has-motion .pb-node.is-set .pb-card__icon { transform: none; opacity: 1; }
.pb.has-motion .pb-node.is-send .pb-card__icon { animation: pb-send .55s cubic-bezier(.2, .9, .3, 1.4); }

.pb.has-motion .pb-core__logo { transform: scale(.5) rotate(-90deg); opacity: 0; transition: transform 1s cubic-bezier(.2, 1.2, .3, 1), opacity .4s ease; }
.pb.has-motion .pb-node--core.is-set .pb-core__logo { transform: none; opacity: 1; }
.pb.has-motion .pb-tag { opacity: 0; transform: translateY(calc(var(--u) * 6)); }
.pb.has-motion .pb-node--core.is-set .pb-tag { opacity: 1; transform: none; transition-delay: calc(.35s + var(--ti, 0) * 70ms); }
.pb.has-motion .pb-node--core.is-set .pb-tag.is-lit,
.pb.has-motion .pb-node--core.is-set .pb-tag.is-linked { transform: translateY(calc(var(--u) * -2)); transition-delay: 0s; }

.pb.is-online .pb-core__aura { opacity: .55; animation: pb-aura 9s linear infinite; transition: opacity 1.2s ease; }
.pb-core.is-ping::after { animation: pb-ping 1.1s cubic-bezier(.2, .7, .3, 1); }
.pb-core.is-ping .pb-core__logo img { animation: pb-pop .6s cubic-bezier(.2, .9, .3, 1.4); }

@property --pb-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes pb-aura { to { --pb-a: 360deg; } }
@keyframes pb-flow { to { stroke-dashoffset: -28; } }
@keyframes pb-ping {
	0%   { opacity: .8; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.03, 1.06); }
}
@keyframes pb-pop {
	0%, 100% { transform: none; }
	40% { transform: scale(1.18) rotate(-6deg); }
}
@keyframes pb-send {
	0%, 100% { transform: none; }
	35% { transform: scale(.82); }
	70% { transform: scale(1.1); }
}

/* ---------- tablet / mobile: stack the cards, one animated spine ---------- */

@media (max-width: 991px) {
	.pb { padding: 56px var(--header-gutter, 24px) 60px; }
	.pb__br { display: none; }
	.pb__title { margin-bottom: 32px; max-width: 18em; }
	.pb-stage { width: 100%; aspect-ratio: auto; container-type: normal; }
	.pb-stage > * { --u: 1px; }
	.pb-wires { display: none; }
	.pb-nodes {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.pb-node, .pb-node--core { position: relative; left: auto; top: auto; width: auto; }
	.pb-nodes .pb-node:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
	.pb-card { height: 100%; transform: none; }
	.pb-core { padding: 26px 24px; }
	.pb-core__title { font-size: 26px; }
	.pb-core__text { font-size: 14px; }
	.pb-tag { font-size: 11px; padding: 6px 10px; }

	.pb-spine {
		display: block;
		position: relative;
		width: 2px;
		height: 56px;
		margin: 6px auto;
		background: repeating-linear-gradient(to bottom, rgba(35, 150, 127, .45) 0 5px, transparent 5px 14px);
	}
	.pb-spine__dot {
		position: absolute;
		left: 50%;
		top: 0;
		width: 7px;
		height: 7px;
		margin-left: -3.5px;
		border-radius: 50%;
		background: var(--pb-teal);
		box-shadow: 0 0 0 5px rgba(35, 150, 127, .18);
		opacity: 0;
	}
	.pb.has-motion.is-in .pb-spine { animation: pb-spine-flow 1s linear infinite; }
	.pb.has-motion.is-in .pb-spine__dot { animation: pb-spine-drop 1.8s cubic-bezier(.5, 0, .5, 1) .9s infinite; }

	/* stacked entrance: cards rise in as they reach the viewport */
	.pb.has-motion .pb-node { opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .6s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) % 2 * 90ms); }
	.pb.has-motion .pb-node.is-set { opacity: 1; transform: none; }
}
@media (max-width: 479px) {
	.pb-card { padding: 14px 12px 15px; }
	.pb-card__title { font-size: 15px; }
	.pb-core__title { font-size: 24px; }
}
@keyframes pb-spine-flow { to { background-position: 0 14px; } }
@keyframes pb-spine-drop {
	0%   { top: 0; opacity: 0; }
	15%  { opacity: 1; }
	85%  { opacity: 1; }
	100% { top: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pb-card, .pb-tag, .pb-wire__hot { transition: none; }
}

/* ==========================================================================
   The Syngco Model — template-parts/syngco-model.php
   Card colours come from the --theme variables below (dark | mint | light),
   so a new ACF "theme" choice only needs a new modifier block here.
   ========================================================================== */

.model {
	padding: 78px var(--header-gutter, 24px) 70px;
	background: #fff;
	font-family: 'Saira', sans-serif;
	overflow: hidden;
}
.model__inner { max-width: var(--header-max, 1280px); margin: 0 auto; }

.model__header {
	display: grid;
	grid-template-columns: 49% 1fr;
	align-items: end;
	margin-bottom: 45px;
}
.model__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	color: #134767;
}
.model__eyebrow-line { flex: 0 0 32px; height: 1px; background: #d7dee5; }
.model__title {
	margin: 0;
	font-size: clamp(2rem, 3.1vw, 2.75rem);
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -.01em;
	color: #171717;
}
.model__intro {
	max-width: 32em;
	margin: 0 0 4px;
	font-size: 16px;
	line-height: 1.65;
	color: #636466;
}

.model__grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	gap: 16px;
}
.model__note { margin: 18px 0 0; font-size: 11.5px; line-height: 1.4; color: #a9b4bd; }

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

.model-card {
	/* theme tokens — default = dark */
	--bg: #134767;
	--accent: #f58540;
	--title: #fff;
	--text: rgba(255, 255, 255, .62);
	--item: rgba(255, 255, 255, .9);
	--chip-border: rgba(255, 255, 255, .28);
	--chip-text: rgba(255, 255, 255, .86);
	--chip-hover-bg: rgba(245, 133, 64, .14);
	--glow: rgba(245, 133, 64, .22);
	--ring: rgba(245, 133, 64, .55);
	--shadow: rgba(19, 71, 103, .38);

	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 410px;
	padding: 27px 26px 26px;
	border-radius: 14px;
	background: var(--bg);
	isolation: isolate;
	overflow: hidden;
	transition: translate .55s cubic-bezier(.2, .9, .25, 1.1), scale .5s ease, opacity .4s ease, box-shadow .5s ease, filter .4s ease;
}
.model-card--mint {
	--bg: #edf5f2;
	--accent: #23967f;
	--title: #171717;
	--text: #636466;
	--item: #3d5c53;
	--chip-border: #cfe0da;
	--chip-text: #3d5c53;
	--chip-hover-bg: #fff;
	--glow: rgba(35, 150, 127, .17);
	--ring: rgba(35, 150, 127, .5);
	--shadow: rgba(35, 150, 127, .26);
}
.model-card--light {
	--bg: #f5f7f9;
	--accent: #134767;
	--title: #171717;
	--text: #636466;
	--item: #636466;
	--chip-border: #dbe2e8;
	--chip-text: #7a8088;
	--chip-hover-bg: #fff;
	--glow: rgba(19, 71, 103, .10);
	--ring: rgba(19, 71, 103, .38);
	--shadow: rgba(19, 71, 103, .18);
}

.model-card__body { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; }

.model-card__label { margin: 0 0 15px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: var(--accent); }
.model-card__title { margin: 0 0 12px; font-size: 24px; line-height: 1.2; font-weight: 500; color: var(--title); }
.model-card__text  { margin: 0 0 20px; max-width: 30em; font-size: 14px; line-height: 22px; color: var(--text); }

.model-card__list { margin: 0; padding: 0; list-style: none; }
.model-card__item {
	position: relative;
	margin: 0 0 9px;
	padding-left: 16px;
	font-size: 14px;
	line-height: 20px;
	color: var(--item);
	transition: translate .45s cubic-bezier(.2, .9, .25, 1.1);
}
.model-card__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--accent);
	transition: scale .35s ease, box-shadow .35s ease;
}

.model-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 18px 0 0; list-style: none; }
.model-card__tag {
	padding: 0 13px;
	font-size: 12px;
	line-height: 29px;
	color: var(--chip-text);
	border: 1px solid var(--chip-border);
	border-radius: 99px;
	transition: translate .45s cubic-bezier(.2, .9, .25, 1.1), background-color .3s ease, border-color .3s ease, color .3s ease;
}

/* hover layers: cursor spotlight + accent ring */
.model-card::before,
.model-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	transition: opacity .45s ease;
}
.model-card::before { z-index: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--glow), transparent 62%); }
.model-card::after  { z-index: 2; box-shadow: inset 0 0 0 1px var(--ring); }

/* optional link (ACF link field): arrow badge + stretched click area */
.model-card__arrow {
	position: absolute;
	top: 22px;
	right: 22px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	color: var(--title);
	border: 1px solid var(--chip-border);
	border-radius: 50%;
	opacity: 0;
	translate: -6px 6px;
	transition: opacity .35s ease, translate .45s cubic-bezier(.2, .9, .25, 1.1), background-color .3s ease, color .3s ease;
}
.model-card__stretch { position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.model-card__stretch:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.model-card.has-link { cursor: pointer; }

/* ---------- hover / focus (mouse devices; keyboard for linked cards) ---------- */

@media (hover: hover) and (pointer: fine) {
	.model-card:hover,
	.model-card:focus-within {
		translate: 0 -8px;
		box-shadow: 0 26px 50px -16px var(--shadow);
	}
	.model-card:hover::before,
	.model-card:hover::after,
	.model-card:focus-within::before,
	.model-card:focus-within::after { opacity: 1; }

	.model-card:hover .model-card__item,
	.model-card:focus-within .model-card__item { translate: 5px 0; transition-delay: calc(var(--i) * 35ms); }
	.model-card:hover .model-card__item::before,
	.model-card:focus-within .model-card__item::before { scale: 1.6; box-shadow: 0 0 0 4px var(--glow); }

	.model-card:hover .model-card__tag,
	.model-card:focus-within .model-card__tag {
		translate: 0 -3px;
		transition-delay: calc(var(--i) * 40ms);
		border-color: var(--accent);
		background-color: var(--chip-hover-bg);
	}
	.model-card--dark:hover .model-card__tag { color: #fff; }
	.model-card--mint:hover .model-card__tag,
	.model-card--light:hover .model-card__tag { color: var(--accent); }

	.model-card:hover .model-card__arrow,
	.model-card:focus-within .model-card__arrow { opacity: 1; translate: 0 0; }
	.model-card__stretch:hover ~ .model-card__arrow { background: var(--accent); color: #fff; }

	/* focus effect: the other cards step back while one is hovered */
	.model__grid:has(.model-card:hover) .model-card:not(:hover) { opacity: .62; scale: .985; filter: saturate(.7); }

	.model-card__tag:hover { background-color: var(--accent); color: #fff; }
/* 	.model-card--mint .model-card__tag:hover,
	.model-card--light .model-card__tag:hover { color: #fff; } */
}

/* ---------- entrance (JS adds .has-motion, then .is-in on scroll) ---------- */

.model.has-motion:not(.is-in) .model__heading,
.model.has-motion:not(.is-in) .model__intro,
.model.has-motion:not(.is-in) .model-card { opacity: 0; }

.model.has-motion.is-in .model__heading { animation: model-rise .9s cubic-bezier(.2, .8, .2, 1) .05s backwards; }
.model.has-motion.is-in .model__intro   { animation: model-rise .9s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
.model.has-motion.is-in .model-card     { animation: model-rise 1s cubic-bezier(.2, .8, .2, 1) calc(.3s + var(--i) * .12s) backwards; }

@keyframes model-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ---------- responsive ---------- */

@media (max-width: 991px) {
	.model { padding: 56px var(--header-gutter, 24px) 56px; }
	.model__header { grid-template-columns: 1fr; gap: 18px; margin-bottom: 32px; }
	.model__grid { grid-template-columns: 1fr; }
	.model-card { min-height: 0; }
	.model-card__tags { padding-top: 24px; }
}

/* ==========================================================================
   Capabilities & Services — template-parts/services.php
   Vertical tabs (left) + detail panel (right). Every panel is in the DOM and
   stacked in one grid cell, so the card never changes height on a swap.
   Motion is state-driven: JS only toggles .is-active / .is-leaving, sets
   data-dir on .services and moves the sliding "lens" behind the active tab.
   ========================================================================== */

.services {
	--svc-ink: #171717;
	--svc-brand: #134767;
	--svc-green: #23967f;
	--svc-accent: #f58540;
	--svc-dy: 16px;

	padding: 78px var(--header-gutter, 24px) 100px;
	background: #f7f7f8;
	border-top: 1px solid #eef1f5;
	font-family: 'Saira', sans-serif;
	overflow: hidden;
}
.services[data-dir="up"] { --svc-dy: -16px; }

.services__inner {
	max-width: var(--header-max, 1280px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 480fr) minmax(0, 684fr);
	grid-template-areas:
		"head  intro"
		"tabs  card";
	column-gap: 13.4%;
	row-gap: 33px;
}

/* ---------- header ---------- */

.services__heading { grid-area: head; }
.services__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--svc-brand);
}
.services__eyebrow-line { flex: 0 0 32px; height: 1px; background: #c7c8ca; }
.services__title {
	margin: 0;
	font-size: clamp(2rem, 3.1vw, 2.75rem);
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--svc-ink);
}
.services__intro {
	grid-area: intro;
	align-self: end;
	max-width: 30em;
	margin: 0 0 32px;
	font-size: 16px;
	line-height: 1.65;
	font-weight: 400;
	color: #636466;
}

/* ---------- tabs ---------- */

.svc-tabs {
	grid-area: tabs;
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.svc-tab {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	height: 62px;
	padding: 0 20px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font: inherit;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
	text-align: left;
	color: var(--svc-ink);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
/* resting tile — sits under the lens (z 0 < lens 1 < content 2) */
.svc-tab::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: #eeeeef;
	transition: background-color .3s ease;
}
.svc-tab:hover::before { background: #e8e8ea; }
.svc-tab > * { position: relative; z-index: 2; }
.svc-tab:focus-visible { outline: 2px solid var(--svc-brand); outline-offset: 2px; }

.svc-tab__num {
	flex: 0 0 26px;
	font-size: 11px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: #8b98a3;
	transition: color .3s ease;
}
.svc-tab__label { flex: 1 1 auto; min-width: 0; }
.svc-tab__arrow {
	flex: 0 0 auto;
	color: var(--svc-brand);
	opacity: .8;
	transition: transform .45s cubic-bezier(.2, .9, .25, 1.2), opacity .3s ease;
}
.svc-tab:hover .svc-tab__arrow { transform: translateX(3px); opacity: 1; }
.svc-tab.is-active .svc-tab__arrow { transform: translateX(5px); opacity: 1; }
.svc-tab.is-active .svc-tab__num { color: var(--svc-accent); }

/* the sliding white pill that follows the active tab (JS sets --lx/--ly/--lw/--lh) */
.svc-lens {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: var(--lw, 100%);
	height: var(--lh, 62px);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 12px 22px -10px rgba(19, 71, 103, .28), 0 2px 6px rgba(19, 71, 103, .06);
	transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0);
	opacity: 0;
	pointer-events: none;
	transition:
		transform .65s cubic-bezier(.34, 1.2, .5, 1),
		width .45s cubic-bezier(.2, .9, .25, 1),
		height .45s cubic-bezier(.2, .9, .25, 1),
		opacity .4s ease;
}
.svc-tabs.has-lens .svc-lens { opacity: 1; }
/* before JS positions the lens (or without JS) the active tile is white itself */
.svc-tabs:not(.has-lens) .svc-tab.is-active::before {
	background: #fff;
	box-shadow: 0 12px 22px -10px rgba(19, 71, 103, .28), 0 2px 6px rgba(19, 71, 103, .06);
}

/* ---------- panel card ---------- */

.svc-card {
	grid-area: card;
	position: relative;
	display: grid;
	min-height: 482px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 34px 44px -30px rgba(19, 71, 103, .30), 0 1px 2px rgba(19, 71, 103, .04);
	overflow: hidden;
}

.svc-panel {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	visibility: hidden;
}
.svc-panel.is-active,
.svc-panel.is-leaving { visibility: visible; }
.svc-panel.is-active { z-index: 2; }
.svc-panel:focus-visible { outline: 2px solid var(--svc-brand); outline-offset: -4px; }

.svc-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 50px;
	padding: 0 20px;
	border-bottom: 1px solid #eef1f5;
	font-size: 13px;
	line-height: 1.3;
}
.svc-head__title { font-weight: 500; color: #6b7885; }
.svc-head__status { font-weight: 400; color: var(--svc-green); font-variant-numeric: tabular-nums; }

/* a coloured sweep runs along the header rule each time a panel opens */
.svc-head::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, var(--svc-brand), var(--svc-green) 55%, var(--svc-accent));
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0;
	pointer-events: none;
}
.services[data-dir="up"] .svc-head::after { transform-origin: right center; }
.svc-panel.is-active .svc-head::after { animation: svc-sweep 1s cubic-bezier(.3, .7, .2, 1) .05s both; }
@keyframes svc-sweep {
	0%   { transform: scaleX(0); opacity: 1; }
	65%  { transform: scaleX(1); opacity: 1; }
	100% { transform: scaleX(1); opacity: 0; }
}

.svc-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 25px 20px 20px;
}
.svc-kicker {
	margin: 0 0 4px;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 400;
	color: #9aa6b1;
}
.svc-metric-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
}
.svc-metric {
	font-size: 40px;
	line-height: 1.15;
	font-weight: 400;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	color: var(--svc-ink);
}
.svc-note { font-size: 13px; line-height: 1.4; color: var(--svc-green); }

.svc-checks { list-style: none; margin: 22px 0 0; padding: 0; }
.svc-check-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 32px;
	font-size: 13px;
	line-height: 1.4;
	color: #939598;
}
.svc-check {
	position: relative;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	display: grid;
	place-items: center;
	border-radius: 5px;
	background: #eaf1ee;
	color: var(--svc-green);
}
.svc-check svg { display: block; }
.svc-check--pending { background: #fdf0e8; }
.svc-check--pending i {
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #c96a33;
}

.svc-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin-top: auto;
	padding-top: 24px;
}
.svc-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.svc-tag {
	padding: 8px 14px;
	border-radius: 999px;
	background: #f5f5f5;
	font-size: 12px;
	line-height: 1.2;
	color: #939598;
}
.svc-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--svc-brand);
	text-decoration: none;
}
.svc-more svg { transition: transform .3s ease; }
.svc-more:hover svg { transform: translateX(3px); }

/* ---------- panel swap choreography ---------- */
/* resting (inactive) state = hidden, offset in the swap direction */
.svc-anim {
	opacity: 0;
	transform: translate3d(0, var(--svc-dy), 0);
	filter: blur(3px);
}
/* in: staggered by --i */
.svc-panel.is-active .svc-anim {
	opacity: 1;
	transform: none;
	filter: none;
	transition:
		opacity .5s ease calc(.14s + var(--i, 0) * 55ms),
		transform .75s cubic-bezier(.2, .9, .25, 1) calc(.14s + var(--i, 0) * 55ms),
		filter .5s ease calc(.14s + var(--i, 0) * 55ms);
}
/* out: quick, all together, continues the direction of travel */
.svc-panel.is-leaving .svc-anim {
	opacity: 0;
	transform: translate3d(0, calc(var(--svc-dy) * -.6), 0);
	filter: blur(2px);
	transition: opacity .2s ease, transform .3s ease, filter .2s ease;
}

/* check boxes pop + tick draws itself; pending dot pings */
.svc-check { transform: scale(.55); }
.svc-check svg path { stroke-dasharray: 14; stroke-dashoffset: 14; }
.svc-panel.is-active .svc-check {
	transform: none;
	transition: transform .55s cubic-bezier(.34, 1.6, .5, 1) calc(.3s + var(--i, 0) * 55ms);
}
.svc-panel.is-active .svc-check svg path {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset .5s ease calc(.42s + var(--i, 0) * 55ms);
}
.svc-panel.is-leaving .svc-check svg path { stroke-dashoffset: 0; }
.svc-panel.is-active .svc-check--pending::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid #c96a33;
	opacity: 0;
	animation: svc-ping 2.2s ease-out 1.2s infinite;
}
@keyframes svc-ping {
	0%   { transform: scale(1);   opacity: .55; }
	70%  { transform: scale(1.9); opacity: 0; }
	100% { transform: scale(1.9); opacity: 0; }
}

/* card settles + a faint sheen crosses it on every swap */
.svc-card.is-swapping { animation: svc-card-settle .7s cubic-bezier(.2, .9, .25, 1); }
@keyframes svc-card-settle {
	0%   { transform: scale(1); }
	30%  { transform: scale(.992); }
	100% { transform: scale(1); }
}
.svc-card::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(35, 150, 127, .075) 50%, transparent 62%);
	transform: translateX(-110%);
	opacity: 0;
}
.svc-card.is-swapping::after { animation: svc-sheen .95s ease-out .05s; }
.services[data-dir="up"] .svc-card.is-swapping::after { animation-direction: reverse; }
@keyframes svc-sheen {
	0%   { transform: translateX(-110%); opacity: 1; }
	100% { transform: translateX(110%);  opacity: 1; }
}

/* ---------- first entrance (JS adds .has-motion, then .is-in on scroll) ---------- */
.services.has-motion:not(.is-in) .svc-tab,
.services.has-motion:not(.is-in) .svc-card { opacity: 0; }
.services.has-motion:not(.is-in) .svc-lens { opacity: 0; }
.services.has-motion:not(.is-in) .svc-panel.is-active .svc-anim {
	opacity: 0;
	transform: translate3d(0, var(--svc-dy), 0);
	filter: blur(3px);
	transition: none;
}
.services.has-motion.is-in .svc-tab { animation: svc-tab-in .7s cubic-bezier(.2, .9, .25, 1) calc(var(--i, 0) * 70ms) backwards; }
.services.has-motion.is-in .svc-card { animation: svc-card-in .9s cubic-bezier(.2, .9, .25, 1) .1s backwards; }
@keyframes svc-tab-in  { from { opacity: 0; transform: translate3d(-18px, 0, 0); } }
@keyframes svc-card-in { from { opacity: 0; transform: translate3d(0, 26px, 0); } }

/* ---------- tablet / mobile: tabs become a scrolling pill row above the panel ---------- */
@media (max-width: 999px) {
	.services { padding: 56px var(--header-gutter, 24px) 64px; }
	.services__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "head" "intro" "tabs" "card";
		row-gap: 20px;
	}
	.services__intro { margin: 0; max-width: 36em; }

	.svc-tabs {
		flex-direction: row;
		gap: 8px;
		margin: 0 calc(var(--header-gutter, 24px) * -1);
		padding: 2px var(--header-gutter, 24px) 14px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.svc-tabs::-webkit-scrollbar { display: none; }
	.svc-tab {
		flex: 0 0 auto;
		height: 48px;
		padding: 0 18px;
		font-size: 15px;
		white-space: nowrap;
		scroll-snap-align: center;
	}
	.svc-tab__num { flex-basis: 24px; }
	.svc-tab__arrow { display: none; }
	.svc-tab__label { flex: 0 0 auto; }
	.svc-lens { top: 2px; }

	.svc-card { min-height: 0; }
	.svc-metric { font-size: 34px; }
}
@media (max-width: 520px) {
	.svc-head { padding: 0 16px; }
	.svc-body { padding: 22px 16px 18px; }
}

/* ---------- reduced motion: instant swaps, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
	.svc-lens,
	.svc-tab::before,
	.svc-tab__arrow,
	.svc-panel .svc-anim,
	.svc-panel .svc-check,
	.svc-panel .svc-check svg path { transition: none !important; }
	.svc-anim { filter: none; transform: none; }
	.svc-head::after,
	.svc-card::after,
	.svc-check--pending::after { display: none; }
	.svc-card.is-swapping { animation: none; }
}

/* =========================================================================
   WHY SYNGCO — paste at the END of assets/css/child-custom.css
   Gradient panel, 72px grid, two animated dotted wave lines, 3-line
   statement and feature columns. Animation classes (.has-motion, .is-in,
   .is-live) are added by initWhySyngco in child-custom.js; without JS or
   with reduced motion everything renders static, exactly like the design.
   ========================================================================= */
.why {
	--why-orange: #F58540;
	--why-teal: #23967F;
	--why-mint: #7FC0A6;
	--why-ease: cubic-bezier(.22, 1, .36, 1);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	font-family: 'Saira', sans-serif;
	color: #fff;
	background:
		linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .15)),
		linear-gradient(180deg, #134767 0%, #23967F 50%, #F58540 100%);
}

/* ---------- background layers ---------- */
.why__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.why__grid {
	position: absolute;
	inset: -72px 0 0 -72px;
	opacity: .2;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, .1) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .1) 1px, transparent 1px);
	background-size: 72px 72px;
	background-position: 72.5px 72.5px;
}
.why__glow {
	position: absolute;
	left: 83.66%;
	top: 88%;
	width: 1040px;
	height: 1040px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 133, 64, .22) 0, rgba(245, 133, 64, 0) 65%);
	filter: blur(40px);
	transform: translate(-50%, -50%) translate(var(--why-gx, 0px), var(--why-gy, 0px));
	transition: transform 1.2s var(--why-ease);
}
.why__waves {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.why__wave {
	fill: none;
	stroke-width: 1.75846;
	stroke-dasharray: 7.54 12.56;
	stroke-linecap: butt;
	opacity: .5;
}
.why__wave--orange { stroke: var(--why-orange); }
.why__wave--teal   { stroke: var(--why-teal); }
.why__comet { opacity: 0; }
.why__comet-core { fill: #fff; }
.why__comet--orange .why__comet-halo { fill: url(#why-halo-orange); }
.why__comet--teal   .why__comet-halo { fill: url(#why-halo-teal); }
.why__comet-trail { opacity: .9; }
.why__comet--orange .why__comet-trail { fill: #FFB27F; }
.why__comet--teal   .why__comet-trail { fill: #9BE3C9; }

/* ---------- content ---------- */
.why__inner {
	position: relative;
	max-width: var(--header-max, 1280px);
	margin: 0 auto;
	padding: 120px var(--header-gutter, 24px) 122px;
}
.why__eyebrow {
	margin: 0 0 34px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: rgba(255, 255, 255, .5);
}
.why__title {
	margin: 0;
	font-size: clamp(38px, 5vw, 72px);
	line-height: 1.07;
	font-weight: 500;
	letter-spacing: -.02em;
	color: #fff;
}
.why__line { display: block; }
.why__line-in { display: inline-block; }
.why__line--two .why__line-in { color: rgba(255, 255, 255, .55); }
.why__line--three .why__line-in {
	color: var(--why-orange);
	background-image:
		linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%),
		linear-gradient(90deg, var(--why-orange) 0%, var(--why-mint) 100%);
	background-size: 250% 100%, 100% 100%;
	background-position: 150% 0, 0 0;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.why__grid-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 232px));
	gap: 40px 24px;
	margin: 42px 0 0;
	padding: 0;
	list-style: none;
}
.why__item {
	position: relative;
	padding-top: 19px;
}
.why__rule {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: rgba(255, 255, 255, .14);
	transform-origin: left center;
}
.why__rule::before { /* hover highlight */
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--why-orange), var(--why-mint));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .6s var(--why-ease);
}
.why__rule::after { /* spark that runs along the line once */
	content: '';
	position: absolute;
	top: -2px;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 10px 3px rgba(255, 178, 127, .8);
	opacity: 0;
}
.why__item-title {
	margin: 0 0 5px;
	font-size: 15px;
	line-height: 24px;
	font-weight: 600;
	color: #fff;
	transition: transform .5s var(--why-ease);
}
.why__item-text {
	margin: 0;
	font-size: 13.5px;
	line-height: 22px;
	font-weight: 300;
	color: rgba(255, 255, 255, .65);
	transition: color .4s ease;
}
.why .why__item:hover .why__rule::before { transform: scaleX(1); }
.why .why__item:hover .why__item-title { transform: translateX(4px); }
.why .why__item:hover .why__item-text { color: rgba(255, 255, 255, .85); }

/* ---------- motion (JS adds .has-motion only when motion is allowed) ---------- */
.why.has-motion .why__eyebrow,
.why.has-motion .why__line-in,
.why.has-motion .why__item-title,
.why.has-motion .why__item-text {
	opacity: 0;
	transform: translateY(26px);
}
.why.has-motion .why__line-in {
	transform: translateY(46%) skewY(3deg);
	filter: blur(10px);
}
.why.has-motion .why__rule { transform: scaleX(0); }

.why.is-in .why__eyebrow {
	opacity: 1;
	transform: none;
	transition: opacity .8s ease, transform .9s var(--why-ease);
}
.why.is-in .why__line-in {
	opacity: 1;
	transform: none;
	filter: blur(0);
	transition:
		opacity .9s ease calc(.15s + var(--l) * .16s),
		transform 1.1s var(--why-ease) calc(.15s + var(--l) * .16s),
		filter 1s ease calc(.15s + var(--l) * .16s);
}
.why.is-in .why__line--three .why__line-in {
	animation: why-shimmer 7s ease-in-out 1.3s infinite both;
	animation-play-state: paused;
}
.why.is-in.is-live .why__line--three .why__line-in { animation-play-state: running; }
.why.is-in .why__rule {
	transform: scaleX(1);
	transition: transform 1.1s var(--why-ease) calc(.75s + var(--i) * .14s);
}
.why.is-in .why__rule::after {
	animation: why-spark 1.3s var(--why-ease) calc(.8s + var(--i) * .14s) 1 both;
}
.why.is-in .why__item-title,
.why.is-in .why__item-text {
	opacity: 1;
	transform: none;
	transition:
		opacity .7s ease calc(1s + var(--i) * .14s),
		transform .8s var(--why-ease) calc(1s + var(--i) * .14s),
		color .4s ease;
}
.why.is-in .why__item-text { transition-delay: calc(1.08s + var(--i) * .14s), calc(1.08s + var(--i) * .14s), 0s; }
/* once revealed, hover shifts respond instantly */
.why.is-done .why__item-title { transition: transform .5s var(--why-ease); }
.why.is-done .why__item-text { transition: color .4s ease; }

.why.has-motion .why__grid { animation: why-grid 26s linear infinite; animation-play-state: paused; }
.why.has-motion .why__glow { animation: why-breathe 7s ease-in-out infinite; animation-play-state: paused; }
.why.is-live .why__grid,
.why.is-live .why__glow { animation-play-state: running; }

@keyframes why-shimmer { /* one sweep, then rest */
	0%        { background-position: 150% 0, 0 0; }
	26%, 100% { background-position: -50% 0, 0 0; }
}
@keyframes why-spark {
	0%   { left: 0;    opacity: 0; }
	15%  { opacity: 1; }
	85%  { opacity: 1; }
	100% { left: 100%; opacity: 0; }
}
@keyframes why-grid {
	from { background-position: 72.5px 72.5px; }
	to   { background-position: 144.5px 144.5px; }
}
@keyframes why-breathe {
	0%, 100% { opacity: 1; }
	50%      { opacity: .7; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
	.why__inner { padding-top: 96px; padding-bottom: 96px; }
	.why__grid-list { grid-template-columns: repeat(2, minmax(0, 300px)); }
}
@media (max-width: 600px) {
	.why__inner { padding-top: 72px; padding-bottom: 72px; }
	.why__eyebrow { margin-bottom: 22px; }
	.why__grid-list { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 40px; }
	.why__glow { width: 640px; height: 640px; }
}

@media (prefers-reduced-motion: reduce) {
	.why *,
	.why *::before,
	.why *::after {
		animation: none !important;
		transition: none !important;
	}
}


/* ==========================================================================
   Proof — template-parts/proof.php
   Stat counters as rolling digit reels (odometer). JS builds the reels and adds
   .has-motion (digits start on 0), then .is-in / .is-run when scrolled into view.
   Without JS or with reduced motion the plain final numbers are shown.
   ========================================================================== */

.proof {
	--pf-ink: #171717;
	--pf-brand: #134767;
	--pf-accent: #f58540;
	--pf-green: #23967f;

	padding: 78px var(--header-gutter, 24px) 82px;
	background: #fff;
	font-family: 'Saira', sans-serif;
	overflow: hidden;
}
.proof__inner { max-width: var(--header-max, 1280px); margin: 0 auto; }

.proof__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--pf-brand);
}
.proof__eyebrow-line {
	flex: 0 0 32px;
	height: 1px;
	background: #d7dee5;
	transform-origin: left center;
}
.proof__title {
	margin: 0;
	font-size: clamp(2rem, 3.1vw, 2.75rem);
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--pf-ink);
}

.proof__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: 1313px;
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
}
.proof__stat { position: relative; min-width: 0; padding-right: 16px; }

.proof__num {
	position: relative;
	margin: 0;
	font-size: clamp(3rem, 5.6vw, 5rem);
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--pf-ink);
	white-space: nowrap;
}
.proof__label {
	margin: 4px 0 0;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	color: #636466;
}

/* the real number for assistive tech; the animated copy is aria-hidden */
.proof__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- reels ---------- */
.proof__vis { display: inline-flex; align-items: flex-start; }
.proof__reel {
	display: inline-block;
	height: 1.1em;
	overflow: hidden;
}
.proof__strip {
	display: flex;
	flex-direction: column;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}
.proof__strip > span { display: block; height: 1.1em; line-height: 1.1em; }
.proof__sym { display: inline-block; height: 1.1em; line-height: 1.1em; }
.proof__suffix { transform-origin: 50% 70%; }

/* start state: all reels on 0, suffix hidden, number in brand blue */
.proof.has-motion .proof__vis { color: var(--pf-brand); }
.proof.has-motion .proof__suffix { opacity: 0; transform: scale(.3) rotate(-24deg); }
.proof.has-motion .proof__label,
.proof.has-motion .proof__title { opacity: 0; transform: translate3d(0, 18px, 0); }
.proof.has-motion .proof__eyebrow { opacity: 0; }
.proof.has-motion .proof__eyebrow-line { transform: scaleX(0); }

/* section header on entry */
.proof.is-in .proof__eyebrow { opacity: 1; transition: opacity .6s ease; }
.proof.is-in .proof__eyebrow-line { transform: none; transition: transform .8s cubic-bezier(.2, .9, .25, 1) .1s; }
.proof.is-in .proof__title {
	opacity: 1;
	transform: none;
	transition: opacity .8s ease .15s, transform .9s cubic-bezier(.2, .9, .25, 1) .15s;
}

/* the roll: --n = rows to travel, --d = delay, --t = duration (set by JS per reel) */
.proof.is-in .proof__stat.is-run .proof__strip {
	transform: translate3d(0, calc(var(--n) * -1.1em), 0);
	transition: transform var(--t, 1.9s) cubic-bezier(.12, .9, .2, 1) var(--d, 0s);
	animation: proof-blur var(--t, 1.9s) ease-out var(--d, 0s) both;
}
@keyframes proof-blur {
	0%   { filter: blur(0); }
	12%  { filter: blur(2.2px); }
	60%  { filter: blur(1.2px); }
	100% { filter: blur(0); }
}

/* once the last reel lands: colour settles to ink, suffix pops, label rises, scan line runs */
.proof.is-in .proof__stat.is-run .proof__vis {
	color: var(--pf-ink);
	transition: color .7s ease var(--land, 1.8s);
}
.proof.is-in .proof__stat.is-run .proof__suffix {
	opacity: 1;
	transform: none;
	transition: opacity .3s ease var(--land, 1.8s), transform .7s cubic-bezier(.34, 1.7, .5, 1) var(--land, 1.8s);
}
.proof.is-in .proof__stat.is-run .proof__label {
	opacity: 1;
	transform: none;
	transition: opacity .7s ease calc(var(--land, 1.8s) - .5s), transform .8s cubic-bezier(.2, .9, .25, 1) calc(var(--land, 1.8s) - .5s);
}
.proof__scan {
	position: absolute;
	left: 0;
	right: 16px;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--pf-brand), var(--pf-green) 55%, var(--pf-accent));
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0;
	pointer-events: none;
}
.proof.is-in .proof__stat.is-run .proof__scan {
	animation: proof-scan 1.6s cubic-bezier(.3, .7, .2, 1) var(--d0, 0s) both;
}
@keyframes proof-scan {
	0%   { transform: scaleX(0); opacity: 1; }
	70%  { transform: scaleX(1); opacity: 1; }
	100% { transform: scaleX(1); opacity: 0; }
}

@media (max-width: 999px) {
	.proof { padding: 56px var(--header-gutter, 24px) 60px; }
	.proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; margin-top: 44px; }
}
@media (max-width: 420px) {
	.proof__label { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.proof__strip,
	.proof__vis,
	.proof__suffix,
	.proof__label,
	.proof__title { transition: none !important; animation: none !important; }
	.proof__scan { display: none; }
}

/* ==========================================================================
   Technology ecosystem — template-parts/ecosystem.php
   Heading + category tabs; every tab owns a logo grid. Panels are stacked in one
   stage whose height JS animates to the active panel. Motion is state-driven:
   JS toggles .is-active / .is-leaving, sets data-dir on .eco and moves the sliding
   underline (--ix / --iw). Without JS the first panel simply shows.
   ========================================================================== */

.eco {
	--eco-ink: #171717;
	--eco-brand: #134767;
	--eco-muted: #636466;
	--eco-tile: #eeeeef;
	--eco-dx: 48px;
	--eco-ease: cubic-bezier(.2, .9, .25, 1);

	padding: 76px var(--header-gutter, 24px) 80px;
	background: #f7f7f8;
	border-top: 1px solid #eef1f5;
	font-family: 'Saira', sans-serif;
	overflow: hidden;
}
.eco[data-dir="prev"] { --eco-dx: -48px; }

.eco__inner {
	max-width: var(--header-max, 1280px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 657fr) minmax(0, 687fr); /* intro starts at x = 705 on the 1440 design */
	grid-template-areas:
		"head  intro"
		"tabs  tabs"
		"stage stage";
	column-gap: 0;
}

/* ---------- heading ---------- */

.eco__heading { grid-area: head; }
.eco__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--eco-brand);
}
.eco__eyebrow-line {
	display: block;
	flex: 0 0 32px;
	width: 32px;
	height: 1px;
	background: #c7c8ca;
	transform-origin: left center;
}
.eco__title {
	margin: 0;
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -.005em;
	color: var(--eco-ink);
}
.eco__intro {
	grid-area: intro;
	align-self: end;
	max-width: 28.5rem;
	margin: 0;
	padding-bottom: 2px;
	text-wrap: balance;
	font-size: 15px;
	line-height: 26px;
	font-weight: 400;
	color: var(--eco-muted);
}

/* ---------- tabs ---------- */

.eco-tabs-wrap {
	grid-area: tabs;
	margin-top: 46px;
	min-width: 0;
}
.eco-tabs {
	position: relative;
	display: flex;
	align-items: stretch;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.eco-tabs::-webkit-scrollbar { display: none; }

.eco-tab {
	position: relative;
	flex: 0 0 auto;
	height: 48px;
	padding: 0 20px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 15px;
	line-height: 1;
	font-weight: 400;
	letter-spacing: .01em;
	white-space: nowrap;
	color: var(--eco-ink);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color .3s ease;
}
.eco-tab__label {
	display: inline-block;
	transition: transform .45s var(--eco-ease);
}
/* invisible semibold twin reserves the bold width, so the row never shifts when a tab turns active */
.eco-tab__label::after {
	content: attr(data-label);
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-weight: 600;
	letter-spacing: .01em;
}
.eco-tab:hover { color: var(--eco-brand); }
.eco-tab:hover .eco-tab__label { transform: translateY(-1px); }
.eco-tab.is-active { font-weight: 600; color: var(--eco-brand); }
.eco-tab:focus-visible { outline: 2px solid var(--eco-brand); outline-offset: -2px; border-radius: 4px; }

/* underline: the active tab draws its own (no-JS); with JS the sliding bar takes over */
.eco-tab::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--eco-brand);
	transform: scaleX(0);
	transform-origin: left center;
}
.eco-tab.is-active::before { transform: scaleX(1); }
.eco.is-js .eco-tab::before { display: none; }

.eco-ind {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: var(--iw, 0px);
	background: linear-gradient(90deg, var(--eco-brand), #23967f 70%, #f58540);
	background-size: 220% 100%;
	background-position: 0 0;
	transform: translate3d(var(--ix, 0px), 0, 0);
	opacity: 0;
	pointer-events: none;
	transition:
		transform .6s cubic-bezier(.34, 1.25, .5, 1),
		width .5s var(--eco-ease),
		opacity .3s ease,
		background-position .8s var(--eco-ease);
}
.eco.is-js .eco-ind { opacity: 1; }

/* ---------- stage + panels ---------- */

.eco-stage {
	grid-area: stage;
	position: relative;
	margin-top: 32px;
	perspective: 1200px;
}
.eco.is-js .eco-stage {
	height: var(--sh, auto);
	transition: height .6s var(--eco-ease);
}

.eco-panel { display: block; }
.eco.is-js .eco-panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	visibility: hidden;
}
.eco.is-js .eco-panel.is-active,
.eco.is-js .eco-panel.is-leaving { visibility: visible; }
.eco:not(.is-js) .eco-panel:not(.is-active) { display: none; }

.eco-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
}
.eco-item { margin: 0; min-width: 0; }

/* ---------- tile ---------- */

.eco-tile {
	--rx: 0deg;
	--ry: 0deg;
	--mx: 50%;
	--my: 50%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--eco-tile);
	color: inherit;
	text-decoration: none;
	transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
	transition:
		transform .35s var(--eco-ease),
		background-color .3s ease,
		box-shadow .4s ease;
	will-change: transform;
}
/* pointer spotlight */
.eco-tile::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(180px circle at var(--mx) var(--my), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}
/* shimmer sweep (entrance + idle glint) */
.eco-tile::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 60%;
	background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .85) 50%, transparent 100%);
	transform: translateX(-130%) skewX(-18deg);
	opacity: 0;
	pointer-events: none;
}
.eco-tile.is-glint::after { animation: eco-glint 1.1s var(--eco-ease) 1; }
.eco-panel.is-active.is-landed .eco-tile::after { animation: eco-glint .9s var(--eco-ease) var(--gd, 0s) 1 both; }

@keyframes eco-glint {
	0%   { transform: translateX(-130%) skewX(-18deg); opacity: 0; }
	15%  { opacity: 1; }
	100% { transform: translateX(300%) skewX(-18deg); opacity: 0; }
}

.eco-logo {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(120px, 72%);
	height: 32px;
	transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0);
	transition: transform .35s var(--eco-ease), opacity .35s ease, filter .35s ease;
}
.eco-logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}
.eco-wordmark {
	font-size: 19px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: -.005em;
	text-align: center;
	color: #7a7c80;
	transition: color .3s ease;
}

/* hover / focus (mouse + keyboard) */
@media (hover: hover) {
	.eco-tile:hover {
		background: #fff;
		box-shadow: 0 16px 26px -14px rgba(19, 71, 103, .32), 0 2px 6px rgba(19, 71, 103, .06);
	}
	.eco-tile:hover::before { opacity: 1; }
	.eco-tile:hover .eco-logo { transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0) scale(1.07); }
	.eco-tile:hover .eco-wordmark { color: var(--eco-brand); }
	/* the other tiles recede */
	.eco-panel.is-hovering .eco-tile:not(:hover) .eco-logo { opacity: .5; filter: saturate(.55); }
}
a.eco-tile:focus-visible {
	outline: 2px solid var(--eco-brand);
	outline-offset: 2px;
	background: #fff;
}

/* ---------- panel swap choreography ---------- */
/* Tiles rest in the "away" state and ease to rest when their panel is active.
   Entering: slow, staggered diagonal wave (--d set by JS). Leaving: quick fade/slide the other way. */

.eco.has-motion .eco-item {
	opacity: 0;
	transform: translate3d(var(--eco-dx), 26px, 0) scale(.94);
	filter: blur(6px);
	transition:
		opacity .22s ease calc(var(--d, 0s) * .35),
		transform .3s cubic-bezier(.4, 0, 1, 1) calc(var(--d, 0s) * .35),
		filter .22s ease calc(var(--d, 0s) * .35);
}
.eco.has-motion .eco-panel.is-leaving .eco-item {
	transform: translate3d(calc(var(--eco-dx) * -.7), -12px, 0) scale(.96);
}
.eco.has-motion .eco-panel.is-active .eco-item {
	opacity: 1;
	transform: none;
	filter: blur(0);
	transition:
		opacity .5s ease var(--d, 0s),
		transform .85s cubic-bezier(.2, 1.1, .3, 1) var(--d, 0s),
		filter .6s ease var(--d, 0s);
}
/* before the section scrolls into view the first panel waits in the away state */
.eco.has-motion:not(.is-in) .eco-panel.is-active .eco-item {
	opacity: 0;
	transform: translate3d(0, 26px, 0) scale(.94);
	filter: blur(6px);
}
.eco.has-motion .eco-panel.is-active .eco-logo img,
.eco.has-motion .eco-panel.is-active .eco-wordmark {
	animation: eco-focus .8s ease both;
	animation-delay: calc(var(--d, 0s) + .12s);
}
@keyframes eco-focus {
	from { opacity: 0; filter: blur(8px); transform: scale(.88); }
	to   { opacity: 1; filter: blur(0);   transform: none; }
}

/* ---------- first entrance (JS adds .has-motion, then .is-in on scroll) ---------- */

.eco.has-motion .eco__eyebrow-line { transform: scaleX(0); transition: transform .8s var(--eco-ease) .05s; }
.eco.has-motion .eco__eyebrow-text { opacity: 0; transform: translateX(-10px); transition: opacity .6s ease .35s, transform .7s var(--eco-ease) .35s; display: inline-block; }
.eco.has-motion .eco__intro { opacity: 0; transform: translateY(14px); transition: opacity .8s ease .55s, transform .9s var(--eco-ease) .55s; }
.eco.has-motion .eco-tab { opacity: 0; transform: translateY(14px); transition: opacity .6s ease calc(.6s + var(--i) * .07s), transform .8s var(--eco-ease) calc(.6s + var(--i) * .07s), color .3s ease; }

.eco-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.eco-w > span { display: inline-block; }
.eco.has-motion .eco-w > span {
	transform: translateY(110%) rotate(3deg);
	transition: transform .9s var(--eco-ease) calc(.15s + var(--w, 0) * .07s);
}

.eco.is-in .eco__eyebrow-line { transform: scaleX(1); }
.eco.is-in .eco__eyebrow-text,
.eco.is-in .eco__intro,
.eco.is-in .eco-tab { opacity: 1; transform: none; }
.eco.is-in .eco-w > span { transform: none; }

/* ---------- tablet / mobile ---------- */

@media (max-width: 1099px) {
	.eco__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "head" "intro" "tabs" "stage";
		column-gap: 0;
	}
	.eco__intro { align-self: start; margin-top: 18px; }
	.eco__title br { display: none; }
	.eco-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.eco { padding: 56px var(--header-gutter, 24px) 56px; }
	.eco-tabs-wrap { margin: 32px calc(var(--header-gutter, 24px) * -1) 0; }
	.eco-tabs { padding: 0 calc(var(--header-gutter, 24px) - 20px); scroll-snap-type: x proximity; border-bottom: 1px solid #e1e3e6; }
	.eco-tab { scroll-snap-align: center; }
	.eco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.eco-tile { height:70px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
	.eco-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- reduced motion: instant swaps, no loops ---------- */

@media (prefers-reduced-motion: reduce) {
	.eco *, .eco *::before, .eco *::after {
		animation: none !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
	.eco-tile { transform: none !important; }
}

/* JS parks incoming tiles on the correct side without animating */
.eco.eco-nt .eco-item,
.eco.eco-nt .eco-item * { transition: none !important; }

/* =====================================================================
   ECOSYSTEM INTRO LINE BREAK
   Append to the END of assets/css/child-custom.css (after the 1280 block).
   When the intro has a typed line break, keep each line on one row on
   desktop/tablet, and let it flow as one paragraph on mobile.
   ===================================================================== */
.eco__intro--lines { max-width: none; text-wrap: wrap; }
@media (max-width: 767px) {
	.eco__intro--lines { max-width: 28.5rem; text-wrap: pretty; }
	.eco__intro br { display: none; }
}
/* =====================================================================
   ECOSYSTEM TILE BACKGROUND (ACF "Tile background")
   Append to the END of assets/css/child-custom.css.
   A tile with its own colour keeps it on hover / focus, with a softer glow.
   ===================================================================== */
.eco-tile.has-bg,
.eco-tile.has-bg:hover,
a.eco-tile.has-bg:focus-visible { background: var(--eco-tile); }
.eco-tile.has-bg:hover::before { opacity: .22; }


/* ==========================================================================
   Industries — template-parts/industries.php
   Pill tabs (a liquid "lens" glides behind the active one) + one detail panel
   per industry: The pressure | What Syngco runs + Key Fact | illustration.
   Every panel is in the DOM and stacked in one grid cell, so the card never
   changes height on a swap. JS (initIndustriesTabs) toggles .is-active /
   .is-leaving, sets data-dir on .industries, moves the lens and feeds the
   cursor spotlight (--mx / --my on .ind-card).
   ========================================================================== */

.industries {
	--ind-bg: #134767;
	--ind-mint: #7fc0a6;
	--ind-label: rgba(255, 255, 255, .6);   /* design: .45 — raised for AA contrast */
	--ind-text: rgba(255, 255, 255, .78);
	--ind-dx: 22px;
	--ind-lead: 0s;

	position: relative;
	padding: 78px var(--header-gutter, 24px) 80px;
	background: var(--ind-bg);
	color: #fff;
	font-family: 'Saira', sans-serif;
	overflow: hidden;
	scroll-margin-top: var(--header-h, 96px);
}
.industries[data-dir="prev"] { --ind-dx: -22px; }

.industries__inner {
	max-width: var(--header-max, 1280px);
	margin: 0 auto;
}

/* ---------- heading ---------- */

.industries__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 13px;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 600;
	color: rgba(255, 255, 255, .72);
}
.industries__eyebrow-line {
	flex: 0 0 32px;
	height: 1px;
	background: rgba(255, 255, 255, .3);
	transform-origin: left center;
}
.industries__title {
	max-width: 18.2em;
	margin: 0;
	font-size: clamp(2rem, 2.92vw, 2.625rem);
	line-height: 1.2;
	font-weight: 500;
	color: #fff;
}
/* word mask used by the entrance reveal (spans only exist when JS splits the title) */
.industries .iw {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: .1em 0 .14em;
	margin: -.1em 0 -.14em;
}
.industries .iw__i { display: inline-block; }

/* ---------- tabs ---------- */

.ind-tabs {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 33px 0 0;
}

.ind-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 18px 0 19px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: rgba(255, 255, 255, .82);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color .35s ease;
}
/* resting pill — sits under the lens (z 0 < lens 1 < content 2) */
.ind-tab::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: rgba(255, 255, 255, .08);
	transition: background-color .3s ease;
}
.ind-tab:hover::before { background: rgba(255, 255, 255, .15); }
.ind-tab > * { position: relative; z-index: 2; }
.ind-tab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ind-tab.is-active { color: var(--ind-bg); }

.ind-tab__icon,
.ind-tab__img {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	transition: transform .5s cubic-bezier(.34, 1.56, .5, 1);
}
.ind-tab__icon { overflow: visible; }
.ind-tab__img { object-fit: contain; }
/* uploaded icons are usually dark: white on the dark pill, dark on the active (white) pill */
.ind-tab:not(.is-active) .ind-tab__img { filter: brightness(0) invert(1); opacity: .82; }
.ind-tab:hover .ind-tab__icon,
.ind-tab:hover .ind-tab__img { transform: translateY(-1px) scale(1.08); }
.ind-tab__icon * { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* the glyph draws itself on whenever its tab becomes active */
.ind-tab.is-active .ind-tab__icon * { animation: ind-draw .85s cubic-bezier(.5, 0, .2, 1) .12s backwards; }
@keyframes ind-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* the white pill that follows the active tab (JS sets --lx/--ly/--lw/--lh and animates it) */
.ind-lens {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: var(--lw, 100px);
	height: var(--lh, 46px);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 14px 26px -12px rgba(5, 25, 40, .55);
	transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0);
	opacity: 0;
	pointer-events: none;
}
.ind-tabs.has-lens .ind-lens { opacity: 1; transition: opacity .4s ease; }
/* before JS positions the lens (or without JS) the active pill is white itself */
.ind-tabs:not(.has-lens) .ind-tab.is-active::before { background: #fff; }

/* ---------- detail card ---------- */

.ind-card {
	position: relative;
	isolation: isolate;
	display: grid;
	margin-top: 31px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .05);
	overflow: hidden;
}
/* soft spotlight: rests under the active tab, follows the cursor while it is over the card */
.ind-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(380px circle at var(--mx, 12%) var(--my, 0px), rgba(127, 192, 166, .12), rgba(255, 255, 255, .025) 46%, transparent 72%);
}

/* design @1344: 40 | 389 | 40 | 413 | 40 | 362 | 60 */
.ind-panel {
	grid-area: 1 / 1;
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 389fr) minmax(0, 413fr) minmax(0, 362fr);
	column-gap: 40px;
	align-items: start;
	min-width: 0;
	padding: 40px 60px 56px 40px;
	visibility: hidden;
}
.ind-panel.is-active,
.ind-panel.is-leaving { visibility: visible; }
.ind-panel.is-active { z-index: 2; }
.ind-panel:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.ind-col { min-width: 0; }

.ind-label {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 18px;
	font-weight: 400;
	color: var(--ind-label);
}
.ind-pressure {
	max-width: 13em;
	margin: 0;
	font-size: 26px;
	line-height: 30px;
	font-weight: 500;
	color: #fff;
}
.ind-runs {
	max-width: 24em;
	margin: 0;
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
	color: var(--ind-text);
}
.ind-label--fact {
	margin: 20px 0 10px;
	font-size: 14px;
	line-height: 20px;
	color: var(--ind-mint);
}
.ind-fact {
	max-width: 24em;
	margin: 0;
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
	color: var(--ind-text);
}

.ind-media {
	align-self: center;
	justify-self: end;
	width: 100%;
	max-width: 369px;
	margin: 6px 0 0;
}
.ind-media__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 260px;
	object-fit: contain;
}
/* animated SVG printed inline (media type "Animated SVG") — sized by its viewBox */
.ind-media__svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 260px;
	overflow: visible;
}

/* ---------- panel swap choreography ---------- */
/* resting (inactive) state = hidden, offset in the direction of travel */
.ind-anim {
	opacity: 0;
	transform: translate3d(var(--ind-dx), 0, 0);
	filter: blur(3px);
}
.ind-media.ind-anim { transform: translate3d(var(--ind-dx), 0, 0) scale(.97); }

/* in: staggered by --i (label -> text, column by column, left to right) */
.ind-panel.is-active .ind-anim {
	opacity: 1;
	transform: none;
	filter: none;
	transition:
		opacity .5s ease calc(var(--ind-lead) + .12s + var(--i, 0) * 60ms),
		transform .8s cubic-bezier(.2, .9, .25, 1) calc(var(--ind-lead) + .12s + var(--i, 0) * 60ms),
		filter .5s ease calc(var(--ind-lead) + .12s + var(--i, 0) * 60ms);
}
/* out: quick, all together, continues the direction of travel */
.ind-panel.is-leaving .ind-anim {
	opacity: 0;
	transform: translate3d(calc(var(--ind-dx) * -.6), 0, 0);
	filter: blur(2px);
	transition: opacity .2s ease, transform .3s ease, filter .2s ease;
}

/* card settles + a faint sheen crosses it on every swap */
.ind-card.is-swapping { animation: ind-card-settle .7s cubic-bezier(.2, .9, .25, 1); }
@keyframes ind-card-settle {
	0%   { transform: scale(1); }
	30%  { transform: scale(.994); }
	100% { transform: scale(1); }
}
.ind-card::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .06) 50%, transparent 62%);
	transform: translateX(-110%);
	opacity: 0;
}
.ind-card.is-swapping::after { animation: ind-sheen .95s ease-out .05s; }
.industries[data-dir="prev"] .ind-card.is-swapping::after { animation-direction: reverse; }
@keyframes ind-sheen {
	0%   { transform: translateX(-110%); opacity: 1; }
	100% { transform: translateX(110%);  opacity: 1; }
}

/* ---------- first entrance (JS adds .has-motion, then .is-in on scroll) ---------- */
.industries.has-motion:not(.is-in) .ind-tab,
.industries.has-motion:not(.is-in) .ind-card,
.industries.has-motion:not(.is-in) .industries__eyebrow-text,
.industries.has-motion:not(.is-in) .ind-lens { opacity: 0; }
.industries.has-motion .industries__eyebrow-line { transform: scaleX(0); }
.industries.has-motion.is-in .industries__eyebrow-line {
	transform: none;
	transition: transform .9s cubic-bezier(.2, .9, .25, 1) .05s;
}
.industries.has-motion.is-in .industries__eyebrow-text { animation: ind-fade-in .8s ease .35s backwards; }
@keyframes ind-fade-in { from { opacity: 0; transform: translate3d(-8px, 0, 0); } }

.industries.has-motion .iw__i { transform: translate3d(0, 112%, 0); }
.industries.has-motion.is-in .iw__i {
	transform: none;
	transition: transform .95s cubic-bezier(.2, .9, .25, 1) calc(.18s + var(--i, 0) * 45ms);
}

.industries.has-motion.is-in .ind-tab { animation: ind-tab-in .85s cubic-bezier(.2, .9, .25, 1.15) calc(.45s + var(--i, 0) * 70ms) backwards; }
@keyframes ind-tab-in { from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.9); } }
.industries.has-motion.is-in .ind-tabs.has-lens .ind-lens { transition: opacity .5s ease 1s; }

.industries.has-motion.is-in .ind-card { animation: ind-card-in 1.05s cubic-bezier(.2, .9, .25, 1) .7s backwards; }
@keyframes ind-card-in {
	from { opacity: 0; clip-path: inset(0 100% 0 0 round 14px); }
	to   { opacity: 1; clip-path: inset(0 0 0 0 round 14px); }
}
/* panel content waits for the card, then plays the normal in-choreography */
.industries.has-motion.is-in.is-first { --ind-lead: .8s; }
.industries.has-motion:not(.is-in) .ind-panel.is-active .ind-anim {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	filter: blur(3px);
	transition: none;
}

/* ---------- laptop: slightly narrower image column ---------- */
@media (max-width: 1199px) {
	.ind-panel {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .85fr);
		column-gap: 32px;
		padding: 40px 40px 44px 36px;
	}
	.ind-pressure { font-size: 23px; line-height: 28px; }
}

/* ---------- tablet / mobile: tabs become a scrolling pill row above the card ---------- */
@media (max-width: 999px) {
	.industries { padding: 56px var(--header-gutter, 24px) 56px; }
	.industries__title { max-width: 22em; }

	.ind-tabs {
		flex-wrap: nowrap;
		margin: 28px calc(var(--header-gutter, 24px) * -1) 0;
		padding: 2px var(--header-gutter, 24px) 16px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.ind-tabs::-webkit-scrollbar { display: none; }
	.ind-tab { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: center; }

	.ind-card { margin-top: 12px; }
	.ind-panel {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 32px;
		padding: 30px 28px 32px;
	}
	.ind-media {
		grid-column: 1 / -1;
		justify-self: center;
		max-width: 420px;
		margin: 4px 0 0;
	}
	.ind-pressure,
	.ind-runs,
	.ind-fact { max-width: none; }
}
@media (max-width: 640px) {
	.ind-panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 26px 20px 26px;
	}
	.ind-pressure { font-size: 21px; line-height: 27px; }
	.ind-runs,
	.ind-fact { font-size: 15px; line-height: 24px; }
}

/* ---------- reduced motion: instant swaps, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
	.ind-tab,
	.ind-tab::before,
	.ind-tab__icon,
	.ind-tab__img,
	.ind-panel .ind-anim { transition: none !important; }
	.ind-anim,
	.ind-media.ind-anim { filter: none; transform: none; }
	.ind-tab.is-active .ind-tab__icon *,
	.ind-card::after { animation: none !important; }
	.ind-card.is-swapping { animation: none; }
	.ind-tab:hover .ind-tab__icon,
	.ind-tab:hover .ind-tab__img { transform: none; }
	/* animated SVGs show their finished frame */
	.ind-media__svg,
	.ind-media__svg * { animation: none !important; transition: none !important; }
}


/* ==========================================================================
   How it works — template-parts/how-it-works.php
   Process steps with an infinitely flowing dashed connector (+ orange spark that travels it),
   pulsing dots, load-in choreography and pointer-spotlight hover.
   JS adds .has-motion (initial hidden state), .is-in (once, on scroll) and .is-live (while on screen).
   Without JS / with reduced motion everything is simply visible.
   ========================================================================== */

.hiw {
	--hw-ink: #171717;
	--hw-brand: #134767;
	--hw-accent: #f58540;
	--hw-green: #23967f;
	--hw-text: #636466;
	--hw-line: #e4e9ed;
	--hw-ease: cubic-bezier(.2, .9, .25, 1);

	padding: 84px var(--header-gutter, 24px) 96px;
	background: #fff;
	font-family: 'Saira', sans-serif;
	overflow: hidden;
}
.hiw__inner { max-width: var(--header-max, 1280px); margin: 0 auto; }

.hiw__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--hw-brand);
}
.hiw__eyebrow-line {
	flex: 0 0 32px;
	height: 1px;
	background: #d7dee5;
	transform-origin: left center;
}
.hiw__title {
	max-width: 16em;
	margin: 0;
	font-size: clamp(2rem, 3.1vw, 2.75rem);
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--hw-ink);
}
.hiw__w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.hiw__wi { display: inline-block; will-change: transform; }

/* ---------- Grid ---------- */

.hiw__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
}
.hiw__grid::after {              /* bottom rule */
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: var(--hw-line);
	transform-origin: left center;
}

.hiw__step {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 40px 34px 38px;
}
.hiw__step::after {              /* vertical divider */
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 1px;
	background: var(--hw-line);
	transform-origin: top center;
}
.hiw__step.is-last::after { display: none; }

.hiw__glow {                      /* pointer spotlight (JS sets --mx / --my) */
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .35s ease;
	background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 30%), rgba(35, 150, 127, .10), rgba(245, 133, 64, .04) 55%, transparent 75%);
}
.hiw__bar {                       /* top accent bar */
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--hw-green), var(--hw-accent));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .55s var(--hw-ease);
}

/* ---------- Number row ---------- */

.hiw__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 16px;
	margin-bottom: 36px;
	font-size: 13px;
	line-height: 1;
	color: #6b7076;
}
.hiw__dot {
	position: relative;
	flex: 0 0 9px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--hw-brand);
	color: var(--hw-brand);
	transition: transform .4s var(--hw-ease);
}
.hiw__step.is-last .hiw__dot { background: var(--hw-green); color: var(--hw-green); }
.hiw__dot::after {                /* ping ring */
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	opacity: 0;
}
.hiw__num { letter-spacing: .04em; font-variant-numeric: tabular-nums; transition: color .3s ease; }

/* dashed connector: dash pattern is a mask that slides right forever; an orange spark rides it */
.hiw__dash {
	flex: 1 1 auto;
	min-width: 0;
	height: 2px;
	margin-left: 4px;
	background:
		linear-gradient(90deg, transparent, var(--hw-accent) 55%, transparent) -90px 0 / 90px 100% no-repeat,
		var(--hw-green);
	-webkit-mask: linear-gradient(90deg, #000 6px, transparent 6px) 0 0 / 18px 100% repeat-x;
	        mask: linear-gradient(90deg, #000 6px, transparent 6px) 0 0 / 18px 100% repeat-x;
	transform-origin: left center;
	transition: transform .35s var(--hw-ease);
}

/* ---------- Copy ---------- */

.hiw__name {
	margin: 0 0 14px;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 500;
	color: var(--hw-ink);
}
.hiw__name span {
	background: linear-gradient(90deg, var(--hw-accent), var(--hw-accent)) 0 100% / 0 2px no-repeat;
	padding-bottom: 3px;
	transition: background-size .5s var(--hw-ease), color .3s ease;
}
.hiw__text {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--hw-text);
	transition: color .3s ease;
}
.hiw__meta {
	display: flex;
	align-items: center;
	margin: auto 0 0;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 400;
	color: var(--hw-green);
}
.hiw__meta::before {
	content: '';
	flex: 0 0 0;
	width: 0;
	height: 1px;
	margin-right: 0;
	background: currentColor;
	transition: width .45s var(--hw-ease), margin .45s var(--hw-ease);
}

/* ---------- Infinite motion (only while the section is on screen) ---------- */

@keyframes hiw-march { to { -webkit-mask-position: 18px 0; mask-position: 18px 0; } }
@keyframes hiw-spark {
	from { background-position: -90px 0, 0 0; }
	to   { background-position: calc(100% + 90px) 0, 0 0; }
}
@keyframes hiw-ping {
	0%   { transform: scale(1);   opacity: .55; }
	70%  { transform: scale(2.7); opacity: 0; }
	100% { transform: scale(2.7); opacity: 0; }
}

.hiw.is-live .hiw__dash {
	animation:
		hiw-march 1.4s linear infinite,
		hiw-spark 3.2s cubic-bezier(.5, 0, .5, 1) infinite;
	animation-delay: 0s, calc(var(--i, 0) * .45s + .6s);
}
.hiw.is-live .hiw__dot::after {
	animation: hiw-ping 2.8s ease-out infinite;
	animation-delay: calc(var(--i, 0) * .35s + .9s);
}

/* ---------- Hover (real pointers only) ---------- */

@media (hover: hover) {
	.hiw .hiw__step:hover .hiw__glow { opacity: 1; }
	.hiw .hiw__step:hover .hiw__bar { transform: scaleX(1); }
	.hiw .hiw__step:hover .hiw__dot { transform: scale(1.35); }
	.hiw .hiw__step:hover .hiw__num { color: var(--hw-brand); }
	.hiw .hiw__step:hover .hiw__dash { transform: scaleY(1.8); }
	.hiw .hiw__step:hover .hiw__name span { background-size: 100% 2px; color: var(--hw-brand); }
	.hiw .hiw__step:hover .hiw__text { color: #3d4045; }
	.hiw .hiw__step:hover .hiw__meta::before { width: 18px; margin-right: 8px; }
}

/* ---------- Load-in (JS adds .has-motion first, .is-in on scroll) ---------- */

.hiw.has-motion .hiw__eyebrow { opacity: 0; }
.hiw.has-motion .hiw__eyebrow-line { transform: scaleX(0); }
.hiw.has-motion .hiw__wi { transform: translate3d(0, 115%, 0); }
.hiw.has-motion .hiw__grid::after { transform: scaleX(0); }
.hiw.has-motion .hiw__step::after { transform: scaleY(0); }
.hiw.has-motion .hiw__dot { transform: scale(0); }
.hiw.has-motion .hiw__num,
.hiw.has-motion .hiw__name,
.hiw.has-motion .hiw__text,
.hiw.has-motion .hiw__meta { opacity: 0; transform: translate3d(0, 16px, 0); }
.hiw.has-motion .hiw__dash { clip-path: inset(0 100% 0 0); }

.hiw.is-in .hiw__eyebrow { opacity: 1; transition: opacity .6s ease; }
.hiw.is-in .hiw__eyebrow-line { transform: none; transition: transform .8s var(--hw-ease) .1s; }
.hiw.is-in .hiw__wi {
	transform: none;
	transition: transform .85s var(--hw-ease);
	transition-delay: calc(var(--w, 0) * .06s + .15s);
}
.hiw.is-in .hiw__grid::after { transform: none; transition: transform 1.1s var(--hw-ease) .35s; }
.hiw.is-in .hiw__step::after {
	transform: none;
	transition: transform .8s var(--hw-ease);
	transition-delay: calc(var(--i, 0) * .14s + .35s);
}
.hiw.is-in .hiw__dot {
	transform: none;
	transition: transform .6s cubic-bezier(.3, 1.7, .5, 1), background-color .3s;
	transition-delay: calc(var(--i, 0) * .14s + .4s);
}
.hiw.is-in .hiw__dash {
	clip-path: inset(0 0 0 0);
	transition: clip-path .75s var(--hw-ease), transform .35s var(--hw-ease);
	transition-delay: calc(var(--i, 0) * .14s + .55s), 0s;
}
.hiw.is-in .hiw__num,
.hiw.is-in .hiw__name,
.hiw.is-in .hiw__text,
.hiw.is-in .hiw__meta {
	opacity: 1;
	transform: none;
	transition: opacity .7s ease, transform .8s var(--hw-ease), color .3s ease;
}
.hiw.is-in .hiw__num  { transition-delay: calc(var(--i, 0) * .14s + .45s), calc(var(--i, 0) * .14s + .45s), 0s; }
.hiw.is-in .hiw__name { transition-delay: calc(var(--i, 0) * .14s + .55s), calc(var(--i, 0) * .14s + .55s), 0s; }
.hiw.is-in .hiw__text { transition-delay: calc(var(--i, 0) * .14s + .65s), calc(var(--i, 0) * .14s + .65s), 0s; }
.hiw.is-in .hiw__meta { transition-delay: calc(var(--i, 0) * .14s + .75s), calc(var(--i, 0) * .14s + .75s), 0s; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.hiw { padding: 64px var(--header-gutter, 24px) 72px; }
	.hiw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
	.hiw__grid::after { display: none; }
	.hiw__step { padding: 34px 28px 32px; border-bottom: 1px solid var(--hw-line); }
	.hiw__step:nth-child(even)::after { display: none; }
	.hiw__step:nth-child(odd):last-child { grid-column: 1 / -1; }
	.hiw__step:nth-child(odd):last-child::after { display: none; }
	.hiw__step:first-child, .hiw__step:nth-child(odd) { padding-left: 0; }
	.hiw__step:nth-child(even) { padding-right: 0; }
	.hiw__glow { inset: 0 -14px; }
}

@media (max-width: 640px) {
	.hiw { padding: 48px var(--header-gutter, 24px) 56px; }
	.hiw__eyebrow { margin-bottom: 14px; }
	.hiw__title { font-size: clamp(1.75rem, 8vw, 2.1rem); }
	.hiw__grid { grid-template-columns: minmax(0, 1fr); margin-top: 32px; border-top: 1px solid var(--hw-line); }
	.hiw__step,
	.hiw__step:nth-child(odd),
	.hiw__step:nth-child(even) { padding: 28px 0 26px; }
	.hiw__step::after { display: none; }
	.hiw__head { margin-bottom: 22px; }
	.hiw__text { margin-bottom: 18px; }
	.hiw__dash { max-width: 220px; }
	.hiw__name { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
	.hiw *, .hiw *::before, .hiw *::after { animation: none !important; transition: none !important; }
}


/* ==========================================================================
   Testimonials — template-parts/testimonials.php
   Splide carousel: neighbouring cards peek in 3D (scaled, blurred, rotated toward the centre),
   the active card plays a staggered reveal (mark pop, word-by-word quote, author, sheen sweep),
   pointer tilt + glare, custom controls with a rolling counter and autoplay progress.
   JS adds .has-motion (initial hidden state), .is-in (once, on scroll). Splide sets .is-active/.is-prev/.is-next.
   ========================================================================== */

.tsm {
	--ts-ink: #171717;
	--ts-brand: #134767;
	--ts-accent: #f58540;
	--ts-ease: cubic-bezier(.22, .9, .24, 1);

	position: relative;
	overflow: hidden;
	padding: 88px var(--header-gutter, 24px) 84px;
	font-family: 'Saira', sans-serif;
	color: #fff;
	background: linear-gradient(180deg, #15496b 0%, #1b6672 24%, #209680 50%, #7f9564 72%, #c88e52 88%, #f5854a 100%);
}
.tsm__inner { max-width: 984px; margin: 0 auto; }

.tsm__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 30px;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	color: rgba(255, 255, 255, .78);
}
.tsm__eyebrow-line {
	flex: 0 0 32px;
	height: 1px;
	background: rgba(255, 255, 255, .45);
	transform-origin: left center;
}

/* ---------- Slider ---------- */

.tsm__stage { position: relative; margin-inline: calc(50% - 50vw); }   /* full-bleed so the neighbours can peek */
/* Splide's `padding` option (set in JS) keeps the active card at the 984px column; the block padding
   only gives the card shadow room, because the track clips its overflow */
.tsm__splide .splide__track { padding-block: 30px 90px; margin-block: -30px -90px; pointer-events: none; }   /* shadow room must not block the controls */
.tsm__splide:not(.splide) .tsm__slide + .tsm__slide { display: none; }   /* before JS / no JS */
.tsm__slide { perspective: 1600px; pointer-events: auto; }

.tsm__tilt {
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform .6s var(--ts-ease);
	will-change: transform;
}

.tsm__card {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 56px 56px 50px;
	border-radius: 16px;
	background: #fff;
	color: var(--ts-ink);
	box-shadow: 0 40px 90px -24px rgba(8, 30, 50, .45), 0 10px 30px -12px rgba(8, 30, 50, .2);
	transform: scale(.88);
	opacity: .35;
	filter: blur(2px);
	transition: transform 1s var(--ts-ease), opacity .9s ease, filter .9s ease;
}
.tsm__slide.is-active .tsm__card { transform: none; opacity: 1; filter: none; }
.tsm__slide.is-prev .tsm__card { transform: translateX(5%) scale(.88) rotateY(9deg); transform-origin: right center; }
.tsm__slide.is-next .tsm__card { transform: translateX(-5%) scale(.88) rotateY(-9deg); transform-origin: left center; }

.tsm__card::before {                 /* pointer glare */
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .4s ease;
	background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(35, 150, 127, .09), rgba(245, 133, 64, .04) 50%, transparent 70%);
}
.tsm__slide.is-active .tsm__card:hover::before { opacity: 1; }
.tsm__card::after {                  /* sheen sweep (animated when the slide becomes active) */
	content: '';
	position: absolute;
	top: 0; bottom: 0; left: -45%;
	width: 40%;
	pointer-events: none;
	opacity: 0;
	transform: skewX(-18deg);
	background: linear-gradient(90deg, transparent, rgba(35, 150, 127, .12), rgba(245, 133, 64, .14), transparent);
}

.tsm__mark {
	display: block;
	height: 38px;
	margin: 0 0 24px;
	font-size: 58px;
	line-height: 1;
	font-weight: 500;
	color: #c3c9ce;
	transform-origin: 20% 60%;
}
.tsm__quote {
	max-width: 20.5em;
	margin: 0;
	font-size: clamp(1.3rem, 2.8vw, 2.5rem);
	line-height: 1.3;
	font-weight: 400;
	letter-spacing: -.012em;
	color: var(--ts-ink);
}
.tsm__sr {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.tsm__w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.tsm__wi { display: inline-block; }

.tsm__who {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 34px 0 0;
}
.tsm__avatar {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 50%;
	background: #e5e9f0;
}
.tsm__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tsm__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tsm__name { font-size: 15px; line-height: 1.3; font-weight: 500; color: var(--ts-ink); }
.tsm__role { font-size: 14px; line-height: 1.3; font-weight: 400; color: #7c8794; }
.tsm__note {
	margin-left: auto;
	max-width: 340px;
	font-size: 12px;
	line-height: 1.4;
	text-align: right;
	color: #a6afb8;
}

/* ---------- Active-slide reveal (plays every time a slide becomes active) ---------- */

@keyframes tsm-word {
	from { opacity: 0; transform: translate3d(0, 118%, 0) rotate(5deg); }
	to   { opacity: 1; transform: none; }
}
@keyframes tsm-pop {
	0%   { opacity: 0; transform: scale(.3) rotate(-26deg); }
	60%  { opacity: 1; transform: scale(1.14) rotate(4deg); }
	100% { opacity: 1; transform: none; }
}
@keyframes tsm-up {
	from { opacity: 0; transform: translate3d(0, 14px, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes tsm-sheen {
	0%   { opacity: 0; transform: translateX(0) skewX(-18deg); }
	15%  { opacity: 1; }
	100% { opacity: 0; transform: translateX(380%) skewX(-18deg); }
}

.tsm.is-in .tsm__slide.is-active .tsm__mark { animation: tsm-pop .85s cubic-bezier(.3, 1.4, .5, 1) .1s both; }
.tsm.is-in .tsm__slide.is-active .tsm__wi { animation: tsm-word .95s var(--ts-ease) both; animation-delay: calc(.3s + var(--d, 0s)); }
.tsm.is-in .tsm__slide.is-active .tsm__avatar { animation: tsm-pop .7s cubic-bezier(.3, 1.4, .5, 1) .75s both; }
.tsm.is-in .tsm__slide.is-active .tsm__id { animation: tsm-up .7s var(--ts-ease) .85s both; }
.tsm.is-in .tsm__slide.is-active .tsm__note { animation: tsm-up .7s var(--ts-ease) 1s both; }
.tsm.is-in .tsm__slide.is-active .tsm__card::after { animation: tsm-sheen 1.5s ease-out .2s both; }

/* ---------- Controls ---------- */

.tsm__controls {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 36px;
}
.tsm__count {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	font-size: 15px;
	line-height: 1.2;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
}
.tsm__cur { display: block; height: 1.2em; overflow: hidden; }
.tsm__strip {
	display: block;
	transform: translateY(calc(var(--cur, 0) * -1.2em));
	transition: transform .9s var(--ts-ease);
}
.tsm__strip > span { display: block; height: 1.2em; line-height: 1.2em; }
.tsm__total { color: rgba(255, 255, 255, .6); }

.tsm__progress {
	position: relative;
	flex: 1 1 auto;
	height: 2px;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(255, 255, 255, .28);
}
.tsm__fill {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
}

.tsm__arrows { display: flex; gap: 12px; }
.tsm__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--ts-ease);
}
.tsm__btn svg { transition: transform .35s var(--ts-ease); }
.tsm__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tsm__btn:active { transform: scale(.92); }
@media (hover: hover) {
	.tsm .tsm__btn:hover { background: #fff; border-color: #fff; color: var(--ts-brand); }
	.tsm .tsm__btn--next:hover svg { transform: translateX(3px); }
	.tsm .tsm__btn--prev:hover svg { transform: translateX(-3px); }
}

/* ---------- Section load-in ---------- */

.tsm.has-motion .tsm__eyebrow { opacity: 0; }
.tsm.has-motion .tsm__eyebrow-line { transform: scaleX(0); }
.tsm.has-motion .tsm__stage { opacity: 0; transform: translate3d(0, 56px, 0); }   /* no scale: Splide measures widths */
.tsm.has-motion .tsm__controls { opacity: 0; transform: translate3d(0, 16px, 0); }
.tsm.has-motion:not(.is-in) .tsm__slide.is-active :is(.tsm__mark, .tsm__wi, .tsm__avatar, .tsm__id, .tsm__note) { opacity: 0; }

.tsm.is-in .tsm__eyebrow { opacity: 1; transition: opacity .6s ease; }
.tsm.is-in .tsm__eyebrow-line { transform: none; transition: transform .8s var(--ts-ease) .1s; }
.tsm.is-in .tsm__stage { opacity: 1; transform: none; transition: opacity .8s ease .1s, transform 1.1s var(--ts-ease) .1s; }
.tsm.is-in .tsm__controls { opacity: 1; transform: none; transition: opacity .8s ease .9s, transform .9s var(--ts-ease) .9s; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.tsm { padding: 64px var(--header-gutter, 24px) 64px; }
	.tsm__card { padding: 40px 36px 38px; }
	.tsm__note { max-width: 240px; }
}

@media (max-width: 640px) {
	.tsm { padding: 48px var(--header-gutter, 24px) 52px; }
	.tsm__eyebrow { margin-bottom: 22px; }
	.tsm__card { padding: 28px 22px 26px; border-radius: 14px; }
	.tsm__mark { height: 28px; margin-bottom: 16px; font-size: 44px; }
	.tsm__quote { font-size: clamp(1.15rem, 5.4vw, 1.4rem); line-height: 1.38; }
	.tsm__who { flex-wrap: wrap; margin-top: 24px; }
	.tsm__note { flex: 0 0 100%; max-width: none; margin: 8px 0 0; text-align: left; }
	.tsm__controls { gap: 16px; margin-top: 26px; }
	.tsm__btn { width: 44px; height: 44px; }
	.tsm__arrows { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.tsm *, .tsm *::before, .tsm *::after { animation: none !important; transition: none !important; }
	.tsm__card { filter: none; }
}

/* ==========================================================================
   Testimonials — 600px slider, scaled down
   PASTE AT THE VERY END of tectera-child/assets/css/child-custom.css
   (it overrides the earlier .tsm rules). Pair with the one-line JS change
   in testimonials-600px-js.txt.
   ========================================================================== */

.tsm { --tsm-w: 600px; }

/* eyebrow, slider and controls share the 600px column */
.tsm__inner { max-width: var(--tsm-w); }

.tsm__card {
	padding: 36px 36px 32px;
	border-radius: 14px;
	box-shadow: 0 28px 60px -20px rgba(8, 30, 50, .42), 0 8px 22px -10px rgba(8, 30, 50, .2);
}
.tsm__mark { height: 28px; margin: 0 0 16px; font-size: 44px; }
.tsm__quote { max-width: none; font-size: clamp(1.1rem, 1.9vw, 1.5rem); line-height: 1.38; }
.tsm__who { gap: 12px; margin: 24px 0 0; }
.tsm__avatar { flex-basis: 36px; width: 36px; height: 36px; }
.tsm__name { font-size: 14px; }
.tsm__role { font-size: 13px; }
.tsm__controls { gap: 20px; margin-top: 28px; }
.tsm__btn { width: 44px; height: 44px; }

@media (max-width: 640px) {
	.tsm__card { padding: 26px 22px 24px; }
	.tsm__mark { height: 24px; margin-bottom: 12px; font-size: 38px; }
	.tsm__quote { font-size: clamp(1.05rem, 4.8vw, 1.25rem); }
	.tsm__controls { gap: 16px; margin-top: 24px; }
}


/* ==========================================================================
   Global reach — template-parts/global-reach.php
   World map (inline SVG) + dotted route arcs + pins + travelling packets,
   then three location cards. JS adds .has-motion (entrance armed), .is-in
   (map entrance) and .is-cards (card entrance); hover-linking between pins
   and cards uses .is-hot / .is-dim. Reduced motion shows the static design.
   ========================================================================== */

.greach {
	--gr-ink: #171717;
	--gr-navy: #134767;
	--gr-land: #e9eef2;
	--gr-land-hover: #d8e2ea;
	--gr-card: #f7f7f8;
	--gr-text: #6b7885;               /* design #7b8895 — darkened slightly for contrast */
	--gr-line: #3a8a70;

	position: relative;
	padding: 76px var(--header-gutter, 24px) 80px;
	border-top: 1px solid #eef1f5;
	background: #fff;
	color: var(--gr-ink);
	font-family: 'Saira', sans-serif;
	overflow: hidden;
	scroll-margin-top: var(--header-h, 96px);
}
.greach__inner {
	max-width: 984px;
	margin: 0 auto;
}

/* ---------- heading ---------- */

.greach__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 15px;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--gr-navy);
}
.greach__eyebrow-line {
	flex: 0 0 32px;
	height: 1px;
	background: #d7dee5;
	transform-origin: left center;
}
.greach__title {
	max-width: 15em;
	margin: 0;
	font-size: clamp(1.75rem, 2.34vw, 2.1rem);
	line-height: 1.235;
	font-weight: 500;
	color: var(--gr-ink);
}
/* masked words used by the entrance (spans only exist when JS splits the title) */
.greach .iw {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: .1em 0 .14em;
	margin: -.1em 0 -.14em;
}
.greach .iw__i { display: inline-block; }

/* ---------- map ---------- */
.gr-map {
	position: relative;
	margin-top: 29px;
	aspect-ratio: 984 / 380;
	perspective: 1400px;
}
.gr-tilt {
	position: absolute;
	inset: 0;
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform .6s cubic-bezier(.2, .9, .25, 1);
}
.gr-tilt > svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

.gr-land path {
	fill: var(--gr-land);
	stroke: #fff;
	stroke-width: .263;
	transition: fill .55s ease;
}
.gr-borders {
	fill: none;
	stroke: #fff;
	stroke-width: .263;
	pointer-events: none;
}
@media (hover: hover) {
	.gr-land path:hover { fill: var(--gr-land-hover); transition-duration: .15s; }
}

/* ---------- dotted routes ---------- */

.gr-arcs { pointer-events: none; }
.gr-arc { transition: opacity .4s ease; }
.gr-arc__line {
	fill: none;
	stroke: var(--gr-line);
	stroke-width: .65px;
	stroke-linecap: round;
	stroke-dasharray: 2.19 3.94;
	vector-effect: non-scaling-stroke;
	transition: stroke-width .3s ease;
	animation: gr-march 1.4s linear infinite;
}
@keyframes gr-march { to { stroke-dashoffset: -6.13; } }
.gr-arc__reveal {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}
.gr-arc.is-hot .gr-arc__line { stroke-width: 1.5px; animation-duration: .55s; }
.gr-arc.is-dim { opacity: .18; }

/* ---------- pins ---------- */

.gr-pins,
.gr-packets {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.gr-packets { z-index: 2; }
.gr-pins { z-index: 3; }

.gr-pin {
	position: absolute;
	width: 0;
	height: 0;
	pointer-events: auto;
	transition: opacity .4s ease;
}
/* generous invisible hover target */
.gr-pin::before {
	content: '';
	position: absolute;
	left: -18px;
	top: -18px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
}
.gr-pin__halo,
.gr-pin__dot,
.gr-pin__ring {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.gr-pin__halo { width: 18px; height: 18px; background: var(--c); opacity: .14; transition: transform .5s cubic-bezier(.34, 1.56, .5, 1), opacity .4s ease; }
.gr-pin__dot  { width: 8px;  height: 8px;  background: var(--c); transition: transform .5s cubic-bezier(.34, 1.56, .5, 1); }
.gr-pin__ring {
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--c);
	opacity: 0;
	animation: gr-ring 3.6s ease-out calc(var(--i, 0) * .9s) infinite;
}
.gr-pin__ring--2 { animation-delay: calc(var(--i, 0) * .9s + 1.8s); }
@keyframes gr-ring {
	0%   { opacity: .55; transform: translate(-50%, -50%) scale(.55); }
	70%  { opacity: 0; }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(2.7); }
}

.gr-pin__label {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, calc(-100% - 6px));
	white-space: nowrap;
	font-size: 11px;
	line-height: 14px;
	font-weight: 500;
	color: #1a1d1c;
	pointer-events: none;
	transition: transform .5s cubic-bezier(.2, .9, .25, 1), color .3s ease;
}
.gr-pin--lg .gr-pin__label { font-size: 16px; line-height: 21px; transform: translate(-50%, calc(-100% - 8px)); }

.gr-pin.is-hot .gr-pin__dot,
.gr-pin:hover .gr-pin__dot { transform: translate(-50%, -50%) scale(1.45); }
.gr-pin.is-hot .gr-pin__halo,
.gr-pin:hover .gr-pin__halo { transform: translate(-50%, -50%) scale(1.7); opacity: .22; }
.gr-pin.is-hot .gr-pin__label,
.gr-pin:hover .gr-pin__label { transform: translate(-50%, calc(-100% - 11px)); color: var(--c); }
.gr-pin.is-dim { opacity: .3; }
/* a packet arriving / leaving fires this */
.gr-pin.is-ping .gr-pin__halo { animation: gr-ping .9s cubic-bezier(.2, .9, .25, 1); }
@keyframes gr-ping {
	0%   { transform: translate(-50%, -50%) scale(1);   opacity: .5; }
	100% { transform: translate(-50%, -50%) scale(2.4); opacity: .14; }
}

/* ---------- travelling packets (positioned by JS) ---------- */

.gr-packet {
	position: absolute;
	left: 0;
	top: 0;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	border-radius: 50%;
	background: var(--c, #3a8a70);
	opacity: 0;
	will-change: transform, opacity;
}
.gr-packet--head {
	background: #fff;
	box-shadow: 0 0 0 2px var(--c, #3a8a70), 0 0 14px 4px rgba(var(--cr, 58, 138, 112), .55);
}

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

.gr-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 20px;
}
.gr-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 20px 24px 18px;
	border-radius: 12px;
	background: var(--gr-card);
	text-align: center;
	box-shadow: inset 0 0 0 1px rgba(var(--cr, 19, 71, 103), 0);
	transition: transform .55s cubic-bezier(.2, .9, .25, 1), box-shadow .45s ease, opacity .4s ease;
}
/* cursor-following tint (JS sets --mx / --my) */
.gr-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--cr, 19, 71, 103), .12), transparent 70%);
	opacity: 0;
	transition: opacity .4s ease;
}
/* underline that wipes out from the centre */
.gr-card::after {
	content: '';
	position: absolute;
	left: 18%;
	right: 18%;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--c, #134767);
	transform: scaleX(0);
	transition: transform .55s cubic-bezier(.2, .9, .25, 1);
}
.gr-card__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 0;
	font-size: 15.5px;
	line-height: 24px;
	font-weight: 500;
	color: var(--gr-ink);
}
.gr-card__dot {
	position: relative;
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c, #134767);
	transition: transform .5s cubic-bezier(.34, 1.56, .5, 1);
}
.gr-card__dot::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 1.5px solid var(--c, #134767);
	opacity: 0;
}
.gr-card__text {
	margin: 9px 0 0;
	font-size: 13.5px;
	line-height: 20px;
	font-weight: 400;
	color: var(--gr-text);
}
@media (hover: hover) {
	.gr-card:hover,
	.gr-card.is-hot {
		transform: translateY(-4px);
		box-shadow: inset 0 0 0 1px rgba(var(--cr, 19, 71, 103), .2), 0 22px 36px -22px rgba(var(--cr, 19, 71, 103), .55);
	}
	.gr-card:hover::before,
	.gr-card.is-hot::before { opacity: 1; }
	.gr-card:hover::after,
	.gr-card.is-hot::after { transform: scaleX(1); }
	.gr-card:hover .gr-card__dot,
	.gr-card.is-hot .gr-card__dot { transform: scale(1.3); }
	.gr-card:hover .gr-card__dot::after,
	.gr-card.is-hot .gr-card__dot::after { animation: gr-dot-ping 1.3s ease-out infinite; }
}
@keyframes gr-dot-ping {
	0%   { opacity: .7; transform: scale(.6); }
	100% { opacity: 0; transform: scale(2.6); }
}
.gr-card.is-dim { opacity: .45; }

/* ==========================================================================
   Entrance (armed by JS with .has-motion, released with .is-in / .is-cards)
   ========================================================================== */

.greach.has-motion .greach__eyebrow-line { transform: scaleX(0); }
.greach.has-motion:not(.is-in) .greach__eyebrow-text { opacity: 0; }
.greach.has-motion.is-in .greach__eyebrow-line {
	transform: none;
	transition: transform .9s cubic-bezier(.2, .9, .25, 1) .05s;
}
.greach.has-motion.is-in .greach__eyebrow-text { animation: gr-fade-in .8s ease .35s backwards; }
@keyframes gr-fade-in { from { opacity: 0; transform: translate3d(-8px, 0, 0); } }

.greach.has-motion .iw__i { transform: translate3d(0, 112%, 0); }
.greach.has-motion.is-in .iw__i {
	transform: none;
	transition: transform .95s cubic-bezier(.2, .9, .25, 1) calc(.18s + var(--i, 0) * 45ms);
}

/* land ripples outward from the first pin (JS writes --ld per country) */
.greach.has-motion .gr-land path { opacity: 0; }
.greach.has-motion.is-in .gr-land path {
	transform-box: fill-box;
	transform-origin: center;
	animation: gr-land-in 1.1s cubic-bezier(.2, .9, .25, 1) calc(.25s + var(--ld, 0ms)) both;
}
@keyframes gr-land-in {
	from { opacity: 0; transform: scale(.88); }
	to   { opacity: 1; transform: none; }
}

/* routes draw themselves through their mask, one after the other */
.greach.has-motion:not(.is-in) .gr-arc__reveal { stroke-dashoffset: 1; }
.greach.has-motion.is-in .gr-arc__reveal {
	animation: gr-draw 1.7s cubic-bezier(.5, 0, .2, 1) calc(1.2s + var(--i, 0) * .4s) backwards;
}
@keyframes gr-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* pins spring in, labels float up, then the rings start breathing */
.greach.has-motion:not(.is-in) .gr-pin__ring { animation: none; opacity: 0; }
.greach.has-motion:not(.is-in) .gr-pin__halo,
.greach.has-motion:not(.is-in) .gr-pin__dot,
.greach.has-motion:not(.is-in) .gr-pin__label { opacity: 0; }
.greach.has-motion.is-in .gr-pin__halo,
.greach.has-motion.is-in .gr-pin__dot { animation: gr-pop .9s cubic-bezier(.3, 1.6, .5, 1) calc(.95s + var(--i, 0) * .28s) backwards; }
@keyframes gr-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(0); } }
.greach.has-motion.is-in .gr-pin__label { animation: gr-label-in .8s cubic-bezier(.2, .9, .25, 1) calc(1.2s + var(--i, 0) * .28s) backwards; }
@keyframes gr-label-in { from { opacity: 0; transform: translate(-50%, calc(-100% + 4px)); } }
.greach.has-motion.is-in .gr-pin__ring { animation-delay: calc(2.2s + var(--i, 0) * .9s); }
.greach.has-motion.is-in .gr-pin__ring--2 { animation-delay: calc(4s + var(--i, 0) * .9s); }

/* cards rise in when they scroll into view */
.greach.has-motion:not(.is-cards) .gr-card { opacity: 0; }
.greach.has-motion.is-cards .gr-card {
	animation: gr-card-in .95s cubic-bezier(.2, .9, .25, 1) calc(var(--i, 0) * .13s) backwards;
}
@keyframes gr-card-in {
	from { opacity: 0; transform: translateY(26px) scale(.96); filter: blur(4px); }
}
.greach.has-motion.is-cards .gr-card__dot { animation: gr-pop-dot .8s cubic-bezier(.3, 1.6, .5, 1) calc(.35s + var(--i, 0) * .13s) backwards; }
@keyframes gr-pop-dot { from { transform: scale(0); } }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 999px) {
	.greach { padding: 56px var(--header-gutter, 24px) 56px; }
	.gr-map { margin-top: 24px; }
}

@media (max-width: 640px) {
	.greach__title { max-width: none; line-height: 1.2; }
	/* zoom in ~19% on the part of the world that holds the pins (the margins of the map are empty ocean) */
	.gr-map {
		overflow: hidden;
		aspect-ratio: 826.6 / 380;
		perspective: none;
	}
	.gr-tilt {
		inset: auto;
		top: 0;
		left: -15.5%;
		width: 119.05%;
		height: auto;
		aspect-ratio: 984 / 380;
		transform: none;
	}
	.gr-arc__line { stroke-width: 1px; stroke-dasharray: 2.2 3.6; }
	@keyframes gr-march { to { stroke-dashoffset: -5.8; } }
	.gr-pin__halo { width: 14px; height: 14px; }
	.gr-pin__dot { width: 6px; height: 6px; }
	.gr-pin__ring { width: 14px; height: 14px; }
	.gr-pin__label { font-size: 9.5px; line-height: 12px; transform: translate(-50%, calc(-100% - 6px)); }
	.gr-pin--lg .gr-pin__label { font-size: 12px; line-height: 15px; }
	.gr-packet { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
	.gr-packet--head { box-shadow: 0 0 0 1.5px var(--c, #3a8a70), 0 0 10px 3px rgba(var(--cr, 58, 138, 112), .5); }

	.gr-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px; }
	.gr-card { padding: 16px 20px 15px; }
}

/* ==========================================================================
   Reduced motion: static design (JS also skips the entrance, packets and tilt)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.gr-arc__line,
	.gr-pin__ring,
	.gr-card:hover .gr-card__dot::after,
	.gr-card.is-hot .gr-card__dot::after { animation: none !important; }
	.gr-pin__ring { opacity: 0; }
	.gr-tilt,
	.gr-card,
	.gr-card::after,
	.gr-pin__dot,
	.gr-pin__halo,
	.gr-pin__label,
	.gr-land path { transition: none !important; }
}
.gr-cards { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
 
@media (max-width: 640px) {
	.gr-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Global reach: mobile, bigger map + smaller location cards
   PASTE AT THE VERY END of tectera-child/assets/css/child-custom.css
   (after the "cards centred" snippet, so it wins)
   ========================================================================== */
@media (max-width: 640px) {
	/* map runs edge to edge and zooms ~28% more on the land (shows 17%–92% of the map width,
	   which still holds every preset country pin) */
	.gr-map {
		margin-left: calc(-1 * var(--header-gutter, 24px));
		margin-right: calc(-1 * var(--header-gutter, 24px));
		aspect-ratio: 738 / 380;
	}
	.gr-tilt {
		left: -22.67%;
		width: 133.33%;
	}

	/* compact cards, two per row (an odd last card sits centred) */
	.gr-cards { gap: 8px; margin-top: 14px; }
	.gr-card {
		box-sizing: border-box;
		min-width: 0;
		flex: 0 1 calc((100% - 8px) / 2);
		padding: 10px 8px 9px;
		border-radius: 10px;
	}
	.gr-card__title { gap: 6px; font-size: 13px; line-height: 18px; }
	.gr-card__dot { width: 5px; height: 5px; }
	.gr-card__text { margin: 3px 0 0; font-size: 11.5px; line-height: 15px; }
}


/* ==========================================================================
   Testimonials — snappier slide change (overrides the earlier .tsm rules).
   Paste at the VERY END of assets/css/child-custom.css.
   The card now settles in .5s and the quote starts revealing almost at once
   (was: 1s slide, then .3s wait, then a word stagger of up to 1.1s).
   ========================================================================== */
.tsm__card { transition: transform .55s var(--ts-ease), opacity .45s ease, filter .45s ease; }
.tsm__tilt { transition: transform .4s var(--ts-ease); }
.tsm__strip { transition: transform .5s var(--ts-ease); }

.tsm.is-in .tsm__slide.is-active .tsm__mark   { animation: tsm-pop .5s cubic-bezier(.3, 1.4, .5, 1) 0s both; }
.tsm.is-in .tsm__slide.is-active .tsm__wi     { animation: tsm-word .5s var(--ts-ease) both; animation-delay: calc(.05s + var(--d, 0s)); }
.tsm.is-in .tsm__slide.is-active .tsm__avatar { animation: tsm-pop .45s cubic-bezier(.3, 1.4, .5, 1) .2s both; }
.tsm.is-in .tsm__slide.is-active .tsm__id     { animation: tsm-up .45s var(--ts-ease) .25s both; }
.tsm.is-in .tsm__slide.is-active .tsm__note   { animation: tsm-up .45s var(--ts-ease) .3s both; }
.tsm.is-in .tsm__slide.is-active .tsm__card::after { animation: tsm-sheen .9s ease-out .05s both; }

@media (prefers-reduced-motion: reduce) {
	.tsm *, .tsm *::before, .tsm *::after { animation: none !important; transition: none !important; }
}


/* ========================================================================== 
   Insights — template-parts/insights.php
   Gradient + faint grid + drifting warm glow, heading with masked-word entrance, Splide card slider
   (3 / 2 / 1 per view) with velocity skew while sliding, cursor spotlight on cards, rolling counter +
   autoplay progress. JS adds .has-motion (entrance armed), .is-in (once, on scroll), .is-live (loops run
   only while on screen), .is-static (nothing to scroll). Splide sets .is-visible/.is-active.
   ========================================================================== */

.ins {
	--ins-ink: #171717;
	--ins-brand: #134767;
	--ins-teal: #23967f;
	--ins-text: #636466;
	--ins-link: #6b7885;               /* design #7b8895 — darkened slightly for contrast on white */
	--ins-ease: cubic-bezier(.22, .9, .24, 1);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 96px var(--header-gutter, 24px) 76px;
	font-family: 'Saira', sans-serif;
	color: #fff;
	background: linear-gradient(140deg, #1b3648 0%, #134767 40%, #2c6a58 82%, #23967f 100%);
}
/* faint 72px grid from the design */
.ins::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 72px 72px;
	pointer-events: none;
}
/* warm glow, top right — drifts slowly while the section is on screen */
.ins__glow {
	position: absolute;
	z-index: -1;
	top: -18%;
	right: 4%;
	width: min(52vw, 760px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(224, 160, 80, .46), rgba(224, 160, 80, 0) 72%);
	filter: blur(6px);
	pointer-events: none;
}
.ins.is-live .ins__glow { animation: ins-glow 16s ease-in-out infinite alternate; }
@keyframes ins-glow {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	100% { transform: translate3d(-6%, 10%, 0) scale(1.14); }
}

.ins__inner { max-width: var(--header-max, 1280px); margin: 0 auto; }

/* ---------- heading ---------- */

.ins__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 40px;
}
.ins__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	color: rgba(255, 255, 255, .78);
}
.ins__eyebrow-line {
	flex: 0 0 32px;
	height: 1px;
	background: rgba(255, 255, 255, .45);
	transform-origin: left center;
}
.ins__title {
	max-width: 13.6em;
	margin: 0;
	font-size: clamp(1.9rem, 2.78vw, 2.5rem);
	line-height: 1.2;
	font-weight: 500;
	color: #fff;
}
/* masked words used by the entrance (spans only exist when JS splits the title) */
.ins__w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: .1em 0 .14em;
	margin: -.1em 0 -.14em;
}
.ins__wi { display: inline-block; }

/* ---------- arrows ---------- */

.ins__arrows { display: flex; flex: 0 0 auto; gap: 12px; padding-bottom: 6px; }
.ins__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--ins-ease);
}
.ins__btn svg { transition: transform .35s var(--ins-ease); }
.ins__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ins__btn:active { transform: scale(.92); }
@media (hover: hover) {
	.ins .ins__btn:hover { background: #fff; border-color: #fff; color: var(--ins-brand); }
	.ins .ins__btn--next:hover svg { transform: translateX(3px); }
	.ins .ins__btn--prev:hover svg { transform: translateX(-3px); }
}
.ins.is-static .ins__arrows,
.ins.is-static .ins__foot { display: none; }

/* ---------- slider ---------- */

/* the track clips its overflow, so lift + shadow get room through block padding */
.ins__splide .splide__track { padding-block: 14px 34px; margin-block: -14px -34px; }
.ins__splide.splide .splide__track { cursor: grab; }
.ins__splide.splide .splide__track:active { cursor: grabbing; }
/* before JS mounts Splide (or without JS): a plain grid of the first three */
.ins__splide:not(.splide) .splide__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}
.ins__splide:not(.splide) .ins__slide:nth-child(n+4) { display: none; }

.ins__slide {
	display: flex;                       /* cards share the tallest height */
	transform: skewX(calc(var(--ins-v, 0) * -.045deg));   /* JS writes --ins-v (px/frame) while sliding */
	transform-origin: 50% 100%;
}

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

.ins-card {
	--lift: 0px;
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 272px;
	padding: 40px 32px 34px;
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	color: var(--ins-ink);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 18px 40px -22px rgba(6, 28, 44, .55);
	transform: translate3d(0, var(--lift), 0);
	transition: transform .5s var(--ins-ease), box-shadow .5s var(--ins-ease);
}
/* cursor-following tint (JS sets --mx / --my) */
.ins-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(35, 150, 127, .13), transparent 70%);
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}
/* the whole card is clickable through the link */
.ins-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.ins-card__tag {
	display: flex;
	align-items: center;
	margin: 0 0 32px;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 400;
	letter-spacing: .01em;
	color: var(--ins-teal);
}
.ins-card__tag::before {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 1px;
	margin-right: 0;
	background: currentColor;
	transition: width .45s var(--ins-ease), margin-right .45s var(--ins-ease);
}
.ins-card__title {
	margin: 0 0 12px;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 500;
	color: var(--ins-ink);
	transition: color .3s ease;
}
.ins-card__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	font-weight: 400;
	color: var(--ins-text);
}
.ins-card__link {
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	margin-top: auto;
	padding-top: 24px;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 400;
	color: var(--ins-link);
	text-decoration: none;
	transition: color .3s ease;
}
.ins-card__label {
	background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat;
	padding-bottom: 2px;
	transition: background-size .45s var(--ins-ease);
}
.ins-card__arrow { color: var(--ins-brand); transition: transform .4s var(--ins-ease); }
.ins-card__link:focus-visible { outline: none; }
.ins-card:has(.ins-card__link:focus-visible) { outline: 2px solid var(--ins-teal); outline-offset: 3px; }

@media (hover: hover) {
	.ins-card:hover { --lift: -8px; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 30px 50px -24px rgba(6, 28, 44, .7); }
	.ins-card:hover::before { opacity: 1; }
	.ins-card:hover .ins-card__tag::before { width: 14px; margin-right: 8px; }
	.ins-card:hover .ins-card__title { color: var(--ins-brand); }
	.ins-card:hover .ins-card__link { color: var(--ins-brand); }
	.ins-card:hover .ins-card__label { background-size: 100% 1px; }
	.ins-card:hover .ins-card__arrow { transform: translateX(5px); }
}

/* ---------- counter + progress ---------- */

.ins__foot {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: 44px;
}
.ins__count {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	font-size: 15px;
	line-height: 1.2;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
}
.ins__cur { display: block; height: 1.2em; overflow: hidden; }
.ins__strip {
	display: block;
	transform: translateY(calc(var(--cur, 0) * -1.2em));
	transition: transform .9s var(--ins-ease);
}
.ins__strip > span { display: block; height: 1.2em; line-height: 1.2em; }
.ins__total { color: rgba(255, 255, 255, .6); }
.ins__progress {
	position: relative;
	flex: 1 1 auto;
	height: 2px;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(255, 255, 255, .28);
}
.ins__fill {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
}

/* ---------- entrance (JS adds .has-motion first, .is-in on scroll) ---------- */

.ins.has-motion .ins__eyebrow { opacity: 0; }
.ins.has-motion .ins__eyebrow-line { transform: scaleX(0); }
.ins.has-motion .ins__wi { transform: translate3d(0, 112%, 0); }
.ins.has-motion .ins__arrows,
.ins.has-motion .ins__foot { opacity: 0; transform: translate3d(0, 14px, 0); }
.ins.has-motion:not(.is-in) .ins-card { opacity: 0; }

.ins.is-in .ins__eyebrow { opacity: 1; transition: opacity .6s ease; }
.ins.is-in .ins__eyebrow-line { transform: none; transition: transform .8s var(--ins-ease) .1s; }
.ins.is-in .ins__wi { transform: none; transition: transform 1s var(--ins-ease) calc(.15s + var(--d, 0s)); }
.ins.is-in .ins__arrows { opacity: 1; transform: none; transition: opacity .7s ease .6s, transform .8s var(--ins-ease) .6s; }
.ins.is-in .ins__foot { opacity: 1; transform: none; transition: opacity .7s ease 1s, transform .8s var(--ins-ease) 1s; }

/* cards visible on first reveal rise in one after another (JS adds .ins-enter + --vi, then removes it) */
.ins .ins__slide.ins-enter .ins-card { animation: ins-rise 1s var(--ins-ease) calc(.35s + var(--vi, 0) * .13s) both; }
.ins .ins__slide.ins-enter .ins-card > * { animation: ins-fade .8s ease calc(.6s + var(--vi, 0) * .13s) both; }
@keyframes ins-rise {
	from { opacity: 0; transform: translate3d(0, 56px, 0) rotateX(10deg) scale(.97); }
	to   { opacity: 1; transform: translate3d(0, var(--lift, 0px), 0); }
}
@keyframes ins-fade {
	from { opacity: 0; transform: translate3d(0, 10px, 0); }
	to   { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
	.ins { padding: 80px var(--header-gutter, 24px) 68px; }
}
@media (max-width: 640px) {
	.ins { padding: 56px var(--header-gutter, 24px) 52px; }
	.ins__head { margin-bottom: 28px; }
	.ins__eyebrow { margin-bottom: 16px; }
	.ins__arrows { display: none; }
	.ins-card { min-height: 0; padding: 30px 24px 28px; }
	.ins-card__tag { margin-bottom: 22px; }
	.ins__foot { margin-top: 34px; }
}

/* ---------- reduced motion: static design, no loops ---------- */

@media (prefers-reduced-motion: reduce) {
	.ins *, .ins *::before, .ins *::after { animation: none !important; transition: none !important; }
	.ins__slide { transform: none; }
}



/* ==========================================================================
   Contact page — page-templates/template-contact.php
   1. gradient hero   2. consultation form (Contact Form 7) + contact cards   3. visit us + map
   Motion states only apply under html.ctc-motion (added inline by the template, never for
   prefers-reduced-motion), so the page is fully visible without JS.
   ========================================================================== */

/* Contact page: let the hero run under the transparent fixed header (like Home).
   header.css pushes every inner page down by the header height; undo that here. */
body.has-fixed-header.page-template-template-contact .site-main,
body.has-fixed-header .site-main:has(> .ctc) { padding-top: 0 !important; }

.ctc {
	--ctc-ink: #134767;
	--ctc-teal: #23967f;
	--ctc-orange: #f58540;
	--ctc-text: #636466;
	--ctc-muted: #a0aab3;
	--ctc-line: #d7dee5;
	--ctc-soft: #eef1f5;
	--ctc-ease: cubic-bezier(.2, .75, .2, 1);

	font-family: 'Saira', sans-serif;
	color: var(--ctc-text);
	overflow-x: clip;
}

.ctc *,
.ctc *::before,
.ctc *::after { box-sizing: border-box; }

:where(.ctc) p { margin: 0; }

.ctc-hero__inner,
.ctc-main__inner,
.ctc-visit__inner {
	width: 100%;
	max-width: var(--header-max, 1280px);
	margin: 0 auto;
	padding: 0 var(--header-gutter, 24px);
}

.ctc-title {
	margin: 0 0 14px;
	font-size: clamp(32px, 3.6vw, 44px);
	line-height: 1.15;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--ctc-ink);
}

.ctc-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.ctc-eyebrow__line {
	display: inline-block;
	width: 32px;
	height: 1px;
	background: currentColor;
	opacity: .55;
	transform-origin: left center;
}

/* ---------- 1. Hero ---------- */

.ctc-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 493px;
	display: flex;
	align-items: center;
	padding: calc(var(--header-h, 96px) + 56px) 0 96px;
	color: #fff;
	background: linear-gradient(180deg, #134767 0%, #23967f 54%, #f58540 108%);
}

.ctc-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.ctc-hero__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	will-change: transform;
}

.ctc-hero__orb--1 {
	top: -200px;
	right: -10%;
	width: 720px;
	height: 520px;
	background: radial-gradient(closest-side, rgba(245, 133, 64, .32), rgba(245, 133, 64, 0) 100%);
}

.ctc-hero__orb--2 {
	top: 30%;
	left: 38%;
	width: 520px;
	height: 360px;
	background: radial-gradient(closest-side, rgba(127, 192, 166, .22), rgba(127, 192, 166, 0));
}

.ctc-hero__orb--3 {
	bottom: -220px;
	left: -8%;
	width: 640px;
	height: 420px;
	background: radial-gradient(closest-side, rgba(19, 71, 103, .35), rgba(19, 71, 103, 0));
}

.ctc-hero__spot {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .6s ease;
	background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 40%), rgba(255, 255, 255, .12), transparent 70%);
}

.ctc-hero:hover .ctc-hero__spot { opacity: 1; }

.ctc-hero__dots {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 75%);
	mask-image: linear-gradient(90deg, transparent 30%, #000 75%);
}

.ctc-hero__inner { position: relative; }

.ctc-hero__eyebrow {
	margin-bottom: 24px;
	color: rgba(255, 255, 255, .72);
}

.ctc-hero__title {
	margin: 0 0 22px;
	font-size: clamp(40px, 5.6vw, 64px);
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -.005em;
	color: #fff;
}

.ctc-hero__word { display: inline-block; }

.ctc-hero__highlight {
	display: inline-block;
	color: transparent;
	background-image:
		linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .75) 50%, transparent 62%),
		linear-gradient(125deg, #f58540 4%, #7fc0a6 61%, #baddcf 78%, #dbede6 87%, #fff 96%);
	background-size: 260% 100%, 100% 100%;
	background-position: 160% 0, 0 0;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
}

.ctc-hero__lead {
	max-width: 540px;
	font-size: 18px;
	line-height: 1.62;
	font-weight: 300;
	color: rgba(255, 255, 255, .86);
}

/* ---------- 2. Form + contact cards ---------- */

.ctc-main { padding: 70px 0 70px; background: #fff; }

.ctc-main__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
	gap: 80px;
	align-items: start;
}

.ctc-form__intro {
	max-width: 530px;
	margin-bottom: 40px;
	font-size: 16px;
	line-height: 1.65;
}

.ctc-form__body { max-width: 740px; }

.ctc-form__missing {
	padding: 20px 24px;
	border: 1px dashed var(--ctc-orange);
	border-radius: 8px;
	font-size: 14px;
	color: var(--ctc-ink);
}

.ctc .wpcf7 form > div[style*="none"],
.ctc .wpcf7 .hidden-fields-container { display: none; }

.ctc-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 20px;
}

.ctc-field { position: relative; min-width: 0; }
.ctc-field--full { grid-column: 1 / -1; }

.ctc-field > label {
	display: block;
	margin-bottom: 9px;
	font-size: 13px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--ctc-ink);
	transition: color .3s ease;
}

.ctc-req { color: var(--ctc-orange); }

.ctc .wpcf7-form-control-wrap {
	position: relative;
	display: block;
}

/* focus bar that draws in under the active field */
.ctc .wpcf7-form-control-wrap::after {
	content: '';
	position: absolute;
	left: 1px;
	right: 1px;
	bottom: 1px;
	height: 2px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, var(--ctc-orange), var(--ctc-teal));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .5s var(--ctc-ease);
	pointer-events: none;
}

.ctc .wpcf7-form-control-wrap:focus-within::after { transform: scaleX(1); }
.ctc .wpcf7-form-control-wrap:has(.wpcf7-not-valid-tip)::after { bottom: auto; top: calc(100% - 3px); }

.ctc-field input[type="text"],
.ctc-field input[type="email"],
.ctc-field input[type="tel"],
.ctc-field input[type="url"],
.ctc-field input[type="number"],
.ctc-field select,
.ctc-field textarea {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 16px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 400;
	color: var(--ctc-ink);
	background: #fff;
	border: 1px solid var(--ctc-line);
	border-radius: 4px;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.ctc-field select {
	height: 52px;
	padding: 0 44px 0 20px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23134767' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 11px 7px;
}

.ctc-field textarea {
	height: 138px;
	min-height: 110px;
	padding: 14px 16px;
	resize: vertical;
}

.ctc-field ::placeholder { color: var(--ctc-muted); opacity: 1; }

.ctc-field input:hover,
.ctc-field select:hover,
.ctc-field textarea:hover { border-color: #b9c4cf; }

.ctc-field input:focus,
.ctc-field select:focus,
.ctc-field textarea:focus {
	border-color: rgba(35, 150, 127, .65);
	box-shadow: 0 0 0 4px rgba(35, 150, 127, .1);
}

.ctc-field:focus-within > label { color: var(--ctc-teal); }

.ctc .wpcf7-not-valid { border-color: var(--ctc-orange) !important; }

.ctc .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.4;
	color: #d9622a;
}

.ctc-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

.ctc .ctc-submit {
	position: relative;
	height: 53px;
	padding: 0 32px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .01em;
	color: #fff;
	cursor: pointer;
	border: 0;
	border-radius: 4px;
	background-color: var(--ctc-ink);
	background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
	background-size: 260% 100%;
	background-position: 150% 0;
	background-repeat: no-repeat;
	box-shadow: 0 10px 24px -14px rgba(19, 71, 103, .7);
	-webkit-appearance: none;
	appearance: none;
	transition: background-position .9s var(--ctc-ease), background-color .3s ease, box-shadow .3s ease, transform .35s var(--ctc-ease), opacity .3s ease;
}

.ctc .ctc-submit:hover {
	background-color: #0f3a55;
	background-position: -50% 0;
	box-shadow: 0 16px 30px -14px rgba(19, 71, 103, .75);
}

.ctc .ctc-submit:focus-visible { outline: 2px solid var(--ctc-teal); outline-offset: 3px; }
.ctc .ctc-submit:active { transform: translateY(1px) scale(.99); }

.ctc .wpcf7-form.submitting .ctc-submit { opacity: .75; cursor: progress; }

/* CF7 spinner, restyled as a ring */
.ctc .wpcf7-spinner {
	margin: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: none;
	border: 2px solid rgba(19, 71, 103, .15);
	border-top-color: var(--ctc-teal);
	opacity: 1;
	animation: ctc-spin .8s linear infinite;
}

.ctc .wpcf7-spinner::before { display: none; }
.ctc .wpcf7-form:not(.submitting) .wpcf7-spinner { display: none; }

.ctc-form__note {
	margin-top: 22px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ctc-muted);
}

.ctc .wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 18px 14px 48px;
	position: relative;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ctc-ink);
	border: 1px solid var(--ctc-line);
	border-radius: 6px;
	background: #fff;
}

.ctc .wpcf7 form.init .wpcf7-response-output,
.ctc .wpcf7 form.resetting .wpcf7-response-output,
.ctc .wpcf7 form.submitting .wpcf7-response-output { display: none; }

.ctc .wpcf7 form .wpcf7-response-output::before {
	content: '!';
	position: absolute;
	left: 16px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	color: #fff;
	background: var(--ctc-orange);
}

.ctc .wpcf7 form.sent .wpcf7-response-output {
	border-color: rgba(35, 150, 127, .4);
	background: rgba(35, 150, 127, .06);
}

.ctc .wpcf7 form.sent .wpcf7-response-output::before { content: '✓'; background: var(--ctc-teal); }

.ctc .wpcf7 form.invalid .wpcf7-response-output,
.ctc .wpcf7 form.unaccepted .wpcf7-response-output,
.ctc .wpcf7 form.payment-required .wpcf7-response-output,
.ctc .wpcf7 form.failed .wpcf7-response-output,
.ctc .wpcf7 form.aborted .wpcf7-response-output,
.ctc .wpcf7 form.spam .wpcf7-response-output {
	border-color: rgba(245, 133, 64, .45);
	background: rgba(245, 133, 64, .06);
}

/* contact cards */

.ctc-info {
	display: grid;
	gap: 20px;
}

.ctc-card {
	--gx: 50%;
	--gy: 50%;
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--ctc-soft);
	border-radius: 12px;
	transition: border-color .4s ease, box-shadow .4s ease, transform .5s var(--ctc-ease);
}

.ctc-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	background: radial-gradient(260px circle at var(--gx) var(--gy), rgba(35, 150, 127, .08), transparent 70%);
	transition: opacity .4s ease;
}

.ctc-card:hover {
	border-color: rgba(35, 150, 127, .28);
	box-shadow: 0 18px 40px -26px rgba(19, 71, 103, .45);
}

.ctc-card:hover::before { opacity: 1; }

.ctc-card__icon {
	position: relative;
	flex: 0 0 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 6px;
	color: var(--ctc-ink);
	background: var(--ctc-soft);
	overflow: hidden;
	transition: color .4s ease;
}

.ctc-card__icon::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--ctc-ink), var(--ctc-teal));
	transform: translateY(101%);
	transition: transform .45s var(--ctc-ease);
}

.ctc-card__icon svg { position: relative; }
.ctc-card:hover .ctc-card__icon { color: #fff; }
.ctc-card:hover .ctc-card__icon::before { transform: translateY(0); }
.ctc-card:hover .ctc-card__icon svg { animation: ctc-wiggle .6s var(--ctc-ease); }

.ctc-card__body { min-width: 0; padding-top: 2px; }

.ctc-card__label {
	margin-bottom: 6px !important;
	font-size: 11px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ctc-muted);
}

.ctc-card__value {
	font-size: 18px;
	line-height: 1.35;
	font-weight: 500;
	color: var(--ctc-ink);
	overflow-wrap: anywhere;
}

.ctc-card__value a {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(90deg, var(--ctc-orange), var(--ctc-teal)) no-repeat left bottom / 0 1px;
	transition: background-size .45s var(--ctc-ease);
}

.ctc-card__value a:hover,
.ctc-card__value a:focus-visible { background-size: 100% 1px; }

.ctc-card__sub {
	margin-top: 6px !important;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ctc-text);
}

.ctc-hours { display: block; padding-bottom: 22px; }

.ctc-hours__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.ctc-hours__title {
	margin: 0;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--ctc-ink);
}

.ctc-hours__list { margin: 0; }

.ctc-hours__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 13px 0;
	font-size: 14px;
	line-height: 1.4;
	border-bottom: 1px solid var(--ctc-soft);
}

.ctc-hours__row dt { font-weight: 400; color: var(--ctc-text); }
.ctc-hours__row dd { margin: 0; text-align: right; color: var(--ctc-muted); }
.ctc-hours__row.is-open dd { font-weight: 600; color: var(--ctc-ink); }

.ctc-hours__note {
	margin-top: 24px !important;
	font-size: 12px;
	line-height: 1.55;
	color: var(--ctc-muted);
}

/* ---------- 3. Visit us ---------- */

.ctc-visit { padding: 100px 0; background: #f7f7f8; }

.ctc-visit__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
	align-items: start;
}

.ctc-visit__copy .ctc-title { margin-bottom: 26px; }

.ctc-visit__text {
	margin-bottom: 42px !important;
	font-size: 16px;
	line-height: 1.65;
}

.ctc-office {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: 36px 32px 34px;
	border-radius: 12px;
	color: #fff;
	background: linear-gradient(120deg, #134767 0%, #1d6f77 45%, #23967f 100%);
	background-size: 160% 160%;
	background-position: 0% 0%;
	box-shadow: 0 24px 48px -32px rgba(19, 71, 103, .8);
}

.ctc-office__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .55;
	background: radial-gradient(320px circle at var(--gx, 80%) var(--gy, 20%), rgba(255, 255, 255, .16), transparent 70%);
	transition: opacity .4s ease;
}

.ctc-office:hover .ctc-office__glow { opacity: 1; }

.ctc-office__label {
	margin-bottom: 26px !important;
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

.ctc-office__name {
	margin-bottom: 10px !important;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 500;
	color: #fff;
}

.ctc-office__address {
	margin: 0;
	font-style: normal;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .78);
}

.ctc-map {
	position: relative;
	overflow: hidden;
	height: 367px;
	border-radius: 20px;
	background: #e7e4df;
	box-shadow: 0 24px 50px -36px rgba(19, 71, 103, .55);
}

.ctc-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.ctc-content {
	max-width: var(--header-max, 1280px);
	margin: 0 auto;
	padding: 64px var(--header-gutter, 24px);
}

/* ---------- Motion (only under html.ctc-motion) ---------- */

.ctc-motion .ctc [data-ctc-reveal] {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	filter: blur(6px);
	transition: opacity 1s var(--ctc-ease) var(--d, 0s), transform 1s var(--ctc-ease) var(--d, 0s), filter 1s var(--ctc-ease) var(--d, 0s);
}

.ctc-motion .ctc [data-ctc-reveal].is-in { opacity: 1; transform: none; filter: none; }

.ctc-motion .ctc-hero__eyebrow .ctc-eyebrow__line { transform: scaleX(0); transition: transform .9s var(--ctc-ease) .1s; }
.ctc-motion .ctc-hero__eyebrow.is-in .ctc-eyebrow__line { transform: scaleX(1); }

/* hero title: letters rise and un-blur, highlight wipes in then shimmers */
.ctc-motion .ctc-hero__title .ctc-ch {
	display: inline-block;
	opacity: 0;
	transform: translate3d(0, .5em, 0) rotate(6deg);
	filter: blur(8px);
	transition: opacity .8s var(--ctc-ease), transform .9s var(--ctc-ease), filter .8s var(--ctc-ease);
	transition-delay: calc(.12s + var(--ci) * .045s);
}

.ctc-motion .ctc-hero__title.is-in .ctc-ch { opacity: 1; transform: none; filter: none; }

.ctc-motion .ctc-hero__highlight {
	clip-path: inset(-10% 100% -20% 0);
	transform: translate3d(-12px, 0, 0);
	transition: clip-path 1.1s var(--ctc-ease) .45s, transform 1.1s var(--ctc-ease) .45s;
}

.ctc-motion .ctc-hero__title.is-in .ctc-hero__highlight {
	clip-path: inset(-10% -2% -20% 0);
	transform: none;
	animation: ctc-shimmer 5.5s ease-in-out 1.4s infinite;
}

.ctc-motion .ctc-hero__inner { transform: translate3d(0, var(--sy, 0px), 0); opacity: var(--so, 1); }

/* section titles: words slide up from a mask */
.ctc-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: .08em;
	margin-bottom: -.08em;
}

.ctc-w > span { display: inline-block; }

.ctc-motion .ctc [data-ctc-words] .ctc-w > span {
	transform: translate3d(0, 105%, 0);
	transition: transform .9s var(--ctc-ease);
	transition-delay: calc(var(--wi) * .07s);
}

.ctc-motion .ctc [data-ctc-words].is-in .ctc-w > span { transform: none; }

/* form fields rise in sequence */
.ctc-motion .ctc [data-ctc-form] .ctc-field,
.ctc-motion .ctc [data-ctc-form] .ctc-actions,
.ctc-motion .ctc [data-ctc-form] .ctc-form__note {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity .8s var(--ctc-ease), transform .8s var(--ctc-ease);
	transition-delay: calc(var(--fi, 0) * .07s);
}

.ctc-motion .ctc [data-ctc-form].is-in .ctc-field,
.ctc-motion .ctc [data-ctc-form].is-in .ctc-actions,
.ctc-motion .ctc [data-ctc-form].is-in .ctc-form__note { opacity: 1; transform: none; }

/* cards slide in from the right; hours rows follow */
.ctc-motion .ctc [data-ctc-card] {
	opacity: 0;
	transform: translate3d(48px, 0, 0) rotateY(-10deg);
	transform-origin: right center;
	transition: opacity .9s var(--ctc-ease), transform 1s var(--ctc-ease), border-color .4s ease, box-shadow .4s ease;
	transition-delay: calc(var(--i) * .1s), calc(var(--i) * .1s), 0s, 0s;
}

.ctc-motion .ctc [data-ctc-card].is-in {
	opacity: 1;
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

.ctc-motion .ctc [data-ctc-card].is-in.is-settled { transition-delay: 0s; transition-duration: .9s, .5s, .4s, .4s; }

.ctc-motion .ctc .ctc-hours__row {
	opacity: 0;
	transform: translate3d(0, 10px, 0);
	transition: opacity .6s var(--ctc-ease), transform .6s var(--ctc-ease);
	transition-delay: calc(.5s + var(--i) * .1s + var(--j) * .08s);
}

.ctc-motion .ctc .ctc-hours.is-in .ctc-hours__row { opacity: 1; transform: none; }

/* map opens like an aperture */
.ctc-motion .ctc [data-ctc-map] {
	clip-path: inset(14% 10% 14% 10% round 20px);
	opacity: 0;
	transition: clip-path 1.3s var(--ctc-ease) .15s, opacity .8s ease .15s;
}

.ctc-motion .ctc [data-ctc-map] iframe {
	transform: scale(1.18);
	transition: transform 1.8s var(--ctc-ease) .15s;
}

.ctc-motion .ctc [data-ctc-map].is-in { clip-path: inset(0 0 0 0 round 20px); opacity: 1; }
.ctc-motion .ctc [data-ctc-map].is-in iframe { transform: none; }

.ctc-motion .ctc-office.is-in { animation: ctc-office-flow 9s ease-in-out 1.2s infinite alternate; }

/* invalid fields shake once */
.ctc .ctc-field.is-shake { animation: ctc-shake .5s var(--ctc-ease); }

@media (prefers-reduced-motion: no-preference) {
	.ctc-hero__orb--1 { animation: ctc-drift-1 16s ease-in-out infinite alternate; }
	.ctc-hero__orb--2 { animation: ctc-drift-2 20s ease-in-out infinite alternate; }
	.ctc-hero__orb--3 { animation: ctc-drift-3 18s ease-in-out infinite alternate; }
}

@keyframes ctc-drift-1 { to { transform: translate3d(-140px, 80px, 0) scale(1.15); } }
@keyframes ctc-drift-2 { to { transform: translate3d(180px, -60px, 0) scale(.85); } }
@keyframes ctc-drift-3 { to { transform: translate3d(120px, -40px, 0) scale(1.2); } }
@keyframes ctc-shimmer { 0%, 55% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
@keyframes ctc-office-flow { to { background-position: 100% 100%; } }
@keyframes ctc-spin { to { transform: rotate(360deg); } }
@keyframes ctc-wiggle { 0%, 100% { transform: none; } 30% { transform: rotate(-12deg) scale(1.08); } 60% { transform: rotate(8deg); } }
@keyframes ctc-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

@media (prefers-reduced-motion: reduce) {
	.ctc *,
	.ctc *::before,
	.ctc *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
	.ctc-main__inner { gap: 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
}

@media (max-width: 991px) {
	.ctc-hero { min-height: 420px; padding: calc(var(--header-h, 96px) + 40px) 0 72px; }
	.ctc-main { padding: 72px 0 80px; }
	.ctc-main__inner { grid-template-columns: 1fr; gap: 56px; }
	.ctc-form__body { max-width: none; }
	.ctc-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ctc-hours { grid-column: 1 / -1; }
	.ctc-visit { padding: 72px 0; }
	.ctc-visit__inner { grid-template-columns: 1fr; gap: 40px; }
	.ctc-map { height: 340px; }
}

@media (max-width: 640px) {
	.ctc-hero__lead { font-size: 16px; }
	.ctc-grid { grid-template-columns: 1fr; gap: 22px; }
	.ctc-info { grid-template-columns: 1fr; }
	.ctc .ctc-submit { width: 100%; padding: 0 20px; }
	.ctc-card { padding: 20px; }
	.ctc-office { padding: 28px 24px; }
	.ctc-map { height: 300px; border-radius: 14px; }
	.ctc-hero__dots { display: none; }
}

/* Office card: the address is a link (Google Maps directions by default) */
.ctc-office__address a {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)) no-repeat left bottom / 0 1px;
	transition: background-size .45s var(--ctc-ease), color .3s ease;
}

.ctc-office__address a:hover,
.ctc-office__address a:focus-visible { color: #fff; background-size: 100% 1px; }
.ctc-office__address a:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 3px; border-radius: 2px; }

/* Form: optional label, consent checkbox, disabled submit (CF7 disables it until consent is ticked) */
.ctc-opt { font-weight: 400; color: var(--ctc-muted); }

.ctc-field--consent { margin-top: -4px; }
.ctc-field--consent .wpcf7-form-control-wrap::after { display: none; }
.ctc-field--consent .wpcf7-list-item { display: block; margin: 0; }

.ctc-field--consent label {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	font-weight: 400;
	color: var(--ctc-text);
	cursor: pointer;
}

.ctc-field--consent input[type="checkbox"] {
	position: relative;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1px solid var(--ctc-line);
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.ctc-field--consent input[type="checkbox"]::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .3s var(--ctc-ease);
}

.ctc-field--consent input[type="checkbox"]:hover { border-color: #b9c4cf; }
.ctc-field--consent input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(35, 150, 127, .15); border-color: var(--ctc-teal); }
.ctc-field--consent input[type="checkbox"]:checked { background: var(--ctc-teal); border-color: var(--ctc-teal); }
.ctc-field--consent input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }

.ctc-field--consent a {
	color: var(--ctc-ink);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(19, 71, 103, .3);
	text-underline-offset: 3px;
	transition: text-decoration-color .3s ease, color .3s ease;
}

.ctc-field--consent a:hover { color: var(--ctc-teal); text-decoration-color: currentColor; }

.ctc .ctc-submit:disabled,
.ctc .ctc-submit[disabled] {
	opacity: .45;
	cursor: not-allowed;
	box-shadow: none;
	background-position: 150% 0;
	transform: none !important;
}

/* ==========================================================================
   Contact page — Fluent Forms skin (form imported from fluentform-contact.json)
   Overrides Fluent's default style so the form matches the CF7 design above.
   ========================================================================== */

.ctc .fluentform { font-family: inherit; }
.ctc .fluentform fieldset { min-width: 0; }

.ctc .frm-fluent-form .ff-t-container {
	display: flex;
	gap: 20px;
	margin: 0;
}

.ctc .frm-fluent-form .ff-t-cell {
	flex: 1 1 0 !important;
	min-width: 0;
	padding: 0 !important;
}

.ctc .fluentform .ff-el-group {
	position: relative;
	margin-bottom: 28px;
}

.ctc .fluentform .ff-el-input--label {
	margin-bottom: 9px;
	line-height: 1.3;
}

.ctc .fluentform .ff-el-input--label label {
	margin: 0;
	font-size: 13px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--ctc-ink);
	transition: color .3s ease;
}

.ctc .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	content: ' *';
	margin-left: 1px;
	color: var(--ctc-orange);
}

.ctc .fluentform .ff-el-group:focus-within .ff-el-input--label label { color: var(--ctc-teal); }

.ctc .fluentform .ff-el-input--content { position: relative; }

/* focus bar under the active field */
.ctc .fluentform .ff-el-input--content::after {
	content: '';
	position: absolute;
	left: 1px;
	right: 1px;
	bottom: 1px;
	height: 2px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, var(--ctc-orange), var(--ctc-teal));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .5s var(--ctc-ease);
	pointer-events: none;
}

.ctc .fluentform .ff-el-input--content:focus-within::after { transform: scaleX(1); }
.ctc .fluentform .ff-el-is-error .ff-el-input--content::after,
.ctc .fluentform .ff-el-tc .ff-el-input--content::after { display: none; }

.ctc .fluentform .ff-el-form-control {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 16px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 400;
	color: var(--ctc-ink);
	background-color: #fff;
	border: 1px solid var(--ctc-line);
	border-radius: 4px;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .3s ease, box-shadow .3s ease;
}

.ctc .fluentform select.ff-el-form-control {
	height: 52px;
	padding: 0 44px 0 20px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23134767' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 11px 7px;
}

.ctc .fluentform textarea.ff-el-form-control {
	height: 138px;
	min-height: 110px;
	padding: 14px 16px;
	resize: vertical;
}

.ctc .fluentform .ff-el-form-control::placeholder { color: var(--ctc-muted); opacity: 1; }
.ctc .fluentform .ff-el-form-control:hover { border-color: #b9c4cf; }

.ctc .fluentform .ff-el-form-control:focus {
	border-color: rgba(35, 150, 127, .65);
	box-shadow: 0 0 0 4px rgba(35, 150, 127, .1);
}

.ctc .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--ctc-orange); }

.ctc .fluentform .ff-el-is-error .error,
.ctc .fluentform .text-danger {
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.4;
	color: #d9622a;
}

/* consent checkbox */
.ctc .fluentform .ff-el-tc { margin-top: -4px; margin-bottom: 0; }

.ctc .fluentform .ff-el-tc label.ff_tc_label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    cursor: pointer;
}

.ctc .fluentform .ff-el-tc label.ff_tc_label::after,
.ctc .fluentform .ff-el-tc label.ff_tc_label::before { content: none !important; display: none; }

.ctc .fluentform .ff_tc_checkbox { flex: 0 0 20px; padding: 0; margin: 0; }

.ctc .fluentform .ff_t_c {
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.55;
	font-weight: 400;
	color: var(--ctc-text);
}

.ctc .fluentform .ff_t_c p { margin: 0; }

.ctc .fluentform .ff-el-tc.ff-el-is-required .ff_t_c::after {
	content: ' *';
	color: var(--ctc-orange);
}

.ctc .fluentform .ff_t_c a {
	color: var(--ctc-ink);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(19, 71, 103, .3);
	text-underline-offset: 3px;
}

.ctc .fluentform .ff_t_c a:hover { color: var(--ctc-teal); text-decoration-color: currentColor; }

.ctc .fluentform input[type="checkbox"].ff-el-form-check-input {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1px solid var(--ctc-line);
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.ctc .fluentform input[type="checkbox"].ff-el-form-check-input::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .3s var(--ctc-ease);
}

.ctc .fluentform input[type="checkbox"].ff-el-form-check-input:focus-visible { outline: none; border-color: var(--ctc-teal); box-shadow: 0 0 0 4px rgba(35, 150, 127, .15); }
.ctc .fluentform input[type="checkbox"].ff-el-form-check-input:checked { background: var(--ctc-teal); border-color: var(--ctc-teal); }
.ctc .fluentform input[type="checkbox"].ff-el-form-check-input:checked::after { transform: rotate(45deg) scale(1); }
.ctc .fluentform .ff-el-tc.ff-el-is-error input[type="checkbox"] { border-color: var(--ctc-orange); }

/* submit */
.ctc .fluentform .ff_submit_btn_wrapper { margin: 32px 0 0; text-align: left; }

.ctc .fluentform .ff-btn-submit,
.ctc .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	position: relative;
	height: 53px;
	padding: 0 32px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: .01em;
	color: #fff !important;
	cursor: pointer;
	border: 0 !important;
	border-radius: 4px !important;
	background-color: var(--ctc-ink) !important;
	background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
	background-size: 260% 100%;
	background-position: 150% 0;
	background-repeat: no-repeat;
	box-shadow: 0 10px 24px -14px rgba(19, 71, 103, .7);
	opacity: 1;
	transition: background-position .9s var(--ctc-ease), background-color .3s ease, box-shadow .3s ease, transform .35s var(--ctc-ease), opacity .3s ease;
}

.ctc .fluentform .ff-btn-submit:hover {
	background-color: #0f3a55 !important;
	background-position: -50% 0;
	box-shadow: 0 16px 30px -14px rgba(19, 71, 103, .75);
	opacity: 1;
}

.ctc .fluentform .ff-btn-submit:focus-visible { outline: 2px solid var(--ctc-teal); outline-offset: 3px; }
.ctc .fluentform .ff-btn-submit.disabled,
.ctc .fluentform .ff-btn-submit[disabled] { opacity: .7; cursor: progress; }

.ctc .fluentform .ff-btn-submit .ff-loading,
.ctc .fluentform .ff-working::after { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }

.ctc .ctc-form__body--fluent .ctc-form__note { margin-top: 22px; }

/* messages */
.ctc .fluentform .ff-message-success,
.ctc .ff-message-success {
	position: relative;
	margin: 0;
	padding: 18px 20px 18px 54px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ctc-ink);
	border: 1px solid rgba(35, 150, 127, .4);
	border-radius: 8px;
	background: rgba(35, 150, 127, .06);
	box-shadow: none;
	animation: ctc-pop .6s var(--ctc-ease);
}

.ctc .ff-message-success::before {
	content: '✓';
	position: absolute;
	left: 18px;
	top: 19px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 600;
	line-height: 22px;
	text-align: center;
	color: #fff;
	background: var(--ctc-teal);
}

.ctc .ff-message-success p { margin: 0; }

.ctc .ff-errors-in-stack .error {
	margin-top: 16px;
	padding: 12px 16px;
	font-size: 14px;
	color: #d9622a;
	border: 1px solid rgba(245, 133, 64, .45);
	border-radius: 6px;
	background: rgba(245, 133, 64, .06);
}

@keyframes ctc-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* Fluent rows rise in sequence like the CF7 fields */
.ctc-motion .ctc [data-ctc-form] .fluentform .ff-t-container,
.ctc-motion .ctc [data-ctc-form] .fluentform fieldset > .ff-el-group,
.ctc-motion .ctc [data-ctc-form] .fluentform .ff_submit_btn_wrapper {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity .8s var(--ctc-ease), transform .8s var(--ctc-ease);
	transition-delay: calc(var(--fi, 0) * .08s);
}

.ctc-motion .ctc [data-ctc-form].is-in .fluentform .ff-t-container,
.ctc-motion .ctc [data-ctc-form].is-in .fluentform fieldset > .ff-el-group,
.ctc-motion .ctc [data-ctc-form].is-in .fluentform .ff_submit_btn_wrapper { opacity: 1; transform: none; }

.ctc .fluentform .ff-el-group.is-shake { animation: ctc-shake .5s var(--ctc-ease); }

@media (max-width: 640px) {
	.ctc .frm-fluent-form .ff-t-container { flex-direction: column; gap: 0; }
	.ctc .fluentform .ff-el-group { margin-bottom: 22px; }
	.ctc .fluentform .ff-btn-submit { width: 100%; padding: 0 20px; }
}




/* ==========================================================================
   Legal page — page-templates/template-legal.php  (Privacy Policy, Terms & Conditions…)
   Gradient hero under the transparent site header (same as Contact), then a sticky "On this page" sidebar built from the
   H2s in the editor content, and a readable text column. Without JS everything still works:
   the contents list is a plain <details>, links jump with scroll-margin, nothing is hidden.
   ========================================================================== */

.lgl {
	--lgl-ink: #134767;
	--lgl-teal: #23967f;
	--lgl-orange: #f58540;
	--lgl-text: #4f5357;
	--lgl-muted: #8a949d;
	--lgl-line: #e1e6eb;
	--lgl-soft: #f4f6f9;
	--lgl-offset: calc(var(--header-h, 96px) + 24px);

	font-family: 'Saira', sans-serif;
	color: var(--lgl-text);
	background: #fff;
	overflow-x: clip;
}

.lgl *,
.lgl *::before,
.lgl *::after { box-sizing: border-box; }

.lgl-hero__inner,
.lgl-body__inner {
	width: 100%;
	max-width: var(--header-max, 1344px);
	margin: 0 auto;
	padding: 0 var(--header-gutter, 24px);
}

.lgl-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--lgl-teal);
}

.lgl-eyebrow__line {
	display: inline-block;
	width: 32px;
	height: 1px;
	background: currentColor;
	opacity: .6;
}

/* ---------- Header (same gradient hero as the Contact page, runs under the transparent header) ---------- */

body.has-fixed-header.page-template-template-legal .site-main,
body.has-fixed-header .site-main:has(> .lgl) { padding-top: 0 !important; }

.lgl-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 493px;
	display: flex;
	align-items: center;
	padding: calc(var(--header-h, 96px) + 56px) 0 96px;
	color: #fff;
	background: linear-gradient(180deg, #134767 0%, #23967f 54%, #f58540 108%);
}

.lgl-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.lgl-hero__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
}

.lgl-hero__orb--1 {
	top: -200px;
	right: -10%;
	width: 720px;
	height: 520px;
	background: radial-gradient(closest-side, rgba(245, 133, 64, .32), rgba(245, 133, 64, 0) 100%);
}

.lgl-hero__orb--2 {
	top: 30%;
	left: 38%;
	width: 520px;
	height: 360px;
	background: radial-gradient(closest-side, rgba(127, 192, 166, .22), rgba(127, 192, 166, 0));
}

.lgl-hero__orb--3 {
	bottom: -220px;
	left: -8%;
	width: 640px;
	height: 420px;
	background: radial-gradient(closest-side, rgba(19, 71, 103, .35), rgba(19, 71, 103, 0));
}

.lgl-hero__spot {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .6s ease;
	background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 40%), rgba(255, 255, 255, .12), transparent 70%);
}

.lgl-hero:hover .lgl-hero__spot { opacity: 1; }

.lgl-hero__dots {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 75%);
	mask-image: linear-gradient(90deg, transparent 30%, #000 75%);
}

.lgl-hero__inner { position: relative; }

.lgl-hero__word { display: inline-block; }

.lgl-hero .lgl-eyebrow {
	margin-bottom: 24px;
	color: rgba(255, 255, 255, .72);
}

.lgl-hero__title {
	max-width: 960px;
	margin: 0 0 22px;
	font-size: clamp(40px, 5.6vw, 64px);
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -.005em;
	color: #fff;
}

.lgl-hero__highlight {
	display: inline-block;
	color: transparent;
	background-image:
		linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .75) 50%, transparent 62%),
		linear-gradient(125deg, #f58540 4%, #7fc0a6 61%, #baddcf 78%, #dbede6 87%, #fff 96%);
	background-size: 260% 100%, 100% 100%;
	background-position: 160% 0, 0 0;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
}

/* ---------- Hero motion (same as the Contact hero; only under html.lgl-motion) ---------- */

.lgl-motion .lgl [data-lgl-reveal] {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	filter: blur(6px);
	transition: opacity 1s cubic-bezier(.2, .75, .2, 1) var(--d, 0s), transform 1s cubic-bezier(.2, .75, .2, 1) var(--d, 0s), filter 1s cubic-bezier(.2, .75, .2, 1) var(--d, 0s);
}

.lgl-motion .lgl [data-lgl-reveal].is-in { opacity: 1; transform: none; filter: none; }

.lgl-motion .lgl-hero .lgl-eyebrow .lgl-eyebrow__line { transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.2, .75, .2, 1) .1s; }
.lgl-motion .lgl-hero .lgl-eyebrow.is-in .lgl-eyebrow__line { transform: scaleX(1); }

/* title: letters rise and un-blur, highlight wipes in then shimmers */
.lgl-motion .lgl-hero__title .lgl-ch {
	display: inline-block;
	opacity: 0;
	transform: translate3d(0, .5em, 0) rotate(6deg);
	filter: blur(8px);
	transition: opacity .8s cubic-bezier(.2, .75, .2, 1), transform .9s cubic-bezier(.2, .75, .2, 1), filter .8s cubic-bezier(.2, .75, .2, 1);
	transition-delay: calc(.12s + var(--ci) * .045s);
}

.lgl-motion .lgl-hero__title.is-in .lgl-ch { opacity: 1; transform: none; filter: none; }

.lgl-motion .lgl-hero__highlight {
	clip-path: inset(-10% 100% -20% 0);
	transform: translate3d(-12px, 0, 0);
	transition: clip-path 1.1s cubic-bezier(.2, .75, .2, 1) var(--hd, .45s), transform 1.1s cubic-bezier(.2, .75, .2, 1) var(--hd, .45s);
}

.lgl-motion .lgl-hero__title.is-in .lgl-hero__highlight {
	clip-path: inset(-10% -2% -20% 0);
	transform: none;
	animation: lgl-shimmer 5.5s ease-in-out 1.6s infinite;
}

.lgl-motion .lgl-hero__inner { transform: translate3d(0, var(--sy, 0px), 0); opacity: var(--so, 1); }

@media (prefers-reduced-motion: no-preference) {
	.lgl-hero__orb--1 { animation: lgl-drift-1 16s ease-in-out infinite alternate; }
	.lgl-hero__orb--2 { animation: lgl-drift-2 20s ease-in-out infinite alternate; }
	.lgl-hero__orb--3 { animation: lgl-drift-3 18s ease-in-out infinite alternate; }
}

@media (prefers-reduced-motion: reduce) {
	.lgl *,
	.lgl *::before,
	.lgl *::after { animation: none !important; transition-duration: .01ms !important; }
}

@keyframes lgl-drift-1 { to { transform: translate3d(-140px, 80px, 0) scale(1.15); } }
@keyframes lgl-drift-2 { to { transform: translate3d(180px, -60px, 0) scale(.85); } }
@keyframes lgl-drift-3 { to { transform: translate3d(120px, -40px, 0) scale(1.2); } }
@keyframes lgl-shimmer { 0%, 55% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }

.lgl-hero__lead {
	max-width: 540px;
	margin: 0;
	font-size: 18px;
	line-height: 1.62;
	font-weight: 300;
	color: rgba(255, 255, 255, .86);
}

.lgl-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.lgl-hero__meta li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 13px;
	line-height: 1.2;
	font-weight: 500;
	color: #fff;
}

.lgl-hero__meta span {
	font-weight: 400;
	color: rgba(255, 255, 255, .7);
}

/* ---------- Body: sidebar + content ---------- */

.lgl-body { padding: 64px 0 112px; }

.lgl-body__inner {
	display: grid;
	grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
	gap: 72px;
	align-items: start;
}

.lgl-body__inner--single { grid-template-columns: minmax(0, 1fr); }

.lgl-aside { align-self: stretch; } /* full column height, so the inner box can stay sticky */

.lgl-aside__sticky {
	position: sticky;
	top: var(--lgl-offset);
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-height: calc(100vh - var(--lgl-offset) - 24px);
	overflow-y: auto;
	scrollbar-width: thin;
}

/* Contents list */

.lgl-toc__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 14px;
	list-style: none;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--lgl-ink);
	cursor: default;
}

.lgl-toc__title::-webkit-details-marker { display: none; }

.lgl-toc__chev { display: none; transition: transform .25s ease; }

.lgl-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 1px solid var(--lgl-line);
}

.lgl-toc__link {
	position: relative;
	display: flex;
	gap: 10px;
	padding: 7px 0 7px 18px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--lgl-text);
	text-decoration: none;
	transition: color .2s ease;
}

.lgl-toc__link::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1px;
	width: 2px;
	background: var(--lgl-teal);
	transform: scaleY(0);
	transition: transform .25s ease;
}

.lgl-toc__num {
	flex: 0 0 auto;
	min-width: 20px;
	font-weight: 500;
	color: var(--lgl-muted);
	font-variant-numeric: tabular-nums;
}

.lgl-toc__link:hover,
.lgl-toc__link:focus-visible { color: var(--lgl-ink); }

.lgl-toc__link.is-active {
	color: var(--lgl-ink);
	font-weight: 500;
}

.lgl-toc__link.is-active .lgl-toc__num { color: var(--lgl-teal); }
.lgl-toc__link.is-active::before { transform: scaleY(1); }

/* Cards */

.lgl-card {
	padding: 20px 22px;
	border: 1px solid var(--lgl-line);
	border-radius: 14px;
	background: var(--lgl-soft);
}

.lgl-card__title {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 500;
	color: var(--lgl-ink);
}

.lgl-related__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lgl-related__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	font-size: 14px;
	color: var(--lgl-text);
	text-decoration: none;
	transition: color .2s ease;
}

.lgl-related__list a svg { transition: transform .2s ease; }
.lgl-related__list a:hover { color: var(--lgl-teal); }
.lgl-related__list a:hover svg { transform: translateX(3px); }

.lgl-help__text {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.55;
}

.lgl-help__mail {
	font-size: 14px;
	font-weight: 500;
	color: var(--lgl-teal);
	text-decoration: none;
	word-break: break-all;
}

.lgl-help__mail:hover { text-decoration: underline; }

/* ---------- Content typography (whatever the editor produces) ---------- */

.lgl-content {
	max-width: 800px;
	font-size: 16px;
	line-height: 1.75;
	font-weight: 400;
}

.lgl-content > :first-child { margin-top: 0; }
.lgl-content > :last-child { margin-bottom: 0; }

.lgl-content h2 {
	margin: 56px 0 16px;
	padding-top: 32px;
	border-top: 1px solid var(--lgl-line);
	font-size: clamp(22px, 2.2vw, 28px);
	line-height: 1.25;
	font-weight: 500;
	color: var(--lgl-ink);
	scroll-margin-top: var(--lgl-offset);
}

.lgl-content > h2:first-child {
	padding-top: 0;
	border-top: 0;
}

.lgl-content h3 {
	margin: 32px 0 10px;
	font-size: 18px;
	line-height: 1.35;
	font-weight: 500;
	color: var(--lgl-ink);
	scroll-margin-top: var(--lgl-offset);
}

.lgl-content h4 {
	margin: 24px 0 8px;
	font-size: 16px;
	font-weight: 600;
	color: var(--lgl-ink);
}

.lgl-content p { margin: 0 0 16px; }

.lgl-content strong { font-weight: 600; color: #2d3135; }

.lgl-content a {
	color: var(--lgl-teal);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.lgl-content a:hover { color: var(--lgl-ink); }

.lgl-content ul,
.lgl-content ol {
	margin: 0 0 20px;
	padding-left: 0;
	list-style: none;
}

.lgl-content li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 22px;
	line-height: 1.65;
	list-style: none;
}

.lgl-content li::marker { content: none; }

.lgl-content ul > li::before {
	content: "";
	position: absolute;
	top: .72em;
	left: 4px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lgl-teal);
}

/* an item that only wraps a nested list (no text of its own) gets no marker or indent */
.lgl-content li:has(> ul:only-child, > ol:only-child) { padding-left: 0; margin: 0; }
.lgl-content li:has(> ul:only-child, > ol:only-child)::before { content: none; }
.lgl-content li > ul:only-child,
.lgl-content li > ol:only-child { margin: 0; }

.lgl-content ol { counter-reset: lgl-ol; }
.lgl-content ol > li { counter-increment: lgl-ol; padding-left: 28px; }

.lgl-content ol > li::before {
	content: counter(lgl-ol) ".";
	position: absolute;
	left: 0;
	font-weight: 600;
	color: var(--lgl-teal);
	font-variant-numeric: tabular-nums;
}

.lgl-content li > ul,
.lgl-content li > ol { margin: 8px 0 4px; }

.lgl-content blockquote {
	margin: 24px 0;
	padding: 16px 20px;
	border-left: 3px solid var(--lgl-orange);
	border-radius: 0 10px 10px 0;
	background: var(--lgl-soft);
}

.lgl-content table {
	width: 100%;
	margin: 24px 0;
	border-collapse: collapse;
	font-size: 14px;
}

.lgl-content th,
.lgl-content td {
	padding: 10px 12px;
	border: 1px solid var(--lgl-line);
	text-align: left;
	vertical-align: top;
}

.lgl-content th { background: var(--lgl-soft); color: var(--lgl-ink); font-weight: 600; }

.lgl-content .wp-block-table { overflow-x: auto; }

/* Back to top */

.lgl-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 50;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--lgl-ink);
	color: #fff;
	box-shadow: 0 8px 24px rgba(19, 71, 103, .25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
}

.lgl-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.lgl-top:hover { background: var(--lgl-teal); color: #fff; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.lgl-body__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	/* unwrap the sidebar so contents sits above the text and the cards below it */
	.lgl-aside,
	.lgl-aside__sticky { display: contents; }

	.lgl-toc { order: 0; }
	.lgl-content { order: 1; max-width: none; }
	.lgl-card { order: 2; }

	/* contents becomes a collapsible panel */
	.lgl-toc {
		padding: 16px 20px;
		border: 1px solid var(--lgl-line);
		border-radius: 14px;
	}

	.lgl-toc__title { margin: 0; cursor: pointer; }
	.lgl-toc[open] .lgl-toc__title { margin-bottom: 14px; }
	.lgl-toc__chev { display: block; }
	.lgl-toc[open] .lgl-toc__chev { transform: rotate(180deg); }
}

@media (max-width: 640px) {
	.lgl-hero { min-height: 0; padding: calc(var(--header-h, 96px) + 48px) 0 64px; }
	.lgl-hero__lead { font-size: 16px; }
	.lgl-hero__meta li { font-size: 12px; padding: 7px 12px; }
	.lgl-body { padding: 40px 0 80px; }
	.lgl-content { font-size: 15px; }
	.lgl-content h2 { margin-top: 44px; padding-top: 28px; }
	.lgl-top { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.lgl) { scroll-behavior: smooth; }
}


/* ==========================================================================
   1280 CONTENT WIDTH (child-custom) — desktop only (>=1200px).
   Scales the desktop px sizes by 1280/1344 (~0.952): fonts above 16px, px line-heights,
   widths/heights, padding, margins and gaps. Text 16px and smaller is unchanged for
   readability. Mobile and tablet rules are untouched. Delete this block to revert.
   ========================================================================== */
@media (min-width: 1200px) {
	.hero { padding: calc(var(--header-h, 96px) + 38px) var(--header-gutter, 24px) 69px; }
	.hero__inner { gap: 46px; }
	.hero__badge { gap: 13px; margin: 0 0 30px; padding: 7px 17px 7px 15px; }
	.hero__dots { gap: 6px; }
	.hero__dots i { width: 6px; height: 6px; }
	.hero__title { margin: 0 0 27px; font-size: clamp(2.381rem, 4.8vw, 3.3rem); }
	.hero__lead { max-width: 33.333rem; margin: 0 0 38px; font-size: clamp(1rem, 1.25vw, 1.071rem); }
	.hero__actions { gap: 11px; }
	.hero-btn { gap: 13px; min-height: 47px; padding: 0 23px; }
	.hero { padding-top: calc(var(--header-h, 96px) + 30px); padding-bottom: var(--hero-bottom); }
	.hero__badge { margin-bottom: 27px; }
	.hero__title { margin-bottom: 23px; }
	.hero__lead { margin-bottom: 34px; }
	.logo-strip { padding: 72px var(--header-gutter, 24px) 76px; }
	.logo-strip__inner { margin: 0 auto 42px; }
	.logo-strip__label { gap: 15px; }
	.logo-strip__label::before { flex: 0 0 30px; }
	.logo-strip__item.splide__slide { padding: 0 40px; }
	.logo-strip__name { font-size: 17px; }
	.logo-strip__item img { height: 48px; }
	.pb { padding: 69px var(--header-gutter, 24px) 53px; }
	.pb__eyebrow { gap: 15px; margin: 0 0 19px; }
	.pb__eyebrow-line { flex: 0 0 30px; }
	.pb__title { margin: 0 0 15px; font-size: clamp(1.905rem, 3.06vw, 2.619rem); }
	.pb-stage { width: min(100%, 939px); }
	.pb-card__icon img { height: 100%; }
	.pb-core__logo img { height: 100%; }
	.model { padding: 74px var(--header-gutter, 24px) 67px; }
	.model__header { margin-bottom: 43px; }
	.model__eyebrow { gap: 15px; margin: 0 0 13px; }
	.model__eyebrow-line { flex: 0 0 30px; }
	.model__title { font-size: clamp(1.905rem, 3.1vw, 2.619rem); }
	.model__grid { gap: 15px; }
	.model__note { margin: 17px 0 0; }
	.model-card { min-height: 390px; padding: 26px 25px 25px; }
	.model-card__label { margin: 0 0 14px; }
	.model-card__title { margin: 0 0 11px; font-size: 23px; }
	.model-card__text { margin: 0 0 19px; }
	.model-card__item { margin: 0 0 9px; padding-left: 15px; }
	.model-card__item::before { top: 7px; }
	.model-card__tags { gap: 8px; padding: 17px 0 0; }
	.model-card__tag { padding: 0 12px; line-height: 28px; }
	.model-card__arrow { top: 21px; right: 21px; width: 32px; height: 32px; }
	.services { padding: 74px var(--header-gutter, 24px) 95px; }
	.services__inner { row-gap: 31px; }
	.services__eyebrow { gap: 15px; margin: 0 0 13px; }
	.services__eyebrow-line { flex: 0 0 30px; }
	.services__title { font-size: clamp(1.905rem, 3.1vw, 2.619rem); }
	.services__intro { margin: 0 0 30px; }
	.svc-tabs { gap: 15px; }
	.svc-tab { height: 59px; padding: 0 19px; font-size: 16px; }
	.svc-tab__num { flex: 0 0 25px; }
	.svc-card { min-height: 459px; }
	.svc-head { gap: 15px; height: 48px; padding: 0 19px; }
	.svc-body { padding: 24px 19px 19px; }
	.svc-metric-row { gap: 4px 11px; }
	.svc-metric { font-size: 38px; }
	.svc-checks { margin: 21px 0 0; }
	.svc-check-row { gap: 10px; min-height: 30px; }
	.svc-check { flex: 0 0 17px; width: 17px; height: 17px; }
	.svc-check--pending i { width: 4px; height: 4px; }
	.svc-foot { gap: 11px 15px; padding-top: 23px; }
	.svc-tags { gap: 8px; }
	.svc-tag { padding: 8px 13px; }
	.svc-more { gap: 6px; }
	.why__grid { inset: -69px 0 0 -69px; }
	.why__glow { width: 990px; height: 990px; }
	.why__inner { padding: 114px var(--header-gutter, 24px) 116px; }
	.why__eyebrow { margin: 0 0 32px; }
	.why__title { font-size: clamp(36px, 5vw, 69px); }
	.why__grid-list { grid-template-columns: repeat(4, minmax(0, 221px)); gap: 38px 23px; margin: 40px 0 0; }
	.why__item { padding-top: 18px; }
	.proof { padding: 74px var(--header-gutter, 24px) 78px; }
	.proof__eyebrow { gap: 15px; margin: 0 0 13px; }
	.proof__eyebrow-line { flex: 0 0 30px; }
	.proof__title { font-size: clamp(1.905rem, 3.1vw, 2.619rem); }
	.proof__grid { max-width: 1250px; margin: 61px 0 0; }
	.proof__stat { padding-right: 15px; }
	.proof__num { font-size: clamp(2.857rem, 5.6vw, 4.762rem); }
	.proof__scan { right: 15px; bottom: 2px; }
	.eco { padding: 72px var(--header-gutter, 24px) 76px; }
	.eco__eyebrow { gap: 15px; margin: 0 0 8px; }
	.eco__eyebrow-line { flex: 0 0 30px; width: 30px; }
	.eco__title { font-size: clamp(1.905rem, 3.2vw, 2.619rem); }
	.eco__intro { max-width: 33rem; line-height: 25px; }
	.eco-tabs-wrap { margin-top: 44px; }
	.eco-tab { height: 46px; padding: 0 19px; }
	.eco-stage { margin-top: 30px; }
	.eco-grid { gap: 10px; }
	.eco-tile { height: 80px; }
	.eco-logo { width: min(114px, 72%); height: 68px; }
	.eco-logo img { height: 100%; }
	.eco-wordmark { font-size: 18px; }
	.industries { padding: 74px var(--header-gutter, 24px) 76px; }
	.industries__eyebrow { gap: 15px; margin: 0 0 12px; }
	.industries__eyebrow-line { flex: 0 0 30px; }
	.industries__title { font-size: clamp(1.905rem, 2.92vw, 2.5rem); }
	.ind-tabs { gap: 8px; margin: 31px 0 0; }
	.ind-tab { gap: 8px; height: 44px; padding: 0 17px 0 18px; }
	.ind-tab__icon, .ind-tab__img { width: 16px; height: 16px; }
	.ind-card { margin-top: 30px; }
	.ind-panel { column-gap: 38px; padding: 38px 57px 53px 38px; }
	.ind-label { margin: 0 0 10px; }
	.ind-pressure { font-size: 25px; line-height: 29px; }
	.ind-runs { line-height: 25px; }
	.ind-label--fact { margin: 19px 0 10px; }
	.ind-fact { line-height: 25px; }
	.ind-media { max-width: 351px; margin: 6px 0 0; }
	.ind-media__img { max-height: 248px; }
	.ind-media__svg { max-height: 248px; }
	.hiw { padding: 80px var(--header-gutter, 24px) 91px; }
	.hiw__eyebrow { gap: 15px; margin: 0 0 17px; }
	.hiw__eyebrow-line { flex: 0 0 30px; }
	.hiw__title { font-size: clamp(1.905rem, 3.1vw, 2.619rem); }
	.hiw__grid { margin: 61px 0 0; }
	.hiw__step { padding: 38px 32px 36px; }
	.hiw__head { gap: 10px; height: 15px; margin-bottom: 34px; }
	.hiw__dot { flex: 0 0 9px; width: 9px; height: 9px; }
	.hiw__name { margin: 0 0 13px; font-size: 19px; }
	.hiw__text { margin: 0 0 27px; }
	.tsm { padding: 84px var(--header-gutter, 24px) 80px; }
	.tsm__inner { max-width: 937px; }
	.tsm__eyebrow { gap: 15px; margin: 0 0 29px; }
	.tsm__eyebrow-line { flex: 0 0 30px; }
	.tsm__splide .splide__track { padding-block: 29px 86px; margin-block: -29px -86px; }
	.tsm__card { padding: 53px 53px 48px; }
	.tsm__mark { height: 36px; margin: 0 0 23px; font-size: 55px; }
	.tsm__quote { font-size: clamp(1.238rem, 2.8vw, 2.381rem); }
	.tsm__who { gap: 13px; margin: 32px 0 0; }
	.tsm__avatar { flex: 0 0 38px; width: 38px; height: 38px; }
	.tsm__avatar img { height: 100%; }
	.tsm__note { max-width: 324px; }
	.tsm__controls { gap: 27px; margin-top: 34px; }
	.tsm__count { gap: 8px; }
	.tsm__arrows { gap: 11px; }
	.tsm__btn { width: 46px; height: 46px; }
	.tsm__inner { max-width: var(--tsm-w); }
	.tsm__card { padding: 34px 34px 30px; }
	.tsm__mark { height: 27px; margin: 0 0 15px; font-size: 42px; }
	.tsm__quote { font-size: clamp(1.048rem, 1.9vw, 1.429rem); }
	.tsm__who { gap: 11px; margin: 23px 0 0; }
	.tsm__avatar { flex-basis: 34px; width: 34px; height: 34px; }
	.tsm__controls { gap: 19px; margin-top: 27px; }
	.tsm__btn { width: 42px; height: 42px; }
	.greach { padding: 72px var(--header-gutter, 24px) 76px; }
	.greach__inner { max-width: 937px; }
	.greach__eyebrow { gap: 15px; margin: 0 0 14px; }
	.greach__eyebrow-line { flex: 0 0 30px; }
	.greach__title { font-size: clamp(1.667rem, 2.34vw, 2rem); }
	.gr-map { margin-top: 28px; }
	.gr-pin::before { left: -17px; top: -17px; width: 34px; height: 34px; }
	.gr-pin__halo { width: 17px; height: 17px; }
	.gr-pin__dot { width: 8px; height: 8px; }
	.gr-pin__ring { width: 17px; height: 17px; }
	.gr-packet { width: 7px; height: 7px; }
	.gr-cards { gap: 11px; margin-top: 19px; }
	.gr-card { padding: 19px 23px 17px; }
	.gr-card__title { gap: 9px; }
	.gr-card__dot { width: 6px; height: 6px; }
	.gr-card__text { margin: 9px 0 0; }
	.ins { padding: 91px var(--header-gutter, 24px) 72px; }
	.ins__glow { width: min(52vw, 724px); }
	.ins__head { gap: 30px; margin-bottom: 38px; }
	.ins__eyebrow { gap: 15px; margin: 0 0 19px; }
	.ins__eyebrow-line { flex: 0 0 30px; }
	.ins__title { font-size: clamp(1.81rem, 2.78vw, 2.381rem); }
	.ins__arrows { gap: 11px; padding-bottom: 6px; }
	.ins__btn { width: 46px; height: 46px; }
	.ins__splide .splide__track { padding-block: 13px 32px; margin-block: -13px -32px; }
	.ins__splide:not(.splide) .splide__list { grid-template-columns: repeat(auto-fit, minmax(267px, 1fr)); gap: 15px; }
	.ins-card { min-height: 259px; padding: 38px 30px 32px; }
	.ins-card__tag { margin: 0 0 30px; }
	.ins-card__title { margin: 0 0 11px; font-size: 19px; }
	.ins-card__link { gap: 8px; padding-top: 23px; }
	.ins__foot { gap: 23px; margin-top: 42px; }
	.ins__count { gap: 8px; }
	.ctc-title { margin: 0 0 13px; font-size: clamp(30px, 3.6vw, 42px); }
	.ctc-eyebrow { gap: 11px; }
	.ctc-eyebrow__line { width: 30px; }
	.ctc-hero { min-height: 470px; padding: calc(var(--header-h, 96px) + 53px) 0 91px; }
	.ctc-hero__orb--1 { top: -190px; right: -10%; width: 686px; height: 495px; }
	.ctc-hero__orb--2 { width: 495px; height: 343px; }
	.ctc-hero__orb--3 { bottom: -210px; left: -8%; width: 610px; height: 400px; }
	.ctc-hero__eyebrow { margin-bottom: 23px; }
	.ctc-hero__title { margin: 0 0 21px; font-size: clamp(38px, 5.6vw, 61px); }
	.ctc-hero__lead { max-width: 514px; font-size: 17px; }
	.ctc-main { padding: 70px 0 70px; }
	.ctc-main__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 438px); gap: 76px; }
	.ctc-form__intro { max-width: 505px; margin-bottom: 38px; }
	.ctc-form__body { max-width: 705px; }
	.ctc-form__missing { padding: 19px 23px; }
	.ctc-grid { gap: 27px 19px; }
	.ctc-field > label { margin-bottom: 9px; }
	.ctc-field input[type="text"], .ctc-field input[type="email"], .ctc-field input[type="tel"], .ctc-field input[type="url"], .ctc-field input[type="number"], .ctc-field select, .ctc-field textarea { height: 46px; padding: 0 15px; }
	.ctc-field select { height: 50px; padding: 0 42px 0 19px; }
	.ctc-field textarea { height: 131px; min-height: 105px; padding: 13px 15px; }
	.ctc .wpcf7-not-valid-tip { margin-top: 6px; }
	.ctc-actions { gap: 13px; margin-top: 30px; }
	.ctc .ctc-submit { height: 50px; padding: 0 30px; }
	.ctc .wpcf7-spinner { width: 21px; height: 21px; }
	.ctc-form__note { margin-top: 21px; }
	.ctc .wpcf7 form .wpcf7-response-output { margin: 23px 0 0; padding: 13px 17px 13px 46px; }
	.ctc .wpcf7 form .wpcf7-response-output::before { left: 15px; top: 50%; width: 19px; height: 19px; margin-top: -10px; }
	.ctc-info { gap: 19px; }
	.ctc-card { gap: 15px; padding: 23px; }
	.ctc-card__icon { flex: 0 0 42px; width: 42px; height: 42px; }
	.ctc-card__label { margin-bottom: 6px !important; }
	.ctc-card__value { font-size: 17px; }
	.ctc-card__sub { margin-top: 6px !important; }
	.ctc-hours { padding-bottom: 21px; }
	.ctc-hours__head { gap: 11px; margin-bottom: 13px; }
	.ctc-hours__row { gap: 15px; padding: 12px 0; }
	.ctc-hours__note { margin-top: 23px !important; }
	.ctc-visit { padding: 95px 0; }
	.ctc-visit__inner { gap: 46px; }
	.ctc-visit__copy .ctc-title { margin-bottom: 25px; }
	.ctc-visit__text { margin-bottom: 40px !important; }
	.ctc-office { padding: 34px 30px 32px; }
	.ctc-office__label { margin-bottom: 25px !important; }
	.ctc-office__name { margin-bottom: 10px !important; font-size: 21px; }
	.ctc-map { height: 350px; }
	.ctc-content { padding: 61px var(--header-gutter, 24px); }
	.ctc-field--consent label { gap: 11px; margin: 0; }
	.ctc-field--consent input[type="checkbox"] { flex: 0 0 19px; width: 19px; height: 19px; }
	.ctc-field--consent input[type="checkbox"]::after { left: 6px; top: 2px; width: 6px; height: 10px; }
	.ctc .frm-fluent-form .ff-t-container { gap: 19px; }
	.ctc .fluentform .ff-el-group { margin-bottom: 27px; }
	.ctc .fluentform .ff-el-input--label { margin-bottom: 9px; }
	.ctc .fluentform .ff-el-input--label label { margin: 0; }
	.ctc .fluentform .ff-el-form-control { height: 46px; padding: 0 15px; }
	.ctc .fluentform select.ff-el-form-control { height: 50px; padding: 0 42px 0 19px; }
	.ctc .fluentform textarea.ff-el-form-control { height: 131px; min-height: 105px; padding: 13px 15px; }
	.ctc .fluentform .ff-el-is-error .error, .ctc .fluentform .text-danger { margin-top: 6px; }
	.ctc .fluentform .ff-el-tc label.ff_tc_label { gap: 11px; }
	.ctc .fluentform .ff_tc_checkbox { flex: 0 0 19px; }
	.ctc .fluentform input[type="checkbox"].ff-el-form-check-input { width: 19px; height: 19px; }
	.ctc .fluentform input[type="checkbox"].ff-el-form-check-input::after { left: 6px; top: 2px; width: 6px; height: 10px; }
	.ctc .fluentform .ff_submit_btn_wrapper { margin: 30px 0 0; }
	.ctc .fluentform .ff-btn-submit, .ctc .fluentform .ff-btn-submit:not(.ff_btn_no_style) { height: 50px; padding: 0 30px; }
	.ctc .ctc-form__body--fluent .ctc-form__note { margin-top: 21px; }
	.ctc .fluentform .ff-message-success, .ctc .ff-message-success {margin-top: 20px;padding: 17px 19px 17px 51px; }
	.ctc .ff-message-success::before { left: 17px; top: 18px; width: 21px; height: 21px; }
	.ctc .ff-errors-in-stack .error { margin-top: 15px; padding: 11px 15px; }
	.lgl-eyebrow { gap: 11px; margin: 0 0 19px; }
	.lgl-eyebrow__line { width: 30px; }
	.lgl-hero { padding: calc(var(--header-h, 96px) + 61px) 0 53px; }
	.lgl-hero__orb--1 { top: -171px; right: -6%; width: 590px; height: 400px; }
	.lgl-hero__orb--2 { bottom: -210px; right: 22%; width: 533px; height: 362px; }
	.lgl-hero__title { max-width: 819px; font-size: clamp(34px, 4.6vw, 53px); }
	.lgl-hero__lead { max-width: 648px; margin: 19px 0 0; font-size: 17px; }
	.lgl-hero__meta { gap: 10px; margin: 30px 0 0; }
	.lgl-hero__meta li { gap: 8px; padding: 8px 13px; }
	.lgl-body { padding: 61px 0 107px; }
	.lgl-body__inner { grid-template-columns: minmax(229px, 286px) minmax(0, 1fr); gap: 69px; }
	.lgl-aside__sticky { gap: 19px; max-height: calc(100vh - var(--lgl-offset) - 23px); }
	.lgl-toc__title { margin: 0 0 13px; }
	.lgl-toc__link { gap: 10px; padding: 7px 0 7px 17px; }
	.lgl-toc__num { min-width: 19px; }
	.lgl-card { padding: 19px 21px; }
	.lgl-card__title { margin: 0 0 10px; }
	.lgl-related__list a { gap: 11px; padding: 6px 0; }
	.lgl-help__text { margin: 0 0 11px; }
	.lgl-content { max-width: 762px; }
	.lgl-content h2 { margin: 53px 0 15px; padding-top: 30px; font-size: clamp(21px, 2.2vw, 27px); }
	.lgl-content h3 { margin: 30px 0 10px; font-size: 17px; }
	.lgl-content h4 { margin: 23px 0 8px; }
	.lgl-content p { margin: 0 0 15px; }
	.lgl-content ul, .lgl-content ol { margin: 0 0 19px; }
	.lgl-content li { margin: 0 0 10px; padding-left: 25px; }
	.lgl-content ul > li::before { left: 6px; width: 6px; height: 6px; }
	.lgl-content ol > li { padding-left: 30px; }
	.lgl-content ol > li::before { left: 0; }
	.lgl-content li > ul, .lgl-content li > ol { margin: 10px 0 4px; }
	.lgl-content blockquote { margin: 23px 0; padding: 15px 19px; }
	.lgl-content table { margin: 23px 0; }
	.lgl-content th, .lgl-content td { padding: 10px 11px; }
	.lgl-top { right: 23px; bottom: 23px; width: 42px; height: 42px; }
}