/**
 * css/components/header.css — Website 2.0 global chrome (#52)
 *
 * Static in-flow header bar (logo + primary nav + CTA) and the sticky
 * reveal-on-scroll-up bar (fixed; toggled by js/theme.js `initStickyNav`,
 * a plain-JS port of the design's <cg-stickynav> web component — no
 * custom element is shipped).
 *
 * Reference: docs/Common Good website 2.0/ui_kits/website/media.html
 * `.hnav` + assets/cg-nav.js's shadow-dom `.bar` (hex substituted for the
 * matching design tokens below — same values).
 *
 * Unlike the reference's `.hnav` (position:absolute over a full-bleed
 * hero), this header is a normal in-flow bar so every legacy template —
 * not just the pages already rebuilt to the 2.0 hero pattern — keeps a
 * working, non-overlapping header until its own reskin phase lands.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-header {
	position: relative;
	z-index: 10;
	width: 100%;
	background: var( --surface );
	border-bottom: var( --hairline ) solid var( --rule );
}

.cg-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 20px var( --pad-x );
	min-height: var( --h-header );
	box-sizing: border-box;
}

/* ─── Logo lockup — shared by the static header, sticky bar and footer ── */

.cg-logo {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	flex: none;
	color: var( --text );
	text-decoration: none;
}

.cg-logo svg {
	display: block;
	height: var( --cg-logo-h );
	width: auto;
	color: currentColor;
}

.cg-logo__word {
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 17px;
	line-height: 0.9;
	letter-spacing: -0.01em;
	text-transform: lowercase;
}

.cg-logo--cream {
	color: var( --cg-cream );
}

/* ─── Primary nav (header) ──────────────────────────────────────────── */

/*
 * #307: the horizontal nav is retired at every width in favour of the
 * hamburger + navigation overlay (`.cg-navtoggle` / `#cg-menu`) that
 * already existed for phones. Hidden unconditionally rather than only
 * ≤820px — see the removed `@media (max-width: 820px)` block this used to
 * live in, just below the dropdown rules.
 */
.cg-header__nav {
	display: none;
	flex: 1 1 auto;
	justify-content: center;
}

.cg-header__links {
	display: flex;
	align-items: center;
	gap: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Six top-level items plus "More" no longer clear the logo and CTA at the
 * designed 40px gap once the viewport drops below ~1250px: first the CTA is
 * pushed onto its own row, then the list itself wraps under the logo.
 * Tighten the gap below the 1280px design width — 1280 and up keep the
 * designed 40px untouched.
 */
@media ( max-width: 1279px ) {

	.cg-header__links {
		gap: 24px;
	}
}

@media ( max-width: 1024px ) {

	.cg-header__links {
		gap: 20px;
	}
}

.cg-header__links a {
	position: relative;
	white-space: nowrap;
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --text );
	text-decoration: none;
	opacity: 0.92;
}

.cg-header__links a:hover {
	opacity: 1;
}

.cg-header__links .current-menu-item a,
.cg-header__links .current_page_item a {
	opacity: 1;
	color: var( --accent );
}

.cg-header__cta {
	flex: none;
	/* #307: with .cg-header__nav permanently display:none, this auto
	   margin (not the toggle's) is what creates the gap between the logo
	   and the CTA — see the comment on .cg-navtoggle below for why. */
	margin-left: auto;
}

/* ─── Header nav dropdowns — "More" (secondary menu) + Work sub-menu ──
   Shared by the injected `.cg-nav-more` item and native primary items with
   children (`.menu-item-has-children` → `.sub-menu`), in header + sticky. */

.cg-nav-more {
	position: relative;
	display: flex;
	align-items: center;
}

.cg-header__links .menu-item-has-children,
.cg-stickynav__links .menu-item-has-children {
	position: relative;
}

/* "More" button matches the nav-link type; Work parent link gets a caret. */
.cg-nav-more__toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	white-space: nowrap;
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --text );
	opacity: 0.92;
}

.cg-nav-more__toggle:hover {
	opacity: 1;
}

.cg-header__links .menu-item-has-children > a,
.cg-stickynav__links .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* Caret — the "More" button's <span> and each dropdown parent's <a>::after. */
.cg-nav-more__caret,
.cg-header__links .menu-item-has-children > a::after,
.cg-stickynav__links .menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY( -2px ) rotate( 45deg );
	transition: transform 0.2s ease;
}

.cg-nav-more:hover .cg-nav-more__caret,
.cg-nav-more:focus-within .cg-nav-more__caret,
.cg-header__links .menu-item-has-children:hover > a::after,
.cg-header__links .menu-item-has-children:focus-within > a::after,
.cg-stickynav__links .menu-item-has-children:hover > a::after,
.cg-stickynav__links .menu-item-has-children:focus-within > a::after {
	transform: translateY( 1px ) rotate( 225deg );
}

/* Dropdown panel box (the "More" panel div and native .sub-menu ul). */
.cg-nav-more__panel,
.cg-header__links .sub-menu,
.cg-stickynav__links .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 1200;
	min-width: 210px;
	margin: 18px 0 0;
	padding: 12px 0;
	list-style: none;
	background: var( --surface );
	border: var( --hairline ) solid var( --rule );
	transform: translate( -50%, 8px );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

/* invisible bridge over the gap so hover intent survives the cursor travelling
   from the toggle/parent down to the panel. */
.cg-nav-more__panel::before,
.cg-header__links .sub-menu::before,
.cg-stickynav__links .sub-menu::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	height: 18px;
}

.cg-nav-more:hover .cg-nav-more__panel,
.cg-nav-more:focus-within .cg-nav-more__panel,
.cg-header__links .menu-item-has-children:hover > .sub-menu,
.cg-header__links .menu-item-has-children:focus-within > .sub-menu,
.cg-stickynav__links .menu-item-has-children:hover > .sub-menu,
.cg-stickynav__links .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate( -50%, 0 );
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

.cg-nav-more__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Dropdown items (More list + native sub-menu). */
.cg-nav-more__list a,
.cg-header__links .sub-menu a,
.cg-stickynav__links .sub-menu a {
	display: block;
	padding: 9px 24px;
	white-space: nowrap;
	font-family: var( --font-sans );
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.08em;
	color: var( --text );
	text-decoration: none;
	opacity: 0.92;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.cg-nav-more__list a:hover,
.cg-header__links .sub-menu a:hover,
.cg-stickynav__links .sub-menu a:hover {
	opacity: 1;
	background-color: var( --box-hover-cream );
}

.cg-nav-more__list .current-menu-item a,
.cg-nav-more__list .current_page_item a,
.cg-header__links .sub-menu .current-menu-item a,
.cg-stickynav__links .sub-menu .current-menu-item a {
	opacity: 1;
	color: var( --accent );
}

/* ─── Sticky reveal bar ──────────────────────────────────────────────── */

.cg-stickynav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	transform: translateY( -101% );
	transition: transform 0.56s cubic-bezier( 0.16, 1, 0.3, 1 );
	will-change: transform;
}

.cg-stickynav.is-visible {
	transform: translateY( 0 );
}

.cg-stickynav__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 14px clamp( 20px, 4vw, 84px );
	background: var( --cg-cream-90 );
	-webkit-backdrop-filter: blur( 14px );
	backdrop-filter: blur( 14px );
	border-bottom: var( --hairline ) solid var( --rule );
}

/* The sticky bar used a shrunken logo (34px mark, 15px word set on one line),
   so the lockup visibly changed shape as the bar took over from the static
   header on scroll. It now reuses `.cg-logo` untouched — same mark, same
   two-line wordmark — so scrolling never restyles the logo. */

/* #307: hidden unconditionally, same as `.cg-header__nav` above. */
.cg-stickynav__nav {
	display: none;
}

/* #307: same reasoning as `.cg-header__cta` above -- with the nav gone,
   this auto margin (not the toggle's) creates the gap between the logo
   and the CTA in `.cg-stickynav__bar`'s flex row. */
.cg-stickynav__cta {
	margin-left: auto;
}

.cg-stickynav__links {
	display: flex;
	align-items: center;
	gap: clamp( 18px, 2.4vw, 40px );
	list-style: none;
	margin: 0;
	padding: 0;
}

.cg-stickynav__links a {
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --text );
	text-decoration: none;
	opacity: 0.82;
	transition: color 0.2s, opacity 0.2s;
}

.cg-stickynav__links a:hover {
	opacity: 1;
	color: var( --accent );
}

.cg-stickynav__links .current-menu-item a,
.cg-stickynav__links .current_page_item a {
	opacity: 1;
	color: var( --accent );
}

/* ------------------------------------------------------------------ *
 * Mobile navigation (hamburger → full panel → close).
 *
 * Below the nav breakpoint the horizontal nav and the header CTA are both
 * hidden: the CTA is a 240px pill that left no usable room on a phone. The
 * toggle sits top-right; the panel lists the primary menu vertically and
 * carries its own close button, and the CTA reappears inside it.
 * ------------------------------------------------------------------ */

/*
 * #307: visible unconditionally — the toggle is now the only way into the
 * nav at every width, not just ≤820px.
 *
 * No `margin-left: auto` here (and no `order` override anywhere) — that
 * used to be safe because `.cg-header__nav`/`.cg-stickynav__nav` was a
 * flex-basis:auto item filling the middle of the bar, so the toggle's
 * auto margin only ever ate the sliver of space left after the nav took
 * its share. With the nav permanently `display:none` it drops out of
 * flex layout entirely, and an auto margin on the LAST item in a
 * `justify-content:space-between` row consumes *all* the row's free
 * space before space-between gets anything to distribute — collapsing
 * the CTA back against the logo with the toggle stranded far to the
 * right (adversarial review, first pass). The auto margin now lives on
 * `.cg-header__cta`/`.cg-stickynav__cta` instead, so the gap lands
 * between the logo and the CTA; `.cg-header__bar`/`.cg-stickynav__bar`'s
 * own `gap` keeps the CTA and toggle snug next to each other.
 */
.cg-navtoggle {
	display: block;
	padding: 12px;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.cg-navtoggle__box {
	display: block;
	width: 26px;
}

.cg-navtoggle__bar {
	display: block;
	height: 2px;
	background: currentcolor;
}

.cg-navtoggle__bar + .cg-navtoggle__bar {
	margin-top: 6px;
}

/* ─── Navigation overlay — approved design 2A ────────────────────────────
 * Design project: `ui_kits/website/nav-overlay.html`
 * Spec:           `design_handoff/nav-menu-spec.md`
 *
 * Replaces the scrolling full-screen panel. The whole menu fits ONE viewport
 * at every size — three columns ≥1025px, stacked groups with two-up items
 * ≤1024px. No accordion, no "more" affordance, and no scroll container as a
 * layout strategy: if a future link makes it overflow, the fix is IA (merge
 * or drop an item), not scrolling.
 *
 * Built on the theme's own tokens, not the spec's literals. Three of them
 * have drifted from the design system and reconciling them is a sitewide
 * decision, not a nav one: `--cg-rust` ships #E3581D where the design says
 * #C8491A, `--cg-cream` ships #F5F5F5 where the design says #F5F3EE, and
 * `--font-body` is Averta Std since #197 where the spec still says 42dot
 * Sans. Using the tokens keeps the overlay identical to the chrome it opens
 * over; hardcoding the design literals would make this the only surface on
 * the site with its own orange.
 * ---------------------------------------------------------------------- */

/*
 * A class-level `display` beats the UA stylesheet's `[hidden]` rule, so
 * without this the closed overlay stays laid out over the whole page at
 * opacity 0 and silently swallows every click.
 */
.cg-menu[ hidden ] {
	display: none;
}

.cg-menu {
	position: fixed;
	/*
	 * Above every piece of our own chrome, measured 2026-08-07 rather than
	 * assumed: `.cg-stickynav` 1000, `.cg-header__links .sub-menu` / sticky
	 * dropdowns 1200, and the gff-contact flyout tab 1100 — which, on an equal
	 * 1100, painted OVER the Philosophy column because it comes later in the
	 * DOM. 1300 clears all three.
	 *
	 * Deliberately still BELOW the cookie-consent banner (z-index 9999): a
	 * consent mechanism is not ours to cover. See the note on
	 * `.cg-menu__body` about what that costs on the smallest viewports.
	 */
	z-index: 1300;
	inset: 0;
	display: flex;
	/*
	 * Safety net only, never the layout strategy. In the approved design
	 * nothing reaches it; if a future edit overflows, links stay reachable
	 * instead of being silently clipped off both edges.
	 */
	overflow-y: auto;
	flex-direction: column;
	padding: 38px var( --pad-x ) 44px;
	background: var( --cg-cream );
	opacity: 0;
	overscroll-behavior: contain;
	transition: opacity var( --fade-out ) var( --fade-ease );
}

.cg-menu.is-open {
	opacity: 1;
	transition-duration: 260ms;
}

/* ── top bar: logo · Home · Close ── */

.cg-menu__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.cg-menu__logo {
	flex: none;
	color: var( --cg-ink );
}

.cg-menu__logo svg {
	display: block;
	width: auto;
	height: 38px;
}

/*
 * `open()` moves focus here, and `style.css:1288` (`a { outline: none }`) strips
 * the UA ring sitewide — so without this the commonest keyboard interaction on
 * the site, Enter on the hamburger, moved focus somewhere with NO visible
 * feedback at all. Every other control in the overlay signals focus by turning
 * rust; the logo is ink on cream and cannot, so it gets a real ring.
 */
.cg-menu__logo:focus-visible {
	outline: 2px solid var( --accent );
	outline-offset: 6px;
}

/* A column heading that the editor gave a real destination. */
.cg-menu__coltitle {
	color: inherit;
	text-decoration: none;
	transition: color var( --fade-in ) var( --fade-ease );
}

.cg-menu__coltitle:hover,
.cg-menu__coltitle:focus-visible {
	color: var( --accent );
}

.cg-menu__util {
	display: flex;
	align-items: center;
	gap: 38px;
}

.cg-menu__cap {
	padding: 0;
	border: 0;
	/* The global button styling rounds corners; the design has no radius at all. */
	border-radius: 0;
	background: none;
	color: var( --cg-ink );
	font-family: var( --font-sans );
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: color var( --fade-in ) var( --fade-ease );
}

.cg-menu__cap:hover,
.cg-menu__cap:focus-visible {
	color: var( --accent );
}

.cg-menu__close {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.cg-menu__close svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* ── nav block: optically centered in the space left by the top bar ── */

.cg-menu__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	/*
	 * `safe center` rather than plain `center`: if content ever does exceed
	 * the free space it pins below the top bar instead of overflowing off
	 * both edges. Plain `center` would push the first column off the top.
	 */
	justify-content: center;
	justify-content: safe center;
	min-height: 0;
	gap: 56px;
	/*
	 * The last-resort scroll lives HERE, not on `.cg-menu`, and it is why the
	 * overlay can never hide a link.
	 *
	 * `flex: 1; min-height: 0` lets this box shrink BELOW its content, and with
	 * no `overflow` the content then spilled out of it visibly — past the
	 * overlay's bottom padding and under the cookie-consent bar — without
	 * `.cg-menu` ever reporting overflow, so the safety net there never fired.
	 * Measured at 320x568 with a 232px consent bar: six links plus the CTA
	 * unreachable and unscrollable.
	 *
	 * In the approved design nothing reaches this: with no consent bar the menu
	 * fits every viewport tested, 1920x1080 down to 320x568. It exists for the
	 * degraded state where third-party chrome takes 200px+ of a short screen —
	 * where scrolling is plainly better than an unreachable CTA.
	 */
	overflow-y: auto;
	overscroll-behavior: contain;
	/*
	 * Per CSS Overflow, `visible` on one axis computes to `auto` when the other is
	 * `auto` — so adding the vertical safety net silently made this a HORIZONTAL
	 * scroll container too, and the columns' `margin: -20px` hover inset then
	 * overflowed it: measured scrollWidth 1292 vs clientWidth 1272 at every
	 * viewport, with the tint clipped flush to the text on the left while still
	 * clearing 20px on the right. Spec §2 wants 20px on all four sides.
	 *
	 * Matching inline padding + negative margin keeps the inset inside this box,
	 * so there is nothing to scroll sideways. It fits: `.cg-menu`'s own inline
	 * padding is `--pad-x` (>=84px) at desktop and 22px at <=1024.
	 */
	padding-inline: 20px;
	margin-inline: -20px;
	/*
	 * `--cg-menu-reserve` (set by js/cg-motion.js on open) is the intrusion of any
	 * bottom-anchored fixed chrome painting above this overlay that it must not
	 * suppress — in practice the cookie-consent bar at z-index 9999, which
	 * otherwise covered the CTA at 414x896 and 390x844. 0px when there is none.
	 *
	 * It belongs HERE, on the scroll container's own padding, not on `.cg-menu`.
	 * On `.cg-menu` it shrank this flex child, which letterboxed the menu — a
	 * 130px strip showing one link per column. As trailing padding inside the
	 * scroller it does two things instead: `safe center` lifts the content clear
	 * of the chrome when everything still fits, and when it does not, the padding
	 * is part of the scrollable range, so scrolling to the end puts the LAST
	 * element (the CTA) above the chrome rather than permanently under it.
	 */
	padding-bottom: var( --cg-menu-reserve, 0px );
}

.cg-menu__cols {
	display: grid;
	gap: 80px;
	/*
	 * `grid-auto-flow: column` rather than `repeat(3, 1fr)`. The design has three
	 * columns and cg_menu_overlay_data() no longer caps the count (anything with
	 * children is a column), so a 4th heading added in the admin used to wrap to a
	 * second row and be absorbed by the body's scroll — turning the one thing
	 * spec §1 forbids, a scroll container as layout, into the default outcome of a
	 * menu edit. Now N columns always share one row: a 4th makes every column
	 * narrower, which is visibly not the design and therefore gets noticed.
	 */
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

/*
 * The 20px padding gives the hover tint breathing room; the matching negative
 * margin keeps the text itself on the content frame, so only the tint grows
 * and the column headings stay aligned with the logo in the bar above.
 */
.cg-menu__col {
	padding: 20px;
	margin: -20px;
	transition: background-color var( --fade-out ) var( --fade-ease );
}

/*
 * Decorative only — it must not read as a selected state, and it must not
 * stick on touch, where there is no pointer to move away.
 */
@media ( hover: hover ) {

	.cg-menu__col:hover {
		background: var( --box-hover-cream );
	}
}

/* The rule-mark above each column title. */
.cg-menu__col::before {
	display: block;
	width: 41px;
	height: 1px;
	background: var( --accent );
	content: "";
}

.cg-menu__col h2 {
	margin: 16px 0 0;
	color: var( --cg-ink );
	font-family: var( --font-serif );
	font-size: 31px;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.cg-menu__col .cg-menu__list {
	display: flex;
	flex-direction: column;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

/*
 * `display: flex` on the <li>, not for layout — to stop it generating a line
 * box of its own. The markup puts newlines either side of the <a>, and as a
 * `list-item` the <li> renders those whitespace nodes at ITS line-height
 * (27.84px), adding ~25px to every row on top of the anchor's real height.
 * Measured 2026-08-07: li 67.2px vs a 42.2px at 390x844. That is what pushed
 * the CTA off the bottom of every phone. As a flex container the whitespace
 * generates no flex item and the row is exactly the anchor.
 */
.cg-menu__list li {
	display: flex;
}

/* First link in each column carries no divider. */
.cg-menu__list li + li a {
	border-top: 1px solid rgba( 14, 14, 12, 0.13 );
}

.cg-menu__col a {
	display: block;
	flex: 1;
	padding: 11px 0;
	color: var( --cg-ink );
	font-family: var( --font-body );
	font-size: 17px;
	line-height: 1.3;
	text-decoration: none;
	transition: color var( --fade-in ) var( --fade-ease );
}

.cg-menu__col a:hover,
.cg-menu__col a:focus-visible {
	color: var( --accent );
}

.cg-menu__col a[ aria-current="page" ] {
	color: var( --accent );
}

/*
 * Our own floating chrome is suppressed while the overlay is open — the
 * gff-contact flyout tab is `position: fixed` and was drawing over the nav
 * columns. Keyed off a class on <html> (set by js/cg-motion.js) rather than a
 * sibling selector, because the flyout is injected at the end of <body>, far
 * from `.cg-menu`.
 */
.cg-menu-open .contact-popup-gff {
	display: none;
}

/* ── CTA ── */

.cg-menu__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 20px 30px;
	background: var( --cg-ink );
	color: var( --cg-cream );
	font-family: var( --font-sans );
	font-size: 10px;
	font-weight: 700;
	gap: 14px;
	letter-spacing: 0.22em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var( --fade-in ) var( --fade-ease );
}

.cg-menu__cta:hover,
.cg-menu__cta:focus-visible {
	background: var( --accent );
	color: var( --cg-cream );
}

/* ─── Overlay foot: CTA + social ─────────────────────────────────────── */

/*
 * One row across the full body width, so the icons' right edge lands on the
 * last column's right edge above (#CD-2026-08-22). `.cg-menu__cols` is a
 * full-width grid, so "the same width" needs no shared token — both are simply
 * block children of `.cg-menu__body`.
 *
 * `align-items: center` rather than `flex-end`: the CTA is a 60px button and
 * the icon row is ~24px, and the design hangs the icons on the button's optical
 * centre, not its baseline.
 */
.cg-menu__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
	align-items: center;
	justify-content: space-between;
}

/*
 * >1024px ONLY. Below that the foot stops being a row at all — see the
 * `display: contents` rule further down — so this must not apply there.
 *
 * Written as a min-width query rather than a plain descendant selector because
 * `.cg-menu__foot .cg-menu__cta` scores (0,2,0) and the mobile
 * `@media (max-width:1024px) .cg-menu__cta { align-self: stretch }` scores
 * (0,1,0). Media queries add no specificity, so the unqualified version could
 * never lose — and it didn't: it silently took `stretch` off the CTA at every
 * width from 1024px down, shrinking the design's full-width mobile pill to a
 * 252px button on every phone and tablet. Caught in review by diffing computed
 * `align-self` against Dev, not by looking at it.
 */
@media ( min-width: 1025px ) {

	.cg-menu__foot .cg-menu__cta {
		align-self: center;
	}
}

.cg-menu__social {
	display: flex;
	gap: 22px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cg-menu__social a {
	display: block;
	color: var( --cg-ink );
	font-size: 18px;
	line-height: 1;
	transition: color var( --fade-out ) var( --fade-ease );
}

.cg-menu__social a:hover,
.cg-menu__social a:focus-visible {
	color: var( --accent );
}

/*
 * At 1024px and below the foot dissolves and the icons are dropped.
 *
 * `display: contents` removes the wrapper from layout entirely, so the CTA
 * becomes a direct child of the column `.cg-menu__body` again and behaves
 * EXACTLY as it did before this row existed — full-width, `align-self:
 * stretch`, arrow pushed to the far edge. Nothing about the mobile menu
 * changes.
 *
 * The icons are hidden rather than stacked, and that is an IA decision, not a
 * shortcut. CLAUDE.md → Header and navigation: "The whole menu must fit one
 * viewport with no scrolling… If it ever overflows the fix is IA — merge or
 * drop an item — never a scroll container." Measured, there is no room to
 * spend: at 390x844 (iPhone 14/15/16 portrait) the overlay on `main` fits in
 * exactly 772px of 772px, zero headroom. Stacking the icons under a
 * full-width CTA adds 44px, which overflowed by 33px AND put all four icons
 * underneath the cookie-consent bar.
 *
 * Nothing is lost: the same four icons are in the footer at every width, from
 * the same Theme Options rows via the same partial. The CD's request placed
 * them beside the "Start the conversation" button, which is a layout that only
 * exists above this breakpoint.
 */
@media ( max-width: 1024px ) {

	.cg-menu__foot {
		display: contents;
	}

	.cg-menu__social {
		display: none;
	}
}

/*
 * Entrance stagger — per column, then the CTA. CSS-only: the columns are
 * fixed in number and order, so nth-child delays need no JS. `background-color`
 * stays in the transition list because `.cg-menu__col` also animates its hover
 * tint, and re-declaring `transition` here would otherwise drop it.
 */
.cg-menu__col,
.cg-menu__cta,
.cg-menu__social {
	opacity: 0;
	transform: translateY( 12px );
	transition:
		opacity 460ms cubic-bezier( 0.16, 1, 0.3, 1 ),
		transform 460ms cubic-bezier( 0.16, 1, 0.3, 1 ),
		background-color var( --fade-out ) var( --fade-ease );
}

.cg-menu.is-open .cg-menu__col,
.cg-menu.is-open .cg-menu__cta,
.cg-menu.is-open .cg-menu__social {
	opacity: 1;
	transform: none;
}

/*
 * 60ms per column. Enumerated rather than computed because CSS cannot multiply an
 * nth-child index — and enumerated PAST the design's three, because a 4th or 5th
 * heading is one admin edit away and extras were otherwise animating in step with
 * the first column, breaking the left-to-right cadence.
 */
.cg-menu.is-open .cg-menu__col:nth-child( 2 ) {
	transition-delay: 60ms;
}

.cg-menu.is-open .cg-menu__col:nth-child( 3 ) {
	transition-delay: 120ms;
}

.cg-menu.is-open .cg-menu__col:nth-child( 4 ) {
	transition-delay: 180ms;
}

.cg-menu.is-open .cg-menu__col:nth-child( 5 ) {
	transition-delay: 240ms;
}

.cg-menu.is-open .cg-menu__col:nth-child( n + 6 ) {
	transition-delay: 300ms;
}

/*
 * The icons land last, just after the CTA they sit beside. Without a delay they
 * inherit 0ms and arrive with column 1 — ahead of columns 2 and 3 and before
 * the button, which reads as the row assembling backwards.
 */
.cg-menu.is-open .cg-menu__social {
	transition-delay: 240ms;
}

.cg-menu.is-open .cg-menu__cta {
	transition-delay: 180ms;
}

/*
 * Short desktop windows — compress before anything can overflow. A 1280×720
 * or 924×540 window is common. `padding-block` LONGHAND, never the `padding`
 * shorthand: the shorthand would wipe the 20px inline hover inset while
 * leaving the -20px margin behind, throwing the nav text out of alignment
 * with the top bar.
 */
@media ( min-width: 1025px ) and ( max-height: 800px ) {

	.cg-menu__body {
		padding-top: 28px;
		gap: 36px;
	}

	.cg-menu__col {
		padding-block: 16px;
	}

	.cg-menu__col h2 {
		margin-top: 14px;
		font-size: 26px;
	}

	.cg-menu__col .cg-menu__list {
		margin-top: 14px;
	}

	.cg-menu__col a {
		padding: 8px 0;
		font-size: 16px;
	}

	.cg-menu__cta {
		padding: 17px 26px;
	}
}

/*
 * ≤1024px — stacked groups, items two-up.
 *
 * Every vertical value is viewport-HEIGHT driven: a vh measure clamped
 * between a floor and the approved design value, which is the clamp ceiling.
 * The stack therefore scales itself into the free space instead of relying on
 * fixed sizes plus max-height patches — a tall phone gets exactly the
 * approved spacing, a short window compresses smoothly and never spills.
 * Horizontal values stay fixed (20px hover inset, 16px column gap, 22px page
 * padding). Tap targets reach 44px on any phone ≥880px tall and never fall
 * below 30px on a short desktop window.
 */
@media ( max-width: 1024px ) {

	.cg-menu {
		padding: 22px;
	}

	.cg-menu__logo svg {
		height: 28px;
	}

	.cg-menu__util {
		gap: 20px;
	}

	.cg-menu__body {
		padding-top: clamp( 12px, 3vh, 28px );
		gap: clamp( 8px, 2vh, 26px );
	}

	.cg-menu__cols {
		gap: 0;
		grid-auto-flow: row;
		grid-auto-columns: auto;
	}

	.cg-menu__col {
		padding: clamp( 6px, 1.4vh, 22px ) 20px;
		margin: 0 -20px;
	}

	.cg-menu__col:first-child {
		padding-top: 2px;
	}

	.cg-menu__col:last-child {
		padding-bottom: 2px;
	}

	.cg-menu__col + .cg-menu__col {
		border-top: 1px solid rgba( 14, 14, 12, 0.18 );
	}

	.cg-menu__col h2 {
		margin-top: clamp( 6px, 1.2vh, 10px );
		font-size: clamp( 17px, 2.6vh, 21px );
		line-height: 1;
	}

	.cg-menu__col .cg-menu__list {
		display: grid;
		margin-top: clamp( 6px, 1.4vh, 12px );
		gap: 0 16px;
		grid-template-columns: 1fr 1fr;
	}

	/* Dividers are the group rules at this size, not per-link. */
	.cg-menu__list li + li a {
		border-top: 0;
	}

	.cg-menu__col a {
		display: flex;
		align-items: center;
		min-height: clamp( 30px, 5vh, 44px );
		padding: 0;
		font-size: clamp( 13px, 1.9vh, 15px );
		line-height: 1.25;
	}

	.cg-menu__cta {
		justify-content: space-between;
		align-self: stretch;
		padding: clamp( 12px, 2.2vh, 19px ) 22px;
	}
}

/*
 * Narrowest phones. The reference build also collapsed to ONE column of items
 * here; that is deliberately not carried over. Thirteen links stacked singly
 * cannot fit a 375x667 viewport (measured ~736px of content in 667px), and the
 * no-scroll guarantee is the point of this design — spec §1, "the whole menu
 * must fit one viewport at every size". The spec's own escalation for exactly
 * this case is "if it overruns there, drop item type to 14px before touching
 * anything else" (§3), so the type drop is kept and the column collapse is not.
 */
@media ( max-width: 380px ) {

	.cg-menu__col a {
		font-size: 14px;
	}
}

/*
 * #307: phone-width-only — the CTA is a 240px pill that left no usable
 * room in the header bar at phone widths, so it moves into the overlay
 * instead (its own `.cg-menu__cta`, which the 2A design renders at every
 * width). The toggle rule that used to share this block is unconditional
 * above: the overlay is reachable at every width.
 */
@media ( max-width: 820px ) {

	/*
	 * Below 820px the bar is sized by its content, not by --h-header's 100px
	 * floor, so the logo's height lands on the header's height 1:1 — measured at
	 * 390px, 56px logo = 97px bar against 83px today. 48px keeps most of the
	 * legibility gain for 6px of chrome instead of 14.
	 *
	 * On :root, not bare in the media block — a custom property still needs a
	 * selector, and it has to be :root so the intro overlay in logo-intro.css
	 * sees the same value as the inline lockup it covers.
	 */
	:root {
		--cg-logo-h: 48px;
	}

	.cg-header__cta,
	.cg-stickynav__cta {
		display: none;
	}
}

/*
 * Reduced motion: opacity only, 120ms, no transform, no stagger.
 *
 * Done with specificity rather than `!important` (house rule: no `!important`
 * anywhere in this layer). Each selector below matches the specificity of the
 * rule it overrides and sits later in the file, which is what makes it win —
 * so these selectors must be kept in step if the stagger selectors change.
 */
@media ( prefers-reduced-motion: reduce ) {

	.cg-menu {
		transition-duration: 120ms;
	}

	.cg-menu__col,
	.cg-menu__cta,
	.cg-menu__social {
		transform: none;
		transition:
			opacity 120ms var( --fade-ease ),
			background-color var( --fade-out ) var( --fade-ease );
	}

	.cg-menu.is-open .cg-menu__col:nth-child( 2 ),
	.cg-menu.is-open .cg-menu__col:nth-child( 3 ),
	.cg-menu.is-open .cg-menu__cta,
	.cg-menu.is-open .cg-menu__social {
		transition-delay: 0s;
	}
}