/* ==========================================================================
   ServiceConnect page
   ========================================================================== */

.serviceconnect-page { overflow: clip; color: #292728; }
.serviceconnect-page h1,
.serviceconnect-page h2,
.serviceconnect-page h3 { font-family: 'Bricolage Grotesque', sans-serif; margin: 0; }

/* Page banner -------------------------------------------------------------- */
.serviceconnect-page__hero { text-align: center; background: #f7faeb; padding: 80px 0; }
.serviceconnect-page__hero .eyebrow,
.serviceconnect-page__overview .eyebrow { margin-inline: auto; }
.serviceconnect-page__hero h1 { font-size: clamp(44px, 5vw, 75px); line-height: 1.1; font-weight: 800; margin: 8px 0 24px; }
.serviceconnect-page__breadcrumbs { display: flex; justify-content: center; align-items: center; gap: 7px; color: #62a420; font-weight: 600; }
.serviceconnect-page__breadcrumbs a { color: #545253; }

/* Overview + ServiceConnect graph ------------------------------------------
   Figma: "Services" frame 1089:4722, graph component 1089:4895.
   The section fades from transparent into #F7FAEB (Figma frame 1089:4894),
   which starts 10px below the heading and is solid 517px further down. */
.serviceconnect-page__overview {
	position: relative;
	isolation: isolate;
	text-align: center;
	padding: 100px 0 150px;
	background: linear-gradient(180deg, rgba(247, 250, 235, 0) 110px, #f7faeb 627px);
}
.serviceconnect-page__overview h2,
.serviceconnect-page__clients h2,
.serviceconnect-page__case-studies h2 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.25; }
.serviceconnect-page__overview h2 { max-width: 1131px; margin: 8px auto 0; }
.serviceconnect-page__overview > .container > p { max-width: 1068px; margin: 32px auto 0; color: #545253; line-height: 1.5; }

/* Figma ellipses: 600px, 20% opacity, radial #015E2F → #00A350 → #09CD6B, 400px blur. */
.serviceconnect-page__glow {
	position: absolute;
	z-index: -1;
	top: 788px;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: radial-gradient(circle closest-side, rgba(0, 163, 80, 0.14), rgba(9, 205, 107, 0.07) 55%, rgba(9, 205, 107, 0) 100%);
	filter: blur(60px);
	pointer-events: none;
}
.serviceconnect-page__glow--left { left: -130px; }
.serviceconnect-page__glow--right { right: -130px; }

/* Timing from the Figma prototype:
   - graph: Smart Animate, 0.6s, ease-out (Variant2 → Default and back)
   - circle hover: Smart Animate, 0.3s, ease-out
   The ring draw is slightly longer so the stroke is seen travelling round the image. */
.sc-graph {
	--sc-ease: cubic-bezier(0, 0, 0.58, 1);
	--sc-duration: 600ms;
	--sc-hover-duration: 300ms;
	--sc-ring-duration: 450ms;
	--sc-hover-ease: cubic-bezier(0, 0, 0.58, 1);
	width: min(100%, 897px);
	margin: 100px auto 0;
	container-type: inline-size;
	text-align: left;
}

.sc-graph__stage {
	position: relative;
	aspect-ratio: 897 / 800;
}

/* Arrows ------------------------------------------------------------------- */
.sc-graph__arrows {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}
.sc-graph__arrows line { stroke-width: 2; stroke-linecap: butt; }
.sc-graph__arrows circle { fill: #d8e59b; }
.sc-graph__arrow-group {
	transform-box: view-box;
	/* Figma's opening state is these arrows scaled to 17.6% around the stage centre. */
	transform-origin: 449px 400.5px;
	transition: transform var(--sc-duration) var(--sc-ease), opacity var(--sc-duration) var(--sc-ease);
}

/* ServiceConnect mark ------------------------------------------------------- */
.sc-graph__brand {
	position: absolute;
	z-index: 2;
	left: 41.4716%;           /* 372 / 897 */
	top: 40.75%;              /* 326 / 800 */
	width: 17.0569%;          /* 153 / 897 */
	display: flex;
	flex-direction: column;
	align-items: center;
	transform-origin: 50% 50%;
	transition: transform var(--sc-duration) var(--sc-ease);
	pointer-events: none;
}
.sc-graph__mark {
	width: 65.3595%;          /* 100 / 153 */
	height: auto;
	aspect-ratio: 1;
	margin-bottom: 10.4575%;  /* 16px gap / 153 */
	object-fit: contain;
	object-position: bottom;
}
.sc-graph__wordmark {
	width: 100%;
	height: auto;
	aspect-ratio: 153 / 32;
	object-fit: contain;
	object-position: bottom;
}
.sc-graph__wordmark-text {
	display: block;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 2.45cqw;       /* 22px at 897px */
	line-height: 1.15;
	white-space: nowrap;
	color: #292728;
}
.sc-graph__wordmark-text strong { font-weight: 800; }

/* Circles ------------------------------------------------------------------ */
.sc-graph__nodes { list-style: none; margin: 0; padding: 0; }

.sc-node {
	position: absolute;
	z-index: 1;
	left: var(--x);
	top: var(--y);
	width: 24.5262%;          /* 220 / 897 */
	aspect-ratio: 1;
	transition: transform var(--sc-duration) var(--sc-ease), opacity var(--sc-duration) var(--sc-ease);
}

.sc-node__link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	transition: box-shadow var(--sc-hover-duration) var(--sc-hover-ease);
}

.sc-node__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 50%;
	background: #dfe7cf;
}
/* Image cropped with the Figma percentages (set inline). */
.sc-node__media img {
	position: absolute;
	max-width: none;
	pointer-events: none;
}
/* Figma overlays: black gradient over 10% white. */
.sc-node__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000 var(--fade, 80.682%)),
		linear-gradient(rgba(255, 255, 255, var(--tint, 0.1)), rgba(255, 255, 255, var(--tint, 0.1)));
}

.sc-node__label {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 67.2727%;            /* 148 / 220 */
	transform: translateX(-50%);
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 600;
	font-size: max(9px, 1.7837cqw);  /* 16px at 897px */
	line-height: 1.25;               /* 20px */
	text-align: center;
	white-space: nowrap;
	transition: transform var(--sc-hover-duration) var(--sc-hover-ease);
}

/* Hover ring: Figma "Property 1=3" has a 2px #B0CB36 inside stroke; it is drawn round the image. */
.sc-node__ring {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	overflow: visible;
	transform: rotate(-90deg);  /* start at 12 o'clock */
	pointer-events: none;
}
.sc-node__ring circle {
	fill: none;
	stroke: #b0cb36;
	stroke-width: 2;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset var(--sc-ring-duration) var(--sc-hover-ease);
}

/* Hover / keyboard focus = Figma "Property 1=3". */
.sc-node__link:hover,
.sc-node__link:focus-visible {
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
	outline: none;
}
.sc-node__link:hover .sc-node__ring circle,
.sc-node__link:focus-visible .sc-node__ring circle { stroke-dashoffset: 0; }
.sc-node__link:hover .sc-node__label,
.sc-node__link:focus-visible .sc-node__label {
	/* Text rises 18px (y 148 → 130). */
	transform: translateX(-50%) translateY(-2.0067cqw);
}

/* Opening state = Figma "Variant2" ------------------------------------------
   Only applied once JavaScript has armed the graph, so without JS (or with
   reduced motion) the finished layout is shown. */
.sc-graph.is-armed:not(.is-open) .sc-graph__brand { transform: scale(2.2967); }
.sc-graph.is-armed:not(.is-open) .sc-node {
	opacity: 0;
	pointer-events: none;
	transform: translate(var(--from-x), var(--from-y)) scale(0.27364);            /* 60.2 / 220 */
}
.sc-graph.is-armed:not(.is-open) .sc-graph__arrow-group {
	opacity: 0;
	transform: scale(0.1762);                                                       /* 104.5 / 593 */
}

/* Small screens: use the full viewport width so the circles stay legible. */
@media (max-width: 599px) {
	.sc-graph {
		width: calc(100% + 2 * var(--gutter, 20px));
		margin: 56px calc(-1 * var(--gutter, 20px)) 0;
	}
	.sc-node__label { font-size: max(8.5px, 1.7837cqw); }
	.sc-node__ring circle { stroke-width: 3; }
	.serviceconnect-page__overview { padding: 70px 0 80px; }
}

/* Reduced-motion setting: no travelling or large scaling, just a gentle fade and a
   small settle of the mark, so the change of state is still visible. */
@media (prefers-reduced-motion: reduce) {
html:not(.eimsky-motion-full) .sc-graph{--sc-duration: 450ms;}
html:not(.eimsky-motion-full) .sc-graph .sc-node,html:not(.eimsky-motion-full) .sc-graph .sc-graph__brand,html:not(.eimsky-motion-full) .sc-graph .sc-graph__arrow-group{transition-duration: var(--sc-duration) !important;}
html:not(.eimsky-motion-full) .sc-graph .sc-node__link,html:not(.eimsky-motion-full) .sc-graph .sc-node__label{transition-duration: var(--sc-hover-duration) !important;}
html:not(.eimsky-motion-full) .sc-graph .sc-node__ring circle{transition-duration: var(--sc-ring-duration) !important;}
html:not(.eimsky-motion-full) .sc-graph.is-armed:not(.is-open) .sc-graph__brand{transform:scale(1.12);}
html:not(.eimsky-motion-full) .sc-graph.is-armed:not(.is-open) .sc-node{transform: none;}
html:not(.eimsky-motion-full) .sc-graph.is-armed:not(.is-open) .sc-graph__arrow-group{transform: none;}
}

/* Module navigation --------------------------------------------------------- */
.serviceconnect-page__module-nav { position: sticky; top: 0; z-index: 15; background: #fff; box-shadow: 0 3px 7px rgba(15, 14, 14, .04); padding: 32px 0; }
.admin-bar .serviceconnect-page__module-nav { top: var(--wp-admin--admin-bar--height, 32px); }
body.is-product-nav-stuck .site-header { visibility: hidden; opacity: 0; transform: translateY(-100%); pointer-events: none; }
.serviceconnect-page__module-nav .container { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.serviceconnect-page__module-nav a { padding: 10px 20px; border: 1px solid #d9d9d9; border-radius: 8px; color: #292728; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500; }
.serviceconnect-page__module-nav a:hover,
.serviceconnect-page__module-nav a:focus-visible { border-color: #62a420; background: #fbfcf5; }

/* Solution modules ---------------------------------------------------------- */
.serviceconnect-page__modules { padding: 50px 0 120px; }
.serviceconnect-page__module { scroll-margin-top: 145px; padding: 90px 0; }
.serviceconnect-page__module-grid { display: grid; grid-template-columns: minmax(0, 580fr) minmax(0, 628fr); gap: 80px; align-items: center; }
.serviceconnect-page__module:nth-child(even) .serviceconnect-page__module-grid { grid-template-columns: minmax(0, 628fr) minmax(0, 580fr); }
.serviceconnect-page__module:nth-child(even) .serviceconnect-page__module-image { order: 2; }

/* Figma image frame: 580×600, 24px radius, image cropped with Figma percentages,
   20% black fades at the top and bottom. */
.serviceconnect-page__module-image { position: relative; aspect-ratio: 580 / 600; border-radius: 24px; overflow: hidden; background: #eef3dc; }
.serviceconnect-page__module-image img { position: absolute; max-width: none; }
.serviceconnect-page__module-image::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(102, 102, 102, 0) 13.211%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(102, 102, 102, 0) 17.073%);
}
.serviceconnect-page__module-icon { display: block; width: 70px; height: 70px; flex: none; }
.serviceconnect-page__module-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.serviceconnect-page__module h2 { font-size: clamp(31px, 3.1vw, 48px); line-height: 1.25; margin: 24px 0; }
.serviceconnect-page__module-copy p { font-size: 16px; line-height: 1.6; color: #545253; margin: 0 0 36px; }

/* Clients -------------------------------------------------------------------
   Figma frame 1164:7608: 140px white gap, then a #FBFCF5 band with 140px padding.
   Colour logos at their Figma frame sizes, two rows, 60px apart. */
.serviceconnect-page__clients { position: relative; isolation: isolate; overflow: hidden; margin-top: 140px; padding: 140px 0; background: #fbfcf5; }
.serviceconnect-page__clients h2 { max-width: 790px; margin-top: 8px; }
.serviceconnect-page__clients p { max-width: 848px; color: #545253; margin-top: 32px; line-height: 1.5; }
.serviceconnect-page__logos { display: flex; flex-direction: column; gap: 24px; margin-top: 80px; }
.serviceconnect-page__logo-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 60px; }
.serviceconnect-page__logo-row li { display: flex; align-items: center; height: var(--h); }
.serviceconnect-page__logo-row img { width: auto; height: var(--h); max-width: var(--w); object-fit: contain; }
.serviceconnect-page__logo-row li.is-faded { opacity: .8; }
.serviceconnect-page__logo-row span { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; color: #7f7d7e; }
.serviceconnect-page__glow--clients-right { top: 0; right: -110px; left: auto; width: 445px; height: 445px; }
.serviceconnect-page__glow--clients-left { top: 407px; left: -38px; width: 365px; height: 365px; }

/* Case studies (cards use the shared Figma "Case-studies-cards" component styles) */
.serviceconnect-page__case-studies { padding: 140px 0; }
.serviceconnect-page__case-studies h2 { margin-top: 8px; }
.serviceconnect-page__case-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin: 16px 0 56px; }
.serviceconnect-page__case-intro p { max-width: 846px; color: #545253; line-height: 1.5; }
.serviceconnect-page__case-grid { gap: 32px; }

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 950px) {
	.serviceconnect-page__module-grid { gap: 36px; }
	.serviceconnect-page__logo-row { gap: 24px 40px; }
}
@media (max-width: 700px) {
	.serviceconnect-page__hero { padding: 60px 0; }
	.serviceconnect-page__module-nav { position: static; padding: 20px 0; }
	.serviceconnect-page__module-nav .container { justify-content: flex-start; gap: 8px; }
	.serviceconnect-page__module-nav a { font-size: 13px; padding: 8px 12px; }
	.serviceconnect-page__modules { padding: 20px 0 70px; }
	.serviceconnect-page__module { padding: 45px 0; }
	.serviceconnect-page__module-grid,
	.serviceconnect-page__module:nth-child(even) .serviceconnect-page__module-grid { display: flex; flex-direction: column; align-items: stretch; gap: 25px; }
	.serviceconnect-page__module:nth-child(even) .serviceconnect-page__module-image { order: 0; }
	.serviceconnect-page__module h2 { font-size: 32px; }
	.serviceconnect-page__clients,
	.serviceconnect-page__case-studies { padding: 70px 0; }
	.serviceconnect-page__clients { margin-top: 70px; }
	.serviceconnect-page__logos { margin-top: 40px; }
	.serviceconnect-page__logo-row { gap: 20px 28px; }
	.serviceconnect-page__logo-row li, .serviceconnect-page__logo-row img { height: calc(var(--h) * .65); }
	.serviceconnect-page__case-intro { display: block; }
	.serviceconnect-page__case-intro .btn { margin-top: 18px; }
}
@media (prefers-reduced-motion: no-preference) {
	.serviceconnect-page__module-image img { transition: transform .7s ease; }
	.serviceconnect-page__module-image:hover img { transform: scale(1.035); }
}
/* Same motion when the site plays animations as designed (Customizer → Eimsky: Animations). */
@media (prefers-reduced-motion: reduce) {
html.eimsky-motion-full .serviceconnect-page__module-image img{transition: transform .7s ease;}
html.eimsky-motion-full .serviceconnect-page__module-image:hover img{transform: scale(1.035);}
}
/* Same motion when the site plays animations as designed (Customizer → Eimsky: Animations). */
@media (prefers-reduced-motion: reduce) {
html.eimsky-motion-full .serviceconnect-page__module-image img{transition: transform .7s ease;}
html.eimsky-motion-full .serviceconnect-page__module-image:hover img{transform: scale(1.035);}
}

/* Small phones: long one-word product names (e.g. "PaymentConnect") must fit the banner. */
@media (max-width: 599px) {
	.serviceconnect-page__hero h1 { font-size: clamp(32px, 10.5vw, 44px); overflow-wrap: anywhere; }
}

/* Tablet spacing (shared by ServiceConnect and PaymentConnect): scale the desktop 140px rhythm
   to the site's 96px tablet rhythm; phones keep the 70px set at 700px. */
@media (min-width: 701px) and (max-width: 1199px) {
	.serviceconnect-page__overview { padding-top: 96px; padding-bottom: 110px; }
	.serviceconnect-page__modules { padding-top: 40px; padding-bottom: 96px; }
	.serviceconnect-page__module { padding-block: 64px; }
	.serviceconnect-page__clients { margin-top: 96px; padding-block: 96px; }
	.serviceconnect-page__case-studies { padding-block: 96px; }
}
/* Keep one intentional transition gap before Clients; the module and section previously stacked their spacing. */
.serviceconnect-page__modules{padding-bottom:0}
.serviceconnect-page__modules .serviceconnect-page__module:last-child{padding-bottom:0}
.serviceconnect-page__modules + .serviceconnect-page__clients{margin-top:80px}
@media(max-width:900px){.serviceconnect-page__modules{padding-bottom:0}.serviceconnect-page__modules + .serviceconnect-page__clients{margin-top:48px}}
@media(max-width:599px){.serviceconnect-page__modules + .serviceconnect-page__clients{margin-top:32px}}

/* Keep the centre symbol square at every desktop graph width. The supplied
   product logo is a horizontal strip, so expose its first square without
   stretching the rest of the wordmark into the symbol. */
.sc-graph__mark-crop {display:block;position:relative;overflow:hidden;width:65.3595%;aspect-ratio:1;margin-bottom:10.4575%;flex:none}
.sc-graph__mark-crop img {display:block;position:absolute;inset:0 auto auto 0;width:606.06%;height:100%;max-width:none;object-fit:fill;filter:brightness(0)}
.sc-graph__mark-crop img[src$="serviceconnect-symbol.svg"]{width:100%;filter:none;object-fit:contain}
.sc-graph__brand .sc-graph__wordmark-text {font-size:clamp(12px,2.45cqw,22px);line-height:1.15}
.sc-node__label {font-size:clamp(11px,1.7837cqw,16px)}
/* On shorter desktops the complete graph fits between the sticky header and
   viewport bottom while preserving the original 897:800 node coordinates. */
@media (min-width:701px) and (max-height:850px) {
 .serviceconnect-page:not(.paymentconnect-page) .sc-graph {width:min(100%,897px,calc((100dvh - 132px)*897/800))}
}