/* ==========================================================================
   Principia Advisory — global reset, base styles and design tokens
   ========================================================================== */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'DM Sans', Arial, sans-serif;
	font-weight: 400;
	background-color: var(--paper);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

:root {
	/* Colour */
	--ink: #171c26;
	--paper: #f4f1ea;
	--paper-warm: #ede9df;
	--white: #ffffff;
	--accent: #1f3a5f;
	--accent-link: #1f3a5f;
	--accent-display: #1f3a5f;
	--ink-soft: #696e78;
	--paper-soft: #b9bcc2;
	--line: rgba(23, 28, 38, 0.20);
	--line-on-ink: rgba(244, 241, 234, 0.22);

	/* Type scale */
	--fs-caption: clamp(0.6875rem, 0.66rem + 0.13vw, 0.75rem);
	--fs-eyebrow: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--fs-body: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
	--fs-body-lg: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
	--fs-h4: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
	--fs-h3: clamp(1.625rem, 1.35rem + 1.4vw, 2.25rem);
	--fs-h2: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
	--fs-h1: clamp(2.75rem, 1.8rem + 4.8vw, 5.5rem);
	--fs-display: clamp(2.75rem, 1.4rem + 5.2vw, 5.75rem);

	/* Spacing */
	--sp-1: 0.5rem;
	--sp-2: 1rem;
	--sp-3: 1.5rem;
	--sp-4: 2rem;
	--sp-5: 3rem;
	--sp-6: 4.5rem;
	--sp-7: 6rem;
	--sp-section: clamp(4.5rem, 3.5rem + 5vw, 9rem);
	--sp-margin: clamp(1.25rem, 0.5rem + 3vw, 5rem);
	--container-max: 1280px;

	/* Motion */
	--ease-out: cubic-bezier(0.19, 1, 0.22, 1);
	--ease-in: cubic-bezier(0.6, 0.04, 0.98, 0.34);
	--ease-inout: cubic-bezier(0.83, 0, 0.17, 1);
	--dur-micro: 160ms;
	--dur-short: 340ms;
	--dur-default: 520ms;
	--dur-scene: 900ms;
	--stagger: 70ms;
}

/* ---------- Shared layout ---------- */
.container {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sp-margin);
	padding-right: var(--sp-margin);
}
.container-narrow { max-width: 72ch; }

.section {
	padding: var(--sp-section) var(--sp-margin);
}

/* ---------- Typography helpers ---------- */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Fraunces', Georgia, serif;
}
h1, .hero-headline {
	line-height: 1.03;
	letter-spacing: -0.02em;
}
h2, h3 {
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.eyebrow {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}
.eyebrow-accent { color: var(--accent); }
.eyebrow-display { color: var(--accent-display); }

.body-lg {
	font-family: 'DM Sans', Arial, sans-serif;
	font-weight: 300;
	font-size: var(--fs-body-lg);
	line-height: 1.5;
	max-width: 62ch;
}

/* ---------- Buttons & links ---------- */
.btn {
	display: inline-block;
	font-family: 'DM Sans', Arial, sans-serif;
	font-weight: 500;
	font-size: var(--fs-body);
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition: background var(--dur-micro) ease, color var(--dur-micro) ease, border-color var(--dur-micro) ease;
}
.btn-primary {
	background: var(--ink);
	color: var(--paper);
	padding: 1rem 2rem;
}
.btn-primary:hover {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--ink);
}
.btn-nav-cta {
	background: var(--ink);
	color: var(--paper);
	padding: 0.75rem 1.5rem;
}
.btn-nav-cta:hover {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--ink);
}

.link-secondary {
	font-family: 'DM Sans', Arial, sans-serif;
	font-weight: 500;
	font-size: var(--fs-body);
	color: var(--accent);
	text-decoration: none;
	border-bottom: 0.5px solid var(--accent);
	transition: opacity var(--dur-micro) ease;
}
.link-secondary:hover { opacity: 0.7; }

/* ---------- Focus states (accessibility) ---------- */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ============ SECTION 1: NAVIGATION ============ */
.nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 72px;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	z-index: 100;
}
.nav-inner {
	max-width: var(--container-max);
	height: 100%;
	margin: 0 auto;
	padding: 0 var(--sp-margin);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.nav-brand {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--ink);
	letter-spacing: -0.01em;
	text-decoration: none;
}
.nav-links {
	display: flex;
	gap: var(--sp-4);
}
.nav-links a {
	font-family: 'DM Sans', Arial, sans-serif;
	font-weight: 500;
	font-size: var(--fs-body);
	color: var(--ink);
	text-decoration: none;
	transition: color var(--dur-micro) ease;
}
.nav-links a:hover { color: var(--ink-soft); }
.nav-actions {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

/* Hamburger */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 24px;
	height: 24px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
}
.nav-toggle span {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--ink);
	margin: 0 auto;
}

/* Mobile overlay */
.nav-overlay {
	position: fixed;
	inset: 0;
	background: var(--paper);
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nav-overlay[hidden] { display: none; }
.nav-overlay-links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-4);
}
.nav-overlay-links a {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: var(--fs-h4);
	color: var(--ink);
	text-decoration: none;
	opacity: 0;
	transform: translateY(12px);
}
.nav-overlay.open .nav-overlay-links a {
	animation: fadeUp var(--dur-short) var(--ease-out) forwards;
}
.nav-overlay.open .nav-overlay-links a:nth-child(1) { animation-delay: 0ms; }
.nav-overlay.open .nav-overlay-links a:nth-child(2) { animation-delay: 70ms; }
.nav-overlay.open .nav-overlay-links a:nth-child(3) { animation-delay: 140ms; }
.nav-overlay.open .nav-overlay-links a:nth-child(4) { animation-delay: 210ms; }
.nav-overlay.open .nav-overlay-links a:nth-child(5) { animation-delay: 280ms; }

.nav-close {
	position: absolute;
	top: var(--sp-margin);
	right: var(--sp-margin);
	width: 32px;
	height: 32px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nav-close span {
	position: absolute;
	width: 22px;
	height: 2px;
	background: var(--ink);
}
.nav-close span:first-child { transform: rotate(45deg); }
.nav-close span:last-child { transform: rotate(-45deg); }

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ============ SECTION 2: HERO ============ */
.hero {
	background: var(--paper);
	background-image:
		linear-gradient(to right, rgba(23, 28, 38, 0.03) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(23, 28, 38, 0.03) 1px, transparent 1px);
	background-size: 48px 48px;
	min-height: 100svh;
	padding-top: 72px;
	display: flex;
	flex-direction: column;
}
.hero-content {
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding: 4rem var(--sp-margin) 0;
}
.hero-eyebrow {
	color: var(--accent);
}
.hero-headline {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 700;
	font-size: var(--fs-display);
	color: var(--ink);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin-top: 1.5rem;
}
.hero-sub {
	font-family: 'DM Sans', Arial, sans-serif;
	font-weight: 300;
	font-size: var(--fs-body-lg);
	color: var(--ink-soft);
	line-height: 1.5;
	max-width: 44ch;
	margin-top: 2rem;
}
.hero-ctas {
	display: flex;
	flex-direction: row;
	gap: 1.5rem;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 2.5rem;
}
.hero-stack {
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	padding: 4rem var(--sp-margin) 3rem;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.hero-stack-row {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.stack-bar {
	display: block;
	height: 10px;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}
.stack-bar-top {
	width: calc(min(520px, 70vw) * 0.4);
	background: rgba(31, 58, 95, 0.55);
	--sweep-travel: calc((min(520px, 70vw) * 0.4) - 6px);
	--sweep-dur: 4.8s;
}
.stack-bar-top .bar-pulse { animation-delay: 1s; }
.stack-bar-mid {
	width: calc(min(520px, 70vw) * 0.65);
	background: rgba(31, 58, 95, 0.75);
	--sweep-travel: calc((min(520px, 70vw) * 0.65) - 6px);
	--sweep-dur: 3.6s;
}
.stack-bar-mid .bar-pulse { animation-delay: .5s; }
.stack-bar-bot {
	width: min(520px, 70vw);
	background: var(--accent);
	--sweep-travel: calc(min(520px, 70vw) - 6px);
	--sweep-dur: 2.6s;
}

.bar-pulse {
	position: absolute;
	left: 0; top: 0;
	width: 6px; height: 100%;
	background: var(--paper);
	opacity: .85;
	animation: bar-sweep var(--sweep-dur, 3s) cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes bar-sweep {
	0%   { transform: translateX(0); opacity: 0; }
	8%   { opacity: .85; }
	92%  { transform: translateX(var(--sweep-travel)); opacity: .85; }
	100% { transform: translateX(var(--sweep-travel)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.bar-pulse { animation: none; opacity: 0; }
}
.stack-label {
	font-family: 'DM Sans', Arial, sans-serif;
	font-weight: 500;
	font-size: var(--fs-body);
	color: var(--ink-soft);
	white-space: nowrap;
}
.stack-num {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	color: var(--accent);
}
.stack-name {
	font-family: 'DM Sans', Arial, sans-serif;
	font-weight: 500;
	color: var(--ink-soft);
}

/* ============ SECTION 3: THE PROBLEM ============ */
.problem {
	background: var(--paper);
	border-top: 1px solid var(--line);
}
.problem .container { max-width: 72ch; }
.problem h2 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: var(--fs-h2);
	color: var(--ink);
	margin-top: var(--sp-3);
}
.problem .body-lg {
	color: var(--ink);
	margin-top: var(--sp-4);
}

/* ============ SECTION 4: THE FRAMEWORK ============ */
.framework {
	background: var(--paper);
	border-top: 1px solid var(--line);
}
.framework .eyebrow { color: var(--accent); }
.framework-heading {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: var(--fs-h2);
	color: var(--ink);
	margin-top: 1rem;
}
.stack-bands {
	margin-top: var(--sp-6);
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.band-group {
	display: flex;
	flex-direction: column;
}
.band-deco {
	display: block;
	height: 10px;
	background: var(--accent);
}
.accent-bar {
	transform-origin: left center;
}
.band-deco-1 { width: 100%; }
.band-deco-2 { width: 65%; }
.band-deco-3 { width: 40%; }
.band {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 32px;
	padding: 2rem;
	background: var(--paper);
	border: 1px solid var(--line);
	border-top: none;
}
.band-text {
	flex: 1 1 auto;
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	min-width: 0;
}
.band-num {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	font-size: var(--fs-h4);
	color: var(--accent);
	flex-shrink: 0;
}
.band-body { min-width: 0; }
.diagram { flex: 0 0 240px; }
.diagram svg { width:100%; height:auto; display:block; overflow:visible; }
.dcap { font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:8px; }
.node { fill:var(--paper); stroke:var(--ink-soft); stroke-width:1.4; }
.wire { stroke:var(--line); stroke-width:1.4; }
.dot  { fill:var(--accent); }

@keyframes tools-run {
  0% { transform:translateX(0); opacity:0; }
  8% { opacity:1; }
  88% { transform:translateX(186px); opacity:1; }
  100% { transform:translateX(186px); opacity:0; }
}
.tools-dot { animation: tools-run 2.6s cubic-bezier(.45,.05,.55,.95) infinite; }

@keyframes auto-run {
  0% { transform:translate(0,0); opacity:0; }
  6% { opacity:1; }
  36% { transform:translate(84px,0); }
  48% { transform:translate(84px,0); }
  86% { transform:translate(186px,0); opacity:1; }
  100% { transform:translate(186px,0); opacity:0; }
}
.auto-dot { animation: auto-run 3.4s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes auto-branch {
  0%, 46% { transform:translate(0,0); opacity:0; }
  50% { opacity:1; }
  72% { transform:translate(0,22px); opacity:1; }
  80%, 100% { transform:translate(0,22px); opacity:0; }
}
.auto-branch-dot { animation: auto-branch 6.8s cubic-bezier(.45,.05,.55,.95) infinite; }

@keyframes ag-a { from { transform:translate(0,0); } to { transform:translate(128px,34px); } }
@keyframes ag-b { from { transform:translate(0,0); } to { transform:translate(-28px,42px); } }
@keyframes ag-c { from { transform:translate(0,0); } to { transform:translate(-44px,32px); } }
.ag1 { animation: ag-a 2.2s cubic-bezier(.45,.05,.55,.95) infinite alternate; }
.ag2 { animation: ag-b 2.9s cubic-bezier(.45,.05,.55,.95) infinite alternate; animation-delay:.4s; }
.ag3 { animation: ag-c 3.5s cubic-bezier(.45,.05,.55,.95) infinite alternate; animation-delay:.9s; }

@media (max-width: 760px) {
	.band { flex-direction: column; align-items: stretch; gap: 1.5rem; }
	.diagram { flex: 0 0 auto; width: min(240px, 80%); }
}

@media (prefers-reduced-motion: reduce) {
  .tools-dot, .auto-dot, .auto-branch-dot, .ag1, .ag2, .ag3 { animation:none; opacity:1; }
  .auto-branch-dot { opacity:0; }
}
.band-label {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: var(--fs-h4);
	color: var(--ink);
	line-height: 1.1;
}
.band-line {
	font-family: 'DM Sans', Arial, sans-serif;
	font-weight: 400;
	font-size: var(--fs-body);
	color: var(--ink-soft);
	line-height: 1.5;
	margin-top: 0.25rem;
}
.framework-foot {
	font-family: 'DM Sans', Arial, sans-serif;
	font-weight: 400;
	font-size: var(--fs-body-lg);
	color: var(--ink);
	margin-top: var(--sp-5);
	line-height: 1.5;
	max-width: 62ch;
}

/* ============ SECTION 5: THREE WAYS IN ============ */
.ways { background: var(--paper); }
.ways h2 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: var(--fs-h2);
	color: var(--ink);
	margin-top: var(--sp-3);
}
.ways-subline {
	font-family: 'DM Sans', Arial, sans-serif;
	font-weight: 400;
	font-size: var(--fs-body);
	color: var(--ink-soft);
	margin-top: 0.5rem;
}
.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}
.card {
	padding: var(--sp-4);
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--paper);
	display: flex;
	flex-direction: column;
	transition: border-color var(--dur-micro) ease;
}
.card:hover { border-color: var(--accent); }
.card-entry { border-top: 2px solid var(--accent); }
.card-readout {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	font-size: var(--fs-caption);
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.card-title {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: var(--fs-h3);
	color: var(--ink);
	margin-top: 0.75rem;
	line-height: 1.12;
}
.card-body {
	font-family: 'DM Sans', Arial, sans-serif;
	font-weight: 400;
	font-size: var(--fs-body);
	color: var(--ink);
	line-height: 1.7;
	margin-top: 0.75rem;
}
.card-proof {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	font-size: var(--fs-caption);
	color: var(--accent-display);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.5;
	margin-top: var(--sp-3);
}
.card-cta {
	font-family: 'DM Sans', Arial, sans-serif;
	font-weight: 500;
	font-size: var(--fs-body);
	color: var(--accent-link);
	text-decoration: none;
	margin-top: 1rem;
}

/* ============ SECTION 6: WHY PRINCIPIA ============ */
.why { background: var(--paper-warm); }
.why h2 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: var(--fs-h2);
	color: var(--ink);
	margin-top: var(--sp-3);
}
.why-list {
	list-style: none;
	max-width: 62ch;
	margin-top: var(--sp-6);
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}
.why-num {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	font-size: var(--fs-h4);
	color: var(--accent-display);
	display: block;
}
.why-sub {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: var(--fs-h4);
	color: var(--ink);
	margin-top: 0.5rem;
	line-height: 1.12;
}
.why-body {
	font-family: 'DM Sans', Arial, sans-serif;
	font-weight: 400;
	font-size: var(--fs-body);
	color: var(--ink);
	line-height: 1.7;
	margin-top: 0.5rem;
}

/* ============ SECTION 7: FINAL CTA ============ */
.final-cta {
	background: var(--ink);
	padding: var(--sp-6) var(--sp-margin);
}
.final-cta .container { text-align: center; }
.final-cta-heading {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: var(--fs-h2);
	color: var(--paper);
	text-align: center;
	max-width: 20ch;
	margin: 0 auto;
	line-height: 1.12;
}
.final-cta-row {
	display: flex;
	flex-direction: row;
	gap: 1.5rem;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin-top: var(--sp-4);
}
.final-cta .btn-primary {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}
.final-cta .btn-primary:hover {
	background: transparent;
	color: var(--paper);
	border-color: var(--paper);
}
.final-cta .link-secondary {
	color: var(--paper);
	border-bottom-color: var(--paper);
}
.final-cta a:focus-visible,
.final-cta button:focus-visible {
	outline-color: var(--paper);
}

/* ============ SECTION 8: FOOTER ============ */
.footer {
	background: var(--ink);
	border-top: 1px solid var(--line-on-ink);
	padding: var(--sp-5) var(--sp-margin);
}
.footer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-5);
}
.footer-brand {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: var(--fs-body);
	color: var(--paper);
}
.footer-loc {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	font-size: var(--fs-caption);
	color: var(--paper-soft);
	margin-top: 0.5rem;
}
.footer-mail {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	font-size: var(--fs-caption);
	color: var(--paper);
	text-decoration: none;
	margin-top: 0.5rem;
	display: inline-block;
}
.footer-links {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	align-items: flex-end;
}
.footer-links a {
	font-family: 'DM Sans', Arial, sans-serif;
	font-weight: 400;
	font-size: var(--fs-body);
	color: var(--paper-soft);
	text-decoration: none;
	transition: color var(--dur-micro) ease;
}
.footer-links a:hover { color: var(--paper); }
.footer-bottom {
	margin-top: var(--sp-4);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--line-on-ink);
}
.footer-small {
	font-family: 'DM Sans', Arial, sans-serif;
	font-weight: 400;
	font-size: var(--fs-caption);
	color: var(--paper-soft);
}
.footer a:focus-visible,
.footer button:focus-visible {
	outline-color: var(--paper);
}

/* ============ REVEAL ANIMATIONS (GSAP-driven; no CSS hiding) ============ */

/* ============ RESPONSIVE ============ */
@media (max-width: 1023px) {
	.nav-links { display: none; }
	.nav-toggle { display: flex; }
	.cards { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	.nav { height: 56px; }
	.hero-ctas { flex-direction: column; align-items: flex-start; gap: 1rem; }
	.band { padding: 1.5rem; }
	.final-cta-row { flex-direction: column; gap: 1rem; }
	.footer-grid { grid-template-columns: 1fr; }
	.footer-links { align-items: flex-start; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.nav-overlay.open .nav-overlay-links a {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}