@charset "UTF-8";
/**
 * Catcha 2026 — reset, layout, typography
 *
 * 02 Reset & base / 03 Layout (shell, section banding) / 04 Typography
 *
 * One slice of the stylesheet. Load order and what lives where:
 * docs/MAP.md at the repo root.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 100px;
	/* `hidden` makes the root a scroll container, which silently disables
	   `position: sticky` on any descendant — the Overview timeline pins
	   with it. `clip` crops identically and creates no scroll container;
	   the pair is a fallback, not a duplicate. */
	overflow-x: hidden;
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink-2);
	font-family: var(--sans);
	font-size: var(--fs-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	/* As on `html` above: `hidden` here resolves `overflow-y` to `auto`,
	   making the body a scroll container and silently killing every
	   `position: sticky` descendant — the Overview timeline pins with one.
	   `clip` crops the same and creates no scroll container. The pair is a
	   fallback, not a duplicate. */
	overflow-x: hidden;
	overflow-x: clip;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }

/* A base link colour. Without one, anything the theme's own components do not
   style — plugin output, Elementor Theme Builder templates, editor content —
   falls back to the browser default #0000EE, which is what turned the article
   page and its sidebar blue. */
a { color: var(--accent); }

::selection { background: rgba(210, 38, 26, 0.14); color: var(--ink); }
/* On the dark footer the light wash vanishes and ink-coloured text goes
   black-on-black: select in the brand red, text white. */
.site-footer ::selection { background: var(--accent); color: #fff; }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.u-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	left: 16px; top: -60px;
	z-index: 1000;
	background: var(--ink);
	color: #fff;
	padding: 11px 18px;
	border-radius: var(--r-sm);
	font-family: var(--label);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: top 160ms var(--ease);
}
.skip-link:focus { top: 16px; }

/* =====================================================================
 * 03  LAYOUT
 * ================================================================== */
.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--pad);
}
.shell--wide { max-width: 1440px; }

.section { padding-block: var(--sec); }
/* One rhythm site-wide. `--tight` used to be a second, smaller step, so the
   gap between two sections depended on which modifier each template had
   picked; it is kept as a no-op alias so the templates need not change. */
.section--tight { padding-block: var(--sec); }

/* ── Section banding ────────────────────────────────────────────────
 * Every page alternates ground / tint from the top down, and only ever
 * uses those two tones.
 *
 * Previously each template chose its own modifier — `section--warm` on the
 * first block here, `$gi % 2` there, `section--dark` (which resolved to a
 * third, deeper tone) somewhere else — so the rhythm broke differently on
 * every page and the Overview strategy band came out darker than anything
 * around it. The order is decided here instead of per template, so it
 * cannot drift again.
 *
 * `nth-of-type` counts only <section> siblings, so the page banner (a
 * <header>) sits outside the count: banner tint, then ground, tint, ground.
 * The modifier classes are left in the templates as no-ops rather than
 * ripped out of nine files.
 * ------------------------------------------------------------------ */
/* `--band` exposes the resolved tone so a component can paint in it (the
   home logo strip fades its edges into whatever band it lands on). */
main > section:nth-of-type(odd)  { --band: var(--ground); background: var(--band); }
main > section:nth-of-type(even) { --band: var(--tint); background: var(--band); }

/* Kept so any stray usage still resolves to a real colour. */
.section--warm { background: var(--tint); }
.section--sink, .section--dark { background: var(--tint); }

/* A band holding a ruled tile grid is always the light `--ground`, never the
   `--tint` half of the alternation. The tiles are `--surface` and hover to
   `--tint`: on a tint band that hover *is* the page colour, so the tile
   dissolves rather than lifts — and deepening the hover instead only buys
   the contrast back by making the whole block heavy. Light band, warm
   hover. Two light bands may then meet, which is fine: the grid's own
   ruling carries the separation the colour change was doing.
   The Careers culture code, the Grow with Us criteria and testimonials,
   and the investor deck read the same way — white panels on light, never on cream. */
main > section:nth-of-type(even):has(:is(
	.chapter-grid, .figure-grid, .roster, .card-grid, .lead-story, a.index-row,
	.code-row, .spec-grid, .embed-frame--deck, .quote-grid
)) {
	--band: var(--ground);
	background: var(--band);
}

/* A lightened band that opens on a section label has nothing to mark its
   start: the colour change is gone, and the label is a small caps line that
   cannot hold the top of a section on its own, so the two sections' padding
   reads as one long empty run. Rule the seam — inset to the shell, like the
   theme's other ruling — and drop the section's own top padding so the air
   sits above the line rather than doubling below it. Sections that open on a
   grid or a `figure-group__head` already carry their own rule and are left
   alone. */
main > section:nth-of-type(even):has(:is(
	.chapter-grid, .figure-grid, .roster, .card-grid, .lead-story, a.index-row,
	.code-row, .spec-grid, .embed-frame--deck, .quote-grid
)):has(> .shell > .label:first-child) {
	padding-top: 0;
}
main > section:nth-of-type(even):has(:is(
	.chapter-grid, .figure-grid, .roster, .card-grid, .lead-story, a.index-row,
	.code-row, .spec-grid, .embed-frame--deck, .quote-grid
)):has(> .shell > .label:first-child) > .shell {
	padding-top: clamp(28px, 2.8vw, 44px);
	border-top: 1px solid var(--line);
}

/* ── Section spacing ────────────────────────────────────────────────
 * Two sections in the same tone read as one plane, so their paddings add
 * up to a double gap (160px+ between Grow with Us's criteria blocks).
 * Where a light band follows a light band, the one above already provides
 * the air: the lower one drops its top padding, so every seam on the site
 * is one --sec, whether or not the colour changes there. "Light" is the
 * same test the banding uses: an odd section, or an even one holding a
 * tile block. */
main > section:is(:nth-of-type(odd), :has(:is(
	.chapter-grid, .figure-grid, .roster, .card-grid, .lead-story, a.index-row,
	.code-row, .spec-grid, .embed-frame--deck, .quote-grid
))) + section:is(:nth-of-type(odd), :has(:is(
	.chapter-grid, .figure-grid, .roster, .card-grid, .lead-story, a.index-row,
	.code-row, .spec-grid, .embed-frame--deck, .quote-grid
))) {
	padding-top: 0;
}

.split { display: grid; gap: clamp(26px, 3.4vw, 56px); }
@media (min-width: 900px) {
	.split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
	.split--wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.stack > * + * { margin-top: 1em; }
.stack--lg > * + * { margin-top: 1.6em; }

/* ── Ruled grids ─────────────────────────────────────────────────────
 * Cells share hairline rules so a set reads as one table rather than a
 * tray of floating tiles — the difference between an institutional page
 * and a template.
 *
 * The rules are drawn by the cells (right + bottom) over a surface-filled
 * container, not by a coloured `gap`. A coloured gap is the shorter trick
 * but the container shows through wherever the final row is incomplete —
 * on Our Companies, a group of 22 marks in a 6-column grid left a grey
 * rectangle sitting in the last two slots.
 * ------------------------------------------------------------------ */
.chapter-grid, .pillar-grid, .figure-grid, .roster,
.spec-grid, .quote-grid, .card-grid {
	gap: 0;
	background: var(--surface);
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
.chapter-grid > *, .pillar-grid > *, .figure-grid > *, .roster > *,
.spec-grid > *, .quote-grid > *, .card-grid > * {
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

/* =====================================================================
 * 04  TYPOGRAPHY
 * ================================================================== */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--serif);
	color: var(--ink);
	font-weight: 700;
	margin: 0;
	font-feature-settings: "kern" 1, "liga" 1;
	text-wrap: balance;
}

.display-xl { font-size: var(--fs-d1); line-height: 1.0;  letter-spacing: -0.026em; }
.display-l  { font-size: var(--fs-d2); line-height: 1.05; letter-spacing: -0.022em; }
.display-m  { font-size: var(--fs-d3); line-height: 1.12; letter-spacing: -0.018em; }
.display-s  { font-size: var(--fs-d4); line-height: 1.2;  letter-spacing: -0.012em; }

.lede {
	font-size: var(--fs-lede);
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 38em;
}

.prose { max-width: 66ch; }
.prose p { margin: 0 0 1.05em; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }

/* Section label — a caps line under a short accent rule. */
.label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 11px;
	margin: 0 0 clamp(18px, 2vw, 28px);
	font-family: var(--label);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--ink-3);
	line-height: 1;
}
.label::before {
	content: "";
	width: 32px; height: 2px;
	background: var(--accent);
	flex: none;
}
.label--center { align-items: center; }
.label--plain::before { display: none; }
.label--center { justify-content: center; }

.num { font-variant-numeric: lining-nums tabular-nums; }