/* Header & Hero V1. Other templates, footer and later sections are untouched. */
.site-header {
	position: relative;
	z-index: 30;
	padding-top: 1.5rem;
	border: 0;
}

.site-header__inner.container,
.hero__inner.container { width: min(80rem, calc(100% - 5rem)); }

.site-header__inner {
	position: relative;
	min-height: 5.25rem;
	gap: 2rem;
	padding: 0.75rem 1rem 0.75rem 2rem;
	border: 1px solid rgb(8 14 44 / 7%);
	border-radius: 5rem;
	background: rgb(247 247 255 / 90%);
	box-shadow: 0 12px 48px rgb(8 14 44 / 5%), inset 0 1px 0 rgb(255 255 255 / 90%);
	backdrop-filter: blur(20px);
}

.site-branding { flex-shrink: 0; padding: 0; }

/* Display-only window onto the original horizontal logo: x800/y225/w700/h205.
   The 1536x1024 brand sheet is copied byte-for-byte, never raster-edited. */
.brand-logo { display: block; border-radius: 0.25rem; }
.brand-logo__window {
	position: relative;
	display: block;
	width: 11.25rem;
	height: 3.295rem;
	overflow: hidden;
}
.brand-logo__window img {
	position: absolute;
	left: -12.857rem;
	top: -3.616rem;
	width: 24.686rem;
	max-width: none;
	height: auto;
}

.primary-navigation { flex: 1; min-width: 0; }
.primary-menu {
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2rem);
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 600;
}
.primary-menu > li:first-child,
.primary-menu > .menu-item--cta { margin-inline-start: auto; }
.primary-menu a,
.nav-unavailable { position: relative; display: inline-flex; min-height: 2.75rem; align-items: center; white-space: nowrap; }
.primary-menu a:hover,
.primary-menu [aria-current="page"] { text-decoration: none; }
.primary-menu a[aria-current="page"]::after {
	position: absolute;
	bottom: 0.15rem;
	left: calc(50% - 2px);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--sparrow-blue);
	content: "";
}
.nav-unavailable { color: rgb(8 14 44 / 65%); cursor: not-allowed; }

.button-primary,
.header-cta {
	display: inline-flex;
	min-height: 3.375rem;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	padding: 0.5rem 0.65rem 0.5rem 1.4rem;
	border: 1px solid var(--sparrow-midnight);
	border-radius: 5rem;
	background: var(--sparrow-midnight);
	color: var(--sparrow-white);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
	transition: transform 180ms ease, box-shadow 180ms ease;
}
.primary-menu .header-cta { min-height: 2.875rem; gap: 1.1rem; padding-left: 1.2rem; font-size: 0.75rem; }
.button-primary:not(:disabled):hover,
.header-cta:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgb(8 14 44 / 17%); }
.button-primary:disabled,
.header-cta:disabled { cursor: not-allowed; }
.action-arrow {
	display: inline-flex;
	width: 2.125rem;
	height: 2.125rem;
	align-items: center;
	justify-content: center;
	border: 1px solid rgb(247 247 255 / 20%);
	border-radius: 50%;
	color: var(--sparrow-cyan);
	font-size: 1.1rem;
	font-weight: 400;
}
.header-cta .action-arrow { width: 1.8rem; height: 1.8rem; font-size: 1rem; }

.hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
	background: radial-gradient(ellipse at 78% 41%, rgb(147 57 245 / 9%), transparent 58%), radial-gradient(ellipse at 12% 40%, rgb(2 207 233 / 3%), transparent 55%);
}
.hero__inner {
	display: grid;
	min-height: clamp(38rem, 70svh, 46rem);
	grid-template-columns: 1.06fr 1fr;
	align-items: center;
	gap: 1.25rem;
	padding-block: 4rem 5rem;
}
.hero__copy { position: relative; z-index: 2; min-width: 0; animation: sparrow-reveal 700ms both; }
.eyebrow { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.6; text-transform: uppercase; }
.hero__eyebrow { display: flex; margin: 0 0 1.5rem; align-items: center; gap: 0.6rem; flex-wrap: wrap; color: rgb(8 14 44 / 66%); }
.hero__title {
	position: relative;
	margin: 0 0 1.75rem -0.055em;
	font-family: "Arial Black", Arial, Helvetica, sans-serif;
	font-size: clamp(5rem, 10.5vw, 9.4rem);
	font-weight: 900;
	letter-spacing: -0.075em;
	line-height: 0.86;
}
.hero__title > span { display: block; width: fit-content; }
.hero__gradient {
	padding: 0.04em 0.09em 0.09em 0;
	background: linear-gradient(105deg, var(--sparrow-cyan) 2%, var(--sparrow-blue) 45%, var(--sparrow-violet) 88%);
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.hero__introduction { max-width: 22rem; margin: 0 0 2rem; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); letter-spacing: -0.02em; line-height: 1.5; }
.hero__actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.showreel-action { display: inline-flex; min-height: 3.375rem; align-items: center; gap: 0.75rem; padding: 0; border: 0; background: transparent; color: rgb(8 14 44 / 67%); text-align: left; cursor: not-allowed; }
.showreel-action__play { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: 1px solid rgb(8 14 44 / 25%); border-radius: 50%; }
.showreel-action__label,
.showreel-action__status { display: block; }
.showreel-action__label { font-size: 0.75rem; font-weight: 600; }
.showreel-action__status,
.hero__availability { font-size: 0.625rem; letter-spacing: 0.04em; }

.hero__art { position: relative; min-width: 0; margin: 0; padding-block: 2rem 0; animation: sparrow-reveal 950ms 100ms both; }
/* Independent transform layers leave the original frame and image treatment intact. */
.hero__motion,
.hero__pointer,
.hero__float { min-width: 0; }
.hero__pointer {
	transform: translate3d(var(--bird-pointer-x, 0px), var(--bird-pointer-y, 0px), 0) rotate(var(--bird-pointer-tilt, 0deg));
}
.hero__float { animation: sparrow-bird-float 6s ease-in-out 1.05s infinite; }
.hero__motion.is-motion-paused .hero__float { animation-play-state: paused; }
@keyframes sparrow-bird-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -7px, 0); }
}
/* One decorative composition, reusing the original two rings and local glow. */
.hero__art { isolation: isolate; }
.hero__motion,
.hero__art-caption { position: relative; z-index: 1; }
.hero__atmosphere {
	position: absolute;
	z-index: 0;
	inset: 0;
	pointer-events: none;
	user-select: none;
}
.hero__atmosphere-plane {
	position: absolute;
	inset: 0;
	transform: translate3d(calc(var(--atmosphere-x, 0px) * var(--atmosphere-depth)), calc(var(--atmosphere-y, 0px) * var(--atmosphere-depth)), 0);
}
.hero__atmosphere-plane--glow { --atmosphere-depth: 0.28; }
.hero__atmosphere-plane--orbits { --atmosphere-depth: 0.25; }
.hero__atmosphere-plane--trails { --atmosphere-depth: 0.32; }
.hero__atmosphere-plane--spheres { --atmosphere-depth: 0.20; }
.hero__glow {
	position: absolute;
	inset: 0 -4% 12%;
	border-radius: 50%;
	background: radial-gradient(ellipse at 28% 42%, rgb(2 207 233 / 17%), transparent 55%), radial-gradient(ellipse at 77% 38%, rgb(174 73 240 / 17%), transparent 58%);
	opacity: 0.8;
	animation: sparrow-glow-pulse 12s ease-in-out infinite;
}
.hero__orbit {
	position: absolute;
	width: 106%;
	aspect-ratio: 1;
	top: -12%;
	left: -3%;
	color: var(--sparrow-cyan);
	transform: rotate(-25deg) scaleY(0.86);
}
.hero__orbit--inner { width: 94%; top: -5%; left: 3%; color: var(--sparrow-violet); transform: rotate(25deg) scaleY(0.9); }
.hero__orbit-rotor { display: block; width: 100%; height: 100%; overflow: visible; animation: sparrow-orbit-turn 56s linear infinite; }
.hero__orbit--inner .hero__orbit-rotor { animation-duration: 68s; animation-direction: reverse; }
.hero__orbit-line,
.hero__orbit-accent { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero__orbit-line { opacity: 0.14; }
.hero__orbit--inner .hero__orbit-line { opacity: 0.1; }
.hero__orbit-accent { stroke-width: 1.15; stroke-dasharray: 18 82; stroke-linecap: round; opacity: 0.23; }
.hero__orbit--inner .hero__orbit-accent { stroke-dasharray: 14 86; opacity: 0.17; }
.hero__trails { position: absolute; top: 0; left: -4%; width: 109%; height: 90%; overflow: visible; }
.hero__trail-line,
.hero__trail-highlight { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero__trail-line { stroke-width: 1; opacity: 0.29; }
.hero__trail-line--quiet { opacity: 0.16; }
.hero__trail-highlight {
	stroke-width: 1.6;
	stroke-dasharray: 10 90;
	opacity: 0;
	animation: sparrow-trail-flow 11s linear -3s infinite;
}
.hero__trail-highlight--two { animation-duration: 13s; animation-delay: -7s; }
.hero__trail-highlight--three { animation-duration: 15s; animation-delay: -11s; stroke-width: 1.2; }
.hero__sphere {
	position: absolute;
	left: 73%;
	top: 3%;
	width: clamp(0.6rem, 1.1vw, 1.05rem);
	aspect-ratio: 1;
	border: 1px solid rgb(247 247 255 / 85%);
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, rgb(247 247 255 / 95%), rgb(2 207 233 / 48%) 38%, rgb(34 126 247 / 12%) 72%, transparent 78%);
	box-shadow: 0 0 12px rgb(2 207 233 / 13%);
	--sphere-rise: -6px;
	animation: sparrow-sphere-float 7.2s ease-in-out -1.4s infinite;
}
.hero__sphere--violet {
	left: 87%;
	top: 65%;
	width: clamp(0.7rem, 1.25vw, 1.2rem);
	background: radial-gradient(circle at 32% 28%, rgb(247 247 255 / 95%), rgb(180 104 246 / 66%) 38%, rgb(147 57 245 / 18%) 72%, transparent 78%);
	box-shadow: 0 0 12px rgb(147 57 245 / 14%);
	--sphere-rise: -4px;
	animation-duration: 9.4s;
	animation-delay: -4s;
}
.hero__atmosphere.is-atmosphere-paused * { animation-play-state: paused; }
@keyframes sparrow-orbit-turn { to { transform: rotate(360deg); } }
@keyframes sparrow-trail-flow {
	0% { stroke-dashoffset: 110; opacity: 0; }
	15%, 85% { opacity: 0.65; }
	100% { stroke-dashoffset: -10; opacity: 0; }
}
@keyframes sparrow-sphere-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, var(--sphere-rise), 0); }
}
@keyframes sparrow-glow-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 0.9; } }
@media (max-width: 47.99rem) {
	.hero__atmosphere-plane--trails { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
	.hero__atmosphere * { animation: none; }
	.hero__atmosphere-plane { transform: none; }
	.hero__trail-highlight { display: none; }
	.hero__glow { opacity: 0.8; }
}

.hero__frame {
	position: relative;
	padding: 0.45rem;
	/* Retain the layout footprint without a visible card, rim or card shadow. */
	border: 1px solid transparent;
	transform: translateY(-0.6rem) scale(1.04);
}
.hero__canvas {
	border: 1px solid transparent;
	aspect-ratio: 4 / 3;
}
.hero__bird {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Fit the supplied square PNG into the existing artwork footprint. */
	transform: translateY(-2%) scale(1.15);
}
.hero__art-caption { display: flex; margin-top: 2.25rem; align-items: center; justify-content: flex-end; gap: 1rem; color: rgb(8 14 44 / 68%); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.65; text-transform: uppercase; }
.hero__caption-rule { width: 3rem; height: 1px; background: linear-gradient(90deg, transparent, var(--sparrow-blue)); }
.hero__caption-mark { font-size: 1.75rem; font-weight: 300; }

.project-enquiry { width: min(30rem, calc(100% - 2rem)); max-height: calc(100svh - 2rem); padding: 2.5rem; border: 1px solid rgb(8 14 44 / 12%); border-radius: 1.75rem; background: var(--sparrow-white); color: var(--sparrow-midnight); box-shadow: 0 20px 100px rgb(8 14 44 / 25%); }
.project-enquiry::backdrop { background: rgb(8 14 44 / 50%); backdrop-filter: blur(8px); }
.project-enquiry h2 { margin-block: 0.75rem 1rem; font-size: 2.25rem; letter-spacing: -0.055em; line-height: 1.1; }
.project-enquiry .button-primary { margin-top: 1rem; }

@keyframes sparrow-reveal {
	from { opacity: 0; translate: 0 14px; }
	to { opacity: 1; translate: 0 0; }
}

@media (max-width: 75rem) and (min-width: 64rem) {
	.site-header__inner { padding-left: 1.25rem; gap: 1rem; }
	.brand-logo__window { zoom: 0.9; }
	.primary-menu { gap: 1.25rem; font-size: 0.75rem; }
}

@media (max-width: 63.99rem) {
	.site-header__inner.container,
	.hero__inner.container { width: calc(100% - 3rem); }
	.site-header__inner { min-height: 4.75rem; align-items: center; padding: 0.6rem 1rem 0.6rem 1.4rem; }
	.primary-navigation { flex: 0 0 auto; margin-left: auto; text-align: right; }
	.site-branding { padding: 0; }
	.menu-toggle { display: inline-flex; width: 3rem; min-width: 3rem; height: 3rem; padding: 0; align-items: center; justify-content: center; border: 1px solid rgb(8 14 44 / 12%); border-radius: 50%; }
	.menu-toggle__icon { display: grid; width: 1.1rem; gap: 5px; }
	.menu-toggle__icon > span { display: block; height: 1px; background: currentColor; transition: transform 180ms ease; }
	.menu-toggle[aria-expanded="true"] .menu-toggle__icon > span:first-child { transform: translateY(3px) rotate(45deg); }
	.menu-toggle[aria-expanded="true"] .menu-toggle__icon > span:last-child { transform: translateY(-3px) rotate(-45deg); }
	.primary-menu { position: absolute; top: calc(100% + 0.75rem); inset-inline: 0; display: flex; padding: 1rem; gap: 0.15rem; align-items: stretch; flex-direction: column; border: 1px solid rgb(8 14 44 / 8%); border-radius: 1.75rem; background: var(--sparrow-white); box-shadow: 0 18px 40px rgb(8 14 44 / 10%); font-size: 0.875rem; text-align: left; }
	.menu-toggle:not([hidden]) + .primary-menu { padding-top: 1rem; }
	.primary-menu > li:first-child,
	.primary-menu > .menu-item--cta { margin-inline-start: 0; }
	.primary-menu a,
	.primary-menu .nav-unavailable { width: 100%; min-height: 3rem; padding: 0.75rem 1rem; border-radius: 0.75rem; }
	.primary-menu a[aria-current="page"] { background: rgb(34 126 247 / 6%); }
	.primary-menu a[aria-current="page"]::after { display: none; }
	.primary-menu .menu-item--cta { margin-top: 0.5rem; }
	.primary-menu .header-cta { width: 100%; justify-content: space-between; padding: 0.4rem 0.6rem 0.4rem 1rem; }
	.site-header__inner:not(.has-navigation-js) { flex-wrap: wrap; border-radius: 2rem; }
	.site-header__inner:not(.has-navigation-js) .primary-navigation { flex: 1 0 100%; margin-left: 0; }
	.site-header__inner:not(.has-navigation-js) .primary-menu { position: static; border: 0; background: transparent; box-shadow: none; }
	.hero__inner { min-height: 34rem; gap: 1rem; padding-block: 4rem; }
	.hero__title { font-size: clamp(4.75rem, 10.4vw, 7.4rem); }
	.hero__eyebrow { gap: 0.4rem; font-size: 0.55rem; letter-spacing: 0.08em; }
	.hero__introduction { font-size: 1.05rem; max-width: 20rem; }
	.hero__actions { gap: 1rem; }
}

@media (max-width: 47.99rem) {
	.site-header { padding-top: 1rem; }
	.site-header__inner.container,
	.hero__inner.container { width: calc(100% - 2rem); }
	.site-header__inner { min-height: 4.375rem; padding: 0.5rem 0.6rem 0.5rem 1.2rem; }
	.brand-logo__window { zoom: 0.84; }
	.hero__inner { grid-template-columns: 1fr; gap: 2.75rem; min-height: 0; padding-block: 3.5rem 3rem; }
	.hero__title { font-size: clamp(3.6rem, 17.5vw, 7rem); }
	.hero__eyebrow { margin-bottom: 1.25rem; font-size: 0.575rem; }
	.hero__introduction { max-width: 24rem; margin-bottom: 1.75rem; font-size: 1.0625rem; }
	.hero__actions { gap: 1rem 1.2rem; }
	.hero__art { width: calc(100% - 0.6rem); justify-self: center; padding-block: 0.75rem 0; }
	.hero__frame { padding: 0.35rem; transform: translateY(-0.25rem) scale(1.02); }
	.hero__orbit--outer { top: -13%; }
	.hero__art-caption { margin-top: 1.5rem; font-size: 0.55rem; }
	.project-enquiry { padding: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__float { animation: none; transform: none; }
	.hero__pointer { transform: none; }
	.hero__copy,
	.hero__art { animation: none; opacity: 1; translate: none; }
	.button-primary,
	.header-cta,
	.menu-toggle__icon > span { transition: none; }
	.button-primary:not(:disabled):hover,
	.header-cta:not(:disabled):hover { transform: none; }
}