/* ==========================================================================
   FORGE — Kihlberg Media homepage direction.
   Material, tactile, built. Technical drawing, not builder's merchant.
   Everything is scoped to body.km-dir-forge. No JS, no external requests.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

html:has(body.km-dir-forge) {
	background: #0a0b0c;
}

body.km-dir-forge {
	--fg-ground: #0a0b0c;
	--fg-plate: #101214;
	--fg-ink: #eeece7;
	--fg-ink-dim: #9ba2a6;
	/* 5.2:1 on --fg-ground. The quiet tone still has to clear AA, because it
	   carries the hero's scroll link and the footer's group headings. */
	--fg-ink-faint: #7f868b;
	--fg-line: rgba(206, 222, 231, .13);
	--fg-line-mid: rgba(206, 222, 231, .22);
	--fg-line-strong: rgba(206, 222, 231, .40);
	--fg-blue: #86a9bd;

	--fg-strip: 12px;
	--fg-strip-h: 100dvh;
	--fg-head: 76px;

	/* One type ramp. Every size on the page is drawn from here; nothing is clamped per
	   component. Labels never drop below 11px on a phone. */
	--fg-t-label: .7rem;
	--fg-t-label-strong: .74rem;
	--fg-t-body: clamp(.95rem, .3vw + .85rem, 1.02rem);
	--fg-t-lead: clamp(1rem, .4vw + .9rem, 1.12rem);
	--fg-t-h4: clamp(1.05rem, .6vw + .9rem, 1.3rem);
	--fg-t-h3: clamp(1.35rem, 1.2vw + 1rem, 1.85rem);
	--fg-t-h2: clamp(1.55rem, 2vw + 1rem, 2.7rem);
	--fg-t-display: clamp(1.85rem, 3.2vw + 1rem, 4.2rem);
	--fg-t-index: clamp(2.2rem, 2vw + 1.5rem, 3.2rem);
	/* The FAQ index column, shared by question and answer so they align exactly. */
	--fg-faq-indent: 2.2rem;

	--km-gutter: clamp(26px, 3.6vw, 72px);
	--km-shell: 1360px;

	background: var(--fg-ground);
	color: var(--fg-ink);
	font-family: var(--km-font-sans);
	-webkit-font-smoothing: antialiased;
}

body.km-dir-forge.admin-bar {
	--fg-strip-h: calc(100dvh - 32px);
}

@media (max-width: 782px) {
	body.km-dir-forge.admin-bar {
		--fg-strip-h: calc(100dvh - 46px);
	}
}

@media (min-width: 1000px) {
	body.km-dir-forge {
		--fg-strip: 18px;
	}
}

/* --------------------------------------------------------------------------
   2. Page shell
   -------------------------------------------------------------------------- */

body.km-dir-forge .kmf-home,
body.km-dir-forge .kmf-home-services,
body.km-dir-forge .kmf-home-project-grid,
body.km-dir-forge .kmf-home-faq,
body.km-dir-forge .kmf-home-process {
	background: var(--fg-ground);
	color: var(--fg-ink);
}

body.km-dir-forge .kmf-home .kmf-section {
	padding: clamp(72px, 9vw, 132px) 0;
	border-top: 0;
	scroll-margin-top: 78px;
}

body.km-dir-forge ::selection {
	background: var(--fg-ink);
	color: var(--fg-ground);
}

body.km-dir-forge :focus-visible {
	outline: 2px solid var(--fg-blue);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. Shared primitives
   -------------------------------------------------------------------------- */

body.km-dir-forge .kmf-eyebrow,
body.km-dir-forge .fg-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--fg-ink-dim);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-label);
	font-weight: 500;
	letter-spacing: .2em;
	line-height: 1.3;
	text-transform: uppercase;
}

body.km-dir-forge .fg-eyebrow__tick {
	display: block;
	width: 26px;
	height: 1px;
	flex: 0 0 26px;
	background: var(--fg-blue);
	transform-origin: left center;
}

/* Buttons: solid drafting-white block on the dark sheet. */
body.km-dir-forge .fg-button {
	min-height: 54px;
	padding: 0 26px;
	border: 1px solid var(--fg-ink);
	border-radius: 0;
	background: var(--fg-ink);
	color: var(--fg-ground);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-label-strong);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: background-color .22s ease, color .22s ease, letter-spacing .22s ease;
}

body.km-dir-forge .fg-button:hover,
body.km-dir-forge .fg-button:focus-visible {
	background: transparent;
	color: var(--fg-ink);
	letter-spacing: .17em;
}

body.km-dir-forge .fg-button .kmf-icon {
	width: 1em;
	height: 1em;
	transition: transform .22s ease;
}

body.km-dir-forge .fg-button:hover .kmf-icon {
	transform: translateX(4px);
}

/* Text link with a rule that grows out of it. */
body.km-dir-forge .fg-link {
	position: relative;
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	gap: 10px;
	color: var(--fg-ink);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-label-strong);
	letter-spacing: .14em;
	text-decoration: none;
	text-transform: uppercase;
}

body.km-dir-forge .fg-link::after {
	position: absolute;
	bottom: 12px;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--fg-line-strong);
	content: "";
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .3s ease;
}

body.km-dir-forge .fg-link:hover::after,
body.km-dir-forge .fg-link:focus-visible::after {
	background: var(--fg-ink);
	transform: scaleX(1);
}

body.km-dir-forge .fg-link .kmf-icon {
	width: 1em;
	height: 1em;
	transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}

body.km-dir-forge .fg-link:hover .kmf-icon,
body.km-dir-forge .fg-link:focus-visible .kmf-icon {
	transform: translateX(5px);
}

/* Section head: rule, label, sheet count. */
body.km-dir-forge .fg-head {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 16px;
	padding-top: 18px;
	margin-bottom: clamp(38px, 6vw, 72px);
}

body.km-dir-forge .fg-head__rule {
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: var(--fg-line-mid);
	transform-origin: left center;
}

body.km-dir-forge .fg-head__count {
	margin: 0;
	color: var(--fg-ink-faint);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-label);
	letter-spacing: .2em;
}

/* Plates: framed imagery with corner registration ticks. */
body.km-dir-forge .fg-plate {
	position: relative;
	margin: 0;
	padding: 9px;
}

body.km-dir-forge .fg-plate__frame {
	position: relative;
	display: block;
	overflow: hidden;
	background: #000;
}

body.km-dir-forge .fg-plate__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The reveal cover. Hidden two ways on purpose — zero width AND zero opacity —
   so that nothing short of both properties failing can leave a plate blanked. */
body.km-dir-forge .fg-plate__frame::after {
	position: absolute;
	inset: 0;
	background: var(--fg-ground);
	content: "";
	opacity: 0;
	pointer-events: none;
	transform: scaleX(0);
	transform-origin: right center;
}

/* Only the base selector here. Putting .fg-close .fg-plate__tick in this rule made
   `border: 0 solid` outrank the --tl/--tr/--bl/--br width rules and erased the closing
   panel's registration marks. */
body.km-dir-forge .fg-plate__tick {
	position: absolute;
	width: 13px;
	height: 13px;
	border: 0 solid var(--fg-line-strong);
	content: "";
	pointer-events: none;
}

body.km-dir-forge .fg-plate__tick--tl {
	top: 0;
	left: 0;
	border-top-width: 1px;
	border-left-width: 1px;
}

body.km-dir-forge .fg-plate__tick--tr {
	top: 0;
	right: 0;
	border-top-width: 1px;
	border-right-width: 1px;
}

body.km-dir-forge .fg-plate__tick--bl {
	bottom: 0;
	left: 0;
	border-bottom-width: 1px;
	border-left-width: 1px;
}

body.km-dir-forge .fg-plate__tick--br {
	bottom: 0;
	right: 0;
	border-right-width: 1px;
	border-bottom-width: 1px;
}

/* --------------------------------------------------------------------------
   4. Signature: the drafting scale down the edge of the sheet
   -------------------------------------------------------------------------- */

body.km-dir-forge .fg-scale {
	position: fixed;
	z-index: 60;
	top: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: var(--fg-strip);
	border-right: 1px solid var(--fg-line);
	background-color: var(--fg-ground);
	background-image:
		repeating-linear-gradient(to bottom, var(--fg-line-mid) 0 1px, transparent 1px 60px),
		repeating-linear-gradient(to bottom, var(--fg-line) 0 1px, transparent 1px 12px);
	background-repeat: repeat, repeat;
	background-size: 100% 100%, 52% 100%;
	pointer-events: none;
}

body.km-dir-forge.admin-bar .fg-scale {
	top: 32px;
}

@media (max-width: 782px) {
	body.km-dir-forge.admin-bar .fg-scale {
		top: 46px;
	}
}

body.km-dir-forge .fg-scale__cursor {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 28px;
	background: linear-gradient(to bottom, transparent, var(--fg-blue) 42%, var(--fg-blue) 58%, transparent);
	opacity: 0;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

body.km-dir-forge .kmf-home .fg-hero {
	position: relative;
	isolation: isolate;
	padding: calc(var(--fg-head) + clamp(38px, 11vw, 92px)) 0 clamp(26px, 3.5vw, 48px);
	background: var(--fg-ground);
	color: var(--fg-ink);
}

/* The projects follow straight on from the hero's foot rule; the full section space above
   them read as a break between two pages rather than one sheet continuing. */
body.km-dir-forge .kmf-home .fg-projects {
	padding-top: clamp(40px, 4.5vw, 66px);
}

/* Graph paper. Faint enough to be felt rather than seen. */
body.km-dir-forge .fg-hero__paper {
	position: absolute;
	z-index: 0;
	inset: 0;
	display: block;
	background-image:
		repeating-linear-gradient(to right, rgba(206, 222, 231, .045) 0 1px, transparent 1px 88px),
		repeating-linear-gradient(to bottom, rgba(206, 222, 231, .045) 0 1px, transparent 1px 88px);
	background-position: calc(var(--fg-strip) + 1px) 0;
	-webkit-mask-image: radial-gradient(120% 88% at 18% 8%, #000 0%, rgba(0, 0, 0, .35) 52%, transparent 82%);
	mask-image: radial-gradient(120% 88% at 18% 8%, #000 0%, rgba(0, 0, 0, .35) 52%, transparent 82%);
	pointer-events: none;
}

body.km-dir-forge .fg-hero__inner,
body.km-dir-forge .fg-hero__foot {
	position: relative;
	z-index: 1;
}

body.km-dir-forge .fg-hero__title {
	margin: clamp(26px, 5vw, 44px) 0 0;
	font-family: var(--km-font-sans);
	font-size: clamp(2.35rem, 10.4vw, 4rem);
	font-weight: 700;
	letter-spacing: -.04em;
	line-height: .93;
	text-wrap: wrap;
}

body.km-dir-forge .fg-hero__row {
	display: block;
	text-wrap: wrap;
}

body.km-dir-forge .fg-hero__title em {
	position: relative;
	font-family: var(--km-font-serif);
	font-size: 1.06em;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -.012em;
}

body.km-dir-forge .fg-hero__title em::after {
	position: absolute;
	bottom: .04em;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--fg-blue);
	content: "";
	transform-origin: left center;
}

body.km-dir-forge .fg-hero__summary {
	max-width: 33ch;
	margin: clamp(24px, 4.4vw, 34px) 0 0;
	color: var(--fg-ink-dim);
	font-size: var(--fg-t-lead);
	line-height: 1.66;
}

body.km-dir-forge .fg-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 26px;
	margin-top: clamp(28px, 5vw, 42px);
}

/* Hero sheet: the wide plate, the phone detail, the dimension line. */
body.km-dir-forge .fg-hero__sheet {
	position: relative;
	margin-top: clamp(48px, 12vw, 80px);
}

/* The wide plate is a browser window: a chrome bar with three dots and the address, then the
   real 1440x900 first screen, uncropped. */
body.km-dir-forge .fg-plate--wide .fg-plate__frame {
	aspect-ratio: 1440 / 848;
	background: #0b0c0d;
}

body.km-dir-forge .fg-plate--wide .fg-plate__frame img {
	object-fit: cover;
	object-position: 50% 0;
}

body.km-dir-forge .fg-browser__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding: 0 10px;
	border: 1px solid var(--fg-line-mid);
	border-bottom: 0;
	background: var(--fg-ground);
}

body.km-dir-forge .fg-browser__bar i {
	width: 7px;
	height: 7px;
	border: 1px solid var(--fg-line-strong);
	border-radius: 50%;
}

body.km-dir-forge .fg-browser__url {
	margin-left: 10px;
	padding: 2px 8px;
	border: 1px solid var(--fg-line);
	color: var(--fg-ink-dim);
	font-family: var(--km-font-mono);
	font-size: .62rem;
	letter-spacing: .06em;
	line-height: 1.4;
}

body.km-dir-forge .fg-browser .fg-plate__frame {
	border: 1px solid var(--fg-line-mid);
}

/* The phone is a device, not a rectangle: dark bezel, rounded corners, a notch. */
body.km-dir-forge .fg-plate--phone {
	position: absolute;
	z-index: 2;
	top: 9%;
	right: -1.5%;
	bottom: auto;
	width: clamp(96px, 21vw, 164px);
	margin: 0;
	padding: 7px;
	border-radius: 26px;
	background: #10161a;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 48px -22px rgba(0, 0, 0, .75);
}

body.km-dir-forge .fg-device__notch {
	position: absolute;
	z-index: 3;
	top: 11px;
	left: 50%;
	width: 32%;
	height: 9px;
	border-radius: 6px;
	background: #10161a;
	transform: translateX(-50%);
}

body.km-dir-forge .fg-plate--phone .fg-plate__frame {
	aspect-ratio: 390 / 760;
	overflow: hidden;
	border-radius: 20px;
	background: #0b0c0d;
}

body.km-dir-forge .fg-plate--phone .fg-plate__frame img {
	object-position: 50% 0;
}

@media (max-width: 700px) {
	body.km-dir-forge .fg-plate--phone {
		top: 12%;
		right: 0;
		width: 24vw;
		padding: 5px;
		border-radius: 18px;
	}
	body.km-dir-forge .fg-plate--phone .fg-plate__frame { border-radius: 14px; }
	body.km-dir-forge .fg-device__notch { top: 8px; height: 6px; }
}

/* The dimension annotation. This is the close-range moment. */
body.km-dir-forge .fg-dim {
	position: relative;
	height: 30px;
	margin: clamp(22px, 4vw, 30px) 0 0;
}

body.km-dir-forge .fg-dim__rule {
	position: absolute;
	top: 14px;
	right: 0;
	left: 0;
	height: 1px;
	background: var(--fg-line-strong);
	transform-origin: left center;
}

body.km-dir-forge .fg-dim__ext {
	position: absolute;
	top: 0;
	width: 1px;
	height: 28px;
	background: var(--fg-line-mid);
	transform-origin: top center;
}

body.km-dir-forge .fg-dim__ext--start {
	left: 0;
}

body.km-dir-forge .fg-dim__ext--end {
	right: 0;
}

body.km-dir-forge .fg-dim__label {
	position: absolute;
	top: 6px;
	left: 50%;
	padding: 0 12px;
	background: var(--fg-ground);
	color: var(--fg-blue);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-label);
	letter-spacing: .18em;
	line-height: 18px;
	transform: translateX(-50%);
	white-space: nowrap;
}

body.km-dir-forge .fg-hero__foot {
	margin-top: clamp(38px, 7vw, 64px);
	padding-top: 18px;
}

body.km-dir-forge .fg-hero__foot-rule {
	display: block;
	height: 1px;
	margin-bottom: 4px;
	background: var(--fg-line);
	transform-origin: left center;
}

body.km-dir-forge .fg-hero__transition {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	gap: 12px;
	color: var(--fg-ink-faint);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-label);
	letter-spacing: .2em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .22s ease;
}

body.km-dir-forge .fg-hero__transition:hover,
body.km-dir-forge .fg-hero__transition:focus-visible {
	color: var(--fg-ink);
}

body.km-dir-forge .fg-hero__transition i {
	font-style: normal;
	transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}

body.km-dir-forge .fg-hero__transition:hover i {
	transform: translateY(3px);
}

@media (min-width: 1080px) {
	body.km-dir-forge .fg-hero__inner {
		display: grid;
		grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
		gap: clamp(40px, 4.5vw, 80px);
		align-items: center;
	}

	/* The measure now comes from the column, so the display size is set
	   against the column and not against the viewport. */
	/* Meets the mobile cap exactly at 1080px (64px) and reaches 78.4px at 1440px, so the
	   biggest type on the site never jumps across a breakpoint. */
	body.km-dir-forge .fg-hero__title {
		font-size: clamp(4rem, 4vw + 1.3rem, 4.9rem);
	}

	body.km-dir-forge .fg-hero__sheet {
		margin-top: 0;
	}

	body.km-dir-forge .fg-hero__summary {
		max-width: 34ch;
	}

	/* Sized against the plate it annotates, not the viewport, so the detail
	   holds the same ratio to the elevation at every desktop width. */
	body.km-dir-forge .fg-plate--phone {
		top: -34px;
		right: -5%;
		width: 30%;
	}
}

/* --------------------------------------------------------------------------
   6. Projects
   -------------------------------------------------------------------------- */

body.km-dir-forge .fg-projects__list {
	display: grid;
	gap: clamp(56px, 9vw, 104px);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.km-dir-forge .fg-sheet {
	display: flex;
	flex-direction: column;
	gap: clamp(22px, 4vw, 34px);
}

body.km-dir-forge .fg-sheet__plate {
	flex: 1 1 auto;
}

body.km-dir-forge .fg-sheet__plate .fg-plate__frame {
	aspect-ratio: 1600 / 900;
}

@media (min-width: 900px) {
	body.km-dir-forge .fg-sheet__plate {
		max-width: 1120px;
		margin-inline: auto;
	}
	body.km-dir-forge .fg-sheet__block {
		max-width: 1120px;
		margin-inline: auto;
	}
	body.km-dir-forge .fg-sheet__plate .fg-plate__frame {
		aspect-ratio: 1600 / 900;
	}
}

/* Parallax: the capture is painted 12% larger than its frame and drifts upward as the
   sheet crosses the viewport. CSS scroll-driven where supported, km-site.js elsewhere. */
/* The capture is 1600x1000 and starts at the demo's own header. The frame is a touch shorter
   than the capture so the light section under the snickare hero never shows. No motion. */
body.km-dir-forge .fg-sheet__plate .fg-plate__frame img {
	object-fit: cover;
	object-position: 50% 0;
}

body.km-dir-forge .fg-sheet__plate-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

body.km-dir-forge .fg-projects__note {
	max-width: 52ch;
	margin: 14px 0 clamp(28px, 4vw, 44px);
	color: var(--fg-ink-dim);
	font-size: var(--fg-t-body);
	line-height: 1.6;
}

body.km-dir-forge .fg-sheet__block {
	position: relative;
	padding-top: 16px;
	border-top: 1px solid var(--fg-line);
}

body.km-dir-forge .fg-sheet__index {
	display: block;
	color: var(--fg-ink-faint);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-index);
	font-weight: 400;
	letter-spacing: -.02em;
	line-height: 1;
}

@supports (-webkit-text-stroke: 1px currentColor) {
	body.km-dir-forge .fg-sheet__index {
		color: transparent;
		-webkit-text-stroke: 1px var(--fg-line-strong);
	}
}

body.km-dir-forge .fg-sheet__category {
	margin: 14px 0 0;
	color: var(--fg-blue);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-label-strong);
	letter-spacing: .17em;
	text-transform: uppercase;
}

body.km-dir-forge .fg-sheet__name {
	margin: 12px 0 0;
	font-size: var(--fg-t-h2);
	font-weight: 700;
	letter-spacing: -.032em;
	line-height: 1.02;
}

body.km-dir-forge .fg-sheet__text {
	max-width: 40ch;
	margin: 14px 0 6px;
	color: var(--fg-ink-dim);
	font-size: var(--fg-t-body);
	line-height: 1.62;
}

@media (min-width: 900px) {
	body.km-dir-forge .fg-sheet {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(22px, 3vw, 36px);
		align-items: start;
	}

	body.km-dir-forge .fg-sheet__block {
		display: grid;
		grid-template-columns: 6rem minmax(0, 24rem) minmax(0, 1fr);
		gap: 0 clamp(24px, 4vw, 56px);
		align-items: start;
	}

	body.km-dir-forge .fg-sheet__index { grid-row: 1 / span 3; }
	body.km-dir-forge .fg-sheet__category { grid-column: 2; margin-top: 4px; }
	body.km-dir-forge .fg-sheet__name { grid-column: 2; }
	body.km-dir-forge .fg-sheet__text { grid-column: 3; grid-row: 1 / span 2; max-width: 48ch; margin-top: 4px; }
	body.km-dir-forge .fg-sheet__block > .fg-link { grid-column: 3; grid-row: 3; justify-self: start; }
}

/* --------------------------------------------------------------------------
   7. Services
   -------------------------------------------------------------------------- */

body.km-dir-forge .fg-statement__line {
	max-width: 17ch;
	margin: clamp(24px, 4.4vw, 40px) 0 0;
	font-size: var(--fg-t-display);
	font-weight: 700;
	letter-spacing: -.036em;
	line-height: 1.02;
}

body.km-dir-forge .fg-statement__line em {
	font-family: var(--km-font-serif);
	font-size: 1.05em;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -.012em;
}

body.km-dir-forge .fg-values {
	display: grid;
	gap: 0;
	margin-top: clamp(52px, 8vw, 96px);
}

body.km-dir-forge .fg-value {
	position: relative;
	padding: 22px 0 30px;
}

body.km-dir-forge .fg-value__rule {
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: var(--fg-line-mid);
	transform-origin: left center;
}

body.km-dir-forge .fg-value__index {
	display: block;
	color: var(--fg-blue);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-label);
	letter-spacing: .2em;
}

body.km-dir-forge .fg-value__title {
	margin: 16px 0 0;
	font-size: var(--fg-t-h3);
	font-weight: 700;
	letter-spacing: -.028em;
	line-height: 1.06;
}

body.km-dir-forge .fg-value__text {
	max-width: 36ch;
	margin: 14px 0 0;
	color: var(--fg-ink-dim);
	font-size: var(--fg-t-body);
	line-height: 1.62;
}

@media (min-width: 820px) {
	body.km-dir-forge .fg-statement__line {
		max-width: 20ch;
	}

	body.km-dir-forge .fg-values {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(28px, 3.4vw, 56px);
	}

	body.km-dir-forge .fg-value {
		padding: 22px 0 0;
	}
}

/* --------------------------------------------------------------------------
   8. Process — a dimension chain
   -------------------------------------------------------------------------- */

body.km-dir-forge .fg-chain {
	position: relative;
	padding-left: 52px;
}

body.km-dir-forge .fg-chain__rule {
	position: absolute;
	top: 8px;
	bottom: 34px;
	left: 16px;
	width: 1px;
	background: var(--fg-line-mid);
	transform-origin: center top;
}

body.km-dir-forge .fg-chain__steps {
	display: grid;
	gap: clamp(38px, 6vw, 54px);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.km-dir-forge .fg-step {
	position: relative;
}

body.km-dir-forge .fg-step__node {
	position: absolute;
	top: 0;
	left: -52px;
	display: grid;
	width: 33px;
	height: 33px;
	align-content: center;
	justify-content: center;
	border: 1px solid var(--fg-line-strong);
	background: var(--fg-ground);
	color: var(--fg-ink);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-label);
	letter-spacing: .1em;
}

body.km-dir-forge .fg-step__title {
	margin: 0;
	font-size: var(--fg-t-h2);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.04;
}

body.km-dir-forge .fg-step__text {
	max-width: 38ch;
	margin: 12px 0 0;
	color: var(--fg-ink-dim);
	font-size: var(--fg-t-body);
	line-height: 1.62;
}

body.km-dir-forge .fg-step__arrow {
	display: none;
}

/* The process plate shows KM Core, the system every site is built on. Pushed right so
   the section reads chain-left / detail-right; capped below the source's 1440px. */
body.km-dir-forge .fg-process__plate {
	max-width: 720px;
	margin-top: clamp(48px, 7vw, 88px);
	margin-left: auto;
}

body.km-dir-forge .fg-process__plate .fg-plate__frame {
	aspect-ratio: 1440 / 900;
}

/* Desaturated toward the drawing's own palette so a screenshot reads as a plate. */
body.km-dir-forge .fg-process__plate .fg-plate__frame img {
	filter: none;
}

/* The hero's graph paper returns under the dimension chain, fainter, so the drafting
   vocabulary is carried through the page rather than spent in the first screen. */
body.km-dir-forge .kmf-home .fg-process {
	position: relative;
	isolation: isolate;
}

body.km-dir-forge .fg-process::before {
	position: absolute;
	z-index: 0;
	inset: 0;
	background-image:
		repeating-linear-gradient(to right, rgba(206, 222, 231, .035) 0 1px, transparent 1px 88px),
		repeating-linear-gradient(to bottom, rgba(206, 222, 231, .035) 0 1px, transparent 1px 88px);
	background-position: calc(var(--fg-strip) + 1px) 0;
	-webkit-mask-image: radial-gradient(110% 80% at 85% 70%, #000 0%, rgba(0, 0, 0, .3) 55%, transparent 85%);
	mask-image: radial-gradient(110% 80% at 85% 70%, #000 0%, rgba(0, 0, 0, .3) 55%, transparent 85%);
	content: "";
	pointer-events: none;
}

body.km-dir-forge .fg-process > .kmf-shell {
	position: relative;
	z-index: 1;
}

/* The dimension annotation reappears under the process plate. */
body.km-dir-forge .fg-process__plate + .fg-dim {
	max-width: 720px;
	margin-left: auto;
}

@media (min-width: 860px) {
	body.km-dir-forge .fg-chain {
		padding-left: 0;
		padding-top: 52px;
	}

	body.km-dir-forge .fg-chain__rule {
		top: 16px;
		right: 0;
		bottom: auto;
		left: 0;
		width: auto;
		height: 1px;
		transform-origin: left center;
	}

	body.km-dir-forge .fg-chain__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(30px, 4vw, 64px);
	}

	body.km-dir-forge .fg-step__node {
		top: -52px;
		left: 0;
	}

	body.km-dir-forge .fg-step__arrow {
		position: absolute;
		top: -52px;
		right: calc(clamp(30px, 4vw, 64px) / -2);
		display: grid;
		width: 22px;
		height: 33px;
		align-content: center;
		justify-content: center;
		background: var(--fg-ground);
		color: var(--fg-ink-faint);
		font-size: var(--fg-t-label-strong);
		font-style: normal;
		transform: translateX(50%);
	}
}

/* --------------------------------------------------------------------------
   9. FAQ + closing block
   -------------------------------------------------------------------------- */

body.km-dir-forge .fg-faq__list {
	border-top: 1px solid var(--fg-line-mid);
}

body.km-dir-forge .fg-faq__item {
	border-bottom: 1px solid var(--fg-line);
}

body.km-dir-forge .fg-faq__summary {
	display: grid;
	min-height: 60px;
	align-items: start;
	gap: 16px;
	grid-template-columns: var(--fg-faq-indent) minmax(0, 1fr) 16px;
	padding: 20px 0;
	color: var(--fg-ink);
	cursor: pointer;
	list-style: none;
	transition: color .2s ease;
}

body.km-dir-forge .fg-faq__summary::-webkit-details-marker {
	display: none;
}

body.km-dir-forge .fg-faq__summary::before,
body.km-dir-forge .fg-faq__summary::after {
	content: none;
}

body.km-dir-forge .fg-faq__item:hover .fg-faq__question {
	color: var(--fg-ink);
}

body.km-dir-forge .fg-faq__index {
	color: var(--fg-ink-faint);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-label);
	letter-spacing: .14em;
	line-height: 1.9;
	transition: color .2s ease;
}

body.km-dir-forge .fg-faq__item[open] .fg-faq__index {
	color: var(--fg-blue);
}

body.km-dir-forge .fg-faq__question {
	font-size: var(--fg-t-h4);
	font-weight: 650;
	letter-spacing: -.018em;
	line-height: 1.32;
}

body.km-dir-forge .fg-faq__sign {
	position: relative;
	width: 16px;
	height: 16px;
	margin-top: .34em;
}

body.km-dir-forge .fg-faq__sign::before,
body.km-dir-forge .fg-faq__sign::after {
	position: absolute;
	top: 50%;
	left: 0;
	width: 16px;
	height: 1px;
	background: var(--fg-ink-dim);
	content: "";
	transition: transform .32s cubic-bezier(.2, .7, .2, 1);
}

body.km-dir-forge .fg-faq__sign::after {
	transform: rotate(90deg);
}

body.km-dir-forge .fg-faq__item[open] .fg-faq__sign::after {
	transform: rotate(90deg) scaleX(0);
}

body.km-dir-forge .fg-faq__answer {
	padding: 0 32px 26px calc(var(--fg-faq-indent) + 16px);
	color: var(--fg-ink-dim);
}

body.km-dir-forge .fg-faq__answer p {
	max-width: 56ch;
	margin: 0;
	font-size: var(--fg-t-body);
	line-height: 1.68;
}

/* Native accordion easing: no JavaScript, no layout thrash. */
@supports (interpolate-size: allow-keywords) {
	body.km-dir-forge {
		interpolate-size: allow-keywords;
	}

	body.km-dir-forge .fg-faq__item::details-content {
		overflow: hidden;
		block-size: 0;
		transition: block-size .38s cubic-bezier(.2, .7, .2, 1), content-visibility .38s allow-discrete;
	}

	body.km-dir-forge .fg-faq__item[open]::details-content {
		block-size: auto;
	}
}

body.km-dir-forge .fg-close {
	position: relative;
	margin-top: clamp(56px, 9vw, 104px);
	padding: clamp(38px, 8vw, 76px) clamp(24px, 5vw, 64px);
	border: 1px solid var(--fg-line);
	background:
		repeating-linear-gradient(to bottom, rgba(206, 222, 231, .028) 0 1px, transparent 1px 76px),
		var(--fg-plate);
}

/* Registration marks sit inside the panel edge, the way a drawing sheet's
   inner frame corners do, rather than doubling the border. */
body.km-dir-forge .fg-close .fg-plate__tick {
	width: 18px;
	height: 18px;
	border-color: var(--fg-line-strong);
}

body.km-dir-forge .fg-close .fg-plate__tick--tl {
	top: 11px;
	left: 11px;
}

body.km-dir-forge .fg-close .fg-plate__tick--tr {
	top: 11px;
	right: 11px;
}

body.km-dir-forge .fg-close .fg-plate__tick--bl {
	bottom: 11px;
	left: 11px;
}

body.km-dir-forge .fg-close .fg-plate__tick--br {
	right: 11px;
	bottom: 11px;
}

body.km-dir-forge .fg-close__title {
	max-width: 16ch;
	margin: 0;
	font-size: var(--fg-t-display);
	font-weight: 700;
	letter-spacing: -.036em;
	line-height: 1;
}

body.km-dir-forge .fg-close__text {
	max-width: 42ch;
	margin: clamp(18px, 3vw, 26px) 0 clamp(28px, 4vw, 38px);
	color: var(--fg-ink-dim);
	font-size: var(--fg-t-body);
	line-height: 1.64;
}

body.km-dir-forge .fg-close .fg-button {
	width: 100%;
	justify-content: space-between;
}

@media (min-width: 640px) {
	body.km-dir-forge .fg-close .fg-button {
		width: max-content;
		justify-content: center;
	}
}

@media (min-width: 900px) {
	body.km-dir-forge .fg-faq__list {
		max-width: 920px;
	}

	/* Statement left, action right: the panel closes the page across its
	   whole width instead of trailing off into empty sheet. */
	body.km-dir-forge .fg-close {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: clamp(40px, 6vw, 96px);
	}

	body.km-dir-forge .fg-close__title,
	body.km-dir-forge .fg-close__text {
		grid-column: 1;
	}

	body.km-dir-forge .fg-close__text {
		margin-bottom: 0;
	}

	body.km-dir-forge .fg-close .fg-button {
		grid-row: 1 / span 2;
		grid-column: 2;
	}
}

/* --------------------------------------------------------------------------
   10. Header and footer, restyled for the direction
   -------------------------------------------------------------------------- */

body.km-dir-forge .kmf-header--hero {
	border-bottom: 1px solid var(--fg-line);
	background: transparent;
	color: var(--fg-ink);
}

body.km-dir-forge .kmf-header__inner {
	min-height: 76px;
}

body.km-dir-forge .kmf-nav a {
	color: var(--fg-ink-dim);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-label);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	transition: color .2s ease;
}

body.km-dir-forge .kmf-nav a:hover,
body.km-dir-forge .kmf-nav a:focus-visible {
	color: var(--fg-ink);
}

body.km-dir-forge .kmf-header__cta {
	min-height: 44px;
	border-color: var(--fg-line-strong);
	color: var(--fg-ink);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-label);
	letter-spacing: .16em;
}

body.km-dir-forge .kmf-header__cta:hover,
body.km-dir-forge .kmf-header__cta:focus-visible {
	border-color: var(--fg-ink);
	background: var(--fg-ink);
	color: var(--fg-ground);
}

body.km-dir-forge .kmf-menu-button {
	border-color: var(--fg-line-strong);
	color: var(--fg-ink);
}

body.km-dir-forge .kmf-menu-button:hover,
body.km-dir-forge .kmf-menu-button:focus-visible {
	background: var(--fg-ink);
	color: var(--fg-ground);
}

body.km-dir-forge .kmf-mobile-menu {
	border-top: 1px solid var(--fg-line);
	background: var(--fg-plate);
	color: var(--fg-ink);
}

body.km-dir-forge .kmf-mobile-menu__list a {
	border-bottom: 1px solid var(--fg-line);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-label-strong);
	letter-spacing: .12em;
	text-transform: uppercase;
}

body.km-dir-forge .kmf-mobile-menu__cta {
	border: 1px solid var(--fg-ink);
	background: var(--fg-ink);
	color: var(--fg-ground);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-label-strong);
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* The shared chrome is drawn from the same ramp. Without this the header and footer keep
   the base theme's own sizes (down to 8.6px) and the page has two type systems. */
body.km-dir-forge .kmf-header__phone {
	font-size: var(--fg-t-label);
	letter-spacing: .06em;
}

body.km-dir-forge .kmf-brand__km {
	font-size: var(--fg-t-h4);
}

body.km-dir-forge .kmf-brand__promise {
	font-size: var(--fg-t-label);
}

body.km-dir-forge .kmf-footer {
	border-top: 1px solid var(--fg-line-mid);
	background: var(--fg-ground);
	color: var(--fg-ink-dim);
	font-size: var(--fg-t-body);
}

body.km-dir-forge .kmf-footer a,
body.km-dir-forge .kmf-footer p,
body.km-dir-forge .kmf-footer li {
	font-size: var(--fg-t-body);
}

body.km-dir-forge .kmf-footer__group h2 {
	color: var(--fg-ink-faint);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-label);
	letter-spacing: .2em;
}

body.km-dir-forge .kmf-footer__group a:hover,
body.km-dir-forge .kmf-footer__group a:focus-visible {
	color: var(--fg-ink);
}

body.km-dir-forge .kmf-footer__bottom {
	border-top: 1px solid var(--fg-line);
}

body.km-dir-forge .kmf-footer__brand-name {
	font-size: var(--fg-t-label);
}

body.km-dir-forge .kmf-footer__brand-km {
	font-size: var(--fg-t-h2);
}

body.km-dir-forge .kmf-footer__bottom small,
body.km-dir-forge .kmf-footer__bottom a {
	color: var(--fg-ink-faint);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-label);
	letter-spacing: .1em;
}

/* --------------------------------------------------------------------------
   11. Motion. Scroll-driven and load-staged, CSS only.
        Everything above is the finished, static page. Nothing here is
        required for the page to read correctly.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

	/* Hero assembles on load, like a drawing being laid down. */
	@keyframes fg-wipe {
		from { clip-path: inset(-.2em 100% -.22em 0); }
		to { clip-path: inset(-.2em -.05em -.22em 0); }
	}

	/* Plate reveal: a ground-coloured cover retracts to the right, so the
	   image is drawn on rather than faded in. Composited, never repaints. */
	@keyframes fg-uncover {
		from { opacity: 1; transform: scaleX(1); }
		99% { opacity: 1; }
		to { opacity: 0; transform: scaleX(0); }
	}

	@keyframes fg-rise {
		from { opacity: 0; transform: translateY(16px); }
		to { opacity: 1; transform: none; }
	}

	@keyframes fg-rule-x {
		from { transform: scaleX(0); }
		to { transform: scaleX(1); }
	}

	@keyframes fg-rule-y {
		from { transform: scaleY(0); }
		to { transform: scaleY(1); }
	}

	@keyframes fg-fade {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	body.km-dir-forge .fg-hero__paper {
		animation: fg-fade 1.1s ease .15s both;
	}

	body.km-dir-forge .fg-hero .fg-eyebrow__tick {
		animation: fg-rule-x .5s cubic-bezier(.2, .7, .2, 1) .1s both;
	}

	body.km-dir-forge .fg-hero .fg-eyebrow {
		animation: fg-fade .5s ease .18s both;
	}

	body.km-dir-forge .fg-hero__row {
		animation: fg-wipe .72s cubic-bezier(.22, .68, .12, 1) both;
	}

	body.km-dir-forge .fg-hero__row:nth-child(1) { animation-delay: .26s; }
	body.km-dir-forge .fg-hero__row:nth-child(2) { animation-delay: .34s; }
	body.km-dir-forge .fg-hero__row:nth-child(3) { animation-delay: .42s; }
	body.km-dir-forge .fg-hero__row:nth-child(4) { animation-delay: .50s; }

	body.km-dir-forge .fg-hero__title em::after {
		animation: fg-rule-x .55s cubic-bezier(.2, .7, .2, 1) 1.05s both;
	}

	body.km-dir-forge .fg-hero__summary {
		animation: fg-rise .7s cubic-bezier(.2, .7, .2, 1) .62s both;
	}

	body.km-dir-forge .fg-hero__actions {
		animation: fg-rise .7s cubic-bezier(.2, .7, .2, 1) .72s both;
	}

	body.km-dir-forge .fg-plate--wide .fg-plate__frame::after {
		animation: fg-uncover .95s cubic-bezier(.22, .68, .12, 1) .55s both;
	}

	body.km-dir-forge .fg-hero .fg-plate__tick {
		animation: fg-fade .5s ease 1.25s both;
	}

	body.km-dir-forge .fg-plate--phone {
		animation: fg-rise .8s cubic-bezier(.2, .7, .2, 1) 1.15s both;
	}

	body.km-dir-forge .fg-dim__ext {
		animation: fg-rule-y .45s cubic-bezier(.2, .7, .2, 1) 1.3s both;
	}

	body.km-dir-forge .fg-dim__ext--end {
		animation-delay: 1.36s;
	}

	body.km-dir-forge .fg-dim__rule {
		animation: fg-rule-x .6s cubic-bezier(.2, .7, .2, 1) 1.42s both;
	}

	body.km-dir-forge .fg-dim__label {
		animation: fg-fade .5s ease 1.72s both;
	}

	body.km-dir-forge .fg-hero__foot-rule {
		animation: fg-rule-x .8s cubic-bezier(.2, .7, .2, 1) 1.5s both;
	}

	body.km-dir-forge .fg-hero__transition {
		animation: fg-fade .6s ease 1.75s both;
	}

	/* Below the hero the page draws itself as it is scrolled. */
	@supports (animation-timeline: view()) {

		body.km-dir-forge .fg-scale__cursor {
			opacity: 1;
			animation: fg-cursor linear both;
			animation-timeline: scroll(root block);
		}

		@keyframes fg-cursor {
			from { transform: translateY(0); }
			to { transform: translateY(calc(var(--fg-strip-h) - 28px)); }
		}

		body.km-dir-forge .fg-head__rule,
		body.km-dir-forge .fg-value__rule {
			animation: fg-rule-x 1s linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 80%;
		}

		body.km-dir-forge .fg-sheet__block,
		body.km-dir-forge .fg-projects .fg-eyebrow,
		body.km-dir-forge .fg-process .fg-eyebrow,
		body.km-dir-forge .fg-faq .fg-eyebrow,
		body.km-dir-forge .fg-statement,
		body.km-dir-forge .fg-value__index,
		body.km-dir-forge .fg-value__title,
		body.km-dir-forge .fg-value__text,
		body.km-dir-forge .fg-step,
		body.km-dir-forge .fg-price,
		body.km-dir-forge .fg-intro,
		body.km-dir-forge .fg-close {
			animation: fg-rise 1s linear both;
			animation-timeline: view();
			animation-range: entry 6% entry 78%;
		}

		body.km-dir-forge .fg-projects .fg-eyebrow__tick,
		body.km-dir-forge .fg-process .fg-eyebrow__tick,
		body.km-dir-forge .fg-faq .fg-eyebrow__tick,
		body.km-dir-forge .fg-services .fg-eyebrow__tick {
			animation: fg-rule-x 1s linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 78%;
		}

		@keyframes fg-hero-drift {
			from { transform: translateY(0); }
			to { transform: translateY(22%); }
		}

		body.km-dir-forge .fg-hero__sheet {
			animation: fg-hero-drift linear both;
			animation-timeline: view();
			animation-range: exit 0% exit 100%;
		}

		body.km-dir-forge .fg-sheet__plate .fg-plate__frame::after,
		body.km-dir-forge .fg-process__plate .fg-plate__frame::after {
			animation: fg-uncover 1s linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 72%;
		}

		body.km-dir-forge .fg-sheet__plate .fg-plate__tick,
		body.km-dir-forge .fg-process__plate .fg-plate__tick {
			animation: fg-fade 1s linear both;
			animation-timeline: view();
			animation-range: entry 30% entry 85%;
		}

		body.km-dir-forge .fg-chain__rule {
			animation: fg-rule-y 1s linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 92%;
		}

		body.km-dir-forge .fg-process .fg-dim__rule {
			animation: fg-rule-x 1s linear both;
			animation-timeline: view();
			animation-range: entry 20% entry 90%;
		}

		body.km-dir-forge .fg-process .fg-dim__ext {
			animation: fg-rule-y 1s linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 70%;
		}

		body.km-dir-forge .fg-process .fg-dim__label {
			animation: fg-fade 1s linear both;
			animation-timeline: view();
			animation-range: entry 50% entry 95%;
		}

		body.km-dir-forge .fg-faq__item {
			animation: fg-rise 1s linear both;
			animation-timeline: view();
			animation-range: entry 2% entry 70%;
		}

		@media (min-width: 860px) {
			body.km-dir-forge .fg-chain__rule {
				animation-name: fg-rule-x;
			}
		}
	}
}


/* Contact form in the closing panel. Same ink and ground as the panel, fields ruled not boxed. */
body.km-dir-forge .fg-form { margin-top: clamp(22px, 3vw, 32px); }
body.km-dir-forge .fg-form__grid { display: grid; gap: 14px 22px; }
body.km-dir-forge .fg-form__field { display: grid; gap: 6px; }
body.km-dir-forge .fg-form__field span { color: var(--fg-ink-dim); font-family: var(--km-font-mono); font-size: var(--fg-t-label); letter-spacing: .14em; text-transform: uppercase; }
body.km-dir-forge .fg-form__field input,
body.km-dir-forge .fg-form__field textarea { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--fg-line-mid); background: transparent; color: var(--fg-ink); font: inherit; font-size: var(--fg-t-body); border-radius: 0; }
body.km-dir-forge .fg-form__field input:focus,
body.km-dir-forge .fg-form__field textarea:focus { outline: 0; border-bottom-color: var(--fg-blue); box-shadow: 0 1px 0 var(--fg-blue); }
body.km-dir-forge .fg-form__field textarea { resize: vertical; min-height: 96px; }
body.km-dir-forge .fg-form__field textarea::placeholder,
body.km-dir-forge .fg-form__field input::placeholder { color: var(--fg-ink-faint); }
body.km-dir-forge .fg-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
body.km-dir-forge .fg-form__notice { max-width: 52ch; margin: 18px 0 20px; color: var(--fg-ink-dim); font-size: .82rem; line-height: 1.55; }
body.km-dir-forge .fg-form__notice a { color: inherit; text-decoration: underline; }
body.km-dir-forge .fg-form__ok,
body.km-dir-forge .fg-form__err { margin: 18px 0 0; padding: 14px 16px; border: 1px solid var(--fg-line-mid); color: var(--fg-ink); font-size: var(--fg-t-body); }
body.km-dir-forge .fg-form__err { border-color: #b3261e; }
@media (min-width: 700px) {
	body.km-dir-forge .fg-form__grid { grid-template-columns: 1fr 1fr; }
	body.km-dir-forge .fg-form__field--wide { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
	/* Statement left, form right, the form spanning both text rows. */
	body.km-dir-forge .fg-close { align-items: start; }
	body.km-dir-forge .fg-close { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
	body.km-dir-forge .fg-close .fg-form,
	body.km-dir-forge .fg-close .fg-form__ok,
	body.km-dir-forge .fg-close .fg-form__err { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
	body.km-dir-forge .fg-close .fg-form__err { grid-row: 3; grid-column: 1 / -1; margin-top: 18px; }
	body.km-dir-forge .fg-close .fg-form .fg-button { width: 100%; justify-content: space-between; }
}
@media (min-width: 900px) {
	body.km-dir-forge .fg-close { grid-template-rows: auto auto 1fr; }
	body.km-dir-forge .fg-close .fg-form,
	body.km-dir-forge .fg-close .fg-form__ok { grid-row: 1 / span 3; }
}

/* Required marks and the notice under the form. */
body.km-dir-forge .fg-form__req { color: var(--fg-blue); font-weight: 400; }

/* --------------------------------------------------------------------------
   12. Price sheet (services) and the introduction (before the closing panel).
        Both are drawn like the closing panel: a framed plate with registration
        marks, mono dim labels, ticks. Static; the motion block lifts them in.
   -------------------------------------------------------------------------- */

body.km-dir-forge .fg-price {
	position: relative;
	margin-top: clamp(56px, 8vw, 96px);
	padding: clamp(32px, 6vw, 60px) clamp(24px, 5vw, 64px);
	border: 1px solid var(--fg-line);
	background:
		repeating-linear-gradient(to bottom, rgba(206, 222, 231, .028) 0 1px, transparent 1px 76px),
		var(--fg-plate);
}

body.km-dir-forge .fg-price .fg-plate__tick,
body.km-dir-forge .fg-intro__portrait .fg-plate__tick {
	width: 18px;
	height: 18px;
	border-color: var(--fg-line-strong);
}

body.km-dir-forge .fg-price .fg-plate__tick--tl { top: 11px; left: 11px; }
body.km-dir-forge .fg-price .fg-plate__tick--tr { top: 11px; right: 11px; }
body.km-dir-forge .fg-price .fg-plate__tick--bl { bottom: 11px; left: 11px; }
body.km-dir-forge .fg-price .fg-plate__tick--br { right: 11px; bottom: 11px; }

body.km-dir-forge .fg-price__lead {
	max-width: 44ch;
	margin: 18px 0 0;
	color: var(--fg-ink-dim);
	font-size: var(--fg-t-lead);
	line-height: 1.6;
}

body.km-dir-forge .fg-price__list {
	display: grid;
	gap: 0;
	margin: clamp(26px, 4vw, 40px) 0 0;
	border-top: 1px solid var(--fg-line-mid);
}

body.km-dir-forge .fg-price__item {
	display: grid;
	gap: 10px 32px;
	padding: 22px 0 24px;
	border-bottom: 1px solid var(--fg-line);
}

body.km-dir-forge .fg-price__label {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0;
	color: var(--fg-ink);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-label-strong);
	letter-spacing: .17em;
	text-transform: uppercase;
}

body.km-dir-forge .fg-price__index {
	color: var(--fg-blue);
}

body.km-dir-forge .fg-price__body {
	margin: 0;
}

body.km-dir-forge .fg-price__amount {
	margin: 0;
	font-size: var(--fg-t-h2);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.04;
}

body.km-dir-forge .fg-price__unit {
	display: block;
	margin-top: 8px;
	color: var(--fg-ink-dim);
	font-family: var(--km-font-mono);
	font-size: var(--fg-t-label);
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
}

body.km-dir-forge .fg-price__text {
	max-width: 44ch;
	margin: 14px 0 0;
	color: var(--fg-ink-dim);
	font-size: var(--fg-t-body);
	line-height: 1.62;
}

body.km-dir-forge .fg-price__note {
	max-width: 62ch;
	margin: 22px 0 0;
	color: var(--fg-ink-dim);
	font-size: var(--fg-t-body);
	line-height: 1.6;
}

/* The link to the pricing page, under the note. */
body.km-dir-forge .fg-price__link {
	margin-top: 20px;
}

@media (min-width: 760px) {
	body.km-dir-forge .fg-price__item {
		grid-template-columns: 11rem minmax(0, 1fr);
	}

	body.km-dir-forge .fg-price__label {
		padding-top: 6px;
	}
}

@media (min-width: 1000px) {
	body.km-dir-forge .fg-price {
		display: grid;
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
		column-gap: clamp(40px, 6vw, 96px);
	}

	body.km-dir-forge .fg-price__head { grid-column: 1; grid-row: 1; }
	body.km-dir-forge .fg-price__list { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
	body.km-dir-forge .fg-price__note { grid-column: 1; grid-row: 2; align-self: end; }
	body.km-dir-forge .fg-price__link { grid-column: 1; grid-row: 3; align-self: start; }
}

/* Introduction: the person behind the form, in a small portrait plate beside three sentences. */
body.km-dir-forge .fg-intro {
	display: grid;
	gap: clamp(26px, 5vw, 44px);
	margin-top: clamp(56px, 9vw, 104px);
	padding-top: clamp(32px, 5vw, 48px);
	border-top: 1px solid var(--fg-line-mid);
}

body.km-dir-forge .fg-intro__plate {
	width: min(100%, 220px);
}

body.km-dir-forge .fg-intro__portrait {
	margin: 0;
}

body.km-dir-forge .fg-intro__portrait .fg-plate__frame {
	aspect-ratio: 4 / 5;
}

body.km-dir-forge .fg-intro__portrait .fg-plate__frame img {
	object-fit: cover;
	object-position: 50% 28%;
}

body.km-dir-forge .fg-intro__dim {
	margin-top: 14px;
}

body.km-dir-forge .fg-intro__title {
	margin: 18px 0 0;
	font-size: var(--fg-t-h2);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.04;
}

body.km-dir-forge .fg-intro__text {
	max-width: 46ch;
	margin: 14px 0 20px;
	color: var(--fg-ink-dim);
	font-size: var(--fg-t-lead);
	line-height: 1.62;
}

@media (min-width: 700px) {
	body.km-dir-forge .fg-intro {
		grid-template-columns: 220px minmax(0, 1fr);
		align-items: center;
		column-gap: clamp(36px, 5vw, 72px);
	}
}

@media (min-width: 900px) {
	body.km-dir-forge .fg-intro {
		max-width: 920px;
	}
}