/* =========================================================================
   SANKALP 2047 — design system
   Canvas: warm cream. Ink: deep navy. Action: saffron, and saffron ONLY on
   things you can click, so the eye learns where to go without being told.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */
:root {
	--cream:      #FBF9F4;
	--cream-deep: #F4F0E6;
	--cream-warm: #F7EFE0;
	--white:      #FFFFFF;

	--ink:        #12233C;
	--ink-soft:   #45566E;
	--ink-mute:   #6A7A90;
	--ink-faint:  #9AA6B6;

	--blue:       #3774BA;
	--blue-deep:  #16305A;
	--blue-night: #0E2244;
	--blue-tint:  #EAF1FA;

	--saffron:    #FBAA19;
	--saffron-hi: #FFC24D;
	--saffron-lo: #E09000;
	--saffron-tint:#FFF4DF;

	--green:      #B4D334;
	--green-deep: #7E9A18;
	--green-tint: #F2F8DC;

	--line:       rgba(18, 35, 60, .10);
	--line-strong:rgba(18, 35, 60, .18);
	--line-dark:  rgba(255, 255, 255, .16);

	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 24px;
	--r-xl: 32px;
	--r-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(18,35,60,.05), 0 2px 8px rgba(18,35,60,.04);
	--shadow-md: 0 2px 4px rgba(18,35,60,.04), 0 12px 32px rgba(18,35,60,.07);
	--shadow-lg: 0 4px 8px rgba(18,35,60,.05), 0 24px 60px rgba(18,35,60,.10);
	--shadow-cta:0 6px 18px rgba(251,170,25,.34);

	--font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--wrap: 1200px;
	--wrap-narrow: 780px;
	--gutter: clamp(20px, 5vw, 48px);
	--section-y: clamp(72px, 10vw, 140px);

	/*
	 * 76px. Briefly raised to 96px to give the framed logo more room, but the
	 * taller bar cost too much of the first screen — the logo is sized to fit
	 * this instead. Every sticky offset, the anchor scroll offset and the
	 * mobile menu derive from this token, so they follow it automatically.
	 */
	--nav-h: 76px;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/*
 * The hidden attribute must beat any class that sets display.
 *
 * [hidden] is a browser-level rule, so a class selector such as
 * .uploader__preview { display: grid } silently overrides it and the element
 * renders anyway — which is how the screenshot preview and the UPI app row
 * both appeared empty before anything was chosen. Every element toggled by
 * the hidden attribute in JS depends on this rule.
 */
[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--cream);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--blue-deep); }

h1, h2, h3, h4, h5 {
	margin: 0 0 .5em;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.028em;
	text-wrap: balance;
}
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }

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

::selection { background: var(--saffron); color: var(--ink); }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   3. Layout primitives
   ---------------------------------------------------------------------- */
.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); position: relative; }
.section--tight { padding-block: clamp(52px, 7vw, 92px); }
.section--cream-deep { background: var(--cream-deep); }
.section--white { background: var(--white); }
.section--night { background: var(--blue-night); color: var(--white); }

.section--night h1, .section--night h2, .section--night h3 { color: var(--white); }
.section--night .lede, .section--night p { color: rgba(255,255,255,.76); }

/* Curved seam between bands — soft, not a hard rule */
.section--curve-top { border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: -1px; }
.section--curve-bottom { border-radius: 0 0 var(--r-xl) var(--r-xl); }

/* -------------------------------------------------------------------------
   4. Type
   ---------------------------------------------------------------------- */
.eyebrow {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 12px; font-weight: 800;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 20px;
}
.eyebrow::before {
	content: ''; width: 22px; height: 2px; background: var(--green); border-radius: 2px;
}
.section--night .eyebrow { color: var(--green); }
.section--night .eyebrow::before { background: var(--saffron); }

.h-display { font-size: clamp(2.6rem, 7.2vw, 5.2rem); letter-spacing: -.04em; line-height: 1.02; }
.h-1       { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
.h-2       { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.h-3       { font-size: clamp(1.15rem, 1.9vw, 1.4rem); letter-spacing: -.018em; }

.lede {
	font-size: clamp(1.05rem, 1.55vw, 1.28rem);
	line-height: 1.6;
	color: var(--ink-soft);
	max-width: 62ch;
	text-wrap: pretty;
}
.section-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 68px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }
.section-head--center .eyebrow { justify-content: center; }

/* Hand-drawn-feeling emphasis on a phrase */
.mark-green {
	background: linear-gradient(to top, var(--green) 0%, var(--green) 34%, transparent 34%);
	padding-inline: .08em;
}
.mark-strike {
	position: relative; white-space: nowrap; color: var(--blue);
}
.mark-strike::after {
	content: ''; position: absolute; left: -.02em; right: -.02em; top: 56%;
	height: .09em; min-height: 4px; background: var(--saffron); border-radius: 4px;
	transform: scaleX(0) rotate(-.6deg); transform-origin: left center;
	transition: transform .7s var(--ease) .35s;
}
.is-in .mark-strike::after { transform: scaleX(1) rotate(-.6deg); }

/* -------------------------------------------------------------------------
   5. Buttons
   ---------------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: -.01em;
	padding: 15px 30px;
	border: 2px solid transparent;
	border-radius: var(--r-pill);
	cursor: pointer;
	text-align: center;
	transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
	will-change: transform;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
	background: var(--saffron); color: var(--ink); box-shadow: var(--shadow-cta);
}
.btn--primary:hover {
	background: var(--saffron-hi); color: var(--ink);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(251,170,25,.42);
}
.btn--ghost {
	background: transparent; color: var(--ink); border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: rgba(18,35,60,.03); }

.btn--light { background: var(--white); color: var(--ink); box-shadow: var(--shadow-md); }
.btn--light:hover { color: var(--ink); transform: translateY(-2px); }

.btn--onDark { background: transparent; color: var(--white); border-color: var(--line-dark); }
.btn--onDark:hover { color: var(--ink); background: var(--white); border-color: var(--white); }

.btn--lg { padding: 18px 38px; font-size: 17px; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-busy { opacity: .6; pointer-events: none; }

.btn__arrow { transition: transform .25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cta-row--center { justify-content: center; }

/* -------------------------------------------------------------------------
   6. Announcement bar
   ---------------------------------------------------------------------- */
.ticker {
	background: var(--blue-deep); color: #fff;
	font-size: 13.5px; font-weight: 600;
	text-align: center;
	padding: 10px var(--gutter);
	position: relative; z-index: 60;
}
.ticker__dot {
	display: inline-block; width: 7px; height: 7px; border-radius: 50%;
	background: var(--green); margin-right: 9px; vertical-align: 1px;
	animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
.ticker a { color: var(--saffron); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; margin-left: 10px; }
.ticker a:hover { color: var(--saffron-hi); }
.ticker__sep { opacity: .4; margin-inline: 10px; }

@media (max-width: 720px) {
	.ticker__sep, .ticker__extra { display: none; }
	/* Two centred half-lines read as a mistake. Keep it to one line, sized to
	   fit, with the link tight against the label. */
	.ticker {
		font-size: 12.5px; padding-inline: 12px;
		display: flex; align-items: center; justify-content: center; gap: 8px;
		white-space: nowrap;
	}
	.ticker > strong {
		overflow: hidden; text-overflow: ellipsis; min-width: 0;
	}
	.ticker a { margin-left: 0; flex-shrink: 0; }
	.ticker__dot { margin-right: 0; flex-shrink: 0; }
}

/* -------------------------------------------------------------------------
   7. Header
   ---------------------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(251,249,244,.82);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck {
	border-bottom-color: var(--line);
	box-shadow: 0 4px 24px rgba(18,35,60,.05);
}
.site-header__inner {
	height: var(--nav-h);
	display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand img { height: 40px; width: auto; }

/* Typographic lockup. The rule over the wordmark echoes the shirorekha of
   संकल्प — it is the single detail that makes the mark read as Indian. */
.brand--type { text-decoration: none; align-items: flex-end; gap: 10px; }
.brand--type:hover { color: inherit; }

.brand__lockup { position: relative; display: block; padding-top: 5px; }
.brand__word {
	display: block;
	font-size: 31px; font-weight: 700; letter-spacing: -.045em; line-height: .96;
	color: var(--ink); position: relative;
	padding-inline: 1px;
}
.brand__word::before {
	content: ''; position: absolute; left: 0; right: 0; top: 5px;
	height: 2.5px; background: currentColor; border-radius: 2px;
}
.brand__plane {
	position: absolute; right: -13px; top: -11px; width: 22px;
	transform: rotate(-6deg);
	transition: transform .4s var(--ease);
}
.brand--type:hover .brand__plane { transform: rotate(-14deg) translate(3px, -3px); }

.brand__stack {
	display: grid; gap: 0;
	font-size: 10.5px; font-weight: 800; line-height: 1.08;
	letter-spacing: .008em; text-transform: uppercase;
	padding-bottom: 2px;
}
.brand__l1 { color: var(--saffron); }
.brand__l2 { color: var(--green-deep); }
.brand__l3 { color: var(--blue); letter-spacing: .04em; }

.brand--onDark .brand__word { color: var(--white); }
.brand--onDark .brand__l2 { color: var(--green); }
.brand--onDark .brand__l3 { color: #7FB0E8; }

@media (max-width: 420px) {
	.brand__word { font-size: 26px; }
	.brand__stack { font-size: 9px; }
	.brand__plane { width: 18px; right: -10px; top: -9px; }
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
	font-size: 15px; font-weight: 600; color: var(--ink-soft);
	padding: 9px 14px; border-radius: var(--r-pill);
	transition: color .18s var(--ease), background .18s var(--ease);
}
.nav a:hover { color: var(--ink); background: rgba(18,35,60,.05); }
.header-cta { margin-left: 10px; padding: 12px 24px; font-size: 15px; }

.nav-toggle {
	display: none; margin-left: auto;
	width: 44px; height: 44px; border: 1px solid var(--line-strong); background: transparent;
	border-radius: var(--r-sm); cursor: pointer; padding: 0;
	align-items: center; justify-content: center;
}
.nav-toggle span {
	display: block; width: 19px; height: 2px; background: var(--ink); border-radius: 2px;
	position: relative; transition: background .2s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
	content: ''; position: absolute; left: 0; width: 19px; height: 2px; background: var(--ink);
	border-radius: 2px; transition: transform .28s var(--ease), top .2s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1024px) {
	.nav-toggle { display: inline-flex; }
	.nav {
		position: fixed; inset: calc(var(--nav-h) + var(--ticker-h, 40px)) 0 auto 0;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--cream); padding: 14px var(--gutter) 26px;
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow-lg);
		transform: translateY(-12px); opacity: 0; pointer-events: none;
		transition: transform .28s var(--ease), opacity .22s var(--ease);
		max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
	}
	.nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
	.nav a { padding: 14px 4px; font-size: 17px; border-radius: 0; border-bottom: 1px solid var(--line); }
	.nav a:hover { background: transparent; }
	.header-cta { margin: 18px 0 0; }
}

/* -------------------------------------------------------------------------
   8. Hero
   ---------------------------------------------------------------------- */
.hero {
	position: relative;
	padding-top: clamp(56px, 8vw, 104px);
	padding-bottom: clamp(56px, 8vw, 104px);
	overflow: hidden;
}
.hero::before {
	content: ''; position: absolute; z-index: 0;
	width: 62vw; height: 62vw; max-width: 820px; max-height: 820px;
	right: -18vw; top: -22vw;
	background: radial-gradient(circle at center, rgba(55,116,186,.11), transparent 66%);
	pointer-events: none;
}
.hero::after {
	content: ''; position: absolute; z-index: 0;
	width: 46vw; height: 46vw; max-width: 560px; max-height: 560px;
	left: -16vw; bottom: -20vw;
	background: radial-gradient(circle at center, rgba(180,211,52,.16), transparent 66%);
	pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero__chip {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--white); border: 1px solid var(--line);
	padding: 9px 18px 9px 12px; border-radius: var(--r-pill);
	font-size: 14px; font-weight: 700; color: var(--ink);
	box-shadow: var(--shadow-sm);
	margin-bottom: 30px;
}
.hero__chip svg { width: 17px; height: 17px; color: var(--blue); }

.hero__title { max-width: 15ch; margin-bottom: 30px; }
.hero__sub { font-size: clamp(1.06rem, 1.6vw, 1.3rem); max-width: 60ch; margin-bottom: 38px; color: var(--ink-soft); }

.hero__stats {
	display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px);
	margin-top: clamp(48px, 6vw, 80px);
	padding-top: clamp(28px, 3.5vw, 44px);
	border-top: 1px solid var(--line);
}
.hero__stat-n {
	font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -.04em;
	color: var(--blue); line-height: 1;
}
.hero__stat-l { font-size: 14px; font-weight: 600; color: var(--ink-mute); margin-top: 7px; }

/* -------------------------------------------------------------------------
   9b. Logo artwork
   The supplied file, used as-is. Sized by HEIGHT so it always sits correctly
   inside the 76px nav bar whatever the viewport. Its surround is transparent,
   so it needs no background of its own on any band.
   ---------------------------------------------------------------------- */
.brandmark__img { display: block; height: auto; }

/*
 * Sized to fill the 76px bar rather than to a round number: 66px leaves 5px of
 * air above and below. This is as large as the mark can be without forcing a
 * taller header. Because it is a framed lockup, roughly a third of that height
 * is the black box and its padding, so "sankalp" itself lands around 22px.
 */
.brand--mark { display: block; text-decoration: none; flex-shrink: 0; }
.brand--mark .brandmark__img { height: 66px; width: auto; }

@media (max-width: 560px) { .brand--mark .brandmark__img { height: 56px; } }
@media (max-width: 360px) { .brand--mark .brandmark__img { height: 48px; } }

/* Paper plane — the one signature motion */
.plane {
	position: absolute; z-index: 2; pointer-events: none;
	width: clamp(52px, 7vw, 96px);
	filter: drop-shadow(0 10px 18px rgba(18,35,60,.14));
}
.plane--hero { right: 6%; top: 26%; animation: float 7s ease-in-out infinite; }
@keyframes float {
	0%,100% { transform: translate3d(0,0,0) rotate(-3deg); }
	50%     { transform: translate3d(-14px,-22px,0) rotate(4deg); }
}
.plane__trail { stroke-dasharray: 240; stroke-dashoffset: 240; }
.is-in .plane__trail { animation: draw 1.6s var(--ease) forwards .2s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (max-width: 860px) { .plane--hero { display: none; } }

/* -------------------------------------------------------------------------
   9. Bridge — 1947 / Today / 2047
   ---------------------------------------------------------------------- */
.bridge__rail {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2.4vw, 28px);
	position: relative;
	margin-top: clamp(40px, 5vw, 64px);
}
.bridge__rail::before {
	content: ''; position: absolute; left: 8%; right: 8%; top: 44px; height: 2px;
	background: repeating-linear-gradient(90deg, var(--line-strong) 0 7px, transparent 7px 15px);
	z-index: 0;
}
.bridge__step { position: relative; z-index: 1; text-align: center; }
.bridge__year {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 132px; height: 56px; padding-inline: 22px;
	background: var(--white); border: 2px solid var(--ink);
	border-radius: var(--r-pill);
	font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 800; letter-spacing: -.02em;
	margin-bottom: 24px;
	box-shadow: var(--shadow-sm);
	transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.bridge__step:nth-child(1) .bridge__year { border-color: var(--saffron); }
.bridge__step:nth-child(2) .bridge__year { border-color: var(--green-deep); }
.bridge__step:nth-child(3) .bridge__year { background: var(--blue); border-color: var(--blue); color: #fff; }
.bridge__step:hover .bridge__year { transform: translateY(-4px); }
.bridge__head { font-size: clamp(1.05rem, 1.7vw, 1.3rem); margin-bottom: 8px; }
.bridge__body { font-size: 15.5px; color: var(--ink-soft); max-width: 30ch; margin-inline: auto; }

.bridge__close {
	margin-top: clamp(48px, 6vw, 76px);
	padding: clamp(28px, 4vw, 44px);
	background: var(--white); border: 1px solid var(--line);
	border-left: 5px solid var(--green);
	border-radius: var(--r-md);
	font-size: clamp(1.1rem, 1.9vw, 1.42rem); font-weight: 600; line-height: 1.5;
	letter-spacing: -.02em;
	box-shadow: var(--shadow-sm);
}

@media (max-width: 760px) {
	.bridge__rail { grid-template-columns: 1fr; gap: 36px; }
	/* A vertical rail would run straight through the body copy on a phone,
	   so the stacked cards carry the sequence on their own. */
	.bridge__rail::before { display: none; }
	.bridge__step + .bridge__step { padding-top: 36px; border-top: 1px solid var(--line); }
	.bridge__year { margin-bottom: 18px; }
}

/* -------------------------------------------------------------------------
   10. Why — two column with pull-question
   ---------------------------------------------------------------------- */
.why__grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 88px);
	align-items: start;
}
.why__body p { font-size: 17px; color: var(--ink-soft); }
.why__body p:first-child {
	font-size: clamp(1.2rem, 2.1vw, 1.55rem); font-weight: 700; color: var(--ink);
	letter-spacing: -.025em; line-height: 1.35; margin-bottom: 1em;
}
.pull-q {
	background: var(--blue); color: #fff;
	padding: clamp(32px, 4.5vw, 52px);
	border-radius: var(--r-lg);
	position: relative; overflow: hidden;
	box-shadow: var(--shadow-md);
}
.pull-q::before {
	content: '?'; position: absolute; right: -14px; bottom: -70px;
	font-size: 260px; font-weight: 800; line-height: 1;
	color: rgba(255,255,255,.09);
}
.pull-q__label {
	font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
	color: var(--green); margin-bottom: 18px;
}
.pull-q__text {
	font-size: clamp(1.4rem, 2.7vw, 2.05rem); font-weight: 800;
	letter-spacing: -.032em; line-height: 1.18; margin: 0;
	position: relative; z-index: 1;
}
@media (max-width: 900px) { .why__grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   11. Pillars (Ideas / Insights / Inspiration / Action)
   ---------------------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 22px); }
.pillar {
	background: var(--white); border: 1px solid var(--line);
	border-radius: var(--r-md); padding: clamp(24px, 2.6vw, 34px);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.pillar:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.pillar__k {
	font-size: clamp(1.2rem, 1.9vw, 1.45rem); font-weight: 800; letter-spacing: -.03em;
	margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
}
.pillar__k::before {
	content: ''; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.pillar:nth-child(1) .pillar__k::before { background: var(--saffron); }
.pillar:nth-child(2) .pillar__k::before { background: var(--blue); }
.pillar:nth-child(3) .pillar__k::before { background: var(--green); }
.pillar:nth-child(4) .pillar__k::before { background: var(--ink); }
.pillar p { font-size: 15.5px; color: var(--ink-soft); margin: 0; }

@media (max-width: 980px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   12. Room cards — numbered
   ---------------------------------------------------------------------- */
.room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.room-card {
	background: var(--cream); border: 1px solid var(--line);
	border-radius: var(--r-lg); padding: clamp(28px, 3vw, 40px);
	position: relative; overflow: hidden;
	transition: transform .32s var(--ease), box-shadow .32s var(--ease), background .32s var(--ease);
}
.section--white .room-card { background: var(--cream); }
.room-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); background: var(--white); }
.room-card__n {
	font-size: 13px; font-weight: 800; letter-spacing: .12em;
	color: var(--blue); margin-bottom: 22px; display: block;
}
.room-card__head { font-size: clamp(1.1rem, 1.7vw, 1.32rem); margin-bottom: 12px; }
.room-card p { font-size: 15.5px; color: var(--ink-soft); margin: 0; }
.room-card::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
	background: var(--saffron); transform: scaleX(0); transform-origin: left;
	transition: transform .35s var(--ease);
}
.room-card:hover::after { transform: scaleX(1); }
.room-card:nth-child(2)::after { background: var(--blue); }
.room-card:nth-child(3)::after { background: var(--green); }
.room-card:nth-child(4)::after { background: var(--ink); }
.room-card:nth-child(5)::after { background: var(--saffron); }

/* last two cards span wider on a 3-up grid so the row never looks orphaned */
.room-grid > :nth-child(4), .room-grid > :nth-child(5) { grid-column: span 1; }
@media (min-width: 981px) {
	.room-grid { grid-template-columns: repeat(6, 1fr); }
	.room-grid > * { grid-column: span 2; }
	.room-grid > :nth-child(4) { grid-column: 2 / span 2; }
	.room-grid > :nth-child(5) { grid-column: 4 / span 2; }
}
@media (max-width: 980px) { .room-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .room-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   13. Experience — 5-step path
   ---------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.6vw, 20px); position: relative; }
.step { text-align: center; position: relative; padding-top: 8px; }
.step__dot {
	width: 60px; height: 60px; margin: 0 auto 20px;
	border-radius: 50%; background: var(--white); border: 2px solid var(--line-strong);
	display: grid; place-items: center;
	font-size: 15px; font-weight: 800; color: var(--blue);
	position: relative; z-index: 1;
	transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.step:hover .step__dot { transform: scale(1.08); background: var(--saffron); border-color: var(--saffron); color: var(--ink); }
.step:not(:last-child)::before {
	content: ''; position: absolute; top: 38px; left: calc(50% + 38px); right: calc(-50% + 38px); height: 2px;
	background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 13px);
}
.step__k { font-size: clamp(1rem, 1.5vw, 1.18rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }

@media (max-width: 940px) {
	.steps { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
	.step:not(:last-child)::before { display: none; }
	.step { text-align: left; display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
	.step__dot { width: 52px; height: 52px; margin: 0; }
}
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   14. Audience list
   ---------------------------------------------------------------------- */
.aud-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; }
.aud-item {
	background: var(--cream); padding: clamp(24px, 3vw, 34px);
	display: grid; grid-template-columns: 30px 1fr; gap: 18px; align-items: start;
	transition: background .25s var(--ease);
}
.aud-item:hover { background: var(--white); }
.aud-item__tick {
	width: 28px; height: 28px; border-radius: 50%; background: var(--green-tint);
	display: grid; place-items: center; color: var(--green-deep); flex-shrink: 0; margin-top: 2px;
}
.aud-item__tick svg { width: 15px; height: 15px; }
.aud-item__head { font-size: clamp(1rem, 1.45vw, 1.14rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.aud-item p { font-size: 15px; color: var(--ink-soft); margin: 0; }
.aud-item--last { grid-column: 1 / -1; background: var(--blue-tint); }
.aud-item--last .aud-item__tick { background: var(--white); color: var(--blue); }
@media (max-width: 760px) { .aud-grid { grid-template-columns: 1fr; } .aud-item--last { grid-column: auto; } }

/* -------------------------------------------------------------------------
   15. Big question — dark anchor
   ---------------------------------------------------------------------- */
.bigq { position: relative; overflow: hidden; }
.bigq::before {
	content: ''; position: absolute; inset: 0;
	background:
		radial-gradient(ellipse 60% 50% at 18% 0%, rgba(55,116,186,.34), transparent 62%),
		radial-gradient(ellipse 50% 45% at 88% 100%, rgba(180,211,52,.14), transparent 62%);
	pointer-events: none;
}
.bigq > * { position: relative; z-index: 1; }
.bigq__title {
	font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -.042em; line-height: 1.06;
	max-width: 18ch; margin-bottom: clamp(40px, 5vw, 60px);
}
.bigq__cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.bigq__list { list-style: none; margin: 0; padding: 0; }
.bigq__list li {
	font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.45;
	padding: 15px 0 15px 34px; position: relative;
	border-bottom: 1px solid var(--line-dark);
}
.bigq__list li:last-child { border-bottom: 0; }
.bigq__list--no li { color: rgba(255,255,255,.5); }
.bigq__list--no li::before {
	content: ''; position: absolute; left: 4px; top: 26px; width: 15px; height: 2px;
	background: rgba(255,255,255,.32); border-radius: 2px;
}
.bigq__list--yes li { color: #fff; font-weight: 700; letter-spacing: -.022em; }
.bigq__list--yes li::before {
	content: ''; position: absolute; left: 0; top: 22px; width: 9px; height: 9px;
	border-radius: 50%; background: var(--green);
}
.bigq__close {
	margin-top: clamp(44px, 5vw, 64px); padding-top: clamp(32px, 4vw, 44px);
	border-top: 1px solid var(--line-dark);
	display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: space-between;
}
.bigq__close p {
	font-size: clamp(1.1rem, 1.9vw, 1.45rem); font-weight: 700; color: #fff !important;
	letter-spacing: -.026em; margin: 0; max-width: 34ch;
}
@media (max-width: 860px) { .bigq__cols { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   16. Speakers
   ---------------------------------------------------------------------- */
.speakers-tba {
	display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center;
	background: var(--white); border: 1px solid var(--line);
	border-radius: var(--r-xl); padding: clamp(32px, 5vw, 60px);
	box-shadow: var(--shadow-sm);
}
.silhouettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.silhouette {
	aspect-ratio: 3/4; border-radius: var(--r-md);
	background: linear-gradient(160deg, var(--cream-deep), var(--blue-tint));
	display: grid; place-items: center; position: relative; overflow: hidden;
}
.silhouette svg { width: 42%; color: rgba(18,35,60,.14); }
.silhouette::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
	transform: translateX(-100%);
	animation: shimmer 3.4s var(--ease) infinite;
}
.silhouette:nth-child(2)::after { animation-delay: .35s; }
.silhouette:nth-child(3)::after { animation-delay: .7s; }
.silhouette:nth-child(4)::after { animation-delay: 1.05s; }
.silhouette:nth-child(5)::after { animation-delay: 1.4s; }
.silhouette:nth-child(6)::after { animation-delay: 1.75s; }
@keyframes shimmer { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

.speaker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 26px); }
.speaker { text-align: left; }
.speaker__photo { aspect-ratio: 3/4; border-radius: var(--r-md); overflow: hidden; background: var(--cream-deep); margin-bottom: 16px; }
.speaker__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.speaker:hover .speaker__photo img { transform: scale(1.05); }
.speaker__name { font-size: 1.1rem; font-weight: 800; letter-spacing: -.022em; margin-bottom: 4px; }
.speaker__role { font-size: 14.5px; color: var(--ink-soft); }
.speaker__org { font-size: 13.5px; color: var(--ink-mute); }
@media (max-width: 900px) { .speaker-grid { grid-template-columns: repeat(2, 1fr); } .speakers-tba { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   17. Programme
   ---------------------------------------------------------------------- */
.prog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); }
.prog-day {
	background: var(--white); border: 1px solid var(--line);
	border-radius: var(--r-lg); overflow: hidden;
	box-shadow: var(--shadow-sm);
}
.prog-day__head { padding: clamp(26px, 3vw, 34px); border-bottom: 1px solid var(--line); background: var(--cream); }
.prog-day:nth-child(2) .prog-day__head { background: var(--blue-tint); }
.prog-day__label { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.prog-day__date { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 800; letter-spacing: -.025em; margin: 10px 0 6px; }
.prog-day__theme { font-size: 15.5px; color: var(--ink-soft); font-style: italic; }
.prog-block {
	display: grid; grid-template-columns: 96px 1fr; gap: 18px;
	padding: 20px clamp(26px, 3vw, 34px);
	border-bottom: 1px solid var(--line);
}
.prog-block:last-child { border-bottom: 0; }
.prog-block__time { font-size: 13px; font-weight: 800; color: var(--blue); letter-spacing: .04em; text-transform: uppercase; padding-top: 2px; }
.prog-block__title { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; }
.prog-block p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }
.prog-note {
	margin-top: 28px; text-align: center; font-size: 14.5px; color: var(--ink-mute);
}
@media (max-width: 860px) { .prog-grid { grid-template-columns: 1fr; } .prog-block { grid-template-columns: 76px 1fr; gap: 14px; } }

/* -------------------------------------------------------------------------
   18. Pricing / attend
   ---------------------------------------------------------------------- */
.attend-grid { display: grid; grid-template-columns: 1fr 420px; gap: clamp(32px, 5vw, 64px); align-items: start; }
.includes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 13px; }
.includes li { display: grid; grid-template-columns: 24px 1fr; gap: 13px; font-size: 16px; align-items: start; }
.includes svg { width: 20px; height: 20px; color: var(--green-deep); margin-top: 3px; }

.price-card {
	background: var(--white); border: 1px solid var(--line);
	border-radius: var(--r-lg); padding: clamp(28px, 3.4vw, 40px);
	box-shadow: var(--shadow-lg);
	position: sticky; top: calc(var(--nav-h) + 24px);
}
.price-card__tag {
	display: inline-block; background: var(--green-tint); color: var(--green-deep);
	font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	padding: 6px 13px; border-radius: var(--r-pill); margin-bottom: 20px;
}
.price-card__label { font-size: 15px; font-weight: 700; color: var(--ink-mute); }
.price-card__amount {
	font-size: clamp(2.6rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.045em;
	line-height: 1; margin: 6px 0 4px;
}
.price-card__was { font-size: 1.3rem; color: var(--ink-faint); text-decoration: line-through; font-weight: 700; margin-left: 10px; letter-spacing: -.03em; }
.price-card__note { font-size: 14px; color: var(--ink-mute); margin-bottom: 26px; }
.price-card .btn { margin-bottom: 22px; }
.assurance { display: grid; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.assurance__item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.assurance__item > * { min-width: 0; }
.assurance__item svg { width: 18px; height: 18px; color: var(--blue); margin-top: 3px; }
.assurance__head { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
/* Scoped to the item, not the wrapper — these items also appear inside
   .reassure on the registration page, which is not an .assurance container. */
.assurance__item p { font-size: 13.5px; color: var(--ink-mute); margin: 2px 0 0; line-height: 1.5; }
@media (max-width: 940px) { .attend-grid { grid-template-columns: 1fr; } .price-card { position: static; } }

/* -------------------------------------------------------------------------
   19. FAQ
   ---------------------------------------------------------------------- */
.faq { max-width: 860px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item:first-child { border-top: 1px solid var(--line-strong); }
.faq-q {
	width: 100%; background: none; border: 0; cursor: pointer;
	font-family: inherit; font-size: clamp(1.02rem, 1.5vw, 1.16rem); font-weight: 700;
	letter-spacing: -.022em; color: var(--ink); text-align: left;
	padding: 24px 52px 24px 0; position: relative;
	transition: color .2s var(--ease);
}
.faq-q:hover { color: var(--blue); }
.faq-q::after, .faq-q::before {
	content: ''; position: absolute; right: 8px; top: 50%; background: var(--blue);
	border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.faq-q::before { width: 15px; height: 2px; transform: translateY(-50%); }
.faq-q::after  { width: 2px; height: 15px; right: 14px; transform: translateY(-50%); }
.faq-q[aria-expanded="true"]::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.faq-a { overflow: hidden; height: 0; transition: height .34s var(--ease); }
.faq-a__inner { padding: 0 12% 26px 0; font-size: 16px; color: var(--ink-soft); line-height: 1.66; }
@media (max-width: 600px) { .faq-a__inner { padding-right: 0; } }

/* -------------------------------------------------------------------------
   20. Partner band
   ---------------------------------------------------------------------- */
.partner {
	background: var(--cream-warm);
	border-radius: var(--r-xl);
	padding: clamp(36px, 5vw, 64px);
	display: grid; grid-template-columns: 1.4fr auto; gap: clamp(28px, 4vw, 56px); align-items: center;
	border: 1px solid rgba(251,170,25,.28);
}
@media (max-width: 860px) { .partner { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   21. Closing CTA
   ---------------------------------------------------------------------- */
.closing { text-align: center; position: relative; overflow: hidden; }
.closing__dates {
	font-size: clamp(4rem, 15vw, 11rem); font-weight: 800; letter-spacing: -.06em;
	line-height: .88; color: var(--ink); margin: 0 0 6px;
}
.closing__dates span { color: var(--blue); }
.closing__month {
	font-size: clamp(1.1rem, 2.6vw, 1.7rem); font-weight: 800;
	letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px;
}
.closing__city { font-size: clamp(1rem, 1.7vw, 1.2rem); color: var(--ink-mute); margin-bottom: 36px; }
.closing__line {
	font-size: clamp(1.15rem, 2.3vw, 1.8rem); font-weight: 700; letter-spacing: -.03em;
	max-width: 22ch; margin: 0 auto 38px; line-height: 1.25;
}

/* -------------------------------------------------------------------------
   22. Footer
   ---------------------------------------------------------------------- */
.site-footer { background: var(--blue-night); color: rgba(255,255,255,.68); padding-block: clamp(56px, 7vw, 84px) 34px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 52px); }
.site-footer h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--green); font-weight: 800; margin-bottom: 18px; }
.site-footer a { color: rgba(255,255,255,.68); font-size: 15px; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
/*
 * No brightness/invert filter here. That trick only works on a single-colour
 * mark — on the full-colour logo it crushes every pixel to black and then
 * flips the lot to white, rendering the lockup as a blank white rectangle.
 * The artwork has a transparent surround and carries its own white field, so
 * it sits on the navy footer unaided.
 */
.footer-brand img { height: 76px; margin-bottom: 20px; }
.footer-brand p { font-size: 15px; max-width: 34ch; line-height: 1.6; }
.footer-meta {
	margin-top: clamp(40px, 5vw, 60px); padding-top: 26px; border-top: 1px solid var(--line-dark);
	display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between; align-items: center;
	font-size: 13.5px; color: rgba(255,255,255,.5);
}
.footer-meta__links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-meta a { font-size: 13.5px; }

/* Studio credit — deliberately quieter than the legal links above it, so it
   reads as a signature rather than competing for the same attention. */
.footer-credit {
	margin-top: 18px;
	font-size: 13px;
	color: rgba(255, 255, 255, .38);
}
.footer-credit a {
	font-size: 13px;
	color: rgba(255, 255, 255, .62);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .22);
	text-underline-offset: 3px;
	transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.footer-credit a:hover {
	color: #fff;
	text-decoration-color: var(--saffron);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   23. Forms — registration
   ---------------------------------------------------------------------- */
.reg-layout { display: grid; grid-template-columns: 1fr 400px; gap: clamp(32px, 4vw, 60px); align-items: start; }
@media (max-width: 980px) { .reg-layout { grid-template-columns: 1fr; } }

.form-card {
	background: var(--white); border: 1px solid var(--line);
	border-radius: var(--r-lg); padding: clamp(26px, 3.6vw, 44px);
	box-shadow: var(--shadow-md);
}
.form-section + .form-section { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.form-section__title {
	font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
	color: var(--blue); margin-bottom: 22px;
}
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 20px; }
.field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .field-grid { grid-template-columns: 1fr; } .field--full { grid-column: auto; } }

.field label {
	display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 7px;
}
.field label .req { color: var(--saffron-lo); margin-left: 2px; }
.field input, .field select, .field textarea {
	width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
	background: var(--cream); border: 1.5px solid var(--line-strong);
	border-radius: var(--r-sm); padding: 13px 15px;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
	-webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 108px; resize: vertical; line-height: 1.55; }
.field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2345566E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 15px center; padding-right: 42px;
}
.field input:focus, .field select:focus, .field textarea:focus {
	outline: none; border-color: var(--blue); background: var(--white);
	box-shadow: 0 0 0 4px rgba(55,116,186,.13);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field__help { font-size: 13px; color: var(--ink-mute); margin-top: 6px; }
.field__error { font-size: 13px; font-weight: 600; color: #C0392B; margin-top: 6px; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea {
	border-color: #C0392B; background: #FEF6F5;
}
.field.has-error .field__error { display: block; }
.field.has-error .field__help { display: none; }

.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Quantity stepper */
.qty { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; background: var(--cream); }
.qty button {
	width: 46px; height: 48px; border: 0; background: transparent; cursor: pointer;
	font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1;
	transition: background .18s var(--ease);
}
.qty button:hover { background: rgba(18,35,60,.06); }
.qty input {
	width: 58px; text-align: center; border: 0; border-inline: 1.5px solid var(--line-strong);
	border-radius: 0; background: var(--white); font-weight: 800; font-size: 17px; height: 48px; padding: 0;
}
.qty input:focus { box-shadow: none; }

/* Consent */
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin-top: 8px; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); border-radius: 4px; }
.consent label { font-size: 14.5px; color: var(--ink-soft); font-weight: 500; line-height: 1.55; margin: 0; }
.consent a { text-decoration: underline; text-underline-offset: 2px; }

/* Order summary rail */
.summary {
	background: var(--white); border: 1px solid var(--line);
	border-radius: var(--r-lg); overflow: hidden;
	box-shadow: var(--shadow-md);
	position: sticky; top: calc(var(--nav-h) + 24px);
}
.summary__head { background: var(--blue-night); color: #fff; padding: 24px 26px; }
.summary__head .h-3 { color: #fff; margin: 0 0 4px; }
.summary__head p { font-size: 14px; color: rgba(255,255,255,.66); margin: 0; }
.summary__body { padding: 24px 26px; }
.summary__row { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; padding: 9px 0; }
.summary__row span:first-child { color: var(--ink-soft); }
.summary__row span:last-child { font-weight: 700; }
.summary__total {
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	margin-top: 14px; padding-top: 18px; border-top: 1.5px solid var(--line-strong);
}
.summary__total-label { font-size: 15px; font-weight: 700; }
.summary__total-amt { font-size: 1.9rem; font-weight: 800; letter-spacing: -.04em; }
.summary__foot { padding: 18px 26px; background: var(--cream); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-mute); }
.summary__foot svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px; color: var(--green-deep); }
@media (max-width: 980px) { .summary { position: static; } }

/* Form status messages */
.form-alert {
	padding: 15px 18px; border-radius: var(--r-sm); font-size: 15px; margin-bottom: 22px;
	display: none; line-height: 1.55;
}
.form-alert.is-visible { display: block; }
.form-alert--error { background: #FEF1EF; border: 1px solid #F2C4BE; color: #A03024; }
.form-alert--info  { background: var(--blue-tint); border: 1px solid #C4D9F0; color: var(--blue-deep); }
.form-alert--ok    { background: var(--green-tint); border: 1px solid #D3E48F; color: var(--green-deep); }

.trustline { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: 13px; color: var(--ink-mute); }
.trustline span { display: inline-flex; align-items: center; gap: 6px; }
.trustline svg { width: 14px; height: 14px; color: var(--green-deep); }

/* Test-mode banner */
.testmode {
	background: var(--saffron-tint); border: 1px dashed var(--saffron);
	color: #6B4A00; font-size: 14px; font-weight: 600;
	padding: 12px 18px; border-radius: var(--r-sm); margin-bottom: 24px;
}

/* -------------------------------------------------------------------------
   24. Confirmation page
   ---------------------------------------------------------------------- */
.confirm { text-align: center; max-width: 640px; margin-inline: auto; }
.confirm__badge {
	width: 84px; height: 84px; border-radius: 50%; background: var(--green-tint);
	display: grid; place-items: center; margin: 0 auto 30px; color: var(--green-deep);
	animation: pop .5s var(--ease) both;
}
.confirm__badge svg { width: 40px; height: 40px; }
@keyframes pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confirm__code {
	background: var(--white); border: 2px dashed var(--blue);
	border-radius: var(--r-md); padding: 26px; margin: 32px 0;
}
/*
 * display:block on both, so this holds even if the markup uses spans — which is
 * exactly how the reference once ended up sharing a line with its label and
 * wrapping as "SANKALP-" / "0019".
 */
.confirm__code-label {
	display: block;
	font-size: 12px; font-weight: 800; letter-spacing: .16em;
	text-transform: uppercase; color: var(--ink-mute);
}
.confirm__code-value {
	display: block;
	font-size: clamp(1.5rem, 7vw, 2.6rem);
	font-weight: 800; letter-spacing: .04em; color: var(--blue);
	margin-top: 8px;
	/* A reference split across two lines is a reference someone mistypes. */
	white-space: nowrap;
}
@media (max-width: 420px) {
	.confirm__code { padding: 22px 14px; }
}
.confirm__detail { text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-bottom: 32px; }
.confirm__detail-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid var(--line); font-size: 15px; }
.confirm__detail-row:last-child { border-bottom: 0; }
.confirm__detail-row span:first-child { color: var(--ink-mute); }
.confirm__detail-row span:last-child { font-weight: 700; text-align: right; }

/* -------------------------------------------------------------------------
   25. Legal / prose pages
   ---------------------------------------------------------------------- */
.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.25rem, 2.1vw, 1.55rem); margin-top: 2.2em; margin-bottom: .6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.15rem; margin-top: 1.8em; }
.prose p, .prose li { color: var(--ink-soft); font-size: 16.5px; line-height: 1.72; }
.prose li { margin-bottom: .5em; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--ink); }
.page-hero { background: var(--cream-deep); padding-block: clamp(48px, 6vw, 84px); border-bottom: 1px solid var(--line); }
.page-hero h1 { margin-bottom: 12px; }

/* -------------------------------------------------------------------------
   26. Scroll reveal
   ---------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > :nth-child(1) { transition-delay: .04s; }
.reveal-stagger.is-in > :nth-child(2) { transition-delay: .10s; }
.reveal-stagger.is-in > :nth-child(3) { transition-delay: .16s; }
.reveal-stagger.is-in > :nth-child(4) { transition-delay: .22s; }
.reveal-stagger.is-in > :nth-child(5) { transition-delay: .28s; }
.reveal-stagger.is-in > :nth-child(6) { transition-delay: .34s; }
.reveal-stagger.is-in > :nth-child(7) { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important; animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.reveal, .reveal-stagger > * { opacity: 1; transform: none; }
	.mark-strike::after { transform: scaleX(1) rotate(-.6deg); }
}

/* =========================================================================
   MOVEMENT HOMEPAGE COMPONENTS
   Written mobile-first: the base rules are the phone layout, and min-width
   queries add the desktop treatment. Roughly two thirds of this audience is
   on a phone, so the small screen is the design, not the fallback.
   ========================================================================= */

/* -------------------------------------------------------------------------
   28. Image hero
   ---------------------------------------------------------------------- */
.hero-img {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* Capped rather than pure svh: on a tall phone an 85svh hero would push the
	   headline and the CTA below the fold, which is the one thing this section
	   exists to prevent. */
	min-height: clamp(500px, 84svh, 660px);
	overflow: hidden;
	isolation: isolate;
	background: var(--blue-night);
}
.hero-img__media { position: absolute; inset: 0; z-index: 0; }
.hero-img__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Bottom-up scrim on phones — the text sits over the darkened floor, where the
   photograph has no detail to fight with. */
.hero-img__scrim {
	position: absolute; inset: 0; z-index: 1;
	/* Two zones, split at roughly the height where the text begins. Heavy across
	   the lower half so the headline and buttons hold, then released sharply
	   above it — the stage screen lives up there and should read as brightly as
	   it does in the photograph. */
	background: linear-gradient(
		to top,
		rgba(8, 18, 34, .95) 0%,
		rgba(8, 18, 34, .90) 36%,
		rgba(8, 18, 34, .74) 52%,
		rgba(8, 18, 34, .38) 68%,
		rgba(8, 18, 34, .16) 100%
	);
}

.hero-img__inner {
	position: relative; z-index: 2;
	padding-top: clamp(72px, 22vw, 140px);
	padding-bottom: clamp(38px, 8vw, 72px);
	width: 100%;
}

.hero-img__eyebrow {
	/* flex, not inline-flex: a long descriptor wraps to a second line, and the
	   rule must stay beside the first line rather than being dragged down. */
	display: flex; align-items: baseline; gap: 9px;
	font-size: 11.5px; font-weight: 800;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--green);
	margin-bottom: 16px;
	max-width: 46ch;
}
.hero-img__eyebrow::before {
	content: ''; flex: 0 0 auto;
	width: 20px; height: 2px; background: var(--saffron);
	border-radius: 2px; transform: translateY(-4px);
}

.hero-img__title {
	color: #fff;
	font-size: clamp(2rem, 8.4vw, 4.2rem);
	line-height: 1.05;
	letter-spacing: -.042em;
	margin: 0 0 18px;
	/* Wide enough for a full sentence headline without dropping to five lines,
	   narrow enough that the lines still break where the meaning does. */
	max-width: 21ch;
}
.hero-img__l1, .hero-img__l2 { display: block; }
.hero-img__l1 { color: rgba(255,255,255,.72); font-weight: 600; }
.hero-img__title em {
	font-style: normal;
	color: var(--saffron);
	position: relative;
	/* Deliberately allowed to wrap. Holding this phrase on one line overflows
	   a 360px screen, and a headline that runs off the edge is worse than one
	   that breaks. */
	white-space: normal;
}

.hero-img__sub {
	color: rgba(255,255,255,.82);
	font-size: clamp(1rem, 4.1vw, 1.22rem);
	line-height: 1.55;
	max-width: 54ch;
	margin: 0 0 28px;
}

.btn--onImage {
	background: rgba(255,255,255,.10);
	color: #fff;
	border-color: rgba(255,255,255,.34);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.btn--onImage:hover { background: #fff; color: var(--ink); border-color: #fff; }

@media (min-width: 861px) {
	.hero-img { min-height: clamp(560px, 88svh, 780px); align-items: center; }
	/* Desktop art has the child on the right, so darken from the left instead. */
	.hero-img__scrim {
		/* Lighter than it looks like it should be, on purpose. The desktop
		   photograph is already near-black across its left half (measured
		   brightness 7–13 of 255) where the headline runs, so a heavy gradient
		   here only flattens the room without helping legibility. Just enough
		   to settle the crowd behind the type, then clear by the stage. */
		background: linear-gradient(
			100deg,
			rgba(8, 18, 34, .82) 0%,
			rgba(8, 18, 34, .72) 34%,
			rgba(8, 18, 34, .46) 54%,
			rgba(8, 18, 34, .14) 74%,
			rgba(8, 18, 34, 0) 92%
		);
	}
	.hero-img__inner { padding-block: clamp(64px, 7vw, 104px); }
	.hero-img__title { font-size: clamp(3rem, 5.4vw, 4.6rem); max-width: 14ch; }
	.hero-img__sub { font-size: clamp(1.08rem, 1.4vw, 1.24rem); }
}

/* -------------------------------------------------------------------------
   29. Event band — the one event block on the homepage
   ---------------------------------------------------------------------- */
.eventband { background: var(--blue-deep); color: #fff; }
.eventband__inner {
	display: grid;
	gap: 22px;
	padding-block: clamp(30px, 6vw, 46px);
	align-items: center;
}
.eventband__date { display: flex; align-items: baseline; gap: 12px; }
.eventband__d {
	font-size: clamp(2.6rem, 12vw, 3.6rem); font-weight: 800;
	letter-spacing: -.055em; line-height: .9; color: #fff;
}
.eventband__d span { color: var(--saffron); margin-inline: 1px; }
.eventband__m {
	font-size: 12px; font-weight: 800; letter-spacing: .16em;
	text-transform: uppercase; color: rgba(255,255,255,.66);
}
.eventband__kicker {
	display: block; font-size: 11.5px; font-weight: 800;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--green); margin-bottom: 8px;
}
.eventband__title {
	font-size: clamp(1.3rem, 5.4vw, 1.75rem);
	color: #fff; margin: 0 0 10px; letter-spacing: -.03em;
}
.eventband__body p {
	font-size: 15.5px; color: rgba(255,255,255,.76); margin: 0 0 14px; max-width: 60ch;
}
.eventband__where {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 14px; font-weight: 700; color: #fff;
}
.eventband__where svg { width: 16px; height: 16px; color: var(--saffron); flex-shrink: 0; }
.eventband__cta { justify-self: start; }

@media (min-width: 861px) {
	.eventband__inner {
		grid-template-columns: auto 1fr auto;
		gap: clamp(28px, 4vw, 54px);
	}
	.eventband__date { flex-direction: column; align-items: flex-start; gap: 6px; }
	.eventband__date::after {
		content: ''; display: block; width: 44px; height: 3px;
		background: var(--saffron); border-radius: 2px; margin-top: 4px;
	}
}

/* -------------------------------------------------------------------------
   30. What we are — lede + body + fact row
   ---------------------------------------------------------------------- */
.what__grid { display: grid; gap: 26px; }
.what__lede {
	font-size: clamp(1.2rem, 5vw, 1.6rem);
	font-weight: 700; letter-spacing: -.028em; line-height: 1.32;
	color: var(--ink); margin: 0;
	padding-left: 18px; border-left: 4px solid var(--green);
}
.what__body p { color: var(--ink-soft); font-size: 16.5px; }

.factrow {
	display: grid; gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	margin-top: clamp(36px, 6vw, 56px);
}
.factrow__item { background: var(--white); padding: 24px 22px; }
.factrow__n {
	display: block;
	font-size: clamp(2.1rem, 9vw, 2.8rem); font-weight: 800;
	letter-spacing: -.045em; line-height: 1; color: var(--blue);
	font-variant-numeric: tabular-nums;
}
.factrow__l { display: block; font-size: 14.5px; color: var(--ink-soft); margin-top: 8px; max-width: 32ch; }

@media (min-width: 761px) {
	.what__grid { grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
	.what__lede { padding-left: 22px; }
	.factrow { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------------------
   31. Why now — case + pull quote
   ---------------------------------------------------------------------- */
.case__grid { display: grid; gap: 30px; }
.pull-q { margin: 0; }
@media (min-width: 901px) {
	.case__grid { grid-template-columns: 1.15fr .85fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
}

/* -------------------------------------------------------------------------
   32. Reinvent / Reimagine / Redefine
   ---------------------------------------------------------------------- */
.rethree { display: grid; gap: 2px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; }
.rethree__item {
	background: var(--white);
	padding: clamp(26px, 5vw, 40px);
	transition: background .25s var(--ease);
}
.rethree__item:hover { background: var(--cream); }
.rethree__k {
	font-size: clamp(1.5rem, 7vw, 2.1rem);
	letter-spacing: -.04em; margin-bottom: 12px;
	color: var(--ink);
}
.rethree__item:nth-child(1) .rethree__k span { color: var(--saffron); }
.rethree__item:nth-child(2) .rethree__k span { color: var(--green-deep); }
.rethree__item:nth-child(3) .rethree__k span { color: var(--blue); }
.rethree__item p { font-size: 15.5px; color: var(--ink-soft); margin: 0; }
@media (min-width: 761px) { .rethree { grid-template-columns: repeat(3, 1fr); } }

/* -------------------------------------------------------------------------
   33. How we work — four strands
   ---------------------------------------------------------------------- */
.strands { display: grid; gap: 0; }
.strand {
	display: grid; grid-template-columns: 52px 1fr; gap: 16px;
	padding: 26px 0;
	border-top: 1px solid var(--line);
	align-items: start;
}
.strand:last-child { border-bottom: 1px solid var(--line); }
.strand__n {
	font-size: 13px; font-weight: 800; letter-spacing: .1em;
	color: var(--blue); padding-top: 6px;
	font-variant-numeric: tabular-nums;
}
.strand__k { font-size: clamp(1.15rem, 4.6vw, 1.45rem); margin-bottom: 8px; letter-spacing: -.03em; }
.strand p { font-size: 15.5px; color: var(--ink-soft); margin: 0; max-width: 62ch; }

@media (min-width: 861px) {
	.strands { grid-template-columns: 1fr 1fr; column-gap: clamp(36px, 5vw, 72px); }
	.strand { grid-template-columns: 56px 1fr; padding: 30px 0; }
	/* Keep the rule reading as one continuous ledger across both columns. */
	.strand:nth-child(2) { border-top: 1px solid var(--line); }
	.strand:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}

/* -------------------------------------------------------------------------
   34. Road to 2047
   ---------------------------------------------------------------------- */
.road { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; }
.road::before {
	content: ''; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px;
	background: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 13px);
}
.road__item {
	position: relative;
	display: grid; grid-template-columns: 1fr; gap: 6px;
	padding: 0 0 30px 34px;
}
.road__item:last-child { padding-bottom: 0; }
.road__dot {
	position: absolute; left: 0; top: 5px;
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--white); border: 3px solid var(--line-strong);
	box-shadow: 0 0 0 5px var(--cream-deep);
}
.road__item--now .road__dot { border-color: var(--saffron); background: var(--saffron); }
.road__item--next .road__dot { border-color: var(--blue); }
.road__when {
	font-family: inherit;
	font-size: 12.5px; font-weight: 800; letter-spacing: .12em;
	text-transform: uppercase; color: var(--blue);
	font-variant-numeric: tabular-nums;
}
.road__head {
	font-size: clamp(1.1rem, 4.4vw, 1.32rem); margin-bottom: 6px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.road__tag {
	font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	background: var(--saffron); color: var(--ink);
	padding: 3px 9px; border-radius: var(--r-pill);
}
.road__body p { font-size: 15.5px; color: var(--ink-soft); margin: 0; max-width: 62ch; }
.road__item--later { opacity: .82; }

@media (min-width: 861px) {
	.road::before { left: 116px; }
	.road__item { grid-template-columns: 100px 1fr; column-gap: 44px; padding-left: 0; align-items: start; }
	.road__dot { left: 109px; top: 6px; }
	.road__when { text-align: right; padding-top: 3px; }
	.road__body { grid-column: 2; }
	.road__head { margin-top: -2px; }
}

/* -------------------------------------------------------------------------
   35. Council block
   ---------------------------------------------------------------------- */
/*
 * White, not cream. The section band behind it is cream-deep, so a cream card
 * sat almost invisibly on it — the panel now lifts off the page instead of
 * blending into it.
 */
.council {
	display: grid; gap: clamp(24px, 4vw, 40px);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: clamp(26px, 5vw, 46px);
	align-items: center;
	box-shadow: var(--shadow-md);
}
/* Tinted panel so the logo reads as a mounted mark rather than floating. */
.council__mark {
	background: var(--cream); border: 1px solid var(--line);
	border-radius: var(--r-md); padding: clamp(18px, 2.4vw, 26px);
	display: grid; place-items: center;
}

/*
 * Opening line, set larger. The card carries no heading now, so this does that
 * job — it gives the eye somewhere to land and stops the copy reading as one
 * undifferentiated block.
 */
.council__lead {
	font-size: clamp(1.05rem, 1.9vw, 1.28rem);
	font-weight: 600; line-height: 1.45; letter-spacing: -.022em;
	color: var(--ink) !important;
	margin-bottom: .85em;
}
.council__body p + p { margin-top: .8em; }
.council__mark img { width: 100%; max-width: 300px; height: auto; }
/*
 * For the inline SVG lockup, which already has its own frame and white field.
 * Extra top padding gives the plane somewhere to fly without being clipped by
 * a neighbouring element.
 */
.council__mark--bare {
	background: none; border: 0; padding: 0;
}
.council__mark--bare .brandmark__img { width: 100%; max-width: 320px; margin-inline: auto; }
.council__body p { font-size: 16px; color: var(--ink-soft); }
.council__note {
	font-size: 14.5px !important; color: var(--ink-mute) !important;
	padding-top: 14px; border-top: 1px solid var(--line); margin-top: 16px !important;
}
@media (min-width: 761px) { .council { grid-template-columns: 320px 1fr; gap: clamp(32px, 4vw, 56px); } }

/* -------------------------------------------------------------------------
   36. Event page extras
   ---------------------------------------------------------------------- */
.hero--event { padding-top: clamp(40px, 6vw, 76px); }

.billing {
	font-size: clamp(1.3rem, 5.6vw, 2.1rem); font-weight: 800;
	letter-spacing: -.035em; line-height: 1.15; color: #fff !important;
	max-width: 20ch; margin: 0 auto 26px;
}
.speechline {
	display: inline-block;
	background: var(--white); color: var(--ink) !important;
	font-size: clamp(1rem, 4.2vw, 1.2rem); font-weight: 700; letter-spacing: -.02em;
	padding: 16px 28px; border-radius: var(--r-lg);
	position: relative; max-width: 34ch; margin: 0 auto 26px;
	box-shadow: var(--shadow-md);
}
.speechline::after {
	content: ''; position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%);
	border: 12px solid transparent; border-top-color: var(--white); border-bottom: 0;
}
.organiser { font-size: 14.5px; color: rgba(255,255,255,.6) !important; margin: 0; }
.organiser strong { color: var(--green); }

.room-grid--six { grid-template-columns: 1fr; }
@media (min-width: 621px) { .room-grid--six { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 981px) {
	.room-grid--six { grid-template-columns: repeat(3, 1fr); }
	/* Six cards divide evenly, so the orphan-row rules from the 5-card grid
	   must not apply here. */
	.room-grid--six > *,
	.room-grid--six > :nth-child(4),
	.room-grid--six > :nth-child(5) { grid-column: auto; }
}

.venue__grid { display: grid; gap: 28px; }
.venue__facts {
	margin: 0; display: grid; gap: 1px;
	background: var(--line); border: 1px solid var(--line);
	border-radius: var(--r-md); overflow: hidden;
}
.venue__fact { background: var(--white); padding: 16px 20px; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.venue__fact dt { font-size: 13.5px; color: var(--ink-mute); font-weight: 600; }
.venue__fact dd { margin: 0; font-size: 15.5px; font-weight: 700; text-align: right; }
@media (min-width: 861px) { .venue__grid { grid-template-columns: 1.2fr .8fr; gap: clamp(36px, 5vw, 72px); align-items: start; } }

/* -------------------------------------------------------------------------
   36b. UPI payment step — shown after the registration is saved
   ---------------------------------------------------------------------- */
/* The amount, deliberately the loudest element in the panel. */
.payamount {
	text-align: center; margin: 0 0 26px;
	padding: 22px 18px; border-radius: var(--r-lg);
	background: var(--blue-tint); border: 1px solid var(--blue);
	display: grid; gap: 4px;
}
.payamount__l {
	font-size: 12px; font-weight: 800; letter-spacing: .16em;
	text-transform: uppercase; color: var(--blue);
}
.payamount__v {
	font-size: clamp(2.6rem, 9vw, 3.6rem); font-weight: 800;
	letter-spacing: -.045em; line-height: 1; color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.payamount__m { font-size: 14px; color: var(--ink-soft); }
.payamount__m strong { color: var(--ink); }

.paystep__head { text-align: center; margin-bottom: 18px; }
.paystep__head p { color: var(--ink-soft); font-size: 15.5px; margin-top: 10px; }

/* Two equal choices, so neither reads as the "wrong" one. Pay later is a
   legitimate path for an institution waiting on its accounts department. */
.paystep__choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 28px; }
.paychoice {
	appearance: none; cursor: pointer; text-align: left;
	background: var(--cream); border: 2px solid var(--line);
	border-radius: var(--r-md); padding: 16px 18px;
	display: grid; gap: 3px;
	transition: border-color .2s var(--ease), background .2s var(--ease);
	font: inherit; color: inherit;
}
.paychoice:hover { border-color: var(--line-strong); }
.paychoice.is-active { border-color: var(--blue); background: var(--blue-tint); }
.paychoice__k { font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.paychoice__d { font-size: 13.5px; color: var(--ink-mute); }

/* Scan QR / UPI ID tabs */
.paymethod {
	display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
	background: var(--cream); border: 1px solid var(--line);
	border-radius: var(--r-pill); padding: 4px; margin-bottom: 22px;
}
.paymethod__t {
	appearance: none; cursor: pointer; font: inherit;
	font-size: 14.5px; font-weight: 700; color: var(--ink-mute);
	background: none; border: 0; border-radius: var(--r-pill); padding: 10px 12px;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.paymethod__t.is-active { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }

.payqr { text-align: center; }
.payqr__h { font-size: clamp(1.1rem, 2vw, 1.35rem); margin-bottom: 8px; }
.payqr__d { font-size: 14.5px; color: var(--ink-soft); max-width: 46ch; margin: 0 auto 20px; }
.payqr__img { display: inline-block; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.payqr__img img { display: block; width: 240px; height: 240px; object-fit: contain; }
.payqr__amt { font-size: 14.5px; color: var(--ink-soft); margin: 18px auto 0; max-width: 42ch; }

@media (max-width: 420px) { .payqr__img img { width: 200px; height: 200px; } }

/* App buttons. Brand names set in the site's own type with a colour dot rather
   than reproduced logos — an approximated logo looks worse than no logo, and
   the real marks are trademarked. Swap in supplied artwork if it arrives. */
.payapps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.payapp {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 16px; border-radius: var(--r-md);
	border: 1px solid var(--line); background: var(--white);
	text-decoration: none; color: var(--ink);
	font-weight: 700; font-size: 15px;
	transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.payapp:hover { border-color: var(--tint, var(--blue)); transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--ink); }
.payapp__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--tint, var(--blue)); flex-shrink: 0; }
.payapp__n { line-height: 1.2; }

.paystep__notinstalled {
	margin: 12px 0 0; padding: 11px 14px;
	background: var(--need-bg, #FBEEDA); border: 1px solid var(--need, #9A5B00);
	border-radius: var(--r-sm); font-size: 14px; color: var(--need, #9A5B00);
}

@media (max-width: 380px) { .payapps { grid-template-columns: 1fr; } }

.paystep__app { margin-bottom: 10px; }
.paystep__hint { font-size: 13.5px; color: var(--ink-mute); margin: 0; }
.paystep__hint--center { text-align: center; margin-top: 14px; }

.paystep__or {
	display: flex; align-items: center; gap: 14px;
	margin: 24px 0 18px; color: var(--ink-mute); font-size: 13px;
	text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
}
.paystep__or::before, .paystep__or::after {
	content: ''; flex: 1; height: 1px; background: var(--line);
}

.paystep__vpa {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	background: var(--cream); border: 1px solid var(--line);
	border-radius: var(--r-md); padding: 14px 16px;
}
.paystep__label { display: block; font-size: 12px; color: var(--ink-mute); margin-bottom: 3px; }
.paystep__vpa strong { font-size: 16px; word-break: break-all; }

.paystep__qr { text-align: center; margin-top: 22px; }
.paystep__qr img {
	width: 200px; height: 200px; display: block; margin: 0 auto 12px;
	border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px; background: #fff;
}

.paystep__utr { margin: 26px 0 20px; }
.paystep__utr label { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 7px; }
.paystep__utr input {
	width: 100%; font-size: 16px; padding: 13px 15px;
	border: 1px solid var(--line-strong); border-radius: var(--r-sm);
	background: var(--white); font-family: var(--mono, inherit); letter-spacing: .04em;
}
.paystep__utr input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }



/* -------------------------------------------------------------------------
   Pay-later-only panel ("Registration Received").

   Every rule is scoped to .paystep--received so the paying layouts above are
   untouched. This screen has a different job from those: nothing is being paid,
   so the fee stops being the headline and the reference — the one thing the
   member has to keep — takes its place. The vertical rhythm runs on a single
   scale rather than the ad-hoc margins the paying panel accumulated.
   ---------------------------------------------------------------------- */
.paystep--received {
	--recv-gap: clamp(20px, 3.4vw, 28px);
	text-align: center;
}

.paystep--received .paystep__head {
	margin-bottom: var(--recv-gap);
}
.paystep--received .paystep__head .eyebrow {
	justify-content: center;
	display: inline-flex;
	margin-bottom: 10px;
}
/* Larger than .h-2, because on this screen the thanks is the headline. */
.paystep--received .paystep__head .h-2 {
	font-size: clamp(1.9rem, 5.2vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -.03em;
}

/* The reference panel, matching the confirmation screen so the member sees the
   same object twice rather than two different treatments of one number. */
.payref {
	display: grid;
	gap: 8px;
	padding: clamp(20px, 3.4vw, 26px) 16px;
	/* Tight to the fee line below it: the two are one unit of "your details". */
	margin: 0 0 10px;
	border: 2px dashed var(--blue);
	border-radius: var(--r-md);
	background: var(--white);
}
.payref__l {
	font-size: 12px; font-weight: 800; letter-spacing: .14em;
	text-transform: uppercase; color: var(--ink-mute);
}
.payref__v {
	font-size: clamp(1.5rem, 6.4vw, 2.2rem);
	font-weight: 800; letter-spacing: .04em; color: var(--blue);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	/* A reference broken across two lines is a reference someone mistypes. */
	white-space: nowrap;
}

.payref__fee {
	margin: 0 0 var(--recv-gap);
	font-size: 14.5px;
	color: var(--ink-mute);
	text-align: center;
}
.payref__fee strong { color: var(--ink-soft); font-weight: 700; }
.payref__sep { opacity: .5; margin: 0 2px; }

/* Wider measure than the default so the sentence does not orphan its last word
   on a phone, which is what a 46ch limit was doing at 390px. */
.paystep--received .paystep__thanks {
	margin: 0 auto var(--recv-gap);
	max-width: 52ch;
	color: var(--ink-soft);
	/* Stops the sentence dropping its final word onto a line of its own. */
	text-wrap: pretty;
}

.paystep--received .paypanel { margin: 0; }
.paystep--received .btn--block { margin: 0; }

@media (max-width: 420px) {
	.payref { padding: 20px 12px; }
	.paystep--received .btn--lg { padding: 16px 24px; font-size: 16px; }
}
/*
 * Replaces the numbered steps in the pay-later-only flow, where there is no
 * sequence left to describe. Sized between the lede and body text so it reads
 * as the panel's message rather than a caption.
 */
.paystep__thanks {
	margin: 0 0 24px;
	text-align: center;
	font-size: clamp(15.5px, 1.7vw, 17px);
	line-height: 1.65;
	color: var(--ink-soft);
	max-width: 46ch;
	margin-inline: auto;
}
.paystep__thanks strong { color: var(--ink); font-weight: 700; }
.paystep__steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; counter-reset: p; }
.paystep__steps li {
	counter-increment: p; display: grid; grid-template-columns: 26px 1fr; gap: 13px;
	align-items: start; font-size: 15.5px; color: var(--ink-soft);
}
.paystep__steps li::before {
	content: counter(p); grid-column: 1;
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--blue-tint); color: var(--blue);
	font-size: 12.5px; font-weight: 800;
	display: grid; place-items: center;
}

@media (max-width: 480px) {
	.paystep__choice { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   37. Registration page — sign-up mode
   ---------------------------------------------------------------------- */
.page-hero__facts {
	display: flex; flex-wrap: wrap; gap: 10px 22px;
	margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
}
.page-hero__facts span {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 14px; font-weight: 600; color: var(--ink-soft);
}
.page-hero__facts svg { width: 16px; height: 16px; color: var(--blue); flex-shrink: 0; }

.summary__h {
	font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ink-mute); margin-bottom: 18px;
}
.nextlist { list-style: none; counter-reset: n; margin: 0 0 24px; padding: 0; display: grid; gap: 18px; }
.nextlist li {
	counter-increment: n;
	display: grid; grid-template-columns: 28px 1fr;
	/* Row gap kept tight so each heading stays visually bound to its own
	   description rather than floating between the two. */
	column-gap: 13px; row-gap: 3px;
	align-items: start;
}
/* Three children share two columns, so placement is stated explicitly —
   left implicit, the description auto-flows into the 28px counter column and
   breaks one word per line. */
.nextlist li::before {
	content: counter(n);
	grid-column: 1; grid-row: 1;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--blue-tint); color: var(--blue);
	display: grid; place-items: center;
	font-size: 12.5px; font-weight: 800;
}
.nextlist strong {
	grid-column: 2; grid-row: 1;
	display: block; font-size: 15px; letter-spacing: -.015em;
}
.nextlist span {
	grid-column: 2; grid-row: 2;
	display: block; font-size: 14px; color: var(--ink-mute); line-height: 1.5;
	min-width: 0;
}
.reassure { display: grid; gap: 15px; padding-top: 20px; border-top: 1px solid var(--line); }

/* -------------------------------------------------------------------------
   38. Mobile polish — two thirds of this audience lands here first
   ---------------------------------------------------------------------- */
@media (max-width: 640px) {
	body { font-size: 16px; }

	/* Full-width CTAs are far easier to hit one-handed on a phone. */
	.cta-row { gap: 10px; }
	.cta-row > .btn { width: 100%; }
	.cta-row--center > .btn { width: 100%; }

	.btn { padding: 15px 24px; }
	.btn--lg { padding: 16px 26px; font-size: 16px; }

	.section-head { margin-bottom: 32px; }
	.pull-q { padding: 26px 24px; }
	.pull-q::before { font-size: 180px; bottom: -50px; }

	.hero__stats { gap: 22px 28px; }
	.hero__stats > * { flex: 1 1 40%; }

	.bigq__close { flex-direction: column; align-items: flex-start; }
	.bigq__close .btn { width: 100%; }

	.closing__dates { letter-spacing: -.05em; }

	.faq-q { padding: 20px 44px 20px 0; font-size: 1rem; }

	.form-card { padding: 20px 18px; }
	.form-section + .form-section { margin-top: 26px; padding-top: 24px; }

	/* 16px minimum stops iOS Safari zooming the viewport on focus. */
	.field input, .field select, .field textarea { font-size: 16px; }

	.summary__head, .summary__body, .summary__foot { padding-inline: 20px; }
	.confirm__detail-row { flex-direction: column; gap: 3px; }
	.confirm__detail-row span:last-child { text-align: left; }
	.footer-meta { flex-direction: column; align-items: flex-start; gap: 14px; }
	.footer-meta__links { gap: 12px 18px; }
}

/* Anything that could push the page sideways on a narrow screen. */
@media (max-width: 480px) {
	.eventband__cta { width: 100%; }
	.venue__fact { flex-direction: column; gap: 2px; }
	.venue__fact dd { text-align: left; }
	.road__head { gap: 8px; }
}

/* -------------------------------------------------------------------------
   39. Print — a member printing their confirmation
   ---------------------------------------------------------------------- */
@media print {
	.site-header, .ticker, .site-footer, .btn { display: none !important; }
	body { background: #fff; }
	.confirm__code { border-color: #000; }
}

/* -------------------------------------------------------------------------
   40. Register page banner
   Scoped entirely to .page-hero--banner. The plain .page-hero is shared with
   Contact, Terms, Privacy and the Refund policy, and none of them should
   inherit a photograph or white text.
   ---------------------------------------------------------------------- */
.page-hero--banner {
	position: relative;
	overflow: hidden;
	background: var(--blue-night);
	border-bottom: 0;
	padding-block: clamp(52px, 7vw, 92px);
	isolation: isolate;
}
.page-hero--banner > .wrap { position: relative; z-index: 2; }

.page-hero__media { position: absolute; inset: 0; z-index: 0; display: block; }
.page-hero__media img {
	width: 100%; height: 100%; display: block;
	object-fit: cover;
	/* Pulls the crop right, putting the seated crowd rather than the bright
	   stage screen behind the headline. */
	object-position: 72% 50%;
}

.page-hero__scrim { position: absolute; inset: 0; z-index: 1; }

/* Desktop: text sits left, so the darkness is heaviest there and thins out
   across the hall rather than flattening the whole photograph. */
@media (min-width: 861px) {
	.page-hero__scrim {
		background:
			linear-gradient(90deg,
				rgba(10, 22, 44, .94) 0%,
				rgba(10, 22, 44, .88) 34%,
				rgba(10, 22, 44, .58) 62%,
				rgba(10, 22, 44, .30) 100%);
	}
}

/* Below 861px the text spans the full width, so a side gradient would leave
   part of every line over bare photograph. A vertical wash is used instead. */
@media (max-width: 860px) {
	.page-hero__scrim {
		background:
			linear-gradient(180deg,
				rgba(10, 22, 44, .84) 0%,
				rgba(10, 22, 44, .90) 100%);
	}
}

.page-hero--banner .eyebrow { color: var(--green); }
.page-hero--banner .eyebrow::before { background: var(--saffron); }
.page-hero--banner h1 { color: #fff; }
.page-hero--banner .lede { color: rgba(255, 255, 255, .84); }

.page-hero--banner .page-hero__facts { border-top-color: rgba(255, 255, 255, .24); }
.page-hero--banner .page-hero__facts span { color: rgba(255, 255, 255, .92); }
.page-hero--banner .page-hero__facts svg { color: var(--saffron); }

/* -------------------------------------------------------------------------
   41. "We have your payment, do not pay again"
   The confirmation shown after a UPI payment is reported. Nothing here is
   decoration: a member who has paid and sees no confirmation will pay twice
   unless the page tells them plainly not to.
   ---------------------------------------------------------------------- */
.confirm__badge--wait { background: var(--need-bg, #FBEEDA); color: var(--need, #9A5B00); }

.paynotice {
	max-width: 560px; margin: 0 auto 28px;
	background: var(--need-bg, #FBEEDA);
	border: 1px solid var(--need, #9A5B00);
	border-radius: var(--r-md);
	padding: 16px 20px; text-align: left;
	display: grid; gap: 4px;
}
.paynotice__k { color: var(--need, #9A5B00); font-size: 15px; }
.paynotice p { color: var(--need, #9A5B00); font-size: 14.5px; margin: 0; }

.confirm__next {
	text-align: left; max-width: 560px; margin: 0 auto;
	background: var(--white); border: 1px solid var(--line);
	border-radius: var(--r-md); padding: clamp(22px, 3vw, 30px);
}
.confirm__steps {
	list-style: none; counter-reset: s; margin: 16px 0 0; padding: 0;
	display: grid; gap: 14px;
}
.confirm__steps li {
	counter-increment: s;
	display: grid; grid-template-columns: 26px 1fr; gap: 13px;
	align-items: start; font-size: 15.5px; color: var(--ink-soft); line-height: 1.6;
}
.confirm__steps li::before {
	content: counter(s);
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--blue-tint); color: var(--blue);
	font-size: 12.5px; font-weight: 800;
	display: grid; place-items: center;
}

.confirm__reach {
	margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
}
/* Direct child only — the heading. A nested <strong> inside the paragraph
   below must stay inline, or the reference number breaks onto its own line. */
.confirm__reach > strong { display: block; font-size: 15px; margin-bottom: 5px; }
.confirm__reach p { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 12px; }
.confirm__reach-links { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.confirm__reach-links a {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 15px; font-weight: 600; text-decoration: none;
}
.confirm__reach-links svg { width: 17px; height: 17px; flex-shrink: 0; }

/*
 * Warm close on the confirmation screens. Sits below the practical blocks so
 * the last thing read is an invitation rather than an instruction — and it is
 * the only centred italic on the page, which is what makes it read as a
 * sign-off instead of another notice.
 */
.confirm__signoff {
	max-width: 560px;
	margin: 26px auto 0;
	font-size: clamp(15.5px, 1.6vw, 17px);
	line-height: 1.6;
	font-style: italic;
	color: var(--ink-soft);
	text-align: center;
}
.confirm__signoff::before {
	content: '';
	display: block;
	width: 34px;
	height: 2px;
	margin: 0 auto 16px;
	border-radius: 2px;
	background: var(--green);
}

/* -------------------------------------------------------------------------
   42. Association credit
   A formal attribution, so it is set as one: a small-caps label above the
   organisation's name, centred under the council card. Deliberately not a
   sentence in body copy — that reads as description, and this is a credit.
   ---------------------------------------------------------------------- */
.assoc {
	margin: clamp(26px, 4vw, 38px) auto 0;
	max-width: 46ch; text-align: center;
	display: grid; gap: 8px; justify-items: center;
}
.assoc__l {
	display: inline-flex; align-items: center; gap: 12px;
	font-size: 11.5px; font-weight: 800; letter-spacing: .18em;
	text-transform: uppercase; color: var(--ink-mute);
}
/* Hairlines either side of the label, so the credit reads as a plate rather
   than a stray line of text under the card. */
.assoc__l::before, .assoc__l::after {
	content: ''; width: clamp(20px, 5vw, 40px); height: 1px; background: var(--line-strong);
}
.assoc__o {
	font-size: clamp(1rem, 1.7vw, 1.15rem);
	font-weight: 700; letter-spacing: -.02em; color: var(--ink);
	line-height: 1.4; text-wrap: balance;
}

/* -------------------------------------------------------------------------
   43. Payment screenshot uploader
   ---------------------------------------------------------------------- */
.paystep__upload { margin: 26px 0 14px; }
.uploader { display: block; cursor: pointer; }

.uploader__box {
	display: grid; justify-items: center; gap: 6px;
	padding: 26px 20px; text-align: center;
	border: 2px dashed var(--line-strong); border-radius: var(--r-md);
	background: var(--cream);
	transition: border-color .2s var(--ease), background .2s var(--ease);
}
.uploader:hover .uploader__box { border-color: var(--blue); background: var(--blue-tint); }
.uploader__box.has-error { border-color: var(--block, #A5231C); background: #FEF1EF; }
.uploader__icon svg { width: 30px; height: 30px; color: var(--blue); }
.uploader__t { font-weight: 700; font-size: 15.5px; }
.uploader__d { font-size: 13px; color: var(--ink-mute); }

/* Once chosen, the member sees their own screenshot — the fastest way to
   confirm they picked the right image before sending it. */
.uploader__preview {
	display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center;
	padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md);
	background: var(--white);
}
.uploader__preview img {
	width: 92px; height: 92px; object-fit: cover;
	border-radius: var(--r-sm); border: 1px solid var(--line); display: block;
}
.uploader__meta { display: grid; gap: 3px; min-width: 0; }
.uploader__meta strong {
	font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uploader__meta span { font-size: 13px; color: var(--ink-mute); }
.uploader__change {
	appearance: none; background: none; border: 0; padding: 0; margin-top: 4px;
	font: inherit; font-size: 13.5px; font-weight: 600; color: var(--blue);
	text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
	justify-self: start;
}

/* The reference is now optional, so it is folded away rather than presented
   as another thing to fill in. */
.paystep__ref { margin-bottom: 20px; }
.paystep__ref summary {
	cursor: pointer; font-size: 14px; color: var(--ink-soft);
	padding: 8px 0; list-style: none;
}
.paystep__ref summary::-webkit-details-marker { display: none; }
.paystep__ref summary::before { content: '+ '; font-weight: 700; color: var(--blue); }
.paystep__ref[open] summary::before { content: '– '; }
.paystep__ref-l { display: block; font-weight: 700; font-size: 14px; margin: 6px 0 6px; }
.paystep__ref input {
	width: 100%; font-size: 16px; padding: 12px 14px;
	border: 1px solid var(--line-strong); border-radius: var(--r-sm);
	background: var(--white); letter-spacing: .04em;
}

@media (max-width: 420px) {
	.uploader__preview { grid-template-columns: 68px 1fr; gap: 12px; }
	.uploader__preview img { width: 68px; height: 68px; }
}

/* Admin: screenshot thumbnail in the registrations list */
.sankalp-proof-thumb {
	width: 46px; height: 46px; object-fit: cover; display: block;
	border: 1px solid #ccd0d4; border-radius: 4px; background: #fff;
}