@charset "UTF-8";

:root {
	--nova-orange: #c94f00;
	--nova-blue: #007ac9;
	--nova-ink: #171717;
	--nova-warm-white: #f7f5f1;
	--nova-white: #ffffff;
	--nova-soft-grey: #eceae6;
	--nova-mid-grey: #727272;
	--nova-max-width: 1180px;
	--nova-gutter: clamp(20px, 4vw, 48px);
	--type-eyebrow: 11.5px;
	--type-small: 13px;
	--type-body: 16px;
	--type-card-title: 24px;
	--type-section-title: 30px;
	--type-hero-title: 38px;
	--type-hero-secondary: 19px;
	--leading-eyebrow: 1.2;
	--leading-body: 1.5;
	--leading-title: 1.15;
	--leading-hero-title: 1.08;
	--weight-body: 400;
	--weight-secondary: 500;
	--weight-hero-title: 500;
	--weight-heading: 500;
	--weight-card-title: 600;
	--weight-cta: 600;
	--weight-eyebrow: 600;
	--nova-type-eyebrow: var(--type-eyebrow);
	--nova-type-body: var(--type-body);
	--nova-type-section-heading: var(--type-section-title);
	--nova-type-card-title: var(--type-card-title);
	--nova-type-meta: var(--type-small);
}

body {
	background: var(--nova-warm-white);
	color: var(--nova-ink);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: var(--type-body);
	font-weight: var(--weight-body);
	line-height: var(--leading-body);
	padding-bottom: calc(82px + env(safe-area-inset-bottom));
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

:focus-visible {
	outline: 3px solid var(--nova-orange);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	left: 16px;
	top: 16px;
	z-index: 10;
	transform: translateY(-140%);
	background: var(--nova-ink);
	color: var(--nova-white);
	padding: 10px 14px;
}

.skip-link:focus {
	transform: translateY(0);
}

.site-header {
	background: var(--nova-ink);
	color: var(--nova-white);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-header__inner {
	width: min(100% - (var(--nova-gutter) * 2), var(--nova-max-width));
	min-height: auto;
	margin: 0 auto;
	padding: 18px 0;
	gap: clamp(14px, 2.2vw, 30px);
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
}

.site-logo {
	flex: 0 0 auto;
}

.site-logo img {
	width: clamp(150px, 18vw, 210px);
}

.site-nav {
	display: none;
}

.site-nav__list {
	width: max-content;
	gap: clamp(16px, 2.2vw, 28px);
	padding-bottom: 4px;
}

.site-nav a,
.site-header__phone {
	font-size: 0.94rem;
	font-weight: 650;
	text-decoration: none;
}

.site-nav a {
	color: rgba(255, 255, 255, 0.84);
}

.site-nav a:hover {
	color: var(--nova-white);
}

.site-header__phone {
	display: none;
	background: var(--nova-orange);
	color: var(--nova-white);
	border: 1px solid var(--nova-orange);
	border-radius: 9px;
	margin-left: auto;
	padding: 12px 16px;
	white-space: nowrap;
}

.site-header__phone:hover {
	background: var(--nova-white);
	border-color: var(--nova-white);
	color: var(--nova-ink);
}

.mobile-service-nav {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 20;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 2px;
	padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
	background: rgba(255, 255, 255, 0.96);
	border-top: 1px solid var(--nova-soft-grey);
	box-shadow: 0 -12px 32px rgba(23, 23, 23, 0.12);
}

.mobile-service-nav__item {
	display: flex;
	min-width: 0;
	min-height: 58px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 3px;
	border-radius: 10px;
	color: var(--nova-ink);
	font-size: 0.64rem;
	font-weight: 750;
	line-height: 1;
	text-decoration: none;
}

.mobile-service-nav__item svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mobile-service-nav__item--call {
	background: var(--nova-orange);
	color: var(--nova-white);
}




/* Mobile header: brand left, primary phone action right. */
.site-header__mobile-call {
	display: none;
}

@media (max-width: 991.98px) {
	.site-header__inner {
		justify-content: space-between;
		align-items: center;
		gap: 12px;
	}

	.site-logo {
		margin: 0;
		margin-right: auto;
	}

	.site-header__mobile-call {
		display: inline-flex;
		flex: 0 0 auto;
		min-height: 42px;
		align-items: center;
		justify-content: center;
		gap: 7px;
		padding: 0 14px;
		border-radius: 9px;
		background: var(--nova-orange);
		color: #fff;
		font-size: 14px;
		font-weight: 800;
		line-height: 1;
		text-decoration: none;
	}

	.site-header__mobile-call svg {
		width: 18px;
		height: 18px;
		fill: currentColor;
	}

	.site-header__mobile-call-number {
		display: none;
	}
}

@media (min-width: 576px) and (max-width: 991.98px) {
	.site-header__mobile-call-number {
		display: inline;
	}

	.site-header__mobile-call-label {
		display: none;
	}
}

.mobile-service-nav__item--more {
	border: 0;
	background: transparent;
	font: inherit;
	cursor: pointer;
}

.mobile-service-nav__item--more[aria-expanded="true"] {
	background: #f1efeb;
}

.mobile-service-more {
	position: fixed;
	right: max(12px, env(safe-area-inset-right));
	bottom: calc(78px + env(safe-area-inset-bottom));
	z-index: 21;
	width: min(280px, calc(100vw - 24px));
	padding: 8px;
	border: 1px solid rgba(23, 23, 23, 0.1);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 20px 44px rgba(23, 23, 23, 0.18);
	backdrop-filter: blur(14px);
}

.mobile-service-more[hidden] {
	display: none;
}

.mobile-service-more a {
	display: flex;
	min-height: 48px;
	align-items: center;
	gap: 11px;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--nova-ink);
	font-weight: 750;
	text-decoration: none;
}

.mobile-service-more a + a {
	margin-top: 4px;
}

.mobile-service-more a:hover,
.mobile-service-more a:focus-visible {
	background: #f5f2ee;
}

.mobile-service-more svg {
	width: 21px;
	height: 21px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}


@media (min-width: 992px) {
	.mobile-service-more {
		display: none !important;
	}
}

.site-main {
	min-height: 60vh;
}

.page-shell {
	width: min(100% - (var(--nova-gutter) * 2), var(--nova-max-width));
	margin: 0 auto;
	padding: clamp(56px, 8vw, 112px) 0;
}

.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--nova-warm-white);
	padding: 26px 0 calc(24px + env(safe-area-inset-bottom));
}

.hero::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 6px;
	height: 100%;
	background: var(--nova-blue);
	opacity: 0.2;
}

.hero__inner {
	position: relative;
	z-index: 1;
	width: min(100% - (var(--nova-gutter) * 2), var(--nova-max-width));
	margin: 0 auto;
	padding-right: 0;
	padding-left: 0;
}

.hero__row {
	--bs-gutter-x: clamp(32px, 6vw, 76px);
	--bs-gutter-y: clamp(32px, 6vw, 76px);
}

.hero__eyebrow,
.hero-form__header p {
	margin: 0 0 14px;
	color: var(--nova-mid-grey);
	font-size: var(--type-eyebrow);
	font-weight: var(--weight-eyebrow);
	line-height: var(--leading-eyebrow);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hero__eyebrow {
	display: none;
}

.hero h1 {
	max-width: 13.5ch;
	margin: 0;
	letter-spacing: 0;
}

.hero h1::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-top: 14px;
	background: var(--nova-orange);
}

.hero-title__primary,
.hero-title__secondary {
	display: block;
}

.hero-title__primary {
	font-size: var(--type-hero-title);
	font-weight: var(--weight-hero-title);
	line-height: var(--leading-hero-title);
}

.hero-title__secondary {
	margin-top: 6px;
	font-size: var(--type-hero-secondary);
	font-weight: var(--weight-secondary);
	line-height: 1.2;
}

.hero__service-line {
	max-width: 650px;
	margin: 12px 0 0;
	color: var(--nova-ink);
	font-size: var(--type-body);
	font-weight: var(--weight-body);
	line-height: var(--leading-body);
}

.hero__service-separator {
	opacity: 0.42;
}

.hero__copy {
	max-width: 600px;
	margin: 12px 0 0;
	color: var(--nova-mid-grey);
	font-size: var(--type-body);
	font-weight: var(--weight-body);
	line-height: var(--leading-body);
}

.hero__actions {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.button {
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 13px 18px;
	border: 1px solid transparent;
	border-radius: 9px;
	font-weight: var(--weight-cta);
	text-decoration: none;
	cursor: pointer;
	width: 100%;
	gap: 8px;
}

.hero .button {
	padding: 13px 19px;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button--primary {
	background: var(--nova-orange);
	color: var(--nova-white);
}

.button--primary:hover {
	background: var(--nova-orange);
	color: var(--nova-white);
}

.button--secondary {
	background: transparent;
	border-color: var(--nova-ink);
	color: var(--nova-ink);
	min-height: 42px;
	padding-block: 10px;
}

.button--secondary:hover {
	background: var(--nova-ink);
	color: var(--nova-white);
}

.button--phone {
	background: var(--nova-orange);
	border-color: var(--nova-orange);
	color: var(--nova-white);
}

.button--phone:hover {
	background: var(--nova-orange);
	border-color: var(--nova-orange);
	color: var(--nova-white);
}

.hero .button--phone {
	box-shadow: 0 12px 24px rgba(201, 79, 0, 0.18);
}

.hero .button--phone:hover {
	box-shadow: 0 16px 28px rgba(201, 79, 0, 0.24);
	transform: translateY(-1px);
}

.hero-action-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: currentColor;
}

.hero-action-icon svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hero-form {
  position: relative;
  border-top: 4px solid var(--nova-orange);
  border-radius: 8px;
  padding: clamp(22px, 3vw, 32px);
  box-shadow: 0 24px 56px rgba(23, 23, 23, 0.1);
}

.hero-form::before {
  content: "";
  position: absolute;
  width: 42px;
  opacity: 0.45;
}

.hero-form__header h2 {
	margin: 0 0 18px;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	line-height: 1.08;
	letter-spacing: 0;
}

.enquiry-form {
	display: grid;
	gap: 8px;
}

.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea {
	border: 1px solid #d9d6cf;
	border-radius: 6px;
	background-color: #fbfaf7;
	color: var(--nova-ink);
	padding: 12px 13px;
}

.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus {
	border-color: var(--nova-blue);
	box-shadow: 0 0 0 3px rgba(60, 104, 176, 0.14);
}

.enquiry-form .form-floating > label {
	color: var(--nova-mid-grey);
	font-size: 0.92rem;
	font-weight: 700;
}

.enquiry-form .form-floating > .form-control,
.enquiry-form .form-floating > .form-select {
	min-height: 52px;
	height: 52px;
	padding-top: 1.45rem;
	padding-bottom: 0.45rem;
}

.enquiry-form select {
	background-position: right 13px center;
	background-size: 16px 12px;
	padding-right: 42px;
}

.enquiry-form textarea {
	min-height: 84px;
	resize: vertical;
}

.enquiry-form .button {
	width: 100%;
	margin-top: 8px;
}

.services-section {
  border-top: 1px solid var(--nova-soft-grey);
  padding: clamp(48px, 7vw, 92px) 0;
}

.services-section__intro,
.service-bands {
	width: min(100% - (var(--nova-gutter) * 2), var(--nova-max-width));
	margin: 0 auto;
}

.services-section__intro {
	display: grid;
	gap: clamp(20px, 5vw, 72px);
	align-items: start;
	margin-bottom: clamp(28px, 5vw, 52px);
}

.services-section__intro .section-kicker {
	position: relative;
	padding-left: 18px;
}

.services-section__intro .section-kicker::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.12em;
	width: 4px;
	height: 1em;
	background: var(--nova-blue);
}

.section-kicker {
	margin: 0 0 14px;
	color: var(--nova-mid-grey);
	font-size: var(--type-eyebrow);
	font-weight: var(--weight-eyebrow);
	line-height: var(--leading-eyebrow);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.services-section h2 {
  max-width: 760px;
  font-size: var(--type-section-title);
  font-weight: var(--weight-heading);
  line-height: var(--leading-title);
  letter-spacing: 0;
}

.services-title__lead {
	font-weight: var(--weight-secondary);
}

.services-title__strong {
	font-weight: var(--weight-heading);
}

.service-bands {
  gap: clamp(16px, 2.4vw, 26px);
}

.service-band {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(22px, 3vw, 34px);
  align-items: stretch;
  padding: 24px;
  border: 1px solid rgba(23, 23, 23, 0.08);
  overflow: hidden;
  background: var(--nova-white);
  box-shadow: 0 16px 34px rgba(23, 23, 23, 0.05);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.service-band::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 6px;
	background: var(--nova-orange);
}

.service-band__number {
  font-size: var(--type-small);
  font-weight: var(--weight-eyebrow);
}

.service-band__body {
	align-self: end;
}

.service-band h3 {
  font-size: var(--type-card-title);
  font-weight: var(--weight-card-title);
  line-height: var(--leading-title);
  letter-spacing: 0;
}

.service-band p {
	max-width: 640px;
	margin: 14px 0 0;
	color: #333333;
	font-size: var(--type-body);
	font-weight: var(--weight-body);
	line-height: var(--leading-body);
}

.service-band__support {
	color: var(--nova-mid-grey);
	font-size: var(--type-body);
}

.service-band--repair {
  color: var(--nova-white);
  box-shadow: 0 22px 46px rgba(23, 23, 23, 0.16);
}

.service-band::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 22px;
	width: 58px;
	height: 3px;
	background: var(--nova-orange);
	opacity: 0.8;
}

.service-band--repair::after {
	width: 68px;
	background: var(--nova-orange);
	opacity: 1;
}

.service-band--repair p {
	color: rgba(255, 255, 255, 0.84);
}

.service-band--repair .service-band__support {
	color: rgba(255, 255, 255, 0.64);
}

.service-band--business {
	background: var(--nova-warm-white);
	border-left-color: transparent;
}

.service-band--business::after {
	background: var(--nova-blue);
	opacity: 0.72;
}

.service-band--digital {
	background: var(--nova-soft-grey);
	border-color: transparent;
}

.service-band--digital::after {
	background: var(--nova-blue);
	opacity: 0.9;
}

/* Pending GBP review placeholders are visible only to logged-in users during build. */
.trust-section--pending {
	display: none;
}

body.logged-in .trust-section--pending {
	display: block;
}

.trust-section {
	position: relative;
	background: var(--nova-warm-white);
	border-top: 1px solid var(--nova-soft-grey);
	padding: clamp(42px, 7vw, 78px) 0;
}

.trust-section::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 5px;
	height: 100%;
	background: var(--nova-orange);
	opacity: 0.18;
}

.trust-section__inner {
	width: min(100% - (var(--nova-gutter) * 2), var(--nova-max-width));
	margin: 0 auto;
}

.trust-section__intro {
	max-width: 780px;
	margin-bottom: clamp(18px, 4vw, 30px);
}

.trust-section__intro .section-kicker {
	position: relative;
	padding-left: 18px;
}

.trust-section__intro .section-kicker::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.12em;
	width: 4px;
	height: 1em;
	background: var(--nova-blue);
}

.trust-section h2 {
	margin: 0;
	font-size: var(--type-section-title);
	font-weight: var(--weight-heading);
	line-height: var(--leading-title);
	letter-spacing: 0;
}

.trust-section__grid {
	display: grid;
	gap: clamp(18px, 3.5vw, 36px);
}

.trust-summary {
  position: relative;
  overflow: hidden;
  color: var(--nova-white);
  border-radius: 8px;
  padding: clamp(22px, 4vw, 34px);
  box-shadow: 0 22px 46px rgba(23, 23, 23, 0.14);
}

.trust-summary::after {
	content: "";
	position: absolute;
	right: 22px;
	bottom: 22px;
	width: 74px;
	height: 74px;
	border-right: 2px solid rgba(60, 104, 176, 0.46);
	border-bottom: 2px solid rgba(60, 104, 176, 0.46);
}

.trust-summary__label {
	margin: 0 0 12px;
	color: rgba(255, 255, 255, 0.68);
	font-size: var(--type-eyebrow);
	font-weight: var(--weight-eyebrow);
	line-height: var(--leading-eyebrow);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.trust-summary__value {
	margin: 0;
	color: var(--nova-orange);
	font-size: clamp(var(--type-card-title), 5vw, var(--type-section-title));
	font-weight: var(--weight-card-title);
	line-height: 1;
}

.trust-summary__note {
	max-width: 30rem;
	margin: 12px 0 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--type-body);
	line-height: var(--leading-body);
}

.trust-section--pending .trust-summary__value,
.trust-section--pending .trust-summary__note,
.trust-section--pending .review-excerpt p,
.trust-section--pending .review-excerpt cite {
	visibility: hidden;
}

.trust-section--pending .trust-summary__value::before {
	content: "";
	display: block;
	width: min(100%, 180px);
	height: 22px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	visibility: visible;
}

.trust-section--pending .trust-summary__note::before,
.trust-section--pending .review-excerpt p::before,
.trust-section--pending .review-excerpt cite::before {
	content: "";
	display: block;
	border-radius: 999px;
	background: var(--nova-soft-grey);
	visibility: visible;
}

.trust-section--pending .trust-summary__note::before {
	width: min(100%, 260px);
	height: 14px;
	background: rgba(255, 255, 255, 0.12);
}

.trust-section--pending .review-excerpt p::before {
	width: min(100%, 320px);
	height: 14px;
}

.trust-section--pending .review-excerpt cite::before {
	width: 140px;
	height: 12px;
}

.review-excerpts {
	display: grid;
	gap: 12px;
}

.review-excerpt {
	position: relative;
	background: var(--nova-white);
	border: 1px solid rgba(23, 23, 23, 0.08);
	border-radius: 8px;
	padding: clamp(18px, 3vw, 24px);
	box-shadow: 0 14px 30px rgba(23, 23, 23, 0.04);
}

.review-excerpt--featured {
	border-left: 6px solid var(--nova-orange);
	box-shadow: 0 18px 38px rgba(23, 23, 23, 0.07);
}

.review-excerpt::before {
	content: "“";
	position: absolute;
	right: 18px;
	top: 4px;
	color: rgba(60, 104, 176, 0.18);
	font-size: 54px;
	line-height: 1;
	font-weight: 600;
}

.review-excerpt p {
	margin: 0;
	color: #303030;
	font-size: var(--type-body);
	font-weight: var(--weight-body);
	line-height: var(--leading-body);
}

.review-excerpt cite {
	display: block;
	margin-top: 12px;
	color: var(--nova-mid-grey);
	font-size: var(--type-small);
	font-style: normal;
	font-weight: var(--weight-cta);
}

.work-section {
	background: var(--nova-ink);
	color: var(--nova-white);
	padding: clamp(48px, 7vw, 88px) 0;
}

.work-section__inner {
	width: min(100% - (var(--nova-gutter) * 2), var(--nova-max-width));
	margin: 0 auto;
}

.work-section__intro {
	max-width: 780px;
	margin-bottom: clamp(22px, 5vw, 38px);
}

.work-section .section-kicker {
	color: rgba(255, 255, 255, 0.62);
}

.work-section h2 {
	margin: 0;
	font-size: var(--type-section-title);
	font-weight: var(--weight-heading);
	line-height: var(--leading-title);
	letter-spacing: 0;
}

.case-study-list {
	display: grid;
	gap: clamp(28px, 5vw, 56px);
}

.case-study {
	display: grid;
	gap: 18px;
}

.case-study__media {
	display: block;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	background: #0f0f0f;
}

.case-study__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: top center;
}

.case-study__content {
	display: grid;
	gap: 14px;
	align-content: start;
}

.case-study__count {
	margin: 0;
	color: var(--nova-orange);
	font-size: var(--type-small);
	font-weight: var(--weight-eyebrow);
}

.case-study h3 {
	margin: 0;
	font-size: var(--type-card-title);
	font-weight: var(--weight-card-title);
	line-height: var(--leading-title);
	letter-spacing: 0;
}

.case-study__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.case-study__tags li {
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	padding: 7px 10px;
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--type-small);
	font-weight: var(--weight-cta);
}

.case-study__link {
	justify-self: start;
	color: var(--nova-white);
	font-weight: var(--weight-cta);
	text-decoration-color: var(--nova-orange);
	text-decoration-thickness: 2px;
}

.case-study__link:hover {
	color: var(--nova-orange);
}

.repair-feature {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--nova-soft-grey);
  padding: clamp(44px, 7vw, 86px) 0;
}

.repair-feature::before {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 5px;
	height: 100%;
	background: var(--nova-blue);
	opacity: 0.16;
}

.repair-feature__inner {
	position: relative;
	z-index: 1;
	width: min(100% - (var(--nova-gutter) * 2), var(--nova-max-width));
	margin: 0 auto;
	display: grid;
	gap: clamp(24px, 4.5vw, 48px);
}

.repair-feature__content .section-kicker {
	position: relative;
	padding-left: 18px;
}

.repair-feature__content .section-kicker::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.12em;
	width: 4px;
	height: 1em;
	background: var(--nova-orange);
}

.repair-feature h2 {
	max-width: 760px;
	margin: 0;
	font-size: var(--type-section-title);
	font-weight: var(--weight-heading);
	line-height: var(--leading-title);
	letter-spacing: 0;
}

.repair-feature__copy {
	max-width: 620px;
	margin: 14px 0 0;
	color: #333333;
	font-size: var(--type-body);
	font-weight: var(--weight-body);
	line-height: var(--leading-body);
}

.repair-feature__needs {
  gap: 8px 14px;
  margin: 18px 0 0;
}

.repair-feature__needs li {
	position: relative;
	border-top: 1px solid var(--nova-soft-grey);
	padding: 10px 0 0 22px;
	color: var(--nova-ink);
	font-size: var(--type-body);
	font-weight: var(--weight-secondary);
}

.repair-feature__needs li::before {
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 9px;
}

.repair-feature__actions {
	gap: 10px;
	margin-top: 20px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.repair-feature__actions .button--primary {
	box-shadow: 0 12px 24px rgba(201, 79, 0, 0.16);
}

.repair-feature__actions .button--primary:hover {
	box-shadow: 0 16px 30px rgba(201, 79, 0, 0.22);
	transform: translateY(-1px);
}

.repair-feature__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--nova-soft-grey);
  box-shadow: 0 22px 48px rgba(23, 23, 23, 0.12);
}

.repair-feature__media::before {
	content: "";
	position: absolute;
	inset: 14px auto auto 14px;
	z-index: 1;
	width: 70px;
	height: 70px;
	border-top: 2px solid rgba(255, 255, 255, 0.64);
	border-left: 2px solid rgba(255, 255, 255, 0.64);
}

.repair-feature__media::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 40%;
	height: 5px;
	background: var(--nova-orange);
}

.repair-feature__media img {
  aspect-ratio: 4 / 3;
  filter: saturate(0.92) contrast(1.04);
}

.business-feature {
	background: var(--nova-warm-white);
	border-top: 1px solid var(--nova-soft-grey);
	padding: clamp(40px, 6vw, 76px) 0;
}

.business-feature__inner {
	width: min(100% - (var(--nova-gutter) * 2), var(--nova-max-width));
	margin: 0 auto;
	display: grid;
	gap: clamp(22px, 4vw, 42px);
}

.business-feature h2 {
	max-width: 720px;
	margin: 0;
	font-size: var(--type-section-title);
	font-weight: var(--weight-heading);
	line-height: var(--leading-title);
	letter-spacing: 0;
}

.business-feature__copy {
	max-width: 610px;
	margin: 14px 0 0;
	color: #333333;
	font-size: var(--type-body);
	font-weight: var(--weight-body);
	line-height: var(--leading-body);
}

.business-feature__actions {
	gap: 10px;
	margin-top: 20px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.business-feature__panel {
  position: relative;
  border: 1px solid var(--nova-soft-grey);
  border-left: 6px solid var(--nova-blue);
  background: var(--nova-white);
  padding: clamp(20px, 4vw, 30px);
}

.business-feature__panel::before {
	content: "";
	position: absolute;
	right: clamp(18px, 4vw, 30px);
	top: clamp(18px, 4vw, 30px);
	width: clamp(54px, 12vw, 92px);
	height: 4px;
	background: var(--nova-orange);
}

.business-feature__needs {
  gap: 10px;
  margin: 0;
  padding-right: clamp(0px, 10vw, 96px);
}

.business-feature__needs li {
	position: relative;
	padding-left: 22px;
	color: var(--nova-ink);
	font-size: var(--type-body);
	font-weight: var(--weight-secondary);
}

.business-feature__needs li::before {
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  background: var(--nova-blue);
}

.coverage-section {
  border-top: 1px solid var(--nova-soft-grey);
  padding: clamp(36px, 5vw, 62px) 0;
}

.coverage-section__inner {
	width: min(100% - (var(--nova-gutter) * 2), var(--nova-max-width));
	margin: 0 auto;
}

.coverage-section__content {
	display: grid;
	gap: 16px;
}

.coverage-section h2,
.final-cta h2 {
	max-width: 760px;
	margin: 0;
	font-size: var(--type-section-title);
	font-weight: var(--weight-heading);
	line-height: var(--leading-title);
	letter-spacing: 0;
}

.coverage-links {
  gap: 5px 0;
}

.coverage-links li {
	display: inline-flex;
	align-items: center;
}

.coverage-links li:not(:last-child)::after {
	content: "·";
	margin: 0 9px;
	color: var(--nova-mid-grey);
}

.coverage-links a,
.coverage-links span {
  font-size: var(--type-body);
  font-weight: var(--weight-cta);
  line-height: 1.5;
  text-decoration-color: rgba(201, 79, 0, 0.42);
}

.coverage-links a:hover {
  text-decoration-color: var(--nova-orange);
}

.coverage-links span {
	color: var(--nova-mid-grey);
	font-weight: var(--weight-secondary);
}

.final-cta {
  padding: clamp(38px, 6vw, 68px) 0 calc(clamp(44px, 6vw, 72px) + env(safe-area-inset-bottom));
}

.final-cta__inner {
  width: min(100% - (var(--nova-gutter) * 2), var(--nova-max-width));
  margin: 0 auto;
  gap: 22px;
}

.final-cta .section-kicker {
	color: rgba(255, 255, 255, 0.62);
}

.final-cta h2 {
	color: var(--nova-white);
}

.final-cta__phone {
	display: inline-flex;
	margin-top: 14px;
	color: var(--nova-orange);
	font-size: var(--type-card-title);
	font-weight: var(--weight-cta);
	line-height: 1.1;
	text-decoration: none;
}

.final-cta__phone:hover {
	color: var(--nova-white);
}

.final-cta__actions {
	display: grid;
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.final-cta__action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 54px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	padding: 14px 0;
	color: var(--nova-white);
	font-size: var(--type-body);
	font-weight: var(--weight-cta);
	text-decoration: none;
}

.final-cta__action-title,
.final-cta__action-label {
	display: block;
}

.final-cta__action-title {
	font-size: var(--type-body);
	line-height: 1.2;
}

.final-cta__action-label {
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--type-small);
	font-weight: var(--weight-secondary);
	line-height: 1.25;
}

.final-cta__action::after {
	content: "→";
	flex: 0 0 auto;
	color: var(--nova-blue);
	font-weight: var(--weight-secondary);
}

.final-cta__action:hover {
	color: var(--nova-orange);
}

.final-cta__action--primary {
	color: var(--nova-orange);
}

.final-cta__action--primary::after {
	color: var(--nova-orange);
}

.final-cta__action--primary .final-cta__action-label {
	color: rgba(255, 255, 255, 0.78);
}

.final-cta__action--primary:hover {
	color: var(--nova-white);
}

.site-footer {
	border-top: 1px solid var(--nova-soft-grey);
	background: var(--nova-white);
	color: var(--nova-mid-grey);
}

.site-footer__inner {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
}

.site-footer p {
	margin: 0;
}

@media (min-width: 561px) {
	:root {
		--type-eyebrow: 12px;
		--type-small: 14px;
		--type-body: 17px;
		--type-card-title: 26px;
		--type-section-title: 36px;
		--type-hero-title: 50px;
		--type-hero-secondary: 22px;
		--leading-hero-title: 1.05;
	}

	.hero {
		padding: clamp(34px, 4.4vw, 56px) 0 clamp(22px, 3vw, 36px);
	}

	.hero::before {
		width: min(24vw, 260px);
		height: calc(100% - 32px);
		top: 16px;
		opacity: 0.08;
	}

	.hero__mobile-break {
		display: none;
	}

	.hero__eyebrow {
		display: block;
	}

	.hero__eyebrow,
	.hero-form__header p {
		margin-bottom: 16px;
	}

	.hero h1 {
		max-width: 100%;
	}

	.hero h1::after {
		width: 72px;
		margin-top: 16px;
	}

	.hero-title__primary {
		line-height: var(--leading-hero-title);
	}

	.hero-title__secondary {
		margin-top: 8px;
		font-size: var(--type-hero-secondary);
	}

	.hero__service-line {
		margin-top: 14px;
	}

	.hero__copy {
		margin-top: 16px;
	}

	.hero__actions {
		margin-top: 18px;
		padding-bottom: 0;
		gap: 12px;
		flex-direction: row;
		align-items: center;
	}

	.hero-action-icon {
		display: none;
	}

	.button {
		width: auto;
		min-height: 52px;
		padding: 15px 22px;
		font-size: var(--type-body);
	}

	.button--secondary {
		min-height: 52px;
		padding-block: 15px;
	}

	.hero-form {
		padding: clamp(20px, 2.3vw, 28px);
	}

	.hero-form__header h2 {
		margin-bottom: 16px;
		font-size: clamp(1.35rem, 1.8vw, 1.65rem);
	}

	.service-band {
		padding: clamp(28px, 4.4vw, 52px);
	}

	.service-band:hover {
		box-shadow: 0 22px 44px rgba(23, 23, 23, 0.1);
		transform: translateY(-2px);
	}

	.repair-feature__actions {
		padding-bottom: 0;
	}

	.business-feature__actions {
		padding-bottom: 0;
	}

	.site-footer__inner {
		flex-direction: row;
		align-items: center;
	}
}

@media (min-width: 768px) {
	.services-section {
		padding: clamp(14px, 2vw, 28px) 0 clamp(40px, 5vw, 68px);
	}

	.services-section__intro {
		grid-template-columns: minmax(120px, 0.25fr) minmax(0, 1fr);
		margin-bottom: clamp(18px, 2.4vw, 28px);
	}

	.services-section h2 {
		max-width: 100%;
	}

	.service-bands {
		grid-template-columns: 1.2fr 0.95fr 1.05fr;
		align-items: stretch;
		gap: clamp(12px, 1.5vw, 18px);
	}

	.service-band {
		grid-template-columns: 1fr;
		min-height: 100%;
		padding: clamp(20px, 2.3vw, 30px);
	}

	.service-band p {
		margin-top: clamp(12px, 1.6vw, 18px);
	}
}

@media (min-width: 768px) {
	.business-feature__inner {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
		align-items: center;
	}

	.business-feature__panel {
		align-self: stretch;
		display: grid;
		align-items: center;
	}

	.coverage-section__content,
	.final-cta__inner {
		grid-template-columns: minmax(0, 0.78fr) minmax(300px, 1fr);
		align-items: end;
	}

	.coverage-links {
		justify-content: flex-end;
	}

	.final-cta {
		padding-bottom: clamp(44px, 6vw, 72px);
	}

	.final-cta__actions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		border-top: 0;
	}

	.final-cta__action {
		border-bottom: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.18);
		padding: 2px clamp(16px, 2vw, 24px);
	}

	.final-cta__action:first-child {
		border-left: 0;
		padding-left: 0;
	}

	.final-cta__action:last-child {
		padding-right: 0;
	}
}

@media (min-width: 881px) {
	body {
		padding-bottom: 0;
	}

	.site-header__inner {
		min-height: 84px;
		padding: 0;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}

	.site-nav {
		display: block;
		order: initial;
		width: auto;
		margin-left: auto;
		overflow-x: visible;
	}

	.site-nav__list {
		width: auto;
		padding-bottom: 0;
	}

	.site-header__phone {
		display: inline-block;
	}

	.mobile-service-nav {
		display: none;
	}

	.trust-section__grid {
		grid-template-columns: minmax(240px, 0.4fr) minmax(0, 1fr);
		align-items: start;
	}

	.review-excerpts {
		grid-template-columns: 0.9fr 1fr;
		align-items: start;
		gap: 12px;
	}

	.review-excerpt--featured {
		grid-row: span 2;
		min-height: 100%;
	}

	.repair-feature__inner {
		grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.68fr);
		align-items: center;
	}

	.repair-feature__needs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 620px;
	}

	.repair-feature__media {
		align-self: stretch;
	}

	.repair-feature__media img {
		height: 100%;
		min-height: 360px;
	}

	.case-study {
		grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.45fr);
		gap: clamp(24px, 3.5vw, 44px);
		align-items: end;
	}

	.case-study--offset {
		width: min(100%, 980px);
		margin-left: auto;
		grid-template-columns: minmax(220px, 0.42fr) minmax(0, 0.9fr);
		align-items: start;
	}

	.case-study--offset .case-study__media {
		order: 2;
	}

	.case-study--offset .case-study__content {
		order: 1;
		padding-top: clamp(12px, 2vw, 24px);
	}

	.case-study__media img {
		aspect-ratio: 16 / 9;
	}

	.case-study--offset .case-study__media img {
		aspect-ratio: 16 / 10;
	}
}

/* ==========================================================
   Layout + alignment cleanup — 2026-08
   One grid, one spacing rhythm, no stray decoration.
   ========================================================== */

:root {
	--nova-paper: #f4f1eb;
	--nova-line: rgba(23, 23, 23, 0.11);
	--nova-section-y: clamp(48px, 5vw, 72px);
	--nova-section-y-compact: clamp(38px, 4vw, 56px);
}

/* Every homepage chapter uses exactly the same content edge. */
.hero__inner,
.services-section__intro,
.service-bands,
.trust-section__inner,
.repair-feature__inner,
.work-section__inner,
.business-feature__inner,
.coverage-section__inner,
.final-cta__inner {
	width: min(100% - (var(--nova-gutter) * 2), var(--nova-max-width));
	margin-inline: auto;
}

/* Remove experimental rules/lines that make the page feel noisy. */
.hero::before,
.hero h1::after,
.services-section__intro .section-kicker::before,
.service-band::after,
.trust-section::before,
.trust-section__intro .section-kicker::before,
.trust-summary::after,
.repair-feature::before,
.repair-feature__content .section-kicker::before,
.repair-feature__media::before,
.repair-feature__media::after,
.business-feature__panel::before {
	display: none !important;
}

.section-kicker,
.services-section__intro .section-kicker,
.trust-section__intro .section-kicker,
.repair-feature__content .section-kicker {
	padding-left: 0;
	margin-bottom: 10px;
}

/* HERO — calm, aligned, conversion-first. */
.hero {
	background: var(--nova-paper);
	border: 0;
	padding: clamp(34px, 4vw, 52px) 0;
}

.hero__row {
	--bs-gutter-x: clamp(42px, 6vw, 78px);
	--bs-gutter-y: 28px;
	align-items: center;
}

.hero__content {
	padding-left: calc(var(--bs-gutter-x) * .5);
}

.hero__content::before {
	display: none !important;
}

.hero__eyebrow {
  margin-bottom: 12px;
}

.hero h1 {
	max-width: 15ch;
	letter-spacing: -0.035em;
}

.hero-title__secondary {
	margin-top: 8px;
	color: #383838;
	font-weight: 450;
}

.hero__service-line {
	display: none;
}

.hero__copy {
  color: #5d5d5d;
}

.hero-form {
  max-width: 460px;
  border: 1px solid var(--nova-line);
  border-radius: 10px;
  background: var(--nova-white);
  box-shadow: 0 16px 38px rgba(23, 23, 23, 0.075);
  padding: clamp(20px, 2.4vw, 28px);
}

.hero-form::before {
	display: none !important;
}

.enquiry-form {
	gap: 9px;
}

.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea {
	background: #fcfbf9;
	border-color: #d9d5ce;
	border-radius: 7px;
}

/* SERVICES — title and panels share the exact same left edge. */
.services-section {
	background: var(--nova-white);
	border: 0;
	padding: var(--nova-section-y-compact) 0 var(--nova-section-y);
}

.services-section__intro {
  display: block;
}

.services-section h2 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.services-title__lead,
.services-title__strong {
	font-weight: inherit;
}

.services-title__strong {
	font-weight: 600;
}

.service-bands {
	display: grid;
	gap: 14px;
	border: 0;
}

.service-band {
	min-height: 215px;
	padding: clamp(22px, 2.6vw, 30px);
	border: 1px solid var(--nova-line);
	border-radius: 8px;
	box-shadow: none;
	background: #faf9f6;
	gap: 26px;
}

.service-band::before {
	width: 3px;
}

.service-band--repair {
	background: var(--nova-ink);
	border-color: var(--nova-ink);
	box-shadow: none;
}

.service-band--business,
.service-band--digital {
	background: #faf9f6;
}

.service-band--business::before {
	background: var(--nova-blue);
}

.service-band--digital::before {
	background: var(--nova-orange);
}

.service-band p {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.45;
}

.service-band:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(23, 23, 23, 0.07);
}

.service-band--repair:hover {
	background: #202020;
}

/* TRUST — one contained chapter; no decorative rail escaping the grid. */
.trust-section {
	background: #f5f2ed;
	border: 0;
	padding: var(--nova-section-y) 0;
}

.trust-section__intro {
	max-width: none;
	margin-bottom: 24px;
}

.trust-section__grid {
	gap: 16px;
}

.trust-summary,
.review-excerpt {
	border-radius: 8px;
	box-shadow: none;
}

.trust-summary {
	border: 0;
	background: var(--nova-ink);
}

.review-excerpt,
.review-excerpt--featured {
	border: 1px solid var(--nova-line);
	background: rgba(255,255,255,.78);
}

/* REPAIR — clean split; image doesn't grow its own decorations. */
.repair-feature {
	background: var(--nova-white);
	border: 0;
	padding: var(--nova-section-y) 0;
}

.repair-feature__inner {
	gap: clamp(32px, 5vw, 64px);
}

.repair-feature__copy {
	margin-top: 12px;
}

.repair-feature__needs {
  border: 0;
}

.repair-feature__needs li {
	border-top: 1px solid var(--nova-line);
	padding-top: 9px;
}

.repair-feature__media {
	border: 0;
	border-radius: 8px;
	box-shadow: none;
}

.repair-feature__media img {
	border-radius: 8px;
	filter: none;
}

/* DIGITAL — expressive chapter, but still locked to the same container. */
.work-section {
	padding: var(--nova-section-y) 0;
}

.work-section__intro {
	margin-bottom: 28px;
}

.case-study-list {
	gap: clamp(34px, 4vw, 52px);
}

.case-study__media {
	border-radius: 6px;
}

/* BUSINESS — same content rhythm as Repair; no floating technical line. */
.business-feature {
	background: var(--nova-paper);
	border: 0;
	padding: var(--nova-section-y) 0;
}

.business-feature__inner {
	gap: clamp(32px, 5vw, 64px);
}

.business-feature__panel {
	border: 1px solid var(--nova-line);
	border-left: 3px solid var(--nova-blue);
	border-radius: 8px;
	background: rgba(255,255,255,.6);
	padding: clamp(20px, 3vw, 28px);
}

.business-feature__needs {
	padding-right: 0;
}

/* COVERAGE — align heading and local links, give it room without becoming a card grid. */
.coverage-section {
  border: 0;
  padding: var(--nova-section-y-compact) 0;
}

.coverage-section__content {
	gap: 22px;
}

.coverage-section h2 {
	max-width: 19ch;
}

.coverage-links {
	gap: 7px 0;
}

.coverage-links a,
.coverage-links span {
	font-size: 15px;
}

/* FINAL CTA — a clean final decision point. */
.final-cta {
	padding: var(--nova-section-y-compact) 0;
}

.final-cta__inner {
	gap: 28px;
}

.final-cta__actions {
	border-top: 0;
}

.final-cta__action {
	min-height: 58px;
}

@media (min-width: 768px) {
	.services-section__intro {
		display: block;
	}

	.service-bands {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.coverage-section__content {
		grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
		align-items: center;
	}

	.coverage-links {
		justify-content: flex-start;
	}

	.final-cta__inner {
		grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
		align-items: center;
	}
}

@media (min-width: 881px) {
	.repair-feature__inner {
		grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr);
	}

	.business-feature__inner {
		grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr);
	}
}

@media (max-width: 767.98px) {
	:root {
		--nova-section-y: 44px;
		--nova-section-y-compact: 36px;
	}

	.hero {
		padding: 24px 0 34px;
	}

	.hero__content {
		padding-left: calc(var(--bs-gutter-x) * .5);
	}

	.hero__eyebrow {
		display: none;
	}

	.hero h1 {
		max-width: 12ch;
	}

	.hero-form {
		max-width: none;
		margin-left: 0;
	}

	.services-section__intro {
		margin-bottom: 18px;
	}

	.service-bands {
		gap: 10px;
	}

	.service-band {
		min-height: 0;
	}
}

/* ==========================================================
   FOCUSED CREATIVE PASS — HERO + THREE SERVICES
   2026-08-12
   ========================================================== */

/* Hero: three-part desktop composition. Imagery supports the proposition
   without becoming a background or increasing the mobile scroll. */
.hero__row {
	align-items: stretch;
}

.hero__content,
.hero-form,
.hero-media {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hero h1 {
	max-width: 14ch;
}

.hero-title__primary {
  font-size: clamp(36px, 3.15vw, 48px);
  line-height: 1.03;
}

.hero-title__secondary {
	max-width: 29ch;
	font-size: 18px;
	line-height: 1.25;
}

.hero-media__frame {
  height: 100%;
  min-height: 310px;
  border-radius: 10px;
  background: var(--nova-ink);
  box-shadow: 0 18px 38px rgba(23, 23, 23, 0.10);
}

.hero-media__frame::after {
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(23, 23, 23, 0.72), transparent);
  pointer-events: none;
}

.hero-media img {
  object-position: 52% 50%;
}

.hero-media__tag {
	position: absolute;
	z-index: 2;
	left: 18px;
	right: 18px;
	bottom: 16px;
	color: #fff;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.025em;
	line-height: 1.3;
}

.hero-form {
	height: 100%;
	justify-content: center;
}

/* Three services: one shared media-led component system. */
.services-section__intro {
	margin-bottom: 20px;
}

.service-bands {
	gap: 18px;
}

.service-band,
.service-band--repair,
.service-band--business,
.service-band--digital {
  min-height: 0;
  border: 1px solid #dedbd5;
  border-radius: 10px;
  background: var(--nova-white);
  color: var(--nova-ink);
  box-shadow: 0 10px 26px rgba(23, 23, 23, 0.055);
}

.service-band::before {
	display: none;
}

.service-band__media {
  background: var(--nova-soft-grey);
}

.service-band__media::after {
  inset: auto 0 0;
}

.service-band--digital .service-band__media::after {
	background: linear-gradient(90deg, var(--nova-blue) 0 45%, var(--nova-orange) 45% 100%);
}

.service-band__media img {
  display: block;
}

.service-band--repair .service-band__media img {
	object-position: 50% 48%;
}

.service-band--business .service-band__media img,
.service-band--digital .service-band__media img {
	object-position: center top;
}

.service-band__content {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 20px 20px 22px;
	flex: 1;
}

.service-band__number {
  min-width: 30px;
  padding-top: 3px;
  color: var(--nova-orange);
  font-size: 12px;
}

.service-band--business .service-band__number {
	color: var(--nova-blue);
}

.service-band--digital .service-band__number {
	color: var(--nova-orange);
}

.service-band h3 {
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 590;
}

.service-band p,
.service-band--repair p,
.service-band--repair .service-band__support {
  color: #55514c;
  font-size: 14px;
  line-height: 1.42;
}

.service-band__support {
	color: var(--nova-mid-grey) !important;
}

.service-band:hover,
.service-band--repair:hover {
  border-color: #d3cfc8;
  box-shadow: 0 16px 34px rgba(23, 23, 23, 0.09);
}

.service-band:hover .service-band__media img {
	transform: scale(1.025);
}

@media (min-width: 992px) {
	.hero__row {
		--bs-gutter-x: 28px;
	}

	.hero__content {
		padding-right: 8px;
	}

	.hero-form {
		max-width: none;
	}
}

@media (max-width: 991.98px) {
	.hero__content {
		padding-right: calc(var(--bs-gutter-x) * .5);
	}
}

@media (max-width: 767.98px) {
	.hero-title__primary {
		font-size: clamp(35px, 10.8vw, 44px);
	}

	.service-band__media {
		aspect-ratio: 16 / 7.2;
	}

	.service-band__content {
		padding: 18px 18px 20px;
	}
}

/* -------------------------------------------------------------------------- */
/* Final refinement: hero + services                                           */
/* -------------------------------------------------------------------------- */
.hero {
	padding: clamp(38px, 5vw, 64px) 0 clamp(34px, 5vw, 54px);
}

.hero::before {
	display: none;
}

.hero__row {
	align-items: start;
}

.hero__lead {
	margin-bottom: 0;
}

.hero__lead-grid {
	display: grid;
	gap: clamp(18px, 2.6vw, 28px);
	align-items: end;
}

.hero__content {
	padding-right: 0;
}

.hero__eyebrow {
	display: block;
	margin-bottom: 14px;
}

.hero h1 {
	max-width: 10.25ch;
}

.hero h1::after {
	display: none;
}

.hero-title__primary {
	font-size: clamp(40px, 5.2vw, 62px);
	font-weight: 560;
	line-height: 0.95;
	letter-spacing: -0.045em;
}

.hero-title__secondary {
  margin-top: 16px;
  color: #252320;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 560;
  line-height: 1.18;
}

.hero__service-line {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	max-width: 42ch;
	margin-top: 14px;
	color: #57524b;
	font-size: 14px;
	line-height: 1.5;
}

.hero__copy {
  margin-top: 12px;
  color: #6d685f;
  line-height: 1.52;
}

.hero__actions {
  align-items: flex-start;
  padding-bottom: 0;
}

.hero__actions .button {
  min-width: 245px;
}

.hero-media {
	display: block;
	margin: 0;
}

.hero-media__frame {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(23, 23, 23, 0.08);
	border-radius: 16px;
	background: #ddd8d0;
	box-shadow: 0 18px 36px rgba(23, 23, 23, 0.09);
	aspect-ratio: 0.9;
}

.hero-media__frame::after {
	content: "";
	position: absolute;
	inset: auto 18px 14px 18px;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--nova-orange) 0 62%, var(--nova-blue) 62% 100%);
	opacity: 0.95;
}

.hero-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hero-media__tag {
	left: 14px;
	bottom: 24px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(23, 23, 23, 0.74);
	backdrop-filter: blur(5px);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.hero-form {
	align-self: start;
	max-width: 430px;
	margin-left: auto;
	border-top-width: 3px;
	border-radius: 12px;
	padding: clamp(20px, 2.6vw, 28px);
	box-shadow: 0 20px 48px rgba(23, 23, 23, 0.09);
}

.hero-form::before {
	right: 14px;
	top: 14px;
	width: 56px;
	height: 3px;
}

.hero-form__header h2 {
	margin-bottom: 16px;
	font-size: clamp(1.35rem, 2vw, 1.8rem);
	line-height: 1.1;
}

.enquiry-form {
	gap: 10px;
}

.enquiry-form .button {
	margin-top: 10px;
}

.services-section {
	padding: clamp(42px, 5.5vw, 68px) 0 clamp(54px, 6vw, 76px);
}

.services-section__intro {
	gap: 12px;
	margin-bottom: 24px;
}

.services-section h2 {
	max-width: none;
	font-size: clamp(30px, 3.15vw, 42px);
	line-height: 1.05;
	letter-spacing: -0.035em;
}

.service-bands {
  gap: clamp(16px, 2vw, 22px);
}

.service-band,
.service-band--repair,
.service-band--business,
.service-band--digital {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(23, 23, 23, 0.08);
  border-radius: 12px;
  background: var(--nova-white) !important;
  box-shadow: 0 16px 34px rgba(23, 23, 23, 0.06);
  overflow: hidden;
}

.service-band::before,
.service-band::after {
	display: none;
}

.service-band__media {
  aspect-ratio: 16 / 8.7;
  border-bottom: 1px solid rgba(23, 23, 23, 0.08);
  background: #e8e2d8;
}

.service-band__media::before {
  background: linear-gradient(180deg, rgba(17, 17, 17, 0.06) 0%, rgba(17, 17, 17, 0.22) 100%);
}

.service-band__media::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 0;
	height: 3px;
	border-radius: 999px;
	background: var(--nova-orange);
	z-index: 2;
}

.service-band--business .service-band__media::after {
	background: var(--nova-blue);
}

.service-band--digital .service-band__media::after {
	background: linear-gradient(90deg, var(--nova-blue) 0 48%, var(--nova-orange) 48% 100%);
}

.service-band__media img {
  position: relative;
  z-index: 0;
  transition: transform 280ms ease;
}

.service-band__number {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(23, 23, 23, 0.82);
  color: var(--nova-white) !important;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1;
}

.service-band--business .service-band__number {
	background: rgba(60, 104, 176, 0.88);
}

.service-band__content {
  display: block;
}

.service-band__body {
	align-self: start;
}

.service-band h3 {
  font-size: clamp(16px, 1.55vw, 26px);
  font-weight: 620;
  line-height: 1.1;
}

.service-band p,
.service-band--repair p,
.service-band--repair .service-band__support {
  color: #544f48;
  line-height: 1.45;
}

.service-band__support {
	color: #777168 !important;
}

.service-band:hover,
.service-band--repair:hover {
	border-color: #d4cec4;
	background: var(--nova-white);
	box-shadow: 0 20px 42px rgba(23, 23, 23, 0.11);
	transform: translateY(-3px);
}

.service-band:hover .service-band__media img,

@media (min-width: 992px) {
	.hero__lead-grid {
		grid-template-columns: minmax(0, 1.42fr) minmax(210px, 0.88fr);
	}

	.hero__content {
		padding-top: 6px;
	}

	.hero-form {
		max-width: 100%;
	}
}

@media (max-width: 991.98px) {
	.hero__lead-grid {
		grid-template-columns: 1fr;
	}

	.hero-media {
		max-width: 340px;
	}

	.hero__actions .button {
		width: 100%;
		min-width: 0;
	}

	.service-bands {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767.98px) {
	.hero h1 {
		max-width: 9.6ch;
	}

	.hero-title__primary {
		font-size: clamp(37px, 11vw, 46px);
	}

	.hero__service-line {
		display: block;
	}

	.hero__service-separator {
		display: none;
	}

	.hero-media {
		max-width: none;
	}

	.hero-media__frame {
		aspect-ratio: 16 / 10;
	}

	.services-section__intro {
		margin-bottom: 18px;
	}

	.services-section h2 {
		font-size: clamp(28px, 9vw, 36px);
	}
}

/* ==========================================================
   SHARED HERO — canonical component after refactor
   Home is the visual baseline. Service/editorial pages inherit it.
   ========================================================== */

.hero__lead-grid {
	display: none !important;
}

.hero-media {
	display: none !important;
}

.hero__lead {
	display: block;
	padding-right: calc(var(--bs-gutter-x) * .5);
}

.hero__content {
	max-width: 100%;
	position: relative;
}

.hero h1 {
	max-width: 100%;
}

.hero {
	background: radial-gradient(circle at 9% 18%, rgba(60, 104, 176, 0.055) 0 1px, transparent 2px) 0 0 / 26px 26px,
		var(--nova-warm-white);
	padding-top: clamp(24px, 2.6vw, 34px);
	padding-bottom: clamp(24px, 2.8vw, 36px);
}

.hero-title__primary {
	max-width: 100%;
	font-size: clamp(46px, 4.4vw, 64px);
	font-weight: 610;
	line-height: 0.94;
	letter-spacing: -0.055em;
}

.hero-title__secondary {
	margin-top: 20px;
	max-width: 34ch;
	font-size: clamp(18px, 1.55vw, 22px);
	font-weight: 650;
	letter-spacing: -0.02em;
}

.hero__copy {
	margin-top: 16px;
	font-size: 15px;
	line-height: 1.58;
}

.hero__actions {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}

.hero__row {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 1.5rem;
}

.hero-title__phrase {
	display: inline;
	white-space: normal;
}

.hero__actions .button {
	width: auto;
	padding-inline: 18px;
	min-height: 48px;
	padding: 12px 20px;
}

.hero-form {
	max-width: none;
	margin-left: 0;
	border: 1px solid rgba(23, 23, 23, 0.08);
	border-top: 0;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 22px 52px rgba(23, 23, 23, 0.09);
}

.hero__phone {
	display: inline-flex;
	align-items: flex-start;
	flex-direction: column;
	color: var(--nova-ink);
	text-decoration: none;
	gap: 5px;
	position: relative;
	margin-top: 36px;
	padding: 12px 18px 13px 18px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.62);
	box-shadow: inset 0 0 0 1px rgba(23, 23, 23, 0.07);
	backdrop-filter: blur(2px);
}

.hero__phone-label {
	color: var(--nova-mid-grey);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	font-size: 11.5px;
	letter-spacing: 0.09em;
	padding-left: 2px;
}

.hero__phone-number {
	display: inline-flex;
	align-items: center;
	color: var(--nova-orange);
	font-weight: 760;
	letter-spacing: -0.035em;
	gap: 11px;
	line-height: 1.02;
	font-size: clamp(34px, 3.45vw, 44px);
}

.hero__phone-number svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	width: 27px;
	height: 27px;
}

.hero__phone:hover .hero__phone-number {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.14em;
}

.hero__eyebrow {
	margin-bottom: 18px;
	color: #6f6a63;
	font-size: 11px;
	letter-spacing: 0.11em;
}

.hero-title__line {
	display: block;
}

.hero-title__line--second {
	margin-top: 4px;
}

.hero-title__amp {
	position: relative;
	display: inline-block;
	color: var(--nova-blue);
	font-size: 1.18em;
	font-weight: 300;
	line-height: 0.78;
	vertical-align: -0.035em;
}

.hero-title__amp::after {
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--nova-orange);
	transform: translateX(-50%);
	display: none;
	content: none;
}

.hero__phone::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 4px;
	border-radius: 999px;
	background: var(--nova-orange);
}

.hero__actions .button--primary {
	box-shadow: 0 10px 22px rgba(201, 79, 0, 0.14);
}

.hero-form::before {
	right: 18px;
	top: 18px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--nova-blue);
	opacity: 1;
}

.hero-form::after {
	content: "";
	position: absolute;
	right: 32px;
	top: 21px;
	width: 42px;
	height: 3px;
	border-radius: 999px;
	background: var(--nova-orange);
}

@media (min-width: 992px) {
.hero__row {
	--bs-gutter-x: 1.75rem;
	align-items: stretch !important;
}

.hero__lead {
	padding-right: calc(var(--bs-gutter-x) * .5);
	padding-left: calc(var(--bs-gutter-x) * .5);
	padding-top: 2px;
	display: flex;
}

.hero-form {
	max-width: none;
	margin-left: 0;
	justify-content: flex-start;
	display: flex;
	min-height: 0;
	box-sizing: border-box;
	flex-direction: column;
	padding-right: 24px;
	padding-left: 24px;
	align-self: stretch !important;
}

.hero__content {
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
}

.hero-form__header {
	margin-bottom: clamp(20px, 2.2vw, 30px);
	flex: 0 0 auto;
}

.hero__actions {
	display: flex !important;
	width: auto;
	gap: 12px;
	margin-top: 14px;
	align-items: center;
}

.hero__actions .button,
.hero__actions .button--primary,
.hero__actions .button--secondary {
	width: auto;
	min-width: 0;
	min-height: 52px;
	padding: 14px 22px;
	font-size: clamp(15px, 1vw, 17px);
	line-height: 1.15;
	flex: 0 0 auto;
}

.hero__phone {
	display: flex;
	width: calc(100% - clamp(24px, 2.2vw, 40px));
	box-sizing: border-box;
	margin-top: auto;
}

.hero-form .enquiry-form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
}
}

@media (max-width: 767.98px) {
.hero h1 {
	max-width: none;
}

.hero-title__primary {
	font-size: clamp(36px, 10.2vw, 44px);
}
}

@media (min-width: 1200px) {
.hero__row {
	--bs-gutter-x: 32px;
}

.hero h1 {
	max-width: none;
}

.hero-title__primary {
	font-size: clamp(44px, 3.85vw, 60px);
}

.hero--portfolio .hero-title__primary,
.hero--about .hero-title__primary {
	font-size: clamp(42px, 3.35vw, 54px);
}

.hero-title__line--second {
	white-space: nowrap;
}
}

@media (max-width: 991.98px) {
.hero h1 {
	max-width: none;
}

.hero-title__primary {
	font-size: clamp(38px, 6.4vw, 50px);
}

.hero-form {
	max-width: 100%;
	height: auto;
	min-height: 0;
	padding-right: max(20px, var(--bs-gutter-x, 1.5rem));
	padding-left: max(20px, var(--bs-gutter-x, 1.5rem));
}

.hero__phone {
	background: rgba(255, 255, 255, 0.72);
	margin-top: 28px;
}

.hero__actions {
	display: flex !important;
}

.hero {
	padding-top: 22px;
	padding-bottom: 28px;
}
}

@media (max-width: 575.98px) {
.hero-title__primary {
	letter-spacing: -0.035em;
	font-size: clamp(38px, 10.3vw, 46px);
	line-height: 0.98;
}

.hero__actions {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	margin-top: 18px;
	padding-inline: 8px;
	box-sizing: border-box;
	gap: 10px;
}

.hero__actions .button {
	width: 100%;
	max-width: none;
	text-align: center;
}

.hero__phone-number {
	font-size: clamp(30px, 8.7vw, 36px);
}

.hero {
	padding-top: 32px;
	padding-bottom: 34px;
}

.hero__phone {
	margin-top: 28px;
	padding: 11px 14px 12px 16px;
}

.hero-title__line--second {
	margin-top: 2px;
}

.hero-title__amp::after {
	display: none;
}
}

.site-header__phone{
	min-height: 50px;
	padding: 12px 20px;
	gap: 9px;
	border-radius: 10px;
	font-size: 1.02rem;
	font-weight: 750;
	letter-spacing: 0.01em;
}

.site-header__phone-icon{
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* -------------------------------------------------------------------------- */

/* Scope: hero + services only                                                  */
/* -------------------------------------------------------------------------- */

.services-section{
	position: relative;
	overflow: hidden;
	background: #fff;
}

.services-section__intro{
	grid-template-columns: auto 1fr;
	gap: clamp(24px, 4vw, 52px);
	align-items: end;
	margin-bottom: 30px;
}

.services-section__intro .section-kicker{
	margin-bottom: 7px;
	padding-left: 0;
}

.services-section__intro .section-kicker::before{
	display: none;
}

.services-section h2{
	max-width: 900px;
	font-size: clamp(32px, 3.35vw, 46px);
	font-weight: 520;
	line-height: 1.02;
	letter-spacing: -0.04em;
}

.services-title__strong{
	font-weight: 690;
}

.service-bands{
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.1vw, 26px);
	align-items: start;
}

.service-band,
.service-band--repair,
.service-band--business,
.service-band--digital{
	position: relative;
	border: 0;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none;
	overflow: visible;
	transform: none;
}

.service-band__media{
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10.2;
  border: 1px solid rgba(23, 23, 23, 0.08);
  background: #e8e4dd;
  box-shadow: 0 16px 34px rgba(23, 23, 23, 0.08);
}

.service-band__media::before{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, transparent 46%, rgba(17, 17, 17, 0.28) 100%);
	pointer-events: none;
}

.service-band__media::after{
	display: none;
}

.service-band__media img{
  transition: transform 320ms ease, filter 320ms ease;
}

.service-band--repair .service-band__media img{
	object-position: 50% 47%;
}

.service-band--business .service-band__media img{
	object-position: 50% 18%;
}

.service-band--digital .service-band__media img{
	object-position: 50% 14%;
}

.service-band__number{
	left: 14px;
	top: 14px;
	padding: 7px 9px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	background: rgba(17, 17, 17, 0.78);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.service-band--business .service-band__number{
	background: rgba(60, 104, 176, 0.9);
}

.service-band--digital .service-band__number{
	background: rgba(201, 79, 0, 0.92);
}

.service-band__content{
  z-index: 3;
  padding: 18px 18px 20px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(5px);
}

.service-band__content::before{
	content: "";
	position: absolute;
	left: 18px;
	top: 0;
	width: 42px;
	height: 3px;
	border-radius: 999px;
	background: var(--nova-orange);
}

.service-band--business .service-band__content::before{
	background: var(--nova-blue);
}

.service-band--digital .service-band__content::before{
	width: 64px;
	background: linear-gradient(90deg, var(--nova-blue) 0 46%, var(--nova-orange) 46% 100%);
}

.service-band h3{
	font-size: clamp(20px, 1.75vw, 28px);
	font-weight: 650;
	line-height: 1.05;
	letter-spacing: -0.035em;
}

.service-band p,
.service-band--repair p,
.service-band--repair .service-band__support{
  margin-top: 9px;
}

.service-band__support{
  margin-top: 7px !important;
}

.service-band:hover,
.service-band--repair:hover{
	box-shadow: none;
	transform: none;
}

.service-band:hover .service-band__media img,
.service-band--repair:hover .service-band__media img{
	transform: scale(1.035);
	filter: saturate(1.04) contrast(1.02);
}

.service-band:hover .service-band__content{
	box-shadow: 0 20px 40px rgba(23, 23, 23, 0.12);
	transform: translateY(-2px);
}

.service-band__content{
	transition: box-shadow 220ms ease, transform 220ms ease;
}

@media (min-width: 992px){
	.service-band--business{
		margin-top: 18px;
	}

	.service-band--digital{
		margin-top: 5px;
	}
}

@media (max-width: 991.98px){
	.services-section__intro{
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.service-bands{
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.service-band--business,
.service-band--digital{
		margin-top: 0;
	}

}

@media (max-width: 575.98px){

	.service-band__media{
		aspect-ratio: 16 / 9.2;
	}
}

@media (min-width: 992px){

	.enquiry-form{
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		justify-content: space-between;
		gap: clamp(12px, 1.25vw, 18px);
	}

	.enquiry-form .button{
		margin-top: clamp(10px, 1vw, 16px);
	}

	.enquiry-form .button{
		min-height: 58px;
		font-size: 17px;
	}
}

.services-title__accent {
  letter-spacing: -0.025em;
}

/* Every card now uses the same component geometry. */
.service-bands {
	align-items: stretch;
}

.service-band,
.service-band--repair,
.service-band--business,
.service-band--digital {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin-top: 0 !important;
}

.service-band__media {
  flex: 0 0 auto;
  width: 100%;
}

/* Keep the different source images, but make their presentation consistent. */
.service-band--repair .service-band__media img,
.service-band--business .service-band__media img,
.service-band--digital .service-band__media img {
	object-fit: cover;
}

/* One badge system for all three cards. */
.service-band__number,
.service-band--business .service-band__number,
.service-band--digital .service-band__number {
	left: 14px;
	top: 14px;
	min-width: 38px;
	padding: 7px 9px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(17, 17, 17, 0.82);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	text-align: center;
}

/* Same overlap, width, radius, spacing and minimum body height. */
.service-band__content {
  display: flex;
  flex: 1 1 auto;
  min-height: 154px;
  margin: -34px 12px 0;
  padding: 20px 20px 21px;
  border: 1px solid rgba(23, 23, 23, 0.075);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 16px 30px rgba(23, 23, 23, 0.08);
}

/* One accent treatment instead of three competing variants. */
.service-band__content::before,
.service-band--business .service-band__content::before,
.service-band--digital .service-band__content::before {
	left: 20px;
	width: 42px;
	height: 3px;
	background: var(--nova-orange);
}

.service-band__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
}

.service-band h3 {
	margin: 0;
	font-family: var(--nova-font-display);
	font-size: clamp(20px, 1.55vw, 25px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.service-band p,
.service-band--repair p,
.service-band--repair .service-band__support {
	margin: 9px 0 0;
	color: #514d47;
	font-size: 13px;
	line-height: 1.48;
}

.service-band__support {
	margin-top: 5px !important;
	color: #777169 !important;
}

/* Desktop cards align on one clean baseline — no staggered middle/right card. */
@media (min-width: 992px) {
	.service-band--business,
	.service-band--digital {
		margin-top: 0 !important;
	}
}

@media (max-width: 991.98px) {
	.service-band__content {
		min-height: 0;
	}
}

.hero-title__primary,
.services-section h2,
.trust-section h2,
.repair-feature h2,
.work-section h2,
.business-feature h2,
.coverage-section h2,
.final-cta h2,
.service-band h3,
.hero__phone-number,
.site-header__phone,
.final-cta__phone {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.services-title__accent {
	font-family: "Newsreader", Georgia, serif;
	font-style: italic;
	font-weight: 500;
}

.business-feature {
	/* Match the tighter chapter rhythm used around the surrounding sections. */
	padding-top: var(--nova-section-y-compact);
	padding-bottom: var(--nova-section-y-compact);
}

.business-feature__inner {
	align-items: center;
}

.business-feature__media {
	overflow: hidden;
	margin: 0;
	border: 1px solid var(--nova-line);
	border-radius: 8px;
	background: #111;
	box-shadow: 0 14px 30px rgba(23, 23, 23, 0.07);
}

.business-feature__media img {
  display: block;
  aspect-ratio: 16 / 10;
  filter: saturate(0.92) contrast(1.03);
}

@media (min-width: 881px) {
	.business-feature__inner {
		grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr);
	}
}

@media (max-width: 880.98px) {
	.business-feature__media img {
		aspect-ratio: 16 / 9;
	}
}

/* HERO: less dead space above/below. */
:root {
	--nova-hero-space-top: clamp(24px, 2.5vw, 34px);
	--nova-hero-space-bottom: clamp(24px, 2.6vw, 36px);
}

.hero {
	padding-top: var(--nova-hero-space-top);
	padding-bottom: var(--nova-hero-space-bottom);
}

/* SERVICES: start closer to hero and avoid an oversized chapter gap. */
.services-section {
	padding-top: clamp(30px, 3.2vw, 44px) !important;
	padding-bottom: clamp(38px, 4vw, 54px) !important;
}

.services-section__intro {
	margin-bottom: clamp(14px, 1.5vw, 20px) !important;
}

/* The title should visually belong to the cards below it. */
.services-section__intro h2 {
	margin-bottom: 0 !important;
}

/* Keep the italic accent elegant but don't let its line box add extra height. */
.services-title__accent {
	display: inline;
	line-height: 0.95;
}

/* Cards start immediately after the heading with a deliberate, compact gap. */
.service-bands {
	margin-top: 0 !important;
}

/* Slightly tighter overall homepage chapter rhythm.
   Still enough air, but not one-screen-per-section. */
.trust-section,
.repair-feature,
.work-section {
	padding-top: clamp(40px, 4.3vw, 60px) !important;
	padding-bottom: clamp(40px, 4.3vw, 60px) !important;
}

.business-feature {
	padding-top: clamp(34px, 3.6vw, 48px) !important;
	padding-bottom: clamp(34px, 3.6vw, 48px) !important;
}

.coverage-section,
.final-cta {
	padding-top: clamp(30px, 3.2vw, 44px) !important;
	padding-bottom: clamp(30px, 3.2vw, 44px) !important;
}

/* Mobile: compact further to reduce scrolling. */
@media (max-width: 767.98px) {
	.hero {
		padding-top: 20px !important;
		padding-bottom: 26px !important;
	}

	.services-section {
		padding-top: 26px !important;
		padding-bottom: 34px !important;
	}

	.services-section__intro {
		margin-bottom: 14px !important;
	}

	.trust-section,
	.repair-feature,
	.work-section,
	.business-feature {
		padding-top: 34px !important;
		padding-bottom: 34px !important;
	}

	.coverage-section,
	.final-cta {
		padding-top: 28px !important;
		padding-bottom: 28px !important;
	}
}

/* Remove width constraints that make the service cards feel artificially forced. */
.service-band,
.service-band__content,
.service-band__body {
	min-width: 0 !important;
}

/* Keep the three cards fluid inside the grid. */
.service-bands {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Match Services top rhythm to Hero: the eyebrow should sit at a similar
   distance from the previous section boundary as the Hero eyebrow from header. */
.services-section {
	padding-top: clamp(24px, 2.6vw, 34px) !important;
	padding-bottom: clamp(36px, 3.8vw, 50px) !important;
}

/* Tighten the heading-to-cards relationship. */
.services-section__intro {
	margin-bottom: clamp(12px, 1.2vw, 16px) !important;
}

/* Keep the title block compact and consistent with Hero typography rhythm. */
.services-section__intro .section-kicker {
	margin-bottom: 8px !important;
}

.services-section__intro h2 {
	margin: 0 !important;
	line-height: 1.02;
}

/* Prevent the italic accent from adding unwanted line-box height. */
.services-title__accent {
	line-height: 0.92;
}

/* Consistent image treatment across all three service cards. */
.service-band__media img {
  object-position: center;
}

/* Slightly favour the centre of the new Web & Digital image. */
.service-band--digital .service-band__media img {
	object-position: center center;
}

@media (max-width: 991.98px) {
	.service-bands {
		grid-template-columns: 1fr !important;
	}

	.services-section {
		padding-top: 24px !important;
		padding-bottom: 34px !important;
	}

	.services-section__intro {
		margin-bottom: 12px !important;
	}
}

/* HERO: pull the phone block closer to the explanatory copy. */
.hero__copy {
	margin-bottom: 0 !important;
}

.hero__phone {
	margin-top: clamp(16px, 1.7vw, 22px) !important;
}

/* Make the number more dominant without changing the overall component width. */
.hero__phone-number {
	font-size: clamp(34px, 3.15vw, 48px) !important;
	line-height: 1 !important;
	letter-spacing: 0.015em !important;
}

/* Keep actions close enough to feel part of the same conversion cluster. */
.hero__actions {
	margin-top: 12px !important;
}

/* SERVICES: same card system, but move the white copy panel above the image. */
.service-band {
	position: relative;
	padding-top: 0 !important;
}

.service-band__media {
	order: 2;
	margin-top: -18px;
	overflow: hidden;
	border-radius: 14px;
}

/* Text panel now reads first. */
.service-band__content {
	order: 1;
	position: relative;
	z-index: 2;
	width: calc(100% - 24px);
	min-height: 136px;
	margin: 0 12px !important;
	padding: 18px 20px 20px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 14px 28px rgba(23, 23, 23, 0.08);
}

/* Accent line sits at the lower edge of the top panel, leading into image. */
.service-band__content::before,
.service-band--business .service-band__content::before,
.service-band--digital .service-band__content::before {
	top: auto !important;
	bottom: -2px !important;
	left: 20px !important;
}

/* Keep all three card bodies visually aligned. */
.service-band__body {
	justify-content: flex-start;
}

@media (max-width: 991.98px) {
	.hero__phone {
		margin-top: 16px !important;
	}

	.hero__phone-number {
		font-size: clamp(32px, 8vw, 42px) !important;
	}

	.service-band__content {
		min-height: 0;
	}
}

.service-band__number {
	display: none !important;
}

.service-band {
	padding: 0 !important;
	background: #fff !important;
	border: 1px solid rgba(23, 23, 23, 0.08) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	box-shadow: 0 12px 26px rgba(23, 23, 23, 0.06) !important;
}

.service-band__body {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
}

.service-band__content {
	order: 1 !important;
	width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 18px 20px 16px !important;
	background: #fff !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.service-band__content::before,
.service-band--business .service-band__content::before,
.service-band--digital .service-band__content::before {
	display: none !important;
}

.service-band h3 {
	margin-bottom: 8px !important;
}

.service-band p {
	margin-bottom: 0 !important;
}

.service-band__media {
	order: 2 !important;
	margin-top: 0 !important;
	border-radius: 0 !important;
	aspect-ratio: 16 / 10;
}

.service-band__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 991.98px) {
	.service-band__content {
		padding: 16px 18px 14px !important;
	}
}

/* Hero: keep ampersand as the blue graphic accent, not italic. */
.hero-title__amp {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-style: normal !important;
	font-weight: 400 !important;
}

/* Italic accent moves to Web Design itself. */
.hero-title__web-accent {
	font-family: "Newsreader", Georgia, serif;
	font-style: italic;
	font-weight: 500;
	letter-spacing: -0.025em;
}

/* Services: the conversational line is the editorial accent;
   the actual service categories stay clear and utilitarian. */
.services-title__lead.services-title__accent {
	font-family: "Newsreader", Georgia, serif;
	font-style: italic;
	font-weight: 500;
	letter-spacing: -0.025em;
}

.services-title__strong {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-style: normal;
}

.services-section h2 {
	max-width: 1040px;
	font-size: clamp(28px, 2.8vw, 40px);
	line-height: 1.04;
}

.services-title__keep {
	white-space: nowrap;
}

.services-title__lead.services-title__accent {
	margin-right: 0.12em;
}

.service-band__media {
	aspect-ratio: 16 / 8;
}

.service-band__content {
	margin-top: -24px;
}

.hero__actions {
	gap: 12px;
}

.hero__actions .button {
	min-width: 0;
	padding-inline: 24px;
}


@media (max-width: 1199.98px) {
	.services-section h2 {
		font-size: clamp(28px, 3vw, 36px);
	}
}

.enquiry-form .form-select {
	appearance: none;
	-webkit-appearance: none;
	background-color: #fcfbf9;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M3 4.25 8 9l5-4.75' fill='none' stroke='%23575757' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 16px 12px;
	padding-right: 42px;
}

.trustindex-reviews {
	margin-top: clamp(18px, 2vw, 26px);
	width: 100%;
}

.trustindex-reviews > * {
	max-width: 100%;
}

/* A23b — reviews block cleanup */
.trust-section {
	padding: clamp(34px, 5vw, 56px) 0;
}

.trust-section__intro {
	margin-bottom: clamp(12px, 2vw, 18px);
}

.trustindex-reviews {
	margin: clamp(10px, 1.6vw, 16px) auto 0;
	max-width: 1120px;
	display: flex;
	justify-content: center;
}

.trustindex-reviews > * {
	width: 100%;
	max-width: 1120px;
	margin-inline: auto;
}

/* Trustindex output helpers */
.trustindex-reviews iframe,
.trustindex-reviews .ti-widget,
.trustindex-reviews .ti-widget-container,
.trustindex-reviews .ti-reviews-container-wrapper,
.trustindex-reviews .ti-widget-container-wrp,
.trustindex-reviews .ti-widget-container-wrp * {
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 767.98px) {
	.trust-section {
		padding: 28px 0;
	}

	.trust-section__intro {
		margin-bottom: 12px;
	}

	.trustindex-reviews {
		margin-top: 10px;
	}
}

.section-title__accent {
	font-family: "Newsreader", Georgia, serif;
	font-style: italic;
	font-weight: 500;
	letter-spacing: -0.025em;
}

/* Keep Repair and Business visually related but not identical. */
.repair-feature,
.business-feature {
	padding-top: clamp(38px, 4.2vw, 56px) !important;
	padding-bottom: clamp(38px, 4.2vw, 56px) !important;
}

.business-feature__needs--inline {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 18px;
	margin: 18px 0 0;
	padding: 0;
}

.business-feature__needs--inline li {
	position: relative;
	padding: 9px 0 0 20px;
	border-top: 1px solid rgba(23,23,23,.09);
	font-size: 14px;
	line-height: 1.4;
}

.business-feature__needs--inline li::before {
	left: 0;
	top: 1.05em;
	width: 7px;
	height: 7px;
}

/* Business should feel calmer/more operational than Repair. */
.business-feature__media {
	box-shadow: 0 14px 30px rgba(23,23,23,.07);
}

@media (max-width: 767.98px) {
	.business-feature__needs--inline {
		grid-template-columns: 1fr;
	}
}

.hero__trust-inline {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 24px;
	margin-top: 7px;
	color: #4f4b45;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.1;
}

.hero__trust-score {
	color: var(--nova-ink);
	font-weight: 750;
}

.hero__trust-stars {
	color: #f2a900;
	font-size: 14px;
	letter-spacing: 0.02em;
}

.hero__trust-text {
	color: #625d56;
	font-weight: 600;
}

.hero__trust-inline + .hero__actions {
	margin-top: 8px !important;
}

@media (max-width: 575.98px) {
	.hero__trust-inline {
		gap: 5px;
		font-size: 12px;
	}

	.hero__trust-stars {
		font-size: 13px;
	}
}

.hero__trust-inline {
  gap: 9px !important;
  min-height: 30px !important;
  margin-top: 7px !important;
  font-size: 15px !important;
}

.hero__trust-score {
  font-size: 16px !important;
}

.hero__trust-stars {
  font-size: 18px !important;
  letter-spacing: 0.025em !important;
}

.hero__trust-text {
  color: #3f3b36 !important;
}

.hero__trust-inline + .hero__actions {
	margin-top: 7px !important;
}

@media (max-width: 575.98px) {
	.hero__trust-inline {
		gap: 7px !important;
		font-size: 14px !important;
		flex-wrap: wrap;
	}

	.hero__trust-score {
		font-size: 15px !important;
	}

	.hero__trust-stars {
		font-size: 16px !important;
	}

	.hero__trust-text {
		font-size: 14px !important;
	}
}

.hero__trust-inline {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  column-gap: 10px !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(23, 23, 23, 0.08) !important;
  border-left: 4px solid #f2a900 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 8px 18px rgba(23, 23, 23, 0.045) !important;
  line-height: 1 !important;
}

.hero__trust-score {
  color: var(--nova-ink) !important;
  font-size: clamp(24px, 2.2vw, 32px) !important;
  letter-spacing: -0.035em !important;
}

.hero__trust-stars {
	color: #f2a900 !important;
	font-size: clamp(22px, 2vw, 29px) !important;
	letter-spacing: 0.02em !important;
	white-space: nowrap !important;
}

.hero__trust-text {
  color: #37332f !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
}

.hero__trust-inline + .hero__actions {
	margin-top: 9px !important;
}

@media (max-width: 575.98px) {
	.hero__trust-inline {
		grid-template-columns: auto 1fr !important;
		row-gap: 3px !important;
		min-height: 50px !important;
		padding: 8px 11px !important;
	}

	.hero__trust-score {
		font-size: 24px !important;
	}

	.hero__trust-stars {
		font-size: 21px !important;
	}

	.hero__trust-text {
		grid-column: 1 / -1 !important;
		font-size: 13px !important;
	}
}

.hero__trust-inline {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	width: auto !important;
	min-height: 0 !important;
	margin-top: 8px !important;
	padding: 0 !important;
	border: 0 !important;
	border-left: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.hero__trust-score {
	font-size: clamp(25px, 2.25vw, 33px) !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
}

.hero__trust-stars {
	font-size: clamp(21px, 1.9vw, 27px) !important;
	line-height: 1 !important;
	letter-spacing: 0.01em !important;
}

.hero__trust-text {
	margin-left: 2px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
}

.hero__trust-inline + .hero__actions {
	margin-top: 10px !important;
}

@media (max-width: 575.98px) {
	.hero__trust-inline {
		gap: 6px !important;
		margin-top: 7px !important;
	}

	.hero__trust-score {
		font-size: 22px !important;
	}

	.hero__trust-stars {
		font-size: 19px !important;
	}

	.hero__trust-text {
		font-size: 14px !important;
	}
}

.feature-audience {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin: 0 0 10px;
	padding: 5px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 750;
	letter-spacing: 0.045em;
	line-height: 1;
	text-transform: uppercase;
}

.feature-audience--repair {
  background: rgba(201, 79, 0, 0.09);
}

.feature-audience--business {
  background: rgba(60, 104, 176, 0.10);
}

.repair-feature,
.business-feature {
	padding-top: clamp(34px, 4vw, 48px) !important;
	padding-bottom: clamp(34px, 4vw, 48px) !important;
}

.repair-feature h2,
.business-feature h2 {
  max-width: 640px;
  font-size: clamp(27px, 2.6vw, 38px);
  line-height: 1.04;
}

.repair-feature .section-title__accent,
.business-feature .section-title__accent {
	font-family: "Newsreader", Georgia, serif;
	font-style: italic;
	font-weight: 500;
	letter-spacing: -0.02em;
}

.repair-feature__copy,
.business-feature__copy {
	margin-top: 12px;
}

.repair-feature__needs,
.business-feature__needs--inline {
	margin-top: 16px;
}

.repair-feature__actions,

.repair-feature__media,
.business-feature__media {
	border-radius: 10px;
	overflow: hidden;
}

.repair-feature__media img,
.business-feature__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	min-height: 0 !important;
	object-fit: cover;
}

@media (min-width: 881px) {
	.repair-feature__inner,
	.business-feature__inner {
		grid-template-columns: minmax(0, 1fr) minmax(340px, 0.78fr);
		gap: clamp(36px, 5vw, 64px);
		align-items: center;
	}

	/* Repair: problem/fix narrative first, image second. */
	.repair-feature__content {
		grid-column: 1;
		grid-row: 1;
	}

	.repair-feature__media {
		grid-column: 2;
		grid-row: 1;
	}

	/* Business IT: reverse the visual flow to clearly separate it from Repair. */
	.business-feature__media {
		grid-column: 1;
		grid-row: 1;
	}

	.business-feature__content {
		grid-column: 2;
		grid-row: 1;
	}
}

@media (max-width: 880.98px) {
	.repair-feature__inner,
	.business-feature__inner {
		gap: 22px;
	}

	.business-feature__content {
		order: 1;
	}

	.business-feature__media {
		order: 2;
	}
}

.repair-feature__content,
.business-feature__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.feature-audience,
.feature-audience--repair,
.feature-audience--business {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 26px;
	margin: 0 0 12px;
	padding: 6px 10px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 750;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.feature-audience--repair {
	background: rgba(201, 79, 0, 0.07);
	border-color: rgba(201, 79, 0, 0.22);
	color: #a54200;
}

.feature-audience--business {
	background: rgba(60, 104, 176, 0.07);
	border-color: rgba(60, 104, 176, 0.24);
	color: #315b9c;
}

.repair-feature h2,
.business-feature h2 {
	margin: 0;
	max-width: 650px;
	font-size: clamp(28px, 2.55vw, 37px);
	line-height: 1.03;
	letter-spacing: -0.03em;
}

.repair-feature__copy,
.business-feature__copy {
	margin-top: 13px;
}

.repair-feature__needs,
.business-feature__needs--inline {
	width: 100%;
	margin-top: 17px;
}

.repair-feature__actions,
.business-feature__actions {
	margin-top: 18px;
}

@media (max-width: 575.98px) {
	.feature-audience,
	.feature-audience--repair,
	.feature-audience--business {
		min-height: 24px;
		padding: 5px 9px;
		font-size: 9.5px;
		white-space: normal;
	}
}

.repair-feature__inner {
	align-items: stretch !important;
}

.repair-feature__content {
	justify-content: center;
}

.repair-feature__copy {
	max-width: 42rem;
}

.repair-feature__needs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 20px;
	width: 100%;
	margin-top: 18px;
	padding: 0;
}

.repair-feature__needs li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 0 !important;
	border-top: 0 !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.repair-feature__needs li::before {
	content: "";
	position: relative !important;
	left: auto !important;
	top: 0.52em !important;
	flex: 0 0 8px;
	width: 8px !important;
	height: 8px !important;
	border-radius: 999px;
	background: var(--nova-orange);
}

.repair-feature__media {
	display: flex;
	align-self: stretch;
	min-height: 100%;
	background: #e9e4dd;
}

.repair-feature__media img {
	width: 100%;
	height: 100% !important;
	min-height: 100%;
	aspect-ratio: auto !important;
	object-fit: cover;
	object-position: center;
}

@media (min-width: 881px) {
	.repair-feature__media {
		min-height: 420px;
	}
}

@media (max-width: 767.98px) {
	.repair-feature__needs {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.repair-feature__media {
		min-height: 260px;
	}
}

.business-feature__inner {
	align-items: stretch !important;
}

.business-feature__content {
	justify-content: center;
}

.business-feature__copy {
	max-width: 42rem;
}

.business-feature__needs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 20px;
	width: 100%;
	margin-top: 18px;
	padding: 0;
}

.business-feature__needs li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 0 !important;
	border-top: 0 !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.business-feature__needs li::before {
	content: "";
	position: relative !important;
	left: auto !important;
	top: 0.52em !important;
	flex: 0 0 8px;
	width: 8px !important;
	height: 8px !important;
	border-radius: 999px;
	background: #4d76c7;
}

.business-feature__media {
	display: flex;
	align-self: stretch;
	min-height: 100%;
	background: #e9e4dd;
}

.business-feature__media img {
	width: 100%;
	height: 100% !important;
	min-height: 100%;
	aspect-ratio: auto !important;
	object-fit: cover;
	object-position: center;
}

@media (min-width: 881px) {
	.business-feature__media {
		min-height: 420px;
	}
}

@media (max-width: 767.98px) {
	.business-feature__needs {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.business-feature__media {
		min-height: 260px;
	}
}

@media (min-width: 881px) {
	.repair-feature__inner,
	.business-feature__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
		gap: clamp(34px, 4.5vw, 56px);
	}
}

.repair-feature__copy,
.business-feature__copy {
	max-width: none;
}

.work-section {
	padding: clamp(52px, 7vw, 92px) 0;
}

.work-section__intro {
	max-width: 900px;
	display: grid;
	gap: 14px;
}

.work-section__summary {
	margin: 0;
	max-width: 760px;
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--type-body);
	line-height: var(--leading-body);
}

.work-section__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 6px;
}

.button--light {
	border-color: rgba(255, 255, 255, 0.28);
	color: var(--nova-white);
}

.button--light:hover,
.button--light:focus-visible {
	border-color: rgba(255, 255, 255, 0.46);
	color: var(--nova-white);
	background: rgba(255, 255, 255, 0.06);
}

.web-project-list {
	display: grid;
	gap: clamp(24px, 3.5vw, 34px);
}

.web-project {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(20px, 3vw, 34px);
	align-items: center;
	padding: clamp(20px, 3vw, 28px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
}

.web-project__media {
	margin: 0;
}

.web-project__media a {
	display: block;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255,255,255,0.04);
}

.web-project__media img {
	width: 100%;
	height: clamp(240px, 30vw, 360px);
	object-fit: cover;
	object-position: top center;
	display: block;
}

.web-project__content {
	display: grid;
	gap: 14px;
	align-content: center;
}

.web-project__eyebrow {
	margin: 0;
	color: var(--nova-orange);
	font-size: var(--type-small);
	font-weight: var(--weight-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.web-project__content h3 {
	margin: 0;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.02;
	letter-spacing: -0.02em;
}

.web-project__content p {
	margin: 0;
	color: rgba(255,255,255,0.8);
	font-size: var(--type-body);
	line-height: var(--leading-body);
	max-width: 54ch;
}

.web-project .case-study__tags {
	gap: 10px;
}

.web-project .case-study__link {
	margin-top: 2px;
}

@media (min-width: 900px) {
	.web-project {
		grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
	}

	.web-project--featured {
		grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
	}

}

@media (max-width: 899px) {
	.work-section__actions {
		gap: 12px;
	}

	.web-project {
		padding: 18px;
	}
}

.coverage-section {
	padding: clamp(42px, 5vw, 64px) 0 !important;
	background: var(--nova-white);
}

.coverage-section__inner {
	display: grid;
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
}

.coverage-section__intro {
	max-width: 620px;
}

.coverage-section__intro h2 {
	margin: 0;
	max-width: 650px;
	font-size: clamp(30px, 3vw, 42px) !important;
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.coverage-section__copy {
	margin: 14px 0 0;
	max-width: 58ch;
	color: #4f4a44;
	font-size: var(--type-body);
	line-height: var(--leading-body);
}

.coverage-section__areas {
	align-self: center;
}

.coverage-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.coverage-links li {
	margin: 0;
}

.coverage-links a,
.coverage-links span {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 8px 12px;
	border: 1px solid rgba(23,23,23,.10);
	border-radius: 999px;
	background: #faf8f4;
	color: var(--nova-ink);
	font-size: 13px;
	font-weight: 650;
	line-height: 1;
	text-decoration: none;
}

.coverage-links a:hover {
	border-color: rgba(201,79,0,.35);
	color: var(--nova-orange);
}

.coverage-section__note {
	margin: 14px 0 0;
	color: var(--nova-mid-grey);
	font-size: 13px;
}

.final-cta {
	padding: clamp(42px, 5vw, 64px) 0 !important;
	background: var(--nova-ink);
	color: var(--nova-white);
}

.final-cta__inner {
	display: grid;
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}

.final-cta .section-kicker {
	color: rgba(255,255,255,.58);
}

.final-cta h2 {
	margin: 0;
	max-width: 760px;
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.03;
	letter-spacing: -0.03em;
}

.final-cta__copy {
	margin: 14px 0 0;
	max-width: 62ch;
	color: rgba(255,255,255,.76);
	font-size: var(--type-body);
	line-height: var(--leading-body);
}

.final-cta__services {
	margin: 14px 0 0;
	color: rgba(255,255,255,.52);
	font-size: 12px;
	font-weight: 650;
	letter-spacing: .02em;
}

.final-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.final-cta__call,
.final-cta__enquiry {
	min-height: 48px;
	padding-inline: 22px;
}

.final-cta__enquiry {
	border: 1px solid rgba(255,255,255,.42);
	background: transparent;
	color: var(--nova-white);
}

.final-cta__enquiry:hover,
.final-cta__enquiry:focus-visible {
	border-color: rgba(255,255,255,.72);
	background: rgba(255,255,255,.06);
	color: var(--nova-white);
}

.site-footer {
	padding: clamp(44px, 5vw, 64px) 0 18px;
	background: #101010;
	color: rgba(255,255,255,.72);
	border-top: 1px solid rgba(255,255,255,.08);
}

.site-footer__inner {
	width: min(100% - (var(--nova-gutter) * 2), var(--nova-max-width));
	margin: 0 auto;
	display: block;
}

.site-footer__grid {
	display: grid;
	gap: 34px;
}

.site-footer__brand {
	max-width: 340px;
}

.site-footer__logo {
	display: inline-flex;
	margin-bottom: 18px;
}

.site-footer__logo img {
	width: 190px;
	height: auto;
}

.site-footer__brand p {
	margin: 0;
	max-width: 34ch;
	color: rgba(255,255,255,.62);
	font-size: 14px;
	line-height: 1.6;
}

.site-footer__column h2 {
	margin: 0 0 14px;
	color: var(--nova-white);
	font-size: 13px;
	font-weight: 750;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.site-footer__column ul {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.site-footer__column a {
	color: rgba(255,255,255,.72);
	font-size: 14px;
	text-decoration: none;
}

.site-footer__column a:hover {
	color: var(--nova-white);
}

.site-footer__contact {
	display: grid;
	align-content: start;
	gap: 10px;
}

.site-footer__phone {
	color: var(--nova-orange) !important;
	font-size: 20px !important;
	font-weight: 800;
	letter-spacing: .02em;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px 24px;
	margin-top: clamp(34px, 5vw, 52px);
	padding-top: 18px;
	border-top: 1px solid rgba(255,255,255,.10);
}

.site-footer__bottom p {
	margin: 0;
	color: rgba(255,255,255,.46);
	font-size: 12px;
}

.site-footer__bottom nav {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.site-footer__bottom a {
	color: rgba(255,255,255,.52);
	font-size: 12px;
	text-decoration: none;
}

.site-footer__bottom a:hover {
	color: var(--nova-white);
}

@media (min-width: 800px) {
	.coverage-section__inner {
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	}

	.final-cta__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.site-footer__grid {
		grid-template-columns: minmax(260px, 1.25fr) repeat(3, minmax(140px, .7fr));
	}
}

@media (max-width: 799.98px) {
	.coverage-section__inner,
	.final-cta__inner {
		grid-template-columns: 1fr;
	}

	.final-cta__buttons .button {
		flex: 1 1 220px;
	}

	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

@media (max-width: 520px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
	}

	.site-footer__brand {
		grid-column: auto;
	}

	.coverage-links a,
	.coverage-links span {
		min-height: 36px;
		font-size: 12.5px;
	}
}

@media (min-width: 881px) {
	.site-header {
		position: sticky;
		top: 0;
		z-index: 1000;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	}

	body.admin-bar .site-header {
		top: 32px;
	}
}

.hero-form { scroll-margin-top: 110px; }

.feature-conversion {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.feature-conversion__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.feature-conversion__pricing,
.work-section__pricing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.feature-conversion__pricing {
  color: var(--nova-orange);
}

.feature-conversion__pricing:hover {
  color: #9e3e00;
}

.work-section__pricing {
  align-self: center;
  color: rgba(255,255,255,.86);
  text-decoration: underline;
  text-decoration-color: var(--nova-orange);
  text-underline-offset: 4px;
}

.pricing-section {
  padding: clamp(42px, 5vw, 64px) 0;
  background: #f4f1eb;
  border-top: 1px solid rgba(23,23,23,.08);
}

.pricing-section__inner {
  display: grid;
  gap: clamp(24px, 3.5vw, 34px);
}

.pricing-section__intro {
  max-width: 720px;
}

.pricing-section__intro h2 {
  margin: 0;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.pricing-section__intro > p:last-child {
  margin: 12px 0 0;
  max-width: 60ch;
  color: #59534c;
  font-size: 14px;
  line-height: 1.55;
}

/* ==========================================================
   PRICING CARD RESPONSIVE INTERNALS — canonical, mobile first
   Bootstrap owns card columns/gutters via .row and .col-*.
   ========================================================== */

.pricing-card,
.pricing-card * {
	min-width: 0;
}

.pricing-card {
  width: 100%;
}

.pricing-card h3,
.pricing-card p,
.pricing-card li,
.pricing-card strong,
.pricing-card span {
	overflow-wrap: anywhere;
}

/* Mobile: actions stack and never clip. */
.pricing-card__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-top: auto;
	padding: 0 20px 20px;
}

.pricing-card__secondary {
	width: auto;
	max-width: 100%;
}

/* Mobile: two web tiers become one column. */
.pricing-card--web .pricing-card__tier-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 12px 20px 8px;
	border: 0;
}

/* Mobile: business heading/badge may wrap naturally. */
.pricing-card--business .pricing-card__option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  width: 100%;
  min-height: 26px;
  margin: 0 0 10px;
}

.pricing-card__choice-badge,
.pricing-card--business .pricing-card__choice-badge,
.pricing-card__choice-badge--orange,
.pricing-card__choice-badge--sand {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	min-height: 26px;
	height: auto;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 700;
	line-height: 1.15;
	white-space: normal;
	text-align: left;
}

.pricing-card--business .pricing-card__choice-badge {
	background: #DEEAFF;
	color: #005690;
	border: 1px solid rgba(0,86,144,.18);
}

.pricing-card--web .pricing-card__choice-badge--sand {
	background: #F3E4D8;
	color: #903600;
	border: 1px solid rgba(144,54,0,.16);
}

.pricing-card__plan-copy strong {
	font-weight: inherit;
}


/* Mobile: price list label/value stack instead of squeezing text. */
.pricing-card--repair .pricing-card__features li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

@media (min-width: 576px) {
	.pricing-card__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding: 0 26px 26px;
	}

	.pricing-card--repair .pricing-card__features li {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 12px;
	}

	.pricing-card--web .pricing-card__tier-list {
		margin-inline: 26px;
	}
}

@media (min-width: 992px) {
	.pricing-card--web .pricing-card__tier-list {
		grid-template-columns: 1fr 1fr;
	}
}

.pricing-card {
  display: flex;
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(23,23,23,.10);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(23,23,23,.045);
  scroll-margin-top: 110px;
}

.pricing-card::before {
  position: absolute;
  inset: 0 0 auto;
}

.pricing-card--web::before { background: #7b644d; }

.pricing-card__eyebrow {
  margin: 0 0 10px;
  color: #68615a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
}

.pricing-card h3 {
  margin: 0 0 18px;
  min-height: 2.2em;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.025em;
}

.pricing-card__list {
  display: grid;
  gap: 0;
  margin: 0 0 20px;
  padding: 0;
}

.pricing-card__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid rgba(23,23,23,.08);
  font-size: 13px;
  line-height: 1.35;
}

.pricing-card__list strong {
  color: var(--nova-ink);
  font-size: 14px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 900px) {

  .pricing-card h3 { min-height: 0; }
}

@media (max-width: 575.98px) {
  .feature-conversion__buttons .button { flex: 1 1 140px; }
  .pricing-card { padding: 20px; }
}

.feature-conversion__pricing,
.work-section__pricing {
	color: var(--nova-orange) !important;
	font-size: 12.5px !important;
	font-weight: 800 !important;
	letter-spacing: 0.055em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	text-underline-offset: 0 !important;
}

.feature-conversion__pricing:hover,
.feature-conversion__pricing:focus-visible,
.work-section__pricing:hover,
.work-section__pricing:focus-visible {
	color: #f47a22 !important;
	text-decoration: none !important;
}

/* Hero title was visually too compressed on two lines. */
.hero-title__primary {
	line-height: 1.02 !important;
}

.hero-title__line--second {
	margin-top: 7px !important;
}

/* Consistent breathing room for section headings without making sections taller. */
.services-section h2,
.trust-section h2,
.repair-feature h2,
.business-feature h2,
.work-section h2,
.pricing-section h2,
.coverage-section h2,
.final-cta h2 {
	line-height: 1.10 !important;
}

.service-band h3,
.web-project__content h3,
.pricing-card h3 {
	line-height: 1.12 !important;
}

.hero__copy,
.service-band p,
.repair-feature__copy,
.business-feature__copy,
.work-section__summary,
.web-project__content p,
.pricing-section__intro > p:last-child,
.coverage-section__copy,
.final-cta__copy,
.site-footer__brand p {
	line-height: 1.58 !important;
}

.repair-feature__needs li,
.business-feature__needs li,
.pricing-card__list li {
	line-height: 1.45 !important;
}

@media (max-width: 575.98px) {
	.hero-title__primary {
		line-height: 1.04 !important;
	}

	.services-section h2,
	.trust-section h2,
	.repair-feature h2,
	.business-feature h2,
	.work-section h2,
	.pricing-section h2,
	.coverage-section h2,
	.final-cta h2 {
		line-height: 1.12 !important;
	}
}

.pricing-section {
	padding: clamp(48px, 6vw, 76px) 0 !important;
}

.pricing-section__inner {
	gap: clamp(28px, 4vw, 40px) !important;
}

.pricing-section__intro {
	max-width: 780px !important;
}

.pricing-section__intro h2 {
	font-size: clamp(32px, 3.5vw, 46px) !important;
	line-height: 1.08 !important;
}

.pricing-card {
	padding: 0 !important;
	border-radius: 18px !important;
	box-shadow: 0 14px 32px rgba(23,23,23,.06) !important;
}

.pricing-card::before {
	height: 5px !important;
}

.pricing-card__top {
	padding: 26px 26px 20px;
}

.pricing-card__eyebrow {
	margin-bottom: 18px !important;
	font-size: 11px !important;
}

.pricing-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 5px 9px;
	margin-bottom: 16px;
}

.pricing-card__price-prefix {
	color: #6b645c;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.pricing-card__price-main {
	color: var(--nova-ink);
	font-size: clamp(38px, 4vw, 54px);
	font-weight: 800;
	line-height: .95;
	letter-spacing: -0.045em;
}

.pricing-card__price-note {
	flex-basis: 100%;
	color: #4d4741;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.35;
}

.pricing-card__summary {
	margin: 0;
	color: #5b554f;
	font-size: 14px;
	line-height: 1.55;
}

.pricing-card__features {
	display: grid;
	gap: 12px !important;
	margin: 0 !important;
	padding: 20px 26px 24px !important;
	border-top: 1px solid rgba(23,23,23,.08);
}

.pricing-card__features li {
  padding-left: 24px;
  color: #282522;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
}

.pricing-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--nova-orange);
  font-size: 15px;
}

.pricing-card--business .pricing-card__features li::before {
	color: var(--nova-blue);
}

.pricing-card--web .pricing-card__features li::before {
	color: #7b644d;
}

.pricing-card__primary {
	background: var(--nova-ink);
	color: #fff !important;
}

.pricing-card__primary:hover,
.pricing-card__primary:focus-visible {
	background: var(--nova-orange);
	color: #fff !important;
}

.pricing-card__secondary {
	border: 1px solid rgba(23,23,23,.18);
	background: #fff;
	color: var(--nova-ink) !important;
}

.pricing-card__secondary:hover,
.pricing-card__secondary:focus-visible {
	border-color: rgba(201,79,0,.45);
	color: var(--nova-orange) !important;
}

@media (max-width: 900px) {
	.pricing-card__price-main {
		font-size: 42px;
	}
}

@media (max-width: 520px) {
	.pricing-card__top,
	.pricing-card__features {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

}

a,
a:hover,
a:focus,
a:active {
	text-decoration: none !important;
}

.text-link,
.feature-conversion__pricing,
.work-section__pricing,
.pricing-card__primary,
.case-study__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	width: fit-content;
	color: var(--nova-orange) !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: .055em;
	text-transform: uppercase;
	box-shadow: none !important;
}

.text-link::after,
.feature-conversion__pricing::after,
.work-section__pricing::after,
.pricing-card__primary::after,
.case-study__link::after {
	content: "→";
	font-size: 1.15em;
	line-height: 1;
	transition: transform 160ms ease;
}

.text-link:hover::after,
.feature-conversion__pricing:hover::after,
.work-section__pricing:hover::after,
.pricing-card__primary:hover::after,
.case-study__link:hover::after {
	transform: translateX(3px);
}

.pricing-section {
	background: #f6f2ec !important;
}

.pricing-card {
	position: relative;
	display: flex !important;
	flex-direction: column;
	height: 100%;
	border: 1px solid rgba(23,23,23,.09) !important;
	background: #fff !important;
}

.pricing-card--featured {
	border-color: rgba(60,104,176,.28) !important;
	box-shadow: 0 18px 38px rgba(60,104,176,.10) !important;
}

.pricing-card--featured::after {
	content: "MONTHLY SUPPORT";
	position: absolute;
	right: 18px;
	top: 17px;
	padding: 5px 8px;
	border-radius: 999px;
	background: rgba(60,104,176,.09);
	color: var(--nova-blue);
	font-size: 9px;
	font-weight: 850;
	letter-spacing: .08em;
}

.pricing-card__price {
	column-gap: 8px !important;
	row-gap: 6px !important;
}

.pricing-card__price-main {
	font-size: clamp(46px, 4.7vw, 64px) !important;
	line-height: .9 !important;
}

.pricing-card__price-suffix {
	color: #5f5952;
	font-size: 15px;
	font-weight: 700;
}

.pricing-card__price-note {
	margin-top: 2px;
	font-size: 13px !important;
	font-weight: 700 !important;
}

.pricing-card__option {
	margin: 0 26px;
	padding: 14px 15px;
	border: 1px solid rgba(60,104,176,.14);
	border-radius: 10px;
	background: rgba(60,104,176,.05);
}

.pricing-card__option--web {
	border-color: rgba(201,79,0,.16);
	background: rgba(201,79,0,.05);
}

.pricing-card__option strong,
.pricing-card__option span {
	display: block;
}

.pricing-card__option strong {
	color: var(--nova-ink);
	font-size: 17px;
	line-height: 1.2;
}

.pricing-card__option span {
	margin-top: 4px;
	color: #615b55;
	font-size: 12px;
	line-height: 1.35;
}

.pricing-card__secondary {
	justify-self: end;
	min-height: 42px;
	padding: 10px 16px !important;
	border: 1px solid var(--nova-ink) !important;
	border-radius: 8px;
	background: var(--nova-ink) !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: .035em;
	text-transform: uppercase;
}

.pricing-card__secondary:hover,
.pricing-card__secondary:focus-visible {
	border-color: var(--nova-orange) !important;
	background: var(--nova-orange) !important;
	color: #fff !important;
}

@media (max-width: 520px) {
	.pricing-card__option {
		margin-left: 20px;
		margin-right: 20px;
	}

	.pricing-card__secondary {
		justify-self: stretch;
	}
}

.pricing-section__intro {
	max-width: 680px;
}

.pricing-card {
	overflow: hidden;
	border-radius: 14px !important;
	box-shadow: 0 12px 32px rgba(23,23,23,.06) !important;
}

.pricing-card::before {
	content: "";
	display: block;
	height: 4px;
	background: var(--nova-orange);
}

.pricing-card--business::before { background: var(--nova-blue); }
.pricing-card--web::before { background: #8a5b37; }

.pricing-card--featured::after { display: none !important; }

.pricing-card__top {
	padding-top: 24px !important;
	padding-bottom: 18px !important;
}

.pricing-card__label-row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 24px;
	margin-bottom: 14px;
}

.pricing-card__icon {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background: rgba(201,79,0,.08);
	color: var(--nova-orange);
	font-size: 12px;
	font-weight: 900;
	line-height: 1;
}

.pricing-card--business .pricing-card__icon {
	background: rgba(60,104,176,.09);
	color: var(--nova-blue);
}

.pricing-card--web .pricing-card__icon {
	background: rgba(138,91,55,.09);
	color: #8a5b37;
}

.pricing-card__eyebrow {
	margin: 0 !important;
	font-size: 10px !important;
	font-weight: 850 !important;
	letter-spacing: .09em !important;
	text-transform: uppercase;
}

.pricing-card__pill {
	margin-left: auto;
	padding: 5px 8px;
	border-radius: 999px;
	background: rgba(60,104,176,.09);
	color: var(--nova-blue);
	font-size: 8.5px;
	font-weight: 850;
	letter-spacing: .07em;
	white-space: nowrap;
}

.pricing-card__pill--orange {
	background: rgba(201,79,0,.09);
	color: var(--nova-orange);
}

.pricing-card h3 {
	margin: 0 0 20px;
	font-size: clamp(22px,2vw,28px);
	line-height: 1.08;
	letter-spacing: -.025em;
}

.pricing-card__hero-value {
	padding: 16px 0 17px;
	border-top: 1px solid rgba(23,23,23,.08);
	border-bottom: 1px solid rgba(23,23,23,.08);
}

.pricing-card__value-kicker {
	display: block;
	margin-bottom: 7px;
	color: #6f675f;
	font-size: 11px;
	font-weight: 750;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.pricing-card__value-main {
	display: block;
	font-size: clamp(42px,4.4vw,58px);
	line-height: .92;
	letter-spacing: -.045em;
	font-weight: 850;
	color: var(--nova-ink);
}

.pricing-card__value-main span {
	font-size: .36em;
	font-weight: 750;
	letter-spacing: 0;
	color: #66605a;
}

.pricing-card__summary {
	margin-top: 17px !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: #5b554f !important;
}

.pricing-card__summary strong {
	color: var(--nova-ink);
	font-weight: 800;
}

.pricing-card__option {
	margin-top: 0 !important;
	padding-top: 15px !important;
	padding-bottom: 15px !important;
}

.pricing-card__tier-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 0 26px 4px;
}

.pricing-card__tier-list > div {
	padding: 13px 14px;
	border: 1px solid rgba(201,79,0,.14);
	border-radius: 10px;
	background: rgba(201,79,0,.045);
}

.pricing-card__tier-list strong,
.pricing-card__tier-list span {
	display: block;
}

.pricing-card__tier-list strong {
	font-size: 18px;
	line-height: 1;
	color: var(--nova-ink);
}

.pricing-card__tier-list span {
	margin-top: 5px;
	font-size: 11px;
	line-height: 1.25;
	color: #615b55;
}

.pricing-card__features {
	margin-top: 6px !important;
	padding-top: 18px !important;
	border-top: 1px solid rgba(23,23,23,.07);
}

.pricing-card__features li {
	position: relative;
	padding-left: 24px !important;
	font-size: 12.5px !important;
	line-height: 1.4 !important;
}

.pricing-card__features li + li {
	margin-top: 10px;
}

.pricing-card__features li::before {
	content: "✓" !important;
	position: absolute !important;
	left: 0 !important;
	top: .02em !important;
	display: grid !important;
	place-items: center;
	width: 16px !important;
	height: 16px !important;
	border-radius: 50%;
	background: rgba(201,79,0,.09) !important;
	color: var(--nova-orange) !important;
	font-size: 10px !important;
	font-weight: 900;
}

.pricing-card--business .pricing-card__features li::before {
	background: rgba(60,104,176,.10) !important;
	color: var(--nova-blue) !important;
}

.pricing-card--web .pricing-card__features li::before {
	background: rgba(138,91,55,.09) !important;
	color: #8a5b37 !important;
}

.pricing-card__primary,
.pricing-card__primary:hover,
.pricing-card__primary:focus-visible {
	text-decoration: none !important;
	color: var(--nova-orange) !important;
}

.pricing-card__secondary {
	text-decoration: none !important;
}

@media (max-width: 520px) {
	.pricing-card__tier-list {
		margin-left: 20px;
		margin-right: 20px;
	}
	.pricing-card__pill {
		display: none;
	}
}

.pricing-card__audience {
	margin: -24px -26px 20px;
	padding: 10px 26px 9px;
	font-size: 9.5px;
	font-weight: 900;
	letter-spacing: .09em;
	line-height: 1.25;
	text-transform: uppercase;
	color: #fff;
}
.pricing-card__audience--repair { background: var(--nova-orange); }
.pricing-card__audience--business { background: var(--nova-blue); }
.pricing-card__audience--web { background: #6f4b34; }

.pricing-card__option--separated {
	margin: 0 26px 4px !important;
	padding: 15px 0 16px !important;
	border-top: 1px solid rgba(23,23,23,.11);
	border-bottom: 1px solid rgba(23,23,23,.11);
	background: transparent !important;
	border-radius: 0 !important;
}
.pricing-card__option-label,
.pricing-card__tier-label {
	display: block;
	margin-bottom: 7px;
	font-size: 8.5px !important;
	font-weight: 900 !important;
	letter-spacing: .09em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #6f675f !important;
}
.pricing-card__option--separated > strong {
	display: block;
	font-size: 25px;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--nova-ink);
}
.pricing-card__option--separated > strong span {
	font-size: .48em;
	font-weight: 750;
	letter-spacing: 0;
	color: #66605a;
}
.pricing-card__option--separated > span:last-child {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	line-height: 1.3;
	color: #615b55;
}

.pricing-card__tier-list {
	gap: 0 !important;
	margin-top: 0 !important;
	border-top: 1px solid rgba(23,23,23,.1);
	border-bottom: 1px solid rgba(23,23,23,.1);
}
.pricing-card__tier-list > div {
	padding: 15px 14px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}
.pricing-card__tier-list > div + div {
	border-left: 1px solid rgba(23,23,23,.1) !important;
}
.pricing-card__tier-list strong {
	font-size: 25px !important;
	letter-spacing: -.025em;
}

.pricing-card__secondary,
.pricing-card__secondary:hover,
.pricing-card__secondary:focus-visible {
  text-decoration: none !important;
}
.pricing-card__primary,
.pricing-card__primary:visited,
.pricing-card__primary:hover,
.pricing-card__primary:focus-visible {
	color: var(--nova-orange) !important;
	text-decoration: none !important;
}

@media (max-width: 520px) {
	.pricing-card__audience {
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.pricing-card__tier-list > div + div {
		border-left: 0 !important;
		border-top: 1px solid rgba(23,23,23,.1) !important;
	}
}

.pricing-card__audience {
  padding-top: 12px !important;
  padding-bottom: 11px !important;
  font-size: 11.5px !important;
  letter-spacing: .06em !important;
  line-height: 1.3 !important;
}

/* Business secondary plan: keep the soft blue box from A44, but make it clearly separate. */
.pricing-card--business .pricing-card__option--separated {
  margin: 12px 26px 8px !important;
  padding: 14px 16px 15px !important;
  border: 1px solid rgba(60,104,176,.20) !important;
  border-top: 3px solid var(--nova-blue) !important;
  background: rgba(60,104,176,.075) !important;
}
.pricing-card__option-head,
.pricing-card__tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.pricing-card__option-label,
.pricing-card__tier-label {
  margin-bottom: 0 !important;
}
.pricing-card--business .pricing-card__option--separated > strong {
  display: block;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--nova-ink);
}
.pricing-card--business .pricing-card__option--separated > strong span {
  font-size: .48em;
  font-weight: 700;
  letter-spacing: 0;
  color: #66605a;
}
.pricing-card--business .pricing-card__option--separated > span:last-child {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.3;
  color: #615b55;
}

/* Web tiers: two genuinely coloured boxes, as in A44. */
.pricing-card--web .pricing-card__tier-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 12px 26px 8px !important;
  border: 0 !important;
}

@media (max-width: 520px) {
  .pricing-card__audience {
    font-size: 10.75px !important;
  }

}

.pricing-card--business .pricing-card__option-head {
  align-items: flex-start;
  flex-wrap: wrap;
  row-gap: 7px;
}

.web-ux-proof {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.45fr);
  gap: 28px;
  margin: 28px 0 34px;
  padding: 24px 26px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.web-ux-proof__eyebrow {
  margin: 0 0 8px;
  color: var(--nova-orange);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.web-ux-proof h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.12;
  letter-spacing: -.025em;
}
.web-ux-proof__lead > p:last-child {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.6;
}
.web-ux-proof__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.web-ux-proof__points > div {
  padding: 14px 15px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}
.web-ux-proof__points strong,
.web-ux-proof__points span {
  display: block;
}
.web-ux-proof__points strong {
  margin-bottom: 6px;
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
}
.web-ux-proof__points span {
  color: rgba(255,255,255,.66);
  font-size: 11.5px;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .web-ux-proof { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .web-ux-proof { padding: 20px; }
  .web-ux-proof__points { grid-template-columns: 1fr; }
}

:root {
  --nova-accent-gold: #d8b85a;
  --nova-accent-sand: #f3e7c6;
  --nova-accent-sand-deep: #8a6d32;
}

/* UX should be visible in the main Web & Digital story, not hidden in body copy. */
.work-section__intro .section-kicker {
  color: rgba(255,255,255,.62) !important;
}
.web-ux-proof__eyebrow {
  color: var(--nova-accent-gold) !important;
}

/* Decorative accents are deliberately not orange. Orange is reserved for CTA + links. */
.pricing-card::before {
  background: var(--nova-accent-gold) !important;
}
.pricing-card--business::before {
  background: var(--nova-blue) !important;
}
.pricing-card--web::before {
  background: var(--nova-accent-sand-deep) !important;
}
.pricing-card__audience--repair {
  background: var(--nova-accent-gold) !important;
  color: #241f15 !important;
}
.pricing-card__audience--business {
  background: var(--nova-blue) !important;
}
.pricing-card__audience--web {
  background: #a98b50 !important;
}

.pricing-card--web .pricing-card__features li::before {
  color: var(--nova-accent-sand-deep) !important;
}

/* Price first, its explanation second, then a clear divider before the next option. */
.pricing-card__plan-copy {
  display: block;
  margin-top: 8px !important;
}
.pricing-card__plan-copy strong {
  font-weight: 750;
  color: inherit;
}
.pricing-card__plan-separator {
  height: 1px;
  margin: 14px 26px 0;
  background: rgba(23,23,23,.13);
}
.pricing-card--business .pricing-card__option--separated {
  margin-top: 12px !important;
  border-top-color: var(--nova-blue) !important;
}

/* Badges: one consistent component with the check optically centred. */
.pricing-card__choice-badge,
.pricing-card--business .pricing-card__choice-badge,
.pricing-card__choice-badge--sand {
  min-height: 22px !important;
  padding: 5px 9px !important;
  font-size: 8px !important;
  vertical-align: middle !important;
}
.pricing-card__badge-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  line-height: 1;
  transform: translateY(-.25px);
}

/* Keep orange exclusively where it acts like an interaction cue. */
.pricing-card__primary,
.pricing-card__primary:visited,
.feature-conversion__pricing,
.work-section__pricing {
  color: var(--nova-orange) !important;
}
.pricing-card__secondary,
.pricing-card__secondary:hover,
.pricing-card__secondary:focus-visible {
  background: var(--nova-orange) !important;
  border-color: var(--nova-orange) !important;
  color: #fff !important;
}

@media (max-width: 520px) {
  .pricing-card__plan-separator {
    margin-left: 20px;
    margin-right: 20px;
  }

}

:root {
  --nova-blue: #007AC9;
  --nova-blue-mid: #005690;
  --nova-blue-soft: #DEFaff;
  --nova-web-accent: #903600;
  --nova-ink-soft: #575251;
}

/* Pricing service notes: smaller, darker neutral and clearly separated from the price. */
.pricing-card h3 { margin-bottom: 0 !important; }
.pricing-card__service-note {
  margin: 10px 0 22px !important;
  color: var(--nova-ink-soft) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}
.pricing-card__service-note--ux strong {
  color: var(--nova-web-accent) !important;
  font-weight: 800 !important;
}

/* Audience strips use the annotated complementary colours, not CTA orange. */
.pricing-card__audience {
  font-size: 10px !important;
  line-height: 1.25 !important;
}
.pricing-card__audience--repair {
  color: #fff !important;
}
.pricing-card__audience--business {
  color: #fff !important;
}
.pricing-card__audience--web {
  color: #fff !important;
}
.pricing-card--repair::before { background: #007AC9 !important; }
.pricing-card--business::before { background: #005690 !important; }
.pricing-card--web::before { background: #903600 !important; }

/* Primary price + explanation are one block: no visual rule between or immediately after them. */
.pricing-card__hero-value {
  border: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.pricing-card__summary {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #575251 !important;
  line-height: 1.52 !important;
}
.pricing-card__summary strong {
  color: #353231 !important;
  font-weight: 700 !important;
}
.pricing-card__plan-separator { display: none !important; }

/* Business: the £250 plan is its own box, with the badge vertically centred. */
.pricing-card--business .pricing-card__option--separated {
  position: relative !important;
  margin-top: 24px !important;
  padding: 17px 118px 17px 18px !important;
  border: 1px solid rgba(0,86,144,.24) !important;
  border-top: 3px solid #005690 !important;
  border-radius: 10px !important;
  background: rgba(222,234,255,.55) !important;
}

.pricing-card--business .pricing-card__option--separated > strong {
  display: block !important;
  margin: 0 !important;
}
.pricing-card--business .pricing-card__option--separated > span:last-child {
  display: block !important;
  margin-top: 10px !important;
  line-height: 1.5 !important;
}

/* Web tiers: each tier is self-contained; no extra divider above Business Website. */
.pricing-card--web .pricing-card__tier-list {
  margin-top: 24px !important;
  gap: 12px !important;
}

.pricing-card__tier-head {
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.pricing-card__plan-copy {
  display: block !important;
  margin-top: 12px !important;
  color: #575251 !important;
  line-height: 1.5 !important;
}
.pricing-card__plan-copy strong {
  display: block !important;
  margin-bottom: 6px !important;
  color: #353231 !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
}

.pricing-card__badge-check {
  font-size: 10px !important;
}

/* Keep orange for interaction. Pricing decoration uses the complementary palette. */
.pricing-card--repair .pricing-card__features li::before { color: #007AC9 !important; }
.pricing-card--business .pricing-card__features li::before { color: #005690 !important; }
.pricing-card--web .pricing-card__features li::before { color: #903600 !important; }
.pricing-card__primary,
.pricing-card__primary:visited { color: var(--nova-orange) !important; text-decoration: none !important; }
.pricing-card__secondary,
.pricing-card__secondary:visited {
  background: var(--nova-orange) !important;
  border-color: var(--nova-orange) !important;
  color: #fff !important;
}

/* UX proof uses blue / web accent rather than CTA orange. */
.web-ux-proof__eyebrow { color: #9BC4FF !important; }

@media (max-width: 640px) {
  .pricing-card--business .pricing-card__option--separated {
    padding-right: 18px !important;
  }

  .pricing-card__tier-head {
    align-items: center !important;
  }
}

/* The two homepage 3-card groups now use Bootstrap's row/column gutters. */
.service-bands.row,

.service-bands.row {
  margin-left: auto !important;
  margin-right: auto !important;
}

.service-bands.row > [class*="col-"],

.service-band,
.pricing-card {
  width: 100%;
  height: 100%;
}

/* Compact title -> subtitle -> primary price relationship from the inspector reference. */
.pricing-card__top {
  padding-bottom: 14px !important;
}

.pricing-card__service-note {
  margin: 5px 0 15px !important;
  font-size: 11.5px !important;
}
.pricing-card__hero-value {
  padding-top: 0 !important;
}
.pricing-card__summary {
  margin-top: 9px !important;
}
.pricing-card__plan-copy {
  margin-top: 7px !important;
}

/* Keep badges optically centred without affecting the text baseline. */
.pricing-card__choice-badge,
.pricing-card--business .pricing-card__choice-badge,
.pricing-card__choice-badge--sand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}

.pricing-card__badge-check {
  width: 12px !important;
  transform: translateY(-.2px) !important;
}

/* Responsive homepage: prevent desktop grids being squeezed into narrow viewports. */
@media (max-width: 991.98px) {
  .repair-feature__inner,
  .business-feature__inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .repair-feature__copy,
  .business-feature__copy,
  .repair-feature__media,
  .business-feature__media {
    width: 100% !important;
    max-width: none !important;
  }
  .repair-feature__media,
  .business-feature__media {
    min-height: 320px;
  }
  .business-feature__copy { order: 1; }
  .business-feature__media { order: 2; }

  .coverage-section__inner,
  .final-cta__inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .web-ux-proof {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .web-ux-proof__points {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}

@media (max-width: 767.98px) {
  .hero__row > [class*="col-"] {
    width: 100% !important;
  }
  .service-bands.row,

  .service-band,
  .pricing-card {
    height: auto !important;
  }
  .repair-feature__inner,
  .business-feature__inner {
    gap: 18px !important;
  }
  .repair-feature__media,
  .business-feature__media {
    min-height: 240px;
  }

  .web-project,
  .web-project--featured,
  .web-project--reverse {
    grid-template-columns: 1fr !important;
  }

  .web-project__media img {
    width: 100% !important;
  }

  .web-ux-proof__points {
    grid-template-columns: 1fr !important;
  }

  .pricing-card--business .pricing-card__option--separated {
    padding-right: 16px !important;
  }

}

@media (max-width: 479.98px) {
  .pricing-section,
  .services-section,
  .repair-feature,
  .business-feature,
  .coverage-section {
    overflow-x: clip;
  }

  .pricing-card__audience {
    margin-left: -18px !important;
    margin-right: -18px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .pricing-card__secondary {
    width: auto !important;
  }
}

.pricing-card h3 {
  margin: 0 !important;
}
.pricing-card__service-note {
  margin: 3px 0 15px !important;
  font-size: 14px !important;
  line-height: 1.42 !important;
}
.pricing-card__top {
  padding-top: 20px !important;
}

@media (max-width: 767.98px) {
  .pricing-card__service-note {
    margin-top: 3px !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
  }
}

.pricing-card--business .pricing-card__option-head {
  gap: 8px !important;
  min-height: 28px !important;
}

.pricing-card--business .pricing-card__option--separated {
  padding-right: 18px !important;
}

/* Carry the pricing category code into the corresponding service sections. */
.feature-audience--repair {
  background: var(--nova-category-repair) !important;
  border-color: var(--nova-category-repair) !important;
  color: #fff !important;
}
.feature-audience--business {
  background: var(--nova-category-business) !important;
  border-color: var(--nova-category-business) !important;
  color: #fff !important;
}
.work-section__intro .feature-audience--web {
  display: inline-flex !important;
  width: fit-content;
  margin: 0 0 12px !important;
  padding: 6px 10px !important;
  background: var(--nova-category-web) !important;
  border: 1px solid var(--nova-category-web) !important;
  border-radius: 999px;
  color: #fff !important;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Matching secondary accents without stealing CTA orange. */
.repair-feature__needs li::before { color: var(--nova-category-repair) !important; }
.business-feature__needs li::before { color: var(--nova-category-business) !important; }
.web-ux-proof { border-color: rgba(144,54,0,.38) !important; }

/* Repair teaser: service first, price second, easy to scan. */
.pricing-card--repair .pricing-card__features li {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
}

:root {
  --nova-category-repair: #007AC9;
  --nova-category-business: #005690;
  --nova-category-web: #903600;
  --nova-category-repair-soft: #DEEAFF;
  --nova-category-business-soft: #9BC4FF;
  --nova-category-web-soft: #FFE3DE;
  --nova-category-neutral: #575251;
}

/* Keep the approved full-width strips on pricing cards. */
.pricing-card__audience {
  display: block !important;
  width: auto !important;
  margin: -20px -22px 18px !important;
  padding: 11px 22px !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}
.pricing-card__audience--repair { background: #007AC9 !important; }
.pricing-card__audience--business { background: #005690 !important; }
.pricing-card__audience--web { background: #903600 !important; }

/* Approved compact title/subtitle relationship. */
.pricing-card h3 {
  min-height: 0 !important;
  margin: 0 0 2px !important;
  font-size: clamp(22px, 2vw, 27px) !important;
  line-height: 1.08 !important;
}
.pricing-card__service-note {
  margin: 0 0 15px !important;
  max-width: 34ch;
  color: #575251 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.34 !important;
}

/* Same category language in the service sections, using softer palette tints. */
.feature-audience {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100%;
  margin: 0 0 10px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 550 !important;
  line-height: 1.15 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
}
.feature-audience--repair {
  background: #DEEAFF !important;
  border: 1px solid #9BC4FF !important;
  color: #005690 !important;
}
.feature-audience--business {
  background: #9BC4FF !important;
  border: 1px solid #2BA0FF !important;
  color: #00355B !important;
}
.work-section__intro .feature-audience--web {
  background: #FFE3DE !important;
  border: 1px solid #FFAD9B !important;
  color: #903600 !important;
}

/* Keep decorative accents in the category palette. Interactive orange stays for CTA/link only. */
.repair-feature__needs li::before { background: #007AC9 !important; color: #007AC9 !important; }
.business-feature__needs li::before { background: #005690 !important; color: #005690 !important; }
.web-ux-proof { border-color: rgba(144,54,0,.30) !important; }
.web-ux-proof__eyebrow { color: #FFAD9B !important; }

/* Pricing is now an early decision aid, so give the transition into service detail a clean rhythm. */
.pricing-section { border-bottom: 1px solid rgba(23,23,23,.08); }
.pricing-section + .repair-feature { border-top: 0 !important; }

@media (max-width: 767.98px) {
  .pricing-card__audience {
    margin: -20px -18px 16px !important;
    padding: 10px 18px !important;
    font-size: 11px !important;
  }
  .pricing-card__service-note {
    margin-top: 0 !important;
    font-size: 14px !important;
    line-height: 1.34 !important;
  }
}

/* Keep pricing audience strips visually clean and on one line at desktop widths. */
@media (min-width: 768px) {
  .pricing-card__audience {
    white-space: nowrap !important;
  }
  .pricing-card__audience--business {
    font-size: 11px !important;
    letter-spacing: .045em !important;
  }
}

/* Carry the approved category colour code onto the three service cards. */
.service-band {
  border-top: 4px solid transparent !important;
}
.service-band--repair {
  border-top-color: #007AC9 !important;
}
.service-band--business {
  border-top-color: #005690 !important;
}
.service-band--digital {
  border-top-color: #903600 !important;
}

/* Preserve the compact service-card shape after adding the top rule. */
.service-band__content {
  border-top: 0 !important;
}

.pricing-card {
  overflow: hidden !important;
}
.pricing-card__audience {
  margin-left: -22px !important;
  margin-right: -22px !important;
  border-radius: 0 !important;
}
@media (max-width: 767.98px) {
  .pricing-card__audience {
    margin-left: -18px !important;
    margin-right: -18px !important;
  }
}

@media (min-width: 768px) {
  .pricing-card__audience {
    margin-left: -26px !important;
    margin-right: -26px !important;
    padding-left: 26px !important;
    padding-right: 26px !important;
  }
}

/* Pricing is intentionally untouched. All other .container-xl homepage chapters
   use Bootstrap's full container width instead of the older extra Nova gutter trim. */
.hero__inner,
.services-section__intro,
.service-bands,
.trust-section__inner,
.repair-feature__inner,
.business-feature__inner,
.work-section__inner,
.coverage-section__inner,
.final-cta__inner,
.site-footer__inner {
  width: 100% !important;
}

/* ==========================================================================\n   Business IT page\n   ========================================================================== */
.business-page {
	background: var(--nova-warm-white);
}

.business-page-hero,
.business-page-services,
.business-page-support,
.business-page-why,
.business-page-process,
.business-page-local,
.business-page-final {
	padding: clamp(58px, 7vw, 104px) 0;
}

.business-page-hero {
	position: relative;
	overflow: hidden;
	padding-top: var(--nova-hero-space-top);
	padding-bottom: var(--nova-hero-space-bottom);
	background: var(--nova-warm-white);
}

.business-page-hero::before {
	display: none;
	content: none;
}

.business-page-kicker {
	margin-bottom: 16px;
}

.business-page-hero h1,
.business-page-section-heading h2,
.business-page-support h2,
.business-page-why h2,
.business-page-local h2,
.business-page-final h2 {
	margin: 0;
	font-weight: var(--weight-heading);
	letter-spacing: -0.035em;
	line-height: 1.03;
}

.business-page-hero h1 {
	max-width: 100%;
	font-size: inherit;
}

.business-page-section-heading h2 span,
.business-page-support h2 span,
.business-page-why h2 span,
.business-page-local h2 span,
.business-page-final h2 span {
	font-family: "Newsreader", Georgia, serif;
	font-style: italic;
	font-weight: 500;
}

.business-page-section-heading h2 span,
.business-page-local h2 span {
	color: #005690;
}

.business-page-hero__lead {
	max-width: 650px;
	margin: 24px 0 0;
	color: #4d4d4d;
	font-size: clamp(17px, 2.1vw, 20px);
	line-height: 1.55;
}

.business-page-hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.business-page-hero__proof span {
	padding: 8px 12px;
	border: 1px solid #d9d5ce;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.54);
	font-size: 13px;
	font-weight: 650;
}

.business-page-hero__actions {
	gap: 12px;
	margin-top: 28px;
}

.business-page-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	color: #5f5f5f;
	font-size: 13px;
	font-weight: 600;
}

.business-page-rating__score {
	color: var(--nova-ink);
	font-weight: 800;
}

.business-page-rating__stars {
	color: var(--nova-orange);
	font-size: 14px;
	letter-spacing: 0.06em;
}

.business-page-enquiry {
	height: 100%;
	padding: clamp(24px, 4vw, 38px);
	border: 1px solid #dedbd5;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 20px 54px rgba(23, 23, 23, 0.08);
}

.business-page-enquiry__eyebrow {
	margin: 0 0 8px;
	color: var(--nova-orange);
	font-size: var(--type-eyebrow);
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.business-page-enquiry h2 {
	max-width: 14ch;
	margin: 0;
	font-size: clamp(27px, 3.2vw, 38px);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.08;
}

.business-page-enquiry > p:not(.business-page-enquiry__eyebrow):not(.business-page-enquiry__note) {
	margin: 14px 0 22px;
	color: #5f5f5f;
}

.business-page-form {
	display: grid;
	gap: 12px;
}

.business-page-form .form-control {
	border-color: #d6d2ca;
	border-radius: 11px;
}

.business-page-form textarea.form-control {
	min-height: 118px;
}

.business-page-form .button {
	width: 100%;
	min-height: 50px;
}

.business-page-enquiry__note {
	margin: 13px 0 0;
	color: var(--nova-mid-grey);
	font-size: 12px;
}

.business-page-services {
	background: #fff;
}

.business-page-section-heading {
	max-width: 760px;
	margin-bottom: clamp(30px, 5vw, 52px);
}

.business-page-section-heading--compact {
	margin-bottom: 30px;
}

.business-page-section-heading h2,
.business-page-support h2,
.business-page-why h2,
.business-page-local h2,
.business-page-final h2 {
	font-size: clamp(34px, 5vw, 55px);
}

.business-page-section-heading > p:last-child {
	max-width: 680px;
	margin: 18px 0 0;
	color: #5d5d5d;
	font-size: 17px;
}

.business-page-service-card {
	position: relative;
	min-height: 240px;
	padding: 28px;
	border: 1px solid #e2ded8;
	border-radius: 18px;
	background: var(--nova-warm-white);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.business-page-service-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(23, 23, 23, 0.07);
}

.business-page-service-card h3 {
	margin: 0 0 10px;
	font-size: 24px;
	font-weight: 650;
	letter-spacing: -0.02em;
}

.business-page-service-card p {
	margin: 0;
	color: #646464;
}

.business-page-support {
	background: var(--nova-warm-white);
}

.business-page-support__panel {
	padding: clamp(28px, 5vw, 58px);
	border-radius: 24px;
	background: var(--nova-ink);
	color: #fff;
}

.section-kicker--light,
.business-page-support .section-kicker {
	color: rgba(255, 255, 255, 0.58);
}

.business-page-support h2 span,
.business-page-final h2 span {
	color: #ffad9b;
}

.business-page-support h2 + p {
	max-width: 590px;
	margin: 20px 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 17px;
}

.business-page-checks {
	display: grid;
	gap: 12px;
	margin: 26px 0 0;
}

.business-page-checks li {
	position: relative;
	padding-left: 28px;
	color: rgba(255, 255, 255, 0.88);
}

.business-page-checks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #ffad9b;
	font-weight: 800;
}

.business-page-pricing {
	padding: 22px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.06);
}

.business-page-pricing__plan {
	padding: 18px 18px 20px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.07);
}

.business-page-pricing__plan + .business-page-pricing__plan {
	margin-top: 10px;
}

.business-page-pricing__plan--featured {
	border: 1px solid rgba(255, 173, 155, 0.5);
	background: rgba(201, 79, 0, 0.18);
}

.business-page-pricing__label {
	display: block;
	margin-bottom: 7px;
	color: rgba(255, 255, 255, 0.62);
	font-size: 11px;
	font-weight: 750;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.business-page-pricing__plan strong {
	display: block;
	font-size: 38px;
	line-height: 1;
}

.business-page-pricing__plan strong span {
	font-size: 15px;
	font-weight: 500;
}

.business-page-pricing__plan p {
	margin: 8px 0 0;
	color: rgba(255, 255, 255, 0.76);
}

.business-page-pricing__rates {
	display: grid;
	gap: 5px;
	margin: 18px 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
}

.business-page-pricing__rates p {
	margin: 0;
}

.business-page-pricing__rates strong {
	color: #fff;
}

.business-page-pricing .button {
	width: 100%;
	margin-top: 12px;
}

.business-page-why {
	background: #fff;
}

.business-page-why__content {
	padding: clamp(26px, 4.5vw, 52px);
	border-radius: 22px;
	background: var(--nova-warm-white);
}

.business-page-why__content > p:not(.section-kicker) {
	max-width: 620px;
	margin: 20px 0 0;
	color: #5f5f5f;
	font-size: 17px;
}

.business-page-why__points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 28px;
}

.business-page-why__points > div {
	padding: 16px;
	border: 1px solid #dedad3;
	border-radius: 13px;
	background: #fff;
}

.business-page-why__points strong,
.business-page-why__points span {
	display: block;
}

.business-page-why__points strong {
	margin-bottom: 4px;
	font-size: 14px;
}

.business-page-why__points span {
	color: #6a6a6a;
	font-size: 13px;
}

.business-page-why__media {
	min-height: 430px;
	margin: 0;
	overflow: hidden;
	border-radius: 22px;
	background: #dedbd5;
}

.business-page-why__media img {
	width: 100%;
	height: 100%;
	min-height: 430px;
	object-fit: cover;
}

.business-page-process {
	background: var(--nova-warm-white);
}

.business-page-step {
	padding: 26px;
	border-top: 4px solid var(--nova-orange);
	background: #fff;
}

.business-page-step > span {
	display: block;
	margin-bottom: 38px;
	color: var(--nova-orange);
	font-size: 12px;
	font-weight: 800;
}

.business-page-step h3 {
	margin: 0 0 8px;
	font-size: 23px;
	font-weight: 650;
}

.business-page-step p {
	margin: 0;
	color: #666;
}

.business-page-local {
	padding-top: clamp(42px, 6vw, 72px);
	padding-bottom: clamp(42px, 6vw, 72px);
	background: #fff;
}

.business-page-local__inner {
	display: grid;
	gap: 24px;
	padding: clamp(28px, 5vw, 52px) 0;
	border-top: 1px solid #dedad3;
	border-bottom: 1px solid #dedad3;
}

.business-page-local h2 {
	max-width: 18ch;
	font-size: clamp(30px, 4.5vw, 48px);
}

.business-page-local__inner > p {
	max-width: 670px;
	margin: 0;
	color: #5f5f5f;
	font-size: 16px;
}

.business-page-final {
	padding-top: 0;
	background: #fff;
}

.business-page-final__panel {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	padding: clamp(30px, 5vw, 58px);
	border-radius: 22px;
	background: var(--nova-ink);
	color: #fff;
}

.business-page-final h2 {
	max-width: 14ch;
}

.business-page-final p:not(.section-kicker) {
	max-width: 650px;
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.7);
}

.business-page-final__actions {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 10px;
	min-width: 220px;
}

.button--secondary-light {
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.button--secondary-light:hover {
	background: #fff;
	color: var(--nova-ink);
}

@media (min-width: 768px) {
	.business-page-local__inner {
		grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
		align-items: center;
	}
}

@media (max-width: 991.98px) {

	.business-page-final__panel {
		align-items: stretch;
		flex-direction: column;
	}

	.business-page-final__actions {
		width: 100%;
		min-width: 0;
	}

	.business-page-final__actions .button {
		width: 100%;
	}
}

@media (max-width: 575.98px) {
	.business-page-hero,
	.business-page-services,
	.business-page-support,
	.business-page-why,
	.business-page-local,
	.business-page-final {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.business-page-hero__actions .button {
		width: 100%;
	}

	.business-page-hero__proof {
		gap: 7px;
	}

	.business-page-hero__proof span {
		font-size: 12px;
	}

	.business-page-enquiry {
		padding: 22px;
		border-radius: 16px;
	}

	.business-page-service-card {
		min-height: 0;
		padding: 22px;
	}

	.business-page-support__panel,
	.business-page-why__content,
	.business-page-final__panel {
		padding: 24px;
		border-radius: 18px;
	}

	.business-page-why__points {
		grid-template-columns: 1fr;
	}

	.business-page-why__media,
	.business-page-why__media img {
		min-height: 300px;
	}

	.business-page-final {
		padding-top: 0;
	}
}

/* ==========================================================================
   EDITORIAL PAGE FOUNDATION — A122
   Web & Digital and About share Bootstrap container/grid and one section rhythm.
   Page modifiers only supply visual tokens/composition differences.
   ========================================================================== */

:root {
  --nova-editorial-section-space: clamp(4rem, 7vw, 7rem);
}

.page-hero,
.page-section {
  padding-top: var(--page-section-space, var(--nova-editorial-section-space));
  padding-bottom: var(--page-section-space, var(--nova-editorial-section-space));
}

.page-hero {
  padding-top: var(--page-hero-space-top, var(--page-section-space, var(--nova-editorial-section-space)));
}

@media (max-width: 575.98px) {
  .page-hero,
  .page-section {
    padding-top: var(--page-section-space-mobile, var(--page-section-space, var(--nova-editorial-section-space)));
    padding-bottom: var(--page-section-space-mobile, var(--page-section-space, var(--nova-editorial-section-space)));
  }

  .page-hero {
    padding-top: var(--page-hero-space-top-mobile, var(--page-section-space-mobile, var(--page-section-space, var(--nova-editorial-section-space))));
  }
}

/* Web & Digital landing page */
.digital-page{--page-section-space:clamp(4rem,7vw,7rem);--page-section-space-mobile:3.4rem;--component-accent:var(--digital-accent);background:#fff}.digital-hero{background:#f6f3ef}.digital-page h2{font-size:clamp(2.7rem,5vw,5.4rem);line-height:.95;letter-spacing:-.055em;max-width:780px}.digital-page h2 span{font-family:Georgia,serif;font-style:italic;font-weight:400;color:#c94f00}.digital-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.7rem 0}.digital-actions .btn,.digital-final-actions .btn{padding:.85rem 1.25rem;white-space:nowrap}.digital-proof{display:flex;gap:.5rem;flex-wrap:wrap}.digital-proof span,.digital-tags span{border:1px solid #d8d2cb;border-radius:999px;padding:.35rem .65rem;font-size:.72rem;font-weight:700}.digital-hero-media{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 20px 45px rgba(20,20,20,.12)}.digital-hero-media img{width:100%;display:block}.digital-heading{max-width:800px;margin-bottom:2.5rem}.digital-heading h2{font-size:clamp(2.2rem,4vw,4rem)}.digital-heading>p:last-child{max-width:690px}.digital-service-card{background:#f6f3ef;border:1px solid #e5dfd8;border-radius:14px;padding:1.7rem;min-height:180px}.digital-service-card>span,.digital-process article>span{color:#c94f00;font-size:.72rem;font-weight:800}.digital-service-card h3{font-size:1.15rem;margin:1.1rem 0 .4rem}.digital-service-card p{margin:0;color:#555}.digital-ux{background:#f6f3ef}.digital-dark{background:#171717;color:#fff;border-radius:20px;padding:clamp(2rem,5vw,4.5rem);display:grid;grid-template-columns:1.4fr .8fr;gap:4rem}.digital-dark h2{font-size:clamp(2.3rem,4vw,4.3rem)}.digital-dark ul{list-style:none;padding:0;margin:1.5rem 0 0}.digital-dark li{margin:.6rem 0}.digital-dark li:before{content:"✓";color:#ff6e2c;margin-right:.6rem}.digital-ux-note{background:#2a2a2a;border-radius:14px;padding:2rem;align-self:center}.digital-ux-note strong{display:block;font-size:3.2rem;line-height:1;color:#ff6e2c}.digital-ux-note span{display:block;font-weight:700;margin:.6rem 0 1.5rem}.digital-price-card{border:1px solid #ddd5cd;border-radius:14px;padding:2rem;display:flex;flex-direction:column;gap:.8rem}.digital-price-card>p{font-size:.72rem;font-weight:800;color:#c94f00;margin:0}.digital-price-card h3{font-size:1.45rem}.digital-price-card strong{font-size:2.4rem}.digital-price-card--featured{background:#171717;color:#fff;border-color:#171717}.digital-pricing-note{font-size:.82rem;color:#666;margin-top:1rem}.digital-work{background:#f6f3ef}.digital-project{display:grid;grid-template-columns:1.2fr .8fr;gap:3.5rem;align-items:center;padding:2rem 0 4rem}.digital-project--reverse figure{order:2}.digital-project figure{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 16px 35px rgba(20,20,20,.1)}.digital-project img{width:100%;display:block}.digital-project h3{font-size:2.2rem}.digital-tags{display:flex;gap:.45rem;flex-wrap:wrap;margin:1.2rem 0}.digital-process article{padding:1.7rem;border-top:3px solid #c94f00;background:#f8f6f3;min-height:170px}.digital-process h3{font-size:1.15rem;margin:1rem 0 .4rem}.digital-final{padding-top:2rem}.digital-final-panel{background:#171717;color:#fff;border-radius:18px;padding:clamp(2rem,5vw,4rem);display:flex;justify-content:space-between;gap:3rem;align-items:center}.digital-final-panel h2{font-size:clamp(2.2rem,4vw,4rem);max-width:650px}.digital-final-actions{display:flex;flex-direction:column;gap:.7rem;min-width:220px}
@media(max-width:991.98px){.digital-dark{grid-template-columns:1fr;gap:2rem}.digital-project{grid-template-columns:1fr;gap:1.5rem}.digital-project--reverse figure{order:0}.digital-final-panel{align-items:flex-start;flex-direction:column}.digital-final-actions{width:100%}.digital-final-actions .btn{width:100%}}
@media(max-width:575.98px){.digital-actions{flex-direction:column}.digital-actions .btn{width:100%}.digital-project{padding-bottom:3rem}.digital-dark{border-radius:14px;padding:1.5rem}.digital-ux-note{padding:1.4rem}}

/* Nova Digital A71: detailed packages, care and single featured project */
.digital-price-card ul{list-style:none;padding:1rem 0 0;margin:auto 0 0;border-top:1px solid #e7e0d9}.digital-price-card li{position:relative;padding:.34rem 0 .34rem 1.25rem;font-size:.88rem}.digital-price-card li:before{content:"✓";position:absolute;left:0;color:#c94f00;font-weight:800}.digital-price-card--featured ul{border-color:#383838}.digital-price-card--featured li:before{color:#ff6e2c}.digital-inclusions{margin-top:2rem;display:grid;grid-template-columns:1.45fr .65fr;gap:1rem}.digital-inclusions-main{background:#f6f3ef;border:1px solid #e5dfd8;border-radius:16px;padding:clamp(1.5rem,3vw,2.5rem)}.digital-inclusions-main>h3{font-size:clamp(1.5rem,2.4vw,2.2rem);max-width:620px;margin:.35rem 0 1.5rem}.digital-inclusion-columns{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.digital-inclusion-columns h4{font-size:1rem;margin-bottom:.8rem}.digital-inclusion-columns ul{list-style:none;padding:0;margin:0}.digital-inclusion-columns li{position:relative;padding:.28rem 0 .28rem 1.2rem;font-size:.88rem;color:#555}.digital-inclusion-columns li:before{content:"•";position:absolute;left:.15rem;color:#c94f00;font-weight:900}.digital-hosting-note{background:#171717;color:#fff;border-radius:16px;padding:clamp(1.5rem,3vw,2.4rem);display:flex;flex-direction:column;justify-content:center}.digital-hosting-note>span,.digital-care-options article>span{font-size:.7rem;font-weight:800;letter-spacing:.08em;color:#ff6e2c}.digital-hosting-note h3{font-size:1.55rem;margin:.65rem 0}.digital-hosting-note p{color:#d8d8d8;margin:0}.digital-care{padding:0 0 clamp(4rem,7vw,7rem)}.digital-care-panel{background:#f6f3ef;border-radius:20px;padding:clamp(2rem,5vw,4rem);display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center}.digital-care-copy h2{font-size:clamp(2.2rem,4vw,4rem)}.digital-care-options{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.digital-care-options article{background:#fff;border:1px solid #e5dfd8;border-radius:14px;padding:1.6rem}.digital-care-options strong{display:block;font-size:1.6rem;margin:.55rem 0}.digital-care-options p{font-size:.88rem;color:#555;margin:0}.digital-project--featured-work{grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);padding-top:.5rem}.digital-project--featured-work figure{border-radius:20px}.digital-project--featured-work h3{font-size:clamp(2.2rem,4vw,3.6rem)}.digital-portfolio-link{display:inline-flex;margin-top:.35rem}.digital-work .digital-heading>p:last-child{max-width:720px}
@media(max-width:991.98px){.digital-inclusions,.digital-care-panel{grid-template-columns:1fr}.digital-project--featured-work{grid-template-columns:1fr}.digital-care-options{grid-template-columns:1fr 1fr}}
@media(max-width:575.98px){.digital-inclusion-columns,.digital-care-options{grid-template-columns:1fr}.digital-inclusion-columns{gap:1.4rem}.digital-care{padding-bottom:3.4rem}.digital-care-panel{border-radius:14px;padding:1.5rem}.digital-project--featured-work h3{font-size:2.3rem}}

/* Nova Digital A72: enterprise-value story, £99 entry offer and membership */
.digital-entry-offer{margin-bottom:1.25rem;background:#ff6e2c;color:#171717;border-radius:18px;padding:clamp(1.6rem,3vw,2.6rem);display:flex;align-items:center;justify-content:space-between;gap:2rem}.digital-entry-offer h3{font-size:clamp(1.8rem,3vw,3rem);margin:.25rem 0 .55rem}.digital-entry-offer p{max-width:690px;margin:0}.digital-entry-price{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:flex-end}.digital-entry-price>span{font-size:.7rem;font-weight:800}.digital-entry-price>strong{font-size:clamp(3rem,6vw,5.5rem);line-height:.85;letter-spacing:-.06em}.digital-entry-price .button{background:#171717;border-color:#171717;color:#fff}.digital-value-note{margin-top:1.4rem;border-left:4px solid #c94f00;padding:1rem 1.25rem;background:#f6f3ef}.digital-value-note strong{display:block;font-size:1.05rem;margin-bottom:.25rem}.digital-value-note p{margin:0;color:#555;max-width:850px}.digital-membership{padding:0 0 clamp(4rem,7vw,7rem)}.digital-membership-panel{display:grid;grid-template-columns:1.05fr .7fr .55fr;gap:1rem;background:#171717;color:#fff;border-radius:20px;padding:clamp(2rem,4vw,3.5rem);align-items:stretch}.digital-membership-copy{padding-right:1.5rem}.digital-membership-copy h2{font-size:clamp(2.2rem,4vw,4rem)}.digital-membership-copy p{color:#d9d9d9;max-width:620px}.digital-membership-small{font-size:.82rem}.digital-membership-card,.digital-support-card{background:#fff;color:#171717;border-radius:15px;padding:1.6rem;display:flex;flex-direction:column}.digital-membership-card>span,.digital-support-card>span{font-size:.7rem;font-weight:800;letter-spacing:.08em;color:#c94f00}.digital-membership-card>strong,.digital-support-card>strong{font-size:2rem;margin:.55rem 0}.digital-membership-card>strong span{font-size:.9rem;letter-spacing:0}.digital-membership-card>p{font-size:.8rem;color:#666;margin-top:-.35rem}.digital-membership-card ul{list-style:none;padding:1rem 0 0;margin:0;border-top:1px solid #e5dfd8}.digital-membership-card li{position:relative;padding:.3rem 0 .3rem 1.2rem;font-size:.86rem}.digital-membership-card li:before{content:"✓";position:absolute;left:0;color:#c94f00;font-weight:800}.digital-membership-card small{display:block;margin-top:auto;padding-top:1rem;color:#666;line-height:1.45}.digital-support-card{background:#2a2a2a;color:#fff}.digital-support-card p{color:#d9d9d9;margin:0}.digital-support-card>span{color:#ff6e2c}.digital-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.digital-process-grid article{padding:1.5rem;border-top:3px solid #c94f00;background:#f8f6f3;min-height:190px}.digital-process-grid article>span{color:#c94f00;font-size:.72rem;font-weight:800}.digital-process-grid h3{font-size:1.15rem;margin:1rem 0 .45rem}.digital-process-grid p{margin:0;color:#555;font-size:.9rem}
@media(max-width:991.98px){.digital-membership-panel{grid-template-columns:1fr 1fr}.digital-membership-copy{grid-column:1/-1;padding-right:0}.digital-process-grid{grid-template-columns:repeat(2,1fr)}.digital-package-grid>.col-xl-3{width:50%}}
@media(max-width:575.98px){.digital-entry-offer{align-items:flex-start;flex-direction:column}.digital-entry-price{justify-content:flex-start}.digital-membership-panel{grid-template-columns:1fr;border-radius:14px;padding:1.5rem}.digital-membership-copy{grid-column:auto}.digital-process-grid{grid-template-columns:1fr}.digital-package-grid>.col-xl-3{width:100%}}

.digital-page{--digital-accent:#3C68B0}

.digital-experience{
  margin: 1rem 0 0;
  max-width: 660px;
  font-size: .92rem;
}

.digital-page .digital-heading{max-width:980px}
.digital-page .digital-heading>p:last-child{max-width:820px}

.digital-entry-offer .section-kicker,.digital-entry-offer p,.digital-entry-price>span{color:#fff}
.digital-entry-price .button{background:#fff;border-color:#fff;color:#171717}
.digital-entry-price .button:hover,.digital-entry-price .button:focus{background:#f5f5f5;border-color:#f5f5f5;color:#171717}
.digital-process-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(2rem,5vw,5rem);align-items:center;margin-bottom:2.2rem}
.digital-process-photo{margin:0;border-radius:18px;overflow:hidden;min-height:260px;box-shadow:0 16px 35px rgba(20,20,20,.10)}
.digital-process-photo img{width:100%;height:100%;min-height:260px;object-fit:cover;display:block}
.digital-process-grid article>span{color:var(--digital-accent)}
.digital-process-grid article{border-top-color:var(--digital-accent)}
.digital-service-card h3,.digital-price-card h3,.digital-process-grid h3{max-width:none}
.digital-service-card p,.digital-price-card span,.digital-process-grid p{max-width:none}
.site-logo--digital{
  gap: .65rem;
  min-width: max-content;
  text-decoration: none;
}
.site-logo--digital img{width:112px}
.site-logo__digital-word{font-size:.68rem;line-height:1;font-weight:800;letter-spacing:.22em;color:#fff;border-left:1px solid rgba(255,255,255,.35);padding-left:.72rem;white-space:nowrap}
@media(min-width:1200px){.digital-service-card{padding:2rem 2.1rem}.digital-process-grid article{padding:1.7rem 1.8rem}.digital-price-card{padding:2rem 1.8rem}}
@media(max-width:991.98px){.digital-process-intro{grid-template-columns:1fr}.digital-process-photo{max-height:380px}.site-logo__digital-word{display:none}}
@media(max-width:575.98px){.digital-experience{font-size:.86rem}.digital-process-photo,.digital-process-photo img{min-height:210px}}

.digital-page {
  --digital-accent: #903600;
  --digital-accent-soft: #FFE3DE;
  --digital-accent-mid: #FFAD9B;
}

/* Hero eyebrow now follows the same typography/rhythm as the other service pages. */
.digital-hero-kicker {
  margin-bottom: 16px;
  color: var(--digital-accent);
}

/* Make the 25+ years proof visible without competing with the main CTA. */
.digital-experience {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  margin: 1.25rem 0 0;
  padding: 12px 16px;
  background: var(--digital-accent-soft);
  color: #4f4f4f;
}
.digital-experience__number {
  flex: 0 0 auto;
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
}
.digital-experience p { margin: 0; font-size: .92rem; line-height: 1.45; }
.digital-experience strong { color: #171717; }

/* Web & Digital uses its assigned category colour; global interactive CTA orange is untouched. */
.digital-page h2 span,
.digital-process article > span,
.digital-price-card > p,
.digital-process-grid article > span,
.digital-membership-card > span,
.digital-membership-card li::before,
.digital-price-card li::before,
.digital-inclusion-columns li::before {
  color: var(--digital-accent);
}
.digital-process article,
.digital-process-grid article { border-top-color: var(--digital-accent); }
.digital-value-note { border-left-color: var(--digital-accent); }
.digital-entry-offer { background: var(--digital-accent); color: #fff; }
.digital-entry-offer .section-kicker,
.digital-entry-offer p,
.digital-entry-price > span { color: #fff; }
.digital-dark li::before,
.digital-ux-note strong,
.digital-support-card > span { color: var(--digital-accent-mid); }

/* Exact supplied Nova Digital logo on the Web & Digital page. */
.site-logo--digital {
  display: flex;
  align-items: center;
  width: auto;
  min-width: 0;
}
.site-logo--digital img {
  width: clamp(138px, 16vw, 178px);
  max-height: 58px;
  object-fit: contain;
}

@media (max-width: 575.98px) {
  .digital-experience { width: 100%; align-items: flex-start; }
  .digital-experience__number { font-size: 1.85rem; }
  .site-logo--digital img { width: 132px; max-height: 48px; }
}

.digital-experience {
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(20, 20, 20, 0.06);
  padding: 14px 18px;
}
.digital-experience__number {
  color: var(--digital-accent);
  font-size: clamp(1.95rem, 3.2vw, 2.65rem);
}
.site-logo--digital img {
  width: clamp(170px, 19vw, 228px);
  max-height: 72px;
}
@media (max-width: 575.98px) {
  .digital-experience {
    padding: 14px 16px;
  }
  .site-logo--digital img {
    width: 154px;
    max-height: 56px;
  }
}

.portfolio-page {
  --portfolio-accent: #903600;
  --portfolio-ink: #171717;
  --portfolio-paper: #f6f3ef;
  background: #fff;
}
.portfolio-hero { background: var(--portfolio-paper); }
.portfolio-kicker { color: var(--portfolio-accent); margin-bottom: 16px; }
.portfolio-page h2 span { color: var(--portfolio-accent); font-family: Georgia, serif; font-style: italic; font-weight: 400; }
.portfolio-proof { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.7rem; }
.portfolio-proof span, .portfolio-deliverables span { border: 1px solid #d8d2cb; border-radius: 999px; padding: .42rem .72rem; font-size: .72rem; font-weight: 700; background: #fff; }

.portfolio-feature { padding: clamp(4.5rem, 8vw, 8rem) 0; }
.portfolio-feature--ltm { background: var(--portfolio-paper); }
.portfolio-project-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr);
  gap: clamp(2rem, 5vw, 6rem);
  margin-bottom: 2rem;
}

.portfolio-project-heading h2 { margin: .25rem 0 0; font-size: clamp(2.8rem, 5vw, 5.6rem); line-height: .94; letter-spacing: -.055em; }
.portfolio-project-summary { margin: 0 0 .3rem; max-width: 520px; font-size: 1.04rem; line-height: 1.6; color: #55514c; }
.portfolio-browser { overflow: hidden; margin: 0; border-radius: 18px; background: #fff; border: 1px solid #ddd6ce; box-shadow: 0 22px 50px rgba(20,20,20,.11); }
.portfolio-browser__bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 13px; background: #eee9e3; border-bottom: 1px solid #ded8d1; }
.portfolio-browser__bar span { width: 8px; height: 8px; border-radius: 50%; background: #bcb4ab; }
.portfolio-browser img { width: 100%; height: auto; display: block; }
.portfolio-browser--large { margin-bottom: clamp(2.8rem, 5vw, 5rem); }
.portfolio-case-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.portfolio-case-label { color: var(--portfolio-accent); font-size: .72rem; font-weight: 800; letter-spacing: .09em; }
.portfolio-case-intro h3, .portfolio-ltm-copy h3 { margin: .7rem 0 1rem; max-width: 580px; font-size: clamp(1.8rem, 3vw, 3.1rem); line-height: 1.03; letter-spacing: -.04em; }
.portfolio-case-intro > p:last-child, .portfolio-ltm-copy > p { color: #55514c; line-height: 1.65; }
.portfolio-case-points { border-top: 1px solid #ddd6ce; }
.portfolio-case-points article { display: grid; grid-template-columns: 42px 1fr; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid #ddd6ce; }
.portfolio-case-points article > span { color: var(--portfolio-accent); font-size: .72rem; font-weight: 800; }
.portfolio-case-points strong { display: block; margin-bottom: .25rem; font-size: 1rem; }
.portfolio-case-points p { margin: 0; color: #65605a; line-height: 1.55; }
.portfolio-deliverables { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 2rem; }
.portfolio-feature--jit .portfolio-deliverables { justify-content: flex-end; }

.portfolio-ltm-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.portfolio-ltm-copy ul { list-style: none; padding: 0; margin: 1.5rem 0 0; border-top: 1px solid #d9d2cb; }
.portfolio-ltm-copy li { position: relative; padding: .7rem 0 .7rem 1.35rem; border-bottom: 1px solid #d9d2cb; font-size: .9rem; }
.portfolio-ltm-copy li::before { content: "✓"; position: absolute; left: 0; color: var(--portfolio-accent); font-weight: 800; }
.portfolio-feature--ltm .portfolio-deliverables span { background: #fff; }

.portfolio-thinking { padding: clamp(4.5rem, 8vw, 8rem) 0; background: #171717; color: #fff; }
.portfolio-thinking__intro { max-width: 820px; }
.portfolio-thinking__intro .section-kicker { color: #ffad9b; }
.portfolio-thinking__intro h2 { margin: .45rem 0 1rem; font-size: clamp(2.5rem, 4.7vw, 5rem); line-height: .96; letter-spacing: -.055em; }
.portfolio-thinking__intro h2 span { color: #ffad9b; }
.portfolio-thinking__intro > p:last-child { max-width: 680px; color: rgba(255,255,255,.72); line-height: 1.65; }
.portfolio-thinking__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 3rem; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.15); }
.portfolio-thinking__steps article { min-height: 190px; padding: 1.5rem; background: #171717; }
.portfolio-thinking__steps span { display: block; margin-bottom: 2rem; color: #ffad9b; font-size: .72rem; font-weight: 800; }
.portfolio-thinking__steps strong { display: block; font-size: 1.15rem; }
.portfolio-thinking__steps p { margin: .45rem 0 0; color: rgba(255,255,255,.62); font-size: .88rem; line-height: 1.55; }
.portfolio-process-link { display: inline-flex; gap: .6rem; align-items: center; margin-top: 2rem; color: #fff; text-decoration: none; font-weight: 700; }
.portfolio-process-link:hover { color: #ffad9b; }

.portfolio-final { padding: clamp(4rem, 7vw, 7rem) 0; }
.portfolio-final__panel { display: flex; align-items: center; justify-content: space-between; gap: 3rem; padding: clamp(2rem, 5vw, 4rem); border-radius: 20px; background: #903600; color: #fff; }
.portfolio-final__panel .section-kicker { color: #fff; }
.portfolio-final__panel h2 { margin: .4rem 0 .7rem; max-width: 720px; font-size: clamp(2.3rem, 4.2vw, 4.4rem); line-height: .96; letter-spacing: -.05em; }
.portfolio-final__panel h2 span { color: #fff; }
.portfolio-final__panel p { margin: 0; max-width: 620px; color: rgba(255,255,255,.8); }
.portfolio-final__actions { display: flex; flex-direction: column; min-width: 230px; gap: .7rem; }
.portfolio-final__actions .button--primary { background: #fff; color: #171717; border-color: #fff; }

@media (max-width: 991.98px) {
  .portfolio-project-heading, .portfolio-case-grid, .portfolio-ltm-layout { grid-template-columns: 1fr; }
  .portfolio-project-heading { gap: 1rem; }
  .portfolio-feature--jit .portfolio-deliverables { justify-content: flex-start; }
  .portfolio-thinking__steps { grid-template-columns: repeat(2, 1fr); }
  .portfolio-final__panel { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 575.98px) {
  .portfolio-feature { padding: 3.7rem 0; }
  .portfolio-project-heading h2 { font-size: 2.9rem; }
  .portfolio-browser { border-radius: 12px; }
  .portfolio-thinking { padding: 3.7rem 0; }
  .portfolio-thinking__steps { grid-template-columns: 1fr; }
  .portfolio-thinking__steps article { min-height: 0; }
  .portfolio-final { padding: 3.3rem 0; }
  .portfolio-final__panel { border-radius: 14px; padding: 1.6rem; }
  .portfolio-final__actions { width: 100%; min-width: 0; }
  .portfolio-final__actions .button { width: 100%; }
}

.digital-experience {
  display: block;
  width: 100%;
  max-width: 690px;
  padding: 14px 18px 16px;
  background: #fff;
  border: 1px solid #eadfd5;
  border-left: 4px solid var(--digital-accent);
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(20,20,20,.06);
}
.digital-experience__label {
  margin: 0 0 10px !important;
  color: #74706c !important;
  font-size: .72rem !important;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
}
.digital-experience__main { display: flex; align-items: center; gap: 18px; }
.digital-experience__main p { margin: 0; }
.digital-experience__number { min-width: max-content; }
.digital-ux-side { display: grid; gap: 1rem; align-self: center; }
.digital-five-star {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 1.2rem 1.35rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
}
.digital-five-star__stars { color: #ffad9b; letter-spacing: .08em; font-size: 1rem; white-space: nowrap; }
.digital-five-star strong { display: block; color: #fff; font-size: .95rem; }
.digital-five-star p { margin: .18rem 0 0; color: rgba(255,255,255,.68); font-size: .8rem; line-height: 1.45; }

.site-footer__brand-lockup { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; max-width: none; }
.site-footer__brand-lockup > span { width: 1px; height: 30px; background: rgba(255,255,255,.18); flex: 0 0 auto; }
.site-footer__brand-lockup a { display: flex; flex: 0 0 auto; align-items: center; min-width: 0; }
.site-footer__brand-logo { display: block; width: auto; height: auto; filter: none; }
.site-footer__brand-logo--equipment { max-width: 112px; }
.site-footer__brand-logo--digital { max-width: 120px; }

@media (max-width: 575.98px) {
  .site-footer__brand-lockup { gap: 8px; }
  .site-footer__brand-lockup > span { height: 24px; }
  .site-footer__brand-logo--equipment { max-width: 86px; }
  .site-footer__brand-logo--digital { max-width: 92px; }
}

.portfolio-hero__visual { position: relative; min-height: clamp(390px,38vw,540px); }
.portfolio-hero-shot { position: absolute; margin: 0; overflow: hidden; border-radius: 16px; border: 1px solid #ded7cf; box-shadow: 0 24px 55px rgba(20,20,20,.14); background: #fff; }
.portfolio-hero-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.portfolio-hero-shot--jit {
  width: 78%;
  height: 70%;
  top: 0;
  right: 0;
  z-index: 1;
}
.portfolio-hero-shot--ltm {
  width: 58%;
  height: 48%;
  left: 0;
  bottom: 0;
  z-index: 2;
  border: 7px solid #fff;
}

.portfolio-project-heading { align-items: start; margin-bottom: clamp(2rem,4vw,3.4rem); }
.portfolio-project-heading__side { max-width: 520px; }
.portfolio-site-link {
  gap: .45rem;
  margin-top: 1rem;
  color: var(--portfolio-accent);
  font-weight: 800;
  text-decoration: none;
}
.portfolio-site-link:hover { text-decoration: underline; }
.portfolio-case-layout { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr); gap: clamp(2.5rem,6vw,6.5rem); align-items: start; }
.portfolio-case-layout--ltm { grid-template-columns: minmax(300px,.66fr) minmax(0,1.34fr); }
.portfolio-browser--case { position: sticky; top: 110px; max-width: 560px; }
.portfolio-browser--case img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.portfolio-case-content { min-width: 0; }
.portfolio-rationale { max-width: 720px; margin-bottom: 2rem; }
.portfolio-rationale h3 { margin: .65rem 0 1rem; max-width: 680px; font-size: clamp(2rem,3.2vw,3.45rem); line-height: 1; letter-spacing: -.045em; }
.portfolio-rationale p { color: #55514c; line-height: 1.68; }
.portfolio-case-content .portfolio-deliverables { justify-content: flex-start; }

@media (max-width: 991.98px) {
  .portfolio-case-layout, .portfolio-case-layout--ltm { grid-template-columns: 1fr; }
  .portfolio-hero__visual { min-height: 430px; max-width: 650px; width: 100%; }
  .portfolio-browser--case { position: static; max-width: 100%; }
  .portfolio-browser--case img { aspect-ratio: 16 / 10; }
  .site-footer__brand-lockup { max-width: 300px; }
}
@media (max-width: 575.98px) {
  .digital-experience__main { align-items: flex-start; gap: 13px; }
  .digital-five-star { align-items: flex-start; flex-direction: column; }
  .portfolio-hero__visual { min-height: 315px; }
  .portfolio-hero-shot--jit { width: 88%; height: 72%; }
  .portfolio-hero-shot--ltm { width: 66%; height: 50%; }
  .portfolio-browser--case img { aspect-ratio: 4 / 3; }
  .site-footer__brand-lockup { align-items: flex-start; flex-direction: column; gap: 10px; }
  .site-footer__brand-lockup > span { width: 72px; height: 1px; }
  .site-footer__brand-logo--equipment, .site-footer__brand-logo--digital { max-width: 155px; }
}

/* The supplied Equipment and Digital SVGs share the same 409.81 × 126.48 viewBox.
   Give both the exact same rendered box so switching service pages never shifts the brand. */
.site-logo,
.site-logo--digital {
  display: flex;
  align-items: center;
  width: 202px;
  height: 62px;
  flex: 0 0 202px;
}
.site-logo img,
.site-logo--digital img {
  display: block;
  width: 202px;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: left center;
}
.site-footer__brand-lockup a {
  width: 146px;
  height: 45px;
  flex: 0 0 146px;
}
.site-footer__brand-logo,
.site-footer__brand-logo--equipment,
.site-footer__brand-logo--digital {
  display: block;
  width: 146px;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: left center;
}
.site-footer__brand-lockup {
  max-width: none;
}

/* Match the 25+ proof card to the Home 'Call Nova' card anatomy:
   one neutral rounded card + one inset rounded accent rule. */
.digital-experience {
  position: relative;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 0 0 1px rgba(23,23,23,.08), 0 14px 30px rgba(20,20,20,.06);
  padding: 14px 18px 15px 22px;
  overflow: visible;
}
.digital-experience::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: var(--digital-accent);
}
.digital-experience__label {
  margin: 0 0 6px;
}

/* Pull the project summary into the same heading composition instead of leaving it floating. */
.portfolio-project-heading {
  grid-template-columns: minmax(0,1.05fr) minmax(320px,.62fr);
  align-items: end;
  gap: clamp(2rem,4vw,4.5rem);
  padding-bottom: clamp(1.5rem,2.5vw,2.2rem);
  border-bottom: 1px solid #e5ded6;
}
.portfolio-project-heading__side {
  position: relative;
  max-width: 560px;
  padding: .15rem 0 .25rem 1.5rem;
  border-left: 3px solid var(--portfolio-accent);
}
.portfolio-project-summary {
  font-size: 1rem;
  line-height: 1.55;
}
.portfolio-site-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .8rem;
}

/* Love to Muse backend / CMS rationale */
.portfolio-cms-story {
  margin-top: clamp(3rem,6vw,6rem);
  padding-top: clamp(2.5rem,4vw,4rem);
  border-top: 1px solid #e5ded6;
  display: grid;
  grid-template-columns: minmax(320px,.72fr) minmax(0,1.28fr);
  gap: clamp(2rem,5vw,5.5rem);
  align-items: center;
}
.portfolio-cms-story__copy h3 {
  margin: .45rem 0 1rem;
  max-width: 15ch;
  font-size: clamp(2rem,3.8vw,4rem);
  line-height: .98;
  letter-spacing: -.045em;
}
.portfolio-cms-story__copy > p:not(.portfolio-case-label) {
  max-width: 650px;
  color: #55514c;
  line-height: 1.65;
}
.portfolio-cms-story__copy ul {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}
.portfolio-cms-story__copy li {
  position: relative;
  padding-left: 1.2rem;
  color: #403d39;
  line-height: 1.5;
}
.portfolio-cms-story__copy li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--portfolio-accent);
  font-weight: 800;
}

.portfolio-cms-story__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #ddd6ce;
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(20,20,20,.11);
}
.portfolio-cms-story__media figcaption {
  margin-top: .75rem;
  color: #77716b;
  font-size: .78rem;
  line-height: 1.45;
}

@media (max-width: 991.98px) {
  .site-logo,
  .site-logo--digital {
    width: 176px;
    height: 54px;
    flex-basis: 176px;
  }
  .site-logo img,
  .site-logo--digital img { width: 176px; }
  .portfolio-project-heading,
  .portfolio-cms-story { grid-template-columns: 1fr; }
  .portfolio-project-heading__side { max-width: 680px; }
  .portfolio-cms-story__copy h3 { max-width: 18ch; }
}

@media (max-width: 575.98px) {
  .site-logo,
  .site-logo--digital {
    width: 150px;
    height: 46px;
    flex-basis: 150px;
  }
  .site-logo img,
  .site-logo--digital img { width: 150px; }
  .digital-experience { padding: 14px 16px 14px 20px; }
  .portfolio-project-heading__side { padding-left: 1rem; }
  .portfolio-cms-story { margin-top: 3rem; padding-top: 2.4rem; }
  .site-footer__brand-lockup a,
  .site-footer__brand-logo,
  .site-footer__brand-logo--equipment,
  .site-footer__brand-logo--digital {
    width: 150px;
  }
  .site-footer__brand-lockup a { height: 46px; flex-basis: 150px; }
}

.portfolio-device-pair {
  position: relative;
  padding: 0 15% 3.25rem 0;
}
.portfolio-device-pair .portfolio-browser {
  margin: 0;
}
.portfolio-phone {
  position: absolute;
  z-index: 3;
  width: clamp(118px, 24%, 190px);
  margin: 0;
  border: 7px solid #171717;
  border-radius: 24px;
  background: #171717;
  box-shadow: 0 20px 46px rgba(20,20,20,.2);
}
.portfolio-phone img {
  display: block;
  width: 100%;
  height: auto;
}
.portfolio-device-pair--ltm .portfolio-phone {
  border-color: #2d292b;
}
.portfolio-case-points article strong {
  display: block;
  margin-bottom: .2rem;
}

.portfolio-cms-story__media-stack {
  position: relative;
  display: grid;
  gap: 1rem;
  padding-bottom: 2.25rem;
}
.portfolio-cms-story__media--editor {
  width: 74%;
  margin-left: auto;
  margin-top: -5%;
  position: relative;
}
.portfolio-cms-story__media--dashboard img,
.portfolio-cms-story__media--editor img {
  background: #fff;
}
.portfolio-feature--ltm {
  background: #f8f5f1;
}
.portfolio-feature--jit {
  background: #fff;
}

/* Keep the current case studies open and editorial. This structure is intentionally
   compatible with a future compact archive: newest work remains expanded while older
   projects can be represented as filterable summary cards without changing these blocks. */
.portfolio-project-heading .section-kicker {
  color: var(--portfolio-accent);
}

@media (max-width: 991.98px) {
  .portfolio-device-pair {
    max-width: 760px;
    padding-right: 18%;
  }
  .portfolio-cms-story__media--editor {
    width: 82%;
  }
}

@media (max-width: 575.98px) {
  .portfolio-device-pair {
    padding: 0 13% 2.5rem 0;
  }
  .portfolio-phone {
    width: 31%;
    border-width: 5px;
    border-radius: 18px;
  }
  .portfolio-cms-story__media-stack {
    padding-bottom: 0;
  }
  .portfolio-cms-story__media--editor {
    width: 100%;
    margin-top: 0;
  }
}

/* Give the visual enough presence to remain useful while the rationale scrolls. */
.portfolio-case-layout,
.portfolio-case-layout--ltm {
  grid-template-columns: minmax(380px, .92fr) minmax(0, 1.08fr);
  gap: clamp(3rem, 6vw, 7rem);
}

/* The entire desktop/mobile composition is sticky, not just a tiny screenshot. */
.portfolio-device-pair {
  position: sticky;
  top: 108px;
  align-self: start;
  min-width: 0;
  max-width: 620px;
  padding: 0 11% 2.75rem 0;
}

.portfolio-device-pair .portfolio-browser {
  position: static;
  max-width: none;
  width: 100%;
}

/* Keep screenshots clean: no heavy fake-device frame. */
.portfolio-phone {
  right: 0;
  bottom: 0;
  width: clamp(125px, 26%, 185px);
  border: 0;
  border-radius: 14px;
  background: transparent;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(20,20,20,.18);
}
.portfolio-phone img {
  border-radius: 14px;
}

/* The CMS story is a second scroll chapter:
   copy moves while the real client screens remain in view. */
.portfolio-cms-story {
  grid-template-columns: minmax(320px, .82fr) minmax(460px, 1.18fr);
  gap: clamp(3rem, 6vw, 7rem);
}
.portfolio-cms-story__media-stack {
  top: 108px;
  align-self: start;
  padding-bottom: 1rem;
}
.portfolio-cms-story__media--dashboard,
.portfolio-cms-story__media--editor {
  width: 100%;
  margin: 0;
}
.portfolio-cms-story__media--editor {
  margin-top: 1rem;
}
.portfolio-cms-story__media img {
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(20,20,20,.11);
}

/* Keep the project header and case-study body visually connected. */
.portfolio-project-heading {
  margin-bottom: clamp(2.4rem, 4vw, 4rem);
}
.portfolio-case-content {
  padding-top: .15rem;
}

/* Future scaling model:
   latest/featured case studies stay expanded above;
   older projects can be rendered into this compact archive without lengthening
   the editorial scroll indefinitely. Hidden until real archive items exist. */
.portfolio-more-work[hidden] {
  display: none !important;
}

@media (max-width: 991.98px) {
  .portfolio-case-layout,
  .portfolio-case-layout--ltm,
  .portfolio-cms-story {
    grid-template-columns: 1fr;
  }
  .portfolio-device-pair,
  .portfolio-cms-story__media-stack {
    position: static;
    max-width: 760px;
  }
  .portfolio-device-pair {
    padding-right: 14%;
  }
  .portfolio-cms-story__media-stack {
    max-width: 820px;
  }
}

@media (max-width: 575.98px) {
  .portfolio-device-pair {
    padding: 0 12% 2.15rem 0;
  }
  .portfolio-phone {
    width: 30%;
    border-radius: 11px;
  }
  .portfolio-phone img {
    border-radius: 11px;
  }
}

/* Hero collage: larger, calmer, less "floating-card" shadow. */
.portfolio-hero__visual {
  min-height: clamp(290px, 31vw, 440px);
}
.portfolio-hero-shot {
  box-shadow: 0 12px 28px rgba(20,20,20,.08);
}
.portfolio-hero-shot--jit {
  width: 86%;
  height: 78%;
  top: 1%;
  right: 0;
}
.portfolio-hero-shot--ltm {
  width: 68%;
  height: 57%;
  left: 1%;
  bottom: 0;
  border-width: 5px;
}

/* Featured case studies: use more of the available horizontal space. */
.portfolio-case-layout,
.portfolio-case-layout--ltm {
  grid-template-columns: minmax(430px, 1fr) minmax(0, 1fr);
  gap: clamp(3.2rem, 5.5vw, 6.5rem);
}
.portfolio-device-pair {
  padding-right: 9%;
}
.portfolio-browser,
.portfolio-browser--case {
  box-shadow: 0 12px 30px rgba(20,20,20,.075);
}
.portfolio-phone {
  width: clamp(138px, 27%, 205px);
  box-shadow: 0 11px 26px rgba(20,20,20,.10);
}

/* The CMS screenshots were technically sticky already in A81, but the stacked block
   was almost as tall as its parent, so there was little visible sticky travel.
   A82 turns them into one tighter sticky composition and gives the story enough
   scroll runway for the behaviour to be obvious. */
.portfolio-cms-story {
  min-height: 920px;
  grid-template-columns: minmax(360px,.78fr) minmax(520px,1.22fr);
  align-items: start;
}
.portfolio-cms-story__copy {
  padding-bottom: 8rem;
}
.portfolio-cms-story__media-stack {
  position: sticky;
  top: 104px;
  min-height: 620px;
  display: block;
  padding: 0;
}
.portfolio-cms-story__media {
  position: absolute;
  margin: 0;
}
.portfolio-cms-story__media--dashboard {
  width: 94%;
  top: 0;
  left: 0;
  z-index: 1;
}
.portfolio-cms-story__media--editor {
  width: 78%;
  right: 0;
  top: 48%;
  margin: 0;
  z-index: 2;
}
.portfolio-cms-story__media img {
  box-shadow: 0 11px 28px rgba(20,20,20,.075);
  border-radius: 9px;
}
.portfolio-cms-story__media figcaption {
  max-width: 90%;
}

/* More selected work: compact by design so the portfolio scales.
   Featured work above stays editorial and sticky; older/additional projects use cards. */
.portfolio-more-work {
  padding: clamp(4.5rem, 7vw, 7.5rem) 0;
  background: #f3eee8;
}
.portfolio-more-work__intro {
  max-width: 830px;
  margin-bottom: clamp(2.4rem,4vw,4rem);
}
.portfolio-more-work__intro h2 {
  margin: .4rem 0 1rem;
  font-size: clamp(2.4rem,4.6vw,4.8rem);
  line-height: .96;
  letter-spacing: -.05em;
}

.portfolio-more-work__intro > p:last-child {
  max-width: 700px;
  color: #5b5650;
  line-height: 1.6;
}
.portfolio-archive-card {
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr);
  gap: clamp(2.5rem,5vw,5.5rem);
  align-items: center;
  padding: clamp(1.4rem,2.6vw,2.4rem);
  border: 1px solid #dfd7cf;
  border-radius: 18px;
  background: rgba(255,255,255,.68);
}
.portfolio-archive-card__visual {
  position: relative;
  min-height: clamp(330px,36vw,520px);
}
.portfolio-archive-shot,
.portfolio-archive-phone {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ddd5cd;
  border-radius: 13px;
  box-shadow: 0 10px 24px rgba(20,20,20,.075);
}
.portfolio-archive-shot img,
.portfolio-archive-phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.portfolio-archive-shot--main {
  width: 77%;
  height: 69%;
  left: 0;
  top: 0;
}
.portfolio-archive-shot--service {
  width: 62%;
  height: 55%;
  right: 0;
  bottom: 0;
}
.portfolio-archive-phone {
  z-index: 3;
  width: 23%;
  height: 70%;
  left: 4%;
  bottom: -2%;
  border-radius: 16px;
}
.portfolio-archive-card__content h3 {
  margin: .45rem 0 1rem;
  max-width: 14ch;
  font-size: clamp(2rem,3.4vw,3.7rem);
  line-height: .98;
  letter-spacing: -.045em;
}
.portfolio-archive-card__content > p:not(.portfolio-case-label) {
  color: #55514c;
  line-height: 1.62;
}
.portfolio-archive-card__content ul {
  list-style: none;
  padding: 0;
  margin: 1.35rem 0;
  display: grid;
  gap: .65rem;
}
.portfolio-archive-card__content li {
  position: relative;
  padding-left: 1.15rem;
  line-height: 1.48;
  color: #403d39;
}
.portfolio-archive-card__content li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--portfolio-accent);
  font-weight: 800;
}

@media (max-width: 1199.98px) {
  .portfolio-cms-story {
    grid-template-columns: minmax(320px,.8fr) minmax(440px,1.2fr);
  }
}

@media (max-width: 991.98px) {
  .portfolio-hero__visual {
    min-height: 330px;
  }
  .portfolio-case-layout,
  .portfolio-case-layout--ltm,
  .portfolio-cms-story,
  .portfolio-archive-card {
    grid-template-columns: 1fr;
  }
  .portfolio-device-pair {
    max-width: 780px;
  }
  .portfolio-cms-story {
    min-height: auto;
  }
  .portfolio-cms-story__copy {
    padding-bottom: 0;
  }
  .portfolio-cms-story__media-stack {
    position: relative;
    top: auto;
    min-height: 640px;
    max-width: 820px;
  }
  .portfolio-archive-card__visual {
    max-width: 780px;
  }
}

@media (max-width: 575.98px) {
  .portfolio-hero__visual {
    min-height: 255px;
  }
  .portfolio-device-pair {
    padding-right: 10%;
  }
  .portfolio-cms-story__media-stack {
    min-height: 440px;
  }
  .portfolio-cms-story__media--dashboard {
    width: 100%;
  }
  .portfolio-cms-story__media--editor {
    width: 86%;
    top: 49%;
  }
  .portfolio-archive-card {
    padding: 1rem;
    border-radius: 14px;
  }
  .portfolio-archive-card__visual {
    min-height: 300px;
  }
  .portfolio-archive-shot--main {
    width: 84%;
    height: 62%;
  }
  .portfolio-archive-shot--service {
    width: 68%;
    height: 50%;
  }
  .portfolio-archive-phone {
    width: 27%;
    height: 68%;
  }
}

/* Keep sticky media clear of the fixed header rather than touching it. */
.portfolio-device-pair,
.portfolio-cms-story__media-stack {
  top: 128px;
}

/* Calm the featured visual surfaces a little further. */
.portfolio-browser,
.portfolio-browser--case,
.portfolio-cms-story__media img,
.portfolio-phone {
  box-shadow: 0 8px 20px rgba(20,20,20,.065);
}

/* More selected work is intentionally compact. */
.portfolio-more-work__intro h2 {
  max-width: 12ch;
}
.portfolio-more-work__intro h2 span {
  font-family: inherit;
  font-style: normal;
  color: inherit;
}
.portfolio-archive-grid {
  gap: clamp(1.25rem,2.5vw,2rem);
}
.portfolio-archive-card--compact {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
}
.portfolio-archive-card__cover {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid #e5ddd5;
  background: #eee8e1;
}
.portfolio-archive-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.portfolio-archive-card__summary {
  padding: clamp(1.35rem,2.4vw,2rem);
}
.portfolio-archive-card__summary h3 {
  max-width: 15ch;
  font-size: clamp(1.8rem,2.8vw,3rem);
}
.portfolio-archive-card__summary > p:not(.portfolio-case-label) {
  max-width: 55ch;
}
.portfolio-project-details {
  margin-top: auto;
  border-top: 1px solid #e5ddd5;
}
.portfolio-project-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem clamp(1.35rem,2.4vw,2rem);
  font-weight: 800;
  color: #171717;
}
.portfolio-project-details summary::-webkit-details-marker {
  display: none;
}
.portfolio-project-details summary span {
  color: var(--portfolio-accent);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform .2s ease;
}
.portfolio-project-details[open] summary span {
  transform: rotate(45deg);
}
.portfolio-project-details__body {
  grid-template-columns: minmax(0,1fr) minmax(0,.9fr);
  gap: 1.25rem;
  padding: 0 clamp(1.35rem,2.4vw,2rem) clamp(1.5rem,2.5vw,2.1rem);
}
.portfolio-project-details__body h4 {
  margin: .2rem 0 .7rem;
  font-size: 1.25rem;
}
.portfolio-project-details__body p,
.portfolio-project-details__body li {
  color: #57524c;
  line-height: 1.5;
}
.portfolio-project-details__body ul {
  padding-left: 1.05rem;
}
.portfolio-project-details__body figure {
  border: 1px solid #e3dcd4;
  background: #f5f1ed;
}
.portfolio-project-details__body figure img {
  display: block;
  height: auto;
}
.portfolio-project-details__mobile {
  grid-column: 2;
  width: 42%;
  justify-self: end;
  margin-top: -18% !important;
}
.portfolio-project-details__mobile img {
  border-radius: 9px;
}

@media (max-width: 991.98px) {
  .portfolio-device-pair,
  .portfolio-cms-story__media-stack {
    top: auto;
  }
  .portfolio-archive-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .portfolio-project-details__body {
    grid-template-columns: 1fr;
  }
  .portfolio-project-details__mobile {
    grid-column: 1;
    width: 42%;
    margin-top: -2rem !important;
  }
}

/* FEATURED CASE STUDIES --------------------------------------------------- */
/* The sticky visual must never be taller than the useful column/section space.
   Crop long screenshots rather than allowing them to bleed into the next project. */
.portfolio-device-pair {
  top: 128px;
  max-width: 660px;
  padding: 0 8% 1.75rem 0;
}

.portfolio-device-pair .portfolio-phone {
  bottom: .25rem;
  width: clamp(125px, 25%, 185px);
  max-height: 74%;
}

/* LTM CMS chapter: two readable crops instead of two very tall screenshots.
   This also guarantees the sticky composition ends before the JIT section. */
.portfolio-cms-story {
  min-height: 760px;
}
.portfolio-cms-story__copy {
  padding-bottom: 4rem;
}
.portfolio-cms-story__media-stack {
  top: 128px;
  min-height: 500px;
}
.portfolio-cms-story__media--dashboard {
  width: 92%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.portfolio-cms-story__media--editor {
  width: 72%;
  top: 51%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.portfolio-cms-story__media--dashboard img,
.portfolio-cms-story__media--editor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Explicit containment between featured projects. */
.portfolio-feature {
  position: relative;
  isolation: isolate;
}
.portfolio-feature + .portfolio-feature {
  z-index: 2;
}

/* MORE SELECTED WORK ----------------------------------------------------- */
.portfolio-more-work__intro h2 {
  max-width: none;
  margin-bottom: .85rem;
}

/* Cards do NOT share an expanded row height. One opened card must never create
   an empty white panel in its neighbour. */

.portfolio-archive-card--compact {
  align-self: start;
  height: auto;
  min-height: 0;
}

/* Keep the closed cards compact and polished. */
.portfolio-archive-card__cover {
  aspect-ratio: 16 / 8.6;
}

/* Expanded project detail is a contained editorial block, not a tall empty canvas. */
.portfolio-project-details__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  padding: .35rem clamp(1.35rem,2.4vw,2rem) clamp(1.5rem,2.5vw,2rem);
}
.portfolio-project-details__body > div {
  max-width: 62ch;
}
.portfolio-project-details__body figure {
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
}
.portfolio-project-details__body figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.portfolio-project-details__mobile {
  width: min(36%, 190px);
  aspect-ratio: 9 / 17;
  margin: -3.6rem 1.2rem 0 auto !important;
  position: relative;
  z-index: 2;
}
.portfolio-project-details__mobile img {
  object-fit: cover;
  object-position: top;
}

/* Academy cover is the real Academy hero, cropped only to fit the card. */
.portfolio-archive-card:nth-child(2) .portfolio-archive-card__cover img {
  object-position: center top;
}

/* Responsive is designed from narrow upward: no sticky, no overlap, no shared heights. */
@media (max-width: 991.98px) {
  .portfolio-device-pair,
  .portfolio-cms-story__media-stack {
    position: static;
    top: auto;
  }
  .portfolio-cms-story {
    min-height: auto;
  }
  .portfolio-cms-story__media-stack {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .portfolio-cms-story__media {
    position: static;
    width: 100%;
    aspect-ratio: 16 / 10;
  }
  .portfolio-cms-story__media--editor {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .portfolio-device-pair {
    padding-right: 10%;
  }
  .portfolio-device-pair .portfolio-browser--case {
    aspect-ratio: 1.18 / 1;
  }
  .portfolio-cms-story__media-stack {
    grid-template-columns: 1fr;
  }
  .portfolio-cms-story__media {
    aspect-ratio: 16 / 10;
  }
  .portfolio-project-details__body figure {
    aspect-ratio: 16 / 10;
  }
  .portfolio-project-details__mobile {
    width: min(42%, 165px);
    margin: -2rem .6rem 0 auto !important;
  }
}

.portfolio-more-work {
  background: #f5f0ea;
}
.portfolio-more-work__intro {
  max-width: 900px;
}
.portfolio-more-work__intro h2 {
  max-width: 15ch;
}
.portfolio-more-work__intro h2 span {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--portfolio-accent);
}
.portfolio-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(1.4rem,2.5vw,2.2rem);
}
.portfolio-archive-card--modal {
  grid-template-rows: auto 1fr;
  min-width: 0;
  border: 1px solid #dfd7cf;
  border-radius: 16px;
  background: #fff;
}
.portfolio-archive-card__image-button {
  appearance: none;
  width: 100%;
  padding: 1.1rem 1.1rem 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  text-align: left;
}
.portfolio-archive-card__image-button img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.6;
  object-fit: cover;
  object-position: top center;
  background: #f4efe9;
  border: 1px solid #e5ddd5;
  border-radius: 11px;
}
.portfolio-archive-card__image-button > span {
  position: absolute;
  right: 1.8rem;
  bottom: .65rem;
  padding: .4rem .65rem;
  border-radius: 999px;
  background: rgba(23,23,23,.88);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
}
.portfolio-archive-card__summary {
  padding: 1.35rem 1.4rem 1.5rem;
}
.portfolio-archive-card__summary h3 {
  font-size: clamp(1.9rem,2.7vw,3rem);
  min-height: 2.95em;
}
.portfolio-archive-card__summary > p:not(.portfolio-case-label) {
  min-height: 4.7em;
  color: #57524c;
}
.portfolio-archive-card__summary .portfolio-deliverables {
  margin-top: auto;
}
.portfolio-archive-card__actions {
  gap: .85rem 1.1rem;
  margin-top: 1.25rem;
}
.portfolio-case-button {
  appearance: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  padding: 0 0 .15rem;
  color: #171717;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.portfolio-case-button:hover,
.portfolio-case-button:focus-visible {
  color: var(--portfolio-accent);
}

/* Full project modal */
.portfolio-case-modal {
  width: min(1180px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 28px 90px rgba(0,0,0,.22);
}
.portfolio-case-modal::backdrop,
.portfolio-image-modal::backdrop {
  background: rgba(15,15,15,.64);
  backdrop-filter: blur(3px);
}
.portfolio-case-modal__shell {
  position: relative;
  padding: clamp(1.5rem,3.5vw,3.5rem);
  overflow: auto;
  max-height: calc(100vh - 48px);
}
.portfolio-case-modal__close,
.portfolio-image-modal__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--portfolio-accent);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.portfolio-case-modal__close {
  position: absolute;
  right: 1.3rem;
  top: 1.1rem;
  z-index: 5;
}
.portfolio-case-modal__header {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 2rem;
  padding-right: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e1d9d1;
}
.portfolio-case-modal__header h2 {
  margin: .4rem 0 0;
  max-width: 18ch;
  font-size: clamp(2.4rem,4.7vw,5rem);
  line-height: .95;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.portfolio-case-modal__grid {
  display: grid;
  grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr);
  gap: clamp(2rem,4vw,4.5rem);
  padding-top: clamp(1.8rem,3.5vw,3.2rem);
}
.portfolio-case-modal__copy {
  position: sticky;
  top: 0;
}
.portfolio-case-modal__copy h3 {
  margin: 0 0 .8rem;
  font-size: clamp(1.8rem,2.8vw,3rem);
  line-height: 1;
}
.portfolio-case-modal__copy p,
.portfolio-case-modal__copy li {
  color: #57524c;
  line-height: 1.55;
}
.portfolio-case-modal__copy ul {
  padding-left: 1.1rem;
}
.portfolio-case-modal__gallery {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(160px,.34fr);
  gap: 1rem;
  align-items: start;
}
.portfolio-case-modal__shot {
  appearance: none;
  padding: .7rem;
  border: 1px solid #e0d8d0;
  border-radius: 12px;
  background: #fff;
  cursor: zoom-in;
  position: relative;
}
.portfolio-case-modal__shot:first-child,
.portfolio-case-modal__shot:nth-child(2) {
  grid-column: 1;
}
.portfolio-case-modal__shot--mobile {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.portfolio-case-modal__shot img {
  display: block;
}
.portfolio-case-modal__shot > span {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: .38rem .62rem;
  border-radius: 999px;
  background: rgba(23,23,23,.86);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
}

/* Image lightbox */
.portfolio-image-modal {
  width: min(1500px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  padding: 1rem;
  border: 0;
  border-radius: 14px;
  background: #111;
}
.portfolio-image-modal img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 68px);
  width: auto;
  height: auto;
  margin: auto;
  object-fit: contain;
}
.portfolio-image-modal__close {
  position: fixed;
  right: 1.4rem;
  top: 1rem;
  color: #fff;
  z-index: 10;
}
body.portfolio-modal-open {
  overflow: hidden;
}

@media (max-width: 991.98px) {
  .portfolio-archive-grid {
    grid-template-columns: 1fr;
  }
  .portfolio-archive-card__summary h3,
  .portfolio-archive-card__summary > p:not(.portfolio-case-label) {
    min-height: 0;
  }
  .portfolio-case-modal__header,
  .portfolio-case-modal__grid {
    grid-template-columns: 1fr;
  }
  .portfolio-case-modal__copy {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .portfolio-case-modal {
    width: calc(100vw - 18px);
    max-height: calc(100vh - 18px);
    border-radius: 12px;
  }
  .portfolio-case-modal__shell {
    max-height: calc(100vh - 18px);
    padding: 1.2rem;
  }
  .portfolio-case-modal__header {
    padding-right: 1.8rem;
  }
  .portfolio-case-modal__gallery {
    grid-template-columns: 1fr;
  }
  .portfolio-case-modal__shot,
  .portfolio-case-modal__shot:first-child,
  .portfolio-case-modal__shot:nth-child(2),
  .portfolio-case-modal__shot--mobile {
    grid-column: 1;
    grid-row: auto;
  }
  .portfolio-case-modal__shot--mobile {
    width: min(65%, 280px);
    justify-self: center;
  }
}

/* Hide the underlying page enough that stray shapes/text cannot visually intrude
   into the case-study experience. */
.portfolio-case-modal::backdrop {
  background: rgba(12,12,12,.82);
  backdrop-filter: blur(5px);
}

/* Keep title and action in a resilient grid: long headings can wrap without
   colliding with the website link. */
.portfolio-case-modal__header {
  grid-template-columns: minmax(0,1fr) minmax(180px,auto);
  align-items: end;
  column-gap: clamp(1.5rem,3vw,3rem);
}
.portfolio-case-modal__header > div {
  min-width: 0;
}
.portfolio-case-modal__header h2 {
  max-width: 16ch;
  overflow-wrap: anywhere;
}
.portfolio-case-modal__header .portfolio-site-link {
  justify-self: end;
  max-width: 220px;
  text-align: right;
  white-space: normal;
  line-height: 1.3;
}

/* Case-study content: copy scrolls naturally, screenshots remain visible.
   This mirrors the sticky storytelling behaviour of the featured projects. */
.portfolio-case-modal__grid {
  grid-template-columns: minmax(300px,.76fr) minmax(0,1.24fr);
  align-items: start;
}
.portfolio-case-modal__copy {
  position: static;
}
.portfolio-case-modal__gallery {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: calc(100vh - 190px);
  overflow: auto;
  padding-right: .25rem;
  scrollbar-width: thin;
}

/* Screens are shown whole inside the modal; zoom remains available for inspection. */
.portfolio-case-modal__shot {
  overflow: hidden;
}
.portfolio-case-modal__shot img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

/* Card-level actions must never collide, even with longer labels. */
.portfolio-archive-card__actions {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: .85rem 1rem;
}
.portfolio-archive-card__actions .portfolio-case-button {
  justify-self: start;
}
.portfolio-archive-card__actions .portfolio-site-link {
  justify-self: end;
  text-align: right;
}

@media (max-width: 991.98px) {
  .portfolio-case-modal__header {
    grid-template-columns: 1fr;
  }
  .portfolio-case-modal__header .portfolio-site-link {
    justify-self: start;
    max-width: none;
    text-align: left;
  }
  .portfolio-case-modal__gallery {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 575.98px) {
  .portfolio-archive-card__actions {
    grid-template-columns: 1fr;
  }
  .portfolio-archive-card__actions .portfolio-site-link {
    justify-self: start;
    text-align: left;
    white-space: normal;
  }
}

.portfolio-case-modal::backdrop,
.portfolio-image-modal::backdrop {
  background: #111;
  backdrop-filter: none;
}

/* Make the modal itself the only visible surface; no page edge should read through. */
.portfolio-case-modal {
  isolation: isolate;
  background: #fbf8f4;
}
.portfolio-case-modal__shell {
  background: #fbf8f4;
}

/* Defensive reset for decorative/overlapping page visuals while any portfolio modal is open. */
body.portfolio-modal-open .portfolio-page > * {
  visibility: hidden;
}
body.portfolio-modal-open .portfolio-case-modal,
body.portfolio-modal-open .portfolio-image-modal {
  visibility: visible;
}

/* Dialog backdrops are browser top-layer UI, but this keeps accidental pseudo-elements
   or transformed portfolio artwork from bleeding around the modal shell. */
body.portfolio-modal-open {
  background: #111 !important;
}

/* Remove the black circular "View case study" scribble from card imagery.
   The image itself remains clickable and the explicit text CTA below does the job. */
.portfolio-archive-card__image-button > span {
  display: none !important;
}

.portfolio-archive-card__image-button::after {
  content: "Open case study";
  position: absolute;
  right: 1.7rem;
  bottom: 1rem;
  padding: .48rem .72rem;
  border: 1px solid rgba(23,23,23,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #171717;
  font-size: .74rem;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(20,20,20,.06);
}
.portfolio-archive-card__image-button:hover::after,
.portfolio-archive-card__image-button:focus-visible::after {
  color: var(--portfolio-accent);
  border-color: currentColor;
}

/* Featured project visuals: desktop + tablet + mobile are treated as a single
   editorial device composition. Each screenshot stays recognisable and within
   the visual column; nothing bleeds into the following project. */
.portfolio-device-pair {
  min-height: 760px;
  max-width: 700px;
  padding: 0;
}
.portfolio-device-pair .portfolio-browser--case {
  position: absolute;
  left: 0;
  top: 0;
  width: 88%;
  aspect-ratio: 1.34 / 1;
  overflow: hidden;
  z-index: 1;
}
.portfolio-device-pair .portfolio-browser--case > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.portfolio-tablet {
  position: absolute;
  z-index: 2;
  left: 8%;
  top: 48%;
  width: 76%;
  margin: 0;
  overflow: hidden;
  border: 1px solid #ddd5cd;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(20,20,20,.06);
}
.portfolio-tablet img {
  display: block;
  width: 100%;
  height: auto;
}

.portfolio-device-pair .portfolio-phone {
  position: absolute;
  z-index: 3;
  right: 0;
  top: 22%;
  bottom: auto;
  width: 26%;
  height: 70%;
  max-height: none;
  overflow: hidden;
  border: 1px solid #ddd5cd;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(20,20,20,.07);
}
.portfolio-device-pair .portfolio-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Let the visual column run roughly alongside the rationale rather than becoming
   a small phone sticker on one desktop screenshot. */
.portfolio-case-layout,
.portfolio-case-layout--ltm {
  align-items: start;
}
.portfolio-device-pair--ltm,
.portfolio-device-pair--jit {
  position: sticky;
  top: 128px;
  align-self: start;
}

/* Slightly different positioning avoids making the two featured projects feel templated. */
.portfolio-device-pair--ltm .portfolio-tablet {
  top: 46%;
  left: 5%;
  width: 79%;
}
.portfolio-device-pair--jit .portfolio-tablet {
  top: 49%;
  left: 7%;
  width: 77%;
}

/* Tablet: stop overlapping, preserve full readable screenshots in a tidy grid. */
@media (max-width: 991.98px) {
  .portfolio-device-pair {
    position: static !important;
    min-height: 0;
    max-width: 820px;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(160px,.34fr);
    gap: 1rem;
    align-items: start;
  }
  .portfolio-device-pair .portfolio-browser--case,
  .portfolio-tablet,
  .portfolio-device-pair .portfolio-phone {
    position: static;
    width: 100%;
    height: auto;
    max-height: none;
  }
  .portfolio-device-pair .portfolio-browser--case,
  .portfolio-tablet {
    grid-column: 1;
  }
  .portfolio-device-pair .portfolio-phone {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .portfolio-device-pair .portfolio-phone img {
    height: auto;
    object-fit: contain;
  }
}

/* Mobile-first narrow layout: each device gets its own space and no overlaps. */
@media (max-width: 575.98px) {
  .portfolio-device-pair {
    grid-template-columns: 1fr;
  }
  .portfolio-device-pair .portfolio-browser--case,
  .portfolio-tablet,
  .portfolio-device-pair .portfolio-phone {
    grid-column: 1;
    grid-row: auto;
  }
  .portfolio-device-pair .portfolio-phone {
    width: min(58%, 280px);
    justify-self: center;
  }
}

/* Remove any old badge treatment from selected-work card images. */
.portfolio-archive-card__image-button::after,
.portfolio-archive-card__image-button > span {
  content: none !important;
  display: none !important;
}
.portfolio-archive-card__image-button {
  cursor: pointer;
}

/* Featured work now uses the same clean screenshot language as the case-study modals:
   no device pile, no confusing overlap, every viewport is clearly readable. */
.portfolio-feature-gallery {
  position: sticky;
  top: 128px;
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .34fr);
  gap: 1rem;
  max-width: 720px;
}
.portfolio-feature-shot {
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  padding: .65rem;
  border: 1px solid #ddd6ce;
  border-radius: 12px;
  background: #fff;
  cursor: zoom-in;
  box-shadow: 0 7px 18px rgba(20,20,20,.055);
  overflow: hidden;
}
.portfolio-feature-shot--desktop,
.portfolio-feature-shot--tablet {
  grid-column: 1;
}
.portfolio-feature-shot--mobile {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}
.portfolio-feature-shot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.portfolio-feature-shot--mobile img {
  width: 100%;
}

/* Shared magnifying-glass button, used both in featured work and modal galleries. */
.portfolio-zoom-icon {
  position: absolute;
  right: .85rem;
  bottom: .85rem;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(23,23,23,.12);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #171717;
  box-shadow: 0 4px 12px rgba(20,20,20,.08);
  pointer-events: none;
}
.portfolio-zoom-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.portfolio-feature-shot:hover .portfolio-zoom-icon,
.portfolio-feature-shot:focus-visible .portfolio-zoom-icon,
.portfolio-case-modal__shot:hover .portfolio-zoom-icon,
.portfolio-case-modal__shot:focus-visible .portfolio-zoom-icon {
  color: var(--portfolio-accent);
  border-color: currentColor;
}

/* Modal screenshot styling uses the same icon instead of the word Zoom. */
.portfolio-case-modal__shot > span:not(.portfolio-zoom-icon) {
  display: none !important;
}
.portfolio-case-modal__shot .portfolio-zoom-icon {
  right: .85rem;
  bottom: .85rem;
}

/* Kill obsolete overlapping featured-device rules from earlier iterations. */
.portfolio-device-pair,
.portfolio-tablet,
.portfolio-device-pair .portfolio-phone {
  display: none !important;
}

@media (max-width: 991.98px) {
  .portfolio-feature-gallery {
    position: static;
    grid-template-columns: minmax(0,1fr) minmax(150px,.34fr);
    max-width: 820px;
  }
}
@media (max-width: 575.98px) {
  .portfolio-feature-gallery {
    grid-template-columns: 1fr;
  }
  .portfolio-feature-shot--desktop,
  .portfolio-feature-shot--tablet,
  .portfolio-feature-shot--mobile {
    grid-column: 1;
    grid-row: auto;
  }
  .portfolio-feature-shot--mobile {
    width: min(62%, 300px);
    justify-self: center;
  }
}

/* The selected-project cards are vertical, so let the real full-page screenshots
   occupy the left visual column rather than shrinking to a tiny thumbnail.
   The screenshot is clipped only by the height of the content block, preserving
   the full page proportion inside the viewport area without stretching. */
.portfolio-archive-card--modal {
  grid-template-columns: minmax(150px, .34fr) minmax(0, .66fr);
  grid-template-rows: 1fr;
}
.portfolio-archive-card__image-button {
  height: 100%;
  min-height: 100%;
  padding: 1.25rem 0 1.25rem 1.25rem;
}
.portfolio-archive-card__image-button img {
  min-height: 540px;
}
.portfolio-archive-card__summary {
  padding: clamp(1.6rem,2.6vw,2.4rem);
}

/* Image lightbox gallery arrows. */
.portfolio-image-modal {
  position: fixed;
  inset: 0;
  margin: auto;
}
.portfolio-image-modal__nav {
  appearance: none;
  position: fixed;
  top: 50%;
  z-index: 11;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(17,17,17,.72);
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.portfolio-image-modal__nav--prev {
  left: 1.1rem;
}
.portfolio-image-modal__nav--next {
  right: 1.1rem;
}
.portfolio-image-modal__nav:hover,
.portfolio-image-modal__nav:focus-visible {
  background: #fff;
  color: #171717;
}

/* Keep modal screenshots clean and icon-only for zoom. */
.portfolio-case-modal__shot .portfolio-zoom-icon {
  width: 40px;
  height: 40px;
}
.portfolio-case-modal__shot .portfolio-zoom-icon svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 991.98px) {
  .portfolio-archive-card--modal {
    grid-template-columns: minmax(130px,.28fr) minmax(0,.72fr);
  }
  .portfolio-archive-card__image-button img {
    min-height: 480px;
  }
}

@media (max-width: 575.98px) {
  .portfolio-archive-card--modal {
    grid-template-columns: 1fr;
  }
  .portfolio-archive-card__image-button {
    padding: 1rem 1rem 0;
    height: auto;
  }
  .portfolio-archive-card__image-button img {
    height: 300px;
    min-height: 0;
  }
  .portfolio-image-modal__nav {
    width: 44px;
    height: 44px;
    margin-top: -22px;
  }
  .portfolio-image-modal__nav--prev { left: .5rem; }
  .portfolio-image-modal__nav--next { right: .5rem; }
}

.portfolio-archive-card--modal {
  grid-template-columns: minmax(210px, 0.40fr) minmax(0, 0.60fr);
}

/* This cell stretches to the height created by the content on the right. */
.portfolio-archive-card__image-button {
  max-height: none;
  padding: clamp(1.5rem, 2.4vw, 2.2rem) 0 clamp(1.5rem, 2.4vw, 2.2rem) clamp(1.5rem, 2.4vw, 2.2rem);
  display: block;
}

/* The screenshot fills that exact available height and is simply cropped at
   the bottom. No fixed 540px/480px height and no aspect-ratio can extend it. */
.portfolio-archive-card__image-button img {
  max-height: 100%;
  border-radius: 10px;
}

/* The text defines the card height. */
.portfolio-archive-card__summary {
  align-self: stretch;
  padding: clamp(1.6rem, 2.8vw, 2.5rem);
}

/* Keep CTAs readable even when project titles/summary lengths vary. */
.portfolio-archive-card__actions {
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: start;
}
.portfolio-archive-card__actions .portfolio-case-button {
  white-space: nowrap;
}
.portfolio-archive-card__actions .portfolio-site-link {
  justify-self: start;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .portfolio-archive-card--modal {
    grid-template-columns: minmax(180px, .36fr) minmax(0, .64fr);
  }
}

@media (max-width: 575.98px) {
  .portfolio-archive-card--modal {
    grid-template-columns: 1fr;
  }
  .portfolio-archive-card__image-button {
    height: 300px;
    padding: 1rem 1rem 0;
  }
  .portfolio-archive-card__image-button img {
    height: 100%;
    max-height: none;
  }
  .portfolio-archive-card__actions {
    grid-template-columns: 1fr;
  }
}

.portfolio-archive-card--modal {
  display: grid;
  grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
  grid-template-rows: auto;
  height: auto;
  min-height: 0;
}

/* The image column contributes ZERO intrinsic height.
   Its screenshot is absolutely positioned and simply fills/crops to whatever
   height the text column naturally creates. */
.portfolio-archive-card__image-button {
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #f4efe9;
  border-right: 1px solid #e5ddd5;
}

.portfolio-archive-card__image-button img {
  display: block;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}

/* Restore the text proportions from before A91.
   Long project names wrap naturally without collapsing the measure. */
.portfolio-archive-card__summary {
  min-height: 0;
  padding: clamp(1.65rem, 2.6vw, 2.35rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.portfolio-archive-card__summary h3 {
  margin: .45rem 0 .8rem;
  max-width: 14ch;
  min-height: 0;
  font-size: clamp(1.9rem, 2.35vw, 3rem);
  line-height: .98;
  letter-spacing: -.04em;
}

.portfolio-archive-card__summary > p:not(.portfolio-case-label) {
  max-width: 44ch;
  min-height: 0;
  margin-bottom: 1.1rem;
  line-height: 1.55;
}

.portfolio-archive-card__summary .portfolio-deliverables {
  margin-top: .2rem;
}

/* Two-column card grid remains consistent, but each card's own content determines
   its height. No masonry behaviour and no shared forced height. */
.portfolio-archive-grid {
  align-items: start;
}
.portfolio-archive-card--modal {
  align-self: start;
}

@media (max-width: 1100px) {
  .portfolio-archive-card--modal {
    grid-template-columns: minmax(0, .38fr) minmax(0, .62fr);
  }
  .portfolio-archive-card__summary h3 {
    font-size: clamp(1.8rem, 2.6vw, 2.7rem);
  }
}

@media (max-width: 991.98px) {
  .portfolio-archive-card--modal {
    grid-template-columns: minmax(0, .40fr) minmax(0, .60fr);
  }
}

@media (max-width: 700px) {
  .portfolio-archive-card--modal {
    grid-template-columns: 1fr;
  }
  .portfolio-archive-card__image-button {
    height: clamp(220px, 58vw, 340px);
    border-right: 0;
    border-bottom: 1px solid #e5ddd5;
  }
  .portfolio-archive-card__image-button img {
    position: absolute;
  }
  .portfolio-archive-card__summary h3 {
    max-width: 16ch;
  }
}

.portfolio-archive-card--modal {
  grid-template-columns: minmax(180px, .34fr) minmax(0, .66fr);
}

/* Move the content visually left by giving it more width, not by offsets. */
.portfolio-archive-card__summary {
  width: 100%;
  max-width: none;
  padding: clamp(1.6rem, 2.35vw, 2.25rem);
  overflow: hidden;
}

.portfolio-archive-card__summary h3 {
  max-width: 16ch;
  font-size: clamp(1.85rem, 2.15vw, 2.85rem);
}

.portfolio-archive-card__summary > p:not(.portfolio-case-label) {
  max-width: 52ch;
}

/* Actions are part of the same content column and must wrap INSIDE it. */
.portfolio-archive-card__actions {
  align-items: center;
  justify-content: flex-start;
  gap: .8rem 1.15rem;
  margin-top: 1.15rem;
  overflow: visible;
}

.portfolio-archive-card__actions .portfolio-case-button,
.portfolio-archive-card__actions .portfolio-site-link {
  min-width: 0;
  justify-self: auto;
  text-align: left;
  overflow-wrap: anywhere;
}

/* Keep the website CTA visually distinct without allowing it to escape the card. */
.portfolio-archive-card__actions .portfolio-site-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

/* At tighter desktop widths, preserve the text measure before collapsing to one column. */
@media (max-width: 1180px) {
  .portfolio-archive-card--modal {
    grid-template-columns: minmax(165px, .31fr) minmax(0, .69fr);
  }
  .portfolio-archive-card__summary h3 {
    max-width: 17ch;
  }
}

@media (max-width: 991.98px) {
  .portfolio-archive-card--modal {
    grid-template-columns: minmax(150px, .30fr) minmax(0, .70fr);
  }
}

@media (max-width: 700px) {
  .portfolio-archive-card--modal {
    grid-template-columns: 1fr;
  }
  .portfolio-archive-card__summary {
    overflow: visible;
  }
}

.portfolio-archive-card--modal {
  grid-template-columns: minmax(0, 28%) minmax(0, 72%);
  align-items: stretch;
  overflow: hidden;
}

.portfolio-archive-card__image-button {
  min-width: 0;
  height: auto;
  align-self: stretch;
}

/* Full-page project strip: fill the visual track and reveal the page from the top. */
.portfolio-archive-card__image-button img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  object-fit: cover;
  object-position: top center;
}

/* IMPORTANT: stay inside the actual grid track. */
.portfolio-archive-card__summary {
  width: auto;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  padding: clamp(1.5rem, 2.1vw, 2rem);
}

.portfolio-archive-card__summary h3 {
  width: auto;
  max-width: 100%;
  margin: .45rem 0 .75rem;
  font-size: clamp(1.9rem, 2.05vw, 2.75rem);
  line-height: 1;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

.portfolio-archive-card__summary > p:not(.portfolio-case-label) {
  width: auto;
  max-width: 100%;
}

/* CTAs belong to the same grid cell and may wrap only within that cell. */
.portfolio-archive-card__actions {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
}
.portfolio-archive-card__actions .portfolio-case-button,
.portfolio-archive-card__actions .portfolio-site-link {
  max-width: 100%;
  flex: 0 1 auto;
  white-space: normal;
  overflow-wrap: normal;
}

@media (max-width: 1180px) {
  .portfolio-archive-card--modal {
    grid-template-columns: minmax(0, 26%) minmax(0, 74%);
  }
}

@media (max-width: 991.98px) {
  .portfolio-archive-card--modal {
    grid-template-columns: minmax(0, 30%) minmax(0, 70%);
  }
}

@media (max-width: 700px) {
  .portfolio-archive-card--modal {
    grid-template-columns: 1fr;
  }
  .portfolio-archive-card__image-button {
    height: clamp(220px, 58vw, 340px);
  }
}

.portfolio-archive-card--modal {
  grid-template-columns: minmax(0, 32%) minmax(0, 68%);
}

.portfolio-archive-card__summary {
  padding-left: clamp(1.15rem, 1.55vw, 1.55rem);
  padding-right: clamp(1.5rem, 2.1vw, 2rem);
}

@media (max-width: 1180px) {
  .portfolio-archive-card--modal {
    grid-template-columns: minmax(0, 30%) minmax(0, 70%);
  }
}

@media (max-width: 991.98px) {
  .portfolio-archive-card--modal {
    grid-template-columns: minmax(0, 32%) minmax(0, 68%);
  }
}

@media (max-width: 700px) {
  .portfolio-archive-card--modal {
    grid-template-columns: 1fr;
  }
  .portfolio-archive-card__summary {
    padding-left: clamp(1.5rem, 2.1vw, 2rem);
  }
}

.portfolio-archive-card--modal {
  grid-template-columns: minmax(0, 35%) minmax(0, 65%);
}

/* Pull the text block closer to the screenshot without using transforms/offset hacks. */
.portfolio-archive-card__summary {
  padding-left: clamp(.75rem, 1vw, 1rem);
  padding-right: clamp(1.35rem, 1.9vw, 1.8rem);
}

/* Let the text make use of the wider track. */
.portfolio-archive-card__summary h3 {
  max-width: 18ch;
}

.portfolio-archive-card__summary > p:not(.portfolio-case-label) {
  max-width: 58ch;
}

@media (max-width: 1180px) {
  .portfolio-archive-card--modal {
    grid-template-columns: minmax(0, 33%) minmax(0, 67%);
  }
}

@media (max-width: 991.98px) {
  .portfolio-archive-card--modal {
    grid-template-columns: minmax(0, 34%) minmax(0, 66%);
  }
}

@media (max-width: 700px) {
  .portfolio-archive-card--modal {
    grid-template-columns: 1fr;
  }
  .portfolio-archive-card__summary {
    padding-left: clamp(1.5rem, 2.1vw, 2rem);
  }
}

@media (max-width: 991.98px) {
  .portfolio-archive-card__summary {
    margin-left: 0;
    width: auto !important;
  }
}

.portfolio-archive-card--modal {
  grid-template-columns: minmax(0, 30%) minmax(0, 70%);
}

.portfolio-archive-card__summary {
  margin-left: -45px;
  width: 100% !important;
  padding-right: clamp(.7rem, 1vw, 1rem);
}

.portfolio-archive-card__summary h3,
.portfolio-archive-card__summary > p:not(.portfolio-case-label) {
  max-width: 100%;
  width: 100%;
}

@media (max-width: 1180px) {
  .portfolio-archive-card--modal {
    grid-template-columns: minmax(0, 29%) minmax(0, 71%);
  }
}

@media (max-width: 991.98px) {
  .portfolio-archive-card--modal {
    grid-template-columns: minmax(0, 32%) minmax(0, 68%);
  }
  .portfolio-archive-card__summary {
    margin-left: 0;
    width: auto !important;
  }
}

@media (max-width: 700px) {
  .portfolio-archive-card--modal {
    grid-template-columns: 1fr;
  }
}

.portfolio-archive-grid {
  align-items: stretch;
}

.portfolio-archive-card--modal {
  height: 100%;
  align-self: stretch;
}

.portfolio-archive-card__summary {
  height: 100%;
  box-sizing: border-box;
}

/* Reserve the same rhythm for titles so different title lengths don't change card height. */
.portfolio-archive-card__summary h3 {
  min-height: 3em;
}

/* Clamp the short intro to a consistent number of lines. */
.portfolio-card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  max-width: 100% !important;
  margin-bottom: .35rem !important;
}

/* "More" is deliberately quiet; the primary action remains View case study. */
.portfolio-card-more {
  appearance: none;
  align-self: flex-start;
  margin: 0 0 .85rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: #5b5650;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
}

.portfolio-card-more:hover,
.portfolio-card-more:focus-visible {
  color: var(--portfolio-accent);
}

@media (max-width: 700px) {
  .portfolio-archive-card__summary h3 {
    min-height: 0;
  }
  .portfolio-card-excerpt {
    -webkit-line-clamp: 5;
  }
}

/* ==========================================================================
   HERO VARIANT SYSTEM — A121
   HOME IS THE SOURCE OF TRUTH.
   Container, columns, spacing, form geometry and breakpoints come from the
   existing Home .hero / .hero-form component. Variants only change identity.
   ========================================================================== */

/* Shared proof-pill component used by service variants. */
.hero--urgent .hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.hero--urgent .hero__proof span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(var(--hero-accent-rgb), .22);
  border-radius: 999px;
  background: rgba(var(--hero-accent-rgb), .06);
  color: #171717;
  font-size: .82rem;
  font-weight: 700;
}

/* Editorial heroes — same Home shell and left-copy component, media instead of form. */
.hero--editorial {
  --hero-accent: #903600;
  background: #f6f3ef;
}

.hero--editorial .hero__eyebrow {
  color: var(--hero-accent);
}

.hero--editorial .hero-title__accent {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--hero-accent);
}

.hero--editorial .hero-title__phrase:not(.hero-title__accent) {
  color: #171717;
}

..hero--digital,
.hero--portfolio {
  --hero-accent: #903600;
}

.hero--about {
  --hero-accent: #C94F00;
}

.hero__aside {
  min-width: 0;
}

/* Business IT — identity only. */
.hero--business {
  --hero-accent: #005690;
  --hero-accent-rgb: 0, 86, 144;
}

.hero--business .hero__eyebrow,
.hero--business .hero-form__header > p {
  color: var(--hero-accent);
}

.hero__business-emergency {
  margin: 20px 0 0;
  color: var(--hero-accent);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.hero__business-emergency strong {
  font-size: 1.18em;
  font-weight: 850;
}

.hero--business .hero-title__web-accent {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--hero-accent);
}

.hero--business .hero-form {
  border-color: rgba(var(--hero-accent-rgb), .14);
}

/* Computer Repairs — identity only. */
.hero--repairs {
  --hero-accent: #007AC9;
  --hero-accent-rgb: 0, 122, 201;
}

.hero--repairs .hero__eyebrow,
.hero--repairs .hero-form__header > p {
  color: var(--hero-accent);
}

.hero--repairs .hero-title__repair-accent {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--hero-accent);
}

.hero--repairs .hero-form {
  border-color: rgba(var(--hero-accent-rgb), .16);
}

/* Business page identity below the shared hero. */
.business-page {
  --business-blue: #005690;
  --business-blue-soft: #9BC4E8;
  --component-accent: var(--business-blue);
}

.business-page .section-kicker:not(.section-kicker--light),
.business-page .business-page-step > span {
  color: var(--business-blue);
}

.business-page .button--primary {
  background: var(--nova-orange);
  border-color: var(--nova-orange);
  color: #fff;
}

.business-page .button--primary:hover,
.business-page .button--primary:focus-visible {
  background: var(--nova-orange-dark, #903600);
  border-color: var(--nova-orange-dark, #903600);
  color: #fff;
}

.business-page .business-page .business-page-step {
  border-top-color: var(--business-blue);
}

.business-page .business-page-support__panel,
.business-page .business-page-final__panel {
  background: #171717;
}

.business-page .business-page-pricing {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.14);
}

.business-page .business-page-pricing__plan {
  background: rgba(255,255,255,.065);
}

.business-page .business-page-pricing__plan--featured {
  background: #262626;
  border-color: rgba(155,196,232,.48);
}

.business-page .business-page-support .section-kicker,
.business-page .business-page-final .section-kicker,
.business-page .business-page-support h2 span,
.business-page .business-page-final h2 span,
.business-page .business-page-checks li::before {
  color: var(--business-blue-soft);
}

.business-page .business-page-support h2 + p,
.business-page .business-page-final p:not(.section-kicker) {
  color: rgba(255,255,255,.82);
}

.business-page .business-page-why h2 span {
  color: var(--business-blue);
}

/* Computer Repairs identity and page sections. */
.repair-page {
  --repair-blue: #007AC9;
  --repair-blue-text: #0065A6;
  background: var(--nova-warm-white);
}

.repair-page .section-kicker:not(.section-kicker--light) {
  color: var(--repair-blue-text);
}
.repair-page-services,
.repair-page-pricing,
.repair-page-why,
.repair-page-local,
.repair-page-final {
  padding: clamp(46px, 5vw, 76px) 0;
}

.repair-page-section-heading h2 span,
.repair-page-why h2 span,
.repair-page-process h2 span,
.repair-page-local h2 span {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--repair-blue);
}

.repair-page-services,
.repair-page-why {
  background: #fff;
}

.repair-page-pricing,
.repair-page-process {
  background: var(--nova-warm-white);
}

.repair-page-section-heading {
  max-width: 780px;
  margin-bottom: clamp(30px, 5vw, 52px);
}

.repair-page-section-heading--compact {
  margin-bottom: 30px;
}

.repair-page-section-heading h2,
.repair-page-why h2,
.repair-page-local h2,
.repair-page-final h2 {
  margin: 0;
  font-size: clamp(34px, 5vw, 55px);
  font-weight: var(--weight-heading);
  letter-spacing: -.035em;
  line-height: 1.03;
}

.repair-page-section-heading > p:last-child {
  max-width: 700px;
  margin: 18px 0 0;
  color: #5d5d5d;
  font-size: 17px;
}

.repair-page-service-card {
  min-height: 240px;
  padding: 28px;
  border: 1px solid #e2ded8;
  border-radius: 18px;
  background: var(--nova-warm-white);
}

.nova-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--component-accent, var(--nova-orange)) 9%, transparent);
  color: var(--component-accent, var(--nova-orange));
}

.nova-icon-badge,
.nova-icon-badge i,
.nova-icon-badge .bi::before {
  font-size: 28px;
}

.nova-icon-badge i {
  display: block;
  line-height: 1;
  font-style: normal;
}

.repair-page-service-card {
  --component-accent: var(--repair-blue-text);
}
.repair-page-service-card h3 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.repair-page-service-card p {
  margin: 0;
  color: #646464;
}

.repair-price-table-wrap {
  overflow: hidden;
  border: 1px solid #ddd8d1;
  border-radius: 20px;
  background: #fff;
}

.repair-price-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.repair-price-table th,
.repair-price-table td {
  padding: 20px clamp(18px, 3vw, 34px);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #e7e2dc;
}

.repair-price-table th {
  background: #171717;
  color: #fff;
  font-size: .82rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.repair-price-table th:first-child,
.repair-price-table td:first-child {
  width: 72%;
}

.repair-price-table th:last-child,
.repair-price-table td:last-child {
  width: 28%;
  text-align: right;
}

.repair-price-table td {
  color: #333;
  font-size: clamp(16px, 1.55vw, 19px);
}

.repair-price-table td > span {
  display: block;
  margin-top: 5px;
  color: #6b6b6b;
  font-size: .88em;
}

.repair-price-table td > .repair-price-table__service {
  margin-top: 0;
  color: #333;
  font-size: 1em;
  font-weight: 400;
}

.repair-price-table td:last-child strong {
  font-weight: 800;
}

.repair-price-table__featured td {
  background: rgba(0,122,201,.055);
}

.repair-price-table__featured td:last-child strong {
  color: var(--repair-blue);
  font-size: 1.35em;
}

.repair-price-table__note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px clamp(18px, 3vw, 34px);
}

.repair-price-table__note p {
  margin: 0;
  color: #565656;
}

.repair-page-why__content {
  padding: clamp(26px, 4.5vw, 52px);
  border-radius: 22px;
  background: var(--nova-warm-white);
}

.repair-page-why__content > p:not(.section-kicker) {
  max-width: 620px;
  margin: 20px 0 0;
  color: #5f5f5f;
  font-size: 17px;
}

.repair-page-why__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.repair-page-why__points > div {
  padding: 16px;
  border: 1px solid #dedad3;
  border-radius: 13px;
  background: #fff;
}

.repair-page-why__points strong,
.repair-page-why__points span {
  display: block;
}

.repair-page-why__points strong {
  margin-bottom: 4px;
  font-size: 14px;
}

.repair-page-why__points span {
  color: #6a6a6a;
  font-size: 13px;
}

.repair-page-why__media {
  min-height: 430px;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #dedbd5;
}

.repair-page-why__media img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
}

.repair-page-step {
  padding: 26px;
  border-top: 4px solid var(--repair-blue);
  background: #fff;
}

.repair-page-step > span {
  display: block;
  margin-bottom: 38px;
  color: var(--repair-blue-text);
  font-size: 12px;
  font-weight: 800;
}

.repair-page-step h3 {
  margin: 0 0 8px;
  font-size: 23px;
  font-weight: 650;
}

.repair-page-step p {
  margin: 0;
  color: #666;
}

.repair-page-local {
  padding-top: clamp(42px, 6vw, 72px);
  padding-bottom: clamp(42px, 6vw, 72px);
  background: #fff;
}

.repair-page-local__inner {
  display: grid;
  gap: 24px;
  padding: clamp(28px, 5vw, 52px) 0;
  border-top: 1px solid #dedad3;
  border-bottom: 1px solid #dedad3;
}

.repair-page-local h2 {
  max-width: 18ch;
  font-size: clamp(30px, 4.5vw, 48px);
}

.repair-page-local__inner > p {
  max-width: 670px;
  margin: 0;
  color: #5f5f5f;
  font-size: 16px;
}

.repair-page-final {
  padding-top: 0;
  background: #fff;
}

.repair-page-final__panel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: clamp(30px, 5vw, 58px);
  border-radius: 22px;
  background: #171717;
  color: #fff;
}

.repair-page-final h2 span {
  color: #68B7E8;
}

.repair-page-final p:not(.section-kicker) {
  max-width: 650px;
  margin: 18px 0 0;
  color: rgba(255,255,255,.78);
}

.repair-page-final__actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
}

@media (min-width: 768px) {
  .repair-page-local__inner {
    grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr);
    align-items: end;
  }
}

@media (max-width: 991.98px) {
  .repair-page-final__panel {
    align-items: stretch;
    flex-direction: column;
  }

  .repair-page-final__actions {
    width: 100%;
    min-width: 0;
  }

  .repair-page-final__actions .button {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .repair-page-services,
  .repair-page-pricing,
  .repair-page-why,
  .repair-page-local,
  .repair-page-final {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .repair-page-why__points {
    grid-template-columns: 1fr;
  }

  .repair-page-why__media,
  .repair-page-why__media img {
    min-height: 320px;
  }

  .repair-price-table th,
  .repair-price-table td {
    padding: 16px;
  }

  .repair-price-table th:last-child,
  .repair-price-table td:last-child {
    width: 36%;
  }

  .repair-price-table__note {
    align-items: stretch;
    flex-direction: column;
  }

  .repair-price-table__note .button {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .repair-price-table {
    table-layout: auto;
  }

  .repair-price-table th:first-child,
  .repair-price-table td:first-child {
    width: auto;
  }

  .repair-price-table th:last-child,
  .repair-price-table td:last-child {
    width: 40%;
  }
}

/* Computer Repairs trust/reassurance content restored from Nova's approved claims. */
.repair-page-reassurance {
  padding: 0 0 clamp(46px, 5vw, 76px);
  background: #fff;
}

.nova-trust-strip {
  display: grid;
  grid-template-columns: repeat(var(--trust-columns, 4), minmax(0, 1fr));
  border-top: 1px solid #dedad3;
  border-bottom: 1px solid #dedad3;
}

.nova-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 96px;
  padding: 18px 20px;
  border-right: 1px solid #dedad3;
}

.nova-trust-item:last-child {
  border-right: 0;
}

.nova-trust-item__icon {
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--trust-accent, var(--nova-orange)) 8%, transparent);
  color: var(--trust-accent, var(--nova-orange));
}

.nova-trust-item__icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.nova-trust-item p {
  margin: 0;
  color: #171717;
  font-size: .9rem;
  line-height: 1.3;
}

.nova-trust-strip--repair {
  --trust-accent: var(--repair-blue);
}
.repair-emergency-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  padding: 18px 20px;
  border-left: 4px solid var(--repair-blue);
  background: #fff;
}

.repair-emergency-note strong,
.repair-emergency-note small {
  display: block;
}

.repair-emergency-note strong {
  color: #171717;
  font-size: .95rem;
}

.repair-emergency-note small {
  margin-top: 3px;
  color: #676767;
  font-size: .78rem;
}

.repair-emergency-note a {
  flex: 0 0 auto;
  color: var(--repair-blue-text);
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 991.98px) {
  .nova-trust-strip {
    --trust-columns: 2;
  }

  .nova-trust-item:nth-child(2) {
    border-right: 0;
  }

  .nova-trust-item:nth-child(-n/**/+2) {
    border-bottom: 1px solid #dedad3;
  }
}

@media (max-width: 575.98px) {
  .repair-page-reassurance {
    padding-bottom: 44px;
  }

  .nova-trust-strip {
    --trust-columns: 1;
  }

  .nova-trust-item {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid #dedad3;
  }

  .nova-trust-item:last-child {
    border-bottom: 0;
  }

  .repair-emergency-note {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ==========================================================================
   A119 — About Nova
   Cross-service page: neutral #171717 surfaces, Nova orange primary CTA,
   restrained blue/orange accents.
   ========================================================================== */

.about-page {
  --about-blue: #3C68B0;
  --about-orange: #C94F00;
  --page-section-space: clamp(4rem, 7vw, 7rem);
  --page-section-space-mobile: 3.3rem;
  --page-hero-space-top-mobile: 2rem;
  background: #fff;
}

.about-hero {
  background: #f6f3ef;
}

.about-hero .section-kicker,
.about-people .section-kicker,
.about-intro .section-kicker,
.about-local .section-kicker {
  color: var(--about-blue);
}

.about-page h2 {
  margin: 0;
  font-size: clamp(2.8rem, 5.2vw, 5.3rem);
  line-height: .95;
  letter-spacing: -.055em;
}

.about-page h2 span {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--about-orange);
}

.about-hero__proof {
  max-width: 710px;
  margin-top: 1.7rem;
}

.about-hero__experience {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: center;
  padding: 1.15rem 1.3rem;
  border-left: 4px solid var(--about-orange);
  border-radius: 0 14px 14px 0;
  background: #fff;
  box-shadow: 0 12px 30px rgba(20,20,20,.06);
}

.about-hero__experience-number {
  color: var(--about-orange);
  font-size: clamp(3rem, 5vw, 4.8rem);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.06em;
}

.about-hero__experience p {
  margin: 0;
  color: #555;
  line-height: 1.45;
}

.about-hero__experience strong {
  color: #171717;
}

.about-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}

.about-hero__chips span {
  padding: .42rem .72rem;
  border: 1px solid #d9d3cc;
  border-radius: 999px;
  background: #fff;
  font-size: .75rem;
  font-weight: 750;
}

.about-hero__portraits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  align-items: stretch;
  max-width: 430px;
  margin-left: auto;
}

.about-portrait {
  position: relative;
  height: 360px;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #171717;
  box-shadow: 0 16px 35px rgba(20,20,20,.09);
}

.about-portrait img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.about-portrait--enrico {
  transform: none;
}

.about-intro {
  background: #fff;
}

.about-intro__grid,
.about-local__grid {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: start;
}

.about-intro h2,
.about-intro__copy p,
.about-local__grid > div:last-child p {
  margin: 0 0 1.2rem;
  color: #555;
  font-size: 1.05rem;
  line-height: 1.72;
}

.about-people {
  background: #f6f3ef;
}

.about-section-heading {
  max-width: 820px;
  margin-bottom: 2.5rem;
}

.about-section-heading h2 {
  font-size: clamp(2.4rem, 4.4vw, 4.4rem);
}

.about-person-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid #e1dbd4;
  border-radius: 18px;
  background: #fff;
}

.about-person-card__top {
  display: grid;
  grid-template-columns: 1fr 126px;
  gap: 1.5rem;
  align-items: start;
  min-height: 150px;
}

.about-person-card__role {
  margin: 0 0 .45rem;
  color: var(--about-orange);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.about-person-card__label {
  margin: .5rem 0 0;
  min-height: 2.5em;
  color: var(--about-blue);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .075em;
  line-height: 1.25;
}

.about-person-card h3 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
}

.about-person-card figure {
  width: 126px;
  height: 126px;
  margin: 0;
  overflow: hidden;
  border-radius: 50%;
  background: #ece8e2;
}

.about-person-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.about-person-card__lead {
  margin: 1.5rem 0;
  min-height: 7.7em;
  color: #444;
  font-size: 1.02rem;
  line-height: 1.6;
}

.about-person-card ul {
  list-style: none;
  padding: 1.25rem 0 0;
  margin: 0;
  border-top: 1px solid #e5dfd8;
}

.about-person-card li {
  position: relative;
  padding: .42rem 0 .42rem 1.4rem;
  color: #555;
}

.about-person-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--about-orange);
  font-weight: 800;
}

.about-person-card > .text-link {
  margin-top: auto;
  padding-top: 1rem !important;
}


.about-method {
  background: #fff;
}

.about-method__panel {
  padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: 22px;
  background: #171717;
  color: #fff;
}

.about-method__intro {
  max-width: 780px;
}

.about-method__intro h2 {
  font-size: clamp(2.4rem, 4.2vw, 4.3rem);
}

.about-method__intro h2 span {
  color: #FFAD9B;
}

.about-method__intro > p:last-child {
  max-width: 690px;
  margin: 1.25rem 0 0;
  color: #d3d3d3;
}

.about-method__grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  margin-top: 3rem;
  border-top: 1px solid #373737;
  border-left: 1px solid #373737;
}

.about-method__grid article {
  min-height: 210px;
  padding: 1.6rem;
  border-right: 1px solid #373737;
  border-bottom: 1px solid #373737;
}

.about-method__grid article > span {
  color: #FF6E2C;
  font-size: .72rem;
  font-weight: 800;
}

.about-method__grid h3 {
  margin: 1.3rem 0 .6rem;
  font-size: 1.18rem;
}

.about-method__grid p {
  margin: 0;
  color: #c9c9c9;
  font-size: .9rem;
  line-height: 1.55;
}

.about-local {
  background: #f6f3ef;
}

.about-final {
  padding-top: 2rem;
}

.about-final__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 18px;
  background: #171717;
  color: #fff;
}

.about-final__panel h2 {
  max-width: 760px;
  font-size: clamp(2.2rem, 4vw, 4rem);
}

.about-final__panel > div:first-child > p:last-child {
  max-width: 680px;
  margin: 1rem 0 0;
  color: #d4d4d4;
}

.about-final__actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: .75rem;
  min-width: 220px;
}

@media (max-width: 991.98px) {
  .about-hero__portraits {
    max-width: 430px;
    margin-top: 1rem;
    margin-left: 0;
  }

  .about-intro__grid,
  .about-local__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .about-method__grid {
    grid-template-columns: repeat(2,1fr);
  }

  .about-final__panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .about-final__actions {
    width: 100%;
    min-width: 0;
  }

  .about-final__actions .button {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .about-person-card__top,
  .about-person-card__label,
  .about-person-card__lead {
    min-height: 0;
  }

.about-hero__experience {
    grid-template-columns: 1fr;
  }

  .about-hero__portraits {
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
  }

  .about-portrait {
    height: 235px;
    min-height: 0;
  }

  .about-portrait img {
    min-height: 0;
  }

  .about-portrait--enrico {
    transform: none;
  }

  .about-person-card__top {
    grid-template-columns: 1fr 88px;
  }

  .about-person-card figure {
    width: 88px;
    height: 88px;
  }

  .about-method__grid {
    grid-template-columns: 1fr;
  }
}


/* A162 mobile/tablet finishing pass */
@media (max-width: 991.98px) {
  .hero h1,
  .hero__service-line,
  .hero__copy {
    width: 100%;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .site-footer__inner {
    width: auto;
    margin-right: 24px;
    margin-left: 24px;
  }
}

@media (max-width: 575.98px) {
  .final-cta__buttons,
  .repair-page-final__actions,
  .business-page-final__actions,
  .about-final__actions,
  .digital-final-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .final-cta__buttons .button,
  .repair-page-final__actions .button,
  .business-page-final__actions .button,
  .about-final__actions .button,
  .digital-final-actions .button {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-height: 44px;
    height: 44px;
    padding: 9px 16px;
    margin-inline: 0;
    text-align: center;
    justify-content: center;
  }

  .site-footer__inner {
    box-sizing: border-box;
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
}

/* A164 complete mobile service navigation */
@media (min-width: 576px) and (max-width: 991.98px) {
  .mobile-service-nav {
    gap: 6px;
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }
  .mobile-service-nav__item {
    font-size: .72rem;
  }
  .mobile-service-nav__item svg {
    width: 21px;
    height: 21px;
  }
}

@media (max-width: 420px) {
  .mobile-service-nav__item {
    min-height: 54px;
    font-size: .58rem;
  }
  .mobile-service-nav__item svg {
    width: 18px;
    height: 18px;
  }
}


/* Shared local computer-repair pages. */
.location-page-intro .repair-page-section-heading {
	max-width: 760px;
}

.location-nearby__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.location-nearby__links a,
.location-nearby__links span {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 6px 11px;
	border: 1px solid #d9d5ce;
	border-radius: 999px;
	background: #fff;
	color: #171717;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.15;
	text-decoration: none;
}

.location-nearby__links a:hover,
.location-nearby__links a:focus-visible {
	border-color: #007AC9;
	color: #007AC9;
}

@media (max-width: 575.98px) {
	.location-nearby__links {
		gap: 6px;
	}
}


/* Areas We Cover and local-service discovery. */
.site-footer__all-areas {
	color: var(--nova-orange) !important;
	font-weight: 800;
}

.digital-local-links {
	background: #f7f3ed;
}

.areas-hero {
	padding-top: clamp(56px, 7vw, 96px);
	padding-bottom: clamp(36px, 5vw, 64px);
	background: #f7f3ed;
}

.areas-hero h1 {
	max-width: 780px;
	margin: 0;
	font-size: clamp(42px, 6vw, 78px);
	line-height: .98;
	letter-spacing: -.045em;
}

.areas-hero__copy {
	max-width: 720px;
	margin: 22px 0 0;
	color: var(--nova-mid-grey);
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.5;
}

.areas-groups {
	padding-top: clamp(42px, 5vw, 72px);
	padding-bottom: clamp(64px, 7vw, 104px);
}

.areas-group {
	display: grid;
	grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
	gap: clamp(30px, 5vw, 80px);
	padding: clamp(34px, 4vw, 54px) 0;
	border-top: 1px solid #ddd7cf;
}

.areas-group:first-child {
	border-top: 0;
	padding-top: 0;
}

.areas-group__intro h2 {
	margin: 0;
	font-size: clamp(30px, 3vw, 46px);
	line-height: 1.02;
	letter-spacing: -.035em;
}

.areas-group__intro > p:last-child {
	max-width: 520px;
	margin: 16px 0 0;
	color: var(--nova-mid-grey);
	line-height: 1.55;
}

.areas-group__links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	align-content: start;
}

.areas-group__links a {
	display: flex;
	min-height: 74px;
	flex-direction: column;
	justify-content: center;
	padding: 14px 16px;
	border: 1px solid #ded8d0;
	border-radius: 12px;
	background: #fff;
	color: #171717;
	text-decoration: none;
	transition: border-color .16s ease, transform .16s ease;
}

.areas-group__links a:hover,
.areas-group__links a:focus-visible {
	border-color: currentColor;
	transform: translateY(-1px);
}

.areas-group__links strong {
	font-size: 15px;
}

.areas-group__links span {
	margin-top: 3px;
	color: #777168;
	font-size: 12px;
}

.areas-group--repairs .section-kicker,
.areas-group--repairs .areas-group__links a:hover,
.areas-group--repairs .areas-group__links a:focus-visible {
	color: #007AC9;
}

.areas-group--business .section-kicker,
.areas-group--business .areas-group__links a:hover,
.areas-group--business .areas-group__links a:focus-visible {
	color: #005690;
}

.areas-group--digital .section-kicker,
.areas-group--digital .areas-group__links a:hover,
.areas-group--digital .areas-group__links a:focus-visible {
	color: #903600;
}

@media (max-width: 767.98px) {
	.areas-group {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.areas-group__links {
		grid-template-columns: 1fr;
	}
}