/* ==========================================================================
   SourceGraph — the company's own look (design v2, Eloti Designs).
   Contemporary tech-industrial corporate: Sora headings, a light lavender
   opener with the logo's graph drawn as a live data line (its four coloured
   rings), soft cards, and the deep indigo night for the dark bands.
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------------ */
.v2 {
	--ink: #16152b;
	--indigo: #3c309c;
	--indigo-deep: #2a2173;
	--night: #14132a;
	--night-2: #1d1c38;
	--teal: #009ca8;
	--node-indigo: #4239a5;
	--node-red: #ce3142;
	--node-teal: #009cad;
	--node-amber: #ffad31;
	--lavender: #f5f4fc;
	--lavender-2: #ebe9f9;
	--hair: #e6e3f3;
	--display-weight: 650;
	--display-tracking: -0.035em;
	--display-leading: 1.06;
	--c-tint: var(--lavender);
	--shadow-soft: 0 1px 2px rgb(22 21 43 / 0.05), 0 20px 40px -28px rgb(42 33 115 / 0.35);
	--shadow-lift: 0 1px 2px rgb(22 21 43 / 0.06), 0 34px 60px -30px rgb(42 33 115 / 0.45);
}

.v2 .sk-section--tint {
	background: var(--lavender);
}

/* 2. Band heads: centred, the logo's graph above. -------------------------------- */
.v2 .sk-section > .sk-section__title {
	color: var(--ink);
	font-size: clamp(2.1rem, 1.35rem + 2.5vw, 3.4rem);
	line-height: 1.05;
}

.v2 .sk-section--dark > .sk-section__title {
	color: #fff;
}

.v2 .sk-section > .sk-section__intro {
	max-width: 44rem;
	color: var(--c-muted);
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
}

.v2 .sk-section--dark > .sk-section__intro {
	color: var(--c-on-dark-muted);
}

.v2 :is(.sk-section, .sk-section .wp-block-column) > .is-style-lead {
	color: var(--ink);
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
	font-weight: 500;
	line-height: 1.45;
}

/* 3. Buttons: indigo, with a soft glow. ------------------------------------------- */
.v2 :is(.button, .wp-block-button__link) {
	font-weight: 600;
}

.v2 .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.v2 .header-cta {
	background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-deep) 100%);
	border-color: transparent;
	box-shadow: 0 10px 24px -12px rgb(60 48 156 / 0.6);
	color: #fff;
}

.v2 .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.v2 .header-cta:hover {
	background: linear-gradient(135deg, var(--indigo-deep) 0%, var(--night) 100%);
	box-shadow: 0 14px 30px -12px rgb(42 33 115 / 0.7);
	color: #fff;
}

.v2 .is-style-outline > .wp-block-button__link {
	border: 1px solid var(--hair);
	background: #fff;
	color: var(--indigo);
}

.v2 .is-style-outline > .wp-block-button__link:hover {
	border-color: var(--indigo);
	background: #fff;
	color: var(--indigo-deep);
}

.v2 .sk-section--dark .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: #fff;
	box-shadow: none;
	color: var(--indigo-deep);
}

.v2 .sk-section--dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--lavender-2);
	color: var(--night);
}

/* 4. Header ---------------------------------------------------------------------- */
.v2 .topbar {
	background: var(--night);
	border-bottom: 0;
}

.v2 .topbar__list .icon {
	color: var(--node-amber);
}

@media (min-width: 1080px) { /* nav-bp */
	.v2 .top-item > .menu-link {
		color: var(--ink);
		font-weight: 550;
	}

	.v2 .sub-menu {
		border-color: var(--hair);
		border-radius: 1.25rem;
		box-shadow: var(--shadow-lift);
	}

	.v2 .sub-item .menu-icon {
		border-radius: 50%;
		background: var(--lavender);
		color: var(--indigo);
	}

	.v2 .sub-item > .menu-link:hover .menu-icon {
		background: var(--indigo);
		color: #fff;
	}
}

/* 5. Opener: lavender light, the headline, the photo in a card, and the
   logo's graph drawn as a live data line along the foot. ------------------------ */
.v2.hero-inset .entry-content .wp-block-cover.sk-hero {
	min-height: clamp(600px, 80svh, 820px) !important;
	padding-bottom: clamp(5.5rem, 4rem + 5vw, 9rem);
	background:
		radial-gradient(48rem 30rem at 85% 10%, rgb(60 48 156 / 0.1), transparent 70%),
		radial-gradient(36rem 24rem at 5% 100%, rgb(0 156 168 / 0.08), transparent 70%),
		radial-gradient(circle at 1px 1px, rgb(60 48 156 / 0.13) 1px, transparent 1.5px) 0 0 / 26px 26px,
		var(--lavender);
}

.v2.motif-nodes.hero-inset .sk-hero::before {
	content: "";
	top: auto;
	right: auto;
	left: 0;
	bottom: clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
	z-index: 0;
	width: max(46%, calc((100% - var(--w-wide)) / 2 + 0.6 * var(--w-wide)));
	aspect-ratio: 960 / 170;
	background: url("../img/v2/signal.svg") left bottom / 100% 100% no-repeat;
	opacity: 1;
	transform: none;
}

.v2 .sk-hero .sk-hero__title {
	max-width: 14ch;
	background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 35%, var(--indigo) 75%, var(--indigo-deep) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.6rem);
	font-weight: 650;
	line-height: 1.03;
	letter-spacing: -0.04em;
}

.v2 .sk-hero .sk-hero__text {
	max-width: 38rem;
	margin-top: 1.5rem;
	color: #4b4a63;
	font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
}

.v2 .sk-hero .wp-block-buttons {
	gap: 0.75rem;
	margin-top: 2.25rem;
}

.v2 .sk-hero .wp-block-button__link {
	min-height: 3.4rem;
	padding: 0.85em 1.6em;
}

.v2.hero-inset .sk-hero .wp-block-cover__image-background {
	z-index: 1;
	border: 6px solid #fff;
	border-radius: 2rem;
	box-shadow: 0 50px 90px -46px rgb(42 33 115 / 0.6), 0 0 0 1px var(--hair);
}

/* The first photo rises into place (movement only: the slideshow's fades
   between the photos stay as they are). */
.v2.hero-inset .sk-hero .wp-block-cover__image-background:not(.sk-hero__slide) {
	animation: sg-card 1.4s var(--v2-ease) both;
}

@keyframes sg-card {
	from {
		transform: translateY(1.5rem) scale(0.98);
	}

	to {
		transform: none;
	}
}

.v2 .sk-hero .wp-block-cover__inner-container {
	z-index: 2;
}

.v2 .sk-hero .wp-block-cover__inner-container > * {
	animation: sg-rise 1s var(--v2-ease) both;
}

.v2 .sk-hero .wp-block-cover__inner-container > :nth-child(2) {
	animation-delay: 0.1s;
}

.v2 .sk-hero .wp-block-cover__inner-container > :nth-child(3) {
	animation-delay: 0.2s;
}

@keyframes sg-rise {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.v2 .sk-hero__pause {
	z-index: 3;
}

@media (max-width: 959px) {
	.v2.motif-nodes.hero-inset .sk-hero::before {
		display: none;
	}

	/* Every photo the same frame (an image left at its own width would run
	   past the edge). */
	.v2.hero-inset .sk-hero .wp-block-cover__image-background {
		left: var(--gutter);
		right: auto;
		width: calc(100% - 2 * var(--gutter));
		border-width: 4px;
		border-radius: 1.5rem;
		object-fit: cover;
	}
}

@media (prefers-reduced-motion: reduce) {
	.v2.motif-nodes.hero-inset .sk-hero::before {
		background-image: url("../img/v2/signal-static.svg");
	}
}

/* 6. Services: soft cards, the photo inset, a coloured ring for each. ---------------- */
.v2 .sk-services--cards .sk-service {
	border: 1px solid var(--hair);
	border-radius: 1.5rem;
	background: #fff;
	box-shadow: var(--shadow-soft);
	transition: box-shadow 0.4s var(--v2-ease), transform 0.4s var(--v2-ease), border-color 0.4s var(--v2-ease);
}

.v2 .sk-services--cards .sk-service:hover {
	border-color: var(--lavender-2);
	box-shadow: var(--shadow-lift);
	transform: translateY(-4px);
}

.v2 .sk-services--cards .sk-service__media {
	margin: 0.5rem 0.5rem 0;
	border-radius: 1.1rem;
}

.v2 .sk-services--cards .sk-service__media img {
	transition: filter 0.6s var(--v2-ease);
}

.v2 .sk-services--cards .sk-service:hover .sk-service__media img {
	filter: saturate(1.15) brightness(1.04);
}

.v2 .sk-services--cards .sk-service__badge {
	--node: var(--node-indigo);
	left: 1.1rem;
	bottom: 0;
	width: 3.25rem;
	height: 3.25rem;
	transform: translateY(45%);
	border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 0 0 3px var(--node), 0 10px 22px -12px rgb(22 21 43 / 0.5);
	color: var(--ink);
}

.v2 .sk-services--cards li:nth-child(4n + 2) .sk-service__badge {
	--node: var(--node-red);
}

.v2 .sk-services--cards li:nth-child(4n + 3) .sk-service__badge {
	--node: var(--node-teal);
}

.v2 .sk-services--cards li:nth-child(4n + 4) .sk-service__badge {
	--node: var(--node-amber);
}

/* The ring sits across the photo's edge: the photo box keeps its shape (no
   growing to the picture's own proportions) and is not clipped. */
.v2 .sk-services--cards .sk-service__media {
	min-height: 0;
	overflow: visible;
}

.v2 .sk-services--cards .sk-service__media img {
	border-radius: 1.1rem;
}

.v2 .sk-services--cards .sk-service.has-image:has(.sk-service__badge) .sk-service__body {
	padding-top: 2.4rem;
}

.v2 .sk-services--cards .sk-service__title {
	color: var(--ink);
	font-weight: 650;
	line-height: 1.25;
	letter-spacing: -0.025em;
}

.v2 .sk-services--cards .sk-service__more {
	color: var(--indigo);
	font-weight: 600;
}

/* 7. Servicing (projects): photo tiles, the words on the photo. ------------------------ */
.v2 .sk-project {
	overflow: hidden;
	border: 0;
	border-radius: 1.5rem;
	box-shadow: var(--shadow-soft);
	transition: transform 0.45s var(--v2-ease), box-shadow 0.45s var(--v2-ease);
}

.v2 .sk-project:hover {
	box-shadow: var(--shadow-lift);
	transform: translateY(-4px);
}

.v2 .sk-project__media img {
	transition: transform 1.2s var(--v2-ease);
}

.v2 .sk-project:hover .sk-project__media img {
	transform: scale(1.06);
}

.v2 .sk-project__title {
	font-weight: 650;
	letter-spacing: -0.025em;
}

/* 8. Cards (values and the like) --------------------------------------------------------- */
.v2 :is(.sk-section, .sk-prose) .sk-cards .sk-card {
	border: 1px solid var(--hair);
	border-radius: 1.4rem;
	background: #fff;
	box-shadow: none;
	transition: box-shadow 0.4s var(--v2-ease), transform 0.4s var(--v2-ease), border-color 0.4s var(--v2-ease);
}

.v2 :is(.sk-section, .sk-prose) .sk-cards .sk-card:hover {
	border-color: var(--lavender-2);
	box-shadow: var(--shadow-soft);
	transform: translateY(-3px);
}

.v2 .sk-card h3 {
	color: var(--ink);
	font-weight: 650;
	letter-spacing: -0.025em;
}

.v2 .sk-section--dark {
	background: radial-gradient(60rem 30rem at 0% 0%, rgb(60 48 156 / 0.35), transparent 70%), var(--night);
}

.v2 .sk-section--dark .sk-cards .sk-card {
	border: 1px solid rgb(255 255 255 / 0.08);
	background: rgb(255 255 255 / 0.035);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.v2 .sk-section--dark .sk-cards .sk-card:hover {
	border-color: rgb(255 255 255 / 0.16);
	background: rgb(255 255 255 / 0.06);
	box-shadow: 0 30px 60px -36px rgb(0 0 0 / 0.8);
}

.v2 .sk-section--dark .sk-card h3 {
	color: #fff;
}

.v2 .sk-section--dark .sk-card.has-icon::before {
	background: rgb(255 255 255 / 0.04);
}

.v2 .sk-section--dark .sk-card.has-icon::after {
	background: #fff;
}

/* Photos */
.v2 .sk-section .wp-block-column > .wp-block-image img,
.v2 .sk-section > .wp-block-gallery img {
	border-radius: 1.25rem;
}

.v2 .sk-section .wp-block-column > .wp-block-image img {
	box-shadow: var(--shadow-soft);
}

/* 9. News ----------------------------------------------------------------------------------- */
.v2 .post-card {
	overflow: hidden;
	border: 1px solid var(--hair);
	border-radius: 1.5rem;
	background: #fff;
	box-shadow: none;
	transition: box-shadow 0.4s var(--v2-ease), transform 0.4s var(--v2-ease);
}

.v2 .post-card:hover {
	box-shadow: var(--shadow-soft);
	transform: translateY(-3px);
}

.v2 .post-card__media {
	margin: 0.5rem 0.5rem 0;
	overflow: hidden;
	border-radius: 1.1rem;
}

.v2 .post-card__media img {
	transition: transform 1.2s var(--v2-ease);
}

.v2 .post-card:hover .post-card__media img {
	transform: scale(1.05);
}

.v2 .post-card__title {
	color: var(--ink);
	font-weight: 650;
	letter-spacing: -0.025em;
}

.v2 .post-label {
	color: var(--indigo);
	font-weight: 650;
}

/* 10. Call to action --------------------------------------------------------------------------- */
.v2 :is(.sk-cta, .cta-band__panel) {
	padding: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	border-radius: 2rem;
	background: linear-gradient(120deg, var(--indigo) 0%, var(--indigo-deep) 55%, var(--night) 100%);
	color: #fff;
}

.v2 :is(.sk-cta .sk-cta__title, .cta-band__title) {
	color: #fff;
	font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
	font-weight: 650;
	line-height: 1.05;
	letter-spacing: -0.035em;
}

.v2 :is(.sk-cta .sk-cta__text, .cta-band__text) {
	color: rgb(255 255 255 / 0.76);
}

.v2 .sk-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.v2 .cta-band .button--on-dark {
	background: #fff;
	border-color: #fff;
	box-shadow: none;
	color: var(--indigo-deep);
}

.v2 .sk-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.v2 .cta-band .button--on-dark:hover {
	background: var(--lavender-2);
	border-color: var(--lavender-2);
	color: var(--night);
}

.v2 .cta-band .button--ghost {
	border: 1px solid rgb(255 255 255 / 0.4);
	background: transparent;
	color: #fff;
}

.v2 .cta-band .button--ghost:hover {
	border-color: #fff;
	background: rgb(255 255 255 / 0.1);
	color: #fff;
}

.v2 :is(.sk-prose, .layout__main) .sk-cta {
	grid-template-columns: minmax(0, 1fr);
	padding: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

.v2 :is(.sk-prose, .layout__main) .sk-cta > .wp-block-buttons {
	grid-column: 1;
	grid-row: auto;
	justify-content: flex-start;
	margin-top: 1.5rem;
}

/* 11. Page headers: the lavender light of the opener. --------------------------------------------- */
.v2.ph-inset .page-header {
	background:
		radial-gradient(40rem 22rem at 90% 0%, rgb(60 48 156 / 0.1), transparent 70%),
		radial-gradient(circle at 1px 1px, rgb(60 48 156 / 0.12) 1px, transparent 1.5px) 0 0 / 26px 26px,
		var(--lavender);
}

.v2 .page-header .page-header__title {
	font-size: clamp(2.3rem, 1.4rem + 3vw, 4.2rem);
	font-weight: 650;
	line-height: 1.04;
	letter-spacing: -0.04em;
}

.v2.ph-inset .page-header.has-photo .page-header__media {
	border: 5px solid #fff;
	border-radius: 1.75rem;
	box-shadow: 0 40px 70px -40px rgb(42 33 115 / 0.55), 0 0 0 1px var(--hair);
}

.v2 .page-header__icon {
	border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 0 0 3px var(--node-teal);
	color: var(--ink);
}

/* 12. Side panels and forms -------------------------------------------------------------------------- */
.v2 .aside-card {
	border-color: var(--hair);
	border-radius: 1.25rem;
	box-shadow: none;
}

.v2 .aside-cta {
	background: linear-gradient(140deg, var(--indigo) 0%, var(--indigo-deep) 60%, var(--night) 100%);
}

.v2 .aside-cta::after {
	display: none;
}

.v2 .aside-cta .button {
	background: #fff;
	border-color: #fff;
	box-shadow: none;
	color: var(--indigo-deep);
}

/* 13. Footer ------------------------------------------------------------------------------------------------ */
.v2 .site-footer {
	background: radial-gradient(50rem 26rem at 100% 0%, rgb(60 48 156 / 0.35), transparent 70%), var(--night);
}

.v2 .site-footer__title {
	color: var(--node-amber);
}