/* =========================================================================
   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;
	/* Every shade below is *derived* from --color-accent with color-mix()
	   instead of being hand-picked, so the whole theme's hover states,
	   soft tints, and WCAG-safe fill color stay in sync automatically —
	   including when a client changes only the "Accent / Brand Color"
	   field in Customizer → Colors. Nothing here needs to be kept in
	   sync by hand. */
	--color-accent-hover: color-mix(in srgb, var(--color-accent) 82%, white);
	--color-accent-active: color-mix(in srgb, var(--color-accent) 80%, black);
	--color-accent-soft: color-mix(in srgb, var(--color-accent) 14%, transparent);
	/* 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: color-mix(in srgb, var(--color-accent) 78%, black);
	--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;
	/* Fixed brand green for the WhatsApp button — its own token (not a
	   reuse of --color-success) so it never shifts if the generic
	   success color is retuned; WhatsApp's own green is what visitors
	   expect to recognize here regardless of site theming. */
	--color-whatsapp: #25D366;
	--color-whatsapp-ink: #08150F;

	/* 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;
	/* Matches .hero's --black (hsl(0,0%,0%)) so the header and the hero
	   read as one continuous surface on initial load — no colour seam
	   between the two before .is-scrolled takes over. */
	background: hsl(0, 0%, 0%);
	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);
}

/* Submenu reveal: intentionally has no `pointer-events` toggle. It used
   to flip to `none` the instant the cursor left the trigger link (that
   property isn't in the transition list, so it snapped immediately,
   unlike opacity/visibility below) — which meant the ~16px visual gap
   above the dropdown (top: calc(100% + var(--space-4))) became a dead
   zone: crossing it into the dropdown landed on an element that could
   no longer be hovered, and the menu closed before the mouse ever
   reached it. `visibility` alone already removes the dropdown from hit
   -testing while hidden, and — per the CSS Transitions spec's special
   case for `visibility` — only flips to `hidden` at the *end* of the
   transition when hiding (immediately when revealing), so the dropdown
   now stays genuinely hoverable for the whole var(--transition-base)
   duration while it fades, which is ample time to cross the gap. */
.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;
	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;
	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;
}

/* "Contact us" header button — same size/shape as the reference
   screenshot (compact rounded-rect, not a full pill), matching .hero
   .btn's padding + radius exactly so it reads as the same button family
   as the hero CTAs. Colour now comes from the shared accent tokens
   (Customizer → Colors → Accent / Brand Color) instead of a hardcoded
   slate fill, so it always matches the rest of the site's primary
   buttons and re-themes correctly. */
.header-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 0.75rem clamp(1.125rem, 0.98rem + 0.577vw, 1.5rem);
	background: var(--color-accent-on-fill);
	color: var(--color-white);
	border-radius: 0.625rem;
	font-size: clamp(0.875rem, 1vw, 1rem);
	font-weight: 500;
	white-space: nowrap;
	user-select: none;
	transition: background ease-in-out 200ms, color ease-in-out 200ms, transform ease-in-out 150ms;
}
.header-cta-btn:hover,
.header-cta-btn:focus-visible {
	background: var(--color-accent-hover);
	color: var(--color-white);
	transform: translateY(-1px);
}

.mobile-nav__cta {
	display: none;
}

.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: hsl(0, 0%, 0%);
	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);
}

.footer-widget-title {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	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: none;
	background: hsl(0, 0%, 100%);
	font-size: 0;
	position: relative;
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.footer-col--social .footer-widget a:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}
.footer-col--social .footer-widget a::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background-color: hsl(0, 0%, 0%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	/* Default glyph (generic link) if the href doesn't match a known
	   social platform below. */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12a5 5 0 0 1 5-5h3v2h-3a3 3 0 0 0 0 6h3v2h-3a5 5 0 0 1-5-5zm7-1h6v2h-6v-2zm4-4h3a5 5 0 0 1 0 10h-3v-2h3a3 3 0 0 0 0-6h-3V7z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12a5 5 0 0 1 5-5h3v2h-3a3 3 0 0 0 0 6h3v2h-3a5 5 0 0 1-5-5zm7-1h6v2h-6v-2zm4-4h3a5 5 0 0 1 0 10h-3v-2h3a3 3 0 0 0 0-6h-3V7z'/%3E%3C/svg%3E");
}
.footer-col--social .footer-widget a[href*="facebook.com"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12.06C22 6.51 17.52 2 12 2S2 6.51 2 12.06c0 5 3.66 9.13 8.44 9.94v-7.03H7.9v-2.91h2.54V9.85c0-2.51 1.49-3.89 3.77-3.89 1.09 0 2.23.2 2.23.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.78l-.44 2.91h-2.34v7.03C18.34 21.19 22 17.06 22 12.06z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12.06C22 6.51 17.52 2 12 2S2 6.51 2 12.06c0 5 3.66 9.13 8.44 9.94v-7.03H7.9v-2.91h2.54V9.85c0-2.51 1.49-3.89 3.77-3.89 1.09 0 2.23.2 2.23.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.78l-.44 2.91h-2.34v7.03C18.34 21.19 22 17.06 22 12.06z'/%3E%3C/svg%3E");
}
.footer-col--social .footer-widget a[href*="instagram.com"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c2.7 0 3 0 4.1.06 1.1.05 1.8.2 2.4.45.6.24 1.1.55 1.6 1.05.5.5.8 1 1.05 1.6.24.6.4 1.3.45 2.4.05 1.1.06 1.4.06 4.1s0 3-.06 4.1c-.05 1.1-.2 1.8-.45 2.4-.24.6-.55 1.1-1.05 1.6-.5.5-1 .8-1.6 1.05-.6.24-1.3.4-2.4.45-1.1.05-1.4.06-4.1.06s-3 0-4.1-.06c-1.1-.05-1.8-.2-2.4-.45-.6-.24-1.1-.55-1.6-1.05-.5-.5-.8-1-1.05-1.6-.24-.6-.4-1.3-.45-2.4C2.2 15 2.2 14.7 2.2 12s0-3 .06-4.1c.05-1.1.2-1.8.45-2.4.24-.6.55-1.1 1.05-1.6.5-.5 1-.8 1.6-1.05.6-.24 1.3-.4 2.4-.45C9 2.2 9.3 2.2 12 2.2zm0 1.8c-2.65 0-2.96 0-4 .06-.96.04-1.48.2-1.83.33-.46.18-.79.4-1.13.74-.34.34-.56.67-.74 1.13-.13.35-.29.87-.33 1.83-.05 1.04-.06 1.35-.06 4s0 2.96.06 4c.04.96.2 1.48.33 1.83.18.46.4.79.74 1.13.34.34.67.56 1.13.74.35.13.87.29 1.83.33 1.04.05 1.35.06 4 .06s2.96 0 4-.06c.96-.04 1.48-.2 1.83-.33.46-.18.79-.4 1.13-.74.34-.34.56-.67.74-1.13.13-.35.29-.87.33-1.83.05-1.04.06-1.35.06-4s0-2.96-.06-4c-.04-.96-.2-1.48-.33-1.83-.18-.46-.4-.79-.74-1.13-.34-.34-.67-.56-1.13-.74-.35-.13-.87-.29-1.83-.33-1.04-.05-1.35-.06-4-.06zm0 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm0 1.8a2.2 2.2 0 1 0 0 4.4 2.2 2.2 0 0 0 0-4.4zm4.9-2a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c2.7 0 3 0 4.1.06 1.1.05 1.8.2 2.4.45.6.24 1.1.55 1.6 1.05.5.5.8 1 1.05 1.6.24.6.4 1.3.45 2.4.05 1.1.06 1.4.06 4.1s0 3-.06 4.1c-.05 1.1-.2 1.8-.45 2.4-.24.6-.55 1.1-1.05 1.6-.5.5-1 .8-1.6 1.05-.6.24-1.3.4-2.4.45-1.1.05-1.4.06-4.1.06s-3 0-4.1-.06c-1.1-.05-1.8-.2-2.4-.45-.6-.24-1.1-.55-1.6-1.05-.5-.5-.8-1-1.05-1.6-.24-.6-.4-1.3-.45-2.4C2.2 15 2.2 14.7 2.2 12s0-3 .06-4.1c.05-1.1.2-1.8.45-2.4.24-.6.55-1.1 1.05-1.6.5-.5 1-.8 1.6-1.05.6-.24 1.3-.4 2.4-.45C9 2.2 9.3 2.2 12 2.2zm0 1.8c-2.65 0-2.96 0-4 .06-.96.04-1.48.2-1.83.33-.46.18-.79.4-1.13.74-.34.34-.56.67-.74 1.13-.13.35-.29.87-.33 1.83-.05 1.04-.06 1.35-.06 4s0 2.96.06 4c.04.96.2 1.48.33 1.83.18.46.4.79.74 1.13.34.34.67.56 1.13.74.35.13.87.29 1.83.33 1.04.05 1.35.06 4 .06s2.96 0 4-.06c.96-.04 1.48-.2 1.83-.33.46-.18.79-.4 1.13-.74.34-.34.56-.67.74-1.13.13-.35.29-.87.33-1.83.05-1.04.06-1.35.06-4s0-2.96-.06-4c-.04-.96-.2-1.48-.33-1.83-.18-.46-.4-.79-.74-1.13-.34-.34-.67-.56-1.13-.74-.35-.13-.87-.29-1.83-.33-1.04-.05-1.35-.06-4-.06zm0 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm0 1.8a2.2 2.2 0 1 0 0 4.4 2.2 2.2 0 0 0 0-4.4zm4.9-2a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/%3E%3C/svg%3E");
}
.footer-col--social .footer-widget a[href*="linkedin.com"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.61 0 4.28 2.38 4.28 5.47v6.27zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.11 20.45H3.56V9h3.55v11.45z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.61 0 4.28 2.38 4.28 5.47v6.27zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.11 20.45H3.56V9h3.55v11.45z'/%3E%3C/svg%3E");
}
.footer-col--social .footer-widget a[href*="x.com"]::before,
.footer-col--social .footer-widget a[href*="twitter.com"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.24 2H21l-6.55 7.49L22.2 22h-6.4l-5-6.53L4.9 22H2.13l7-8L1.5 2h6.56l4.53 5.98L18.24 2zM17.1 20.13h1.77L7.02 3.78H5.12L17.1 20.13z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.24 2H21l-6.55 7.49L22.2 22h-6.4l-5-6.53L4.9 22H2.13l7-8L1.5 2h6.56l4.53 5.98L18.24 2zM17.1 20.13h1.77L7.02 3.78H5.12L17.1 20.13z'/%3E%3C/svg%3E");
}

.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);
}

/* Position/size/padding/hover ported 1:1 from the reference .whatsapp
   (footer.css): fixed bottom-right pill, white default state that swaps
   to WhatsApp green on hover. Colors mapped onto our tokens (--color-white
   / --color-whatsapp / --color-whatsapp-ink instead of the reference's
   literal white/black/--clr-whatsapp-green). */
.floating-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 998;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	background: var(--color-white);
	color: var(--color-whatsapp-ink);
	font-weight: 500;
	font-size: 14px;
	padding: 0.375rem 0.75rem;
	border-radius: 40px;
	box-shadow: var(--shadow-lg);
	transition: background ease-in-out 200ms, color ease-in-out 200ms, transform var(--transition-fast), box-shadow var(--transition-fast);
}
/* Real WhatsApp glyph (inline SVG in footer.php, currentColor-filled)
   instead of the previous "\1F4AC" speech-bubble emoji placeholder —
   renders identically across platforms/fonts instead of depending on
   the visitor's emoji set. */
.floating-whatsapp__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.floating-whatsapp:hover,
.floating-whatsapp:focus-visible {
	transform: translateY(-2px);
	background: var(--color-whatsapp);
	color: var(--color-white);
	box-shadow: 0 16px 34px color-mix(in srgb, var(--color-whatsapp) 35%, transparent);
}
/* Reference hides its floating button while the mobile menu overlay is
   open (body.no--scroll) — this theme's equivalent state class is
   body.nav-open (see main.js). */
body.nav-open .floating-whatsapp {
	display: none;
}

/* 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);
	line-height: 1;
	padding: 12px 26px;
	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;
	height: 100%;
}
.work-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	/* Most Work-grid images are tall, portrait website screenshots —
	   center-cropping (the object-position default) cut into the most
	   recognizable part (the top of the page). Anchoring the crop to the
	   top keeps that visible instead. */
	object-position: top;
}
/* Media wrapper — only present on bento Work-grid cards (work-grid.php);
   related-strip.php / search.php / archive.php still put the <img> as a
   direct child of the card and are untouched by this rule since it only
   ever *contains* an img, never targets one. */
.work-card__media {
	position: relative;
}
/* Corner "kicker" badge (WORK / PRODUCT / CLIENT / WHAT WE DO) overlaid on
   the card image — values (position, size, blur, radius) ported 1:1 from
   the reference .card__type (header.css); only the color pair is mapped
   onto our token system (translucent white chip / dark ink text instead
   of the reference's literal white/black) so it still reads correctly on
   both light and dark card imagery. */
.work-card__badge {
	position: absolute;
	top: 10px;
	left: 25px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 0.67rem;
	color: var(--color-bg);
	background-color: color-mix(in srgb, var(--color-white) 40%, transparent);
	backdrop-filter: blur(10px);
	padding: 5px 10px;
	border-radius: 12px;
	pointer-events: none;
}
/* The mixed Work-grid query (see work-grid.php) includes the "client"
   post type alongside case studies/products/services, and a client's
   featured image is a brand *logo* (a wordmark, mostly transparent
   padding) rather than a photo. Force-cropping a wide, mostly-empty
   logo into the same 4:3 cover box as a photo zooms in on whatever
   sliver of it fills the frame — which is the "logo doesn't fit"
   problem. Logos get their own treatment: shown whole via
   object-fit: contain, on a flat surface with breathing room, instead
   of cropped/zoomed. */
.work-card[data-post-type="client"] img,
.work-card.client img {
	object-fit: contain;
	object-position: center;
	background: var(--color-surface-alt);
	padding: var(--space-6);
}
.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;
	object-position: top;
}
/* Clients archive: post_class() puts the bare post-type slug ("client")
   on the <article>, so this only applies there — same reasoning as
   .work-card[data-post-type="client"] img above, a logo shouldn't be
   cover-cropped like a photo. */
.archive-card.client img {
	object-fit: contain;
	object-position: center;
	background: var(--color-surface-alt);
	padding: var(--space-6);
}
.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 {
	/* Vertical spacing for the hero is handled entirely by .intro /
	   .intro-center below (ported from the reference site), so the
	   theme-wide generic ".section { padding-block: var(--space-9) }"
	   rule is cancelled out here — otherwise it stacks on top of the
	   .intro padding and doubles the gap under the header. */
	padding-block: 0;

	/* --- tokens, mapped onto the theme's shared design system (assets/css/main.css
	   :root) rather than the reference site's own hardcoded literals, so the
	   hero's teal accent and slate surface can never drift out of sync with
	   the rest of the site (header CTA, cards, tags, etc.) or with a
	   Customizer color change. --clr-accent in particular used to be a
	   hardcoded hsl(181,61%,50%) teal that fought with the site's blue
	   --color-accent everywhere else — that's the "two competing accent
	   colors" gap; mapping it here is the fix. */
	--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: var(--color-accent);
	--black: hsl(0, 0%, 0%);
	--white: hsl(0, 0%, 100%);
	--clr-slate: var(--color-surface-alt);
	--clr-text: var(--color-text-muted);
	--text-80: var(--color-text);
	--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 on .hero — also applied generically so other
   black sections (e.g. .cta-band) can reuse the same dot texture. */
.hero.dotted-bg,
.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(2.5rem, 1.5rem + 4vw, 5rem);
	--intro-block-end-padding: 4rem;
	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;
	/* line-height:1 matters here as much as the padding — .btn never set
	   its own line-height, so it inherited body's 1.65, which alone added
	   ~10-16px of extra box height on top of the padding below and was
	   the main reason these buttons read as too tall. */
	line-height: 1;
	padding: 0.75rem clamp(1.125rem, 0.98rem + 0.577vw, 1.5rem);
	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;
}
/* btn-primary uses --color-accent-on-fill (not --clr-accent directly) so
   white-ish text drawn on top of it — see .btn-secondary below — stays
   WCAG-safe even though --clr-accent itself is tuned to also work as
   plain text color elsewhere. */
.hero .btn.btn-primary {
	background: var(--color-accent-on-fill);
	color: var(--white);
}
.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) {
	/* Primary and secondary now get two distinct, purposeful hover
	   treatments instead of both flattening to the same white fill:
	   primary lightens along the accent scale (stays "the accent
	   button"), secondary tints toward the accent instead of turning
	   fully white (stays visually secondary). */
	.hero .btn.btn-primary:hover,
	.hero .btn.btn-primary:focus-visible {
		background: var(--color-accent-hover);
		color: var(--white);
	}
	.hero .btn.btn-secondary:hover,
	.hero .btn.btn-secondary:focus-visible {
		background: var(--color-accent-soft);
		color: var(--white);
	}
	.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: clamp(0.75rem, 0.65rem + 0.4vw, 0.875rem);
	line-height: 1.3;
	max-width: 32ch;
	margin: 0 auto;
}
/* Client logo row — static (no marquee/scroll), sits directly under the
   trust label inside the hero's own black background so there is no
   colour seam or extra section gap, matching the reference screenshot.
   Spacing above it comes only from the parent .intro grid's own `gap`
   (like every other element in the hero) — no extra margin-top on top
   of that, which used to double the gap here and push the logos
   noticeably further down than the reference design. */
.hero__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 1.1rem + 2vw, 3.5rem);
}
.hero__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	opacity: 0.6;
	filter: grayscale(1) brightness(1.6);
}
.hero__logo img {
	max-height: 100%;
	width: auto;
}
.hero__logo span {
	color: var(--text-80);
	font-weight: 600;
	white-space: nowrap;
}
/* .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);
}

/* Bento variant (work-grid.php only — related-strip.php/search.php/
   archive.php keep the plain uniform grid above untouched).
   Ported from the reference floated masonry grid (.grid / .grid__card /
   .card--wNN in header.css): variable-width floated cards instead of a
   CSS-grid layout, so proportions match the reference 1:1. Property
   values (gap, bottom margin, radii, font sizes, breakpoints) are the
   reference's own; only card chrome (border/bg/shadow) is stripped back
   to plain image+text per the reference, and the width scale is mapped
   from the reference's 8 card--wNN modifiers onto this theme's existing
   4-option "Work Grid Display" meta (standard/wide/tall/large).
   Filtering (main.js) just toggles display:none per card, which the
   float layout handles natively — no JS masonry engine required. */
.work-grid__items--bento {
	--work-card-width: 25%;
	--work-card-gap: 15px;
	display: block;
	margin-inline: calc(var(--work-card-gap) * -1);
}
.work-grid__items--bento::after {
	content: "";
	display: block;
	clear: both;
}
.work-grid__items--bento .work-card {
	float: left;
	width: var(--work-card-width);
	margin-block-end: 60px;
	padding-inline: var(--work-card-gap);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transition: none;
}
.work-grid__items--bento .work-card:hover {
	transform: none;
	box-shadow: none;
	border-color: transparent;
}
.work-grid__items--bento .work-card--wide,
.work-grid__items--bento .work-card--large {
	--work-card-width: 50%;
}
.work-grid__items--bento .work-card a {
	display: grid;
	gap: 15px;
	height: auto;
}
.work-grid__items--bento .work-card__media {
	position: relative;
}
.work-grid__items--bento .work-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: top;
	border-radius: 6px;
}
/* Reference has no aspect-ratio at all here (it relies on a JS masonry
   engine — Masonry.js — to repack variable natural image heights, which
   is out of scope for this port); --tall/--large use a taller ratio
   instead so the floated layout stays gap-free without that JS engine. */
.work-grid__items--bento .work-card--tall .work-card__media img,
.work-grid__items--bento .work-card--large .work-card__media img {
	aspect-ratio: 3 / 4;
}
.work-grid__items--bento .work-card[data-post-type="client"] .work-card__media img {
	aspect-ratio: auto;
	object-fit: contain;
	object-position: center;
	background: var(--color-surface-alt);
	padding: var(--space-6);
}
.work-grid__items--bento .work-card__body {
	display: grid;
	gap: clamp(6px, 2vw, 10px);
	padding: 0;
}
.work-grid__items--bento .work-card__tags {
	column-gap: clamp(10px, 2vw, 15px);
	row-gap: 3px;
	margin-bottom: 0;
}
.work-grid__items--bento .work-card__tag {
	font-size: 13px;
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-text-muted);
	background: transparent;
	padding: 0;
	border-radius: 0;
	margin-bottom: 0;
}
.work-grid__items--bento .work-card__title {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	color: var(--color-text);
}
.work-grid__items--bento .work-card[data-post-type="service"] .work-card__title {
	font-size: 24px;
}
.work-grid__items--bento .work-card[data-post-type="product"] .work-card__title {
	font-size: 30px;
}
.work-grid__items--bento .work-card[data-post-type="client"] .work-card__title {
	font-size: 18px;
}

/* Work filter bar (Phase 3 — All / Case Studies / Products / Services) */
.work-filter {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}
.work-filter__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	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-3) 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 — matches the hero's visual language (black bg, dotted
   texture, accent highlight) instead of a bordered card, per the
   reference design. Now pulls its accent from the same --color-accent
   design-system tokens as everything else (was previously a second,
   independent hardcoded teal literal, hsl(181,61%,50%), that could
   drift out of sync with the hero/header/cards). */
.cta-band {
	background: hsl(0, 0%, 0%);
	position: relative;
	overflow: hidden;
	text-align: center;
}
.cta-band__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
}
.cta-band__title {
	display: grid;
	gap: 0.1em;
	margin-bottom: var(--space-4);
}
.cta-band__title-line {
	display: block;
}
.cta-band__title-line--accent {
	color: var(--color-accent);
}
.cta-band__title-line--white {
	color: hsl(0, 0%, 100%);
}
.cta-band__text {
	max-width: 560px;
	margin-inline: auto;
	margin-bottom: var(--space-6);
	color: var(--color-text-muted);
}
.cta-band__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 0.75rem clamp(1.125rem, 0.98rem + 0.577vw, 1.5rem);
	background: var(--color-accent-on-fill);
	color: var(--color-white);
	border-radius: 0.625rem;
	font-size: clamp(0.875rem, 1vw, 1rem);
	font-weight: 500;
	user-select: none;
	transition: background ease-in-out 200ms, color ease-in-out 200ms, transform ease-in-out 150ms;
}
.cta-band__btn:hover,
.cta-band__btn:focus-visible {
	background: var(--color-accent-hover);
	color: var(--color-white);
	transform: translateY(-2px);
}
/* Decorative dotted "globe" — an abstract halftone dome rather than a
   literal traced world map, so it stays original artwork while reading
   the same way visually: a glowing dot-grid horizon anchored under the
   copy, fading out at its edge. */
.cta-band__globe {
	position: absolute;
	left: 50%;
	bottom: -38%;
	transform: translateX(-50%);
	width: min(1400px, 150vw);
	aspect-ratio: 2 / 1;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	background-image: radial-gradient(color-mix(in srgb, var(--color-accent) 60%, transparent) 1px, transparent 1px);
	background-size: 16px 16px;
	-webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
	pointer-events: none;
	z-index: 0;
}

/* 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);
	}
	/* Reference breakpoints (900px width switch, 1500px title/tag downscale)
	   mapped onto this theme's existing 1023px tablet breakpoint. */
	.work-grid__items--bento {
		--work-card-width: 50%;
	}
	.work-grid__items--bento .work-card__tag {
		font-size: 12px;
	}
	.work-grid__items--bento .work-card__title {
		font-size: 17px;
	}
	.work-grid__items--bento .work-card[data-post-type="service"] .work-card__title {
		font-size: 20px;
	}
	.work-grid__items--bento .work-card[data-post-type="product"] .work-card__title {
		font-size: 22px;
	}
	.work-grid__items--bento .work-card[data-post-type="client"] .work-card__title {
		font-size: 16px;
	}
	.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;
	}
	.mobile-nav__cta {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: auto;
		line-height: 1;
		padding: 0.875rem var(--space-5);
		background: var(--color-accent-on-fill);
		color: var(--color-white);
		border-radius: var(--radius-md);
		font-weight: 600;
		text-align: center;
		transition: background var(--transition-fast);
	}
	.mobile-nav__cta:hover,
	.mobile-nav__cta:focus-visible {
		background: var(--color-accent-hover);
	}
}

@media (max-width: 767px) {
	:root {
		--space-9: 56px;
		--space-10: 72px;
	}
	.hero .btn-group {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
	}
	.hero .btn-group .btn {
		width: auto;
		flex: 0 1 auto;
		padding-inline: 0.875rem;
		font-size: 0.8125rem;
		white-space: nowrap;
	}
	/* Tighten the hero's grid gap on mobile — the desktop clamp() still
	   leaves noticeable air under the (now 2-line-wrapping) trust label,
	   which reads as the client logo row being pushed far down the page. */
	.hero .intro.intro-center {
		gap: 0.75rem;
	}
	.hero__trust-label {
		font-size: 0.75rem;
	}
	.hero__logos {
		gap: 1.25rem;
	}
	.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%;
	}
	/* Reference's ≤640px tightening, mapped onto this theme's 767px
	   breakpoint — cards stay 2-up (--work-card-width carries over
	   unchanged from the 1023px breakpoint above, matching the reference's
	   own mobile layout), just with smaller gutters/type and no badge. */
	.work-grid__items--bento {
		--work-card-gap: 5px;
	}
	.work-grid__items--bento .work-card {
		margin-block-end: 40px;
	}
	.work-card__badge {
		display: none;
	}
	.work-grid__items--bento .work-card__tag {
		font-size: 11px;
	}
	.work-grid__items--bento .work-card__title {
		font-size: 14px;
	}
	.work-grid__items--bento .work-card[data-post-type="service"] .work-card__title {
		font-size: 16px;
	}
	.work-grid__items--bento .work-card[data-post-type="product"] .work-card__title {
		font-size: 18px;
	}
	.work-grid__items--bento .work-card[data-post-type="client"] .work-card__title {
		font-size: 14px;
	}
	.related-strip__arrow {
		display: none;
	}
	.site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-6);
	}
	.footer-col--social {
		grid-column: 1 / -1;
	}
	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
	.form-row {
		grid-template-columns: 1fr;
	}
	.floating-whatsapp__label {
		display: none;
	}
	.floating-whatsapp {
		width: 52px;
		height: 52px;
		padding: 0;
		justify-content: center;
	}
	.cta-band__inner {
		padding: var(--space-6) var(--space-5);
	}
}

/* Extra-narrow phones (iPhone SE / small Android, ~320-380px): the two
   hero CTA buttons still need to share one row, so shrink them a bit
   further rather than letting them wrap or overflow. */
@media (max-width: 380px) {
	.hero .btn-group {
		gap: 0.375rem;
	}
	.hero .btn-group .btn {
		padding-inline: 0.625rem;
		font-size: 0.6875rem;
	}
}

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