/**
 * Virgo — components
 * Buttons, cards, badges, hero, process steps, forms, post lists, pagination.
 * Everything reads the semantic aliases from base.css so a component dropped
 * into a light band recolours itself with no extra classes.
 */

/* -------------------------------------------------------------------------
   1. Buttons

   Three levels, and only three:

     PRIMARY    brand gradient fill. One per screen — "Start a project" and
                the equivalent conversion action.
     SECONDARY  restrained outline on a subtle surface. "Explore services",
                "View work", "View case study".
     TERTIARY   a text action with the shared arrow icon. Card and detail
                navigation.

   Everything below is one of those three plus its state. Radius, type scale,
   padding, hover, focus-visible, disabled and aria-busy are declared once, on
   the shared base, so a button cannot drift by call site.

   `--light` is the secondary level rendered for a dark photographic or
   gradient background; `--outline` and `--secondary` are the same level under
   two names, kept because both appear in saved content.

   Core markup is .wp-block-button > .wp-block-button__link. Block styles are
   registered in PHP as is-style-virgo-primary / -outline / -light.
   ---------------------------------------------------------------------- */

.wp-block-button__link,
.virgo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	position: relative;
	/*
	 * min-height, not padding alone, is what guarantees the tap target: padding
	 * plus line-height already clears 44px here, but min-height keeps it true if
	 * the label ever renders at a smaller size or the font falls back.
	 */
	min-height: 3rem;
	padding: 0.9rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--virgo-radius-pill);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.005em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--virgo-transition), color var(--virgo-transition),
		border-color var(--virgo-transition), transform var(--virgo-transition), box-shadow var(--virgo-transition);
}

/* The gradient primary needs its focus ring lifted clear of the button's own
   glow, or the ring reads as part of the shadow. */
.wp-block-button__link:focus-visible,
.virgo-btn:focus-visible {
	outline: 2px solid var(--virgo-focus);
	outline-offset: 3px;
}

.wp-block-button__link:hover,
.virgo-btn:hover {
	transform: translateY(-1px);
	text-decoration: none;
}

.wp-block-button__link:active,
.virgo-btn:active {
	transform: translateY(0);
}

/* ---- PRIMARY ---------------------------------------------------------- */

/*
 * The fill gradient, not the decorative one. The decorative gradient ends on
 * #fb923c, and white on that is 2.26:1 — every primary button failed AA across
 * the right-hand third of its hover sweep. --virgo-brand-gradient-fill is the
 * same violet -> magenta -> orange progression at depths that all clear 4.5:1.
 */
.is-style-virgo-primary > .wp-block-button__link,
.virgo-btn--primary {
	background-image: var(--virgo-brand-gradient-fill);
	background-color: var(--wp--preset--color--violet-deep);
	background-size: 160% 100%;
	background-position: 0% 50%;
	color: #fff;
	border-color: transparent;
	box-shadow: 0 10px 30px -14px rgba(109, 40, 217, 0.75);
	transition: background-position var(--virgo-transition-slow), transform var(--virgo-transition), box-shadow var(--virgo-transition);
}

.is-style-virgo-primary > .wp-block-button__link:hover,
.virgo-btn--primary:hover {
	background-position: 100% 50%;
	color: #fff;
	box-shadow: 0 16px 40px -16px rgba(190, 24, 93, 0.7);
}

/* ---- SECONDARY -------------------------------------------------------- */

.is-style-virgo-outline > .wp-block-button__link,
.virgo-btn--outline,
.virgo-btn--secondary {
	background-color: var(--virgo-bg-card);
	color: var(--virgo-text);
	border-color: var(--virgo-line-strong);
}

.is-style-virgo-outline > .wp-block-button__link:hover,
.virgo-btn--outline:hover,
.virgo-btn--secondary:hover {
	background-color: var(--virgo-bg-card-hover);
	border-color: var(--virgo-accent);
	color: var(--virgo-text);
}

/* Secondary rendered for a dark photo or a gradient band beneath it. */
.is-style-virgo-light > .wp-block-button__link,
.virgo-btn--light {
	background-color: #fff;
	background-image: none;
	color: var(--wp--preset--color--base);
	border-color: transparent;
}

.is-style-virgo-light > .wp-block-button__link:hover,
.virgo-btn--light:hover {
	background-color: var(--wp--preset--color--paper-2);
	color: var(--wp--preset--color--base);
}

/* ---- TERTIARY --------------------------------------------------------- */

/*
 * A text action, not a button, so it gets no box. The arrow is the same glyph
 * the icon set draws — a masked copy of virgo_icon('arrow') rather than a
 * typographic "→", so the tertiary action matches every other arrow on the
 * page. No extra request and no icon font: the mask is inline.
 */
.virgo-btn--link,
.virgo-btn--tertiary,
.virgo-btn--ghost {
	min-height: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 4px;
	color: var(--virgo-link);
	font-weight: 600;
}

.virgo-btn--link::after,
.virgo-btn--tertiary::after {
	content: "";
	width: var(--icon-chevron);
	height: var(--icon-chevron);
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--virgo-arrow-mask) center / contain no-repeat;
	mask: var(--virgo-arrow-mask) center / contain no-repeat;
	transition: transform var(--virgo-transition);
}

.virgo-btn--link:hover,
.virgo-btn--tertiary:hover,
.virgo-btn--ghost:hover {
	transform: none;
	color: var(--virgo-text);
}

.virgo-btn--link:hover::after,
.virgo-btn--tertiary:hover::after {
	transform: translateX(3px);
}

/*
 * --ghost carries its own leading icon in the markup (the external-link glyph
 * on portfolio cards), so it must not also grow a trailing arrow.
 */
.virgo-btn--ghost {
	color: var(--virgo-text-muted);
}

.virgo-btn--ghost:hover,
.virgo-btn--ghost:focus-visible {
	color: var(--virgo-text);
}

/* ---- Sizes and states ------------------------------------------------- */

/* Compact — used in dense chrome such as a card footer or the header bar. */
.virgo-btn--sm {
	min-height: 2.75rem;
	padding: 0.6rem 1.1rem;
	font-size: 0.875rem;
}

.virgo-btn--full {
	width: 100%;
}

.virgo-btn[disabled],
.virgo-btn[aria-disabled="true"],
.wp-block-button__link[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	pointer-events: none;
	box-shadow: none;
}

/* Loading: the label stays in place so the button does not change width, and a
   spinner is added beside it. aria-busy carries the state for assistive tech. */
.virgo-btn[aria-busy="true"] {
	cursor: progress;
	pointer-events: none;
}

.virgo-btn[aria-busy="true"]::before {
	content: "";
	width: 0.95em;
	height: 0.95em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: virgo-btn-spin 0.7s linear infinite;
}

@keyframes virgo-btn-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.virgo-btn[aria-busy="true"]::before {
		animation-duration: 2.4s;
	}
}

/* An icon sitting inside any button matches the shared optical size. */
.virgo-btn > svg,
.wp-block-button__link > svg {
	width: var(--icon-ui);
	height: var(--icon-ui);
	flex: none;
}

.virgo-btn--sm > svg {
	width: var(--icon-chevron);
	height: var(--icon-chevron);
}

/* -------------------------------------------------------------------------
   2. Cards
   ---------------------------------------------------------------------- */

.virgo-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: clamp(1.375rem, 2.4vw, 1.875rem);
	background-color: var(--virgo-bg-card);
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-lg);
	color: var(--virgo-text);
	transition: background-color var(--virgo-transition), border-color var(--virgo-transition),
		transform var(--virgo-transition), box-shadow var(--virgo-transition);
	overflow: hidden;
	height: 100%;
	/* Level 1 of three: flat. --raised is the hover step, --overlay is menus. */
	box-shadow: var(--elev-flat);
}

/* A hairline of brand colour that appears on hover — restrained, no glow. */
.virgo-card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: var(--virgo-brand-gradient);
	opacity: 0;
	transition: opacity var(--virgo-transition);
}

.virgo-card--interactive:hover,
.virgo-card--interactive:focus-within {
	background-color: var(--virgo-bg-card-hover);
	border-color: var(--virgo-line-strong);
	/* The ceiling for the whole site: no card lifts further than 2px. */
	transform: translateY(-2px);
	box-shadow: var(--elev-raised);
}

.virgo-card--interactive:hover::before,
.virgo-card--interactive:focus-within::before {
	opacity: 1;
}

.virgo-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--icon-box);
	height: var(--icon-box);
	margin-bottom: 0.5rem;
	border-radius: var(--virgo-radius-md);
	background: var(--virgo-brand-gradient-soft);
	border: 1px solid var(--virgo-line);
	color: var(--virgo-accent);
	flex: none;
}

.virgo-card__icon svg {
	width: var(--icon-card);
	height: var(--icon-card);
}

.virgo-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--virgo-text);
}

.virgo-card__title a {
	color: inherit;
	text-decoration: none;
}

.virgo-card__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--virgo-text-muted);
}

.virgo-card__meta {
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--virgo-text-muted);
}

.virgo-card__footer {
	margin-top: auto;
	padding-top: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.virgo-card__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.virgo-card__list li {
	font-size: 0.8125rem;
	line-height: 1.4;
	padding: 0.3rem 0.65rem;
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-pill);
	color: var(--virgo-text-muted);
}

/* Stretched link: the whole card is clickable, one tab stop, real link text. */
.virgo-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	border-radius: inherit;
}

.virgo-card__overlay:focus-visible {
	outline: 2px solid var(--virgo-focus);
	outline-offset: -3px;
}

/* Card with a media area on top. */
.virgo-card--media {
	padding: 0;
}

.virgo-card--media .virgo-card__media {
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.20), rgba(236, 72, 153, 0.14) 55%, rgba(251, 146, 60, 0.10));
	border-bottom: 1px solid var(--virgo-line);
	overflow: hidden;
}

.virgo-card--media .virgo-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--virgo-transition-slow);
}

.virgo-card--media:hover .virgo-card__media img {
	transform: scale(1.03);
}

.virgo-card--media .virgo-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: clamp(1.25rem, 2.2vw, 1.625rem);
	flex: 1;
}

/* A numbered feature card used in "Why Virgo". */
.virgo-card--numbered .virgo-card__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--virgo-accent);
}

/* -------------------------------------------------------------------------
   3. Badges
   ---------------------------------------------------------------------- */

.virgo-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.28rem 0.7rem;
	border: 1px solid var(--virgo-line-strong);
	border-radius: var(--virgo-radius-pill);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--virgo-text-muted);
	white-space: nowrap;
}

.virgo-badge::before {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.virgo-badge--live {
	color: #6ee7b7;
	border-color: rgba(110, 231, 183, 0.34);
	background-color: rgba(110, 231, 183, 0.08);
}

.virgo-band--light .virgo-badge--live,
.virgo-band--tinted .virgo-badge--live {
	color: #047857;
	border-color: rgba(4, 120, 87, 0.28);
	background-color: rgba(4, 120, 87, 0.07);
}

.virgo-badge--soon {
	color: var(--wp--preset--color--orange);
	border-color: rgba(251, 146, 60, 0.34);
	background-color: rgba(251, 146, 60, 0.08);
}

.virgo-band--light .virgo-badge--soon,
.virgo-band--tinted .virgo-badge--soon {
	color: #b45309;
	border-color: rgba(180, 83, 9, 0.28);
	background-color: rgba(180, 83, 9, 0.07);
}

/* -------------------------------------------------------------------------
   Article contents ("On this page")
   Long-form articles only. Collapsible with <details>, so it is keyboard
   operable and needs no JavaScript.
   ---------------------------------------------------------------------- */

.virgo-toc {
	margin: 0 0 2.5rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-md);
	background-color: var(--virgo-bg-card);
}

.virgo-toc__summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--virgo-text);
	list-style-position: outside;
}

.virgo-toc__summary:focus-visible {
	outline: 2px solid var(--virgo-focus);
	outline-offset: 3px;
	border-radius: var(--virgo-radius-sm);
}

.virgo-toc__list {
	margin: 0.9rem 0 0;
	padding-left: 1.25rem;
	display: grid;
	gap: 0.45rem;
	color: var(--virgo-text-muted);
}

.virgo-toc__item {
	margin: 0;
}

.virgo-toc__link {
	color: var(--virgo-link);
	text-decoration: none;
	line-height: 1.45;
}

.virgo-toc__link:hover,
.virgo-toc__link:focus-visible {
	color: var(--virgo-text);
	text-decoration: underline;
}

/* Two columns once there is room; a single column stays readable on a phone. */
@media (min-width: 48rem) {
	.virgo-toc__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.75rem;
	}
}

/* The fixed header would otherwise cover the heading an anchor jumps to. */
.virgo-toc ~ * h2[id],
.entry-content h2[id] {
	scroll-margin-top: calc(var(--wp--custom--header--height, 72px) + 1.25rem);
}

/* -------------------------------------------------------------------------
   4. Hero
   ---------------------------------------------------------------------- */

.virgo-hero {
	position: relative;
	padding-block: clamp(4rem, 10vw, 8rem);
	overflow: clip;
}

.virgo-hero__inner {
	position: relative;
	z-index: 1;
	width: var(--virgo-content-shell);
	margin-inline: auto;
}

.virgo-hero__title {
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--display-xl);
	line-height: 1.04;
	letter-spacing: -0.032em;
	max-width: 17ch;
}

.virgo-hero__lede {
	margin: 0 0 2rem;
	font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.3125rem);
	line-height: 1.6;
	color: var(--virgo-text-muted);
	max-width: 58ch;
}

.virgo-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

@media (max-width: 26rem) {
	.virgo-hero__actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.virgo-hero__actions .virgo-btn {
		width: 100%;
	}
}

.virgo-hero__note {
	margin: 1.75rem 0 0;
	font-size: 0.875rem;
	color: var(--virgo-text-muted);
}

/* Compact hero used on internal pages. */
.virgo-hero--page {
	padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 5vw, 3.5rem);
}

.virgo-hero--page .virgo-hero__title {
	font-size: var(--wp--preset--font-size--display);
	max-width: 20ch;
}

/* -------------------------------------------------------------------------
   5. Process steps
   ---------------------------------------------------------------------- */

.virgo-steps {
	display: grid;
	gap: clamp(1rem, 2vw, 1.25rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	counter-reset: virgo-step;
	list-style: none;
	margin: 0;
	padding: 0;
}

.virgo-step {
	position: relative;
	padding: clamp(1.25rem, 2.2vw, 1.625rem);
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-lg);
	background-color: var(--virgo-bg-card);
	counter-increment: virgo-step;
	transition: border-color var(--virgo-transition), background-color var(--virgo-transition);
}

.virgo-step:hover {
	border-color: var(--virgo-line-strong);
	background-color: var(--virgo-bg-card-hover);
}

.virgo-step::before {
	content: "0" counter(virgo-step);
	display: block;
	margin-bottom: 0.85rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	background: var(--virgo-brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.virgo-step__title {
	margin: 0 0 0.45rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--virgo-text);
}

.virgo-step__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--virgo-text-muted);
}

/* -------------------------------------------------------------------------
   6. Definition / stat rows (facts only — no invented numbers)
   ---------------------------------------------------------------------- */

.virgo-facts {
	display: grid;
	gap: 1px;
	background-color: var(--virgo-line);
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-lg);
	overflow: hidden;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	margin: 0;
}

.virgo-fact {
	background-color: var(--virgo-bg);
	padding: clamp(1.125rem, 2vw, 1.5rem);
}

.virgo-fact__label {
	display: block;
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--virgo-text-muted);
}

.virgo-fact__value {
	display: block;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--virgo-text);
}

/* -------------------------------------------------------------------------
   7. Capability list (used on service pages)
   ---------------------------------------------------------------------- */

.virgo-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.7rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.virgo-checklist li {
	position: relative;
	padding-left: 1.65rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--virgo-text-muted);
}

.virgo-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.52em;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 3px;
	background: var(--virgo-brand-gradient);
}

/* -------------------------------------------------------------------------
   8. Forms
   ---------------------------------------------------------------------- */

.virgo-form {
	display: grid;
	gap: 1.15rem;
}

.virgo-form__row {
	display: grid;
	gap: 1.15rem;
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.virgo-form__row--2 {
		grid-template-columns: 1fr 1fr;
	}
}

.virgo-field {
	display: grid;
	gap: 0.45rem;
}

.virgo-field__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--virgo-text);
}

.virgo-field__label .virgo-req {
	color: var(--wp--preset--color--magenta);
	margin-left: 0.15rem;
}

.virgo-band--light .virgo-field__label .virgo-req,
.virgo-band--tinted .virgo-field__label .virgo-req {
	color: #be185d;
}

.virgo-field__hint {
	font-size: 0.8125rem;
	color: var(--virgo-text-muted);
}

.virgo-input,
.virgo-select,
.virgo-textarea {
	width: 100%;
	padding: 0.8rem 1rem;
	background-color: var(--virgo-bg-card);
	border: 1px solid var(--virgo-line-strong);
	border-radius: var(--virgo-radius-md);
	color: var(--virgo-text);
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color var(--virgo-transition), background-color var(--virgo-transition), box-shadow var(--virgo-transition);
	/* 16px minimum stops iOS zooming the viewport on focus. */
	min-height: 3rem;
}

.virgo-band--light .virgo-input,
.virgo-band--light .virgo-select,
.virgo-band--light .virgo-textarea,
.virgo-band--tinted .virgo-input,
.virgo-band--tinted .virgo-select,
.virgo-band--tinted .virgo-textarea {
	background-color: #fff;
}

.virgo-textarea {
	min-height: 9rem;
}

.virgo-input::placeholder,
.virgo-textarea::placeholder {
	color: var(--virgo-text-muted);
	opacity: 0.75;
}

.virgo-input:focus,
.virgo-select:focus,
.virgo-textarea:focus {
	outline: none;
	border-color: var(--virgo-accent);
	box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
}

.virgo-band--light .virgo-input:focus,
.virgo-band--light .virgo-select:focus,
.virgo-band--light .virgo-textarea:focus,
.virgo-band--tinted .virgo-input:focus,
.virgo-band--tinted .virgo-select:focus,
.virgo-band--tinted .virgo-textarea:focus {
	box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.18);
}

.virgo-input[aria-invalid="true"],
.virgo-select[aria-invalid="true"],
.virgo-textarea[aria-invalid="true"] {
	border-color: #f87171;
}

.virgo-select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.25rem) 1.35rem, calc(100% - 1rem) 1.35rem;
	background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
}

.virgo-select option {
	background-color: var(--wp--preset--color--surface);
	color: #fff;
}

.virgo-band--light .virgo-select option,
.virgo-band--tinted .virgo-select option {
	background-color: #fff;
	color: var(--wp--preset--color--ink);
}

.virgo-checkbox {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.7rem;
	align-items: start;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--virgo-text-muted);
	cursor: pointer;
}

.virgo-checkbox input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.2rem 0 0;
	accent-color: var(--virgo-accent);
	cursor: pointer;
	flex: none;
}

.virgo-form__error {
	margin: 0;
	font-size: 0.8125rem;
	color: #fca5a5;
}

.virgo-band--light .virgo-form__error,
.virgo-band--tinted .virgo-form__error {
	color: #b91c1c;
}

/* The honeypot must be hidden from sight but reachable by bots, and it must
   never be announced or focusable for real users. */
.virgo-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.virgo-notice {
	padding: 1rem 1.15rem;
	border-radius: var(--virgo-radius-md);
	border: 1px solid var(--virgo-line-strong);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.virgo-notice--success {
	border-color: rgba(110, 231, 183, 0.4);
	background-color: rgba(110, 231, 183, 0.09);
	color: #a7f3d0;
}

.virgo-band--light .virgo-notice--success,
.virgo-band--tinted .virgo-notice--success {
	color: #065f46;
	background-color: rgba(4, 120, 87, 0.07);
}

.virgo-notice--error {
	border-color: rgba(248, 113, 113, 0.42);
	background-color: rgba(248, 113, 113, 0.09);
	color: #fecaca;
}

.virgo-band--light .virgo-notice--error,
.virgo-band--tinted .virgo-notice--error {
	color: #991b1b;
	background-color: rgba(153, 27, 27, 0.06);
}

/* -------------------------------------------------------------------------
   9. Contact details panel
   ---------------------------------------------------------------------- */

.virgo-contact-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1.35rem;
}

.virgo-contact-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.85rem;
	align-items: start;
}

.virgo-contact-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: var(--virgo-radius-md);
	background: var(--virgo-brand-gradient-soft);
	border: 1px solid var(--virgo-line);
	color: var(--virgo-accent);
	flex: none;
	margin-top: 0.1rem;
}

.virgo-contact-item__body {
	display: block;
	min-width: 0;
}

.virgo-contact-item__address {
	font-style: normal;
	line-height: 1.6;
	display: block;
	margin-bottom: 0.3rem;
}

/*
 * "Chat on WhatsApp" is a real action sitting directly under the phone number,
 * not prose, so it gets a tertiary control's shape and its own tap target.
 * The separation comes from the parent being a flex column (see
 * .virgo-contact-item__value) rather than from a margin on an inline box —
 * an inline anchor and a flex box sharing one line box is what let the number
 * and the action collide before.
 */
.virgo-contact-item__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	max-width: 100%;
	padding: 0.5rem 0.85rem;
	min-height: 2.5rem;
	border: 1px solid rgba(37, 211, 102, 0.45);
	border-radius: var(--virgo-radius-pill);
	background-color: rgba(37, 211, 102, 0.12);
	color: var(--virgo-text);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--virgo-transition), border-color var(--virgo-transition);
}

.virgo-contact-item__wa:hover,
.virgo-contact-item__wa:focus-visible {
	background-color: rgba(37, 211, 102, 0.22);
	border-color: rgba(37, 211, 102, 0.75);
}

.virgo-contact-item__wa svg {
	flex: none;
}

.virgo-contact-social {
	margin-top: 1.6rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--virgo-line);
}

.virgo-contact-social ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
}

.virgo-contact-social a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.85rem;
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-pill);
	font-size: 0.875rem;
	text-decoration: none;
	color: var(--virgo-text-muted);
	transition: color var(--virgo-transition), border-color var(--virgo-transition), background-color var(--virgo-transition);
}

.virgo-contact-social a:hover,
.virgo-contact-social a:focus-visible {
	color: var(--virgo-text);
	border-color: var(--virgo-line-strong);
	background-color: var(--virgo-bg-card-hover);
}

.virgo-contact-social svg {
	flex: none;
}

.virgo-contact-item__label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--virgo-text-muted);
}

/*
 * A block-level flex column, so every part of a contact detail — the number and
 * the WhatsApp action, or the address and its map link — is a separate flex
 * item with real space between it and the next. As an inline span these boxes
 * shared a line box and ran into each other.
 */
.virgo-contact-item__value {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	min-width: 0;
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--virgo-text);
	/* Long addresses and email addresses must wrap, never widen the column. */
	overflow-wrap: anywhere;
}

.virgo-contact-item__value a {
	color: var(--virgo-link);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.virgo-contact-item__value a:hover {
	border-bottom-color: currentColor;
}

/* -------------------------------------------------------------------------
   10. Post lists, archives and pagination
   ---------------------------------------------------------------------- */

.virgo-post-card__date {
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	color: var(--virgo-text-muted);
}

.wp-block-query-pagination {
	margin-top: clamp(2rem, 4vw, 3rem);
	gap: 0.5rem;
	align-items: center;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding-inline: 0.75rem;
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-pill);
	color: var(--virgo-text-muted);
	text-decoration: none;
	font-size: 0.9375rem;
	transition: border-color var(--virgo-transition), color var(--virgo-transition), background-color var(--virgo-transition);
}

.wp-block-query-pagination a:hover {
	border-color: var(--virgo-accent);
	color: var(--virgo-text);
	background-color: var(--virgo-bg-card-hover);
}

.wp-block-query-pagination .page-numbers.current {
	background-image: var(--virgo-brand-gradient);
	border-color: transparent;
	color: #fff;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   11. Breadcrumbs
   ---------------------------------------------------------------------- */

.virgo-breadcrumbs {
	font-size: 0.8125rem;
	color: var(--virgo-text-muted);
	margin: 0 0 1.25rem;
}

.virgo-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.virgo-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.virgo-breadcrumbs li + li::before {
	content: "/";
	color: var(--virgo-line-strong);
	opacity: 0.9;
}

.virgo-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.virgo-breadcrumbs a:hover {
	color: var(--virgo-text);
	text-decoration: underline;
}

.virgo-breadcrumbs [aria-current="page"] {
	color: var(--virgo-text);
}

/* -------------------------------------------------------------------------
   12. Long-form content (single post, legal pages)
   ---------------------------------------------------------------------- */

.virgo-prose > * + * {
	margin-top: 1.15em;
}

.virgo-prose > :is(h2, h3, h4) {
	margin-top: 2.1em;
	margin-bottom: 0.55em;
}

.virgo-prose > h2 {
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
}

.virgo-prose > h3 {
	font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.4375rem);
}

.virgo-prose ul,
.virgo-prose ol {
	padding-left: 1.35rem;
}

.virgo-prose li + li {
	margin-top: 0.45em;
}

.virgo-prose table th,
.virgo-prose table td {
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--virgo-line);
	text-align: left;
	vertical-align: top;
}

.virgo-prose table th {
	background-color: var(--virgo-bg-card);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   13. Logo lockup
   Sized for a 160-200px horizontal logo. Until the final Virgo Creative
   Solutions artwork is supplied, the typographic lockup below fills that
   slot at the same proportions, so swapping in the real file changes
   nothing else in the header.
   ---------------------------------------------------------------------- */

.virgo-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: #fff;
	line-height: 1;
}

.virgo-logo:hover {
	color: #fff;
}

/*
 * The mark alone carries the brand — no wordmark is rendered beside it, so the
 * height is set explicitly rather than being derived from a text lockup.
 * 44px on a phone, 54px from the laptop breakpoint up; width follows the file's
 * own aspect ratio, which the width/height attributes have already told the
 * browser about, so nothing shifts while the image loads.
 */
.virgo-logo__img {
	display: block;
	height: 44px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

@media (min-width: 64rem) {
	.virgo-logo__img {
		height: 54px;
	}
}

@media (max-width: 25rem) {
	.virgo-logo__img {
		height: 40px;
	}
}

.virgo-logo__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 12px;
	background: var(--virgo-brand-gradient);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
	flex: none;
	box-shadow: 0 6px 18px -8px rgba(139, 92, 246, 0.8);
}

.virgo-logo__text {
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
	min-width: 0;
}

.virgo-logo__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #fff;
	white-space: nowrap;
}

.virgo-logo__sub {
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}

@media (max-width: 24rem) {
	.virgo-logo__sub {
		display: none;
	}

	.virgo-logo__mark {
		width: 2.1rem;
		height: 2.1rem;
		font-size: 1.05rem;
	}
}

/* -------------------------------------------------------------------------
   14. 404 / empty states
   ---------------------------------------------------------------------- */

.virgo-empty {
	text-align: center;
	padding-block: clamp(3rem, 8vw, 6rem);
	max-width: 46rem;
	margin-inline: auto;
}

.virgo-empty__code {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3.5rem, 12vw, 7rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	background: var(--virgo-brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	margin: 0 0 1rem;
}

/* -------------------------------------------------------------------------
   15. Search form
   ---------------------------------------------------------------------- */

.wp-block-search__input {
	background-color: var(--virgo-bg-card);
	border: 1px solid var(--virgo-line-strong);
	border-radius: var(--virgo-radius-pill);
	color: var(--virgo-text);
	padding: 0.75rem 1.15rem;
	min-height: 3rem;
}

.wp-block-search__input:focus {
	outline: none;
	border-color: var(--virgo-accent);
	box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
}

.wp-block-search__button {
	background-image: var(--virgo-brand-gradient);
	border: 0;
	border-radius: var(--virgo-radius-pill);
	color: #fff;
	font-weight: 600;
	padding: 0.75rem 1.35rem;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
   16. Small structural helpers used by the dynamic blocks
   ---------------------------------------------------------------------- */

.virgo-list-reset {
	list-style: none;
	margin: 0;
	padding: 0;
}

.virgo-card__titlerow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   17. Block style variations registered in inc/block-styles.php
   ---------------------------------------------------------------------- */

.wp-block-group.is-style-virgo-panel {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background-color: var(--virgo-bg-card);
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-xl);
}

.wp-block-list.is-style-virgo-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.7rem;
}

.wp-block-list.is-style-virgo-checklist li {
	position: relative;
	padding-left: 1.65rem;
	line-height: 1.6;
}

.wp-block-list.is-style-virgo-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.52em;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 3px;
	background: var(--virgo-brand-gradient);
}

.wp-block-separator.is-style-virgo-brand-rule {
	height: 2px;
	border: 0;
	max-width: 5rem;
	margin-inline: 0;
	border-radius: 2px;
	background: var(--virgo-brand-gradient);
	opacity: 1;
}

.virgo-center .wp-block-separator.is-style-virgo-brand-rule {
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   18. Case study and business detail panels
   ---------------------------------------------------------------------- */

.virgo-project-facts,
.virgo-business-facts {
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

.virgo-project-facts__narrative > h2,
.virgo-business-facts > h2 {
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	margin: 0 0 0.75rem;
}

.virgo-project-facts__narrative > h2:not(:first-child) {
	margin-top: 2rem;
}

.virgo-project-facts__narrative p {
	margin: 0 0 0.9rem;
	color: var(--virgo-text-muted);
	max-width: 68ch;
}

.virgo-project-facts__link,
.virgo-business-facts__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

.virgo-business-facts__status {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.virgo-business-facts__parent {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.5;
	color: var(--virgo-text);
}

/* -------------------------------------------------------------------------
   19. Insights list
   ---------------------------------------------------------------------- */

.wp-block-post-template.is-flex-container {
	gap: clamp(1rem, 2.2vw, 1.5rem);
}

/*
 * auto-fit, not auto-fill: with three articles and room for four tracks,
 * auto-fill keeps the empty fourth and the cards huddle on the left.
 */
.virgo-loop {
	display: grid;
	gap: clamp(1rem, 2.2vw, 1.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.virgo-loop > li {
	margin: 0;
}

/* Query loop items styled as cards without extra markup. */
.virgo-loop .wp-block-post-title {
	font-size: 1.25rem;
	margin: 0 0 0.5rem;
}

.virgo-loop .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--virgo-text-muted);
}

.virgo-loop .wp-block-post-date {
	font-size: 0.8125rem;
	color: var(--virgo-text-muted);
	margin: 0 0 0.5rem;
}

.virgo-loop .wp-block-post-featured-image {
	margin: 0 0 1rem;
	border-radius: var(--virgo-radius-md);
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.virgo-loop .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
   20. Hero visual
   An abstract, CSS-only composition — no image weight, no library, and it
   scales to any viewport because everything is relative.
   ---------------------------------------------------------------------- */

.virgo-hero-visual {
	position: relative;
	display: grid;
	gap: 0.75rem;
	padding: clamp(1rem, 2vw, 1.5rem);
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-xl);
	background:
		linear-gradient(160deg, rgba(139, 92, 246, 0.12), rgba(236, 72, 153, 0.07) 45%, transparent 75%),
		rgba(255, 255, 255, 0.02);
	box-shadow: var(--elev-overlay);
	overflow: hidden;
}

.virgo-hero-visual::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: var(--virgo-brand-gradient);
	opacity: 0.7;
}

.virgo-hero-visual__bar {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding-bottom: 0.35rem;
}

.virgo-hero-visual__bar span {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
}

.virgo-hero-visual__bar span:first-child {
	background: rgba(251, 146, 60, 0.75);
}

.virgo-hero-visual__bar span:nth-child(2) {
	background: rgba(236, 72, 153, 0.7);
}

.virgo-hero-visual__bar span:nth-child(3) {
	background: rgba(139, 92, 246, 0.7);
}

.virgo-hero-visual__row {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.virgo-hero-visual__tile {
	padding: 0.9rem 1rem;
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-md);
	background: rgba(255, 255, 255, 0.03);
	min-height: 4.75rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.3rem;
}

.virgo-hero-visual__tile strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff;
	line-height: 1.25;
}

.virgo-hero-visual__tile span {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.virgo-hero-visual__tile--accent {
	background: var(--virgo-brand-gradient-soft);
	border-color: rgba(139, 92, 246, 0.32);
}

.virgo-hero-visual__lines {
	display: grid;
	gap: 0.45rem;
	padding: 0.85rem 1rem 1rem;
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-md);
	background: rgba(255, 255, 255, 0.02);
}

.virgo-hero-visual__lines i {
	display: block;
	height: 0.4rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.09);
}

.virgo-hero-visual__lines i:nth-child(1) { width: 84%; }
.virgo-hero-visual__lines i:nth-child(2) { width: 62%; }
.virgo-hero-visual__lines i:nth-child(3) { width: 73%; background: linear-gradient(90deg, rgba(139,92,246,.55), rgba(236,72,153,.35)); }
.virgo-hero-visual__lines i:nth-child(4) { width: 45%; }

@media (max-width: 61.999rem) {
	.virgo-hero-visual {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   21. Section head helper used by patterns
   ---------------------------------------------------------------------- */

.virgo-band .virgo-container > .virgo-section-head:first-child {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
   22. Core grid layout integration
   Patterns use core's native grid layout for card rows, so the owner can add
   or remove a card in the editor and the row reflows on its own.
   ---------------------------------------------------------------------- */

.wp-block-group.is-layout-grid > .virgo-card,
.wp-block-group.is-layout-grid > .virgo-step {
	margin: 0;
	height: 100%;
}

/* Counter context for steps laid out with core's grid. */
.virgo-steps-counter {
	counter-reset: virgo-step;
}

.virgo-steps-counter > .virgo-step {
	counter-increment: virgo-step;
}

/* Cards built from core blocks keep their internal rhythm tight. */
.virgo-card > .wp-block-heading,
.virgo-card > p {
	margin-block: 0;
}

.virgo-card.wp-block-group > * + * {
	margin-block-start: 0.6rem;
}

.virgo-step.wp-block-group > * + * {
	margin-block-start: 0.45rem;
}

/* -------------------------------------------------------------------------
   23. Safety net for buttons on light bands
   theme.json makes the default button white-on-near-black, which is correct on
   a dark band and invisible on a light one. If an editor adds a button without
   picking a Virgo style, invert it rather than letting it disappear.
   ---------------------------------------------------------------------- */

.virgo-band--light .wp-block-button:not([class*="is-style-virgo"]) > .wp-block-button__link,
.virgo-band--tinted .wp-block-button:not([class*="is-style-virgo"]) > .wp-block-button__link,
.virgo-panel .wp-block-button:not([class*="is-style-virgo"]) > .wp-block-button__link {
	background-color: var(--wp--preset--color--ink);
	color: #fff;
}

.virgo-band--light .wp-block-button:not([class*="is-style-virgo"]) > .wp-block-button__link:hover,
.virgo-band--tinted .wp-block-button:not([class*="is-style-virgo"]) > .wp-block-button__link:hover,
.virgo-panel .wp-block-button:not([class*="is-style-virgo"]) > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--violet-deep);
	color: #fff;
}

/* -------------------------------------------------------------------------
   24. Portfolio project cards
   Two distinct actions per card — read the case study, or open the live site.
   The media area is a link too, but it is hidden from assistive technology so
   screen reader users get one clean set of controls rather than three.
   ---------------------------------------------------------------------- */

.virgo-card--project .virgo-card__media {
	position: relative;
	display: block;
	text-decoration: none;
}

.virgo-card--project .virgo-card__host {
	position: absolute;
	left: 0.75rem;
	bottom: 0.75rem;
	padding: 0.28rem 0.6rem;
	border-radius: var(--virgo-radius-pill);
	background: rgba(6, 6, 13, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
	max-width: calc(100% - 1.5rem);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.virgo-card__actions {
	margin-top: auto;
	padding-top: 0.85rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.virgo-card__actions .virgo-btn {
	flex: 1 1 auto;
	justify-content: center;
	min-width: 0;
}

/* A quieter third-level action: no border until it is interacted with. */
.virgo-btn--ghost {
	background-color: transparent;
	border-color: transparent;
	color: var(--virgo-text-muted);
	padding-inline: 0.85rem;
}

.virgo-btn--ghost:hover,
.virgo-btn--ghost:focus-visible {
	background-color: var(--virgo-bg-card-hover);
	border-color: var(--virgo-line);
	color: var(--virgo-text);
}

.virgo-btn--ghost svg {
	flex: none;
	opacity: 0.85;
}

/* The card is interactive but has no stretched overlay, so the hover
   treatment is driven by the card itself. */
.virgo-card--project .virgo-card__title a {
	color: inherit;
	text-decoration: none;
}

.virgo-card--project .virgo-card__title a:hover,
.virgo-card--project .virgo-card__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

@media (max-width: 26rem) {
	.virgo-card__actions .virgo-btn {
		flex: 1 1 100%;
	}
}

/* -------------------------------------------------------------------------
   25. Case study page
   ---------------------------------------------------------------------- */

.virgo-project-shot img {
	width: 100%;
	border-radius: var(--virgo-radius-lg);
	border: 1px solid var(--virgo-line);
}

.virgo-livesite {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1.1rem, 2.4vw, 1.6rem);
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-lg);
	background: var(--virgo-brand-gradient-soft);
}

.virgo-livesite__text > * {
	margin: 0;
}

.virgo-livesite__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--virgo-text-muted);
}

.virgo-livesite__host {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
	font-weight: 600;
	color: var(--virgo-text);
	word-break: break-all;
}

@media (max-width: 34rem) {
	.virgo-livesite {
		flex-direction: column;
		align-items: stretch;
	}

	.virgo-livesite .virgo-btn {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
   26. Hero visual — final proportions
   The right column is a real half of the hero, not a decorative card. Its
   aspect ratio is fixed so it reserves space before paint and contributes no
   layout shift.
   ---------------------------------------------------------------------- */

.virgo-hero-visual {
	position: relative;
	display: grid;
	gap: clamp(0.6rem, 1.2vw, 0.9rem);
	width: 100%;
	aspect-ratio: 4 / 3.35;
	padding: clamp(1rem, 2vw, 1.6rem);
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-xl);
	background:
		linear-gradient(160deg, rgba(139, 92, 246, 0.16), rgba(236, 72, 153, 0.09) 45%, transparent 75%),
		rgba(255, 255, 255, 0.025);
	box-shadow: var(--elev-overlay);
	overflow: hidden;
	grid-template-rows: auto 1fr auto 1fr;
	align-content: stretch;
}

.virgo-hero-visual::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: var(--virgo-brand-gradient);
	opacity: 0.85;
}

/* A soft brand glow behind the panel, so it sits in light rather than on top
   of flat black. Purely decorative and cheap to composite. */
.virgo-hero-visual::after {
	content: "";
	position: absolute;
	inset: 12% -18% -22% 6%;
	z-index: -1;
	background: radial-gradient(58% 52% at 50% 50%, rgba(139, 92, 246, 0.30) 0%, transparent 72%);
	filter: blur(28px);
	pointer-events: none;
}

.virgo-hero-visual__bar {
	display: flex;
	align-items: center;
	gap: 0.42rem;
}

.virgo-hero-visual__bar span {
	width: 0.58rem;
	height: 0.58rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
}

.virgo-hero-visual__bar span:first-child { background: rgba(251, 146, 60, 0.8); }
.virgo-hero-visual__bar span:nth-child(2) { background: rgba(236, 72, 153, 0.75); }
.virgo-hero-visual__bar span:nth-child(3) { background: rgba(139, 92, 246, 0.75); }

.virgo-hero-visual__row {
	display: grid;
	gap: clamp(0.6rem, 1.2vw, 0.9rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.virgo-hero-visual__tile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.3rem;
	min-width: 0;
	padding: clamp(0.85rem, 1.6vw, 1.15rem);
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-md);
	background: rgba(255, 255, 255, 0.035);
}

.virgo-hero-visual__tile span {
	font-size: clamp(0.625rem, 0.55rem + 0.2vw, 0.75rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	line-height: 1.3;
}

.virgo-hero-visual__tile strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(0.875rem, 0.78rem + 0.35vw, 1.0625rem);
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
	/* Two short words per tile — never let them split awkwardly. */
	text-wrap: balance;
}

.virgo-hero-visual__tile--accent {
	background:
		linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(236, 72, 153, 0.14)),
		rgba(255, 255, 255, 0.03);
	border-color: rgba(139, 92, 246, 0.34);
}

.virgo-hero-visual__lines {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	padding: clamp(0.85rem, 1.6vw, 1.15rem);
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-md);
	background: rgba(255, 255, 255, 0.02);
}

.virgo-hero-visual__lines i {
	display: block;
	height: 0.45rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.10);
}

.virgo-hero-visual__lines i:nth-child(1) { width: 86%; }
.virgo-hero-visual__lines i:nth-child(2) { width: 64%; }
.virgo-hero-visual__lines i:nth-child(3) { width: 74%; background: linear-gradient(90deg, rgba(139,92,246,.62), rgba(236,72,153,.4)); }
.virgo-hero-visual__lines i:nth-child(4) { width: 47%; }

/* Below the two-column breakpoint the visual sits under the copy at a wider,
   shorter ratio so it never dominates a phone screen. */
@media (max-width: 61.999rem) {
	.virgo-hero-visual {
		aspect-ratio: 4 / 2.9;
		max-width: 34rem;
		margin-inline: auto;
	}
}

@media (max-width: 30rem) {
	.virgo-hero-visual {
		aspect-ratio: 4 / 3.6;
	}
}

/* -------------------------------------------------------------------------
   27. Card and step headings — line breaking
   Short headings in narrow columns wrap into ragged three-line stacks. Balance
   distributes the words evenly and the tighter scale keeps them to two lines.
   ---------------------------------------------------------------------- */

.virgo-card__title,
.virgo-step__title,
.virgo-card h3,
.virgo-step h3 {
	text-wrap: balance;
}

.elementor .virgo-step__title .elementor-heading-title {
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.25;
	text-wrap: balance;
}

.elementor .virgo-card .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.3;
	text-wrap: balance;
}

/* -------------------------------------------------------------------------
   28. Logo mark — image variant
   The site icon is the company's own mark, so when one exists it replaces the
   typographic square. The frame keeps the same footprint either way.
   ---------------------------------------------------------------------- */

.virgo-logo__mark--img {
	background: transparent;
	box-shadow: none;
	padding: 0;
	overflow: hidden;
	border-radius: 10px;
}

.virgo-logo__markimg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* -------------------------------------------------------------------------
   29. Form error summary
   A list of what needs fixing, at the top of the form, each item linking to
   the control it describes.
   ---------------------------------------------------------------------- */

.virgo-notice__list {
	margin: 0.6rem 0 0;
	padding-left: 1.15rem;
	display: grid;
	gap: 0.3rem;
	font-size: 0.9375rem;
}

.virgo-notice__list a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.virgo-notice__list a:hover,
.virgo-notice__list a:focus-visible {
	text-decoration-thickness: 2px;
}

/* -------------------------------------------------------------------------
   30. Field and contact-item alignment corrections
   ---------------------------------------------------------------------- */

/*
 * A field is a grid, and in a two-column row the grid stretches to the height
 * of its taller neighbour — which made the Service select grow to match the
 * Budget field's hint text. Controls keep their own height.
 */
.virgo-field {
	align-content: start;
}

.virgo-field > select,
.virgo-field > input,
.virgo-field > .virgo-select,
.virgo-field > .virgo-input {
	align-self: start;
	width: 100%;
}

/*
 * The phone number and the WhatsApp link are two separate actions; inline they
 * run together as soon as the column is wide enough to fit both.
 */
.virgo-contact-item__value > a {
	display: inline-block;
}

/* -------------------------------------------------------------------------
   31. Business call to action
   The closing block on a business page. It offers the business, not a digital
   project brief, so it needs its own quiet presentation.
   ---------------------------------------------------------------------- */

.virgo-business-cta {
	max-width: 44rem;
}

.virgo-business-cta__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
	line-height: 1.2;
	text-wrap: balance;
}

.virgo-business-cta__intro {
	margin: 0 0 1.75rem;
	color: var(--virgo-text-muted);
	max-width: 60ch;
}

.virgo-business-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

@media (max-width: 30rem) {
	.virgo-business-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.virgo-business-cta__actions .virgo-btn {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
   32. Prose measure in block templates
   Elementor pages cap their reading column and align it with the section
   above. The block templates (projects, businesses, articles) were letting
   core's constrained layout centre the text instead, so the copy sat in the
   middle of the page while the heading above it started at the container edge.
   ---------------------------------------------------------------------- */

.virgo-container > .virgo-prose {
	max-width: 44rem;
}

.virgo-container > .virgo-prose > .alignwide {
	max-width: var(--virgo-wide);
}

.virgo-container > .virgo-prose > .alignfull {
	max-width: none;
}

/* -------------------------------------------------------------------------
   33. Capability pillars
   Four cards standing in for fifteen service cards on the home page. Each one
   keeps its full set of service links, so nothing is lost from internal
   linking — the section is simply a quarter of the height.
   ---------------------------------------------------------------------- */

.elementor .virgo-pillars {
	display: grid;
	gap: clamp(1rem, 2.2vw, 1.5rem);
}

@media (min-width: 48rem) {
	.elementor .virgo-pillars {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.virgo-pillar {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	align-content: start;
}

.elementor .virgo-pillar__title .elementor-heading-title {
	margin: 0;
	font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
	line-height: 1.25;
}

.elementor .virgo-pillar__lede {
	margin: 0;
	color: var(--virgo-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.elementor .virgo-pillar__lede p {
	margin: 0;
}

/*
 * The links are the point of the card: every service page is still one click
 * away. Set as a wrapping row separated by middots rather than a list, so four
 * or five links stay compact.
 */
.elementor .virgo-pillar__links {
	margin-top: auto;
	padding-top: 0.65rem;
	font-size: 0.875rem;
	line-height: 1.9;
}

/*
 * These are the separators between the service links, not decoration: at
 * 0.35 white they were about 3:1 on the base surface. The links themselves
 * take the link colour; this is what sits between them.
 */
.elementor .virgo-pillar__links p {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
}

.elementor .virgo-pillar__links a {
	color: var(--virgo-link);
	text-decoration: none;
	white-space: nowrap;
}

.elementor .virgo-pillar__links a:hover,
.elementor .virgo-pillar__links a:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* -------------------------------------------------------------------------
   34. Image slots
   A place that is waiting for a real photograph. The outline states what
   belongs there and at what size; once an image is attached the filled variant
   renders instead and none of this applies.
   ---------------------------------------------------------------------- */

.virgo-imgslot {
	margin: 0;
	width: 100%;
	aspect-ratio: var(--virgo-slot-ratio, 4 / 3);
	border-radius: var(--virgo-radius-lg);
	overflow: hidden;
}

/* Filled: the real image, cropped to the slot rather than stretching it. */
.virgo-imgslot--filled {
	background-color: var(--virgo-bg-card, rgba(255, 255, 255, 0.03));
	border: 1px solid var(--virgo-line);
}

.virgo-imgslot__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Empty: white card with a light grey border, per the brief. It is deliberately
 * light on both dark and light bands so it reads as "something is missing here"
 * rather than as a designed panel.
 */
.virgo-imgslot--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 3vw, 2rem);
	background-color: #fff;
	border: 1px solid #d9d9e3;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
	text-align: center;
}

.virgo-imgslot__inner {
	max-width: 26ch;
}

.virgo-imgslot__eyebrow {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8a8a9c;
}

.virgo-imgslot__label {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem);
	font-weight: 600;
	line-height: 1.3;
	color: #2a2a38;
	text-wrap: balance;
}

.virgo-imgslot__spec {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.7;
	color: #6b6b7d;
}

.virgo-imgslot__dims {
	font-variant-numeric: tabular-nums;
	color: #2a2a38;
}

.virgo-imgslot__ratio {
	color: #8a8a9c;
}

/* On a narrow phone the spec line is noise; the label carries the meaning. */
@media (max-width: 26rem) {
	.virgo-imgslot__spec {
		font-size: 0.75rem;
	}
}

/* A row of supporting square slots. */
.virgo-imgslot-row {
	display: grid;
	gap: clamp(0.75rem, 2vw, 1.25rem);
	grid-template-columns: 1fr;
	margin-block: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 40rem) {
	.virgo-imgslot-row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * The business image sits above the page's prose, which is capped at the
 * reading measure. Left at full container width a 4:3 slot is over 900px tall
 * and dominates the page, and its left edge disagrees with every paragraph
 * beneath it. Matching the measure keeps the column honest.
 */
.wp-block-virgo-business-image {
	max-width: 44rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* =========================================================================
   35. Icon system

   The SVG set in virgo-core is already coherent: one 24 × 24 viewBox, one
   1.5 stroke, currentColor, aria-hidden. What was not coherent was the size
   asked for at each call site — 14, 15, 16, 17, 18, 22 and 24 all appeared,
   often for the same glyph in two places.

   Sizes now come from the tokens in base.css and are applied by context, so a
   call site cannot pick its own. The PHP helper still writes width/height
   attributes, which is the fallback if this stylesheet never arrives.

   No icon library was added and no dependency introduced: these are the
   existing inline SVGs, sized.
   ========================================================================= */

.virgo-icon,
.virgo-inline-icon {
	flex: none;
	display: inline-block;
	vertical-align: middle;
}

/* Simple UI: a glyph beside a label in header, footer and contact rows. */
.virgo-topbar__link svg,
.virgo-footer__wa svg,
.virgo-contact-item__wa svg,
.virgo-footer__social svg,
.virgo-topbar__social svg,
.virgo-drawer__social svg,
.virgo-social__list svg,
.virgo-contact-item__icon svg,
.virgo-info__icon svg {
	width: var(--icon-ui);
	height: var(--icon-ui);
	flex: none;
}

/* Icon-only controls: 20px glyph inside a 44px target. */
.virgo-iconbtn svg,
.virgo-search__icon svg,
.virgo-search__submit svg {
	width: var(--icon-action);
	height: var(--icon-action);
	flex: none;
}

/* Large feature icon: 24px inside a 48px container. */
.virgo-icon-box--lg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--icon-box-lg);
	height: var(--icon-box-lg);
	border-radius: var(--virgo-radius-md);
	background: var(--virgo-brand-gradient-soft);
	border: 1px solid var(--virgo-line);
	color: var(--virgo-accent);
	flex: none;
}

.virgo-icon-box--lg svg {
	width: var(--icon-feature);
	height: var(--icon-feature);
}

/* Chevrons and inline arrows. */
.virgo-menu__caret,
.virgo-chevron {
	width: var(--icon-chevron);
	height: var(--icon-chevron);
	flex: none;
}

/*
 * The info block emits `.virgo-info__icon` and nothing styled it, so the glyph
 * rendered at whatever the markup asked for with no alignment.
 */
.virgo-info__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--virgo-accent);
	flex: none;
}

/* An external-link glyph sits with the label, never above or below it. */
.virgo-btn--ghost svg,
.virgo-livesite svg {
	width: var(--icon-chevron);
	height: var(--icon-chevron);
	flex: none;
}

/* =========================================================================
   36. Process component

   One shared treatment wherever Discover / Plan / Design / Build / Launch /
   Support appears. The number is the visual cue; icons are optional and
   secondary. Desktop reads as a connected 3 × 2 sequence, tablet as 2 × 3 and
   mobile as a vertical timeline — never six unrelated floating cards.
   ========================================================================= */

/*
 * Three tracks on desktop rather than four. Five of the site's process grids
 * were declared at four columns, which rendered 4 + 1 and 4 + 2; at three they
 * are 3 + 2 and 3 + 3, and the sequence still reads left to right.
 */
@media (min-width: 62rem) {
	.virgo-steps-counter.virgo-grid--4,
	.virgo-steps-counter.virgo-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) and (max-width: 61.999rem) {
	.virgo-steps-counter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The connector: a hairline from each step to the next within a row. It is
   decorative, drawn in CSS, and disappears at the end of a row and on mobile. */
@media (min-width: 48rem) {
	.virgo-steps-counter > * {
		position: relative;
	}

	.virgo-steps-counter > *::after {
		content: "";
		position: absolute;
		top: 2.15rem;
		left: 100%;
		width: clamp(1rem, 2.2vw, 1.5rem);
		height: 1px;
		background: linear-gradient(90deg, var(--virgo-line-strong), transparent);
		pointer-events: none;
	}

	/* No connector trailing off the right-hand edge of a row. */
	.virgo-steps-counter.virgo-grid--3 > :nth-child(3n)::after,
	.virgo-steps-counter.virgo-grid--4 > :nth-child(3n)::after,
	.virgo-steps-counter > :last-child::after {
		display: none;
	}
}

@media (min-width: 48rem) and (max-width: 61.999rem) {
	.virgo-steps-counter.virgo-grid--3 > :nth-child(3n)::after,
	.virgo-steps-counter.virgo-grid--4 > :nth-child(3n)::after {
		display: block;
	}

	.virgo-steps-counter > :nth-child(2n)::after {
		display: none;
	}
}

/* Mobile: a vertical timeline. The rule runs down the left of the column and
   each step sits against it. */
@media (max-width: 47.999rem) {
	.virgo-steps-counter {
		position: relative;
		padding-left: 1.25rem;
	}

	.virgo-steps-counter::before {
		content: "";
		position: absolute;
		left: 0.3rem;
		top: 1.5rem;
		bottom: 1.5rem;
		width: 1px;
		background: linear-gradient(180deg, transparent, var(--virgo-line-strong) 12%, var(--virgo-line-strong) 88%, transparent);
	}

	.virgo-steps-counter > * {
		position: relative;
	}

	.virgo-steps-counter > *::before {
		content: "";
		position: absolute;
		left: -1.25rem;
		top: 1.75rem;
		width: 0.45rem;
		height: 0.45rem;
		margin-left: 0.08rem;
		border-radius: 50%;
		background: var(--virgo-brand-gradient);
	}
}

/* The step card itself: flat, one elevation step on hover, never a float. */
.virgo-step {
	box-shadow: var(--elev-flat);
}

.virgo-step:hover {
	box-shadow: var(--elev-raised);
}

/* The number is the primary cue, so give it more presence than the old 13px. */
.virgo-step::before {
	font-size: 0.9375rem;
	letter-spacing: 0.14em;
}

/* =========================================================================
   37. Service pillars

   Four pillars stand in front of the fifteen services on the Digital Services
   hub, so the structure is understood before the choices are offered.
   ========================================================================= */

.virgo-pillargrid {
	display: grid;
	gap: clamp(1rem, 2.2vw, 1.5rem);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40rem) {
	.virgo-pillargrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 75rem) {
	.virgo-pillargrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.virgo-pillarcard {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	height: 100%;
	padding: clamp(1.375rem, 2.4vw, 1.75rem);
	background-color: var(--virgo-bg-card);
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-lg);
	box-shadow: var(--elev-flat);
	transition: border-color var(--virgo-transition), background-color var(--virgo-transition),
		transform var(--virgo-transition), box-shadow var(--virgo-transition);
}

.virgo-pillarcard:hover,
.virgo-pillarcard:focus-within {
	background-color: var(--virgo-bg-card-hover);
	border-color: var(--virgo-line-strong);
	transform: translateY(-2px);
	box-shadow: var(--elev-raised);
}

.virgo-pillarcard__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.012em;
	color: var(--virgo-text);
}

.virgo-pillarcard__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--virgo-text-muted);
}

.virgo-pillarcard__links {
	margin: auto 0 0;
	padding: 0.85rem 0 0;
	list-style: none;
	display: grid;
	gap: 0.1rem;
	border-top: 1px solid var(--virgo-line);
}

.virgo-pillarcard__links a {
	display: block;
	padding: 0.35rem 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--virgo-text-muted);
	text-decoration: none;
	transition: color var(--virgo-transition);
}

.virgo-pillarcard__links a:hover,
.virgo-pillarcard__links a:focus-visible {
	color: var(--virgo-text);
	text-decoration: underline;
}

/* The grouped detail below the pillars: a chapter per pillar. */
.virgo-servicegroup + .virgo-servicegroup {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--virgo-line);
}

.virgo-servicegroup__head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0 0 0.5rem;
}

.virgo-servicegroup__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--virgo-text);
}

.virgo-servicegroup__text {
	margin: 0 0 1.25rem;
	max-width: 62ch;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--virgo-text-muted);
}

/* =========================================================================
   38. Service-page section rhythm

   Every service page is a hero, one long prose column and a call to action.
   The copy is right; the problem is that a reader cannot see where one part
   ends and the next begins. Each H2 now opens a section with a hairline above
   it and deliberate space around it, which segments the page without touching
   a word of the content or splitting it into per-page overrides.
   ========================================================================= */

.virgo-prose > :is(h2, .wp-block-heading):not(:first-child) {
	margin-top: clamp(2.75rem, 5vw, 4.25rem);
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid var(--virgo-line);
}

.virgo-prose > h3 {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* A grid or card group inside the prose column may use the full width; only
   running text is held to the reading measure. */
.virgo-prose > .virgo-grid,
.virgo-prose > .virgo-steps,
.virgo-prose > .virgo-facts {
	max-width: none;
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* =========================================================================
   39. Case-study metadata bar

   Client, Industry, Market, Services and the live site read as one horizontal
   bar under the hero on desktop and stack cleanly on a phone. Only fields
   that actually hold a value are rendered — there is no year, technology or
   result field on any project, and none is invented here.
   ========================================================================= */

.virgo-facts {
	box-shadow: var(--elev-flat);
}

.virgo-metabar {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1px;
	margin: 0;
	background-color: var(--virgo-line);
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-lg);
	overflow: hidden;
}

.virgo-metabar__item {
	flex: 1 1 12rem;
	min-width: 0;
	padding: clamp(0.9rem, 1.8vw, 1.15rem) clamp(1rem, 2vw, 1.35rem);
	background-color: var(--virgo-bg);
}

.virgo-metabar__item--wide {
	flex: 2 1 20rem;
}

.virgo-metabar__label {
	display: block;
	margin: 0 0 0.3rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--virgo-text-muted);
}

.virgo-metabar__value {
	display: block;
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--virgo-text);
}

.virgo-metabar__item--action {
	display: flex;
	align-items: center;
	flex: 0 1 auto;
}

@media (max-width: 40rem) {
	.virgo-metabar__item,
	.virgo-metabar__item--wide {
		flex: 1 1 100%;
	}
}

/* =========================================================================
   40. Contact method cards
   ========================================================================= */

.virgo-contact-methods {
	display: grid;
	gap: clamp(0.75rem, 1.8vw, 1rem);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 34rem) {
	.virgo-contact-methods {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.virgo-contact-method {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	height: 100%;
	min-height: 3rem;
	padding: clamp(1rem, 2vw, 1.35rem);
	background-color: var(--virgo-bg-card);
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-lg);
	color: var(--virgo-text);
	text-decoration: none;
	box-shadow: var(--elev-flat);
	transition: border-color var(--virgo-transition), background-color var(--virgo-transition),
		transform var(--virgo-transition), box-shadow var(--virgo-transition);
}

.virgo-contact-method:hover,
.virgo-contact-method:focus-visible {
	background-color: var(--virgo-bg-card-hover);
	border-color: var(--virgo-line-strong);
	transform: translateY(-2px);
	box-shadow: var(--elev-raised);
	color: var(--virgo-text);
}

.virgo-contact-method__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--icon-box);
	height: var(--icon-box);
	margin-bottom: 0.35rem;
	border-radius: var(--virgo-radius-md);
	background: var(--virgo-brand-gradient-soft);
	border: 1px solid var(--virgo-line);
	color: var(--virgo-accent);
	flex: none;
}

.virgo-contact-method__icon svg {
	width: var(--icon-card);
	height: var(--icon-card);
}

.virgo-contact-method__label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--virgo-text-muted);
}

.virgo-contact-method__value {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/* =========================================================================
   41. Tables inside long-form content

   Every table must remain usable at 320px without shrinking its type. The
   wrapper scrolls; the document never does. The swipe hint is rendered by the
   filter only when the table is genuinely wider than a phone, and it is
   hidden from the moment there is room for the table to fit.
   ========================================================================= */

.virgo-tablewrap {
	position: relative;
	margin-block: clamp(1.5rem, 3vw, 2rem);
}

.virgo-tablewrap__scroll {
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-md);
}

.virgo-tablewrap__scroll:focus-visible {
	outline: 2px solid var(--virgo-focus);
	outline-offset: 2px;
}

/*
 * One scroll container, not two. `.virgo-prose table` and `.wp-block-table`
 * each set display:block + overflow-x:auto, so without these the wrapper, the
 * figure and the table itself were all potential scrollers and a swipe could
 * land on any of them. The wrapper scrolls; everything inside it lays out
 * normally.
 */
.virgo-tablewrap table,
.virgo-tablewrap .wp-block-table table,
.virgo-tablewrap .virgo-prose table {
	display: table;
	margin: 0;
	min-width: 34rem;
	border: 0;
	overflow: visible;
}

.virgo-tablewrap .wp-block-table {
	overflow: visible;
	margin: 0;
}

.virgo-tablewrap :is(th, td) {
	padding: 0.7rem 0.9rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	border-bottom: 1px solid var(--virgo-line);
	text-align: left;
	vertical-align: top;
}

.virgo-tablewrap th {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--virgo-text);
	background-color: var(--virgo-bg-raised);
	white-space: nowrap;
}

.virgo-tablewrap tr:last-child :is(th, td) {
	border-bottom: 0;
}

.virgo-tablewrap__hint {
	display: block;
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	color: var(--virgo-text-muted);
}

.virgo-tablewrap__hint::after {
	content: " →";
}

/* Once the viewport is wide enough to hold the table, the hint is wrong. */
@media (min-width: 40rem) {
	.virgo-tablewrap__hint {
		display: none;
	}
}

/* =========================================================================
   42. Article contents — polish
   ========================================================================= */

.virgo-toc {
	border-left: 2px solid transparent;
	border-image: var(--virgo-brand-gradient) 1;
	border-radius: 0 var(--virgo-radius-md) var(--virgo-radius-md) 0;
	box-shadow: var(--elev-flat);
}

.virgo-toc__summary::marker {
	color: var(--virgo-accent);
}

.virgo-toc__link {
	display: inline-block;
	padding-block: 0.1rem;
	border-radius: 3px;
}

.virgo-toc__link:focus-visible {
	outline: 2px solid var(--virgo-focus);
	outline-offset: 2px;
}

/*
 * The fixed header would otherwise cover whatever a contents link jumps to.
 * --virgo-shell-h is the live measured height of the header, so this stays
 * correct when the utility bar or the search row is present.
 */
:is(.entry-content, .virgo-prose, .wp-block-post-content) :is(h2, h3)[id] {
	scroll-margin-top: calc(var(--virgo-shell-h) + 1.5rem);
}

/* On a phone the panel is a disclosure that starts closed, so the article
   begins at the article rather than at a list of its own headings. */
@media (max-width: 47.999rem) {
	.virgo-toc {
		margin-bottom: 1.75rem;
		padding: 0.85rem 1rem;
	}

	.virgo-toc__list {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   43. Business status

   The one active business must read as a gateway, and the three that are not
   yet trading must read consistently as coming soon. Nothing here invents a
   product or changes a status.
   ========================================================================= */

.virgo-business-status {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
}

.virgo-card--soon {
	border-style: dashed;
}

.virgo-card--soon .virgo-card__icon {
	background: none;
	color: var(--virgo-text-muted);
}

/* =========================================================================
   44. Contact details — method cards

   Phone, WhatsApp, email, address and hours were a flat list of icon-plus-text
   rows. The three that are actions now read as cards you can tap, and the two
   that are reference (address, hours) stay quieter beneath them. The content
   is unchanged: same values, same order, same single source in Virgo Settings,
   so nothing is duplicated.
   ========================================================================= */

.virgo-contact-list {
	gap: 0.75rem;
}

.virgo-contact-item {
	padding: clamp(0.9rem, 2vw, 1.15rem);
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-lg);
	background-color: var(--virgo-bg-card);
	box-shadow: var(--elev-flat);
	transition: border-color var(--virgo-transition), background-color var(--virgo-transition);
}

.virgo-contact-item:hover,
.virgo-contact-item:focus-within {
	border-color: var(--virgo-line-strong);
	background-color: var(--virgo-bg-card-hover);
}

/* The icon container matches every other card icon on the site. */
.virgo-contact-item__icon {
	width: var(--icon-box);
	height: var(--icon-box);
	margin-top: 0;
}

.virgo-contact-item__label {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--virgo-text-muted);
}

.virgo-contact-item__value {
	font-size: 1rem;
	line-height: 1.45;
}

/* =========================================================================
   45. Step list

   A short ordered sequence — "What happens next" on Contact — rendered as
   numbered steps rather than bullets. The list markup and its wording are
   untouched; the numbers are counters.
   ========================================================================= */

.virgo-steplist ol,
.virgo-steplist ul {
	counter-reset: virgo-steplist;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.virgo-steplist li {
	counter-increment: virgo-steplist;
	position: relative;
	padding-left: 2.35rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--virgo-text-muted);
}

.virgo-steplist li::before {
	content: counter(virgo-steplist, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.65rem;
	height: 1.65rem;
	border-radius: 50%;
	border: 1px solid var(--virgo-line-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--virgo-accent);
}

/* The connecting rule between one step and the next. */
.virgo-steplist li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 0.8rem;
	top: 1.75rem;
	bottom: -0.85rem;
	width: 1px;
	background: var(--virgo-line);
}

/* =========================================================================
   46. Portfolio and case-study cards

   Seven projects, three columns where there is room, two on a tablet and one
   on a phone. The whole card is deliberately NOT a stretched link: each card
   carries a second, separate action to the live site, and an overlay link
   would swallow it. The screenshot and the title are both links to the case
   study instead, which keeps one clear tab order and leaves the live-site
   button reachable.
   ========================================================================= */

@media (min-width: 75rem) {
	.virgo-projects .virgo-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.virgo-card--project .virgo-card__actions {
	margin-top: auto;
	padding-top: 0.85rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

/* The external action is tertiary next to "View case study". */
.virgo-card--project .virgo-btn--ghost {
	min-height: 2.75rem;
	padding-inline: 0.25rem;
}

.virgo-card--project .virgo-card__meta {
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
}

.virgo-card--project .virgo-card__title a:focus-visible {
	outline: 2px solid var(--virgo-focus);
	outline-offset: 3px;
	border-radius: 4px;
}