/* ==========================================================================
   Service pages.

   Loaded only on is_singular('od_service'), last in the chain. Most sections
   reuse homepage classes and need nothing here; this file styles the four
   grids that are genuinely new, plus the hero split.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

/*
 * The same wash the homepage hero carries: two violet orbs, a fade into
 * --od-alt at the foot, a blurred orb behind the form card and a masked grid
 * under the copy. Copied rather than shared because .od-hero also hardcodes its
 * own padding-block, which service sections deliberately do not use.
 */
.od-svc-hero {
	position: relative;
	/* Tighter than the standard section top. Nothing sits above the hero but
	   the header, so the full band of section padding was dead space before
	   the H1. The foot keeps the standard value so the handoff to the next
	   section stays on the page rhythm. */
	padding-top: clamp(32px, 2vw + 20px, 56px);
	background:
		radial-gradient(58ch 42ch at 88% -6%, rgba(78, 18, 240, 0.10), transparent 62%),
		radial-gradient(64ch 48ch at 4% 82%, rgba(78, 18, 240, 0.08), transparent 66%),
		linear-gradient(180deg, var(--od-surface) 62%, var(--od-alt) 100%);
	overflow: hidden;
}

.od-svc-hero::before {
	content: "";
	position: absolute;
	top: -12%;
	right: -8%;
	width: min(46vw, 620px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(122, 74, 255, 0.16), transparent 68%);
	filter: blur(40px);
	pointer-events: none;
	z-index: 0;
}

.od-svc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(to right, rgba(20, 20, 43, 0.045) 0 1px, transparent 1px 72px),
		repeating-linear-gradient(to bottom, rgba(20, 20, 43, 0.045) 0 1px, transparent 1px 72px);
	-webkit-mask-image: radial-gradient(70ch 52ch at 12% 8%, #000 4%, transparent 68%);
	mask-image: radial-gradient(70ch 52ch at 12% 8%, #000 4%, transparent 68%);
	pointer-events: none;
	z-index: 0;
}

/* Content above the wash. */
.od-svc-hero > * {
	position: relative;
	z-index: 1;
}

.od-svc-hero__inner {
	display: grid;
	gap: var(--od-s-7);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 900px) {
	.od-svc-hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: var(--od-s-8);
	}
}

/*
 * The eyebrow is an <h1> now, so it inherits the bare h1 rules in
 * base/typography.css for anything .od-eyebrow does not itself set --
 * a display font-weight and a top margin from the reset. Two classes,
 * because service.css loads after typography.css but a single class would
 * still be tying with .od-eyebrow rather than beating it.
 */
.od-svc-hero .od-svc-hero__eyebrow {
	margin-top: 0;
	line-height: 1.3;
	font-weight: 600;
}

.od-svc-hero__title {
	font-family: var(--od-font-head);
	font-size: var(--od-fs-h1, var(--od-fs-display));
	font-weight: var(--od-fw-display);
	letter-spacing: var(--od-ls-tight);
	line-height: 1.08;
	color: var(--od-ink);
	margin: 0 0 var(--od-s-4);
}

.od-svc-hero__sub {
	font-size: var(--od-fs-lead);
	line-height: 1.6;
	color: var(--od-body);
	max-width: var(--od-measure-lead);
	margin: 0 0 var(--od-s-6);
}

.od-svc-hero__bullets {
	display: grid;
	gap: var(--od-s-3);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.od-svc-hero__bullets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.od-svc-hero__bullet {
	display: flex;
	align-items: flex-start;
	gap: var(--od-s-2);
	font-size: var(--od-fs-sm);
	color: var(--od-body);
}

/* Green is the evidence accent — these bullets are claims about the business. */
/*
 * A filled green disc with a white glyph — the same object the homepage hero
 * uses for its proof bullets. As a bare green stroke icon this sat at the
 * icon's own intrinsic size and read as a stray tick rather than a mark.
 * Green is correct here: these are claims about the business, which is one of
 * the six sanctioned uses of the evidence accent.
 */
.od-svc-hero__bullet-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	box-sizing: border-box;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--od-green);
	color: #fff;
	margin-top: 0;
}

/* The icon set ships at assorted intrinsic sizes, so the glyph is pinned
   rather than left to size itself inside the disc. */
.od-svc-hero__bullet-icon svg {
	width: 19px;
	height: 19px;
	stroke-width: 2.5;
}

/* --- Positioning tiles --------------------------------------------------- */

.od-svc-pos__header {
	margin-bottom: var(--od-s-6);
}

/* --- Shared numbered grid ------------------------------------------------ */

/*
 * One hairline-ruled block, not nine floating boxes.
 *
 * The grid's own background paints the rules: a 1px gap over --od-line, with
 * each cell painted the band colour on top. That gives a continuous ruled
 * table with no divider elements and no double borders where cells meet, and
 * it makes the nine capabilities read as one structured list rather than nine
 * interchangeable cards.
 */
.od-svc-cap__grid {
	display: grid;
	gap: 1px;
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: od-svc;
	background: var(--od-line);
	border: 1px solid var(--od-line);
	border-radius: var(--od-r-lg, var(--od-r));
	overflow: hidden;
	/* The whole block is one object, so it casts one shadow. Nine separate
	   shadows on the cells would reintroduce the nine-floating-boxes look the
	   ruled grid exists to avoid. */
	box-shadow: var(--od-shadow-2);
}

@media (min-width: 600px) {
	.od-svc-cap__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.od-svc-cap__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- Mid-page band -------------------------------------------------------- */

/*
 * The band is a single line of copy and one button, so a full section's worth
 * of padding above it left it marooned. It also follows the problems section,
 * which ends on its own generous bottom padding — the two stacked and read as
 * a gap rather than a break. Scoped to .od-svc-band, so the homepage band keeps
 * its own rhythm.
 */
.od-svc-band {
	padding-top: clamp(16px, 1vw + 10px, 28px);
}

/* --- What you end up with: three blocks ----------------------------------- */

/*
 * Three, and only three — svc-delivers.php slices the repeater. Three is a
 * count the reader holds; six was a list they skim. Because there are only
 * three, each one can be a real block with room to breathe, which is why this
 * section no longer shares the capabilities grid's ruled-cell treatment.
 */
.od-svc-del__grid {
	display: grid;
	gap: var(--od-gap-grid);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: od-svc;
}

@media (min-width: 900px) {
	.od-svc-del__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.od-svc-del__item {
	counter-increment: od-svc;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: var(--od-s-7) var(--od-s-6) var(--od-s-6);
	background: var(--od-surface);
	border: 1px solid var(--od-line);
	border-radius: var(--od-r-lg, var(--od-r));
	box-shadow: var(--od-shadow-0);
	transition:
		transform var(--od-dur) var(--od-ease),
		box-shadow var(--od-dur) var(--od-ease),
		border-color var(--od-dur) var(--od-ease);
}

/* A violet rule across the top edge — the mark that makes three blocks read as
   three claims rather than three paragraphs in boxes. */
.od-svc-del__item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--od-primary);
}

.od-svc-del__item:hover {
	transform: translateY(-4px);
	border-color: var(--od-primary-100);
	box-shadow: var(--od-shadow-2);
}

/*
 * The numeral is a watermark here, not a plate. With only three blocks there is
 * room for it to be large, and it gives each block depth without adding a
 * second violet object beside the top rule.
 */
.od-svc-del__num::after {
	content: counter(od-svc, decimal-leading-zero);
}

.od-svc-del__num {
	position: absolute;
	top: 0.02em;
	right: 0.06em;
	font-family: var(--od-font-head);
	font-size: clamp(4rem, 2rem + 7vw, 6.5rem);
	font-weight: var(--od-fw-display);
	letter-spacing: var(--od-ls-tight);
	line-height: 1;
	color: var(--od-primary);
	opacity: 0.08;
	pointer-events: none;
	user-select: none;
}

.od-svc-del__title {
	position: relative;
	padding-right: var(--od-s-6);
	font-size: var(--od-fs-h3);
	line-height: 1.2;
	letter-spacing: var(--od-ls-tight);
	margin: 0 0 var(--od-s-3);
	color: var(--od-ink);
}

.od-svc-del__text {
	position: relative;
	font-size: var(--od-fs-body);
	line-height: 1.7;
	color: var(--od-body);
	margin: 0;
}

/*
 * Nine equal outlined rectangles with a small numeral read as a spreadsheet.
 * Three changes fix that without adding a single element: the numeral becomes
 * an oversized ghost watermark, a violet rule runs along the top edge and
 * grows on hover, and the card carries a resting shadow so it sits above the
 * band rather than being punched into it.
 */
/*
 * Cells, not cards. No radius, no shadow, no border of their own — the grid
 * draws every rule. The generous padding is what makes a ruled block read as
 * deliberate rather than cramped.
 */
.od-svc-cap__item {
	counter-increment: od-svc;
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--od-s-4);
	align-content: start;
	padding: var(--od-s-6) var(--od-s-5);
	background: var(--od-surface);
	transition: background var(--od-dur) var(--od-ease);
}

/* White cells on the tinted band. Painting them --od-alt made the block
   disappear into the section behind it; white is what gives the shadow
   something to lift. */
.od-section--alt .od-svc-cap__item {
	background: var(--od-surface);
}

/* Hovering a cell tints it. Nothing lifts or moves — these are not clickable,
   and a lift on a non-interactive block is a lie about what it does. */
.od-svc-cap__item:hover,
.od-section--alt .od-svc-cap__item:hover {
	background: var(--od-primary-100);
}

.od-svc-cap__num::before {
	content: counter(od-svc, decimal-leading-zero);
}

/*
 * The numeral sits in its own column beside the title, on a violet plate. It
 * is the one violet mark in the cell, which is what gives an otherwise flat
 * ruled grid its rhythm down the page.
 */
.od-svc-cap__num {
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 38px;
	height: 38px;
	border-radius: 30%;
	background: var(--od-primary);
	color: #fff;
	font-family: var(--od-font-head);
	font-size: var(--od-fs-xs);
	font-weight: var(--od-fw-display);
	letter-spacing: 0.02em;
	line-height: 1;
	margin-top: 2px;
}

.od-svc-cap__title {
	grid-column: 2;
	font-size: var(--od-fs-h4);
	line-height: 1.25;
	margin: 0 0 var(--od-s-2);
	color: var(--od-ink);
}

.od-svc-cap__text {
	grid-column: 2;
	font-size: var(--od-fs-sm);
	line-height: 1.6;
	color: var(--od-body);
	margin: 0;
}

/* --- Engagement models --------------------------------------------------- */

.od-svc-eng__grid {
	display: grid;
	gap: var(--od-gap-grid);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.od-svc-eng__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.od-svc-eng__card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: var(--od-s-4);
	padding: var(--od-s-7) var(--od-s-6) var(--od-s-6);
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 62%),
		var(--od-primary);
	border: 1px solid var(--od-primary);
	border-radius: var(--od-r-lg, var(--od-r));
	box-shadow: 0 10px 24px rgba(78, 18, 240, 0.18), 0 2px 6px rgba(20, 20, 43, 0.10);
	transition:
		transform var(--od-dur) var(--od-ease),
		box-shadow var(--od-dur) var(--od-ease);
}

.od-svc-eng__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 48px rgba(78, 18, 240, 0.28), 0 4px 10px rgba(20, 20, 43, 0.12);
}

.od-svc-eng__title {
	font-size: var(--od-fs-h3);
	line-height: 1.2;
	letter-spacing: var(--od-ls-tight);
	margin: 0;
	color: #fff;
}

.od-svc-eng__text {
	font-size: var(--od-fs-sm);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.82);
	margin: 0;
}

.od-svc-eng__points {
	margin: 0;
	flex: 1 1 auto;
	color: rgba(255, 255, 255, 0.92);
}

.od-svc-eng__points li {
	color: rgba(255, 255, 255, 0.92);
}

/*
 * The tick is two pseudo-elements from typography.css: a disc and a chevron
 * drawn with borders. Rebuilt here as a solid white disc with a green check
 * inside it — the white plate is what carries the mark on violet, so green
 * stays the evidence accent without having to survive the violet ground.
 */
.od-svc-eng__points li {
	padding-left: 44px;
}

.od-svc-eng__points li::before {
	width: 29px;
	height: 29px;
	top: 0.1em;
	background: #fff;
	box-shadow: none;
}

/* Left + bottom borders rotated -45deg draws a check, where typography.css's
   top + right at 45deg draws a chevron. */
/*
 * Centred against the disc rather than positioned by eye. The disc is 29px at
 * top: 0.1em, so its centre is 0.1em + 14.5px; the rotated check's own visual
 * centre sits ~4.5px below its box top, which is what the offset below backs
 * out. Same idea horizontally: (29 - 11) / 2 = 9.
 */
.od-svc-eng__points li::after {
	left: 9px;
	top: calc(0.1em + 10px);
	width: 11px;
	height: 6px;
	border-top: 0;
	border-right: 0;
	border-left: 2.5px solid var(--od-primary);
	border-bottom: 2.5px solid var(--od-primary);
	border-radius: 1px;
	transform: rotate(-45deg);
}

/*
 * A solid white button on violet. The ghost button inherits currentColor, so on
 * this ground it rendered as a white outline with white text and read as
 * disabled rather than as the card's one action.
 */
.od-svc-eng__cta,
.od-svc-eng__cta:link,
.od-svc-eng__cta:visited {
	margin-top: auto;
	background: #fff;
	border-color: #fff;
	color: var(--od-primary-600);
}

.od-svc-eng__cta:hover,
.od-svc-eng__cta:focus-visible {
	background: var(--od-primary-100);
	border-color: var(--od-primary-100);
	color: var(--od-primary-600);
}

/* --- Related services ---------------------------------------------------- */

.od-svc-rel__grid {
	display: grid;
	gap: var(--od-gap-grid);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.od-svc-rel__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.od-svc-rel__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.od-svc-rel__card {
	display: flex;
	flex-direction: column;
	gap: var(--od-s-3);
	height: 100%;
	padding: var(--od-s-5);
	background: var(--od-surface);
	border: 1px solid var(--od-line);
	border-radius: var(--od-r);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--od-dur) var(--od-ease),
		transform var(--od-dur) var(--od-ease);
}

.od-svc-rel__card:hover,
.od-svc-rel__card:focus-visible {
	border-color: var(--od-primary);
	transform: translateY(-3px);
}

.od-svc-rel__card:hover .od-arrow,
.od-svc-rel__card:focus-visible .od-arrow {
	transform: translateX(4px);
}

.od-svc-rel__title {
	font-size: var(--od-fs-h4);
	line-height: 1.25;
	margin: 0;
	color: var(--od-ink);
}

.od-svc-rel__text {
	font-size: var(--od-fs-sm);
	line-height: 1.6;
	color: var(--od-body);
	margin: 0;
	flex: 1 1 auto;
}

.od-svc-rel__card .od-arrow {
	color: var(--od-primary);
}

@media (prefers-reduced-motion: reduce) {
	.od-svc-rel__card,
	.od-svc-rel__card:hover,
	.od-svc-rel__card:focus-visible {
		transform: none;
	}
}

/*
 * The .od-list--check duplicate that used to sit here has been removed. It was
 * added on the basis that the class did not exist in components.css — true,
 * but it is defined in base/typography.css, so the two definitions fought.
 * The duplicate hardcoded color: var(--od-body) and a green-600 tick, which is
 * why the engagement cards' lists rendered as dark text on violet.
 */


/* --- Long-form prose ----------------------------------------------------- */
/*
 * The editor's <h2>s are rendered as accordion triggers by svc-content.php, so
 * this section reuses .od-accordion wholesale and only needs the split grid,
 * the intro block, and reading type inside the panels. Everything the old
 * card treatment did — the border, the violet heading rules, the size
 * overrides — is now the accordion's job.
 */

.od-svc-prose__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--od-gap-header);
}

@media (min-width: 1200px) {
	.od-svc-prose__inner {
		grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
		gap: var(--od-gap-grid-lg);
		align-items: start;
	}
}

.od-svc-prose__body {
	min-width: 0;
}

/*
 * The standing intro above the accordion. It is the one paragraph everybody
 * reads, so it gets lede weight and stays in ink while the panels sit in body
 * colour.
 */
.od-svc-prose__intro {
	margin-bottom: var(--od-s-6);
}

.od-svc-prose__intro p {
	font-size: var(--od-fs-lead);
	line-height: 1.6;
	color: var(--od-ink);
	max-width: none;
}

.od-svc-prose__intro > * + * {
	margin-top: var(--od-s-4);
}

/* Reading type inside the panels — longer measure than a FAQ answer, so the
   line height opens up to match. */
.od-svc-prose__acc .od-accordion__panel p,
.od-svc-prose__acc .od-accordion__panel li {
	font-size: var(--od-fs-body);
	line-height: 1.8;
	color: var(--od-body);
	max-width: none;
}

.od-svc-prose__acc .od-accordion__panel > * + * {
	margin-top: var(--od-s-4);
}

/* An editor may nest an <h3> under an <h2>; it must not compete with the
   trigger label above it. */
.od-svc-prose__acc .od-accordion__panel h3 {
	font-size: var(--od-fs-h4);
	line-height: var(--od-lh-head);
	letter-spacing: var(--od-ls-tight);
	color: var(--od-ink);
}