/*!
Theme Name: yendigital
Theme URI: http://yendigital.com/
Author: yendigital
Author URI: http://yendigital.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: yendigital
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

yendigital is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Design tokens (CSS variables)
# Base / reset
# Layout helpers (.container)
# Accessibility (skip link, screen-reader-text)
# Header
	- Site branding / logo
	- Primary navigation
	- Dropdown (sub-menu)
	- Shop mega menu
	- Mobile menu toggle
# Footer
	- Footer grid
	- Office column
	- Links column
	- Social column
	- Bottom bar
# Responsive
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Design tokens (CSS variables)
--------------------------------------------------------------*/
:root {
	--yd-primary:     #ff3951; /* Primary / accent colour.                 */
	--yd-primary-dark:#e42d44;
	--yd-orange:      #ff3951; /* Back-compat alias → primary (hover/accents). */
	--yd-heading:     #14142b; /* Headings (neutral-800).                  */
	--yd-ink:         #14142b; /* Dark UI text (nav, logo).                */
	--yd-body:        #6e7191; /* Body paragraph text (neutral-600).       */
	--yd-black:       #000000; /* Footer background. */
	--yd-grey:        #7a7a7a;
	--yd-line:        #e6e6e6; /* Hairline borders on light backgrounds. */
	--yd-container:   1600px;  /* Max content width. */
	--yd-font:        "Plus Jakarta Display", "Plus Jakarta Sans", "Helvetica Neue", Arial, "Segoe UI", system-ui, sans-serif;
}


/*--------------------------------------------------------------
# Base / reset
--------------------------------------------------------------*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Clip (not hidden) prevents sideways scroll from the mega panel / slider
   WITHOUT turning the page into a scroll container, which would break the
   sticky header. Applied to both html and body so the viewport can't scroll
   horizontally either. */
html {
	overflow-x: clip;
	max-width: 100%;
}
body {
	margin: 0;
	max-width: 100%;
	font-family: var(--yd-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.667em;
	letter-spacing: .02em;
	color: var(--yd-body);
	background: #ffffff;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/* Headings — shared design tokens. */
h1, h2, h3, h4, h5, h6 {
	color: var(--yd-heading);
	letter-spacing: .02em;
	margin-top: 0;
	margin-bottom: 16px;
	font-weight: 700;
}
h1 {
	font-size: 60px;
	line-height: 1.233em;
}
h2 {
	font-size: 40px;
	line-height: 1.35em;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}


/*--------------------------------------------------------------
# Layout helpers
--------------------------------------------------------------*/
/* Centered, padded content wrapper used by both header and footer. */
.container {
	width: 100%;
	max-width: var(--yd-container);
	margin: 0 auto;
	padding: 0 40px;
}


/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Visually hide content while keeping it available to screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

/* Skip link becomes visible when focused via the keyboard. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: #fff;
	color: var(--yd-ink);
	font-weight: 600;
}
.skip-link:focus {
	left: 6px;
	top: 6px;
}


/*==============================================================
# HEADER
==============================================================*/
.site-header {
	position: sticky;   /* stays pinned to the top on vertical scroll */
	top: 0;
	background: #ffedec;   /* match the body background */
	border-bottom: 1px solid var(--yd-line);
	font-family: var(--yd-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.125em;
	z-index: 100;       /* above page content while stuck */
}

/* Keep the sticky header clear of the WordPress admin bar when logged in. */
body.admin-bar .site-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

/* Header row: logo on the left, navigation on the right.
   `position: relative` makes this the anchor for the absolutely-positioned
   mega-menu panel, so the panel spans the container width. */
.site-header .container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-height: 96px;
}

/*----------------------------------------
	Site branding / logo
----------------------------------------*/
.site-branding {
	flex: 0 0 auto;
}

/* Wraps both the uploaded custom logo and the SVG fallback. */
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

/* Uploaded logo image (Customizer → Site Identity). */
.custom-logo {
	max-height: 60px;
	width: auto;
}

/* SVG fallback mark + wordmark (shown when no logo image is set). */
.logo-mark {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
}
.logo-text {
	font-size: 30px;
	font-weight: 500;
	letter-spacing: .3px;
	color: var(--yd-ink);
}

/*----------------------------------------
	Primary navigation
----------------------------------------*/
.main-navigation {
	flex: 1 1 auto;
}

.nav-menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 40px;
}

.nav-menu > li {
	position: relative; /* Anchor for standard dropdowns. */
}

/* CTA appended to the menu via items_wrap — only shown on mobile. */
.mobile-cta-item {
	display: none;
}

.nav-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 36px 0;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--yd-ink);
	transition: color .2s ease;
}
.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a,
.nav-menu > li:hover > a {
	color: var(--yd-orange);
}

/* Thin down-chevron on items that have a dropdown. */
.menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease, margin-top .2s ease;
}
/* Flip the chevron up while the dropdown is open. */
.nav-menu > .menu-item-has-children:hover > a::after,
.nav-menu > .menu-item-has-children.focus > a::after {
	transform: rotate(225deg);
	margin-top: 2px;
}

/* Dedicated submenu-toggle button (see class-yendigital-mega-walker.php).
   Hidden by default: on desktop the link's own hover/click already handles
   reveal/navigation, so no separate control is needed there. Made visible
   only inside the mobile media query below. */
.submenu-toggle {
	display: none;
}

/*----------------------------------------
	Dropdown (standard .sub-menu)
----------------------------------------*/
.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #ffedec;
	padding: 14px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
	z-index: 30;
}
/* Reveal on hover (mouse) or .focus (keyboard/touch, added by navigation.js). */
.nav-menu > .menu-item-has-children:hover > .sub-menu,
.nav-menu > .menu-item-has-children:focus-within > .sub-menu,
.nav-menu > .menu-item-has-children.focus > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.sub-menu li a {
	display: block;
	padding: 9px 26px;
	font-size: 14px;
	letter-spacing: .5px;
	color: #333;
	transition: color .2s ease;
}
.sub-menu li a:hover {
	color: var(--yd-orange);
}

/*----------------------------------------
	Shop mega menu
	Markup produced by Yendigital_Mega_Walker:
	li.mega-menu > .mega-menu-panel > .mega-columns > .mega-col*
	Each .mega-col is one "Shop Category" heading + its list of links; all
	columns sit side by side in a single full-width row.
----------------------------------------*/
/* Override `.nav-menu > li { position: relative }` (higher specificity) so the
   panel anchors to `.site-header .container`, not the narrow Shop <li>. */
.nav-menu > li.mega-menu {
	position: static;
}

.mega-menu-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0; /* Span the full container width. */
	padding: 52px 56px;
	background: #ffedec;
	border-bottom: 1px solid var(--yd-line);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
	z-index: 30;
}
.nav-menu > li.mega-menu:hover > .mega-menu-panel,
.nav-menu > li.mega-menu:focus-within > .mega-menu-panel,
.nav-menu > li.mega-menu.focus > .mega-menu-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* All "Shop Category" columns laid out in a single row across the panel. */
.mega-columns {
	display: flex;
	gap: 56px;
}
.mega-col {
	flex: 1 1 0; /* Equal-width columns filling the full width. */
	min-width: 0;
}
.mega-col-title {
	margin: 0 0 22px;
	padding-bottom: 18px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--yd-ink);
	border-bottom: 1px solid var(--yd-primary);
}
/* A category stacked under another (mega-stack) — extra top spacing. */
.mega-col-title--stacked {
	margin-top: 40px;
}
.mega-sub li a {
	display: block;
	padding: 10px 0;
	font-size: 16px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #555;
	transition: color .2s ease;
}
.mega-sub li a:hover {
	color: var(--yd-orange);
}

/*----------------------------------------
	Header call-to-action buttons
----------------------------------------*/
.header-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
}
.header-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 30px;
	border-radius: 50px;         /* fully rounded pill */
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
	transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.header-btn:hover {
	transform: translateY(-2px);
}
/* "Join The Team" — black */
.header-btn--join {
	background: #14142b;
}
.header-btn--join:hover {
	background: #000;
}
/* "Get Quote" — primary red/pink */
.header-btn--quote {
	background: var(--yd-primary);
}
.header-btn--quote:hover {
	background: var(--yd-primary-dark);
}

/*----------------------------------------
	Mobile menu toggle — red circle, hamburger ⇄ X
	(hidden on desktop; shown at <= 900px)
----------------------------------------*/
.menu-toggle {
	display: none;
	position: relative;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--yd-primary);
	box-shadow: 0 8px 20px -6px rgba(255, 57, 81, .6);
	cursor: pointer;
}
.menu-toggle-bar {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 2px;
	margin: 0;
	border-radius: 2px;
	background: #fff;
	transition: transform .3s ease, opacity .2s ease;
}
.menu-toggle-bar:nth-child(1) {
	transform: translate(-50%, -50%) translateY(-7px);
}
.menu-toggle-bar:nth-child(2) {
	transform: translate(-50%, -50%);
}
.menu-toggle-bar:nth-child(3) {
	transform: translate(-50%, -50%) translateY(7px);
}
/* Open state (navigation.js adds .toggled to the nav): bars form an X. */
.main-navigation.toggled .menu-toggle-bar:nth-child(1) {
	transform: translate(-50%, -50%) rotate(45deg);
}
.main-navigation.toggled .menu-toggle-bar:nth-child(2) {
	opacity: 0;
}
.main-navigation.toggled .menu-toggle-bar:nth-child(3) {
	transform: translate(-50%, -50%) rotate(-45deg);
}


/*==============================================================
# PARTNERS (light section; logos reveal a gradient underline on hover)
==============================================================*/
.section-partners {
	padding: 68px 0 60px;        /* top 68 = light half of Services↔Partners gap (services gives the other 68 via margin); bottom 60 keeps Partners↔CTA unchanged */
	font-family: var(--yd-font);
}
/* Badge matches the "Your Digital Transformation Partner" pill (bordered, no fill). */
.partners__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border: 1px solid var(--yd-line);
	border-radius: 50px;
	background: transparent;
	color: var(--yd-heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.partners__badge svg {
	width: 16px;
	height: 16px;
	color: var(--yd-primary);
}
.partners__title {
	margin: 26px 0 0;
	max-width: 940px;
	font-size: clamp(38px, 5.4vw, 82px);
	line-height: 1.04;
	font-weight: 800;
	letter-spacing: -1px;
	color: #14142b;
}
.partners__title span {
    color: var(--yd-primary)
}
.partners__text {
	margin: 26px 0 0;
	max-width: 640px;
	font-size: 18px;
	line-height: 1.6;
	color: #5a5670;
}
.partners__logos {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 72px;
}
.partner-logo {
	position: relative;
	padding-bottom: 12px;
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 700;
	letter-spacing: .5px;
	color: #3a3550;
	transition: color .25s ease;
}
/* red underline that grows from the centre on hover (reference image 2) */
.partner-logo::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 55%;
	height: 3px;
	border-radius: 3px;
	background: var(--yd-primary);
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
	transition: transform .3s ease;
}
.partner-logo:hover {
	color: #14142b;
}
.partner-logo:hover::after {
	transform: translateX(-50%) scaleX(1);
}

@media (max-width: 768px) {
	.partners__logos {
		justify-content: center;
		gap: 30px 44px;
		margin-top: 48px;
	}
	.partners__title {
    	font-size: 34px;
	}
	.section-badge {
		line-height: 1.5em;
		font-size: 10px;
	}
	.cta-card__title{
		font-size: 26px;
	}
	.cta-badge {
		flex-basis: calc(50% - 8px);      /* 2 logo cards per row on small phones */
		min-height: 102px;
        padding: 18px 18px;
	}
}

/*==============================================================
# LOGOS GRID (paginated auto-loop: show 2 rows at a time, per group)
   A black-logo wall on white, shown one GROUP (up to 2 rows × 6) at a time.
   js/logos-grid.js drives a two-phase loop: (1) hide the active group's rows
   in sequence, then (2) swap in the next group and reveal its rows in sequence,
   shuffling that group's logo positions on every re-display. Loops forever.
   Each cell just transitions opacity + transform; JS toggles the .is-hidden
   class and the group [hidden] attribute. Reduced-motion / no-JS fallbacks:
   all groups render statically so every logo stays visible.
==============================================================*/
.logos-grid {
	background: #fff;
	font-family: var(--yd-font);
}
.logos-grid__inner {
	width: min(1440px, 94vw);
	margin: 160px auto;
}
.logos-grid__title {
	margin: 0 0 60px;
	text-align: left;
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -.5px;
	color: var(--yd-heading);
}
.logos-grid__title span {
	color: var(--yd-primary);   /* website red */
}
/* A group is one "page" of up to 2 rows. In the static fallback (no JS /
   reduced-motion) the groups stack vertically with spacing between them. */
.logos-grid__group + .logos-grid__group {
	margin-top: 64px;
}
/* When JS is active, stack BOTH groups in the SAME grid cell so they overlap.
   The stage height is then constant (= tallest group), so swapping the visible
   group never reflows the page — no jump/jerk in the sections below. Only the
   active group's cells are opaque; the other group's cells stay .is-hidden. */
.logos-grid.is-paginated .logos-grid__stage {
	display: grid;
}
.logos-grid.is-paginated .logos-grid__group {
	grid-area: 1 / 1;      /* every group occupies the one cell → they overlap */
	margin-top: 0;         /* no stacking offset in overlay mode */
}
.logos-grid__row {
	--logos-col-gap: 34px;                    /* shared by the grid gap + short-row calc */
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 56px var(--logos-col-gap);
	align-items: center;
	margin-bottom: 64px;
}
.logos-grid__row:last-child {
	margin-bottom: 0;
}
/* Short row (fewer than 6 logos): center them, each the SAME width as a 6-col cell. */
.logos-grid__row--short {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--logos-col-gap);
}
.logos-grid__row--short .logos-grid__cell {
	flex: 0 0 calc((100% - 5 * var(--logos-col-gap)) / 6);
}
.logos-grid__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 1s ease, transform 1s ease;
	will-change: opacity, transform;
}
.logos-grid__cell.is-hidden {
	opacity: 0;
	transform: translateY(24px) scale(.94);
}
.logos-grid__cell img {
	max-width: 100%;
	max-height: 68px;                        /* larger logos */
	width: auto;
	height: auto;
	object-fit: contain;
}

@media (max-width: 768px) {
	.logos-grid__inner {
		margin: 56px auto;
	}
	.logos-grid__title {
		margin-bottom: 40px;
	}
	.logos-grid__row {
		--logos-col-gap: 22px;
		gap: 40px var(--logos-col-gap);
		margin-bottom: 44px;
	}
	.logos-grid__group + .logos-grid__group {
		margin-top: 44px;
	}
	.logos-grid__cell img {
		max-height: 52px;
	}
}
@media (max-width: 600px) {
	/* Keep 6 columns on every device — logos just scale down (per design choice). */
	.logos-grid__row {
		--logos-col-gap: 14px;
		gap: 30px var(--logos-col-gap);
		margin-bottom: 34px;
	}
	.logos-grid__cell img {
		max-height: 34px;
	}
}
@media (max-width: 400px) {
	.logos-grid__row {
		--logos-col-gap: 10px;
		gap: 24px var(--logos-col-gap);
	}
	.logos-grid__cell img {
		max-height: 26px;
	}
}
@media (prefers-reduced-motion: reduce) {
	/* Static fallback: reveal every group + cell so all logos stay visible. */
	.logos-grid__group[hidden] {
		display: block;
	}
	.logos-grid__cell {
		transition: none;
		opacity: 1;
		transform: none;
	}
}

/*==============================================================
# CTA BAND (pre-footer card that overlaps the footer)
==============================================================*/
.cta-band {
	position: relative;
	z-index: 2;
	padding: 60px 0 0;
}
.cta-card {
	position: relative;
	z-index: 2;                  /* above the overlapping footer */
	display: flex;
	gap: 44px;
	align-items: center;
	padding: 56px;
	border-radius: 30px;
	background: #ff3951;         /* brand red */
	box-shadow: 0 30px 60px rgba(0, 0, 0, .18);
}
.cta-card__left {
	flex: 1 1 0;
	min-width: 0;
}
.cta-card__title {
	margin: 0 0 20px;
	max-width: 470px;
	font-size: clamp(30px, 3.2vw, 46px);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -.5px;
	color: #fff;                 /* white for contrast on the red card */
}
.cta-card__text {
	margin: 0 0 32px;
	max-width: 420px;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .9);
}
.cta-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 36px;
	border-radius: 999px;
	background: var(--yd-black); /* website black */
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	transition: background .25s ease, color .25s ease, transform .2s ease;
}
.cta-card__btn:hover {
	background: #fff;            /* invert on hover: white bg, black text */
	color: var(--yd-black);
	transform: translateY(-2px);
}

/* right column: certification LOGO cards (3 per row, wraps + centres → 3 + 2) */
.cta-card__badges {
	flex: 0 0 52%;
	max-width: 52%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
.cta-badge {
	flex: 0 1 calc(24% - 11px);   /* 3 cards per row; a short last row stays centred */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 12px;
	min-height: 128px;
	padding: 24px 18px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 12px 26px rgba(0, 0, 0, .08);
	transition: transform .3s ease, box-shadow .3s ease;
}
/* Certification logo image (shown when the file is uploaded) */
.cta-badge__logo {
	max-width: 100%;
	max-height: 88px;
	width: auto;
	height: auto;
	object-fit: contain;
}
/* Name fallback (shown until the logo image is uploaded) */
.cta-badge__name {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #1c1830;
}
.cta-badge:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 44px rgba(0, 0, 0, .18);
}
.cta-badge__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	color: #fff;
	transition: transform .3s ease;
}
.cta-badge:hover .cta-badge__icon {
	transform: scale(1.08);
}
.cta-badge__icon svg {
	width: 26px;
	height: 26px;
}
.cta-badge__icon--purple { background: #7c2fbf; }
.cta-badge__icon--dark   { background: #2b2b3a; }
.cta-badge__icon--blue   { background: #3f7fe0; }
.cta-badge__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: #1c1830;
}
.cta-badge__text {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: #6e7191;
}



@media (max-width: 900px) {
	.cta-card {
		flex-direction: column;
		align-items: stretch;
		padding: 34px;
		gap: 28px;
	}
	.cta-card__badges {
		flex: none;
		max-width: none;
	}
}
@media (max-width: 520px) {
	.cta-badge {
		flex-basis: calc(50% - 8px);      /* 2 logo cards per row on small phones */
		min-height: 102px;
        padding: 18px 18px;
	}
	
}





/*==============================================================
# SECTIONS (reusable — identical layout/padding on any page)
==============================================================*/

/* Every reusable section shares this vertical rhythm and the site .container,
   so padding/alignment stay consistent wherever the section is placed. */
.section {
	padding: 60px 0;
}

.section.section-about { padding-bottom: 68px; }
.section.section-intro { padding-top: 68px; }

/*----------------------------------------
	Reusable buttons (usable in any section)
----------------------------------------*/
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 30px;
	border: 2px solid transparent;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary {
	background: var(--yd-primary);
	border-color: var(--yd-primary);
	color: #fff;
}
.btn--primary:hover {
	background: var(--yd-primary-dark);
	border-color: var(--yd-primary-dark);
}
.btn--outline {
	background: transparent;
	border-color: var(--yd-line);
	color: var(--yd-heading);
}
.btn--outline:hover {
	background: var(--yd-heading);
	border-color: var(--yd-heading);
	color: #fff;
}
.btn--outline-primary {
	background: transparent;
	border-color: var(--yd-primary);
	color: var(--yd-primary);
}
.btn--outline-primary:hover {
	background: var(--yd-primary);
	border-color: var(--yd-primary);
	color: #fff;
}
.btn__arrow {
	font-size: 18px;
	line-height: 1;
}

/*----------------------------------------
	Intro + cards section
----------------------------------------*/
.section-intro__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

/* Left: content */
.section-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border: 1px solid var(--yd-line);
	border-radius: 50px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--yd-heading);
}
.section-badge svg {
	width: 16px;
	height: 16px;
	color: var(--yd-primary);
}
.section-intro__heading {
	margin: 26px 0 20px;
	font-size: 56px;
	line-height: 1.1;
	color: var(--yd-heading);
}
h2.section-intro__heading span {
    color: var(--yd-primary);
}
.section-intro__text {
	margin: 0 0 34px;
	max-width: 40em;
	color: var(--yd-body);
}
.section-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Right: cards */
.section-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;   /* both cards share the same (equal) height */
	gap: 22px;
}
.section-card {
	padding: 30px 28px;
	background: #fff;
	border: 1px solid var(--yd-line);
	border-radius: 16px;
}
.section-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 26px;
	border-radius: 14px;
	background: rgba(255, 57, 81, .1);
	color: var(--yd-primary);
}
span.section-card__icon img {
    width: 42px;
    height: 42px;
}
.section-card__stat {
	margin-bottom: 10px;
	font-size: 60px;
	font-weight: 800;
	line-height: 1;
	color: var(--yd-heading);
}
.section-card__title {
	margin: 0;
	font-size: 21px;
	line-height: 1.25;
	color: var(--yd-heading);
}
.section-card__rule {
	display: block;
	width: 28px;
	height: 3px;
	margin: 16px 0 18px;
	border-radius: 3px;
	background: var(--yd-primary);
}
.section-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--yd-body);
}

/* Accent (red) card variant */
.section-card--accent {
	background: var(--yd-primary);
	border-color: var(--yd-primary);
	color: #fff;
}
.section-card--accent .section-card__icon {
	background: rgba(255, 255, 255, .18);
	color: #fff;
}
.section-card--accent .section-card__title,
.section-card--accent .section-card__stat {
	color: #fff;
}
.section-card--accent .section-card__rule {
	background: rgba(255, 255, 255, .6);
}
.section-card--accent .section-card__text {
	color: rgba(255, 255, 255, .85);
}

/*----------------------------------------
	About section — head + hover-expand panels
	(Mission / Vision / Value accordion, pure CSS)
----------------------------------------*/
.section-about__head {
	max-width: 80%;
	margin-bottom: 56px;
}
.section-about__title {
	margin: 0 0 22px;
	font-size: 56px;
	line-height: 1.08;
	color: var(--yd-heading);
}
.section-about__text {
	margin: 0 0 34px;
	color: var(--yd-body);
}

/* Panel row: flex, panels abut (no gap); the row carries the rounded outer
   corners and clips the panels. */
.section-about__panels {
	display: flex;
	gap: 0;
	border-radius: 16px;
	overflow: hidden;
}
.about-panel {
	position: relative;
	min-height: 460px;
	overflow: hidden;
}

/* Fixed red stat panel (does not expand). */
.about-panel--stat {
	flex: 0 0 26%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 40px 32px;
	background: var(--yd-primary);
	color: #fff;
}
.about-stat__label {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: .01em;
}
.about-stat__num {
	font-size: 72px;
	font-weight: 800;
	line-height: 1;
}
.about-stat__rule {
	display: block;
	height: 1px;
	margin: 20px 0;
	background: rgba(255, 255, 255, .45);
}
.about-stat__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .92);
}

/* Image cards: equal width (they do NOT resize). Hovering only reveals the
   card's description in place — the title slides up to make room. */
.about-panel--card {
	flex: 1 1 0;
	min-width: 0;
}
.about-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;   /* zoom in/out on hover */
}
.about-panel--card:hover .about-card__img {
	transform: scale(1.08);
}
/* Dark gradient so the text stays readable at the bottom. */
.about-panel--card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .12) 55%, transparent 80%);
}
.about-card__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 32px;
	z-index: 2;
	padding: 0 30px;
	color: #fff;
}
.about-card__label {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 24px;
	font-weight: 700;
	white-space: nowrap;
}
.about-card__mark {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--yd-primary);
}
.about-card__mark svg {
	width: 20px;
	height: 20px;
}
.about-card__desc {
	max-height: 0;
	margin: 0;
	opacity: 0;
	overflow: hidden;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .9);
	transition: max-height .5s ease, opacity .4s ease, margin-top .5s ease;
}
.about-panel--card:hover .about-card__desc {
	max-height: 160px;
	margin-top: 16px;
	opacity: 1;
}

/* Mobile: no hover — stack the panels and show every description. */
@media (max-width: 900px) {
	.section-about__head {
		max-width: 100%;
	}
	.section-about__title {
        font-size: 32px;
    }
	.section-about__panels {
		flex-direction: column;
	}
	.about-panel {
		flex: none;
		width: 100%;
		min-height: 300px;
	}
	.about-panel--card .about-card__desc {
		max-height: none;
		margin-top: 14px;
		opacity: 1;
	}
}
@media (prefers-reduced-motion: reduce) {
	.about-panel--card,
	.about-card__desc,
	.about-card__img {
		transition-duration: .01ms;
	}
}

/* ------------------------------------------------------------------
   "Trusted by" logo carousel — reusable.
   The .logo-card items are a repeatable structure (maps cleanly to an
   ACF repeater with an image sub-field). The track scrolls natively
   (swipe / wheel / trackpad); the arrows just call scrollBy() in
   js/logos-carousel.js, so it works even without JavaScript.
------------------------------------------------------------------ */
.section-logos {
	display: none;   /* old carousel hidden — replaced by the new .logos-grid; kept in code */
	position: relative;
	margin: 68px 0;                          /* transparent (white) half of the gap it shares with About above & Intro below */
	overflow: hidden;                        /* clip the oversized parallax layer   */
	isolation: isolate;                      /* keep the bg strictly behind content */
	background: #05060a;                      /* near-black base + no-JS/no-image fallback */
	box-shadow: 0 -24px 40px rgba(0, 0, 0, .28),    /* top shadow onto the white gap above */
	            0 24px 40px rgba(0, 0, 0, .28);     /* bottom shadow onto the white gap below */
}
/* Full-width parallax background layer (lazy-assigned from data-bg by
   js/logos-parallax.js). */
.section-logos__bg {
	position: absolute;
	top: -15%;
	left: 0;
	width: 100%;
	height: 130%;
	z-index: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	transform: translate3d(0, 0, 0) scale(1.05);
	will-change: transform;
	pointer-events: none;
}
/* Deep black overlay for a dark, premium look. */
.section-logos__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		rgba(4, 5, 9, .92) 0%,
		rgba(4, 5, 9, .82) 38%,
		rgba(4, 5, 9, .74) 70%,
		rgba(4, 5, 9, .66) 100%);
}
/* Deep black overlay for a dark, premium look. Strongest behind the heading
   (left) so the white title stays highly readable; a touch lighter to the right
   so the image still reads through subtly. The white logo cards sit above it. */
.section-logos__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		rgba(4, 5, 9, .92) 0%,
		rgba(4, 5, 9, .82) 38%,
		rgba(4, 5, 9, .74) 70%,
		rgba(4, 5, 9, .66) 100%);
}
/* Keep all content above the background layer. */
.section-logos > .container {
	position: relative;
	z-index: 1;
}
.section-logos__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 48px;
}
.section-logos__title {
	margin: 0;
	max-width: 520px;
	color: #fff;                             /* white on the dark section */
	font-size: 44px;
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -.5px;
}
.section-logos__nav {
	display: flex;
	gap: 14px;
	flex: 0 0 auto;
}
.logos-nav {
	width: 56px;
	height: 56px;
	border: none;
	border-radius: 50%;
	background: #fff;
	color: var(--yd-heading);
	box-shadow: 0 10px 30px rgba(20, 20, 43, .08);
	font-size: 20px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .25s ease, color .25s ease, transform .18s ease;
}
.logos-nav:hover {
	background: var(--yd-primary);
	color: #fff;
}
.logos-nav:active {
	transform: scale(.94);
}
.logos-nav:disabled {
	opacity: .4;
	cursor: default;
}
.logos-nav:disabled:hover {
	background: #fff;
	color: var(--yd-heading);
}

.section-logos__viewport {
	overflow: hidden;
}
.section-logos__track {
	display: flex;
	gap: 26px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 20px 0 24px;                /* vertical room so the hover-lift + border/shadow aren't clipped */
	-ms-overflow-style: none;            /* hide scrollbar (IE/Edge)            */
	scrollbar-width: none;               /* hide scrollbar (Firefox)           */
	--logos-cols: 5;                     /* cards visible per view              */
}
.section-logos__track::-webkit-scrollbar {
	display: none;                       /* hide scrollbar (Chrome/Safari) */
}

.logo-card {
	flex: 0 0 calc((100% - (var(--logos-cols) - 1) * 26px) / var(--logos-cols));
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 210px;
	padding: 22px;
	/* Frosted-glass (black, translucent) card on the dark section. */
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 20px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.logo-card:hover {
	transform: translateY(-6px);
	background: rgba(255, 255, 255, .11);
	border-color: rgba(255, 57, 81, .5);       /* brand-red edge on hover */
}
.logo-card__img {
	max-width: 100%;
	max-height: 100px;
	width: auto;
	height: auto;
	object-fit: contain;
	/* Uniform white monochrome so the wall reads as one system on the dark theme.
	   (Swap for transparent logos when re-uploaded; remove this filter if you want
	   the logos' own colours.) */
	filter: brightness(0) invert(1);
	opacity: .78;
	transition: opacity .3s ease, transform .3s ease;
}
.logo-card:hover .logo-card__img {
	opacity: 1;
}

@media (max-width: 1024px) {
	.section-logos__track {
		--logos-cols: 3;
	}
	.section-logos__title {
		font-size: 34px;
	}
}
@media (max-width: 640px) {
	.section-logos__track {
		--logos-cols: 2;
	}
	.section-logos__title {
		font-size: 28px;
	}
	.logos-nav {
		width: 48px;
		height: 48px;
	}
}
/* No parallax drift for users who prefer reduced motion (JS also honours this). */
@media (prefers-reduced-motion: reduce) {
	.section-logos__bg {
		transform: translate3d(0, 0, 0) scale(1.05);
		will-change: auto;
	}
}

/* ------------------------------------------------------------------
   SERVICES SCROLL — sticky "stacking cards" (pure CSS, no JS).
   Each service is a full-size (100vh) card with position:sticky; as you scroll,
   the next card slides up and overlaps the previous one (position only, no scale).
   Per-item background colours; content is centred; the right image sits flush with
   the card bottom; hover plays a video (js/services-video.js). On mobile the cards
   stack normally (no sticky). The .service-item cards are a repeatable structure
   (maps cleanly to an ACF repeater).
------------------------------------------------------------------ */
.services-scroll {
	background: #0a0a0a;
	font-family: var(--yd-font);
	margin-bottom: 68px;                     /* transparent (white) half of the Services↔Partners gap; NO top margin so Intro↔Services stays 60 */
	/* No fixed height: the 5 sticky cards (each 100vh) make it 500vh naturally.
	   NOTE: never set overflow here — it would break the cards' position:sticky. */
}
/* Sticky stacking cards: every service is a full-size card that sticks at the top;
   as you scroll, the next card slides up and OVERLAPS the previous one — cards never
   resize, only their position changes (no scale). */
.service-item {
	position: sticky;
	top: 0;
	height: 62vh;
	display: flex;
	align-items: stretch;
	overflow: hidden;
	box-shadow: 0 -24px 40px rgba(0, 0, 0, .28);   /* subtle depth as cards overlap */
}
/* per-item background colours (match the reference) */
.service-item:nth-child(1) { background: #333333; }
.service-item:nth-child(2) { background: #222222; }
.service-item:nth-child(3) { background: #14142b; }
.service-item:nth-child(4) { background: #ff3951; }
.service-item:nth-child(5) { background: #1a1a1a; }

.service-item__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;     /* content centred vertically, left-aligned */
	padding: 20px 40px 20px max(40px, calc((100% - var(--yd-container, 1600px)) / 2 + 40px));
}
.service-item__num {
	display: block;
	font-size: clamp(22px, 2.2vw, 32px);   /* bold, same family as the title */
	font-weight: 800;
	letter-spacing: -.5px;
	color: #fff;
	margin-bottom: 14px;
}
.service-item__title {
	margin: 0;
	font-size: clamp(32px, 4.4vw, 68px);
	line-height: 1.02;
	font-weight: 700;
	letter-spacing: -.5px;
	color: #fff;
}
/* description + button group (always visible on each full-size card) */
.service-item__reveal {
	max-width: 560px;
}
.service-item__desc {
	margin: 22px 0 0;
	max-width: 560px;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .72);
}
.service-item__cta {
	display: inline-flex;
	align-items: center;
	margin-top: 30px;
	padding: 14px 34px;
	border: 1.5px solid rgba(255, 255, 255, .55);
	border-radius: 999px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.service-item__cta:hover {
	background: #fff;
	border-color: #fff;
	color: #14142b;
}

.service-item__media {
	flex: 0 0 40%;
	max-width: 40%;
	padding: 40px 48px 0 0;      /* top/right margin; flush with the card bottom */
}
/* rounded frame that stacks the still image + the hover video */
.service-item__frame {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 18px 18px 0 0;   /* rounded top, flush bottom */
	overflow: hidden;
	background: rgba(0, 0, 0, .2);
}
.service-item__img,
.service-item__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* the hover video sits over the still image and fades in while it plays
   (loaded + played on hover by js/services-video.js) */
.service-item__video {
	opacity: 0;
	transition: opacity .45s ease;
}
.service-item__video.is-playing {
	opacity: 1;
}

/* responsive: no sticky/100vh — cards stack normally */
@media (max-width: 900px) {
	.service-item {
		position: static;
		display: block;
		height: auto;
		box-shadow: none;
	}
	.service-item__body {
		padding: 40px 22px 34px;
	}
	.service-item__reveal,
	.service-item__desc {
		max-width: none;
	}
	.service-item__frame {
		border-radius: 18px;   /* fully rounded when not flush-bottom */
	}
	.service-item__media {
		flex: none;
		max-width: none;
		width: 100%;
		height: 260px;
		padding: 16px 22px 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.service-item__video {
		transition: none;
	}
}

/* One-time, scroll-linked reveal — the element eases DOWN into place as it first
   scrolls into view. js/reveal.js scrubs the transform/opacity by scroll
   position (a smooth "scroll in from the top" motion), then locks and clears the
   inline styles so it never replays. Applied to the .section-cards wrapper, so
   both cards move together (equal + aligned). Without JS or under reduced motion
   the element renders normally (never hidden). */
.reveal-init {
	opacity: 0;
	will-change: transform, opacity;
}

/* Cards: subtle zoom-out on hover (minimal + smooth). */
.section-card {
	transition: transform .35s ease;
}
.section-card:hover {
	transform: scale(.97);
}

/* Section responsive (kept with the section so it travels with it) */
@media (max-width: 992px) {
	.section-intro__grid {
		grid-template-columns: 1fr;
		gap: 44px;
	}
}
@media (max-width: 560px) {
	.section {
		padding: 60px 0;
	}
	.section-intro__heading {
		font-size: 34px;
	}
	.section-cards {
		grid-template-columns: 1fr;
	}
	.section-badge {
		line-height: 1.5em;
		font-size: 10px;
	}
	.cta-card__title{
		font-size: 26px;
	}
}


/*==============================================================
# RESPONSIVE
==============================================================*/

/* Mobile: collapse the nav behind the toggle button and stack the footer. */
@media (max-width: 900px) {
	.container {
		padding: 0 22px;
	}

	/* Mobile top bar: logo on the left; "Get Quote" + hamburger grouped on the right. */
	.site-header .container {
		min-height: 74px;
		padding: 0 12px;               /* header only — tighter so the row fits small phones */
		justify-content: flex-start;   /* override space-between; margin-auto groups the items */
		gap: 8px;
	}
	.site-branding {
		margin-right: auto;   /* push the logo left, group the rest on the right */
		min-width: 0;         /* allow the logo to shrink instead of pushing the row wider */
	}
	.custom-logo,
	.site-branding .logo-text {
		max-height: 44px;     /* slightly smaller logo on mobile to free up the row */
	}
	.site-branding .logo-text {
		font-size: 24px;
	}
	/* Show only the "Get Quote" CTA next to the toggle (hide "Join The Team"). */
	.header-actions {
		display: flex;
		order: 1;
		flex: 0 0 auto;
		gap: 8px;
	}
	.header-btn--join {
		display: none;
	}
	.header-btn {
		padding: 9px 13px;
		font-size: 12px;
	}
	.menu-toggle {
		width: 46px;
		height: 46px;
	}

	/* Nav holds just the hamburger, placed after the Get Quote button. */
	.main-navigation {
		order: 2;
		flex: 0 0 auto;
		display: flex;
		justify-content: flex-end;
	}
	.menu-toggle {
		display: block;
	}

	/* The menu drops down below the header; hidden until navigation.js
	   adds `.toggled` to #site-navigation on click. */
	.nav-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 40;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px 22px 20px;
		background: #fff;
		border-top: 1px solid var(--yd-line);
		box-shadow: 0 24px 40px rgba(0, 0, 0, .12);
	}
	.main-navigation.toggled .nav-menu {
		display: flex;
		background: #ffedec;
		/* The base (desktop) .nav-menu rule sets justify-content:flex-end for
		   the horizontal top bar — never reset here before. On an overflowing
		   flex-column container that packs overflow at the START, shoving
		   earlier items to large negative offsets above the visible area
		   (and making scrollTop useless, since reaching them would need
		   NEGATIVE scroll). Must be flex-start for a normal top-to-bottom
		   scrollable list. */
		justify-content: flex-start;
		/* Cap the panel to the space actually left below the header (JS sets
		   --yd-mobile-nav-top to the header's own height when it opens) and
		   scroll INSIDE it, instead of letting it overflow off-screen. */
		max-height: calc(100vh - var(--yd-mobile-nav-top, 80px));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
	/* While the mobile menu is open, the page behind it stays put — only the
	   menu itself (above) scrolls. navigation.js toggles this class. */
	body.menu-open {
		overflow: hidden;
	}
	.nav-menu > li > a {
		padding: 14px 0;
	}

	/* "Get a Quote" — full-width pill pinned at the bottom of the mobile menu. */
	.mobile-cta-item {
		display: block;
		margin-top: 20px;
	}
	.nav-menu .mobile-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 16px 24px;
		border-radius: 50px;
		background: var(--yd-primary);
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: .02em;
		text-transform: none;
		box-shadow: 0 10px 22px -8px rgba(255, 57, 81, .7);
	}
	.nav-menu .mobile-cta:hover {
		background: var(--yd-primary-dark);
	}

	/* On small screens dropdowns render inline, but are COLLAPSED by default
	   and open on tap — navigation.js adds `.focus` to the tapped parent. */
	.sub-menu,
	.mega-menu-panel {
		position: static;
		width: auto;
		box-shadow: none;
		transform: none;
		display: none;              /* collapsed until the parent is tapped */
		padding: 6px 0 10px 16px;
	}
	.menu-item-has-children.focus > .sub-menu,
	.mega-menu.focus > .mega-menu-panel {
		display: block;
		opacity: 1;
		visibility: visible;
	}
	.mega-columns {
		flex-direction: column;
		gap: 8px;
	}

	/* Split "tap to navigate" from "tap to expand": the link (e.g. "Services")
	   stays a plain, fully tappable link to its own page; the dedicated
	   .submenu-toggle button (added by class-yendigital-mega-walker.php) is
	   the ONLY control that opens/closes the submenu/mega panel. */
	.nav-menu > li.menu-item-has-children {
		display: flex;
		flex-wrap: wrap;              /* the panel/sub-menu drops to its own full-width row below, instead of sharing the link+toggle row */
		align-items: center;
		justify-content: space-between;
	}
	.nav-menu > li.menu-item-has-children > a {
		flex: 1 1 auto;
	}
	/* Force the (much taller) revealed panel onto a new line — without this
	   it's a 3rd item in the SAME row as the link+toggle, and align:center
	   re-centers that whole row against the panel's full height, shoving the
	   link/button far down once opened. */
	.nav-menu > li.menu-item-has-children > .sub-menu,
	.nav-menu > li.menu-item-has-children > .mega-menu-panel {
		flex: 1 0 100%;
	}
	/* The old inline caret on the link is replaced by the button's own caret
	   below, so it's hidden here (hover-follow rule above doesn't apply on
	   touch anyway). */
	.nav-menu > .menu-item-has-children > a::after {
		display: none;
	}
	.submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		background: transparent;
		border: 0;
		color: inherit;
		cursor: pointer;
	}
	.submenu-toggle::after {
		content: "";
		width: 7px;
		height: 7px;
		border-right: 1.6px solid currentColor;
		border-bottom: 1.6px solid currentColor;
		transform: rotate(45deg);
		transition: transform .2s ease;
	}
	.menu-item-has-children.focus > .submenu-toggle::after {
		transform: rotate(225deg);
	}
}



/*======================== INSIGHTS SECTION ==================================*/

.insights-section{
    padding:120px 0;
    background:#fff;
    overflow:hidden;
}

.insights-section .container{
    max-width:1320px;
    margin:0 auto;
}


.insights-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    align-items:start;
}

.insight-card{
    width:100%;
}

.post-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:22px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    box-shadow:
        0 2px 6px rgba(0,0,0,.04),
        0 10px 30px rgba(0,0,0,.05);
}

.post-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);
}

.insight-card__image-link{

    display:block;

    text-decoration:none;

    color:inherit;
}

.insight-card__image{

    position:relative;

    margin:16px 16px 0;

    border-radius:8px;

    overflow:hidden;

    aspect-ratio:1.63;

    background:#f4f4f4;
}


.insight-card__image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .6s ease;
}

.post-card:hover .insight-card__image img{

    transform:scale(1.04);
}

.insight-card__category{

    position:absolute;

    top:0;

    left:0;

    z-index:2;

    padding:11px 18px;

    background:var(--yd-primary);

    color:#fff;

    text-transform:uppercase;

    line-height:1;

    letter-spacing:.03em;

    white-space:nowrap;
}


.insight-card__content{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:36px 34px 34px;

    flex:1;
}

.insight-card__title-link{

    color:inherit;

    text-decoration:none;

    display:block;

    margin-bottom:28px;

    transition:.3s;
}

.insight-card__title-link:hover{

    color:var(--primary-color);
}


.insights-load-more{

    display:flex;

    justify-content:center;

    margin-top:60px;
}

.load-more-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:180px;

    height:58px;

    padding:0 42px;

    border:none;

    border-radius:999px;

    background:var(--yd-primary-dark);

    color:#fff;

    font:inherit;

    font-weight:600;

    cursor:pointer;

    transition:all .35s ease;
}

.load-more-btn:hover{

    transform:translateY(-3px);

    opacity:.9;
}

.load-more-btn:focus-visible{

    outline:2px solid var(--primary-color);

    outline-offset:4px;
}

/*======================================
LARGE TABLET
======================================*/

@media (max-width: 1199px){

    .insights-section{
        padding:100px 0;
    }

    .insights-grid{
        gap:20px;
    }

    .insight-card__content{
        padding:32px 28px 30px;
    }

    .insight-card__image{
        margin:14px 14px 0;
    }

    .insight-card__category{
        padding:10px 16px;
    }

}

/*======================================
TABLET
======================================*/

@media (max-width: 991px){

    .insights-section{
        padding:80px 0;
    }

    .insights-grid{

        grid-template-columns:repeat(2,1fr);

        gap:24px;
    }

    .insight-card__content{

        padding:30px 24px;
    }

    .insight-card__title-link{

        margin-bottom:22px;
    }

    .insight-card__author{

        padding-top:20px;
    }

    .insights-pagination{

        margin-top:48px;
    }

}

/*======================================
MOBILE LANDSCAPE
======================================*/

@media (max-width: 767px){

    .insights-section{
        padding:70px 0;
    }

    .insights-grid{

        grid-template-columns:1fr;

        gap:28px;
    }

    .post-card{

        border-radius:18px;
    }

    .insight-card__image{

        margin:12px 12px 0;

        border-radius:8px;
    }

    .insight-card__content{

        padding:28px 22px;
    }

    .insight-card__title-link{

        margin-bottom:18px;
    }

    .insight-card__excerpt{

        max-width:100%;
    }

    .insight-card__author{

        padding-top:18px;
    }

    .insights-pagination{

        gap:16px;

        margin-top:40px;

        flex-wrap:wrap;
    }

}

/*======================================
MOBILE
======================================*/

@media (max-width:575px){

    .insights-section{
        padding:60px 0;
    }

    .insight-card__image{

        aspect-ratio:16/10;
    }

    .insight-card__content{

        padding:24px 18px;
    }

    .insight-card__category{

        top:0;
        left:0;

        padding:8px 14px;
    }

    .insight-card__title-link{

        margin-bottom:16px;
    }

    .insight-card__author{

        padding-top:16px;
    }

}

/*======================================
SMALL MOBILE
======================================*/

@media (max-width:380px){

    .insight-card__content{

        padding:20px 16px;
    }

    .insight-card__image{

        margin:10px 10px 0;
    }

    .insights-pagination{

        gap:12px;
    }

}


/*==================================================
CONTACT SECTION
==================================================*/

.contact-section{
    padding:140px 0;
    background:#fff;
    overflow:hidden;
}

.contact-section .container{
    width:100%;
}

/*==================================================
LAYOUT
==================================================*/

.contact-wrapper{
    display:grid;
    grid-template-columns:1fr 550px;
    gap:90px;
    align-items:start;
}

/*==================================================
LEFT CONTENT
==================================================*/

.contact-content{
    padding-top:10px;
}

/*==================================================
TITLE
Uses your website typography
==================================================*/

.contact-title{
    margin:0;
    font-size: clamp(38px, 5.4vw, 82px);
    font-weight:700;
    line-height:1.04;
    letter-spacing:-0.04em;
    text-wrap:balance;
}

/*==================================================
DESCRIPTION
==================================================*/

.contact-description{
    margin:48px 0 80px;
    color:inherit;
    line-height:1.7;
    max-width:540px;
}

/*==================================================
CONTACT INFO
==================================================*/

.contact-info{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:50px;
}

/*==================================================
ITEM
==================================================*/

.contact-info-item{
    display:flex;
    flex-direction:column;
}

/*==================================================
ICON
==================================================*/

.contact-icon{
    width:28px;
    height:28px;
    border-radius:50%;
    background:#14142b;
    position:relative;
    margin-bottom:34px;
    overflow:hidden;
}

.contact-icon span{
    position:absolute;
    top:0;
    right:0;
    width:50%;
    height:100%;
    background:var(--yd-primary);;
}

/*==================================================
HEADING
==================================================*/

.contact-info-item h4{
    margin:0 0 28px;
    color:inherit;
    font:inherit;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
}

/*==================================================
TEXT
==================================================*/

.contact-info-item a,
.contact-info-item p{
    margin:0;
    color:inherit;
    text-decoration:none;
    line-height:1.6;
}

.contact-info-item a:hover{
    color:var(--yd-primary);
}

/*==================================================
FORM
==================================================*/

.contact-form-wrap{
    width:100%;
}

.contact-form-card{

    background:#fff;

    border-radius:48px;

    padding:56px;

    box-shadow:
        0 10px 40px rgba(0,0,0,.06);

    border:1px solid #efefef;
}

/*==================================================
FORM
==================================================*/

.contact-form-card form{
    display:flex;
    flex-direction:column;
    gap:42px;
}

/*==================================================
FORM GROUP
==================================================*/

.form-group{
    position:relative;
}

/*==================================================
INPUT
==================================================*/

.form-group input,
.form-group textarea{

    width:100%;

    border:none;

    border-bottom:1px solid #2b2b2b;

    background:transparent;

    padding:0 0 18px;

    color:inherit;

    font:inherit;

    outline:none;

    resize:none;

    transition:border-color .3s ease;
}

/*==================================================
PLACEHOLDER
==================================================*/

.form-group input::placeholder,
.form-group textarea::placeholder{

    color:#8c8c8c;

    opacity:1;
}

/*==================================================
FOCUS
==================================================*/

.form-group input:focus,
.form-group textarea:focus{

    border-color:var(--yd-primary);
}

/*==================================================
TEXTAREA
==================================================*/

.form-group textarea{

    min-height:130px;

    overflow:hidden;
}

/*==================================================
SUBMIT
==================================================*/

.form-submit{

    display:flex;

    justify-content:flex-end;

    margin-top:10px;
}

/*==================================================
BUTTON
==================================================*/

.form-submit button{

    min-width:220px;

    height:68px;

    border:none;

    border-radius:999px;

    background:#161616;

    color:#fff;

    font:inherit;

    font-weight:500;

    cursor:pointer;

    transition:
        background .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}

.form-submit button:hover{
    background:var(--yd-primary);
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.form-submit button:active{

    transform:translateY(0);
}

/*==================================================
ACCESSIBILITY
==================================================*/

.form-group input:focus-visible,
.form-group textarea:focus-visible{

    outline:none;
}

/*==================================================
AUTOFILL
==================================================*/

.form-group input:-webkit-autofill,
.form-group textarea:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px #fff inset;

    -webkit-text-fill-color:#000;
}

/*======================================
CONSENT
======================================*/

.contact-consent{

    display:flex;

    flex-direction:column;

    gap:26px;

    margin-top:8px;
}

/*======================================
ITEM
======================================*/

.consent-item{

    display:flex;

    align-items:flex-start;

    gap:16px;

    cursor:pointer;

    color:inherit;

    line-height:1.6;
    font-size:14px;
}

.consent-item span{
    flex:1;
    font-size:14px;
}

/*======================================
CHECKBOX
======================================*/

.consent-item input[type="checkbox"]{
    appearance:none;
    -webkit-appearance:none;
    width:16px;
    height:16px;
    margin-top:3px;
    border:1.5px solid #8a8a8a;
    border-radius:4px;
    background:#fff;
    cursor:pointer;
    position:relative;
    flex-shrink:0;
    transition:.25s ease;
}

.consent-item input[type="checkbox"]:checked{
    background:var(--yd-primary);
    border-color:var(--yd-primary);
}

.consent-item input[type="checkbox"]:checked::after{

    content:"✓";

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-58%);

    color:#fff;

    font-size:12px;

    font-weight:700;
}

/*======================================
LINKS
======================================*/

.consent-item a{

    color:var(--yd-primary);

    text-decoration:underline;

    transition:.3s ease;
}

.consent-item a:hover{

    opacity:.8;
}

/*======================================
LAPTOP
======================================*/

@media (max-width:1200px){

    .contact-wrapper{
        grid-template-columns:1fr 500px;
        gap:60px;
    }

    .contact-info{
        gap:35px;
    }

    .contact-form-card{
        padding:45px;
    }

}

/*======================================
TABLET
======================================*/

@media (max-width:991px){

    .contact-section{
        padding:90px 0;
    }

    .contact-wrapper{

        grid-template-columns:1fr;

        gap:60px;
    }

    .contact-content{

        max-width:100%;
    }

    .contact-description{

        max-width:100%;

        margin:35px 0 60px;
    }

    .contact-info{

        grid-template-columns:repeat(3,1fr);

        gap:30px;
    }

    .contact-form-wrap{

        max-width:700px;

        width:100%;

        margin:auto;
    }

    .contact-form-card{

        border-radius:35px;

        padding:40px;
    }

}

/*======================================
MOBILE
======================================*/

@media (max-width:767px){

    .contact-section{

        padding:70px 0;
    }

    .contact-wrapper{

        gap:50px;
    }

    .contact-description{

        margin:30px 0 45px;
    }

    .contact-info{

        grid-template-columns:1fr;

        gap:40px;
    }

    .contact-info-item{

        text-align:left;
    }

    .contact-icon{

        margin-bottom:20px;
    }

    .contact-form-card{

        padding:30px 24px;

        border-radius:24px;
    }

    .contact-form-card form{

        gap:30px;
    }

    .form-group textarea{

        min-height:110px;
    }

    .contact-consent{

        gap:18px;
    }

    .consent-item{

        gap:12px;

        align-items:flex-start;
    }

    .consent-item span{

        line-height:1.5;
    }

    .form-submit{

        justify-content:center;

        margin-top:10px;
    }

    .form-submit button{

        width:100%;

        max-width:260px;

        height:56px;
    }

}

/*======================================
SMALL MOBILE
======================================*/

@media (max-width:575px){

    .contact-section{

        padding:60px 0;
    }

    .contact-form-card{

        padding:24px 20px;
    }

    .contact-info{

        gap:30px;
    }

    .contact-info-item h4{

        margin-bottom:14px;
    }

    .contact-icon{

        width:24px;

        height:24px;
    }

    .contact-consent{

        gap:16px;
    }

    .consent-item{

        gap:10px;
    }

    .consent-item input[type="checkbox"]{

        width:18px;

        height:18px;
    }

    .form-submit button{

        width:100%;
    }

}

/*======================================
EXTRA SMALL
======================================*/

@media (max-width:380px){

    .contact-form-card{

        padding:20px 16px;

        border-radius:20px;
    }

    .contact-form-card form{

        gap:24px;
    }

    .contact-info{

        gap:24px;
    }

    .contact-description{

        margin:25px 0 35px;
    }

    .form-submit button{

        height:52px;
    }

}

/*=====================================
FAQ SECTION
=====================================*/

.faq-wrapper{
    background:#ffedec;
    padding:160px 0px 80px 0px;
}

.faq-heading h2{
    text-align: center;
    margin: 0 0 26px;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--yd-heading);
}
.faq-heading h2 span{
	color:var(--yd-primary);
}

.faq-accordion-box{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.faq-accordion-text-left,
.faq-accordion-text-right{
    display:flex;
    flex-direction:column;
    gap:16px;
}

/*=====================================
Accordion Item
=====================================*/

.accordion-item{
    overflow:hidden;
    transition:max-height .5s ease;
}

.accordion-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 24px;
    background:#fff;
    border:1px solid var(--yd-primary);
    border-radius:8px;
    cursor:pointer;
    transition:.3s;
}

.accordion-header h3{
    margin: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    letter-spacing: 0;
    position: relative;
    width: 96%;
}

.accordion-header .icon{
    cursor: pointer;
    font-size: 30px;
    font-weight: 700;
    transition: transform .3s;
    color:var(--yd-primary);
    position: absolute;
    right: -20px;
}

.accordion-content{
    max-height:0;
    overflow:hidden;
    padding:0 24px;
    transition:max-height .45s ease,padding .35s ease;
    background:#fff;
    border-radius:12px 12px 12px 12px;
}

.accordion-content p{
    margin:0 0 16px;
    line-height:28px;
}

/*=====================================
Active
=====================================*/

.accordion-item.active .accordion-header{

    background:#ffedec;
}

.accordion-item.active .accordion-content{
    max-height:1000px;
    padding:20px 24px;
}

.accordion-item.active .icon{
    transform:rotate(180deg);
    color:var(--yd-primary);
}

/*=========================================
LARGE DESKTOP
=========================================*/

@media (max-width:1400px){

    .faq-heading h2{
        font-size:clamp(42px,4vw,60px);
    }

}

/*=========================================
LAPTOP
=========================================*/

@media (max-width:1199px){

    .faq-wrapper{
        padding:160px 0px 80px 0px;
    }

    .faq-accordion-box{
        gap:18px;
    }

    .accordion-header{
        padding:18px 22px;
    }

    .accordion-header h3{
        width:92%;
    }

}

/*=========================================
TABLET
=========================================*/

@media (max-width:991px){

    .faq-wrapper{
        padding:160px 0px 80px 0px;
    }

    .faq-heading h2{
        margin-bottom:40px;
    }

    .faq-accordion-box{

        grid-template-columns:1fr;

        gap:18px;
    }

    .faq-accordion-text-left,
    .faq-accordion-text-right{

        gap:18px;
    }

    .accordion-header{

        padding:18px 20px;
    }

    .accordion-header h3{

        width:90%;
    }

}

/*=========================================
MOBILE
=========================================*/

@media (max-width:767px){

    .faq-wrapper{
        padding:70px 0;
    }

    .faq-heading h2{

        margin-bottom:35px;
    }

    .accordion-header{

        padding:18px;
    }

    .accordion-header h3{
        width:85%;
        line-height:1.5;
    }

    .accordion-header .icon{
        font-size:30px;
    }

    .accordion-content{
        padding:0 18px;
    }

    .accordion-item.active .accordion-content{
        padding:18px;
    }

}

/*=========================================
SMALL MOBILE
=========================================*/

@media (max-width:575px){
    .faq-wrapper{
        padding:60px 0;
    }

    .faq-heading h2{
        margin-bottom:28px;
    }

    .accordion-header{
        padding:16px;
    }

    .accordion-header h3{
        width:82%;
    }

    .accordion-header .icon{
        font-size:28px;
    }

    .accordion-item.active .accordion-content{
        padding:16px;
    }

}

/*=========================================
EXTRA SMALL
=========================================*/

@media (max-width:380px){

    .accordion-header{
        padding:14px;
    }

    .accordion-header h3{
        width:80%;
    }

    .accordion-header .icon{
        font-size:26px;
    }

    .accordion-item.active .accordion-content{
        padding:14px;
    }

} /* closes the pre-existing @media (max-width:380px) block above (line 3378)
     — it was left unclosed in the file before this section was added; this
     brace restores it. Without it, everything below would be trapped inside
     a max-width:380px query and never apply on a normal-width browser. */

/* =============================================================================
   YD NEW SECTION — "What's included in Discovery" (agentic-ai.php)
   -----------------------------------------------------------------------------
   Newly added section only. Fully isolated under the yd-new-section- prefix
   so it can never collide with any existing selector — no existing rule
   above this point is modified.
============================================================================= */
.yd-new-section-discovery {
	--yd-new-section-check: var(--yd-primary);
	padding: 80px 0;
	background: #fff;
	font-family: var(--yd-font);
}
.yd-new-section-discovery__title {
	max-width: 900px;
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--yd-heading);
}
.yd-new-section-discovery__title span{
	color: var(--yd-primary);
}
.yd-new-section-discovery__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 64px;
	row-gap: 44px;
	padding-top: 64px;
}
.yd-new-section-discovery__row:first-child {
	padding-top: 0;
	border-top: 0;
}
.yd-new-section-discovery__row + .yd-new-section-discovery__row {
	margin-top: 8px;
}
.yd-new-section-discovery__head {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 32px;
}
.yd-new-section-discovery__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	margin-top: 2px;
	border-radius: 13px;
	background: #fff;
	border: 1px solid rgba(20, 20, 43, 0.06);
	box-shadow: 0 10px 22px -10px rgba(20, 20, 43, 0.3);
	color: var(--yd-heading);
}
.yd-new-section-discovery__icon svg {
	width: 18px;
	height: 18px;
}
.yd-new-section-discovery__item-title {
	margin: 0;
	color: var(--yd-heading);
	font-weight: 700;
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.22;
	letter-spacing: -0.015em;
}
.yd-new-section-discovery__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.yd-new-section-discovery__list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 18px;
	color: var(--yd-body);
	font-size: 17px;
	line-height: 1.55;
}
.yd-new-section-discovery__list li:last-child {
	margin-bottom: 0;
}
.yd-new-section-discovery__list li::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 4px;
	/* The SVG only defines the CHECKMARK SHAPE (used as a mask, not painted
	   directly) — the actual colour comes from background-color below, so it
	   stays tied to the site's --yd-primary red token instead of a
	   hardcoded, independently-drifting hex value. */
	background-color: var(--yd-new-section-check);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
	.yd-new-section-discovery__row {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 48px;
	}
}
@media (max-width: 600px) {
	.yd-new-section-discovery {
		padding: 60px 0;
	}
	.yd-new-section-discovery__row {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* ==========contact form================ */
#contactSubmit:disabled{
    opacity:.5;
    cursor:not-allowed;
    pointer-events:none;
}

.contact-response{
    margin-top:15px;
    font-size:18px;
    font-weight:500;
}

.contact-response.success{
    color:#16a34a;
}

.contact-response.error{
    color:#dc2626;
}

.section-legal-content{
     padding:120px 0;
    background:#f8f9fb;
}

.contact-modal__success{
    margin-top:20px;
    font-size:15px;
    font-weight:500;
}

.contact-modal__success.success{
    color:#0b8f3d;
}

.contact-modal__success.error{
    color:#d61f1f;
}

.legal-wrapper{
    margin:0 auto;
}

.legal-content{
    background:#fff;
    border:1px solid #ececec;
    border-radius:32px;
    padding:60px;
    box-shadow:0 20px 60px rgba(15,23,42,.08);
    overflow:hidden;
}

.legal-content h2,
.legal-content h3,
.legal-content h4{
    margin-top:48px;
    margin-bottom:20px;
}

.legal-content p{
    margin-bottom:20px;
}

.legal-content ul{
    margin:20px 0 30px;
    padding-left:22px;
}

.legal-content li{
    margin-bottom:12px;
}

.legal-content a{
    color:var(--color-primary);
}

.legal-content ul{
    list-style:none;
    padding:0;
    margin:20px 0 30px;
}

.legal-content ul li{
    position:relative;
    padding-left:32px;
    margin-bottom:14px;
}

.legal-content ul li::before{
    content:"\2192"; /* → */
    position:absolute;
    left:0;
    top:0px;
    color:var(--color-primary);
    font-size:18px;
    font-weight:700;
}

.legal-content ul li a{
    color:#ff3951;
    text-decoration:none;
    transition:.3s ease;
}

.legal-content ul li a:hover{
    color:var(--color-primary);
}

@media (max-width:991px){

    .legal-content{
        padding:40px;
        border-radius:24px;
    }

}

@media (max-width:767px){

    .section-legal-content{
        padding:80px 0;
    }

    .legal-content{
        padding:24px;
        border-radius:20px;
    }

}


.section-error-404{
    padding:40px 0;
    min-height:calc(100vh - 160px);
    display:flex;
    align-items:center;
    background:#fff;
}

.error-404{
    max-width:920px;
    margin:0 auto;
    text-align:center;
}

.error-404__image{
    margin-bottom:50px;
}

.error-404__image img{
    max-width:600px;
    width:100%;
    height:auto;
    display:block;
    margin:0 auto;
}

.error-404__content h1{
    margin:0 0 24px;
    font-size:48px;
    line-height:1.1;
    font-weight:700;
    color:#101828;
}

.error-404__content p{
    max-width:700px;
    margin:0 auto 40px;
    font-size:22px;
    line-height:1.7;
    color:#667085;
}

.error-404__content .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 42px;
    border-radius:999px;
    text-decoration:none;
    background:#ff3951; /* Website Primary Red */
    color:#fff;
    font-size:16px;
    font-weight:600;
    transition:.35s ease;
}

.error-404__content .btn:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 35px rgba(215,25,32,.25);
}

@media(max-width:991px){

    .section-error-404{
        padding:90px 0;
    }

    .error-404__image img{
        max-width:450px;
    }

    .error-404__content h1{
        font-size:38px;
    }

    .error-404__content p{
        font-size:18px;
    }

}

@media(max-width:767px){

    .section-error-404{
        padding:70px 0;
    }

    .error-404__image{
        margin-bottom:35px;
    }

    .error-404__image img{
        max-width:320px;
    }

    .error-404__content h1{
        font-size:30px;
    }

    .error-404__content p{
        font-size:16px;
        line-height:1.6;
        margin-bottom:30px;
    }

    .error-404__content .btn{
        width:100%;
        max-width:280px;
        padding:16px 24px;
    }

}

/* ==========================================================
   Industry Hero Section
   ----------------------------------------------------------
   Reuses the site's existing global typography (h1, body copy)
   and the existing .btn/.btn--outline pill button — no new type
   scale or button style is introduced here, only layout/spacing.
========================================================== */
/* Every section on the Industry template shares the same 80px top/bottom
   rhythm — see .capabilities, .stats-marquee, .sector-stack__intro and
   .cta-banner, which all use the same value at every breakpoint. */
.industry-hero {
	padding: 80px 0;
}
.industry-hero__container {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* --- Top row: heading / CTA / intro text --- */
.industry-hero__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px 32px;
}
.industry-hero__heading-wrap {
	flex: 0 1 auto;
	min-width: 0;
}
.industry-hero__heading {
	margin: 0;
	/* Without this the global `h1 { font-size: 60px }` applied at every width, so
	   a long single-word industry name ("Manufacturing") overflowed on a phone —
	   and because the theme sets `html { overflow-x: clip }` it was silently cut
	   off rather than scrollable. Scales down to 30px at the small end. */
	font-size: clamp( 30px, 5.6vw, 60px );
	line-height: 1.14;
	/* Last-resort guard: a name with no space in it that is still too wide for
	   the viewport breaks instead of spilling. */
	overflow-wrap: break-word;
}
.industry-hero__cta-wrap {
	flex: 0 0 auto;
}
.industry-hero__cta {
	white-space: nowrap;
}
.industry-hero__intro-wrap {
	flex: 0 1 380px;
	max-width: 380px;
}
.industry-hero__intro {
	margin: 0;
	font-weight: 600;
    color: #000;
}

/* --- Hero image --- */
.industry-hero__image-wrap {
	width: 100%;
}
.industry-hero__image {
	margin: 0;
	overflow: hidden;
	border-radius: 32px;
}
.industry-hero__image-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.industry-hero__image:hover .industry-hero__image-img {
	transform: scale( 1.03 );
}

/* -----------------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------------- */
@media ( max-width: 900px ) {
	.industry-hero__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.industry-hero__intro-wrap {
		flex: none;    /* base rule's flex-basis:380px would otherwise apply to
		                  HEIGHT once .industry-hero__top becomes a column, not
		                  width — leaving a ~380px-tall box around 2 short
		                  lines of text and a large empty gap before the image */
		max-width: 100%;
	}
	.industry-hero__image {
		border-radius: 24px;
	}
}
@media ( max-width: 560px ) {
	/* padding stays 80px 0 — the section rhythm is deliberately uniform at
	   every breakpoint, so no override here. */
	.industry-hero__image {
		border-radius: 18px;
	}
}

/* ==========================================================
   Capabilities / Services Grid Section
   ----------------------------------------------------------
   2x2 hairline-bordered grid (borders collapse via negative
   margins, like a table). Each card is its own <a> (see
   industry.php): title top, description bottom, generous empty
   space between via flex + min-height. Heading reuses the site's
   existing global h2 style — no new type scale introduced.
========================================================== */
.capabilities {
	padding: 80px 0;
}
.capabilities__heading {
	margin: 0 0 64px;
	font-size: clamp( 28px, 4vw, 52px );
}
.capabilities__heading span, .sector-stack__heading span, .tech-stack__heading span {
    color: var(--yd-primary);
}

/* --- Grid --- */
.capabilities__grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	margin-top: -1px;
	margin-left: -1px;
	border-top: 1px solid var( --yd-line );
	border-left: 1px solid var( --yd-line );
}

/* --- Card ---
   The red "liquid" fill is a ::before pseudo-element, absolutely
   positioned and clipped to the card, sitting fully below the
   visible area at rest (translateY(100%)) and animating straight
   up to translateY(0) on hover — a pure transform move, never an
   opacity fade, so it reads as the colour physically rising to
   fill the card rather than fading in. */
.capability-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: clamp( 340px, 30vw, 460px );
	padding: clamp( 28px, 3vw, 44px );
	overflow: hidden;                 /* clips the ::before fill to the card */
	margin-top: -1px;
	margin-left: -1px;
	border-right: 1px solid var( --yd-line );
	border-bottom: 1px solid var( --yd-line );
	text-decoration: none;
	color: inherit;
}
.capability-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var( --yd-primary );  /* site red, NOT the reference's blue */
	transform: translateY( 100% );    /* fully hidden below the card at rest */
	transition: transform 0.6s cubic-bezier( 0.65, 0, 0.35, 1 );
}

/* Arrow — top-right corner, hidden at rest, reveals + nudges into place on
   hover (opacity + a small upward slide only: no scale, no rotation, no
   bounce, matching the same "moves upward" motion language as the fill). */
.capability-card__arrow {
	position: absolute;
	top: clamp( 24px, 2.6vw, 40px );
	right: clamp( 24px, 2.6vw, 40px );
	z-index: 1;
	display: inline-flex;
	width: clamp( 40px, 4vw, 56px );
	height: clamp( 40px, 4vw, 56px );
	color: #fff;
	opacity: 0;
	transform: translateY( 10px );
	transition: opacity 0.45s ease, transform 0.5s cubic-bezier( 0.22, 1, 0.36, 1 );
}
.capability-card__arrow-icon {
	width: 100%;
	height: 100%;
}

/* Title / description — sit above the fill layer and cross-fade colour from
   dark to white as the red rises underneath them. */
.capability-card__title-wrap,
.capability-card__text-wrap {
	position: relative;
	z-index: 1;
}
.capability-card__title {
	margin: 0;
	color: var( --yd-heading );
	transition: color 0.5s ease;
	font-size: clamp(22px, 4vw, 24px);
}
.capability-card__text {
	margin: 16px 0 0;
	max-width: 34em;
	color: var( --yd-body );
	transition: color 0.5s ease;
}

/* write css default 1st card red */
.capability-card.active::before{
    transform: translateY(0);
}

.capability-card.active{
    color:#fff;
}

.capability-card.active .capability-card__title,
.capability-card.active .capability-card__text,
.capability-card.active .capability-card__arrow{
    color:#fff;
}

.capability-card:hover::before{
    transform: translateY(0);
}

.capability-card:hover{
    color:#fff;
}

.capabilities__grid:hover .capability-card.active::before{
    transform: translateY(100%);
}

.capabilities__grid:hover .capability-card.active{
    color:var(--yd-text);
}

.capabilities__grid:hover .capability-card.active .capability-card__title,
.capabilities__grid:hover .capability-card.active .capability-card__text,
.capabilities__grid:hover .capability-card.active .capability-card__arrow{
    color:inherit;
}

/*  write css default 1st card red  */

/* All :hover-triggered state changes are scoped to devices with a real,
   precise pointer (mouse/trackpad) ONLY. Touch devices (phones, tablets)
   never match this query, so a tap can never leave a card "stuck" showing
   its red fill/white text — on touch, cards simply stay in their clean
   default state, since there is no real hover concept to sustain the effect. */
@media ( hover: hover ) and ( pointer: fine ) {
	.capability-card:hover::before {
		transform: translateY( 0 );       /* rises to fill the card completely */
	}
	.capability-card:hover .capability-card__arrow {
		opacity: 1;
		transform: translateY( 0 );
	}
	.capability-card:hover .capability-card__title,
	.capability-card:hover .capability-card__text {
		color: #fff;
	}
}

/* -----------------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------------- */
@media ( max-width: 560px ) {
	.capabilities__heading {
		margin-bottom: 40px;
	}
	.capabilities__grid {
		grid-template-columns: 1fr;
	}
	.capability-card {
		min-height: 320px;
	}
}

/* ==========================================================
   Industry Statistics / Achievement Cards Marquee Section
   ----------------------------------------------------------
   Pure CSS infinite marquee: .stats-marquee__track holds TWO
   identical .stats-marquee__group blocks side by side (see
   industry.php) and is animated from translateX(0) to
   translateX(-50%) — exactly one group's width — so the moment
   the loop restarts, group 2 is sitting exactly where group 1
   started, making the reset invisible. Direction is right-to-
   left (content appears to enter from the right as the track
   itself shifts left). Numbers/labels reuse the site's existing
   font-family/weight conventions already used elsewhere on this
   page — no unrelated new type scale.
========================================================== */
.stats-marquee {
	overflow: hidden;
	padding: 80px 0;
	background: #ffedec;
}
.stats-marquee__viewport {
	overflow: hidden;
	width: 100%;
}
.stats-marquee__track {
	display: flex;
	width: max-content;
	animation: stats-marquee-scroll 46s linear infinite;
}
/* Pause ONLY while the pointer is over an individual card — never merely for
   being anywhere inside the black section. :has() lets the track (the animated
   element) react to a hover on its own descendant. animation-play-state freezes
   the animation in place rather than resetting it, so leaving a card resumes
   from the exact same offset — no jump, flicker or restart. Gated behind
   hover/pointer so a tap on a touch device can't leave the marquee stuck. */
@media ( hover: hover ) and ( pointer: fine ) {
	.stats-marquee__track:has( .stat-card:hover ) {
		animation-play-state: paused;
	}
}
@keyframes stats-marquee-scroll {
	from {
		transform: translateX( 0 );
	}
	to {
		transform: translateX( -50% );
	}
}
.stats-marquee__group {
	display: flex;
	flex-shrink: 0;
	gap: clamp( 16px, 1.6vw, 24px );
	padding: 0 clamp( 16px, 1.6vw, 24px );
}

/* --- Card (shared base) --- */
.stat-card {
	position: relative;
	flex-shrink: 0;
	overflow: hidden;                  /* clips the background image to the rounded corner */
	display: flex;
	flex-direction: column;
	width: clamp( 300px, 26vw, 380px );
	height: clamp( 300px, 25vw, 380px );
	padding: clamp( 28px, 2.8vw, 40px );
	border-radius: 28px;
}

/* Single background image per card — fills the whole card, no <img> tags.
   The card's own overflow:hidden + border-radius clip it to the rounded
   corner, so the image never needs its own radius. */
.stat-card__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
/* Colour scrim over the image — keeps each card's existing colour identity
   and keeps the text legible now that a photo sits behind it. Tinted per
   modifier below. */
.stat-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Content block — one reusable wrapper per card holding the number, title
   and (optionally) description. Vertical placement is driven purely by the
   --top / --middle / --bottom modifier, so a future ACF "Content Position"
   select field only ever swaps this one class. */
.stat-card__content {
	position: relative;
	z-index: 1;
}
.stat-card__content--top {
	margin-bottom: auto;
}
.stat-card__content--middle {
	margin-top: auto;
	margin-bottom: auto;
}
.stat-card__content--bottom {
	margin-top: auto;
}

/* Number + title typography — colour is set per background modifier below
   (dark backgrounds get white text, light backgrounds get the site's
   heading colour). */
.stat-card__number-wrap {
	position: relative;
	z-index: 1;
}
.stat-card__number {
	display: block;
	font-family: var( --yd-font );
	font-weight: 800;
	font-size: clamp( 32px, 3.6vw, 52px );
	line-height: 1;
	letter-spacing: -0.02em;
}
.stat-card__title-wrap {
	position: relative;
	z-index: 1;
	margin-top: 10px;
}
.stat-card__title {
	margin: 0;
	font-family: var( --yd-font );
	font-weight: 700;
	font-size: clamp( 14px, 1.15vw, 17px );
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* --- Card 1: badge (dark navy + decorative scalloped shape) --- */
.stat-card--badge {
	align-items: center;
	text-align: center;
	background: var( --yd-heading );  /* reuses the site's own dark-navy token */
}
.stat-card--badge::after {
	background: rgba( 20, 20, 43, 0.82 );
}
.stat-card--badge .stat-card__number,
.stat-card--badge .stat-card__title {
	color: #fff;
}
.stat-card__shape {
	position: absolute;
	inset: 0;
	z-index: 1;                        /* above the ::after scrim, below the content */
	opacity: 0.5;
	background-image: radial-gradient( circle at 50% 50%, rgba( 255, 255, 255, 0.14 ) 0 38%, transparent 39% );
	background-size: 64px 64px;
	background-position: 0 0, 32px 32px;
}
.stat-card--badge .stat-card__badge-wrap {
	position: relative;
	z-index: 1;
}
.stat-card__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp( 104px, 10.5vw, 136px );
	height: clamp( 104px, 10.5vw, 136px );
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 50%;
}
.stat-card--badge .stat-card__title-wrap {
	margin-top: 24px;
}

/* --- Card 2: photo, light blue backdrop --- */
.stat-card--photo {
	background: #cfe7f6;
}
.stat-card--photo::after {
	background: linear-gradient( to top, rgba( 207, 231, 246, 0.94 ) 0%, rgba( 207, 231, 246, 0.34 ) 62%, rgba( 207, 231, 246, 0.2 ) 100% );
}
.stat-card--photo .stat-card__number,
.stat-card--photo .stat-card__title {
	color: var( --yd-heading );
}

/* --- Card 3: light/white --- */
.stat-card--light {
	background: #fff;
	border: 1px solid var( --yd-line );
}
.stat-card--light::after {
	background: linear-gradient( to bottom, rgba( 255, 255, 255, 0.94 ) 0%, rgba( 255, 255, 255, 0.42 ) 58%, rgba( 255, 255, 255, 0.22 ) 100% );
}
.stat-card--light .stat-card__number,
.stat-card--light .stat-card__title {
	color: var( --yd-heading );
}

/* --- Card 4: gradient (gold/yellow) + decorative arrow graphic --- */
.stat-card--gradient {
	background: linear-gradient( 145deg, #fff59d 0%, #ffb300 100% );
}
.stat-card--gradient::after {
	background: linear-gradient( 145deg, rgba( 255, 245, 157, 0.9 ) 0%, rgba( 255, 179, 0, 0.9 ) 100% );
}
.stat-card--gradient .stat-card__number,
.stat-card--gradient .stat-card__title {
	color: var( --yd-heading );
}
.stat-card__graphic-wrap {
	position: absolute;
	inset: 0;
	z-index: 1;                        /* above the ::after scrim, below the content */
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: clamp( 28px, 2.8vw, 40px );
	color: rgba( 255, 255, 255, 0.55 );
}
.stat-card__graphic {
	width: 46%;
	height: auto;
}

/* --- Card 5: solid brand red (site colour, not the reference's blue) --- */
.stat-card--blue {
	background: var( --yd-primary );
}
.stat-card--blue::after {
	background: linear-gradient( to bottom, rgba( 255, 57, 81, 0.92 ) 0%, rgba( 255, 57, 81, 0.62 ) 100% );
}
.stat-card--blue .stat-card__number,
.stat-card--blue .stat-card__title {
	color: #fff;
}

/* Optional overlay icon — a single small icon sitting on top of the
   background image (checkmark on the accuracy card in the reference). */
.stat-card__overlay-icon {
	position: absolute;
	left: clamp( 28px, 2.8vw, 40px );
	bottom: clamp( 28px, 2.8vw, 40px );
	z-index: 1;
	display: flex;
	width: 56px;
	height: 56px;
	border: 2px solid #fff;
	border-radius: 50%;
	color: #fff;
}
.stat-card__overlay-icon svg {
	width: 22px;
	height: 22px;
	margin: auto;
}

/* --- Card 6: light gradient --- */
.stat-card--light-gradient {
	background: linear-gradient( 135deg, #eaf4fb 0%, #ffffff 100% );
	border: 1px solid var( --yd-line );
}
.stat-card--light-gradient::after {
	background: linear-gradient( to bottom, rgba( 240, 247, 252, 0.94 ) 0%, rgba( 240, 247, 252, 0.4 ) 60%, rgba( 240, 247, 252, 0.22 ) 100% );
}
.stat-card--light-gradient .stat-card__number,
.stat-card--light-gradient .stat-card__title {
	color: var( --yd-heading );
}

@media ( prefers-reduced-motion: reduce ) {
	.stats-marquee__track {
		animation: none;
	}
}

/* -----------------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------------- */
@media ( max-width: 900px ) {
	.stat-card {
		width: clamp( 260px, 40vw, 320px );
		height: clamp( 266px, 35vw, 330px );
	}
}
@media ( max-width: 560px ) {
	.stat-card {
		width: 240px;
		height: 250px;
		padding: 24px;
		border-radius: 20px;
	}
	.stat-card__number {
		font-size: 30px;
	}
	.stat-card__badge {
		width: 84px;
		height: 84px;
	}
}

/* ==========================================================
   Sector Stack Section ("<Industry> Sector We Help Modernize")
   ----------------------------------------------------------
   Each .sector-stack__panel is sticky at top:0, so panels pin in
   turn and each new one scrolls up over the previous. Every panel
   reserves a TRANSPARENT strip (--rail height) along its own top
   edge containing only its numbered badge; because that strip is
   transparent, the badges belonging to the panels already pinned
   underneath remain visible through it. Each badge is offset
   horizontally by its own --panel-index, so they never overlap and
   instead build up into a row in the top-right (01, then 02, 03 …).
   The section's black background is what shows through the strips.
   Pure CSS — no JS, no scroll library, nothing to keep in sync.

   Typography reuses the site's existing global h2/h3 and body copy.
========================================================== */
.sector-stack {
	/* Height of the transparent badge strip. This is also the band of black
	   that stays visible above each pinned panel, so the white content never
	   attaches straight to the top of the browser. */
	--rail: 107px;
	--badge-w: 68px;                   /* one badge box */
	--badge-h: 64px;
	--badge-gap: 28px;                 /* even spacing between every box */
	--rail-right: 67px;                /* clear of the right edge */
	/* Panels must pin BELOW the sticky .site-header (position:sticky, z-index:100),
	   otherwise the header covers the badge rail and only one badge is ever
	   visible. Measured header heights per breakpoint. */
	--hdr: 97px;
	position: relative;
	background: #ffedec;
}
body.admin-bar .sector-stack {
	--hdr: 98px;                      /* + 32px WP admin bar */
}

/* --- Intro --- */
/* Carries the section's own 80px top padding (the section itself can't take it
   without shifting the sticky panels' containing block). */
.sector-stack__intro {
	padding: 80px 0 5px;
}
.sector-stack__heading {
	margin: 0;
	max-width: 18em;
	color: var( --yd-heading );
	font-size: clamp( 28px, 4vw, 52px );   /* same fluid h2 scale as .capabilities__heading */
}
.sector-stack__text-wrap {
	margin-top: clamp( 20px, 2vw, 32px );
}
.sector-stack__text {
	margin: 0;
	max-width: 56em;
	color: var( --yd-body );
}

/* --- Stacking panels --- */
/* Sticky duration is driven purely by the panels themselves: each panel is one
   viewport tall, so n panels produce n viewports of pinned scrolling and the
   stack stays pinned for the whole run. The trailing viewport of padding gives
   the LAST panel the same full-length window every earlier panel gets — without
   it panel n pins for only a few pixels and its slide-in never completes on
   screen. Both scale automatically with however many panels ACF outputs (4, 6,
   8, 10 …); there is no per-count value to keep in sync. */
.sector-stack__list {
	position: relative;
}
/* An in-flow spacer, NOT padding: a sticky element is constrained to its
   containing block's content box, so padding-bottom here buys the last panel
   no sticky window at all and it never pins. A generated block does sit in
   flow, so it genuinely extends the range the last panel can stay pinned
   over. Height = one full panel, so the last panel gets exactly the same
   pinned run as every panel before it (each earlier panel stays pinned for as
   long as the next one takes to scroll over it). */
.sector-stack__list::after {
	content: "";
	display: block;
	height: calc( 100vh - var( --hdr ) );
}
.sector-stack__panel {
	position: sticky;
	top: var( --hdr );                 /* clear the sticky site header */
	padding-top: var( --rail );        /* transparent strip the badges live in */
}
/* Badge boxes sit along the bottom edge of the black rail, like tabs, offset
   right-to-left by their own index so the row builds up evenly. */
.sector-stack__badge {
	position: absolute;
	top: calc( var( --rail ) - var( --badge-h ) );
	right: calc( var( --rail-right ) + var( --panel-index ) * ( var( --badge-w ) + var( --badge-gap ) ) );
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --badge-w );
	height: var( --badge-h );
	background: var( --yd-primary );   /* brand red — the reference's blue is not a site colour */
	color: #fff;
	font-family: var( --yd-font );
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0.02em;
}
.sector-stack__panel-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: calc( 100vh - var( --rail ) - var( --hdr ) );
	background: #fff;
}

/* Left column — title, divider rule, description. The rule is a plain
   border on the description wrapper rather than its own element, so the
   markup stays free of presentational divs. */
.sector-stack__content {
	display: flex;
	flex-direction: column;
	justify-content: safe center;   /* "safe" so a long description overflows off the bottom only — plain centring pushes the title up under the badge rail and clips it */
	/* Left gutter lines the title up with the page container, the same way
	   .hero__content does in css/services.css — measured off the viewport,
	   not the column, since this column is only half the page wide. */
	padding: clamp( 24px, 2.5vw, 44px ) clamp( 32px, 4vw, 72px ) clamp( 24px, 2.5vw, 44px )
		max( 40px, calc( ( 100vw - var( --yd-container, 1600px ) ) / 2 + 40px ) );
	min-width: 0;
}
.sector-stack__title {
	margin: 0;
	max-width: 20em;
	font-size: clamp(22px, 4vw, 24px);
}
.sector-stack__desc-wrap {
	margin-top: clamp( 18px, 2vw, 28px );
	padding-top: clamp( 18px, 2vw, 28px );
	border-top: 1px solid var( --yd-line );
}
.sector-stack__desc {
	margin: 0;
	max-width: 34em;
	color: var( --yd-body );
}

/* Right column — full-bleed image, flush to the right edge, no radius. */
.sector-stack__media {
	position: relative;
	overflow: hidden;
	min-height: 320px;
}
/* Absolutely positioned so the photo fills the column without its own aspect
   ratio contributing to the grid row's height. Left in flow, an image with
   height:100% against an auto-height row resolves to auto instead, and a tall
   source (e.g. a 755x905 portrait) stretches that one panel ~190px taller than
   the rest — which desynchronises the sticky stack and lets the taller panel
   un-pin over the badge row. */
.sector-stack__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* -----------------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------------- */
@media ( max-width: 1100px ) {
	.sector-stack {
		--rail: 110px;
		--badge-w: 64px;
		--badge-h: 72px;
		--badge-gap: 24px;
		--rail-right: 40px;
		--hdr: 109px;
	}
	body.admin-bar .sector-stack {
		--hdr: 141px;
	}
	.sector-stack__badge {
		font-size: 17px;
	}
	/* Single column: text on top, image below. The panel still has to fill the
	   viewport or the next panel shows underneath it and the stack stops reading
	   as one card at a time — so the image row takes 1fr and absorbs whatever
	   height the text leaves over, exactly like the reference. */
	.sector-stack__panel-inner {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}
	.sector-stack__content {
		/* 40px matches .container's gutter at this width */
		padding: clamp( 40px, 6vw, 64px ) 40px;
		order: 1;
	}
	.sector-stack__media {
		min-height: 300px;
		order: 2;
	}
	.sector-stack__title {
		font-size: 26px;
	}
	.sector-stack__desc {
		font-size: 17px;
		line-height: 1.55;
	}
}
@media ( max-width: 900px ) {
	.sector-stack {
		--hdr: 75px;
	}
	body.admin-bar .sector-stack {
		--hdr: 107px;
	}
	.sector-stack__content {
		padding: clamp( 36px, 6vw, 56px ) 22px;  /* matches .container at this width */
	}
}
@media ( max-width: 560px ) {
	.sector-stack {
		/* 6 boxes at 40+8 pitch plus the 18px right gutter = 306px, so the row
		   still fits inside a 375px viewport without touching either edge. Box is
		   square-ish here, matching the reference's mobile proportions. */
		--rail: 76px;
		--badge-w: 40px;
		--badge-h: 40px;
		--badge-gap: 8px;
		--rail-right: 18px;
	}
	.sector-stack__badge {
		font-size: 15px;
	}
	.sector-stack__intro {
		padding: 80px 0 5px;
	}
	.sector-stack__content {
		padding: 22px 22px;            /* matches the site's mobile gutter */
	}
	/* Title, divider, description and image all have to be readable together in
	   one screen at phone size — so the type steps down and the image keeps a
	   floor of 260px while still absorbing any leftover panel height. */
	.sector-stack__title {
		font-size: 16px;
		line-height: 1.25;
	}
	.sector-stack__desc-wrap {
		margin-top: 10px;
		padding-top: 10px;
	}
	.sector-stack__desc {
		font-size: 14px;
		line-height: 1.5;
	}
	.sector-stack__media {
		min-height: 260px;
	}
}

/* Stacking relies on scrolling past a pinned panel; with reduced motion (or
   no sticky support) the panels simply read as consecutive blocks. */
@media ( prefers-reduced-motion: reduce ) {
	.sector-stack__panel {
		position: static;
	}
}

/* ==========================================================
   CTA Banner Section
   ----------------------------------------------------------
   One rounded card on the section's black background: copy and
   button on the left, a single background image bleeding into the
   right half. The brand-red wash, the dotted texture and the soft
   glow are all painted in CSS (gradients on the card plus one
   ::after layer), so the only asset the editor supplies is the
   photo — no second image, no extra markup.

   The reference art is blue; brand red is used here instead, the
   same substitution already made for .capability-card and
   .sector-stack__badge.
========================================================== */
.cta-banner {
	padding: 80px 0;
	background: #fff;
}
.cta-banner__card {
	position: relative;
	overflow: hidden;                  /* clips the photo to the rounded corner */
	display: flex;
	align-items: center;
	min-height: clamp( 360px, 30vw, 460px );
	padding: clamp( 40px, 4.5vw, 76px );
	border-radius: 40px;
	background: linear-gradient( 100deg, #d81e35 0%, var( --yd-primary ) 46%, #ff5e72 100% );
}

/* Single background image — occupies the right half and fades into the
   gradient so there is no hard seam. */
.cta-banner__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 42%;
	z-index: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-mask-image: linear-gradient( to right, transparent 0%, #000 26% );
	mask-image: linear-gradient( to right, transparent 0%, #000 26% );
}
/* Dotted texture + soft glow behind the subject, drawn entirely in CSS. */
.cta-banner__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient( circle at 74% 42%, rgba( 255, 255, 255, 0.22 ) 0%, transparent 46% ),
		radial-gradient( rgba( 255, 255, 255, 0.16 ) 1.6px, transparent 1.7px );
	background-size: 100% 100%, 18px 18px;
	background-position: 0 0, 0 0;
	/* Texture only over the right-hand art, never behind the copy. */
	-webkit-mask-image: linear-gradient( to right, transparent 44%, #000 62% );
	mask-image: linear-gradient( to right, transparent 44%, #000 62% );
}

/* Optional overlay icon chip */
.cta-banner__icon {
	position: absolute;
	right: 28%;
	bottom: 30%;
	z-index: 2;
	display: flex;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: #fff;
	color: var( --yd-primary );
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.16 );
}
.cta-banner__icon svg {
	width: 30px;
	height: 30px;
	margin: auto;
}

/* --- Copy + CTA --- */
.cta-banner__content {
	position: relative;
	z-index: 1;
	max-width: 46%;
}
.cta-banner__heading {
	margin: 0;
	color: #fff;
	font-size: clamp( 22px, 4vw, 36px );
}
.cta-banner__text-wrap {
	margin-top: clamp( 16px, 1.6vw, 22px );
}
.cta-banner__text {
	margin: 0;
	max-width: 34em;
	color: rgba( 255, 255, 255, 0.92 );
}
.cta-banner__cta-wrap {
	margin-top: clamp( 28px, 3vw, 48px );
}
/* Light pill on the red card — the shared .btn base supplies the shape,
   sizing and transition; only the colours differ here. */
.cta-banner__cta {
	background: #f6f4f1;
	border-color: #f6f4f1;
	color: var( --yd-heading );
}
.cta-banner__cta:hover,
.cta-banner__cta:focus-visible {
	background: var( --yd-heading );
	border-color: var( --yd-heading );
	color: #fff;
}

/* -----------------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------------- */
@media ( max-width: 1100px ) {
	.cta-banner__content {
		max-width: 56%;
	}
	.cta-banner__icon {
		width: 62px;
		height: 62px;
		right: 24%;
	}
}
@media ( max-width: 900px ) {
	/* Stacked: the image becomes a full-bleed band flush with the top of the
	   card (it comes first in the markup), then the copy below it. The card
	   carries no top padding here — a strip of red above the image reads as a
	   misaligned gap — and the bottom padding matches the side gutters so the
	   button sits inside an even margin instead of against the card edge. */
	.cta-banner__card {
		display: block;
		min-height: 0;
		padding: 0 32px 32px;
		border-radius: 28px;
	}
	.cta-banner__content {
		max-width: 100%;
	}
	.cta-banner__bg {
		position: relative;
		left: auto;
		height: 300px;
		margin: 0 -32px 32px;      /* flush top, bleeds past the side gutters */
		-webkit-mask-image: none;
		mask-image: none;
	}
	/* Stacked, the copy sits where the texture used to be masked out, so a
	   percentage mask can no longer keep the dots off the text (the card's
	   height now varies with the copy). The photo band carries the visual on
	   its own here — drop the decorative layer instead of letting it show
	   through the heading. */
	.cta-banner__card::after {
		display: none;
	}
	/* Kills the inline-block descender under the pill, which otherwise adds a
	   few stray pixels of red above the image band. */
	.cta-banner__cta-wrap {
		display: flex;
	}
	.cta-banner__icon {
		right: 32px;
		bottom: 32px;
		width: 56px;
		height: 56px;
	}
	.cta-banner__icon svg {
		width: 24px;
		height: 24px;
	}
}
@media ( max-width: 560px ) {
	.cta-banner__card {
		padding: 0 22px 24px;      /* bottom matches the side gutter */
		border-radius: 22px;
	}
	.cta-banner__bg {
		height: 220px;
		margin: 0 -22px 24px;      /* flush top, bleeds past the side gutters */
	}
	.cta-banner__text {
		font-size: 14px;
		line-height: 1.5;
	}
	.cta-banner__icon {
		right: 22px;
		bottom: 22px;
		width: 48px;
		height: 48px;
	}
	.cta-banner__icon svg {
		width: 20px;
		height: 20px;
	}
}

/* ==========================================================
   What We Build — Tabbed Systems Section
   ----------------------------------------------------------
   Two columns on one grid: a 2x2 tab grid on the left, the detail
   panel on the right. Both columns stretch to the same height, so
   the left grid's rows are sized off the tallest panel rather than
   off their own content.

   Visibility is driven purely by the --active modifiers the JS will
   toggle (see industry.php's contract comment) — the panels use
   display, not opacity, so an inactive panel contributes nothing to
   the layout and its focusable arrows are out of the tab order.

   The reference art uses blue for the active card, the panel icon
   and the feature ticks; brand red is used throughout instead — the
   same substitution already made for .capability-card,
   .sector-stack__badge and .cta-banner.

   Typography reuses the site's existing global h2 / h3 / h4 and body
   copy — no new type scale here.
========================================================== */
.industry-tabs {
	padding: 80px 0;
	background: #ffedec;
}

/* --- Section header --- */
.industry-tabs__eyebrow {
	display: inline-block;
	color: var( --yd-primary );
	font-family: var( --yd-font );
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.industry-tabs__heading-wrap {
	margin-top: 22px;
}
.industry-tabs__heading {
	margin: 0;
	color: var( --yd-heading );
	font-size: clamp( 28px, 4vw, 52px );   /* same fluid h2 scale as the other headings */
}
.industry-tabs__heading span {
	color: var( --yd-primary );  /* same fluid h2 scale as the other headings */
}
.industry-tabs__text-wrap {
	margin-top: clamp( 20px, 2vw, 32px );
}
.industry-tabs__text {
	margin: 0;
	max-width: 60em;
	color: var( --yd-body );
}

/* --- Two-column body --- */
.industry-tabs__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 8px;
	margin-top: clamp( 40px, 4vw, 64px );
}

/* --- Left: 2x2 tab grid --- */
/* Equal-height columns. .industry-tabs__body is a grid with align-items:
   stretch, so .industry-tabs__left is already as tall as whichever column is
   taller; height:100% passes that down to the nav, and grid-auto-rows:1fr
   splits it into two equal rows. The 4 cards plus the 8px gap therefore always
   add up to exactly the panel's height — no fixed values anywhere, so however
   many features ACF outputs, the left column follows automatically. */
.industry-tabs__nav {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	grid-auto-rows: 1fr;
	gap: 8px;
	height: 100%;
}
.industry-tabs__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 240px;
	padding: 28px 26px 88px;           /* bottom room reserved for the arrow */
	border: 0;
	border-radius: 20px;
	background: linear-gradient( 160deg, #171717 0%, #0b0b0b 100% );
	color: #fff;
	font-family: var( --yd-font );
	text-align: center;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease;
}
/* The reference shows no icon on the nav cards — the wrapper stays in the
   markup so a future ACF "Tab Icon" has somewhere to land without a template
   change, but it is not painted in this design. */
.industry-tabs__card-icon {
	display: none;
}
.industry-tabs__card-title {
	font-family: var( --yd-font );
	font-weight: 700;
	font-size: clamp( 18px, 1.5vw, 22px );
	line-height: 1.35;
	letter-spacing: 0.01em;
}

/* Active state — brand red, with the outlined arrow revealed. */
.industry-tabs__card--active {
	background: var( --yd-primary );
}
.industry-tabs__card-arrow {
	position: absolute;
	left: 50%;
	bottom: 32px;
	display: flex;
	width: 62px;
	height: 62px;
	border: 2px solid rgba( 255, 255, 255, 0.9 );
	border-radius: 50%;
	color: #fff;
	opacity: 0;
	transform: translate( -50%, 8px );
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.industry-tabs__card-arrow svg {
	width: 26px;
	height: 26px;
	margin: auto;
}
.industry-tabs__card--active .industry-tabs__card-arrow {
	opacity: 1;
	transform: translate( -50%, 0 );
}
/* Hover only where a real pointer exists, so a tap on a touch device can't
   leave a card looking half-selected. */
@media ( hover: hover ) and ( pointer: fine ) {
	.industry-tabs__card:not( .industry-tabs__card--active ):hover {
		background: linear-gradient( 160deg, #242424 0%, #141414 100% );
	}
}

/* --- Right: detail panel --- */
.industry-tabs__right {
	height: 100%;
}
.industry-tabs__panel {
	display: none;                     /* only --active renders */
	height: 100%;
	padding: clamp( 32px, 3vw, 52px );
	border-radius: 24px;
	background: #fff;
}
.industry-tabs__panel--active {
	display: block;
}

.industry-tabs__panel-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #ff3b57;
    display: flex;
    align-items: center;
    justify-content: center;
}
.industry-tabs__panel-icon {
	border-radius: 50%;
    background: var(--yd-primary);
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.industry-tabs__panel-icon img {
	width: 46px;
	height: 46px;
	margin: auto;
	display: block;
    object-fit: contain;
    margin: 0;
	max-width: 100%;
}
.industry-tabs__panel-title-wrap {
	margin-top: clamp( 22px, 2.2vw, 34px );
}
.industry-tabs__panel-title {
	margin: 0;
	color: var( --yd-heading );
	font-size: clamp( 22px, 1.9vw, 30px );
	line-height: 1.25;
}
.industry-tabs__panel-text-wrap {
	margin-top: 14px;
}
.industry-tabs__panel-text {
	margin: 0;
	max-width: 44em;
	color: var( --yd-body );
	font-size: 16px;
	line-height: 1.6;
}

/* --- Feature list --- */
.industry-tabs__features {
	margin: clamp( 26px, 2.6vw, 40px ) 0 0;
	padding: 0;
	list-style: none;
}
/* The rule between rows is a border here rather than a markup element — a
   divider is presentational and needs no wrapper of its own. */
.industry-tabs__feature {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	align-items: start;
	gap: 16px;
	padding: 22px 4px;
	border-top: 1px solid var( --yd-line );
}
.industry-tabs__feature:first-child {
	border-top: 0;
	padding-top: 0;
}
.industry-tabs__feature:last-child {
	padding-bottom: 0;
}
.industry-tabs__feature-icon {
	display: flex;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var( --yd-primary );
}
.industry-tabs__feature-icon svg {
	width: 100%;
	height: 100%;
}
.industry-tabs__feature-title {
	margin: 0;
	color: var( --yd-heading );
	font-size: 16px;
	line-height: 1.4;
}
.industry-tabs__feature-text {
	margin: 6px 0 0;
	color: var( --yd-body );
	font-size: 15px;
	line-height: 1.55;
}
.industry-tabs__feature-arrow {
	display: flex;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	color: var( --yd-primary );
	transition: transform 0.25s ease;
}
.industry-tabs__feature-arrow svg {
	width: 100%;
	height: 100%;
}
@media ( hover: hover ) and ( pointer: fine ) {
	.industry-tabs__feature-arrow:hover {
		transform: translate( 2px, -2px );
	}
}

/* -----------------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------------- */
@media ( max-width: 1200px ) {
	.industry-tabs__card {
		padding: 28px 22px 86px;
		min-height: 220px;
	}
	.industry-tabs__card-arrow {
		width: 54px;
		height: 54px;
		bottom: 26px;
	}
	.industry-tabs__panel-icon {
		width: 66px;
		height: 66px;
	}
	.industry-tabs__panel-icon svg {
		width: 28px;
		height: 28px;
	}
}
/* Tablet keeps the left tab navigation — the two columns just stack so each
   gets the full width. */
@media ( max-width: 1024px ) {
	.industry-tabs__body {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.industry-tabs__nav {
		height: auto;
	}
	.industry-tabs__card {
		min-height: 190px;
		padding: 26px 22px 78px;
	}
	.industry-tabs__panel {
		height: auto;
	}
}
/* Mobile: the tab navigation is removed entirely, so nothing can drive the
   panels — every panel is shown instead, stacked as plain content blocks, and
   no content is lost. This overrides the desktop display:none, which is why
   the JS toggling --active is harmless here. */
@media ( max-width: 767px ) {
	.industry-tabs__left {
		display: none;
	}
	.industry-tabs__right {
		display: grid;
		gap: 16px;
	}
	.industry-tabs__panel,
	.industry-tabs__panel--active {
		display: block;
		padding: 28px 22px;
		border-radius: 18px;
	}
	.industry-tabs__panel-icon {
		width: 56px;
		height: 56px;
	}
	.industry-tabs__panel-icon svg {
		width: 24px;
		height: 24px;
	}
	.industry-tabs__panel-text {
		font-size: 15px;
	}
	.industry-tabs__feature {
		gap: 12px;
		padding: 16px 0;
	}
	.industry-tabs__feature-title {
		font-size: 15px;
	}
	.industry-tabs__feature-text {
		font-size: 14px;
	}
}

/* ==========================================================
   Testimonials Section
   ----------------------------------------------------------
   Two equal columns: a video thumbnail on the left, a gradient
   container holding a sliding white testimonial card on the right.

   Slide mechanics: every .testimonials__slide occupies the SAME
   grid cell (grid-area: 1/1), so the track is always as tall as the
   tallest quote and the JS never has to measure or set a height.
   Only the --active slide is visible; the others sit shifted and
   transparent, and are pulled out of the tab order with
   visibility:hidden so their content is not focusable or announced.
   Because switching is just an index modulo the slide count, the
   loop is infinite with no cloned slides and therefore no seam.

   Every transition animates transform and opacity only, so the
   whole section stays on the compositor.

   The reference art is orange; a soft brand-red gradient is used
   instead, matching the substitution already made elsewhere on this
   template.
========================================================== */
.testimonials {
	/* The slider's right padding is derived from the pagination rather than
	   guessed, so the bars can never sit on top of the white card. Widest bar
	   is the active one, hence --bar-w tracks that. */
	--bar-right: clamp( 12px, 1vw, 20px );   /* gap from bars to the panel edge */
	--bar-w: 34px;                            /* active bar width */
	--bar-clear: 14px;                        /* gap from bars to the card edge */
	padding: 80px 0;
	background: #ffedec;
}
.testimonials__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 28px;
	margin-top: clamp(40px, 4vw, 64px);
}

/* -----------------------------------------------------------------------------
   Left column — video thumbnail + Watch Reel pill
----------------------------------------------------------------------------- */
.testimonials__media-inner {
	position: relative;
	overflow: hidden;
	height: 100%;
	min-height: 420px;
	border-radius: 28px;
}
.testimonials__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.6s cubic-bezier( 0.22, 1, 0.36, 1 );
}
.testimonials__reel, .testimonials__reel1 {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 18px 34px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var( --yd-heading );
	font-family: var( --yd-font );
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transform: translate( -50%, -50% );
	box-shadow: 0 16px 40px rgba( 0, 0, 0, 0.22 );
	transition: transform 0.35s cubic-bezier( 0.22, 1, 0.36, 1 ), background 0.3s ease, color 0.3s ease;
}
.testimonials__reel-icon {
	display: flex;
	width: 24px;
	height: 24px;
}
.testimonials__reel-icon svg {
	width: 100%;
	height: 100%;
}
@media ( hover: hover ) and ( pointer: fine ) {
	.testimonials__media-inner:hover .testimonials__thumb {
		transform: scale( 1.04 );
	}
	.testimonials__reel:hover {
		background: var( --yd-primary );
		color: #fff;
		transform: translate( -50%, -50% ) scale( 1.05 );
	}
}
.testimonials__reel:focus-visible {
	outline: 3px solid var( --yd-primary );
	outline-offset: 4px;
}

/* -----------------------------------------------------------------------------
   Right column — gradient container + slider
----------------------------------------------------------------------------- */
.testimonials__panel {
	height: 100%;
}
.testimonials__slider {
	position: relative;
	overflow: hidden;
	height: 100%;
	padding: clamp( 26px, 2.4vw, 42px )
		calc( var( --bar-right ) + var( --bar-w ) + var( --bar-clear ) )
		clamp( 26px, 2.4vw, 42px )
		clamp( 26px, 2.4vw, 42px );
	border-radius: 28px;
	/* Oversized so the slow drift below always has fresh colour to move into. */
	background: linear-gradient( 135deg, #fdf1f1 0%, #ffe2e4 38%, #ffb9a6 72%, #ff8f6a 100% );
	background-size: 160% 160%;
	animation: testimonials-gradient 18s ease-in-out infinite alternate;
}
@keyframes testimonials-gradient {
	from {
		background-position: 0% 50%;
	}
	to {
		background-position: 100% 50%;
	}
}

.testimonials__viewport {
	height: 100%;
	border-radius: 20px;
	cursor: none;                      /* replaced by .testimonials__cursor */
	touch-action: pan-y;               /* lets the page scroll while we read horizontal drags */
}
.testimonials__viewport:focus-visible {
	outline: 3px solid var( --yd-primary );
	outline-offset: 3px;
}
/* The perspective here is what turns the slides' rotateX into a curved,
   wheel-like path instead of a flat squash. */
.testimonials__track {
	display: grid;
	height: 100%;
	perspective: 1200px;
	perspective-origin: 50% 50%;
}

/* All slides share one grid cell — the tallest sets the height.
   Three states form the wheel:
     base            = parked BELOW the window (out of sight, tipped back)
     --above         = parked ABOVE it
     --active        = upright and in place
   Advancing forwards parks the incoming slide below and sends the outgoing
   one above; going back does the reverse. Because both parked states sit on
   the same arc, the pair reads as one wheel turning a notch rather than two
   separate elements crossfading. */
.testimonials__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;                /* keeps inactive quotes out of the tab order */
	transform: translate3d( 0, 44%, -140px ) rotateX( -34deg ) rotateZ( 1.2deg ) scale( 0.92 );
	transition:
		transform 0.8s cubic-bezier( 0.22, 1, 0.36, 1 ),
		opacity 0.62s cubic-bezier( 0.4, 0, 0.2, 1 ),
		visibility 0s linear 0.8s;
	will-change: transform, opacity;
	backface-visibility: hidden;
}
.testimonials__slide--above {
	transform: translate3d( 0, -44%, -140px ) rotateX( 34deg ) rotateZ( -1.2deg ) scale( 0.92 );
}
.testimonials__slide--active {
	opacity: 1;
	visibility: visible;
	transform: translate3d( 0, 0, 0 ) rotateX( 0 ) rotateZ( 0 ) scale( 1 );
	transition:
		transform 0.8s cubic-bezier( 0.22, 1, 0.36, 1 ),
		opacity 0.52s cubic-bezier( 0.4, 0, 0.2, 1 ),
		visibility 0s;
}
/* Used for a single frame while the JS teleports the incoming slide onto the
   correct side of the wheel — without it that reposition would animate and
   the slide would visibly swing the wrong way first. */
.testimonials__slide--instant {
	transition: none !important;
}

.testimonials__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp( 28px, 2.6vw, 46px );
	border-radius: 20px;
	background: #fff;
}
/* Company logo on the left, quote mark on the right — the logo is the first
   thing read in the reference, and pairing them on one row keeps the card's
   top edge tidy however wide a given logo happens to be. */
.testimonials__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.testimonials__logo-wrap {
	display: flex;
	align-items: center;
	min-width: 0;
}
/* Logos arrive at all sorts of proportions, so cap the height and let the
   width follow — object-fit keeps any stray padding in the source from
   stretching the mark. */
.testimonials__logo {
	display: block;
	width: auto;
	max-width: 190px;
	height: auto;
	max-height: 38px;
	object-fit: contain;
	object-position: left center;
}
.testimonials__quote-icon {
	flex-shrink: 0;
	width: clamp( 34px, 2.6vw, 44px );
	color: var( --yd-primary );
}
.testimonials__quote-icon svg {
	width: 100%;
	height: auto;
}
.testimonials__title-wrap {
	margin-top: clamp( 14px, 1.3vw, 20px );
}
.testimonials__title {
	margin: 0;
	color: var( --yd-heading );
	font-size: clamp( 17px, 1.35vw, 21px );
	line-height: 1.35;
}
.testimonials__text-wrap {
	margin-top: clamp( 10px, 1vw, 14px );
}
.testimonials__text {
	margin: 0;
	color: var( --yd-heading );
	font-size: clamp( 16px, 1.25vw, 19px );
	line-height: 1.62;
}

/* Pushed to the bottom of the card so the client block sits on a common
   baseline however long the quote runs. */
.testimonials__client {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
	padding-top: clamp( 28px, 3vw, 52px );
}
.testimonials__client-photo-wrap {
	flex-shrink: 0;
	overflow: hidden;
	width: 54px;
	height: 54px;
	border-radius: 50%;
}
.testimonials__client-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.testimonials__client-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.testimonials__client-name {
	color: var( --yd-heading );
	font-family: var( --yd-font );
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
}
.testimonials__client-role {
	color: var( --yd-primary );        /* the reference sets the role line in the accent colour */
	font-size: 15px;
	line-height: 1.35;
}

/* -----------------------------------------------------------------------------
   Watch Reel dialog
----------------------------------------------------------------------------- */
/* [hidden] keeps it out of the layout and the a11y tree entirely when closed;
   .is-open is added a frame later so the fade actually has a state to run from. */
.testimonials__modal[hidden] {
	display: none;
}
.testimonials__modal {
	--modal-pad: clamp( 16px, 3vw, 48px );
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var( --modal-pad );
	opacity: 0;
	transition: opacity 0.3s ease;
}
.testimonials__modal.is-open {
	opacity: 1;
}
.testimonials__modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.82 );
	backdrop-filter: blur( 4px );
}
/* The third term caps the width by the available HEIGHT, so a 16:9 frame can
   never grow taller than the viewport on a short/landscape window — which is
   what used to push the frame (and the close button with it) off screen. */
.testimonials__modal-dialog {
	position: relative;
	width: min(
		1100px,
		100%,
		calc( ( 100vh - 2 * var( --modal-pad ) ) * 16 / 9 )
	);
	transform: scale( 0.96 );
	transition: transform 0.35s cubic-bezier( 0.22, 1, 0.36, 1 );
}
.testimonials__modal.is-open .testimonials__modal-dialog {
	transform: scale( 1 );
}
/* Sits INSIDE the frame, over the top-right corner of the video. Parking it
   above the dialog put it off-screen whenever the dialog was tall enough to
   fill the viewport; inside, it is always reachable. The dark disc plus the
   white ring keep it legible over a bright frame. */
.testimonials__modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid rgba( 255, 255, 255, 0.9 );
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.testimonials__modal-close svg {
	width: 20px;
	height: 20px;
	margin: auto;
}
@media ( hover: hover ) and ( pointer: fine ) {
	.testimonials__modal-close:hover {
		border-color: var( --yd-primary );
		background: var( --yd-primary );
		transform: scale( 1.08 );
	}
}
.testimonials__modal-close:focus-visible {
	outline: 3px solid var( --yd-primary );
	outline-offset: 3px;
}
/* aspect-ratio keeps the frame 16:9 without the old padding-top hack, so the
   player can simply fill it. */
.testimonials__modal-media {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	background: #000;
}
.testimonials__modal-media iframe,
.testimonials__modal-media video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
/* Set on <body> while the dialog is open so the page behind cannot scroll. */
.yd-modal-open {
	overflow: hidden;
}

@media ( prefers-reduced-motion: reduce ) {
	.testimonials__modal,
	.testimonials__modal-dialog,
	.testimonials__modal-close {
		transition: none;
	}
	.testimonials__modal-dialog {
		transform: none;
	}
}

/* -----------------------------------------------------------------------------
   Custom cursor — a circle that follows the pointer over the card
----------------------------------------------------------------------------- */
.testimonials__cursor {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: rgba( 20, 20, 43, 0.9 );
	color: #fff;
	pointer-events: none;              /* never eats the click it is guiding */
	opacity: 0;
	/* translate() is written by the JS each frame; the scale here is what fades
	   it in, so the two never fight over the same property. */
	transform: translate3d( -100px, -100px, 0 ) scale( 0.4 );
	transition: opacity 0.28s ease, scale 0.28s cubic-bezier( 0.22, 1, 0.36, 1 );
	will-change: transform, opacity;
}
.testimonials__cursor--visible {
	opacity: 1;
	scale: 1;
}
/* The arrow art points right; the wheel is vertical, so the resting rotation
   is 90deg (down = next) and the top half flips it to -90deg (up = previous).
   Rotating rather than swapping icons is what lets it turn smoothly as the
   pointer crosses the midline. */
.testimonials__cursor-arrow {
	display: flex;
	width: 26px;
	height: 26px;
	transform: rotate( 90deg );
	transition: transform 0.38s cubic-bezier( 0.22, 1, 0.36, 1 );
}
.testimonials__cursor-arrow svg {
	width: 100%;
	height: 100%;
}
.testimonials__cursor--up .testimonials__cursor-arrow {
	transform: rotate( -90deg );
}

/* -----------------------------------------------------------------------------
   Pagination — three rounded bars stacked on the right edge
----------------------------------------------------------------------------- */
.testimonials__pagination {
	position: absolute;
	top: 50%;
	right: var( --bar-right );
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transform: translateY( -50% );
}
.testimonials__bar {
	width: 26px;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.65 );
	cursor: pointer;
	transition: background 0.35s ease, width 0.35s cubic-bezier( 0.22, 1, 0.36, 1 );
}
.testimonials__bar--active {
	width: var( --bar-w );
	background: #fff;
}
.testimonials__bar:focus-visible {
	outline: 2px solid var( --yd-heading );
	outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------------- */
@media ( max-width: 1200px ) {
	.testimonials__reel {
		padding: 16px 28px;
		font-size: 14px;
	}
	.testimonials__client-photo-wrap {
		width: 48px;
		height: 48px;
	}
}
/* Tablet keeps the two columns while there is room for them. */
@media ( max-width: 900px ) {
	.testimonials__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.testimonials__media-inner {
		min-height: 0;
		height: 340px;
	}
	.testimonials__panel {
		height: auto;
	}
}
@media ( max-width: 560px ) {
	.testimonials__media-inner {
		height: 260px;
		border-radius: 20px;
	}
	.testimonials__reel {
		gap: 10px;
		padding: 14px 22px;
		font-size: 13px;
		letter-spacing: 0.12em;
	}
	.testimonials__reel-icon {
		width: 20px;
		height: 20px;
	}
	/* Slimmer bars here so the derived right padding doesn't eat a phone's
	   width — the card keeps ~300px of the 346px slider. */
	.testimonials {
		--bar-right: 10px;
		--bar-w: 26px;
		--bar-clear: 10px;
	}
	.testimonials__slider {
		padding: 20px calc( var( --bar-right ) + var( --bar-w ) + var( --bar-clear ) ) 20px 20px;
		border-radius: 20px;
	}
	/* :not() so this doesn't out-cascade .testimonials__bar--active — that rule
	   sits earlier in the file at equal specificity, so a plain
	   `.testimonials__bar { width }` here would silently flatten the active
	   bar back to the inactive width. */
	.testimonials__bar:not( .testimonials__bar--active ) {
		width: 20px;
	}
	.testimonials__card {
		padding: 24px 22px;
		border-radius: 16px;
	}
	.testimonials__logo {
		max-width: 130px;
		max-height: 28px;
	}
	.testimonials__text {
		font-size: 15px;
		line-height: 1.6;
	}
	.testimonials__client {
		padding-top: 28px;
	}
	.testimonials__client-name {
		font-size: 15px;
	}
	.testimonials__client-role {
		font-size: 14px;
	}
	/* The custom cursor is a pointer affordance — on touch the native drag and
	   the pagination bars are the controls, so it never appears. */
	.testimonials__cursor {
		display: none;
	}
	.testimonials__viewport {
		cursor: auto;
	}
}

/* Motion-sensitive users get the same content with no drift, no easing and no
   autoplay (the JS checks the same query before starting its timer). */
@media ( prefers-reduced-motion: reduce ) {
	.testimonials__slider {
		animation: none;
	}
	.testimonials__slide,
	.testimonials__slide--active {
		transform: none;
		transition: opacity 0.01ms linear, visibility 0s;
	}
	.testimonials__thumb,
	.testimonials__reel,
	.testimonials__cursor,
	.testimonials__cursor-arrow,
	.testimonials__bar {
		transition: none;
	}
}

/* ==========================================================
   Global Contact Modal
   ----------------------------------------------------------
   One modal, rendered once in footer.php, opened from any
   [data-modal="contact"] / .modal-trigger element on any page.

   Closed it carries the `hidden` attribute, so it is out of the
   layout AND the accessibility tree — not merely transparent.
   `.is-open` is added a frame later so the fade has a painted
   state to animate from.

   Typography reuses the site's existing global styles.
========================================================== */
.contact-modal[hidden] {
	display: none;
}
.contact-modal {
	/* Side gutter only. There is deliberately NO vertical padding: the dialog
	   runs from the very top of the window to the very bottom, so it never
	   floats with a band of page showing above it. */
	--cm-pad: clamp( 10px, 3vw, 56px );
	--cm-panel-pad: clamp( 18px, 1.9vw, 34px );
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: stretch;          /* full window height, top edge at 0 */
	justify-content: center;
	padding: 0 var( --cm-pad );
	opacity: 0;
	transition: opacity 0.4s cubic-bezier( 0.22, 1, 0.36, 1 );
}
.contact-modal.is-open {
	opacity: 1;
}
.contact-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 6, 6, 12, 0.72 );
	backdrop-filter: blur( 6px );
}

/* --- Dialog shell --- */
/* The form column is the narrower of the two — at an even split the fields
   stretched far wider than their content needed and the panel read as empty. */
.contact-modal__dialog {
	position: relative;
	display: grid;
	grid-template-columns: 1.34fr 1fr;
	overflow: hidden;
	width: min( 1420px, 100% );
	max-height: 100vh;
	border-radius: 26px;
	background: #000;
	box-shadow: 0 40px 120px rgba( 0, 0, 0, 0.55 );
	transform: scale( 0.95 );
	transition: transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 );
}
.contact-modal.is-open .contact-modal__dialog {
	transform: scale( 1 );
}
.contact-modal__close {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 3;
	display: flex;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var( --yd-heading );
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.contact-modal__close svg {
	width: 18px;
	height: 18px;
	margin: auto;
}
@media ( hover: hover ) and ( pointer: fine ) {
	.contact-modal__close:hover {
		background: var( --yd-primary );
		color: #fff;
		transform: rotate( 90deg );
	}
}
.contact-modal__close:focus-visible {
	outline: 3px solid var( --yd-primary );
	outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   Left panel — pitch, image, certifications
----------------------------------------------------------------------------- */
/* The artwork fills the whole panel and the copy sits on top of it — hence
   space-between rather than a stack with the image as a boxed row. */
.contact-modal__aside {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp( 10px, 1.6vh, 20px );
	overflow: hidden;
	min-height: 0;                 /* lets the column shrink inside the grid */
	padding: clamp( 14px, 2.4vh, 32px ) var( --cm-panel-pad );
	background: var( --yd-primary );   /* shows through before the image paints */
	color: #fff;
}
/* Full-bleed backdrop layer. */
.contact-modal__visual {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.contact-modal__visual-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* Gentle scrim, heavier at the two edges where the text and logos sit — the
   artwork has a bright band through its middle that the copy would otherwise
   fight with. */
.contact-modal__aside::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to bottom,
		rgba( 0, 0, 0, 0.46 ) 0%,
		rgba( 0, 0, 0, 0.10 ) 34%,
		rgba( 0, 0, 0, 0.14 ) 60%,
		rgba( 0, 0, 0, 0.58 ) 100%
	);
	pointer-events: none;
}
/* Everything readable lives above the image and the scrim. */
.contact-modal__intro,
.contact-modal__awards {
	position: relative;
	z-index: 2;
}
.contact-modal__heading {
	margin: 0;
	color: #fff;
	font-size: clamp( 18px, min( 1.6vw, 2.9vh ), 27px );
	line-height: 1.24;
	text-shadow: 0 1px 12px rgba( 0, 0, 0, 0.35 );
}
.contact-modal__subheading-wrap {
	margin-top: 8px;
}
.contact-modal__subheading {
	margin: 0;
	max-width: 30em;
	color: rgba( 255, 255, 255, 0.94 );
	font-size: 12px;
	line-height: 1.55;
	text-shadow: 0 1px 10px rgba( 0, 0, 0, 0.3 );
}
/* The certification row must never be the thing that gets clipped. */
.contact-modal__awards {
	flex-shrink: 0;
}

.contact-modal__awards-label {
	display: block;
	color: rgba( 255, 255, 255, 0.9 );
	font-family: var( --yd-font );
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	text-shadow: 0 1px 10px rgba( 0, 0, 0, 0.3 );
}
/* One row, as in the reference — auto-fit previously wrapped the set onto two
   lines. A fixed column count keeps the strip on a single line however many
   logos ACF returns (they simply get narrower). */
.contact-modal__awards-list {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	gap: 7px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}
/* Frosted translucent tile rather than a solid white block, so the artwork
   reads through it. Not fully transparent: these certification marks are drawn
   as dark ink for light backgrounds, and on the red they would disappear —
   the blur plus a high-key wash keeps them legible while still letting the
   colour behind show. */
.contact-modal__award {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp( 6px, 1vh, 9px ) 10px;
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	border-radius: 9px;
	background: rgba( 255, 255, 255, 0.82 );
	backdrop-filter: blur( 6px );
	transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
@media ( hover: hover ) and ( pointer: fine ) {
	.contact-modal__award:hover {
		border-color: #fff;
		background: rgba( 255, 255, 255, 0.96 );
		transform: translateY( -2px );
	}
}
.contact-modal__award-img {
	display: block;
	width: 100%;
	max-height: clamp( 20px, 3.2vh, 30px );
	object-fit: contain;
}

/* -----------------------------------------------------------------------------
   Right panel — form
----------------------------------------------------------------------------- */
.contact-modal__panel {
	display: flex;
	flex-direction: column;
	overflow: hidden;              /* nothing here may scroll — see the vh-scaled rhythm below */
	/* A grid item defaults to min-width:auto, i.e. it refuses to shrink below
	   its content. The marquee track is `width: max-content` (~930px), so
	   without this the column's min-content width dragged the whole dialog
	   wider than the viewport once the layout stacked. */
	min-width: 0;
	/* Vertical padding tracks the window height so the column keeps shrinking
	   to fit instead of ever needing to scroll. */
	padding: clamp( 14px, 2.4vh, 34px ) var( --cm-panel-pad ) 0;
	background: #000;
	color: #fff;
}
.contact-modal__form-intro {
	margin: 0 clamp( 44px, 4vw, 60px ) 0 0;   /* clear of the close button */
	color: rgba( 255, 255, 255, 0.82 );
	font-size: 12px;
	line-height: 1.55;
}
.contact-modal__form-title {
	color: #fff;
}
.contact-modal__form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	justify-content: space-between;
	min-height: 0;
	gap: clamp( 9px, 1.7vh, 24px );        /* a floor — spare height widens these */
	margin-top: clamp( 12px, 2.1vh, 30px );
	padding-bottom: clamp( 12px, 1.8vh, 22px );
}
.contact-modal__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp( 16px, 1.8vw, 28px );
}

/* --- Floating underline fields --- */
.contact-modal__field {
	position: relative;
	display: flex;
}
.contact-modal__field--grow {
	flex: 1 1 auto;
	min-width: 0;
}
.contact-modal__field--phone {
	display: flex;
	align-items: flex-end;
	gap: 10px;
}
.contact-modal__input {
	width: 100%;
	padding: 15px 0 6px;
	border: 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.28 );
	background: transparent;
	color: #fff;
	font-family: var( --yd-font );
	font-size: 12px;
	line-height: 1.4;
	transition: border-color 0.25s ease;
}
.contact-modal__textarea {
	min-height: clamp( 48px, 7vh, 82px );
	resize: vertical;
}
.contact-modal__input:focus {
	outline: none;
	border-bottom-color: var( --yd-primary );
}
/* The label rides on top of the input and lifts on focus or once something has
   been typed. :placeholder-shown is what detects "empty" — which is why every
   input carries placeholder=" ". */
.contact-modal__label {
	position: absolute;
	top: 15px;
	left: 0;
	color: rgba( 255, 255, 255, 0.62 );
	font-size: 12px;
	line-height: 1.4;
	pointer-events: none;
	transform-origin: 0 0;
	transition: transform 0.22s ease, color 0.22s ease;
}
.contact-modal__input:focus + .contact-modal__label,
.contact-modal__input:not( :placeholder-shown ) + .contact-modal__label {
	color: rgba( 255, 255, 255, 0.7 );
	transform: translateY( -13px ) scale( 0.8 );
}
.contact-modal__label em {
	font-style: italic;
}
/* Only wide enough for the longest code ("+1868") plus the native arrow —
   every extra pixel here comes straight off the phone field beside it. */
.contact-modal__select {
	width: 60px;
	flex-shrink: 0;
	padding: 15px 0 6px;
	border: 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.28 );
	background: transparent;
	color: #fff;
	font-family: var( --yd-font );
	font-size: 12px;
	cursor: pointer;
}
.contact-modal__select option {
	color: var( --yd-heading );
}
.contact-modal__select:focus {
	outline: none;
	border-bottom-color: var( --yd-primary );
}

.contact-modal__note {
	margin: 0;
	padding-left: 18px;
	color: rgba( 255, 255, 255, 0.82 );
	font-size: 12px;
	line-height: 1.5;
}
.contact-modal__note strong {
	color: #fff;
}

/* --- Checkboxes --- */
.contact-modal__checks {
	display: flex;
	flex-direction: column;
	gap: clamp( 7px, 1.1vh, 13px );
}
.contact-modal__check {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 12px;
	cursor: pointer;
}
/* The native input stays in the DOM (and focusable) but is visually replaced
   by the styled box beside it. */
.contact-modal__check input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.contact-modal__check-box {
	display: flex;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border: 1px solid rgba( 255, 255, 255, 0.45 );
	border-radius: 5px;
	color: transparent;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.contact-modal__check-box svg {
	width: 13px;
	height: 13px;
	margin: auto;
}
.contact-modal__check input:checked + .contact-modal__check-box {
	border-color: var( --yd-primary );
	background: var( --yd-primary );
	color: #fff;
}
.contact-modal__check input:focus-visible + .contact-modal__check-box {
	outline: 3px solid var( --yd-primary );
	outline-offset: 2px;
}
.contact-modal__check-text {
	color: rgba( 255, 255, 255, 0.82 );
	font-size: 12px;
	line-height: 1.5;
}
.contact-modal__check-text strong {
	color: #fff;
}

/* --- Captcha + submit --- */
.contact-modal__actions {
	display: flex;
	align-items: center;
	gap: clamp( 12px, 1.4vw, 22px );
	flex-wrap: wrap;
}
.contact-modal__captcha {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	font-size: 12px;
	white-space: nowrap;
}
.contact-modal__captcha-input {
	width: 56px;
	padding: clamp( 6px, 0.9vh, 9px );
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 8px;
	background: transparent;
	color: #fff;
	font-family: var( --yd-font );
	font-size: 12px;
	text-align: center;
}
.contact-modal__captcha-input:focus {
	outline: none;
	border-color: var( --yd-primary );
}
/* Sized to its label with a floor, not stretched across the row — the
   reference keeps it a compact pill beside the captcha. */
.contact-modal__submit {
	flex: 0 0 auto;
	min-width: 190px;
	padding: clamp( 10px, 1.4vh, 14px ) 30px;
	border: 0;
	border-radius: 10px;
	background: var( --yd-primary );
	color: #fff;
	font-family: var( --yd-font );
	font-weight: 700;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.2s ease;
}
@media ( hover: hover ) and ( pointer: fine ) {
	.contact-modal__submit:hover {
		background: var( --yd-primary-dark, #e42d44 );
		transform: translateY( -2px );
	}
}
.contact-modal__submit:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}
.contact-modal__success[hidden] {
	display: none;
}
.contact-modal__success {
	margin: 0;
	padding: 14px 16px;
	border-radius: 10px;
	background: rgba( 255, 57, 81, 0.16 );
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   Partner marquee — sits under the form, inside the same dark panel
----------------------------------------------------------------------------- */
/* margin-top:auto pins it to the bottom of the panel whenever the form leaves
   room, so it reads as the panel's footer. The negative side/bottom margins
   cancel the panel's padding so the band bleeds edge to edge, and the gradient
   rises out of the black panel into brand red — the same treatment the
   reference gives this strip, in the site's colour rather than its blue. */
.contact-modal__partners {
	margin: 0 calc( -1 * var( --cm-panel-pad ) );
	padding: clamp( 10px, 1.5vh, 18px ) var( --cm-panel-pad ) clamp( 11px, 1.7vh, 20px );
	background: linear-gradient(
		180deg,
		#000 0%,
		#6d0f1c 42%,
		#b81c30 74%,
		var( --yd-primary ) 100%
	);
}
.contact-modal__partners-title {
	display: block;
	color: rgba( 255, 255, 255, 0.72 );
	font-family: var( --yd-font );
	font-weight: 500;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
}
/* The window the track slides through. The mask feathers both ends so logos
   fade out instead of being chopped off at the panel edge. */
.contact-modal__marquee {
	overflow: hidden;
	min-width: 0;                  /* never let the track dictate the column width */
	margin-top: clamp( 8px, 1.2vh, 14px );
	-webkit-mask-image: linear-gradient( to right, transparent 0, #000 8%, #000 92%, transparent 100% );
	mask-image: linear-gradient( to right, transparent 0, #000 8%, #000 92%, transparent 100% );
}
.contact-modal__marquee-track {
	display: flex;
	width: max-content;
	animation: contact-modal-marquee 32s linear infinite;
}
/* Pausing the track (not the items) halts the row as one piece and resumes
   from the same offset — animation-play-state freezes rather than resets. */
.contact-modal__marquee:hover .contact-modal__marquee-track {
	animation-play-state: paused;
}
@keyframes contact-modal-marquee {
	from {
		transform: translate3d( 0, 0, 0 );
	}
	to {
		transform: translate3d( -50%, 0, 0 );
	}
}
.contact-modal__marquee-group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: clamp( 28px, 3vw, 52px );
	margin: 0;
	padding: 0 clamp( 14px, 1.5vw, 26px );
	list-style: none;
}
.contact-modal__partner {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: rgba( 255, 255, 255, 0.86 );   /* lifted for the red band behind it */
	font-family: var( --yd-font );
	font-weight: 700;
	font-size: 13px;
	line-height: 1.4;              /* room for descenders — line-height:1 clipped the "p" in Perplexity */
	white-space: nowrap;
	transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
/* Image logos drop straight in where the wordmark is, once ACF supplies them. */
.contact-modal__partner img {
	display: block;
	width: auto;
	max-height: 22px;
	object-fit: contain;
	filter: grayscale( 1 ) brightness( 2.4 );
	opacity: 0.62;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
@media ( hover: hover ) and ( pointer: fine ) {
	.contact-modal__partner:hover {
		color: #fff;
		transform: scale( 1.05 );
	}
	.contact-modal__partner:hover img {
		opacity: 1;
		transform: scale( 1.05 );
	}
}

/* Locks the page behind the modal.

   The <html> rule is the one that actually bites: this theme sets
   `html { overflow-x: clip }`, and once the root's overflow is not `visible`
   the body's overflow stops propagating to the viewport — so `overflow:hidden`
   on <body> alone left the page still scrollable behind the modal. */
.yd-modal-open,
html:has( body.yd-modal-open ) {
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------------- */
@media ( max-width: 1100px ) {
	.contact-modal {
		--cm-pad: clamp( 8px, 1.6vw, 20px );
	}
	.contact-modal__dialog {
		grid-template-columns: 1fr;
		/* auto = the artwork takes only the height it is given below; 1fr = the
		   form absorbs everything left, so the pair always equals the window and
		   nothing has to scroll. */
		grid-template-rows: auto 1fr;
		max-height: 100vh;
		overflow: hidden;
	}
	.contact-modal__panel {
		overflow: visible;
	}
	/* Stacked, the image no longer has a column to fill, so the panel needs its
	   own height for the artwork to show behind the copy. */
	.contact-modal__aside {
		min-height: 0;
		height: clamp( 190px, 30vh, 300px );
	}
	.contact-modal__partner {
		font-size: 15px;
	}
	.contact-modal__partner img {
		max-height: 20px;
	}
}
@media ( max-width: 700px ) {
	.contact-modal__row {
		grid-template-columns: 1fr;
	}
	.contact-modal__dialog {
		border-radius: 18px;
	}
	/* Phone: the artwork panel is dropped entirely. The form is the whole point
	   of this modal, and removing the decorative half is exactly what buys the
	   room for every field to sit on one screen without scrolling. */
	.contact-modal__aside {
		display: none;
	}
	.contact-modal__dialog {
		grid-template-rows: 1fr;
	}
	.contact-modal__actions {
		gap: 14px;
	}
	.contact-modal__submit {
		flex: 1 1 100%;            /* full-width button on phones */
		min-width: 0;              /* clears the desktop floor so 100% wins */
	}
	.contact-modal__form-intro {
		margin-right: 44px;
	}
	/* Six across is unreadable at phone width — the strip wraps to two rows of
	   three, which still reads as a deliberate block. */
	.contact-modal__awards-list {
		grid-template-columns: repeat( 3, 1fr );
	}
	.contact-modal__award-img {
		max-height: 26px;
	}
	.contact-modal__partner {
		font-size: 14px;
	}
	.contact-modal__partner img {
		max-height: 18px;
	}
}
@media ( max-width: 420px ) {
	.contact-modal__awards-list {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* Short screens (a landscape phone, or an iPhone SE at 375x667). The form is
   the point of this modal, so the decorative artwork panel steps aside before
   any field does — that reclaims ~140px and keeps everything on one screen. */
@media ( max-width: 1100px ) and ( max-height: 800px ) {
	.contact-modal__aside {
		display: none;
	}
	.contact-modal__dialog {
		grid-template-rows: 1fr;
	}
}
/* Only a SHORT PHONE has to give up the partner strip — on a short desktop
   window the two-column layout still leaves ~190px spare, so the width bound
   here matters as much as the height one. */
@media ( max-width: 700px ) and ( max-height: 730px ) {
	.contact-modal__partners {
		display: none;
	}
}
/* Last resort for genuinely tiny viewports, where even a form-only dialog
   cannot fit. Scrolling is a worse experience than not scrolling, but it beats
   `overflow: hidden` quietly cutting fields off with no way to reach them. */
@media ( max-height: 620px ) {
	.contact-modal__dialog {
		overflow-y: auto;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.contact-modal,
	.contact-modal__dialog,
	.contact-modal__close,
	.contact-modal__submit,
	.contact-modal__label,
	.contact-modal__check-box,
	.contact-modal__partner,
	.contact-modal__partner img {
		transition: none;
	}
	.contact-modal__dialog {
		transform: none;
	}
	/* Stopped rather than hidden — the second group still sits off to the side,
	   so the visible row stays a full set of logos. */
	.contact-modal__marquee-track {
		animation: none;
	}
}

/* ==========================================================
   Tech Stack Section
   ----------------------------------------------------------
   Category tabs on the left of a single rounded card, the
   matching tool grid on the right. Both columns stretch to the
   same height, and panel visibility is driven purely off the
   --active modifier the JS toggles (display, not opacity, so an
   inactive panel adds no height and its content stays out of the
   tab order).

   The reference art uses blue for the tab rail; brand red is
   used instead, as everywhere else on this template.
========================================================== */
.tech-stack {
	padding: 80px 0;
	background: #fff;
}

/* --- Centred header --- */
.tech-stack__header {
	max-width: 62em;
	margin: 0 auto;
	text-align: center;
}
.tech-stack__eyebrow {
	display: inline-block;
	color: var( --yd-primary );
	font-family: var( --yd-font );
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.tech-stack__heading-wrap {
	margin-top: 18px;
}
.tech-stack__heading {
	margin: 0;
	font-size: clamp( 28px, 4vw, 52px );   /* the shared h2 scale on this page */
}
.tech-stack__text-wrap {
	margin-top: 18px;
}
.tech-stack__text {
	margin: 0;
	color: var( --yd-body );
}

/* --- Card: tab rail + panels --- */
.tech-stack__body {
	display: grid;
	grid-template-columns: minmax( 260px, 34% ) 1fr;
	align-items: stretch;
	overflow: hidden;
	margin-top: clamp( 32px, 3.6vw, 56px );
	border-radius: 28px;
	box-shadow:
        0 0 40px rgba(0, 0, 0, 0.12),
        0 12px 32px rgba(0, 0, 0, 0.08);
}

.tech-stack__nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: clamp( 16px, 1.6vw, 24px );
	background: linear-gradient( 165deg, #d81e35 0%, var( --yd-primary ) 100% );
}
.tech-stack__tab {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 14px 18px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: #fff;
	font-family: var( --yd-font );
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: background 0.28s ease;
}
.tech-stack__tab-icon {
	display: flex;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
}
.tech-stack__tab-icon svg {
	width: 100%;
	height: 100%;
}
/* Active reads as a raised pill rather than a colour change, so the rail keeps
   one continuous red field. */
.tech-stack__tab--active {
	background: rgba( 255, 255, 255, 0.22 );
}
@media ( hover: hover ) and ( pointer: fine ) {
	.tech-stack__tab:not( .tech-stack__tab--active ):hover {
		background: rgba( 255, 255, 255, 0.11 );
	}
}
.tech-stack__tab:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

/* --- Panels --- */
.tech-stack__panels {
	padding: clamp( 18px, 1.8vw, 28px );
	background: #ffedec;
}
.tech-stack__panel {
	display: none;                 /* only --active renders */
}
.tech-stack__panel--active {
	display: block;
}
/* auto-fill keeps the grid honest however many tools a category holds. */
.tech-stack__tools {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
	gap: clamp( 12px, 1.2vw, 18px );
	margin: 0;
	padding: 0;
	list-style: none;
}
.tech-stack__tool {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 26px;
	min-height: 132px;
	padding: 18px;
	border-radius: 16px;
	background: #fff;
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}
@media ( hover: hover ) and ( pointer: fine ) {
	.tech-stack__tool:hover {
		transform: translateY( -3px );
		box-shadow: 0 14px 30px rgba( 0, 0, 0, 0.1 );
	}
}
/* Monogram tile standing in for the brand logo. --tool-color comes from the
   markup (a future ACF colour field) and tints both the wash and the initials,
   so the grid still reads as a set of distinct products. An <img> dropped in
   here instead simply fills the same box. */
.tech-stack__tool-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	/* Flat fallback first: a browser without color-mix() would drop the tinted
	   declaration entirely and leave the tile transparent. */
	background: #f1f0f4;
	background: color-mix( in srgb, var( --tool-color, #6e7191 ) 14%, #fff );
	color: var( --tool-color, #6e7191 );
	font-family: var( --yd-font );
	font-weight: 800;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.01em;
}
/* A real logo needs no tile behind it — the tint exists only to give the
   monogram fallback a shape, and it would clash with a full-colour mark. */
.tech-stack__tool-logo:has( img ) {
	background: none;
}
.tech-stack__tool-logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
}
.tech-stack__tool-name {
	color: var( --yd-heading );
	font-family: var( --yd-font );
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
}

/* -----------------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------------- */
@media ( max-width: 1100px ) {
	.tech-stack__body {
		grid-template-columns: 1fr;
	}
	/* Stacked, the rail reads better as a wrapping row of chips than as a tall
	   list the visitor has to scroll past to reach the tools. */
	.tech-stack__nav {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}
	.tech-stack__tab {
		width: auto;
		padding: 11px 15px;
		font-size: 14px;
	}
}
@media ( max-width: 700px ) {
	.tech-stack__body {
		border-radius: 20px;
	}
	.tech-stack__tools {
		grid-template-columns: repeat( auto-fill, minmax( 132px, 1fr ) );
	}
	.tech-stack__tool {
		gap: 18px;
		min-height: 116px;
		padding: 15px;
	}
	.tech-stack__tab-label {
		font-size: 13px;
	}
}
@media ( max-width: 480px ) {
	.tech-stack__tools {
		grid-template-columns: repeat( 2, 1fr );
	}
	.tech-stack__tool-logo {
		width: 40px;
		height: 40px;
		font-size: 14px;
	}
	.tech-stack__tool-name {
		font-size: 14px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.tech-stack__tab,
	.tech-stack__tool {
		transition: none;
	}
}