/* Generated by kindling-onboard. Do not edit by hand — re-run `kindling-onboard generate`. */

/* Default :focus-visible ring */
:where(a, button, .wp-element-button, input, select, textarea, [tabindex]):focus-visible {
	outline: var(--wp--custom--motion--focus-ring--outline, 2px solid var(--wp--preset--color--theme-03));
	outline-offset: var(--wp--custom--motion--focus-ring--outline-offset, 2px);
}

:where(a, button, .wp-element-button, input, select, textarea, [tabindex]):focus:not(:focus-visible) {
	outline: none;
}

@keyframes kindling-reveal-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

.is-style-reveal-fade-up {
	opacity: 0;
	will-change: opacity, transform;
}

.is-style-reveal-fade-up.is-revealed {
	animation: kindling-reveal-fade-up 200ms cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes kindling-reveal-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.is-style-reveal-fade-in {
	opacity: 0;
	will-change: opacity, transform;
}

.is-style-reveal-fade-in.is-revealed {
	animation: kindling-reveal-fade-in 200ms cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes kindling-reveal-scale-in {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}

.is-style-reveal-scale-in {
	opacity: 0;
	will-change: opacity, transform;
}

.is-style-reveal-scale-in.is-revealed {
	animation: kindling-reveal-scale-in 320ms cubic-bezier(0.3, 0, 0, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	[class*="is-style-reveal-"] {
		opacity: 1;
		transform: none;
	}
}


/* Button :focus-visible and :disabled (generated from tokens.buttons.variants.*) */
.wp-element-button:not([class*="is-style-"]):where(:focus-visible), .wp-block-button__link:not([class*="is-style-"]):where(:focus-visible) {
	outline: 2px solid var(--wp--preset--color--theme-03);
	outline-offset: 2px;
}

/* WHY: Click/:active = orange fill per the LDT button-states matrix (the "Click" column). :not([class*=is-style-]):where(:active) keeps specificity above the theme.json :hover rule so the pressed state wins while hovering. Filled + outline both fill orange with a white label. */
.wp-element-button:not([class*="is-style-"]):where(:active), .wp-block-button__link:not([class*="is-style-"]):where(:active),
.wp-element-button.is-style-outline:where(:active), .wp-block-button__link.is-style-outline:where(:active) {
	background-color: var(--wp--preset--color--theme-03);
	border-color: var(--wp--preset--color--theme-03);
	color: var(--wp--preset--color--theme-01);
}

.wp-element-button:not([class*="is-style-"]):where(:disabled, [aria-disabled="true"]), .wp-block-button__link:not([class*="is-style-"]):where(:disabled, [aria-disabled="true"]) {
	background-color: var(--wp--preset--color--theme-02);
	color: var(--wp--preset--color--theme-08);
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.wp-element-button.is-style-outline:where(:focus-visible), .wp-block-button__link.is-style-outline:where(:focus-visible) {
	outline: 2px solid var(--wp--preset--color--theme-03);
	outline-offset: 2px;
}

.wp-element-button.is-style-outline:where(:disabled, [aria-disabled="true"]), .wp-block-button__link.is-style-outline:where(:disabled, [aria-disabled="true"]) {
	background-color: transparent;
	color: var(--wp--preset--color--theme-02);
	border-color: var(--wp--preset--color--theme-02);
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.wp-element-button.is-style-outline-inverse:where(:focus-visible), .wp-block-button__link.is-style-outline-inverse:where(:focus-visible) {
	outline: 2px solid var(--wp--preset--color--theme-01);
	outline-offset: 2px;
}

.wp-element-button.is-style-outline-inverse:where(:disabled, [aria-disabled="true"]), .wp-block-button__link.is-style-outline-inverse:where(:disabled, [aria-disabled="true"]) {
	background-color: transparent;
	color: color-mix(in srgb, var(--wp--preset--color--theme-01) 40%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--theme-01) 40%, transparent);
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

/* WHY: nav floats OVER the hero image (Figma 33366:15084 — header + hero share one bg, nav overlaid w/ 45% dim). The OUTER template-part <header> is taken out of flow so the hero image starts at viewport top; every hero carries padding-top:120px for nav clearance. The inner .ldt-sticky-header is the nav's own padding wrapper. Sticky/contract-on-scroll is a separate pending designer item. */
.wp-site-blocks > header.wp-block-template-part { position: absolute; top: 36px; left: 0; right: 0; z-index: 100; background: transparent; }
/* WHY: WP admin bar is fixed at the viewport top for logged-in users; offset the floating nav below it (32px desktop / 46px mobile admin-bar height) + the 36px design gap so the nav never hides under the bar. */
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 68px; }
@media screen and (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 82px; } }
/* WHY: absolute header is still a DOM sibling, so the following main inherits a flow-gap top margin — zero it so the hero image reaches viewport top (behind the nav), per Figma. */
.wp-site-blocks > header.wp-block-template-part + * { margin-top: 0; }
.ldt-sticky-header { background: transparent; }

/* WHY: 2-col section layouts use core grid (minimumColumnWidth → auto reflow to 1-col on narrow). vcenter aligns a shorter text column against tall media; vcenter only applies once the grid is multi-track (≥600px) so stacked mobile is unaffected. */
.ldt-grid-vcenter { align-items: center; }
/* WHY: process steps stack flush into one rounded panel (Figma) — clip the square row backgrounds to the outer radius. */
.ldt-clip { overflow: hidden; }

/* WHY: card hover lift (Loom: hovered card pops up). Transform/shadow only — content unaffected. */
.ldt-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.ldt-card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }
@media (prefers-reduced-motion: reduce) {
	.ldt-card { transition: none; }
	.ldt-card:hover { transform: none; box-shadow: none; }
}

/* WHY: Figma header (33366:15086) shows a thin down-chevron on EVERY top-level nav item, not only dropdowns. core/navigation only renders a caret on submenu items, so add a uniform chevron via ::after on each top-level item and hide WP's native submenu caret (else Marketing would show two). Scoped to direct children of the top-level container so nested submenu links are unaffected. */
.ldt-sticky-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}
.ldt-sticky-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	display: inline-block;
	flex: none;
	width: 8px;
	height: 5px;
	margin-left: 7px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23ffffff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 8px 5px;
}
.ldt-sticky-header .wp-block-navigation__submenu-icon { display: none; }

/* WHY: REUSABLE CTA button = the "simple button" component (LDT button-states matrix Row 1, white scheme). Used by the header Contact Support pill AND body CTAs (Get a Free Audit, etc.). Canonical markup: a flex pill group with class `ldt-cta` { bg theme-01, text theme-09, radius 999, padding 4/4/4/20, blockGap 10 } containing a paragraph link (the label) + a round outermost/icon-block arrow (theme-09 circle, white arrow, width 34, linkUrl). States VERBATIM from the matrix Row 1:
   - Neutral: white pill, dark label, dark (theme-09) arrow circle + white arrow.
   - Hover:   arrow circle background REMOVED (transparent) + arrow turns BLACK (theme-09).
   - Click(:active): orange (theme-03) pill; dark circle + white arrow RESTORED.
   - Focus(keyboard): white pill + orange ring; circle stays dark + white arrow.
   - Inactive: n/a for link CTAs.
   width:fit-content lets the pill hug its label in both flex (header) and flow (section) contexts. !important overrides the inline background-color/color icon-block save() writes on .icon-container; the SVG follows currentColor, so flipping `color` recolors the arrow. */
.ldt-cta { width: fit-content; }
.ldt-cta a { color: var(--wp--preset--color--theme-09); text-decoration: none; }
.ldt-cta, .ldt-cta .icon-container { transition: background-color 0.15s ease, color 0.15s ease; }
/* Hover — remove the circle fill, arrow goes black. */
.ldt-cta:hover .icon-container { background-color: transparent !important; color: var(--wp--preset--color--theme-09) !important; }
/* Click / :active — orange pill; restore dark circle + white arrow (overrides hover during press). */
.ldt-cta:active { background-color: var(--wp--preset--color--theme-03); }
.ldt-cta:active .icon-container { background-color: var(--wp--preset--color--theme-09) !important; color: var(--wp--preset--color--theme-01) !important; }
/* Focus (keyboard) — orange ring hugging the pill; suppress the per-link ring to avoid doubling. */
.ldt-cta:has(a:focus-visible) { outline: 2px solid var(--wp--preset--color--theme-03); outline-offset: 3px; }
.ldt-cta a:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
	.ldt-cta, .ldt-cta .icon-container { transition: none; }
}

/* Blue PRIMARY variant (matrix Row 2) — for CTAs on LIGHT sections (white pill is invisible there). Markup uses bg theme-05 + text theme-01 + white circle (icon bg theme-01) + blue arrow (icon color theme-05). States: Hover = white circle removed + arrow→white; Click(:active) = orange pill (shared from base) + white circle + blue arrow restored; Focus = orange ring (shared from base). */
.ldt-cta--primary a { color: var(--wp--preset--color--theme-01); }
.ldt-cta--primary:hover .icon-container { background-color: transparent !important; color: var(--wp--preset--color--theme-01) !important; }
.ldt-cta--primary:active .icon-container { background-color: var(--wp--preset--color--theme-01) !important; color: var(--wp--preset--color--theme-05) !important; }

/* WHY: Round arrow buttons follow the LDT button-states matrix Rows 3–4. Two render paths: (a) carousel Splide arrows (.splide-arrow <button>, themeable via --carousel-arrow-color), (b) standalone round icon buttons (add .ldt-arrow-btn to a round outermost/icon-block). The matrix's Hover/Click columns ≈ Neutral for these (base color unchanged); the meaningful added states are Focus = orange (theme-03) ring and Inactive = greyed + dimmed. Base color stays component-driven; we only add interaction feedback. icon-block transforms need !important (inline transform from save()). */

/* (a) Carousel round arrows — keep the plugin's hover scale; add Focus ring + Inactive state. */
.splide-arrow:focus-visible { outline: 2px solid var(--wp--preset--color--theme-03); outline-offset: 2px; }
.splide-arrow:where([disabled], [aria-disabled="true"], .is-disabled) {
	opacity: 0.4;
	filter: grayscale(1);
	cursor: not-allowed;
	pointer-events: none;
}

/* (b) Standalone round arrow icon button — opt-in via .ldt-arrow-btn on a round outermost/icon-block (matrix Rows 3–4). Neutral = component blue + drop-shadow; Hover/Click = subtle scale feedback; Focus = orange (theme-03) ring; Inactive = greyed. The scale is on the WRAPPER (not .icon-container) so it never touches the icon-block's inline `transform: rotate(Ndeg)` — e.g. the hero scroll-down arrow rotated 90° keeps pointing down through every state (the old rule overwrote the rotation; the `scale:` individual property is too new to rely on). For centered instances, fit-content keeps the hover hit-area tight to the circle. */
.ldt-arrow-btn { transition: transform 0.15s ease; }
.ldt-arrow-btn.items-justified-center { width: fit-content; margin-inline: auto; }
.ldt-arrow-btn .icon-container { box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25); transition: filter 0.15s ease, opacity 0.15s ease; }
.ldt-arrow-btn:hover { transform: scale(1.08); }
.ldt-arrow-btn:active { transform: scale(0.94); }
.ldt-arrow-btn a:focus-visible, .ldt-arrow-btn :focus-visible.icon-container { outline: 2px solid var(--wp--preset--color--theme-03); outline-offset: 3px; }
.ldt-arrow-btn:where([aria-disabled="true"]) .icon-container,
.ldt-arrow-btn.is-disabled .icon-container { filter: grayscale(1); opacity: 0.45; cursor: not-allowed; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
	.ldt-arrow-btn { transition: none; }
	.ldt-arrow-btn:hover, .ldt-arrow-btn:active { transform: none; }
}

/* WHY: smooth in-page scrolling for anchor links (e.g. the hero scroll-down arrow → #home-intro). Disabled under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* WHY: Locations ticker — infinite horizontal marquee (Figma 33366:15094). The track holds TWO identical city sequences and animates translateX(0 → -50%) so the loop is seamless (every item, incl. the 6th, carries a trailing star → spacing is uniform across the seam). The 4-point "Kicker" star (Figma asset 703aa0a7) is injected after every item via a masked ::after so the markup carries no per-separator block (keeps core blocks valid — Rule 18). Pure motion → lives here. Pauses on hover/focus; honors prefers-reduced-motion (animation off, content clips static). */
.ldt-ticker { overflow: hidden; }
.ldt-ticker .ldt-ticker__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	align-items: center;
	gap: 0;
	animation: ldt-ticker-scroll 45s linear infinite;
	will-change: transform;
}
.ldt-ticker:hover .ldt-ticker__track,
.ldt-ticker:focus-within .ldt-ticker__track { animation-play-state: paused; }
.ldt-ticker .ldt-ticker__item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	margin: 0;
}
.ldt-ticker .ldt-ticker__item::after {
	content: "";
	flex: 0 0 auto;
	width: 0.72rem;
	height: 0.68rem;
	margin: 0 40px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2011.44%2010.92%22%3E%3Cpath%20d%3D%22M4.03%2010.92L1.014%208.736L3.796%206.214L3.744%205.98L0%205.59L1.066%201.924L4.394%203.874L4.55%203.744L3.77%200H7.644L6.864%203.744L7.046%203.874L10.27%201.924L11.44%205.616L7.722%205.98L7.67%206.214L10.426%208.736L7.384%2010.92L5.824%207.462H5.59L4.03%2010.92Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2011.44%2010.92%22%3E%3Cpath%20d%3D%22M4.03%2010.92L1.014%208.736L3.796%206.214L3.744%205.98L0%205.59L1.066%201.924L4.394%203.874L4.55%203.744L3.77%200H7.644L6.864%203.744L7.046%203.874L10.27%201.924L11.44%205.616L7.722%205.98L7.67%206.214L10.426%208.736L7.384%2010.92L5.824%207.462H5.59L4.03%2010.92Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
@keyframes ldt-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.ldt-ticker .ldt-ticker__track { animation: none; }
}

/* WHY: Home Features "Why" (#33) overlapping card deck — matches Figma 33366:15129.
   Peek-deck at rest (each upper card's body hidden behind the next); hovering (desktop)
   or focusing/tapping (touch+keyboard, via tabindex added in ldt-interactions.js) a card
   pushes the following card down to reveal its body. Card title-row icons are rendered as
   mask-image data-URIs themed white via currentColor. Same peek-deck at all viewports. */
.ldt-card-deck {
  --ldt-overlap: -7rem;
  --ldt-reveal: var(--wp--preset--spacing--20, 1rem);
  --ldt-ico-stairs: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2050%2050%22%3E%3Cpath%20d%3D%22M33.3333%202.1888V14.4748C33.3333%2015.6828%2032.3526%2016.6636%2031.1445%2016.6636H18.8586C17.6505%2016.6636%2016.6698%2017.6443%2016.6698%2018.8524V31.1383C16.6698%2032.3464%2015.689%2033.3271%2014.481%2033.3271H2.1888C0.980758%2033.3271%200%2034.3079%200%2035.5159V47.8019C0%2049.0099%200.980758%2049.9907%202.1888%2049.9907H47.8081C49.0161%2049.9907%2049.9969%2049.0099%2049.9969%2047.8019V2.1888C49.9969%200.980759%2049.0161%200%2047.8081%200H35.5221C34.3141%200%2033.3333%200.980759%2033.3333%202.1888Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --ldt-ico-mountains: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2057%2050%22%3E%3Cpath%20d%3D%22M12.5752%2026.3901L0.199783%2047.8049C-0.365085%2048.782%200.341%2050%201.47074%2050H26.2216C27.3513%2050%2028.054%2048.7786%2027.4925%2047.8049L15.1171%2026.3935C14.5522%2025.4164%2013.1435%2025.4164%2012.5787%2026.3935L12.5752%2026.3901Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M26.4179%200.732865L14.0424%2022.1442C13.4776%2023.1214%2014.1837%2024.3394%2015.3134%2024.3394H40.0642C41.194%2024.3394%2041.8966%2023.1179%2041.3352%2022.1442L28.9563%200.732865C28.3915%20-0.244288%2026.9827%20-0.244288%2026.4179%200.732865Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M41.8864%2026.3901L29.5109%2047.8015C28.9461%2048.7786%2029.6522%2049.9966%2030.7819%2049.9966H55.5328C56.6625%2049.9966%2057.3651%2048.7752%2056.8037%2047.8015L44.4283%2026.3901C43.8634%2025.4129%2042.4547%2025.4129%2041.8898%2026.3901H41.8864Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --ldt-ico-squares: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2051%2050%22%3E%3Cpath%20d%3D%22M6.85731%2041.1393V14.343H2.34423C1.05478%2014.343%200%2015.3937%200%2016.6782V47.6673C0%2048.9518%201.05478%2050.0025%202.34423%2050.0025H33.4541C34.7435%2050.0025%2035.7983%2048.9518%2035.7983%2047.6673V43.4769H9.20154C7.91209%2043.4769%206.85731%2042.4262%206.85731%2041.1417V41.1393Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M15.2042%207.81738H9.19909C7.90964%207.81738%206.85486%208.86807%206.85486%2010.1525V14.343H15.2017V7.81738H15.2042Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M35.7959%2043.4744H40.309C41.5984%2043.4744%2042.6532%2042.4237%2042.6532%2041.1393V35.657H35.7959V43.4744Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M48.6582%200H17.5483C16.2589%200%2015.2041%201.05069%2015.2041%202.33514V7.81742H40.3089C41.5983%207.81742%2042.6531%208.86811%2042.6531%2010.1526V35.6595H48.6582C49.9476%2035.6595%2051.0024%2034.6088%2051.0024%2033.3243V2.33514C51.0024%201.05069%2049.9476%200%2048.6582%200Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M17.5483%2035.657H35.7958V16.6757C35.7958%2015.3913%2034.741%2014.3406%2033.4516%2014.3406H15.2041V33.3219C15.2041%2034.6063%2016.2589%2035.657%2017.5483%2035.657Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --ldt-ico-flake: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2050%2050%22%3E%3Cpath%20d%3D%22M50%2019.3659H38.6041L46.6613%2011.3056L38.6913%203.33873L30.6341%2011.3959V0H19.3659V11.3959L11.3056%203.33873L3.33873%2011.3056L11.3959%2019.3659H0V30.6341H11.3959L3.33873%2038.6913L11.3056%2046.6613L19.3659%2038.6041V50H30.6341V38.6041L38.6913%2046.6613L46.6613%2038.6913L38.6041%2030.6341H50V19.3659Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
.ldt-card-deck > .ldt-deck-card {
  position: relative;
  width: 100%;
  min-height: 13rem;
  cursor: pointer;
  color: var(--wp--preset--color--theme-01, #fff); /* drives currentColor for the masked icon */
  transition: margin-top .35s ease;
}

/* Asymmetric split (text wider than deck) so the 64px headline breaks one sentence per
   line as in Figma (text ~60%, deck ~40%). Single column below 1024 stays as authored. */
@media (min-width: 64rem) {
  .ldt-why-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: start;
  }
}
.ldt-card-deck > .ldt-deck-card + .ldt-deck-card { margin-top: var(--ldt-overlap); }
.ldt-card-deck > .ldt-deck-card:hover,
.ldt-card-deck > .ldt-deck-card:focus-within { z-index: 3; }
.ldt-card-deck > .ldt-deck-card:hover + .ldt-deck-card,
.ldt-card-deck > .ldt-deck-card:focus-within + .ldt-deck-card { margin-top: var(--ldt-reveal); }

/* title row: heading + masked icon pinned right (icon presence forces the title wrap) */
.ldt-card-deck .ldt-card-head { width: 100%; }
.ldt-card-deck .ldt-card-head > h3 { min-width: 0; }
.ldt-card-deck .ldt-card-head::after {
  content: "";
  flex: 0 0 auto;
  width: 3.125rem;
  height: 3.125rem;
  margin-left: 1rem;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.ldt-deck-card.ldt-icon-stairs    .ldt-card-head::after { -webkit-mask-image: var(--ldt-ico-stairs);    mask-image: var(--ldt-ico-stairs); }
.ldt-deck-card.ldt-icon-mountains .ldt-card-head::after { -webkit-mask-image: var(--ldt-ico-mountains); mask-image: var(--ldt-ico-mountains); }
.ldt-deck-card.ldt-icon-squares   .ldt-card-head::after { -webkit-mask-image: var(--ldt-ico-squares);   mask-image: var(--ldt-ico-squares); }
.ldt-deck-card.ldt-icon-flake     .ldt-card-head::after { -webkit-mask-image: var(--ldt-ico-flake);     mask-image: var(--ldt-ico-flake); }

@media (prefers-reduced-motion: reduce) {
  .ldt-card-deck > .ldt-deck-card { transition: none; }
}

/* WHY: header floating pill — collapse core/navigation to its hamburger overlay below 1024px.
   The full horizontal nav (logo + 5 items + Contact Support) overflowed the pill at 768
   (flex-wrap:nowrap → 31px page overflow); core/navigation's built-in overlay breakpoint is
   only 600px. This shifts the hamburger up to <1024 so tablet uses the overlay menu. */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .ldt-sticky-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
  .ldt-sticky-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}

/* WHY: Home Services (#34) cards — orange arrow-circle link bottom-right (Figma 33366:15188).
   Vertical cards become flex columns so the arrow pins bottom-right across the equal-height
   grid row; the wide "Website & Brand Design" card lays out title | body | arrow at >=1024.
   The `> *` margin reset kills the constrained-layout `margin-inline:auto` WP injects on every
   child — those auto margins were OVERRIDING align-self in flexbox (auto margins win), centering
   the kicker/heading/arrow. !important is REQUIRED: WP's `.is-layout-constrained > :where(...)`
   auto-margin won the cascade even against a higher-specificity selector (observed live), so we
   force it. Zeroing the margins lets the text sit left; margin-left:auto re-pushes the arrow flush
   to the right padding edge (designer feedback 2026-06-18). */
.ldt-svc-card { display: flex; flex-direction: column; height: 100%; }
.ldt-card.ldt-svc-card > * { margin-left: 0 !important; margin-right: 0 !important; }
.ldt-card.ldt-svc-card > .wp-block-outermost-icon-block { margin-top: auto; margin-left: auto !important; align-self: flex-end; padding-top: var(--wp--preset--spacing--40); }
@media (min-width: 1024px) {
  /* Bottom-align body + arrow to the heading (Figma 33366-15233 `items-end`): the title block
     (kicker + 2-line heading) is the tallest column, so `align-items:end` drops the body copy and
     the arrow so their baselines sit on the "Brand Design" line. */
  .ldt-svc-card--wide { grid-template-columns: auto 1fr auto !important; align-items: end; }
}
.ldt-svc-card--wide > .wp-block-outermost-icon-block { justify-self: end; align-self: end; }

/* WHY: card text rhythm per Figma 33366-15188 — 36px bold Bricolage heading (line-height 1.3).
   Reserve a 3-line heading box (min-height:3.9em = 3 x 1.3em) so body paragraphs START at the
   same y across all three cards (Figma aligns body tops: shorter headings get a larger
   heading->body gap, the 3-line one a smaller gap). `font-size` beats the `has-x-large` preset
   class (!important) and `font-weight` beats the heading's inline 600. Explicit <br>s in the
   markup force the exact Figma line breaks. Vertical cards only — the wide card lays
   heading | body | arrow out horizontally, so it gets the type scale but not the reserved box. */
.ldt-svc-card > h3, .ldt-svc-card--wide h3 {
  font-size: clamp(1.75rem, 1.4rem + 1.55vw, 2.25rem) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.ldt-svc-card > h3 { min-height: 3.9em; }
.ldt-svc-card > p:last-of-type { margin-top: var(--wp--preset--spacing--30); }
/* body copy = Regular 400 per Figma (theme default renders 300/Light). Targets only the body
   paragraph (vertical = last p; wide = the direct-child p), never the 700 kicker label. */
.ldt-svc-card > p:last-of-type, .ldt-svc-card--wide > p { font-weight: 400; }

/* WHY: designer feedback 2026-06-18 — Home Services cards do NOT lift on hover (overrides the
   global .ldt-card hover). Static Figma drop-shadow (4px 4px 3.9px rgba(0,0,0,.25)) at rest. */
.ldt-svc-card, .ldt-svc-card--wide { box-shadow: 4px 4px 3.9px rgba(0, 0, 0, 0.25); }
.ldt-svc-card:hover, .ldt-svc-card--wide:hover { transform: none; box-shadow: 4px 4px 3.9px rgba(0, 0, 0, 0.25); }

/* WHY: Home Services orange arrow buttons — LDT button-states matrix Row 3 (orange "round arrow"
   scheme). Neutral = orange circle, arrow →; Hover/Click = arrow rotates to ↗ (up-right);
   Focus = blue (theme-07 #365AF4) ring — the button itself is orange so the matrix's orange focus
   ring would vanish; blue is the Row-3 focus treatment; Inactive = greyed/dimmed. Rotate the inner
   <svg>, NOT .icon-container (which carries icon-block save()'s inline `transform: rotate(0deg)`),
   so we never fight the saved transform. Opt-in via .ldt-svc-arrow on the round icon-block. */
/* Natural state (Figma 33366:15206): orange pill (47x34) with a white circle knob nestled
   bottom-right + an orange stroke-arrow inside it. The <a> IS the orange pill (whole pill stays
   clickable; bg from iconBackgroundColor theme-03); the icon svg is the two-tone white-circle /
   orange-arrow knob sized 27.4px and pinned bottom-right via flex end/end + 2.853px padding
   (matches Figma items-end justify-end p-[2.853]). Sizing selectors out-specify the plugin's
   `a,svg { width/height:100% }`. Hover/Click rotate the whole knob -45deg → arrow points up-right
   (the circle is symmetric so only the arrow reads as rotating). */
.ldt-svc-arrow .icon-container { display: flex; align-items: flex-end; justify-content: flex-end; height: 34px; padding: 2.853px; transition: filter 0.15s ease; }
.ldt-svc-arrow .icon-container svg { width: 27.4px; height: 27.4px; flex: 0 0 auto; transition: transform 0.2s ease; }
.ldt-svc-arrow:hover .icon-container svg,
.ldt-svc-arrow:active .icon-container svg { transform: rotate(-45deg); }
.ldt-svc-arrow:active .icon-container { filter: brightness(0.92); }
.ldt-svc-arrow a:focus-visible.icon-container,
.ldt-svc-arrow :focus-visible.icon-container { outline: 3px solid var(--wp--preset--color--theme-07); outline-offset: 2px; }
.ldt-svc-arrow:where([aria-disabled="true"]) .icon-container,
.ldt-svc-arrow.is-disabled .icon-container { filter: grayscale(1); opacity: 0.45; cursor: not-allowed; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .ldt-svc-arrow .icon-container svg { transition: none; }
  .ldt-svc-arrow:hover .icon-container svg, .ldt-svc-arrow:active .icon-container svg { transform: none; }
}

/* WHY: Marketing Services (#68) "Our Services" grid (Figma 33366:18260) reuses the Home Services
   dark card (.ldt-svc-card: flex column, orange arrow pinned bottom-right, static shadow). The
   Figma headings here are a single service name at ~46px with NO reserved 3-line box, so override
   the .ldt-svc-card h3 clamp (max 36px + min-height:3.9em) — Marketing scales 28px->46px and drops
   the reservation (grid stretch equalises row heights instead). */
.ldt-mktg-card > h3 { min-height: 0; font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.875rem) !important; }
/* Arrow-only affordance (like Home Services): the orange .ldt-svc-arrow is the clickable target to
   each service page. (A whole-card stretched-link doesn't work here — the icon-block <a> carries an
   inline transform, which makes IT the containing block for a pseudo-overlay, clipping it to the
   47px arrow.) */
/* The full-width closing card ("Content Marketing Management") gets presence to match Figma's tall
   269px wide card. */
.ldt-mktg-card--wide { min-height: 220px; }

/* WHY: CC-2 [LDT-CC-2-CENTER-FOCUS] — Home Portfolio is a CENTER-FOCUS (coverflow) carousel:
   the active middle slide renders full-size, the prev/next peek in SMALLER (Figma 33366:15255 —
   center 845x537, side peeks 265x398 ≈ 0.74 scale, vertically centered). lazarus/carousel is a
   native scroll track (no Splide/focus attr), so: full-bleed the track, scroll-snap each slide to
   center, scale every slide DOWN by default, and scale the JS-marked `.is-active` (centered) slide
   back to full. ldt-interactions.js toggles .is-active on the slide nearest the track center.
   Opt-in via .ldt-portfolio-carousel; inert until that class + the JS are present.
   NOTE: source screenshot (att 37) is 402px wide → the 845px center upscales/softens until real
   per-client assets land (see .claude/section-qa/case-carousel/CC-1-CC-3-rebind-images.php). */
/* the screenshot fills the slide width (active reads large on desktop; full-width card on mobile).
   max-width:none overrides the constrained-layout cap so the image reaches the full slide width
   (Figma center ≈ 845px) instead of stopping at the theme content-size. */
.ldt-portfolio-carousel .wp-block-image,
.ldt-portfolio-carousel .wp-block-image img { width: 100%; max-width: none; height: auto; }

/* Center-focus coverflow is DESKTOP ONLY. At ≤781px the lazarus-carousel base stacks the slides
   vertically (block.json "stacks on mobile") — we must NOT scale them there. 782px matches the
   plugin's own mobile breakpoint (lazarus-blocks.php @media max-width:781px). */
@media (min-width: 782px) {
  .ldt-portfolio-carousel {
    --ldt-center-w: min(845px, 86vw);
    --ldt-peek-scale: 0.74;            /* Figma side height 398 / center 537 */
    width: 100vw;                      /* full-bleed out of the constrained 1080 parent so peeks show */
    max-width: none;
    margin-inline: calc(50% - 50vw);
  }
  /* contain the 100vw full-bleed so it never adds a horizontal page scrollbar (scrollbar-width
     makes 100vw wider than the content box). The section group isn't sticky, so clip is safe. */
  .wp-block-group:has(> .ldt-portfolio-carousel) { overflow-x: clip; }

  /* track display/overflow/snap-type come from the plugin base; we only re-center + space it */
  .ldt-portfolio-carousel .lazarus-carousel__track {
    align-items: center;               /* vertically center the smaller peeks against the tall active */
    gap: clamp(12px, 2.3vw, 33px);
    padding-inline: max(16px, calc((100vw - var(--ldt-center-w)) / 2));
    scroll-behavior: smooth;
  }
  .ldt-portfolio-carousel .lazarus-carousel__track > * {
    flex: 0 0 var(--ldt-center-w);
    scroll-snap-align: center;
    transform: scale(var(--ldt-peek-scale));
    transform-origin: center center;
    opacity: 0.82;
    transition: transform 0.45s ease, opacity 0.45s ease;
  }
  .ldt-portfolio-carousel .lazarus-carousel__track > .is-active { transform: scale(1); opacity: 1; }
  /* scale the immediate neighbors toward the edge FACING the active, so their visible inner edge
     stays at the 33px layout gap instead of receding ~110px from a center-origin shrink (Figma
     gap is 33px, not ~143px). Outer slides keep center origin — they're off-screen anyway. */
  .ldt-portfolio-carousel .lazarus-carousel__track > .is-active + * { transform-origin: left center; }
  .ldt-portfolio-carousel .lazarus-carousel__track > *:has(+ .is-active) { transform-origin: right center; }
}
/* loop clones (added by ldt-interactions.js for the both-sides default peek) are desktop-only;
   keep them out of the mobile vertical stack so it shows the 3 real slides once each. */
@media (max-width: 781px) {
  .ldt-portfolio-carousel .lazarus-carousel__track > [data-clone] { display: none; }
}
@media (min-width: 782px) and (prefers-reduced-motion: reduce) {
  .ldt-portfolio-carousel .lazarus-carousel__track { scroll-behavior: auto; }
  .ldt-portfolio-carousel .lazarus-carousel__track > * { transition: none; }
}
/* end LDT-CC-2-CENTER-FOCUS */

/* WHY (2026-07-01): Case Study "Execution" (Figma 33366:16330) is a plain horizontal-scroll carousel of
   ~390px step cards with the nav arrows + a progress line ABOVE the cards on the left (not the portfolio
   coverflow). Built on lazarus/carousel: widen slides to 390, stretch cards to equal height, and move the
   JS-injected nav buttons to the top-left as always-visible outlined circles with a progress rule beside
   them. Base block stacks the slides vertically + hides nav ≤781px. */
.ldt-exec-carousel .lazarus-carousel__track > * { width: min(88%, 390px); align-self: stretch; }
@media (min-width: 782px) {
	.ldt-exec-carousel { padding-top: 60px; }
	/* progress line spanning to the right of the two arrows (Figma 33366:16345/16346): a faint track
	   (::before) + a bright fill (::after) whose width tracks scroll via --exec-progress (ldt-interactions.js). */
	.ldt-exec-carousel::before { content: ""; position: absolute; top: 27px; left: 116px; right: 4px;
		height: 1px; background: rgba(255, 255, 255, .25); }
	.ldt-exec-carousel::after { content: ""; position: absolute; top: 27px; left: 116px; right: 4px;
		height: 2px; margin-top: -0.5px; background: #fff; border-radius: 2px;
		transform: scaleX(var(--exec-progress, 0)); transform-origin: left center;
		transition: transform .15s ease; }
	.ldt-exec-carousel .lazarus-carousel__nav { top: 4px; transform: none; opacity: 1;
		width: 46px; height: 46px; background: transparent; border: 1.5px solid rgba(255, 255, 255, .55);
		box-shadow: none; }
	.ldt-exec-carousel .lazarus-carousel__nav:active { transform: scale(.94); }
	.ldt-exec-carousel .lazarus-carousel__prev { left: 4px; }
	.ldt-exec-carousel .lazarus-carousel__next { left: 62px; right: auto; }
}

/* WHY: Home Process (#36) number badges — Figma 33366:15278 shows the 02/03 badges as OUTLINED
   pills (transparent fill + 2px border), not filled: 02 = white border on the blue card, 03 =
   black border on the white card. The badge bg is removed via block attrs; the border is here so
   we don't hand-serialize WP's border markup (avoids editor block-validation drift). Opt-in via
   .ldt-num-outline + a color modifier. */
.ldt-num-outline { border-width: 2px; border-style: solid; background: transparent; }
.ldt-num-light { border-color: var(--wp--preset--color--theme-01); }
.ldt-num-dark { border-color: #000000; }

/* WHY: Home Process (#36) cards must look like a STACK of separate rounded cards overlapping each
   other (Figma 33366:15279) — Build on top, Optimize then Scale fanned below, each a 16px-rounded
   card with a drop shadow, overlapping ~38px. The block was one clipped container (flush bars); now
   each card is .ldt-process-card and we round/shadow/overlap here. The grid is forced to an
   asymmetric [label | description] split so the description doesn't over-wrap (which made the cards
   too tall vs Figma). Desktop only (≥782px); mobile stacks the cards normally with a small gap. */
.ldt-process-stack { position: relative; }
.ldt-process-card { position: relative; border-radius: 16px; cursor: pointer; transition: margin-top .35s ease; }
/* exact Figma per-card drop shadows (33366:15287/15296/15305) — Build casts down, Optimize/Scale up */
.ldt-process-stack > .ldt-process-card:nth-child(1) { box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.25); }  /* Build */
.ldt-process-stack > .ldt-process-card:nth-child(2) { box-shadow: 3px -2px 2px rgba(0, 0, 0, 0.25); } /* Optimize */
.ldt-process-stack > .ldt-process-card:nth-child(3) { box-shadow: 1px -2px 2px rgba(0, 0, 0, 0.25); } /* Scale */
@media (min-width: 782px) {
  .ldt-process-card {
    /* WHY: fixed label column (was max-content) so all 3 cards' body text left-aligns to the SAME x
       like Figma 33366:15286 — max-content sized the label per-title ("Optimize" wider than "Build"),
       leaving the bodies ragged. */
    grid-template-columns: clamp(17rem, 27vw, 26rem) minmax(0, 1fr) !important;
    column-gap: clamp(24px, 4vw, 69px);
    /* top-align content (Figma items-start) + 48px top pad so the -38px overlap only covers the
       card's empty top padding, never the text */
    align-items: start !important;
    padding: 48px clamp(40px, 5.5vw, 83px) 44px !important;
  }
  .ldt-process-stack > .ldt-process-card:not(:first-child) { margin-top: -38px; } /* overlap */
  .ldt-process-stack > .ldt-process-card:nth-child(1) { z-index: 3; } /* Build on top */
  .ldt-process-stack > .ldt-process-card:nth-child(2) { z-index: 2; }
  .ldt-process-stack > .ldt-process-card:nth-child(3) { z-index: 1; }
  /* WHY: hover/focus reveal — same interaction as the Home Features "Why" deck (#33): lift the
     hovered card above the stack (z) and push the FOLLOWING card down to separate it from the deck.
     :focus-within covers keyboard/touch via the tabindex added in ldt-interactions.js. */
  .ldt-process-stack > .ldt-process-card:hover,
  .ldt-process-stack > .ldt-process-card:focus-within { z-index: 4; }
  .ldt-process-stack > .ldt-process-card:hover + .ldt-process-card,
  .ldt-process-stack > .ldt-process-card:focus-within + .ldt-process-card { margin-top: var(--wp--preset--spacing--20); }
}
@media (max-width: 781px) {
  .ldt-process-stack > .ldt-process-card:not(:first-child) { margin-top: 14px; } /* small gap on mobile */
}
@media (prefers-reduced-motion: reduce) {
  .ldt-process-card { transition: none; }
}

/* WHY: Home Team (#41) photo cards — Figma 33366:15319: square headshots, 16px rounded, drop
   shadow 2px 2px 3.1px rgba(0,0,0,0.27). Images fill the grid cell as a square cover crop. */
.ldt-team-photo { margin: 0; border-radius: 16px; box-shadow: 2px 2px 3.1px rgba(0, 0, 0, 0.27); }
.ldt-team-photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; }

/* WHY: About Team (#55) cards stack the photo flush on top of a white card body, so the photo
   must round only its TOP corners (bottom edge sits flush against the name/title block — a
   rounded bottom reads as a detached pill). Scoped under .ldt-team-card so the Home Team (#41)
   standalone square photos keep their all-corner 16px radius. Figma 33366:16534. */
.ldt-team-card .ldt-team-photo,
.ldt-team-card .ldt-team-photo img { border-radius: 16px 16px 0 0; }

/* WHY: shared blue "noise" backdrop texture for the Home Team (#41) + Home CTA (#42)
   sections (Figma 33366:15318 / 33366:15342). Both Figma frames layer a grayscale grain
   image over the blue gradient at mix-blend-mode:color-dodge / opacity 0.46 — that texture
   is what makes the two sections read as one continuous blue field, so the light Team card
   blends into the CTA below it. Not motion, but this is the only standalone CSS file allowed
   and a theme-relative url() keeps the asset portable across environments (no media-ID/domain
   drift). The ::before sits behind content (isolated stacking context); direct children ride
   above it. Texture is purely decorative → no reduced-motion concern. */
.ldt-home-team,
.ldt-home-cta,
.ldt-wd-split { position: relative; isolation: isolate; }
.ldt-home-team::before,
.ldt-home-cta::before,
.ldt-wd-split::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image: url("../images/ldt-bg-texture.jpg");
	background-size: cover;
	background-position: center;
	mix-blend-mode: color-dodge;
	opacity: 0.46;
	pointer-events: none;
	z-index: 0;
}
.ldt-home-team > *,
.ldt-home-cta > *,
.ldt-wd-split > * { position: relative; z-index: 1; }

/* WHY: Web & Design "Split Content" section (#89, Figma 33366:19125). The blue field carries the
   same color-dodge noise texture as Home Team/CTA (shared ::before above) and rounds its BOTTOM
   corners 32px to curve into the next section. The image card gets the Figma drop shadow
   (6px 4px 8.6px rgba(0,0,0,.23), follows the 32px radius) + a right-edge dark gradient overlay
   (linear-gradient to left, rgba(0,0,0,.64) -> transparent by ~62%) so the light photo edges
   read as a grounded card, not a chalky cut-out floating on the blue. */
.ldt-wd-split { border-radius: 0 0 32px 32px; }
.ldt-wd-image { position: relative; }
.ldt-wd-image img { box-shadow: 6px 4px 8.6px rgba(0, 0, 0, 0.23); }
.ldt-wd-image::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 32px;
	background: linear-gradient(to left, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0) 61.7%);
	pointer-events: none;
}
/* WD Approach (#90): image sits on the RIGHT (text left), so mirror the edge-shade to darken the
   LEFT edge toward the copy — same split-content card treatment as #89, flipped. */
.ldt-wd-image-flip::after { background: linear-gradient(to right, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0) 61.7%); }

/* WHY: About Team (#55) member cards — Figma 33366:16534 team grid. Each card shows the
   headshot + name/title at rest; on hover (desktop) or tap/focus (touch + keyboard, via the
   tabindex added in ldt-interactions.js) a blue bio card fades up and covers the card. Coeli
   O'Connell's blue card is the Figma example of this revealed state — every member's card
   reveals the same way. Background / padding / radius live on the .ldt-team-bio block (block
   attrs); only the overlay positioning + reveal transition + focus ring are here (interaction
   state → motion.css per the CSS-ladder house rule). Reveal honors prefers-reduced-motion. */
.ldt-team-card { position: relative; cursor: pointer; }
.ldt-team-card .ldt-team-bio {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.ldt-team-card:hover .ldt-team-bio,
.ldt-team-card:focus-within .ldt-team-bio,
.ldt-team-card.is-open .ldt-team-bio {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .25s ease, transform .25s ease, visibility 0s;
}
.ldt-team-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--theme-05, #011bb8);
	outline-offset: 2px;
}
/* WHY: Figma 33366:16633 anchors the bio card's name/title (and the divider above them) to the
   bottom while the bio copy fills the space above — the bio paragraph grows so the divider +
   name + title sit at the foot of the card. The full-width separator between bio and name is a
   core/separator (has-css-opacity = faint white line inheriting the card's currentColor). */
.ldt-team-card .ldt-team-bio > p:first-child { flex: 1 0 auto; }
/* is-layout-constrained injects margin-inline:auto on every child; inside the flex column that
   centers the name/title to their content width. Figma 33366:16633 left-aligns them full width. */
.ldt-team-card .ldt-team-bio > * { margin-left: 0 !important; margin-right: 0 !important; max-width: 100%; text-align: left; }
.ldt-team-card .ldt-team-bio .wp-block-separator { width: 100%; margin: 0; border-color: currentColor; opacity: 0.4; }
@media (prefers-reduced-motion: reduce) {
	.ldt-team-card .ldt-team-bio { transition: none; transform: none; }
}
/* Resting-state photo slot for a member without a headshot yet (Coeli, until her photo is
   supplied) — a branded initials avatar that matches the 65/57 photo box so the grid stays
   uniform. Swap for a core/image when the headshot lands. */
.ldt-team-photo-ph {
	aspect-ratio: 65 / 57;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* WHY: About Team (#55) 3D pointer-tilt — cards rotate toward the cursor (rotateX/rotateY set
   per-frame by ldt-interactions.js via --ldt-rx/--ldt-ry), scale up slightly, and lift their
   shadow on hover. Pointer-only effect (no tilt on touch); whole effect is gated behind
   prefers-reduced-motion:no-preference so opt-out users get the flat card + plain bio reveal. */
@media (prefers-reduced-motion: no-preference) {
	.ldt-team-card {
		transform: perspective(900px) rotateX(var(--ldt-rx, 0deg)) rotateY(var(--ldt-ry, 0deg)) scale(var(--ldt-scale, 1));
		transform-style: preserve-3d;
		transition: transform .18s ease, box-shadow .18s ease;
		will-change: transform;
	}
	.ldt-team-card:hover,
	.ldt-team-card:focus-within {
		--ldt-scale: 1.03;
		z-index: 3;
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
	}
}

/* WHY: Figma 33366:16746 nav uses a 3-line hamburger (vector 27x18); core/navigation's
   responsive-open button hard-codes a 2-bar SVG. Hide the SVG and paint 3 bars (2px thick,
   6px gaps -> 18px tall) via stacked gradients in currentColor (theme-01 white on the pill). */
.ldt-sticky-header .wp-block-navigation__responsive-container-open svg { display: none; }
.ldt-sticky-header .wp-block-navigation__responsive-container-open {
	width: 27px;
	height: 18px;
	color: var(--wp--preset--color--theme-01);
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-size: 27px 2px;
	background-position: left top, left center, left bottom;
	background-repeat: no-repeat;
}

/* WHY: Web & Design page revision (2026-06-30). Designer asked to drop the dark edge-shade on the
   Approach (#90) photo — Figma 33366:19141 shows a clean photo card with no overlay. ldt-no-shade
   kills the ::after gradient on the ldt-wd-image. The two-class selector out-specifies the base
   ::after rules regardless of stylesheet order. (The Split #89 image keeps its overlay — see below.) */
.ldt-no-shade.ldt-wd-image::after { content: none; background: none; }

/* WHY (2026-07-01): the Split (#89) "Design that performs" image is now a pre-composed PNG
   (design-that-performs.png) with its rounded corners + shadow baked into the artwork. Strip the
   shared .home-intro__media card treatment for the WD Split ONLY so nothing double-renders: kill the
   32px radius, the drop shadow, the edge-shade ::after overlay, and the 659/602 object-fit crop
   (letting the PNG show at its natural ratio). Scoped to .ldt-wd-split so the Home intro (#32) card
   keeps its full treatment. */
.ldt-wd-split .home-intro__media { box-shadow: none; border-radius: 0; }
.ldt-wd-split .home-intro__media img { border-radius: 0; aspect-ratio: auto; object-fit: fill; }
.ldt-wd-split .home-intro__media::after { content: none; }

/* WHY: WD Key Characteristics (#91) cards — Figma 33366:19157 shows the blue "overlapping windows"
   glyph top-left of each card (51x50, #365AF4 = theme-07). Rendered as a masked ::before (same
   squares path the Home card-deck uses) so the card markup stays core blocks (Rule 18) — the icon is
   decorative and identical on all four cards. mask alpha drives the shape; theme-07 paints it blue. */
.ldt-keychar-card::before {
	content: "";
	display: block;
	width: 48px;
	height: 47px;
	margin-bottom: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--theme-07);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2051%2050%22%3E%3Cpath%20d%3D%22M6.85731%2041.1393V14.343H2.34423C1.05478%2014.343%200%2015.3937%200%2016.6782V47.6673C0%2048.9518%201.05478%2050.0025%202.34423%2050.0025H33.4541C34.7435%2050.0025%2035.7983%2048.9518%2035.7983%2047.6673V43.4769H9.20154C7.91209%2043.4769%206.85731%2042.4262%206.85731%2041.1417V41.1393Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M15.2042%207.81738H9.19909C7.90964%207.81738%206.85486%208.86807%206.85486%2010.1525V14.343H15.2017V7.81738H15.2042Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M35.7959%2043.4744H40.309C41.5984%2043.4744%2042.6532%2042.4237%2042.6532%2041.1393V35.657H35.7959V43.4744Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M48.6582%200H17.5483C16.2589%200%2015.2041%201.05069%2015.2041%202.33514V7.81742H40.3089C41.5983%207.81742%2042.6531%208.86811%2042.6531%2010.1526V35.6595H48.6582C49.9476%2035.6595%2051.0024%2034.6088%2051.0024%2033.3243V2.33514C51.0024%201.05069%2049.9476%200%2048.6582%200Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M17.5483%2035.657H35.7958V16.6757C35.7958%2015.3913%2034.741%2014.3406%2033.4516%2014.3406H15.2041V33.3219C15.2041%2034.6063%2016.2589%2035.657%2017.5483%2035.657Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2051%2050%22%3E%3Cpath%20d%3D%22M6.85731%2041.1393V14.343H2.34423C1.05478%2014.343%200%2015.3937%200%2016.6782V47.6673C0%2048.9518%201.05478%2050.0025%202.34423%2050.0025H33.4541C34.7435%2050.0025%2035.7983%2048.9518%2035.7983%2047.6673V43.4769H9.20154C7.91209%2043.4769%206.85731%2042.4262%206.85731%2041.1417V41.1393Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M15.2042%207.81738H9.19909C7.90964%207.81738%206.85486%208.86807%206.85486%2010.1525V14.343H15.2017V7.81738H15.2042Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M35.7959%2043.4744H40.309C41.5984%2043.4744%2042.6532%2042.4237%2042.6532%2041.1393V35.657H35.7959V43.4744Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M48.6582%200H17.5483C16.2589%200%2015.2041%201.05069%2015.2041%202.33514V7.81742H40.3089C41.5983%207.81742%2042.6531%208.86811%2042.6531%2010.1526V35.6595H48.6582C49.9476%2035.6595%2051.0024%2034.6088%2051.0024%2033.3243V2.33514C51.0024%201.05069%2049.9476%200%2048.6582%200Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M17.5483%2035.657H35.7958V16.6757C35.7958%2015.3913%2034.741%2014.3406%2033.4516%2014.3406H15.2041V33.3219C15.2041%2034.6063%2016.2589%2035.657%2017.5483%2035.657Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* WHY: WD Approach (#90) body copy — Figma 33366:19141 "Paragraph/body default" = Open Sans 600,
   16px, line-height 1.7, #000, and a fixed measure so it breaks per the design. The max-width
   reproduces the Figma per-line break at desktop; mobile reflows (mobile-first, Rule 2). */
/* margin-inline-start:0 + end:auto cancels the margin-inline:auto that is-layout-constrained injects
   on narrower-than-content children (which centered the copy → a ~58px indent vs the heading). Left-
   aligns the body copy flush under "Our Approach" per the 2026-06-30 revision. */
.ldt-wd-copy { max-width: 29rem; margin-inline-start: 0 !important; margin-inline-end: auto !important; }

/* WHY: WD Results (#92) middle image fills the equal-height card row (Figma 33366:19213 — the
   384x386 photo matches the two text cards). The constrained 3-track grid stretches all columns; the
   figure + img stretch to the row height with a cover crop. */
.ldt-wd-results-img { height: 100%; margin: 0; align-self: stretch; }
.ldt-wd-results-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }

/* WHY (2026-06-30 revision): tighten the stat/benefit list indent inside the Results (#92) cards.
   Designer wants a smaller indent than the 40px UA default — pull the bullets left to a 24px
   padding-left. Set explicitly (not margin) so the is-layout-constrained margin:auto cascade can't
   fight it. Scoped to .ldt-wd-results. */
.ldt-wd-results .ldt-card .wp-block-list { padding-left: 24px; }

/* WHY: WD closing CTA (#222) sits flush against the footer per Figma 33366:19220 (no cream gap);
   zero the root block-gap above the footer on the Web & Design page only. */
.page-id-93 .wp-site-blocks > footer.wp-block-template-part { margin-top: 0; }

/* WHY: Industries "We partner with…" list (pattern #249, Figma 33366:16492) uses right-pointing
   triangle markers, not disc bullets. Render them as a CSS border-triangle on each .ldt-partner-item
   so the markup stays plain editable paragraphs (no per-item icon-block). Blue #365AF4 to match the
   Figma polygon fill (exported from node 33366:16495). */
.ldt-partner-item { position: relative; padding-left: 2.2rem; }
.ldt-partner-item::before {
	content: ""; position: absolute; left: 0; top: 0.5em;
	width: 0; height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 11px solid #365AF4;
}
/* Two industry columns of 4 (Figma 33366:16488): equal-width flex tracks that sit side-by-side on
   desktop and wrap to a single stack < ~650px. Each column is content-sized by default (constrained
   group), which overflowed the card and wrapped — flex:1 with a min-width:0 forces even 2-up tracks. */
.ldt-partner-cols { align-items: flex-start; max-width: none !important; width: 100%; }
.ldt-partner-cols > .wp-block-group { flex: 1 1 300px; min-width: 0; }
/* WHY: Industries Why right-column photos are square 465x465 in Figma (33366:16482/16483); the
   2048x1365 source would otherwise render 3:2. Force a 1:1 cover crop. */
.ldt-industries-why__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* WHY: On the mobile board (Figma 33366:18076) the two Why photos sit 2-up ABOVE the text block,
   not stacked below it (which is the desktop right-column order). Once .ldt-why-grid collapses to a
   single column (<=781px covers the 430 + 768 gates), pull the media group first and lay the two
   figures side-by-side. Desktop keeps the stacked right-column layout. */
@media (max-width: 781px) {
	.ldt-why-grid > .ldt-industries-why__media { order: -1; display: flex; flex-direction: row; gap: 14px; }
	.ldt-industries-why__media > figure { flex: 1 1 0; margin: 0; }
}

/* WHY: Industries hero spacing is dialed to Figma-adjacent gaps on desktop — 170px between the floating
   nav pill and the "Industries We Excel In" eyebrow (hero padding-top 282px) and 147px between the
   scroll arrow and the hero's bottom edge (padding-bottom 147px, both set as block attrs). Those px
   are desktop values; scale them down on the mobile board so the cream hero isn't mostly empty. */
@media (max-width: 781px) {
	.ldt-industries-hero { padding-top: 140px !important; padding-bottom: 88px !important; }
}

/* WHY: the two "Your customers want to know / Your business is" lists were carrying the UA ~40px
   bullet indent, pushing them right of the body copy. Pull them flush-left so the bullet markers line
   up with the "Y" in "Your customers want to know:" above. Scoped to Industries Why. */
.ldt-industries-why .wp-block-list { padding-left: 10px; margin-inline-start: 0 !important; list-style-position: inside; }

/* WHY: Industries Why "playbooks" card carries the Figma nodes glyph (33366:16473, #365AF4 on the
   black card) to the left of the copy — icon fixed 63px, text fills the rest, top-aligned. */
.ldt-why-card-body { flex-wrap: nowrap; align-items: flex-start; }
.ldt-why-card-icon { margin: 0; flex: 0 0 auto; }
.ldt-why-card-icon img { width: 63px; height: auto; display: block; }
.ldt-why-card-body > p { flex: 1 1 0; margin: 0; }

/* WHY: Case Studies archive (Figma 33366:15834 desktop / 33366:15994 mobile). Cream cards on the
   dark #181818 grid field: image/placeholder on top (rounded via card overflow), title + tag pills,
   round black arrow pinned bottom-right. Card is a flex column so the arrow sits at the card bottom
   even when the grid stretches shorter cards to match the tallest in the row (mirrors .ldt-svc-card).
   The margin-inline:0 !important overrides is-layout-constrained's injected auto margins. */
.ldt-cs-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px;
	transition: transform .3s ease, box-shadow .3s ease; }
/* WHY (2026-07-01): equalize card heights across a grid row — the grid stretches each <li> to the
   tallest in the row, but the card must fill that <li> for shorter cards to match. */
.wp-block-post-template.is-layout-grid { align-items: stretch; }
.wp-block-post-template.is-layout-grid > li { height: 100%; }
.ldt-cs-card { height: 100%; }
.ldt-cs-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }
.ldt-cs-card > * { margin-left: 0 !important; margin-right: 0 !important; }
.ldt-cs-card > figure { margin: 0; }
.ldt-cs-card img { display: block; width: 100%; transition: transform .5s ease; }
.ldt-cs-card:hover img { transform: scale(1.04); }
/* placeholder "image" for case studies without a hero yet — light periwinkle-grey 16:10 block */
.ldt-cs-ph { aspect-ratio: 16 / 10; background: #E6EAF0; }
/* body fills remaining card height so the arrow can be pushed to the bottom; flex gap gives a reliable
   16px between heading and tags (the constrained blockGap margins don't apply once display is flex) */
.ldt-cs-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 16px; }
.ldt-cs-body > * { margin-left: 0 !important; margin-right: 0 !important; }
/* WHY (2026-07-01): reserve a 2-line title box (line-height 1.2 → 2.4em) so the service pills and the
   bottom arrow align across cards whether the title runs 1 or 2 lines. */
.ldt-cs-title { margin: 0; min-height: 2.4em; }
.ldt-cs-tag { display: inline-flex; align-items: center; line-height: 1.6; }
.ldt-cs-arrow { margin-top: auto; }
.ldt-cs-arrow .icon-container { transition: transform .25s ease; }
.ldt-cs-card:hover .ldt-cs-arrow .icon-container { transform: translateX(3px); }

/* dynamic archive cards (query loop over the case_study CPT): frame the featured image the same as
   the old static placeholder, and render the Services post-terms as the uniform light-blue pills. */
.ldt-cs-card .wp-block-post-featured-image { margin: 0; }
.ldt-cs-card .wp-block-post-featured-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.ldt-cs-card .wp-block-post-title { margin: 0; }
.ldt-cs-card .wp-block-post-title a { color: inherit; text-decoration: none; }
.ldt-cs-card .wp-block-post-terms { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ldt-cs-card .wp-block-post-terms .wp-block-post-terms__separator { display: none; }

/* WHY: shared Services pill spacing matches Figma 33366:15860 (px-20 py-2, 14px bold uppercase). Per-term
   COLORS are keyed off the term slug in the post-terms link href (post-terms adds no per-term class), so
   the dynamic archive cards + single meta bar keep the orange/blue/light-blue/cream palette. */
.ldt-cs-card .wp-block-post-terms a,
.ldt-csx-metabar .wp-block-post-terms a {
	display: inline-flex; align-items: center; padding: 2px 20px; border-radius: 999px;
	background: #9FBDFF; color: #011BB8; line-height: 1.5; text-decoration: none; }
/* archive cards: kicker-style pills (Figma 33366:15860 — 14px bold uppercase) */
.ldt-cs-card .wp-block-post-terms a { font-weight: 700; font-size: 14px; text-transform: uppercase; }
/* single meta bar: larger mixed-case pills (Figma 33366:16169 — 16px semibold) */
.ldt-csx-metabar .wp-block-post-terms a { font-weight: 600; font-size: 16px; }
.wp-block-post-terms a[href*="/case-study-service/paid-ads"],
.wp-block-post-terms a[href*="/case-study-service/branding"] { background: #FF8041; color: #131313; }
.wp-block-post-terms a[href*="/case-study-service/seo"] { background: #011BB8; color: rgba(255, 255, 255, .9); }
.wp-block-post-terms a[href*="/case-study-service/web-design"] { background: #9FBDFF; color: #011BB8; }
.wp-block-post-terms a[href*="/case-study-service/social-media"] { background: #FFF9F3; color: #131313; }

/* WHY: hero gaps are dialed to the desktop Figma — 244px between the floating nav pill and the "The
   Proof" eyebrow (padding-top 356px: pill bottom sits 144px down, intro top at 32px) and 244px between
   the scroll arrow and the hero's bottom edge (padding-bottom 244px). Those px are desktop values;
   scale them down on the mobile board so the cream hero isn't mostly empty (mirrors .ldt-industries-hero). */
@media (max-width: 781px) {
	.ldt-cs-hero { padding-top: 150px !important; padding-bottom: 110px !important; }
}

/* WHY: the closing CTA (rounded-bottom, dark) is designed to nest FLUSH into the footer. The block
   template injects a root blockGap as margin-top on the footer template part, leaving a page-bg strip
   between the CTA and the footer. Zero it so the CTA meets the footer with no gap. Footer is the last
   child of .wp-site-blocks (header is the first), so this never touches the header spacing. */
.wp-site-blocks > .wp-block-template-part:last-child { margin-top: 0 !important; }

/* ===== Case Study — single (/case-studies/{slug}/, Figma 33366:16169 desktop / 33366:17437 mobile) =====
   The single-case_study template = header + cream hero (post-title) + dynamic meta bar + post-content
   (the authored body) + CTA + footer. Most section styling is block attributes; these rules cover the
   things attributes can't do. */

/* hero: same cream treatment as the archive intro but tighter — scale the big desktop gaps on mobile */
@media (max-width: 781px) {
	.ldt-csx-hero { padding-top: 140px !important; padding-bottom: 80px !important; }
}

/* meta bar: Industry / Services Provided (post-terms pills) / Focus Area. post-terms exposes no
   per-term class, so every service pill shares one uniform light-blue style. */
.ldt-csx-metabar .wp-block-post-terms { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ldt-csx-metabar .wp-block-post-terms a { transition: transform .2s ease; }
.ldt-csx-metabar .wp-block-post-terms a:hover { transform: translateY(-2px); }
.ldt-csx-metabar .wp-block-post-terms .wp-block-post-terms__separator { display: none; }
/* three columns (Industry / Services / Focus) with thin dividers, like the footer lists */
.ldt-csx-metabar__col { border-left: 1px solid rgba(255, 255, 255, .3); padding-left: 24px; }
.ldt-csx-metabar__col:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 781px) { .ldt-csx-metabar__col { border-left: 0; padding-left: 0; } }
/* WHY (2026-07-01): match Figma 33366:16182 column proportions (Industry 262 / Services 478 / Focus 262)
   on desktop so the "Services Provided" label + its four service pills stay on one row; the 20rem grid
   still collapses to a single column on mobile. */
@media (min-width: 782px) {
	.ldt-csx-metabar > .wp-block-group.is-layout-grid { grid-template-columns: 262fr 478fr 262fr; }
}

/* stat cards (Key Results): dark gradient tiles. Figma 33366:16217 puts a blue geometric icon LEFT of the
   number+label — lay the card out as [icon | text] and mask a per-card SVG (blue #365AF4) via nth-of-type
   (no markup edit). Grid stretches equal height. (2026-07-01) */
.ldt-cs-stat { height: 100%; display: grid; grid-template-columns: 42px 1fr; column-gap: 16px;
	row-gap: 2px; grid-auto-rows: min-content; align-content: center; }
.ldt-cs-stat > * { margin: 0 !important; grid-column: 2; }
.ldt-cs-stat .wp-block-heading { margin: 0; }
.ldt-cs-stat::before { content: ""; grid-column: 1; grid-row: 1 / span 2; align-self: center;
	width: 42px; height: 42px; background-color: #365AF4;
	-webkit-mask: var(--ldt-stat-icon) center / contain no-repeat;
	mask: var(--ldt-stat-icon) center / contain no-repeat; }
.ldt-cs-stat:nth-of-type(1) { --ldt-stat-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ccircle%20cx%3D%278.5%27%20cy%3D%278%27%20r%3D%273.5%27%2F%3E%3Cpath%20d%3D%27M2%2020c0-3.6%202.9-6%206.5-6s6.5%202.4%206.5%206z%27%2F%3E%3Ccircle%20cx%3D%2717.6%27%20cy%3D%279%27%20r%3D%272.8%27%2F%3E%3Cpath%20d%3D%27M16%2013.4c3%20.3%205%202.6%205%205.6h-3.1c0-2.2-.7-4.1-1.9-5.6z%27%2F%3E%3C%2Fsvg%3E"); }  /* leads */
.ldt-cs-stat:nth-of-type(2) { --ldt-stat-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202c.7%205%203.3%207.6%208%208-4.7.4-7.3%203-8%208-.7-5-3.3-7.6-8-8%204.7-.4%207.3-3%208-8z%27%2F%3E%3C%2Fsvg%3E"); }  /* quoted */
.ldt-cs-stat:nth-of-type(3) { --ldt-stat-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%203l9%205-9%205-9-5z%27%2F%3E%3Cpath%20d%3D%27M2.2%2012.4L4%2011.4l8%204.4%208-4.4%201.8%201L12%2017.6z%27%2F%3E%3Cpath%20d%3D%27M2.2%2016.2L4%2015.2l8%204.4%208-4.4%201.8%201L12%2021.4z%27%2F%3E%3C%2Fsvg%3E"); }  /* roas */
.ldt-cs-stat:nth-of-type(4) { --ldt-stat-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%206.2l9%209-2.8%202.8L12%2011.8l-6.2%206.2L3%2015.2z%27%2F%3E%3C%2Fsvg%3E"); }  /* revenue */
.ldt-cs-stat:nth-of-type(5) { --ldt-stat-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cellipse%20cx%3D%2712%27%20cy%3D%275.5%27%20rx%3D%277.5%27%20ry%3D%272.7%27%2F%3E%3Cellipse%20cx%3D%2712%27%20cy%3D%2712%27%20rx%3D%277.5%27%20ry%3D%272.7%27%2F%3E%3Cellipse%20cx%3D%2712%27%20cy%3D%2718.5%27%20rx%3D%277.5%27%20ry%3D%272.7%27%2F%3E%3C%2Fsvg%3E"); }  /* spend */
.ldt-cs-stat:nth-of-type(6) { --ldt-stat-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20x%3D%273%27%20y%3D%2713%27%20width%3D%274.5%27%20height%3D%278%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%279.8%27%20y%3D%278%27%20width%3D%274.5%27%20height%3D%2713%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%2716.5%27%20y%3D%273%27%20width%3D%274.5%27%20height%3D%2718%27%20rx%3D%271%27%2F%3E%3C%2Fsvg%3E"); }  /* roi */

/* panels (The Challenge / The Strategy / The Results) + Execution step cards: keep the bulleted lists
   flush under the copy instead of carrying the ~40px UA indent / is-layout-constrained auto margins */
.ldt-cs-panel .wp-block-list,
.ldt-cs-step .wp-block-list {
	margin-inline-start: 0 !important; padding-left: 20px; list-style-position: outside; }
.ldt-cs-step__num { margin: 0; opacity: .9; }

/* WHY (2026-07-01): "The Results" -> 3-col Feature Grid (Figma 33366:16380). Three equal-height
   cards — black stats / photo / blue list — 373x386 in the design. The minimumColumnWidth grid
   collapses 3->2->1; a heading divider + a fill-to-height photo match the artboard, and matching
   the ~330px content width makes the copy wrap line-for-line like Figma (text-break gate). */
.ldt-cs-results { align-items: stretch; }
.ldt-cs-results > * { margin: 0; }
/* "The Results" is a single line in Figma (text-break gate). Our Bricolage renders ~13px wider than
   Figma's opsz-14 cut, so the 64px `huge` preset wrapped 1->2 lines (cards grew 386->460). Nudge to
   60px + tighter tracking so it fits one line naturally, keeping each card at the 386px artboard height. */
.ldt-cs-rcard .wp-block-heading { font-size: 60px !important; letter-spacing: -0.03em; }
/* divider under each card heading (Figma "Line 31"): light hairline, flush full width */
.ldt-cs-rbody { border-top: 1px solid rgba(255, 249, 243, .35); }
/* photo card fills the row height and carries the card radius */
.ldt-cs-rimg { margin: 0; aspect-ratio: 373 / 386; overflow: hidden; border-radius: 16px; }
.ldt-cs-rimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 782px) {
	.ldt-cs-rcard, .ldt-cs-rimg { min-height: 386px; }
	.ldt-cs-rimg { aspect-ratio: auto; height: 100%; }
}

/* WHY (2026-07-01): the single case study stacks rounded-bottom cards (cream hero, black meta bar,
   cream content, blue CTA). main blockGap is 0 (flush) and the page canvas is painted cream
   (#FFF9F3, the Figma artboard fill) so rounded-corner reveals + any residual gap never flash white. */
body.single-case_study { background-color: #FFF9F3; }