/**
 * Aqua Horizons — front end styles.
 *
 * Everything that theme.json cannot express lives here. Rules are written with
 * logical properties throughout (inline-start / inline-end, not left / right)
 * because the Arabic side of the site is RTL and shares this one stylesheet.
 *
 * Colours, spacing, radii and shadows all come from theme.json presets; there
 * are no raw hex values below except inside the inline SVG icon masks, where a
 * currentColor mask is not possible.
 *
 * Contents
 *   1.  Tokens and base
 *   2.  Utilities (eyebrow, lead, sections, screen reader)
 *   3.  Buttons
 *   4.  Header, top bar and navigation
 *   5.  Footer
 *   6.  Heroes
 *   7.  Cards and grids
 *   8.  Statistics band and trust strip
 *   9.  Page specific sections
 *   10. Interactive components (video lightbox, comparison slider)
 *   11. Blog templates
 *   12. Motion
 */

/* ------------------------------------------------------------------------- *
 * 1. Tokens and base
 * ------------------------------------------------------------------------- */

:root {
	--aqua-icon-arrow: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>' );
	--aqua-icon-check: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>' );
	--aqua-icon-check-accent: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233aa3da" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>' );
	--aqua-icon-phone: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z"/></svg>' );
	--aqua-icon-mail: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></svg>' );
	--aqua-icon-pin: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0Z"/><circle cx="12" cy="10" r="3"/></svg>' );
	--aqua-icon-close: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg>' );
}

html {
	/*
	 * clip, not hidden: overflow-x:hidden on a scroll container silently turns
	 * overflow-y into "auto" and breaks position:sticky on the header.
	 */
	overflow-x: clip;
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/*
 * Kill the global block gap between structural blocks.
 *
 * theme.json's blockGap is there for prose inside post content, but WordPress
 * also applies it as `:where(.wp-site-blocks) > * { margin-block-start: … }`,
 * which drops 2rem between every full-width section — on top of the padding
 * each section already carries. The static site had no such gap: sections butt
 * against each other and own their spacing. These selectors beat core's
 * because core wraps its rules in :where(), which has zero specificity.
 */
.wp-site-blocks > *,
.aqua-main > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/*
 * Keyed on the sections themselves rather than on their parent. The sections
 * sit inside .entry-content, which is is-layout-flow, and targeting the wrapper
 * meant guessing at every context a section might appear in. A section owns its
 * own vertical rhythm through its padding; it never wants an outer margin.
 */
.aqua-hero,
.aqua-phero,
.aqua-section,
.aqua-cta,
.aqua-cred,
.aqua-sig,
.aqua-process,
.aqua-partner,
.aqua-archive-head {
	margin-block: 0;
}

/*
 * The same reset one level in: containers that lay their own children out.
 *
 * Every one of these is a wp:group, so it carries core's is-layout-flow class
 * and core gives each child but the first `margin-block-start: 32px`. Inside a
 * grid that margin is subtracted from the stretched row height, which is why
 * cards 2 and 3 of a row came out exactly 32px shorter than card 1 and sat 32px
 * lower — the row height was right, the cards just could not fill it. Inside a
 * flex column it simply adds to the gap.
 *
 * Deliberately a flat list rather than :is(): :is() takes the highest
 * specificity of its arguments, which would let this reset outrank the
 * `> * + *` spacing rules further down the file.
 */
.aqua-cardgrid > *,
.aqua-card > *,
.aqua-card__body > *,
.aqua-tilegrid > *,
.aqua-trust > *,
.aqua-trust__item > *,
.aqua-cred__grid > *,
.aqua-cred__item > *,
.aqua-sig__strip > *,
.aqua-sig__copy > *,
.aqua-process__steps > *,
.aqua-process__head > *,
.aqua-step > *,
.aqua-footer__grid > *,
.aqua-footer__col > *,
.aqua-footer__body > *,
.aqua-contactrows > *,
.aqua-contactrow > *,
.aqua-lockup > *,
.aqua-caps__stage > *,
.aqua-caps__inner > *,
.aqua-headgroup > *,
.aqua-formcard > *,
.aqua-brand > *,
.aqua-header__inner > *,
.aqua-topbar__inner > *,
.aqua-about__copy > *,
.aqua-about__badge > *,
.aqua-eco__copy > *,
.aqua-foundation__copy > *,
.aqua-sculpt__lead > *,
.wp-block-cover__inner-container > * {
	margin-block: 0;
}

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

:where( a ):focus-visible,
:where( button ):focus-visible,
:where( input, select, textarea ):focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent-deep );
	outline-offset: 3px;
	border-radius: 4px;
}

/* The Arabic side of the site: Polylang sets dir="rtl" on <html>. */
html[dir="rtl"] body {
	font-family: var( --wp--preset--font-family--arabic );
}

/* ------------------------------------------------------------------------- *
 * 2. Utilities
 * ------------------------------------------------------------------------- */

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

.skip-link:focus {
	z-index: 200;
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--primary );
	padding: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--40 );
}

.wp-block-group.is-style-section {
	padding-block: var( --wp--preset--spacing--80 );
}

.wp-block-group.is-style-section-tight {
	padding-block: var( --wp--preset--spacing--70 );
}

.aqua-headgroup {
	text-align: center;
	margin-block-end: var( --wp--preset--spacing--70 );
}

.aqua-headgroup > * + * {
	margin-block-start: var( --wp--preset--spacing--40 );
}

/* Eyebrow: small uppercase label preceded by a short rule. */
.is-style-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1.2;
}

.is-style-eyebrow::before {
	content: "";
	inline-size: 1.75rem;
	block-size: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.7;
	flex: none;
}

.has-text-align-center.is-style-eyebrow {
	display: flex;
	justify-content: center;
}

.aqua-lead {
	color: var( --wp--preset--color--muted );
}

.aqua-lead--on-dark {
	color: var( --wp--custom--aqua--on-media-body );
}

.aqua-subhead {
	margin-block-end: var( --wp--preset--spacing--60 );
}

.aqua-section__action {
	margin-block-start: var( --wp--preset--spacing--60 );
}

/*
 * List indent lives here rather than in theme.json, because theme.json's
 * spacing.padding only speaks in physical left/right and would indent Arabic
 * lists from the wrong edge.
 */
.wp-block-list {
	padding-inline-start: 1.25rem;
}

/* Tick and dot lists. */
.wp-block-list.is-style-ticks,
.wp-block-list.is-style-dots {
	list-style: none;
	padding-inline-start: 0;
	display: grid;
	gap: var( --wp--preset--spacing--30 );
}

.wp-block-list.is-style-ticks li,
.wp-block-list.is-style-dots li {
	display: flex;
	align-items: start;
	gap: 0.8125rem;
}

/*
 * The tick is a tinted circle with a check inside it, as on the static site.
 *
 * It cannot be done with a mask: a mask clips the entire element, so masking
 * the circle to the shape of the check throws the circle away and leaves a bare
 * glyph floating in the text. The circle is therefore a background-colour and
 * the check a background-image — which is also why this one icon carries its
 * colour inside the data URI instead of inheriting currentColor.
 */
.wp-block-list.is-style-ticks li::before {
	content: "";
	flex: none;
	inline-size: 1.625rem;
	block-size: 1.625rem;
	border-radius: 50%;
	background-color: var( --wp--preset--color--tint-soft );
	background-image: var( --aqua-icon-check-accent );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.875rem;
}

.wp-block-list.is-style-ticks li {
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 600;
	font-size: var( --wp--preset--font-size--small );
}

.wp-block-list.is-style-dots li::before {
	content: "";
	flex: none;
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: var( --wp--preset--color--accent );
	margin-block-start: 0.5rem;
}

/* Icon badges. */
.aqua-iconbadge {
	display: grid;
	place-items: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border-radius: var( --wp--custom--aqua--radius );
	margin-block-end: var( --wp--preset--spacing--40 );
}

.aqua-iconbadge svg {
	inline-size: 1.625rem;
	block-size: 1.625rem;
}

.aqua-iconbadge.is-style-icon-badge {
	background: var( --wp--preset--gradient--icon-badge );
	color: var( --wp--preset--color--base );
	box-shadow: 0 14px 28px -12px rgba( 91, 186, 233, 0.6 );
}

.aqua-iconbadge.is-style-icon-badge-soft {
	background: var( --wp--preset--color--tint-soft );
	color: var( --wp--preset--color--accent-deep );
}

/* ------------------------------------------------------------------------- *
 * 3. Buttons
 * ------------------------------------------------------------------------- */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5625rem;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-button__link:hover {
	transform: translateY( -2px );
	box-shadow: 0 16px 30px -12px rgba( 91, 186, 233, 0.6 );
}

.aqua-btn--arrow .wp-block-button__link::after {
	content: "";
	inline-size: 1rem;
	block-size: 1rem;
	flex: none;
	background: currentColor;
	-webkit-mask: var( --aqua-icon-arrow ) center / contain no-repeat;
	mask: var( --aqua-icon-arrow ) center / contain no-repeat;
	transition: translate 0.25s ease;
}

.aqua-btn--arrow .wp-block-button__link:hover::after {
	translate: 0.1875rem 0;
}

html[dir="rtl"] .aqua-btn--arrow .wp-block-button__link::after {
	scale: -1 1;
}

.aqua-btn--phone .wp-block-button__link::before {
	content: "";
	inline-size: 1.0625rem;
	block-size: 1.0625rem;
	flex: none;
	background: currentColor;
	-webkit-mask: var( --aqua-icon-phone ) center / contain no-repeat;
	mask: var( --aqua-icon-phone ) center / contain no-repeat;
}

.aqua-btn--block,
.aqua-btn--block .wp-block-button__link {
	inline-size: 100%;
}

.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var( --wp--preset--color--primary );
	box-shadow: inset 0 0 0 1.6px var( --wp--preset--color--primary );
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

.wp-block-button.is-style-light .wp-block-button__link {
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--primary );
}

.wp-block-button.is-style-light .wp-block-button__link:hover {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
}

.wp-block-button.is-style-glass .wp-block-button__link {
	background: rgba( 255, 255, 255, 0.12 );
	color: var( --wp--preset--color--base );
	box-shadow: inset 0 0 0 1.5px rgba( 255, 255, 255, 0.5 );
}

.wp-block-button.is-style-glass .wp-block-button__link:hover {
	background: rgba( 255, 255, 255, 0.22 );
}

/* Read-more: a link, not a pill. */
.wp-block-button.is-style-read-more .wp-block-button__link {
	background: transparent;
	color: var( --wp--preset--color--primary );
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: var( --wp--preset--font-size--small );
}

.wp-block-button.is-style-read-more .wp-block-button__link:hover {
	background: transparent;
	color: var( --wp--preset--color--accent-deep );
	transform: none;
	box-shadow: none;
	gap: 0.8125rem;
}

/* ------------------------------------------------------------------------- *
 * 4. Header, top bar and navigation
 * ------------------------------------------------------------------------- */

.aqua-topbar {
	color: var( --wp--custom--aqua--topbar-text );
	padding-block: 0.5rem;
}

.aqua-topbar__inner {
	min-block-size: 2.875rem;
	gap: var( --wp--preset--spacing--40 );
}

.aqua-topbar__contact {
	gap: var( --wp--preset--spacing--50 );
}

.aqua-topbar p,
.aqua-topbar a {
	color: var( --wp--custom--aqua--topbar-text );
	margin: 0;
}

.aqua-topbar a:hover {
	color: var( --wp--preset--color--base );
}

/* Contact rows with a masked icon, shared by the top bar and the footer. */
.aqua-contact-link {
	display: flex;
	align-items: start;
	gap: 0.5625rem;
	margin: 0;
}

.aqua-contact-link::before {
	content: "";
	flex: none;
	inline-size: 1rem;
	block-size: 1rem;
	margin-block-start: 0.25em;
	background: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.aqua-contact-link--phone::before {
	-webkit-mask-image: var( --aqua-icon-phone );
	mask-image: var( --aqua-icon-phone );
}

.aqua-contact-link--mail::before {
	-webkit-mask-image: var( --aqua-icon-mail );
	mask-image: var( --aqua-icon-mail );
}

.aqua-contact-link--pin::before {
	-webkit-mask-image: var( --aqua-icon-pin );
	mask-image: var( --aqua-icon-pin );
}

.aqua-header {
	position: relative;
	z-index: 60;
}

.aqua-header__bar {
	position: sticky;
	inset-block-start: 0;
	z-index: 60;
	background: var( --wp--custom--aqua--header-bg );
	backdrop-filter: blur( 14px );
	border-block-end: 1px solid var( --wp--preset--color--outline );
	transition: box-shadow 0.3s ease;
}

.aqua-header__bar.is-scrolled {
	box-shadow: var( --wp--preset--shadow--sm );
}

.aqua-header__inner {
	min-block-size: var( --wp--custom--aqua--header-height );
	gap: var( --wp--preset--spacing--40 );
}

.aqua-brand {
	gap: 3px;
	flex: none;
}

.aqua-brand .wp-block-site-logo img,
.aqua-brand__logo img {
	block-size: 4rem;
	inline-size: auto;
}

.aqua-brand__slogan {
	margin: 0;
	font-weight: 700;
	color: var( --wp--preset--color--muted );
	line-height: 1;
	white-space: nowrap;
	unicode-bidi: isolate;
}

.aqua-nav {
	flex: 1 1 auto;
	justify-content: center;
}

.aqua-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.375rem;
	white-space: nowrap;
}

.aqua-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: -2px;
	block-size: 2px;
	inline-size: 0;
	background: var( --wp--preset--color--accent );
	transition: inline-size 0.25s ease;
}

.aqua-nav .wp-block-navigation-item__content:hover::after,
.aqua-nav .current-menu-item > .wp-block-navigation-item__content::after {
	inline-size: 100%;
}

.aqua-nav .wp-block-navigation__submenu-container {
	min-inline-size: 15.5rem;
	border: 1px solid var( --wp--preset--color--outline );
	border-radius: var( --wp--custom--aqua--radius );
	box-shadow: var( --wp--preset--shadow--base );
	padding: 0.625rem;
}

.aqua-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 9px;
	padding: 0.6875rem 0.875rem;
}

.aqua-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

.aqua-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var( --wp--preset--color--tint-soft );
	color: var( --wp--preset--color--primary );
}

.aqua-header__actions {
	gap: var( --wp--preset--spacing--40 );
	flex: none;
}

.aqua-langtog {
	border: 1.5px solid var( --wp--preset--color--outline );
	border-radius: var( --wp--custom--aqua--radius-pill );
	overflow: hidden;
	gap: 0;
}

.aqua-langtog__item {
	margin: 0;
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 700;
}

.aqua-langtog__item a {
	display: block;
	padding: 0.4375rem 0.8125rem;
	color: var( --wp--preset--color--muted );
	transition: background-color 0.2s ease, color 0.2s ease;
}

.aqua-langtog__item.is-current a {
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

/*
 * Collapse the navigation into its overlay below 1024px, not core's 600px.
 *
 * The static site hid the desktop nav at 1024 and showed the burger. Core's
 * Navigation block only collapses at 600px, so between 600 and 1024 all ten
 * links sat inline and pushed the header wider than the viewport — which is
 * both the broken menu and a good part of the sideways scrolling.
 */
/*
 * Collapse to the burger at 1300px, not 1024.
 *
 * The static site kept its inline nav down to 1025px and squeezed it through a
 * dedicated `@media (min-width:1025px) and (max-width:1300px)` rule — smaller
 * logo, tighter nav gap. Measured here, the brand, six top-level items, the
 * language toggle and the quote button need ~1190px against a content width of
 * viewport-80, so anything under about 1300 overflowed. 1300 is exactly where
 * the static site stopped compensating, and collapsing there cannot overflow.
 */
@media ( max-width: 1300px ) {
	/*
	 * Two class selectors, not one: core prints `.is-layout-flex{display:flex}`
	 * inline in the head, after this stylesheet. At equal specificity core wins
	 * on order, and the quote button stayed on screen — 220px of it hanging off
	 * the side of a phone.
	 */
	.aqua-header .aqua-header__cta {
		display: none;
	}

	/*
	 * Drop the frosted-glass header below the overlay breakpoint.
	 *
	 * backdrop-filter establishes a containing block for fixed-position
	 * descendants, so the navigation overlay — which is position:fixed with
	 * inset:0 — was sizing itself to the 104px header instead of the viewport,
	 * leaving a stub panel with the menu clipped inside it. The blur only ever
	 * mattered on desktop, where the header sits over scrolling content.
	 */
	.aqua-header__bar {
		backdrop-filter: none;
		background: var( --wp--preset--color--base );
	}

	.aqua-nav .wp-block-navigation__responsive-container-open:not( .always-shown ) {
		display: flex;
	}

	.aqua-nav .wp-block-navigation__responsive-container:not( .hidden-by-default ):not( .is-menu-open ) {
		display: none;
	}

	.aqua-nav .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}
}

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

	.aqua-topbar__inner {
		justify-content: center;
	}

	.aqua-topbar__contact {
		gap: var( --wp--preset--spacing--30 );
	}

	.aqua-brand .wp-block-site-logo img,
	.aqua-brand__logo img {
		block-size: 3.125rem;
	}
}

/*
 * The header slogan is set nowrap and renders 219px wide — wider than the logo
 * itself — which pushed the brand, burger and language toggle to 379px inside a
 * 331px header on a 375px phone. It is decorative; the logo carries the brand,
 * and the full slogan still appears in the footer where there is room.
 *
 * Note this is display, not font-size: shrinking the type here does nothing,
 * because core emits preset font-size classes with !important.
 */
@media ( max-width: 600px ) {
	.aqua-header .aqua-brand__slogan {
		display: none;
	}

	.aqua-header__actions {
		gap: var( --wp--preset--spacing--30 );
	}
}

/* Remaining small-screen rules ported from the static site. */
@media ( max-width: 520px ) {
	/* Phone number and email side by side no longer fit; the phone wins. */
	.aqua-topbar .aqua-contact-link--mail {
		display: none;
	}

	.aqua-hero__actions {
		flex-direction: column;
		align-items: stretch;
		inline-size: 100%;
	}

	.aqua-hero__actions .wp-block-button,
	.aqua-hero__actions .wp-block-button__link {
		inline-size: 100%;
	}

	.aqua-grouphead__title {
		white-space: normal;
	}
}

/* ------------------------------------------------------------------------- *
 * 5. Footer
 * ------------------------------------------------------------------------- */

.aqua-footer {
	color: var( --wp--custom--aqua--footer-text );
	font-size: var( --wp--preset--font-size--small );
}

.aqua-footer__body {
	padding-block-start: var( --wp--preset--spacing--70 );
}

.aqua-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
	gap: var( --wp--preset--spacing--70 );
	padding-block-end: var( --wp--preset--spacing--70 );
}

.aqua-footer__col > * + * {
	margin-block-start: var( --wp--preset--spacing--30 );
}

.aqua-footer__logomark {
	background: var( --wp--custom--aqua--logo-plate );
	border-radius: 12px;
	padding: 1.125rem 1.375rem;
	gap: 5px;
	inline-size: fit-content;
}

.aqua-footer__logo {
	margin: 0;
}

.aqua-footer__logo img {
	block-size: 3.875rem;
	inline-size: auto;
}

.aqua-footer__mission {
	color: var( --wp--custom--aqua--footer-text-soft );
	max-inline-size: 34ch;
	line-height: 1.7;
	margin-block-start: var( --wp--preset--spacing--40 );
}

.aqua-footer__heading {
	color: var( --wp--preset--color--base );
	font-size: 1rem;
	letter-spacing: 0.04em;
	margin-block-end: var( --wp--preset--spacing--40 );
}

.aqua-footer__links,
.aqua-footer .wp-block-page-list {
	list-style: none;
	padding-inline-start: 0;
	display: grid;
	gap: 0.8125rem;
}

.aqua-footer__links a,
.aqua-footer .wp-block-page-list a {
	color: var( --wp--custom--aqua--footer-text );
	transition: color 0.2s ease, padding-inline-start 0.2s ease;
}

.aqua-footer__links a:hover,
.aqua-footer .wp-block-page-list a:hover {
	color: var( --wp--preset--color--accent );
	padding-inline-start: 5px;
}

.aqua-footer__col--contact .aqua-contact-link {
	color: var( --wp--custom--aqua--footer-text );
	margin-block-end: var( --wp--preset--spacing--30 );
}

.aqua-footer__col--contact .aqua-contact-link::before {
	color: var( --wp--preset--color--accent );
	background: var( --wp--preset--color--accent );
}

.aqua-footer__social {
	margin-block-start: var( --wp--preset--spacing--40 );
}

.aqua-footer__copy {
	border-block-start: 1px solid rgba( 255, 255, 255, 0.12 );
	padding-block: var( --wp--preset--spacing--40 );
	color: var( --wp--custom--aqua--footer-text-dim );
	gap: var( --wp--preset--spacing--40 );
}

.aqua-footer__copy p {
	margin: 0;
}

@media ( max-width: 1024px ) {
	.aqua-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 640px ) {
	.aqua-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------------- *
 * 6. Heroes
 * ------------------------------------------------------------------------- */

.aqua-hero {
	min-block-size: 92vh;
	text-align: center;
}

.aqua-hero .wp-block-cover__video-background {
	object-fit: cover;
}

/*
 * Pausing the hero video for prefers-reduced-motion happens in
 * assets/js/header.js, not here: CSS cannot pause a video, and hiding it would
 * leave the cover with no background at all.
 */

.aqua-hero .wp-block-cover__inner-container > * + * {
	margin-block-start: var( --wp--preset--spacing--40 );
}

.aqua-hero__arabic {
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.625rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	unicode-bidi: isolate;
}

.aqua-hero__title {
	text-shadow: 0 6px 40px rgba( 0, 0, 0, 0.35 );
}

.aqua-hero__tag {
	max-inline-size: 40rem;
	margin-inline: auto;
}

.aqua-hero__actions {
	margin-block-start: var( --wp--preset--spacing--60 );
}

/* Interior page hero. */
.aqua-phero {
	text-align: center;
	padding-block: var( --wp--preset--spacing--80 ) var( --wp--preset--spacing--70 );
	min-block-size: 0;
}

.aqua-phero .wp-block-cover__inner-container > * + * {
	margin-block-start: var( --wp--preset--spacing--40 );
}

.aqua-phero__crumb {
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0;
}

.aqua-phero__title {
	font-size: clamp( 2rem, 5vw, 3.75rem );
}

/* ------------------------------------------------------------------------- *
 * 7. Cards and grids
 * ------------------------------------------------------------------------- */

.aqua-cardgrid {
	display: grid;
	gap: var( --wp--preset--spacing--50 );
	/*
	 * Equal-height rows across the whole grid, not just within a row. A grid
	 * sizes each row to its own tallest item by default, so a six-card grid that
	 * wraps to two rows gave two different card heights and read as misaligned.
	 */
	grid-auto-rows: 1fr;
}

/*
 * The inline variant is a single column of points, not a card row — stretching
 * those to a common height would just pad the short ones out with dead space.
 */
.aqua-cardgrid--inline {
	grid-auto-rows: auto;
}

.aqua-cardgrid--2 {
	grid-template-columns: repeat( 2, 1fr );
}

.aqua-cardgrid--3 {
	grid-template-columns: repeat( 3, 1fr );
}

.aqua-cardgrid--4 {
	grid-template-columns: repeat( 4, 1fr );
}

.aqua-cardgrid--inline {
	gap: var( --wp--preset--spacing--40 );
}

.wp-block-group.is-style-card {
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--outline );
	border-radius: var( --wp--custom--aqua--radius );
	box-shadow: var( --wp--preset--shadow--sm );
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.wp-block-group.is-style-card:hover {
	transform: translateY( -8px );
	box-shadow: var( --wp--preset--shadow--base );
}

.wp-block-group.is-style-card-glass {
	background: var( --wp--custom--aqua--glass );
	border: 1px solid var( --wp--custom--aqua--glass-line );
	border-radius: var( --wp--custom--aqua--radius-lg );
	padding: var( --wp--preset--spacing--60 );
	backdrop-filter: blur( 4px );
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.wp-block-group.is-style-card-glass:hover {
	background: var( --wp--custom--aqua--glass-strong );
	transform: translateY( -6px );
}

.wp-block-group.is-style-card-glass :is( h1, h2, h3, h4, h5, h6 ) {
	color: var( --wp--preset--color--base );
}

.wp-block-group.is-style-card-glass p,
.wp-block-group.is-style-card-glass li {
	color: var( --wp--custom--aqua--on-dark-body );
}

/* Icon cards carry their own padding; photo cards get it on the body. */
.aqua-card--icon.is-style-card {
	padding: var( --wp--preset--spacing--60 );
}

.aqua-card__media {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 11;
}

.aqua-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.wp-block-image.is-style-zoom-on-hover img {
	transition: transform 0.6s ease;
}

.is-style-card:hover .is-style-zoom-on-hover img {
	transform: scale( 1.06 );
}

.wp-block-image.is-style-rounded-shadow img {
	border-radius: var( --wp--custom--aqua--radius-xl );
	box-shadow: var( --wp--preset--shadow--lg );
}

.aqua-card__body {
	padding: var( --wp--preset--spacing--50 );
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var( --wp--preset--spacing--30 );
}

.aqua-card__title {
	margin: 0;
}

.aqua-card__text {
	color: var( --wp--preset--color--muted );
	margin: 0;
	flex: 1;
}

.aqua-card__action {
	margin-block-start: auto;
}

.aqua-card__badge {
	align-self: start;
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--primary-deep );
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.375rem 0.75rem;
	border-radius: var( --wp--custom--aqua--radius-pill );
	margin: 0;
}

.aqua-card__number {
	position: absolute;
	inset-block-start: var( --wp--preset--spacing--40 );
	inset-inline-end: var( --wp--preset--spacing--40 );
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 800;
	color: var( --wp--preset--color--accent-deep );
	opacity: 0.35;
	margin: 0;
}

.aqua-cardgrid--steps .aqua-card {
	position: relative;
}

.aqua-card__list {
	margin: 0;
	color: var( --wp--preset--color--muted );
	font-size: var( --wp--preset--font-size--small );
}

/* Specification cards. */
.aqua-card--spec.is-featured {
	border-color: var( --wp--preset--color--accent );
	box-shadow: 0 30px 70px -34px rgba( 91, 186, 233, 0.55 );
}

.aqua-specs {
	list-style: none;
	padding-inline-start: 0;
	display: grid;
	gap: 0.8125rem;
	margin: 0;
}

.aqua-specs li {
	display: grid;
	gap: 2px;
	font-size: var( --wp--preset--font-size--small );
}

.aqua-specs__key {
	display: block;
	color: var( --wp--preset--color--muted );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.02em;
}

.aqua-specs__value {
	color: var( --wp--preset--color--contrast );
}

.aqua-card__includes {
	color: var( --wp--preset--color--muted );
	border-block-start: 1px dashed var( --wp--preset--color--outline );
	padding-block-start: var( --wp--preset--spacing--40 );
	line-height: 1.5;
	margin: 0;
}

/* Collection group heading. */
.aqua-grouphead {
	gap: var( --wp--preset--spacing--40 );
	margin-block: var( --wp--preset--spacing--70 ) var( --wp--preset--spacing--50 );
}

.aqua-grouphead::after {
	content: "";
	flex: 1;
	block-size: 1px;
	background: var( --wp--preset--color--outline );
}

.aqua-grouphead__title {
	margin: 0;
	font-size: 1.6875rem;
}

.aqua-chip {
	margin: 0;
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent-deep );
	background: var( --wp--preset--color--tint-soft );
	padding: 0.4375rem 0.875rem;
	border-radius: var( --wp--custom--aqua--radius-pill );
}

/*
 * Logo mark cards on the partnership page.
 *
 * These sit three-across inside one half of a two-column block, so each card is
 * only ~165px wide. The generic card typography (a 23px h3) turned a title like
 * "Certified Aquascape Methodology" into a six-line, 166px-tall block. The
 * sizes below are the static site's own `.fc` rule from partnership.html, which
 * was missed in the conversion because the stylesheet was taken from index.html
 * and this block's CSS lives only on that one page.
 */
.aqua-cardgrid--marks {
	gap: var( --wp--preset--spacing--40 );
}

.aqua-card--mark {
	padding: 1.25rem 1.125rem;
	text-align: center;
	align-items: center;
}

.aqua-card__mark {
	margin: 0 0 0.75rem;
}

.aqua-card__mark img {
	block-size: 2.625rem;
	inline-size: auto;
	object-fit: contain;
}

.aqua-card--mark .aqua-card__title {
	font-size: 0.875rem;
	line-height: 1.3;
	margin-block-end: 0.375rem;
}

.aqua-card--mark .aqua-card__text {
	font-size: 0.78rem;
	line-height: 1.5;
	flex: none;
}

@media ( max-width: 1024px ) {
	.aqua-cardgrid--3,
	.aqua-cardgrid--4 {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 640px ) {
	.aqua-cardgrid--2,
	.aqua-cardgrid--3,
	.aqua-cardgrid--4 {
		grid-template-columns: 1fr;
	}

	/*
	 * Equal-height rows exist so cards sitting side by side line up. Once the
	 * grid is a single column there is nothing to line up with, and forcing it
	 * would pad every short card out to the height of the longest one.
	 */
	.aqua-cardgrid {
		grid-auto-rows: auto;
	}
}

/* ------------------------------------------------------------------------- *
 * 8. Statistics band and trust strip
 * ------------------------------------------------------------------------- */

.aqua-cred {
	color: var( --wp--preset--color--base );
	overflow: hidden;
	padding-block: var( --wp--preset--spacing--50 );
}

.aqua-cred__grid {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
}

.aqua-cred__item {
	padding: 0.5rem var( --wp--preset--spacing--40 );
	position: relative;
	min-inline-size: 0;
}

.aqua-cred__item + .aqua-cred__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 50%;
	translate: 0 -50%;
	block-size: 2.875rem;
	inline-size: 1px;
	background: linear-gradient( transparent, rgba( 255, 255, 255, 0.24 ), transparent );
}

.aqua-cred__value {
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 800;
	font-size: clamp( 1.25rem, 2vw, 1.875rem );
	line-height: 1;
	color: var( --wp--preset--color--base );
	margin: 0;
}

.aqua-cred__label {
	color: var( --wp--custom--aqua--on-dark-body );
	margin-block-start: 0.5rem;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.3;
}

.aqua-trust {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var( --wp--preset--spacing--40 );
	border-radius: var( --wp--custom--aqua--radius-lg );
	padding: var( --wp--preset--spacing--50 );
	margin-block-start: var( --wp--preset--spacing--60 );
}

.aqua-trust__item {
	color: var( --wp--preset--color--base );
}

.aqua-trust__icon {
	color: var( --wp--preset--color--accent );
	margin-block-end: 0.5rem;
}

.aqua-trust__icon svg {
	inline-size: 1.375rem;
	block-size: 1.375rem;
}

.aqua-trust__title {
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 700;
	font-size: var( --wp--preset--font-size--small );
	margin: 0 0 3px;
}

.aqua-trust__text {
	color: var( --wp--custom--aqua--topbar-text );
	line-height: 1.45;
	margin: 0;
}

@media ( max-width: 760px ) {
	.aqua-cred__grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	.aqua-cred__item:nth-child( odd )::before {
		display: none;
	}

	.aqua-trust {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 520px ) {
	.aqua-cred__grid,
	.aqua-trust {
		grid-template-columns: 1fr;
	}

	.aqua-cred__item::before {
		display: none;
	}
}

/* ------------------------------------------------------------------------- *
 * 9. Page specific sections
 * ------------------------------------------------------------------------- */

/* About / ecosystem two-column blocks. */
.aqua-about .wp-block-column,
.aqua-eco .wp-block-column {
	min-inline-size: 0;
}

.aqua-about {
	gap: var( --wp--preset--spacing--80 );
}

.aqua-about__media {
	position: relative;
}

/*
 * Column widths only above the stacking breakpoint. Core stacks columns with
 * `flex-basis: 100% !important` at 781px; a bare !important width here is one
 * specificity point away from fighting that, so it is scoped instead.
 */
@media ( min-width: 782px ) {
	.aqua-about__media {
		flex-basis: 46%;
		flex-grow: 0;
	}

	.aqua-caps__copy {
		flex-basis: 43%;
		flex-grow: 0;
	}
}

.aqua-about__photo {
	margin: 0;
}

.aqua-about__photo img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	inline-size: 100%;
}

.aqua-about__badge {
	position: absolute;
	inset-inline-end: -1.625rem;
	inset-block-end: -1.625rem;
	border-radius: var( --wp--custom--aqua--radius-lg );
	padding: var( --wp--preset--spacing--50 );
	box-shadow: var( --wp--preset--shadow--base );
	max-inline-size: 14.375rem;
}

/*
 * The badge hangs 26px outside its column, which is the effect on desktop and a
 * horizontal scrollbar on a phone. The static site pulled it back in at 640 and
 * dropped it into the flow at 520; both rules were missed in the conversion.
 */
@media ( max-width: 640px ) {
	.aqua-about__badge {
		inset-inline-end: 0;
		inset-block-end: 0;
	}
}

@media ( max-width: 520px ) {
	.aqua-about__badge {
		position: static;
		max-inline-size: none;
		margin-block-start: var( --wp--preset--spacing--40 );
	}
}

.aqua-about__badge-number {
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 800;
	font-size: 2.75rem;
	line-height: 1;
	margin: 0;
}

.aqua-about__badge-label {
	color: var( --wp--preset--color--tint );
	margin-block-start: 0.5rem;
}

.aqua-about__copy > * + *,
.aqua-eco__copy > * + * {
	margin-block-start: var( --wp--preset--spacing--40 );
}

.aqua-eco {
	gap: var( --wp--preset--spacing--80 );
}

.aqua-eco__media img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	inline-size: 100%;
}

/* Capabilities showcase. */
.aqua-caps__inner {
	gap: var( --wp--preset--spacing--60 );
}

.aqua-caps__stage {
	position: relative;
	padding-block-end: 6.5rem;
}

.aqua-caps__lake {
	margin: 0;
	border-radius: var( --wp--custom--aqua--radius-lg );
	overflow: hidden;
	box-shadow: var( --wp--preset--shadow--lg );
	border: 1px solid var( --wp--preset--color--outline );
}

.aqua-caps__lake img {
	aspect-ratio: 2.39 / 1;
	object-fit: cover;
	inline-size: 100%;
	display: block;
}

.aqua-caps__pond {
	position: absolute;
	inset-inline-start: 0.5rem;
	inset-block-end: 0;
	inline-size: 34%;
	margin: 0;
	border-radius: var( --wp--custom--aqua--radius );
	overflow: hidden;
	border: 4px solid var( --wp--preset--color--base );
	box-shadow: 0 18px 46px rgba( 16, 24, 64, 0.26 );
}

.aqua-caps__pond img {
	aspect-ratio: 1.42 / 1;
	object-fit: cover;
	inline-size: 100%;
	display: block;
}

.aqua-caps__badge {
	position: absolute;
	z-index: 3;
	border-radius: var( --wp--custom--aqua--radius );
	padding: 0.875rem 1.125rem;
	gap: 0.75rem;
	box-shadow: 0 16px 40px rgba( 16, 24, 64, 0.34 );
	color: var( --wp--preset--color--base );
}

.aqua-caps__badge--a {
	inset-inline-start: calc( 34% - 1.125rem );
	inset-block-end: 1.625rem;
}

.aqua-caps__badge--b {
	inset-inline-end: 0;
	inset-block-end: 8rem;
}

.aqua-caps__badge-icon {
	inline-size: 1.6875rem;
	block-size: 1.6875rem;
	flex: none;
	color: var( --wp--preset--color--accent );
}

.aqua-caps__badge-key {
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --wp--preset--color--tint );
	line-height: 1.25;
	margin: 0;
}

.aqua-caps__badge-value {
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 800;
	font-size: 1.1875rem;
	line-height: 1.15;
	margin-block-start: 4px;
	white-space: nowrap;
}

@media ( max-width: 1024px ) {
	.aqua-caps__stage {
		padding-block-end: 0;
	}

	.aqua-caps__lake img {
		aspect-ratio: 16 / 9;
	}

	.aqua-caps__pond {
		position: static;
		inline-size: auto;
		margin-block-start: 0.875rem;
		border-width: 0;
	}

	.aqua-caps__badge {
		position: static;
		margin-block-start: 0.75rem;
	}

	.aqua-caps__badge-value {
		white-space: normal;
	}
}

/* Signature portfolio band. */
.aqua-sig__top {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
}

.aqua-sig__hero {
	margin: 0;
	min-block-size: 22.5rem;
}

.aqua-sig__hero img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.aqua-sig__copy {
	padding: var( --wp--preset--spacing--70 );
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var( --wp--preset--spacing--40 );
}

.aqua-sig__by {
	color: var( --wp--custom--aqua--on-dark-lead );
	border-block-start: 1px solid rgba( 182, 224, 248, 0.4 );
	padding-block-start: var( --wp--preset--spacing--40 );
	max-inline-size: 21rem;
	margin: 0;
}

.aqua-sig__strip {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 8px;
	padding: 8px;
}

.aqua-sig__tile {
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 6px;
}

.aqua-sig__tile img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

@media ( max-width: 900px ) {
	.aqua-sig__top {
		grid-template-columns: 1fr;
	}

	.aqua-sig__copy {
		padding: var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--50 );
	}

	.aqua-sig__strip {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* Partnership lockup. */
.aqua-lockup {
	gap: var( --wp--preset--spacing--60 );
	margin-block-end: var( --wp--preset--spacing--60 );
}

.aqua-lockup__mark {
	margin: 0;
}

.aqua-lockup__mark img {
	block-size: 3.125rem;
	inline-size: auto;
	object-fit: contain;
}

.aqua-lockup__mark--aqua img {
	block-size: 4.875rem;
}

.aqua-lockup__mark--badge img {
	block-size: 6.5rem;
}

.aqua-lockup__x {
	font-size: 1.625rem;
	margin: 0;
}

.aqua-foundation {
	gap: 2.75rem;
}

@media ( min-width: 782px ) {
	.aqua-foundation__media {
		flex-basis: 42.5%;
		flex-grow: 0;
	}
}

.aqua-foundation__copy > * + * {
	margin-block-start: var( --wp--preset--spacing--40 );
}

.aqua-foundation__note {
	margin-block-start: var( --wp--preset--spacing--50 );
	color: var( --wp--preset--color--muted );
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 600;
}

/* Mission, harmony and Vision 2030. */
.aqua-harmony {
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 700;
	color: var( --wp--preset--color--accent-deep );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-block-start: var( --wp--preset--spacing--60 );
}

.aqua-signoff {
	color: var( --wp--preset--color--muted );
}

.aqua-v2030__commit {
	margin-block-start: var( --wp--preset--spacing--60 );
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--outline );
	border-radius: var( --wp--custom--aqua--radius-xl );
	padding: var( --wp--preset--spacing--60 );
	box-shadow: var( --wp--preset--shadow--sm );
}

.aqua-v2030__logo img {
	max-block-size: 6.875rem;
	inline-size: auto;
}

/*
 * Saudi Vision 2030 is a green block, not a blue one.
 *
 * about.html tints this whole section with the Vision 2030 palette — a green
 * eyebrow via an inline style, `.v30 .hicon2` badges on #e8f6ec with #1f7a3d
 * icons, green list bullets and a green closing line. None of that lives in
 * index.html, so the conversion rendered the section in the site's default blue.
 */
.aqua-v2030 .aqua-eyebrow {
	color: var( --wp--custom--aqua--vision-green );
}

.aqua-v2030 .aqua-iconbadge.is-style-icon-badge-soft {
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 11px;
	background: var( --wp--custom--aqua--vision-green-soft );
	color: var( --wp--custom--aqua--vision-green );
}

.aqua-v2030 .aqua-iconbadge svg {
	inline-size: 1.375rem;
	block-size: 1.375rem;
}

.aqua-v2030 .wp-block-list.is-style-dots {
	gap: 0.375rem;
}

.aqua-v2030 .wp-block-list.is-style-dots li::before {
	background: var( --wp--custom--aqua--vision-dot );
}

.aqua-v2030__close {
	margin-block-start: var( --wp--preset--spacing--50 );
	color: var( --wp--custom--aqua--vision-green );
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 700;
	font-size: 1rem;
}

/* Sculptures. */
.aqua-sculpt__lead {
	gap: var( --wp--preset--spacing--60 );
	margin-block-end: var( --wp--preset--spacing--50 );
}

.aqua-sculpt__title {
	font-size: clamp( 2.125rem, 5vw, 3.75rem );
	line-height: 1.02;
}

.aqua-eyebrow--bronze {
	color: #b06a2c;
}

.aqua-materials {
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 600;
	margin-block: var( --wp--preset--spacing--40 );
}

.aqua-tilegrid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --wp--preset--spacing--40 );
}

.aqua-tile {
	margin: 0;
	border-radius: var( --wp--custom--aqua--radius );
	overflow: hidden;
	box-shadow: var( --wp--preset--shadow--sm );
	aspect-ratio: 1;
}

.aqua-tile--wide {
	grid-column: span 2;
	aspect-ratio: 2 / 1;
}

.aqua-tile img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.aqua-tile:hover img {
	transform: scale( 1.05 );
}

@media ( max-width: 820px ) {
	.aqua-tilegrid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* Build process band. */
.aqua-process__head {
	margin-block-end: var( --wp--preset--spacing--60 );
}

.aqua-process__kicker {
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 0.75rem;
}

.aqua-process__title {
	margin: 0;
}

.aqua-process__inner {
	gap: var( --wp--preset--spacing--60 );
}

.aqua-process__steps {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: var( --wp--preset--spacing--40 );
}

.aqua-step {
	border-radius: var( --wp--custom--aqua--radius );
	overflow: hidden;
	border: 1.5px solid rgba( 200, 162, 74, 0.45 );
	background: var( --wp--preset--color--primary-deep );
}

.aqua-step__media {
	margin: 0;
}

.aqua-step__media img {
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.aqua-step__label {
	display: flex;
	align-items: center;
	gap: 0.6875rem;
	padding: 0.875rem 1rem;
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 700;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--base );
	margin: 0;
}

.aqua-step__number {
	color: #c8a24a;
	font-size: 1.25rem;
}

.aqua-process__final {
	position: relative;
}

.aqua-process__finalmedia {
	margin: 0;
	block-size: 100%;
	border-radius: var( --wp--custom--aqua--radius-lg );
	overflow: hidden;
	border: 1.5px solid rgba( 200, 162, 74, 0.5 );
	min-block-size: 22.5rem;
}

.aqua-process__finalmedia img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.aqua-process__caption {
	position: absolute;
	inset-inline: 1rem;
	inset-block-end: 1rem;
	background: rgba( 15, 18, 55, 0.8 );
	border-radius: 10px;
	padding: 0.875rem 1.125rem;
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --wp--preset--color--base );
	margin: 0;
}

@media ( max-width: 900px ) {
	.aqua-process__steps {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* Contact. */
.aqua-contact {
	gap: var( --wp--preset--spacing--70 );
}

.aqua-contact__info > * + * {
	margin-block-start: var( --wp--preset--spacing--40 );
}

.aqua-contactrows {
	display: grid;
	gap: var( --wp--preset--spacing--50 );
	margin-block-start: var( --wp--preset--spacing--60 );
}

.aqua-contactrow {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"icon title"
		"icon value";
	column-gap: var( --wp--preset--spacing--40 );
	align-items: center;
}

.aqua-contactrow .aqua-iconbadge {
	grid-area: icon;
	inline-size: 3rem;
	block-size: 3rem;
	margin: 0;
}

.aqua-contactrow__title {
	grid-area: title;
	margin: 0;
	font-size: 1rem;
}

.aqua-contactrow__value {
	grid-area: value;
	margin: 0;
	color: var( --wp--preset--color--muted );
	font-size: var( --wp--preset--font-size--small );
}

.aqua-formcard {
	padding: var( --wp--preset--spacing--60 );
	border-radius: var( --wp--custom--aqua--radius-lg );
}

.aqua-formcard:hover {
	transform: none;
}

.aqua-formcard input:not( [ type="submit" ] ),
.aqua-formcard textarea,
.aqua-formcard select {
	inline-size: 100%;
	padding: 0.8125rem 0.9375rem;
	border: 1.5px solid var( --wp--preset--color--outline );
	border-radius: 10px;
	background: var( --wp--preset--color--surface );
	font-family: inherit;
	font-size: var( --wp--preset--font-size--small );
}

.aqua-formcard input:focus,
.aqua-formcard textarea:focus {
	border-color: var( --wp--preset--color--accent );
}

.aqua-formcard label {
	display: block;
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 600;
	font-size: var( --wp--preset--font-size--x-small );
	margin-block-end: 0.4375rem;
}

.aqua-formcard__notice {
	color: var( --wp--preset--color--muted );
}

@media ( max-width: 900px ) {
	.aqua-contact,
	.aqua-foundation,
	.aqua-sculpt__lead,
	.aqua-process__inner {
		flex-wrap: wrap;
	}
}

/* ------------------------------------------------------------------------- *
 * 10. Interactive components
 * ------------------------------------------------------------------------- */

.aqua-videos__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var( --wp--preset--spacing--40 );
}

.aqua-videos__item {
	margin: 0;
}

.aqua-videos__thumb {
	position: relative;
	display: block;
	inline-size: 100%;
	padding: 0;
	border: 0;
	background: var( --wp--preset--color--primary-deep );
	border-radius: var( --wp--custom--aqua--radius );
	overflow: hidden;
	aspect-ratio: 3 / 4;
	cursor: pointer;
	box-shadow: var( --wp--preset--shadow--sm );
}

.aqua-videos__thumb[ disabled ] {
	cursor: default;
}

.aqua-videos__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.5s ease, opacity 0.3s ease;
}

.aqua-videos__thumb:hover img {
	transform: scale( 1.06 );
	opacity: 0.85;
}

.aqua-videos__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( transparent 55%, rgba( 13, 12, 35, 0.45 ) );
}

.aqua-videos__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	z-index: 2;
}

.aqua-videos__play svg {
	inline-size: 3.625rem;
	block-size: 3.625rem;
	padding: 1.0625rem;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.92 );
	color: var( --wp--preset--color--primary );
	box-shadow: var( --wp--preset--shadow--base );
	transition: transform 0.25s ease;
}

.aqua-videos__thumb:hover .aqua-videos__play svg {
	transform: scale( 1.1 );
}

.aqua-videos__thumb[ disabled ] .aqua-videos__play {
	opacity: 0.35;
}

.aqua-videos__lightbox {
	position: fixed;
	inset: 0;
	z-index: 210;
	background: rgba( 8, 9, 28, 0.94 );
	display: none;
	align-items: center;
	justify-content: center;
	padding: var( --wp--preset--spacing--50 );
}

.aqua-videos__lightbox.is-open {
	display: flex;
}

.aqua-videos__player {
	max-inline-size: 94vw;
	max-block-size: 88vh;
	border-radius: 12px;
	box-shadow: var( --wp--preset--shadow--lg );
	background: #000;
}

.aqua-videos__close {
	position: absolute;
	inset-block-start: 1.375rem;
	inset-inline-end: 1.625rem;
	inline-size: 2.875rem;
	block-size: 2.875rem;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.14 );
	cursor: pointer;
}

.aqua-videos__close::before {
	content: "";
	position: absolute;
	inset: 0.6875rem;
	background: var( --wp--preset--color--base );
	-webkit-mask: var( --aqua-icon-close ) center / contain no-repeat;
	mask: var( --aqua-icon-close ) center / contain no-repeat;
}

.aqua-videos__close:hover {
	background: rgba( 255, 255, 255, 0.25 );
}

body.aqua-has-lightbox {
	overflow: hidden;
}

@media ( max-width: 1024px ) {
	.aqua-videos__grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( max-width: 640px ) {
	.aqua-videos__grid {
		grid-template-columns: repeat( 2, 1fr );
		gap: var( --wp--preset--spacing--30 );
	}
}

/* Before / after comparison slider. */
.aqua-compare {
	position: relative;
	max-inline-size: 57.5rem;
	margin-inline: auto;
	border-radius: var( --wp--custom--aqua--radius-lg );
	overflow: hidden;
	box-shadow: var( --wp--preset--shadow--base );
	aspect-ratio: 16 / 10;
	user-select: none;
	touch-action: none;
}

.aqua-compare__before,
.aqua-compare__after {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	pointer-events: none;
}

.aqua-compare__after {
	clip-path: inset( 0 0 0 50% );
}

.aqua-compare__tag {
	position: absolute;
	inset-block-start: 1rem;
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 700;
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --wp--preset--color--base );
	background: rgba( 15, 18, 55, 0.66 );
	padding: 0.375rem 0.75rem;
	border-radius: var( --wp--custom--aqua--radius-pill );
	pointer-events: none;
}

.aqua-compare__tag--before {
	inset-inline-start: 1rem;
}

.aqua-compare__tag--after {
	inset-inline-end: 1rem;
	background: rgba( 31, 122, 61, 0.82 );
}

.aqua-compare__handle {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	inline-size: 3px;
	background: var( --wp--preset--color--base );
	translate: -50% 0;
	pointer-events: none;
}

.aqua-compare__knob {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	inline-size: 2.875rem;
	block-size: 2.875rem;
	border-radius: 50%;
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--primary );
	box-shadow: var( --wp--preset--shadow--base );
	display: grid;
	place-items: center;
	pointer-events: none;
}

.aqua-compare__knob svg {
	inline-size: 1.375rem;
	block-size: 1.375rem;
}

.aqua-compare__range {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	opacity: 0;
	cursor: ew-resize;
	margin: 0;
}

.aqua-compare__range:focus-visible {
	opacity: 1;
	outline-offset: -4px;
}

@media ( max-width: 520px ) {
	.aqua-compare__knob {
		inline-size: 2.5rem;
		block-size: 2.5rem;
	}
}

/* ------------------------------------------------------------------------- *
 * 11. Blog templates
 * ------------------------------------------------------------------------- */

.aqua-archive-head > * + * {
	margin-block-start: var( --wp--preset--spacing--40 );
}

.aqua-post-meta {
	color: var( --wp--preset--color--muted );
	gap: var( --wp--preset--spacing--40 );
}

.aqua-postloop .aqua-cardgrid {
	grid-template-columns: repeat( 3, 1fr );
}

.aqua-pagination {
	margin-block-start: var( --wp--preset--spacing--70 );
	gap: var( --wp--preset--spacing--30 );
}

.aqua-search .wp-block-search__input {
	border: 1.5px solid var( --wp--preset--color--outline );
	border-radius: var( --wp--custom--aqua--radius-pill );
	padding: 0.8125rem 1.125rem;
}

.aqua-comment__avatar {
	flex-basis: 3.5rem;
	flex-grow: 0;
}

@media ( max-width: 1024px ) {
	.aqua-postloop .aqua-cardgrid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 640px ) {
	.aqua-postloop .aqua-cardgrid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------------- *
 * 12. Motion
 * ------------------------------------------------------------------------- */

/*
 * The source site revealed sections with a scroll listener and a 1.5s failsafe.
 * A scroll-driven CSS animation does the same job with no JavaScript, and
 * browsers without support simply show the content — which is the failsafe.
 */
@keyframes aqua-reveal {
	from {
		opacity: 0;
		transform: translateY( 26px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@supports ( animation-timeline: view() ) {
	@media ( prefers-reduced-motion: no-preference ) {
		.aqua-card,
		.aqua-headgroup,
		.aqua-about__copy,
		.aqua-about__media,
		.aqua-eco__copy,
		.aqua-eco__media,
		.aqua-tile,
		.aqua-step,
		.aqua-compare {
			animation: aqua-reveal linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 28%;
		}
	}
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}