/* ==========================================================================
   AGYATVYAKTI — STUDIO ELEVATION LAYER
   Purposeful motion, editorial detail, and a considered hover state on
   every interactive element. Extends the architectural language already
   established (point → line → structure, brackets, coordinates) rather
   than adding unrelated decoration.

   Loads AFTER base + layout, so it augments rather than overrides. All
   selectors are additive; no existing rule is touched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. AMBIENT PAGE TEXTURE
   Extremely subtle noise so the white does not read as flat digital paint.
   -------------------------------------------------------------------------- */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 200;
	opacity: 0.028;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.1 0 0 0 0 0.2 0 0 0 1 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

@media (prefers-reduced-motion: reduce) {
	body::before { display: none; }
}

/* --------------------------------------------------------------------------
   1. ARCHITECTURAL SECTION FRAMING
   Every content section gets a construction rule at its top edge — the
   same language as the hero brackets, extended through the page.
   -------------------------------------------------------------------------- */
.agy-section:not(.agy-hero):not(.agy-pricing-hero):not(.agy-cta) {
	position: relative;
}

.agy-section:not(.agy-hero):not(.agy-pricing-hero):not(.agy-cta)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 44px;
	background: var(--agy-rule);
	transform: translateX(-50%);
}

/* Small coordinate label at the top-right of every alt section. */
.agy-section--alt {
	position: relative;
}

.agy-section--alt::after {
	content: "AGY / SECTION";
	position: absolute;
	top: var(--space-md);
	right: var(--space-md);
	font: 700 9px / 1 var(--font-body);
	letter-spacing: 0.22em;
	color: var(--agy-gray-500);
	opacity: 0.55;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. SECTION HEADS — editorial reveal
   The construction rule now draws itself in on scroll, and the index
   number carries proper editorial weight.
   -------------------------------------------------------------------------- */
.agy-section__rule {
	transform-origin: left;
	transform: scaleX(0);
	transition: transform 0.9s var(--ease);
}

.agy-section.is-visible .agy-section__rule,
.agy-section .is-visible .agy-section__rule,
.agy-section__head.is-visible .agy-section__rule,
.agy-section__rule.is-visible {
	transform: scaleX(1);
}

/* Fallback: rules that are never observed still draw eventually. */
.agy-section__head .agy-section__rule {
	animation: agy-rule-draw 1.2s var(--ease) 0.2s forwards;
}

@keyframes agy-rule-draw {
	to { transform: scaleX(1); }
}

.agy-index {
	transition: color var(--dur-base) var(--ease);
}

.agy-index em {
	position: relative;
	display: inline-block;
	transition: transform var(--dur-base) var(--ease);
}

.agy-index em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: var(--agy-purple);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-base) var(--ease);
}

.agy-section:hover .agy-index em::after {
	transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   3. UNIVERSAL CARD HOVER — quieter than the current translateY, more
   architectural. Purple rule draws across the top, index accents, subtle
   surface tint. Cards feel active without lifting like buttons.
   -------------------------------------------------------------------------- */
.agy-card {
	overflow: hidden;
	transition: border-color var(--dur-base) var(--ease),
		background var(--dur-base) var(--ease),
		transform var(--dur-slow) var(--ease);
}

.agy-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--agy-purple);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s var(--ease);
	z-index: 1;
}

.agy-card:hover::before {
	transform: scaleX(1);
}

.agy-card:hover {
	border-color: var(--agy-purple);
	background: linear-gradient(180deg, var(--agy-tint), transparent 60%), var(--agy-white);
}

.agy-card:hover .agy-card__index {
	color: var(--agy-purple);
}

/* --------------------------------------------------------------------------
   4. CATEGORY CARDS — bring the index forward, add movement arrow
   -------------------------------------------------------------------------- */
.agy-card--category {
	padding-block: var(--space-lg);
}

.agy-card--category .agy-card__index {
	font-size: 1.4rem;
	font-family: var(--font-display);
	color: var(--agy-gray-300);
	transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.agy-card--category:hover .agy-card__index {
	color: var(--agy-purple);
	transform: translateX(4px);
}

.agy-card--category h3 {
	position: relative;
	display: inline-block;
	transition: transform var(--dur-base) var(--ease);
}

.agy-card--category h3::after {
	content: "→";
	display: inline-block;
	margin-left: 0.5rem;
	color: var(--agy-purple);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.agy-card--category:hover h3::after {
	opacity: 1;
	transform: translateX(0);
}

/* --------------------------------------------------------------------------
   5. SERVICES LIST — real hover as a full-row interaction
   -------------------------------------------------------------------------- */
.agy-list__item {
	position: relative;
	margin-inline: calc(var(--space-md) * -1);
	padding-inline: var(--space-md);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: background var(--dur-base) var(--ease),
		padding var(--dur-base) var(--ease);
}

.agy-list__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--agy-purple);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--dur-base) var(--ease);
}

.agy-list__item::after {
	content: "→";
	position: absolute;
	right: var(--space-md);
	top: 50%;
	transform: translateY(-50%) translateX(8px);
	color: var(--agy-purple);
	font-size: 1.1rem;
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease),
		transform var(--dur-base) var(--ease);
}

.agy-list__item:hover {
	background: var(--agy-tint);
	padding-left: calc(var(--space-md) + 12px);
	padding-right: calc(var(--space-md) + 24px);
}

.agy-list__item:hover::before {
	transform: scaleY(1);
}

.agy-list__item:hover::after {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

.agy-list__item h3 {
	transition: color var(--dur-base) var(--ease);
}

.agy-list__item:hover h3 {
	color: var(--agy-purple);
}

/* --------------------------------------------------------------------------
   6. PROCESS — nodes fill sequentially as the timeline enters viewport
   -------------------------------------------------------------------------- */
.agy-process__marker::before {
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 1.2s var(--ease);
}

.agy-process.is-visible .agy-process__marker::before,
.agy-process__step.is-visible .agy-process__marker::before {
	transform: scaleY(1);
}

.agy-process__node {
	transition: background var(--dur-base) var(--ease),
		transform var(--dur-base) var(--ease),
		box-shadow var(--dur-base) var(--ease);
}

.agy-process__step.is-visible .agy-process__node {
	background: var(--agy-purple);
	box-shadow: 0 0 0 4px var(--agy-rule-soft);
}

.agy-process__step:hover .agy-process__node {
	transform: scale(1.25);
	box-shadow: 0 0 0 6px var(--agy-rule-faint);
}

.agy-process__step {
	transition: transform var(--dur-base) var(--ease);
}

.agy-process__step:hover {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   7. WORK — Northline concept card, elevated
   -------------------------------------------------------------------------- */
.agy-card--project {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.agy-card--project .agy-project__cover {
	position: relative;
	aspect-ratio: 16 / 10;
	background:
		radial-gradient(600px 300px at 20% 30%, rgba(142, 18, 158, 0.09), transparent 60%),
		radial-gradient(500px 260px at 85% 80%, rgba(178, 60, 192, 0.14), transparent 60%),
		linear-gradient(160deg, #F3F1EC, #E7E2D8);
	overflow: hidden;
	border-bottom: 1px solid var(--agy-gray-200);
	transition: transform 0.6s var(--ease);
}

.agy-card--project .agy-project__cover::before,
.agy-card--project .agy-project__cover::after {
	content: "";
	position: absolute;
	background-image:
		linear-gradient(rgba(87, 61, 99, 0.09) 1px, transparent 1px),
		linear-gradient(90deg, rgba(87, 61, 99, 0.09) 1px, transparent 1px);
	background-size: 48px 48px;
	inset: 0;
}

.agy-card--project .agy-project__cover::after {
	background-image: linear-gradient(120deg, transparent 40%, rgba(87, 61, 99, 0.05) 45%, transparent 50%);
	background-size: 200% 100%;
	background-position: -100% 0;
	transition: background-position 0.9s var(--ease);
}

.agy-card--project:hover .agy-project__cover::after {
	background-position: 100% 0;
}

.agy-project__cover-corner {
	position: absolute;
	width: 28px;
	height: 28px;
	border: 1px solid #573D63;
	opacity: 0.4;
}

.agy-project__cover-corner--tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.agy-project__cover-corner--br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }

/* Base cover-mark positioning. Typography lives in the Work Grid section
   below so it can be tuned once for all tone variants. */
.agy-project__cover-mark {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
}

.agy-card--project .agy-card__body {
	padding: var(--space-md);
}

/* --------------------------------------------------------------------------
   8. WHY — principle cards
   -------------------------------------------------------------------------- */
.agy-card p {
	transition: color var(--dur-base) var(--ease);
}

/* --------------------------------------------------------------------------
   9. STUDIO / TEAM — portrait cards with initials monogram
   -------------------------------------------------------------------------- */
.agy-studio__people li {
	position: relative;
	padding: var(--space-md);
	border: 1px solid var(--agy-gray-200);
	border-top: 2px solid var(--agy-purple);
	border-radius: var(--radius-md);
	background: var(--agy-white);
	transition: transform var(--dur-base) var(--ease),
		border-color var(--dur-base) var(--ease),
		box-shadow var(--dur-base) var(--ease);
}

.agy-studio__people li[data-initials]::before {
	content: attr(data-initials);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--space-sm);
	border-radius: 50%;
	background: var(--agy-purple);
	color: var(--agy-white);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	transition: transform var(--dur-base) var(--ease);
}

.agy-studio__people li:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(17, 16, 22, 0.06);
}

.agy-studio__people li:hover::before {
	transform: rotate(-6deg);
}

/* --------------------------------------------------------------------------
   10. PRICING PREVIEW — enhanced hover, featured plan glow
   -------------------------------------------------------------------------- */
.agy-plan {
	transition: transform var(--dur-base) var(--ease),
		border-color var(--dur-base) var(--ease),
		box-shadow var(--dur-base) var(--ease);
}

.agy-plan:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(17, 16, 22, 0.06);
}

.agy-plan--featured {
	position: relative;
	box-shadow: 0 0 0 1px var(--agy-purple);
}

.agy-plan--featured::before {
	content: "MOST POPULAR";
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.28rem 0.7rem;
	background: var(--agy-purple);
	color: var(--agy-white);
	font-family: var(--font-display);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.16em;
	border-radius: var(--radius-sm);
	z-index: 2;
}

.agy-plan--featured:hover {
	box-shadow: 0 20px 46px rgba(142, 18, 158, 0.16), 0 0 0 1px var(--agy-purple);
}

/* --------------------------------------------------------------------------
   11. PRICING PAGE CARDS — same treatment, keeps existing badge
   -------------------------------------------------------------------------- */
.agy-pricing-card {
	transition: transform var(--dur-base) var(--ease),
		border-color var(--dur-base) var(--ease),
		box-shadow var(--dur-base) var(--ease);
}

.agy-pricing-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(17, 16, 22, 0.06);
}

.agy-pricing-card--popular:hover {
	box-shadow: 0 20px 46px rgba(142, 18, 158, 0.16), 0 0 0 1px var(--agy-purple);
}

.agy-pricing-card__price {
	transition: transform var(--dur-base) var(--ease);
}

.agy-pricing-card:hover .agy-pricing-card__price {
	transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   12. COMPARISON TABLE — row hover already exists; add group animation
   -------------------------------------------------------------------------- */
.agy-table__group th {
	transition: color var(--dur-base) var(--ease);
}

.agy-table tbody tr:not(.agy-table__group):hover th[scope="row"] {
	color: var(--agy-purple);
}

/* --------------------------------------------------------------------------
   13. FAQ — refined open-state animation
   -------------------------------------------------------------------------- */
.agy-faq__item {
	transition: background var(--dur-base) var(--ease);
}

.agy-faq__item:hover:not([open]) {
	background: var(--agy-tint);
}

.agy-faq__q {
	padding-inline: var(--space-sm);
	margin-inline: calc(var(--space-sm) * -1);
	border-radius: var(--radius-sm);
	transition: color var(--dur-base) var(--ease), padding var(--dur-base) var(--ease);
}

.agy-faq__item[open] .agy-faq__q {
	color: var(--agy-purple);
}

.agy-faq__a {
	padding-inline: var(--space-sm);
	margin-inline: calc(var(--space-sm) * -1);
	animation: agy-faq-slide 0.4s var(--ease);
}

@keyframes agy-faq-slide {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   14. BUTTONS — magnetic hover, arrow motion
   -------------------------------------------------------------------------- */
.agy-btn {
	position: relative;
	overflow: hidden;
	transition: transform var(--dur-base) var(--ease),
		background var(--dur-base) var(--ease),
		color var(--dur-base) var(--ease),
		border-color var(--dur-base) var(--ease),
		box-shadow var(--dur-base) var(--ease);
	will-change: transform;
}

.agy-btn--primary::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
	transform: translateX(-100%);
	transition: transform 0.7s var(--ease);
	pointer-events: none;
}

.agy-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(142, 18, 158, 0.22);
}

.agy-btn--primary:hover::after {
	transform: translateX(100%);
}

.agy-btn--secondary:hover {
	transform: translateY(-2px);
	background: var(--agy-tint);
	border-color: var(--agy-purple);
}

/* Arrow animation for any button that ends with "→" */
.agy-btn span[aria-hidden="true"],
.agy-btn .arw {
	display: inline-block;
	transition: transform var(--dur-base) var(--ease);
}

.agy-btn:hover span[aria-hidden="true"],
.agy-btn:hover .arw {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   15. NAV — active state accent
   -------------------------------------------------------------------------- */
.agy-nav__link,
.agy-nav .menu-item > a {
	position: relative;
}

.agy-nav__link::after,
.agy-nav .menu-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: var(--agy-purple);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-base) var(--ease);
}

.agy-nav__link:hover::after,
.agy-nav .menu-item > a:hover::after {
	transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   16. HEADER — subtle purple bar as it becomes sticky
   -------------------------------------------------------------------------- */
.agy-header::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--agy-purple), transparent);
	transition: width 0.6s var(--ease);
}

.agy-header.is-scrolled::after {
	width: 100%;
}

/* --------------------------------------------------------------------------
   17. HERO — ambient drifting dots layer, extra depth
   -------------------------------------------------------------------------- */
.agy-hero__particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.agy-hero__particles span {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--agy-purple);
	opacity: 0.28;
	animation: agy-drift 22s linear infinite;
}

.agy-hero__particles span:nth-child(1) { left: 8%;  top: 20%; animation-delay: -1s;  animation-duration: 26s; }
.agy-hero__particles span:nth-child(2) { left: 22%; top: 74%; animation-delay: -6s;  animation-duration: 30s; opacity: 0.18; }
.agy-hero__particles span:nth-child(3) { left: 40%; top: 12%; animation-delay: -12s; animation-duration: 24s; opacity: 0.22; }
.agy-hero__particles span:nth-child(4) { left: 63%; top: 66%; animation-delay: -3s;  animation-duration: 28s; }
.agy-hero__particles span:nth-child(5) { left: 78%; top: 30%; animation-delay: -18s; animation-duration: 32s; opacity: 0.15; }
.agy-hero__particles span:nth-child(6) { left: 90%; top: 84%; animation-delay: -9s;  animation-duration: 26s; opacity: 0.22; }

@keyframes agy-drift {
	0%   { transform: translate(0, 0); }
	25%  { transform: translate(30px, -20px); }
	50%  { transform: translate(-10px, -40px); }
	75%  { transform: translate(-30px, -10px); }
	100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.agy-hero__particles span { animation: none; }
}

/* --------------------------------------------------------------------------
   HERO BLUEPRINT — self-drawing architectural massing.
   An isometric building draws itself in on view: guides + structure first,
   then floors, mullions and the cantilever. It sits behind the wordmark and
   performs the studio's method — structure gets drawn before anything is
   styled. Pure SVG pathLength + CSS; JS only toggles .is-drawn (main.js).
   -------------------------------------------------------------------------- */
.agy-hero__blueprint {
	position: absolute;
	right: clamp(-3rem, 0.5vw, 2.5rem);
	bottom: clamp(-1rem, 1vw, 2.5rem);
	top: auto;
	width: clamp(26rem, 42vw, 43rem);
	max-width: 58%;
	aspect-ratio: 760 / 600;
	z-index: 1;
	pointer-events: none;
	opacity: 0.8;
}

.agy-hero__blueprint svg { width: 100%; height: 100%; display: block; }

.agy-hero__blueprint .bp {
	fill: none;
	stroke: var(--agy-gray-300);
	stroke-width: 1.1;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
.agy-hero__blueprint .g-guide  .bp { stroke: var(--agy-gray-200); stroke-width: 1; }
.agy-hero__blueprint .g-struct .bp,
.agy-hero__blueprint .g-roof   .bp { stroke: var(--agy-gray-500); stroke-width: 1.4; }

@keyframes agy-bp-draw { to { stroke-dashoffset: 0; } }

/* Staged reveal, keyed off the container gaining .is-drawn on view. */
.agy-hero__blueprint.is-drawn .g-guide  .bp { animation: agy-bp-draw 1.6s var(--ease-firm) 0.15s forwards; }
.agy-hero__blueprint.is-drawn .g-struct .bp { animation: agy-bp-draw 0.85s var(--ease-firm) 0.2s forwards; }
.agy-hero__blueprint.is-drawn .g-roof   .bp { animation: agy-bp-draw 0.6s var(--ease-firm) 0.8s forwards; }
.agy-hero__blueprint.is-drawn .g-floors .bp { animation: agy-bp-draw 0.9s var(--ease-firm) 1.05s forwards; }
.agy-hero__blueprint.is-drawn .g-floors .bp:nth-child(odd) { animation-delay: 1.15s; }
.agy-hero__blueprint.is-drawn .g-mull   .bp { animation: agy-bp-draw 0.7s var(--ease-firm) 1.4s forwards; }
.agy-hero__blueprint.is-drawn .g-canti  .bp { animation: agy-bp-draw 0.6s var(--ease-firm) 1.6s forwards; }

/* No-JS and reduced-motion: show the finished drawing, no animation. */
.no-js .agy-hero__blueprint .bp,
.agy-hero__blueprint.is-drawn-instant .bp { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
	.agy-hero__blueprint .bp { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* Keep mobile clean — the massing is a desktop flourish. */
@media (max-width: 860px) {
	.agy-hero__blueprint { display: none; }
}

/* --------------------------------------------------------------------------
   18. MARQUEE — capabilities ticker between hero and problem
   -------------------------------------------------------------------------- */
.agy-marquee {
	position: relative;
	padding-block: var(--space-lg);
	border-block: 1px solid var(--agy-gray-200);
	background: var(--agy-white);
	overflow: hidden;
}

.agy-marquee__track {
	display: flex;
	gap: var(--space-lg);
	width: max-content;
	animation: agy-marquee 40s linear infinite;
	will-change: transform;
}

.agy-marquee:hover .agy-marquee__track {
	animation-play-state: paused;
}

.agy-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-lg);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.4rem, 3.2vw, 2.6rem);
	letter-spacing: -0.03em;
	color: var(--agy-black);
	white-space: nowrap;
	line-height: 1;
}

.agy-marquee__item::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--agy-purple);
	flex: 0 0 auto;
}

.agy-marquee__item.is-muted {
	color: var(--agy-gray-300);
}

@keyframes agy-marquee {
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.agy-marquee__track { animation: none; }
}

/* --------------------------------------------------------------------------
   19. FOOTER — social interaction
   -------------------------------------------------------------------------- */
.agy-footer__social li {
	transition: transform var(--dur-base) var(--ease);
}

.agy-footer__social li:hover {
	transform: translateY(-2px);
}

.agy-footer__social a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.agy-footer__social a::before {
	content: "→";
	color: var(--agy-purple);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.agy-footer__social a:hover::before {
	opacity: 1;
	transform: translateX(0);
}

/* --------------------------------------------------------------------------
   20. CTA SECTION — ambient light
   -------------------------------------------------------------------------- */
.agy-cta {
	position: relative;
	overflow: hidden;
}

.agy-cta::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60vw;
	height: 60vw;
	max-width: 600px;
	max-height: 600px;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(142, 18, 158, 0.06), transparent 60%);
	pointer-events: none;
	z-index: 0;
}

.agy-cta .agy-container {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   21. RESPECT REDUCED MOTION
   All decorative animations already respect this; this collapses hover
   transforms so nothing shifts unexpectedly for those users.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.agy-card:hover,
	.agy-plan:hover,
	.agy-pricing-card:hover,
	.agy-btn:hover,
	.agy-process__step:hover,
	.agy-studio__people li:hover,
	.agy-footer__social li:hover {
		transform: none;
	}

	.agy-marquee__track,
	.agy-hero__particles span,
	.agy-btn--primary::after,
	.agy-card--project .agy-project__cover::after {
		animation: none !important;
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   22. WORK GRID — 3-col desktop, tone variants keyed to project data
   Each cover carries a subtle tone shift so the grid does not read as
   identical stamps. Same palette throughout, just varied.
   -------------------------------------------------------------------------- */
.agy-work-grid {
	gap: var(--space-lg);
}

/* Tone variants — all sit inside the studio palette (limestone / aubergine
   / purple), differentiated by hue temperature and gradient direction. */
.agy-project__cover[data-tone="warm"] {
	background:
		radial-gradient(600px 300px at 20% 30%, rgba(142, 18, 158, 0.10), transparent 60%),
		radial-gradient(500px 260px at 85% 80%, rgba(178, 60, 192, 0.12), transparent 60%),
		linear-gradient(160deg, #EFEAE0, #E1D9CC);
}

.agy-project__cover[data-tone="aubergine"] {
	background:
		radial-gradient(600px 300px at 30% 40%, rgba(87, 61, 99, 0.12), transparent 60%),
		radial-gradient(500px 260px at 75% 70%, rgba(142, 18, 158, 0.09), transparent 60%),
		linear-gradient(140deg, #F1EBE2, #E5DED0);
}

/* Cool sits in the same paper family as the rest — a cooler sheet, not a
   lavender wash. The earlier mix read as a different material beside the
   warm and cream covers. */
.agy-project__cover[data-tone="cool"] {
	background:
		radial-gradient(600px 300px at 20% 25%, rgba(52, 74, 106, 0.10), transparent 60%),
		radial-gradient(500px 260px at 80% 75%, rgba(142, 18, 158, 0.06), transparent 60%),
		linear-gradient(160deg, #EFEEEA, #DFE0DF);
}

.agy-project__cover[data-tone="limestone"] {
	background:
		radial-gradient(600px 300px at 20% 30%, rgba(142, 18, 158, 0.09), transparent 60%),
		radial-gradient(500px 260px at 85% 80%, rgba(178, 60, 192, 0.14), transparent 60%),
		linear-gradient(160deg, #F3F1EC, #E7E2D8);
}

.agy-project__cover[data-tone="cream"] {
	background:
		radial-gradient(600px 300px at 25% 35%, rgba(178, 60, 192, 0.14), transparent 60%),
		radial-gradient(500px 260px at 80% 75%, rgba(87, 61, 99, 0.10), transparent 60%),
		linear-gradient(150deg, #F4EFE6, #E9E2D3);
}

/* Monogram mark — big, graphic, always fits.
   Replaces the earlier full-name treatment which broke on mobile for
   longer names like "Mockup Studio & Academy". */
.agy-project__cover-mark {
	font-size: clamp(2.8rem, 6vw, 5rem);
	letter-spacing: -0.06em;
	font-weight: 800;
	color: #573D63;
	opacity: 0.75;
	padding: 0 var(--space-md);
	line-height: 1;
	text-align: center;
}

.agy-project__cover[data-tone="cool"] .agy-project__cover-mark {
	color: #453058;
}


/* --------------------------------------------------------------------------
   22b. WHATSAPP — floating enquiry shortcut
   Agyatvyakti purple/near-black visual language; subtle pulse only.
   -------------------------------------------------------------------------- */
.agy-whatsapp {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 88;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--agy-white);
	background: var(--agy-purple);
	border: 1px solid rgba(255,255,255,.14);
	box-shadow: 0 10px 28px rgba(20, 12, 28, .16);
	text-decoration: none;
	transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
	isolation: isolate;
}

.agy-whatsapp__pulse {
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 1px solid var(--agy-purple);
	opacity: 0;
	pointer-events: none;
	animation: agy-whatsapp-pulse 2.8s ease-out infinite;
	z-index: -1;
}

.agy-whatsapp__icon {
	width: 25px;
	height: 25px;
	display: block;
}

.agy-whatsapp:hover,
.agy-whatsapp:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(20, 12, 28, .22);
	outline: none;
}

.agy-whatsapp:focus-visible {
	box-shadow: 0 0 0 3px var(--agy-paper), 0 0 0 5px var(--agy-purple), 0 14px 34px rgba(20, 12, 28, .2);
}

@keyframes agy-whatsapp-pulse {
	0% { transform: scale(.92); opacity: .45; }
	65%, 100% { transform: scale(1.25); opacity: 0; }
}

@media (max-width: 900px) {
	.agy-whatsapp {
		right: 16px;
		bottom: 16px;
		width: 48px;
		height: 48px;
	}
	.agy-whatsapp__icon { width: 23px; height: 23px; }
}

@media (prefers-reduced-motion: reduce) {
	.agy-whatsapp,
	.agy-whatsapp__pulse { animation: none; transition: none; }
}

/* --------------------------------------------------------------------------
   23. SIDE NAV — floating dots + theme toggle
   Minimal global wayfinding instrument. No background panel.
   -------------------------------------------------------------------------- */
.agy-sidenav {
	position: fixed;
	top: 50%;
	right: 22px;
	transform: translateY(-50%);
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}

.agy-sidenav > * { pointer-events: auto; }

.agy-sidenav__theme {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--agy-rule-soft);
	background: var(--agy-paper);
	color: var(--agy-gray-700);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(20, 12, 28, .08);
	transition: color 160ms var(--ease), transform 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease);
}

.agy-sidenav__theme:hover,
.agy-sidenav__theme:focus-visible {
	color: var(--agy-purple);
	border-color: var(--agy-purple);
	transform: scale(1.05);
	outline: 0;
}

.agy-sidenav__theme svg {
	width: 15px;
	height: 15px;
	display: block;
	transition: transform 220ms var(--ease);
}

.agy-sidenav__theme:hover svg { transform: rotate(12deg); }
.agy-sidenav__theme-sun { display: none; }
[data-theme="dark"] .agy-sidenav__theme-moon { display: none; }
[data-theme="dark"] .agy-sidenav__theme-sun  { display: block; }

.agy-sidenav__divider {
	width: 1px;
	height: 8px;
	background: var(--agy-gray-300);
}

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

.agy-sidenav__dot {
	position: relative;
	display: block;
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--agy-gray-300);
	cursor: pointer;
	outline: 0;
	transition: background 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}

/* Keep the visible dot tiny while giving the control a comfortable hit area. */
.agy-sidenav__dot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: transparent;
}

.agy-sidenav__dot:hover,
.agy-sidenav__dot:focus-visible {
	background: var(--agy-purple);
	transform: scale(1.16);
	box-shadow: 0 0 0 2px var(--agy-rule-soft);
}

.agy-sidenav__dot.is-active {
	background: var(--agy-purple);
	transform: scale(1.20);
	box-shadow: 0 0 0 2px var(--agy-rule-soft);
}

/* Single short state-change animation: the active dot "jumps" without growing large. */
.agy-sidenav__dot.is-jumping {
	animation: agy-sidenav-jump 190ms var(--ease-out);
}

@keyframes agy-sidenav-jump {
	0% { transform: scale(1); }
	45% { transform: scale(1.34); }
	100% { transform: scale(1.20); }
}

.agy-sidenav__dot::before {
	content: attr(data-label);
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%) translateX(2px);
	padding: 5px 9px;
	background: var(--agy-black);
	color: var(--agy-white);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	line-height: 1;
	white-space: nowrap;
	border-radius: var(--radius-sm);
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms var(--ease), transform 150ms var(--ease);
}

.agy-sidenav__dot:hover::before,
.agy-sidenav__dot:focus-visible::before {
	opacity: 1;
	transform: translateY(-50%) translateX(-2px);
}

@media (max-width: 900px) {
	.agy-sidenav {
		right: 9px;
		gap: 6px;
	}

	.agy-sidenav__theme {
		width: 29px;
		height: 29px;
		box-shadow: 0 3px 10px rgba(20, 12, 28, .06);
	}

	.agy-sidenav__theme svg {
		width: 14px;
		height: 14px;
	}

	.agy-sidenav__divider { height: 5px; }

	.agy-sidenav__dots {
		gap: 9px;
	}

	.agy-sidenav__dot {
		width: 6px;
		height: 6px;
		background: var(--agy-gray-300);
		transform: none;
		box-shadow: none;
	}

	.agy-sidenav__dot.is-active {
		width: 8px;
		height: 8px;
		transform: none;
		box-shadow: 0 0 0 2px var(--agy-rule-soft);
	}

	.agy-sidenav__dot.is-jumping {
		animation: agy-sidenav-jump-mobile 190ms var(--ease-out);
	}

	@keyframes agy-sidenav-jump-mobile {
		0% { transform: scale(1); }
		45% { transform: scale(1.28); }
		100% { transform: scale(1); }
	}

	/* Tooltips are unnecessary on touch devices. */
	.agy-sidenav__dot::before { display: none; }

	/* The hit area remains touch-friendly, while the visible dot stays tiny. */
	.agy-sidenav__dot::after {
		width: 42px;
		height: 42px;
	}

	/* Let the full mobile navigation panel take visual priority. */
	body.agy-no-scroll .agy-sidenav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.agy-sidenav__theme,
	.agy-sidenav__dot,
	.agy-sidenav__dot.is-jumping { transition: none; animation: none; }
	.agy-sidenav__theme:hover svg { transform: none; }
}

/* --------------------------------------------------------------------------
   23. ENQUIRY FORM — architectural, restrained, matches the theme
   Fields: full-width, hairline bottom border, purple focus underline.
   The form itself is the visual weight — no card wrapper.
   -------------------------------------------------------------------------- */
.agy-form {
	display: grid;
	gap: var(--space-lg);
	margin-top: var(--space-md);
}

.agy-form__row {
	display: grid;
	gap: 0.5rem;
}

.agy-form__row--split {
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
}

.agy-form__row--split > div {
	display: grid;
	gap: 0.5rem;
}

.agy-form label {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	cursor: pointer;
}

.agy-form__label {
	font: 700 10px / 1 var(--font-body);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--agy-gray-700);
}

.agy-form__req {
	color: var(--agy-purple);
	font-size: 0.85rem;
	line-height: 1;
}

.agy-form__opt {
	font: 500 10px / 1 var(--font-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--agy-gray-500);
}

.agy-form input[type="text"],
.agy-form input[type="email"],
.agy-form input[type="tel"],
.agy-form select,
.agy-form textarea {
	width: 100%;
	padding: 0.75rem 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--agy-gray-300);
	border-radius: 0;
	font: 400 1.05rem / 1.5 var(--font-body);
	color: var(--agy-black);
	transition: border-color var(--dur-base) var(--ease),
		box-shadow var(--dur-base) var(--ease);
	appearance: none;
	-webkit-appearance: none;
}

.agy-form select {
	background-image: linear-gradient(45deg, transparent 50%, var(--agy-gray-500) 50%),
		linear-gradient(135deg, var(--agy-gray-500) 50%, transparent 50%);
	background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 24px;
	cursor: pointer;
}

.agy-form textarea {
	resize: vertical;
	min-height: 140px;
	padding: 0.75rem 0;
	font-family: var(--font-body);
}

.agy-form input:focus,
.agy-form select:focus,
.agy-form textarea:focus {
	outline: none;
	border-bottom-color: var(--agy-purple);
	box-shadow: 0 1px 0 0 var(--agy-purple);
}

.agy-form input::placeholder,
.agy-form textarea::placeholder {
	color: var(--agy-gray-500);
	opacity: 0.7;
}

/* Honeypot — visually hidden, accessible name preserved. */
.agy-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.agy-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md);
	margin-top: var(--space-sm);
	padding-top: var(--space-md);
	border-top: 1px solid var(--agy-gray-200);
}

.agy-form__note {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--agy-gray-500);
}

.agy-form__note a {
	color: var(--agy-purple);
	text-decoration: none;
	border-bottom: 1px solid var(--agy-rule);
	transition: border-color var(--dur-base) var(--ease);
}

.agy-form__note a:hover {
	border-bottom-color: var(--agy-purple);
}

/* --------------------------------------------------------------------------
   24. NOTICES — success / error states for the enquiry form
   -------------------------------------------------------------------------- */
.agy-notice {
	padding: var(--space-lg);
	border: 1px solid var(--agy-gray-200);
	border-radius: var(--radius-md);
	background: var(--agy-white);
	border-top: 2px solid var(--agy-purple);
}

.agy-notice--success {
	background: linear-gradient(180deg, var(--agy-tint), transparent 60%), var(--agy-white);
}

.agy-notice--error {
	border-top-color: #b3261e;
	background: linear-gradient(180deg, rgba(179, 38, 30, 0.05), transparent 60%), var(--agy-white);
	margin-bottom: var(--space-lg);
}

.agy-notice--error p {
	margin: 0;
	color: var(--agy-black);
	font-size: var(--fs-small);
}

.agy-notice__eyebrow {
	font: 700 10px / 1 var(--font-body);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--agy-purple);
	margin: 0 0 var(--space-sm) 0;
}

.agy-notice__title {
	font-size: var(--fs-h2);
	margin: 0 0 var(--space-md) 0;
	line-height: 1.15;
}

.agy-notice p {
	margin-bottom: 0;
	color: var(--agy-gray-700);
}

.agy-notice__foot {
	margin-top: var(--space-md) !important;
	padding-top: var(--space-md);
	border-top: 1px solid var(--agy-gray-200);
}

@media (max-width: 600px) {
	.agy-form__row--split {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}
	.agy-form__foot {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Homepage pricing terms */
.agy-plan__terms { margin: 0 0 .5rem; font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--agy-gray-500); }