/**
 * Site header.
 */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--surface);
	border-bottom: 1px solid var(--rule);
	transition: height var(--transition);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-8);
	height: var(--header-h);
	transition: height var(--transition);
}

.site-header--stuck .site-header__inner { height: var(--header-h-sticky); }

.site-header__brand img,
.site-header__logo {
	height: auto;
	max-height: calc(var(--header-h) - var(--sp-6));
	width: auto;
	transition: max-height var(--transition);
}

.site-header--stuck .site-header__logo {
	max-height: calc(var(--header-h-sticky) - var(--sp-4));
}

.nav {
	display: flex;
	align-items: center;
	gap: var(--sp-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	padding: var(--sp-2) 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--ink);
	cursor: pointer;
	white-space: nowrap;
}

.nav__link:hover { text-decoration: none; color: var(--brand-navy); }

.nav__item--depth-0 > .nav__link {
	position: relative;
}

.nav__item--depth-0 > .nav__link::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--brand-navy);
	transform: scaleX(0);
	transition: transform var(--transition);
}

.nav__item--depth-0:hover > .nav__link::after,
.nav__item--open > .nav__link::after { transform: scaleX(1); }

/* Mega panel */
.nav__item--parent { position: static; }

/*
 * The panel is a child of its <li> but is positioned against .site-header, so
 * it opens well below the nav row. The pointer has to cross that gap, which is
 * not a descendant of the <li>, so a naive mouseleave closed the panel before
 * you could reach it. theme.js delays the close and cancels it on re-entry — a
 * CSS bridge element was the other option but it would overlay the nav bar and
 * swallow hovers on the sibling top-level items.
 */
.mega__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	padding: var(--sp-8) 0;
	background: var(--surface-alt);
	border-bottom: 1px solid var(--rule);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);

	/* Animated open: fade + slide down, clipped so it wipes out from the bar. */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	clip-path: inset(0 0 100% 0);
	pointer-events: none;
	transition:
		opacity 0.22s var(--ease),
		transform 0.28s var(--ease),
		clip-path 0.28s var(--ease),
		visibility 0s linear 0.28s;
}

.nav__item--open > .mega__panel {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	clip-path: inset(0 0 0 0);
	pointer-events: auto;
	transition:
		opacity 0.22s var(--ease),
		transform 0.28s var(--ease),
		clip-path 0.28s var(--ease),
		visibility 0s;
}

/* The columns drift up a touch behind the panel wipe. */
.mega__panel > ul > .nav__item--depth-1 {
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity 0.24s var(--ease),
		transform 0.24s var(--ease);
}

.nav__item--open > .mega__panel > ul > .nav__item--depth-1 {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
	.mega__panel,
	.mega__panel > ul > .nav__item--depth-1,
	.nav__item--open > .mega__panel,
	.nav__item--open > .mega__panel > ul > .nav__item--depth-1 {
		transition: none;
		transform: none;
	}
}

.mega__panel > ul {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--sp-8);
	width: 100%;
	max-width: var(--wrap-wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
	list-style: none;
}

.mega__panel .nav__item--depth-1 > .nav__link {
	font-family: 'Inter Bold Axis', var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--tracking-wider);
	margin-bottom: var(--sp-3);
	white-space: normal;
}

/* A parent with plain links under it (Downloads): one centred row, not columns. */
.mega__panel--row > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2) var(--sp-12);
}

.mega__panel--row .nav__item--depth-1 > .nav__link {
	margin-bottom: 0;
}

.mega__list ul { list-style: none; margin: 0; padding: 0; }

.mega__list .nav__link {
	font-size: var(--fs-sm);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	padding: var(--sp-1) 0;
	color: var(--ink-muted);
}

.mega__list .nav__link:hover { color: var(--ink); }

/* Plank-width jump links under a collection: a quiet indented list, one size per line. */
.mega__list ul.mega__widths {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	margin: 0 0 var(--sp-2) var(--sp-3);
}

.mega__width {
	font-size: var(--fs-xs);
	color: var(--ink-muted);
	text-decoration: none;
	white-space: nowrap;
}

.mega__width:hover { color: var(--brand-red); }

/* Room between one width's last row and the next width's heading. */
.collection-grid .grid + .section-heading {
	margin-top: var(--sp-12);
}

/* Width headings clear the sticky bar when reached by a jump link. */
.collection-grid .section-heading[id] {
	scroll-margin-top: calc(var(--header-h-sticky) + var(--sp-6));
}

/* Burger + drawer */
.site-header__burger { display: none; }

@media (max-width: 1023px) {
	.site-nav { display: none; }

	.site-header__burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px; height: 44px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.burger__bars,
	.burger__bars::before,
	.burger__bars::after {
		display: block;
		width: 24px; height: 2px;
		background: var(--ink);
		content: '';
		transition: transform var(--transition);
	}

	.burger__bars::before { transform: translateY(-7px); }
	.burger__bars::after  { transform: translateY(5px); }

	.drawer {
		position: fixed;
		inset: var(--header-h) 0 0;
		z-index: 99;
		overflow-y: auto;
		padding: var(--sp-6) var(--gutter);
		background: var(--surface);
	}

	.drawer__menu,
	.drawer__menu ul { list-style: none; margin: 0; padding: 0; }
	.drawer__menu ul { padding-left: var(--sp-4); }

	.drawer__menu a {
		display: block;
		padding: var(--sp-3) 0;
		border-bottom: 1px solid var(--rule);
		font-size: var(--fs-base);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
	}

	.drawer__menu ul a { font-weight: 400; text-transform: none; letter-spacing: 0; }
}

/**
 * Buttons.
 */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: var(--sp-3) var(--sp-8);
	border: 1px solid transparent;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: var(--transition);
}

.btn:hover { text-decoration: none; }

.btn--navy { background: var(--brand-navy); color: var(--ink-invert); }
.btn--navy:hover { background: var(--brand-navy-dark); }

.btn--light { background: var(--surface); color: var(--brand-navy); }
.btn--light:hover { background: var(--surface-alt); }

.btn--ghost-light {
	background: transparent;
	color: var(--ink-invert);
	border-color: rgba(255, 255, 255, 0.6);
}

.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.12); }

/**
 * Navy quality bar (footer).
 */

.quality-bar {
	overflow: hidden;
	background: var(--brand-navy);
	padding-block: var(--sp-2);
}

.quality-bar__track {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	row-gap: var(--sp-2);
	column-gap: var(--sp-6);
}

.quality-bar__word {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--fs-xl);
	color: var(--ink-invert);
}

.quality-bar__dot { color: var(--ink-invert); font-weight: 700; }

/**
 * Navy CTA band.
 */

/*
 * Warm, not navy: the footer's Quality · Beauty · Longevity bar sits right
 * below it in navy, and two navy bands in a row read as one block.
 */
.cta-band {
	background: var(--surface-warm);
	border-top: 1px solid var(--rule);
	color: var(--brand-navy);
}

.cta-band__inner {
	padding-block: var(--sp-12);
	text-align: center;
}

.cta-band__title {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-3xl);
	letter-spacing: -0.01em;
}

.cta-band__lede {
	max-width: 46ch;
	margin-inline: auto;
	margin-bottom: var(--sp-8);
	font-size: var(--fs-sm);
	color: var(--ink-muted);
}

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-4);
}

/**
 * Disclaimer.
 */

.disclaimer { padding-block: var(--sp-8); }

.disclaimer__p {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--ink-subtle);
}

/**
 * Footer.
 */

.site-footer { padding-block: var(--sp-12) var(--sp-6); }

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-8);
}

/*
 * Flex (not a fixed-track grid) so an unassigned footer nav location
 * degrades gracefully: the remaining brand block + columns reflow to
 * fill the row instead of leaving a dead gap where a column would
 * have been.
 */
.site-footer__brand { flex: 1.6 1 260px; }

.site-footer__col { flex: 1 1 140px; }

.site-footer__name {
	margin-bottom: 0;
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
}

.site-footer__tagline {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--brand-red);
}

.site-footer__address {
	font-size: var(--fs-xs);
	font-style: normal;
	line-height: 1.7;
	color: var(--ink-muted);
}

.site-footer__heading {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-xs);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
}

.site-footer__menu { list-style: none; margin: 0; padding: 0; }

.site-footer__menu a {
	display: block;
	padding: var(--sp-1) 0;
	font-size: var(--fs-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--ink-muted);
}

.site-footer__menu a:hover { color: var(--ink); }

.site-footer__legal {
	margin-top: var(--sp-8);
	font-size: var(--fs-xs);
	color: var(--ink-subtle);
}

@media (max-width: 767px) {
	.site-footer__inner { flex-direction: column; }
	.quality-bar__word { font-size: var(--fs-lg); }
}

/**
 * Section heading with diamond rule.
 */

.section-heading { margin-bottom: var(--sp-8); text-align: center; }

.section-heading__title {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-2xl);
	font-weight: 400;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--ink-muted);
}

.section-heading--ruled .section-heading__title {
	font-weight: 700;
	color: var(--ink);
}

.section-heading__rule {
	position: relative;
	display: block;
	width: min(420px, 80%);
	height: 1px;
	margin-inline: auto;
	background: linear-gradient(to right, transparent, var(--ink) 20%, var(--ink) 80%, transparent);
}

.section-heading__rule::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 10px; height: 10px;
	background: var(--ink);
	transform: translate(-50%, -50%) rotate(45deg);
}

/**
 * Product swatch card.
 */

.product-card__link { display: block; }
.product-card__link:hover { text-decoration: none; }

.product-card__media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--surface-alt);
}

/*
 * Bug fix (whole-site sweep): WooCommerce's own stylesheet ships
 * `.woocommerce img, .woocommerce-page img { height: auto; max-width: 100% }`
 * on every WC-flagged template (every taxonomy-product_cat.php and
 * single-product.php page). That compound selector (one class + one type)
 * is more specific than a lone `.product-card__img` class, so it silently
 * won the cascade and this rule's `height: 100%` never actually applied —
 * the <img> instead sized to its native intrinsic ratio (e.g. 212x292 for
 * a 435x600 source), rendered top-anchored, and overflowed the 212x212
 * .product-card__media box. It only looked correct because that ancestor's
 * `overflow: hidden` silently clipped the excess — invisible on the
 * catalogue's mostly-square swatch photography (596x600, 600x600 →
 * ~210-212px auto height, no visible clip), but wrong the moment a source
 * image isn't square: the Casablanca collection's 435x600 portrait swatches
 * clip 80px off the bottom of a top-anchored image instead of an
 * object-fit: cover center-crop. Qualifying the selector with its parent
 * (two classes) restores the specificity this needs to win, with no
 * !important.
 */
.product-card__media .product-card__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.product-card__link:hover .product-card__img { transform: scale(1.06); }

/* Texture close-up, revealed over the room shot on hover / keyboard focus. */
.product-card__media .product-card__img--texture {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--transition), transform 0.6s var(--ease);
}

.product-card__link:hover .product-card__img--texture,
.product-card__link:focus-visible .product-card__img--texture {
	opacity: 1;
}

.product-card__placeholder { display: block; width: 100%; height: 100%; }

.product-card__name {
	margin: var(--sp-3) 0 0;
	font-size: var(--fs-sm);
	font-weight: 700;
	text-align: center;
}

.product-card__dimension,
.product-card__style {
	margin: 0;
	font-size: var(--fs-xs);
	text-align: center;
	color: var(--ink-subtle);
}

.product-card__style { letter-spacing: var(--tracking-wide); }

/**
 * Collection card with overlapping copy panel.
 */

.collection-card { position: relative; display: grid; }

.collection-card__media { grid-area: 1 / 1; }
.collection-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/*
 * Stand-in for a collection whose photography hasn't arrived yet (see
 * collection-card.php). It must match .collection-card__img's ratio exactly,
 * or the card collapses and the copy panel — which shares its grid cell —
 * lands on top of the next card. Deliberately quiet: a flat tone off the
 * neutral surface, so an unphotographed collection reads as pending rather
 * than as a failed image load.
 */
.collection-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: var(--sp-6);
	background: var(--surface-alt);
	border: 1px solid var(--rule);
}

.collection-card__placeholder-text {
	font-size: var(--fs-sm);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--ink-subtle);
	text-align: center;
}

.collection-card__panel {
	grid-area: 1 / 1;
	align-self: start;
	width: min(52%, 460px);
	margin: var(--sp-6) 0 0 0;
	padding: var(--sp-6);
	background: rgba(255, 255, 255, 0.94);
}

/* The design alternates which side the copy panel sits on down the stack. */
.collection-card--right .collection-card__panel { justify-self: end; }
.collection-card--left  .collection-card__panel { justify-self: start; }

.collection-card__title { margin-bottom: var(--sp-2); font-size: var(--fs-lg); }
.collection-card__logo  { display: block; width: 100%; max-width: 340px; height: auto; }
.collection-card__desc  { margin-bottom: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-muted); }

/**
 * Collection grid.
 */

.collection-grid { padding-block: var(--sp-12); }

.collection-grid__heading {
	margin-bottom: var(--sp-6);
	font-size: var(--fs-lg);
	font-weight: 700;
}

@media (max-width: 767px) {
	/*
	 * Bug fix (whole-site sweep): this rule previously only reset the
	 * panel's own width/margin and left `.collection-card` as a grid with
	 * both `.collection-card__media` and `.collection-card__panel` still
	 * placed on the same `grid-area: 1 / 1` (set above, not overridden
	 * here). Widening the panel to 100% while it stayed in that shared
	 * cell didn't stop the overlap the desktop design intends — it made it
	 * total: the translucent (94% opacity) panel ended up covering the
	 * entire photo edge-to-edge instead of just its ~52% desktop slice,
	 * washing the image out to a barely-visible ghost behind the card
	 * copy. Confirmed via getBoundingClientRect(): card/media/panel rects
	 * were pixel-identical at 375px. Same failure mode as the
	 * .feature-card__body fix documented in pages.css, and the same
	 * remedy — take the card out of the overlapping grid and stack media
	 * above copy in normal flow below this breakpoint. The desktop overlap
	 * (`display: grid` on .collection-card, both children on
	 * grid-area: 1 / 1) is untouched above 767px.
	 */
	.collection-card { display: flex; flex-direction: column; }

	.collection-card__panel {
		position: static;
		width: 100%;
		margin: 0;
		background: var(--surface);
	}
}

/**
 * Certification badge row.
 */

/*
 * The block margin is the row's own, not something the neighbours supply: on
 * the collection page this row sits directly against a .section-heading that
 * carries only a bottom margin, which left the badges touching the heading.
 * It collapses with the checklist's matching margin on the collections
 * landing, so that page's rhythm is unchanged.
 */
.badge-row {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 5vw, 4rem);
	align-items: center;
	justify-content: center;
	margin: clamp(2rem, 5vw, 3.5rem) 0;
	padding: 0;
	list-style: none;
}

.badge-row__item {
	flex: 0 0 auto;
}

/*
 * Same WooCommerce cascade trap already fixed for .product-card__img and
 * .page-hero__img, missed here: `.woocommerce img, .woocommerce-page img
 * { height: auto; max-width: 100% }` (one class + one type) outranks a lone
 * `.badge-row__img` class, so on every WC-flagged template — the only two
 * that render this row, `collections-landing.php` and `collection.php` — the
 * `height` below never applied.
 *
 * Not an oversized-art problem: the badge PNGs are small, 238x266 to
 * 358x223 (accred-nwfa.png is the largest). The inflation came from
 * WordPress's automatic `sizes="auto"` on lazy-loaded `<img>` tags with a
 * srcset, which is meant to resolve against the image's real rendered
 * width — but that width was itself `width: auto` on a flex item with no
 * definite size, a circular dependency. The browser's srcset density math
 * couldn't resolve a real container width and picked an oversized
 * candidate, so only the badges WordPress attached a srcset to blew up; the
 * ones without one laid out at their true ~218-297px width. Result: a
 * 22,862px-tall engineered-hardwood landing with four full-viewport badges
 * instead of a 76px row.
 *
 * The definite `height` below is enough on its own, with no defensive
 * `sizes` override or fixed width needed: per CSS2.1 10.3.2/10.4, a
 * replaced element with `width: auto` and a definite height computes its
 * used width from the *intrinsic aspect ratio*, not from whatever width
 * srcset/sizes resolution reported — so a bad srcset guess can no longer
 * affect layout, only (at most) which resolution downloads. Qualifying with
 * the parent (two classes) wins without !important.
 */
.badge-row .badge-row__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: clamp(48px, 7vw, 76px);
	object-fit: contain;
}

/**
 * Checklist.
 */

.checklist {
	margin-block: clamp(2rem, 5vw, 3.5rem);
}

.checklist__title {
	margin: 0 0 1.5rem;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

.checklist__items {
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.checklist--checks .checklist__items {
	max-width: 62rem;
	display: grid;
	gap: 1rem;
}

.checklist--checks .checklist__item {
	position: relative;
	padding-inline-start: 2rem;
	font-style: italic;
	line-height: 1.5;
}

.checklist--checks .checklist__item::before {
	content: "";
	position: absolute;
	inset-block-start: 0.35em;
	inset-inline-start: 0;
	width: 0.9em;
	height: 0.9em;
	border: 1px solid currentColor;
}

/* Tick mark inside checkbox. Borders survive forced-colors mode
   where background images are stripped, preserving accessibility. */
.checklist--checks .checklist__item::after {
	content: "";
	position: absolute;
	inset-block-start: 0.5em;
	inset-inline-start: 0.3em;
	width: 0.28em;
	height: 0.55em;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.checklist--inline .checklist__items {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 4vw, 3rem);
	justify-content: center;
}

.checklist--inline .checklist__item {
	font-style: italic;
	font-weight: 700;
}

.checklist--inline .checklist__item::before {
	content: "\2022";
	margin-inline-end: 0.6em;
}

.checklist__lead {
	font-weight: 700;
}

.checklist__rest {
	font-weight: 400;
}

/**
 * Patented-technology callouts.
 */

.tech-callouts {
	margin-block: clamp(2.5rem, 6vw, 4.5rem);
}

.tech-callouts__head {
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.tech-callouts__eyebrow {
	margin: 0;
	font-size: 1rem;
}

.tech-callouts__title {
	margin: 0;
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-weight: 700;
}

.tech-callouts__patent {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	color: #5a5a5a;
}

.tech-callouts__body {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
}

.tech-callouts__media {
	order: -1;
}

.tech-callouts__img {
	display: block;
	width: 100%;
	height: auto;
}

.tech-callouts__list {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tech-callouts__item-title {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tech-callouts__item-text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #5a5a5a;
}

@media (min-width: 62rem) {
	.tech-callouts__body {
		grid-template-columns: 1fr minmax(0, 1.4fr) 1fr;
		align-items: center;
	}

	.tech-callouts__media {
		order: 0;
		grid-column: 2;
	}

	.tech-callouts__list {
		display: contents;
	}

	/*
	 * These four rules assume exactly four callouts, in source order.
	 * Fewer than four leaves the unmatched grid cell empty. More than
	 * four: items past the 4th match no rule here and fall to normal
	 * grid auto-placement, which can collide with .tech-callouts__media
	 * (it spans grid-column: 2 / grid-row: 1 / span 2). Do not add
	 * handling for other counts without revisiting the design.
	 */
	.tech-callouts__item:nth-child(1) { grid-column: 1; grid-row: 1; text-align: end; }
	.tech-callouts__item:nth-child(2) { grid-column: 3; grid-row: 1; }
	.tech-callouts__item:nth-child(3) { grid-column: 1; grid-row: 2; text-align: end; }
	.tech-callouts__item:nth-child(4) { grid-column: 3; grid-row: 2; }

	.tech-callouts__media { grid-row: 1 / span 2; }
}

/**
 * Section, heading and range rules shared by the Company-family pages and
 * the site-wide What we make section (template-parts/section/what-we-make.php).
 * They lived in company.css until What we make moved to every page.
 */

.company-section { padding-block: 84px; }

/* Heading: same bronze eyebrow and spaced uppercase title as the home range. */
.company-heading { max-width: 760px; margin: 0 auto 48px; text-align: center; }

.company-heading__eyebrow {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-bronze);
}

.company-heading__title {
	margin: 0 0 22px;
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.company-heading__rule {
	position: relative;
	display: block;
	width: min(420px, 80%);
	height: 1px;
	margin-inline: auto;
	background: linear-gradient(to right, transparent, var(--ink) 20%, var(--ink) 80%, transparent);
}

.company-heading__rule::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	background: var(--brand-red);
	transform: translate(-50%, -50%) rotate(45deg);
}

.company-heading__lede {
	max-width: 620px;
	margin: 22px auto 0;
	font-size: var(--fs-lg);
	line-height: var(--lh-body);
	color: var(--ink-muted);
}

/* What we make: a row of category links. */
.company-range {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.company-range__link {
	display: inline-block;
	padding: 14px 22px;
	border: 1px solid var(--brand-navy);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--brand-navy);
	transition: background var(--transition), color var(--transition);
}

.company-range__link:hover,
.company-range__link:focus-visible {
	background: var(--brand-navy);
	color: var(--ink-invert);
}

.company-range__note {
	max-width: 620px;
	margin: 28px auto 0;
	text-align: center;
	font-size: var(--fs-base);
	color: var(--ink-muted);
}