/* ==========================================================================
   SO Marketing: Home v3 add-on
   Scoped to .home-v3 / .home-v3-* and only enqueued on the Home v3 template.
   Reuses the theme tokens from so-theme-style.css (--so-*, --font-sf-pro-*)
   and the theme .site-btn, .layout-padding and section templates.
   ========================================================================== */

.home-v3 {
	--hv3-radius: 1.5625rem;          /* 25px */
	--hv3-radius-lg: 3.125rem;        /* 50px */
	--hv3-gap: 1.4375rem;             /* 23px */
	--hv3-ease: cubic-bezier(.22, .8, .24, 1);
	--hv3-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
	overflow-x: clip;
}

.home-v3 p {
	font-size: 1rem;
	line-height: 1.5;
}

.home-v3 :focus-visible {
	outline: 3px solid var(--so-black);
	outline-offset: 3px;
}

/* Buttons used on coloured cards: black pill, white on hover */
.home-v3 .home-v3-btn {
	background: var(--so-black);
	color: var(--so-white);
	min-width: 15.625rem;             /* 250px */
	border: 1px solid var(--so-black);
	padding: .9375rem 1.875rem;
	text-decoration: none;
}
.home-v3 .home-v3-btn:hover,
.home-v3 .home-v3-btn:focus-visible {
	background: var(--so-white);
	color: var(--so-black);
	transform: translateY(-2px);
}
.home-v3 .site-btn {
	text-decoration: none;
	transition: background-color .3s ease, color .3s ease, transform .3s var(--hv3-ease), box-shadow .3s ease;
}
.home-v3 .site-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12);
}

/* Round arrow buttons (sliders) */
.home-v3-arrow {
	width: 3.75rem;                   /* 60px */
	height: 3.75rem;
	border-radius: 50%;
	border: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--so-black);
	color: var(--so-yellow);
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease, transform .3s var(--hv3-ease);
}
.home-v3-arrow:hover,
.home-v3-arrow:focus-visible {
	background: var(--so-yellow);
	color: var(--so-black);
	transform: scale(1.06);
}
.home-v3-arrow svg {
	width: 1.75rem;
	height: 1.75rem;
}

/* Scroll reveal */
.hv3-js [data-hv3-reveal] {
	opacity: 0;
	transform: translateY(2.5rem);
	transition: opacity .8s var(--hv3-ease), transform .8s var(--hv3-ease);
	transition-delay: var(--hv3-reveal-delay, 0s);
}
.hv3-js [data-hv3-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.home-v3-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--so-grey-light);
	min-height: 48.75rem;             /* 780px */
	padding-top: 5.3125rem;           /* 85px */
	text-align: center;
}
/* Background video, placed as in Figma (Homepage-v7, "AdobeStock_1812775919 1"):
   2175px wide on the 1911px frame (113.8%), starting 202px below the top of the
   hero, centre 20px right of the page centre. The hero clips the bottom.
   Figma: the video at 20% opacity with a #F5F5F5 multiply rectangle over the
   hero. Multiplying the 20% video onto the #F5F5F5 hero background gives the
   same result: its white background becomes the hero grey and only the sphere
   shows. Never narrower than 120rem so the sphere stays behind the six icons
   on smaller desktops. The video replaces the old wave image. */
.home-v3-hero__bg {
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 12.625rem;                   /* 202px */
	width: max(113.8%, 120rem);
	aspect-ratio: 16 / 9;
	transform: translateX(-49.08%);
	mix-blend-mode: multiply;
	pointer-events: none;
}
.home-v3-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: transparent;
	opacity: .2;
}

.home-v3-hero__intro {
	position: relative;
	z-index: 2;
}
.home-v3 .home-v3-hero__title {
	font-family: var(--font-sf-pro-display);
	font-weight: 700;
	font-size: 4.5rem;                /* 72px */
	line-height: 1;
	letter-spacing: -.01em;
	margin: 0 auto;
	max-width: 84rem;                 /* 70% of the 1920 frame */
}
.home-v3 .home-v3-hero__subtitle {
	font-family: var(--font-sf-pro-display);
	font-weight: 700;
	font-size: 2rem;                  /* 32px */
	line-height: 1.3;
	margin: .9rem 0 0;
}

.home-v3-hero__stage {
	position: absolute;
	left: 50%;
	top: 18.125rem;                   /* 290px */
	width: 61.25rem;                  /* 980px */
	height: 30.625rem;                /* 490px */
	transform: translateX(-50%);
}
.home-v3-hero__orbit {
	list-style: none;
	margin: 0;
	padding: 0;
}
.home-v3-hero__point {
	position: absolute;
	width: 3.125rem;                  /* 50px */
	height: 3.125rem;
	margin: 0;
	animation: hv3-orbit 9s linear infinite;
	animation-delay: var(--hv3-delay, 0s);
}
.home-v3-hero__point--1 { left: 1.25rem;   top: 24.375rem; }
.home-v3-hero__point--2 { left: 7.8125rem; top: 9.9875rem; }
.home-v3-hero__point--3 { left: 21.125rem; top: 1.4125rem; }
.home-v3-hero__point--4 { left: 36.9375rem; top: 1.39rem; }
.home-v3-hero__point--5 { left: 50.3125rem; top: 9.9875rem; }
.home-v3-hero__point--6 { left: 56.8125rem; top: 24.375rem; }

@keyframes hv3-orbit {
	from { transform: rotate(0deg) translateX(.4rem) rotate(0deg); }
	to   { transform: rotate(360deg) translateX(.4rem) rotate(-360deg); }
}

.home-v3-hero__icon {
	position: relative;
	display: block;
	touch-action: manipulation;        /* no double-tap zoom delay on tablets */
	-webkit-tap-highlight-color: transparent;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hv3-colour);
	cursor: pointer;
	transition: transform .45s var(--hv3-ease-bounce), box-shadow .3s ease;
}
/* Entrance runs from the stylesheet on first paint (fill backwards only, so
   the hover/active scale still works afterwards). No JS gate. */
.home-v3-hero__icon {
	animation: hv3-icon-in .6s var(--hv3-ease-bounce) var(--hv3-in, 0s) backwards;
}
/* entrance stagger without JS (JS sets the same values) */
.home-v3-hero__point--1 .home-v3-hero__icon { --hv3-in: 0.35s; }
.home-v3-hero__point--2 .home-v3-hero__icon { --hv3-in: 0.43s; }
.home-v3-hero__point--3 .home-v3-hero__icon { --hv3-in: 0.51s; }
.home-v3-hero__point--4 .home-v3-hero__icon { --hv3-in: 0.59s; }
.home-v3-hero__point--5 .home-v3-hero__icon { --hv3-in: 0.67s; }
.home-v3-hero__point--6 .home-v3-hero__icon { --hv3-in: 0.75s; }
@keyframes hv3-icon-in {
	from { opacity: 0; transform: scale(.4); }
	to   { opacity: 1; transform: scale(1); }
}
.home-v3-hero__icon-img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: contain;
}
.home-v3-hero__icon:hover,
.home-v3-hero__icon:focus-visible,
.home-v3-hero__icon.is-active {
	transform: scale(1.4);           /* 50px to 70px as in the Figma variant */
	box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12);
}
.home-v3-hero__icon::after {
	content: "";
	position: absolute;
	inset: -.375rem;
	border-radius: 50%;
	border: 2px solid var(--hv3-colour);
	opacity: 0;
	transform: scale(.8);
	transition: opacity .3s ease, transform .3s ease;
}
.home-v3-hero__icon.is-active::after {
	opacity: 1;
	transform: scale(1);
	animation: hv3-ping 2.4s ease-out infinite;
}
@keyframes hv3-ping {
	0%   { transform: scale(1);   opacity: .9; }
	80%  { transform: scale(1.5); opacity: 0; }
	100% { transform: scale(1.5); opacity: 0; }
}

.home-v3-hero__card {
	position: absolute;
	left: 19.6875rem;                 /* 315px */
	top: 9.6875rem;                   /* 155px, 445px in the hero */
	width: 21.875rem;                 /* 350px */
	min-height: 16.25rem;             /* 260px */
	border-radius: var(--hv3-radius);
	background: var(--hv3-colour);
	padding: 1.875rem 1.5625rem;
	display: grid;
	align-items: center;
	box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .06);
	transition: background-color .5s ease;
}
/* Rises from the Figma hidden state (75px lower) on first paint */
.home-v3-hero__card {
	animation: hv3-card-in .8s var(--hv3-ease) .1s backwards;
}
@keyframes hv3-card-in {
	from { opacity: 0; transform: translateY(4.6875rem); }
	to   { opacity: 1; transform: none; }
}
.home-v3-hero__panel {
	grid-area: 1 / 1;
}
.home-v3-hero__panel[hidden] {
	display: none;
}
.home-v3-hero__panel.is-entering {
	animation: hv3-usp-in .6s var(--hv3-ease) both;
}
@keyframes hv3-usp-in {
	from { opacity: 0; transform: translate(var(--hv3-dx, 0), var(--hv3-dy, 1.5rem)) scale(.7); }
	to   { opacity: 1; transform: none; }
}
.home-v3-hero__glyph {
	display: block;
	width: auto;
	height: 3.25rem;
	margin: 0 auto .875rem;
	object-fit: contain;
}
.home-v3-hero__panel.is-entering .home-v3-hero__glyph {
	animation: hv3-pop .7s var(--hv3-ease-bounce) .1s both;
}
@keyframes hv3-pop {
	from { transform: scale(.3) rotate(-25deg); opacity: 0; }
	to   { transform: none; opacity: 1; }
}
.home-v3 .home-v3-hero__usp-title {
	font-family: var(--font-sf-pro-display);
	font-weight: 700;
	font-size: 1.5625rem;             /* 25px */
	line-height: 1.2;
	margin: 0 0 .625rem;
}
.home-v3 .home-v3-hero__usp-text {
	margin: 0;
}
.home-v3-hero__nav {
	display: none;
}

/* ==========================================================================
   Bento grid
   ========================================================================== */
.home-v3-bento {
	padding-top: 1.5625rem;
}
.home-v3-bento__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(20.53rem, auto);  /* 328.5px */
	grid-template-areas:
		"c1 c2 c3 c4"
		"st c2 crm crm";
	gap: var(--hv3-gap);
}
.home-v3-bento__card-1 { grid-area: c1; }
.home-v3-bento__card-2 { grid-area: c2; }
.home-v3-bento__card-3 { grid-area: c3; }
.home-v3-bento__card-4 { grid-area: c4; }
.home-v3-stats         { grid-area: st; }
.home-v3-crm-card      { grid-area: crm; }

.home-v3-card,
.home-v3-stats,
.home-v3-crm-card {
	position: relative;
	border-radius: var(--hv3-radius);
	background: var(--hv3-colour);
	padding: clamp(1.5rem, 1.9vw, 2.25rem);
}
.home-v3-card {
	display: flex;
	flex-direction: column;
	transition: transform .4s var(--hv3-ease), box-shadow .4s ease, opacity .8s var(--hv3-ease);
}
.home-v3-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
}
.home-v3-card:hover {
	box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .1);
}
.home-v3-card__head {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.home-v3-card__icon {
	flex: 0 0 auto;
	width: 3.125rem;
	height: 3.125rem;
	object-fit: contain;
}
.home-v3 .home-v3-card__title {
	font-family: var(--font-sf-pro-display);
	font-weight: 700;
	font-size: 1.5625rem;
	line-height: 1.3;
	margin: 0;
}
.home-v3 .home-v3-card__text {
	margin: 1.25rem 0 1.5rem;
}
.home-v3-card .home-v3-btn {
	margin-top: auto;
}

/* Tall card with phone mock up */
.home-v3-card--tall {
	z-index: 2;
	overflow: visible;
}
.home-v3-card--tall .home-v3-card__body {
	height: auto;
}
.home-v3-card--tall .home-v3-btn {
	margin-top: 0;
}
/* Round 7 (Jim): the phone now sits in the card flow straight under the button
   (about 32px gap at rest) instead of at a fixed 46% down the card, so the gap
   stays tight at every width and the phone never overlaps the button. The
   negative margins pull the media out to the card's right and bottom edges and
   past its left edge, as before. */
.home-v3-card--tall {
	--hv3-card-pad: clamp(1.5rem, 1.9vw, 2.25rem);
}
.home-v3-card__media {
	position: relative;
	flex: 1 1 auto;
	min-height: 16rem;
	margin: .75rem calc(-1 * var(--hv3-card-pad)) calc(-1 * var(--hv3-card-pad)) calc(-1 * var(--hv3-card-pad) - 2.875rem);
	overflow: hidden;
	border-bottom-right-radius: var(--hv3-radius);
	pointer-events: none;
}
.home-v3-card__phone {
	position: absolute;
	left: 0;
	top: .75rem;
	width: 108%;
	max-width: none;
	height: auto;
	transform: translateY(1.5rem) rotate(-2deg);
	transition: transform 1.1s var(--hv3-ease);
}
.home-v3-card--tall.is-visible .home-v3-card__phone {
	transform: none;
}
.home-v3-card--tall:hover .home-v3-card__phone {
	transform: translateY(-.75rem);
}

/* Stat carousel */
.home-v3-stats {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding-bottom: 3.25rem;
}
.home-v3-stats__track {
	display: grid;
	flex: 1;
}
.home-v3-stats__slide {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	opacity: 0;
	transform: translateX(100%);
	transition: transform .7s var(--hv3-ease), opacity .5s ease;
	visibility: hidden;
}
.home-v3-stats__slide.is-active {
	opacity: 1;
	transform: none;
	visibility: visible;
}
.home-v3-stats__slide.is-leaving {
	opacity: 0;
	transform: translateX(-60%);
	visibility: visible;
}
.home-v3-stats__logo {
	display: block;
	height: 3.125rem;
	width: auto;
	max-width: 70%;
	object-fit: contain;
}
.home-v3 .home-v3-stats__label {
	font-family: var(--font-sf-pro-display);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.3;
	margin: auto 0 .25rem;
	padding-top: 1.25rem;
}
.home-v3 .home-v3-stats__value {
	display: flex;
	align-items: flex-start;
	gap: .25rem;
	font-family: var(--font-sf-pro-display);
	font-weight: 700;
	font-size: 4.5rem;
	line-height: 1;
	margin: 0;
	font-variant-numeric: tabular-nums;
}
.home-v3-stats__arrow {
	width: 2.25rem;
	height: auto;
	margin-top: .1em;
}
@keyframes hv3-arrow-up {
	from { transform: translateY(1.25rem); opacity: 0; }
	to   { transform: none; opacity: 1; }
}
.home-v3-stats__bars {
	position: absolute;
	left: clamp(1.5rem, 1.9vw, 2.25rem);
	right: clamp(1.5rem, 1.9vw, 2.25rem);
	bottom: 1.25rem;
	display: flex;
	gap: 1.25rem;
}
.home-v3-stats__bar {
	flex: 1;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
}
.home-v3-stats__bar span {
	position: relative;
	display: block;
	width: 100%;
	height: .25rem;
	border-radius: .625rem;
	background: rgba(255, 255, 255, .45);
	overflow: hidden;
}
.home-v3-stats__bar span::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--so-black);
	transform: scaleX(0);
	transform-origin: left center;
}
.home-v3-stats__bar.is-done span::after {
	transform: scaleX(1);
}
.home-v3-stats__bar.is-active span::after {
	animation: hv3-fill var(--hv3-stat-duration, 4.5s) linear forwards;
}
.home-v3-stats.is-paused .home-v3-stats__bar.is-active span::after {
	animation-play-state: paused;
}
@keyframes hv3-fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* SO CRM bento card */
.home-v3-crm-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
	overflow: hidden;
	transition: box-shadow .4s ease, opacity .8s var(--hv3-ease), transform .8s var(--hv3-ease);
}
.home-v3-crm-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
}
.home-v3-crm-card__logo {
	height: 2.5rem;
	width: auto;
}
.home-v3 .home-v3-crm-card__title {
	font-family: var(--font-sf-pro-display);
	font-weight: 700;
	font-size: 1.5625rem;
	line-height: 1.3;
	margin: 0;
}
/* Laptop: sits on the right and bleeds off the card's right and bottom
   edges as in the proof. Only the card clips it (never its own box), so the
   left edge of the laptop is never cut off while it slides in or on hover. */
.home-v3-crm-card__media {
	position: absolute;
	top: 1.5rem;
	left: 59.5%;
	height: 163%;
	width: auto;
	overflow: visible;
	pointer-events: none;
}
.home-v3-crm-card__img {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	transition: transform 1.1s var(--hv3-ease);
}
.hv3-js .home-v3-crm-card .home-v3-crm-card__img {
	transform: translateX(35%);
}
.hv3-js .home-v3-crm-card.is-visible .home-v3-crm-card__img {
	transform: none;
	transition-delay: calc(var(--hv3-reveal-delay, 0s) + .2s);
}
.home-v3-crm-card.is-visible:hover .home-v3-crm-card__img,
.home-v3-crm-card:hover .home-v3-crm-card__img {
	transform: translateX(-1.5rem);
	transition-delay: 0s;
}

/* ==========================================================================
   Logo marquee (existing trusted_tools_platforms template)
   ========================================================================== */
.home-v3 .trusted-tools-platforms {
	margin-top: 1.875rem;
}
.home-v3 .trusted-logo img {
	display: block;
	height: 1.875rem;                 /* 30px logo height from Figma */
	width: auto;
	max-width: none;
}
@media (max-width: 767px) {
	.home-v3 .trusted-logo img { height: 1.5rem; }
}
.home-v3 .trusted-logos-scroll-outer:hover .trusted-logos-scroll-inner {
	animation-play-state: paused;
}

/* ==========================================================================
   SO CRM slider
   ========================================================================== */
.home-v3-crm {
	margin-top: 6.25rem;
	padding: 6.25rem 0;
	overflow: hidden;
}
.home-v3-crm__inner {
	display: grid;
	grid-template-columns: minmax(18rem, 27.3125rem) minmax(0, 1fr);
	column-gap: clamp(2rem, 9.3vw, 11.1875rem);
	align-items: start;
	padding-left: clamp(1.5rem, 10.63vw, 12.75rem);
}
.home-v3 .home-v3-crm__title {
	font-family: var(--font-sf-pro-display);
	font-weight: 700;
	font-size: 4.5rem;
	line-height: 1;
	margin: 0;
}
.home-v3 .home-v3-crm__subtitle {
	font-family: var(--font-sf-pro-display);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.3;
	margin: .25rem 0 0;
	max-width: 20rem;
}
.home-v3-crm__content {
	margin-top: 3rem;
}
.home-v3-crm__content p {
	margin: 0 0 .625rem;
}
.home-v3 .home-v3-crm__btn {
	margin-top: 2.5rem;
	min-width: 15.625rem;
}

.home-v3-crm__slider {
	position: relative;
	min-width: 0;
}
.home-v3-crm__viewport {
	position: relative;
	height: 31.5625rem;               /* 505px */
}
.home-v3-crm__track {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	height: 100%;
}
/* Figma (SO CRM "Mask group" component set, 12 variants): the first card sits on
   its own; every 8s the next card slides in from the right edge of the page
   (0.8s ease in and out) and stops 140px to the right of the one before, so the
   deck builds up left to right. After the sixth card they all slide back out
   and it starts again. Later cards sit on top of earlier ones. Cards are 350 x
   505 with a 50px radius; the 140px step comes from the column width here. */
.home-v3-crm__slide {
	--hv3-step: calc((100% - 21.875rem) / max(1, var(--hv3-n, 6) - 1));
	position: absolute;
	top: 0;
	left: calc(var(--hv3-step) * var(--hv3-i, 0));
	width: 21.875rem;                 /* 350px */
	height: 100%;
	margin: 0;
	border-radius: var(--hv3-radius-lg);
	background: var(--hv3-colour);
	padding: 3.125rem 2rem 2.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	cursor: pointer;
	z-index: calc(1 + var(--hv3-i, 0));
	box-shadow: -.75rem 0 2rem rgba(0, 0, 0, .1);
	transform: translateX(0);
	transition: transform .8s cubic-bezier(.42, 0, .58, 1), visibility 0s linear 0s;
}
.home-v3-crm__slide:first-child { box-shadow: none; }
/* Not yet in: parked past the right edge of the page (the section clips it). */
.home-v3-crm__slide.is-off {
	transform: translateX(100vw);
	visibility: hidden;
	transition: transform .8s cubic-bezier(.42, 0, .58, 1), visibility 0s linear .8s;
}
.home-v3-crm__slider.is-static .home-v3-crm__slide,
.home-v3-crm__slider.is-static .home-v3-crm__progress span { transition: none; }
/* MacBook tile, as in Figma: 275px wide, 50px below the top of the card, never masked or cropped. */
.home-v3-crm__media {
	width: 17.1875rem;                /* 275px */
	height: 11rem;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}
.home-v3-crm__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.home-v3 .home-v3-crm__slide-title {
	font-family: var(--font-sf-pro-display);
	font-weight: 700;
	font-size: 1.5625rem;
	line-height: 1.25;
	margin: 2rem 0 0;
}
.home-v3 .home-v3-crm__slide-text {
	margin: 1.5rem 0 0;
}
.home-v3-crm__controls {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin-top: 1.5rem;
	padding-right: clamp(1.5rem, 2.6vw, 3.125rem);
}
.home-v3-crm__progress {
	position: relative;
	flex: 1 1 auto;
	max-width: 51.9375rem;            /* 831px */
	height: .25rem;
	border-radius: .125rem;
	background: #d9d9d9;
	margin-top: 3.5rem;
}
.home-v3-crm__progress span {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-radius: inherit;
	background: var(--so-black);
	min-width: 1.5625rem;             /* 25px, as in Figma */
	width: 3%;
	transition: width .4s var(--hv3-ease);
}
/* While a card is waiting, the bar fills from 25px to full in a straight line,
   as in Figma; it snaps back as the next card slides in. */
.home-v3-crm__progress span.is-running {
	width: 100%;
	transition: width var(--hv3-crm-delay, 6s) linear;
}
.home-v3-crm__arrows {
	display: flex;
	gap: 3.125rem;
	margin-left: auto;
}

/* ==========================================================================
   Video
   ========================================================================== */
.home-v3-video {
	margin-top: 4.6875rem;
}
.home-v3-video__frame {
	position: relative;
	max-width: 74.8125rem;            /* 1197px */
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--hv3-radius);
	overflow: hidden;
	background: #1a1a1a;
}
.home-v3-video__el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.home-v3-video__controls {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	display: flex;
	gap: .75rem;
}
.home-v3-video__btn {
	width: 3.125rem;
	height: 3.125rem;
	border-radius: 50%;
	border: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--so-yellow);
	color: var(--so-black);
	cursor: pointer;
	transition: transform .3s var(--hv3-ease-bounce), background-color .3s ease;
}
.home-v3-video__btn:hover,
.home-v3-video__btn:focus-visible {
	transform: scale(1.1);
	background: var(--so-white);
}
.home-v3-video__btn .i-pause,
.home-v3-video__btn .i-sound { display: none; }
.home-v3-video__btn[data-hv3-play][aria-pressed="true"] .i-play { display: none; }
.home-v3-video__btn[data-hv3-play][aria-pressed="true"] .i-pause { display: block; }
.home-v3-video__btn[data-hv3-mute][aria-pressed="false"] .i-muted { display: none; }
.home-v3-video__btn[data-hv3-mute][aria-pressed="false"] .i-sound { display: block; }

/* ==========================================================================
   AI search
   ========================================================================== */
.home-v3-ai {
	margin-top: 1rem;
}
.home-v3-ai__grid {
	display: grid;
	grid-template-columns: minmax(0, 56.125rem) minmax(0, 1fr);  /* 898px */
	column-gap: clamp(2rem, 9.4vw, 11.25rem);
	align-items: center;
	min-height: 46.875rem;            /* 750px */
}
.home-v3-ai__visual {
	position: relative;
	height: 46.875rem;
}
.home-v3-ai__img {
	position: absolute;
	left: 0;
	right: 0;
	top: 13.47%;
	bottom: 0;
	width: 100%;
	height: 86.4%;
	object-fit: contain;
	object-position: center top;
}
.home-v3-ai__callouts {
	list-style: none;
	margin: 0;
	padding: 0;
}
.home-v3-ai__callout {
	position: absolute;
	width: 36.2%;
	min-height: 5rem;
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: 1.25rem;
	border-radius: .9375rem;
	background: var(--hv3-colour);
	font-family: var(--font-sf-pro-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.35;
	box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .08);
}
.home-v3-ai__callout--1 { left: 0;     top: 17.84%; }
.home-v3-ai__callout--2 { right: 0;    top: 34.72%; }
.home-v3-ai__callout--3 { left: 0;     top: 51.69%; }
.home-v3-ai__callout--4 { right: 0;    top: 68.89%; }
.home-v3-ai__callout-icon {
	flex: 0 0 auto;
	width: 1.5625rem;
	height: 1.5625rem;
	object-fit: contain;
}
/* The sequence: phone rises, then each callout pops in (Figma starts them at opacity 0) */
.hv3-js .home-v3-ai__img {
	opacity: 0;
	transform: translateY(3rem);
	transition: opacity 1s var(--hv3-ease), transform 1s var(--hv3-ease);
}
.hv3-js .home-v3-ai__callout {
	opacity: 0;
	transform: translateY(1.25rem) scale(.85);
	transition: opacity .6s var(--hv3-ease), transform .6s var(--hv3-ease-bounce);
	transition-delay: calc(.5s + var(--hv3-step, 0) * .45s);
}
.hv3-js .home-v3-ai__visual.is-playing .home-v3-ai__img,
.hv3-js .home-v3-ai__visual.is-playing .home-v3-ai__callout {
	opacity: 1;
	transform: none;
}
.home-v3-ai__visual.is-done .home-v3-ai__callout {
	animation: hv3-bob 5s ease-in-out infinite;
	animation-delay: calc(var(--hv3-step, 0) * -1.2s);
}
@keyframes hv3-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-.5rem); }
}
.home-v3 .home-v3-ai__label {
	margin: 0 0 .75rem;
}
.home-v3 .home-v3-ai__heading {
	font-family: var(--font-sf-pro-display);
	font-weight: 700;
	font-size: 4.5rem;
	line-height: 1;
	margin: 0;
	max-width: 34rem;
}
.home-v3-ai__text {
	margin-top: 3.75rem;
	max-width: 36rem;
}
.home-v3 .home-v3-ai__btn {
	margin-top: 4.375rem;
	min-width: 15.625rem;
}
.home-v3-divider {
	border: 0;
	border-top: 1px solid var(--so-black);
	margin: 1rem 0 0;
}
.home-v3-cta.so-cta-row {
	margin-top: 3.125rem;
}
.home-v3 .home-v3-cta__tel {
	color: inherit;
	text-decoration: none;
	font-weight: inherit;
}
.home-v3 .home-v3-cta__tel:hover {
	text-decoration: underline;
}
/* The "Call 01538 750538" line is a <p class="h3-style"> (not a heading),
   so give it the theme's heading type treatment. */
.home-v3 .so-cta-content .main-heading {
	margin: 1.125rem 0 0;
	font-size: 3.125rem;
	font-family: var(--font-sf-pro-display);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}
@media (max-width: 991px) {
	.home-v3 .so-cta-content .main-heading { font-size: 2.5rem; }
}
@media (max-width: 767px) {
	.home-v3 .so-cta-content .main-heading { font-size: 1.625rem; margin-top: .625rem; }
}
/* Services carousel: card titles are H3 (were H5) for a logical outline,
   styled exactly as before. */
.home-v3 .service-card .service-card__title {
	margin-top: 0;
	margin-bottom: 1.4375rem;
	font-family: var(--font-sf-pro-display);
	font-weight: 700;
	line-height: 1;
}
@media (max-width: 767px) {
	.home-v3 .service-card .service-card__title { margin-bottom: .8125rem; }
}
/* Optional SEO line above the hero H1 text (inside the H1). */
.home-v3 .home-v3-hero__kicker {
	display: block;
	margin-bottom: 1rem;
	font-family: var(--font-sf-pro-display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
}
.home-v3 .home-v3-hero__title-main { display: block; }
@media (max-width: 767px) {
	.home-v3 .home-v3-hero__kicker { font-size: 1rem; margin-bottom: .75rem; }
}

/* ==========================================================================
   Sticky CTA (mobile and tablet)
   ========================================================================== */
.home-v3-sticky-cta {
	display: none;
}

/* ==========================================================================
   Large desktop to laptop
   ========================================================================== */
@media (max-width: 1599px) {
	.home-v3-bento__grid {
		grid-auto-rows: minmax(19rem, auto);
	}
	.home-v3 .home-v3-stats__value { font-size: 3.75rem; }
	.home-v3 .home-v3-stats__label { font-size: 1.75rem; }
	.home-v3 .home-v3-ai__heading { font-size: 3.75rem; }
	.home-v3-ai__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

@media (max-width: 1199px) {
	.home-v3 .home-v3-hero__title { font-size: 3.75rem; }
	.home-v3 .home-v3-hero__subtitle { font-size: 1.625rem; }
	.home-v3-bento__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"c1 c2"
			"st c2"
			"c3 c4"
			"crm crm";
	}
	.home-v3-crm__inner {
		grid-template-columns: 1fr;
		row-gap: 3rem;
		/* Back to the theme .layout-padding gutters on both sides. */
		padding-left: 1.5rem;
	}
	.home-v3 .home-v3-crm__title { font-size: 3.75rem; }
	.home-v3-ai__grid {
		grid-template-columns: 1fr;
		row-gap: 2.5rem;
		min-height: 0;
	}
	.home-v3-ai__visual {
		height: auto;
		aspect-ratio: 898 / 750;
		max-width: 56.125rem;
		width: 100%;
		margin: 0 auto;
	}
	.home-v3 .home-v3-ai__heading { font-size: 3.125rem; max-width: none; }
	.home-v3-ai__text { margin-top: 1.875rem; }
	.home-v3 .home-v3-ai__btn { margin-top: 2.5rem; }
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 991px) {
	.home-v3-hero {
		min-height: 0;
		padding-top: 3.125rem;
		padding-bottom: 2.5rem;
	}
	/* Smaller screens: keep the sphere behind the hero card; the hero clips the overflow. */
	.home-v3-hero__bg {
		top: 9rem;
		width: max(150%, 80rem);
	}
	.home-v3 .home-v3-hero__title { font-size: 3.125rem; max-width: 40rem; }
	.home-v3 .home-v3-hero__subtitle { font-size: 1.375rem; }
	.home-v3-hero__stage {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		height: auto;
		transform: none;
		margin-top: 2rem;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.home-v3-hero__orbit {
		display: flex;
		justify-content: center;
		gap: 1.5rem;
		order: 2;
		margin-top: 1.75rem;
	}
	.home-v3-hero__point {
		position: relative;
		left: auto !important;
		top: auto !important;
		animation-name: hv3-bob;
		animation-duration: 4s;
		animation-timing-function: ease-in-out;
	}
	.home-v3-hero__card {
		position: relative;
		left: auto;
		top: auto;
		order: 1;
		width: min(21.875rem, 100%);
	}
	.home-v3-hero__nav {
		order: 3;
		display: flex;
		justify-content: center;
		gap: 1.5rem;
		margin-top: 1.75rem;
	}
	.home-v3-crm { margin-top: 4.375rem; padding: 4.375rem 0; }

	/* sticky CTA */
	/* Centred on the viewport at every width (Jim, round 8). Equal 5.5rem side
	   gutters keep it clear of the LeadConnector chat launcher (bottom left,
	   about 76px) without pushing it off centre. */
	.home-v3-sticky-cta {
		position: fixed;
		z-index: 900;
		left: 0;
		right: 0;
		width: min(calc(100% - 11rem), 36rem);
		margin-left: auto;
		margin-right: auto;
		bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
		display: flex;
		gap: .5rem;
		padding: .5rem;
		border-radius: 2.5rem;
		background: var(--so-white);
		box-shadow: 0 .5rem 1.75rem rgba(0, 0, 0, .18);
		transform: translateY(160%);
		transition: transform .45s var(--hv3-ease);
	}
	.home-v3-sticky-cta.is-shown {
		transform: none;
	}
	.home-v3-sticky-cta .site-btn {
		flex: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .5rem;
		padding: .875rem 1rem;
		font-size: 1rem;
		white-space: nowrap;
	}
	.home-v3-sticky-cta__call {
		background: var(--so-black);
		color: var(--so-white);
	}
	.home-v3-page:not(.hv3-no-sticky) .site-footer {
		padding-bottom: 6rem;
	}
}
@media (max-width: 479px) {
	.home-v3-sticky-cta__num { display: none; }
	.home-v3-sticky-cta { gap: .375rem; padding: .375rem; }
	.home-v3-sticky-cta .site-btn { padding: .75rem .625rem; font-size: .9375rem; gap: .375rem; }
	.home-v3-sticky-cta__call { flex: 0 1 auto; }
}
/* Switched off (ACF "Show sticky call bar" unticked, or the
   SO_HOME_V3_STICKY_CTA constant set to false): the bar is not output at all;
   this class is a belt and braces CSS switch for the same thing. */
.hv3-no-sticky .home-v3-sticky-cta { display: none !important; }

/* ==========================================================================
   Tablet portrait (stacked hero): arrows either side of the service card,
   vertically centred on it, icon row underneath (Jim, round 8)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
	.home-v3-hero__stage {
		display: grid;
		grid-template-columns: 3.75rem minmax(0, 21.875rem) 3.75rem;  /* arrow, card, arrow */
		grid-template-areas:
			"prev card next"
			"orbit orbit orbit";
		justify-content: center;
		align-items: center;
		column-gap: 1.75rem;
	}
	.home-v3-hero__card { grid-area: card; width: 100%; }
	.home-v3-hero__orbit { grid-area: orbit; justify-self: center; }
	.home-v3-hero__nav { display: contents; }
	.home-v3-hero__nav [data-hv3-prev] { grid-area: prev; }
	.home-v3-hero__nav [data-hv3-next] { grid-area: next; }
}

/* Clients we work with, tablet and mobile: a short last row is centred
   instead of sitting in the left column (Jim, round 8). Flex wrap with the
   same column widths and gaps as the theme grid. */
@media (max-width: 991px) {
	.home-v3 .client-logos {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		--hv3-logo-gap: 3.125rem;
		column-gap: var(--hv3-logo-gap);
	}
	.home-v3 .client-logos .client-logo {
		flex: 0 0 calc((100% - 2 * var(--hv3-logo-gap)) / 3);
		min-width: 0;
	}
}
@media (max-width: 767px) {
	.home-v3 .client-logos .client-logo {
		flex-basis: calc((100% - var(--hv3-logo-gap)) / 2);
	}
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767px) {
	.home-v3 .home-v3-hero__title { font-size: 2.5rem; line-height: 1.05; }
	.home-v3 .home-v3-hero__subtitle { font-size: 1.25rem; }
	.home-v3-hero__bg { top: 5.5rem; width: max(230%, 56rem); }
	.home-v3-hero__orbit { display: none; }
	.home-v3-hero__card {
		width: min(18.5rem, 100%);
		min-height: 14rem;
		padding: 1.5rem 1.25rem;
	}
	.home-v3 .home-v3-hero__usp-title { font-size: 1.25rem; }

	.home-v3-bento__grid {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		grid-template-areas: "c1" "st" "c2" "c3" "c4" "crm";
		gap: 1rem;
	}
	.home-v3-card,
	.home-v3-stats,
	.home-v3-crm-card { padding: 1.5rem; }
	.home-v3 .home-v3-card__title { font-size: 1.375rem; }
	.home-v3 .home-v3-btn { min-width: 0; }
	.home-v3-card--tall { min-height: 33rem; }
	.home-v3-card--tall { --hv3-card-pad: 1.5rem; }
	.home-v3-card__media { min-height: 17rem; margin-left: calc(-1 * var(--hv3-card-pad)); border-radius: 0 0 var(--hv3-radius) var(--hv3-radius); }
	.home-v3-card__phone { left: 1rem; width: 92%; }
	/* The shorthand padding above dropped the bottom space the progress bars sit
	   in; keep a clear gap between the number and the bars. */
	.home-v3-stats { min-height: 16rem; padding-bottom: 4.5rem; }
	.home-v3 .home-v3-stats__value { font-size: clamp(2.75rem, 14vw, 3.5rem); }
	.home-v3-stats__arrow { width: clamp(1.75rem, 9vw, 2.25rem); }
	.home-v3-stats__bars { left: 1.5rem; right: 1.5rem; }
	.home-v3-crm-card {
		grid-template-columns: minmax(0, 1fr);
		padding-bottom: 0;
	}
	.home-v3-crm-card__media {
		position: relative;
		top: auto;
		left: auto;
		width: auto;
		min-width: 0;
		height: 14rem;
		margin: 1.5rem -1.5rem 0 0;
	}
	.home-v3-crm-card__img { height: 140%; }

	/* Mobile: bring "Talk to us" up so it sits straight after the services and
	   results block (bento), instead of at the very bottom. CSS order only, so
	   there is still one form on the page and desktop order is unchanged. */
	main.home-v3 { display: flex; flex-direction: column; }
	main.home-v3 > * { min-width: 0; }
	main.home-v3 > .home-v3-hero,
	main.home-v3 > .home-v3-bento { order: -2; }
	main.home-v3 > .talk-to-us-section { order: -1; }

	.home-v3-crm { margin-top: 3.125rem; padding: 3.125rem 0; }
	.home-v3-crm__intro { text-align: center; }
	.home-v3 .home-v3-crm__title { font-size: 3.125rem; }
	.home-v3 .home-v3-crm__subtitle { font-size: 1.375rem; margin-left: auto; margin-right: auto; }
	.home-v3-crm__content { margin-top: 1.5rem; }
	/* Mobile: every tile visible in a two column grid; the highlight moves */
	/* One card at a time: each card slides in from the right over the one
	   before; swipe or use the arrows. */
	.home-v3-crm__viewport { height: 31.5625rem; margin-top: 2rem; max-width: 21.875rem; margin-left: auto; margin-right: auto; overflow: hidden; border-radius: var(--hv3-radius-lg); }
	.home-v3-crm__slide { left: 0; width: 100%; box-shadow: none; }
	.home-v3-crm__slide.is-off { transform: translateX(110%); }
	.home-v3-crm__slide.is-under { visibility: hidden; transition: visibility 0s linear .8s; }
	.home-v3-crm__controls { flex-direction: column; padding-right: 0; gap: 1.25rem; }
	.home-v3-crm__progress { width: 100%; margin-top: .5rem; }
	.home-v3-crm__arrows { margin: 0 auto; gap: 2.5rem; }

	.home-v3-video { margin-top: 3.125rem; }
	.home-v3-video__frame { aspect-ratio: 4 / 3; }
	.home-v3-video__controls { right: .75rem; bottom: .75rem; }

	.home-v3 .home-v3-ai__heading { font-size: 2.5rem; }
	.home-v3-ai__visual { aspect-ratio: 390 / 420; }
	.home-v3-ai__img { top: 6%; height: 94%; }
	.home-v3-ai__callout { width: 46%; padding: .75rem; gap: .5rem; font-size: .875rem; min-height: 0; }
	.home-v3-ai__callout--1 { top: 8%; }
	.home-v3-ai__callout--2 { top: 28%; }
	.home-v3-ai__callout--3 { top: 56%; }
	.home-v3-ai__callout--4 { top: 74%; }
	.home-v3-ai__callout-icon { width: 1.25rem; height: 1.25rem; }
}

/* ==========================================================================
   Existing sections, Home v3 tweaks (scoped, the rest of the site is unchanged)
   ========================================================================== */
/* Who We Are: Figma puts the photo on the left on desktop */
@media (min-width: 992px) {
	.home-v3 .who-we-are-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
	}
	.home-v3 .who-we-are-grid > .media { order: -1; }
}
/* Clients: Figma logo sizes at 1920. Each logo is at most 150px wide and
   75px tall; very wide wordmarks keep a 24px minimum height (Caudwell is
   233 x 24 in the proof). home-v3.js sets the exact height per logo from its
   aspect ratio; these limits are the no-JS fallback. */
.home-v3 .client-logos {
	--hv3-logo-scale: 1;
	max-width: 89rem;
	margin-left: auto;
	margin-right: auto;
}
.home-v3 .client-logos .client-logo img,
.home-v3 .client-logos .client-logo svg {
	width: auto;
	height: auto;
	max-width: min(100%, 9.375rem);   /* 150px */
	max-height: 4.6875rem;            /* 75px */
}
.home-v3 .client-logos .client-logo img.is-sized {
	max-width: 100%;
	max-height: none;
}
@media (max-width: 1439px) { .home-v3 .client-logos { --hv3-logo-scale: .9; } }
@media (max-width: 991px)  { .home-v3 .client-logos { --hv3-logo-scale: .8; } }
@media (max-width: 767px)  {
	.home-v3 .client-logos { --hv3-logo-scale: .7; }
	.home-v3 .client-logos .client-logo { height: auto; min-height: 3.125rem; }
}
/* Talk to us: budget select matches the theme inputs */
.home-v3 .talk-to-us-section select {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	border: none;
	border-radius: .9375rem;
	font-size: 1.3125rem;
	line-height: 1.9688rem;
	padding: 1.5625rem 3.5rem 1.5625rem 1.25rem;
	font-family: var(--font-sf-pro-text);
	color: var(--so-black);
	background: var(--so-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 1.5rem center;
	cursor: pointer;
}
.home-v3 .talk-to-us-section .acceptance-field a {
	text-decoration: underline;
	color: inherit;
}
.home-v3 .talk-to-us-section input:focus-visible,
.home-v3 .talk-to-us-section select:focus-visible,
.home-v3 .talk-to-us-section textarea:focus-visible {
	outline: 3px solid var(--so-black);
	outline-offset: 2px;
}
@media (max-width: 1599px) {
	.home-v3 .talk-to-us-section select { font-size: 1rem; line-height: 1.5rem; padding: 1.0625rem 3rem 1.0625rem 1.25rem; border-radius: .625rem; }
}

/* ==========================================================================
   Reduced motion: no orbit, marquee, autoplay or entrance animations
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.home-v3 *,
	.home-v3 *::before,
	.home-v3 *::after,
	.home-v3-sticky-cta {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
	.home-v3-hero__point,
	.home-v3 .trusted-logos-scroll-inner,
	.home-v3-ai__visual.is-done .home-v3-ai__callout {
		animation: none !important;
	}
	.hv3-js [data-hv3-reveal],
	.hv3-js .home-v3-ai__img,
	.hv3-js .home-v3-ai__callout,
	.home-v3-hero__card,
	.home-v3-hero__icon {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* CRM controls (pause button removed in round 5; autoplay pauses only off screen or on keyboard focus, round 7) */
.home-v3-crm__arrows { align-items: center; }

/* Pause looping decoration when the hero is off screen */
.home-v3-hero.is-offscreen .home-v3-hero__point,
.home-v3-hero.is-offscreen .home-v3-hero__icon::after {
	animation-play-state: paused;
}
.home-v3-crm__slide:focus-visible {
	outline: 3px solid var(--so-black);
	outline-offset: 4px;
}

/* Talk to us: vector "Let's discuss your project" badge. The lettering ring
   rotates; the bottle stays still, as on the existing theme badge. */
.home-v3 .lets-discuss-logo.home-v3-badge-wrap {
	background: var(--so-white);
}
.home-v3-badge {
	position: absolute;
	inset: 0;
	display: block;
}
.home-v3-badge svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.home-v3-badge__ring {
	transform-origin: 50% 50%;
	animation: hv3-badge-spin 14s linear infinite;
}
@keyframes hv3-badge-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.home-v3-badge__ring { animation: none !important; }
}

/* ------------------------------------------------------------------ *
 * Round 5 feedback
 * ------------------------------------------------------------------ */

/* Bento tiles: icons static (no hover wobble, no stat arrow rise) */
.home-v3 .home-v3-card__icon,
.home-v3 .home-v3-stats__arrow {
	transition: none;
	animation: none;
	transform: none;
}

/* Eyebrow pre-headers about 18% larger at every breakpoint */
.home-v3 p.section-label { font-size: 1.1875rem; line-height: 1.3; }            /* 16 -> 19px */
.home-v3 .home-v3-hero__kicker { font-size: 1.4375rem; }                          /* 20 -> 23px */
.home-v3 .so-cta-content span.label { font-size: 1.75rem; line-height: 1.1; }     /* 25 -> 28px */
@media (max-width: 1199px) {
	.home-v3 p.section-label { font-size: 1.875rem; line-height: 1.2; }           /* 28 -> 30px */
}
@media (max-width: 991px) {
	.home-v3 p.section-label { font-size: 1.6875rem; line-height: 1.1; }          /* 25 -> 27px */
}
@media (max-width: 767px) {
	.home-v3 .home-v3-hero__kicker { font-size: 1.125rem; }                       /* 16 -> 18px */
	.home-v3 .so-cta-content span.label { font-size: 1.375rem; }                  /* 20 -> 22px */
}

/* Black buttons: brand yellow (#F4D35E) hover with black text. A thin black
   ring keeps the button visible on yellow cards and the yellow form box. */
.home-v3-page .btn-black:hover,
.home-v3-page .btn-black:focus-visible,
.home-v3 .home-v3-btn:hover,
.home-v3 .home-v3-btn:focus-visible,
.home-v3 .wpcf7-form .wpcf7-submit:hover,
.home-v3 .wpcf7-form .wpcf7-submit:focus-visible,
.home-v3-page .home-v3-sticky-cta__call:hover,
.home-v3-page .home-v3-sticky-cta__call:focus-visible,
.home-v3-page .btn-black-yellow:hover,
.home-v3-page .btn-black-yellow:focus-visible {
	background: var(--so-yellow);
	border-color: var(--so-black);
	color: var(--so-black);
	/* Round 7 (Jim): 2px solid black outline on every yellow hover/focus state,
	   e.g. "Discover who we are" and "Contact us". Drawn inside the button so
	   nothing shifts. */
	box-shadow: inset 0 0 0 2px var(--so-black), 0 .5rem 1.25rem rgba(0, 0, 0, .12);
}

/* Round 7 (Jim): teal CTA strip uses contact-us-icon.svg (not the form badge).
   SVG uploads report 1x1 to WordPress, so size it here (25px, as in Figma). */
.home-v3 .so-cta-icon img {
	display: block;
	width: 1.5625rem;
	height: 1.5625rem;
	max-width: none;
	object-fit: contain;
}

/* Round 9 (Jim): Services on landscape tablet (992 to 1199px). The theme shows
   three cards in a row with the fourth spanning the full width underneath, so
   on Home v3 use an even 2 x 2 grid with matching cards. Other pages keep the
   theme layout. */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.home-v3 .service-cards .card-grid-4Columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.home-v3 .service-cards .card-grid-4Columns.has-4-cards .even-card:last-of-type {
		grid-column: auto;
	}
	.home-v3 .service-cards .card-grid-4Columns.has-4-cards .even-card:last-of-type .card-thumb,
	.home-v3 .service-cards .card-grid-4Columns.has-4-cards .even-card:last-of-type .card-thumb img {
		height: auto;
	}
}

/* Round 10 (Jim, 3 Nov 2026): mobile menu and Services cards on iPhone.
   1. Mobile menu: the theme sizes the fixed menu panel at 100vh from 72px
      down. On iPhone Safari 100vh is the height with the toolbars hidden, so
      the bottom of the panel sits under the Safari toolbar and the menu snaps
      back before the email address can be scrolled into view. Size the panel
      to the visible viewport (dvh, with a vh fallback) so it can scroll to the
      end, and keep the scroll inside the menu. */
@media only screen and (max-width: 991px) {
	.home-v3-page .hamburger-wrapper {
		height: calc(100vh - 4.5rem);
		height: calc(100dvh - 4.5rem);
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	.home-v3-page.admin-bar .hamburger-wrapper {
		height: calc(100vh - 7.375rem);
		height: calc(100dvh - 7.375rem);
	}
}
/* 2. Services cards (mobile carousel): when a card becomes the active slide its
      colour layer fades from 30% to 100%. WebKit composites that fading layer
      above the card's image and text, so the Design and Website Support cards
      flash a solid wash of colour mid-swipe. Give the card content its own
      layer so it always stays above the fading colour. */
@media only screen and (max-width: 767px) {
	.home-v3 .service-cards .service-card > * {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}

/* ==========================================================================
   Round 11 (James, 3 Nov 2026): the six hero USP icons are now links to their
   service pages. Keep them looking exactly like the old buttons.
   ========================================================================== */
a.home-v3-hero__icon,
a.home-v3-hero__icon:hover,
a.home-v3-hero__icon:focus { text-decoration: none; color: inherit; cursor: pointer; }

/* ==========================================================================
   Round 12 (Jim, 3 Nov 2026)
   1. Hero sphere video on tablet. When iOS refuses to autoplay (Low Power
      Mode, "Auto-Play Video Previews" off) it draws a grey start-playback
      button on the paused video, which sat behind the hero card. Never show
      the native media controls on this decorative video, and when the video
      is off (blocked, reduced motion, Save-Data) home-v3.js adds is-video-off:
      the video is hidden and the poster shows in its place, at the same 20%.
      One rule per pseudo-element: WebKit drops a whole selector list if it
      does not know one of them.
   2. Services on landscape tablet (992 to 1199px). Theme still prefers three
      columns with the fourth card spanning full width. Round 9 forced 2 x 2,
      but Jim still saw a huge gap between thumbs and titles and the lower
      row overlapping the upper one: above 767px the square <picture> was
      centred in a thumb capped at 436px, so once a card is wider than 436px
      the picture overflowed the thumb top and bottom. Fill the thumb exactly,
      keep the 2 x 2 grid solid, clip overflow, tighten the title padding, and
      drop the sticky :hover thumb lift on touch. Desktop (≥1200) and phones
      (≤767) stay as they are.
   ========================================================================== */
.home-v3-hero__video { -webkit-appearance: none; appearance: none; }
.home-v3-hero__video::-webkit-media-controls { display: none !important; -webkit-appearance: none; }
.home-v3-hero__video::-webkit-media-controls-enclosure { display: none !important; -webkit-appearance: none; }
.home-v3-hero__video::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; }
.home-v3-hero__video::-webkit-media-controls-overlay-enclosure { display: none !important; -webkit-appearance: none; }
.home-v3-hero__video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
.home-v3-hero__video::-webkit-media-controls-play-button { display: none !important; -webkit-appearance: none; }
.home-v3-hero__video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.home-v3-hero__bg.is-video-off::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hv3-poster, none) center / cover no-repeat;
	opacity: .2;
}
.home-v3-hero__bg.is-video-off .home-v3-hero__video { visibility: hidden; }

/* Picture must fill the thumb once cards are wider than the 436px thumb cap
   (2 x 2 on landscape tablet, and the wider portrait tablets). */
@media only screen and (min-width: 768px) {
	.home-v3 .service-cards .card-thumb {
		overflow: hidden;
	}
	.home-v3 .service-cards .card-thumb picture {
		display: block;
		width: 100%;
		height: 100%;
	}
	.home-v3 .service-cards .card-thumb img {
		width: 100%;
		height: 100%;
		max-height: none;
		object-fit: cover;
	}
}
@media only screen and (min-width: 768px) and (hover: none) {
	.home-v3 .service-cards .service-card:hover .service-thumb,
	.home-v3 .service-cards .service-card:focus .service-thumb {
		transform: none;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.home-v3 .service-cards .card-grid-4Columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
		align-items: start;
		gap: 1.5625rem; /* 25px, same as theme */
	}
	.home-v3 .service-cards .card-grid-4Columns .service-card,
	.home-v3 .service-cards .card-grid-4Columns .even-card,
	.home-v3 .service-cards .card-grid-4Columns .odd-card,
	.home-v3 .service-cards .card-grid-4Columns.has-4-cards .even-card:last-of-type {
		grid-column: span 1;
		grid-row: auto;
		display: flex;
		flex-direction: column;
		height: auto;
		min-height: 0;
		overflow: hidden;
		align-self: start;
	}
	.home-v3 .service-cards .card-grid-4Columns .service-card .card-thumb,
	.home-v3 .service-cards .card-grid-4Columns .service-card .card-thumb img,
	.home-v3 .service-cards .card-grid-4Columns.has-4-cards .even-card:last-of-type .card-thumb,
	.home-v3 .service-cards .card-grid-4Columns.has-4-cards .even-card:last-of-type .card-thumb img {
		width: 100%;
		max-width: 100%;
		height: auto;
		min-height: 0;
		max-height: none;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}
	.home-v3 .service-cards .card-grid-4Columns .service-card .card-thumb {
		display: block;
		flex: 0 0 auto;
		overflow: hidden;
	}
	.home-v3 .service-cards .card-grid-4Columns .service-card .card-thumb picture {
		display: block;
		width: 100%;
		height: 100%;
	}
	.home-v3 .service-cards .card-grid-4Columns .service-card .card-thumb img {
		display: block;
		width: 100%;
		height: 100%;
		max-height: none;
		aspect-ratio: auto;
		object-fit: cover;
	}
	.home-v3 .service-cards .card-grid-4Columns .service-card .service-card-content {
		padding-top: 1.5rem; /* 24px; theme 49px reads as a hole at 2-col width */
		flex: 1 1 auto;
	}
	.home-v3 .service-cards .card-grid-4Columns .service-card:hover .service-thumb,
	.home-v3 .service-cards .card-grid-4Columns .service-card:focus .service-thumb {
		transform: none;
	}
}