/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Description: Child theme of Twenty Twenty-Five. Add all custom styles and functionality here so the parent theme can be updated safely.
Author: chiragnirmal3
Author URI: https://example.com
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 7.1
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-child
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* -----------------------------------------------------------------------------
 * Design tokens
 *
 * Never hardcode a colour, radius or duration anywhere else in the theme --
 * add a token here and reference it.
 *
 * Two layers:
 *   1. THE COLOURS LIVE IN theme.json: the palette (base, contrast, accent-1 to
 *      accent-5) for what the editor's colour pickers should offer, and
 *      settings.custom for the rest -- tints, the dimmer text tier, hover and
 *      soft accents -- which WordPress prints as --wp--custom--* variables.
 *   2. the semantic --crg-* tokens below, which point at those and are all the
 *      rest of the theme (and the crg-* plugins) ever use.
 *
 * Putting the hexes in theme.json rather than here is what makes the palette
 * reach the whole site: Global Styles, the block editor's colour pickers, and
 * every Twenty Twenty-Five rule that references base/contrast all pick it up,
 * instead of one stylesheet fighting them.
 * -------------------------------------------------------------------------- */

:root {
	/* Colour ------------------------------------------------------------ */
	--crg-color-bg: var( --wp--preset--color--base );
	--crg-color-surface: var( --wp--preset--color--accent-3 );
	--crg-color-surface-alt: var( --wp--preset--color--accent-4 );
	--crg-color-text: var( --wp--preset--color--contrast );
	--crg-color-text-muted: var( --wp--preset--color--accent-2 );
	/* A fourth tier below muted, for dates and labels that should recede. */
	--crg-color-text-dim: var( --wp--custom--color--text-dim );
	--crg-color-text-on-accent: var( --wp--preset--color--accent-3 );
	--crg-color-on-accent-muted: var( --wp--custom--color--on-accent-muted );
	--crg-color-border: var( --wp--preset--color--accent-5 );
	--crg-color-border-strong: var( --wp--custom--color--border-strong );
	--crg-color-accent: var( --wp--preset--color--accent-1 );
	--crg-color-accent-hover: var( --wp--custom--color--accent-hover );
	--crg-color-accent-soft: var( --wp--custom--color--accent-soft );
	--crg-color-success: var( --wp--custom--color--success );
	--crg-color-error: var( --wp--custom--color--error );

	/* Tints: a soft background and a strong foreground, for icons and labels.
	   A component opts in with an is-tint-N class, which sets --tint-bg/--tint-fg. */
	--crg-tint-1-bg: var( --wp--custom--tint--1--bg );
	--crg-tint-1-fg: var( --wp--custom--tint--1--fg );
	--crg-tint-2-bg: var( --wp--custom--tint--2--bg );
	--crg-tint-2-fg: var( --wp--custom--tint--2--fg );
	--crg-tint-3-bg: var( --wp--custom--tint--3--bg );
	--crg-tint-3-fg: var( --wp--custom--tint--3--fg );
	--crg-tint-4-bg: var( --wp--custom--tint--4--bg );
	--crg-tint-4-fg: var( --wp--custom--tint--4--fg );
	--crg-tint-5-bg: var( --wp--custom--tint--5--bg );
	--crg-tint-5-fg: var( --wp--custom--tint--5--fg );
	--crg-tint-6-bg: var( --wp--custom--tint--6--bg );
	--crg-tint-6-fg: var( --wp--custom--tint--6--fg );

	/* Lines and shadows ------------------------------------------------- */
	/* The ink shadows are mixed from, as r g b. */
	--crg-shadow-ink: 17 24 39;
	--crg-shadow-card: 0 4px 20px -2px rgb( var( --crg-shadow-ink ) / 0.05 ), 0 2px 6px -1px rgb( var( --crg-shadow-ink ) / 0.02 );
	--crg-shadow-card-hover: 0 12px 30px -4px color-mix( in srgb, var( --crg-color-accent ) 10%, transparent ), 0 4px 12px -2px rgb( var( --crg-shadow-ink ) / 0.04 );
	--crg-shadow-button: 0 1px 2px rgb( var( --crg-shadow-ink ) / 0.06 );
	--crg-shadow-button-hover: 0 8px 18px -8px color-mix( in srgb, var( --crg-color-accent ) 60%, transparent );
	--crg-focus-ring: color-mix( in srgb, var( --crg-color-accent ) 30%, transparent );

	/* Radii ------------------------------------------------------------- */
	--crg-radius-sm: 8px;
	--crg-radius-md: 10px;
	--crg-radius-lg: 14px;
	--crg-radius-xl: 16px;
	--crg-radius-2xl: 20px;
	--crg-radius-pill: 999px;

	/* Type -------------------------------------------------------------- */
	--crg-font-mono: var( --wp--preset--font-family--google-sans-code, ui-monospace, monospace );
	--crg-tracking-wide: 0.08em;
	/* Line lengths, for headings and running text. */
	--crg-measure-title: 24ch;
	--crg-measure-heading: 32ch;
	--crg-measure-text: 60ch;
	--crg-measure-prose: 68ch;

	/* Layout ------------------------------------------------------------ */
	/* Widths come from Global Styles so the template lines up with block content. */
	--crg-content-width: var( --wp--style--global--content-size, 1216px );
	--crg-wide-width: var( --wp--style--global--wide-size, 1280px );
	--crg-space-sm: var( --wp--preset--spacing--30, 1rem );
	--crg-space-md: var( --wp--preset--spacing--50, 2rem );
	--crg-space-lg: var( --wp--preset--spacing--70, 4rem );
	--crg-space-xl: var( --wp--preset--spacing--80, 5rem );
	--crg-card-min: 240px;
	--crg-header-height: 64px;

	/* Motion ------------------------------------------------------------ */
	--crg-transition-fast: 0.15s ease;
	--crg-transition: 0.25s ease;

	/* Page background: a faint dot grid over the page colour. */
	--crg-page-pattern: radial-gradient( var( --wp--custom--color--pattern ) 1px, transparent 1px ) 0 0 / 24px 24px;
}

.is-tint-1 { --tint-bg: var( --crg-tint-1-bg ); --tint-fg: var( --crg-tint-1-fg ); }
.is-tint-2 { --tint-bg: var( --crg-tint-2-bg ); --tint-fg: var( --crg-tint-2-fg ); }
.is-tint-3 { --tint-bg: var( --crg-tint-3-bg ); --tint-fg: var( --crg-tint-3-fg ); }
.is-tint-4 { --tint-bg: var( --crg-tint-4-bg ); --tint-fg: var( --crg-tint-4-fg ); }
.is-tint-5 { --tint-bg: var( --crg-tint-5-bg ); --tint-fg: var( --crg-tint-5-fg ); }
.is-tint-6 { --tint-bg: var( --crg-tint-6-bg ); --tint-fg: var( --crg-tint-6-fg ); }

/* Add your custom styles below this line. */

/* -----------------------------------------------------------------------------
 * Page frame
 *
 * The parent theme's root blockGap (1.2rem) puts a margin between the header,
 * main and footer template parts, leaving a strip of page background between
 * the header border and a full-width banner. Each part pads itself, so the gap
 * is zeroed here for those top-level siblings only -- blockGap inside content
 * is left alone, which a global "blockGap": "0" in theme.json would not do.
 * -------------------------------------------------------------------------- */

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* In-page links (#services, #start-a-project) land below the sticky header. */
html {
	scroll-padding-top: calc( var( --crg-header-height ) + var( --wp--preset--spacing--40 ) );
}

/*
 * The gutter is declared here rather than on :root because core declares the root
 * padding on body: on :root the reference would not resolve and every gutter
 * would fall back to 2rem, twice the page padding on phones.
 */
body {
	--crg-gutter: var( --wp--style--root--padding-right, 2rem );
	background: var( --crg-page-pattern ), var( --crg-color-bg );
}

/* -----------------------------------------------------------------------------
 * Site header
 *
 * parts/header.html: the brand (tile, site title, tagline) on the left, the
 * links centred, "Start a project" on the right, in a frosted bar that stays at
 * the top. Below 600px core's navigation block folds the links into its own
 * menu button, which moves to the far right.
 *
 * The groups here use the default (flow) layout on purpose: core prints
 * "body .is-layout-flex { display: flex }", which would beat the grid below.
 * -------------------------------------------------------------------------- */

/* The template part's own wrapper is what can stick; the group is its only child. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var( --wp-admin--admin-bar--height, 0px );
	z-index: 20;
}

.site-header {
	background-color: color-mix( in srgb, var( --crg-color-bg ) 90%, transparent );
	border-bottom: 1px solid var( --crg-color-border );
	-webkit-backdrop-filter: saturate( 1.5 ) blur( 12px );
	backdrop-filter: saturate( 1.5 ) blur( 12px );
}

/*
 * A backdrop filter makes the header the containing block for fixed children,
 * so core's full-screen menu would open inside the 64px bar. Drop the filter
 * while the menu is open.
 */
.site-header:has( .wp-block-navigation__responsive-container.is-menu-open ) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

@media ( max-width: 599px ) {
	.site-header__nav .wp-block-navigation__responsive-container-open {
		display: inline-grid;
	}
}

/*
 * A little wider than the content below it: 1280px against 1216px on a desktop.
 * The side padding is the page gutter, so wherever the viewport is narrower than
 * that, the brand and the button line up with the content's edges.
 */
.site-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var( --wp--preset--spacing--40 );
	max-width: calc( var( --crg-wide-width ) + 2 * var( --crg-gutter ) );
	min-height: var( --crg-header-height );
	margin-inline: auto;
	padding: 12px var( --crg-gutter );
}

.site-header__bar > * {
	margin-block: 0;
}

/* -- Brand ------------------------------------------------------------------ */

.site-brand {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	justify-self: start;
}

.site-brand > *,
.site-brand__text > * {
	margin-block: 0;
}

/*
 * A "W" tile stands in for the logo until one is set in the Site Editor; the
 * site-logo block then shows the image and the tile steps aside. The `/ ""`
 * gives it empty alternative text -- the site title next to it is the name.
 */
.site-brand:not( :has( .wp-block-site-logo img ) )::before {
	content: "W";
	content: "W" / "";
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: var( --crg-radius-md );
	background-color: var( --crg-color-accent );
	color: var( --crg-color-text-on-accent );
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	transition: background-color var( --crg-transition-fast );
}

.site-brand:hover::before {
	background-color: var( --crg-color-accent-hover );
}

.site-brand__text {
	display: grid;
	line-height: 1.2;
}

.site-brand__name {
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.site-brand__name a {
	color: var( --crg-color-text );
	text-decoration: none;
	transition: color var( --crg-transition-fast );
}

.site-brand:hover .site-brand__name a {
	color: var( --crg-color-accent );
}

/* The site tagline, set small and spaced out under the name. */
.site-brand__tagline {
	color: var( --crg-color-text-dim );
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* -- Links -------------------------------------------------------------------- */

.site-header__nav {
	justify-self: center;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
}

.site-header__nav .wp-block-navigation-item__content {
	color: var( --crg-color-text-muted );
	text-decoration: none;
	transition: color var( --crg-transition-fast );
}

.site-header__nav .wp-block-navigation-item__content:hover,
.site-header__nav .wp-block-navigation-item__content:focus-visible,
.site-header__nav .current-menu-item > .wp-block-navigation-item__content {
	color: var( --crg-color-accent );
}

/* Core's menu button, shown below 600px. Its display is core's to toggle. */
.site-header__nav .wp-block-navigation__responsive-container-open {
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var( --crg-radius-md );
	color: var( --crg-color-text-muted );
	transition: background-color var( --crg-transition-fast ), color var( --crg-transition-fast );
}

.site-header__nav .wp-block-navigation__responsive-container-open:hover {
	background-color: var( --crg-color-surface-alt );
	color: var( --crg-color-accent );
}

/*
 * The open menu: a left-aligned list of large links, one per row. Core aligns
 * the list with --navigation-layout-justification-setting, which is "center"
 * here because the bar's links are centred, and zeroes the link padding with a
 * four-class selector -- hence the variable and the matching specificity.
 */
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: stretch;
	padding: var( --wp--preset--spacing--40 ) var( --crg-gutter );
}

/*
 * The close button takes the menu button's 40px box and place -- 12px from the
 * top, the gutter from the right -- so the icon stays put as the menu opens.
 * Core positions it at the top of the overlay's padding, hence the offset.
 */
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	display: grid;
	place-items: center;
	top: calc( 12px - var( --wp--preset--spacing--40 ) );
	width: 40px;
	height: 40px;
	border-radius: var( --crg-radius-md );
	color: var( --crg-color-text-muted );
	transition: background-color var( --crg-transition-fast ), color var( --crg-transition-fast );
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
	background-color: var( --crg-color-surface-alt );
	color: var( --crg-color-accent );
}

/* The list carries items-justified-center itself, which resets the variable there. */
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: stretch;
	gap: 0;
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid var( --crg-color-border );
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 0.85rem 0;
	color: var( --crg-color-text );
	font-size: var( --wp--preset--font-size--large );
}

/* -- Action ------------------------------------------------------------------- */

.site-header__actions {
	justify-self: end;
}

/* Names only below 782px: the tagline no longer fits beside the links and button. */
@media ( max-width: 781px ) {
	.site-brand__tagline {
		display: none;
	}
}

/* Below 600px the links are a menu button, after the call to action. */
@media ( max-width: 599px ) {
	.site-header__bar {
		grid-template-columns: 1fr auto auto;
		gap: var( --wp--preset--spacing--20 );
	}

	.site-header__nav {
		order: 3;
	}
}

/* -----------------------------------------------------------------------------
 * Buttons
 *
 * Colours, radius, padding and type come from theme.json (styles.elements
 * .button), so every button block on every page matches. Here: the shadow, and
 * three opt-in classes for a button block's "Additional CSS class":
 *   is-arrow      an arrow after the label, for a "go somewhere" button
 *   is-secondary  the quiet light variant next to a primary
 *   is-small      the compact size used in the header
 * -------------------------------------------------------------------------- */

.wp-block-button__link,
.wp-element-button {
	box-shadow: var( --crg-shadow-button );
	transition:
		background-color var( --crg-transition-fast ),
		border-color var( --crg-transition-fast ),
		box-shadow var( --crg-transition-fast ),
		color var( --crg-transition-fast );
}

.wp-block-button__link:not( .has-background ):hover,
.wp-element-button:not( .has-background ):hover {
	box-shadow: var( --crg-shadow-button-hover );
}

.is-secondary .wp-block-button__link {
	background-color: var( --crg-color-bg );
	border: 1px solid var( --crg-color-border );
	box-shadow: none;
	color: var( --crg-color-text );
}

.is-secondary .wp-block-button__link:hover {
	background-color: var( --crg-color-surface-alt );
	box-shadow: none;
	color: var( --crg-color-text );
}

.is-small .wp-block-button__link {
	padding: 0.55rem 1.15rem;
	font-size: var( --wp--preset--font-size--x-small );
}

.is-arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

/* Drawn with a mask so the arrow takes the text colour. */
.is-arrow .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 0.95em;
	height: 0.95em;
	background-color: currentColor;
	-webkit-mask: url( assets/icons/arrow_forward.svg ) center / contain no-repeat;
	mask: url( assets/icons/arrow_forward.svg ) center / contain no-repeat;
	transition: transform var( --crg-transition-fast );
}

.is-arrow .wp-block-button__link:hover::after {
	transform: translateX( 2px );
}

/* -----------------------------------------------------------------------------
 * Section labels and heads
 *
 * .section-eyebrow is a small monospace pill above a heading; with is-live it
 * takes the body face and a pulsing dot, for the hero. .section-head centres a
 * label, a heading and one line of intro over a section.
 * -------------------------------------------------------------------------- */

.section-eyebrow,
.service-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	padding: 0.25rem 0.75rem;
	background-color: var( --crg-color-accent-soft );
	border: 1px solid var( --wp--custom--color--eyebrow-border );
	border-radius: var( --crg-radius-pill );
	color: var( --wp--custom--color--eyebrow );
	font-family: var( --crg-font-mono );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.section-eyebrow.is-live {
	padding: 0.375rem 0.875rem;
	font-family: inherit;
	letter-spacing: 0.025em;
}

.section-eyebrow.is-live::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var( --crg-color-accent );
	animation: crg-pulse 2s cubic-bezier( 0.4, 0, 0.6, 1 ) infinite;
}

@keyframes crg-pulse {
	50% {
		opacity: 0.5;
	}
}

/* A pill that wraps onto two lines reads as a lozenge; round it less on phones. */
@media ( max-width: 600px ) {
	.section-eyebrow,
	.service-hero__eyebrow {
		border-radius: 12px;
	}
}

.section-head {
	display: grid;
	justify-items: center;
	gap: var( --wp--preset--spacing--30 );
	max-width: 42rem;
	margin-inline: auto;
	margin-bottom: var( --wp--preset--spacing--60 );
	text-align: center;
}

.section-head > * {
	margin-block: 0;
}

.section-head__title {
	font-size: clamp( 1.875rem, 1.55rem + 1.1vw, 2.25rem );
	font-weight: 800;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.section-head__text {
	color: var( --crg-color-text-muted );
	font-size: clamp( 0.875rem, 0.83rem + 0.2vw, 1rem );
}

/* -----------------------------------------------------------------------------
 * Site footer
 *
 * parts/footer.html: the brand, then three columns of links -- Services,
 * Company, Legal -- and a closing row. Three columns under a full-width brand
 * on tablets, two on phones.
 * -------------------------------------------------------------------------- */

.site-footer {
	background-color: var( --crg-color-surface-alt );
	border-top: 1px solid var( --crg-color-border );
}

.site-footer__grid,
.site-footer__bottom {
	max-width: calc( var( --crg-content-width ) + 2 * var( --crg-gutter ) );
	margin-inline: auto;
	padding-inline: var( --crg-gutter );
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1.5fr ) repeat( 3, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--50 );
	padding-block: var( --wp--preset--spacing--70 ) var( --wp--preset--spacing--60 );
}

.site-footer__grid > *,
.site-footer__brand > *,
.site-footer__col > *,
.site-footer__bottom > *,
.site-footer__legal > * {
	margin-block: 0;
}

.site-footer__brand {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: var( --wp--preset--spacing--30 );
}

.site-footer__tagline {
	color: var( --crg-color-text );
	font-weight: 600;
}

.site-footer__about {
	max-width: 34ch;
	color: var( --crg-color-text-muted );
	font-size: var( --wp--preset--font-size--small );
}

.site-footer__heading {
	margin-bottom: var( --wp--preset--spacing--30 );
	color: var( --crg-color-text );
	font-family: var( --crg-font-mono );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.site-footer__links {
	display: grid;
	gap: 0.6rem;
	padding: 0;
	font-size: var( --wp--preset--font-size--small );
	list-style: none;
}

.site-footer__links a {
	color: var( --crg-color-text-muted );
	text-decoration: none;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
	color: var( --crg-color-accent );
	text-decoration: underline;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--40 );
	padding-block: var( --wp--preset--spacing--40 );
	border-top: 1px solid var( --crg-color-border );
	color: var( --crg-color-text-dim );
	font-size: var( --wp--preset--font-size--small );
}

@media ( max-width: 960px ) {
	.site-footer__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}
}

@media ( max-width: 560px ) {
	.site-footer__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.site-footer__col--services {
		grid-column: 1 / -1;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.section-eyebrow.is-live::before {
		animation: none;
	}
}

/* -----------------------------------------------------------------------------
 * The card
 *
 * Every route that lists posts -- the blog, an archive, search results and the
 * "more posts" row on a single post -- uses this one card, as .site-post.
 * .site-card is the same object holding hand-written content rather than a
 * post: the 404 uses it for the links it offers.
 *
 * It is deliberately the same object as a recipe card in the plugin: same
 * surface, border, radius, lift on hover and arrow on the title. Two grids that
 * look almost alike read as a mistake, so they are made to match rather than to
 * nearly match.
 *
 * The grid itself is a block layout attribute, not a rule here, so the column
 * width stays editable in the Site Editor.
 * -------------------------------------------------------------------------- */

.site-post,
.site-card {
	box-sizing: border-box;
	height: 100%;
	padding: var( --wp--preset--spacing--40 );
	background-color: var( --crg-color-surface );
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-xl );
	box-shadow: var( --crg-shadow-card );
	transition:
		border-color var( --crg-transition ),
		box-shadow var( --crg-transition );
}

/*
 * The whole card responds, as the homepage's service cards do, but only the
 * title is a link -- a card-wide anchor would swallow the date and the excerpt
 * into the link text.
 */
.site-post:hover,
.site-post:focus-within,
.site-card:hover,
.site-card:focus-within {
	border-color: color-mix( in srgb, var( --crg-color-accent ) 30%, transparent );
	box-shadow: var( --crg-shadow-card-hover );
}

.site-post__title,
.site-card__title {
	margin: 0;
}

.site-post__title a,
.site-card__title a {
	color: var( --crg-color-text );
	text-decoration: none;
}

/*
 * Arrow on the title, matching the recipe cards. The `/ ""` supplies empty
 * alternative text, so a screen reader announces the title without the glyph.
 */
.site-post__title a::after,
.site-card__title a::after {
	content: "\2197" / "";
	margin-left: 0.3em;
	color: var( --crg-color-text-muted );
	font-weight: 400;
	transition: color var( --crg-transition );
}

.site-post:hover .site-post__title a::after,
.site-card:hover .site-card__title a::after {
	color: var( --crg-color-accent );
}

.site-post__excerpt,
.site-card__text {
	margin: 0.5em 0 0;
	color: var( --crg-color-text-muted );
}

.site-post__excerpt p {
	margin: 0;
}

/*
 * The meta line the search cards carry: category, then date. Sentence case, not
 * uppercase -- the category is a real word the eye reads, not a label.
 */
.site-post__meta {
	margin-top: 0.75em;
	align-items: center;
}

.site-post__cat a {
	color: var( --crg-color-accent );
	font-weight: 600;
	text-decoration: none;
}

.site-post__cat a:hover,
.site-post__cat a:focus {
	color: var( --crg-color-accent-hover );
	text-decoration: underline;
}

/*
 * Dimmer than the category beside it. The date is the least useful thing in the
 * card and was competing with the title at the muted tone.
 */
.site-post__date {
	margin: 0.75em 0 0;
	color: var( --crg-color-text-dim );
}

/* Inside the meta line the row supplies the spacing, so the date drops its own. */
.site-post__meta .site-post__date {
	margin-top: 0;
}

.site-posts__empty {
	margin: 0;
	color: var( --crg-color-text-muted );
}

@media ( prefers-reduced-motion: reduce ) {
	.site-post,
	.site-post:hover,
	.site-post:focus-within,
	.site-card,
	.site-card:hover,
	.site-card:focus-within {
		transform: none;
		transition: none;
	}
}

/* -----------------------------------------------------------------------------
 * Listing furniture
 *
 * The heading above an archive or a set of search results, and the pagination
 * below it.
 * -------------------------------------------------------------------------- */

.site-lede__title {
	margin: 0;
}

.site-lede__text {
	margin: 0;
	max-width: 60ch;
	color: var( --crg-color-text-muted );
}

/*
 * Pagination, following example/search.html: each page a square box rather
 * than a bare link, with the current page inverted.
 *
 * Shared by every listing, not just search, so the blog and the archives get
 * the same control. Only the justification differs, via --center.
 *
 * Core's markup is uneven and the selectors have to allow for it: the numbers
 * arrive wrapped in their own div, the current page is a <span> rather than an
 * <a>, the ellipsis is a span too, and previous/next sit outside the wrapper.
 */
.site-pagination {
	margin-top: var( --crg-space-md );
	gap: 5px;
	color: var( --crg-color-text-muted );
}

/* The numbers come in a plain div, so it needs its own gap. */
.site-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 5px;
}

.site-pagination .page-numbers,
.site-pagination .wp-block-query-pagination-previous,
.site-pagination .wp-block-query-pagination-next {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 0.5em;
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-sm );
	background-color: var( --crg-color-surface );
	color: var( --crg-color-text-muted );
	text-decoration: none;
	transition:
		background-color var( --crg-transition-fast ),
		border-color var( --crg-transition-fast ),
		color var( --crg-transition-fast );
}

.site-pagination a.page-numbers:hover,
.site-pagination a.page-numbers:focus,
.site-pagination .wp-block-query-pagination-previous:hover,
.site-pagination .wp-block-query-pagination-next:hover {
	background-color: var( --crg-color-surface-alt );
	border-color: var( --crg-color-accent );
	color: var( --crg-color-text );
}

/*
 * The page you are on. The reference inverts it against the page; on this
 * palette that means the accent carrying dark text, the same pairing every
 * other filled control here uses.
 */
.site-pagination .page-numbers.current {
	background-color: var( --crg-color-accent );
	border-color: var( --crg-color-accent );
	color: var( --crg-color-text-on-accent );
	font-weight: 600;
}

/*
 * The gap marker. As core renders it, it is a plain span and loses the box --
 * it is not a destination.
 *
 * The script upgrades it to a button for jumping to a hidden page, and then it
 * earns one back: it is the one part of this control that looks clickable, so
 * once it is, it should look it.
 */
.site-pagination .page-numbers.dots {
	border-color: transparent;
	background-color: transparent;
}

.site-pagination button.site-pagination__jump {
	border-color: var( --crg-color-border );
	background-color: var( --crg-color-surface );
	cursor: pointer;
	font: inherit;
	line-height: 1;
}

.site-pagination button.site-pagination__jump:hover,
.site-pagination button.site-pagination__jump:focus-visible {
	border-color: var( --crg-color-accent );
	background-color: var( --crg-color-surface-alt );
	color: var( --crg-color-text );
}

/*
 * The input replaces the button in place, so it keeps the same footprint --
 * wider only by what the number needs, so the row does not jump on open.
 */
.site-pagination input.site-pagination__input {
	width: 4.5em;
	min-width: 0;
	padding: 0 0.5em;
	background-color: var( --crg-color-bg );
	border: 1px solid var( --crg-color-accent );
	border-radius: var( --crg-radius-sm );
	color: var( --crg-color-text );
	font: inherit;
	text-align: center;
}

.site-pagination input.site-pagination__input:focus {
	outline: 2px solid var( --crg-color-accent );
	outline-offset: 1px;
}

/* -----------------------------------------------------------------------------
 * Single entries
 *
 * A post or a page: the title block, the body, and what follows a post.
 * -------------------------------------------------------------------------- */

.site-entry__title {
	margin: 0;
}

.site-entry__meta {
	align-items: center;
	color: var( --crg-color-text-muted );
}

.site-entry__meta a {
	color: inherit;
}

/*
 * An untagged post still renders the group, leaving its top margin as a gap
 * above the rule. Browsers without :has() simply keep the old behaviour.
 */
.site-entry__terms:not( :has( a ) ) {
	display: none;
}

/*
 * Tag chips, taken from example/search.html: a small quiet pill rather than a
 * run of links. Proportions are the reference's (10px type, 3px/7px padding,
 * 5px apart); the colours are tokens, since that file is light and this is not.
 *
 * Named .site-tags rather than .site-entry__tags so the same chip can be used
 * anywhere terms are listed.
 */
.site-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.site-tags a {
	padding: 0.3em 0.7em;
	border-radius: var( --crg-radius-sm );
	background-color: var( --crg-color-surface-alt );
	color: var( --crg-color-text-muted );
	text-decoration: none;
	transition:
		background-color var( --crg-transition-fast ),
		color var( --crg-transition-fast );
}

.site-tags a:hover,
.site-tags a:focus {
	background-color: var( --crg-color-border );
	color: var( --crg-color-text );
}

/*
 * Core joins terms with a separator span. The gap above does that job, and an
 * empty span left in a flex row still takes a gap of its own.
 */
.site-tags .wp-block-post-terms__separator {
	display: none;
}

.site-rule {
	background-color: var( --crg-color-border );
	border: 0;
	height: 1px;
	opacity: 1;
}

.site-postnav a {
	color: var( --crg-color-text-muted );
	text-decoration: none;
}

.site-postnav a:hover,
.site-postnav a:focus {
	color: var( --crg-color-text );
}

/* -----------------------------------------------------------------------------
 * Comments
 * -------------------------------------------------------------------------- */

.site-comment {
	padding: var( --crg-space-sm );
	background-color: var( --crg-color-surface );
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-md );
}

.site-comment + .site-comment {
	margin-top: var( --crg-space-sm );
}

.site-comments :where( input[type="text"], input[type="email"], input[type="url"], textarea ) {
	background-color: var( --crg-color-surface );
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-sm );
	color: var( --crg-color-text );
}

/* -----------------------------------------------------------------------------
 * Search field
 *
 * The search page's field. Kept generic under .site-search rather than tied to
 * that template, so a search block placed anywhere gets the same control.
 *
 * One control, not two. The reference draws a single bordered box with the
 * field and the button inside it; the border therefore belongs on the wrapper
 * core puts around both, and the two children give theirs up. Clipping the
 * wrapper is what lets the button sit flush into the corner.
 *
 * No width is set here -- the field fills whatever column it is placed in, as
 * the reference does.
 * -------------------------------------------------------------------------- */

.site-search .wp-block-search__inside-wrapper {
	padding: 0;
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-sm );
	background-color: var( --crg-color-surface );
	overflow: hidden;
	transition: border-color var( --crg-transition-fast );
}

/*
 * The field has no border of its own now, so the focus ring has to move out to
 * the wrapper -- otherwise focus lands on an element with nothing to show it.
 */
.site-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var( --crg-color-accent );
}

.site-search .wp-block-search__input {
	height: 48px;
	padding: 0 15px;
	border: 0;
	background-color: transparent;
	color: var( --crg-color-text );
}

.site-search .wp-block-search__input:focus {
	outline: none;
}

.site-search .wp-block-search__input::placeholder {
	color: var( --crg-color-text-muted );
	opacity: 1;
}

/*
 * The primary action, so it takes the filled treatment the rest of the theme
 * uses -- the accent carrying dark text, as on the current page in pagination.
 * Square, because the wrapper owns the corners.
 */
.site-search .wp-block-search__button {
	min-width: 90px;
	padding: 0 1em;
	border: 0;
	border-radius: 0;
	background-color: var( --crg-color-accent );
	color: var( --crg-color-text-on-accent );
	font-weight: 600;
	transition: filter var( --crg-transition-fast );
}

.site-search .wp-block-search__button:hover,
.site-search .wp-block-search__button:focus {
	filter: brightness( 1.12 );
}

/* -----------------------------------------------------------------------------
 * 404
 * -------------------------------------------------------------------------- */

/*
 * The measure is set per element rather than on the group, because the page has
 * two jobs at two widths: a sentence wants about 50 characters to stay
 * readable, and the cards below want the whole column.
 */
.site-404__code {
	display: inline-flex;
	width: fit-content;
	margin: 0;
	padding: 0.25rem 0.75rem;
	background-color: var( --crg-color-accent-soft );
	border: 1px solid var( --wp--custom--color--eyebrow-border );
	border-radius: var( --crg-radius-pill );
	color: var( --wp--custom--color--eyebrow );
	font-family: var( --crg-font-mono );
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.site-404__title {
	margin: var( --wp--preset--spacing--20 ) 0 0;
	max-width: 20ch;
	font-weight: 800;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.site-404__text {
	margin: var( --wp--preset--spacing--30 ) 0 0;
	max-width: 52ch;
	color: var( --crg-color-text-muted );
}

/* "Where to go next": a quiet monospace caption over the cards. */
.site-404__label {
	margin: 0;
	color: var( --crg-color-text-dim );
	font-family: var( --crg-font-mono );
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/*
 * A card holding a written link has no post title block to hang the arrow on,
 * so the anchor carries the whole thing. Stretched over the card, it makes the
 * entire surface the target -- which a listing card cannot do, since there the
 * date and the excerpt would be swallowed into the link text.
 */
.site-card {
	position: relative;
}

.site-card__title a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* -----------------------------------------------------------------------------
 * Search results
 *
 * The results themselves are the standard card -- .site-post, the same object
 * the blog, the archives and the recipe grid use. They were briefly a compact
 * horizontal list with a thumbnail, which made search the one page whose
 * listing looked like nothing else on the site.
 *
 * Only the furniture around the grid is search's own: the heading, the search
 * field, and the count.
 * -------------------------------------------------------------------------- */

.site-results__title {
	margin: 0;
	font-weight: 800;
	letter-spacing: -0.025em;
}

/* "N results found", sitting on the rule that opens the list. */
.site-results__count {
	margin: 0 0 var( --crg-space-sm );
	padding-bottom: 0.6em;
	border-bottom: 1px solid var( --crg-color-border );
	color: var( --crg-color-text-muted );
}

.site-results__empty {
	margin: var( --crg-space-sm ) 0 0;
	color: var( --crg-color-text-muted );
}

/* Centred pagination, as the reference has it on this page only. */
.site-pagination--center {
	justify-content: center;
}

/* -----------------------------------------------------------------------------
 * Service grid: a bento grid
 *
 * patterns/home-services.php, on the homepage and the Services page.
 *
 * Twelve columns: the featured card over 8, the others over 4, and the wide
 * card across the row. Two columns on tablets, one on phones.
 *
 * A card's icon tile is its ::before and the icon its ::after, masked from
 * assets/icons/ by the has-icon-* class, in the colour set by is-tint-N. The
 * title's link stretches over the whole card.
 * -------------------------------------------------------------------------- */

.home-services > *,
.home-services__grid > * {
	margin-block-start: 0;
}

.home-services__grid {
	display: grid;
	grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--40 );
}

.home-service {
	--card-pad: var( --wp--preset--spacing--50 );

	position: relative;
	display: flex;
	flex-direction: column;
	grid-column: span 4;
	padding: var( --card-pad );
	background-color: var( --crg-color-surface );
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-xl );
	box-shadow: var( --crg-shadow-card );
	transition:
		border-color var( --crg-transition ),
		box-shadow var( --crg-transition );
}

.home-service > * {
	margin-block: 0;
}

.home-service.is-featured {
	grid-column: span 8;
}

.home-service:hover,
.home-service:focus-within {
	border-color: color-mix( in srgb, var( --tint-fg, var( --crg-color-accent ) ) 30%, transparent );
	box-shadow: var( --crg-shadow-card-hover );
}

.home-service:has( a:focus-visible ) {
	outline: 2px solid var( --crg-color-accent );
	outline-offset: 3px;
}

.has-icon-code-blocks { --icon: url( assets/icons/code_blocks.svg ); }
.has-icon-dashboard { --icon: url( assets/icons/dashboard.svg ); }
.has-icon-web { --icon: url( assets/icons/web.svg ); }
.has-icon-api { --icon: url( assets/icons/api.svg ); }
.has-icon-speed { --icon: url( assets/icons/speed.svg ); }
.has-icon-build { --icon: url( assets/icons/build.svg ); }

/* The tile. */
.home-service::before {
	content: "";
	flex: none;
	width: 48px;
	height: 48px;
	margin-bottom: var( --wp--preset--spacing--40 );
	border-radius: var( --crg-radius-md );
	background-color: var( --tint-bg );
	transition: background-color var( --crg-transition-fast );
}

/* The icon, centred on the tile. Decorative: the title names the service. */
.home-service::after {
	content: "";
	position: absolute;
	top: calc( var( --card-pad ) + 12px );
	left: calc( var( --card-pad ) + 12px );
	width: 24px;
	height: 24px;
	background-color: var( --tint-fg );
	-webkit-mask: var( --icon ) center / contain no-repeat;
	mask: var( --icon ) center / contain no-repeat;
	pointer-events: none;
	transition: background-color var( --crg-transition-fast );
}

.home-service:hover::before {
	background-color: var( --tint-fg );
}

.home-service:hover::after {
	background-color: var( --crg-color-text-on-accent );
}

.home-service__title {
	margin-bottom: 0.75rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

.home-service.is-featured .home-service__title {
	font-size: 1.5rem;
}

.home-service__title a {
	color: var( --crg-color-text );
	text-decoration: none;
}

.home-service__title a:focus-visible {
	outline: none;
}

/* The whole card is the target; only the title is the link text. */
.home-service__title a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.home-service__text {
	margin-bottom: var( --wp--preset--spacing--40 );
	color: var( --crg-color-text-muted );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.65;
}

.home-service__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var( --wp--preset--spacing--40 );
	padding: 0;
	list-style: none;
}

.home-service__tags li {
	padding: 0.25rem 0.75rem;
	background-color: var( --crg-color-bg );
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-sm );
	color: var( --crg-color-text );
	font-size: 0.75rem;
	font-weight: 600;
}

/* "View service" and an arrow along the bottom edge, in the card's tint. */
.home-service__more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--30 );
	margin-top: auto;
	padding-top: var( --wp--preset--spacing--30 );
	border-top: 1px solid var( --crg-color-surface-alt );
	color: var( --tint-fg );
	font-size: 0.75rem;
	font-weight: 700;
}

.home-service__more::after {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask: url( assets/icons/arrow_forward.svg ) center / contain no-repeat;
	mask: url( assets/icons/arrow_forward.svg ) center / contain no-repeat;
	transition: transform var( --crg-transition-fast );
}

.home-service:hover .home-service__more::after {
	transform: translateX( 4px );
}

/* The wide card lays out in a row: tile, words, link. */
.home-service.is-wide {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 48px minmax( 0, 1fr ) auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: var( --wp--preset--spacing--50 );
}

.home-service.is-wide::before {
	grid-column: 1;
	grid-row: 1 / span 2;
	margin-bottom: 0;
}

.home-service.is-wide::after {
	top: 50%;
	transform: translateY( -50% );
}

.home-service.is-wide .home-service__title {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	margin-bottom: 0.25rem;
}

.home-service.is-wide .home-service__text {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	margin-bottom: 0;
}

.home-service.is-wide .home-service__more {
	grid-column: 3;
	grid-row: 1 / span 2;
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	white-space: nowrap;
}

@media ( max-width: 960px ) {
	.home-services__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.home-service {
		grid-column: span 1;
	}

	.home-service.is-featured,
	.home-service.is-wide {
		grid-column: 1 / -1;
	}
}

@media ( max-width: 640px ) {
	.home-services__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.home-service {
		--card-pad: var( --wp--preset--spacing--40 );
	}

	/* Too narrow for a row: the wide card stacks like the others. */
	.home-service.is-wide {
		display: flex;
		align-items: stretch;
	}

	.home-service.is-wide::before {
		margin-bottom: var( --wp--preset--spacing--40 );
	}

	.home-service.is-wide::after {
		top: calc( var( --card-pad ) + 12px );
		transform: none;
	}

	.home-service.is-wide .home-service__title {
		align-self: auto;
		margin-bottom: 0.75rem;
	}

	.home-service.is-wide .home-service__text {
		align-self: auto;
		margin-bottom: var( --wp--preset--spacing--40 );
	}

	.home-service.is-wide .home-service__more {
		margin-top: auto;
		padding-top: var( --wp--preset--spacing--30 );
		border-top: 1px solid var( --crg-color-surface-alt );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.home-service,
	.home-service::before,
	.home-service::after,
	.home-service__more::after {
		transition: none;
	}

	.home-service:hover .home-service__more::after {
		transform: none;
	}
}

/* -----------------------------------------------------------------------------
 * Service pages
 *
 * The sections in patterns/service-*.php, laid out on templates/page-service.html
 * (the Services page, FAQ and About reuse some of them). Spacing
 * between sections is the post-content blockGap in the template; spacing inside
 * each section is the section's own blockGap. What lives here is only what
 * block attributes cannot express.
 *
 * The patterns ship with empty text and editor-only placeholders, so an
 * unfinished block renders as an empty element rather than as instructions.
 * The first rule keeps those empty elements from taking up space if one is
 * ever published by mistake.
 * -------------------------------------------------------------------------- */

:where( .service-hero, .service-section, .home-banner ) :is( h1, h2, h3, p, li, summary ):empty,
:where( .service-hero, .service-section, .home-banner ) .wp-block-button:has( > .wp-block-button__link:empty ) {
	display: none;
}

/* A card, step, column, question or box with nothing written in it goes too. */
.service-card:not( :has( :is( h3, p ):not( :empty ) ) ),
.service-step:not( :has( :is( h3, p ):not( :empty ) ) ),
.service-fit__col:not( :has( :is( h3, li ):not( :empty ) ) ),
.service-faq__item:has( > summary:empty ),
.service-cta__box:not( :has( :is( h2, p, .wp-block-button__link ):not( :empty ) ) ),
.service-hero:not( :has( :is( h1, p ):not( :empty ) ) ) {
	display: none;
}

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

/*
 * The hero's inner group is a white card on the page background, like the
 * homepage's message card. The section's padding is written inline by the block
 * (from the pattern), hence !important to bring it in line with the other pages.
 */
.service-hero {
	padding-top: var( --wp--preset--spacing--60 ) !important;
	padding-right: var( --crg-gutter ) !important;
	padding-bottom: 0 !important;
	padding-left: var( --crg-gutter ) !important;
}

.service-hero__inner {
	padding: 2.5rem;
	background-color: var( --crg-color-surface );
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-2xl );
	box-shadow: var( --crg-shadow-card );
}

.service-hero__eyebrow {
	margin-block-end: 0;
}

.service-hero__title {
	margin-block-end: 0;
	max-width: 24ch;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	text-wrap: balance;
}

.service-hero__lead {
	margin-block-end: 0;
	max-width: 60ch;
	color: var( --crg-color-text-muted );
	line-height: 1.65;
	text-wrap: pretty;
}

.service-hero__actions {
	gap: var( --wp--preset--spacing--30 );
}

/* The main action takes the arrow; the second, preset-coloured one a light border. */
.service-hero__actions .wp-block-button__link:not( .has-background ) {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.service-hero__actions .wp-block-button__link:not( .has-background )::after {
	content: "";
	flex: none;
	width: 0.95em;
	height: 0.95em;
	background-color: currentColor;
	-webkit-mask: url( assets/icons/arrow_forward.svg ) center / contain no-repeat;
	mask: url( assets/icons/arrow_forward.svg ) center / contain no-repeat;
	transition: transform var( --crg-transition-fast );
}

.service-hero__actions .wp-block-button__link:not( .has-background ):hover::after {
	transform: translateX( 2px );
}

.service-hero .wp-block-button__link.has-background {
	border: 1px solid var( --crg-color-border );
	box-shadow: none;
	transition: filter var( --crg-transition-fast );
}

/* Preset colour classes print with !important, so the hover darkens instead. */
.service-hero .wp-block-button__link.has-background:hover,
.service-hero .wp-block-button__link.has-background:focus {
	filter: brightness( 0.96 );
}

@media ( max-width: 640px ) {
	.service-hero {
		padding-top: var( --wp--preset--spacing--40 ) !important;
	}

	.service-hero__inner {
		padding: 1.75rem;
	}
}

/* -- Section heads --------------------------------------------------------- */

/* Centred over the section, like the homepage's section heads. */
.service-section__title,
.service-section__intro {
	max-width: 42rem;
	margin-inline: auto;
	text-align: center;
}

.service-section__title {
	margin-block-end: 0;
	font-size: clamp( 1.875rem, 1.55rem + 1.1vw, 2.25rem );
	font-weight: 800;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.service-section__intro {
	margin-block-end: 0;
	color: var( --crg-color-text-muted );
	font-size: clamp( 0.9375rem, 0.9rem + 0.2vw, 1.0625rem );
}

.service-section > .service-section__title + .service-section__intro {
	margin-block-start: var( --wp--preset--spacing--30 );
}

/* The cards, list or columns sit further below the head than the head's parts do. */
.service-section > :is( .service-section__title, .service-section__intro ) + :not( .service-section__intro ) {
	margin-block-start: var( --wp--preset--spacing--60 );
}

/* -- Problems -------------------------------------------------------------- */

/* Static cards: a problem leads nowhere, so no hover lift. Three, two, one across. */
.service-cards {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--40 );
}

.service-cards > * {
	margin-block-start: 0;
}

.service-card {
	padding: var( --wp--preset--spacing--50 );
	background-color: var( --crg-color-surface );
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-xl );
	box-shadow: var( --crg-shadow-card );
}

/* A tinted quotation mark: the titles are what clients say. Decorative. */
.service-card::before {
	content: "\201C";
	content: "\201C" / "";
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: var( --wp--preset--spacing--30 );
	border-radius: var( --crg-radius-md );
	background-color: var( --tint-bg, var( --crg-color-accent-soft ) );
	color: var( --tint-fg, var( --crg-color-accent ) );
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1;
	padding-top: 0.35rem;
}

.service-card:nth-child( 3n + 1 ) { --tint-bg: var( --crg-tint-6-bg ); --tint-fg: var( --crg-tint-6-fg ); }
.service-card:nth-child( 3n + 2 ) { --tint-bg: var( --crg-tint-3-bg ); --tint-fg: var( --crg-tint-3-fg ); }
.service-card:nth-child( 3n + 3 ) { --tint-bg: var( --crg-tint-5-bg ); --tint-fg: var( --crg-tint-5-fg ); }

.service-card > * {
	margin-block: 0;
}

.service-card__title {
	font-size: var( --wp--preset--font-size--large );
	font-weight: 700;
	line-height: 1.35;
}

.service-card__text {
	margin-top: var( --wp--preset--spacing--20 );
	color: var( --crg-color-text-muted );
	line-height: 1.65;
}

.service-card__title a,
.service-card__text a {
	color: inherit;
}

/* Two across: an odd card out spans the row rather than sitting alone. */
@media ( max-width: 960px ) {
	.service-cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.service-cards > .service-card:last-child:nth-child( odd ) {
		grid-column: 1 / -1;
	}
}

@media ( max-width: 640px ) {
	.service-cards {
		grid-template-columns: minmax( 0, 1fr );
	}

	.service-cards > .service-card:last-child:nth-child( odd ) {
		grid-column: auto;
	}

	.service-card {
		padding: var( --wp--preset--spacing--40 );
	}
}

/* -- What you get ---------------------------------------------------------- */

/* Each outcome a small card with a tick, two across. */
.service-checklist {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--30 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-checklist li {
	position: relative;
	margin: 0;
	padding: 1rem 1.25rem 1rem 3.25rem;
	background-color: var( --crg-color-surface );
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-lg );
	box-shadow: var( --crg-shadow-card );
	line-height: 1.55;
}

.service-checklist li:last-child:nth-child( odd ) {
	grid-column: 1 / -1;
}

/* Positioned rather than a flex item, so a link inside the text stays inline. */
.service-checklist li::before {
	content: "";
	position: absolute;
	top: calc( 1rem + 0.125rem );
	left: 1.25rem;
	width: 20px;
	height: 20px;
	background-color: var( --crg-color-success );
	-webkit-mask: url( assets/icons/check_circle.svg ) center / contain no-repeat;
	mask: url( assets/icons/check_circle.svg ) center / contain no-repeat;
}

@media ( max-width: 781px ) {
	.service-checklist {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* -- Technology ------------------------------------------------------------ */

.service-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-tags li {
	margin: 0;
	padding: 0.45rem 1rem;
	background-color: var( --crg-color-surface );
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-sm );
	box-shadow: var( --crg-shadow-card );
	color: var( --crg-color-text );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
}

/* -- Fit ------------------------------------------------------------------- */

.service-fit__columns {
	gap: var( --wp--preset--spacing--40 );
}

.service-fit__col {
	padding: var( --wp--preset--spacing--50 );
	background-color: var( --crg-color-surface );
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-2xl );
	box-shadow: var( --crg-shadow-card );
}

.service-fit__col > * {
	margin-block: 0;
}

.service-fit__col--yes {
	--tint-bg: var( --crg-tint-2-bg );
	--tint-fg: var( --crg-tint-2-fg );
}

.service-fit__col--no {
	--tint-bg: var( --crg-color-surface-alt );
	--tint-fg: var( --crg-color-text-dim );
}

/* The heading opens with a tinted "+" or "−" tile. */
.service-fit__heading {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: var( --wp--preset--spacing--40 ) !important;
	font-size: var( --wp--preset--font-size--large );
	font-weight: 700;
}

.service-fit__heading::before {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: var( --crg-radius-sm );
	background-color: var( --tint-bg );
	color: var( --tint-fg );
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
}

.service-fit__col--yes .service-fit__heading::before {
	content: "+";
	content: "+" / "";
}

.service-fit__col--no .service-fit__heading::before {
	content: "\2212";
	content: "\2212" / "";
}

.service-fit__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-fit__list li {
	position: relative;
	margin: 0;
	padding: 0.75rem 0 0.75rem 1.5rem;
	color: var( --crg-color-text-muted );
	line-height: 1.55;
}

.service-fit__list li + li {
	border-top: 1px solid var( --crg-color-surface-alt );
}

.service-fit__list li::before {
	position: absolute;
	left: 0;
	color: var( --tint-fg );
	font-weight: 700;
}

.service-fit__col--yes .service-fit__list li::before {
	content: "+";
	content: "+" / "";
}

.service-fit__col--no .service-fit__list li::before {
	content: "\2212";
	content: "\2212" / "";
}

/* -- How we work ----------------------------------------------------------- */

/*
 * Step cards on a full-width band. The section sits inside the constrained
 * content, so the band is painted with a wide box-shadow and clipped to the
 * viewport's width -- no change to the block's alignment.
 */
.service-process {
	padding-block: var( --wp--preset--spacing--70 );
	background-color: var( --crg-color-surface-alt );
	box-shadow: 0 0 0 100vmax var( --crg-color-surface-alt );
	clip-path: inset( 0 -100vmax );
}

/*
 * The steps are a real sequence, so they are numbered -- by a counter, so
 * adding, removing or reordering a step never leaves a stale number behind.
 * Four, two or one across, never three and an orphan.
 */
.service-steps {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--40 );
	counter-reset: service-step;
}

.service-steps > * {
	margin-block-start: 0;
}

.service-step {
	counter-increment: service-step;
	display: flex;
	flex-direction: column;
	padding: var( --wp--preset--spacing--40 );
	background-color: var( --crg-color-surface );
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-2xl );
	box-shadow: var( --crg-shadow-card );
}

.service-step:nth-child( 4n + 1 ) { --tint-bg: var( --crg-tint-1-bg ); --tint-fg: var( --crg-tint-1-fg ); }
.service-step:nth-child( 4n + 2 ) { --tint-bg: var( --crg-tint-2-bg ); --tint-fg: var( --crg-tint-2-fg ); }
.service-step:nth-child( 4n + 3 ) { --tint-bg: var( --crg-tint-3-bg ); --tint-fg: var( --crg-tint-3-fg ); }
.service-step:nth-child( 4n + 4 ) { --tint-bg: var( --crg-tint-4-bg ); --tint-fg: var( --crg-tint-4-fg ); }

.service-step > * {
	margin-block: 0;
}

.service-step::before {
	content: counter( service-step, decimal-leading-zero );
	align-self: flex-start;
	margin-bottom: var( --wp--preset--spacing--30 );
	padding: 0.25rem 0.625rem;
	border-radius: var( --crg-radius-sm );
	background-color: var( --tint-bg );
	color: var( --tint-fg );
	font-family: var( --crg-font-mono );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.5;
}

.service-step__title {
	margin-bottom: 0.5rem !important;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
}

.service-step__text {
	color: var( --crg-color-text-muted );
	line-height: 1.6;
}

@media ( max-width: 1023px ) {
	.service-steps {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 559px ) {
	.service-steps {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* -- FAQ ------------------------------------------------------------------- */

/* One accordion card per question; the open one takes an accent border. */
.service-faq__list {
	display: grid;
	gap: 0.75rem;
	max-width: 52rem;
	margin-inline: auto;
}

.service-faq__list > * {
	margin-block: 0;
}

.service-faq__item {
	padding: 0 var( --wp--preset--spacing--40 );
	background-color: var( --crg-color-surface );
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-lg );
	box-shadow: var( --crg-shadow-card );
	transition: border-color var( --crg-transition-fast );
}

.service-faq__item[open] {
	border-color: color-mix( in srgb, var( --crg-color-accent ) 35%, transparent );
}

.service-faq__item summary {
	position: relative;
	padding: 1.15rem 3rem 1.15rem 0;
	cursor: pointer;
	font-weight: 700;
	list-style: none;
}

.service-faq__item summary::-webkit-details-marker {
	display: none;
}

.service-faq__item summary::after {
	content: "+";
	content: "+" / "";
	position: absolute;
	top: 50%;
	right: 0;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var( --crg-color-accent-soft );
	color: var( --crg-color-accent );
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1;
	transform: translateY( -50% );
}

.service-faq__item[open] summary::after {
	content: "\2212";
	content: "\2212" / "";
	background-color: var( --crg-color-accent );
	color: var( --crg-color-text-on-accent );
}

.service-faq__item summary:focus-visible {
	outline: 2px solid var( --crg-color-accent );
	outline-offset: 4px;
	border-radius: var( --crg-radius-sm );
}

.service-faq__item > :not( summary ) {
	margin: 0 0 1.15rem;
	max-width: 68ch;
	color: var( --crg-color-text-muted );
	line-height: 1.65;
}

/* -- Services hub: "Remote-first, worldwide" ------------------------------- */

.service-remote {
	padding: var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--50 );
	background-color: var( --crg-color-surface );
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-2xl );
	box-shadow: var( --crg-shadow-card );
}

.service-remote > .service-section__title + .service-section__intro {
	margin-block-start: var( --wp--preset--spacing--30 );
}

@media ( max-width: 640px ) {
	.service-remote {
		padding: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--40 );
	}
}

/* -- Call to action -------------------------------------------------------- */

/*
 * An accent band: white text, and an inverted button with the arrow. The same
 * band closes the homepage, every service page and About.
 */
.service-cta__box {
	padding: var( --wp--preset--spacing--60 );
	background-color: var( --crg-color-accent );
	border-radius: var( --crg-radius-2xl );
	color: var( --crg-color-text-on-accent );
}

.service-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background-color: var( --crg-color-surface );
	color: var( --crg-color-text );
}

.service-cta .wp-block-button__link:hover {
	background-color: var( --crg-color-accent-soft );
	box-shadow: none;
	color: var( --crg-color-text );
}

.service-cta .wp-block-button__link:focus-visible {
	outline-color: var( --crg-color-text-on-accent );
}

.service-cta .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 0.95em;
	height: 0.95em;
	background-color: currentColor;
	-webkit-mask: url( assets/icons/arrow_forward.svg ) center / contain no-repeat;
	mask: url( assets/icons/arrow_forward.svg ) center / contain no-repeat;
}

@media ( max-width: 600px ) {
	.service-cta__box {
		padding: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--40 );
	}
}

.service-cta__text {
	flex: 1 1 22rem;
	max-width: 60ch;
}

.service-cta__title {
	margin: 0;
	color: var( --crg-color-text-on-accent );
}

.service-cta__desc {
	margin: 0;
	color: var( --crg-color-on-accent-muted );
}

/* -----------------------------------------------------------------------------
 * Text pages and policy pages
 *
 * templates/page.html (About, FAQ, Get Started, Contact) and
 * templates/page-policy.html (Privacy Policy, Terms): a title band -- a label
 * pill and the page title -- over the copy in a white card, all in one 840px
 * column so the title and the card share a left edge.
 *
 * The copy sits in .site-text-column (a left-justified 760px constrained group
 * in the page content) or, on policy pages, in .site-policy. Two text pages keep
 * the column open instead of carding it: FAQ, whose questions are cards of
 * their own, and Get Started, whose form is.
 * -------------------------------------------------------------------------- */

.site-page {
	padding-block: var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--80 );
}

.site-page > * {
	margin-block-start: 0;
}

.site-page__head,
.site-page .site-text-column,
.site-page .site-policy,
.site-page .service-cta {
	box-sizing: border-box;
	max-width: 52.5rem;
	margin-inline: auto;
}

.site-page__head {
	display: grid;
	justify-items: start;
	gap: var( --wp--preset--spacing--30 );
	margin-bottom: var( --wp--preset--spacing--50 );
}

.site-page__head > * {
	margin-block: 0;
}

.site-page__title {
	font-size: clamp( 2.25rem, 1.6rem + 2.2vw, 3rem );
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	text-wrap: balance;
}

.site-page .site-text-column:not( :has( .service-faq__list, .crg-enquiry ) ),
.site-page .site-policy {
	padding: 2.5rem;
	background-color: var( --crg-color-surface );
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-2xl );
	box-shadow: var( --crg-shadow-card );
}

.site-page .service-cta {
	margin-block-start: var( --wp--preset--spacing--50 );
}

/*
 * About keeps its call to action inside the copy, so it would be a band nested in
 * the card. Instead it runs flush to the card's sides and bottom. The column's
 * justified constrained layout sets margins with !important, hence the same here.
 */
.site-page .site-text-column > .service-cta {
	max-width: none !important;
	margin: var( --wp--preset--spacing--50 ) -2.5rem -2.5rem !important;
}

.site-page .site-text-column > .service-cta .service-cta__box {
	border-radius: 0 0 calc( var( --crg-radius-2xl ) - 1px ) calc( var( --crg-radius-2xl ) - 1px );
}

/* Headings inside the copy: the site's weight, a little more room above. */
.site-text-column h2,
.site-policy h2 {
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 700;
	letter-spacing: -0.02em;
}

.site-text-column h2:not( :first-child ) {
	margin-top: var( --wp--preset--spacing--50 );
}

/* Lists in the copy take the homepage's ticks. */
.site-text-column ul.wp-block-list {
	display: grid;
	gap: var( --wp--preset--spacing--20 );
	padding: 0;
	list-style: none;
}

.site-text-column ul.wp-block-list li {
	position: relative;
	padding-inline-start: 1.75rem;
	color: var( --crg-color-text-muted );
}

.site-text-column ul.wp-block-list li::before {
	content: "";
	position: absolute;
	top: 0.5em;
	left: 0.15rem;
	width: 0.85em;
	height: 0.45em;
	border-left: 2px solid var( --crg-color-accent );
	border-bottom: 2px solid var( --crg-color-accent );
	transform: rotate( -45deg );
}

/* A button written into the copy takes the arrow. */
.site-text-column .wp-block-button__link:not( .has-background ) {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.site-text-column .wp-block-button__link:not( .has-background )::after {
	content: "";
	flex: none;
	width: 0.95em;
	height: 0.95em;
	background-color: currentColor;
	-webkit-mask: url( assets/icons/arrow_forward.svg ) center / contain no-repeat;
	mask: url( assets/icons/arrow_forward.svg ) center / contain no-repeat;
}

/* FAQ and Get Started: the question cards and the form card span the column. */
.site-text-column .service-faq__list,
.site-text-column .crg-enquiry-wrap {
	max-width: none;
}

.site-text-column .crg-enquiry-wrap > .crg-enquiry {
	box-sizing: border-box;
	max-width: none;
}

/* Policy pages: the opening statement carries the weight, the date recedes. */
.site-policy .site-policy__lead {
	font-weight: 400;
	line-height: 1.45;
	margin-bottom: var( --wp--preset--spacing--30 );
}

.site-policy .site-policy__meta {
	color: var( --crg-color-text-dim );
}

.site-policy h2 {
	margin-top: var( --wp--preset--spacing--50 );
}

@media ( max-width: 640px ) {
	.site-page {
		padding-block: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--60 );
	}

	.site-page .site-text-column:not( :has( .service-faq__list, .crg-enquiry ) ),
	.site-page .site-policy {
		padding: 1.75rem 1.25rem;
	}

	.site-page .site-text-column > .service-cta {
		margin: var( --wp--preset--spacing--40 ) -1.25rem -1.75rem !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.service-hero__actions .wp-block-button__link::after,
	.service-faq__item {
		transition: none;
	}
}