/* =========================================================
   base.css — design tokens, fonts, reset, typography, utilities
   Navy / white / teal system. Navy #244082 is the TMT Plus primary;
   teal is the single accent, reserved for actions and highlights.
   Cal Sans headings · Poppins body · 70px sections · 1350px container
   Mobile-first; sizes scale with clamp() so breakpoints stay few.
   ========================================================= */

/* ---------------------------------------------------------
   Fonts (self-hosted, latin subset, swap so text never hides)
   --------------------------------------------------------- */

@font-face {
	font-family: "Cal Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/CalSans-400-latin.woff2") format("woff2");
}

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Poppins-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Poppins-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Poppins-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Poppins-700-latin.woff2") format("woff2"); }

:root {
	/* Brand -------------------------------------------------
	   The TMT Plus navy. 700 is the primary (#244082 on the live site);
	   900 is the footer ink, 050/100 are tints for icon wells. */
	--navy-900: #16213a;
	--navy-800: #1d3568;
	--navy-700: #244082;
	--navy-600: #2f5cb3;
	--navy-950: #0d1420;
	--navy-100: #dfe6f5;
	--navy-050: #eef2fa;

	/* Teal: the one accent. 700 is text on white (4.9:1), 500 is the
	   button fill with navy text, 400 is for glows and text on navy. */
	--teal-700: #0a7f8f;
	--teal-600: #0e98a9;
	--teal-500: #14b8c9;
	--teal-400: #35d0de;
	--teal-100: #cdeff3;
	--teal-050: #e8f8fa;

	/* Gradients used for surfaces and the accent button. The navy is
	   deliberately near-flat: tmtplus.co.in paints its dark bands a solid
	   #244082, so this only breathes either side of that tone. */
	--grad-navy: linear-gradient(160deg, #1b3468 0%, var(--navy-700) 52%, #20397a 100%);
	--grad-accent: linear-gradient(135deg, var(--teal-400) 0%, var(--teal-500) 55%, var(--teal-600) 100%);

	/* Red is kept for errors and required marks only. */
	--red-600: #c4151b;
	--red-500: #e31e24;
	--red-050: #fdecec;

	/* Sky blue lives inside the illustrations only. */
	--sky-500: #009ce0;
	--sky-050: #e6f5fc;

	/* Neutrals --------------------------------------------- */
	--ink-900: #1e1d1d;
	--ink-700: #242424;
	--ink-500: #6b6b6b;
	--ink-300: #a3a3a3;
	--line: #e0e0e0;
	--line-soft: #ededed;
	--surface: #ffffff;
	--surface-2: #f7f8fb;
	--surface-3: #eef1f6;

	/* Semantic --------------------------------------------- */
	--brand: var(--navy-700);
	--brand-deep: var(--navy-800);
	--brand-ink: var(--navy-900);
	--accent: var(--teal-500);
	--accent-deep: var(--teal-700);
	--accent-ink: var(--navy-900);
	--highlight: var(--teal-600);
	--text: var(--ink-700);
	--text-muted: var(--ink-500);
	--bg: var(--surface);
	/* The background of the current section; edge fades read it. */
	--sec-bg: var(--surface);

	/* Legacy aliases so any rule still naming the old palette lands on
	   the new one instead of a missing variable. */
	--yellow-600: var(--teal-600);
	--yellow-500: var(--teal-500);
	--yellow-100: var(--teal-100);
	--yellow-050: var(--teal-050);
	--amber-600: var(--teal-700);
	--amber-500: var(--teal-500);
	--amber-050: var(--teal-050);
	--blush-100: var(--surface-3);
	--blush-050: var(--surface-2);

	/* Type ------------------------------------------------- */
	--font-sans: "Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
	--font-display: "Cal Sans", "Poppins", "Segoe UI", system-ui, sans-serif;
	--fs-xs: 0.8125rem;
	--fs-sm: 0.9375rem;
	--fs-base: 1rem;
	--fs-lg: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.4375rem);
	--fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.875rem);
	--fs-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.375rem);
	--fs-h1: clamp(1.75rem, 1.2rem + 2.8vw, 3.5rem);
	--lh-tight: 1.2;
	--lh-snug: 1.35;
	--lh-body: 1.6;

	/* Space (4px scale) ------------------------------------ */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 2.5rem;
	--sp-8: 3rem;
	--sp-9: 4rem;
	/* 48px on a phone, 88px on desktop. Roomier than the TMT Plus 70px so
	   the shorter page reads as deliberate white space, not as a gap. */
	--section-y: clamp(3rem, 2.2rem + 3vw, 5.5rem);

	/* Shape and depth -------------------------------------- */
	--radius-sm: 8px;
	--radius: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-pill: 999px;
	--shadow-xs: 0 1px 2px rgba(13, 20, 32, 0.05);
	--shadow-sm: 0 4px 12px rgba(13, 20, 32, 0.06);
	--shadow-card: 0 6px 20px -4px rgba(13, 20, 32, 0.08);
	--shadow-md: 0 16px 36px -14px rgba(13, 20, 32, 0.22);
	--shadow-lg: 0 28px 60px -24px rgba(13, 20, 32, 0.4);
	--shadow-glow: 0 14px 34px -10px rgba(20, 184, 201, 0.55);
	--shadow-glow-navy: 0 14px 34px -10px rgba(36, 64, 130, 0.5);
	--ring: 0 0 0 3px rgba(20, 184, 201, 0.4);

	/* Layout ----------------------------------------------- */
	--wrap: 1350px;
	--wrap-narrow: 800px;
	--gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
	--header-h: 80px;
	/* Measured by JS on load and resize; this is the no-JS fallback. */
	--header-stack: 80px;

	/* Motion ----------------------------------------------- */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 0.28s;
}

/* ---------------------------------------------------------
   Reset
   --------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	/* clip (not hidden) so the off-canvas drawer cannot widen the document
	   while position: sticky on the header keeps working. */
	overflow-x: clip;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* clip, never hidden: `hidden` computes overflow-y to `auto`, which makes
	   the body a scroll container and stops position: sticky from ever
	   sticking (the header and the story stage). `clip` contains the
	   off-canvas drawer without creating a scrollport. */
	overflow-x: clip;
}

body.nav-open {
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-weight: 500;
	line-height: var(--lh-tight);
	letter-spacing: 0;
	color: var(--brand);
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
	margin: 0 0 var(--sp-4);
	text-wrap: pretty;
}

p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; }

a {
	color: var(--teal-700);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--dur) var(--ease);
}

a:hover { color: var(--navy-700); }

img, svg, video, canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

ul, ol {
	margin: 0 0 var(--sp-4);
	padding-left: 1.2em;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	border: 0;
	background: none;
}

/* Any explicit `display` beats the user-agent rule for [hidden], which would
   otherwise leave elements like the lightbox laid out and intercepting clicks
   while they are supposed to be gone. */
[hidden] {
	display: none !important;
}

table {
	width: 100%;
	border-collapse: collapse;
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: var(--sp-7) 0;
}

blockquote {
	margin: 0 0 var(--sp-5);
	padding-left: var(--sp-5);
	border-left: 3px solid var(--teal-500);
	color: var(--ink-700);
}

code, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

pre {
	overflow-x: auto;
	padding: var(--sp-4);
	background: var(--surface-3);
	border-radius: var(--radius);
}

/* ---------------------------------------------------------
   Focus + accessibility
   --------------------------------------------------------- */

:focus-visible {
	outline: 3px solid var(--teal-600);
	outline-offset: 2px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: var(--sp-3) var(--sp-4);
	background: var(--brand);
	color: #fff;
	border-radius: 0 0 var(--radius-sm) 0;
	text-decoration: none;
}

.skip-link:focus {
	left: 0;
	color: #fff;
}

/* ---------------------------------------------------------
   Layout helpers
   --------------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.section {
	padding-block: var(--section-y);
}

/* Section surfaces --------------------------------------
   The page alternates white and navy, exactly like tmtplus.co.in.
   --tint  a whisper of grey for a quieter white section
   --dots  white with the faint dot grid TMT Plus uses
   --dark  navy with the pipe-network texture at low opacity */

.section--tint {
	--sec-bg: var(--surface-2);
	background: var(--surface-2);
}

.section--dots {
	--sec-bg: var(--surface);
	background-color: var(--surface);
	background-image: radial-gradient(rgba(36, 64, 130, 0.1) 1px, transparent 1.4px);
	background-size: 22px 22px;
}

.section--dark {
	--sec-bg: var(--navy-800);
	position: relative;
	isolation: isolate;
	background: var(--grad-navy);
	color: rgba(255, 255, 255, 0.88);
}

.section--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../img/pattern-pipes.svg") center / 480px auto repeat;
	opacity: 0.06;
	pointer-events: none;
}

/* A soft teal light in one corner gives every navy band depth. */
.section--dark::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(760px 520px at 88% 12%, rgba(53, 208, 222, 0.12), transparent 62%),
		radial-gradient(600px 420px at 8% 100%, rgba(47, 92, 179, 0.16), transparent 60%);
	pointer-events: none;
}

.section--dark .section-title,
.section--dark .section-head .section-title { color: #fff; }
.section--dark .section-lede { color: rgba(255, 255, 255, 0.84); }
.section--dark .section-note { color: rgba(255, 255, 255, 0.7); }
.section--dark a:not(.btn) { color: #fff; }
.section--dark a:not(.btn):hover { color: var(--teal-400); }

.center { text-align: center; }
.mt-lg { margin-top: var(--sp-6); }

.icon {
	flex: none;
	display: block;
}

.rot-90 { transform: rotate(90deg); }
.rot270 { transform: rotate(-90deg); }

/* ---------------------------------------------------------
   Section headings
   Eyebrow pill (yellow) → Cal Sans title (navy) → short lede.
   --------------------------------------------------------- */

.section-head {
	max-width: 720px;
	margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}

.section-head--center {
	margin-inline: auto;
	text-align: center;
}

.eyebrow {
	display: inline-block;
	margin: 0 0 var(--sp-3);
	padding: 0.3rem 1rem;
	border: 1px solid var(--teal-100);
	border-radius: var(--radius-pill);
	background: var(--teal-050);
	color: var(--teal-700);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* On navy the label turns translucent with a teal tint. */
.eyebrow--light,
.section--dark .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow,
.cta-final__inner .eyebrow,
.band .eyebrow {
	border-color: rgba(53, 208, 222, 0.35);
	background: rgba(53, 208, 222, 0.12);
	color: var(--teal-400);
}

.section-title {
	margin-bottom: var(--sp-3);
	font-weight: 500;
	letter-spacing: 0;
}

.section-title u {
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.section-title--light { color: #fff; }

.section-lede {
	margin: 0;
	font-size: var(--fs-base);
	line-height: 1.7;
	color: var(--text-muted);
}

.section-note {
	margin-top: var(--sp-6);
	text-align: center;
	font-size: var(--fs-sm);
	color: var(--ink-500);
}