/* Responsive layer for website.html.
 *
 * The Claude Design export styles every element with a `style=""` attribute at
 * fixed desktop pixel values and ships no breakpoints, so below ~900px the page
 * scrolled sideways with the headline and nav cut off. Editing design-src/ would
 * be undone by the next export, so build.py instead tags elements with `r-*`
 * classes matched from their inline-style signatures, and this file overrides
 * the handful of declarations that must flex.
 *
 * Everything here is `!important` — that is not sloppiness, it is the only way a
 * stylesheet outranks an inline style attribute.
 *
 * Every clamp()'s upper bound is the value the export authored, so at desktop
 * widths the page renders exactly as designed; the fluid range only engages as
 * the viewport narrows.
 */

/* Anchor links (#mission, #story…) otherwise land underneath the sticky header. */
html {
	scroll-padding-top: 96px;
}

img {
	max-width: 100%;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.r-header {
	padding: clamp(12px, 1.6vw, 18px) clamp(16px, 4vw, 48px) !important;
	gap: clamp(12px, 2vw, 32px) !important;
}

.r-nav {
	gap: clamp(12px, 1.9vw, 24px) !important;
	font-size: clamp(13px, 1.5vw, 15px) !important;
}

.r-navcta {
	padding: clamp(8px, 1.1vw, 10px) clamp(14px, 2.4vw, 22px) !important;
}

/* Below this the wordmark and the six nav items cannot share a row; the logo
   mark carries the identity on its own. */
@media (max-width: 880px) {
	.r-brand {
		display: none !important;
	}

	.r-brandmark {
		width: 40px !important;
		height: 40px !important;
	}
}

/* Last resort before the nav would force the page wider than the screen: let
   the section links scroll under the thumb. The nav starts at its first item
   rather than its last, and the CTA is stuck to the right edge so the primary
   action stays on screen while the links slide beneath it. */
@media (max-width: 700px) {
	html {
		scroll-padding-top: 72px;
	}

	.r-nav {
		flex-shrink: 1 !important;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.r-nav::-webkit-scrollbar {
		display: none;
	}

	.r-navcta {
		position: sticky;
		right: 0;
		flex: none;
		/* Opaque, or the scrolling links show through the pill. */
		background: #0b1223 !important;
		box-shadow: -12px 0 12px -6px #0b1223;
	}
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.r-hero-body {
	padding: clamp(92px, 13vw, 140px) clamp(20px, 5vw, 64px) !important;
	gap: clamp(18px, 2.6vw, 30px) !important;
}

.r-h1 {
	font-size: clamp(34px, 8.4vw, 84px) !important;
}

.r-btnrow {
	flex-wrap: wrap !important;
	gap: clamp(12px, 1.8vw, 20px) !important;
}

.r-btn {
	padding: clamp(13px, 1.9vw, 16px) clamp(22px, 4.4vw, 40px) !important;
	font-size: clamp(15px, 1.9vw, 18px) !important;
}

/* The art is a right-hand column masked into a left-to-right gradient. Once the
   copy spans the full width it sits on top of the bright part, so turn the veil
   through 90 degrees to match the stacked layout. */
@media (max-width: 760px) {
	.r-heroart {
		width: 100% !important;
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}

	.r-heroveil {
		background: linear-gradient(180deg, rgba(6, 11, 24, .8) 0%, rgba(6, 11, 24, .7) 45%, rgba(6, 11, 24, .95) 100%) !important;
	}
}

/* ── Section bands ───────────────────────────────────────────────────────── */

.r-band {
	padding: clamp(56px, 8.5vw, 110px) clamp(20px, 5vw, 64px) !important;
}

.r-wrap {
	gap: clamp(32px, 4.6vw, 56px) !important;
}

.r-h2 {
	font-size: clamp(28px, 5.2vw, 54px) !important;
}

.r-eyebrow {
	font-size: clamp(12px, 1.6vw, 17px) !important;
	letter-spacing: clamp(.16em, .35vw, .4em) !important;
}

.r-eyebrow-lg {
	font-size: clamp(12px, 1.7vw, 18px) !important;
	letter-spacing: clamp(.16em, .35vw, .4em) !important;
}

.r-rule {
	width: clamp(24px, 4vw, 48px) !important;
}

.r-lede {
	font-size: clamp(16px, 2.2vw, 22px) !important;
}

.r-body {
	font-size: clamp(15px, 2.1vw, 20px) !important;
}

/* iOS Safari does not honour background-attachment: fixed — it renders the
   image at the wrong scale and it judders while scrolling. */
@media (hover: none), (max-width: 900px) {
	.r-fixed {
		background-attachment: scroll !important;
	}
}

/* ── Grids ───────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.r-grid2,
	.r-grid3 {
		grid-template-columns: 1fr !important;
	}

	.r-grid4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.r-grid2,
	.r-grid3,
	.r-grid4 {
		gap: 22px !important;
	}
}

@media (max-width: 520px) {
	.r-grid4 {
		grid-template-columns: 1fr !important;
	}
}

/* ── Mission list ────────────────────────────────────────────────────────── */

.r-numeral {
	font-size: clamp(30px, 6.4vw, 48px) !important;
}

.r-missiontext {
	font-size: clamp(15px, 2.1vw, 20px) !important;
}

@media (max-width: 520px) {
	.r-mission {
		gap: 14px !important;
	}
}

/* ── Figures ─────────────────────────────────────────────────────────────── */

.r-figimg {
	height: clamp(150px, 20vw, 220px) !important;
}

/* Single column — the portraits get the full width, so give them the height to
   match or they read as letterbox crops. */
@media (max-width: 520px) {
	.r-figimg {
		height: 210px !important;
	}
}

.r-figcap-sm {
	font-size: clamp(12px, 1.6vw, 16px) !important;
	letter-spacing: clamp(.08em, .2vw, .14em) !important;
}

.r-figcap {
	font-size: clamp(15px, 2vw, 18px) !important;
}

/* ── Market stat ─────────────────────────────────────────────────────────── */

.r-stat {
	font-size: clamp(42px, 10.4vw, 110px) !important;
}

/* ── Income cards ────────────────────────────────────────────────────────── */

.r-card {
	padding: clamp(22px, 3.4vw, 34px) !important;
}

.r-cardnum {
	font-size: clamp(32px, 6vw, 44px) !important;
}

.r-cardlabel {
	font-size: clamp(15px, 2vw, 19px) !important;
}

/* ── Closing CTA ─────────────────────────────────────────────────────────── */

.r-cta {
	padding: 20px clamp(20px, 5vw, 64px) clamp(56px, 8vw, 90px) !important;
	gap: clamp(18px, 2.6vw, 26px) !important;
}

.r-cta-title {
	font-size: clamp(24px, 5.4vw, 48px) !important;
}

.r-cta-btn {
	padding: clamp(14px, 2.1vw, 18px) clamp(28px, 6vw, 56px) !important;
	font-size: clamp(16px, 2.2vw, 20px) !important;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.r-footer {
	padding: clamp(26px, 4vw, 36px) clamp(20px, 5vw, 64px) !important;
	gap: 16px !important;
}

.r-footbrand {
	font-size: clamp(12px, 1.7vw, 15px) !important;
	letter-spacing: clamp(.1em, .24vw, .2em) !important;
}

.r-footnote {
	font-size: clamp(12px, 1.7vw, 15px) !important;
}

@media (max-width: 640px) {
	.r-footer {
		flex-direction: column !important;
		text-align: center;
	}
}