/*
 * WebOps Hosting — brand presentation CSS.
 *
 * ONLY the non-token, non-block brand styling theme.json + Foundry blocks can't
 * express. Design tokens live in theme.json (exposed as --wp--preset--*). The
 * WHMCS wo-components.css component styling is deliberately NOT copied here —
 * hero/card/pricing/stats/etc. are re-authored as re-skinned Foundry Marketing
 * blocks that read the theme.json tokens. This file holds only:
 *   1. legacy token aliases (so ported one-off markup that still references the
 *      source var names keeps working)
 *   2. the duotone icon-sprite sizing helper
 *   3. placeholders for the genuinely bespoke pieces flagged in recon
 *      (wo-hero-dashboard mockup, legal-page rhythm) — filled during conversion.
 */

/* 1. Legacy token aliases → theme.json presets (source parity for ported markup) */
:root {
	--primary:        var(--wp--preset--color--primary);
	--primary-dark:   var(--wp--preset--color--primary-hover);
	--primary-light:  var(--wp--preset--color--primary-light);
	--secondary:      var(--wp--preset--color--secondary);
	--secondary-dark: var(--wp--preset--color--secondary-dark);
	--accent:         var(--wp--preset--color--accent);
	--background:     var(--wp--preset--color--base);
	--surface:        var(--wp--preset--color--surface);
	--surface-warm:   var(--wp--preset--color--surface-warm);
	--text:           var(--wp--preset--color--contrast);
	--text-muted:     var(--wp--preset--color--muted);
	--headings:       var(--wp--preset--color--headings);
	--footer:         var(--wp--preset--color--footer);
	--r-sm: 4px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;  --r-2xl: 24px;
	--sh-sm: 0 1px 2px rgba(16,24,40,.06);
	--sh-md: 0 4px 12px rgba(16,24,40,.08);
	--sh-lg: 0 12px 28px rgba(16,24,40,.10);
	--sh-xl: 0 24px 48px rgba(16,24,40,.14);
	--container-max: 1200px;
}

/* 2. Duotone icon sprite: 1em square, inherits text color (Solar bold-duotone) */
.wo-icon,
.webops-icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: -0.125em;
	fill: currentColor;
	flex-shrink: 0;
}

/* Brand gradients (source: wo-components.css :root) — the crimson hero/tiles that
 * theme.json's neutral presets don't carry. Scoped local names. */
:root {
	--wo-grad-primary: linear-gradient(135deg, #9C0820 0%, #c41230 50%, #7A0619 100%);
	--wo-grad-hero:    linear-gradient(135deg, #7A0619 0%, #9C0820 45%, #B51A2F 100%);
	--wo-grad-gold:    linear-gradient(135deg, #F4B142 0%, #EE9B00 55%, #D68A00 100%);
	--wo-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================================
   3a. BESPOKE HERO (core group+columns+html; the wo-hero-dashboard
       health-report mockup is the documented Foundry bespoke exception —
       hero block asides don't take custom HTML). Full-bleed crimson band.
   ============================================================ */
.webops-hero {
	background: var(--wo-grad-hero);
	color: #fff;
	position: relative;
	overflow: hidden;
	padding: 4.5rem 0 5.5rem;
}
.webops-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(600px 400px at 8% 100%, rgba(238,155,0,.2), transparent 60%),
		radial-gradient(800px 500px at 100% 0%, rgba(0,95,115,.28), transparent 60%);
}
.webops-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
	background-size: 40px 40px; opacity: .5;
}
.webops-hero > .wp-block-group__inner-container,
.webops-hero .webops-hero__cols { position: relative; z-index: 1; }
.webops-hero .webops-hero__cols { align-items: center; gap: 3.5rem; }
@media (max-width: 980px) { .webops-hero .webops-hero__cols { gap: 2.5rem; } }

.webops-hero__eyebrow {
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .4rem .9rem; border-radius: 999px;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
	color: #fff; font-size: .75rem; font-weight: 500; margin: 0 0 1.25rem;
	font-family: var(--wo-mono); letter-spacing: .1em; text-transform: uppercase;
}
.webops-hero__eyebrow::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: #F4B142; box-shadow: 0 0 8px #F4B142;
}
.webops-hero__title {
	color: #fff; font-size: clamp(2.2rem, 4.8vw, 3.4rem); line-height: 1.05;
	letter-spacing: -.02em; margin: 0 0 1.15rem;
}
.webops-hero__title em { font-style: normal; color: #F4B142; }
.webops-hero__sub {
	font-size: 1.1rem; color: rgba(255,255,255,.88);
	max-width: 560px; margin: 0 0 2rem; line-height: 1.55;
}
.webops-hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-bottom: 0; }
.webops-hero__actions .wp-block-button__link { border-radius: 8px; padding: .8rem 1.3rem; font-size: .95rem; font-weight: 600; }
.webops-hero__actions .webops-btn--gold .wp-block-button__link {
	background: var(--wo-grad-gold); color: #2A2E36; box-shadow: 0 4px 8px rgba(0,0,0,.1); border: 0;
}
.webops-hero__actions .webops-btn--ghost .wp-block-button__link {
	background: transparent; color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.28);
}
.webops-hero__stats {
	display: flex; gap: 2.25rem; flex-wrap: wrap; margin-top: 2.75rem;
	padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.15);
}
.webops-hero__stat-n { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.9rem; color: #fff; line-height: 1; }
.webops-hero__stat-n--gold { color: #F4B142; }
.webops-hero__stat-l { font-size: .72rem; color: rgba(255,255,255,.65); margin-top: .4rem; text-transform: uppercase; letter-spacing: .1em; font-family: var(--wo-mono); }

/* ---- Hero dashboard mockup (verbatim wo-hero-dashboard, source parity) ---- */
.wo-hero__visual { display: flex; justify-content: center; }
.wo-card--hero-dashboard {
	background: #fff; color: #2A2E36; border-radius: 16px; padding: 1.25rem;
	width: 100%; max-width: 440px; border: 1px solid rgba(0,0,0,.04); position: relative;
	box-shadow: 0 30px 60px rgba(0,0,0,.3), 0 2px 0 rgba(0,0,0,.05);
}
.wo-card--hero-dashboard::before {
	content: ""; position: absolute; top: -1px; left: 20px; right: 20px; height: 3px;
	background: linear-gradient(90deg, transparent, #EE9B00, transparent); border-radius: 2px;
}
.wo-hero-dashboard__chrome { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: .85rem; border-bottom: 1px solid #f0ebe6; margin-bottom: 1rem; }
.wo-hero-dashboard__dots { display: flex; gap: 5px; }
.wo-hero-dashboard__dot { width: 10px; height: 10px; border-radius: 50%; }
.wo-hero-dashboard__dot--red { background: #ff5f56; }
.wo-hero-dashboard__dot--yellow { background: #ffbd2e; }
.wo-hero-dashboard__dot--green { background: #27c93f; }
.wo-hero-dashboard__label { font-family: var(--wo-mono); font-size: .72rem; color: #6b7280; letter-spacing: .08em; text-transform: uppercase; }
.wo-hero-dashboard__health { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: linear-gradient(135deg, rgba(156,8,32,.04), rgba(238,155,0,.06)); border-radius: 8px; border: 1px solid rgba(156,8,32,.08); margin-bottom: 1rem; }
.wo-hero-dashboard__grade { width: 54px; height: 54px; border-radius: 50%; background: var(--wo-grad-primary); color: #fff; display: grid; place-items: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.75rem; flex-shrink: 0; box-shadow: 0 4px 8px rgba(0,0,0,.1); }
.wo-hero-dashboard__health-text { font-size: .85rem; color: #6b7280; }
.wo-hero-dashboard__health-text strong { display: block; color: #2A2E36; font-size: .95rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; margin-bottom: .15rem; }
.wo-text--success { color: #28a745; font-weight: 600; }
.wo-text--gold { color: #D68A00; font-weight: 600; }
.wo-hero-dashboard__checks { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.wo-hero-dashboard__check { font-family: var(--wo-mono); font-size: .68rem; letter-spacing: .05em; padding: .3rem .55rem; background: rgba(40,167,69,.08); color: #28a745; border: 1px solid rgba(40,167,69,.15); border-radius: 4px; font-weight: 600; }
.wo-hero-dashboard__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-bottom: 1rem; }
.wo-hero-dashboard__stat { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: .75rem .65rem; background: #F9FAFB; border: 1px solid rgba(0,0,0,.05); border-radius: 8px; }
.wo-hero-dashboard__stat-icon { font-size: 1.3rem; }
.wo-hero-dashboard__stat strong { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1rem; color: #1F2937; }
.wo-hero-dashboard__stat span { font-size: .7rem; color: #6b7280; line-height: 1.2; }
.wo-hero-dashboard__issues { background: #F9FAFB; border: 1px solid rgba(0,0,0,.05); border-radius: 8px; padding: .75rem .85rem; }
.wo-hero-dashboard__issues-label { display: block; font-family: var(--wo-mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; margin-bottom: .5rem; }
.wo-hero-dashboard__issue { display: flex; justify-content: space-between; padding: .35rem 0; font-size: .82rem; color: #2A2E36; border-top: 1px dashed rgba(0,0,0,.06); }
.wo-hero-dashboard__issue:first-of-type { border-top: 0; }

/* ============================================================
   3b. SECTION RHYTHM — warm alternating bands on marketing blocks.
       Applied via block className; full-bleed because blocks are alignfull.
   ============================================================ */
.webops-band--warm { background: #f4f1ee; }

/* Seam fix: the parent theme sets styles.spacing.blockGap = spacing|md, so WP's
   constrained-layout rule puts a `margin-block-start` between EVERY top-level
   block (alignfull included). Between two consecutive warm bands that top margin
   exposes the white page background → a white seam. Collapse the gap ONLY when a
   warm band directly follows another warm band, so a run of same-tone sections
   reads as one continuous band. Warm↔white transitions keep their margin.
   !important beats WP's generated `:where(...is-layout-constrained) > *` rule
   regardless of stylesheet source order. General: fires for any adjacent pair. */
.webops-band--warm + .webops-band--warm { margin-block-start: 0 !important; }

/* ============================================================
   3c. BLOCK SKINS — re-skin neutral Foundry marketing blocks to the
       WebOps look (crimson proof tiles, quote-mark testimonials, timeline
       steps, crimson final CTA). Tokens where possible; brand values where
       the source design is non-tokenized.
   ============================================================ */
/* Proof stats → crimson gradient tiles */
.webops-stats--proof .foundry-stats__list { gap: 1.25rem; }
.webops-stats--proof .foundry-stats__item {
	background: var(--wo-grad-primary); color: #fff;
	border-radius: 16px; padding: 2rem 1.5rem; text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,.1);
}
.webops-stats--proof .foundry-stats__value { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2.5rem; line-height: 1; color: #fff; }
.webops-stats--proof .foundry-stats__item:nth-child(2n) .foundry-stats__value { color: #F4B142; }
.webops-stats--proof .foundry-stats__label { font-size: .8rem; color: rgba(255,255,255,.8); margin-top: .75rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--wo-mono); }

/* Testimonials → white cards with gold quote mark */
.webops-testimonials .foundry-testimonials__item {
	background: #fff; border: 1px solid rgba(0,0,0,.05); border-radius: 16px;
	padding: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,.08); position: relative;
}
.webops-testimonials .foundry-testimonials__figure { margin: 0; }
.webops-testimonials .foundry-testimonials__quote { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; font-size: 1.08rem; line-height: 1.5; color: #2A2E36; }
.webops-testimonials .foundry-testimonials__author { font-weight: 600; color: #2A2E36; font-size: .95rem; }
.webops-testimonials .foundry-testimonials__role { color: #6b7280; font-size: .82rem; }

/* ============================================================
 * Process-steps TIMELINE — carded, node-centred treatment.
 * The Foundry timeline ships bare text with only 3.25rem rail clearance, so the
 * step copy crosses the centre line, and its interleave is uneven (a step-2
 * special case). Port of the proven luckytyke-foundry-child fix (its brand.css
 * §"Process Steps — timeline"), re-skinned to the WebOps palette + fonts:
 *   - card the step body (white surface, hairline, radius, soft shadow) so text
 *     is contained and can never cross the rail — the core fix;
 *   - a fixed step padding-bottom var + node-centring calc so the ring lands on
 *     the card's true middle;
 *   - a UNIFORM interleave (nth-child(n+2) rise) — no plugin step-2 special case;
 *   - crimson→amber→teal ring cycle, faint-crimson ghosted number (Plus Jakarta),
 *     mobile single-rail collapse + motion-gated hover kept.
 * Scoped to the block's own class stack (webops-steps + the block's
 * --timeline modifier); the section bg is the plugin default `surface`
 * (#F9FAFB), so the card is white and the node fill/halo are surface.
 * ============================================================ */

/* (a) Card the step body — solid white, hairline, soft shadow, generous radius. */
.webops-steps.foundry-process-steps--timeline .foundry-process-steps__step-body {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 1.25rem;
	padding: 2.75rem 2.25rem 2rem; /* extra top clears the ghosted number band */
	box-shadow: 0 18px 40px rgba(31, 41, 55, 0.06);
}

/* (b) Big ghosted step number on the card's top corner, read from the block's
 * own `foundry-step` counter → 01, 02, 03 (matches document order, no markup). */
.webops-steps.foundry-process-steps--timeline .foundry-process-steps__step-body::before {
	content: counter(foundry-step, decimal-leading-zero);
	position: absolute;
	top: 0.25rem;
	left: 1.25rem; /* mobile single-rail default = top-left */
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 4.5rem;
	line-height: 1;
	color: color-mix(in srgb, #9C0820 12%, transparent);
	pointer-events: none;
	z-index: 0;
}
/* Keep card copy above the ghosted number. */
.webops-steps.foundry-process-steps--timeline .foundry-process-steps__step-title,
.webops-steps.foundry-process-steps--timeline .foundry-process-steps__step-text {
	position: relative;
	z-index: 1;
}

/* Fixed step padding-bottom (via a var the node calc reads) so node-centring is
 * exact — the block's preset padding is variable and would drift the node off
 * the card centre. */
.webops-steps.foundry-process-steps--timeline .foundry-process-steps__step {
	--wo-step-pad-b: 2.5rem;
	padding-bottom: var(--wo-step-pad-b);
}
.webops-steps.foundry-process-steps--timeline .foundry-process-steps__step:last-child {
	--wo-step-pad-b: 0rem; /* block zeroes last-child pad; match so its node centres */
}

/* (c) Rail node → hollow colour-cycling RING with a per-step line icon. Surface
 * fill + 6px surface halo so the rail doesn't run through it; the numeral inside
 * is dropped (the ghosted card number owns the sequence). Anchor to the card's
 * true middle: top = 50% − half the (now fixed) padding-bottom. */
.webops-steps.foundry-process-steps--timeline .foundry-process-steps__num {
	background-color: var(--surface);
	background-image: var(--wo-step-ico);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.35rem 1.35rem;
	border: 2px solid #9C0820;
	color: transparent;
	box-shadow: 0 0 0 6px var(--surface);
	top: calc(50% - (var(--wo-step-pad-b, 2.5rem) / 2));
	transform: translateY(-50%);
}
.webops-steps.foundry-process-steps--timeline .foundry-process-steps__num::before {
	content: ""; /* drop the numeral inside the ring */
}
/* Ring colour cycles crimson → amber → teal → crimson … (tri-color brand). */
.webops-steps.foundry-process-steps--timeline .foundry-process-steps__step:nth-child(3n+2) .foundry-process-steps__num {
	border-color: #EE9B00;
}
.webops-steps.foundry-process-steps--timeline .foundry-process-steps__step:nth-child(3n) .foundry-process-steps__num {
	border-color: #005F73;
}
/* Per-step icon inside the ring (house data-URI pattern; stroke tracks the ring). */
.webops-steps.foundry-process-steps--timeline .foundry-process-steps__step:nth-child(3n+1) .foundry-process-steps__num { --wo-step-ico: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C0820' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.webops-steps.foundry-process-steps--timeline .foundry-process-steps__step:nth-child(3n+2) .foundry-process-steps__num { --wo-step-ico: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EE9B00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E"); }
.webops-steps.foundry-process-steps--timeline .foundry-process-steps__step:nth-child(3n) .foundry-process-steps__num { --wo-step-ico: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005F73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E"); }

/* Desktop: ghosted number to the OUTER corner per side, fixed airier pad-b. */
@media (min-width: 760px) {
	.webops-steps.foundry-process-steps--timeline .foundry-process-steps__step:nth-child(odd) .foundry-process-steps__step-body::before {
		left: 1.5rem;  /* left column → outer edge is left */
		right: auto;
	}
	.webops-steps.foundry-process-steps--timeline .foundry-process-steps__step:nth-child(even) .foundry-process-steps__step-body::before {
		left: auto;
		right: 1.5rem; /* right column → outer edge is right */
	}
	.webops-steps.foundry-process-steps--timeline .foundry-process-steps__step {
		--wo-step-pad-b: 4rem; /* fixed (was clamp) so the node-centre calc is exact */
	}
	/* Uniform interleave → CONSISTENT card-to-card cadence. Overrides the block's
	 * mixed +2.5rem (step 2) / -2.5rem (even) that made the gaps uneven. */
	.webops-steps.foundry-process-steps--timeline .foundry-process-steps__step:nth-child(n+2) {
		margin-top: -3rem;
	}
}

/* Hover — lift the card + scale the node ring (motion-gated). */
@media (prefers-reduced-motion: no-preference) {
	.webops-steps.foundry-process-steps--timeline .foundry-process-steps__step-body,
	.webops-steps.foundry-process-steps--timeline .foundry-process-steps__num {
		transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
	}
	.webops-steps.foundry-process-steps--timeline .foundry-process-steps__step:hover .foundry-process-steps__step-body {
		transform: translateY(-6px);
		box-shadow: 0 30px 60px rgba(31, 41, 55, 0.13);
	}
	.webops-steps.foundry-process-steps--timeline .foundry-process-steps__step:hover .foundry-process-steps__num {
		transform: translateY(-50%) scale(1.14);
	}
}

/* Pricing-peek CTA → bordered white card, left text + gold button right */
.webops-cta--pricing.foundry-cta { background: transparent; padding: 4rem 1.25rem; }
.webops-cta--pricing .foundry-cta__inner {
	max-width: 1200px; margin: 0 auto;
	display: flex; align-items: center; justify-content: space-between; gap: 2rem;
	background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
	padding: 2rem 2.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); text-align: left;
}
.webops-cta--pricing .foundry-cta__content { flex: 1 1 auto; max-width: 720px; }
.webops-cta--pricing .foundry-cta__actions { flex: 0 0 auto; }
.webops-cta--pricing .foundry-cta__title { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
.webops-cta--pricing .foundry-cta__btn {
	background: var(--wo-grad-gold); color: #2A2E36; border: 0; box-shadow: 0 4px 8px rgba(0,0,0,.1);
}
@media (max-width: 768px) {
	.webops-cta--pricing .foundry-cta__inner { flex-direction: column; align-items: flex-start; padding: 1.5rem; gap: 1.25rem; }
	.webops-cta--pricing .foundry-cta__actions,
	.webops-cta--pricing .foundry-cta__btn { width: 100%; text-align: center; }
}

/* Final CTA → contained rounded crimson block (not full-bleed) */
.webops-cta--final.foundry-cta { background: transparent; padding: 4rem 1.25rem; }
.webops-cta--final .foundry-cta__inner {
	display: block; max-width: 1000px; margin: 0 auto; text-align: center;
	background: var(--wo-grad-hero); color: #fff;
	border-radius: 24px; padding: 3.5rem 2.5rem;
	position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(156,8,32,.2);
}
.webops-cta--final .foundry-cta__inner::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(500px 300px at 100% 100%, rgba(238,155,0,.28), transparent 70%),
		radial-gradient(400px 250px at 0% 0%, rgba(0,95,115,.2), transparent 70%);
}
.webops-cta--final .foundry-cta__content,
.webops-cta--final .foundry-cta__actions { position: relative; z-index: 1; }
.webops-cta--final .foundry-cta__title { color: #fff; }
.webops-cta--final .foundry-cta__text { color: rgba(255,255,255,.88); max-width: 620px; margin: 0 auto 1.75rem; }
.webops-cta--final .foundry-cta__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.webops-cta--final .foundry-cta__btn--outline { color: #fff; border-color: rgba(255,255,255,.4); }

/* Card-grid featured accent tops (What we do / Field notes) */
.webops-cards .foundry-card-grid__card { border-top: 4px solid #9C0820; }
.webops-cards .foundry-card-grid__card:nth-child(3n+2) { border-top-color: #EE9B00; }
.webops-cards .foundry-card-grid__card:nth-child(3n+3) { border-top-color: #005F73; }

/* Legal-page rhythm placeholders (filled in Batch 1) */