/**
 * FLEXA — main stylesheet.
 *
 * Colour tokens (--flexa-navy, --flexa-orange, --flexa-ink and the shades
 * derived from them) are injected by inc/enqueue.php from the Customizer, so
 * changing a brand colour there updates every component here.
 *
 * 1.  Reset and base
 * 2.  Layout primitives
 * 3.  Typography
 * 4.  Buttons
 * 5.  Top bar and waves
 * 6.  Masthead and navigation
 * 7.  Hero
 * 8.  Pillars
 * 9.  Story
 * 10. Cards and grids
 * 11. Services grid
 * 12. Partners
 * 13. CTA band
 * 14. Page header and breadcrumbs
 * 15. Single templates
 * 16. Contact and forms
 * 17. Footer
 * 18. Floating actions
 * 19. WordPress core classes
 * 20. Responsive
 */

/* ---------------------------------------------------- 1. Reset and base -- */

:root {
	--flexa-navy: #282c69;
	--flexa-navy-dark: #1d2150;
	--flexa-navy-deep: #12142f;
	--flexa-navy-soft: #949ac0;
	--flexa-navy-tint: #eceded;
	--flexa-orange: #ef5a1e;
	--flexa-orange-dark: #c44a18;
	--flexa-ink: #1b1f4b;
	--flexa-muted: #5a5f86;

	--flexa-page-bg: #ffffff;
	--flexa-surface: #f1f1f3;
	--flexa-lavender: #aab0d1;
	--flexa-line: #e4e5ee;

	--flexa-radius: 28px;
	--flexa-radius-sm: 14px;
	--flexa-radius-pill: 999px;

	--flexa-shadow: 0 18px 40px -24px rgba(24, 28, 70, 0.45);
	--flexa-shadow-lg: 0 28px 60px -30px rgba(24, 28, 70, 0.55);

	--flexa-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--flexa-section-y: clamp(3rem, 5.2vw, 5rem);
	--flexa-max: 1240px;

	--flexa-hero-overlay: 0.62;

	/* Height of the swoosh the footer overlays the page with. Sections that
	   should sit behind it reserve this much room, so a tall curve costs a
	   band of empty page above the footer — kept modest here, and only made
	   dramatic on the homepage where it crosses a photograph. */
	--flexa-footer-wave: clamp(38px, 4vw, 68px);
}

body.flexa-home {
	--flexa-footer-wave: clamp(64px, 8vw, 130px);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	margin: 0;
	background-color: var(--flexa-page-bg);
	background-image: url("../img/svg/texture-light.svg");
	background-size: 540px 540px;
	color: var(--flexa-ink);
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
}

a {
	color: var(--flexa-navy);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover,
a:focus-visible {
	color: var(--flexa-orange);
}

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

button {
	font: inherit;
	color: inherit;
}

hr {
	border: 0;
	border-top: 1px solid var(--flexa-line);
	margin: 2.5rem 0;
}

::selection {
	background: var(--flexa-orange);
	color: #fff;
}

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

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--flexa-navy);
	color: #fff;
	border-radius: 0 0 var(--flexa-radius-sm) var(--flexa-radius-sm);
	text-decoration: none;
}

.skip-link:focus {
	top: 0;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	color: #fff;
}

/* ------------------------------------------------ 2. Layout primitives -- */

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

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

/* The footer swoosh is drawn above the footer's own box, so every page
   reserves that much room at the end of its content. A full-bleed closing
   band stretches its background into the reserved strip instead. */
.site-main {
	padding-bottom: var(--flexa-footer-wave);
}

.container {
	width: min(100% - (var(--flexa-gutter) * 2), var(--flexa-max));
	margin-inline: auto;
}

.container--narrow {
	width: min(100% - (var(--flexa-gutter) * 2), 820px);
}

.section {
	padding-block: var(--flexa-section-y);
	position: relative;
}

.section--products,
.section--projects {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(241, 241, 243, 0.55) 100%);
}

.section__action {
	margin-top: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.section-head {
	max-width: 720px;
	margin: 0 auto clamp(2rem, 4vw, 3.25rem);
	text-align: center;
}

.section-head__title {
	margin: 0;
	font-size: clamp(1.45rem, 1.1rem + 1.25vw, 1.95rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--flexa-navy);
}

.section-head__title::after {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	margin: 0.85rem auto 0;
	border-radius: 2px;
	background: var(--flexa-orange);
}

.section-head__intro {
	margin: 1rem 0 0;
	color: var(--flexa-muted);
	font-size: 0.9375rem;
}

/* .grid is used by the theme's own templates and sizes itself to the space it
   has. .flexa-grid is the wrapper the plugin's shortcodes and blocks emit,
   where the editor has asked for a specific number of columns — so that count
   is honoured on desktop and only collapses on narrow screens. Without a rule
   here at all, a grid placed with [flexa_products] stacks one card per row. */
.grid,
.flexa-grid {
	display: grid;
	gap: clamp(1.25rem, 2.4vw, 2rem);
}

.grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.flexa-grid {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
	.flexa-grid--2,
	.flexa-grid--3,
	.flexa-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.flexa-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.flexa-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------- 3. Typography ----- */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.6em;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--flexa-navy);
}

h1 {
	font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.45rem);
}

h2 {
	font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.85rem);
}

h3 {
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
}

p {
	margin: 0 0 1.15em;
}

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

strong {
	font-weight: 600;
}

blockquote {
	margin: 2rem 0;
	padding: 1.25rem 0 1.25rem 1.75rem;
	border-inline-start: 4px solid var(--flexa-orange);
	color: var(--flexa-navy);
	font-size: 1.125rem;
}

code,
pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

pre {
	overflow-x: auto;
	padding: 1.25rem;
	background: var(--flexa-navy-deep);
	color: #eef0ff;
	border-radius: var(--flexa-radius-sm);
}

table {
	width: 100%;
	border-collapse: collapse;
}

/* ------------------------------------------------------- 4. Buttons ----- */

.flexa-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.4rem;
	border: 2px solid transparent;
	border-radius: var(--flexa-radius-pill);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.flexa-btn:hover,
.flexa-btn:focus-visible {
	transform: translateY(-2px);
}

.flexa-btn .flexa-icon {
	transition: transform 0.2s ease;
}

.flexa-btn:hover .flexa-icon {
	transform: translateX(3px);
}

.flexa-btn--primary {
	background: var(--flexa-orange);
	border-color: var(--flexa-orange);
	color: #fff;
}

.flexa-btn--primary:hover,
.flexa-btn--primary:focus-visible {
	background: var(--flexa-orange-dark);
	border-color: var(--flexa-orange-dark);
	color: #fff;
}

.flexa-btn--ghost {
	background: transparent;
	border-color: var(--flexa-navy);
	color: var(--flexa-navy);
}

.flexa-btn--ghost:hover,
.flexa-btn--ghost:focus-visible {
	background: var(--flexa-navy);
	color: #fff;
}

.flexa-btn--light {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.75);
	color: #fff;
	backdrop-filter: blur(4px);
}

.flexa-btn--light:hover,
.flexa-btn--light:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--flexa-navy);
}

/* --------------------------------------------- 5. Top bar and waves ----- */

.flexa-wave {
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	line-height: 0;
	pointer-events: none;
	z-index: 2;
}

.flexa-wave svg {
	display: block;
	width: 100%;
	height: clamp(38px, 5vw, 74px);
}

.flexa-wave--flip {
	bottom: auto;
	top: -1px;
	transform: scaleY(-1);
}

.topbar {
	position: relative;
	background-color: var(--flexa-navy);
	background-image: url("../img/svg/texture-navy.svg");
	background-size: 340px 340px;
	color: #fff;
	padding-block: 0.5rem clamp(2.5rem, 4vw, 3.75rem);
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	position: relative;
	z-index: 3;
}

.topbar__tagline {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.topbar__search {
	flex: 0 1 320px;
}

.topbar .search-form {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.92);
	border-radius: var(--flexa-radius-pill);
	padding: 0.15rem 0.35rem 0.15rem 1rem;
}

.topbar .search-form__field {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0.4rem 0;
	font-size: 0.875rem;
	color: var(--flexa-ink);
}

.topbar .search-form__field:focus {
	outline: none;
}

.topbar .search-form__submit {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--flexa-navy);
	cursor: pointer;
}

.topbar .search-form__submit:hover {
	color: var(--flexa-orange);
}

/* ------------------------------------- 6. Masthead and navigation ------- */

.masthead {
	position: relative;
	z-index: 40;
	background: #fff;
	padding-block: 0.75rem;
}

.has-sticky-header .masthead {
	position: sticky;
	top: 0;
}

.masthead.is-stuck {
	box-shadow: 0 10px 30px -18px rgba(24, 28, 70, 0.5);
}

.masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.site-branding__link {
	display: block;
	line-height: 0;
}

.site-branding .flexa-logo,
.site-branding__image {
	width: clamp(132px, 15vw, 178px);
	height: auto;
}

.footer .site-branding .flexa-logo {
	width: clamp(150px, 18vw, 210px);
}

.nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
}

.nav__list,
.nav ul {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 1.8vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__list li {
	position: relative;
}

.nav__list a {
	display: block;
	padding: 0.45rem 0;
	color: var(--flexa-navy);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.nav__list > li > a::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 3px;
	border-radius: 2px;
	background: var(--flexa-orange);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

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

.nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	inset-inline-start: -1rem;
	display: block;
	min-width: 220px;
	padding: 0.5rem;
	background: #fff;
	border-radius: var(--flexa-radius-sm);
	box-shadow: var(--flexa-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

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

.nav__list .sub-menu a {
	padding: 0.55rem 0.75rem;
	border-radius: 8px;
	white-space: normal;
}

.nav__list .sub-menu a:hover {
	background: var(--flexa-navy-tint);
}

.menu-toggle-sub {
	display: none;
}

.nav__cta .flexa-btn {
	padding: 0.72rem 1.35rem;
	font-size: 0.8125rem;
}

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 2px solid var(--flexa-navy);
	border-radius: 12px;
	background: transparent;
	color: var(--flexa-navy);
	cursor: pointer;
}

.menu-toggle__close {
	display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__open {
	display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
	display: block;
}

/* ---------------------------------------------------------- 7. Hero ----- */

.hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(540px, 78vh, 820px);
	padding-block: clamp(4rem, 9vw, 7rem) clamp(6rem, 11vw, 9rem);
	background-color: var(--flexa-navy-deep);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
	color: #fff;
	isolation: isolate;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(18, 20, 47, calc(var(--flexa-hero-overlay) * 0.85)) 0%,
		rgba(40, 44, 105, var(--flexa-hero-overlay)) 100%
	);
}

.hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.hero__mark .flexa-logo {
	width: clamp(250px, 31vw, 430px);
}

.hero__title {
	margin: 0;
	max-width: 20ch;
	color: #fff;
	font-size: clamp(1.65rem, 1.15rem + 2.2vw, 2.7rem);
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: 0.01em;
}

.hero__subtitle {
	margin: 0;
	max-width: 54ch;
	color: rgba(255, 255, 255, 0.85);
	font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.0625rem);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.85rem;
	margin-top: 0.75rem;
}

/* ------------------------------------------------------- 8. Pillars ----- */

.section--pillars {
	padding-top: 0;
	margin-top: clamp(-5.5rem, -6vw, -3.5rem);
	position: relative;
	z-index: 5;
}

.pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(1.25rem, 2.4vw, 2rem);
	align-items: stretch;
}

.pillar {
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: var(--flexa-surface);
	border-radius: var(--flexa-radius);
	box-shadow: var(--flexa-shadow);
	text-align: center;
}

.pillar__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.pillar__icon {
	display: grid;
	place-items: center;
	color: var(--flexa-orange);
}

.pillar__title {
	margin: 0;
	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
	font-weight: 600;
	color: var(--flexa-navy);
}

.pillar__text,
.pillar__list {
	margin: 0;
	color: var(--flexa-navy);
	font-size: 0.875rem;
	line-height: 1.6;
}

.pillar__list {
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
	text-align: start;
}

.pillar__list li {
	padding-inline-start: 1.15rem;
	position: relative;
}

.pillar__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--flexa-orange);
}

.pillar__list strong {
	color: var(--flexa-navy);
	font-weight: 600;
}

/* --------------------------------------------------------- 9. Story ---- */

.section--story {
	text-align: center;
}

.story__text {
	color: var(--flexa-navy);
	font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
	line-height: 1.72;
}

.story__action {
	margin-top: 2rem;
}

/* ------------------------------------------------ 10. Cards and grids --- */

.card {
	position: relative;
	margin: 0;
	border-radius: var(--flexa-radius);
	overflow: hidden;
	background: var(--flexa-lavender);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.card:hover,
.card:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--flexa-shadow-lg);
}

.card__link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.card__media {
	position: relative;
	aspect-ratio: 4 / 3.2;
	overflow: hidden;
	background: var(--flexa-lavender);
}

.card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.card:hover .card__image {
	transform: scale(1.05);
}

.card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background:
		url("../img/svg/texture-navy.svg") center / 340px 340px,
		linear-gradient(140deg, var(--flexa-navy) 0%, var(--flexa-navy-dark) 100%);
}

.card__placeholder--1 {
	background:
		url("../img/svg/texture-navy.svg") center / 340px 340px,
		linear-gradient(140deg, var(--flexa-navy-dark) 0%, var(--flexa-navy-deep) 100%);
}

.card__placeholder--2 {
	background:
		url("../img/svg/texture-navy.svg") center / 340px 340px,
		linear-gradient(140deg, var(--flexa-navy-deep) 0%, var(--flexa-navy) 100%);
}

.card__placeholder .flexa-logo {
	width: 46%;
	opacity: 0.5;
}

/* A product still waiting on its photography keeps the same lavender tile as
   the rest of the row, so the grid reads as one set rather than one broken
   card among finished ones. */
.card--product .card__placeholder {
	background: none;
}

.card--product .card__placeholder .flexa-logo {
	width: 42%;
	opacity: 0.3;
}

/* Product tiles: the render is a cut-out, so it floats on the lavender tile
   with the name above it and the descriptive label below, as designed. */

.card--product {
	background: linear-gradient(160deg, #b9bede 0%, var(--flexa-lavender) 55%, #9aa1c6 100%);
}

.card--product .card__media {
	aspect-ratio: 4 / 3.35;
	background: transparent;
	overflow: hidden;
}

/* The cut-out is positioned against the tile with explicit percentages. Auto
   sizing is no good here: on a grid child a percentage height resolves against
   an indefinite row, and an absolutely positioned replaced element with auto
   width falls back to its intrinsic size — both let the render spill out. */
.card--product .card__image {
	position: absolute;
	top: 9%;
	inset-inline-start: 3%;
	width: 94%;
	height: 82%;
	max-width: none;
	object-fit: contain;
	filter: drop-shadow(0 14px 22px rgba(24, 28, 70, 0.3));
}

/*
 * A picture with no transparency was never cut out — it is a photograph or a
 * rendered scene with a background of its own, and floating it on the tile
 * would frame it in a colour it was never drawn for. Those fill the card.
 */
.card--product.card--bleed .card__image {
	position: static;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: none;
}

.card--product:hover .card__image {
	transform: scale(1.04);
}

.card--product .card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(1rem, 2vw, 1.4rem);
	/* A soft navy scrim top and bottom so the white labels stay legible on the
	   lavender tile, while the middle stays clear for the render. */
	background: linear-gradient(
		180deg,
		rgba(35, 39, 92, 0.62) 0%,
		rgba(35, 39, 92, 0.16) 22%,
		rgba(35, 39, 92, 0) 40%,
		rgba(29, 33, 80, 0) 58%,
		rgba(29, 33, 80, 0.24) 78%,
		rgba(29, 33, 80, 0.68) 100%
	);
	color: #fff;
	pointer-events: none;
}

.card--product .card__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);
	font-weight: 600;
	line-height: 1.25;
	text-shadow: 0 1px 10px rgba(24, 28, 70, 0.35);
}

.card--product .card__foot {
	display: grid;
	gap: 0.35rem;
}

.card--product .card__subtitle {
	margin: 0;
	color: rgba(255, 255, 255, 0.94);
	font-size: 0.8125rem;
	font-weight: 500;
	text-shadow: 0 1px 10px rgba(24, 28, 70, 0.45);
}

.card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #fff;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.card:hover .card__more,
.card:focus-within .card__more {
	opacity: 1;
	transform: translateY(0);
}

/* Project and post cards keep a readable text block under the image. */

.card--project,
.card--post {
	background: #fff;
	border: 1px solid var(--flexa-line);
}

.card--project .card__body,
.card--post .card__body {
	padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

.card__eyebrow {
	margin: 0 0 0.4rem;
	color: var(--flexa-orange);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.card--project .card__title,
.card--post .card__title {
	margin: 0 0 0.4rem;
	font-size: 1.0625rem;
}

.card__summary {
	margin: 0;
	color: var(--flexa-muted);
	font-size: 0.8125rem;
	line-height: 1.55;
}

/* -------------------------------------------------- 11. Services grid -- */

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(1.25rem, 2.4vw, 2rem);
}

@media (min-width: 900px) {
	.services-grid--feature {
		grid-template-columns: repeat(6, 1fr);
	}

	.services-grid--feature .card--wide {
		grid-column: span 3;
	}

	.services-grid--feature .card:not(.card--wide) {
		grid-column: span 2;
	}
}

.card--service {
	background: var(--flexa-navy);
}

.card--service .card__media {
	aspect-ratio: 4 / 3;
}

.card--service.card--wide .card__media {
	aspect-ratio: 16 / 10;
}

/* The photography carries the brand's red accents, so it is only lightly
   knocked back rather than desaturated, and comes to full colour on hover. */
.card--service .card__image {
	filter: saturate(0.82) contrast(1.04);
	transition: transform 0.5s ease, filter 0.4s ease;
}

.card--service:hover .card__image {
	filter: saturate(1.05) contrast(1.04);
}

.card--service .card__wash {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(24, 28, 70, 0.12) 0%,
		rgba(29, 33, 80, 0.18) 45%,
		rgba(24, 28, 70, 0.82) 100%
	);
	transition: background 0.3s ease;
}

.card--service:hover .card__wash {
	background: linear-gradient(
		180deg,
		rgba(24, 28, 70, 0.06) 0%,
		rgba(29, 33, 80, 0.24) 45%,
		rgba(24, 28, 70, 0.9) 100%
	);
}

.card--service .card__overlay {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: clamp(1.25rem, 2.4vw, 2rem);
	color: #fff;
	pointer-events: none;
}

.card--service .card__icon {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 0.85rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.card--service .card__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);
	font-weight: 600;
}

.card--service .card__summary {
	margin: 0.45rem 0 0;
	max-width: 46ch;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.8125rem;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity 0.3s ease, max-height 0.3s ease;
}

.card--service:hover .card__summary,
.card--service:focus-within .card__summary {
	opacity: 1;
	max-height: 6rem;
}

/* A touch screen never hovers, so show the text that hover would reveal. */
@media (hover: none) {
	.card--service .card__summary {
		opacity: 1;
		max-height: 6rem;
	}

	.card__more {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------ 12. Partners --- */

.partners {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.partner {
	display: grid;
	place-items: center;
	min-height: 120px;
	padding: 1.25rem;
	background: #fff;
	border: 1px solid var(--flexa-line);
	border-radius: var(--flexa-radius-sm);
}

.partner__logo {
	max-height: 72px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.partner:hover .partner__logo {
	filter: none;
	opacity: 1;
}

.partner__name {
	color: var(--flexa-muted);
	font-weight: 600;
	text-align: center;
}

.partners--page {
	margin-top: clamp(2rem, 4vw, 3rem);
}

/* ------------------------------------------------------ 13. CTA band --- */

.cta-band {
	position: relative;
	padding-block: clamp(4rem, 9vw, 7rem);
	background-color: var(--flexa-navy-deep);
	background-position: center;
	background-size: cover;
	text-align: center;
	color: #fff;
	isolation: isolate;
}

/* When the band closes the page, its photograph runs on under the swoosh
   instead of leaving a strip of page background behind it. */
.site-main > .cta-band:last-child {
	padding-bottom: calc(var(--flexa-footer-wave) + clamp(4rem, 9vw, 7rem));
	margin-bottom: calc(var(--flexa-footer-wave) * -1);
}

.cta-band__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(18, 20, 47, 0.72) 0%, rgba(40, 44, 105, 0.82) 100%);
}

.cta-band__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.75rem;
}

.cta-band__text {
	max-width: 58ch;
	margin: 0;
	font-size: clamp(1rem, 0.92rem + 0.5vw, 1.25rem);
	font-weight: 500;
	line-height: 1.6;
}

/* ------------------------------ 14. Page header and breadcrumbs -------- */

.page-header {
	position: relative;
	padding-block: clamp(2.25rem, 4vw, 3.25rem) clamp(3rem, 5vw, 4.25rem);
	background-color: var(--flexa-navy);
	background-position: center;
	background-size: cover;
	color: #fff;
	isolation: isolate;
}

.page-header__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(18, 20, 47, 0.82) 0%, rgba(40, 44, 105, 0.9) 100%);
}

.page-header__inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

.page-header__title {
	margin: 0.6rem 0 0;
	color: #fff;
	font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.15rem);
}

.page-header__subtitle {
	margin: 1rem auto 0;
	max-width: 60ch;
	color: rgba(255, 255, 255, 0.85);
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.7);
}

.breadcrumbs li + li::before {
	content: "/";
	margin-inline-end: 0.5rem;
	opacity: 0.5;
}

.breadcrumbs a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: #fff;
	text-decoration: underline;
}

/* ------------------------------------------- 15. Single templates ------ */

/*
 * Scoped to the article on purpose. WordPress also puts "single" on the body
 * of every singular view, so a bare .single here padded the whole document —
 * which showed up as a band of empty page above the header and below the
 * footer on every product, service and project page.
 */
article.single,
.page-article {
	padding-block: var(--flexa-section-y);
}

.single__layout {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

@media (min-width: 900px) {
	.single__layout {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	/* Nothing to show in the media column — one measured column reads far
	   better than a half-empty page. */
	.single__layout--solo {
		grid-template-columns: minmax(0, 1fr);
		max-width: 880px;
	}

	.single__media {
		position: sticky;
		top: 6rem;
	}
}

.single__figure {
	margin: 0;
	border-radius: var(--flexa-radius);
	overflow: hidden;
	background: var(--flexa-lavender);
	box-shadow: var(--flexa-shadow);
}

.single__image {
	width: 100%;
	height: auto;
}

/* A product render is a cut-out on a transparent background, so it gets the
   brand tile behind it and room to breathe rather than being pinned to the
   edges of its box. */
.single--product .single__figure {
	background: linear-gradient(160deg, #b9bede 0%, var(--flexa-lavender) 55%, #9aa1c6 100%);
	padding: 8%;
}

/* A photograph or a scene brings its own background, so it fills the frame
   rather than being inset on a colour it was never drawn for. Placed after the
   rule above deliberately: both selectors carry the same weight, so order is
   what decides. */
.single--product .single__figure--bleed {
	background: var(--flexa-lavender);
	padding: 0;
}

.single--product .single__figure--bleed .single__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.single--product .single__image {
	filter: drop-shadow(0 18px 26px rgba(24, 28, 70, 0.3));
}

/* Service and project images are photographs: give them a consistent frame so
   a portrait shot does not tower over a landscape one. */
.single--service .single__figure,
.single--project .single__figure {
	aspect-ratio: 4 / 3.1;
}

.single--service .single__image,
.single--project .single__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 0.75rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.single__gallery img {
	border-radius: var(--flexa-radius-sm);
}

.single__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 2.5rem;
}

.entry-meta {
	color: var(--flexa-muted);
	font-size: 0.875rem;
}

.entry-content > * + * {
	margin-top: 1.15em;
}

.entry-content h2,
.entry-content h3 {
	margin-top: 2em;
}

.entry-content ul,
.entry-content ol {
	padding-inline-start: 1.35rem;
}

.entry-content li + li {
	margin-top: 0.4rem;
}

.entry-content img {
	border-radius: var(--flexa-radius-sm);
}

.spec-block {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.spec-block__title {
	margin: 0 0 1.15rem;
	font-size: 1.25rem;
	color: var(--flexa-navy);
}

.tick-list {
	display: grid;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tick-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 0.9375rem;
}

.tick-list .flexa-icon {
	flex: 0 0 auto;
	margin-top: 0.25em;
	color: var(--flexa-orange);
	stroke-width: 2.4;
}

.spec-table th,
.spec-table td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--flexa-line);
	text-align: start;
	font-size: 0.9375rem;
	vertical-align: top;
}

.spec-table th {
	width: 42%;
	color: var(--flexa-muted);
	font-weight: 500;
}

.spec-table td {
	color: var(--flexa-navy);
	font-weight: 500;
}

.pill-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pill-list li {
	padding: 0.4rem 0.95rem;
	background: var(--flexa-navy-tint);
	border-radius: var(--flexa-radius-pill);
	color: var(--flexa-navy);
	font-size: 0.8125rem;
	font-weight: 500;
}

.fact-list {
	margin: 1.5rem 0 0;
	padding: 1.25rem 1.5rem;
	background: var(--flexa-surface);
	border-radius: var(--flexa-radius-sm);
}

.fact-list__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.5rem;
	border-bottom: 1px solid rgba(27, 31, 75, 0.08);
}

.fact-list__row:last-child {
	border-bottom: 0;
}

.fact-list dt {
	color: var(--flexa-muted);
	font-size: 0.875rem;
}

.fact-list dd {
	margin: 0;
	color: var(--flexa-navy);
	font-weight: 600;
	font-size: 0.875rem;
	text-align: end;
}

.section--related {
	background: var(--flexa-navy-tint);
}

.no-results {
	text-align: center;
	color: var(--flexa-muted);
}

/* ---------------------------------------------- 16. Contact and forms -- */

.contact-layout {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

@media (min-width: 900px) {
	.contact-layout {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

.contact-list {
	display: grid;
	gap: 1.25rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.contact-list__item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.contact-list__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--flexa-navy-tint);
	color: var(--flexa-orange);
}

.contact-list__body {
	display: grid;
	gap: 0.15rem;
}

.contact-list__label {
	color: var(--flexa-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.contact-list__value {
	color: var(--flexa-navy);
	font-weight: 500;
	text-decoration: none;
}

.contact-map {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	border-radius: var(--flexa-radius);
	overflow: hidden;
	line-height: 0;
}

.flexa-form-wrap {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: #fff;
	border: 1px solid var(--flexa-line);
	border-radius: var(--flexa-radius);
	box-shadow: var(--flexa-shadow);
}

.flexa-form__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.65rem);
}

.flexa-form__intro {
	margin: 0 0 1.5rem;
	color: var(--flexa-muted);
	font-size: 0.9375rem;
}

.flexa-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 1rem 1.25rem;
}

.flexa-form__field {
	margin: 0;
	display: grid;
	gap: 0.4rem;
}

.flexa-form__field--wide {
	grid-column: 1 / -1;
}

.flexa-form label {
	color: var(--flexa-navy);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.flexa-form__req {
	color: var(--flexa-orange);
}

.flexa-form input[type="text"],
.flexa-form input[type="email"],
.flexa-form input[type="tel"],
.flexa-form select,
.flexa-form textarea {
	width: 100%;
	padding: 0.75rem 0.95rem;
	border: 1.5px solid var(--flexa-line);
	border-radius: 12px;
	background: #fff;
	color: var(--flexa-ink);
	font-family: inherit;
	font-size: 0.9375rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.flexa-form textarea {
	resize: vertical;
	min-height: 120px;
}

.flexa-form input:focus,
.flexa-form select:focus,
.flexa-form textarea:focus {
	outline: none;
	border-color: var(--flexa-navy);
	box-shadow: 0 0 0 3px rgba(40, 44, 105, 0.12);
}

.flexa-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.flexa-form__consent {
	margin: 1.25rem 0 0;
}

.flexa-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
	font-size: 0.875rem;
	color: var(--flexa-muted);
}

.flexa-form__consent input {
	margin-top: 0.2rem;
	accent-color: var(--flexa-orange);
}

.flexa-form__actions {
	margin: 1.5rem 0 0;
}

.flexa-form button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.flexa-alert {
	padding: 0.95rem 1.15rem;
	margin-bottom: 1.25rem;
	border-radius: 12px;
	font-size: 0.9375rem;
	border-inline-start: 4px solid;
}

.flexa-alert--success {
	background: #eaf7ef;
	border-color: #2e8b57;
	color: #1c5c39;
}

.flexa-alert--error {
	background: #fdeeea;
	border-color: var(--flexa-orange);
	color: #93331a;
}

.notice-inline {
	padding: 1rem 1.25rem;
	background: var(--flexa-navy-tint);
	border-radius: var(--flexa-radius-sm);
	color: var(--flexa-muted);
}

.search-page__form {
	margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.search-page__form .search-form,
.error-404 .search-form {
	display: flex;
	gap: 0.5rem;
}

.search-page__form .search-form__field,
.error-404 .search-form__field {
	flex: 1;
	padding: 0.75rem 1rem;
	border: 1.5px solid var(--flexa-line);
	border-radius: var(--flexa-radius-pill);
	font-family: inherit;
	font-size: 0.9375rem;
}

.search-page__form .search-form__submit,
.error-404 .search-form__submit {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--flexa-navy);
	color: #fff;
	cursor: pointer;
}

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

/* --------------------------------------------------------- 17. Footer -- */

.footer {
	position: relative;
	z-index: 1;
	color: rgba(255, 255, 255, 0.86);
}

/* Both footer curves sit above the footer and fill downward into it, so the
   navy stays continuous with the footer body while the swoosh crosses
   whatever section is above. */
.footer .flexa-wave {
	/* Overlap the footer by a pixel. Sitting exactly on its edge left a pale
	   hairline right across the page wherever the two met on a fractional
	   device pixel. */
	top: calc((var(--flexa-footer-wave) * -1) + 1px);
	bottom: auto;
}

.footer .flexa-wave svg {
	height: calc(var(--flexa-footer-wave) + 1px);
}

.footer .flexa-wave--edge {
	z-index: 2;
}

/* The white ribbon is drawn as a stroke, so it keeps a constant thickness
   along the curve and stays parallel to the navy edge it rides above. */
.footer .flexa-wave--under {
	z-index: 1;
	top: calc((var(--flexa-footer-wave) * -1) - 24px);
	overflow: visible;
}

.footer__body {
	position: relative;
	/* Room for the swoosh is already reserved by .site-main above the footer;
	   counting it again here is what made the footer so deep. */
	padding-block: clamp( 2rem, 3.2vw, 2.75rem ) 1.5rem;
	background-color: var(--flexa-navy);
	background-image: url("../img/svg/texture-navy.svg");
	background-size: 340px 340px;
}

.footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(1.5rem, 3vw, 2.75rem);
	position: relative;
	z-index: 3;
}

.footer__about {
	margin: 1.25rem 0 0;
	max-width: 38ch;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.75);
}

.footer__heading {
	margin: 0 0 1rem;
	color: #fff;
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
	font-weight: 600;
}

.footer__contact {
	display: grid;
	gap: 0.8rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
}

.footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
}

.footer__contact .flexa-icon {
	flex: 0 0 auto;
	margin-top: 0.25em;
	color: var(--flexa-orange);
}

.footer__contact a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
}

.footer__contact a:hover {
	color: #fff;
	text-decoration: underline;
}

.footer__menu {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer__menu a {
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.8125rem;
	text-decoration: none;
}

.footer__menu a:hover {
	color: var(--flexa-orange);
}

.footer__social {
	display: flex;
	gap: 0.6rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.footer__social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	color: #fff;
}

.footer__social a:hover {
	background: var(--flexa-orange);
	border-color: var(--flexa-orange);
}

.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	position: relative;
	z-index: 3;
	margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer__copyright {
	margin: 0;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.65);
}

.footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
}

.footer__legal a {
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
}

.footer__legal a:hover {
	color: #fff;
}

.footer .widget {
	margin-bottom: 1.5rem;
}

.footer .widget a {
	color: rgba(255, 255, 255, 0.86);
}

/* ---------------------------------------------- 18. Floating actions --- */

.whatsapp-float {
	position: fixed;
	inset-block-end: 1.5rem;
	inset-inline-start: 1.5rem;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.5);
	transition: transform 0.2s ease;
}

.whatsapp-float:hover {
	transform: scale(1.06);
	color: #fff;
}

.back-to-top {
	position: fixed;
	inset-block-end: 1.5rem;
	inset-inline-end: 1.5rem;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--flexa-navy);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top span {
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-inline-start: 2px solid currentColor;
	transform: translateY(2px) rotate(45deg);
}

.back-to-top:hover {
	background: var(--flexa-orange);
}

/* ------------------------------------- 19. WordPress core classes ------ */

.alignleft {
	float: left;
	margin: 0.5rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.5rem 0 1rem 1.5rem;
}

.aligncenter {
	margin-inline: auto;
}

.alignwide {
	width: min(100vw - (var(--flexa-gutter) * 2), 1180px);
	margin-inline: auto;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.wp-caption-text,
.wp-element-caption figcaption {
	color: var(--flexa-muted);
	font-size: 0.8125rem;
	text-align: center;
}

.entry-content--full > .alignfull {
	margin-inline: 0;
	width: 100%;
}

.sticky,
.bypostauthor {
	display: block;
}

.page-links,
.pagination {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 0.75rem;
	border: 1px solid var(--flexa-line);
	border-radius: var(--flexa-radius-pill);
	color: var(--flexa-navy);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background: var(--flexa-navy);
	border-color: var(--flexa-navy);
	color: #fff;
}

.post-navigation {
	display: grid;
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--flexa-line);
}

.post-navigation .nav-links {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.post-navigation a {
	display: block;
	padding: 1rem 1.25rem;
	background: var(--flexa-navy-tint);
	border-radius: var(--flexa-radius-sm);
	text-decoration: none;
}

.nav-subtitle {
	display: block;
	color: var(--flexa-muted);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.nav-title {
	color: var(--flexa-navy);
	font-weight: 600;
}

.widget {
	margin-bottom: 2rem;
}

.widget-title {
	font-size: 1.125rem;
}

.widget ul {
	padding-inline-start: 1rem;
}

.comments-area {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--flexa-line);
}

.comment-list {
	list-style: none;
	padding: 0;
}

/* ---------------------------------------------------- 20. Responsive --- */

@media (max-width: 880px) {
	/* Below this width the button moves into the off-canvas menu; above it,
	   the menu does not exist, so hiding it here would take the main call to
	   action off the page entirely on a tablet. */
	.nav__cta {
		display: none;
	}
}

@media (max-width: 880px) {
	.menu-toggle {
		display: inline-flex;
		order: 3;
	}

	.nav {
		position: fixed;
		inset: 0;
		z-index: 90;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: 5.5rem var(--flexa-gutter) 2.5rem;
		background-color: var(--flexa-navy);
		background-image: url("../img/svg/texture-navy.svg");
		background-size: 340px 340px;
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.3s ease, visibility 0.3s;
	}

	.nav.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.masthead .menu-toggle {
		position: relative;
		z-index: 95;
	}

	.nav[aria-hidden="false"] ~ .menu-toggle,
	.menu-toggle[aria-expanded="true"] {
		border-color: #fff;
		color: #fff;
	}

	.nav__list,
	.nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.nav__list > li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	}

	.nav__list a {
		padding: 1rem 0;
		color: #fff;
		font-size: 1.0625rem;
	}

	.nav__list > li > a::after {
		display: none;
	}

	.nav__list .sub-menu {
		position: static;
		display: none;
		min-width: 0;
		padding: 0 0 0.75rem 1rem;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.nav__list li.is-open > .sub-menu {
		display: block;
	}

	.nav__list .sub-menu a {
		color: rgba(255, 255, 255, 0.8);
		font-size: 0.9375rem;
	}

	.nav__list .sub-menu a:hover {
		background: transparent;
		color: #fff;
	}

	.menu-toggle-sub {
		position: absolute;
		inset-block-start: 0.55rem;
		inset-inline-end: 0;
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.menu-toggle-sub__chevron {
		width: 9px;
		height: 9px;
		border-inline-end: 2px solid #fff;
		border-block-end: 2px solid #fff;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.2s ease;
	}

	.menu-toggle-sub[aria-expanded="true"] .menu-toggle-sub__chevron {
		transform: translateY(2px) rotate(-135deg);
	}

	.nav__cta {
		display: block;
		margin-top: 1.75rem;
	}

	.nav__cta .flexa-btn {
		justify-content: center;
		width: 100%;
	}

	body.menu-is-open {
		overflow: hidden;
	}
}

@media (max-width: 640px) {
	.topbar__search {
		display: none;
	}

	.topbar__inner {
		justify-content: center;
	}

	.section--pillars {
		margin-top: -2.5rem;
	}

	.footer__bottom {
		justify-content: center;
		text-align: center;
	}

	.whatsapp-float,
	.back-to-top {
		width: 46px;
		height: 46px;
	}
}

/* ------------------------------------- 21. Desktop reading sizes -------- */

/*
 * The base scale is tuned for phones, where the reading distance is short and
 * 15px is comfortable. On a desktop monitor the same values read as cramped,
 * so the body copy and the small supporting text step up once there is room.
 * Headings are already fluid via clamp() and are left alone.
 */
@media (min-width: 1024px) {
	body {
		font-size: 0.96875rem;
		line-height: 1.67;
	}

	.topbar__tagline {
		font-size: 0.9375rem;
	}

	.nav__list a {
		font-size: 0.96875rem;
	}

	.flexa-btn {
		padding: 0.72rem 1.45rem;
		font-size: 0.875rem;
	}

	.nav__cta .flexa-btn {
		padding: 0.7rem 1.35rem;
		font-size: 0.875rem;
	}

	.section-head__intro {
		font-size: 1rem;
	}

	.pillar__text,
	.pillar__list {
		font-size: 0.9375rem;
		line-height: 1.66;
	}

	.card__summary,
	.card--service .card__summary {
		font-size: 0.875rem;
	}

	.card--product .card__subtitle {
		font-size: 0.875rem;
	}

	.card__eyebrow {
		font-size: 0.75rem;
	}

	.card__more {
		font-size: 0.8125rem;
	}

	.card--project .card__title,
	.card--post .card__title {
		font-size: 1.0625rem;
	}

	.tick-list li,
	.spec-table th,
	.spec-table td,
	.contact-list__value,
	.fact-list dt,
	.fact-list dd {
		font-size: 0.96875rem;
	}

	.pill-list li {
		font-size: 0.875rem;
	}

	.footer__contact,
	.footer__menu a {
		font-size: 0.875rem;
	}

	.footer__about {
		font-size: 0.96875rem;
	}

	.footer__copyright,
	.footer__legal {
		font-size: 0.875rem;
	}

	.flexa-form label {
		font-size: 0.875rem;
	}

	.flexa-form input[type="text"],
	.flexa-form input[type="email"],
	.flexa-form input[type="tel"],
	.flexa-form select,
	.flexa-form textarea {
		font-size: 0.96875rem;
		padding: 0.82rem 1.02rem;
	}

	.flexa-form__intro,
	.flexa-form__consent label {
		font-size: 0.9375rem;
	}

	.breadcrumbs ol {
		font-size: 0.875rem;
	}

	.entry-meta {
		font-size: 0.875rem;
	}
}

/* ------------------------------------- 22. Desktop first view --- */

/*
 * Desktop only. The hero used to fill the screen on its own, so a visitor's
 * first impression carried the logo twice over and nothing about the company.
 * Everything here is a size or a gap: the bands above the hero are shallower,
 * the hero's own elements are eased down a step, and the cards below are
 * lighter — enough that Mission, Vision and Values are in view on opening
 * without the hero feeling squeezed. Phones and tablets keep the full-height
 * hero, which is right on a small screen.
 */
@media (min-width: 1024px) {
	.topbar {
		padding-block: 0.45rem clamp(2.5rem, 3.3vw, 3.15rem);
	}

	/*
	 * A shallower swoosh at the top. The full-size one is 74px tall and is
	 * anchored to the bottom of the bar, so once the bar itself is this much
	 * shorter its transparent upper half reaches the tagline and clips it.
	 * The footer keeps the deep curve, where there is room for it.
	 */
	.topbar .flexa-wave svg {
		height: clamp(30px, 2.6vw, 44px);
	}

	.masthead {
		padding-block: 0.5rem;
	}

	.hero {
		min-height: clamp(460px, 72vh, 760px);
		padding-block: clamp(2.5rem, 4.2vw, 3.75rem) clamp(4rem, 6vw, 5.5rem);
	}

	.hero__inner {
		gap: 1rem;
	}

	.hero__mark .flexa-logo {
		width: clamp(215px, 21vw, 310px);
	}

	.hero__title {
		font-size: clamp(1.55rem, 1.05rem + 1.7vw, 2.2rem);
	}

	.hero__subtitle {
		font-size: 1rem;
		max-width: 50ch;
	}

	.hero__actions {
		margin-top: 0.5rem;
	}

	/* The cards ride up over the bottom of the hero; keep them clear of the
	   buttons now that the hero is shorter. */
	.section--pillars {
		margin-top: clamp(-2.25rem, -2vw, -1.25rem);
	}

	.pillar {
		padding: clamp(1.35rem, 2.1vw, 1.85rem);
	}

	.pillar__head {
		gap: 0.6rem;
		margin-bottom: 0.85rem;
	}

	.pillar__title {
		font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
	}

	.pillar__icon svg {
		width: 22px;
		height: 22px;
	}

	.pillar__text,
	.pillar__list {
		font-size: 0.875rem;
		line-height: 1.62;
	}

	.pillars {
		gap: clamp(1rem, 1.8vw, 1.5rem);
	}
}

@media print {
	.topbar,
	.masthead,
	.footer,
	.whatsapp-float,
	.back-to-top,
	.flexa-form-wrap,
	.flexa-wave {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}