/*
Theme Name: Annapurna Studios
Description: Custom block theme for Annapurna Studios, built from the Stitch design system.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
Version: 6.5.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: annapurna-studio
*/

/* Cover images fill their section completely rather than letterboxing. */
.wp-block-cover .wp-block-cover__image-background {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Full-width covers (the portfolio header) carry the same rounded
   corners as every other surface on the site. */
.wp-block-cover.alignfull {
	border-radius: 19px;
	overflow: hidden;
}

/* Capability lists use a "+" marker instead of bullets. */
.wp-block-list.is-style-no-bullets {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

/* ==================================================================
   The section stays bright and clean. Only a whisper of warm light
   so the glass has something to sit against — no tinted wash. The
   depth belongs to the cards, not to the background.
   ================================================================== */
.wp-block-group.alignfull:has(.glass-card) {
	background-image:
		radial-gradient(70% 55% at 15% 10%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%),
		radial-gradient(80% 65% at 70% 100%, rgba(198, 162, 132, 0.018) 0%, rgba(198, 162, 132, 0) 72%);
	background-repeat: no-repeat;
	background-attachment: scroll;
}

/* ==================================================================
   Services cards — frosted glass floating on a pale editorial page.
   Values follow the supplied visual reference.
   ================================================================== */
.wp-block-group.glass-card {
	position: relative;
	overflow: hidden;
	/* fills its column, so all three match the tallest card's content
	   without leaving dead space at the foot of any of them */
	height: 100%;
	display: flex;
	flex-direction: column;

	background-color: rgba(228, 222, 214, 0.58);
	backdrop-filter: blur(30px) saturate(135%);
	-webkit-backdrop-filter: blur(30px) saturate(135%);

	border-color: rgba(255, 255, 255, 1);
	border-radius: 19px;
	box-shadow:
		0 24px 50px -14px rgba(15, 23, 42, 0.10),
		0 8px 22px -8px rgba(154, 52, 18, 0.07),
		0 0 0 1px rgba(255, 255, 255, 0.6),
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		inset 1px 0 0 rgba(255, 255, 255, 0.55),
		inset -1px 0 0 rgba(255, 255, 255, 0.35);
}

/* Ambient light pooling from the top-left. Only readable against the page. */
.wp-block-group.glass-card::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(130% 95% at 6% -5%, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0) 60%),
		radial-gradient(95% 75% at 100% 100%, rgba(194, 65, 12, 0.10) 0%, rgba(194, 65, 12, 0) 66%),
		radial-gradient(85% 70% at 20% 100%, rgba(194, 65, 12, 0.07) 0%, rgba(194, 65, 12, 0) 68%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 26%),
		linear-gradient(180deg, rgba(15, 23, 42, 0.022) 0%, rgba(15, 23, 42, 0.045) 100%);
}

/* Card contents sit above the atmospherics and the watermark. */
.wp-block-group.glass-card > * {
	position: relative;
	z-index: 1;
}

/* Equal height across the row. */
.wp-block-columns .wp-block-column:has(> .glass-card) {
	display: flex;
	flex-direction: column;
}

/* ---- section eyebrow ---- */
.svc-eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
}

.svc-eyebrow::after {
	content: "";
	flex: 0 0 56px;
	height: 1px;
	background: currentColor;
	opacity: 0.45;
}

/* ---- icon bubble ----
   Brushed-silver disc: a conic sweep supplies the metallic banding,
   a radial highlight the light source, and rim insets the curvature. */
.glass-card .svc-badge {
	width: 64px;
	height: 64px;
	border-radius: 9999px;
	background-color: #f4f1ed;
	background-image:
		radial-gradient(58% 52% at 30% 24%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 62%),
		conic-gradient(
			from 205deg at 50% 50%,
			#ece7e1 0deg,
			#ffffff 48deg,
			#e5ddd4 112deg,
			#fbf9f6 176deg,
			#ddd4c9 244deg,
			#ffffff 312deg,
			#ece7e1 360deg
		);
	border: 1px solid rgba(255, 255, 255, 0.95);
	box-shadow:
		0 10px 20px -10px rgba(15, 23, 42, 0.22),
		0 2px 5px -2px rgba(15, 23, 42, 0.10),
		0 0 0 7px rgba(255, 255, 255, 0.20),
		inset 0 1px 1px rgba(255, 255, 255, 1),
		inset 0 -2px 3px rgba(15, 23, 42, 0.06),
		inset 0 0 0 1px rgba(255, 255, 255, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin-bottom: 10px;
}

.glass-card .svc-badge svg {
	width: 27px;
	height: 27px;
	opacity: 1;
	filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7));
}

/* The Phase cards carry their badge inside a space-between header row
   beside the "Phase 0n" label, so the stacked-layout bottom margin would
   throw the row off centre. */
.glass-card .wp-block-group .svc-badge {
	margin-bottom: 0;
}

/* ---- typography inside the card ---- */
.glass-card .svc-title {
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 0;
	max-width: 310px;
}

.glass-card .svc-title::after {
	content: "";
	display: block;
	width: 30px;
	height: 2px;
	margin-top: 16px;
	background: var(--wp--preset--color--coral);
	opacity: 0.8;
}

.glass-card > p {
	font-size: 15.5px;
	line-height: 1.6;
	color: #6b6560;
}

/* ---- capability list ----
   Bottom-anchored so the divider and the accent items line up across
   all three cards. Shorter copy shows the difference as white space
   above the divider, which is the intended trade. */
.glass-card .svc-list {
	margin-top: auto;
	padding-top: 22px;
	border-top: 1px solid rgba(15, 23, 42, 0.07);
	/* the three lists hold different numbers of wrapped lines; a shared
	   minimum height keeps their top edges — and so the dividers — level */
	min-height: 122px;
	box-sizing: border-box;
}

/* ---- corner watermarks: architectural, barely there ---- */
.glass-card:has(.svc-title)::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 250px;
	height: 232px;
	opacity: 0.10;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: cover;
}

/* card 1 — thin flowing curves */
.wp-block-column:nth-child(1) .glass-card:has(.svc-title)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 210 190' fill='none' stroke='%23c2410c' stroke-width='1'%3E%3Cpath d='M-10 170C40 120 80 150 120 105s55-40 105-70'/%3E%3Cpath d='M-10 185C40 135 80 165 120 120s55-40 105-70'/%3E%3Cpath d='M5 195C55 145 95 175 135 130s55-40 105-70'/%3E%3Cpath d='M25 200C75 150 115 180 155 135s55-40 105-70'/%3E%3C/svg%3E");
}

/* card 2 — soft overlapping arcs */
.wp-block-column:nth-child(2) .glass-card:has(.svc-title)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 210 190' fill='none' stroke='%23c2410c' stroke-width='1'%3E%3Ccircle cx='150' cy='150' r='90'/%3E%3Ccircle cx='185' cy='120' r='70'/%3E%3Ccircle cx='120' cy='185' r='55'/%3E%3C/svg%3E");
}

/* card 3 — faint dot field */
.wp-block-column:nth-child(3) .glass-card:has(.svc-title)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 210 190'%3E%3Cg fill='%23c2410c'%3E%3Ccircle cx='120' cy='120' r='1.6'/%3E%3Ccircle cx='140' cy='120' r='1.6'/%3E%3Ccircle cx='160' cy='120' r='1.6'/%3E%3Ccircle cx='180' cy='120' r='1.6'/%3E%3Ccircle cx='200' cy='120' r='1.6'/%3E%3Ccircle cx='120' cy='140' r='1.6'/%3E%3Ccircle cx='140' cy='140' r='1.6'/%3E%3Ccircle cx='160' cy='140' r='1.6'/%3E%3Ccircle cx='180' cy='140' r='1.6'/%3E%3Ccircle cx='200' cy='140' r='1.6'/%3E%3Ccircle cx='120' cy='160' r='1.6'/%3E%3Ccircle cx='140' cy='160' r='1.6'/%3E%3Ccircle cx='160' cy='160' r='1.6'/%3E%3Ccircle cx='180' cy='160' r='1.6'/%3E%3Ccircle cx='200' cy='160' r='1.6'/%3E%3Ccircle cx='140' cy='180' r='1.6'/%3E%3Ccircle cx='160' cy='180' r='1.6'/%3E%3Ccircle cx='180' cy='180' r='1.6'/%3E%3Ccircle cx='200' cy='180' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==================================================================
   Portfolio services — numbered editorial rows.
   ================================================================== */
.svc-num {
	position: relative;
	padding-top: 14px;
}

.svc-num::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 26px;
	height: 2px;
	background: var(--wp--preset--color--coral);
	opacity: 0.8;
}

.svc-desc {
	line-height: 1.65;
	max-width: 42ch;
}

.svc-tags {
	line-height: 1.9;
	opacity: 0.9;
}

.svc-link {
	cursor: default;
}

/* thin rules between the numbered rows */
.wp-block-separator.svc-rule {
	border: 0;
	border-top: 1px solid rgba(15, 23, 42, 0.09);
	margin: 64px 0;
	opacity: 1;
	width: 100%;
	max-width: none;
}

/* project photography sits slightly proud of the page */
.wp-block-image.svc-shot img {
	box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.22);
}

/* Cards 02 and 03 sit side by side with differing copy lengths.
   Stretch both columns and pin the tag row to the foot so the two
   read as a matched pair. */
.wp-block-columns .wp-block-column:has(> .svc-tags) {
	display: flex;
	flex-direction: column;
}

.wp-block-column > .svc-tags {
	margin-top: auto !important;
	padding-top: 20px;
	border-top: 1px solid rgba(15, 23, 42, 0.08);
}

/* A hairline down the middle of the 02 / 03 row. With the rules above
   and below it, the four services read as one ruled grid. */
.wp-block-columns:has(> .wp-block-column > .svc-tags) {
	position: relative;
}

.wp-block-columns:has(> .wp-block-column > .svc-tags)::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background: rgba(15, 23, 42, 0.09);
	pointer-events: none;
}

/* Rows 01 and 04: the grey panel and the text block stretch to the
   height of the image beside them, so both sides align top and bottom. */
.wp-block-columns .wp-block-column > .svc-panel {
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Display-size headings inherit the body's 1.5 line-height, which at 72px
   leaves a chasm between lines. Headings that set their own inline
   line-height are unaffected. */
.wp-block-heading.has-display-font-size {
	line-height: 1.08;
}

.wp-block-heading.has-headline-lg-font-size {
	line-height: 1.15;
}

/* Portfolio header sub-caption: it was running past the solid part of the
   white panel onto the photograph, in muted grey — unreadable. Held to the
   clean area and darkened to navy so it reads as body copy should. */
.wp-block-cover.alignfull .wp-block-column p.has-muted-color {
	color: #1f2d3d;
	max-width: 30rem;
	font-weight: 400;
}

/* ==================================================================
   MOBILE — 781px is WordPress's own column-stacking breakpoint, so
   everything below matches the point at which columns go vertical.
   Nothing here touches the desktop layout.
   ================================================================== */
@media (max-width: 781px) {

	/* --- section padding: 64px sides leaves nothing on a 375px screen --- */
	.wp-block-group.alignfull,
	.wp-block-cover.alignfull {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* --- portfolio header ---------------------------------------------
	   The white panel is a left-to-right gradient, which only works while
	   the text sits in the left column. Stacked, the text lands on the
	   photograph. Turn the panel vertical: light at the top behind the
	   copy, photo showing through below.                                */
	.wp-block-cover.alignfull {
		min-height: 0 !important;
		border-radius: 14px;
		padding-top: 0 !important;
		padding-bottom: 32px !important;
		background-color: var(--wp--preset--color--surface);
		display: block !important;
	}

	/* photograph sits as a band across the top of the block, uncovered */
	.wp-block-cover.alignfull .wp-block-cover__image-background {
		height: 300px;
		top: 0;
		bottom: auto;
		border-radius: 14px 14px 0 0;
		object-position: 45% 70% !important;
	}

	/* no veil needed — the copy is on clean surface, not on the photo */
	.wp-block-cover.alignfull .wp-block-cover__background {
		display: none !important;
	}

	/* all copy sits beneath the photograph */
	.wp-block-cover.alignfull .wp-block-cover__inner-container {
		padding-top: 328px;
		align-self: stretch;
	}

	.wp-block-cover.alignfull h1.wp-block-heading {
		font-size: 34px !important;
		line-height: 1.12 !important;
		margin-bottom: 0 !important;
	}

	.wp-block-cover.alignfull .svc-eyebrow,
	.wp-block-cover.alignfull p.has-label-sm-font-size {
		font-size: 10.5px;
	}

	.wp-block-cover.alignfull .wp-block-column p.has-muted-color {
		margin-top: 20px;
	}

	/* the empty spacer column that balanced the header on desktop */
	/* --- covers: fixed desktop heights are far too tall here ---------- */
	.wp-block-cover:not(.alignfull) {
		min-height: 260px !important;
	}

	/* --- the 02 / 03 divider would run down the middle of stacked cards */
	.wp-block-columns:has(> .wp-block-column > .svc-tags)::after {
		display: none;
	}

	/* --- glass cards ------------------------------------------------- */
	.wp-block-group.glass-card {
		padding: 26px !important;
	}

	/* the shared list height only exists to level dividers side by side */
	.glass-card .svc-list {
		min-height: 0;
		margin-top: 24px;
	}

	.glass-card .svc-title {
		max-width: none;
	}

	/* watermarks are 250px — most of a 320px card */
	.glass-card:has(.svc-title)::after {
		width: 150px;
		height: 140px;
		opacity: 0.07;
	}

	.glass-card .svc-badge {
		width: 54px;
		height: 54px;
	}

	.glass-card .svc-badge svg {
		width: 23px;
		height: 23px;
	}

	/* --- services rows: lead with the image, as 02 and 03 already do --- */
	.wp-block-columns:has(.svc-num) {
		display: flex;
		flex-direction: column;
	}

	.wp-block-columns:has(.svc-num) .wp-block-column:has(.wp-block-image) {
		order: -1;
	}

	.wp-block-columns:has(.svc-num) .wp-block-column {
		flex-basis: auto !important;
	}

	.svc-panel {
		padding: 26px !important;
	}

	.svc-desc {
		max-width: none;
		margin-top: 14px;
	}

	/* --- services rows: one consistent vertical rhythm ---------------- */
	.wp-block-columns:has(.svc-num) .wp-block-column > .wp-block-image {
		margin-bottom: 0;
	}

	.svc-num {
		margin-bottom: 10px !important;
		padding-top: 14px;
	}

	/* the stacked columns inherit the desktop 48px gutter as a vertical
	   gap, which reads as a chasm between a photo and its caption */
	.wp-block-columns:has(.svc-num) {
		row-gap: 14px;
	}

	.svc-num::before {
		width: 22px;
	}

	.svc-num + .wp-block-heading,
	.svc-panel .wp-block-heading {
		margin-bottom: 0 !important;
		line-height: 1.2;
	}

	/* the tag list wrapped mid-run with orphaned separators; smaller and
	   tighter so it reads as one block, with the rule spaced evenly */
	.svc-tags {
		font-size: 10.5px;
		letter-spacing: 0.05em;
		line-height: 2.1;
		margin-top: 20px !important;
		padding-top: 16px;
	}

	.wp-block-column > .svc-tags {
		padding-top: 16px;
	}

	.svc-link {
		margin-top: 22px !important;
	}

	/* rules between rows can breathe less */
	.wp-block-separator.svc-rule {
		margin: 40px 0;
	}

	/* --- CTA: buttons stack full-width rather than crowding ----------- */
	.wp-block-buttons {
		width: 100%;
	}

	.wp-block-buttons .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons .wp-block-button__link {
		display: block;
		text-align: center;
	}

	/* --- header/footer nav ---------------------------------------------
	   Links stay visible as on desktop rather than collapsing into a
	   hamburger overlay. They wrap under the site title when needed.   */
	.wp-block-template-part .wp-block-group {
		row-gap: 10px;
	}

	.wp-block-navigation {
		flex-wrap: wrap;
		justify-content: flex-start !important;
	}

	.wp-block-navigation .wp-block-navigation__container {
		flex-wrap: wrap;
		gap: 6px 18px;
	}

	.wp-block-navigation .wp-block-navigation-item__content {
		font-size: 10.5px;
	}

	/* the hamburger and its overlay never appear */
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		display: none !important;
	}
}

/* Buttons are rectangular, not pills. Inline radii on the CTA blocks
   need overriding, hence the important. */
.wp-block-button .wp-block-button__link,
.wp-element-button {
	border-radius: 4px !important;
}

/* ==================================================================
   Interactive states. Warm accents look inert without one, and there
   were none defined while the palette was teal.
   ================================================================== */
.wp-block-button__link {
	transition: background-color 160ms ease, color 160ms ease;
}

/* white pill on the navy-ember band -> warm cream */
.wp-block-button__link.has-white-background-color:hover,
.wp-block-button__link.has-white-background-color:focus-visible {
	background-color: #fbf1e7 !important;
}

/* deep ember pill -> lifts to the brighter primary */
.wp-block-button__link.has-coral-dark-background-color:hover,
.wp-block-button__link.has-coral-dark-background-color:focus-visible {
	background-color: var(--wp--preset--color--coral) !important;
}

.wp-block-navigation .wp-block-navigation-item__content {
	transition: color 160ms ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--coral);
}

/* ==================================================================
   OUR JOURNEY — Growth & Impact.
   A full-bleed dark band holding a nine-year timeline that scrolls
   sideways. The structure lives in a Custom HTML block on the page;
   everything visual is here so that markup stays untouched.
   ================================================================== */
/* The theme does not set border-box globally, so without this the panels'
   padding is added on top of their flex basis and every card runs wide. */
.annapurna-journey,
.annapurna-journey * {
	box-sizing: border-box;
}

.annapurna-journey {
	position: relative;
	overflow: hidden;
	padding: 78px 0 74px;
	color: #ffffff;
	background:
		radial-gradient(120% 90% at 8% 0%, rgba(234, 88, 12, 0.55) 0%, rgba(234, 88, 12, 0) 58%),
		linear-gradient(118deg, #c2410c 0%, #8a3210 26%, #3a2333 56%, #0f172a 100%);
}

/* a faint diagonal weave, strongest where the light falls */
.annapurna-journey::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.30;
	background-image: repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 46px);
	mask-image: radial-gradient(85% 70% at 20% 15%, #000 0%, transparent 75%);
	-webkit-mask-image: radial-gradient(85% 70% at 20% 15%, #000 0%, transparent 75%);
}

.annapurna-journey .aj-inner {
	position: relative;
	z-index: 2;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px;
}

/* ---- heading ---- */
.annapurna-journey .aj-head {
	text-align: center;
	margin-bottom: 44px;
}

.annapurna-journey .aj-kicker {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: #fdba74;
	margin: 0 0 14px;
}

.annapurna-journey .aj-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
}

.annapurna-journey .aj-title h2 {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 52px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	color: #ffffff;
	margin: 0;
}

/* the hairlines with diamond terminals either side of the title */
.annapurna-journey .aj-orn {
	flex: 1;
	max-width: 230px;
	height: 1px;
	background: rgba(255, 255, 255, 0.42);
	position: relative;
}

.annapurna-journey .aj-orn::after {
	content: "";
	position: absolute;
	top: -3px;
	width: 7px;
	height: 7px;
	background: #ffffff;
	transform: rotate(45deg);
}

.annapurna-journey .aj-orn.is-left::after { right: 0; }
.annapurna-journey .aj-orn.is-right::after { left: 0; }

/* the band states its own conclusion, for anyone who never scrolls */
.annapurna-journey .aj-standfirst {
	margin: 20px auto 0;
	max-width: 46ch;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}

.annapurna-journey .aj-standfirst strong {
	color: #ffffff;
	font-weight: 600;
}

.annapurna-journey .aj-rail {
	position: relative;
	height: 1px;
	background: rgba(255, 255, 255, 0.30);
}

/* ---- the scrolling strip ---- */
.annapurna-journey .aj-striparea { position: relative; }

.annapurna-journey .aj-strip {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 26px 0 10px;
	/* settles on a whole panel rather than stopping halfway through one */
	scroll-snap-type: x mandatory;
}

.annapurna-journey .aj-strip::-webkit-scrollbar { height: 6px; }
.annapurna-journey .aj-strip::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.10); border-radius: 99px; }
.annapurna-journey .aj-strip::-webkit-scrollbar-thumb { background: rgba(253, 186, 116, 0.55); border-radius: 99px; }

/* the strip is focusable, so it scrolls with the arrow keys too */
.annapurna-journey .aj-strip:focus-visible {
	outline: 2px solid #fdba74;
	outline-offset: 6px;
	border-radius: 10px;
}

.annapurna-journey .aj-panel {
	flex: 0 0 268px;
	position: relative;
	scroll-snap-align: start;
	background: rgba(9, 14, 28, 0.52);
	backdrop-filter: blur(10px) saturate(115%);
	-webkit-backdrop-filter: blur(10px) saturate(115%);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 16px;
	padding: 26px 22px 22px;
	display: flex;
	flex-direction: column;
}

/* the two milestone years carry a copper rim and a lit marker */
.annapurna-journey .aj-panel.is-key {
	border-color: rgba(253, 186, 116, 0.55);
	background: rgba(9, 14, 28, 0.62);
}

.annapurna-journey .aj-node {
	position: absolute;
	top: -32px;
	left: 22px;
	width: 13px;
	height: 13px;
	border-radius: 9999px;
	background: #0f172a;
	border: 2px solid rgba(255, 255, 255, 0.75);
}

.annapurna-journey .aj-panel.is-key .aj-node {
	background: #c2410c;
	border-color: #fdba74;
	box-shadow: 0 0 0 5px rgba(194, 65, 12, 0.28);
}

.annapurna-journey .aj-yr {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #fdba74;
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.annapurna-journey .aj-panel h3 {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	margin: 8px 0 14px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: #ffffff;
}

.annapurna-journey .aj-panel ul {
	list-style: none;
	flex: 1;
	margin: 0;
	padding: 0;
}

.annapurna-journey .aj-panel li {
	font-size: 12.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.80);
	padding-left: 14px;
	position: relative;
	margin-bottom: 7px;
}

.annapurna-journey .aj-panel li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 5px;
	height: 5px;
	border-radius: 9999px;
	background: #fdba74;
	opacity: 0.8;
}

.annapurna-journey .aj-panel li strong { color: #ffffff; font-weight: 600; }

.annapurna-journey .aj-ico {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	justify-content: flex-end;
}

.annapurna-journey .aj-ico span {
	width: 38px;
	height: 38px;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	display: flex;
	align-items: center;
	justify-content: center;
}

.annapurna-journey .aj-ico svg {
	width: 18px;
	height: 18px;
	stroke: rgba(255, 255, 255, 0.85);
	fill: none;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- the scroll cue: this band carries one arrow, and this is it.
   It is a real button — clicking or pressing it advances the strip by one
   panel, so the timeline is usable without a trackpad swipe. ---- */
.annapurna-journey .aj-cue {
	position: absolute;
	right: -10px;
	top: calc(50% + 8px);
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	padding: 0;
	border-radius: 9999px;
	z-index: 4;
	cursor: pointer;
	background: rgba(9, 14, 28, 0.72);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(253, 186, 116, 0.5);
	box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.55), 0 0 0 8px rgba(9, 14, 28, 0.30);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition:
		opacity 220ms ease,
		background-color 200ms ease,
		border-color 200ms ease,
		transform 200ms ease;
}

.annapurna-journey .aj-cue:hover {
	background: rgba(194, 65, 12, 0.92);
	border-color: #fdba74;
	transform: translateY(-50%) scale(1.06);
}

.annapurna-journey .aj-cue:active {
	transform: translateY(-50%) scale(0.97);
}

.annapurna-journey .aj-cue:focus-visible {
	outline: 2px solid #fdba74;
	outline-offset: 4px;
}

.annapurna-journey .aj-cue::before {
	content: "";
	width: 14px;
	height: 14px;
	margin-left: -4px;
	border-top: 2.5px solid #fdba74;
	border-right: 2.5px solid #fdba74;
	transform: rotate(45deg);
}

/* set by script once the strip reaches its end — and made unclickable with
   it, so a faded button cannot still be pressed */
.annapurna-journey .aj-cue.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.annapurna-journey .aj-hint {
	margin: 18px 0 0;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	display: flex;
	align-items: center;
	gap: 10px;
}

.annapurna-journey .aj-hint::before {
	content: "";
	width: 34px;
	height: 1px;
	background: rgba(253, 186, 116, 0.7);
}

/* Nine blurred panels are expensive to composite. Below this width the
   blur is dropped for a solid translucent fill — near-identical to look
   at, far cheaper on a mid-range phone. */
@media (max-width: 900px) {
	.annapurna-journey .aj-panel {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: rgba(9, 14, 28, 0.82);
	}
	.annapurna-journey .aj-panel.is-key { background: rgba(9, 14, 28, 0.88); }
	.annapurna-journey .aj-cue {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: rgba(9, 14, 28, 0.88);
	}
}

@media (max-width: 781px) {
	.annapurna-journey { padding: 52px 0 48px; }
	.annapurna-journey .aj-inner { padding: 0 20px; }
	.annapurna-journey .aj-title h2 { font-size: 31px; }
	.annapurna-journey .aj-orn { max-width: 36px; }
	.annapurna-journey .aj-standfirst { font-size: 14px; }
	.annapurna-journey .aj-cue { width: 46px; height: 46px; right: -6px; }
}

/* Government audiences print. Without this the page prints one panel
   and eight invisible ones. */
@media print {
	.annapurna-journey {
		background: #ffffff !important;
		color: #000000;
		padding: 18px 0;
		overflow: visible;
	}
	.annapurna-journey::after { display: none; }
	.annapurna-journey .aj-kicker,
	.annapurna-journey .aj-title h2,
	.annapurna-journey .aj-standfirst,
	.annapurna-journey .aj-yr,
	.annapurna-journey .aj-panel h3,
	.annapurna-journey .aj-panel li { color: #000000 !important; }
	.annapurna-journey .aj-orn { background: #999999; }
	.annapurna-journey .aj-orn::after { background: #000000; }
	.annapurna-journey .aj-rail { background: #999999; }
	.annapurna-journey .aj-strip { display: block; overflow: visible; }
	.annapurna-journey .aj-panel {
		width: 100%;
		flex: none;
		background: #ffffff !important;
		border: 1px solid #bbbbbb;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		break-inside: avoid;
		page-break-inside: avoid;
		margin-bottom: 10px;
	}
	.annapurna-journey .aj-node { display: none; }
	.annapurna-journey .aj-panel li::before { background: #000000; }
	.annapurna-journey .aj-ico span { border-color: #999999; }
	.annapurna-journey .aj-ico svg { stroke: #333333; }
	.annapurna-journey .aj-cue,
	.annapurna-journey .aj-hint { display: none !important; }
}

/* ==================================================================
   SELECTED ENGAGEMENTS — the four client cards.
   Typographic cards on a pale ground, finished with ember line-work
   and a dot field at the foot. No photography, so the copy is never
   competing with an image for room.
   ================================================================== */
.annapurna-clients,
.annapurna-clients * {
	box-sizing: border-box;
}

.annapurna-clients {
	padding: 84px 0 90px;
	background-color: var(--wp--preset--color--surface);
}

.annapurna-clients .ac-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px;
}

/* ---- section head ---- */
.annapurna-clients .ac-eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--coral);
	margin: 0;
}

.annapurna-clients .ac-eyebrow::after {
	content: "";
	flex: 0 0 56px;
	height: 1px;
	background: currentColor;
	opacity: 0.45;
}

.annapurna-clients h2 {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 14px 0 0;
	color: var(--wp--preset--color--navy);
}

.annapurna-clients .ac-sub {
	color: var(--wp--preset--color--muted);
	font-size: 15.5px;
	line-height: 1.65;
	max-width: 640px;
	margin: 14px 0 0;
}

/* ---- the grid ---- */
.annapurna-clients .ac-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 42px;
}

.annapurna-clients .ac-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #fdfcfa;
	border: 1px solid rgba(233, 226, 217, 0.8);
	border-radius: 18px;
	box-shadow:
		0 22px 44px -26px rgba(15, 23, 42, 0.16),
		0 2px 6px -3px rgba(15, 23, 42, 0.05);
	transition:
		transform 500ms cubic-bezier(0.2, 0.7, 0.3, 1),
		box-shadow 500ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.annapurna-clients .ac-card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 34px 60px -22px rgba(15, 23, 42, 0.22),
		0 6px 14px -6px rgba(154, 52, 18, 0.10);
}

/* the foot is left clear for the line-work */
.annapurna-clients .ac-top {
	position: relative;
	z-index: 2;
	padding: 30px 28px 84px;
}

.annapurna-clients .ac-num {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 38px;
	font-weight: 600;
	color: var(--wp--preset--color--coral);
	line-height: 1;
	margin: 0;
}

.annapurna-clients .ac-num::after {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	background: var(--wp--preset--color--coral);
	margin-top: 10px;
}

/* navy disc with a copper rim */
.annapurna-clients .ac-badge {
	position: absolute;
	top: 26px;
	right: 24px;
	width: 56px;
	height: 56px;
	border-radius: 9999px;
	background: radial-gradient(72% 62% at 32% 26%, #24324a 0%, #0f172a 70%);
	border: 1.5px solid rgba(212, 160, 106, 0.75);
	box-shadow:
		0 10px 20px -9px rgba(15, 23, 42, 0.5),
		0 0 0 5px rgba(194, 65, 12, 0.05),
		inset 0 1px 1px rgba(255, 255, 255, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
}

.annapurna-clients .ac-badge svg {
	width: 25px;
	height: 25px;
	stroke: #e8925a;
	fill: none;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* "Agriculture Department" and "Mission Shakti" run to two lines where the
   other two names run to one, and OMFED's department line wraps where the
   others do not. Holding both to the taller of the two cases starts KEY WORK
   at the same height on every card, which is most of what makes the feet
   line up. */
.annapurna-clients .ac-card h3 {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.005em;
	margin: 26px 0 0;
	min-height: 60px;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
}

.annapurna-clients .ac-org {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #7c8595;
	margin: 10px 0 0;
	min-height: 32px;
	line-height: 1.6;
}

.annapurna-clients .ac-rule {
	height: 2px;
	width: 34px;
	background: var(--wp--preset--color--coral);
	opacity: 0.75;
	margin-top: 20px;
}

.annapurna-clients .ac-kw {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 24px 0 16px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--coral);
}

.annapurna-clients .ac-kw::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(226, 168, 128, 0.5);
}

.annapurna-clients .ac-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.annapurna-clients .ac-card li {
	font-size: 13.5px;
	line-height: 1.5;
	color: #2b3648;
	padding-left: 18px;
	position: relative;
	margin-bottom: 12px;
}

.annapurna-clients .ac-card li:last-child {
	margin-bottom: 0;
}

.annapurna-clients .ac-card li::before {
	content: "+";
	position: absolute;
	left: 0;
	top: -1px;
	color: var(--wp--preset--color--coral);
	font-weight: 600;
	font-size: 14px;
}

/* ---- the line-work at the foot ---- */
.annapurna-clients .ac-orn {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	line-height: 0;
	pointer-events: none;
}

.annapurna-clients .ac-orn svg {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 1080px) {
	.annapurna-clients .ac-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 781px) {
	.annapurna-clients { padding: 52px 0 56px; }
	.annapurna-clients .ac-inner { padding: 0 20px; }
	.annapurna-clients h2 { font-size: 29px; }
	.annapurna-clients .ac-grid { grid-template-columns: 1fr; }
	.annapurna-clients .ac-top { padding-bottom: 130px; }
}

@media print {
	.annapurna-clients .ac-grid { grid-template-columns: repeat(2, 1fr); }
	.annapurna-clients .ac-card {
		box-shadow: none;
		border-color: #bbbbbb;
		break-inside: avoid;
		page-break-inside: avoid;
	}
	.annapurna-clients .ac-orn { display: none; }
	.annapurna-clients .ac-top { padding-bottom: 30px; }
}