/* =====================================================================
   ECOVIS CI — components
   Only what theme.json cannot express: the mosaic device, eyebrow,
   media frame and full-bleed band. Everything else (palette, Noto,
   type scale, spacing, buttons, quotes) lives in theme.json.

   Values are the styleguide-verified 2026 tokens; they intentionally
   reference the theme.json presets so there is a single source of truth.
   ===================================================================== */

:root {
	--ecovis-red: var(--wp--preset--color--ecovis-red, #C6093B);
	--ecovis-strawberry: var(--wp--preset--color--strawberry, #CD1437);
	--ecovis-currant: var(--wp--preset--color--currant, #B41446);
	--ecovis-cherry: var(--wp--preset--color--cherry, #A71645);
	--ecovis-berry: var(--wp--preset--color--berry, #8C0550);
	--ecovis-darkgrey: var(--wp--preset--color--darkgrey, #383A3B);
	--ecovis-graphite: var(--wp--preset--color--graphite, #6B6E6F);
	--ecovis-hairline: var(--wp--preset--color--hairline, #E3E3E5);
	--ecovis-radius: 2px; /* CI is near-square — keep radii tiny */
	--ecovis-warm-overlay: linear-gradient(rgba(196, 132, 60, .10), rgba(46, 34, 24, .30));
}

/* ---------------------------------------------------------------
   1. Eyebrow / kicker — the one place uppercase is sanctioned
   --------------------------------------------------------------- */
.ci-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 .8rem;
	color: var(--ecovis-red);
	font-size: var(--wp--preset--font-size--small, 13px);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.333;
}

.ci-eyebrow::before {
	content: "";
	display: inline-block;
	inline-size: 26px;
	block-size: 2px;
	background: var(--ecovis-red);
}

/* ---------------------------------------------------------------
   2. The mosaic — modular red squares, calm even rhythm.
   Styleguide: short side split into 2–6 elements; Berry should not
   sit directly next to Red, so the default order steps through the
   secondary reds instead of jumping straight to Berry.
   --------------------------------------------------------------- */
.ci-mosaic-rule {
	display: flex;
	gap: 4px;
	margin-block-end: 1.4rem;
}

.ci-mosaic-rule span {
	inline-size: 18px;
	block-size: 18px;
	display: block;
	border-radius: var(--ecovis-radius);
}

.ci-mosaic-rule span:nth-child(1) { background: var(--ecovis-red); }
.ci-mosaic-rule span:nth-child(2) { background: var(--ecovis-strawberry); }
.ci-mosaic-rule span:nth-child(3) { background: var(--ecovis-currant); }
.ci-mosaic-rule span:nth-child(4) { background: var(--ecovis-cherry); }
.ci-mosaic-rule span:nth-child(5) { background: var(--ecovis-berry); }

/* Media frame: photo occupies the full height of a 4-column grid and the
   secondary reds stack beside it, so the squares read as one deliberate
   group rather than a stray tile. */
.ci-media-frame {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	aspect-ratio: 4 / 3;
	gap: 6px;
	border-radius: var(--ecovis-radius);
	overflow: hidden;
}

.ci-media-frame > * { display: block; border-radius: var(--ecovis-radius); }

.ci-media-frame .ci-photo {
	grid-column: 1 / 4;
	grid-row: 1 / 5;
	position: relative;
	background-color: var(--ecovis-darkgrey);
	background-size: cover;
	background-position: center;
}

/* Photography direction: bright and warm, never cool/moody. */
.ci-media-frame .ci-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ecovis-warm-overlay);
	pointer-events: none;
}

.ci-media-frame .ci-tag {
	position: absolute;
	inset-inline-start: 14px;
	inset-block-end: 12px;
	z-index: 1;
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ci-m-red { background: var(--ecovis-red); }
.ci-m-strawberry { background: var(--ecovis-strawberry); }
.ci-m-currant { background: var(--ecovis-currant); }
.ci-m-cherry { background: var(--ecovis-cherry); }
.ci-m-berry { background: var(--ecovis-berry); }

/* ---------------------------------------------------------------
   3. Full-bleed band — breaks the content container without causing
   horizontal scroll on any viewport.
   --------------------------------------------------------------- */
.ci-band {
	position: relative;
	background: var(--ecovis-red);
	color: #fff;
	padding-block: clamp(48px, 7vw, 84px);
}

.ci-band :where(h1, h2, h3, h4, p) { color: #fff; }
.ci-band a:not(.wp-element-button) { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------------
   4. Professions box — fixed order per the styleguide.
   --------------------------------------------------------------- */
.ci-prof-box {
	background: var(--ecovis-red);
	color: #fff;
	border-radius: var(--ecovis-radius);
	padding: 1.6rem 1.7rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.ci-prof-box .k {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .85;
	margin-block-end: .5rem;
}

.ci-prof-box b { font-weight: 600; font-size: 1.05rem; line-height: 1.5; }

/* ---------------------------------------------------------------
   5. Stats — red rule on top, tabular figures so columns line up.
   --------------------------------------------------------------- */
.ci-stats { border-block-start: 3px solid var(--ecovis-red); }

.ci-stat .num {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	font-weight: 900;
	line-height: 1;
	color: var(--ecovis-red);
	font-variant-numeric: tabular-nums;
}

.ci-stat .lab {
	margin-block-start: .55rem;
	font-size: .86rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ecovis-graphite);
}

/* ---------------------------------------------------------------
   5b. Cards — the site-wide card look (segments, insights).
   --------------------------------------------------------------- */
.ci-card {
	background: #fff;
	border: 1px solid var(--ecovis-hairline);
	border-radius: var(--ecovis-radius);
	padding: 1.6rem 1.5rem 1.7rem;
	box-shadow: 0 1px 2px rgba(56, 58, 59, .06), 0 10px 28px rgba(56, 58, 59, .08);
	transition: transform .18s ease, box-shadow .18s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.ci-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 6px 14px rgba(56, 58, 59, .08), 0 18px 40px rgba(198, 9, 59, .12);
	}
}

.ci-card-tag {
	display: inline-block;
	margin: 0 0 .7rem;
	padding: .25rem .6rem;
	background: var(--ecovis-red);
	color: #fff;
	border-radius: var(--ecovis-radius);
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Post grid: keep excerpts to a predictable two lines so cards align. */
.ci-post-grid .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ci-post-grid .wp-block-post-featured-image img { border-radius: var(--ecovis-radius); }

/* ---------------------------------------------------------------
   6. Motion — restrained, opt-out, and JavaScript-free.

   The reveal is driven by a scroll timeline, not an IntersectionObserver.
   That matters for more than elegance: the previous version set opacity:0
   and waited for a script to add .is-visible. This theme ships no script,
   so anything using it would have stayed invisible forever.

   The hiding rule therefore lives INSIDE @supports. A browser without
   scroll-driven animations never hides the element in the first place —
   content is visible by default and motion is the enhancement, which is
   the only safe order for something that controls opacity.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.ci-reveal {
			animation: ci-rise linear both;
			animation-timeline: view();
			animation-range: entry 8% cover 30%;
		}

		/* Mosaic squares arrive in sequence, left to right, by shifting each
		   square's range rather than using a delay — delays do not apply to
		   a progress-based timeline. */
		.ci-mosaic-rule span,
		.ci-about-mosaic i {
			animation: ci-tile linear both;
			animation-timeline: view();
		}

		.ci-mosaic-rule span:nth-child(1), .ci-about-mosaic i:nth-child(1) { animation-range: entry 6%  cover 18%; }
		.ci-mosaic-rule span:nth-child(2), .ci-about-mosaic i:nth-child(2) { animation-range: entry 10% cover 22%; }
		.ci-mosaic-rule span:nth-child(3), .ci-about-mosaic i:nth-child(3) { animation-range: entry 14% cover 26%; }
		.ci-mosaic-rule span:nth-child(4), .ci-about-mosaic i:nth-child(4) { animation-range: entry 18% cover 30%; }
		.ci-mosaic-rule span:nth-child(5), .ci-about-mosaic i:nth-child(5) { animation-range: entry 22% cover 34%; }
		.ci-mosaic-rule span:nth-child(6), .ci-about-mosaic i:nth-child(6) { animation-range: entry 26% cover 38%; }
	}

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

	@keyframes ci-tile {
		from { opacity: 0; transform: scale(.72); }
		to   { opacity: 1; transform: none; }
	}
}

/* ---------------------------------------------------------------
   7. Accessibility guard rails
   --------------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--ecovis-red);
	outline-offset: 3px;
}

.ci-band :where(a, button):focus-visible { outline-color: #fff; }

/* Styleguide: body copy is always left-aligned — never centred or justified. */
.ci-page :where(p, li, .lead) { text-align: left; }

/* Wide media must never push the page sideways. */
:where(.wp-block-table, .wp-block-code, pre) { overflow-x: auto; }

/* ---------------------------------------------------------------
   8. Site shell — intentionally native block markup.
   --------------------------------------------------------------- */
.ci-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .96);
	border-block-end: 1px solid var(--ecovis-hairline);
	backdrop-filter: blur(14px);
}

.admin-bar .ci-site-header { top: 32px; }
.ci-header-inner { min-height: 82px; gap: 28px; }
.ci-header-inner .wp-block-shortcode { margin: 0; flex: 0 0 auto; }
.ci-header-inner .wp-block-shortcode img { max-width: 208px; object-fit: contain; }
.ci-main-nav { margin-inline: auto; }
.ci-main-nav .wp-block-navigation__container { gap: clamp(14px, 2vw, 30px); }
.ci-main-nav .wp-block-navigation-item__content { font-size: 13px; letter-spacing: .025em; white-space: nowrap; }

.ci-header-actions {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
}
.ci-header-actions a { color: var(--ecovis-graphite); }
.ci-header-actions a[aria-current="page"] { color: var(--ecovis-red); }
.ci-header-actions span { color: var(--ecovis-hairline); }

.ci-site-footer {
	border-block-start: 4px solid var(--ecovis-red);
	padding-block: clamp(56px, 8vw, 92px) 32px;
	background: #fff;
}
.ci-site-footer .wp-block-shortcode { margin-block: 0 28px; }
.ci-footer-address { color: var(--ecovis-graphite); }
.ci-footer-links { border-inline-start: 1px solid var(--ecovis-hairline); padding-inline-start: clamp(28px, 5vw, 68px); }
.ci-footer-links ul { list-style: none; margin: 0; padding: 0; }
.ci-footer-links li { margin-block: 0 10px; }

/* ---------------------------------------------------------------
   9. Home and About components.
   --------------------------------------------------------------- */
.ci-home-about { background: #fff; }
.ci-partner-card { border: 1px solid var(--ecovis-hairline); border-block-start: 4px solid var(--ecovis-red); background: var(--wp--preset--color--soft); }
.ci-partner-photo { margin: 0; padding: 28px 28px 0; }
.ci-partner-photo img {
	display: block;
	inline-size: 116px;
	block-size: 116px;
	object-fit: cover;
	filter: grayscale(12%);
	border-radius: 50%;
}
.ci-partner-card-copy { padding: 22px 28px 28px; }
.ci-partner-card-copy > * { margin-block-start: 0; }
.ci-card-label { margin-block: 4px 14px; color: var(--ecovis-red); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.ci-services-section :where(h2, h3) { color: #fff; }
.ci-eyebrow-on-dark { color: #fff; }
.ci-eyebrow-on-dark::before { background: #fff; }
.ci-service-grid { align-items: stretch; }
.ci-service-card {
	display: flex;
	flex-direction: column;
	padding: 26px 24px;
	border: 1px solid rgba(255,255,255,.2);
	background: rgba(255,255,255,.04);
}
.ci-service-card p { color: var(--wp--preset--color--graphite-1); }
.ci-service-card .ci-service-number { margin: 0 0 30px; color: var(--ecovis-red); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.ci-service-card .ci-text-link { margin-block-start: auto; padding-block-start: 22px; }
.ci-service-card .ci-text-link a { color: #fff; }

.ci-logo-grid p {
	display: grid;
	place-items: center;
	min-block-size: 108px;
	margin: 0;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--ecovis-hairline);
	color: var(--ecovis-darkgrey);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}
.ci-staging-note { max-width: 860px; margin-block-start: 22px; }

.ci-about-hero { background: linear-gradient(120deg, #fff 0%, #fff 70%, #f6f6f7 70%); }
.ci-about-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); aspect-ratio: 1; gap: 7px; max-width: 300px; margin-inline-start: auto; transform: rotate(-4deg); }
.ci-about-mosaic i { display: block; background: var(--ecovis-red); }
.ci-about-mosaic i:nth-child(2) { background: var(--ecovis-strawberry); }
.ci-about-mosaic i:nth-child(3) { background: var(--ecovis-currant); }
.ci-about-mosaic i:nth-child(4) { background: var(--ecovis-cherry); }
.ci-about-mosaic i:nth-child(5) { background: var(--ecovis-berry); }
.ci-about-mosaic i:nth-child(6) { background: var(--ecovis-darkgrey); }

.ci-fact-panel { background: #fff; border-block-start: 4px solid var(--ecovis-red); padding: 28px; box-shadow: 0 12px 30px rgba(56,58,59,.08); }
.ci-fact-panel ul { padding-inline-start: 20px; }
.ci-fact-panel li + li { margin-block-start: 10px; }
.ci-value { border-block-start: 3px solid var(--ecovis-red); padding-block-start: 22px; }
.ci-commitment .wp-block-quote { max-width: 980px; border-color: #fff; }
.ci-commitment .wp-block-quote p { color: #fff; font-size: clamp(24px, 3vw, 34px); }
.ci-about-partner-photo { margin: 0; }
.ci-about-partner-photo img { display: block; inline-size: min(100%, 360px); aspect-ratio: 1; object-fit: cover; object-position: center 18%; border-radius: 2px; filter: grayscale(15%); }

.ci-standard-page { padding-block: 20px 76px; }
.ci-standard-page > .wp-block-post-content { max-width: 820px; }

@media (max-width: 1100px) {
	.ci-header-actions { display: none; }
	.ci-header-inner { gap: 18px; }
	.ci-main-nav .wp-block-navigation__container { gap: 16px; }
}

@media (max-width: 781px) {
	.admin-bar .ci-site-header { top: 46px; }
	.ci-header-inner { min-height: 68px; }
	.ci-header-inner .wp-block-shortcode img { height: 32px !important; max-width: 172px; }
	.ci-main-nav { margin-inline-start: auto; margin-inline-end: 0; }
	.ci-site-footer { padding-block-start: 56px; }
	.ci-footer-links { border-inline-start: 0; border-block-start: 1px solid var(--ecovis-hairline); padding-inline-start: 0; padding-block-start: 28px; }
	.ci-partner-card { margin-block-start: 16px; }
	.ci-about-mosaic { max-width: 220px; margin: 24px auto 0; }
	.ci-value-grid .ci-value { margin-block-start: 16px; }
}

@media (max-width: 480px) {
	.ci-eyebrow { letter-spacing: .08em; }
	.ci-partner-photo { padding: 22px 22px 0; }
	.ci-partner-card-copy { padding: 18px 22px 24px; }
	.ci-logo-grid { grid-template-columns: 1fr !important; }
	.ci-logo-grid p { min-block-size: 86px; }
}

/* ---------------------------------------------------------------
   FAQ accordion. Paired with core/details — ecovis-site-core derives
   the FAQPage schema from this same markup, so the two cannot drift.
   --------------------------------------------------------------- */
.ci-faq .wp-block-details {
	border: 1px solid var(--ecovis-hairline);
	border-radius: var(--ecovis-radius);
	padding: 1rem 1.2rem;
	background: #fff;
}

.ci-faq .wp-block-details + .wp-block-details { margin-block-start: 8px; }

.ci-faq summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--ecovis-darkgrey);
	list-style: none;
	display: flex;
	align-items: flex-start;
	gap: .7rem;
}

.ci-faq summary::-webkit-details-marker { display: none; }

/* Marker drawn in CSS so it inherits the brand colour and rotates on open. */
.ci-faq summary::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 10px;
	block-size: 10px;
	margin-block-start: .45em;
	border-inline-end: 2px solid var(--ecovis-red);
	border-block-end: 2px solid var(--ecovis-red);
	transform: rotate(-45deg);
	transition: transform .2s ease;
}

.ci-faq details[open] summary::before { transform: rotate(45deg); }
.ci-faq summary:hover { color: var(--ecovis-red); }
.ci-faq .wp-block-details > :not(summary) { margin-block-start: .8rem; }

/* ---------------------------------------------------------------
   Block styles registered in functions.php, so they appear in the
   editor's style switcher rather than only inside a pattern.
   --------------------------------------------------------------- */
.wp-block-separator.is-style-ci-rule {
	border: 0;
	block-size: 3px;
	inline-size: 56px;
	max-inline-size: 56px;
	margin-inline: 0;
	background: var(--ecovis-red);
	opacity: 1;
}

.wp-block-group.is-style-ci-keyline {
	border-inline-start: 3px solid var(--ecovis-red);
	padding-inline-start: 1.4rem;
}

/* =====================================================================
   10. THE 2026 LAYER
   Brand hexes are fixed by the styleguide and are NOT touched here.
   What is modernised is the architecture around them: every tint,
   shade and shadow is now DERIVED from those hexes with color-mix()
   in oklab, so changing one brand value updates the whole system and
   the greys stay perceptually even instead of muddying toward purple.
   ===================================================================== */

:root {
	/* The signature. Five brand reds as hard stops — the mosaic principle
	   expressed as one edge. Non-repeating on purpose: the styleguide keeps
	   Berry away from Red, and tiling would put them side by side. */
	--ci-mosaic-edge: linear-gradient(90deg,
		var(--ecovis-red)        0    20%,
		var(--ecovis-strawberry) 20%  40%,
		var(--ecovis-currant)    40%  60%,
		var(--ecovis-cherry)     60%  80%,
		var(--ecovis-berry)      80% 100%);

	/* Fallbacks first: a browser without color-mix() keeps these. */
	--ci-red-tint: #FBE7EC;
	--ci-red-deep: #9E0730;
	--ci-shadow-s: rgba(56, 58, 59, .07);
	--ci-shadow-l: rgba(56, 58, 59, .10);
	--ci-red-glow: rgba(198, 9, 59, .13);

	--ci-surface:   var(--wp--preset--color--white, #fff);
	--ci-surface-2: var(--wp--preset--color--soft, #F6F6F7);
	--ci-ink:       var(--ecovis-darkgrey);
	--ci-ink-muted: var(--ecovis-graphite);
	--ci-line:      var(--ecovis-hairline);

	--ci-ease: cubic-bezier(.22, .61, .36, 1);
}

@supports (color: color-mix(in oklab, red, white)) {
	:root {
		--ci-red-tint: color-mix(in oklab, var(--ecovis-red)  8%, white);
		--ci-red-deep: color-mix(in oklab, var(--ecovis-red) 82%, black);
		--ci-shadow-s: color-mix(in oklab, var(--ecovis-darkgrey) 8%,  transparent);
		--ci-shadow-l: color-mix(in oklab, var(--ecovis-darkgrey) 12%, transparent);
		--ci-red-glow: color-mix(in oklab, var(--ecovis-red) 14%, transparent);
	}
}

/* ---------------------------------------------------------------
   10a. Typography polish — cheap, and the single biggest lift to
   how considered the page reads.
   --------------------------------------------------------------- */
:where(h1, h2, h3, h4, .ci-stat .num, blockquote p) { text-wrap: balance; }
:where(p, li, dd, figcaption) { text-wrap: pretty; }

/* Never let a long unbroken string (an email, a case citation) push
   the layout sideways on a phone. */
:where(p, li, h1, h2, h3, h4, td) { overflow-wrap: break-word; }

/* ---------------------------------------------------------------
   10b. Intrinsic responsiveness — components size themselves to the
   space they are given, so they stay correct inside any column,
   not only at the viewport widths someone remembered to test.
   --------------------------------------------------------------- */
/* Both class names are required. Core ships `.wp-block-columns{display:flex}`
   and its stylesheet is printed AFTER this one, so a single-class selector
   loses on source order no matter how correct it is — the grid silently
   never applies. Chaining the block class outranks it on specificity, which
   does not depend on load order. */
.wp-block-columns.ci-service-grid,
.wp-block-columns.ci-value-grid,
.ci-logo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: clamp(12px, 1.6vw, 20px);
}

/* Core Columns sets flex-basis inline; neutralise it once here rather
   than at three breakpoints. */
.ci-service-grid > .wp-block-column,
.ci-value-grid > .wp-block-column {
	flex-basis: auto !important;
	margin-block-start: 0 !important;
}

.ci-logo-grid { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }

/* A card adapts to ITS OWN width, so the same card is right in a
   4-up grid, a 2-up grid and a sidebar without any viewport query. */
.ci-card,
.ci-service-card,
.ci-fact-panel { container-type: inline-size; }

@container (max-width: 300px) {
	.ci-card, .ci-service-card { padding: 1.1rem 1.05rem 1.2rem; }
	.ci-service-card .ci-service-number { margin-block-end: 18px; }
}

/* ---------------------------------------------------------------
   10c. The ECOVIS signature — the mosaic edge, used sparingly so it
   stays a mark of emphasis rather than decoration.
   --------------------------------------------------------------- */
.ci-site-footer { border-block-start: 0; position: relative; }

.ci-site-footer::before,
.ci-band::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 4px;
	background: var(--ci-mosaic-edge);
}

.ci-band { overflow: hidden; }

/* Cards earn the mosaic on hover: a keyline that draws itself in from
   the leading edge. Transform-only, so it never triggers layout. */
.ci-card { position: relative; }

.ci-card::after {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline: -1px;
	block-size: 3px;
	background: var(--ci-mosaic-edge);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .32s var(--ci-ease);
}

.ci-card:hover::after,
.ci-card:focus-within::after { transform: scaleX(1); }

.ci-card { box-shadow: 0 1px 2px var(--ci-shadow-s), 0 10px 28px var(--ci-shadow-l); }

@media (prefers-reduced-motion: no-preference) {
	.ci-card:hover {
		box-shadow: 0 6px 14px var(--ci-shadow-s), 0 18px 40px var(--ci-red-glow);
	}
}

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

/* Section headings carry a short mosaic tick — the eyebrow's rule,
   promoted to the full five-red sequence for section openers. */
.ci-section-mark { position: relative; padding-block-start: 18px; }

.ci-section-mark::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 64px;
	block-size: 4px;
	background: var(--ci-mosaic-edge);
}

/* ---------------------------------------------------------------
   10d. Link and button behaviour — an underline that grows from the
   leading edge, matching the mosaic keyline's direction.
   --------------------------------------------------------------- */
.ci-text-link a,
.entry-content a:not(.wp-element-button):not(.wp-block-navigation-item__content) {
	text-decoration: none;
	background-image: linear-gradient(var(--ecovis-red), var(--ecovis-red));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	transition: background-size .28s var(--ci-ease), color .28s var(--ci-ease);
	padding-block-end: 2px;
}

.ci-text-link a:hover,
.ci-text-link a:focus-visible,
.entry-content a:not(.wp-element-button):hover,
.entry-content a:not(.wp-element-button):focus-visible {
	background-size: 100% 2px;
	color: var(--ecovis-red);
}

/* On the dark services panel the keyline must be white to stay legible. */
.ci-service-card .ci-text-link a {
	background-image: linear-gradient(#fff, #fff);
}

@media (prefers-reduced-motion: reduce) {
	.ci-text-link a,
	.entry-content a:not(.wp-element-button) { transition: none; }
}

.wp-element-button, .wp-block-button__link {
	transition: background-color .2s var(--ci-ease), transform .2s var(--ci-ease);
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link:hover { transform: translateY(-2px); }
}

/* ---------------------------------------------------------------
   10e. Cross-document view transitions. Progressive by definition:
   browsers that do not implement the at-rule ignore it entirely,
   and reduced-motion users get an instant swap.
   --------------------------------------------------------------- */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) { animation: none !important; }
}

/* The masthead is the one element that should NOT cross-fade — it is
   present on both pages, so it stays put and the content moves. */
.ci-site-header { view-transition-name: ci-masthead; }

/* ---------------------------------------------------------------
   10f. Optional dark scheme.
   NOT enabled by prefers-color-scheme: a dark palette is a brand
   decision that the 2026 styleguide does not currently make, and it
   is not this stylesheet's call to make on the firm's behalf. The
   architecture is ready — set data-ci-scheme="dark" on <html> to
   switch, and nothing else needs to change.
   --------------------------------------------------------------- */
:root[data-ci-scheme="dark"] {
	color-scheme: dark;
	--ci-surface:   #17191A;
	--ci-surface-2: #1F2223;
	--ci-ink:       #F2F2F3;
	--ci-ink-muted: var(--wp--preset--color--graphite-2, #B9BBBD);
	--ci-line:      #33383A;
	--ecovis-hairline: #33383A;
}

:root[data-ci-scheme="dark"] body,
:root[data-ci-scheme="dark"] .ci-home-about,
:root[data-ci-scheme="dark"] .ci-site-footer { background: var(--ci-surface); color: var(--ci-ink); }

:root[data-ci-scheme="dark"] .ci-card,
:root[data-ci-scheme="dark"] .ci-fact-panel,
:root[data-ci-scheme="dark"] .ci-logo-grid p { background: var(--ci-surface-2); border-color: var(--ci-line); color: var(--ci-ink); }

:root[data-ci-scheme="dark"] .ci-site-header { background: color-mix(in oklab, var(--ci-surface) 92%, transparent); }
:root[data-ci-scheme="dark"] .ci-faq .wp-block-details { background: var(--ci-surface-2); }
:root[data-ci-scheme="dark"] .ci-faq summary { color: var(--ci-ink); }

/* ---------------------------------------------------------------
   10g. Print — clients still print advice memos.
   --------------------------------------------------------------- */
@media print {
	.ci-site-header, .ci-site-footer, .ci-band, .wp-block-navigation { display: none; }
	.ci-card { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
}

/* ---------------------------------------------------------------
   11. Hero panel — photograph paired with the mosaic.

   The well is 3 of 4 columns by 3 of 4 rows of a 4:3 frame, which is
   itself 4:3 — matched to the source asset so the image is never
   upscaled or centre-cropped. Tiles fill the remaining right column
   and bottom row. Berry sits at 4/4, touching only Currant and a
   blank, per the styleguide adjacency rule.
   --------------------------------------------------------------- */
.ci-media-frame.has-photo .ci-photo-img {
	grid-column: 1 / 4;
	grid-row: 1 / 4;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: var(--ecovis-radius);
}

.ci-media-frame .ci-t { display: block; border-radius: var(--ecovis-radius); }

.ci-t-a { grid-column: 4; grid-row: 1; }
.ci-t-b { grid-column: 4; grid-row: 2; }
.ci-t-c { grid-column: 4; grid-row: 3; }
.ci-t-d { grid-column: 1; grid-row: 4; }
.ci-t-e { grid-column: 2; grid-row: 4; }
.ci-t-f { grid-column: 3; grid-row: 4; }
.ci-t-g { grid-column: 4; grid-row: 4; }

.ci-m-blank { background: #fff; }
.ci-m-soft { background: var(--wp--preset--color--soft, #F6F6F7); }

/* ---------------------------------------------------------------
   12. CTA band backdrop.
   A soft, deliberately out-of-focus office behind the brand red.
   The source is the firm's own video-call backdrop; its burned-in
   ECOVIS logo was cropped out, because a second logo inside a photo
   breaks the styleguide's logo-placement rule.

   The overlay opacity was measured, not guessed. White body text
   needs 4.5:1, and the photo only earns its file size if it is
   actually visible:

     overlay   texture delta   white-text contrast
      0.94          10   (invisible)     5.67
      0.85          24   (visible)       5.07   <- chosen
      0.80          33   (obvious)       4.71
      0.75          41                   4.32   fails AA

   0.85 is the point where the photograph reads as depth while the
   contrast ratio still keeps real margin over the AA floor.
   --------------------------------------------------------------- */
.ci-band {
	background-image:
		linear-gradient(0deg, rgba(198, 9, 59, .85), rgba(198, 9, 59, .85)),
		url("../img/band-office.jpg");
	background-size: auto, cover;
	background-position: center, center;
	background-repeat: no-repeat;
}

/* ---------------------------------------------------------------
   12b. Page hero — photo variant.
   Same measured 0.85 red-over-photo overlay as the CTA band (see
   above), reused for the opening hero of a standard page instead of
   its closing CTA. The photo is set per-page via the --hero-img
   custom property so one class serves every page's own image.
   --------------------------------------------------------------- */
.ci-page-hero-photo {
	background-image:
		linear-gradient(0deg, rgba(198, 9, 59, .85), rgba(198, 9, 59, .85)),
		var(--hero-img);
	background-size: auto, cover;
	background-position: center, center;
	background-repeat: no-repeat;
}
.ci-page-hero-photo :where(h1, h2, h3, h4, p) { color: #fff; }

/* ---------------------------------------------------------------
   12c. On-this-page TOC sidebar.
   Sticky navigation for long guide pages (Services, topic guides).
   Sits in a two-column layout beside the main content; the red
   keyline echoes .ci-fact-panel's left-border treatment.
   --------------------------------------------------------------- */
.ci-toc-sidebar {
	position: sticky;
	top: 100px;
	border-inline-start: 3px solid var(--ecovis-red);
	padding-inline-start: 20px;
}
.ci-toc-sidebar .ci-eyebrow { margin-bottom: 1rem; }
.ci-toc-sidebar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ci-toc-sidebar a { color: var(--ecovis-darkgrey); text-decoration: none; font-size: .95rem; line-height: 1.4; }
.ci-toc-sidebar a:hover { color: var(--ecovis-red); }
@media (max-width: 781px) {
	.ci-toc-sidebar { position: static; border-inline-start: none; padding-inline-start: 0; margin-bottom: 2rem; }
}

/* ---------------------------------------------------------------
   13. Team grid.
   Cards are printed by [ecovis_team] in ecovis-site-core, so the
   markup is plain <ul>/<li> rather than block markup — styled here
   to match .ci-card exactly, including the mosaic keyline on hover.
   Intrinsic columns: no breakpoint decides the count, the available
   width does.
   --------------------------------------------------------------- */
.ci-team-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* 200px, not 240: with four people a 240 floor produced a 3 + 1 row on a
	   normal desktop, which reads as one person left over rather than a team. */
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: clamp(16px, 2vw, 26px);
}

.ci-team-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ecovis-hairline);
	border-radius: var(--ecovis-radius);
	overflow: hidden;
	box-shadow: 0 1px 2px var(--ci-shadow-s), 0 10px 28px var(--ci-shadow-l);
	container-type: inline-size;
}

/* Same signature as .ci-card: the mosaic draws in from the leading edge. */
.ci-team-card::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 3px;
	background: var(--ci-mosaic-edge);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .32s var(--ci-ease);
	z-index: 1;
}

.ci-team-card:hover::after,
.ci-team-card:focus-within::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
	.ci-team-card::after { transition: none; }
}

/* 3:4, not 1:1. The portraits are 1:1 (Quynh, Christine), 2:3 (Giang) and
   near 1:2 (Nhuan); a square well cropped the tall ones so hard that Giang
   lost everything below the eyes. A 3:4 well sits between those ratios, and
   the focal point is biased upward because a headshot's subject is in the
   top third, not the middle. */
.ci-team-photo {
	display: block;
	inline-size: 100%;
	/* block-size:auto is load-bearing, not tidiness. The <img> carries width
	   and height attributes so the browser can reserve space and avoid layout
	   shift; those attributes also fix the used height, and aspect-ratio only
	   takes effect when one axis is auto. Without this line the ratio below is
	   computed, reported by getComputedStyle — and silently ignored. */
	block-size: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center 22%;
	background: var(--wp--preset--color--soft, #F6F6F7);
}

.ci-team-copy { padding: 1.2rem 1.3rem 1.4rem; }

/* ---------------------------------------------------------------
   13b. Per-photo framing overrides for the team grid.
   .ci-team-photo's shared object-position(22%) assumed similar
   headroom across all four source photos; it does not hold — each
   photo has the subject positioned/sized differently in its own
   frame. Tuned per person so heads land at a consistent size and
   position instead of one blanket crop for structurally different
   source images.
   --------------------------------------------------------------- */
.ci-team-photo[src*="vu-manh-quynh"] { transform: scale(1.55); transform-origin: 50% 18%; object-position: center 12%; }
.ci-team-photo[src*="nguyen-hong-giang"] { object-position: center 15%; }
.ci-team-photo[src*="nguyen-nhuan"] { transform: scale(1.25); transform-origin: 50% 10%; object-position: center 8%; }
.ci-team-photo[src*="christine-chou"] { object-position: center 20%; }

/* ---------------------------------------------------------------
   13c. Per-photo framing overrides for the partner-feature photo
   (About page's Managing Partner block, and each bio page's own
   intro photo). Same rationale as 13b — one blanket crop does not
   suit four structurally different source photos.
   --------------------------------------------------------------- */
.ci-about-partner-photo { overflow: hidden; }
.ci-about-partner-photo img[src*="vu-manh-quynh"] { transform: scale(1.6); transform-origin: 50% 15%; object-position: center 10%; }
.ci-about-partner-photo img[src*="nguyen-hong-giang"] { transform: scale(1.15); transform-origin: 50% 12%; object-position: center 10%; }
.ci-about-partner-photo img[src*="nguyen-nhuan"] { transform: scale(1.3); transform-origin: 50% 8%; object-position: center 8%; }
.ci-about-partner-photo img[src*="christine-chou"] { transform: scale(1.1); object-position: center 15%; }
.ci-team-card { overflow: hidden; }

.ci-team-role {
	margin: 0 0 .35rem;
	color: var(--ecovis-red);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.333;
}

.ci-team-name {
	margin: 0 0 .5rem;
	font-size: var(--wp--preset--font-size--h-4, 20px);
	line-height: 1.333;
}

.ci-team-name a {
	color: var(--ecovis-darkgrey);
	text-decoration: none;
}

.ci-team-name a:hover,
.ci-team-name a:focus-visible { color: var(--ecovis-red); }

.ci-team-employer {
	margin: -.25rem 0 .5rem;
	font-size: 13px;
	font-weight: 700;
	color: var(--ecovis-graphite);
}

.ci-team-focus {
	margin: 0 0 .6rem;
	font-size: 14px;
	color: var(--ecovis-graphite);
	line-height: 1.5;
}

.ci-team-mail { margin: 0; font-size: 13px; }
.ci-team-mail a { color: var(--ecovis-graphite); overflow-wrap: anywhere; }
.ci-team-mail a:hover { color: var(--ecovis-red); }

/* 260px was too generous: a four-up grid gives each card ~238px, so this
   hid the practice-area line on an ordinary desktop. Only collapse it when
   the card is genuinely cramped. */
@container (max-width: 190px) {
	.ci-team-copy { padding: 1rem 1rem 1.1rem; }
	.ci-team-focus { display: none; }
}

/* The team grid is not prose, so it should not sit inside the 820px reading
   column that .ci-standard-page imposes on article text. It breaks out to a
   wider band — but only once the viewport can actually hold it. Deliberately
   no 100vw here: 100vw includes the scrollbar, and the resulting few pixels
   of horizontal overflow are exactly the bug this file already guards against
   elsewhere. */
@media (min-width: 1000px) {
	.wp-block-post-content > .ci-team-section {
		--ci-breakout: 1160px;
		max-width: none;
		inline-size: var(--ci-breakout);
		margin-inline: calc((100% - var(--ci-breakout)) / 2);
	}
}

/* ---------------------------------------------------------------
   14. Coexistence with legacy Elementor pages.

   During the migration the new theme supplies the header, footer and
   chrome while Elementor still renders the body of pages not yet
   rebuilt. Those pages were laid out full-width in Elementor, so the
   820px reading column this theme imposes on article prose would
   squash every one of them. Elementor marks its own pages on <body>,
   which is a reliable hook: prose keeps its measure, Elementor pages
   get their width back.

   Remove this block once no published page carries Elementor data.
   --------------------------------------------------------------- */
body.elementor-page .ci-standard-page > .wp-block-post-content,
body.elementor-page .wp-block-post-content {
	max-width: none;
}

/* Elementor styles its own widgets from its Kit, which wins over
   theme.json for anything inside .elementor-widget. That is expected —
   a legacy page should keep looking as it does today rather than half
   inherit the new type scale. The page title above it is still the
   theme's, so only give it breathing room. */
body.elementor-page .ci-standard-page { padding-block-end: 0; }

/* ---------------------------------------------------------------
   15. Search form — core ships a pill-shaped button, the CI is
   near-square (2px). Applies on 404, search results and anywhere
   the Search block is placed.
   --------------------------------------------------------------- */
.wp-block-search__button {
	border-radius: var(--ecovis-radius);
	background-color: var(--ecovis-red);
	border: 0;
	color: #fff;
	font-weight: 700;
	padding-inline: 1.4rem;
}

.wp-block-search__input {
	border-radius: var(--ecovis-radius);
	border: 1px solid var(--ecovis-hairline);
	padding: .7rem .9rem;
}

.wp-block-search__inside-wrapper {
	border-radius: var(--ecovis-radius);
	border-color: var(--ecovis-hairline);
}

.wp-block-search__button:hover { background-color: var(--ci-red-deep); }