/*
 * Changes on top of site.css. site.css stays a straight port of the static site; adjustments
 * needed because the page runs inside WordPress, and design changes made after the port, go here.
 */

/* Logged-in admin bar: keep the fixed navigation and the mobile menu below it, at the top of the
   page and in the sticky pill. WordPress sets the bar height (32px, or 46px on small screens). */
body.admin-bar .nav,
body.admin-bar .menu {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Below 600px the admin bar scrolls away with the page, so the sticky pill can use the very top. */
@media screen and (max-width: 600px) {
	body.admin-bar .nav.is-stuck {
		top: 0;
	}
}

/* --------------------------------------------------------------------------
   Team bio: a centred pop-up with the photo on the left and the bio on the
   right (replaces the static site's right-hand drawer). The markup and the
   open/close script are unchanged.
   -------------------------------------------------------------------------- */
.bio {
	--bio-gap: clamp(1rem, 3vw, 2.5rem);
	--bio-top: 0px;
}
body.admin-bar .bio {
	--bio-top: var(--wp-admin--admin-bar--height, 32px);
}

.bio__panel {
	top: calc(50% + var(--bio-top) / 2);
	left: 50%;
	right: auto;
	bottom: auto;
	width: min(1080px, calc(100vw - 2 * var(--bio-gap)));
	height: min(680px, calc(100vh - var(--bio-top) - 2 * var(--bio-gap)));
	height: min(680px, calc(100dvh - var(--bio-top) - 2 * var(--bio-gap)));
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-content: stretch;
	overflow: hidden;
	border-radius: 3px;
	box-shadow: 0 40px 120px -30px rgba(10, 14, 31, .6);
	opacity: 0;
	transform: translate(-50%, -46%) scale(.97);
	transition: transform .6s var(--ease-out), opacity .45s var(--ease);
}
.bio.is-open .bio__panel {
	opacity: 1;
	transform: translate(-50%, -50%);
}

/* Close button floats over the bio column instead of sticking to the top of a scroller. */
.bio__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	margin: 0;
}

/* Photo fills the left column, full height. */
.bio__media {
	aspect-ratio: auto;
	margin: 0;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}
.bio__media img {
	height: 100%;
	object-position: center 20%;
}

/* Bio scrolls inside the right column when it is longer than the pop-up. */
.bio__body {
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	align-content: start;
	padding: clamp(2.5rem, 4.5vw, 3.75rem) clamp(1.75rem, 4vw, 3.25rem) clamp(1.75rem, 4vw, 3rem);
}

/* Phones and narrow tablets: photo on top, bio below. */
@media (max-width: 760px) {
	.bio__panel {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 38%) minmax(0, 1fr);
		height: calc(100vh - var(--bio-top) - 2 * var(--bio-gap));
		height: calc(100dvh - var(--bio-top) - 2 * var(--bio-gap));
	}
	.bio__body {
		padding-top: clamp(1.5rem, 5vw, 2rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bio__panel {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   "Why choose us" on the home page: 2 x 2 instead of four narrow columns.
   Icon in a ring on the left, a large quiet number, text beside the icon.
   -------------------------------------------------------------------------- */
.pillars-duo {
	gap: clamp(1rem, 2vw, 1.5rem);
}
.pillars-duo .pillar {
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: "ico title" "ico text";
	column-gap: clamp(1.1rem, 2.2vw, 1.75rem);
	row-gap: .55rem;
	padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem);
}
.pillars-duo .pillar__ico {
	grid-area: ico;
	width: 64px; height: 64px;
	border-radius: 50%;
	border: 1px solid var(--line);
	display: grid; place-items: center;
	color: var(--accent);
	background: var(--paper);
	transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .6s var(--ease-out);
}
.pillars-duo .pillar__ico svg { width: 28px; height: 28px; }
.pillars-duo .pillar h3 { grid-area: title; align-self: end; padding-inline-end: clamp(2.5rem, 4.5vw, 4rem); }
.pillars-duo .pillar p { grid-area: text; }
.pillars-duo .pillar__n {
	position: absolute;
	top: clamp(1rem, 2vw, 1.5rem);
	right: clamp(1.25rem, 2.5vw, 2rem);
	font-family: var(--font-display);
	font-size: clamp(2.6rem, 4vw, 3.6rem);
	line-height: 1;
	color: var(--line);
	transition: color .5s var(--ease), transform .6s var(--ease-out);
}
.pillars-duo .pillar:hover .pillar__ico,
.pillars-duo .pillar:focus-within .pillar__ico {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	transform: rotate(-6deg) scale(1.04);
}
.pillars-duo .pillar:hover .pillar__n,
.pillars-duo .pillar:focus-within .pillar__n {
	color: var(--accent-pale);
	transform: translateY(-3px);
}
@media (max-width: 640px) {
	.pillars-duo .pillar {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "ico" "title" "text";
	}
}

/* --------------------------------------------------------------------------
   Header with seven menu items: between the burger breakpoint and wide
   screens the phone shows as an icon and the links sit a little tighter.
   -------------------------------------------------------------------------- */
@media (min-width: 1081px) and (max-width: 1320px) {
	.nav__phone span { display: none; }
	.nav__links { gap: clamp(.85rem, 1.5vw, 1.5rem); }
	.nav__link { letter-spacing: .13em; }
}

/* --------------------------------------------------------------------------
   Practice carousel on phones: keep the arrows and dots under the swipe row
   so it is obvious (and possible with a mouse) to move between cards.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
	.carousel__ctrl {
		display: flex;
		position: static;
		transform: none;
		justify-content: center;
		margin-top: .25rem;
	}
	.carousel__track { cursor: grab; }
	.carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
	.carousel__track.is-dragging .ccard__link { pointer-events: none; }
	.cbtn { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   Statewide map on tablets and phones. The map keeps its own aspect ratio
   (the office pins are placed against it), so instead of stretching it the
   edges fade into the section's navy and nothing ends on a hard line.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1280px) {
	/* Text is taller than the map here: shift the map right, centre it, and feather it. */
	.nation__map {
		width: 74%;
		justify-self: end;
		align-self: center;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
		mask-composite: intersect;
	}
	.nation__scrim {
		background: linear-gradient(90deg, rgba(5, 8, 20, .94) 0%, rgba(5, 8, 20, .82) 38%, rgba(5, 8, 20, .2) 62%, rgba(5, 8, 20, 0) 80%);
	}
}
@media (max-width: 900px) {
	/* Stacked: the map rises out of the navy below the text instead of starting on an edge. */
	.nation__in { padding-bottom: .5rem; }
	.nation__map {
		/* A little wider than the screen so the state reads at phone size; the section clips it. */
		width: 124%;
		margin-inline: -12%;
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28%, #000 82%, transparent 100%);
		mask-image: linear-gradient(180deg, transparent 0, #000 28%, #000 82%, transparent 100%);
	}
}

/* --------------------------------------------------------------------------
   Home team row ("The people you will actually work with")
   -------------------------------------------------------------------------- */
/* More air between the heading and the portraits. */
.hscroll { gap: clamp(2.25rem, 6vh, 4.5rem); }
/* ...and between the portraits themselves. */
.hscroll__track { gap: clamp(1.5rem, 2.6vw, 2.75rem); }
/* Touch devices and narrow windows get a native swipe row. The track must be
   as wide as the screen (not its content), or there is nothing to scroll and
   the last team members are cut off. */
.hscroll-wrap.is-static .hscroll__track {
	justify-self: stretch;
	width: 100%;
	max-width: 100vw;
	overscroll-behavior-x: contain;
	scroll-padding-inline: var(--gutter);
}
.hscroll-wrap.is-static .hcard--end { scroll-snap-align: end; }

/* Deep links (/practice-areas/#title, /locations/#sumter) land below the fixed header. */
section[id], article[id] { scroll-margin-top: calc(var(--nav-h, 80px) + 1rem); }

/* --------------------------------------------------------------------------
   About page with a landscape first photo ("about-wide"): narrower text and a
   large photo that runs out to the screen edge, with the region shown as a
   credential card overlapping the photo's lower edge (over the planter, clear
   of the people and the sign's lettering).
   -------------------------------------------------------------------------- */
.about-wide .split-cols {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: clamp(2.5rem, 5vw, 5rem);
}
.about-wide .sticky-col { position: static; }
.about-wide .media-stack--landscape {
	position: relative;
	isolation: isolate;
	/* bleed: out through the gutter to the window edge */
	margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--maxw)) / 2)));
	padding-bottom: 2.4rem;
}
.about-wide__photo {
	border-radius: 4px 0 0 4px;
	box-shadow: 0 40px 80px -40px rgba(10, 14, 31, .45);
}
.about-wide__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-wide .stat-card {
	position: absolute;
	left: auto; top: auto;
	bottom: 0;
	right: calc(var(--gutter) + max(0px, (100vw - var(--maxw)) / 2) + 1.25rem);
	max-width: 19rem;
	padding: 1.2rem 1.5rem 1.25rem;
	border-top: 2px solid var(--accent);
	box-shadow: 0 30px 60px -28px rgba(10, 14, 31, .6);
	z-index: 2;
}
.about-wide .stat-card b { font-size: clamp(1.35rem, 1.8vw, 1.65rem); }
.about-wide .stat-card span { font-size: .62rem; line-height: 1.6; }
@media (max-width: 900px) {
	.about-wide .split-cols { grid-template-columns: minmax(0, 1fr); }
	.about-wide .media-stack--landscape { margin-top: 2rem; margin-right: calc(-1 * var(--gutter)); padding-bottom: 0; display: grid; }
	.about-wide .stat-card {
		position: relative; right: auto; bottom: auto;
		justify-self: end;
		margin: -1.75rem var(--gutter) 0 0;
	}
}

/* --------------------------------------------------------------------------
   About page "What we handle as your closing attorney": the services, which
   read in closing order, as a numbered journey. A line runs through the step
   rings and fills as the visitor scrolls; each ring lights when reached.
   -------------------------------------------------------------------------- */
.journey {
	--ring: 48px;
	position: relative;
	display: grid;
	gap: clamp(1.5rem, 2.6vw, 2.2rem);
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}
.journey::before,
.journey::after {
	content: "";
	position: absolute;
	left: calc(var(--ring) / 2 - .5px);
	top: calc(var(--ring) / 2);
	bottom: calc(var(--ring) / 2);
	width: 1px;
}
.journey::before { background: var(--line); }
.journey::after {
	width: 2px; left: calc(var(--ring) / 2 - 1px);
	background: linear-gradient(var(--accent), var(--accent-bright));
	transform-origin: top;
	transform: scaleY(var(--fill, 0));
	transition: transform .25s linear;
}
.journey__step {
	position: relative;
	display: grid;
	grid-template-columns: var(--ring) minmax(0, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: start;
}
.journey__n {
	position: relative; z-index: 1;
	width: var(--ring); height: var(--ring);
	border-radius: 50%;
	display: grid; place-items: center;
	background: var(--sand);
	border: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: 1.05rem;
	color: var(--accent-text);
	font-variant-numeric: lining-nums;
	transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), box-shadow .6s var(--ease), transform .5s var(--ease-out);
}
.journey__step.is-on .journey__n {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	box-shadow: 0 0 0 7px rgba(46, 151, 199, .13);
}
.journey__body { padding-top: .55rem; }
.journey__title {
	margin: 0 0 .35rem;
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 1.8vw, 1.6rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--ink);
	transition: color .4s var(--ease);
}
.journey__body p { margin: 0; color: var(--muted); font-size: .97rem; line-height: 1.65; }
.journey__step:hover .journey__n { transform: scale(1.07); }
.journey__step:hover .journey__title { color: var(--accent-text); }
@media (prefers-reduced-motion: reduce) {
	.journey::after { transform: none; transition: none; }
	.journey__n { transition: none; }
}

/* --------------------------------------------------------------------------
   Home closing-process section: a fine blueprint grid on the navy, fading
   out at the edges, and a light that follows the pointer. Under the light
   the grid lines brighten in the brand blue.
   -------------------------------------------------------------------------- */
.process-section {
	position: relative;
	isolation: isolate;
	overflow: clip;
	--gx: 50%; --gy: 40%;
}
.process-section::before,
.process-section::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	pointer-events: none;
	background-size: 56px 56px;
	background-position: center top;
}
/* the resting grid */
.process-section::before {
	background-image:
		linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
	-webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 35%, transparent 100%);
	mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 35%, transparent 100%);
}
/* the lit grid under the pointer, plus a soft glow */
.process-section::after {
	background-image:
		radial-gradient(circle 260px at var(--gx) var(--gy), rgba(46, 151, 199, .16), transparent 70%),
		linear-gradient(rgba(79, 178, 222, .55) 1px, transparent 1px),
		linear-gradient(90deg, rgba(79, 178, 222, .55) 1px, transparent 1px);
	background-size: 100% 100%, 56px 56px, 56px 56px;
	-webkit-mask-image: radial-gradient(circle 240px at var(--gx) var(--gy), #000 0, rgba(0, 0, 0, .35) 45%, transparent 100%);
	mask-image: radial-gradient(circle 240px at var(--gx) var(--gy), #000 0, rgba(0, 0, 0, .35) 45%, transparent 100%);
	opacity: 0;
	transition: opacity .5s var(--ease);
}
.process-section.is-lit::after { opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) {
	.process-section::after { display: none; }
}

/* --------------------------------------------------------------------------
   Home closings figure: a title, the number standing on a pedestal rule with
   the logo's diamond, and a large italic label, on a soft spotlight.
   -------------------------------------------------------------------------- */
.bigstat {
	position: relative;
	isolation: isolate;
	gap: 0;
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.bigstat::before {
	content: "";
	position: absolute; z-index: -1;
	inset: -6% 8% 10%;
	background: radial-gradient(ellipse 50% 55% at 50% 52%, rgba(255, 255, 255, .75), rgba(255, 255, 255, .25) 55%, transparent 75%);
	pointer-events: none;
}
.bigstat__title {
	display: flex; align-items: center; justify-content: center;
	gap: clamp(.9rem, 2vw, 1.4rem);
	margin: 0 0 clamp(1.1rem, 2.4vw, 1.8rem);
	font-family: var(--font-sans);
	font-size: clamp(.74rem, 1vw, .86rem);
	font-weight: 600;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--accent-text);
}
.bigstat__title::before,
.bigstat__title::after {
	content: "";
	width: clamp(2.2rem, 6vw, 4.5rem); height: 1px;
	background: currentColor; opacity: .55;
}
/* letter-spacing adds space after the last letter; pull it back so the title sits centred */
.bigstat__title span { margin-inline-end: -.34em; }
.bigstat__n {
	text-shadow: 0 30px 60px rgba(20, 24, 51, .10);
}
/* The pedestal: a fine rule that draws out from the centre, with a diamond in the middle. */
.bigstat__rule {
	position: relative;
	display: block;
	width: min(70%, 560px); height: 14px;
	margin: clamp(1rem, 2.2vw, 1.6rem) auto clamp(.9rem, 1.8vw, 1.3rem);
}
.bigstat__rule::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 50%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--accent) 18%, var(--accent) 82%, transparent);
	opacity: .6;
	transform: scaleX(0);
	transition: transform 1.4s var(--ease-out) .35s;
}
.bigstat__rule i {
	position: absolute; left: 50%; top: 50%;
	width: 10px; height: 10px;
	margin: -5px 0 0 -5px;
	background: var(--accent);
	transform: rotate(45deg) scale(0);
	transition: transform .7s var(--ease-out) .2s;
	box-shadow: 0 0 0 5px var(--sand, #f1ece5);
}
.bigstat.in .bigstat__rule::before { transform: scaleX(1); }
.bigstat.in .bigstat__rule i { transform: rotate(45deg) scale(1); }
.bigstat__label {
	display: block;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.9rem, 3.8vw, 3.1rem);
	line-height: 1.1;
	letter-spacing: .01em;
	color: var(--ink-soft, #232848);
	margin: 0;
}
.bigstat__label em { font-style: italic; color: var(--accent-text); }
@media (prefers-reduced-motion: reduce) {
	.bigstat__rule::before { transform: none; transition: none; }
	.bigstat__rule i { transform: rotate(45deg); transition: none; }
}

/* --------------------------------------------------------------------------
   Hero headline: lines rise in with CSS only. It paints in the first frame
   (it is the page's Largest Contentful Paint), unlike the JS word split.
   -------------------------------------------------------------------------- */
.hero__line {
	display: block;
	animation: ww-hero-line 1.05s var(--ease-out) both;
	animation-delay: calc(var(--i, 0) * 110ms + 120ms);
}
@keyframes ww-hero-line {
	from { opacity: .01; transform: translateY(.45em); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.hero__line { animation: none; }
}

/* --------------------------------------------------------------------------
   Accessibility (WCAG 2.2 AA, from the Lighthouse audit)
   -------------------------------------------------------------------------- */
:root {
	/* The brand blue (#2E97C7) reaches only 3.2:1 as small text on the light surfaces.
	   Small text uses this deeper shade of the same blue (5.3:1); graphics, buttons and
	   large type keep the brand blue. */
	--accent-text: #1C7099;
	/* Was #8A90A3 (2.7:1 on sand). Used for the receding headline clause and fine print. */
	--muted-light: #6B7186;
}
.eyebrow,
.person__role,
.post-card__meta { color: var(--accent-text); }
.eyebrow.on-dark,
.dark .eyebrow { color: var(--accent-bright); }

/* Process steps on navy: the dimmed (not yet reached) state stays readable. */
.step { opacity: .72; }
.step.is-active { opacity: 1; }
.dark .step p { color: rgba(255, 255, 255, .72); }

/* Footer fine print on navy. */
.disclaimer { color: rgba(255, 255, 255, .56); }
.foot__bottom { color: rgba(255, 255, 255, .6); }

/* Carousel dots: 24px touch targets, the visible dot stays 8px. */
.cdots { gap: 0; }
.cdots button {
	width: 24px; height: 24px;
	background: none;
	display: grid; place-items: center;
	transform: none;
}
.cdots button::before {
	content: "";
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--line);
	transition: background-color .4s var(--ease), transform .4s var(--ease-out);
}
.cdots button[aria-current="true"] { background: none; transform: none; }
.cdots button[aria-current="true"]::before { background: var(--accent); transform: scale(1.35); }

/* --------------------------------------------------------------------------
   Footer bottom row: fax, then a deliberately tiny agency credit
   -------------------------------------------------------------------------- */
.foot__bottom-end {
	display: inline-flex; flex-wrap: wrap; align-items: center;
	gap: .6rem 2.75rem;
}
.foot .foot__credit {
	display: inline-flex; align-items: center; gap: .3em;
	font-size: .54rem; letter-spacing: .14em; text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	transition: color .3s var(--ease);
}
.foot__credit strong { font-weight: 500; letter-spacing: .18em; }
.foot__credit-ico { font-size: .85em; filter: grayscale(.4); transition: filter .3s var(--ease); }
.foot .foot__credit:hover, .foot .foot__credit:focus-visible { color: rgba(255, 255, 255, .8); }
.foot__credit:hover .foot__credit-ico { filter: none; }

/* --------------------------------------------------------------------------
   Pointer spotlight (site.js sets --mx / --my) and the moving card border
   -------------------------------------------------------------------------- */
@keyframes ww-spin { to { transform: rotate(360deg); } }

/* Why choose us: a soft accent glow follows the cursor behind the text. */
.pillar > * { position: relative; z-index: 1; }
.pillar > .pillar__n { position: absolute; }
.pillar::after {
	content: "";
	position: absolute; inset: 0; z-index: 0;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(46, 151, 199, .13), transparent 62%);
	opacity: 0;
	transition: opacity .45s var(--ease);
	pointer-events: none;
}
.pillar.is-lit::after { opacity: 1; }

/* Carousel cards: white light under the cursor plus a travelling edge. */
.ccard::before {
	content: "";
	position: absolute; inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 2;
	background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 40%), rgba(255, 255, 255, .42), transparent 60%);
	mix-blend-mode: soft-light;
	opacity: 0;
	transition: opacity .45s var(--ease);
}
.ccard.is-lit::before { opacity: 1; }
/* The edge is a 1.5px ring (mask) with a conic light inside it that spins by transform, so the
   GPU animates it without any per-frame style or paint work. It only runs on the front card,
   and only while the carousel is on screen (site.js toggles .is-inview). */
.ccard__ring {
	position: absolute; inset: 0; z-index: 3;
	border-radius: inherit;
	padding: 1.5px;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: 0;
	transition: opacity .6s var(--ease);
}
.ccard__ring::before {
	content: "";
	position: absolute; inset: -50%;
	background: conic-gradient(transparent 0deg, rgba(255, 255, 255, .95) 40deg, #2e97c7 80deg, transparent 130deg, transparent 360deg);
	animation: ww-spin 4.5s linear infinite;
	animation-play-state: paused;
}
.ccard.is-active .ccard__ring { opacity: .75; }
.ccard:hover .ccard__ring,
.ccard:focus-within .ccard__ring { opacity: 1; }
.carousel.is-inview .ccard.is-active .ccard__ring::before,
.carousel.is-inview .ccard:hover .ccard__ring::before { animation-play-state: running; }

/* The mark in the closing call to action ("Closing deals. Opening doors.") gets the same
   travelling edge, 2px wide, always running (it is a compositor-only rotation). */
.ctac__ring {
	position: absolute; inset: 0; z-index: 2;
	border-radius: inherit;
	padding: 2px;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.ctac__ring::before {
	content: "";
	position: absolute; inset: -50%;
	background: conic-gradient(rgba(255, 255, 255, .12) 0deg, rgba(255, 255, 255, .95) 50deg, #4FB2DE 95deg, rgba(255, 255, 255, .12) 150deg, rgba(255, 255, 255, .12) 360deg);
	animation: ww-spin 5s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.ctac__ring::before { animation: none; background: linear-gradient(135deg, rgba(255, 255, 255, .8), #4FB2DE 50%, rgba(255, 255, 255, .2)); }
	.ccard__ring::before { animation: none; background: linear-gradient(135deg, rgba(255, 255, 255, .7), #2e97c7 50%, transparent); }
}

/* --------------------------------------------------------------------------
   Hover and focus refinements across the site
   -------------------------------------------------------------------------- */
/* Keyboard users see the same lift as mouse users. */
.pillar:focus-within,
.office:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 30px 60px -34px rgba(20, 24, 51, .42);
}
/* Tick lists: the tick slides in and the text darkens. */
.ticks li { transition: color .35s var(--ease), transform .45s var(--ease-out); }
.ticks li:hover { color: var(--ink); transform: translateX(4px); }
.dark .ticks li:hover { color: #fff; }
/* Office rows (address, phone, mail) on the locations and contact pages. */
a.office__row { transition: color .3s var(--ease); }
a.office__row:hover { color: var(--accent); }
/* Footer links slide a touch to the right. */
.foot ul a { display: inline-block; transition: color .3s var(--ease), transform .4s var(--ease-out); }
.foot ul a:hover { transform: translateX(3px); }
/* Visible focus ring on every interactive element we added. */
.post-card a:focus-visible,
.gallery__open:focus-visible,
.vgallery__open:focus-visible,
.hub-nav a:focus-visible,
.pager a:focus-visible,
.lightbox__btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Article cards (News, archives, Media Hub, related articles)
   -------------------------------------------------------------------------- */
.post-grid { row-gap: clamp(2rem, 4vw, 3rem); }
.post-card {
	display: grid;
	gap: 1.1rem;
	align-content: start;
}
.post-card__media { display: block; border-radius: 3px; background: var(--sand); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__placeholder {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	background: linear-gradient(140deg, var(--ink) 0%, var(--ink-soft) 100%);
}
.post-card__placeholder img { width: 64px !important; height: 64px !important; opacity: .85; }
.post-card__body { display: grid; gap: .6rem; }
.post-card__meta {
	font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
	color: var(--accent);
}
.post-card__title {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2vw, 1.6rem);
	font-weight: 500;
	line-height: 1.15;
	color: var(--ink);
}
.post-card__title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-out); }
.post-card:hover .post-card__title a,
.post-card__title a:focus-visible { background-size: 100% 1px; }
.post-card__excerpt { color: var(--muted); font-size: .95rem; }
.post-card .link-u { justify-self: start; }

/* Pagination */
.pager {
	display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}
.pager .page-numbers {
	min-width: 44px; height: 44px;
	display: grid; place-items: center;
	padding: 0 .9rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: .8rem; letter-spacing: .08em;
	color: var(--ink);
	transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pager a.page-numbers:hover { border-color: var(--ink); }
.pager .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }
.pager .page-numbers svg { width: 15px; height: 15px; }

/* Single article */
.phead--article h1 { max-width: 22ch; }
.phead--article p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.article__media { margin-bottom: clamp(2rem, 4vw, 3rem); border-radius: 3px; }
.article__media img { width: 100%; height: auto; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3, .prose h4 {
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--ink);
	line-height: 1.15;
	margin-top: 1.8em;
}
.prose h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.prose h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: .45em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.prose img { max-width: 100%; height: auto; border-radius: 3px; }
.prose blockquote {
	border-left: 2px solid var(--accent);
	padding-left: 1.2em;
	font-family: var(--font-display);
	font-size: 1.3rem;
	color: var(--ink);
}
.prose .wp-block-image, .prose figure { margin-block: 1.6em; }

/* 404 */
.notfound__search { max-width: 560px; }

/* --------------------------------------------------------------------------
   Media Hub
   -------------------------------------------------------------------------- */
.hub-nav {
	display: flex; flex-wrap: wrap; gap: .6rem;
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.hub-nav a {
	padding: .6rem 1.15rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
	color: var(--ink);
	transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.hub-nav a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Photo gallery: three columns, the first photo spans two rows for rhythm. */
.gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: clamp(180px, 20vw, 280px);
	gap: clamp(.75rem, 1.5vw, 1.25rem);
}
.gallery__item:first-child { grid-row: span 2; }
.gallery__item { min-height: 0; }
.gallery__open {
	position: relative;
	display: block; width: 100%; height: 100%;
	padding: 0; border: 0; background: none;
	cursor: zoom-in;
	text-align: left;
}
.gallery__frame { display: block; height: 100%; border-radius: 3px; }
.gallery__frame img { width: 100%; height: 100%; object-fit: cover; }
.gallery__caption {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 2.5rem 1.1rem .95rem;
	font-size: .82rem;
	color: #fff;
	background: linear-gradient(to top, rgba(10, 14, 31, .75), transparent);
	opacity: 0; transform: translateY(8px);
	transition: opacity .45s var(--ease), transform .55s var(--ease-out);
	border-radius: 0 0 3px 3px;
}
.gallery__open:hover .gallery__caption,
.gallery__open:focus-visible .gallery__caption { opacity: 1; transform: none; }
@media (max-width: 980px) {
	.gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.gallery { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 240px; }
	.gallery__item:first-child { grid-row: auto; }
	.gallery__caption { opacity: 1; transform: none; }
}

/* Video gallery */
.vgallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
.vgallery__open {
	display: grid; gap: .85rem;
	width: 100%;
	padding: 0; border: 0; background: none;
	color: inherit; text-align: left;
	cursor: pointer;
}
.vgallery__frame { display: block; aspect-ratio: 16 / 9; border-radius: 3px; background: var(--ink-soft); }
.vgallery__frame img { width: 100%; height: 100%; object-fit: cover; }
.vgallery__play {
	position: absolute; left: 50%; top: 50%;
	width: 64px; height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, .92);
	color: var(--ink);
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
	transition: transform .5s var(--ease-out), background-color .4s var(--ease), color .4s var(--ease);
}
.vgallery__play svg { margin-left: 3px; }
.vgallery__open:hover .vgallery__play,
.vgallery__open:focus-visible .vgallery__play { transform: scale(1.12); background: var(--accent); color: #fff; }
.vgallery__title { font-family: var(--font-display); font-size: 1.35rem; color: #fff; }
.vgallery__note { font-size: .75rem; color: rgba(255, 255, 255, .6); }
@media (max-width: 980px) { .vgallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vgallery { grid-template-columns: minmax(0, 1fr); } }

/* Viewer */
.lightbox {
	width: min(1200px, calc(100vw - 2rem));
	max-width: none;
	max-height: calc(100vh - 2rem);
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
	color: #fff;
}
.lightbox::backdrop { background: rgba(10, 14, 31, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox__stage { display: grid; place-items: center; }
.lightbox__stage img,
.lightbox__stage video {
	max-width: 100%;
	max-height: calc(100vh - 8rem);
	border-radius: 3px;
	background: #000;
}
.lightbox__stage iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 3px; background: #000; }
.lightbox__caption { margin-top: .9rem; text-align: center; font-size: .9rem; color: rgba(255, 255, 255, .8); }
.lightbox__btn {
	position: absolute;
	width: 48px; height: 48px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .25);
	transition: background-color .3s var(--ease), transform .4s var(--ease-out);
}
.lightbox__btn:hover { background: var(--accent); border-color: var(--accent); }
.lightbox__close { top: -.5rem; right: -.5rem; transform: translateY(-100%); }
.lightbox__prev { left: -64px; top: 50%; margin-top: -24px; }
.lightbox__next { right: -64px; top: 50%; margin-top: -24px; }
@media (max-width: 1340px) {
	.lightbox__prev { left: .75rem; }
	.lightbox__next { right: .75rem; }
	.lightbox__close { top: .75rem; right: .75rem; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pillars-duo .pillar__ico, .pillars-duo .pillar__n, .ticks li, .foot ul a,
	.gallery__caption, .vgallery__play, .post-card__title a { transition: none; }
	.pillars-duo .pillar:hover .pillar__ico, .ticks li:hover, .foot ul a:hover,
	.vgallery__open:hover .vgallery__play { transform: none; }
}