/* ==========================================================================
   About Us — editorial hero + alternating split sections, in the same
   visual language as who-we-are.css (brand-blue eyebrows, Manrope
   headlines, tinted section backgrounds). --brand-blue / --font-manrope /
   --tint / --white / --charcoal are defined once in style.css :root.
   ========================================================================== */

/* Scroll reveal (.reveal / .is-visible) now lives globally in style.css. */

.about-eyebrow {
	display: block;
	font-family: var(--font-manrope);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--brand-blue);
	margin-bottom: 12px;
}
.about-eyebrow--onbrand { color: rgba(255, 255, 255, .8); }

/* ==========================================================================
   Brand Meaning — opening section of the page. Scroll-pinned ring-travel
   hero (GSAP ScrollTrigger, see about.js) on a full-bleed navy dot-grid
   band. Pin progress p (0-1) drives every value; nothing here is
   time-based, and there is no autoplay.

   THE CSS DEFAULT BELOW *IS* THE p=0 STATE (big, centred ring/logo, text
   hidden) — not the final resting state. This is deliberate: the section
   must render the large centred logo instantly on load, before GSAP has
   run, with zero flash when the timeline takes over on first scroll. JS
   only ever moves values forward from this exact default; it never swaps
   in a different starting point. The prefers-reduced-motion block further
   down is the one place that overrides back to the final resting layout,
   and .about-brand--fallback (added by about.js only if GSAP/ScrollTrigger
   failed to load and motion is not reduced) reuses those same overrides so
   the page never gets stuck showing hidden text forever.

   Ring geometry: .about-brand__ring is a plain white-filled, blue-bordered
   circle. Its border is permanent and never animates. .about-brand__logo
   sits inside it, centred by flexbox (not transform), sized as a CSS
   percentage (40%) of the ring's own box, so it can never escape the
   ring's circular silhouette and never needs to know the ring's actual
   pixel size. Flexbox centring (rather than the more common translate(-50%,
   -50%) trick) is deliberate: GSAP fades/scales the logo via `transform`
   too (opacity + scale during FADE/LOGO RETURN), and transform-based
   centring would get permanently baked into a fixed pixel offset the first
   time GSAP touches the element — which would drift off-centre the moment
   the ring's own width/height changes size under it during TRAVEL.
   ========================================================================== */
.about-brand {
	position: relative;
	background: #f8f9fb;
	font-family: var(--font-manrope);
}

/* --header-h is read from the live DOM (about.js) so the hero can centre
   itself in the space BELOW the sticky header instead of the raw
   viewport; the px value here is only the pre-JS fallback. --hero-center-y
   is derived from it once and reused by both the ring and the text column
   so their vertical centre never moves, at any pin progress. */
:root {
	--header-h: 104px;
	/* No leading "+ var(--header-h)" term: .about-brand__stage already
	   begins below the header in normal document flow at load, so that
	   offset is already applied for free. Adding it again here was
	   double-counting it, which pushed the ring's centre well below the
	   true midpoint of the space under the header. */
	--hero-center-y: calc((100vh - var(--header-h)) / 2);
}

.about-brand__band {
	position: absolute;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	top: 0;
	bottom: 0;
	background-color: #001b42;
	background-image: radial-gradient(rgba(255, 255, 255, .06) 1.5px, transparent 1.5px);
	background-size: 18px 18px;
	z-index: 0;
	pointer-events: none;
}

/* The GSAP pin trigger — exactly 100vh. */
.about-brand__stage {
	position: relative;
	z-index: 1;
	height: 100vh;
}

/* p=0 / CSS default: hero size, dead centre. Large and deliberate on a
   1920-wide screen — capped at 560px so it doesn't balloon on very tall
   viewports. */
.about-brand__ring {
	position: absolute;
	top: var(--hero-center-y);
	left: 50%;
	width: min(62vmin, 560px);
	height: min(62vmin, 560px);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #ffffff;
	border: 6px solid #0060f0;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
.about-brand__logo {
	width: 40%;
	height: 40%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.about-brand__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* p=0 / CSS default: hidden, in place 32px below its resting position —
   never a slide-in from off-screen. Fills roughly half the viewport
   width so the resting state doesn't read as sparse next to the ring —
   the ring's own position/size is untouched, this box just grows into
   the empty space to its left. */
.about-brand__text {
	position: absolute;
	top: var(--hero-center-y);
	left: 8%;
	width: 50%;
	max-width: 620px;
	padding-inline-start: clamp(48px, 6vw, 112px);
	transform: translateY(-50%);
	z-index: 2;
	text-align: left;
}
.about-brand__text-el { opacity: 0; transform: translateY(32px); }

.about-brand__text .about-eyebrow {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.about-brand__heading {
	font-size: clamp(40px, 4.4vw, 68px);
	line-height: 1.1;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 16px;
}
.about-brand__body {
	font-size: clamp(17px, 1.4vw, 21px);
	line-height: 1.7;
	color: #b8c8e0;
	margin: 0 0 24px;
	max-width: 46ch;
}
.about-brand__cta { font-size: 16px; padding: 15px 32px; }

/* ---------- 1024px and below: no pin, no horizontal travel ----------
   The centred logo still shows large on load; on scroll it's a simple
   fade-and-rise into view for the ring and the text block (about.js),
   never scroll-hijacked. Ring on top, text below. */
@media (max-width: 1024px) {
	.about-brand__stage {
		position: static;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 32px;
		padding: 72px 24px 48px;
	}
	.about-brand__ring {
		position: static;
		top: auto; left: auto; transform: none;
		width: 72vmin;
		height: 72vmin;
		flex-shrink: 0;
	}
	.about-brand__text {
		position: static;
		transform: none;
		width: 100%;
		max-width: 560px;
		padding-inline-start: 0;
		text-align: center;
	}
	.about-brand__body { max-width: none; }
}

/* ---------- Reduced motion: final state only, pin never engages ----------
   .about-brand--fallback gets the same rules (about.js adds it only if
   GSAP/ScrollTrigger failed to load and motion is not reduced) — without
   it the page would be stuck showing the hero's hidden text forever. */
@media (prefers-reduced-motion: reduce) {
	.about-brand__stage { position: static; height: auto; display: flex; align-items: center; justify-content: center; gap: 48px; padding: 96px 24px; }
	.about-brand__ring { position: static; top: auto; left: auto; transform: none; width: 30vmin; height: 30vmin; order: 2; }
	.about-brand__text { position: static; transform: none; width: 50%; padding-inline-start: 0; order: 1; }
	.about-brand__text-el { opacity: 1; transform: none; }
}
.about-brand--fallback .about-brand__stage { position: static; height: auto; display: flex; align-items: center; justify-content: center; gap: 48px; padding: 96px 24px; }
.about-brand--fallback .about-brand__ring { position: static; top: auto; left: auto; transform: none; width: 30vmin; height: 30vmin; order: 2; }
.about-brand--fallback .about-brand__text { position: static; transform: none; width: 50%; padding-inline-start: 0; order: 1; }
.about-brand--fallback .about-brand__text-el { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) and (max-width: 1023px) {
	.about-brand__stage { flex-direction: column; }
	.about-brand__ring { width: 60vmin; height: 60vmin; }
	.about-brand__text { width: 100%; max-width: 560px; text-align: center; }
}
@media (max-width: 1023px) {
	.about-brand--fallback .about-brand__stage { flex-direction: column; }
	.about-brand--fallback .about-brand__ring { width: 60vmin; height: 60vmin; }
	.about-brand--fallback .about-brand__text { width: 100%; max-width: 560px; text-align: center; }
}

/* ==========================================================================
   Alternating text/image split sections
   ========================================================================== */
.about-split {
	background: var(--white);
	font-family: var(--font-manrope);
}
.about-split:nth-of-type(even) { background: #fafbfd; }

.about-split__container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 96px 24px;
	display: grid;
	grid-template-columns: 46% 54%;
	column-gap: 56px;
	align-items: center;
}
.about-split__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-lg, 24px);
	box-shadow: var(--shadow-md, 0 12px 30px rgba(9, 38, 122, .12));
}

.about-split__headline {
	font-size: clamp(28px, 2.6vw, 38px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.4px;
	color: #1a1a2e;
	margin: 0 0 18px;
}
.about-split__body {
	font-size: 16px;
	line-height: 1.7;
	color: #5a6270;
	max-width: 52ch;
	margin: 0 0 16px;
}
.about-split__footnote {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--brand-blue);
	max-width: 52ch;
	margin: 0;
}

/* ==========================================================================
   Audience split — "For homes" / "For businesses and campuses"
   ========================================================================== */
.about-audience {
	background: var(--tint);
	font-family: var(--font-manrope);
	padding: 96px 24px;
}
.about-audience__container {
	max-width: 1180px;
	margin: 0 auto;
}
.about-audience__intro {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 56px;
}
.about-audience__intro .about-eyebrow { text-align: center; }
.about-audience__intro h2 {
	font-size: clamp(28px, 2.6vw, 38px);
	font-weight: 800;
	color: #1a1a2e;
	margin: 0;
}

.about-audience__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
.about-audience__card {
	background: #fff;
	border-radius: var(--radius-lg, 24px);
	box-shadow: var(--shadow-sm, 0 2px 10px rgba(9, 38, 122, .06));
	padding: 32px;
	display: flex;
	flex-direction: column;
	height: 100%;
}
/* Fixed ratio on the container, not the img — 16:9 matches the homes photo
   natively, so only the business photo (~1.23:1) gets cropped. Keeps both
   cards' headings starting at the same y regardless of source aspect ratio. */
.about-audience__media {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	margin-bottom: 24px;
}
.about-audience__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.about-audience__text {
	flex: 1;
}
.about-audience__card h3 {
	font-size: 22px;
	font-weight: 800;
	color: #1a1a2e;
	margin: 0 0 8px;
}
.about-audience__tagline {
	font-size: 15px;
	font-weight: 700;
	color: var(--brand-blue);
	margin: 0 0 14px;
}
.about-audience__body {
	font-size: 15px;
	line-height: 1.7;
	color: #5a6270;
	margin: 0;
}

/* ==========================================================================
   Built in Theni — white card floating over a full-bleed navy band, stats
   sitting directly on the band. Card and band overlap by a percentage of
   the CARD'S OWN (intrinsic, copy-dependent) height, which plain CSS can't
   express — margin/height percentages always resolve against the
   containing block's WIDTH, never a sibling's height — so .about-local__band
   top is measured and set at runtime (see about.js:positionLocalBand). The
   px value below is only the pre-JS fallback for that custom property.
   ========================================================================== */
.about-local {
	position: relative;
	background: #f8f9fb;
	font-family: var(--font-manrope);
	padding-top: 96px;
}
.about-local__band {
	position: absolute;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	top: var(--local-band-top, 320px);
	bottom: 0;
	background-color: #001b42;
	background-image: radial-gradient(rgba(255, 255, 255, .06) 1.5px, transparent 1.5px);
	background-size: 18px 18px;
	z-index: 0;
	pointer-events: none;
}
.about-local__inner {
	position: relative;
	z-index: 1;
	max-width: 1168px; /* 1120px card + 24px gutter each side */
	margin: 0 auto;
	padding-inline: 24px;
}

/* ---------- card ---------- */
.about-local__card {
	position: relative;
	background: #fff;
	max-width: 1120px;
	margin: 0 auto;
	border-radius: 16px;
	overflow: hidden; /* clips the media column to the card's corners */
	box-shadow: 0 18px 48px rgba(0, 27, 66, .16);
	padding: 0; /* padding lives on .about-local__card-text only — card-level
	               padding is what left the image inset with gaps on 3 sides */
	display: grid;
	grid-template-columns: 56% 44%;
	gap: 0; /* any column-gap reintroduces a white strip beside the image */
}
.about-local__card-text {
	padding: 48px;
	align-self: center; /* media has no align-self override, so it keeps the
	                        grid's default stretch and fills the row's full
	                        height — only the text opts into centering */
}
.about-local__eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #0060f0;
	margin: 0 0 12px;
}
.about-local__heading {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.15;
	color: #0a1b3d;
	margin: 0;
}
.about-local__divider {
	display: block;
	position: relative;
	width: 44px;
	height: 7px;
	margin: 20px 0 18px;
}
.about-local__divider::before {
	content: "";
	position: absolute;
	left: 0; top: 2px;
	width: 37px; height: 3px;
	background: #0060f0;
	border-radius: 2px;
}
.about-local__divider::after {
	content: "";
	position: absolute;
	right: 0; top: 0;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #0060f0;
}
.about-local__body {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	color: #5a6a85;
	max-width: 46ch;
	margin: 0 0 20px;
}
.about-local__link {
	font-size: 15px;
	font-weight: 600;
	color: #0060f0;
	text-decoration: none;
}
.about-local__link:hover { text-decoration: underline; }

.about-local__card-media {
	position: relative;
	/* no padding, no margin, no gap — the card's own overflow:hidden does
	   the corner rounding; this column just fills its grid cell exactly */
}
.about-local__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Map render is a wide 16:9-ish landscape; this cell is much closer to
	   square, so a plain center crop loses Kerala's coastline on the left.
	   40% keeps Kerala, the Theni hub and the Andhra Pradesh label all
	   inside the frame — verified against the actual source image, not
	   guessed. */
	object-position: 40% center;
	display: block;
}

/* ---------- stats, sitting directly on the band ---------- */
.about-local__stats {
	position: relative;
	z-index: 1;
	margin-top: 64px;
	padding-bottom: 96px;
	text-align: center;
}
.about-local__stats-heading {
	font-size: 38px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 8px;
}
.about-local__stats-caption {
	font-size: 14px;
	font-weight: 400;
	font-style: italic;
	color: #93a4c0;
	margin: 0 0 40px;
}
/* Explicit placement, not auto-flow: only 3 of the 6 original grid cells
   are occupied (a staggered top-left/top-right/bottom-centre shape), and
   auto-flow would pack the survivors into row 1 instead of preserving the
   gaps. No placeholder divs for the empty cells — the grid's own row/column
   tracks stay defined whether or not something sits in a given cell. */
.about-local__stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	row-gap: 56px;
	column-gap: 32px;
	max-width: 860px;
	margin: 0 auto;
}
.about-local__stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: center;
}
.about-local__stat-value {
	font-size: 46px;
	font-weight: 700;
	color: #4d9bff;
	letter-spacing: -.5px;
}
.about-local__stat-label {
	font-size: 13px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.5;
	color: #b8c8e0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.about-split__container { grid-template-columns: 1fr; row-gap: 40px; }
	.about-split__media img { max-width: 480px; margin: 0 auto; }
	.about-audience__grid { grid-template-columns: 1fr; }

	/* Card stacks: image on top, full width, flush to the card's top-left
	   and top-right corners (order flips it above the text, which stays
	   first in DOM/reading order) at a fixed height — the row is no longer
	   text-driven once stacked, so the image needs its own explicit height
	   instead of the desktop height:100%. Text below, padded on its own
	   column same as desktop, never on the card. Overlap into the band
	   drops from 22% to 12% of the (now taller, stacked) card's own height
	   — about.js reads this same breakpoint to recompute it. */
	.about-local__card {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.about-local__card-media { order: -1; }
	.about-local__card-text { padding: 32px; }
	.about-local__card-media img { height: 260px; }
}

/* Tablet: same 3-column, same explicit placement as desktop — only the
   gap and the stat value size shrink. */
@media (min-width: 768px) and (max-width: 1023px) {
	.about-local__stats-grid { column-gap: 20px; }
	.about-local__stat-value { font-size: 38px; }
}

@media (max-width: 767px) {
	.about-split__container { padding: 64px 20px; }
	.about-audience { padding: 64px 20px; }
	.about-local { padding-top: 64px; }
	.about-local__inner { padding-inline: 20px; }

	/* The staggered top-left/top-right/bottom-centre shape doesn't survive
	   a narrow screen — single centred column, stacked 24/7, 9+, ₹499. */
	/* Auto-flow handles the single column stacking, just override columns */
	.about-local__stats-grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		row-gap: 36px;
	}
	.about-local__stat-value { font-size: 38px; }
}

/* ==========================================================================
   Desktop refinements (>=1024px only — mobile/tablet untouched)
   "Expanding Across Tamil Nadu." keeps "Tamil Nadu" on one line via a
   non-breaking space in AboutController, not a CSS nowrap, so the heading
   can still wrap naturally before "Tamil" at any width.
   ========================================================================== */
@media (min-width: 1024px) {
	.about-brand__heading { font-size: clamp(42px, calc(4.4vw + 2px), 70px); }

	.about-split__text .about-eyebrow { font-size: 15px; }
	.about-split__headline { font-size: clamp(32px, calc(2.6vw + 6px), 44px); }
	.about-split__body { font-size: 18px; }
	.about-split__footnote { font-size: 17px; }

	.about-audience__intro h2 { font-size: clamp(30px, calc(2.6vw + 2px), 40px); }
	.about-audience__card h3 { font-size: 24px; }

	.about-local__eyebrow { font-size: 14px; }
	.about-local__heading { font-size: 44px; }
	.about-local__stats-heading { font-size: 40px; }
}

/* ==========================================================================
   Hero scroll affordance
   Only ever shown while the >=1025px pin is running (about.js drives the
   .is-visible / --up classes). Hidden everywhere else, so it can never
   float over the sections below the hero.
   ========================================================================== */
.about-scroll-hint { display: none; }

@media (min-width: 1025px) {
	.about-scroll-hint {
		position: fixed;
		left: 24px;
		bottom: 24px;
		z-index: 5;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		padding: 10px 16px;
		border: 1px solid rgba(255, 255, 255, .22);
		border-radius: 999px;
		background: rgba(0, 27, 66, .55);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		color: #b8c8e0;
		font-family: inherit;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: .06em;
		text-transform: uppercase;
		line-height: 1;
		cursor: pointer;
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .35s ease, transform .35s ease, visibility .35s, color .2s ease, border-color .2s ease;
	}
	.about-scroll-hint.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
	.about-scroll-hint:hover { color: #ffffff; border-color: rgba(255, 255, 255, .45); }
	.about-scroll-hint:focus-visible { outline: 2px solid #0060f0; outline-offset: 3px; }

	.about-scroll-hint__arrow { width: 16px; height: 16px; flex-shrink: 0; animation: about-scroll-hint-bob 1.8s ease-in-out infinite; }
	.about-scroll-hint--up .about-scroll-hint__arrow { transform: rotate(180deg); animation-name: about-scroll-hint-bob-up; }

	@keyframes about-scroll-hint-bob {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(3px); }
	}
	@keyframes about-scroll-hint-bob-up {
		0%, 100% { transform: rotate(180deg) translateY(0); }
		50% { transform: rotate(180deg) translateY(3px); }
	}
}

/* The pin never engages here, so there is nothing to scroll through. */
@media (prefers-reduced-motion: reduce) {
	.about-scroll-hint { display: none; }
}