/* =========================================================
   Ainush — Design System
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
	--color-primary: #12A9C1;
	--color-secondary: #63C87A;
	--color-dark: #000000;
	--color-bg: #F5FAFA;
	--color-white: #FFFFFF;
	--color-text: #000000;
	--color-text-muted: #333333;
	--color-border: #E1EDEE;

	--gradient-brand: linear-gradient(135deg, #12A9C1, #63C87A);

	--font-heading: 'Poppins', sans-serif;
	--font-body: 'Inter', sans-serif;

	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 28px;

	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 12px 32px rgba(0, 0, 0, 0.10);

	--container-width: 1180px;
	--section-spacing: clamp(3.5rem, 6vw, 6.5rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; max-width: 100%; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-dark);
	line-height: 1.25;
	margin: 0 0 0.6em;
	font-weight: 700;
	overflow-wrap: break-word;
}
h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2 {
	font-family: var(--font-heading);
	font-size: clamp(1.85rem, 3.2vw, 2.5rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #000000;
}
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 600; color: #000000; }
p {
	margin: 0 0 1em;
	color: #000000;
}
.eyebrow {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 0.75em;
}
.text-gradient {
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.section-heading { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
.section-heading h2 {
	font-size: clamp(1.85rem, 3.2vw, 2.5rem);
	font-weight: 700;
	color: #000000;
}
.section-heading p { color: #000000; }

/* ---------- Layout ---------- */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}
.section { padding: var(--section-spacing) 0; }
.section--alt { background: var(--color-white); }
.grid {
	display: grid;
	gap: 32px;
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
	.grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 30px;
	border-radius: 999px;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	border: 2px solid transparent;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn-primary {
	background: var(--gradient-brand);
	color: var(--color-white);
	box-shadow: var(--shadow-md);
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-outline {
	background: transparent;
	border-color: var(--color-dark);
	color: var(--color-dark);
}
.btn-outline:hover { background: var(--color-dark); color: var(--color-white); }
.btn-light {
	background: var(--color-white);
	color: var(--color-dark);
}

/* ---------- Cards ---------- */
.card {
	background: var(--color-white);
	border-radius: var(--radius-md);
	padding: 32px;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-border);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* ---------- Forms ---------- */
.form-field { margin-bottom: 20px; }
.form-field label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-dark);
	margin-bottom: 6px;
}
.form-field input,
.form-field textarea {
	width: 100%;
	padding: 14px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: var(--color-white);
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-text);
}
.form-field input:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(18, 169, 193, 0.15);
}
.form-honeypot { position: absolute; left: -9999px; }
.form-notice {
	padding: 14px 18px;
	border-radius: var(--radius-sm);
	margin-bottom: 24px;
	font-weight: 500;
}
.form-notice--success { background: rgba(99, 200, 122, 0.15); color: #1E7A3B; }
.form-notice--error { background: rgba(220, 90, 90, 0.12); color: #B93131; }

/* ---------- Site Header (Sticky Across All Pages) ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(226, 232, 240, 0.85);
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
	transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
body.is-home .site-header {
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(226, 232, 240, 0.85);
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}
body.is-home .site-header .container {
	max-width: 1600px;
	padding: 0 clamp(24px, 6vw, 100px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-height: 80px;
	padding: 0;
}

.site-logo {
	font-family: var(--font-heading);
	font-size: 2.1rem;
	font-weight: 700;
	color: var(--color-dark);
	line-height: 1;
}
.site-logo img { max-height: 46px; width: auto; }

.primary-nav { flex: 1 1 auto; }
.primary-nav > ul { display: flex; gap: 36px; align-items: center; justify-content: center; }
.primary-nav li { position: relative; list-style: none; }
.primary-nav a {
	position: relative;
	display: block;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 1rem;
	color: var(--color-dark);
	padding: 8px 0;
	transition: color 0.2s ease;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-parent > a { color: var(--color-primary); }

/* Small teal dot marks the active top-level item */
.primary-nav > ul > .current-menu-item > a::before,
.primary-nav > ul > .current-menu-parent > a::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 5px; height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: var(--color-primary);
}

/* Parent item with chevron indicator */
.primary-nav .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.primary-nav .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s ease;
	margin-left: 2px;
}
.primary-nav .menu-item-has-children:hover > a::after {
	transform: rotate(-135deg) translateY(-1px);
}

/* Dropdown Submenu */
.primary-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	background: #FFFFFF;
	min-width: 190px;
	border-radius: 12px;
	box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04);
	border: 1px solid rgba(226, 232, 240, 0.95);
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 1000;
}
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.primary-nav .sub-menu li {
	width: 100%;
}
.primary-nav .sub-menu a {
	padding: 9px 14px;
	font-size: 0.9rem;
	font-weight: 500;
	color: #000000;
	border-radius: 8px;
	white-space: nowrap;
	display: flex;
	align-items: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.primary-nav .sub-menu a:hover,
.primary-nav .sub-menu .current-menu-item > a {
	background: rgba(18, 169, 193, 0.08);
	color: var(--color-primary);
}
.primary-nav .sub-menu a::before,
.primary-nav .sub-menu a::after {
	display: none !important;
}

.site-header__actions { display: flex; align-items: center; gap: 16px; }

.header-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 26px;
	border-radius: 999px;
	background: var(--gradient-brand);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	box-shadow: 0 8px 20px rgba(18, 169, 193, 0.22);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.header-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(18, 169, 193, 0.28); }
.header-cta:hover .btn__arrow { transform: translateX(3px); }

.nav-toggle {
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0;
	flex-shrink: 0;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.nav-toggle:hover { border-color: var(--color-primary); }
.nav-toggle span {
	width: 17px; height: 2px;
	background: var(--color-dark);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Panel opened by the circular button, at every breakpoint. */
.site-menu-panel {
	border-top: 1px solid var(--color-border);
	background: var(--color-white);
	box-shadow: var(--shadow-md);
}
.site-menu-panel__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	padding-top: 22px;
	padding-bottom: 22px;
}
.site-menu-panel__menu { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.site-menu-panel__menu > li { list-style: none; position: relative; }
.site-menu-panel__menu a {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-dark);
}
.site-menu-panel__menu a:hover { color: var(--color-primary); }
.site-menu-panel__menu .sub-menu {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
	padding-left: 12px;
	border-left: 2px solid var(--color-primary);
	list-style: none;
}
.site-menu-panel__menu .sub-menu a {
	font-size: 0.9rem;
	font-weight: 500;
	color: #333333;
}
.site-menu-panel__contact { display: flex; gap: 22px; color: var(--color-text-muted); font-size: 0.92rem; }
.site-menu-panel__contact a:hover { color: var(--color-primary); }

@media (max-width: 1024px) {
	.primary-nav { display: none; }
}
@media (max-width: 620px) {
	.header-cta { display: none; }
	.site-header__inner { padding: 16px 0; }
	.site-logo { font-size: 1.5rem; }
	.site-menu-panel__inner { flex-direction: column; align-items: flex-start; }
}
/* ---------- Site Footer ---------- */
/* Lives in assets/css/footer.css — curved top, network/particle backdrop,
   four-column layout. Kept apart because it is a self-contained section. */

/* ---------- Generic page banner (About / Services / Contact / Blog) ---------- */
.page-banner {
	background: var(--gradient-brand);
	padding: 70px 0;
	text-align: center;
	color: var(--color-white);
}
.page-banner h1 { color: var(--color-white); margin-bottom: 0.4em; }
.page-banner p { color: rgba(255,255,255,0.9); max-width: 600px; margin: 0 auto; }

/* =========================================================
   PAGE TITLE AREA / HERO BANNER  (About template)
   ---------------------------------------------------------
   Follows the Skyrazone banner's structure — a deep full-bleed
   ground, a live particle mesh over it and a large centred
   title — but in Ainush's own palette, built up from
   --color-dark rather than that site's navy, so the banner
   still reads as this brand.

   Two deliberate departures from the reference:

   1. Balanced padding. The reference needs 220px on top and
      100px below because its header sits *over* the banner.
      This site's header is sticky and opaque, so the same
      figures would leave the title stranded near the bottom.
      Padding here is even, and set in one clamp.
   2. A tinted veil over the photograph. The background image
      is content-managed, so contrast cannot depend on which
      picture is in place — the veil guarantees it.
   ========================================================= */
.page-title-area {
	position: relative;
	/* Keeps the banner above any positioned sibling that follows it in the
	   page, so nothing can paint over the header. */
	z-index: 2;
	isolation: isolate;
	overflow: hidden;
	/* Even top and bottom, so the title block sits on the banner's centre line. */
	padding: clamp(24px, 2.7vw, 37px) 0;
	background-color: #06143D;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
}

/* Brand-cast veil: two soft brand glows over a deep blue wash. Sits above the
   photograph and below the wave overlay. */
.page-title-area::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Flat fill, not a gradient. This layer exists only to hold contrast over a
	   post's featured image on single views; on the archive it sits on the same
	   navy as the element itself, so no banding is visible either way. */
	background: rgba(6, 20, 61, 0.93);
}

/* ---------- Animated wave field ----------
   A stack of hairline contours, each drifting sideways at its own rate. Because
   every line travels exactly one of its own wavelengths per cycle, each one
   restarts on a curve identical to where it began — so the loop is seamless by
   construction, not merely long enough to hide. The differing rates make the
   bundle shear against itself, which is what produces the sense of the field
   deforming rather than sliding.

   Transform only, on the compositor. Paths are generated in
   template-parts/sections/page-hero.php. */
.page-title-waves {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;             /* lines run past the box; the banner clips */
	fill: none;
	/* Neutral medium grey — no blue in it, so it reads as grey against the navy
	   rather than as a tint of it. Carried at low per-line opacity (set on each
	   path) so the field stays subtle. */
	stroke: #8C9199;
	stroke-width: 0.8;
	/* Deliberately no mix-blend-mode. The raster version needed `screen` to
	   knock the black out of that artwork; vector hairlines on a dark ground
	   already read as light. Blending also drove a compositing bug that painted
	   the heading dark - a blend group plus dozens of promoted layers made the
	   backdrop resolve wrongly. */
}
.page-title-waves__line {
	animation: ainush-wave-flow var(--wave-dur, 26s) linear infinite;
	/* No will-change: 38 lines would mean 38 promoted layers for a plain
	   transform the compositor handles anyway. */
}

@keyframes ainush-wave-flow {
	from { transform: translateX(0); }
	to   { transform: translateX(var(--wave-shift, -800px)); }
}

/* No decorative ring here on purpose. An oversized circle bottom-right read as
   a sphere sitting in the banner and competed with the wave field, which is
   meant to be the only structure in this background. */


/* The title block never moves — the animation is confined to the wave layer. */
.page-title-content {
	position: relative;
	z-index: 3;
	text-align: center;
}

/* Soft scrim directly behind the title block. The mesh is deliberately lively,
   and without this its links cross the lettering; a centred radial keeps the
   text clean while the network stays busy out at the edges. */
.page-title-content::before {
	content: '';
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	width: min(760px, 96%);
	height: 260px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(8, 32, 55, 0.72) 0%, rgba(8, 32, 55, 0.45) 45%, transparent 72%);
	pointer-events: none;
}

/* Small caps lead-in above the title. */
.page-title-content .page-title-eyebrow {
	display: inline-block;
	font-family: var(--font-heading, 'Poppins', sans-serif);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8FE3D6;
	margin: 0 0 14px;
}

.page-title-content h1 {
	font-family: var(--font-heading, 'Poppins', sans-serif);
	font-size: clamp(2.3rem, 4.6vw, 3.6rem);
	font-weight: 700;
	color: #ffffff;
	margin: 0;
	line-height: 1.14;
	letter-spacing: -0.015em;
}

/* Short brand rule under the title, in place of the reference's plain gap. */
.page-title-content .page-title-rule {
	display: block;          /* it is a <span>; without this the box is ignored */
	width: 78px;
	height: 4px;
	margin: 20px auto 0;
	border-radius: 999px;
	background: var(--gradient-brand);
}

.page-title-content p {
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 1.06rem;
	color: rgba(255, 255, 255, 0.86);
	margin: 18px auto 0;
	max-width: 640px;
	line-height: 1.7;
}

/* Entrance: the banner is above the fold, so this runs on load rather than on
   scroll. Transform/opacity only, and each part is staggered behind the last. */
@keyframes ainush-banner-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}
.page-title-content > * {
	animation: ainush-banner-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.page-title-content > *:nth-child(1) { animation-delay: 0.05s; }
.page-title-content > *:nth-child(2) { animation-delay: 0.15s; }
.page-title-content > *:nth-child(3) { animation-delay: 0.25s; }
.page-title-content > *:nth-child(4) { animation-delay: 0.35s; }

@media (max-width: 767px) {
	.page-title-content .page-title-rule { width: 60px; height: 3px; margin-top: 16px; }
	.page-title-content p { font-size: 1rem; }
}


@media (prefers-reduced-motion: reduce) {
	.page-title-content > * { animation: none; }
	.page-title-waves__line { animation: none; }
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }