/* =========================================================================
   Zobia Core — Main stylesheet (Phase 2 design system + Phase 3 additions)
   -------------------------------------------------------------------------
   Plain, dependency-free CSS. No build step. Organized into sections:
   Base / Layout / Header / Footer / Buttons / Cards / Sections /
   Forms / Utilities / Media Queries.

   Phase 3 added new rules WITHIN these existing sections (client cards in
   Cards; work-filter bar + related-strip in Sections; WhatsApp tooltip in
   Footer; single-service/product/case_study/client/career layouts, tag
   pills, feature lists, demo-request/career-apply panels, and the clients
   grid in the Inner Pages part of this file) rather than appending
   everything to the bottom — search this file's section comments to find
   each new block.

   Design tokens mirror theme.json (kept in sync manually since theme.json
   drives block-editor defaults and this file drives the live front-end).
   Palette confirmed against zobiacore.com's dark UI + blue accent
   (meta color-scheme: dark) — refined from the Phase 1 placeholder tokens.
   Exact on-screen hex values could not be pixel-sampled without a rendered
   browser session, so this palette is a considered, documented assumption
   (see README "Phase 2" notes), easy to swap via the CSS variables below.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Base — tokens, resets, typography
   ------------------------------------------------------------------------- */
:root {
	/* Color */
	--color-bg: #0B0F19;
	--color-bg-alt: #0D1220;
	--color-surface: #12172A;
	--color-surface-alt: #171D34;
	--color-border: rgba(245, 246, 250, 0.10);
	--color-border-strong: rgba(245, 246, 250, 0.18);
	--color-accent: #4F7CFF;
	--color-accent-hover: #6C91FF;
	--color-accent-active: #3D64E0;
	--color-accent-soft: rgba(79, 124, 255, 0.14);
	/* Darker than --color-accent specifically so white text/icons placed on
	   top of it meet WCAG AA (4.5:1) — the lighter --color-accent value
	   above stays as-is since it also serves as *text* color on the dark
	   page background elsewhere, where it already passes contrast on its
	   own; one value can't satisfy both roles. */
	--color-accent-on-fill: #2B61FF;
	--color-text: #F5F6FA;
	--color-text-muted: #9AA1B4;
	--color-text-faint: #6B7288;
	--color-white: #FFFFFF;
	--color-success-soft: rgba(79, 200, 137, 0.14);
	--color-success: #4FC889;
	--color-error-soft: rgba(255, 99, 99, 0.14);
	--color-error: #FF6363;

	/* Typography */
	--font-heading: "Poppins", sans-serif;
	--font-body: "Inter", sans-serif;
	--fs-h1: clamp(2.1rem, 1.55rem + 2.6vw, 3.6rem);
	--fs-h2: clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
	--fs-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
	--fs-h4: 1.125rem;
	--fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-xs: 0.75rem;
	--lh-heading: 1.2;
	--lh-body: 1.65;

	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	/* Layout */
	--container-width: 1200px;
	--container-wide: 1400px;
	--container-padding: 20px;
	--header-height: 84px;

	/* Radii & shadows */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-full: 999px;
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
	--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
	--shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);
	--shadow-accent: 0 10px 30px rgba(79, 124, 255, 0.25);

	/* Motion */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--transition-fast: 150ms var(--ease);
	--transition-base: 250ms var(--ease);
}

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}
*, *::before, *::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

svg {
	fill: currentColor;
}

a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--transition-fast);
}
a:hover {
	color: var(--color-accent-hover);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	line-height: var(--lh-heading);
	font-weight: 600;
	margin: 0 0 var(--space-4);
	color: var(--color-text);
}
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
	margin: 0 0 var(--space-4);
	color: var(--color-text-muted);
}

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

button {
	font-family: inherit;
	cursor: pointer;
}

input, textarea, select {
	font-family: inherit;
	font-size: var(--fs-body);
}

/* Focus visibility — accessibility requirement */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.button:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

::selection {
	background: var(--color-accent-on-fill);
	color: var(--color-white);
}

/* Screen-reader-only text, revealed on keyboard focus for skip links */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.skip-link.screen-reader-text:focus {
	background: var(--color-accent-on-fill);
	color: var(--color-white);
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	display: block;
	font-weight: 600;
	left: var(--space-4);
	top: var(--space-4);
	padding: var(--space-3) var(--space-5);
	z-index: 10000;
	border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------
   2. Layout
   ------------------------------------------------------------------------- */
.container {
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
	width: 100%;
}

.container--wide {
	max-width: var(--container-wide);
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1 0 auto;
}

.section {
	padding-block: var(--space-9);
	position: relative;
}

.section__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5);
	margin-bottom: var(--space-6);
	flex-wrap: wrap;
}

.section__title {
	margin-bottom: 0;
}

.section__link {
	font-weight: 600;
	font-size: var(--fs-small);
	white-space: nowrap;
}
.section__link::after {
	content: "\2192";
	margin-inline-start: var(--space-2);
	display: inline-block;
	transition: transform var(--transition-fast);
}
.section__link:hover::after {
	transform: translateX(4px);
}

.description {
	color: var(--color-text-faint);
	font-style: italic;
}

/* -------------------------------------------------------------------------
   3. Header
   ------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.site-header.is-scrolled {
	background: rgba(11, 15, 25, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom-color: var(--color-border);
	box-shadow: var(--shadow-sm);
}
body.nav-open {
	overflow: hidden;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	min-height: var(--header-height);
}

.site-branding {
	flex: 0 0 auto;
	position: relative;
	z-index: 1000;
}
.site-branding img {
	max-height: 44px;
	width: auto;
}
.site-title-link {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-text);
}
.site-title-link:hover {
	color: var(--color-accent);
}
.site-tagline {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--color-text-muted, var(--color-text));
	opacity: 0.75;
	margin-top: 2px;
}

.primary-navigation {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

#primary-menu {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}

#primary-menu > li {
	position: relative;
}

#primary-menu > li > a {
	color: var(--color-text);
	font-weight: 500;
	font-size: var(--fs-small);
	padding: var(--space-2) 0;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}
#primary-menu > li > a:hover,
#primary-menu > li.current-menu-item > a {
	color: var(--color-accent);
}

/* Dropdown arrow indicator for parent items */
#primary-menu > li.menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-inline-start: 2px;
	transition: transform var(--transition-fast);
}
#primary-menu > li.menu-item-has-children:hover > a::after {
	transform: rotate(225deg);
}

.sub-menu {
	position: absolute;
	top: calc(100% + var(--space-4));
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 260px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: var(--space-2);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu,
.menu-item-has-children.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.sub-menu li a {
	display: block;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}
.sub-menu li a:hover {
	background: var(--color-accent-soft);
	color: var(--color-text);
}

.submenu-toggle {
	display: none;
}

.site-header__cta {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.mobile-nav-toggle {
	display: none;
	justify-content: center;
	align-items: center;
	width: 42px;
	height: 42px;
	border: none;
	background: transparent;
	flex: 0 0 auto;
	position: relative;
	z-index: 1000;
}
.mobile-nav-toggle__icon {
	position: relative;
	display: block;
	width: 20px;
	height: 14px;
}
.mobile-nav-toggle__line {
	position: absolute;
	left: 0;
	display: block;
	width: 20px;
	height: 1.5px;
	background: var(--color-text);
	border-radius: var(--radius-full);
	transition: transform 0.6s cubic-bezier(0.5, 0.1, 0, 1.2), opacity 0.6s cubic-bezier(0.5, 0.1, 0, 1.2);
}
.mobile-nav-toggle__line:nth-child(1) {
	top: 0;
}
.mobile-nav-toggle__line:nth-child(2) {
	top: 6px;
}
.mobile-nav-toggle__line:nth-child(3) {
	top: 12px;
}
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__line:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__line:nth-child(2) {
	opacity: 0;
}
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__line:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* -------------------------------------------------------------------------
   4. Footer
   ------------------------------------------------------------------------- */
.site-footer {
	background: var(--color-bg-alt);
	border-top: 1px solid var(--color-border);
	padding-block: var(--space-8) var(--space-6);
	margin-top: var(--space-9);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-7);
	padding-bottom: var(--space-7);
	border-bottom: 1px solid var(--color-border);
}

.footer-widget-title {
	font-size: var(--fs-small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text);
	margin-bottom: var(--space-4);
}

.footer-widget ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.footer-widget a {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}
.footer-widget a:hover {
	color: var(--color-accent);
}

.footer-col--social .footer-widget ul {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-3);
}
.footer-col--social .footer-widget a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-full);
	border: 1px solid var(--color-border-strong);
	font-size: 0;
}
.footer-col--social .footer-widget a::before {
	content: "\2197";
	font-size: var(--fs-small);
}

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
	padding-top: var(--space-6);
}

.footer-copyright {
	color: var(--color-text-faint);
	font-size: var(--fs-small);
	margin: 0;
}

.footer-legal-nav a {
	color: var(--color-text-faint);
	font-size: var(--fs-small);
}
.footer-legal-nav a:hover {
	color: var(--color-accent);
}

.floating-whatsapp {
	position: fixed;
	right: var(--space-5);
	bottom: var(--space-5);
	z-index: 998;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--color-success);
	color: #08150F;
	font-weight: 600;
	font-size: var(--fs-small);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-lg);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.floating-whatsapp::before {
	content: "\1F4AC";
}
.floating-whatsapp:hover {
	transform: translateY(-2px);
	color: #08150F;
	box-shadow: 0 16px 34px rgba(79, 200, 137, 0.35);
}

/* CSS-only hover tooltip (desktop only — the button itself goes icon-only
   on mobile at the 767px breakpoint below, where the tooltip is hidden too) */
.floating-whatsapp__tooltip {
	position: absolute;
	right: 0;
	bottom: calc(100% + var(--space-3));
	white-space: nowrap;
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	padding: var(--space-2) var(--space-4);
	font-size: var(--fs-xs);
	font-weight: 500;
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
	pointer-events: none;
}
.floating-whatsapp:hover .floating-whatsapp__tooltip,
.floating-whatsapp:focus-visible .floating-whatsapp__tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* -------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------- */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 14px 28px;
	border-radius: var(--radius-full);
	font-weight: 600;
	font-size: var(--fs-small);
	border: 1px solid transparent;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
	white-space: nowrap;
}
.button--primary {
	background: var(--color-accent-on-fill);
	color: var(--color-white);
	box-shadow: var(--shadow-accent);
}
.button--primary:hover {
	background: var(--color-accent-hover);
	color: var(--color-white);
	transform: translateY(-2px);
}
.button--secondary {
	border-color: var(--color-border-strong);
	color: var(--color-text);
	background: transparent;
}
.button--secondary:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	transform: translateY(-2px);
}
.button--block {
	width: 100%;
}

/* -------------------------------------------------------------------------
   6. Cards
   ------------------------------------------------------------------------- */
.work-card,
.service-card,
.archive-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.work-card:hover,
.archive-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
	border-color: var(--color-border-strong);
}

.work-card a {
	display: block;
	color: inherit;
}
.work-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.work-card__body {
	padding: var(--space-5);
}
.work-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}
.work-card__tags .work-card__tag {
	margin-bottom: 0;
}
.work-card__tag {
	display: inline-block;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-accent);
	background: var(--color-accent-soft);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	margin-bottom: var(--space-3);
}
.work-card__title {
	margin: 0;
	font-size: var(--fs-h4);
}

.service-card {
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
}
.service-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
	border-color: var(--color-accent);
}
.service-card__icon {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	background: var(--color-accent-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-5);
}
.service-card__icon img {
	max-width: 28px;
	max-height: 28px;
}
.service-card img:not(.service-card__icon img) {
	border-radius: var(--radius-md);
	margin-bottom: var(--space-4);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.service-card__title {
	margin-bottom: var(--space-3);
}
.service-card__excerpt {
	flex: 1 0 auto;
	margin-bottom: var(--space-4);
}
.service-card__link {
	font-weight: 600;
	font-size: var(--fs-small);
}
.service-card__link::after {
	content: "\2192";
	margin-inline-start: var(--space-2);
	display: inline-block;
	transition: transform var(--transition-fast);
}
.service-card__link:hover::after {
	transform: translateX(4px);
}

.archive-card a {
	display: block;
	color: inherit;
}
.archive-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.archive-card__title {
	margin: var(--space-4) var(--space-5) var(--space-2);
	font-size: var(--fs-h4);
}
.archive-card__excerpt {
	padding: 0 var(--space-5) var(--space-5);
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}

/* Client card (page-templates/page-clients.php) */
.client-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6) var(--space-5);
	color: inherit;
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.client-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
	border-color: var(--color-border-strong);
	color: inherit;
}
.client-card__logo {
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: grayscale(1) brightness(1.6);
	opacity: 0.85;
	transition: opacity var(--transition-fast), filter var(--transition-fast);
}
.client-card:hover .client-card__logo {
	filter: grayscale(0) brightness(1);
	opacity: 1;
}
.client-card__logo img {
	max-height: 100%;
	width: auto;
}
.client-card__name-fallback {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-text-muted);
}
.client-card__title {
	font-size: var(--fs-h4);
	margin: 0;
}

/* Team card (page-templates/page-about.php "Meet the team" grid) */
.team-grid-section {
	padding-block: var(--space-9);
}
.team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}
.team-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-2);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.team-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
	border-color: var(--color-border-strong);
}
.team-card__photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: var(--space-2);
}
.team-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.team-card__name {
	margin: 0;
	font-size: var(--fs-h4);
}
.team-card__role {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}

/* -------------------------------------------------------------------------
   7. Sections — Hero, Trusted-by, Work grid, Services highlight, CTA band
   ------------------------------------------------------------------------- */

/* Hero — Phase 5: ported class-for-class from the Sysberries reference
   site's header.css (the user supplied that file directly). Every value
   below — colors, clamp() sizes, gradient stops, button states, and the
   .animate/.animate-up/.animated reveal system — is copied as-is from
   that source, not re-derived. Everything is scoped: the custom
   properties are declared on .hero itself (not :root), and every class
   name (.title, .btn, .intro, .dotted-bg, .animate, ...) was confirmed
   absent elsewhere in this file before reuse, so nothing outside the
   hero can be affected and no existing selector is shadowed.

   NOTE — font: the reference site's headline font is "General Sans"
   (variable), self-hosted as GeneralSans-Variable.woff2. That binary
   isn't something this build could fetch (only the CSS text was
   provided), so the @font-face below points at
   assets/fonts/GeneralSans-Variable.woff2 — add that file (free,
   including commercial use, from https://www.fontshare.com/fonts/general-sans)
   for pixel-exact type; until then the hero falls back to the same
   system-font stack the reference site itself falls back to. */
@font-face {
	font-family: "GeneralSans-Variable";
	src: url("../fonts/GeneralSans-Variable.woff2") format("woff2");
	font-weight: 200 700;
	font-display: swap;
	font-style: normal;
}
.hero {
	/* --- tokens, copied from :root in header.css --- */
	--ff-fallback: "GeneralSans-Variable", sans-serif;
	--hero-font-f: -apple-system, BlinkMacSystemFont, Inter, var(--ff-fallback);
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--clr-accent: hsl(181, 61%, 50%);
	--black: hsl(0, 0%, 0%);
	--white: hsl(0, 0%, 100%);
	--clr-slate: hsl(231deg 7% 20%);
	--clr-text: hsl(219, 11%, 65%);
	--text-80: hsl(0, 0%, 80%);
	--gradient-text-start: var(--clr-accent);
	--gradient-text-end: hsl(0, 0%, 100%);
	--fs-16-20: clamp(1rem, 0.904rem + 0.385vw, 1.25rem);

	position: relative;
	color-scheme: only dark;
	font-family: var(--hero-font-f);
	background-color: var(--black);
	text-align: center;
}
/* .dotted-bg, verbatim */
.hero.dotted-bg {
	background-image: radial-gradient(#2e2e2e 1px, transparent 1px);
	background-size: clamp(0.625rem, 0.385rem + 0.962vw, 1.25rem)
		clamp(0.625rem, 0.385rem + 0.962vw, 1.25rem);
}
/* .intro + .intro.intro-center, verbatim */
.hero .intro {
	--intro-block-start-padding: clamp(3.75rem, 2.067rem + 6.731vw, 8.125rem);
	--intro-block-end-padding: clamp(3.75rem, 2.788rem + 3.846vw, 6.25rem);
	display: grid;
	gap: clamp(1.563rem, 1.202rem + 1.442vw, 2.5rem);
	padding-block: var(--intro-block-start-padding) var(--intro-block-end-padding);
}
.hero .intro.intro-center {
	--intro-block-start-padding: clamp(3.75rem, 2.5rem + 5vw, 6.875rem);
	--intro-block-end-padding: 1rem;
	text-align: center;
	justify-items: center;
	justify-content: center;
}
.hero .intro p {
	color: var(--clr-text);
	font-size: var(--fs-16-20);
	text-wrap: balance;
	max-width: 80ch;
	margin-inline: auto;
}
/* .title + .title-xl, verbatim */
.hero .title {
	font-weight: var(--fw-medium);
	text-wrap: balance;
	color: var(--white);
}
.hero .title-xl {
	font-size: clamp(2.125rem, 1.212rem + 3.654vw, 4.5rem);
	line-height: 1.1;
}
/* .gradient-text, verbatim — teal-to-white vertical gradient clipped to
   the headline text, which is what makes the first line read teal and
   the second line read white without hard-coding either as a flat color. */
.hero .gradient-text {
	background-image: linear-gradient(0deg, var(--gradient-text-end), var(--gradient-text-start) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.hero__title-line {
	display: block;
}
/* .btn-group + .btn + .btn-primary/.btn-secondary, verbatim */
.hero .btn-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(0.625rem, 0.481rem + 0.577vw, 1rem);
}
.hero .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem clamp(1.25rem, 1.106rem + 0.577vw, 1.625rem);
	background: var(--white);
	color: var(--black);
	border-radius: 0.625rem;
	font-size: clamp(0.875rem, 1vw, 1rem);
	font-weight: var(--fw-medium);
	user-select: none;
	transition: background ease-in-out 200ms, color ease-in-out 200ms;
}
.hero .btn.btn-primary {
	background: var(--clr-accent);
	color: var(--black);
}
.hero .btn.btn-secondary {
	background: var(--clr-slate);
	color: var(--text-80);
}
@supports (corner-shape: squircle) {
	.hero .btn {
		corner-shape: squircle;
		border-radius: 1.25rem;
	}
}
@media (hover: hover) {
	.hero .btn.btn-secondary:hover,
	.hero .btn.btn-primary:hover {
		background: var(--white);
		color: var(--black);
	}
	.hero .btn:active {
		scale: 0.95;
	}
}
/* Trust label — same rule as .featured-clients > span in the reference
   site (plain case, no letter-spacing; it isn't styled as an eyebrow there). */
.hero__trust-label {
	display: inline-block;
	color: var(--clr-text);
	font-size: 0.875rem;
	margin: 0;
}
/* .animate / .animate-up / .animate-delay-* / .animated, verbatim reveal
   system — JS (main.js) adds .animated once each element scrolls into
   view (or immediately for the hero, since it's already in the viewport
   on load). */
.hero .animate {
	opacity: 0;
	transition: all 1s;
	will-change: transform;
}
.hero .animate-up {
	transform: translateY(100px);
}
.hero .animate-delay-100 { transition-delay: 100ms; }
.hero .animate-delay-150 { transition-delay: 150ms; }
.hero .animate-delay-200 { transition-delay: 200ms; }
.hero .animate-delay-250 { transition-delay: 250ms; }
.hero .animate-delay-300 { transition-delay: 300ms; }
.hero .animated {
	opacity: 1;
	transform: translate(0);
}
@media (max-width: 860px) {
	.hero .animate-up {
		transform: translateY(40px);
	}
	.hero .animate-delay-100 { transition-delay: 30ms; }
	.hero .animate-delay-150 { transition-delay: 50ms; }
	.hero .animate-delay-200 { transition-delay: 80ms; }
	.hero .animate-delay-250 { transition-delay: 100ms; }
	.hero .animate-delay-300 { transition-delay: 120ms; }
}

/* Trusted-by marquee */
.trusted-by {
	padding-block: var(--space-6);
	border-block: 1px solid var(--color-border);
}
.trusted-by__viewport {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trusted-by__track {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	width: max-content;
	animation: trusted-by-scroll 32s linear infinite;
}
.trusted-by__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	opacity: 0.65;
	filter: grayscale(1) brightness(1.6);
	transition: opacity var(--transition-fast), filter var(--transition-fast);
}
.trusted-by__logo:hover {
	opacity: 1;
	filter: grayscale(0) brightness(1);
}
.trusted-by__logo img {
	max-height: 100%;
	width: auto;
}
.trusted-by__logo span {
	color: var(--color-text-muted);
	font-weight: 600;
	white-space: nowrap;
}
@keyframes trusted-by-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.trusted-by__track {
		animation: none;
		flex-wrap: wrap;
		overflow-x: auto;
	}
}

/* Phase 4 accessibility pass: honor the OS-level "reduce motion" setting
   sitewide, not just for the trusted-by marquee above — this covers the
   smooth-scroll anchor jumps set on <html>, the related-strip's smooth
   scroll-into-view, and caps every CSS transition to a near-instant
   duration rather than turning animation off selector-by-selector. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.related-strip__viewport {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Work grid */
.work-grid__items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

/* Work filter bar (Phase 3 — All / Case Studies / Products / Services) */
.work-filter {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}
.work-filter__btn {
	background: transparent;
	border: 1px solid var(--color-border-strong);
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	font-weight: 600;
	padding: var(--space-2) var(--space-5);
	border-radius: var(--radius-full);
	transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.work-filter__btn:hover {
	color: var(--color-text);
	border-color: var(--color-accent);
}
.work-filter__btn.is-active {
	background: var(--color-accent-on-fill);
	border-color: var(--color-accent-on-fill);
	color: var(--color-white);
}
.work-filter__empty {
	color: var(--color-text-faint);
	font-style: italic;
	margin-top: var(--space-5);
}

/* Related-items horizontal scroll-snap strip (Phase 3) — dependency-free,
   no slider library. Same fade-edge technique as .trusted-by__viewport. */
.related-strip__wrapper {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-3);
}
.related-strip__viewport {
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
	/* Scrollbar kept visible but unobtrusive — this is a plain scrollable
	   list without JS, so the affordance needs to read as scrollable. */
	scrollbar-width: thin;
	scrollbar-color: var(--color-border-strong) transparent;
}
.related-strip__track {
	display: flex;
	gap: var(--space-6);
	padding-block: var(--space-2) var(--space-4);
}
.related-strip__item {
	flex: 0 0 auto;
	width: min(320px, 80vw);
	scroll-snap-align: start;
}
.related-strip__item .work-card {
	height: 100%;
}
.related-strip__arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	border: 1px solid var(--color-border-strong);
	background: var(--color-surface);
	color: var(--color-text);
	transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.related-strip__arrow:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}
.related-strip__arrow--prev:hover {
	transform: translateX(-2px);
}
.related-strip__arrow--next:hover {
	transform: translateX(2px);
}

/* Services highlight */
.services-highlight {
	background: var(--color-bg-alt);
}
.services-highlight__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}

/* CTA band */
.cta-band__inner {
	background: linear-gradient(120deg, var(--color-surface) 0%, var(--color-surface-alt) 100%);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	text-align: center;
	max-width: var(--container-wide);
	position: relative;
	overflow: hidden;
}
.cta-band__inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(45% 80% at 90% 20%, var(--color-accent-soft) 0%, transparent 70%);
	pointer-events: none;
}
.cta-band__title {
	margin-bottom: var(--space-3);
	position: relative;
}
.cta-band__text {
	max-width: 560px;
	margin-inline: auto;
	margin-bottom: var(--space-6);
	position: relative;
}
.cta-band .button {
	position: relative;
}

/* Page header (inner pages) */
.page-header {
	padding-block: var(--space-8) var(--space-6);
	text-align: center;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-8);
}
.page-header__title {
	margin-bottom: 0;
}

/* No results */
.no-results {
	text-align: center;
	padding-block: var(--space-8);
}
.no-results .search-form {
	margin-top: var(--space-6);
	max-width: 480px;
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   8. Inner pages — About, Services, Contact, Archive, Single, 404
   ------------------------------------------------------------------------- */
.page-content,
.about-page {
	max-width: 820px;
	margin-inline: auto;
	padding-block: var(--space-3) var(--space-9);
}
.page-content > *:last-child,
.about-page > *:last-child,
.entry-content > *:last-child {
	margin-bottom: 0;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	padding-bottom: var(--space-9);
}
.services-grid .service-card .excerpt {
	flex: 1 0 auto;
	margin-bottom: var(--space-4);
}
.services-grid .service-card a {
	font-weight: 600;
	font-size: var(--fs-small);
	margin-top: auto;
}

/* Clients landing page (page-templates/page-clients.php) */
.clients-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
	padding-bottom: var(--space-9);
}

.contact-page {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-8);
	padding-bottom: var(--space-9);
	align-items: start;
}
.contact-page__content {
	padding-top: var(--space-3);
}
.contact-page__content .description-list {
	margin-top: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.contact-page__form {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

.archive-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	padding-bottom: var(--space-9);
}
.archive-grid .pagination,
.archive-grid .nav-links {
	grid-column: 1 / -1;
}

/* Single post */
.entry-header {
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
	padding-top: var(--space-6);
}
.entry-title {
	margin-bottom: var(--space-3);
}
.entry-meta {
	color: var(--color-text-faint);
	font-size: var(--fs-small);
}
.entry-thumbnail {
	max-width: var(--container-wide);
	margin: var(--space-7) auto;
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.entry-thumbnail img {
	width: 100%;
}

/* Shared single-{cpt}.php header bits (Phase 3 — Service/Product/Case
   Study/Client/Career) */
.entry-kicker {
	color: var(--color-accent);
	font-size: var(--fs-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--space-3);
}
.entry-lead {
	color: var(--color-text-muted);
	font-size: var(--fs-lead);
	max-width: 640px;
	margin-inline: auto;
	margin-bottom: var(--space-5);
}
.single-service .entry-header .button,
.single-product .entry-header .button {
	margin-top: var(--space-4);
}

/* Generic pill/tag list — used by single-client.php's "Services / Work
   Done" tags, page-clients.php's compact preview tags, the case-study
   client tag, and career meta pills. */
.tag-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-4);
}
.tag-list__item,
.case-client-tag,
.career-meta-pills__item {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-accent);
	background: var(--color-accent-soft);
	padding: var(--space-1) var(--space-4);
	border-radius: var(--radius-full);
}
.tag-list--compact {
	justify-content: center;
	margin-top: var(--space-3);
}
.case-client-tag {
	display: inline-block;
	margin-top: var(--space-4);
}
.career-meta-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-4);
}
.career-meta-pills__item {
	color: var(--color-text);
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border-strong);
}

/* Feature list — single-service.php "What's Included" / single-product.php
   "Key Features" */
.feature-list-wrap {
	max-width: 780px;
	margin: 0 auto var(--space-8);
}
.feature-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.feature-list--grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3) var(--space-6);
}
.feature-list__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	color: var(--color-text);
}
.feature-list__icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	background: var(--color-success-soft);
	color: var(--color-success);
	font-size: var(--fs-xs);
	font-weight: 700;
}

/* single-client.php header */
.single-client__header {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.single-client__logo {
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-5);
}
.single-client__logo img {
	max-height: 100%;
	width: auto;
}

/* single-case_study.php — slightly larger thumbnail treatment */
.entry-thumbnail--case-study {
	box-shadow: var(--shadow-lg);
}

/* single-product.php "Request a Demo" + single-career.php "Apply" —
   both reuse .contact-form / .form-group from Forms (section 10) but sit
   inside a bordered panel that echoes .contact-page__form. */
.demo-request,
.career-apply {
	max-width: 780px;
	margin: var(--space-8) auto 0;
}
.demo-request__inner,
.career-apply__inner {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-7);
}
.demo-request__copy {
	margin-bottom: var(--space-6);
	text-align: center;
}
.career-apply__inner h2 {
	text-align: center;
	margin-bottom: var(--space-6);
}

/* search.php */
.search-results-grid .search-result-tag {
	display: block;
	width: fit-content;
	margin: var(--space-4) var(--space-5) 0;
}
.search-results-grid .archive-card__title {
	margin-top: var(--space-2);
}
.page-header__title span {
	color: var(--color-accent);
}
.entry-content {
	max-width: 780px;
	margin-inline: auto;
	padding-bottom: var(--space-8);
}
.entry-content h2,
.entry-content h3 {
	margin-top: var(--space-7);
}
.entry-content a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.entry-content blockquote {
	border-inline-start: 3px solid var(--color-accent);
	padding-inline-start: var(--space-5);
	color: var(--color-text-muted);
	font-style: italic;
	margin: var(--space-6) 0;
}
.entry-content img {
	border-radius: var(--radius-md);
	margin-block: var(--space-5);
}
.entry-summary {
	color: var(--color-text-muted);
}
.page-links {
	max-width: 780px;
	margin: var(--space-6) auto;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

/* 404 */
.error-404 {
	text-align: center;
	padding-block: var(--space-10);
	max-width: 640px;
}
.error-404 h1 {
	font-size: clamp(3rem, 2rem + 4vw, 6rem);
	color: var(--color-accent);
}
.error-404 .search-form {
	margin: var(--space-6) auto;
	max-width: 420px;
}

/* Search form */
.search-form {
	display: flex;
	gap: var(--space-2);
}
.search-form input[type="search"] {
	flex: 1 1 auto;
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-full);
	padding: var(--space-3) var(--space-5);
	color: var(--color-text);
}
.search-form input[type="search"]:focus {
	border-color: var(--color-accent);
	outline: none;
}
.search-form input[type="search"]::placeholder {
	color: var(--color-text-faint);
}
.search-form button {
	background: var(--color-accent-on-fill);
	color: var(--color-white);
	border: none;
	border-radius: var(--radius-full);
	padding: var(--space-3) var(--space-6);
	font-weight: 600;
	font-size: var(--fs-small);
	transition: background var(--transition-fast);
}
.search-form button:hover {
	background: var(--color-accent-hover);
}

/* Pagination (the_posts_pagination) */
.pagination,
.nav-links {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-4);
}
.pagination .page-numbers,
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--space-2);
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	border: 1px solid var(--color-border);
}
.pagination .page-numbers.current,
.nav-links .page-numbers.current,
.pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
	background: var(--color-accent-on-fill);
	color: var(--color-white);
	border-color: var(--color-accent-on-fill);
}

/* -------------------------------------------------------------------------
   9. Comments
   ------------------------------------------------------------------------- */
.comments-area {
	max-width: 780px;
	padding-block: var(--space-8);
	border-top: 1px solid var(--color-border);
}
.comments-title {
	margin-bottom: var(--space-6);
}
.comment-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	margin-bottom: var(--space-7);
}
.comment-list .children {
	margin-top: var(--space-5);
	margin-inline-start: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
.comment-list article,
.comment-body {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-5);
}
.comment-author .fn {
	font-weight: 600;
	color: var(--color-text);
	font-style: normal;
}
.comment-metadata {
	font-size: var(--fs-xs);
	color: var(--color-text-faint);
	margin-bottom: var(--space-3);
}
.comment-reply-link {
	font-size: var(--fs-xs);
	font-weight: 600;
}
.no-comments {
	color: var(--color-text-faint);
}

/* -------------------------------------------------------------------------
   10. Forms — comment form + native contact form
   ------------------------------------------------------------------------- */
.comment-form,
.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.comment-form p,
.contact-form .form-group {
	margin: 0;
}
.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}
.form-group label,
.comment-form label {
	display: block;
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: var(--space-2);
}
.form-group .required,
.comment-form .required {
	color: var(--color-accent);
}
.form-group input,
.form-group textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	padding: var(--space-3) var(--space-4);
	color: var(--color-text);
	transition: border-color var(--transition-fast);
}
.form-group input:focus,
.form-group textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--color-accent);
	outline: none;
}
.form-group textarea,
.comment-form textarea {
	resize: vertical;
	min-height: 140px;
}
.form-group .field-note {
	font-size: var(--fs-xs);
	color: var(--color-text-faint);
	margin-top: var(--space-2);
}
.form-group input[type="file"] {
	padding: var(--space-2);
	font-size: var(--fs-small);
}
.form-group input[type="file"]::file-selector-button {
	background: var(--color-accent-on-fill);
	color: var(--color-white);
	border: none;
	border-radius: var(--radius-sm);
	padding: var(--space-2) var(--space-4);
	margin-inline-end: var(--space-3);
	font-weight: 600;
	cursor: pointer;
}
/* Honeypot — hidden from real visitors, left in the tab/DOM order for bots */
.form-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.form-notice {
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-sm);
	font-size: var(--fs-small);
	margin-bottom: var(--space-2);
}
.form-notice--success {
	background: var(--color-success-soft);
	color: var(--color-success);
	border: 1px solid rgba(79, 200, 137, 0.35);
}
.form-notice--error {
	background: var(--color-error-soft);
	color: var(--color-error);
	border: 1px solid rgba(255, 99, 99, 0.35);
}

/* -------------------------------------------------------------------------
   11. Utilities
   ------------------------------------------------------------------------- */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   12. Media queries — mobile-first breakpoints: 480 / 768 / 1024 / 1280
   ------------------------------------------------------------------------- */

/* Base styles above are already mobile (≤480px). Tablet and up: */
@media (max-width: 1023px) {
	.services-highlight__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.work-grid__items,
	.services-grid,
	.archive-grid,
	.clients-grid,
	.team-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.contact-page {
		grid-template-columns: 1fr;
	}
	.demo-request__inner,
	.career-apply__inner {
		padding: var(--space-6) var(--space-5);
	}
}

@media (max-width: 900px) {
	.primary-navigation {
		position: fixed;
		inset: 0 0 0 0;
		width: 100vw;
		height: 100%;
		min-height: 100dvh;
		background: hsla(0, 0%, 0%, 0.95);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		padding-block-start: calc(var(--header-height) + var(--space-6));
		padding-block-end: var(--space-6);
		padding-inline: var(--container-padding);
		overflow-y: auto;
		overscroll-behavior: contain;
		opacity: 0;
		pointer-events: none;
		transition: opacity ease-in-out 150ms;
		z-index: 998;
	}
	.primary-navigation.is-open {
		opacity: 1;
		pointer-events: auto;
	}
	#primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	/* Staggered upward slide-and-fade reveal for each top-level item,
	   only while the panel is open — otherwise items stay hidden. */
	#primary-menu > li {
		border-bottom: 1px solid var(--color-border);
		transform: translateY(-80px);
		opacity: 0;
		transition: transform 0.8s ease, opacity 0.8s ease;
	}
	#primary-menu > li:nth-child(2) { transition-delay: 40ms; }
	#primary-menu > li:nth-child(3) { transition-delay: 80ms; }
	#primary-menu > li:nth-child(4) { transition-delay: 120ms; }
	#primary-menu > li:nth-child(5) { transition-delay: 160ms; }
	#primary-menu > li:nth-child(6) { transition-delay: 200ms; }
	#primary-menu > li:nth-child(7) { transition-delay: 240ms; }
	.primary-navigation.is-open #primary-menu > li {
		transform: translateY(0);
		opacity: 1;
	}
	#primary-menu > li > a {
		padding: var(--space-4) 0;
		width: 100%;
		justify-content: space-between;
	}
	/* Submenus are always expanded on mobile — no second tap. The desktop
	   hover/focus-within dropdown behavior above simply doesn't apply
	   below this breakpoint. */
	.sub-menu {
		position: static;
		transform: none !important;
		box-shadow: none;
		border: none;
		background: transparent;
		padding-inline-start: var(--space-4);
		display: block;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	.sub-menu li a {
		padding-block: var(--space-3);
	}
	.submenu-toggle {
		display: none;
	}
	.site-header__cta {
		display: none;
	}
	.mobile-nav-toggle {
		display: flex;
	}
}

@media (max-width: 767px) {
	:root {
		--space-9: 56px;
		--space-10: 72px;
	}
	.hero .btn-group {
		flex-direction: column;
		align-items: stretch;
	}
	.hero .btn-group .btn {
		width: 100%;
	}
	.work-grid__items,
	.services-highlight__grid,
	.services-grid,
	.archive-grid,
	.clients-grid,
	.team-grid,
	.feature-list--grid {
		grid-template-columns: 1fr;
	}
	.section__header {
		align-items: flex-start;
	}
	.work-filter {
		width: 100%;
	}
	.related-strip__arrow {
		display: none;
	}
	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
	.form-row {
		grid-template-columns: 1fr;
	}
	.floating-whatsapp span {
		display: none;
	}
	.floating-whatsapp {
		width: 52px;
		height: 52px;
		padding: 0;
		justify-content: center;
	}
	.floating-whatsapp::before {
		margin: 0;
	}
	.cta-band__inner {
		padding: var(--space-6) var(--space-5);
	}
}

@media (min-width: 1280px) {
	.container {
		padding-inline: var(--space-6);
	}
}