/* ==========================================================================
   Construction Help Finder — site styles
   Design: Claude Design handoff 2026-09-25 (DESIGN-HANDOFF.md), inner pages
   2026-09-26 (INNER-PAGES.md). Tokens below.
   Hard rules carried from the handoff:
   - Orange #C8470B is buttons only (Get Started, and the mock Apply/Post buttons
     drawn inside hero objects). Yellow #FFC20E is never a button.
   - No border-radius on boxes, cards, buttons or panels. Corners are chamfered
     with clip-path. Exceptions (Gerek, 2026-09-26): the round OR disc, the round
     X badges, and the header dropdown. Round shapes inside CSS drawings are SVG
     circles, never rounded boxes.
   - Text sits above decorative layers; decoration never covers a word.
   - Decorative words (job cards, ticker, tags) are drawn from
     data-t attributes so the page's text is exactly the copy.
   ========================================================================== */

:root {
	--ground: #E9EAE6;
	--panel: #F5F5F3;
	--card: #FFFFFF;
	--ink: #141516;
	--ink-2: #4A4D52;
	--body-ink: #2E3034;
	--hair: #C9CBC7;
	--hair-card: #E1E2DE;
	--hair-ledger: #9A9D9A;
	--hair-dark: #33363B;
	--on-dark: #F2F2EF;
	--muted-dark: #B4B7BB;
	--para-dark: #D5D7DA;
	--yellow: #FFC20E;
	--orange: #C8470B;
	--orange-hover: #B8410A;
	--red: #C0392B;

	--font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--font-body: Barlow, "Helvetica Neue", Arial, sans-serif;

	--body: 20px;
	--gut: clamp(64px, 8.3334vw, 120px);
	--wrap: 1200px;
	--pad-x: max(var(--gut), calc((100% - var(--wrap)) / 2));

	--grid-dark: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	--mark: url("../img/chf-mark.svg");
	--arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
	--arrow-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23141516' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
	--rail-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23141516' stroke='%23FFC20E' stroke-width='4'/%3E%3C/svg%3E");
	--check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");
	--x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
}

/* Tablets 600-1099: body text 24px (handoff tablet size; Gerek, 2026-09-25: all tablet widths). */
@media (min-width: 600px) and (max-width: 1099px) { :root { --body: 24px; --gut: 64px; } }
@media (min-width: 600px) and (max-width: 767px) { :root { --gut: 40px; } }
@media (max-width: 599px) { :root { --body: 18px; --gut: 20px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--body);
	line-height: 1.5;
	color: var(--ink);
	background: var(--ground);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
h1, h2, h3, h4, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); }
a:hover { color: #8A6A00; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.screen-reader-text, .skip-link:not(:focus) {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus { position: fixed; left: 12px; top: 12px; z-index: 100; background: var(--yellow); color: var(--ink); padding: 10px 16px; font-weight: 700; }

/* Decorative words live in data-t and are drawn here. */
[data-t]::before { content: attr(data-t); }

/* The mark (hard hat + magnifier), coloured by background-color. */
.mark, .ticker__sep {
	display: block;
	background-color: currentColor;
	-webkit-mask: var(--mark) center / contain no-repeat;
	mask: var(--mark) center / contain no-repeat;
	pointer-events: none;
}

/* Hazard stripe */
.hazard { height: 8px; background: repeating-linear-gradient(135deg, var(--yellow) 0 14px, var(--ink) 14px 28px); }
.hazard--wide { height: 12px; }

/* Chamfers */
.chamfer-12, .btn { clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }

/* ---------- buttons (orange = buttons only) ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 14px;
	height: 76px; padding: 0 44px;
	background: var(--orange); color: #FFFFFF;
	font-family: var(--font-body); font-size: 24px; font-weight: 800; letter-spacing: .01em;
	text-decoration: none; white-space: nowrap;
	position: relative; isolation: isolate;
	transition: background-color .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.btn::after {
	content: ""; width: 1em; height: 1em; flex: none;
	background-color: currentColor;
	-webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
	transition: transform .2s ease;
}
/* Hover: the button lifts, a light sweep crosses it, and the arrow keeps nudging forward. */
.btn::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .32) 48%, rgba(255, 255, 255, .32) 52%, transparent 70%);
	transform: translateX(-110%);
}
.btn:hover, .btn:focus-visible { background: var(--orange-hover); color: #FFFFFF; transform: translateY(-3px); }
.btn:hover::before, .btn:focus-visible::before { transform: translateX(110%); transition: transform .65s ease; }
.btn:hover::after, .btn:focus-visible::after { animation: chf-nudge .9s ease-in-out infinite; }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .08s; }
@keyframes chf-nudge { 0%, 100% { transform: translateX(2px); } 50% { transform: translateX(8px); } }
/* Grounding shadow under lifted content buttons (clip-path cuts a box-shadow, so it sits on the row). */
.btn-row { transition: filter .25s ease; }
.btn-row:hover { filter: drop-shadow(0 10px 14px rgba(200, 71, 11, .35)); }
.btn--xl { clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.btn--header {
	height: 52px; padding: 0 26px; font-size: 17px; letter-spacing: .02em; gap: 10px;
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.btn-row { display: flex; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; transition: box-shadow .2s ease, transform .28s ease; }
/* Slides away while scrolling down, back on any scroll up (assets/js/site.js). */
.site-header.is-hidden { transform: translateY(-100%); box-shadow: none; }
.site-header:focus-within { transform: none; }
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 8px 24px rgba(20, 21, 22, .18); }
.admin-bar .site-header { top: 32px; }
.site-header__bar {
	height: 88px; padding: 0 var(--pad-x);
	display: flex; align-items: center; gap: 32px;
	background: var(--ink); color: var(--on-dark);
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--on-dark); margin-right: auto; }
.brand:hover { color: var(--on-dark); }
.brand__logo { width: 44px; height: 44px; object-fit: cover; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: .01em; text-transform: uppercase; line-height: 1; }
.site-nav { align-self: stretch; display: flex; }
.site-nav__list { display: flex; align-items: stretch; gap: 32px; }
.site-nav__list > li { position: relative; display: flex; align-items: center; }
.site-nav__list > li > a {
	display: block; padding: 6px 0; border-bottom: 3px solid transparent; white-space: nowrap;
	font-size: 16px; font-weight: 600; color: var(--on-dark); text-decoration: none;
}
.site-nav__list > li > a:hover, .site-nav__list > .current-menu-item > a, .site-nav__list > .current-menu-ancestor > a { border-bottom-color: var(--yellow); color: var(--on-dark); }

/* ---- header dropdown (on the pattern of mommaschiro / touchofwellness: a rounded
   card that drifts in, rounded row highlights). The one place the site uses rounded
   corners (Gerek, 2026-09-25); everything else stays chamfered. ---- */
.site-nav__list > .menu-item-has-children > a { position: relative; padding-right: 20px; }
.site-nav__list > .menu-item-has-children > a::after {
	content: ""; position: absolute; right: 2px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
	border-right: 2px solid var(--yellow); border-bottom: 2px solid var(--yellow);
	transform: rotate(45deg); transition: transform .15s ease, margin-top .15s ease;
}
.site-nav__list > .menu-item-has-children:hover > a::after,
.site-nav__list > .menu-item-has-children:focus-within > a::after,
.site-nav__list > .menu-item-has-children.is-open > a::after { transform: rotate(225deg); margin-top: -2px; }
.site-nav .sub-menu {
	position: absolute; top: 100%; left: -14px; z-index: 60;
	display: grid; gap: 2px; min-width: 264px; margin: 8px 0 0; padding: 10px;
	background: #FFFFFF; border-top: 4px solid var(--yellow); border-radius: 14px;
	box-shadow: 0 18px 40px -12px rgba(20, 21, 22, .45), 0 2px 6px rgba(20, 21, 22, .10);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
/* keeps the hover alive across the 8px gap between the header and the card */
.site-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu,
.site-nav__list li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.site-nav__list li.is-dismissed > .sub-menu { opacity: 0; visibility: hidden; transform: translateY(6px); }
.site-nav__list > li.menu-item-has-children.is-dismissed > a::after { transform: rotate(45deg); margin-top: -6px; }
.site-nav .sub-menu a {
	display: block; padding: 11px 14px; border-radius: 8px;
	font-size: 16px; font-weight: 600; line-height: 1.25; white-space: nowrap;
	color: var(--ink); text-decoration: none;
	transition: background-color .12s ease, color .12s ease, padding-left .12s ease;
}
.site-nav .sub-menu a:hover, .site-nav .sub-menu a:focus-visible {
	background-color: rgba(255, 194, 14, .22); color: var(--ink); padding-left: 18px;
}
.site-nav .sub-menu .current-menu-item > a {
	background-color: rgba(255, 194, 14, .22); box-shadow: inset 3px 0 0 var(--ink);
}
.site-nav .sub-menu a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.site-nav .sub-menu .menu-item-overview { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--hair-card); }
.site-nav .sub-menu .menu-item-overview > a { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 800; }
.site-nav .sub-menu .menu-item-overview > a::after { content: ""; flex: none; width: 16px; height: 16px; background-color: var(--ink); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .12s ease; }
.site-nav .sub-menu .menu-item-overview > a:hover::after { transform: translateX(3px); }
.site-header .btn--header { margin-left: 8px; }
.menu-toggle { display: none; }
.site-drawer { display: none; }

/* 1100-1339: tighter header so the menu labels never wrap (they did at 1280-1300 before 2026-09-26) */
@media (min-width: 1100px) and (max-width: 1339px) {
	.site-header__bar { padding: 0 40px; gap: 20px; }
	.site-nav__list { gap: 20px; }
}

/* ---------- mobile + tablet header and drawer ---------- */
@media (max-width: 1099px) {
	.site-header__bar { height: 72px; padding: 0 16px; gap: 8px; }
	.site-nav { display: none; }
	.brand { gap: 10px; }
	.brand__logo { width: 36px; height: 36px; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
	.brand__name { font-size: 20px; }
	.site-header .btn--header {
		height: 44px; padding: 0 14px; font-size: 14px; margin-left: 0;
		clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
	}
	.site-header .btn--header::after { display: none; }
	.hazard { height: 6px; background: repeating-linear-gradient(135deg, var(--yellow) 0 10px, var(--ink) 10px 20px); }
	.hazard--wide { height: 10px; }

	.menu-toggle {
		display: flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--on-dark); cursor: pointer;
	}
	.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after {
		display: block; width: 24px; height: 2.5px; background: currentColor; position: relative; transition: transform .2s ease, background-color .2s ease;
	}
	.menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
	.menu-toggle__bars::before { top: -8px; }
	.menu-toggle__bars::after { top: 8px; }
	.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
	.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(8px) rotate(45deg); }
	.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-8px) rotate(-45deg); }

	.site-drawer {
		position: fixed; inset: 78px 0 0; z-index: 45; overflow: auto;
		padding: 24px 20px 120px;
		background: var(--ink); background-image: var(--grid-dark); background-size: 40px 40px; color: var(--on-dark);
	}
	.admin-bar .site-drawer { top: 124px; }
	.site-drawer:not([hidden]) { display: block; }
	.site-drawer__list a {
		display: flex; align-items: center; justify-content: space-between; min-height: 64px;
		border-bottom: 1px solid var(--hair-dark); text-decoration: none; color: var(--on-dark);
		font-family: var(--font-display); font-weight: 800; font-size: 36px; text-transform: uppercase; line-height: 1;
	}
	.site-drawer__list a::after {
		content: ""; width: 22px; height: 22px; background-color: var(--yellow);
		-webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
	}
	/* drawer dropdown group: the whole parent row is one button that opens and closes the group (Gerek,
	   2026-09-25: one tap, one job). The parent page is the first row inside, "<label> Overview". */
	.submenu-toggle {
		display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 64px; padding: 0; cursor: pointer;
		border: 0; border-bottom: 1px solid var(--hair-dark); background: transparent; color: var(--on-dark); text-align: left;
		font-family: var(--font-display); font-weight: 800; font-size: 36px; text-transform: uppercase; line-height: 1;
	}
	.submenu-toggle::after {
		content: ""; flex: none; width: 12px; height: 12px; margin: -6px 6px 0 0;
		border-right: 3px solid var(--yellow); border-bottom: 3px solid var(--yellow); transform: rotate(45deg);
		transition: transform .15s ease, margin-top .15s ease;
	}
	.submenu-toggle[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 6px; }
	.submenu-toggle:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
	.site-drawer .sub-menu {
		grid-column: 1 / -1; display: none; gap: 2px;
		margin: 10px 0 14px 4px; padding: 0 0 0 12px; border-left: 2px solid rgba(255, 194, 14, .6);
	}
	.site-drawer .is-open > .sub-menu { display: grid; }
	.site-drawer .sub-menu a {
		display: block; min-height: 0; padding: 12px 14px; border: 0; border-radius: 10px;
		font-family: var(--font-body); font-weight: 600; font-size: 20px; text-transform: none; line-height: 1.25;
		color: var(--on-dark); transition: background-color .12s ease, color .12s ease;
	}
	.site-drawer .sub-menu a::after { display: none; }
	.site-drawer .sub-menu a:hover, .site-drawer .sub-menu a:focus-visible { background-color: rgba(255, 255, 255, .08); color: var(--on-dark); }
	.site-drawer .sub-menu .current-menu-item > a { color: var(--yellow); background-color: rgba(255, 194, 14, .12); box-shadow: inset 3px 0 0 var(--yellow); }
	.site-drawer .sub-menu .menu-item-overview > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; color: var(--yellow); font-weight: 700; background-color: rgba(255, 194, 14, .12); }
	.site-drawer .sub-menu .menu-item-overview > a::after { display: block; content: ""; flex: none; width: 20px; height: 20px; background-color: var(--yellow); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; }
	.mark--drawer { position: absolute; right: -60px; bottom: 140px; width: 260px; height: 320px; color: var(--yellow); opacity: .12; }
	body.menu-open { overflow: hidden; }

}
/* No sticky bottom CTA anywhere (Gerek, 2026-09-26): the header's Get Started button is always in view. */
@media (max-width: 480px) {
	.brand__name { font-size: 14px; max-width: 7.2em; display: block; }
}

/* Back-to-top (must-use plugin): brand colours via its three variables, chamfered not rounded. */
/* Black square, yellow arrow (Gerek, 2026-09-26: yellow is never a button), with a thin grey edge that follows
   the chamfer so it stays visible over black sections and the footer (Gerek, 2026-09-26). The element's own
   background is the edge; ::before is the black face, 1px inside it. */
body .to-top {
	--to-top-ink: var(--yellow);
	--to-top-surface: #7A7D82;
	--to-top-border: transparent;
	border: 0; border-radius: 0; isolation: isolate;
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
body .to-top::before {
	content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--ink);
	clip-path: polygon(7.6px 0, 100% 0, 100% calc(100% - 7.6px), calc(100% - 7.6px) 100%, 0 100%, 0 7.6px);
}
body .to-top:hover { background: #7A7D82; color: var(--yellow); }
body .to-top:hover::before { background: #2A2C2F; }

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */
.site-main { overflow-x: clip; }
.site-main--home { position: relative; }
.site-main--home > * { position: relative; }

/* ---- 7.1 hero ---- */
.hero-title {
	position: relative; z-index: 2;
	padding: 56px var(--pad-x) 0;
	font-family: var(--font-display); font-weight: 800;
	font-size: clamp(50px, 6.6667vw, 96px); line-height: .88; letter-spacing: -.015em; text-transform: uppercase;
}
.hero-title__line { display: block; width: fit-content; }
.hero-title__line--2, .hero-title__line--4 { margin-left: .6667em; }
.hero-title__line--3 { background: var(--yellow); padding: 0 .1667em; margin-top: 6px; }
.hero-title__line--4 { color: transparent; -webkit-text-stroke: 2.5px var(--ink); margin-top: 6px; }

.hero { position: static !important; padding: 24px var(--pad-x) 64px; display: flex; flex-direction: column; gap: 24px; }
.hero > p { position: relative; z-index: 2; }
.hero-tag {
	display: block; width: fit-content; align-self: flex-start; height: 40px; line-height: 40px; padding: 0 16px;
	background: var(--ink); color: var(--on-dark);
	font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; word-spacing: .2em;
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.hero-tag strong { color: var(--yellow); font-weight: 700; }
.hero-lede { max-width: min(620px, calc(100vw - 720px)); color: var(--body-ink); }
@media (min-width: 1100px) and (max-width: 1279px) { .hero-lede { max-width: min(620px, calc(100vw - 560px)); } }
@media (max-width: 1099px) { .hero-lede { max-width: 720px; } }
.hero .btn-row { position: relative; z-index: 2; }
.hero-da { margin-top: 12px; padding-top: 24px; border-top: 2px solid var(--ink); color: var(--body-ink); }

.mark--hero {
	position: absolute; z-index: 0; top: 20px; right: calc(max(0px, (100% - 1440px) / 2) - 120px);
	width: 760px; height: 760px; color: var(--ink); opacity: .07;
}

/* job cards (decorative UI, not copy) */
.jobcards { position: absolute; z-index: 1; top: 72px; right: calc(max(0px, (100% - 1440px) / 2) + 60px); width: 520px; height: 560px; }
.jobcard {
	position: absolute; display: flex; flex-direction: column; gap: 18px; padding: 28px;
	box-shadow: 0 24px 48px rgba(20, 21, 22, .22);
	clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
	animation: chf-float 6s ease-in-out infinite;
}
.jobcard--mine { left: 180px; top: 0; width: 340px; background: var(--ink); color: var(--on-dark); --tilt: 3deg; transform: rotate(var(--tilt)); }
.jobcard--listing { left: 0; top: 220px; width: 400px; background: var(--card); --tilt: -2deg; transform: rotate(var(--tilt)); box-shadow: 0 28px 56px rgba(20, 21, 22, .24); animation-delay: -3s; }
.jobcard:hover { animation-play-state: paused; transform: rotate(0deg); }
@keyframes chf-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.jobcard__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); }
.jobcard__title { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; text-transform: uppercase; }
.jobcard--listing .jobcard__title { font-size: 34px; }
.jobcard__rows { display: flex; flex-direction: column; border-top: 1px solid var(--hair-dark); }
.jobcard__row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--hair-dark); font-size: 15px; }
.jobcard__row:last-child { border-bottom: 0; }
.jobcard__row > :first-child { color: var(--muted-dark); }
.jobcard__row > :last-child { font-weight: 600; }
.is-yellow { color: var(--yellow); }
.jobcard__ghostbtn { display: flex; align-items: center; justify-content: center; height: 44px; border: 1px solid var(--on-dark); font-size: 15px; font-weight: 600; }
.jobcard__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.jobcard__tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* "Example" tag: marks the sample cards as illustrations, not real listings. Muted outline — not yellow (a trade tag), not orange (a button). */
.jobcard__example {
	display: inline-block; padding: 4px 7px; line-height: 1;
	border: 1px solid var(--ink-2); color: var(--ink-2);
	font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.jobcard--mine .jobcard__example { position: absolute; top: 25px; right: 28px; border-color: var(--muted-dark); color: var(--muted-dark); }
.jobcard__tag { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--yellow); padding: 6px 10px; }
.jobcard__when { font-size: 14px; color: var(--ink-2); }
.jobcard__chips { display: flex; gap: 10px; flex-wrap: wrap; }
.jobcard__chips > span { font-size: 14px; font-weight: 500; padding: 6px 12px; border: 1px solid var(--ink); }
.jobcard__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; border-top: 1px solid var(--hair-card); }
.jobcard__applied { font-size: 15px; color: var(--ink-2); white-space: pre; }
.jobcard__applied .is-strong { color: var(--ink); font-weight: 700; }
.jobcard__apply {
	display: inline-flex; align-items: center; height: 44px; padding: 0 22px; background: var(--orange); color: #FFFFFF; font-size: 15px; font-weight: 700;
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

@media (min-width: 1100px) and (max-width: 1279px) {
	.jobcards { right: 24px; transform: scale(.8); transform-origin: top right; }
}
@media (max-width: 1099px) {
	.jobcards { position: relative; top: auto; right: auto; align-self: center; width: 520px; max-width: 100%; height: 560px; margin-top: 8px; }
	.mark--hero { top: 40px; right: -90px; width: 420px; height: 420px; }
}

/* ---- 7.2 ticker ---- */
.ticker {
	z-index: 1; height: 72px; display: flex; align-items: center; overflow: hidden; white-space: nowrap;
	background: var(--ink); color: var(--on-dark);
	font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: .1em; text-transform: uppercase;
}
.ticker__track { display: flex; width: max-content; animation: chf-ticker 36s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__run { display: flex; align-items: center; gap: 28px; padding-right: 28px; flex-shrink: 0; }
.ticker__sep { width: 22px; height: 22px; color: var(--yellow); flex-shrink: 0; }
@keyframes chf-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- 7.3 two paths ---- */
.paths {
	padding: 112px var(--pad-x) 96px;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start;
}
.path {
	display: flex; flex-direction: column; gap: 28px; padding: 56px;
	box-shadow: 0 24px 48px rgba(20, 21, 22, .14);
	clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.path h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(42px, 4.4445vw, 64px); line-height: .9; text-transform: uppercase; }
.path > p:not(.path__more) { color: var(--body-ink); }
.path--employer { background: var(--card); transform: rotate(-1.5deg); }
.path--worker {
	margin-top: 112px; margin-left: -40px; transform: rotate(1.5deg);
	background: var(--ink); background-image: var(--grid-dark); background-size: 40px 40px; color: var(--on-dark);
	box-shadow: 0 24px 48px rgba(20, 21, 22, .22);
}
.path--worker > p:not(.path__more) { color: var(--para-dark); }
.steps { counter-reset: step; display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.steps li {
	counter-increment: step;
	display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: baseline;
	padding: 20px 0; border-bottom: 1px solid var(--hair-card);
}
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; }
.path--worker .steps { border-top-color: var(--yellow); }
.path--worker .steps li { border-bottom-color: var(--hair-dark); }
.path--worker .steps li::before { color: var(--yellow); }
.path__more a, .founder a, .text-link {
	font-weight: 700; text-decoration: underline; text-decoration-color: var(--yellow);
	text-decoration-thickness: 4px; text-underline-offset: 5px;
}
.path--worker a, .founder a { color: var(--on-dark); }
.path--worker a:hover, .founder a:hover { color: var(--yellow); }
.or {
	position: absolute; left: 50%; top: 176px; z-index: 3; width: 96px; height: 96px; margin-left: -48px;
	border-radius: 999px; background: var(--yellow); box-shadow: 0 12px 24px rgba(20, 21, 22, .18);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-display); font-weight: 800; font-size: 40px; text-transform: uppercase;
}

/* ---- 7.4 straight answers ---- */
.ledger {
	padding: 64px var(--pad-x) 112px;
	display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: start;
}
.ledger__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 6.1112vw, 88px); line-height: .88; text-transform: uppercase; }
.outline { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.ledger__rows { position: relative; counter-reset: q; border-top: 3px solid var(--ink); }
.ledger__item {
	counter-increment: q;
	display: grid; grid-template-columns: 72px 1fr 1.2fr; gap: 24px; align-items: start;
	padding: 32px 0; border-bottom: 1px solid var(--hair-ledger);
}
/* Q1-Q4: same big condensed numeral as the 01-04 steps above (Gerek, 2026-09-25: the small "Q.01" did not read). */
.ledger__item::before {
	content: "Q" counter(q);
	font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: .82; letter-spacing: -.01em;
	color: var(--ink);
}
.ledger__item h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 2.5vw, 36px); line-height: .95; text-transform: uppercase; }
.ledger__item p { color: var(--body-ink); }
.note {
	position: absolute; left: -444px; top: 420px; z-index: 2; width: 300px; padding: 28px;
	background: var(--ink); color: var(--on-dark); transform: rotate(-3deg);
	box-shadow: 0 20px 40px rgba(20, 21, 22, .2);
	font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; text-transform: uppercase;
	clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.note::before { content: attr(data-a); white-space: pre-wrap; }
.note::after { content: attr(data-b); color: var(--yellow); }

/* ---- 7.5 founder ---- */
.founder {
	padding: 112px var(--pad-x); overflow: hidden;
	background: var(--ink); background-image: var(--grid-dark); background-size: 40px 40px; color: var(--on-dark);
	display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 80px; align-items: end;
}
.founder__copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 32px; }
.founder h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 6.6667vw, 96px); line-height: .88; text-transform: uppercase; }
.founder p { color: var(--para-dark); max-width: 600px; }
.founder__p2 { display: flex; flex-direction: column; gap: 20px; }
.pull {
	display: block; color: var(--on-dark);
	font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 3.0556vw, 44px); line-height: .98; text-transform: uppercase;
	border-left: 6px solid var(--yellow); padding-left: 24px;
}
.pull-rest { display: block; text-wrap: pretty; }
/* Balanced wrapping: the big line splits into even lines, never a lone last word (Gerek, 2026-09-26). */
.pull { text-wrap: balance; }
.founder__photo { position: relative; z-index: 1; order: -1; width: 420px; height: 540px; }
.founder__frame {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 24px;
	border: 2px dashed #5A5D63; background: #1E2024; transform: rotate(-2deg);
	font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-dark); text-align: center;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), calc(100% - 64px) 100%, 0 100%);
}
/* The duotone is baked into the file (handoff): no CSS filters on the photo. */
.founder__img {
	display: block; width: 100%; height: 100%; max-width: none;
	object-fit: cover; object-position: 50% 30%;
	transform: rotate(-2deg); box-shadow: 0 24px 48px rgba(0, 0, 0, .4);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), calc(100% - 64px) 100%, 0 100%);
}
.founder__tag { position: absolute; box-shadow: 0 16px 32px rgba(0, 0, 0, .35); color: var(--ink); }
.founder__tag--years { right: -48px; top: -76px; display: flex; flex-direction: column; gap: 2px; padding: 18px 24px; background: var(--yellow); transform: rotate(4deg); }
.founder__tag--years .big { font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: .9; }
.founder__tag--years .small { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.founder__tag--day { left: -36px; bottom: 60px; padding: 14px 20px; background: #FFFFFF; transform: rotate(-5deg); font-family: var(--font-display); font-weight: 700; font-size: 22px; text-transform: uppercase; }
.ghost {
	position: absolute; right: -20px; top: -40px; z-index: 0; pointer-events: none;
	font-family: var(--font-display); font-weight: 800; font-size: 520px; line-height: .8; letter-spacing: -.04em;
	color: transparent; -webkit-text-stroke: 2px rgba(255, 194, 14, .16);
	will-change: transform;
}

/* ---- 7.6 who this isn't for ---- */
.sign {
	padding: 96px var(--pad-x) 112px;
	display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 48px; align-items: start;
}
.stack { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: .84; }
.stack__line { display: block; }
.sign h2 { font-size: clamp(72px, 7.7778vw, 112px); }
.is-red { color: var(--red); }
.sign__notes { position: relative; height: 620px; }
.sign__notes li {
	position: absolute; display: flex; flex-direction: column; gap: 16px; padding: 28px;
	font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1; text-transform: uppercase;
	box-shadow: 0 20px 40px rgba(20, 21, 22, .2);
	transform: rotate(var(--tilt, 0deg));
}
/* Round X badge (one of the two allowed round shapes): ::before is the disc, ::after the X on top of it. */
.sign__notes li::before { content: ""; flex: none; width: 36px; height: 36px; border-radius: 999px; background-color: var(--red); }
.sign__notes li::after {
	content: ""; position: absolute; left: 28px; top: 28px; width: 36px; height: 36px;
	background-color: #FFFFFF;
	-webkit-mask: var(--x) center / 14px no-repeat; mask: var(--x) center / 14px no-repeat;
}
.sign__notes li:nth-child(1) { left: 0; top: 0; width: 320px; background: var(--card); --tilt: -4deg; box-shadow: 0 20px 40px rgba(20, 21, 22, .16); }
.sign__notes li:nth-child(2) { left: 360px; top: 40px; width: 340px; background: var(--ink); color: var(--on-dark); --tilt: 3deg; box-shadow: 0 20px 40px rgba(20, 21, 22, .22); }
.sign__notes li:nth-child(3) { left: 100px; top: 220px; width: 300px; background: var(--red); color: #FFFFFF; --tilt: 2deg; }
.sign__notes li:nth-child(3)::before { background-color: #FFFFFF; }
.sign__notes li:nth-child(3)::after { background-color: var(--red); }
.sign__notes li:nth-child(4) { left: 440px; top: 260px; width: 320px; background: var(--card); --tilt: -2deg; box-shadow: 0 20px 40px rgba(20, 21, 22, .16); }
.sign__notes li:nth-child(5) { left: 20px; top: 420px; width: 340px; background: var(--ink); color: var(--on-dark); --tilt: -3deg; }
.sign__notes li:nth-child(6) { left: 400px; top: 460px; width: 330px; background: var(--yellow); --tilt: 4deg; }
.sign__notes li:nth-child(6)::before { background-color: var(--ink); }

/* ---- 7.7 close ---- */
.close { padding: 40px var(--pad-x) 112px; }
.close__panel {
	position: relative; overflow: hidden; padding: 96px 112px;
	background: var(--ink); background-image: var(--grid-dark); background-size: 40px 40px; color: var(--on-dark);
	display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; align-items: end;
	clip-path: polygon(32px 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%, 0 32px);
}
.mark--close { position: absolute; right: -60px; top: -60px; width: 520px; height: 520px; color: var(--yellow); opacity: .22; }
.close h2 { position: relative; font-size: clamp(80px, 10.5556vw, 152px); }
.close__body { position: relative; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.close__body p { font-size: 22px; color: var(--on-dark); }

/* ---- homepage: narrower desktops ---- */
@media (max-width: 1279px) {
	.sign__notes { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
	.sign__notes li { position: relative; left: auto !important; top: auto !important; width: auto !important; }
	.sign__notes li:nth-child(odd) { --tilt: -1.5deg; }
	.sign__notes li:nth-child(even) { --tilt: 1.5deg; }
	.close__panel { padding: 80px 64px; }
}

/* ---- homepage: tablet ---- */
@media (max-width: 1099px) {
	.ledger, .sign, .founder { grid-template-columns: 1fr; gap: 40px; }
	.ledger { padding: 48px var(--gut) 64px; }
	.ledger__rows { display: flex; flex-direction: column; }
	.note { position: relative; left: auto; top: auto; margin: 16px 0 24px; align-self: flex-start; transform: rotate(-2deg); }
	.founder { padding: 80px var(--gut); }
	.founder__photo { order: 0; margin: 16px 0 0 10px; }
	.sign { padding: 64px var(--gut) 80px; }
}
@media (max-width: 899px) {
	.paths { grid-template-columns: 1fr; gap: 0; padding: 64px var(--gut) 48px; }
	.path--worker { margin: 0; }
	.path--employer { transform: rotate(-1deg); }
	.path--worker { transform: rotate(1deg); }
	.or { position: relative; left: auto; top: auto; margin: -24px auto; }
	.close__panel { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- homepage: tablets, 600-1099 (portrait iPads incl. the 744px mini). No tablet mockup exists;
   built from handoff §10 plus Gerek's review of 2026-09-25. ---- */
@media (min-width: 600px) and (max-width: 1099px) {
	/* hero: the desktop's left-aligned staggered headline, bigger; a real button, not a full-width bar */
	.hero-title { padding-top: 48px; font-size: clamp(60px, 9vw, 92px); }
	.hero { padding-bottom: 56px; }
	/* job cards side by side */
	.jobcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; align-self: stretch; width: auto; max-width: none; height: auto; margin-top: 16px; }
	.jobcard { position: relative; left: auto; top: auto; width: auto; }
	.jobcard--mine { --tilt: 2deg; }
	.jobcard--listing { --tilt: -2deg; margin-top: 28px; }
	.jobcard__top { flex-wrap: wrap; }
	/* founder: photo left, headline + first paragraph right, the pull line and the rest across the bottom */
	.founder { display: grid; grid-template-columns: minmax(220px, 40%) minmax(0, 1fr); gap: 28px 40px; align-items: start; padding: 72px var(--gut); }
	.founder__copy { display: contents; }
	.founder__copy > * { position: relative; z-index: 1; }
	.founder h2 { grid-column: 2; grid-row: 1; font-size: clamp(48px, 7vw, 72px); }
	.founder__copy > p:first-of-type { grid-column: 2; grid-row: 2; }
	.founder__p2 { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; max-width: none; }
	.founder__photo { grid-column: 1; grid-row: 1 / span 2; order: 0; width: 100%; height: auto; aspect-ratio: 420 / 540; margin: 92px 0 0; }
	.founder__tag--years { right: -16px; top: -84px; padding: 14px 18px; transform: rotate(3deg); }
	.founder__tag--years .big { font-size: 48px; }
	.founder__tag--years .small { font-size: 11px; }
	.founder__tag--day { left: -16px; bottom: 36px; padding: 10px 14px; font-size: 18px; transform: rotate(-4deg); }
	.ghost { font-size: 360px; }
	/* close: one centered column */
	.close__panel { grid-template-columns: 1fr; justify-items: center; align-items: center; gap: 32px; padding: 72px 56px; text-align: center; }
	.close__body { align-items: center; }
	.close__body p { font-size: var(--body); }
}
/* Small tablets: at 24px the answer column got ~6 words a line, so each answer sits under its question. */
@media (min-width: 600px) and (max-width: 899px) {
	.ledger__item { grid-template-columns: 72px minmax(0, 1fr); row-gap: 10px; }
	.ledger__item::before { grid-row: 1 / span 2; }
	.ledger__item p { grid-column: 2; }
}

/* ---- homepage: phones (390 mockup) ---- */
@media (max-width: 599px) {
	.hero-title { padding: 36px 20px 0; font-size: 50px; line-height: .9; letter-spacing: -.01em; text-align: center; }
	.hero-title__line { margin-left: auto !important; margin-right: auto; }
	.hero-title__line--3 { padding: 0 8px; margin-top: 4px; }
	.hero-title__line--4 { -webkit-text-stroke-width: 1.6px; margin-top: 4px; }
	.hero { padding: 18px 20px 0; gap: 18px; }
	.hero-tag { align-self: center; height: auto; line-height: 1.6; padding: 10px 12px; font-size: 12px; letter-spacing: .08em; text-align: center; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
	.hero-lede { text-align: center; }
	.btn--xl { display: flex; width: 100%; height: 64px; padding: 0 16px; font-size: 22px; gap: 12px; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
	.btn-row { display: block; }
	.hero-da { margin-top: 0; padding-top: 18px; }
	.jobcards { width: 100%; max-width: 350px; height: 470px; align-self: center; margin: 8px 0 0; }
	.jobcard { padding: 22px; gap: 14px; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
	.jobcard--mine { left: 30px; width: calc(100% - 30px); max-width: 320px; --tilt: 2deg; }
	.jobcard--listing { top: 170px; width: calc(100% - 10px); max-width: 340px; --tilt: -1.5deg; }
	.jobcard__eyebrow, .jobcard__tag { font-size: 11px; }
	.jobcard__example { font-size: 10px; padding: 3px 6px; }
	.jobcard--mine .jobcard__example { top: 19px; right: 22px; }
	.jobcard__title { font-size: 26px; }
	.jobcard--listing .jobcard__title { font-size: 28px; }
	.jobcard__row { padding: 10px 0; font-size: 14px; }
	.jobcard__row--desk, .jobcard__ghostbtn { display: none; }
	.jobcard__when, .jobcard__chips > span { font-size: 13px; }
	.jobcard__chips { gap: 8px; }
	.jobcard__chips > span { padding: 5px 10px; }
	.jobcard__foot { padding-top: 14px; }
	.jobcard__applied { font-size: 14px; }
	.jobcard__apply { padding: 0 18px; font-size: 14px; }

	.ticker { height: 56px; font-size: 20px; }
	.ticker__track { animation-duration: 30s; }

	.paths { padding: 40px 20px 32px; }
	.path { padding: 28px 24px; gap: 20px; box-shadow: 0 20px 40px rgba(20, 21, 22, .14); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
	.path h2 { font-size: 42px; text-align: center; }
	.steps li { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
	.steps li::before { font-size: 28px; }
	.path__more a, .founder a { text-decoration-thickness: 3px; text-underline-offset: 4px; }
	.or { width: 64px; height: 64px; margin: -20px auto; font-size: 28px; box-shadow: 0 10px 20px rgba(20, 21, 22, .18); }

	.ledger { padding: 40px 20px 48px; gap: 28px; }
	.ledger__title { font-size: 56px; text-align: center; }
	.outline { -webkit-text-stroke-width: 1.6px; }
	.ledger__item { display: flex; flex-direction: column; gap: 10px; padding: 22px 0; }
	.ledger__item::before { font-size: 34px; }
	.ledger__item h3 { font-size: 30px; }
	.note { margin: -12px 0 22px; padding: 18px 20px; font-size: 24px; width: auto; max-width: 320px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: 0 16px 32px rgba(20, 21, 22, .2); }

	.founder { padding: 48px 20px 56px; display: flex; flex-direction: column; gap: 22px; }
	.founder__copy { gap: 22px; }
	.founder h2 { font-size: 56px; text-align: center; }
	.founder__p2 { gap: 14px; }
	.pull { font-size: 32px; border-left-width: 5px; padding-left: 16px; }
	.founder__photo { width: min(330px, calc(100% - 24px)); height: 400px; margin: 102px 0 0 10px; }
	.founder__frame { font-size: 12px; padding: 20px; transform: rotate(-1.5deg); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), calc(100% - 48px) 100%, 0 100%); }
	.founder__img { transform: rotate(-1.5deg); box-shadow: 0 20px 40px rgba(0, 0, 0, .4); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), calc(100% - 48px) 100%, 0 100%); }
	.founder__tag--years { right: -14px; top: -78px; padding: 14px 18px; transform: rotate(3deg); box-shadow: 0 12px 24px rgba(0, 0, 0, .35); }
	.founder__tag--years .big { font-size: 48px; }
	.founder__tag--years .small { font-size: 11px; }
	.founder__tag--day { left: -18px; bottom: 40px; padding: 10px 14px; font-size: 18px; transform: rotate(-4deg); }
	.ghost { right: -30px; top: -20px; font-size: 260px; -webkit-text-stroke-width: 1.5px; }

	.sign { padding: 28px 20px 48px; gap: 28px; }
	.sign h2 { font-size: 72px; text-align: center; }
	.sign .stack__line:nth-child(1), .sign .stack__line:nth-child(2) { display: inline; }
	.sign .stack__line:nth-child(3) { margin-top: 0; }
	.sign__notes { display: flex; flex-direction: column; gap: 6px; }
	.sign__notes li { flex-direction: row; align-items: flex-start; gap: 14px; padding: 22px; font-size: 24px; box-shadow: 0 16px 32px rgba(20, 21, 22, .16); }
	.sign__notes li::before { width: 32px; height: 32px; }
	.sign__notes li::after { left: 22px; top: 22px; width: 32px; height: 32px; }
	.sign__notes li:nth-child(1) { --tilt: -2deg; }
	.sign__notes li:nth-child(2) { --tilt: 1.5deg; }
	.sign__notes li:nth-child(3) { --tilt: -1deg; }
	.sign__notes li:nth-child(4) { --tilt: 2deg; }
	.sign__notes li:nth-child(5) { --tilt: -1.5deg; }
	.sign__notes li:nth-child(6) { --tilt: 1deg; }

	.close { padding: 24px 20px 56px; }
	.close__panel { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: 44px 24px; clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); }
	.mark--close { right: -70px; top: -50px; width: 300px; height: 300px; opacity: .2; }
	.close h2 { font-size: 80px; text-align: center; }
	.close__body { gap: 24px; align-items: stretch; }
	.close__body p { font-size: 18px; color: var(--para-dark); }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
	padding: 72px var(--pad-x) 40px;
	background: var(--ink); background-image: var(--grid-dark); background-size: 40px 40px; color: var(--on-dark);
	display: flex; flex-direction: column; gap: 40px;
}
.site-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 64px; align-items: start; }
.site-footer__about { display: flex; flex-direction: column; gap: 20px; }
.brand--footer { margin-right: 0; gap: 12px; }
.brand--footer .brand__logo { width: 36px; height: 36px; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.brand--footer .brand__name { font-size: 22px; max-width: none; }
.site-footer__blurb { font-size: 16px; line-height: 1.6; color: var(--muted-dark); max-width: 400px; }
.site-footer__list { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.site-footer__list a { font-family: var(--font-display); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; color: var(--on-dark); }
.site-footer__list a:hover { color: var(--yellow); }
.site-footer__contact { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; font-size: 16px; color: var(--muted-dark); }
.site-footer__contact a { color: var(--on-dark); text-decoration: none; }
.site-footer__contact a:hover { color: var(--yellow); }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--hair-dark); font-size: 14px; color: var(--muted-dark); }
.credit { color: var(--muted-dark); text-decoration: none; }
.credit span { color: var(--on-dark); font-weight: 600; }
.credit:hover span { color: var(--yellow); }
.site-footer__wordmark {
	font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 7.5vw, 108px); line-height: .9; letter-spacing: -.02em;
	text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 194, 14, .4);
	white-space: nowrap; text-align: center;
}
.site-footer__wordmark::before { content: attr(data-deco); }

/* Tablets 600-1099: two columns, bigger logo (Gerek, 2026-09-25). After the base footer rules so it wins. */
@media (min-width: 600px) and (max-width: 1099px) {
	.site-footer { padding: 80px var(--gut) 36px; gap: 48px; }
	.site-footer__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px 80px; }
	.site-footer__list { gap: 18px; }
	.site-footer__contact { gap: 12px; }
	.site-footer__about { grid-column: 1; grid-row: 1 / span 2; gap: 24px; }
	.site-footer__nav { grid-column: 2; grid-row: 1; }
	.site-footer__contact { grid-column: 2; grid-row: 2; }
	.brand--footer { gap: 16px; }
	.brand--footer .brand__logo { width: 56px; height: 56px; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
	.brand--footer .brand__name { font-size: 28px; }
	.site-footer__blurb { font-size: 17px; }
}
@media (max-width: 599px) {
	.site-footer { padding: 48px 20px 28px; align-items: center; text-align: center; gap: 28px; }
	.site-footer__grid { display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; }
	.site-footer__about { align-items: center; gap: 28px; }
	.brand--footer { justify-content: center; }
	.brand--footer .brand__name { font-size: 20px; }
	.site-footer__nav { width: 100%; }
	.site-footer__list { gap: 4px; padding: 0; }
	.site-footer__list a { display: flex; align-items: center; justify-content: center; min-height: 44px; border-bottom: 1px solid var(--hair-dark); }
	.site-footer__contact { align-items: center; gap: 8px; padding: 0; }
	.site-footer__bottom { flex-direction: column; align-items: center; gap: 6px; width: 100%; padding-top: 16px; font-size: 13px; }
	.site-footer__wordmark { font-size: 40px; white-space: normal; -webkit-text-stroke-width: 1px; }
}

/* ==========================================================================
   INNER PAGES, ARTICLES HUB, ARTICLES
   Inner pages get their own designs as they arrive; these are the base styles
   they inherit (body size rule, chamfer, stripe, grid).
   ========================================================================== */
.page-head { padding: 72px var(--pad-x) 32px; }
.page-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 6.1112vw, 88px); line-height: .9; text-transform: uppercase; max-width: 16em; }
.page-head__lede { margin-top: 20px; max-width: 720px; color: var(--body-ink); }
.page-content { padding: 0 var(--pad-x) 96px; }
.page-content > * + *, .prose > * + * { margin-top: 1.2em; }
.page-content h2, .prose h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 3.8889vw, 56px); line-height: .92; text-transform: uppercase; margin-top: 1.6em; }
.page-content h3, .prose h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.2223vw, 32px); line-height: 1; text-transform: uppercase; margin-top: 1.4em; }
.page-content p, .page-content li, .prose p, .prose li { color: var(--body-ink); max-width: 72ch; }
.page-content ul, .prose ul { padding-left: 1.2em; list-style: square; }
.page-content ol, .prose ol { padding-left: 1.4em; list-style: decimal; }
.page-content li + li, .prose li + li { margin-top: .4em; }
.page-content a:not(.btn), .prose a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }

.site-main--article { padding: 72px var(--pad-x) 112px; }
.article { max-width: 820px; margin: 0 auto; }
.article__head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.article__cat { align-self: flex-start; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--yellow); color: var(--ink); padding: 6px 10px; text-decoration: none; }
.article .page-title { font-size: clamp(40px, 4.4445vw, 64px); max-width: none; }
.article__date { font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.article__hero { margin-bottom: 40px; }
.article__hero img { width: 100%; clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.prose h4 { font-family: var(--font-display); font-weight: 700; font-size: 24px; text-transform: uppercase; margin-top: 1.4em; }
.prose strong { font-weight: 700; color: var(--ink); }
.prose img, .prose figure img { clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.prose figure { margin-top: 1.6em; }
.prose figcaption { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.prose blockquote { border-left: 6px solid var(--yellow); padding: 8px 0 8px 24px; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.2223vw, 32px); line-height: 1.05; text-transform: uppercase; }
.prose blockquote p { color: var(--ink); max-width: none; }
.prose table { width: 100%; border-collapse: collapse; font-size: .85em; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--hair-ledger); vertical-align: top; }
.prose th { background: var(--ink); color: var(--on-dark); font-weight: 700; }
.prose hr { border: 0; height: 8px; background: repeating-linear-gradient(135deg, var(--yellow) 0 14px, var(--ink) 14px 28px); margin: 2.4em 0; }
.prose details { border-top: 1px solid var(--hair-ledger); padding: 18px 0; }
.prose details:last-of-type { border-bottom: 1px solid var(--hair-ledger); }
.prose summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 26px; text-transform: uppercase; line-height: 1.05; }
.prose .faq h3, .prose [class*="faq"] h3 { border-top: 1px solid var(--hair-ledger); padding-top: 18px; }

.site-main--hub .page-content { padding-bottom: 32px; }
.articles { padding: 0 var(--pad-x) 112px; }
.cat-filter ul { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.cat-filter a {
	display: inline-flex; align-items: center; height: 40px; padding: 0 16px;
	background: var(--card); border: 1px solid var(--ink); color: var(--ink);
	font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.cat-filter a:hover, .cat-filter a[aria-current="page"] { background: var(--ink); color: var(--on-dark); }
.article-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; }
.article-card__link {
	display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 28px; background: var(--card); text-decoration: none; color: var(--ink);
	box-shadow: 0 16px 32px rgba(20, 21, 22, .1);
	clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.article-card__link:hover { color: var(--ink); }
.article-card__img { margin: -28px -28px 8px; width: calc(100% + 56px); max-width: none; aspect-ratio: 16 / 9; object-fit: cover; }
.article-card__meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.article-card__cat { color: var(--ink); background: var(--yellow); padding: 2px 8px; }
.article-card__title { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: .95; text-transform: uppercase; }
.article-card__link:hover .article-card__title { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 4px; }
.article-card__excerpt { font-size: 17px; color: var(--body-ink); }
.pagination { margin-top: 48px; }
.pagination .nav-links { display: flex; gap: 8px; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--ink); text-decoration: none; font-weight: 700; }
.pagination .page-numbers.current { background: var(--ink); color: var(--on-dark); }
.site-main--404 .page-head { padding-bottom: 160px; }

/* Hazard tape above the footer on every inner page (footer.php). */
.hazard--footer { position: relative; z-index: 1; }

/* ==========================================================================
   INNER-PAGE KIT (INNER-PAGES.md). Pages built by tools/build-inner.mjs,
   page.php with _itv_layout = kit. Section rhythm on the trunk pages:
   hero ground -> problem WHITE -> steps ground -> why BLACK -> tiles WHITE ->
   James ground -> ledger WHITE -> not-for ground -> close ground.
   ========================================================================== */
.site-main--kit { position: relative; }
.site-main--kit > * { position: relative; }
.kit-h2 { font-family: var(--font-display); font-weight: 800; line-height: .88; letter-spacing: -.01em; text-transform: uppercase; }
.site-main--kit a:not(.btn) { font-weight: 700; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 4px; text-underline-offset: 5px; }
.site-main--kit .kit-tiles__list a { text-decoration: none; }

/* ---- hero: H1 (theme) + DA + hero object ---- */
.kit-title {
	z-index: 2; padding: 64px var(--pad-x) 0;
	display: flex; flex-direction: column; align-items: flex-start; max-width: calc(780px + 2 * var(--pad-x));
	font-family: var(--font-display); font-weight: 800; font-size: 84px; line-height: .88; letter-spacing: -.015em; text-transform: uppercase;
}
.kit-title__line { display: block; }
.kit-title__line:last-child { background: var(--yellow); padding: 0 16px; margin-top: 6px; }
.kit-hero { position: static !important; padding: 36px var(--pad-x) 80px; display: flex; flex-direction: column; gap: 24px; min-height: 300px; }
.kit-da {
	position: relative; z-index: 2; max-width: 760px; padding: 24px 0 0 34px; border-top: 3px solid var(--ink);
	color: var(--ink); font-weight: 500;
}
.kit-da::before { content: ""; position: absolute; left: 0; top: 32px; width: 14px; height: 14px; background: var(--yellow); }
.kit-da--more { padding-top: 0; border-top: 0; font-weight: 400; color: var(--body-ink); }
.kit-da--more::before { display: none; }
.mark--kit-hero { position: absolute; z-index: 0; top: 0; right: calc(max(0px, (100% - 1440px) / 2) - 60px); width: 520px; height: 520px; color: var(--ink); opacity: .07; }

/* hero objects: mock UI, every word a data-t attribute, "Example" tag (Gerek, 2026-09-25) */
.kit-obj {
	position: absolute; z-index: 1; top: 56px; right: calc(max(0px, (100% - 1440px) / 2) + 100px);
	transform-origin: top right; animation: kit-settle .6s cubic-bezier(.2, .7, .2, 1) both;
}
.kit-obj > :first-child { animation: chf-float 6s ease-in-out .6s infinite; }
@keyframes kit-settle { from { opacity: 0; rotate: 6deg; } to { opacity: 1; rotate: 0deg; } }
.obj-example {
	display: inline-block; padding: 4px 8px; line-height: 1; border: 1px solid currentColor; opacity: .85;
	font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
/* the mock Post / Apply button drawn inside a hero object (orange: it is a button in the drawing) */
.obj-btn {
	display: inline-flex; align-items: center; align-self: flex-start; height: 48px; padding: 0 22px;
	background: var(--orange); color: #FFFFFF; font-size: 16px; font-weight: 800;
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.obj-btn--sm { height: 40px; padding: 0 18px; margin-top: 4px; font-size: 15px; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }

/* Contractors: crew roster board */
.kit-obj--roster { width: 440px; }
.roster {
	display: flex; flex-direction: column; gap: 18px; padding: 28px 32px 32px;
	background: var(--ink); background-image: var(--grid-dark); background-size: 40px 40px; color: var(--on-dark);
	transform: rotate(2deg); filter: drop-shadow(0 28px 28px rgba(20, 21, 22, .28));
	clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 48px, 100% 100%, 0 100%);
}
.roster__top { display: flex; justify-content: space-between; align-items: center; }
.roster__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); }
.roster__rows { display: flex; flex-direction: column; }
.roster__row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hair-dark); font-size: 17px; }
.roster__name { font-family: var(--font-display); font-weight: 700; font-size: 22px; text-transform: uppercase; }
.roster__filled { display: flex; align-items: center; gap: 8px; color: var(--muted-dark); }
.roster__filled::after { content: ""; order: -1; width: 16px; height: 16px; background: var(--yellow); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.roster__open { padding: 4px 10px; background: var(--red); color: #FFFFFF; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
/* "1 spot open": a chamfered square, not a disc (Gerek, 2026-09-26: no new radius exception) */
.roster__badge {
	position: absolute; right: -40px; bottom: -36px; width: 128px; height: 128px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: .9;
	background: var(--yellow); color: var(--ink); transform: rotate(-8deg);
	clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.roster__badge-n { font-family: var(--font-display); font-weight: 800; font-size: 56px; }
.roster__badge-t { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* Trade Workers: job feed */
.kit-obj--feed { width: 380px; }
.feed {
	display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--card);
	transform: rotate(-2deg); filter: drop-shadow(0 24px 28px rgba(20, 21, 22, .22));
	clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.feed__top { display: flex; justify-content: space-between; align-items: center; }
.feed__trade { padding: 8px 12px; background: var(--yellow); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.feed__job {
	display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--panel);
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.feed__job--open { background: var(--ink); color: var(--on-dark); }
.feed__title { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1; text-transform: uppercase; }
.feed__when { font-size: 14px; color: var(--ink-2); }
.feed__job--open .feed__when { color: var(--muted-dark); }
/* the tag sits above the card's top row so it never covers the Example tag */
.feed__tag {
	position: absolute; right: -36px; top: -58px; display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; line-height: .9;
	background: var(--ink); color: var(--on-dark); transform: rotate(4deg); box-shadow: 0 16px 32px rgba(20, 21, 22, .24);
}
.feed__tag-n { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--yellow); }
.feed__tag-t { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* ---- ticker (trunk pages only): 30px type ---- */
.ticker--kit { font-size: 30px; }

/* ---- problem: H2 left, Ps right, last P in the black reveal panel. WHITE ---- */
.kit-problem {
	padding: 104px var(--pad-x); background: var(--card);
	display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 80px; align-items: start;
}
.kit-problem .kit-h2 { font-size: 80px; }
.kit-problem__body { display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }
.kit-problem__body > p { color: var(--body-ink); }
.kit-reveal {
	padding: 36px 40px; background: var(--ink); background-image: var(--grid-dark); background-size: 40px 40px; transform: rotate(-1deg);
	clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.kit-reveal p { color: var(--para-dark); }

/* ---- steps: one 860px tilted card, white (employer) or black (worker). ground ---- */
.kit-steps { padding: 40px var(--pad-x) 112px; }
.mark--kit-steps { position: absolute; right: 40px; top: 40px; width: 420px; height: 420px; color: var(--ink); opacity: .08; }
.kit-steps__card {
	position: relative; width: 860px; max-width: 100%; padding: 56px 64px;
	display: flex; flex-direction: column; gap: 28px; transform: rotate(-1deg);
	clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.kit-steps__card--light { background: var(--card); }
.kit-steps__card--dark { background: var(--ink); background-image: var(--grid-dark); background-size: 40px 40px; color: var(--on-dark); }
.kit-steps .kit-h2 { font-size: 64px; }
.kit-steps__card--light > p { color: var(--body-ink); }
.kit-steps__card--dark > p { color: var(--para-dark); }
.kit-steps__card--dark a:not(.btn) { color: var(--on-dark); }
.kit-list { counter-reset: step; display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.kit-list li {
	counter-increment: step; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; align-items: baseline;
	padding: 22px 0; border-bottom: 1px solid var(--hair-card);
}
.kit-list li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; }
.kit-steps__card--dark .kit-list { border-top-color: var(--yellow); }
.kit-steps__card--dark .kit-list li { border-bottom-color: var(--hair-dark); }
.kit-steps__card--dark .kit-list li::before { color: var(--yellow); }

/* ---- why: dark grid band, three columns under yellow rules. BLACK ---- */
.kit-why {
	padding: 104px var(--pad-x); display: flex; flex-direction: column; gap: 48px;
	background: var(--ink); background-image: var(--grid-dark); background-size: 40px 40px; color: var(--on-dark);
}
.kit-why .kit-h2 { font-size: 88px; }
.kit-why__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.kit-why__cols > p { padding-top: 20px; border-top: 3px solid var(--yellow); color: var(--para-dark); }
.kit-why a:not(.btn) { color: var(--on-dark); }
.kit-why a:not(.btn):hover { color: var(--yellow); }
.kit-quote { display: block; margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; text-transform: uppercase; color: var(--yellow); }

/* ---- link tiles: tilted white tiles, 3-up, yellow arrow square. WHITE ---- */
.kit-tiles { padding: 104px var(--pad-x) 96px; background: var(--card); display: flex; flex-direction: column; gap: 48px; }
.kit-tiles .kit-h2 { font-size: 80px; max-width: 900px; }
.kit-tiles__group { display: flex; flex-direction: column; gap: 24px; }
.kit-tiles__group > p { color: var(--body-ink); }
.kit-tiles__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.kit-tiles__list li { filter: drop-shadow(0 14px 14px rgba(20, 21, 22, .12)); transition: translate .2s ease; }
.kit-tiles__list li:nth-child(5n+1) { transform: rotate(-1.5deg); }
.kit-tiles__list li:nth-child(5n+2) { transform: rotate(1deg); }
.kit-tiles__list li:nth-child(5n+3) { transform: rotate(-1deg); }
.kit-tiles__list li:nth-child(5n+4) { transform: rotate(1.5deg); }
.kit-tiles__list li:nth-child(5n+5) { transform: rotate(-.5deg); }
.kit-tiles__list a {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 96px; padding: 20px 24px;
	background: var(--card); color: var(--ink);
	font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: .95; text-transform: uppercase;
	clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.kit-tiles__list a::after {
	content: ""; flex: none; width: 40px; height: 40px;
	background: var(--yellow) var(--arrow-ink) center / 20px no-repeat; transition: transform .2s ease;
}
.kit-tiles__list a:hover { color: var(--ink); }
.kit-tiles__list a:hover::after { transform: translateX(4px); }
.kit-tiles__list li:hover { translate: 0 -3px; }

/* ---- James: copy first in the DOM, photo drawn left. ground ---- */
.kit-james {
	padding: 96px var(--pad-x);
	display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 72px; align-items: center;
}
.kit-james__copy { display: flex; flex-direction: column; gap: 24px; }
.kit-james .kit-h2 { font-size: 72px; }
.kit-james__copy p { color: var(--body-ink); }
.kit-james__photo { order: -1; width: 320px; height: 400px; filter: drop-shadow(0 24px 24px rgba(20, 21, 22, .25)); }
/* the duotone is baked into the file (handoff): no CSS filter on the image itself */
.kit-james__img, .kit-james__frame {
	display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%;
	transform: rotate(-2deg); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), calc(100% - 48px) 100%, 0 100%);
}
.kit-james__frame { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--ink-2); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

/* ---- ledger: H2 left, Q rows right. WHITE ---- */
.kit-ledger {
	padding: 96px var(--pad-x) 104px; background: var(--card);
	display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: start;
}
.kit-ledger .kit-h2 { font-size: 88px; }
.kit-ledger__rows { counter-reset: q; display: flex; flex-direction: column; border-top: 3px solid var(--ink); }
.kit-ledger__item {
	counter-increment: q; display: grid; grid-template-columns: 96px 1fr 1.2fr; gap: 24px; align-items: start;
	padding: 32px 0; border-bottom: 1px solid var(--hair-ledger);
}
.kit-ledger__item::before { content: "Q" counter(q); font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; color: var(--ink-2); }
.kit-ledger__item h3 { font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: .95; text-transform: uppercase; }
.kit-ledger__item p, .kit-ledger__outro { color: var(--body-ink); }
.kit-ledger__outro { padding-top: 28px; }

/* ---- not-for: hazard stripe, then one row of tilted notes. ground ---- */
.kit-notfor { padding: 96px var(--pad-x) 112px; display: flex; flex-direction: column; gap: 48px; }
.kit-notfor .kit-h2 { font-size: 88px; max-width: 900px; }
.kit-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; align-items: start; padding: 0 20px; }
.kit-notfor--3 .kit-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kit-notes li {
	position: relative; display: flex; flex-direction: column; gap: 16px; padding: 28px;
	font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1; text-transform: uppercase;
	box-shadow: 0 20px 40px rgba(20, 21, 22, .18); transform: rotate(var(--tilt, 0deg));
}
/* round X badge (allowed round shape): ::before the disc, ::after the X */
.kit-notes li::before { content: ""; flex: none; width: 36px; height: 36px; border-radius: 999px; background-color: var(--red); }
.kit-notes li::after {
	content: ""; position: absolute; left: 28px; top: 28px; width: 36px; height: 36px; background-color: #FFFFFF;
	-webkit-mask: var(--x) center / 14px no-repeat; mask: var(--x) center / 14px no-repeat;
}
.kit-notes li:nth-child(4n+1) { background: var(--card); --tilt: -3deg; }
.kit-notes li:nth-child(4n+2) { background: var(--ink); color: var(--on-dark); --tilt: 2deg; margin-top: 40px; }
.kit-notes li:nth-child(4n+3) { background: var(--red); color: #FFFFFF; --tilt: -2deg; }
.kit-notes li:nth-child(4n+3)::before { background-color: #FFFFFF; }
.kit-notes li:nth-child(4n+3)::after { background-color: var(--red); }
.kit-notes li:nth-child(4n+4) { background: var(--yellow); --tilt: 3deg; margin-top: 40px; }
.kit-notes li:nth-child(4n+4)::before { background-color: var(--ink); }

/* ---- close (inner pages): centered black panel, H2 on one line, first word yellow ---- */
.kit-close { padding: 64px var(--pad-x) 112px; }
.kit-close__panel {
	position: relative; overflow: hidden; padding: 96px 112px;
	display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center;
	background: var(--ink); background-image: var(--grid-dark); background-size: 40px 40px; color: var(--on-dark);
	clip-path: polygon(32px 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%, 0 32px);
}
.mark--kit-close { position: absolute; right: -60px; top: -60px; width: 520px; height: 520px; color: var(--yellow); opacity: .22; }
.mark--kit-close2 { position: absolute; left: -80px; bottom: -120px; width: 420px; height: 420px; color: var(--yellow); opacity: .12; transform: scaleX(-1); }
.kit-close__title {
	position: relative; max-width: 1100px;
	font-family: var(--font-display); font-weight: 800; font-size: 104px; line-height: .88; text-transform: uppercase;
}
.kit-close__panel > p:not(.btn-row) { position: relative; max-width: 760px; font-size: 22px; color: var(--on-dark); }
.kit-close__panel a:not(.btn) { color: var(--on-dark); }
.kit-close__panel a:not(.btn):hover { color: var(--yellow); }
.kit-close .btn-row { position: relative; }

/* ==========================================================================
   INNER-PAGE KIT, BRANCH PAGES (INNER-PAGES.md batch 2 + 4): Electricians
   template + 8. Every H2 section's CSS-drawn visual sits AFTER its copy in the
   DOM. Shapes are inline SVG (round shapes are SVG circles); words are data-t.
   ========================================================================== */
.kit-band--white { background: var(--card); }
.kit-viz { display: flex; justify-content: center; min-width: 0; }
.kit-viz--wide { width: 100%; }

/* hero photo (7:9 duotone, served as-is) + yellow trade tag */
.kit-obj--photo { width: 400px; filter: drop-shadow(0 28px 28px rgba(20, 21, 22, .3)); }
.kit-obj__img {
	display: block; width: 400px; height: 514px; max-width: none; object-fit: cover; object-position: 50% 40%;
	transform: rotate(2deg); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), calc(100% - 56px) 100%, 0 100%);
}
.kit-obj__tag {
	position: absolute; left: -36px; bottom: 48px; padding: 12px 16px; background: var(--yellow); color: var(--ink); transform: rotate(-4deg);
	font-family: var(--font-display); font-weight: 700; font-size: 22px; text-transform: uppercase; line-height: 1.2;
}
.kit-da--more { padding-left: 0; margin-top: -8px; }

/* PROSE: copy + its visual (right; `--left` draws it left, copy stays first in the DOM) */
.kit-prose { padding: 104px var(--pad-x); display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 96px; align-items: center; }
.kit-prose__copy { display: flex; flex-direction: column; gap: 28px; max-width: 640px; }
.kit-prose .kit-h2 { font-size: 72px; }
.kit-prose__copy > p { color: var(--body-ink); }
.kit-prose .kit-reveal { padding: 32px 36px; }
.kit-prose--left .kit-viz { order: -1; }

/* DARK GRID Ps + referral chain */
.kit-refer {
	padding: 104px var(--pad-x); display: flex; flex-direction: column; gap: 56px;
	background: var(--ink); background-image: var(--grid-dark); background-size: 40px 40px; color: var(--on-dark);
}
.kit-refer .kit-h2 { font-size: 88px; max-width: 1000px; }
.kit-refer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.kit-refer__cols > p { padding-top: 20px; border-top: 3px solid var(--yellow); color: var(--para-dark); }
.kit-quote--inline { display: inline; margin: 0; font-size: 30px; }

/* STATEMENT: centered big idea + the gap bars */
.kit-statement { padding: 112px var(--pad-x); display: flex; flex-direction: column; align-items: center; gap: 48px; }
.kit-statement__copy { display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: 840px; text-align: center; }
.kit-statement .kit-h2 { font-size: 80px; }
.kit-statement__copy > p { color: var(--body-ink); }

/* CARD Ps + the mock job-post form. ground */
.kit-cardps { padding: 96px var(--pad-x) 112px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 72px; align-items: center; }
.kit-cardps__card {
	display: flex; flex-direction: column; gap: 24px; padding: 56px 64px; background: var(--card); transform: rotate(-1deg);
	clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.kit-cardps .kit-h2 { font-size: 60px; }
.kit-cardps__card > p { color: var(--body-ink); }

/* SIDE: copy left, visual right. WHITE */
.kit-side { padding: 104px var(--pad-x); display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 96px; align-items: center; }
.kit-side--odds { grid-template-columns: 440px minmax(0, 1fr); gap: 80px; }
.kit-side__copy { display: flex; flex-direction: column; gap: 28px; }
.kit-side .kit-h2 { font-size: 72px; }
.kit-side--odds .kit-h2 { font-size: 64px; }
.kit-side__copy > p { color: var(--body-ink); }

/* James, big (Concrete & Masonry) + the pull line with a yellow marker (Growing Your Crew) */
.kit-james--big { padding: 104px var(--pad-x); grid-template-columns: 440px minmax(0, 1fr); gap: 80px; }
.kit-james--big .kit-h2 { font-size: 80px; }
.kit-james--big .kit-james__photo { position: relative; width: 440px; height: 560px; filter: drop-shadow(0 28px 28px rgba(20, 21, 22, .3)); }
.kit-james--big .kit-james__img { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), calc(100% - 64px) 100%, 0 100%); }
.kit-james__tag {
	position: absolute; right: -40px; top: 40px; display: flex; flex-direction: column; gap: 2px; padding: 18px 24px; line-height: .9;
	background: var(--yellow); color: var(--ink); transform: rotate(4deg);
}
.kit-james__tag-n { font-family: var(--font-display); font-weight: 800; font-size: 64px; }
.kit-james__tag-t { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.kit-pull { display: block; margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1.05; text-transform: uppercase; color: var(--ink); }
.kit-pull__mark { background: var(--yellow); padding: 0 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Short Crew: the SAME-DAY RAIL replaces the step numbers (yellow line, ink dots, mark + "That day") */
.kit-list--rail li { position: relative; align-items: start; }
.kit-list--rail li::before { content: ""; position: relative; z-index: 1; width: 20px; height: 20px; margin: 6px 0 0 20px; background: var(--rail-dot) center / contain no-repeat; }
.kit-list--rail li::after { content: ""; position: absolute; left: 28px; top: -1px; bottom: -1px; width: 4px; background: var(--yellow); }
.kit-list--rail li:first-child::after { top: 36px; }
.kit-rail-end { display: flex; align-items: center; gap: 8px; margin-top: -8px; }
.kit-rail-end .disc { margin-left: 12px; margin-right: 14px; }
.kit-rail-end__t { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }

/* ---- drawings ---- */
.viz { position: relative; flex: none; }
.viz__svg { display: block; overflow: visible; }
.viz-caption { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.viz-caption.is-ink, .viz-labels .is-ink { color: var(--ink); }
.viz-labels { display: flex; justify-content: space-between; gap: 16px; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.viz-labels--dark { color: var(--muted-dark); }
.viz-labels .is-yellow { color: var(--yellow); }
.viz-tag {
	display: inline-block; padding: 10px 14px; line-height: 1.1;
	font-family: var(--font-display); font-weight: 700; font-size: 20px; text-transform: uppercase;
	box-shadow: 0 12px 24px rgba(20, 21, 22, .24);
}
.viz-tag--ink { background: var(--ink); color: var(--on-dark); }
.viz-tag--red { background: var(--red); color: #FFFFFF; }
.viz-tag--yellow { background: var(--yellow); color: var(--ink); }
.viz-tag--x { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.viz-tag--card {
	padding: 14px 20px; font-size: 24px; background: var(--card); box-shadow: none; filter: drop-shadow(0 12px 12px rgba(20, 21, 22, .16));
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.viz-tag--card.viz-tag--ink { background: var(--ink); }
/* the red X badge (an allowed round X badge) */
.viz-x { position: absolute; width: 40px; height: 40px; border-radius: 999px; background: var(--red); box-shadow: 0 8px 16px rgba(0, 0, 0, .3); }
.viz-x::after { content: ""; position: absolute; inset: 0; background: #FFFFFF; -webkit-mask: var(--x) center / 14px no-repeat; mask: var(--x) center / 14px no-repeat; }
.viz-x--inv { position: relative; flex: none; width: 24px; height: 24px; background: #FFFFFF; box-shadow: none; }
.viz-x--inv::after { background: var(--red); -webkit-mask-size: 12px; mask-size: 12px; }
.viz-x--36 { width: 36px; height: 36px; right: -18px; top: -18px; }

/* discs: an SVG circle behind the mark or a "?"/"+" */
.disc { position: relative; display: flex; align-items: center; justify-content: center; flex: none; }
.disc__svg { position: absolute; inset: 0; }
.disc .mark { position: relative; }
.disc--96 { width: 96px; height: 96px; } .disc--96 .mark { width: 52px; height: 52px; }
.disc--76 { width: 76px; height: 76px; } .disc--76 .mark { width: 40px; height: 40px; }
.disc--68 { width: 68px; height: 68px; } .disc--68 .mark { width: 36px; height: 36px; }
.disc--66 { width: 66px; height: 66px; } .disc--66 .mark { width: 36px; height: 36px; }
.disc--36 { width: 36px; height: 36px; } .disc--36 .mark { width: 20px; height: 20px; }
.mark--disc-y { color: var(--yellow); }
.mark--disc-ink, .mark--rail { color: var(--ink); }
.disc__q { position: relative; font-family: var(--font-display); font-weight: 800; font-size: 36px; line-height: 1; text-transform: uppercase; color: var(--ink-2); }
.disc__q--red { color: var(--red); }
.disc__q--grey { font-size: 44px; color: #5A5D63; }

/* first visuals: 460x340 drawings, tilted -1.5deg, tag bottom-left */
.viz--wall, .viz--duct, .viz--pipe, .viz--block, .viz--studs { width: 460px; height: 340px; transform: rotate(-1.5deg); }
.viz--wall .viz-tag, .viz--duct .viz-tag, .viz--pipe .viz-tag, .viz--block .viz-tag, .viz--studs .viz-tag { position: absolute; left: -24px; bottom: -22px; transform: rotate(-3deg); }
.viz--block .viz-tag--cw { transform: rotate(3deg); }
.viz--wall .viz-x { left: 280px; top: 208px; }
.viz--duct .viz-x { left: 180px; top: 250px; }
.viz--pipe .viz-x { left: 276px; top: 176px; }
.viz--block .viz-x { left: 400px; top: 140px; }
.viz--studs .viz-x { left: 196px; top: 60px; }

.viz-row { display: flex; align-items: center; gap: 10px; }
.viz-row--spread { justify-content: space-between; gap: 0; }
.viz--lineup { width: 460px; display: flex; flex-direction: column; gap: 20px; transform: rotate(-1.5deg); }
.viz-lineup__plank { height: 14px; background: var(--ink-2); }
.viz--lineup .viz-tag { align-self: flex-start; transform: rotate(-2deg); }
.viz--grow { width: 460px; display: flex; flex-direction: column; gap: 18px; transform: rotate(-1.5deg); }
.viz-grow__bar { width: 3px; height: 68px; background: var(--yellow); flex: none; }

.viz-card {
	display: flex; flex-direction: column; background: var(--card);
	clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.viz--applicant { width: 400px; transform: rotate(2deg); }
.viz--applicant .viz-card { gap: 16px; padding: 28px; filter: drop-shadow(0 24px 24px rgba(20, 21, 22, .2)); }
.viz-applicant__head { display: flex; align-items: center; gap: 14px; }
.viz-applicant__pic { width: 56px; height: 56px; background: #DADCD7; }
.viz-applicant__lines { display: flex; flex-direction: column; gap: 8px; }
.viz-applicant__lines > span:first-child { width: 160px; height: 16px; background: #DADCD7; }
.viz-applicant__lines > span:last-child { width: 100px; height: 10px; background: var(--ground); }
.viz-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.viz-pill { padding: 6px 10px; background: var(--yellow); border: 1px solid var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.viz-pill--plain { background: var(--panel); border-color: var(--hair); }
.viz-applicant__bars { display: flex; flex-direction: column; gap: 8px; }
.viz-applicant__bars > span { height: 10px; background: var(--ground); }
.viz-applicant__bars > span:nth-child(2) { width: 90%; }
.viz-applicant__bars > span:nth-child(3) { width: 60%; }
.viz--applicant > .viz-tag { position: absolute; right: -28px; top: 36px; transform: rotate(6deg); box-shadow: 0 12px 24px rgba(20, 21, 22, .28); }

.viz--lowrate { width: 460px; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 32px; align-items: end; transform: rotate(-1deg); }
.viz-lowrate__now, .viz-lowrate__later, .viz-lowrate__stack { display: flex; flex-direction: column; gap: 10px; }
.viz-lowrate__now { align-items: flex-start; }
.viz-lowrate__rate { padding: 10px 14px; background: var(--card); border: 2px solid var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 18px; text-transform: uppercase; }
.viz--lowrate .viz-caption { font-size: 14px; letter-spacing: .08em; }
.viz-block { padding: 16px 20px; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.1; text-transform: uppercase; box-shadow: 0 12px 24px rgba(20, 21, 22, .2); }
.viz-block--ink { background: var(--ink); color: var(--on-dark); transform: rotate(-2deg); }
.viz-block--red { background: var(--red); color: #FFFFFF; transform: rotate(2deg); margin-left: 24px; }
.viz-block--3 { transform: rotate(-1deg); margin-left: 8px; }

.viz--loop { width: 460px; height: 380px; }
.viz--loop .viz-tag { position: absolute; }
.viz-loop__work { left: 120px; top: 4px; transform: rotate(-2deg); }
.viz-loop__people { left: 140px; bottom: 4px; transform: rotate(2deg); }
.viz-loop__wrong { right: 8px; top: 150px; transform: rotate(4deg); }

.viz--chain { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.viz-chain__row { display: flex; align-items: center; }
.viz-chain__link { flex: 1 1 auto; height: 4px; background: var(--yellow); }
.viz-chain__link--gone { height: 0; background: none; border-top: 4px dashed #5A5D63; }

.viz--bars { width: 100%; max-width: 1000px; display: flex; align-items: center; }
.viz-bars__solid, .viz-bars__hazard { flex: 1 1 auto; height: 24px; background: var(--yellow); }
.viz-bars__hazard { background: repeating-linear-gradient(135deg, var(--yellow) 0 14px, var(--ink) 14px 28px); }
.viz-bars__gap { width: 200px; display: flex; justify-content: center; }
.mark--bars { width: 120px; height: 120px; color: var(--ink); }

.viz--form { width: 380px; transform: rotate(2deg); }
.viz-form { gap: 14px; padding: 26px 28px 28px; filter: drop-shadow(0 24px 24px rgba(20, 21, 22, .2)); }
.viz-form__top { display: flex; justify-content: space-between; align-items: center; }
.viz-form__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.viz-form__rows { display: flex; flex-direction: column; }
.viz-form__row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hair-card); font-size: 16px; }
.viz-form__row--stack { flex-direction: column; align-items: stretch; gap: 12px; padding: 4px 0 10px; }
.viz-form__row--stack:not(:first-child) { padding-top: 14px; }
.viz-form__k { color: var(--ink-2); }
.viz-form__v { font-family: var(--font-display); font-weight: 700; font-size: 22px; text-transform: uppercase; }
.viz-form__btn { align-self: stretch; justify-content: center; }
.viz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.viz-chip { padding: 8px 12px; background: var(--card); border: 2px solid var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.viz-chip.is-on { background: var(--yellow); }
.viz-stepper { position: relative; display: flex; padding-top: 4px; }
.viz-stepper::before { content: ""; position: absolute; left: 11%; right: 11%; top: 13px; height: 4px; background: var(--ink); }
.viz-stepper__step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.viz-stepper__label { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; color: var(--ink-2); }
.viz-stepper__step.is-at .viz-stepper__label { color: var(--ink); }
.viz-range { display: flex; flex-direction: column; gap: 10px; }
.viz-range__track { position: relative; height: 24px; }
.viz-range__track::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; background: var(--hair); }
.viz-range__fill { position: absolute; left: 0; width: 30%; top: 10px; height: 4px; background: var(--yellow); }
.viz-range__knob { position: absolute; left: calc(30% - 12px); top: 0; width: 24px; height: 24px; background: var(--ink); transform: rotate(45deg); }
.viz-range__ends { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; }
.viz-range__ends .is-muted { color: var(--ink-2); }

.viz--piles { width: 100%; max-width: 680px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: end; }
.viz-pile { display: flex; flex-direction: column; gap: 16px; }
.viz-pile__area { position: relative; height: 250px; }
.viz-pile__grey { position: absolute; width: 150px; height: 88px; background: #DADCD7; border: 1px solid var(--hair); box-shadow: 0 6px 12px rgba(20, 21, 22, .08); }
.viz-pile__grey:nth-child(1) { left: 10px; top: 120px; transform: rotate(-9deg); }
.viz-pile__grey:nth-child(2) { left: 40px; top: 96px; transform: rotate(6deg); }
.viz-pile__grey:nth-child(3) { left: 70px; top: 130px; transform: rotate(-3deg); }
.viz-pile__grey:nth-child(4) { left: 20px; top: 60px; transform: rotate(8deg); }
.viz-pile__grey:nth-child(5) { left: 60px; top: 40px; transform: rotate(-6deg); }
.viz-pile__grey:nth-child(6) { left: 30px; top: 10px; transform: rotate(4deg); }
.viz-pile__grey:nth-child(7) { left: 80px; top: 80px; transform: rotate(-12deg); }
.viz-pile__grey:nth-child(8) { left: 0; top: 150px; transform: rotate(2deg); }
.viz-pile__grey:nth-child(9) { left: 90px; top: 20px; transform: rotate(10deg); }
.viz-pile__card {
	position: absolute; width: 170px; height: 100px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between;
	background: var(--card); border: 2px solid var(--ink); box-shadow: 0 12px 24px rgba(20, 21, 22, .16);
}
.viz-pile__card:nth-child(1) { left: 20px; top: 120px; transform: rotate(-3deg); }
.viz-pile__card:nth-child(2) { left: 50px; top: 60px; transform: rotate(2deg); }
.viz-pile__card:nth-child(3) { left: 30px; top: 0; transform: rotate(-1deg); }
.viz-pile__tag { align-self: flex-start; padding: 4px 8px; background: var(--yellow); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.viz-pile__word { font-family: var(--font-display); font-weight: 700; font-size: 18px; text-transform: uppercase; }

.viz--fee { width: 460px; display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: start; transform: rotate(-1deg); }
.viz-fee__side { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.viz-fee__side--r { align-items: flex-end; }
.viz-party {
	position: relative; z-index: 1; padding: 16px 20px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); white-space: nowrap;
	font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.1; text-transform: uppercase;
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.viz-party--ink { background: var(--ink); color: var(--on-dark); }
.viz-fee__tag { padding: 8px 12px; background: var(--yellow); font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; transform: rotate(-2deg); }
.viz-fee__tag--r { transform: rotate(2deg); }
.viz-fee__join { position: relative; height: 66px; display: flex; align-items: center; justify-content: center; }
.viz-fee__join::before { content: ""; position: absolute; left: -12px; right: -12px; top: 31px; height: 4px; background: var(--yellow); }

.viz--direct { width: 460px; display: flex; flex-direction: column; gap: 22px; transform: rotate(-1deg); }
.viz-direct__middle {
	position: relative; align-self: center; padding: 12px 16px; border: 3px dashed var(--red); color: var(--red); opacity: .85;
	font-family: var(--font-display); font-weight: 700; font-size: 18px; text-transform: uppercase;
}
.viz-direct__line { display: flex; align-items: center; }
.viz-direct__line .viz-party { padding: 18px 22px; filter: drop-shadow(0 12px 12px rgba(20, 21, 22, .18)); }
.viz-direct__wire { flex: 1 1 auto; height: 5px; background: var(--yellow); }
.viz-direct__tag { align-self: flex-start; margin-left: 140px; transform: rotate(-2deg); box-shadow: 0 12px 24px rgba(20, 21, 22, .2); }

/* ---- kit: narrower desktops 1100-1439 — the hero object shrinks so it never meets the H1 or DA ---- */
@media (min-width: 1100px) and (max-width: 1439px) {
	.kit-title { font-size: clamp(64px, 5.8334vw, 84px); max-width: calc(min(780px, 100vw - 540px) + var(--pad-x)); }
	.kit-da { max-width: min(760px, calc(100vw - var(--pad-x) - 540px)); }
	.kit-obj { right: 48px; transform: scale(.82); }
}
@media (min-width: 1100px) and (max-width: 1279px) {
	.kit-title { max-width: calc(min(780px, 100vw - 460px) + var(--pad-x)); }
	.kit-da { max-width: min(760px, calc(100vw - var(--pad-x) - 460px)); }
	.kit-obj { right: 28px; transform: scale(.7); }
	.kit-problem, .kit-ledger { grid-template-columns: 360px minmax(0, 1fr); gap: 56px; }
	.kit-problem .kit-h2 { font-size: 68px; }
	.kit-ledger .kit-h2 { font-size: 72px; }
	.kit-ledger__item { grid-template-columns: 72px minmax(0, 1fr); row-gap: 10px; }
	.kit-ledger__item::before { grid-row: 1 / span 2; }
	.kit-ledger__item p { grid-column: 2; }
}

/* ---- kit: tablets 600-1099 (no mockup; built from the kit's tablet notes: desktop layouts,
   24px body, tighter margins, copy above visual wherever two columns stop fitting) ---- */
@media (min-width: 600px) and (max-width: 1099px) {
	.kit-title { padding: 48px var(--gut) 0; font-size: clamp(60px, 8.4vw, 84px); max-width: none; }
	.kit-hero { padding: 28px var(--gut) 64px; min-height: 0; }
	.kit-da { max-width: 760px; }
	.kit-obj { position: relative; top: auto; right: auto; align-self: center; margin: 40px 0 24px; transform: none; }
	.mark--kit-hero { top: 40px; right: -90px; width: 420px; height: 420px; }
	.kit-problem, .kit-ledger { grid-template-columns: 1fr; gap: 36px; padding: 80px var(--gut); }
	.kit-problem .kit-h2, .kit-ledger .kit-h2 { font-size: clamp(52px, 7vw, 72px); }
	.kit-steps { padding: 48px var(--gut) 88px; }
	.kit-steps__card { width: 100%; padding: 48px 44px; }
	.kit-steps .kit-h2 { font-size: clamp(48px, 6vw, 60px); }
	.mark--kit-steps { right: -40px; width: 320px; height: 320px; }
	.kit-why { padding: 80px var(--gut); gap: 40px; }
	.kit-why .kit-h2, .kit-notfor .kit-h2 { font-size: clamp(56px, 7.4vw, 80px); }
	.kit-why__cols { grid-template-columns: 1fr; gap: 36px; }
	.kit-tiles { padding: 80px var(--gut); gap: 40px; }
	.kit-tiles .kit-h2 { font-size: clamp(52px, 7vw, 72px); }
	.kit-tiles__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.kit-tiles__list a { font-size: 24px; min-height: 88px; }
	.kit-james { padding: 80px var(--gut); grid-template-columns: 280px minmax(0, 1fr); gap: 48px; }
	.kit-james .kit-h2 { font-size: clamp(48px, 6.4vw, 64px); }
	.kit-james__photo { width: 280px; height: 350px; }
	.kit-notfor { padding: 72px var(--gut) 88px; gap: 40px; }
	.kit-notes, .kit-notfor--3 .kit-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 0 8px; }
	.kit-notes li { margin-top: 0 !important; }
	.kit-notes li:nth-child(odd) { --tilt: -1.5deg; }
	.kit-notes li:nth-child(even) { --tilt: 1.5deg; }
	.kit-close { padding: 48px var(--gut) 88px; }
	.kit-close__panel { padding: 72px 56px; gap: 28px; }
	.kit-close__title { font-size: clamp(56px, 8.4vw, 88px); }
	.kit-close__panel > p:not(.btn-row) { font-size: var(--body); }
}
/* small tablets: the photo drops under the copy; each answer sits under its question */
@media (min-width: 600px) and (max-width: 767px) {
	.kit-james { grid-template-columns: 1fr; }
	.kit-james__photo { order: 0; justify-self: center; margin-top: 8px; }
}
@media (min-width: 600px) and (max-width: 899px) {
	.kit-ledger__item { grid-template-columns: 72px minmax(0, 1fr); row-gap: 10px; }
	.kit-ledger__item::before { grid-row: 1 / span 2; }
	.kit-ledger__item p { grid-column: 2; }
}

/* ---- kit: phones (the 390 mockups). Headings 28 / 32 / 22 (Gerek, 2026-09-26); body stays 18. ---- */
@media (max-width: 599px) {
	.kit-title { padding: 36px 20px 0; align-items: center; max-width: none; font-size: 50px; line-height: .9; letter-spacing: -.01em; text-align: center; }
	.kit-title__line:last-child { padding: 0 8px; margin-top: 4px; }
	.kit-hero { padding: 24px 20px 40px; min-height: 0; }
	.kit-da { padding: 20px 0 0 26px; }
	.kit-da::before { top: 27px; width: 12px; height: 12px; }
	.mark--kit-hero { top: 40px; right: -90px; width: 340px; height: 340px; }
	.kit-obj { position: relative; top: auto; right: auto; align-self: center; margin: 8px 0 12px; zoom: .68; transform: none; }
	.kit-obj--feed { margin-top: 48px; }

	.ticker--kit { height: 56px; font-size: 20px; letter-spacing: .08em; }

	.kit-h2 { font-size: 28px !important; line-height: .9; text-align: center; }
	.kit-steps .kit-h2 { font-size: 26px !important; }

	.kit-problem { display: flex; flex-direction: column; align-items: stretch; gap: 22px; padding: 56px 20px; }
	.kit-problem__body { gap: 22px; padding-top: 0; }
	.kit-reveal { padding: 24px 22px; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }

	.kit-steps { padding: 24px 20px 64px; }
	.mark--kit-steps { right: -40px; top: 20px; width: 240px; height: 240px; }
	.kit-steps__card { width: 100%; padding: 32px 24px; gap: 20px; clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
	.kit-list li { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 16px 0; }
	.kit-list li::before { font-size: 32px; }

	.kit-why { padding: 64px 20px; gap: 28px; }
	.kit-why__cols { grid-template-columns: 1fr; gap: 28px; }
	.kit-why__cols > p { padding-top: 16px; }
	.kit-quote { font-size: 26px; }

	.kit-tiles { padding: 56px 20px; gap: 32px; }
	.kit-tiles__group { gap: 18px; }
	.kit-tiles__list { display: flex; flex-direction: column; gap: 14px; padding: 0 6px; }
	.kit-tiles__list a { min-height: 64px; padding: 14px 18px; gap: 12px; font-size: 20px; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
	.kit-tiles__list a::after { width: 36px; height: 36px; }

	.kit-james { display: flex; flex-direction: column; gap: 22px; padding: 56px 20px; }
	.kit-james__copy { gap: 22px; }
	.kit-james__photo { order: 0; align-self: center; width: 240px; height: 300px; margin-top: 8px; }
	.kit-james__img, .kit-james__frame { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%); }

	.kit-ledger { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: 56px 20px; }
	.kit-ledger__item { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 24px 0; }
	.kit-ledger__item::before { font-size: 22px; margin-top: 2px; }
	.kit-ledger__item h3 { font-size: 22px; }
	.kit-ledger__item p { grid-column: 1 / -1; }
	.kit-ledger__outro { padding-top: 20px; }

	.kit-notfor { padding: 56px 20px 64px; gap: 28px; }
	.kit-notes, .kit-notfor--3 .kit-notes { display: flex; flex-direction: column; gap: 18px; padding: 0 8px; }
	.kit-notes li { flex-direction: row; align-items: flex-start; gap: 14px; padding: 20px 22px; margin-top: 0 !important; font-size: 20px; box-shadow: 0 16px 32px rgba(20, 21, 22, .18); }
	.kit-notes li::before { width: 32px; height: 32px; }
	.kit-notes li::after { left: 22px; top: 20px; width: 32px; height: 32px; }
	.kit-notes li:nth-child(4n+1) { --tilt: -2deg; }
	.kit-notes li:nth-child(4n+2) { --tilt: 1.5deg; }
	.kit-notes li:nth-child(4n+3) { --tilt: -1.5deg; }
	.kit-notes li:nth-child(4n+4) { --tilt: 2deg; }

	.kit-close { padding: 40px 20px 64px; }
	.kit-close__panel { padding: 48px 24px; gap: 24px; clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
	.mark--kit-close { right: -60px; top: -40px; width: 260px; height: 260px; }
	.mark--kit-close2 { display: none; }
	.kit-close__title { font-size: 32px; line-height: .9; }
	.kit-close__panel > p:not(.btn-row) { font-size: 18px; }
	.kit-close .btn-row { align-self: stretch; }
	.kit-close .btn--xl { font-size: 18px; }
}

/* ---- branch kit: narrower desktops 1100-1279 ---- */
@media (min-width: 1100px) and (max-width: 1279px) {
	.kit-prose, .kit-side { grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; }
	.kit-side--odds { grid-template-columns: 360px minmax(0, 1fr); gap: 48px; }
	.kit-prose .kit-viz > .viz, .kit-side--fee .viz, .kit-side--direct .viz { zoom: .9; }
	.kit-prose .kit-h2, .kit-side .kit-h2 { font-size: 60px; }
	.kit-cardps { gap: 48px; }
	.kit-cardps__card { padding: 48px 48px; }
	.kit-cardps .kit-h2 { font-size: 52px; }
	.kit-james--big { grid-template-columns: 360px minmax(0, 1fr); gap: 64px; }
	.kit-james--big .kit-james__photo { width: 360px; height: 458px; }
	.kit-james--big .kit-h2 { font-size: 68px; }
}

/* ---- branch kit: tablets 600-1099 (no mockup): copy above its visual, visual at full size where it fits ---- */
@media (min-width: 600px) and (max-width: 1099px) {
	.kit-prose, .kit-side, .kit-side--odds, .kit-cardps { grid-template-columns: 1fr; gap: 48px; padding: 80px var(--gut); }
	.kit-prose--left .kit-viz { order: 0; }
	.kit-prose__copy { max-width: none; }
	.kit-prose .kit-h2, .kit-side .kit-h2, .kit-side--odds .kit-h2 { font-size: clamp(48px, 6.4vw, 64px); }
	.kit-refer { padding: 80px var(--gut); gap: 44px; }
	.kit-refer .kit-h2, .kit-statement .kit-h2 { font-size: clamp(52px, 7vw, 72px); }
	.kit-statement { padding: 80px var(--gut); gap: 40px; }
	.kit-cardps__card { padding: 48px 44px; }
	.kit-cardps .kit-h2 { font-size: clamp(44px, 6vw, 56px); }
	.kit-james--big { grid-template-columns: 300px minmax(0, 1fr); gap: 48px; padding: 80px var(--gut); }
	.kit-james--big .kit-h2 { font-size: clamp(48px, 6.4vw, 64px); }
	.kit-james--big .kit-james__photo { width: 300px; height: 382px; }
	.kit-james__tag { right: -20px; top: 24px; padding: 14px 18px; }
	.kit-james__tag-n { font-size: 48px; }
	.kit-pull { font-size: 30px; }
}
@media (min-width: 600px) and (max-width: 899px) {
	.kit-refer__cols { grid-template-columns: 1fr; gap: 32px; }
	.kit-refer .kit-viz { justify-content: flex-start; }
	.viz--chain { zoom: .8; width: 100%; }
}
@media (min-width: 600px) and (max-width: 767px) {
	.kit-james--big { grid-template-columns: 1fr; }
	.kit-james--big .kit-james__photo { justify-self: center; }
	.kit-prose .kit-viz > .viz, .kit-side .kit-viz > .viz, .viz--form { zoom: .9; }
}

/* ---- branch kit: phones (390 mockups): each visual scaled as drawn (zoom .68-.85), piles .52 ---- */
@media (max-width: 599px) {
	.kit-obj--photo { zoom: .68; }
	.kit-prose, .kit-side, .kit-side--odds, .kit-cardps { display: flex; flex-direction: column; align-items: stretch; gap: 32px; padding: 56px 20px; }
	.kit-prose--left .kit-viz { order: 0; }
	.kit-prose__copy, .kit-side__copy { gap: 22px; }
	.kit-prose .kit-reveal { padding: 24px 22px; }
	.kit-prose .viz, .kit-side--direct .viz { zoom: .739; }
	.kit-prose .viz--applicant { zoom: .85; }
	.kit-refer { padding: 64px 20px; gap: 28px; }
	.kit-refer__cols { grid-template-columns: 1fr; gap: 24px; }
	.kit-refer__cols > p { padding-top: 16px; }
	.kit-quote--inline { font-size: 18px; }
	.kit-refer .kit-viz, .kit-statement .kit-viz { justify-content: flex-start; }
	.viz--chain { zoom: .68; width: 100%; }
	.kit-statement { padding: 64px 20px; gap: 32px; }
	.kit-statement__copy { gap: 20px; }
	.viz--bars { zoom: .8; width: 100%; max-width: none; }
	.kit-cardps { padding: 56px 20px 64px; }
	.kit-cardps__card { padding: 32px 24px; gap: 20px; clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
	.viz--form { zoom: .85; }
	.viz--piles { zoom: .52; width: 680px; max-width: none; }
	.kit-side--fee .viz { zoom: .72; }
	.kit-james--big { display: flex; flex-direction: column; gap: 22px; padding: 56px 20px; }
	.kit-james--big .kit-james__photo { width: 280px; height: 356px; }
	.kit-james--big .kit-james__img { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%); }
	.kit-james__tag { right: -14px; top: 20px; padding: 12px 16px; }
	.kit-james__tag-n { font-size: 40px; }
	.kit-james__tag-t { font-size: 10px; }
	.kit-pull { font-size: 22px; margin-top: 10px; }
	.kit-list--rail li::before { margin-left: 16px; }
	.kit-list--rail li::after { left: 24px; }
	.kit-list--rail li:first-child::after { top: 30px; }
	.kit-rail-end .disc { margin-left: 8px; margin-right: 8px; }
}

/* ==========================================================================
   INNER-PAGE KIT, GROUP C (How It Works, About, FAQs). Sections with no
   drawing in the mockup get none (Gerek, 2026-09-26).
   ========================================================================== */
/* photo heroes on desktop: the hero is tall enough that the photo never runs into the next band */
@media (min-width: 1100px) { .kit-hero:has(.kit-obj--james), .kit-hero:has(.kit-obj--photo) { min-height: 380px; } }
/* hero objects that sit wider: the H1 + DA run 620 wide beside them */
.site-main--kit:has(.kit-obj--hiw) .kit-title, .site-main--kit:has(.kit-obj--faqtags) .kit-title { max-width: calc(620px + 2 * var(--pad-x)); }
.kit-hero:has(.kit-obj--hiw) .kit-da, .kit-hero:has(.kit-obj--faqtags) .kit-da { max-width: 620px; }

/* How It Works: post <-> apply diagram card */
.kit-obj--hiw { right: calc(max(0px, (100% - 1440px) / 2) + 90px); top: 64px; width: 460px; transform: scale(1.28); }
.hiw { display: flex; flex-direction: column; gap: 14px; transform: rotate(-1.5deg); filter: drop-shadow(0 16px 16px rgba(20, 21, 22, .18)); }
.hiw__top { display: flex; justify-content: flex-end; }
.hiw__row { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.hiw__card {
	display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; background: var(--card); color: var(--ink);
	clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.hiw__card--dark { background: var(--ink); color: var(--on-dark); }
.hiw__who { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.hiw__card--dark .hiw__who { color: var(--yellow); }
.hiw__what { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1; text-transform: uppercase; }
.hiw__cost { font-size: 14px; color: var(--ink-2); }
.hiw__card--dark .hiw__cost { color: var(--muted-dark); }
.hiw__swap svg { display: block; }
.hiw__deal { align-self: center; margin-top: 4px; padding: 12px 18px; background: var(--yellow); transform: rotate(2deg); font-family: var(--font-display); font-weight: 700; font-size: 20px; text-transform: uppercase; }

/* About: James photo + tags */
.kit-obj--james { width: 440px; filter: drop-shadow(0 28px 28px rgba(20, 21, 22, .3)); }
.kit-obj__james {
	display: block; width: 440px; height: 560px; max-width: none; object-fit: cover; object-position: 50% 30%;
	transform: rotate(2deg); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), calc(100% - 64px) 100%, 0 100%);
}
.kit-obj__years { position: absolute; left: -40px; top: 40px; display: flex; flex-direction: column; gap: 2px; padding: 18px 24px; line-height: .9; background: var(--yellow); color: var(--ink); transform: rotate(-5deg); }
.kit-obj__years-n { font-family: var(--font-display); font-weight: 800; font-size: 64px; }
.kit-obj__years-t { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.kit-obj__name { position: absolute; right: -24px; bottom: 96px; padding: 12px 16px; background: var(--card); color: var(--ink); transform: rotate(3deg); font-family: var(--font-display); font-weight: 700; font-size: 22px; text-transform: uppercase; }

/* FAQs: stacked question tags */
.kit-obj--faqtags { right: calc(max(0px, (100% - 1440px) / 2) + 110px); top: 48px; width: 420px; height: 270px; transform: scale(1.3); filter: drop-shadow(0 16px 16px rgba(20, 21, 22, .2)); }
.faqtag {
	position: absolute; display: flex; align-items: center; gap: 14px; padding: 18px 22px; white-space: nowrap;
	font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1; text-transform: uppercase;
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.faqtag--white { right: 0; top: 0; background: var(--card); color: var(--ink); transform: rotate(-4deg); }
.faqtag--ink { right: 50px; top: 92px; background: var(--ink); color: var(--on-dark); transform: rotate(3deg); }
.faqtag--yellow { right: 10px; top: 184px; background: var(--yellow); color: var(--ink); transform: rotate(-2deg); }
.faqtag__q { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--yellow); color: var(--ink); font-family: var(--font-body); font-weight: 800; font-size: 20px; }
.faqtag--yellow .faqtag__q { background: var(--ink); color: var(--yellow); }

/* TWO STEPS side by side (How It Works) */
.kit-two { padding: 112px var(--pad-x) 96px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
.kit-two__card { display: flex; flex-direction: column; gap: 28px; padding: 56px; clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
.kit-two__card--light { background: var(--card); transform: rotate(-1.5deg); }
.kit-two__card--dark { margin: 112px 0 0 -40px; background: var(--ink); background-image: var(--grid-dark); background-size: 40px 40px; color: var(--on-dark); transform: rotate(1.5deg); }
.kit-two .kit-h2 { font-size: 60px; }
.kit-two__card--light > p { color: var(--body-ink); }
.kit-two__card--dark > p { color: var(--para-dark); }
.kit-two__card--dark a:not(.btn) { color: var(--on-dark); }
.kit-two .kit-list li { grid-template-columns: 72px minmax(0, 1fr); padding: 20px 0; }
.kit-two .kit-list li::before { font-size: 40px; }
.kit-two__card--dark .kit-list { border-top-color: var(--yellow); }
.kit-two__card--dark .kit-list li { border-bottom-color: var(--hair-dark); }
.kit-two__card--dark .kit-list li::before { color: var(--yellow); }

/* DARK X-LIST (How It Works "What the platform doesn't do") */
.kit-xlist {
	padding: 104px var(--pad-x); display: flex; flex-direction: column; gap: 40px;
	background: var(--ink); background-image: var(--grid-dark); background-size: 40px 40px; color: var(--on-dark);
}
.kit-xlist__head { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 80px; align-items: end; }
.kit-xlist .kit-h2 { font-size: 80px; }
.kit-xlist__head > p { color: var(--para-dark); }
.kit-xlist__items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.kit-xlist__items li { position: relative; display: flex; flex-direction: column; gap: 16px; padding-top: 20px; border-top: 1px solid var(--hair-dark); color: var(--on-dark); }
.kit-xlist__items li::before { content: ""; flex: none; width: 36px; height: 36px; border-radius: 999px; background: var(--red); }
.kit-xlist__items li::after { content: ""; position: absolute; left: 0; top: 20px; width: 36px; height: 36px; background: #FFFFFF; -webkit-mask: var(--x) center / 14px no-repeat; mask: var(--x) center / 14px no-repeat; }

/* STATEMENT without a drawing: the mark 520 faint behind */
.kit-statement--plain { position: relative; overflow: hidden; }
.kit-statement--plain .kit-statement__copy { position: relative; z-index: 1; gap: 32px; }
.mark--statement { position: absolute; left: 50%; top: 40px; width: 520px; height: 520px; margin-left: -260px; color: var(--ink); opacity: .06; }

/* PROSE two columns with marker quotes (About "Where the idea came from") */
.kit-idea { padding: 104px var(--pad-x); background: var(--card); display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 80px; align-items: start; }
.kit-idea .kit-h2 { font-size: 72px; }
.kit-idea__body { display: flex; flex-direction: column; gap: 28px; padding-top: 8px; max-width: 760px; }
.kit-idea__body > p { color: var(--body-ink); }
.kit-mark { background: var(--yellow); padding: 0 6px; font-weight: 600; color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* BROWSER MOCK (About "What he built"): the board in a browser window, drawn left; copy right, first in the DOM */
.kit-browser { padding: 112px var(--pad-x); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.kit-browser__copy { order: 1; display: flex; flex-direction: column; gap: 28px; }
.kit-browser .kit-h2 { font-size: 80px; }
.kit-browser__copy > p { color: var(--body-ink); }
.kit-browser__viz { justify-content: flex-start; padding: 24px 0; filter: drop-shadow(0 32px 32px rgba(20, 21, 22, .28)); }
.bm {
	width: 680px; flex: none; display: flex; flex-direction: column; background: var(--card); color: var(--ink);
	clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
	transform: rotate(-1.5deg); animation: kit-bm 7s ease-in-out infinite;
}
@keyframes kit-bm { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(-.5deg) translateY(-8px); } }
.bm__bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--ink); color: var(--muted-dark); }
.bm__lights { flex: none; }
.bm__url { flex: 1 1 auto; height: 26px; margin-left: 4px; padding: 0 12px; display: flex; align-items: center; background: #2A2C30; font-size: 12px; letter-spacing: .04em; }
.bm__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--hair-card); }
.bm__brand { display: flex; align-items: center; gap: 10px; }
.mark--bm { width: 26px; height: 26px; color: var(--ink); }
.bm__brand-t { font-family: var(--font-display); font-weight: 700; font-size: 18px; text-transform: uppercase; }
.bm__note { font-size: 13px; color: var(--ink-2); }
.bm__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 22px; border-bottom: 1px solid var(--hair-card); }
.bm__chip { padding: 8px 14px; background: var(--panel); border: 1px solid var(--hair); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bm__chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.bm__jobs { display: flex; flex-direction: column; }
.bm__job { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--hair-card); }
.bm__job--open { background: var(--ink); color: var(--on-dark); border-bottom-color: var(--hair-dark); }
.bm__trade { padding: 6px 10px; background: var(--yellow); color: var(--ink); text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.bm__what { display: flex; flex-direction: column; gap: 4px; }
.bm__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1; text-transform: uppercase; }
.bm__where, .bm__end { font-size: 14px; color: var(--ink-2); }
.bm__job--open .bm__where { color: var(--muted-dark); }
.bm__apply { height: 40px; margin: 0; padding: 0 16px; font-size: 14px; }
.bm__foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; background: var(--panel); font-size: 13px; color: var(--ink-2); }

/* FAQ groups: ledger sections alternating white / ground; every answer visible */
.kit-ledger--faq { padding: 88px var(--pad-x); }
.kit-ledger--faq.kit-band--ground { background: none; }
.kit-ledger--faq .kit-h2 { font-size: 64px; }
.kit-ledger--faq .kit-ledger__item h3 { font-size: 34px; }

/* ---- group C: narrower desktops ---- */
@media (min-width: 1100px) and (max-width: 1439px) {
	.kit-obj--hiw { right: 40px; transform: scale(1.05); }
	.kit-obj--faqtags { right: 60px; transform: scale(1.06); }
	.site-main--kit:has(.kit-obj--hiw) .kit-title, .site-main--kit:has(.kit-obj--faqtags) .kit-title { font-size: clamp(64px, 5.8334vw, 84px); max-width: calc(min(620px, 100vw - 640px) + var(--pad-x)); }
	.kit-hero:has(.kit-obj--hiw) .kit-da, .kit-hero:has(.kit-obj--faqtags) .kit-da { max-width: min(620px, calc(100vw - var(--pad-x) - 640px)); }
	.kit-browser { gap: 48px; }
	.bm { zoom: .85; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
	.kit-obj--hiw { right: 24px; transform: scale(.9); }
	.kit-obj--faqtags { right: 40px; transform: scale(.9); }
	.site-main--kit:has(.kit-obj--hiw) .kit-title, .site-main--kit:has(.kit-obj--faqtags) .kit-title { max-width: calc(min(620px, 100vw - 520px) + var(--pad-x)); }
	.kit-hero:has(.kit-obj--hiw) .kit-da, .kit-hero:has(.kit-obj--faqtags) .kit-da { max-width: min(620px, calc(100vw - var(--pad-x) - 520px)); }
	.kit-two .kit-h2 { font-size: 52px; }
	.kit-two__card { padding: 48px 40px; }
	.kit-xlist__head, .kit-idea { grid-template-columns: 360px minmax(0, 1fr); gap: 56px; }
	.kit-xlist .kit-h2, .kit-browser .kit-h2 { font-size: 68px; }
	.kit-idea .kit-h2 { font-size: 60px; }
	.bm { zoom: .72; }
}

/* ---- group C: tablets 600-1099 ---- */
@media (min-width: 600px) and (max-width: 1099px) {
	.site-main--kit:has(.kit-obj--hiw) .kit-title, .site-main--kit:has(.kit-obj--faqtags) .kit-title { max-width: none; }
	.kit-hero:has(.kit-obj--hiw) .kit-da, .kit-hero:has(.kit-obj--faqtags) .kit-da { max-width: 760px; }
	.kit-obj--hiw, .kit-obj--faqtags { top: auto; right: auto; transform: none; }
	.kit-obj--faqtags { height: 270px; }
	.kit-two { padding: 72px var(--gut); gap: 36px; }
	.kit-two .kit-h2 { font-size: clamp(44px, 6vw, 56px); }
	.kit-two__card { padding: 44px 40px; }
	.kit-xlist { padding: 80px var(--gut); }
	.kit-xlist__head { grid-template-columns: 1fr; gap: 24px; }
	.kit-xlist .kit-h2, .kit-browser .kit-h2 { font-size: clamp(52px, 7vw, 72px); }
	.kit-xlist__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
	.kit-statement--plain .kit-h2 { font-size: clamp(52px, 7vw, 72px); }
	.kit-idea { grid-template-columns: 1fr; gap: 32px; padding: 80px var(--gut); }
	.kit-idea .kit-h2 { font-size: clamp(48px, 6.4vw, 64px); }
	.kit-browser { grid-template-columns: 1fr; gap: 40px; padding: 80px var(--gut); }
	.kit-browser__copy { order: 0; }
	.kit-browser__viz { justify-content: center; }
	.kit-ledger--faq { padding: 72px var(--gut); }
	.kit-ledger--faq .kit-ledger__item h3 { font-size: clamp(26px, 3.4vw, 32px); }
	.kit-ledger--faq .kit-h2 { font-size: clamp(48px, 6.4vw, 60px); }
}
@media (min-width: 600px) and (max-width: 899px) {
	.kit-two { grid-template-columns: 1fr; }
	.kit-two__card--light { transform: rotate(-1deg); }
	.kit-two__card--dark { margin: 0; transform: rotate(1deg); }
	.bm { zoom: .9; }
}
@media (min-width: 600px) and (max-width: 767px) { .bm { zoom: .8; } }

/* ---- group C: phones ---- */
@media (max-width: 599px) {
	.kit-obj--hiw { top: auto; right: auto; zoom: .68; transform: none; }
	.kit-obj--james { zoom: .68; }
	.kit-obj--faqtags { top: auto; right: auto; zoom: .78; transform: none; height: 270px; width: 420px; }
	.kit-two { display: flex; flex-direction: column; gap: 24px; padding: 56px 20px; }
	.kit-two__card { padding: 32px 24px; gap: 20px; clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
	.kit-two__card--light { transform: rotate(-1deg); }
	.kit-two__card--dark { margin: 0; transform: rotate(1deg); }
	.kit-two .kit-h2 { font-size: 26px !important; }
	.kit-two .kit-list li { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 16px 0; }
	.kit-two .kit-list li::before { font-size: 32px; }
	.kit-xlist { padding: 64px 20px; gap: 28px; }
	.kit-xlist__head { display: flex; flex-direction: column; gap: 20px; }
	.kit-xlist__items { grid-template-columns: 1fr; gap: 24px; }
	.kit-xlist__items li { padding-top: 18px; }
	.kit-xlist__items li::after { top: 18px; }
	.kit-statement--plain .kit-statement__copy { gap: 20px; }
	.mark--statement { width: 300px; height: 300px; margin-left: -150px; }
	.kit-idea { display: flex; flex-direction: column; gap: 22px; padding: 56px 20px; }
	.kit-idea__body { gap: 22px; padding-top: 0; }
	.kit-browser { display: flex; flex-direction: column; gap: 28px; padding: 56px 20px; }
	.kit-browser__copy { order: 0; gap: 22px; }
	.kit-browser__viz { justify-content: center; padding: 8px 0; }
	.bm { zoom: .5; }
	.kit-ledger--faq { padding: 56px 20px; }
	.kit-ledger--faq .kit-ledger__item h3 { font-size: 22px; }
}

/* ==========================================================================
   INNER-PAGE KIT, GROUP D (Contact, Articles hub + category archives, Privacy,
   Terms, 404). Batch 3 of INNER-PAGES.md. No close panel on any of them.
   ========================================================================== */
/* utility hero: H1 + intro P, no DA */
.kit-intro { position: relative; z-index: 2; max-width: 620px; color: var(--body-ink); }
.site-main--kit:has(.kit-obj--form) .kit-title { max-width: calc(520px + 2 * var(--pad-x)); }
.kit-hero:has(.kit-obj--form) .kit-intro { max-width: 520px; }
.site-main--kit:has(.kit-obj--stack) .kit-title { max-width: calc(600px + 2 * var(--pad-x)); }
@media (min-width: 1100px) {
	.kit-hero:has(.kit-obj--form) { min-height: 560px; }
	.kit-hero:has(.kit-obj--stack) { min-height: 400px; }
}

/* Contact: the form card is the hero object. Send is BLACK (orange stays Get Started's). */
.kit-obj--form { right: calc(max(0px, (100% - 1440px) / 2) + 120px); top: 64px; width: 520px; animation: none; filter: drop-shadow(0 28px 28px rgba(20, 21, 22, .22)); }
.kit-obj--form > :first-child { animation: none; }
.kit-form, .kit-sent {
	display: flex; flex-direction: column; gap: 20px; transform: rotate(-1deg);
	clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.kit-form { padding: 40px 44px 44px; background: var(--card); }
.kit-form__top { display: flex; justify-content: space-between; align-items: center; }
.kit-form__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.mark--form { width: 28px; height: 28px; color: var(--ink); }
.kit-form__field { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.kit-form input, .kit-form textarea {
	width: 100%; height: 56px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 0; background: #FFFFFF;
	font-family: var(--font-body); font-size: 18px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink);
	-webkit-appearance: none; appearance: none;
}
.kit-form textarea { height: 160px; padding-top: 14px; resize: vertical; }
.kit-form input:focus, .kit-form textarea:focus { outline: 3px solid var(--yellow); outline-offset: 0; }
.kit-form__send {
	display: flex; align-items: center; justify-content: center; gap: 12px; height: 60px; border: 0; cursor: pointer;
	background: var(--ink); color: #FFFFFF; font-family: var(--font-body); font-size: 18px; font-weight: 800; letter-spacing: .02em;
	clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
	transition: background-color .2s ease;
}
.kit-form__send::after { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .2s ease; }
.kit-form__send:hover, .kit-form__send:focus-visible { background: #2A2C2F; }
.kit-form__send:hover::after { transform: translateX(4px); }
.kit-form__error { font-size: 15px; font-weight: 600; color: var(--red); }
.itv-turnstile:empty { display: none; }
/* after a send: black grid card, yellow check, the copy's SUCCESS line */
.kit-sent { align-items: flex-start; padding: 48px; background: var(--ink); background-image: var(--grid-dark); background-size: 40px 40px; color: var(--on-dark); }
.kit-sent__check { width: 64px; height: 64px; background: var(--yellow); position: relative; }
.kit-sent__check::after { content: ""; position: absolute; inset: 17px; background: var(--ink); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.kit-sent__line { font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 1; text-transform: uppercase; }

/* Contact "Rather send an email?": the address as a big mailto */
.kit-email { padding: 104px var(--pad-x) 112px; background: var(--card); display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 80px; align-items: start; }
.kit-email .kit-h2 { font-size: 72px; }
.kit-email__body { display: flex; flex-direction: column; gap: 28px; }
.kit-email__body > p { color: var(--body-ink); }
.site-main--kit .kit-email__line a {
	font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1; color: var(--ink);
	text-decoration-thickness: 5px; text-underline-offset: 8px; overflow-wrap: anywhere;
}

/* Articles hub: fanned skeleton cards + "Newest first" */
.kit-obj--stack { right: calc(max(0px, (100% - 1440px) / 2) + 120px); top: 48px; width: 460px; height: 440px; }
.kit-stack { position: relative; display: block; width: 460px; height: 440px; }
.skel { position: absolute; width: 300px; display: flex; flex-direction: column; filter: drop-shadow(0 16px 16px rgba(20, 21, 22, .12)); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.skel--dark { left: 120px; top: 0; background: var(--ink); transform: rotate(4deg); --bar: #33363B; }
.skel--light { left: 40px; top: 60px; background: var(--card); transform: rotate(-3deg); --bar: #DADCD7; }
.skel__img { height: 180px; display: flex; align-items: center; justify-content: center; background: var(--ground); }
.skel--dark .skel__img { background: #1E2024; }
.mark--skel { width: 72px; height: 72px; color: var(--ink); }
.skel--dark .mark--skel { color: #33363B; }
.skel__body { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.skel__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.skel__tag { padding: 5px 9px; background: var(--yellow); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.skel__date { width: 72px; height: 10px; background: var(--bar); }
.skel__t { height: 22px; width: 92%; background: var(--bar); }
.skel__t--short { width: 70%; }
.skel__x { height: 12px; width: 100%; background: var(--bar); opacity: .6; margin-top: 2px; }
.skel__x--short { width: 84%; }
.kit-stack__tag { position: absolute; left: -24px; bottom: -10px; padding: 12px 16px; background: var(--yellow); color: var(--ink); transform: rotate(-4deg); box-shadow: 0 12px 24px rgba(20, 21, 22, .2); font-family: var(--font-display); font-weight: 700; font-size: 22px; text-transform: uppercase; }

/* the feed: chips + cards (theme-generated; not page copy) */
.kit-feed { padding: 40px var(--pad-x) 96px; background: var(--card); display: flex; flex-direction: column; gap: 40px; }
.kit-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.site-main--kit a.kit-chip {
	display: inline-flex; align-items: center; height: 48px; padding: 0 20px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); text-decoration: none;
	font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: .04em; text-transform: uppercase;
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.site-main--kit a.kit-chip:hover, .site-main--kit a.kit-chip[aria-current="page"] { background: var(--ink); color: var(--on-dark); }
.kit-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.kit-card { filter: drop-shadow(0 16px 16px rgba(20, 21, 22, .12)); transition: translate .2s ease; }
.kit-card:nth-child(6n+1) { transform: rotate(-1deg); } .kit-card:nth-child(6n+2) { transform: rotate(1deg); }
.kit-card:nth-child(6n+3) { transform: rotate(-.5deg); } .kit-card:nth-child(6n+4) { transform: rotate(.5deg); }
.kit-card:nth-child(6n+5) { transform: rotate(-1deg); } .kit-card:nth-child(6n) { transform: rotate(1deg); }
.kit-card:hover { translate: 0 -3px; }
.site-main--kit a.kit-card__link {
	display: flex; flex-direction: column; height: 100%; background: var(--card); color: var(--ink); text-decoration: none; font-weight: 400;
	clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.kit-card__img { height: 180px; display: flex; align-items: center; justify-content: center; background: var(--ground); overflow: hidden; }
.kit-card__pic { width: 100%; height: 180px; max-width: none; object-fit: cover; }
.mark--card { width: 72px; height: 72px; color: var(--ink); }
.kit-card__body { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.kit-card__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2); }
.kit-card__cat { padding: 5px 9px; background: var(--yellow); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.kit-card__title, .kit-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.kit-card__title { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: .95; text-transform: uppercase; }
.kit-card__link:hover .kit-card__title { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 4px; }
.kit-card__excerpt { font-size: 16px; line-height: 1.45; color: var(--body-ink); }
.kit-feed .pagination { margin-top: 8px; }
.site-main--kit .kit-feed .page-numbers { text-decoration: none; }

/* category archives and hub page 2+: the feed follows the H1 directly, so it needs its own gap */
.site-main--hub > .kit-title + .kit-feed { margin-top: 40px; }
@media (max-width: 599px) { .site-main--hub > .kit-title + .kit-feed { margin-top: 28px; } }

/* Articles hub closing line + Get Started */
.kit-closing { padding: 96px var(--pad-x) 112px; display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center; }
.kit-closing > p:not(.btn-row) { max-width: 860px; font-size: 22px; font-weight: 500; color: var(--body-ink); }

/* LEGAL (Privacy, Terms): one 760 reading column */
.kit-hero--bare { min-height: 0; padding: 0; }
.site-main--kit:has(.kit-legal) .kit-title { max-width: calc(900px + 2 * var(--pad-x)); }
.kit-legal { padding: 48px var(--pad-x) 120px; display: flex; flex-direction: column; gap: 24px; }
.kit-legal > * { max-width: 760px; }
.kit-legal p, .kit-legal li { line-height: 1.55; color: var(--body-ink); }
.kit-legal strong { font-weight: 700; color: inherit; }
.kit-legal__date { align-self: flex-start; padding: 10px 14px; border: 1px solid var(--hair); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2) !important; }
.kit-legal h2 {
	display: flex; align-items: flex-start; gap: 16px; margin-top: 40px;
	font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: .95; text-transform: uppercase;
}
.kit-legal h2::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: 10px; background: var(--yellow); }
.kit-legal ul { display: flex; flex-direction: column; gap: 12px; }
/* bullets drawn absolutely: a grid would split "<strong>lead.</strong> text" into separate cells */
.kit-legal li { position: relative; padding-left: 30px; }
.kit-legal li::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 10px; background: var(--ink); }

/* 404: dark grid band, the big decorative "404" (after the H1 in the DOM), outline buttons */
.kit-404 {
	position: relative; overflow: hidden; min-height: 760px; padding: 120px var(--pad-x) 140px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; text-align: center;
	background: var(--ink); background-image: var(--grid-dark); background-size: 40px 40px; color: var(--on-dark);
}
.kit-404 > * { position: relative; }
.kit-404__num { order: -1; font-family: var(--font-display); font-weight: 800; font-size: 240px; line-height: .8; letter-spacing: -.03em; color: var(--yellow); }
.kit-404__title { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1; text-transform: uppercase; }
.kit-404__lede { max-width: 560px; color: var(--para-dark); }
.kit-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.mark--404 { position: absolute !important; right: -120px; top: -80px; width: 760px; height: 760px; color: var(--yellow); opacity: .16; }
/* GHOST BUTTON (first use, 404): 2px border in currentColor, transparent, chamfer 12, 60px */
.btn--ghost {
	height: 60px; padding: 0 30px; gap: 12px; border: 2px solid currentColor; background: transparent; color: var(--on-dark);
	font-size: 18px; font-weight: 700;
}
.btn--ghost:hover, .btn--ghost:focus-visible { background: rgba(255, 255, 255, .1); color: var(--on-dark); }
.kit-404 .btn-row:hover { filter: none; }

/* ---- group D: narrower desktops ---- */
@media (min-width: 1100px) and (max-width: 1439px) {
	.kit-obj--form { right: 40px; transform: scale(.9); }
	.kit-obj--stack { right: 40px; transform: scale(.85); }
	.kit-hero:has(.kit-obj--form) .kit-intro { max-width: min(520px, calc(100vw - var(--pad-x) - 580px)); }
	.kit-hero:has(.kit-obj--stack) .kit-intro { max-width: min(620px, calc(100vw - var(--pad-x) - 520px)); }
}
@media (min-width: 1100px) and (max-width: 1279px) {
	.kit-email { grid-template-columns: 360px minmax(0, 1fr); gap: 56px; }
	.kit-email .kit-h2 { font-size: 60px; }
	.kit-cards { gap: 24px; }
}

/* ---- group D: tablets ---- */
@media (min-width: 600px) and (max-width: 1099px) {
	.site-main--kit:has(.kit-obj--form) .kit-title, .site-main--kit:has(.kit-obj--stack) .kit-title { max-width: none; }
	.kit-hero:has(.kit-obj--form) .kit-intro { max-width: 620px; }
	.kit-obj--form, .kit-obj--stack { top: auto; right: auto; transform: none; }
	.kit-obj--form { width: min(520px, 100%); }
	.kit-email { grid-template-columns: 1fr; gap: 28px; padding: 80px var(--gut); }
	.kit-email .kit-h2 { font-size: clamp(48px, 6.4vw, 64px); }
	.kit-feed { padding: 40px var(--gut) 80px; }
	.kit-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
	.kit-closing { padding: 80px var(--gut) 96px; }
	.kit-closing > p:not(.btn-row) { font-size: var(--body); }
	.kit-legal { padding: 40px var(--gut) 96px; }
	.kit-404 { min-height: 640px; padding: 96px var(--gut) 112px; }
	.kit-404__num { font-size: 200px; }
	.mark--404 { width: 560px; height: 560px; }
}

/* ---- group D: phones ---- */
@media (max-width: 599px) {
	.kit-intro { text-align: center; }
	.kit-obj--form { top: auto; right: auto; width: 100%; zoom: 1; transform: none; margin-top: 8px; }
	.kit-form { padding: 28px 22px 26px; gap: 16px; transform: rotate(-.6deg); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
	.kit-form textarea { height: 140px; }
	.kit-sent { padding: 32px 24px; }
	.kit-sent__line { font-size: 26px; }
	.kit-obj--stack { top: auto; right: auto; zoom: .68; transform: none; margin: 16px 0 24px; }
	.kit-email { display: flex; flex-direction: column; align-items: stretch; gap: 22px; padding: 56px 20px; }
	.site-main--kit .kit-email__line a { font-size: 20px; text-decoration-thickness: 4px; text-underline-offset: 6px; }
	.kit-feed { padding: 32px 20px 56px; gap: 28px; }
	.kit-chips { gap: 8px; }
	.site-main--kit a.kit-chip { height: 40px; padding: 0 14px; font-size: 16px; }
	.kit-cards { grid-template-columns: 1fr; gap: 20px; }
	.kit-card:nth-child(n) { transform: none; }
	.kit-card:nth-child(odd) { transform: rotate(-.5deg); } .kit-card:nth-child(even) { transform: rotate(.5deg); }
	.kit-closing { padding: 56px 20px 64px; gap: 24px; }
	.kit-closing > p:not(.btn-row) { font-size: 18px; }
	.kit-closing .btn-row { align-self: stretch; }
	.kit-closing .btn--xl { font-size: 18px; }
	.kit-legal { padding: 28px 20px 64px; gap: 18px; }
	.kit-legal h2 { margin-top: 24px; font-size: 28px; gap: 12px; }
	.kit-legal h2::before { width: 10px; height: 10px; margin-top: 7px; }
	.kit-legal li { padding-left: 24px; }
	.kit-legal li::before { top: 9px; }
	.kit-legal__date { font-size: 12px; }
	.kit-404 { min-height: 560px; padding: 72px 20px 88px; gap: 24px; }
	.kit-404__num { font-size: 140px; }
	.kit-404__title { font-size: 28px; }
	.kit-404__links { flex-direction: column; align-self: stretch; gap: 12px; }
	.kit-404__links .btn-row { display: flex; }
	.kit-404__links .btn--ghost { width: 100%; }
	.mark--404 { width: 380px; height: 380px; right: -110px; top: -40px; }
}

/* ==========================================================================
   MOTION — CSS + one IntersectionObserver (assets/js/site.js)
   ========================================================================== */
.js [data-reveal] { opacity: 0; translate: 0 24px; transition: opacity .4s ease, translate .4s ease; }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }
.js .sign__notes li[data-reveal], .js .or[data-reveal] { transition-duration: .5s; }

@media (prefers-reduced-motion: reduce) {
	.ticker__track, .jobcard, .kit-obj, .kit-obj > :first-child, .bm { animation: none !important; }
	.kit-card { transition: none; }
	.kit-tiles__list li, .kit-tiles__list a::after { transition: none; }
	.js [data-reveal] { opacity: 1 !important; translate: none !important; transition: none !important; }
	.btn::after, .jobcard { transition: none; }
	.ghost { transform: none !important; }
	.btn:hover, .btn:focus-visible, .btn:active { transform: none; }
	.btn:hover::before, .btn:focus-visible::before { transform: translateX(-110%); transition: none; }
	.btn:hover::after, .btn:focus-visible::after { animation: none; transform: translateX(4px); }
	.site-nav .sub-menu, .site-nav .sub-menu a { transition: none; }
	.site-header { transition: none; }
}