/* =========================================================
   Ideas Smart — main stylesheet
   1.  Tokens
   2.  Base & typography
   3.  Utilities & components
   4.  Header / navigation / drawer
   5.  Home sections
   6.  Footer & floating actions
   7.  Inner pages
   8.  Responsive
   ========================================================= */

/* ---------------------------------------------------------
   1. Tokens
   --------------------------------------------------------- */
:root {
	/* Brand teal, taken from the logo. --brand is the identity colour and is
	   used for surfaces, icons and borders. --brand-ink is a darkened tint used
	   only for small text on light backgrounds, where #0097b2 sits at 3.5:1
	   against white and would fail WCAG AA. */
	--brand: #0097b2;
	--brand-ink: #00728a;
	--brand-600: #00829b;
	--brand-700: #00637a;
	--brand-050: #e9f8fc;
	--brand-100: #c2e9f2;
	--sky: #35c9e0;

	--ink: #0f172a;
	--ink-soft: #1e293b;
	--body: #5b6b84;
	--muted: #8496ae;

	--bg: #ffffff;
	--soft: #f2f8fa;
	--line: #dfe9ee;
	--line-soft: #edf4f6;

	--white: #ffffff;
	--star: #f59e0b;
	--success: #16a34a;

	--font-head: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--radius-sm: 8px;
	--radius: 14px;
	--radius-lg: 22px;
	--radius-xl: 30px;

	--shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
	--shadow-sm: 0 4px 14px rgba(15, 23, 42, .06);
	--shadow: 0 12px 32px rgba(15, 23, 42, .09);
	--shadow-lg: 0 26px 60px rgba(0, 151, 178, .16);

	--container: 1240px;
	--gutter: 22px;
	--section-y: 52px;

	/* The header is fixed and so out of flow. --header-h is its resting height;
	   heroes pad against it and pages without a hero use it as a top spacer.
	   Overridden alongside the header in section 8. */
	--header-h: 84px;

	--t-fast: .2s cubic-bezier(.4, 0, .2, 1);
	--t: .35s cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------
   2. Base & typography
   --------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--body);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	color: var(--ink);
	font-family: var(--font-head);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.02em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-ink); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--brand-600); }

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }

button { font: inherit; cursor: pointer; }

:focus-visible {
	outline: 3px solid var(--sky);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px; left: 12px;
	z-index: 9999;
	width: auto; height: auto;
	clip: auto;
	padding: 12px 20px;
	background: var(--brand);
	color: #fff;
	border-radius: var(--radius-sm);
	font-weight: 600;
}

/* ---------------------------------------------------------
   3. Utilities & components
   --------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.container--narrow { max-width: 880px; }

.section { padding: var(--section-y) 0; }
.section--soft { background: var(--soft); }

.section-head {
	max-width: 760px;
	margin: 0 auto 29px;
	text-align: center;
}

.section-title {
	font-size: clamp(1.9rem, 3.4vw, 2.85rem);
	margin-bottom: .5em;
}

.section-title--left { text-align: left; }

.section-text {
	font-size: 1.06rem;
	color: var(--body);
	margin: 0;
}

.section-text--left { text-align: left; }

.text-gradient {
	background: linear-gradient(100deg, var(--brand) 10%, var(--sky) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Eyebrow label */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 18px;
	padding: 7px 16px 7px 12px;
	background: var(--brand-050);
	border: 1px solid var(--brand-100);
	border-radius: 100px;
	color: var(--brand-ink);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.eyebrow--center {
	display: flex;
	justify-content: center;
	width: fit-content;
	margin-inline: auto;
}

.eyebrow--light {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .26);
	color: #fff;
	backdrop-filter: blur(6px);
}

.eyebrow__line { display: none; }

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 28px;
	border: 1.5px solid transparent;
	border-radius: 100px;
	font-family: var(--font-head);
	font-size: .95rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.btn .icon { transition: transform var(--t-fast); }
.btn:hover .icon { transform: translateX(4px); }

.btn--primary {
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
	color: #fff;
	box-shadow: 0 10px 26px rgba(0, 151, 178, .26);
}

.btn--primary:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(0, 151, 178, .34);
}

.btn--outline {
	background: transparent;
	border-color: var(--line);
	color: var(--ink);
}

.btn--outline:hover {
	border-color: var(--brand);
	background: var(--brand-050);
	color: var(--brand-ink);
	transform: translateY(-2px);
}

.btn--ghost {
	background: var(--white);
	border-color: var(--line);
	color: var(--ink);
	box-shadow: var(--shadow-xs);
}

.btn--ghost:hover {
	border-color: var(--brand);
	color: var(--brand-ink);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

.btn--lg { padding: 17px 34px; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

/* Arrow link */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-head);
	font-size: .92rem;
	font-weight: 700;
	color: var(--brand-ink);
}

.link-arrow .icon { transition: transform var(--t-fast); }
.link-arrow:hover .icon { transform: translateX(5px); }

/* Stars */
.stars { display: inline-flex; gap: 2px; color: var(--star); }

/* Avatar */
.avatar {
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	flex: 0 0 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--brand) 0%, var(--sky) 100%);
	color: #fff;
	font-family: var(--font-head);
	font-size: .9rem;
	font-weight: 800;
	letter-spacing: .04em;
}

/* Social icons */
.social {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social a {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	color: #fff;
	transition: background var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}

.social a:hover {
	background: var(--brand-600);
	border-color: var(--brand-600);
	transform: translateY(-3px);
}


/* Pulse dot */
.pulse-dot {
	position: relative;
	width: 10px; height: 10px;
	flex: 0 0 10px;
	border-radius: 50%;
	background: var(--success);
}

.pulse-dot::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid var(--success);
	opacity: 0;
	animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
	0%   { transform: scale(.6); opacity: .9; }
	100% { transform: scale(1.35); opacity: 0; }
}

/* Scroll reveal */
.js .reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}

.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal--delay { transition-delay: .14s; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------
   4. Header / navigation / drawer
   --------------------------------------------------------- */
/* Fixed, not sticky: the bar floats over the page hero rather than sitting
   above it, which is what lets it be transparent at rest. */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: #fff;
	transition: background var(--t), box-shadow var(--t);
}

.site-header.is-stuck { box-shadow: 0 6px 26px rgba(15, 23, 42, .09); }

/* Nothing floats over a page that opens without a hero (the 404), so there the
   content is pushed clear of the bar instead. */
body:not(.has-overlay-header) .site-content { padding-top: var(--header-h); }

/* Main header row */
.header-main { border-bottom: 1px solid var(--line-soft); }

.header-main__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	min-height: 84px;
	transition: min-height var(--t);
}

.site-header.is-stuck .header-main__inner { min-height: 72px; }

/* Brand lockup */
.site-branding { flex: 0 0 auto; }

.brand,
.footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.custom-logo-link img { max-height: 56px; width: auto; }

/* The supplied lockup already carries the company name and the "Monitoring
   Devices" line, so the image replaces the mark + text pair entirely. */
.brand--image { gap: 0; }

.brand__logo {
	display: block;
	/* Sized by height alone: the lockup is trimmed to its ink, so auto width
	   holds its natural 2.32:1 and never stretches it. */
	height: 66px;
	width: auto;
}

/* Shrink with the header when it sticks, so the smaller bar is not crowded. */
.site-header.is-stuck .brand__logo { height: 58px; }

/* Primary nav */
.main-navigation { margin-left: auto; }

.nav-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-menu > li { position: relative; }

.nav-menu > li > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 11px 15px;
	border-radius: 100px;
	color: var(--ink-soft);
	font-family: var(--font-head);
	font-size: .96rem;
	font-weight: 700;
	transition: color var(--t-fast);
}

/* Hover and the current page are a rule sweeping out under the label, and
   nothing else — no fill behind it, and no lift, so the rule stays put. */
.nav-menu > li > a::after {
	content: "";
	position: absolute;
	left: 15px; right: 15px; bottom: 6px;
	height: 2px;
	border-radius: 2px;
	background: var(--brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t-fast);
}

.nav-menu > li > a:hover,
.nav-menu > li > a:focus-visible,
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current_page_item > a { color: var(--brand-ink); }

.nav-menu > li > a:hover::after,
.nav-menu > li > a:focus-visible::after,
.nav-menu > li.current-menu-item > a::after,
.nav-menu > li.current_page_item > a::after { transform: scaleX(1); }

.nav-menu .submenu-toggle {
	display: inline-grid;
	place-items: center;
	padding: 4px;
	border: 0;
	background: none;
	color: inherit;
}

.main-navigation .has-dropdown > .submenu-toggle {
	position: absolute;
	top: 50%; right: 4px;
	transform: translateY(-50%);
	color: var(--body);
	pointer-events: none;
}

.main-navigation .has-dropdown > a { padding-right: 30px; }

/* Dropdowns */
.main-navigation .sub-menu {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	z-index: 20;
	min-width: 236px;
	margin: 0;
	padding: 10px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}

.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-navigation .sub-menu a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	color: var(--body);
	font-size: .92rem;
	font-weight: 600;
}

.main-navigation .sub-menu a:hover {
	background: var(--brand-050);
	color: var(--brand-ink);
}

/* Header actions */
.header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}

.header-call {
	display: flex;
	align-items: center;
	gap: 11px;
	padding-left: 18px;
	border-left: 1px solid var(--line);
}

.header-call__icon {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--brand-050);
	color: var(--brand);
	transition: background var(--t-fast), color var(--t-fast);
}

.header-call:hover .header-call__icon { background: var(--brand); color: #fff; }

.header-call__text { display: flex; flex-direction: column; line-height: 1.25; }
.header-call__text small { font-size: .72rem; color: var(--muted); }
.header-call__text strong { font-family: var(--font-head); font-size: .95rem; color: var(--ink); }

/* Hamburger */
.nav-toggle {
	display: none;
	place-items: center;
	width: 46px; height: 46px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	color: var(--ink);
}

.nav-toggle__bars { display: grid; gap: 5px; width: 20px; }

.nav-toggle__bars i {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--t-fast), opacity var(--t-fast);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav dropdown
   A panel under the bar, not a side drawer. It has no fill of its own — the
   blur is what lifts it off the page — so its ink has to follow the header's
   two themes: light while the bar is transparent over a hero, dark once the
   bar has gone solid. body.is-header-stuck is set alongside the header's own
   .is-stuck in main.js, since the panel is not inside the header. */
.drawer-backdrop {
	position: fixed;
	/* Starts below the bar, so the toggle stays tappable and the same button
	   closes the panel again. */
	top: var(--header-h);
	left: 0; right: 0; bottom: 0;
	z-index: 190;
	/* Invisible: it exists only to catch a tap outside the panel. Dimming the
	   page would undo the transparency the panel is for. */
	background: transparent;
}

.drawer {
	position: fixed;
	top: var(--header-h);
	left: 0; right: 0;
	z-index: 200;
	max-height: calc(100svh - var(--header-h));
	padding: 2px 0 14px;
	background: transparent;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-top: 1px solid rgba(255, 255, 255, .14);
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity var(--t), transform var(--t);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.drawer.is-open { opacity: 1; transform: none; }

/* An author `display` declaration beats the UA rule for [hidden], so the closed
   panel would stay focusable and readable by screen readers. Re-assert it. */
.drawer[hidden],
.drawer-backdrop[hidden] { display: none; }

.drawer__nav { padding: 0 var(--gutter); }

.nav-menu--drawer,
.drawer__nav .nav-menu {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.drawer__nav .nav-menu > li { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.drawer__nav .nav-menu > li:last-child { border-bottom: 0; }

.drawer__nav .nav-menu a {
	display: block;
	padding: 15px 46px 15px 2px;
	color: #fff;
	font-family: var(--font-head);
	font-size: 1.02rem;
	font-weight: 700;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

/* The drawer reuses .nav-menu but is a plain stacked list, with no rule. */
.drawer__nav .nav-menu a::after { display: none; }

.drawer__nav .nav-menu > li.current-menu-item > a,
.drawer__nav .nav-menu > li.current_page_item > a { color: var(--sky); }

.drawer__nav .submenu-toggle {
	position: absolute;
	top: 9px; right: 0;
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 10px;
	background: transparent;
	color: #fff;
	transition: transform var(--t-fast), background var(--t-fast);
}

.drawer__nav .submenu-toggle[aria-expanded="true"] {
	transform: rotate(180deg);
	background: rgba(255, 255, 255, .16);
}

.drawer__nav .sub-menu {
	display: none;
	margin: 0 0 10px;
	padding: 4px 0 4px 14px;
	border-left: 2px solid rgba(255, 255, 255, .25);
	list-style: none;
}

.drawer__nav .sub-menu.is-open { display: block; }
.drawer__nav .sub-menu a { padding: 11px 10px; font-size: .94rem; font-weight: 600; color: rgba(255, 255, 255, .82); }

/* No frame: the left edge lines up with the menu items above, so it reads as
   the last row of the list rather than a button dropped under it. */
.drawer__call {
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 4px var(--gutter) 0;
	padding: 15px 2px 2px;
	color: #fff;
}

/* Green, in both themes — it is the dial action, not a brand accent. */
.drawer__call-icon {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	flex: 0 0 42px;
	border-radius: 50%;
	background: var(--success);
	color: #fff;
	transition: background var(--t-fast), transform var(--t-fast);
}

.drawer__call:hover { color: #fff; }
.drawer__call:hover .drawer__call-icon { background: #15803d; transform: translateY(-2px); }

.drawer__call-text { display: flex; flex-direction: column; line-height: 1.3; }
.drawer__call-text small { font-size: .74rem; color: rgba(255, 255, 255, .7); }
.drawer__call-text strong { font-family: var(--font-head); font-size: 1.04rem; }

/* Solid-bar theme: the panel is over page content rather than a hero, so it
   takes a light ground and dark ink. Same condition the header itself uses. */
.is-header-stuck .drawer,
body:not(.has-overlay-header) .drawer {
	background: rgba(255, 255, 255, .82);
	border-top-color: var(--line);
}

.is-header-stuck .drawer__nav .nav-menu > li,
body:not(.has-overlay-header) .drawer__nav .nav-menu > li { border-bottom-color: var(--line-soft); }

.is-header-stuck .drawer__nav .nav-menu a,
body:not(.has-overlay-header) .drawer__nav .nav-menu a { color: var(--ink); text-shadow: none; }

.is-header-stuck .drawer__nav .nav-menu > li.current-menu-item > a,
.is-header-stuck .drawer__nav .nav-menu > li.current_page_item > a,
body:not(.has-overlay-header) .drawer__nav .nav-menu > li.current-menu-item > a,
body:not(.has-overlay-header) .drawer__nav .nav-menu > li.current_page_item > a { color: var(--brand-ink); }

.is-header-stuck .drawer__nav .submenu-toggle,
body:not(.has-overlay-header) .drawer__nav .submenu-toggle { border-color: var(--line); color: var(--body); }

.is-header-stuck .drawer__nav .sub-menu,
body:not(.has-overlay-header) .drawer__nav .sub-menu { border-left-color: var(--brand-100); }

.is-header-stuck .drawer__nav .sub-menu a,
body:not(.has-overlay-header) .drawer__nav .sub-menu a { color: var(--body); }

/* Only the type inverts — the dial disc stays green on either ground. */
.is-header-stuck .drawer__call,
body:not(.has-overlay-header) .drawer__call { color: var(--ink); }

.is-header-stuck .drawer__call:hover,
body:not(.has-overlay-header) .drawer__call:hover { color: var(--ink); }

.is-header-stuck .drawer__call-text small,
body:not(.has-overlay-header) .drawer__call-text small { color: var(--muted); }

/* 4b. Overlay theme — the bar floating over a dark hero
   Every template but the 404 opens with a dark hero, and those pages carry
   .has-overlay-header on <body> (ideas_smart_body_classes). Until main.js
   sets .is-stuck the bar is transparent and reversed out in white; from
   .is-stuck on, the solid white header above takes back over unchanged. */
.has-overlay-header .site-header:not(.is-stuck) {
	background: transparent;
	box-shadow: none;
}

.has-overlay-header .site-header:not(.is-stuck) .header-main {
	border-bottom-color: rgba(255, 255, 255, .16);
}

/* The lockup sits straight on the hero — no plate. Its own drop shadow is
   what holds the teal wordmark off the darker stills behind it. */
.has-overlay-header .site-header:not(.is-stuck) .brand__logo {
	/* Two tight shadows, not one soft one: the teal wordmark sits on teal
	   stills, so it needs a dark halo hugging the strokes to stay legible. */
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)) drop-shadow(0 0 7px rgba(3, 25, 31, .55));
}

.has-overlay-header .site-header:not(.is-stuck) .nav-menu > li > a { color: rgba(255, 255, 255, .9); }
.has-overlay-header .site-header:not(.is-stuck) .nav-menu > li > a::after { background: var(--sky); }

.has-overlay-header .site-header:not(.is-stuck) .nav-menu > li > a:hover,
.has-overlay-header .site-header:not(.is-stuck) .nav-menu > li > a:focus-visible,
.has-overlay-header .site-header:not(.is-stuck) .nav-menu > li.current-menu-item > a,
.has-overlay-header .site-header:not(.is-stuck) .nav-menu > li.current_page_item > a { color: #fff; }

.has-overlay-header .site-header:not(.is-stuck) .main-navigation .has-dropdown > .submenu-toggle { color: rgba(255, 255, 255, .7); }

.has-overlay-header .site-header:not(.is-stuck) .header-call { border-left-color: rgba(255, 255, 255, .22); }
.has-overlay-header .site-header:not(.is-stuck) .header-call__icon { background: rgba(255, 255, 255, .16); color: #fff; }
.has-overlay-header .site-header:not(.is-stuck) .header-call:hover .header-call__icon { background: #fff; color: var(--brand-ink); }
.has-overlay-header .site-header:not(.is-stuck) .header-call__text small { color: rgba(255, 255, 255, .68); }
.has-overlay-header .site-header:not(.is-stuck) .header-call__text strong { color: #fff; }

.has-overlay-header .site-header:not(.is-stuck) .nav-toggle {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .32);
	color: #fff;
	backdrop-filter: blur(6px);
}

/* ---------------------------------------------------------
   5. Home sections
   --------------------------------------------------------- */

/* 5.1 Hero — monitoring wall as the background
   Cursor parallax is driven by --mx / --my (range -1…1) set on [data-hero]
   by main.js. Everything degrades to a static layout without JS. */
.hero {
	/* The slideshow's two timings live here and main.js reads both, so the
	   dot countdown, the slide change and the crossfade can never drift
	   apart. --hero-delay is how long a slide holds; --hero-fade is how long
	   it takes to cross to the next one. */
	--hero-delay: 9000ms;
	--hero-fade: 2000ms;

	position: relative;
	display: flex;
	align-items: center;
	/* Full screen on load, at every width. svh is the viewport height with the
	   mobile browser's chrome still showing, so the hero is sized for the worst
	   case and does not jump as the address bar collapses; the vh line above it
	   is the fallback where svh is unsupported. min-height rather than height,
	   so a short window — a laptop at 1366x600, a phone in landscape — grows
	   the hero to fit the copy instead of clipping it. */
	min-height: 100vh;
	min-height: 100svh;
	padding: calc(var(--header-h) + 26px) 0 96px;
	background: #0d0f10;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }

/* The wall is a slideshow: one full-bleed still at a time, crossfading under
   the overlay layers. Slightly over-sized and drifting with the cursor, so the
   push-in never exposes an edge. */
.hero__slides {
	position: absolute;
	inset: -18px;
	transform: scale(1.03) translate3d(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -9px), 0);
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
	will-change: transform;
}

.hero__slide {
	position: absolute;
	inset: 0;
	background-color: #06242c;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.09);
	transition: opacity var(--hero-fade) ease;
}

.hero__slide.is-active {
	z-index: 1;
	opacity: 1;
	/* Longer than the slide holds, so the push-in is always still moving
	   when the crossfade takes over and never sits at a dead stop. */
	animation: heroKen 13s ease-out both;
}

/* The outgoing slide holds the end of its push-in while it fades out. Without
   it the slide snaps back to its starting scale mid-crossfade, because dropping
   .is-active also drops the animation that was holding the transform. */
.hero__slide.is-prev { opacity: 0; transform: scale(1); }

@keyframes heroKen {
	from { transform: scale(1.09); }
	to   { transform: scale(1); }
}

/* Slideshow controls, parked on the container's right edge so they line up with
   the copy and clear the centred scroll cue. */
.hero__slider {
	position: absolute;
	left: 0; right: 0;
	/* Clear of the stats card, which is pulled up over the hero's last 26px. */
	bottom: 46px;
	z-index: 2;
}

.hero__slider-inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
}

.hero__dots {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero__dot {
	position: relative;
	display: block;
	width: 11px; height: 11px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: rgba(255, 255, 255, .34);
	overflow: hidden;
	transition: width var(--t), background var(--t-fast);
}

.hero__dot:hover { background: rgba(255, 255, 255, .62); }
.hero__dot.is-active { width: 38px; background: rgba(255, 255, 255, .26); }

/* The active dot stretches into a bar and fills over --hero-delay, so it
   doubles as a countdown to the next slide. */
.hero__dot.is-active::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--sky);
	transform-origin: left center;
	animation: heroDotFill var(--hero-delay) linear both;
}

.hero.is-paused .hero__dot.is-active::after { animation-play-state: paused; }

@keyframes heroDotFill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* Legibility layer only. Neutral black, no brand tint: it darkens the stills
   where the copy sits without shifting their colour, so the photography reads
   as itself. Weighted to the left, where the copy is, and fading out to the
   right so the image is barely touched there. */
.hero__overlay {
	position: absolute;
	inset: 0;
	background:
		/* Top strip, so the transparent header always has ground under it
		   whatever the current still happens to be bright with. */
		linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 20%, transparent 36%),
		linear-gradient(100deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .6) 44%, rgba(0, 0, 0, .18) 100%);
}

.hero__inner { position: relative; z-index: 1; }

/* One centred column: title, lead, phone button and badges. */
.hero__copy {
	max-width: 700px;
	margin-inline: auto;
	text-align: center;
}

.hero__copy .hero__lead { margin-inline: auto; }

/* Per-slide heading and paragraph. Every entry sits in the same grid cell, so
   the stack is as tall as its longest one and the badges never move; only the
   active entry is shown, crossfading as heroSlider() moves .is-active. The
   delayed visibility keeps hidden entries out of the accessibility tree once
   they have faded. */
.hero__stack { display: grid; }

.hero__stack-item {
	grid-area: 1 / 1;
	align-self: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .8s ease, transform .8s ease, visibility 0s linear .8s;
}

.hero__stack-item.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .8s ease .25s, transform .8s ease .25s, visibility 0s;
}

.hero__leads { margin-bottom: 28px; }
.hero__leads .hero__lead { margin-bottom: 0; }

/* Second heading line: the gradient the rotating word used. */
.hero__title-accent {
	background: linear-gradient(100deg, #7fe3f5 0%, var(--sky) 45%, #b9f1fb 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.hero__stack-item,
	.hero__stack-item.is-active { transform: none; transition: none; }
}
.hero__copy .hero__badges { justify-content: center; }

/* Phones only — the hero carries no call to action from 992px up. */
.hero__cta { margin-bottom: 28px; }
.hero__cta .btn { width: 100%; max-width: 340px; }

@media (min-width: 992px) {
	.hero__cta { display: none; }
}

/* Live pulse dot */
.live-dot {
	position: relative;
	display: inline-block;
	width: 8px; height: 8px;
	flex: 0 0 8px;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 0 0 rgba(52, 211, 153, .7);
	animation: liveDot 2s ease-out infinite;
}

@keyframes liveDot {
	0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); }
	70%  { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
	100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 9px 18px;
	background: rgba(3, 25, 31, .5);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 100px;
	color: #cdeef6;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
	transition: border-color var(--t-fast), background var(--t-fast);
}

.hero__badge:hover {
	background: rgba(3, 25, 31, .68);
	border-color: rgba(53, 201, 224, .55);
}

/* Headline with rotating word */
.hero__title {
	color: #fff;
	font-size: clamp(1.85rem, 3.5vw, 2.9rem);
	line-height: 1.1;
	margin-bottom: .4em;
	letter-spacing: -.025em;
	text-shadow: 0 2px 22px rgba(0, 0, 0, .45);
}

.hero__title-line { display: block; }

.hero__title-line--rotate {
	display: flex;
	align-items: baseline;
	gap: .28em;
	flex-wrap: wrap;
}

.hero__for { color: rgba(255, 255, 255, .6); font-weight: 700; }

.rotator {
	position: relative;
	display: inline-block;
	vertical-align: baseline;
}

.rotator__ghost { visibility: hidden; }

.rotator__word {
	position: absolute;
	inset: 0;
	white-space: nowrap;
	background: linear-gradient(100deg, #7fe3f5 0%, var(--sky) 45%, #b9f1fb 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	opacity: 0;
	transform: translateY(.42em) rotateX(-40deg);
	transform-origin: bottom center;
	/* Matched by FLIP in headlineRotator(), main.js.

	   The curve matters as much as the duration here. The old
	   cubic-bezier(.22, 1, .36, 1) is an ease-out-quint: it covered most of its
	   travel in the first few frames and then crawled to a stop, so the flip
	   read as a snap however long the duration was. An even ease-in-out spreads
	   the movement across the whole 1.4s, which is what makes it look slow. */
	transition: opacity 1.4s ease-in-out, transform 1.4s cubic-bezier(.4, 0, .2, 1);
}

.rotator__word.is-active { opacity: 1; transform: none; }
.rotator__word.is-leaving { opacity: 0; transform: translateY(-.42em) rotateX(40deg); }

.hero__lead {
	max-width: 560px;
	margin-bottom: 28px;
	color: rgba(255, 255, 255, .8);
	font-size: .96rem;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .4);
}

/* Two equal buttons: a shrink-wrapped grid with 1fr columns sizes both tracks
   to the wider label, so "Explore Services" matches "Request a Free Quote"
   instead of hugging its own text. Inner-page heroes only — the home hero
   carries a single button, and only on phones. */
.svc-hero__actions,
.ctc-hero__actions {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	width: fit-content;
	gap: 14px;
	margin-bottom: 28px;
}

/* Shine sweep across primary buttons */
.btn--shine { position: relative; overflow: hidden; }

.btn--shine::after {
	content: "";
	position: absolute;
	top: 0; left: -120%;
	width: 60%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
	transform: skewX(-20deg);
	transition: left .65s cubic-bezier(.22, 1, .36, 1);
}

.btn--shine:hover::after { left: 130%; }

.btn--wire {
	background: rgba(3, 25, 31, .45);
	border-color: rgba(255, 255, 255, .34);
	color: #fff;
	backdrop-filter: blur(8px);
}

.btn--wire:hover {
	background: #fff;
	border-color: #fff;
	color: var(--brand-ink);
	transform: translateY(-2px);
}

/* Accreditation strip — same slot, same hairline and top pad the tick list
   had, so the hero's rhythm below the buttons is unchanged. */
.hero__badges {
	/* Base badge height for the breakpoint; each badge multiplies it by its own
	   --badge-scale, set per image in the hero template. */
	--badge-h: 128px;

	display: flex;
	flex-wrap: wrap;
	/* Top-aligned, not centred: the captions run to different line counts, and
	   centring the columns would stagger the badges above them. */
	align-items: flex-start;
	gap: 22px;
	margin: 0;
	/* Extra headroom over the tick list's 20px: the optically scaled badge
	   grows upward from its baseline and would otherwise cross the rule. */
	padding: 32px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .16);
	list-style: none;
}

/* Badge over its caption, both centred on the column. */
.hero__badges li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 11px;
}

/* No plate — all three carry alpha and sit straight on the stills. Sized by
   height alone so they align however wide each one is, with a soft shadow
   that follows each badge's own outline to lift it off the photo. The height
   steps down with the breakpoints below; 128px is the large-screen size the
   256px assets are cut for. */
.hero__badge-img {
	height: var(--badge-h);
	width: auto;
	/* The optical correction is a transform, not a height, so it costs no
	   layout: every badge still occupies --badge-h and the captions under them
	   stay on one line. Anchored bottom-centre, so the three also sit on a
	   common baseline and only the grown badge reaches further up. */
	transform: scale(var(--badge-scale, 1));
	transform-origin: center bottom;
	filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .55));
}

.hero__badge-label {
	max-width: 170px;
	color: rgba(255, 255, 255, .88);
	font-family: var(--font-head);
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}

/* Scroll cue */
.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 22px;
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: 7px;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, .6);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	transition: color var(--t-fast);
}

.hero__scroll:hover { color: #fff; }

.hero__scroll-mouse {
	display: grid;
	justify-items: center;
	width: 23px; height: 36px;
	padding-top: 7px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-radius: 100px;
	transition: border-color var(--t-fast);
}

.hero__scroll:hover .hero__scroll-mouse { border-color: var(--sky); }

.hero__scroll-mouse span {
	width: 3px; height: 7px;
	border-radius: 3px;
	background: var(--sky);
	animation: scrollDot 1.8s ease-in-out infinite;
}

@keyframes scrollDot {
	0%, 100% { transform: translateY(0); opacity: 1; }
	50%      { transform: translateY(9px); opacity: .3; }
}

/* 5.2 Stats */
.stats { margin-top: var(--section-y); }

/* White ground. The bar sits on a white page, so it needs the hairline and
   a neutral lift to read as a panel at all — the old teal fill was doing that
   job on its own. */
.stats__bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	padding: 34px 20px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.stat {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	padding: 6px 14px;
	border-right: 1px solid var(--line);
}

.stat:last-child { border-right: 0; }

/* The only colour left in the bar — same tinted-tile treatment the header
   call block and the why-us list already use. */
.stat__icon {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	flex: 0 0 52px;
	border-radius: 15px;
	background: var(--brand-050);
	border: 1px solid var(--brand-100);
	color: var(--brand);
}

.stat__value {
	display: block;
	font-family: var(--font-head);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--ink);
	letter-spacing: -.02em;
}

.stat__label {
	display: block;
	font-size: .84rem;
	color: var(--ink-soft);
}

/* 5.3 Services */
.services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.service-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.service-card:hover {
	transform: translateY(-8px);
	border-color: transparent;
	/* Neutral, not --shadow-lg: that one is tinted with the brand teal, which
	   read as a coloured glow pooling under the card. */
	box-shadow: var(--shadow);
}

.service-card__media {
	position: relative;
	overflow: hidden;
}

.service-card__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.service-card:hover .service-card__media img { transform: scale(1.08); }

.service-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	/* Even top pad now: there is no icon tile overhanging the image to clear. */
	padding: 26px;
}

.service-card__title { font-size: 1.28rem; margin-bottom: .45em; }

.service-card__text {
	font-size: .95rem;
	margin-bottom: 18px;
}

.service-card__body .link-arrow { margin-top: auto; }

.services__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 26px;
	padding: 26px 34px;
	background: var(--brand-050);
	border: 1px dashed var(--brand-100);
	border-radius: var(--radius-lg);
	text-align: center;
}

.services__foot p {
	margin: 0;
	font-family: var(--font-head);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ink);
}

/* 5.4 Why us */
.why-us__top {
	display: grid;
	grid-template-columns: .95fr 1.05fr;
	align-items: center;
	gap: 70px;
}

.why-us__media { position: relative; padding: 0 0 40px 40px; }

.why-us__frame {
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.why-us__frame img {
	width: 100%;
	aspect-ratio: 4 / 3.4;
	object-fit: cover;
}

.why-us__inset {
	position: absolute;
	bottom: 0; left: 0;
	width: 210px;
	border: 6px solid #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.why-us__inset img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.why-us__content .section-text--left { margin-bottom: 34px; }

/* Button sits at the right edge of the copy column: block-level and shrink-
   wrapped so the auto left margin has room to push it over. */
.why-us__content > .btn { display: flex; width: fit-content; margin-left: auto; }

.feature-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px 28px;
	margin-bottom: 38px;
}

.feature { display: flex; gap: 14px; }

.feature__icon {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	flex: 0 0 46px;
	border-radius: 13px;
	background: var(--brand-050);
	border: 1px solid var(--brand-100);
	color: var(--brand);
	transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.feature:hover .feature__icon {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
	transform: translateY(-3px);
}

.feature__title { font-size: 1.03rem; margin-bottom: .3em; }
.feature__text { font-size: .9rem; margin: 0; }

/* Process steps */
/* No divider rule above it — just enough breathing room either side of the heading. */
.process { margin-top: 36px; padding-top: 0; }

.process__title {
	font-size: 1.5rem;
	text-align: center;
	margin-bottom: 36px;
}

.process__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.step {
	position: relative;
	padding: 30px 24px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	transition: transform var(--t), box-shadow var(--t);
}

.step:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

.step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%; right: -18px;
	width: 12px; height: 12px;
	border-top: 2px solid var(--brand-100);
	border-right: 2px solid var(--brand-100);
	transform: translateY(-50%) rotate(45deg);
}

.step__title { font-size: 1.04rem; margin-bottom: .35em; }
.step__text { font-size: .89rem; margin: 0; }

/* 5.5 Projects */
.projects__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.project {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: opacity .4s ease, transform .4s ease;
}

.project.is-hidden { display: none; }

.project img {
	width: 100%;
	aspect-ratio: 4 / 3.15;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.project:hover img { transform: scale(1.09); }

.project__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 26px;
	/* Neutral black, no brand tint: this is here to carry the title over the
	   photo, not to wash the bottom of the card in teal. */
	background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .82) 100%);
	opacity: .96;
	transition: background var(--t);
}

.project:hover .project__overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .88) 100%);
}

.project__title {
	color: #fff;
	font-size: 1.18rem;
	margin-bottom: .2em;
}

.project__meta {
	margin: 0;
	color: rgba(255, 255, 255, .8);
	font-size: .86rem;
}

.project__link {
	position: absolute;
	top: 22px; right: 22px;
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--brand);
	opacity: 0;
	transform: translateY(-8px) rotate(-30deg);
	transition: opacity var(--t), transform var(--t);
}

.project:hover .project__link,
.project__link:focus-visible { opacity: 1; transform: translateY(0) rotate(-45deg); }

/* Tight either side of the button: half the usual gap above it, and the
   section's own bottom padding pulled in behind it. Kept proportional to
   --section-y so it stays in step on mobile. */
.projects__foot { margin-top: 24px; text-align: center; }
.projects { padding-bottom: calc(var(--section-y) * .58); }

/* 5.6 Brands + testimonials */
.brands {
	margin-bottom: 41px;
	padding-bottom: 31px;
	border-bottom: 1px solid var(--line);
	text-align: center;
}

.brands__label {
	margin-bottom: 26px;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Marquee: the track holds two identical copies of the row and slides left by
   half its own width, so the moment copy one leaves, copy two is exactly where
   it started and the loop is seamless. */
.brands__marquee {
	position: relative;
	overflow: hidden;
	/* Fade the ends so logos enter and leave rather than being cut off. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.brands__track {
	display: flex;
	align-items: center;
	width: max-content;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	animation: brandsScroll 60s linear infinite;
}

/* Hold still while someone is reading a name. */
.brands__marquee:hover .brands__track,
.brands__marquee:focus-within .brands__track { animation-play-state: paused; }

@keyframes brandsScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* The spacing rides on the item rather than a flex gap: a gap would also sit
   between the two copies, putting the halfway point half a gap out of step. */
.brands__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 190px;
	height: 76px;
	margin-right: 16px;
	padding: 14px 26px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.brands__item:hover {
	border-color: var(--brand-100);
	box-shadow: var(--shadow-sm);
}

/* Every card is the same size and the logo is fitted inside it, so a wide
   wordmark (Hikvision) and a stacked mark (Bosch) sit at a similar weight. */
.brands__logo {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Slider */
.slider { max-width: 900px; margin: 0 auto; }

.slider__viewport { overflow: hidden; }

.slider__track {
	display: flex;
	transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.slide {
	flex: 0 0 100%;
	min-width: 100%;
	padding: 4px;
}

.testimonial {
	position: relative;
	margin: 0;
	padding: 44px 46px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
}

.testimonial__quote-icon {
	position: absolute;
	top: 30px; right: 36px;
	color: var(--brand-100);
}

.testimonial .stars { margin-bottom: 18px; }

.testimonial__text {
	font-family: var(--font-head);
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.65;
	color: var(--ink-soft);
	margin-bottom: 28px;
}

.testimonial__author {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 22px;
	border-top: 1px solid var(--line-soft);
}

.testimonial__who { display: flex; flex-direction: column; line-height: 1.35; }
.testimonial__who strong { font-family: var(--font-head); font-size: 1rem; color: var(--ink); }
.testimonial__who small { font-size: .85rem; color: var(--muted); }

.slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 32px;
}

.slider__btn {
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	border: 1.5px solid var(--line);
	border-radius: 50%;
	background: #fff;
	color: var(--ink);
	transition: all var(--t-fast);
}

.slider__btn:hover {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
	transform: translateY(-2px);
}

.slider__dots { display: flex; align-items: center; gap: 8px; }

.slider__dot {
	width: 9px; height: 9px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: var(--line);
	transition: all var(--t-fast);
}

.slider__dot.is-active { width: 28px; background: var(--brand); }

/* 5.7 CTA band */
.cta-band {
	position: relative;
	padding: 46px 0;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

/* Legibility only, no brand tint: the copy and the call block both sit in
   white across the full width, so this darkens evenly rather than washing the
   photograph in teal. */
.cta-band__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .68) 50%, rgba(0, 0, 0, .52) 100%);
}

.cta-band__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 42px;
}

.cta-band__content { max-width: 620px; }

.cta-band__title {
	color: #fff;
	font-size: clamp(1.85rem, 3.3vw, 2.7rem);
	margin-bottom: .4em;
}

.cta-band__text {
	margin: 0;
	color: rgba(255, 255, 255, .88);
	font-size: 1.05rem;
}

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.cta-band .btn--primary {
	background: #fff;
	color: var(--brand-ink);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}

.cta-band .btn--primary:hover { background: #fff; color: var(--brand-700); }

.cta-band__call {
	display: flex;
	align-items: center;
	gap: 13px;
	color: #fff;
}

.cta-band__call-icon {
	display: grid;
	place-items: center;
	width: 50px; height: 50px;
	flex: 0 0 50px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .3);
	transition: background var(--t-fast);
}

.cta-band__call:hover { color: #fff; }
.cta-band__call:hover .cta-band__call-icon { background: rgba(255, 255, 255, .26); }

.cta-band__call small { display: block; font-size: .78rem; color: rgba(255, 255, 255, .76); }
.cta-band__call strong { font-family: var(--font-head); font-size: 1.12rem; }

/* ---------------------------------------------------------
   6. Footer & floating actions
   --------------------------------------------------------- */
.site-footer {
	position: relative;
	background: #04222b;
	color: rgba(255, 255, 255, .72);
	font-size: .94rem;
}

.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(700px 340px at 12% 0%, rgba(0, 151, 178, .55), transparent 60%),
		radial-gradient(600px 320px at 88% 8%, rgba(53, 201, 224, .2), transparent 62%);
	pointer-events: none;
}

.footer-main { position: relative; padding: 41px 0 0; }

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1.3fr;
	gap: 48px 40px;
}

.footer-brand { margin-bottom: 22px; }

/* Footer uses the same lockup as the header; the PNG is transparent so it
   sits directly on the dark ground with no plate behind it. */
.footer-brand--image .brand__logo { height: 66px; width: auto; }

.footer-about { margin-bottom: 26px; line-height: 1.75; }

.footer-title {
	position: relative;
	margin-bottom: 26px;
	padding-bottom: 14px;
	color: #fff;
	font-size: 1.1rem;
}

.footer-title::after {
	content: "";
	position: absolute;
	bottom: 0; left: 0;
	width: 40px; height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--sky), var(--brand-600));
}

.footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 13px;
}

.footer-links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, .72);
	transition: color var(--t-fast), transform var(--t-fast);
}

.footer-links a:hover { color: #fff; transform: translateX(5px); }
.footer-links .icon { color: var(--sky); flex: 0 0 auto; }

.footer-contact {
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 18px;
}

.footer-contact li { display: flex; gap: 13px; line-height: 1.6; }

.footer-contact__icon {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	flex: 0 0 38px;
	border-radius: 11px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .14);
	color: var(--sky);
}

.footer-contact a { color: rgba(255, 255, 255, .72); }
.footer-contact a:hover { color: #fff; }
.footer-contact em { font-style: normal; font-size: .84rem; color: var(--sky); }

.site-footer .btn--primary {
	background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
	box-shadow: 0 10px 26px rgba(18, 140, 126, .3);
}

.footer-bottom {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.footer-bottom__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 24px 22px;
}

.copyright { margin: 0; font-size: .88rem; }

/* Sits opposite the copyright on desktop; the 767px rule below turns the row
   into a centred column, so on phones it stacks under "All rights reserved". */
.footer-credit {
	margin: 0;
	font-size: .88rem;
	color: rgba(255, 255, 255, .72);
}

.footer-credit a { color: rgba(255, 255, 255, .72); }
.footer-credit a:hover { color: #fff; }

/* Floating actions */
.to-top,
.whatsapp-float {
	position: fixed;
	right: 22px;
	z-index: 90;
	display: grid;
	place-items: center;
	width: 50px; height: 50px;
	border-radius: 50%;
	transition: opacity var(--t), transform var(--t), background var(--t-fast);
}

.to-top {
	bottom: 88px;
	border: 0;
	background: var(--brand);
	color: #fff;
	box-shadow: 0 10px 26px rgba(0, 151, 178, .34);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brand-700); transform: translateY(-3px); }

.whatsapp-float {
	bottom: 24px;
	width: 56px; height: 56px;
	background: #25d366;
	color: #fff;
	box-shadow: 0 10px 26px rgba(37, 211, 102, .42);
}

.whatsapp-float:hover { color: #fff; transform: translateY(-3px) scale(1.05); }

/* ---------------------------------------------------------
   7. Inner pages
   --------------------------------------------------------- */
.page-hero {
	position: relative;
	/* Short band, so it pads against the floating header rather than sitting
	   under it — see --header-h. */
	padding: calc(var(--header-h) + 30px) 0 38px;
	background:
		radial-gradient(700px 380px at 78% 0%, rgba(53, 201, 224, .14), transparent 60%),
		linear-gradient(135deg, var(--brand-700) 0%, var(--brand) 100%);
	color: #fff;
	text-align: center;
}

.page-hero__title { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: .3em; }

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: .9rem;
	color: rgba(255, 255, 255, .72);
}

.breadcrumbs a { color: rgba(255, 255, 255, .9); }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.breadcrumbs .current { color: var(--sky); font-weight: 600; }

.entry-thumb { margin-bottom: 34px; border-radius: var(--radius-lg); overflow: hidden; }

.entry-content { font-size: 1.02rem; }
.entry-content h2 { font-size: 1.7rem; margin-top: 1.6em; }
.entry-content h3 { font-size: 1.3rem; margin-top: 1.4em; }
.entry-content img { border-radius: var(--radius); }

.entry-content blockquote {
	margin: 1.6em 0;
	padding: 20px 26px;
	border-left: 4px solid var(--brand);
	background: var(--soft);
	border-radius: 0 var(--radius) var(--radius) 0;
}

.entry-placeholder {
	padding: 44px;
	background: var(--soft);
	border: 1px dashed var(--line);
	border-radius: var(--radius-lg);
	text-align: center;
	color: var(--muted);
}

.post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.post-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--t), box-shadow var(--t);
}

.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.post-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.post-card__date { font-size: .8rem; color: var(--muted); margin-bottom: 8px; }
.post-card__title { font-size: 1.16rem; margin-bottom: .4em; }
.post-card__title a { color: var(--ink); }
.post-card__title a:hover { color: var(--brand-ink); }
.post-card__excerpt { font-size: .93rem; }
.post-card .link-arrow { margin-top: auto; }

.pagination {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px; height: 44px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	color: var(--ink);
	font-weight: 600;
}

.pagination .page-numbers:hover { border-color: var(--brand); color: var(--brand-ink); }

.pagination .page-numbers.current {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

.error-404 { text-align: center; }

.error-404__code {
	font-family: var(--font-head);
	font-size: clamp(5rem, 16vw, 9rem);
	font-weight: 800;
	line-height: 1;
	margin: 0 0 .1em;
	background: linear-gradient(135deg, var(--brand) 0%, var(--sky) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 32px;
}

.widget-title { font-size: 1.1rem; }
/* ---------------------------------------------------------
   7b. Services page
   --------------------------------------------------------- */

/* Glass button, used on image-backed heroes */
.btn--glass {
	background: rgba(4, 34, 43, .32);
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
	backdrop-filter: blur(8px);
}

.btn--glass:hover {
	background: rgba(255, 255, 255, .96);
	border-color: transparent;
	color: var(--brand-ink);
	transform: translateY(-2px);
}

/* 7b.1 Hero */
.svc-hero {
	position: relative;
	display: flex;
	align-items: center;
	/* A fixed floor, not a vh clamp: with vh the floor moved with the visitor's
	   window height, so on a short window it fell under the content and each
	   inner hero grew to its own size. 620px clears the tallest of the three
	   (projects, ~583px at 1440) so all three are always floor-driven. */
	min-height: 620px;
	padding: calc(var(--header-h) + 26px) 0 84px;
	background-size: cover;
	background-position: center;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

/* Same neutral black scrim as the home hero (.hero__overlay): no brand tint,
   so the photo reads as itself. */
.svc-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 20%, transparent 36%),
		linear-gradient(100deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .6) 44%, rgba(0, 0, 0, .18) 100%);
}

/* Centred like the home hero's copy column. */
.svc-hero__inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

.svc-hero__inner > * { max-width: 700px; margin-inline: auto; }

.breadcrumbs--left { justify-content: flex-start; margin-bottom: 22px; }

.svc-hero__title {
	color: #fff;
	font-size: clamp(1.85rem, 3.5vw, 2.9rem);
	line-height: 1.1;
	margin-bottom: .4em;
	letter-spacing: -.025em;
	text-shadow: 0 2px 22px rgba(0, 0, 0, .45);
	text-wrap: balance;
}

.svc-hero__title-accent {
	display: block;
	background: linear-gradient(100deg, #7fe3f5 0%, var(--sky) 45%, #b9f1fb 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.svc-hero__text {
	max-width: 560px;
	margin-bottom: 28px;
	color: rgba(255, 255, 255, .8);
	font-size: .96rem;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .4);
}

/* 7b.3 Detail blocks */
.svc-detail {
	position: relative;
	padding: 48px 0;
	/* Clear the sticky header when jumped to via anchor. */
	scroll-margin-top: calc(var(--header-h) + 16px);
}

.svc-detail--soft { background: var(--soft); }

.svc-detail__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 68px;
}

.svc-detail--flip .svc-detail__media { order: 2; }

.svc-detail__media { position: relative; }

.svc-detail__frame {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.svc-detail__frame img {
	width: 100%;
	aspect-ratio: 4 / 3.1;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.svc-detail__media:hover .svc-detail__frame img { transform: scale(1.05); }

.svc-detail__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, rgba(0, 99, 122, .22) 0%, transparent 46%);
}

/* Same sizes as the home page's section headings and intros (.section-title,
   .section-text); the phone sizes follow them in the responsive section. */
.svc-detail__title { font-size: clamp(1.9rem, 3.4vw, 2.85rem); margin-bottom: .45em; }

.svc-detail__text { font-size: 1.06rem; margin-bottom: 24px; }

.svc-detail__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 20px;
	margin: 0 0 26px;
	padding: 24px 0 0;
	border-top: 1px dashed var(--line);
	list-style: none;
}

.svc-detail__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .92rem;
	font-weight: 500;
	color: var(--ink-soft);
}

.svc-detail__list .icon {
	display: grid;
	place-items: center;
	width: 21px; height: 21px;
	flex: 0 0 21px;
	margin-top: 2px;
	padding: 4px;
	border-radius: 50%;
	background: var(--brand-050);
	color: var(--brand);
	stroke-width: 3;
}

.svc-detail--soft .svc-detail__list .icon { background: #fff; }

.svc-detail__tags { margin-bottom: 30px; }
/* The 30px separated the tags from the per-service CTA row; with that gone
   the tags are last and the margin would just hang off the bottom. */
.svc-detail__tags:last-child { margin-bottom: 0; }

.svc-detail__tags-label {
	display: block;
	margin-bottom: 10px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}

.svc-detail__tags ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.svc-detail__tags li {
	padding: 6px 14px;
	background: var(--brand-050);
	border: 1px solid var(--brand-100);
	border-radius: 8px;
	color: var(--brand-ink);
	font-size: .8rem;
	font-weight: 600;
}

.svc-detail--soft .svc-detail__tags li { background: #fff; }

/* 7b.4 What's included */
.included__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.included__card {
	position: relative;
	padding: 34px 26px 30px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/* Full-colour artwork in the old icon's slot. The four files have different
   proportions, so each is fitted inside the same square rather than
   stretched. No tile behind them, and no hover recolour — that only worked on
   the single-colour line icons. */
.included__img {
	display: block;
	width: 64px; height: 64px;
	margin-bottom: 20px;
	object-fit: contain;
	object-position: left center;
}

/* Same sizes as the home page's service cards (.service-card__title/__text). */
.included__title { font-size: 1.28rem; margin-bottom: .4em; }
.included__text { font-size: .95rem; margin: 0; }

/* 7b.5 Industries */
.industries__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.industry {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.industry__icon {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	flex: 0 0 46px;
	border-radius: 13px;
	background: var(--brand-050);
	color: var(--brand);
}

.industry__label {
	font-family: var(--font-head);
	font-size: .95rem;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.35;
}

/* 7b.6 FAQ */
.faq__inner {
	display: grid;
	grid-template-columns: .82fr 1.18fr;
	align-items: start;
	gap: 64px;
}

.faq__intro { position: sticky; top: 170px; }

.faq__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 28px;
}

.faq__list { display: grid; gap: 14px; }

.faq__item {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.faq__item.is-open {
	border-color: var(--brand-100);
	box-shadow: var(--shadow-sm);
}

.faq__question { margin: 0; font-size: inherit; }

.faq__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 22px 24px;
	border: 0;
	background: none;
	text-align: left;
	font-family: var(--font-head);
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--ink);
	transition: color var(--t-fast);
}

.faq__toggle:hover { color: var(--brand-ink); }
.faq__item.is-open .faq__toggle { color: var(--brand-ink); }

.faq__icon {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	background: var(--brand-050);
	color: var(--brand);
	transition: transform var(--t), background var(--t-fast), color var(--t-fast);
}

.faq__item.is-open .faq__icon {
	transform: rotate(135deg);
	background: var(--brand);
	color: #fff;
}

.faq__panel { padding: 0 24px 24px; }

.faq__panel p {
	margin: 0;
	padding-top: 4px;
	border-top: 1px dashed var(--line);
	padding-top: 18px;
	font-size: .96rem;
	color: var(--body);
}


/* ---------------------------------------------------------
   7c. Projects page + single project
   --------------------------------------------------------- */

/* 7c.1 Listing hero */
.prj-hero {
	position: relative;
	display: flex;
	align-items: center;
	/* Same fixed floor as .svc-hero — see the note there. */
	min-height: 620px;
	padding: calc(var(--header-h) + 26px) 0 84px;
	background-size: cover;
	background-position: center;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

/* Same neutral black scrim as the home hero (.hero__overlay): no brand tint,
   so the photo reads as itself. */
.prj-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 20%, transparent 36%),
		linear-gradient(100deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .6) 44%, rgba(0, 0, 0, .18) 100%);
}

.prj-hero__inner { position: relative; z-index: 1; }
.prj-hero__inner > * { max-width: 700px; }

/* The listing hero is centred like the home hero's copy column; the compact
   category hero keeps its left-aligned breadcrumb layout. */
.prj-hero:not(.prj-hero--compact) .prj-hero__inner { text-align: center; }
.prj-hero:not(.prj-hero--compact) .prj-hero__inner > * { margin-inline: auto; }

.prj-hero__title {
	color: #fff;
	font-size: clamp(1.85rem, 3.5vw, 2.9rem);
	line-height: 1.1;
	margin-bottom: .4em;
	letter-spacing: -.025em;
	text-shadow: 0 2px 22px rgba(0, 0, 0, .45);
	text-wrap: balance;
}

.prj-hero__title-accent {
	display: block;
	background: linear-gradient(100deg, #7fe3f5 0%, var(--sky) 45%, #b9f1fb 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.prj-hero__text {
	max-width: 560px;
	margin-bottom: 28px;
	color: rgba(255, 255, 255, .8);
	font-size: .96rem;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .4);
}

/* 7c.2 Grid — .projects__grid--page takes the home page's .projects__grid
   columns, gap and breakpoints unchanged. */

/* Cards on the listing wrap their media in a link. */
.project__cover {
	position: relative;
	display: block;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.projects-page__none {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
}

.projects-page__none-icon {
	display: grid;
	place-items: center;
	width: 84px; height: 84px;
	margin: 0 auto 26px;
	border-radius: 24px;
	background: var(--brand-050);
	border: 1px solid var(--brand-100);
	color: var(--brand);
}

.projects-page__none .btn { margin-top: 28px; }

/* 7c.3 Single project — the hero is the listing's .prj-hero; the fact bar
   overlaps its foot. */
.prj-facts {
	position: relative;
	z-index: 3;
	margin-top: -23px;
}

/* One equal column per fact, however many the project has filled in. */
.prj-facts__bar {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 8px;
	padding: 28px 18px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

.prj-fact {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 6px 16px;
	border-right: 1px solid var(--line-soft);
}

.prj-fact:last-child { border-right: 0; }

.prj-fact__icon {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	flex: 0 0 46px;
	border-radius: 13px;
	background: var(--brand-050);
	color: var(--brand);
}

.prj-fact__label {
	display: block;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}

.prj-fact__value {
	display: block;
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.35;
}

/* 7c.4 Body + aside */
.prj-body__inner {
	display: grid;
	grid-template-columns: 1.6fr .85fr;
	align-items: start;
	gap: 56px;
}

/* A project with no systems list has no sidebar, so let the copy run the full
   width instead of leaving the aside column standing empty. */
.prj-body__inner--full { grid-template-columns: 1fr; }
.prj-body__inner--full .prj-body__content { max-width: 820px; }

.prj-body__content p { font-size: 1.04rem; }

.prj-body__aside {
	position: sticky;
	top: 110px;
	display: grid;
	gap: 18px;
}

.prj-card {
	padding: 28px 26px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.prj-card__title { font-size: 1.1rem; margin-bottom: .7em; }

.prj-card__list {
	display: grid;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.prj-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .93rem;
	color: var(--ink-soft);
}

.prj-card__list .icon {
	display: grid;
	place-items: center;
	width: 20px; height: 20px;
	flex: 0 0 20px;
	margin-top: 2px;
	padding: 4px;
	border-radius: 50%;
	background: var(--brand-050);
	color: var(--brand);
	stroke-width: 3;
}

.prj-related .projects__grid { grid-template-columns: repeat(3, 1fr); }

/* ---------------------------------------------------------
   7d. About page
   --------------------------------------------------------- */

/* 7d.1 Hero */
.abt-hero {
	position: relative;
	display: flex;
	align-items: center;
	/* Same fixed floor as .svc-hero — see the note there. */
	min-height: 620px;
	padding: calc(var(--header-h) + 26px) 0 84px;
	background-size: cover;
	background-position: center;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

/* Same neutral black scrim as the home hero (.hero__overlay): no brand tint,
   so the photo reads as itself. */
.abt-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 20%, transparent 36%),
		linear-gradient(100deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .6) 44%, rgba(0, 0, 0, .18) 100%);
}

/* Centred like the home hero's copy column. */
.abt-hero__inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

.abt-hero__inner > * { max-width: 700px; margin-inline: auto; }

.abt-hero__title {
	color: #fff;
	font-size: clamp(1.85rem, 3.5vw, 2.9rem);
	line-height: 1.1;
	margin-bottom: .4em;
	letter-spacing: -.025em;
	text-shadow: 0 2px 22px rgba(0, 0, 0, .45);
	text-wrap: balance;
}

.abt-hero__title-accent {
	display: block;
	background: linear-gradient(100deg, #7fe3f5 0%, var(--sky) 45%, #b9f1fb 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.abt-hero__text {
	max-width: 560px;
	margin-bottom: 28px;
	color: rgba(255, 255, 255, .8);
	font-size: .96rem;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .4);
}

/* 7d.2 Story */
.abt-story__inner {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	align-items: center;
	gap: 64px;
}

/* Copy leads, image follows on the right at a capped size. */
.abt-story__media {
	position: relative;
	width: 100%;
	max-width: 460px;
	margin-left: auto;
	padding: 0 0 36px 36px;
}

.abt-story__frame {
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.abt-story__frame img {
	width: 100%;
	aspect-ratio: 4 / 3.4;
	object-fit: cover;
}

.abt-story__inset {
	position: absolute;
	bottom: 0; left: 0;
	width: 168px;
	border: 6px solid #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.abt-story__inset img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Same size as the home page's section intro (.section-text). */
.abt-story__lead {
	font-size: 1.06rem;
	font-weight: 500;
	color: var(--ink-soft);
}

.abt-story__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 32px 0 0;
	padding: 28px 0 0;
	border-top: 1px dashed var(--line);
	list-style: none;
}

.abt-story__stats li { display: grid; gap: 2px; }

.abt-story__stat-icon {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	margin-bottom: 8px;
	border-radius: 11px;
	background: var(--brand-050);
	color: var(--brand);
}

/* Same type as the home stats bar (.stat__value / .stat__label). */
.abt-story__stat-value {
	font-family: var(--font-head);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--ink);
	letter-spacing: -.02em;
}

.abt-story__stat-label { font-size: .84rem; color: var(--ink-soft); line-height: 1.35; }

/* 7d.3 Mission / vision pillars */
.abt-pillars {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px;
	margin-bottom: 46px;
}

.abt-pillar {
	position: relative;
	padding: 40px 36px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.abt-pillar::after {
	content: "";
	position: absolute;
	right: -60px; top: -60px;
	width: 180px; height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 151, 178, .12), transparent 70%);
	pointer-events: none;
}

.abt-pillar__kicker {
	margin: 0 0 6px;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--brand-ink);
}

/* Card copy on this page uses the home page's service card sizes
   (.service-card__title / __text); the phone sizes follow them in the
   responsive section. */
.abt-pillar__title { font-size: 1.28rem; margin-bottom: .45em; }
.abt-pillar__text { margin: 0; font-size: .95rem; }

.abt-mission__head { margin-bottom: 52px; }

/* 7d.4 Values */
.abt-values {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.abt-value {
	position: relative;
	padding: 32px 26px 28px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.abt-value__title { font-size: 1.28rem; margin-bottom: .4em; }
.abt-value__text { font-size: .95rem; margin: 0; }

/* 7d.5 Team roles */
.abt-roles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.abt-role {
	padding: 32px 26px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.abt-role__title { font-size: 1.28rem; margin-bottom: .4em; }
.abt-role__text { font-size: .95rem; margin: 0; }

/* ---------------------------------------------------------
   7e. Contact page
   --------------------------------------------------------- */

/* 7e.1 Hero */
.ctc-hero {
	position: relative;
	display: flex;
	align-items: center;
	/* Same fixed floor as .svc-hero — see the note there. */
	min-height: 620px;
	padding: calc(var(--header-h) + 26px) 0 84px;
	background-size: cover;
	background-position: center;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

/* Same neutral black scrim as the home hero (.hero__overlay): no brand tint,
   so the photo reads as itself. */
.ctc-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 20%, transparent 36%),
		linear-gradient(100deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .6) 44%, rgba(0, 0, 0, .18) 100%);
}

/* Centred like the home hero's copy column. */
.ctc-hero__inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

.ctc-hero__inner > * { max-width: 700px; margin-inline: auto; }

.ctc-hero__title {
	color: #fff;
	font-size: clamp(1.85rem, 3.5vw, 2.9rem);
	line-height: 1.1;
	margin-bottom: .4em;
	letter-spacing: -.025em;
	text-shadow: 0 2px 22px rgba(0, 0, 0, .45);
	text-wrap: balance;
}

.ctc-hero__title-accent {
	display: block;
	background: linear-gradient(100deg, #7fe3f5 0%, var(--sky) 45%, #b9f1fb 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.ctc-hero__text {
	max-width: 560px;
	margin-bottom: 28px;
	color: rgba(255, 255, 255, .8);
	font-size: .96rem;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .4);
}

/* Jump target for the contact hero's first CTA; clears the sticky header. */
.ctc-form-section { scroll-margin-top: 96px; }

/* 7e.2 Contact method cards */
.ctc-methods {
	position: relative;
	z-index: 3;
	margin-top: -26px;
}

.ctc-methods__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.ctc-method {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 26px 24px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: transform var(--t), border-color var(--t);
}

.ctc-method:hover {
	transform: translateY(-7px);
	border-color: transparent;
}

.ctc-method__icon {
	display: grid;
	place-items: center;
	width: 50px; height: 50px;
	flex: 0 0 50px;
	border-radius: 15px;
	background: var(--brand-050);
	border: 1px solid var(--brand-100);
	color: var(--brand);
	transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.ctc-method:hover .ctc-method__icon {
	background: linear-gradient(135deg, var(--brand) 0%, var(--sky) 100%);
	border-color: transparent;
	color: #fff;
}

.ctc-method__body { display: grid; gap: 1px; min-width: 0; }

.ctc-method__label {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--muted);
}

.ctc-method__value {
	font-family: var(--font-head);
	font-size: .98rem;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.ctc-method__value--alt { font-weight: 600; color: var(--body); }

.ctc-method__note {
	margin-top: 5px;
	font-size: .82rem;
	color: var(--muted);
	line-height: 1.4;
}

.ctc-method__arrow {
	position: absolute;
	top: 22px; right: 20px;
	color: var(--brand);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--t-fast), transform var(--t-fast);
}

.ctc-method:hover .ctc-method__arrow { opacity: 1; transform: none; }

/* 7e.3 Form layout */
.ctc-form__layout {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	align-items: start;
	gap: 54px;
}

/* Status notices */
.notice-box {
	display: flex;
	gap: 14px;
	margin-bottom: 28px;
	padding: 20px 22px;
	border-radius: var(--radius);
	border: 1px solid transparent;
}

.notice-box strong { display: block; font-family: var(--font-head); margin-bottom: 4px; }
.notice-box p { margin: 0; font-size: .93rem; }

.notice-box__icon {
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	flex: 0 0 36px;
	border-radius: 50%;
}

.notice-box--success {
	background: rgba(22, 163, 74, .08);
	border-color: rgba(22, 163, 74, .28);
	color: #14532d;
}

.notice-box--success .notice-box__icon {
	background: var(--success);
	color: #fff;
	stroke-width: 3;
}

/* Fields */
.ctc-form { margin-top: 18px; }

.ctc-form__row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

.field { margin-bottom: 14px; display: grid; }

.field > label {
	margin-bottom: 6px;
	font-family: var(--font-head);
	font-size: .88rem;
	font-weight: 700;
	color: var(--ink);
}

.field > label span[aria-hidden] { color: var(--brand); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: .96rem;
	line-height: 1.5;
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.field textarea { resize: vertical; min-height: 100px; }

.field select {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b84' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 42px;
}

/* Dims the "Select…" placeholder the same way an input's ::placeholder does.
   An <option>'s own color carries through to the closed control, so this
   only affects the box while the placeholder is still showing — once a real
   option is picked it reads in the normal ink color again. */
.field select option[value=""] { color: #9fb0bd; }

.field select:hover { border-color: var(--brand-100); }

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 4px rgba(0, 151, 178, .14);
}

/* Chevron picks up the brand colour to match the focus ring. */
.field select:focus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230097b2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.field input::placeholder,
.field textarea::placeholder { color: #9fb0bd; }

/* Matches the attribute selectors the base input rule uses above — plain
   ".field--error input" is a lower-specificity selector than
   ".field input[type=\"text\"]" etc., so it lost the cascade and the border
   never actually turned red for anything but the textarea. */
.field--error input[type="text"],
.field--error input[type="email"],
.field--error input[type="tel"],
.field--error select,
.field--error textarea { border-color: #dc2626; }

/* Honeypot: off-screen, never focusable. */
.ctc-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.ctc-form__submit {
	margin-top: 10px;
	padding-top: 18px;
	border-top: 1px dashed var(--line);
}

/* 7e.4 Aside cards */
.ctc-form__aside {
	position: sticky;
	top: 110px;
	display: grid;
	gap: 18px;
}

.ctc-card {
	padding: 28px 26px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

/* Same card-title size as the home page's service cards (.service-card__title). */
.ctc-card__title { font-size: 1.28rem; margin-bottom: .6em; }

.ctc-steps {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ctc-steps li { display: flex; gap: 14px; }
/* Same sizes as the home page's process steps (.step__title / .step__text). */
.ctc-steps strong { display: block; font-family: var(--font-head); font-size: 1.04rem; color: var(--ink); }
.ctc-steps p { margin: 3px 0 0; font-size: .89rem; }

.ctc-steps__num {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--brand) 0%, var(--sky) 100%);
	color: #fff;
	font-family: var(--font-head);
	font-size: .92rem;
	font-weight: 800;
}

.ctc-hours {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .93rem;
}

.ctc-hours li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 10px;
	border-bottom: 1px dashed var(--line);
}

.ctc-hours li:last-child { border-bottom: 0; padding-bottom: 0; }
.ctc-hours strong { font-family: var(--font-head); color: var(--ink); }

.ctc-card--urgent {
	background: linear-gradient(150deg, var(--brand-700) 0%, var(--brand) 100%);
	border-color: transparent;
	color: rgba(255, 255, 255, .88);
	box-shadow: var(--shadow-lg);
}

.ctc-card--urgent .ctc-card__title { color: #fff; }
.ctc-card--urgent p { font-size: .92rem; margin-bottom: 0; }

.ctc-card--urgent .btn--primary {
	background: #fff;
	color: var(--brand-ink);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

.ctc-card--urgent .btn--primary:hover { background: #fff; color: var(--brand-700); }

.ctc-card__whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 14px;
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
}

.ctc-card__whatsapp:hover { color: #fff; text-decoration: underline; }

/* Full-width variant: sits below the two-column form layout, content and
   actions side by side like the closing .cta-band does. */
.ctc-card--full {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	margin-top: var(--section-y);
	padding: 34px 40px;
}

.ctc-card--full__content { flex: 1 1 auto; min-width: 0; }
.ctc-card--full__content p { max-width: 560px; }

.ctc-card--full__actions {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.ctc-card--full__actions .btn { white-space: nowrap; }

/* 7e.5 Map + areas */
.ctc-map__wrap {
	display: grid;
	grid-template-columns: 1.5fr .9fr;
	gap: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.ctc-map {
	position: relative;
	min-height: 420px;
	background: var(--line-soft);
}

.ctc-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ctc-map__card { padding: 38px 34px; }
.ctc-map__title { font-size: 1.28rem; margin-bottom: .6em; }

.ctc-map__list {
	display: grid;
	gap: 16px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
	font-size: .94rem;
}

/* Centre the text against the 38px icon tile. Without align-items the span
   stretches to the tile height and the text renders at the top of it, sitting
   ~7px high against the icon. */
.ctc-map__list li { display: flex; align-items: center; gap: 13px; line-height: 1.55; }
.ctc-map__list li > span:last-child { min-width: 0; overflow-wrap: break-word; }
.ctc-map__list a { color: var(--body); }
.ctc-map__list a:hover { color: var(--brand-ink); }

.ctc-map__icon {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	flex: 0 0 38px;
	border-radius: 11px;
	background: var(--brand-050);
	color: var(--brand);
}

.ctc-areas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
	margin-top: 34px;
	padding: 24px 30px;
	background: #fff;
	border: 1px dashed var(--brand-100);
	border-radius: var(--radius-lg);
}

.ctc-areas__label {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted);
}

.ctc-areas__list {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ctc-areas__list li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 15px;
	background: var(--brand-050);
	border: 1px solid var(--brand-100);
	border-radius: 100px;
	font-size: .85rem;
	font-weight: 600;
	color: var(--brand-ink);
}

.ctc-areas__list .icon { color: var(--brand); flex: 0 0 auto; }

/* ---------------------------------------------------------
   8. Responsive
   --------------------------------------------------------- */
@media (max-width: 1200px) {
	:root { --section-y: 44px; }

	.hero__badges { --badge-h: 112px; }

	.why-us__top { gap: 48px; }
}

@media (max-width: 1080px) {
	.services__grid,
	.projects__grid,
	.post-grid { grid-template-columns: repeat(2, 1fr); }
	.process__grid { grid-template-columns: repeat(2, 1fr); }
	.step:nth-child(2)::after { display: none; }
	.footer-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 36px; }
}

/* Switch to the mobile drawer */
@media (max-width: 991px) {
	/* The bar is shorter here — keep --header-h in step with it, since every
	   hero pads against it. */
	:root { --header-h: 74px; }

	.main-navigation { display: none; }
	.nav-toggle { display: grid; }
	.header-main__inner { min-height: 74px; }
	.brand__logo { height: 58px; }

	.hero { padding: calc(var(--header-h) + 26px) 0 74px; }
	.hero__badges { --badge-h: 96px; }
	.hero__badge-label { font-size: .78rem; max-width: 150px; }

	/* Both inner-page heroes hold one height here so they stay matched
	   even though their strips carry different content. */
	.svc-hero,
	.prj-hero,
	.abt-hero,
	.ctc-hero { min-height: 545px; padding: calc(var(--header-h) + 26px) 0 74px; }
	.hero__scroll { display: none; }

	/* With the scroll cue gone the dots can take the centre. */
	.hero__slider { bottom: 38px; }
	.hero__slider-inner { justify-content: center; }
	.why-us__top { grid-template-columns: 1fr; gap: 56px; }
	.why-us__media { max-width: 560px; margin: 0 auto; }
	.why-us__content { text-align: center; }
	.section-title--left,
	.section-text--left { text-align: center; }
	.why-us__content .eyebrow { margin-inline: auto; }
	.why-us__content > .btn { margin-inline: auto; }
	.feature { text-align: left; }

	.cta-band { background-attachment: scroll; }
	.cta-band__inner { justify-content: center; text-align: center; }
	.cta-band__content { max-width: 100%; }
	.cta-band__actions { justify-content: center; }
	.cta-band .eyebrow { margin-inline: auto; }
}

@media (max-width: 860px) {
	.stats__bar { grid-template-columns: repeat(2, 1fr); gap: 6px 0; padding: 26px 14px; }
	.stat { justify-content: flex-start; padding: 16px 14px; }
	.stat:nth-child(2n) { border-right: 0; }
	.stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 767px) {
	:root { --section-y: 35px; --gutter: 18px; }

	.section-head { margin-bottom: 21px; }
	/* The desktop clamp bottoms out at 1.9rem, which is still heavy on a phone. */
	.section-title { font-size: clamp(1.42rem, 4.6vw, 1.78rem); }
	.section-text { font-size: .88rem; }
	.eyebrow { font-size: .7rem; padding: 6px 13px 6px 10px; margin-bottom: 14px; }
	.feature-list { grid-template-columns: 1fr; gap: 22px; }
	/* The blurb under each why-us point. */
	.feature__title { font-size: .98rem; }
	.feature__text { font-size: .84rem; }
	.step__text { font-size: .84rem; }
	.step::after { display: none !important; }

	.services__grid,
	.projects__grid,
	.post-grid { grid-template-columns: 1fr; }

	/* Card copy: smaller, and sitting closer to the bullet list under it. */
	.service-card__text { font-size: .88rem; margin-bottom: 10px; }

	.service-card__body { padding: 20px; }

	.services__foot { flex-direction: column; padding: 24px; }
	.services__foot .btn { width: 100%; }

	.testimonial { padding: 32px 26px; }
	.testimonial__quote-icon { display: none; }
	.testimonial__text { font-size: 1.02rem; }

	/* Project card overlay copy. */
	.project__meta { font-size: .8rem; }

	/* Closing CTA band and footer text, down with everything else. */
	.cta-band__text { font-size: .9rem; }
	.site-footer { font-size: .86rem; }
	.footer-about { line-height: 1.7; }
	.copyright,
	.footer-credit { font-size: .8rem; }

	.brands { margin-bottom: 29px; padding-bottom: 23px; }
	.brands__item { width: 150px; height: 62px; margin-right: 12px; padding: 12px 20px; }


	.footer-main { padding: 31px 0 0; }
	.footer-grid { grid-template-columns: 1fr; gap: 40px; }
	.footer-bottom__inner { flex-direction: column; text-align: center; }

	.cta-band { padding: 35px 0; }
	.cta-band__actions { flex-direction: column; align-items: stretch; width: 100%; }
	.cta-band__actions .btn { width: 100%; }
	.cta-band__call { justify-content: center; }
}

@media (max-width: 520px) {
	.brand__logo { height: 50px; }


	.hero,
	.svc-hero,
	.prj-hero,
	.abt-hero,
	.ctc-hero { padding: calc(var(--header-h) + 18px) 0 62px; }
	.hero__title,
	.svc-hero__title,
	.prj-hero__title,
	.abt-hero__title,
	.ctc-hero__title { font-size: clamp(1.55rem, 7vw, 1.95rem); }
	.hero__badge { font-size: .68rem; padding: 8px 14px; }

	.hero__badges { gap: 14px 18px; }
	.hero__badges { --badge-h: 74px; }
	.hero__badge-label { font-size: .7rem; max-width: 112px; }

	/* Two stats per row on phones — smaller icon and type so the pair fits. */
	.stats__bar { grid-template-columns: repeat(2, 1fr); gap: 4px 0; padding: 20px 8px; }
	.stat { gap: 9px; padding: 12px 8px; }
	.stat:nth-child(2n) { border-right: 0; }
	.stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
	.stat__icon { width: 36px; height: 36px; flex-basis: 36px; border-radius: 11px; }
	.stat__icon svg { width: 18px; height: 18px; }
	.stat__value { font-size: 1.25rem; }
	.stat__label { font-size: .66rem; line-height: 1.3; }


	.why-us__inset { width: 150px; }
	.why-us__media { padding: 0 0 30px 26px; }

	.slider__controls { gap: 14px; }
	.entry-placeholder { padding: 30px 22px; }

	.to-top { right: 16px; bottom: 80px; width: 44px; height: 44px; }
	.whatsapp-float { right: 16px; bottom: 18px; width: 50px; height: 50px; }
}

/* --- Services page responsive --- */
@media (max-width: 1200px) {
	.svc-detail__inner { gap: 48px; }
	.faq__inner { gap: 44px; }
	.included__grid { gap: 18px; }
}

@media (max-width: 1080px) {
	.included__grid { grid-template-columns: repeat(2, 1fr); }
	.industries__grid { grid-template-columns: repeat(2, 1fr); }
	.faq__inner { grid-template-columns: 1fr; gap: 40px; }
	.faq__intro { position: static; text-align: center; }
	.faq__intro .eyebrow { margin-inline: auto; }
	.faq__cta { justify-content: center; }
}

@media (max-width: 991px) {
	.svc-detail { padding: 37px 0; }
	.svc-detail__inner { grid-template-columns: 1fr; gap: 46px; }
	/* Image always leads on narrow screens, whatever the desktop order was. */
	.svc-detail--flip .svc-detail__media { order: 0; }
	.svc-detail__media { max-width: 620px; margin: 0 auto; width: 100%; }

	/* Stacked, the copy centres under the image the way the home page's
	   why-us block does; the tick list stays left-aligned so its icons still
	   line up, but the block itself sits in the middle. */
	.svc-detail__content { max-width: 620px; margin-inline: auto; text-align: center; }
	.svc-detail__list { width: fit-content; margin-inline: auto; text-align: left; }
	.svc-detail__tags ul { justify-content: center; }
}

@media (max-width: 767px) {
	.svc-detail { padding: 29px 0; }
	.svc-detail__list { grid-template-columns: 1fr; gap: 11px; }

	/* Home page phone sizes: .section-title / .section-text and the service
	   card copy. */
	.svc-detail__title { font-size: clamp(1.42rem, 4.6vw, 1.78rem); }
	.svc-detail__text { font-size: .88rem; }
	.included__text { font-size: .88rem; }

	.included__grid { grid-template-columns: 1fr; }
	.industries__grid { grid-template-columns: 1fr; }

	.faq__toggle { padding: 18px 18px; font-size: .96rem; gap: 14px; }
	.faq__panel { padding: 0 18px 20px; }
	.faq__cta { flex-direction: column; align-items: stretch; }
	.faq__cta .btn { width: 100%; }
	.faq__cta .link-arrow { justify-content: center; }
}

@media (max-width: 520px) {
	.svc-detail__media { margin-inline: 4px; }
}

/* --- Projects page responsive --- */
@media (max-width: 1200px) {
	.prj-body__inner { gap: 40px; }
}

@media (max-width: 1080px) {
	.prj-related .projects__grid { grid-template-columns: repeat(2, 1fr); }
	.prj-fact { padding-inline: 12px; }
	.prj-body__inner { grid-template-columns: 1fr; gap: 44px; }
	.prj-body__aside { position: static; grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.prj-related .projects__grid { grid-template-columns: 1fr; }

	.prj-facts { margin-top: -16px; }
	.prj-facts__bar { grid-auto-flow: row; padding: 18px 14px; }
	.prj-fact { border-right: 0; padding: 14px 12px; }
	.prj-fact:not(:last-child) { border-bottom: 1px solid var(--line-soft); }

	.prj-body__aside { grid-template-columns: 1fr; }
}

/* Taxonomy archive reuses the projects hero at a shorter height. */
/* Small phones: keep the three hero badges on one line. Each takes an equal
   share of the row and the badge height follows the viewport, so they shrink
   together instead of the last one wrapping. 17vw keeps the wide stamp inside
   its third down to 320px. */
@media (max-width: 400px) {
	.hero__badges {
		--badge-h: clamp(50px, 17vw, 74px);
		flex-wrap: nowrap;
		gap: 10px;
	}

	.hero__badges li { flex: 1 1 0; min-width: 0; gap: 9px; }
	.hero__badge-label { max-width: none; font-size: .64rem; }
}

@media (max-width: 400px) {
	.svc-hero,
	.prj-hero,
	.abt-hero,
	.ctc-hero { min-height: 575px; }
}

.prj-hero--compact { min-height: 0; padding: 38px 0 42px; }

.prj-hero--compact .prj-hero__text { margin-bottom: 26px; }

@media (max-width: 767px) {
	.prj-hero--compact { padding: 26px 0 30px; }
}

/* --- About page responsive --- */
@media (max-width: 1200px) {
	.abt-story__inner { gap: 48px; }
}

@media (max-width: 1080px) {
	.abt-values { grid-template-columns: repeat(2, 1fr); }
	.abt-roles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {

	.abt-story__inner { grid-template-columns: 1fr; gap: 56px; }
	.abt-story__media { max-width: 460px; margin: 0 auto; }
	.abt-story__content { text-align: center; }
	.abt-story__content .eyebrow { margin-inline: auto; }
	.abt-story__stats { text-align: center; }
	.abt-story__stat-icon { margin-inline: auto; }

	.abt-pillars { grid-template-columns: 1fr; gap: 20px; margin-bottom: 34px; }
}

@media (max-width: 767px) {
	.abt-story__media { padding: 0 0 28px 26px; }
	.abt-story__inset { width: 140px; }
	.abt-story__stats { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }

	/* Home page phone sizes: .section-text for the story copy, and the
	   service card copy for every card. */
	.abt-story__content p:not(.eyebrow) { font-size: .88rem; }
	.abt-pillar__text,
	.abt-value__text,
	.abt-role__text { font-size: .88rem; }

	.abt-pillar { padding: 30px 24px; }
	.abt-values { grid-template-columns: 1fr; }
	.abt-roles { grid-template-columns: 1fr; }
}

/* --- Contact page responsive --- */
@media (max-width: 1200px) {
	.ctc-form__layout { gap: 38px; }
	.ctc-map__card { padding: 30px 26px; }
}

@media (max-width: 1080px) {
	.ctc-methods__grid { grid-template-columns: repeat(2, 1fr); }
	.ctc-form__layout { grid-template-columns: 1fr; gap: 44px; }
	.ctc-form__aside { position: static; }
	.ctc-map__wrap { grid-template-columns: 1fr; }
	.ctc-map { min-height: 340px; }
}

@media (max-width: 991px) {
}

@media (max-width: 767px) {
	.ctc-methods { margin-top: -19px; }
	.ctc-methods__grid { grid-template-columns: 1fr; gap: 14px; }

	.ctc-form__row { grid-template-columns: 1fr; gap: 0; }
	.ctc-form__submit .btn { width: 100%; }

	.ctc-map { min-height: 280px; }
	.ctc-areas { flex-direction: column; align-items: flex-start; padding: 20px 22px; }

	.ctc-card--full {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		gap: 20px;
		padding: 28px 24px;
	}
	.ctc-card--full__content p { max-width: 100%; }
	.ctc-card--full__actions { align-items: stretch; }
	.ctc-card--full__actions .btn { width: 100%; }
}

/* ---------------------------------------------------------
   9. Motion system
   [data-anim] elements start hidden and are revealed by main.js
   adding .is-in. --d sets a per-element delay, --stagger is applied
   automatically to children of [data-stagger].
   --------------------------------------------------------- */

.js [data-anim] {
	opacity: 0;
	transition:
		opacity .72s cubic-bezier(.22, 1, .36, 1),
		transform .72s cubic-bezier(.22, 1, .36, 1),
		filter .72s ease;
	transition-delay: var(--d, 0ms);
	will-change: opacity, transform;
}

.js [data-anim="up"]    { transform: translateY(34px); }
.js [data-anim="down"]  { transform: translateY(-28px); }
.js [data-anim="left"]  { transform: translateX(44px); }
.js [data-anim="right"] { transform: translateX(-44px); }

/*
 * Below the stacking breakpoint the container spans almost the whole viewport,
 * so an un-revealed element offset to the right extends the scrollable area and
 * produces a horizontal scrollbar. Reveal vertically instead once stacked.
 */
@media (max-width: 991px) {
	.js [data-anim="left"],
	.js [data-anim="right"] { transform: translateY(34px); }
}
.js [data-anim="zoom"]  { transform: scale(.92); }
/* "fade" sets no transform of its own, so an element that carries one (e.g. the
   hero wall's cursor parallax) keeps it. */
.js [data-anim="blur"]  { filter: blur(10px); transform: translateY(20px); }

.js [data-anim="flip"] {
	transform: perspective(900px) rotateX(-14deg) translateY(28px);
	transform-origin: top center;
}

.js [data-anim].is-in {
	opacity: 1;
	filter: none;
}

/* Only the variants that actually offset the element clear their transform on
   reveal — clearing it globally would also wipe an element's own transform. */
.js [data-anim="up"].is-in,
.js [data-anim="down"].is-in,
.js [data-anim="left"].is-in,
.js [data-anim="right"].is-in,
.js [data-anim="zoom"].is-in,
.js [data-anim="blur"].is-in,
.js [data-anim="flip"].is-in { transform: none; }

/* Children reveal one after another */
.js [data-stagger] > * {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity .66s cubic-bezier(.22, 1, .36, 1),
		transform .66s cubic-bezier(.22, 1, .36, 1);
}

.js [data-stagger].is-in > * {
	opacity: 1;
	transform: none;
}

/* Delay ramp — covers grids up to 12 items. */
.js [data-stagger].is-in > *:nth-child(1)  { transition-delay: 0ms; }
.js [data-stagger].is-in > *:nth-child(2)  { transition-delay: 70ms; }
.js [data-stagger].is-in > *:nth-child(3)  { transition-delay: 140ms; }
.js [data-stagger].is-in > *:nth-child(4)  { transition-delay: 210ms; }
.js [data-stagger].is-in > *:nth-child(5)  { transition-delay: 280ms; }
.js [data-stagger].is-in > *:nth-child(6)  { transition-delay: 350ms; }
.js [data-stagger].is-in > *:nth-child(7)  { transition-delay: 420ms; }
.js [data-stagger].is-in > *:nth-child(8)  { transition-delay: 490ms; }
.js [data-stagger].is-in > *:nth-child(9)  { transition-delay: 560ms; }
.js [data-stagger].is-in > *:nth-child(10) { transition-delay: 630ms; }
.js [data-stagger].is-in > *:nth-child(11) { transition-delay: 700ms; }
.js [data-stagger].is-in > *:nth-child(12) { transition-delay: 770ms; }

/* Reading-progress bar under the header */
.scroll-progress {
	position: fixed;
	top: 0; left: 0;
	z-index: 120;
	height: 3px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background: linear-gradient(90deg, var(--brand), var(--sky));
	pointer-events: none;
}

/* Elements that drift as the page scrolls; --sp is set by main.js. */
[data-parallax] {
	transform: translate3d(0, calc(var(--sp, 0) * 1px), 0);
	will-change: transform;
}

/* ---- Hover polish across the site ---- */

/* Cards lift with a soft brand glow */
.service-card,
.project,
.ctc-method,
.step,
.post-card {
	will-change: transform;
}

/* Sweep of light across service cards */
.service-card__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .34) 50%, transparent 62%);
	transform: translateX(-120%);
	transition: transform .85s cubic-bezier(.22, 1, .36, 1);
	pointer-events: none;
}

.service-card:hover .service-card__media::before { transform: translateX(120%); }

.service-card:hover .service-card__title { color: var(--brand-ink); }
.service-card__title { transition: color var(--t-fast); }

/* Stat icons pulse when their row appears */
.stat__icon { transition: transform var(--t), background var(--t-fast); }
.stat:hover .stat__icon { transform: translateY(-4px) rotate(-6deg); background: var(--brand-100); }

/* Filter pills nudge */
/* The marquee track is what moves, so that is what gets the hint. */
.brands__track { will-change: transform; }

/* Footer links already slide; add the service list too */
.footer-links a { will-change: transform; }

/* Give the section titles a subtle underline grow */
.section-head .section-title { position: relative; display: inline-block; }

.section-head .section-title::after {
	content: "";
	position: absolute;
	left: 50%; bottom: -12px;
	width: 0; height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--brand), var(--sky));
	transform: translateX(-50%);
	transition: width .9s cubic-bezier(.22, 1, .36, 1) .25s;
}

.section-head.is-in .section-title::after { width: 64px; }

@media (prefers-reduced-motion: reduce) {
	[data-anim],
	[data-stagger] > * {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}

	.scroll-progress { display: none; }
	[data-parallax] { transform: none !important; }
	.live-dot,
	.hero__scroll-mouse span { animation: none !important; }
	.section-head .section-title::after { transition: none; }

	/* No scroll: show one static, centred row and drop the duplicate copy. */
	.brands__track {
		animation: none !important;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}

	.brands__item[aria-hidden="true"] { display: none; }
}

/* On narrow screens the rotating word is the last thing on its line, so there
   is nothing to its right to shift: drop the reserved width and let the box
   track whatever word is showing, instead of every word sitting in
   "Warehouses" worth of space. The active word goes back in flow to set that
   width (relative + inline-block so its transform still applies); the word on
   its way out stays absolute, pinned left, and overlays it for the crossfade. */
@media (max-width: 991px) {
	.rotator__ghost { display: none; }
	.rotator__word { text-align: left; }
	.rotator__word.is-active { position: relative; display: inline-block; }
	.rotator__word.is-leaving { inset: 0 auto auto 0; }
}

/* Hero CTAs stay side by side on phones: equal-width flex items that shrink
   to fit rather than wrapping or stacking full-width. Starts at 600px, which
   is where the pair stops fitting at full size. */
@media (max-width: 600px) {
	.svc-hero__actions,
	.ctc-hero__actions {
		gap: 10px;
		width: 100%;
	}

	.svc-hero__actions .btn,
	.ctc-hero__actions .btn {
		min-width: 0;
		padding: 12px 10px;
		font-size: .78rem;
		gap: 6px;
	}
}

/* Small phones: the pair still shares a line, so tighten the type to keep both
   labels off the clip (clipped nowrap text also widened the page). */
@media (max-width: 420px) {
	.svc-hero__actions,
	.ctc-hero__actions { gap: 8px; }

	.svc-hero__actions .btn,
	.ctc-hero__actions .btn {
		padding: 12px 6px;
		font-size: .72rem;
	}
}

/* Very small phones: the brand lockup is flex: 0 0 auto, so its tagline cannot
   shrink and was pushing the hamburger past the right edge. Drop the tagline
   (illegible at this size anyway) and let the name shrink. */
@media (max-width: 420px) {
	.site-branding { min-width: 0; }
	.brand { min-width: 0; gap: 9px; }
	.brand__logo { height: 44px; width: 111px; }
	.header-main__inner { gap: 12px; }
}

/* Badge now sits above the monitoring wall rather than above the headline. */
.hero__badge { margin-bottom: 16px; }

@media (max-width: 991px) {
}

@media (max-width: 767px) {
	.hero__lead,
	.svc-hero__text,
	.prj-hero__text,
	.abt-hero__text,
	.ctc-hero__text { font-size: .9rem; }
	.hero__badge { font-size: .64rem; padding: 7px 13px; letter-spacing: .07em; }
}

/* Mosaic keeps the wall readable as the copy narrows: on phones the lead tile
   takes more height and the bottom row drops to two tiles so each stays legible. */
@media (max-width: 767px) {
	.hero__mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: 58% 42%; }
	.hero__tile:last-child { display: none; }
	.hero__inner > *,
	.svc-hero__inner > *,
	.prj-hero__inner > *,
	.abt-hero__inner > *,
	.ctc-hero__inner > * { max-width: 100%; }
}

/* Sections whose columns reveal horizontally: an un-revealed element offset to
   the right extends the scrollable area at any width where the container runs
   close to the viewport. Clip that axis — `clip` (not `hidden`) so no scroll
   container is created and sticky children keep working. */
.why-us,
.abt-story {
	overflow-x: clip;
}

/* Header call block only appears once the brand, nav and CTA all fit alongside
   it — below this it pushed the row past the right edge. */
@media (max-width: 1300px) {
	.header-call { display: none; }
}