/* ==========================================================================
   AGYATVYAKTI — EDITORIAL LAYER
   Stage 08. The bone canvas, display typography, inverted services block,
   alternating work rows, manifesto and reading rail.

   Loads after base, layout, studio and components, so it refines what those
   layers establish rather than restating it. Selectors here are deliberately
   shallow — one class deep wherever possible — so nothing further down the
   cascade has to fight for specificity.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CANVAS
   The page is bone paper, not screen white. Alt sections step one shade
   down rather than up, so the rhythm reads as pressed rather than lit.
   -------------------------------------------------------------------------- */
body {
	background: var(--agy-white);
}

.agy-section--alt {
	background: var(--agy-bone-deep);
}

/* The existing ambient noise is tuned for white. On bone it needs to be
   lighter or the paper reads dirty rather than textured. */
body::before {
	opacity: 0.028;
}

/* --------------------------------------------------------------------------
   2. ANNOTATION
   Every small structural label moves to mono. This is the layer that makes
   the page read as a drawing: the prose is Space Grotesk, the notation is not.
   -------------------------------------------------------------------------- */
.agy-meta,
.agy-index,
.agy-card__index,
.agy-hero__coord,
.agy-section__coord,
.agy-card__category,
.agy-card__built,
.agy-tag,
.agy-pill,
.agy-method__index,
.agy-process__index,
.agy-footer__domain,
.agy-form__opt,
.agy-notice__eyebrow,
.agy-blog-card__meta,
.agy-article__meta,
.agy-table__price {
	font-family: var(--font-mono);
	font-weight: 400;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

/* Indexes are notation, not headings — reduce their weight accordingly. */
.agy-card__index,
.agy-index {
	font-weight: 500;
	color: var(--agy-gray-500);
}

.agy-index em,
.agy-method__index em {
	font-style: normal;
	color: var(--agy-purple);
}

/* Split eyebrow: label left, place right, hairline between. */
.agy-eyebrow--split {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-md);
	width: 100%;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--agy-rule);
}

.agy-eyebrow__place {
	color: var(--agy-gray-500);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. DISPLAY TYPOGRAPHY
   The one place boldness is spent. Headlines are set large, tight and
   optically kerned; everything around them stays quiet.
   -------------------------------------------------------------------------- */
.agy-hero h1,
.agy-section__title,
.agy-manifesto__line,
.agy-cta h2,
.agy-pricing-hero h1 {
	font-weight: 800;
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	text-wrap: balance;
}

.agy-hero h1 {
	font-size: clamp(2.6rem, 6vw, 5.25rem);
	line-height: 0.92;
	letter-spacing: -0.055em;
	max-width: 22ch;
	text-wrap: pretty;
}

.agy-section__title {
	font-size: clamp(2.35rem, 5.4vw, 4.4rem);
	max-width: 20ch;
}

/* The wordmark is the largest thing on the page and should behave like a
   masthead: full measure, tight leading, no balancing. */
.agy-wordmark {
	letter-spacing: -0.055em;
}

.agy-hero__studio {
	font-family: var(--font-mono);
	font-size: clamp(0.6875rem, 0.95vw, 0.8125rem);
	font-weight: 400;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--agy-gray-500);
}

.agy-lead {
	color: var(--agy-gray-700);
	max-width: 58ch;
}

/* The hero was centred, which reads as a landing page. Editorial setting
   wants a single left edge the whole composition hangs from, so the
   headline, lead and actions all align to the same axis as the rule above. */
.agy-hero__content {
	text-align: left;
	max-width: none;
	margin-inline: 0;
}

.agy-hero__content .agy-lead {
	margin-inline: 0;
}

.agy-hero__actions {
	justify-content: flex-start;
	gap: var(--space-sm);
}

.agy-wordmark {
	justify-content: flex-start;
}

.agy-hero__studio {
	text-align: left;
}

/* Hero bottom: copy on the left, actions pinned right on wide screens. */
@media (min-width: 901px) {
	.agy-hero__content {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"title title"
			"lead  actions";
		align-items: end;
		column-gap: var(--space-xl);
	}

	.agy-hero__content h1 {
		grid-area: title;
	}

	.agy-hero__content .agy-lead {
		grid-area: lead;
	}

	.agy-hero__actions {
		grid-area: actions;
		justify-content: flex-end;
	}
}

/* --------------------------------------------------------------------------
   4. SECTION HEAD
   A rule across the top of every section, with the index sitting on it.
   This replaces the floating rule with something that reads structural.
   -------------------------------------------------------------------------- */
.agy-section__head {
	border-top: 1px solid var(--agy-rule);
	padding-top: 1.15rem;
}

.agy-section__head .agy-section__rule {
	display: none;
}

.agy-section__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-md);
	width: 100%;
}

/* --------------------------------------------------------------------------
   5. WORK — alternating rows
   Projects alternate side to side so the eye travels rather than scans a
   grid. Each row is a full editorial spread, not a card.
   -------------------------------------------------------------------------- */
.agy-work-grid {
	display: flex;
	flex-direction: column;
	gap: clamp(3.5rem, 7vw, 7rem);
}

.agy-card--project {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(1.75rem, 4vw, 4rem);
	align-items: center;
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
}

.agy-card--project:nth-child(even) .agy-project__cover {
	order: 2;
}

.agy-project__cover {
	aspect-ratio: 4 / 3;
	min-height: 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.agy-card--project .agy-card__body {
	padding: 0;
}

.agy-card--project h3 {
	font-size: clamp(1.85rem, 3.4vw, 3rem);
	line-height: 0.98;
	letter-spacing: -0.05em;
	margin-bottom: var(--space-md);
}

.agy-card--project .agy-card__index {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: var(--space-md);
}

/* --------------------------------------------------------------------------
   6. PROJECT THUMBNAILS
   Each cover carries a wireframe of that project's own page architecture.
   Colour is driven entirely by the cover's data-tone, so the drawings stay
   one component while each project keeps its palette.
   -------------------------------------------------------------------------- */
.agy-project__cover {
	--thumb-ink: rgba(87, 61, 99, 0.62);
	--thumb-fill: rgba(87, 61, 99, 0.13);
	--thumb-accent: rgba(142, 18, 158, 0.8);
}

.agy-project__cover[data-tone="warm"] {
	--thumb-ink: rgba(122, 74, 58, 0.6);
	--thumb-fill: rgba(122, 74, 58, 0.13);
	--thumb-accent: rgba(176, 88, 54, 0.85);
}

.agy-project__cover[data-tone="aubergine"] {
	--thumb-ink: rgba(87, 61, 99, 0.66);
	--thumb-fill: rgba(87, 61, 99, 0.15);
	--thumb-accent: rgba(120, 62, 140, 0.85);
}

.agy-project__cover[data-tone="cool"] {
	--thumb-ink: rgba(52, 74, 106, 0.6);
	--thumb-fill: rgba(52, 74, 106, 0.13);
	--thumb-accent: rgba(43, 106, 158, 0.85);
}

.agy-project__cover[data-tone="limestone"] {
	--thumb-ink: rgba(78, 72, 60, 0.62);
	--thumb-fill: rgba(78, 72, 60, 0.13);
	--thumb-accent: rgba(87, 61, 99, 0.9);
}

.agy-project__cover[data-tone="cream"] {
	--thumb-ink: rgba(112, 78, 84, 0.58);
	--thumb-fill: rgba(112, 78, 84, 0.13);
	--thumb-accent: rgba(168, 84, 106, 0.85);
}

.agy-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	padding: 6%;
	/* The drawing settles as the card is approached rather than on load. */
	transition: transform 0.7s var(--ease), opacity 0.5s var(--ease);
}

/* The 48px backdrop grid was drawn for a bare monogram. Against a wireframe
   it competes line-for-line, so it is damped to a texture the drawing sits
   on rather than a second grid the eye has to separate out. */
.agy-card--project .agy-project__cover::before {
	opacity: 0.4;
	background-size: 64px 64px;
}

.agy-card--project:hover .agy-thumb {
	transform: scale(1.018);
}

/* Filled blocks: page furniture that carries no detail at this scale. */
.agy-thumb__fill {
	fill: var(--thumb-fill);
}

/* Outlined blocks: containers whose edge is the information. */
.agy-thumb__stroke {
	fill: none;
	stroke: var(--thumb-ink);
	stroke-width: 1.1;
}

/* Hairlines: structural divisions. */
.agy-thumb__rule,
.agy-thumb__rule-s {
	stroke: var(--thumb-ink);
	stroke-width: 1;
	opacity: 0.5;
	fill: none;
}

.agy-thumb__hatch line {
	stroke: var(--thumb-ink);
	stroke-width: 0.7;
	opacity: 0.45;
}

/* Type stand-ins. Kept low contrast so they read as text, not as bars. */
.agy-thumb__line-f,
.agy-thumb__copy rect {
	fill: var(--thumb-ink);
	opacity: 0.42;
}

.agy-thumb__copy rect {
	opacity: 0.3;
}

/* The accent marks the one thing each page is trying to get done. */
.agy-thumb__accent {
	fill: var(--thumb-accent);
}

.agy-thumb__accent-f {
	fill: var(--thumb-accent);
	opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
	.agy-thumb,
	.agy-card--project:hover .agy-thumb {
		transition: none;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   PROJECT THUMB — sketch variant (self-drawing, category-specific)
   Replaces the flat wireframe with a drawing that means something for the
   category. Real estate: a modern property elevation with a location pin,
   drawn in the hero's blueprint language as the card enters view. Other
   categories will get their own sketch one at a time.
   -------------------------------------------------------------------------- */
.agy-thumb--sketch .bp {
	fill: none;
	stroke: var(--thumb-ink);
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
.agy-thumb--sketch .g-plot .bp { stroke-width: 1; opacity: 0.5; }
.agy-thumb--sketch .gl { fill: var(--thumb-fill); opacity: 0; }
.agy-thumb--sketch .pin { fill: var(--thumb-accent); }
.agy-thumb--sketch .pin-glow { fill: var(--thumb-accent); opacity: 0.16; }
.agy-thumb--sketch .pin-dot { fill: var(--agy-white); }
.agy-thumb--sketch .pin-shadow { fill: var(--thumb-ink); opacity: 0; }
.agy-thumb--sketch .g-pin {
	transform: scale(0);
	transform-box: fill-box;
	transform-origin: center;
}

@keyframes agy-thumb-draw { to { stroke-dashoffset: 0; } }
@keyframes agy-thumb-fade { to { opacity: 1; } }
@keyframes agy-thumb-fade-half { to { opacity: 0.5; } }
@keyframes agy-thumb-pop { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }

.agy-card--project.is-visible .agy-thumb--sketch .g-plot  .bp { animation: agy-thumb-draw 0.9s var(--ease) 0.1s forwards; }
.agy-card--project.is-visible .agy-thumb--sketch .g-build .bp { animation: agy-thumb-draw 0.8s var(--ease) 0.35s forwards; }
.agy-card--project.is-visible .agy-thumb--sketch .g-open  .bp { animation: agy-thumb-draw 0.7s var(--ease) 0.85s forwards; }
.agy-card--project.is-visible .agy-thumb--sketch .gl { animation: agy-thumb-fade 0.5s var(--ease) 1s forwards; }
.agy-card--project.is-visible .agy-thumb--sketch .g-pin { animation: agy-thumb-pop 0.55s var(--ease) 1.2s forwards; }
.agy-card--project.is-visible .agy-thumb--sketch .pin-shadow { animation: agy-thumb-fade-half 0.4s var(--ease) 1.3s forwards; }

/* No-JS and reduced-motion: show the finished drawing, no animation. */
.no-js .agy-thumb--sketch .bp { stroke-dashoffset: 0; }
.no-js .agy-thumb--sketch .gl,
.no-js .agy-thumb--sketch .pin-shadow { opacity: 1; }
.no-js .agy-thumb--sketch .g-pin { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.agy-thumb--sketch .bp { stroke-dashoffset: 0 !important; animation: none !important; }
	.agy-thumb--sketch .gl { opacity: 1 !important; animation: none !important; }
	.agy-thumb--sketch .pin-shadow { opacity: 0.5 !important; animation: none !important; }
	.agy-thumb--sketch .g-pin { transform: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   7. SERVICES — inverted full-bleed list
   The one dark block on the page. It marks the midpoint and gives the
   scroll a change of pressure rather than another field of cards.
   -------------------------------------------------------------------------- */
.agy-services-invert {
	background: var(--agy-ink);
	color: #f4f1ea;
}

.agy-services-invert .agy-section__head {
	border-top-color: rgba(244, 241, 234, 0.22);
}

.agy-services-invert .agy-section__title,
.agy-services-invert h3 {
	color: #f7f5ef;
}

.agy-services-invert .agy-lead,
.agy-services-invert .agy-section__note,
.agy-services-invert p {
	color: rgba(244, 241, 234, 0.62);
}

.agy-services-invert .agy-eyebrow,
.agy-services-invert .agy-index,
.agy-services-invert .agy-meta {
	color: rgba(244, 241, 234, 0.5);
}

.agy-services-invert .agy-index em {
	color: var(--agy-purple-light);
}

.agy-service-list {
	list-style: none;
	margin: 0 0 var(--space-xl);
	padding: 0;
	border-top: 1px solid rgba(244, 241, 234, 0.18);
}

.agy-service {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: baseline;
	padding: clamp(1.4rem, 2.4vw, 2rem) 0;
	border-bottom: 1px solid rgba(244, 241, 234, 0.18);
	transition: background var(--dur-base) var(--ease),
		padding-inline var(--dur-base) var(--ease);
}

/* The row insets on hover — the list acknowledges the pointer without
   moving anything the reader is trying to read. */
.agy-service:hover {
	background: rgba(244, 241, 234, 0.04);
	padding-inline: clamp(0.6rem, 1.4vw, 1.15rem);
}

.agy-service__idx {
	font-family: var(--font-mono);
	font-size: var(--fs-caption);
	color: rgba(244, 241, 234, 0.42);
	font-variant-numeric: tabular-nums;
}

.agy-service__name {
	font-size: clamp(1.3rem, 2.5vw, 2.1rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.02;
	margin: 0;
}

.agy-service__text {
	font-size: var(--fs-small);
	line-height: 1.55;
	margin: 0;
}

/* The secondary button is filled with the page surface by default, which on
   an inverted block reads as a floating bone slab. Clear the fill. */
.agy-services-invert .agy-btn--secondary {
	background: transparent;
	border-color: rgba(244, 241, 234, 0.35);
	color: #f4f1ea;
}

.agy-services-invert .agy-btn--secondary:hover,
.agy-services-invert .agy-btn--secondary:focus-visible {
	background: #f4f1ea;
	border-color: #f4f1ea;
	color: var(--agy-ink);
}

/* --------------------------------------------------------------------------
   7. MANIFESTO
   No supporting copy, no action. The page states its position once and
   moves on. The muted clause is the thing being rejected.
   -------------------------------------------------------------------------- */
.agy-manifesto {
	padding-block: clamp(6rem, 14vw, 12rem);
	background: var(--agy-white);
	border-top: 1px solid var(--agy-rule);
}

.agy-manifesto__line {
	font-size: clamp(2.4rem, 7.6vw, 6.5rem);
	font-weight: 800;
	line-height: 0.94;
	letter-spacing: -0.06em;
	margin: 0;
	max-width: 22ch;
	text-wrap: balance;
}

.agy-manifesto__line span {
	display: block;
}

.agy-manifesto__b {
	color: var(--agy-gray-500);
}

.agy-manifesto__c .agy-manifesto__mark {
	color: var(--agy-purple);
}

/* --------------------------------------------------------------------------
   8. READING RAIL
   Extends the existing side nav with scroll progress and the name of the
   section currently in view. The dots remain the interactive control; the
   rail and card are read-only feedback.
   -------------------------------------------------------------------------- */
.agy-sidenav__rail {
	position: relative;
	width: 2px;
	height: 88px;
	background: var(--agy-rule);
	overflow: hidden;
}

.agy-sidenav__rail-fill {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 0;
	background: var(--agy-purple);
	transition: height 90ms linear;
}

.agy-sidenav__card {
	position: absolute;
	top: 50%;
	right: calc(100% + 14px);
	transform: translateY(-50%) translateX(10px);
	width: 168px;
	padding: 0.85rem 0.95rem;
	background: var(--agy-ink);
	color: #f4f1ea;
	border-radius: var(--radius-md);
	box-shadow: 0 14px 34px rgba(17, 17, 15, 0.18);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-base) var(--ease),
		transform var(--dur-base) var(--ease);
}

.agy-sidenav__card.is-visible {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

.agy-sidenav__card-num {
	display: block;
	margin-bottom: 0.9rem;
	font-family: var(--font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	color: rgba(244, 241, 234, 0.55);
	font-variant-numeric: tabular-nums;
}

.agy-sidenav__card-title {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   9. CLOSING CTA
   The only saturated field on the page, placed where the decision happens.
   -------------------------------------------------------------------------- */
.agy-cta {
	background: var(--agy-ink);
	color: #f4f1ea;
}

.agy-cta h2 {
	font-size: clamp(2.6rem, 8vw, 6rem);
	line-height: 0.92;
	letter-spacing: -0.065em;
	color: #f7f5ef;
}

.agy-cta .agy-lead,
.agy-cta p {
	color: rgba(244, 241, 234, 0.62);
}

.agy-cta .agy-eyebrow {
	color: rgba(244, 241, 234, 0.5);
}

.agy-cta .agy-section__rule {
	background: rgba(244, 241, 234, 0.25);
}

.agy-cta .agy-btn--primary {
	background: #f4f1ea;
	border-color: #f4f1ea;
	color: var(--agy-ink);
}

.agy-cta .agy-btn--primary:hover,
.agy-cta .agy-btn--primary:focus-visible {
	background: var(--agy-purple);
	border-color: var(--agy-purple);
	color: #fff;
}

.agy-cta .agy-btn--secondary {
	background: transparent;
	border-color: rgba(244, 241, 234, 0.35);
	color: #f4f1ea;
}

.agy-cta .agy-btn--secondary:hover,
.agy-cta .agy-btn--secondary:focus-visible {
	background: rgba(244, 241, 234, 0.1);
	border-color: #f4f1ea;
	color: #f4f1ea;
}

/* --------------------------------------------------------------------------
   10. PRICING
   The badge repair itself lives in pricing.css, because that sheet is
   enqueued after this one and would otherwise win at equal specificity.
   -------------------------------------------------------------------------- */
.agy-pricing-card__name {
	letter-spacing: -0.035em;
}

/* --------------------------------------------------------------------------
   11. QUALITY FLOOR
   Focus, motion and mobile behaviour. None of this is optional.
   -------------------------------------------------------------------------- */
:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--agy-purple);
	outline-offset: 3px;
	border-radius: 2px;
}

.agy-services-invert :where(a, button):focus-visible,
.agy-cta :where(a, button):focus-visible {
	outline-color: #f4f1ea;
}

@media (prefers-reduced-motion: reduce) {
	.agy-service,
	.agy-sidenav__card,
	.agy-sidenav__rail-fill {
		transition: none;
	}
}

@media (max-width: 900px) {
	.agy-card--project,
	.agy-card--project:nth-child(even) {
		grid-template-columns: 1fr;
	}

	.agy-card--project:nth-child(even) .agy-project__cover {
		order: 0;
	}

	.agy-service {
		grid-template-columns: 2.25rem minmax(0, 1fr);
		row-gap: 0.5rem;
	}

	.agy-service__text {
		grid-column: 2;
	}

	/* The row inset needs room the phone does not have. */
	.agy-service:hover {
		background: none;
		padding-inline: 0;
	}
}

@media (max-width: 768px) {
	/* The card duplicates the dot labels and crowds a narrow screen. */
	.agy-sidenav__card {
		display: none;
	}

	.agy-sidenav__rail {
		height: 44px;
	}

	/* At phone widths the rail sat over body copy. Pull it tight to the
	   edge and shrink the instrument so it annotates rather than intrudes. */
	.agy-sidenav {
		right: 8px;
		gap: 6px;
	}

	.agy-sidenav__theme {
		width: 28px;
		height: 28px;
	}

	.agy-sidenav__dots {
		gap: 6px;
	}

	.agy-eyebrow--split {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.4rem;
	}
}