/* ==========================================================================
   Corticium Sdn. Bhd. — site stylesheet
   --------------------------------------------------------------------------
   Plain CSS, no build step. The identity is "Closing the arc": the logo's
   open ring closing is recovery. Loud moments, in order: the orange field
   carrying "No Collect — No Fee", the hero's draw-on ring, the footer
   wordmark. Everything else stays quiet (see CLAUDE.md for the rules).
   ========================================================================== */

/* ---------- Fonts: self-hosted, no external request ---------- */
@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-var.woff2') format('woff2');
	font-weight: 400 700;
	font-stretch: 62.5% 125%;
	font-display: swap;
}
@font-face {
	font-family: 'SourceSerif';
	src: url('../fonts/source-serif-var.woff2') format('woff2');
	font-weight: 400 600;
	font-display: swap;
}

/* ==========================================================================
   TOKENS
   --signal is the orange field; --accent is small marks. They need different
   values to survive dark mode, so they are separate tokens.
   ========================================================================== */
:root {
	--ground:      #F3F3EF;
	--surface:     #FFFFFF;
	--ink:         #12171B;
	--ink-2:       #4E585F;
	--ink-3:       #79848B;
	--rule:        #D9D8D0;
	--rule-strong: #B5B4AA;
	--deep:        #132430;
	--deep-ink:    #E8EDF0;
	--deep-ink-2:  #94A5B1;
	--deep-rule:   #2C3F4E;
	--accent:      #E8871B;
	--accent-text: #9A5B06;
	--signal:      #E8871B;
	--signal-ink:  #17110A;
	--signal-ink-2:#4A3410;
	--ok-bg:       #E7F1E9;
	--ok-rule:     #3F7D53;
	--ok-ink:      #1F4A2C;
	--bad-bg:      #FBEAEA;
	--bad-rule:    #A63D3D;
	--bad-ink:     #7A2020;
	--ledger:      rgba(19, 23, 27, 0.055);

	/* One modular scale, ratio 1.25. No local guesses anywhere. */
	--t-2:  0.6875rem;
	--t-1:  0.8125rem;
	--t0:   1.0625rem;
	--t1:   clamp(1.125rem,  1.02rem + 0.45vw, 1.3125rem);
	--t2:   clamp(1.3125rem, 1.14rem + 0.8vw,  1.625rem);
	--t3:   clamp(1.5rem,    1.19rem + 1.5vw,  2.0625rem);
	--t4:   clamp(1.875rem,  1.35rem + 2.5vw,  2.5625rem);
	--t5:   clamp(2.25rem,   1.4rem + 4vw,     3.1875rem);
	--t6:   clamp(2.75rem,   1.3rem + 6.6vw,   4.75rem);

	--measure: 62ch;
	--gut: clamp(1.25rem, 4vw, 3.5rem);
	--maxw: 1180px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--ground:      #0E1519;
		--surface:     #131C22;
		--ink:         #E7EDF0;
		--ink-2:       #A6B2BA;
		--ink-3:       #78868F;
		--rule:        #26343C;
		--rule-strong: #3A4C57;
		--deep:        #070E12;
		--deep-ink:    #E7EDF0;
		--deep-ink-2:  #94A5B1;
		--deep-rule:   #22333D;
		--accent:      #F5A33C;
		--accent-text: #F5A33C;
		--signal:      #C9741A;
		--signal-ink:  #100C06;
		--signal-ink-2:#3B2A0D;
		--ok-bg:       #12241A;
		--ok-rule:     #4E9367;
		--ok-ink:      #A8D5B8;
		--bad-bg:      #2A1414;
		--bad-rule:    #C05C5C;
		--bad-ink:     #F0B4B4;
		--ledger:      rgba(231, 237, 240, 0.05);
	}
}
:root[data-theme="dark"] {
	--ground:      #0E1519;
	--surface:     #131C22;
	--ink:         #E7EDF0;
	--ink-2:       #A6B2BA;
	--ink-3:       #78868F;
	--rule:        #26343C;
	--rule-strong: #3A4C57;
	--deep:        #070E12;
	--deep-ink:    #E7EDF0;
	--deep-ink-2:  #94A5B1;
	--deep-rule:   #22333D;
	--accent:      #F5A33C;
	--accent-text: #F5A33C;
	--signal:      #C9741A;
	--signal-ink:  #100C06;
	--signal-ink-2:#3B2A0D;
	--ok-bg:       #12241A;
	--ok-rule:     #4E9367;
	--ok-ink:      #A8D5B8;
	--bad-bg:      #2A1414;
	--bad-rule:    #C05C5C;
	--bad-ink:     #F0B4B4;
	--ledger:      rgba(231, 237, 240, 0.05);
}
:root[data-theme="light"] {
	--ground:      #F3F3EF;
	--surface:     #FFFFFF;
	--ink:         #12171B;
	--ink-2:       #4E585F;
	--ink-3:       #79848B;
	--rule:        #D9D8D0;
	--rule-strong: #B5B4AA;
	--deep:        #132430;
	--deep-ink:    #E8EDF0;
	--deep-ink-2:  #94A5B1;
	--deep-rule:   #2C3F4E;
	--accent:      #E8871B;
	--accent-text: #9A5B06;
	--signal:      #E8871B;
	--signal-ink:  #17110A;
	--signal-ink-2:#4A3410;
	--ok-bg:       #E7F1E9;
	--ok-rule:     #3F7D53;
	--ok-ink:      #1F4A2C;
	--bad-bg:      #FBEAEA;
	--bad-rule:    #A63D3D;
	--bad-ink:     #7A2020;
	--ledger:      rgba(19, 23, 27, 0.055);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: 'SourceSerif', Georgia, 'Times New Roman', serif;
	font-size: var(--t0);
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3 {
	font-family: 'Archivo', 'Segoe UI', system-ui, sans-serif;
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.05;
	text-wrap: balance;
	margin: 0;
}
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink);
	color: var(--ground);
	padding: 0.7rem 1.1rem;
	z-index: 50;
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: var(--t-1);
	text-decoration: none;
}
.skip:focus { left: 0; }

.wrap {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gut);
}

/* Sections separate by space. Rules survive only where they divide real
   records — the services list and the credentials grid. */
.band { padding-block: clamp(4rem, 9vw, 7.5rem); }

/* Surface bands carry faint ledger ruling — the visual language of accounts,
   kept near-subliminal so it reads as paper stock, not as a grid. */
.band--surface {
	background-color: var(--surface);
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent calc(2.4rem - 1px),
		var(--ledger) calc(2.4rem - 1px),
		var(--ledger) 2.4rem
	);
}

.head { max-width: 34rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head h2 { font-size: var(--t3); max-width: 20ch; margin-bottom: 1rem; }
.lede { font-size: var(--t1); line-height: 1.55; color: var(--ink-2); max-width: var(--measure); }

.eyebrow {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: var(--t-2);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 1.1rem;
}

/* ==========================================================================
   MASTHEAD + NAVIGATION
   Links are visible by default and collapsed by JS, so the menu still works
   with scripting unavailable.
   ========================================================================== */
.masthead { border-bottom: 1px solid var(--rule); }
.masthead__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	padding-block: 1.15rem;
}
/* The masthead carries two logo files, one per theme, toggled below. The
   data-theme rules outrank the media query so a manual override always wins. */
.mark {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	margin-right: auto;
}
.mark img { display: block; height: clamp(3.5rem, 7vw, 4.75rem); width: auto; }
.mark img.mark__dark { display: none; }
@media (prefers-color-scheme: dark) {
	.mark img.mark__light { display: none; }
	.mark img.mark__dark { display: block; }
}
:root[data-theme="light"] .mark img.mark__light { display: block; }
:root[data-theme="light"] .mark img.mark__dark { display: none; }
:root[data-theme="dark"] .mark img.mark__light { display: none; }
:root[data-theme="dark"] .mark img.mark__dark { display: block; }

.nav {
	display: flex;
	gap: clamp(1rem, 2.4vw, 2.1rem);
	align-items: center;
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: var(--t-1);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.nav a {
	text-decoration: none;
	color: var(--ink-2);
	padding-block: 0.3rem;
	border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.nav__tel {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: var(--t-1);
	color: var(--ink);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}
.nav__tel:hover { color: var(--accent-text); }

.nav__toggle {
	display: none;
	cursor: pointer;
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: var(--t-2);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink);
	background: transparent;
	border: 1px solid var(--rule-strong);
	padding: 0.55rem 0.9rem;
}
.nav__toggle:hover { border-color: var(--ink); }

@media (max-width: 52rem) {
	.nav__toggle { display: inline-block; }
	.nav {
		order: 10;
		flex-basis: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		border-top: 1px solid var(--rule);
		padding-top: 0.5rem;
	}
	.nav a { padding-block: 0.7rem; width: 100%; border-bottom: 1px solid var(--rule); }
	.nav a:last-child { border-bottom: 0; }
	.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--rule); color: var(--ink); }
	/* set by nav.js once it runs; without JS the links simply stay open */
	[data-nav="closed"] .nav { display: none; }
}

/* ==========================================================================
   HERO — homepage
   ========================================================================== */
.hero {
	position: relative;
	padding-block: clamp(4rem, 11vw, 8.5rem) clamp(3.5rem, 8vw, 6rem);
}
/* Positioned so the ghosted ring (an absolutely-positioned earlier sibling)
   paints beneath the text in DOM order. */
.hero > * { position: relative; }
.hero h1 {
	font-size: var(--t6);
	font-stretch: 125%;
	letter-spacing: -0.01em;
	max-width: 15ch;
	margin-bottom: 1.75rem;
}

/* The ghosted ring: the mark at architectural scale, cropped by the right
   edge. Draws itself closed on load — the site's one load-time gesture. */
.hero__ring {
	display: none;
	position: absolute;
	top: 50%;
	right: calc(-1 * clamp(6rem, 10vw, 10rem));
	width: min(46vw, 42rem);
	height: auto;
	transform: translateY(-50%);
	color: var(--accent);
	opacity: 0.14;
	pointer-events: none;
}
@media (min-width: 62rem) { .hero__ring { display: block; } }
.hero__ring circle {
	animation: ring-close 1.3s cubic-bezier(0.3, 0, 0.2, 1) 0.2s backwards;
}
@keyframes ring-close {
	from { stroke-dasharray: 0 329.87; }
	to   { stroke-dasharray: 266.65 63.22; }
}

/* Load stagger: content rises in reading order. fill-mode backwards means
   the resting state is the final state — reduced-motion just sees the page. */
@keyframes rise {
	from { opacity: 0; transform: translateY(14px); }
}
.hero > :not(.hero__ring),
.page-hero > * {
	animation: rise 0.65s cubic-bezier(0.25, 0.6, 0.3, 1) backwards;
}
.hero > :nth-child(3), .page-hero > :nth-child(2) { animation-delay: 0.09s; }
.hero > :nth-child(4), .page-hero > :nth-child(3) { animation-delay: 0.18s; }
.hero > :nth-child(5), .page-hero > :nth-child(4) { animation-delay: 0.27s; }
.hero__lede { font-size: var(--t2); line-height: 1.42; color: var(--ink-2); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }
.hero__meta {
	margin-top: 2.75rem;
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: var(--t-1);
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}
.hero__meta--link { margin-top: 0.6rem; }
.hero__meta a { color: var(--accent-text); text-underline-offset: 3px; }

/* ---------- inner-page hero: same language, less air ---------- */
.page-hero {
	padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.25rem, 5vw, 3.5rem);
	border-bottom: 1px solid var(--rule);
}
.page-hero h1 {
	font-size: var(--t5);
	font-stretch: 125%;
	letter-spacing: -0.01em;
	max-width: 16ch;
	margin-bottom: 1.25rem;
}
.page-hero .lede { font-size: var(--t2); line-height: 1.45; max-width: 46ch; }

.btn {
	display: inline-block;
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: var(--t-1);
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.9rem 1.6rem;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--ground);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { border-color: var(--ink); }

/* ==========================================================================
   THE SIGNATURE — full-bleed orange field
   Orange and near-black are the only two colours in the Corticium mark, so
   this is the brand at full volume rather than decoration.
   ========================================================================== */
.deal {
	background: var(--signal);
	color: var(--signal-ink);
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
}
.deal__inner { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
@media (min-width: 62rem) { .deal__inner { grid-template-columns: 1.15fr 1fr; align-items: end; } }
.deal h2 {
	font-size: var(--t6);
	font-stretch: 125%;
	line-height: 0.94;
	letter-spacing: -0.015em;
	max-width: 11ch;
	color: var(--signal-ink);
}
.deal p { font-size: var(--t1); line-height: 1.5; color: var(--signal-ink-2); max-width: 46ch; }
.deal p + p { margin-top: 0.9rem; }
.deal strong { color: var(--signal-ink); font-weight: 600; }
.deal--compact { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.deal--compact h2 { font-size: var(--t4); }

/* ==========================================================================
   CONTENT BLOCKS
   ========================================================================== */
.pillars { display: grid; gap: clamp(2.25rem, 4vw, 3.25rem); }
@media (min-width: 56rem) { .pillars { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); } }
.pillar h3 { font-size: var(--t1); margin-bottom: 0.75rem; }
.pillar p { color: var(--ink-2); }

/* long-form prose — About page */
.prose { max-width: var(--measure); display: grid; gap: 1.15rem; }
.prose p { color: var(--ink-2); }
.prose h3 { font-size: var(--t2); margin-top: 1.5rem; }
.prose h3:first-child { margin-top: 0; }
.prose ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.prose li { color: var(--ink-2); }
.prose li::marker { color: var(--accent); }
.prose blockquote {
	margin: 0.5rem 0;
	padding-left: 1.4rem;
	border-left: 3px solid var(--accent);
	font-size: var(--t2);
	line-height: 1.4;
	color: var(--ink);
}

/* Small utilities, so no page needs an inline style attribute — that is what
   lets the Content-Security-Policy drop 'unsafe-inline' for styles. */
.u-mt { margin-top: 2rem; }
.split__h { font-size: var(--t3); max-width: 20ch; margin-bottom: 1rem; }

/* two-column split for statement sections */
.split { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); } }

/* ==========================================================================
   THE RECOVERY PATH — four stages that genuinely escalate, so they carry
   numbers; the two standing services sit apart, unnumbered.
   ========================================================================== */
.path { border-top: 1px solid var(--rule-strong); }
.path__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.4rem 3rem;
	padding: 1.9rem 0;
	border-bottom: 1px solid var(--rule);
}
@media (min-width: 56rem) {
	.path__row { grid-template-columns: 6.5rem 16rem 1fr; align-items: start; }
}
.path__num {
	font-family: 'Archivo', system-ui, sans-serif;
	font-stretch: 125%;
	font-weight: 700;
	font-size: var(--t3);
	line-height: 1;
	color: var(--accent-text);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}
.path__row h3 { font-size: var(--t1); padding-top: 0.3rem; }
.path__row p { color: var(--ink-2); max-width: var(--measure); }
.path__row p + p { margin-top: 0.7rem; }
@media (min-width: 56rem) { .path__row > p, .path__row > div { padding-top: 0.3rem; } }

.aside-svc { margin-top: 3rem; }
.aside-svc__h {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: var(--t-2);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 1.5rem;
}
.aside-svc__grid { display: grid; gap: 2rem 2.5rem; }
@media (min-width: 56rem) { .aside-svc__grid { grid-template-columns: 1fr 1fr; } }
.aside-svc__grid h4 {
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 700;
	font-size: var(--t1);
	letter-spacing: -0.022em;
	line-height: 1.2;
	margin: 0 0 0.6rem;
}
.aside-svc__grid p { color: var(--ink-2); max-width: var(--measure); }
.aside-svc__grid p + p { margin-top: 0.7rem; }

/* sectors */
.sectors { display: grid; gap: 2rem 2.5rem; }
@media (min-width: 40rem) { .sectors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .sectors { grid-template-columns: repeat(4, 1fr); } }
.sector h3 {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: var(--t0);
	font-weight: 600;
	margin-bottom: 0.4rem;
	padding-top: 0.9rem;
	border-top: 2px solid var(--accent);
}
.sector p { font-size: var(--t-1); color: var(--ink-3); line-height: 1.5; }

/* ==========================================================================
   STANDING
   ========================================================================== */
.creds { background: var(--deep); color: var(--deep-ink); padding-block: clamp(4rem, 9vw, 7rem); }
.creds .eyebrow { color: var(--deep-ink-2); }
.creds h2 { font-size: var(--t3); color: var(--deep-ink); margin-bottom: 1rem; max-width: 22ch; }
.creds__lede { font-size: var(--t1); color: var(--deep-ink-2); max-width: 52ch; line-height: 1.55; }
.creds__grid { margin-top: clamp(2.5rem, 5vw, 3.75rem); display: grid; gap: 1.75rem 2.5rem; }
@media (min-width: 44rem) { .creds__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .creds__grid { grid-template-columns: repeat(3, 1fr); } }
/* Homepage variant: four records make one ledger row at width, echoing the
   4-up sectors above — never the 3-col layout that would orphan the fourth. */
@media (min-width: 44rem) { .creds__grid--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .creds__grid--four { grid-template-columns: repeat(4, 1fr); } }

.creds__verify { margin-top: 2rem; font-size: var(--t-1); color: var(--deep-ink-2); }
.creds__verify a { color: var(--deep-ink); text-underline-offset: 3px; }

.cred { padding-top: 0.9rem; border-top: 1px solid var(--deep-rule); }
.cred__k {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: var(--t-2);
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--deep-ink-2);
	margin-bottom: 0.5rem;
}
.cred__v {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: var(--t0);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--deep-ink);
}
.cred__v em {
	font-style: normal;
	display: block;
	font-family: 'SourceSerif', Georgia, serif;
	font-weight: 400;
	font-size: var(--t-1);
	color: var(--deep-ink-2);
	margin-top: 0.3rem;
}

/* ==========================================================================
   CONTACT + FORM
   ========================================================================== */
.contact { padding-block: clamp(4rem, 9vw, 7rem); }
.contact__grid { display: grid; gap: 3rem; }
@media (min-width: 56rem) { .contact__grid { grid-template-columns: 1.45fr 1fr; gap: 4.5rem; } }
.contact h2 { font-size: var(--t3); margin-bottom: 1rem; max-width: 16ch; }

.notice {
	padding: 1rem 1.15rem;
	margin-bottom: 2rem;
	border-left: 3px solid;
	font-size: var(--t0);
	max-width: var(--measure);
}
.notice h2 { font-size: var(--t1); margin-bottom: 0.35rem; max-width: none; }
.notice--ok  { background: var(--ok-bg);  border-color: var(--ok-rule);  color: var(--ok-ink); }
.notice--bad { background: var(--bad-bg); border-color: var(--bad-rule); color: var(--bad-ink); }
.notice--ok h2  { color: var(--ok-ink); }
.notice--bad h2 { color: var(--bad-ink); }

.form { display: grid; gap: 1.15rem; margin-top: 2.25rem; }
.field { display: grid; gap: 0.4rem; }
.field label {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: var(--t-2);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.field label .opt { text-transform: none; letter-spacing: 0.02em; font-weight: 400; color: var(--ink-3); }
.field input,
.field select,
.field textarea {
	font-family: 'SourceSerif', Georgia, serif;
	font-size: var(--t0);
	line-height: 1.5;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--rule-strong);
	padding: 0.7rem 0.8rem;
	width: 100%;
	transition: border-color .15s ease;
}
.field select {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: var(--t0);
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%234E585F' stroke-width='1.6'/%3E%3C/svg%3E");
	background-position: right 0.85rem center;
	background-size: 0.7rem auto;
	background-repeat: no-repeat;
	padding-right: 2.4rem;
}
.field textarea { resize: vertical; min-height: 8.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.form__row { display: grid; gap: 1.15rem; }
@media (min-width: 34rem) { .form__row { grid-template-columns: 1fr 1fr; } }

/* Honeypot: off-screen rather than display:none, which bots detect. */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form__submit { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.35rem; }
.form__note { font-size: var(--t-1); color: var(--ink-3); max-width: 40ch; }
button.btn { cursor: pointer; }

.addr { font-style: normal; display: grid; gap: 0.9rem; }
.addr__row { display: grid; gap: 0.15rem; }
.addr__k {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: var(--t-2);
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.addr__v { font-variant-numeric: tabular-nums; }
.addr__v a { color: var(--accent-text); text-underline-offset: 3px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot { padding-block: 2rem 3rem; font-size: var(--t-1); color: var(--ink-3); border-top: 1px solid var(--rule); }
.foot__inner { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; justify-content: space-between; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.foot a { color: var(--ink-3); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot__reg { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   404
   ========================================================================== */
.notfound { padding-block: clamp(5rem, 14vw, 10rem); }
.notfound h1 { font-size: var(--t5); max-width: 18ch; margin-bottom: 1.25rem; }
.notfound .lede { margin-bottom: 2rem; }

/* ==========================================================================
   SCROLL REVEAL
   reveal.js adds .has-reveal to <html> (so nothing is ever hidden without
   JS) and .in-view per block as it enters the viewport. The whole thing
   lives behind the motion preference.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.has-reveal .head,
	.has-reveal .deal__inner,
	.has-reveal .pillars,
	.has-reveal .path,
	.has-reveal .aside-svc,
	.has-reveal .sectors,
	.has-reveal .creds__grid,
	.has-reveal .split {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.55s ease-out, transform 0.55s ease-out;
	}
	.has-reveal .in-view { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}