/* ==========================================================================
   Sections — header, footer, and the page-level bands.
   ========================================================================== */

/* ---------- Announcement bar ------------------------------------------------ */

.announce-dismissed .announce { display: none; }

.announce {
	background: var(--ink);
	color: var(--on-ink-muted);
	font-size: var(--step--1);
}
.announce__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-s);
	min-height: 42px;
	text-align: center;
}
.announce p { margin: 0; }
.announce__close {
	display: grid; place-items: center;
	width: 34px; height: 34px;
	margin-left: auto;
	border: 0; border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out);
}
.announce__close:hover { background: var(--on-ink-10); color: var(--white); }
.announce__close .icon { width: 16px; height: 16px; }

/* ---------- Header ----------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--glass-header);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid transparent;
	transition:
		border-color var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out);
}
.site-header.is-stuck {
	border-bottom-color: var(--border);
	box-shadow: 0 4px 20px rgb(15 26 29 / 0.05);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-m);
	min-height: var(--header-h);
	transition: min-height var(--dur-base) var(--ease-out);
}
.site-header.is-stuck .site-header__inner { min-height: var(--header-h-compact); }

.site-logo { flex: none; display: block; }
.site-logo img { width: auto; height: 42px; transition: height var(--dur-base) var(--ease-out); }
.site-header.is-stuck .site-logo img { height: 34px; }
.site-logo--footer img { height: 46px; }
.site-logo--drawer img { height: 36px; }

/* Primary nav */
.primary-nav { margin-left: auto; }
@media (max-width: 1023px) { .primary-nav { display: none; } }
.primary-nav .menu {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin: 0; padding: 0;
	list-style: none;
}
.primary-nav .menu li { margin: 0; }
.menu-item--top { position: relative; display: flex; align-items: center; }

.nav-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--space-xs);
	color: var(--text);
	font-family: var(--font-display);
	font-size: var(--step-0);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dur-fast) var(--ease-out);
}
.nav-link--top { position: relative; }
.nav-link--top::after {
	content: "";
	position: absolute;
	left: var(--space-xs); right: var(--space-xs);
	bottom: 14px;
	height: 2px;
	background: var(--accent-ink);
	border-radius: var(--radius-xs);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-base) var(--ease-out);
}
.menu-item--top:hover .nav-link--top::after,
.menu-item--top.is-current .nav-link--top::after,
.nav-link--top:focus-visible::after { transform: scaleX(1); }
.nav-link:hover { color: var(--accent-text); }

.nav-toggle {
	display: grid; place-items: center;
	width: 30px; height: 44px;
	margin-left: -6px;
	border: 0; background: none;
	color: var(--text-subtle);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.nav-toggle .icon { width: 16px; height: 16px; }
.nav-toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--accent-text); }

/* Desktop dropdown / mega */
@media (min-width: 1024px) {
	.submenu {
		position: absolute;
		top: calc(100% - 6px);
		left: 50%;
		z-index: var(--z-header);
		min-width: 280px;
		margin: 0;
		padding: var(--space-s);
		list-style: none;
		background: var(--bg);
		border: var(--hairline);
		border-radius: var(--radius-l);
		box-shadow: var(--shadow-l);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translate(-50%, 8px);
		transition:
			opacity var(--dur-base) var(--ease-out),
			transform var(--dur-base) var(--ease-out),
			visibility var(--dur-base) linear;
	}
	/* Opened by nav.js, which only reacts to the pointer being on the parent
	   item itself — hovering anywhere else in the header no longer opens it. */
	.menu-item--top.is-open > .submenu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translate(-50%, 0);
	}
	/* One plain column. The two-column mega panel was more structure than four
	   category links need. */
	.submenu { min-width: 306px; max-width: min(340px, calc(100vw - 2rem)); }
	.submenu .menu-item { position: relative; }
	.submenu .nav-link {
		display: block;
		width: 100%;
		padding: var(--space-xs) var(--space-s);
		border-radius: var(--radius-m);
		font-family: var(--font-body);
		font-weight: 500;
		white-space: normal;
		transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
	}
	.submenu .nav-link:hover { background: var(--surface); color: var(--accent-text); }
	.submenu .nav-toggle { display: none; }
	/* Third level renders inline under its parent rather than as a flyout. */
	/* Third level sits inline under its parent, indented against a hairline. */
	.submenu--nested {
		position: static;
		min-width: 0;
		margin: 2px 0 var(--space-2xs) var(--space-s);
		padding: 0 0 0 var(--space-s);
		border: 0;
		border-left: 1px solid var(--border);
		box-shadow: none;
		opacity: 1;
		/* The nested list is a .submenu too, so it picks up the closed panel's
		   hidden state. It must FOLLOW the parent rather than force itself
		   visible: forcing it kept its links clickable inside the invisible
		   panel (pointer cursor, and a click navigated). */
		visibility: inherit;
		pointer-events: inherit;
		transform: none;
		display: block;
		background: none;
	}
	.submenu--nested .nav-link { font-size: var(--step--1); color: var(--text-muted); padding-block: var(--space-2xs); }
}

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
@media (min-width: 1024px) { .header-actions { margin-left: var(--space-s); } }
.header-action {
	position: relative;
	display: grid; place-items: center;
	width: 44px; height: 44px;
	border: 0; border-radius: 50%;
	background: transparent;
	color: var(--text);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.header-action:hover { background: var(--surface); color: var(--accent-text); }
.header-action .icon { width: 21px; height: 21px; }
.cart-count {
	position: absolute;
	top: 4px; right: 2px;
	min-width: 19px; height: 19px;
	padding: 0 5px;
	border-radius: var(--radius-full);
	background: var(--accent-ink);
	color: var(--white);
	font-size: var(--step--3);
	font-weight: 700;
	line-height: 19px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.cart-count.is-empty { display: none; }

/* The burger owns every width below the nav's own breakpoint. It needs to be
   more specific than .header-action, which sets display: grid. */
@media (min-width: 1024px) {
	.site-header .header-burger { display: none; }
}

/* Search drop-down */
.site-search { border-top: var(--hairline); background: var(--bg); }
.site-search__inner { padding-block: var(--space-m); }
.site-search[hidden] { display: none; }

/* ---------- Mobile drawer ------------------------------------------------------ */

.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--scrim); }
.drawer[hidden] { display: none; }
.drawer__panel {
	display: flex;
	flex-direction: column;
	width: min(400px, 88vw);
	height: 100%;
	margin-left: auto;
	padding: var(--space-m) var(--space-m) var(--space-xl);
	background: var(--bg);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform var(--dur-slow) var(--ease-out);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-l); }
.drawer__nav .menu { margin: 0; padding: 0; list-style: none; }
.drawer__nav .menu-item--top { display: flex; flex-wrap: wrap; align-items: center; border-bottom: var(--hairline); }
.drawer__nav .nav-link--top { flex: 1; font-size: var(--step-1); min-height: 56px; padding-inline: 0; }
.drawer__nav .nav-link--top::after { content: none; }
.drawer__nav .nav-toggle { width: 48px; height: 56px; }
.drawer__nav .submenu {
	flex-basis: 100%;
	margin: 0; padding: 0 0 var(--space-s) var(--space-s);
	list-style: none;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur-slow) var(--ease-in-out);
}
.drawer__nav .submenu > * { overflow: hidden; }
.drawer__nav .submenu.is-open { grid-template-rows: 1fr; }
.drawer__nav .submenu .nav-link { min-height: 46px; font-size: var(--step-0); color: var(--text-muted); }
.drawer__foot { display: grid; gap: var(--space-2xs); margin-top: auto; padding-top: var(--space-l); }

/* ---------- Hero --------------------------------------------------------------- */

.hero {
	position: relative;
	/* .on-ink supplies the token set; the gradient below supplies the paint. */
	background-color: var(--ink);
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--hero-y);
	background: var(--ink);
	color: var(--on-ink);
}
.hero::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 150%;
	z-index: -2;
	background:
		radial-gradient(48% 60% at 78% 18%, var(--veil-accent-lg) 0%, transparent 62%),
		radial-gradient(45% 55% at 12% 82%, var(--veil-brand-sm) 0%, transparent 60%),
		var(--gradient-ink);
}
/* Hex lattice: one repeating SVG, GPU-transformed only */
.hero__lattice {
	position: absolute;
	inset: -10%;
	z-index: -1;
	opacity: 0.4;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104' fill='none' stroke='%234fd8c9' stroke-opacity='0.28' stroke-width='1'%3E%3Cpath d='M30 2l28 16v32L30 66 2 50V18z'/%3E%3Cpath d='M90 2l28 16v32L90 66 62 50V18z'/%3E%3Cpath d='M60 54l28 16v32L60 118 32 102V70z'/%3E%3C/svg%3E");
	background-size: 120px 104px;
	will-change: transform;
}
.hero__inner { display: grid; gap: clamp(var(--space-xl), 5vw, var(--space-3xl)); align-items: center; }
@media (min-width: 980px) { .hero__inner { grid-template-columns: 1.05fr 0.95fr; } }
.hero h1 { color: var(--white); max-width: 16ch; }
.hero .eyebrow { color: var(--accent-lift); }
.hero__lead { max-width: 52ch; color: var(--on-ink-muted); font-size: var(--step-1); line-height: var(--lh-snug); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-l); }

/* On a phone every hero's CTAs stack full width — side by side they were a short
   pill and a shorter one against a full-width column of text. */
@media (max-width: 599px) {
	.hero__actions,
	.about-hero .cluster,
	.error-404 .cluster {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-2xs);
	}
	.hero__actions .btn,
	.about-hero .cluster .btn,
	.error-404 .cluster .btn { width: 100%; }
}
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-m); margin-top: var(--space-xl); padding-top: var(--space-l); border-top: var(--hairline-ink); }
.hero__meta div { display: grid; gap: 2px; }
.hero__meta strong { font-family: var(--font-display); font-size: var(--step-1); color: var(--white); }
.hero__meta span { font-size: var(--step--1); color: var(--on-ink-muted); }

/* Hero visual: layered vial card */
.hero__visual { position: relative; display: grid; place-items: center; min-height: 300px; }
.hero__card {
	position: relative;
	width: min(420px, 100%);
	padding: var(--space-xl);
	border: 1px solid var(--on-ink-14);
	border-radius: var(--radius-xl);
	background: var(--glass-card);
	backdrop-filter: blur(6px);
	box-shadow: 0 30px 70px var(--shadow-cast-sm);
}
.hero__card-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding-block: var(--space-s); border-bottom: var(--hairline-ink); }
.hero__card-row:last-of-type { border-bottom: 0; }
.hero__card-row span { color: var(--on-ink-muted); font-size: var(--step--1); }
.hero__card-row strong { font-family: var(--font-display); color: var(--white); }
.hero__card .badge { margin-bottom: var(--space-m); }

/* ---------- Trust strip --------------------------------------------------------- */

.trust-strip { border-bottom: var(--hairline); background: var(--bg); }
.trust-strip__grid {
	display: grid;
	gap: var(--space-l);
	padding-block: var(--space-xl);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.trust-strip .feature h3 { font-size: var(--step-0); margin-bottom: 2px; }
.trust-strip .feature p { font-size: var(--step--1); margin: 0; }
.trust-strip .card-icon { width: 42px; height: 42px; }

/* ---------- Hero band --------------------------------------------------------
   One treatment for every hero on the site — the home hero's ink gradient plus
   its hex lattice — so a page never changes character on entry. The home hero
   keeps its own taller layout and parallax; everything else uses this.
   ---------------------------------------------------------------------------- */

.page-hero,
.shop-hero--ink,
.about-hero,
.error-404 {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-bottom: 0;
	background-color: var(--ink);
}

/* Gradient: the same two green washes the home hero uses. */
.page-hero::before,
.shop-hero--ink::before,
.about-hero::before,
.error-404::before {
	content: "";
	position: absolute;
	inset: -60% -10% auto -10%;
	height: 260%;
	z-index: -2;
	background:
		radial-gradient(46% 58% at 82% 14%, var(--veil-accent-md) 0%, transparent 62%),
		radial-gradient(42% 52% at 10% 86%, var(--veil-brand-sm) 0%, transparent 60%),
		var(--gradient-ink);
}

/* Lattice: the same hex tile, static here rather than parallaxed. */
.page-hero::after,
.shop-hero--ink::after,
.about-hero::after,
.error-404::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.4;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104' fill='none' stroke='%234fd8c9' stroke-opacity='0.28' stroke-width='1'%3E%3Cpath d='M30 2l28 16v32L30 66 2 50V18z'/%3E%3Cpath d='M90 2l28 16v32L90 66 62 50V18z'/%3E%3Cpath d='M60 54l28 16v32L60 118 32 102V70z'/%3E%3C/svg%3E");
	background-size: 120px 104px;
}

.page-hero { padding-block: var(--space-2xl); }
.page-hero .breadcrumb { margin-bottom: var(--space-m); }
.page-hero h1 { margin-bottom: var(--space-s); max-width: 20ch; color: var(--white); }
.page-hero p { max-width: 62ch; color: var(--text-muted); }
.page-hero .legal-meta { color: var(--on-ink-muted); }

/* ---------- COA band -------------------------------------------------------------- */

.coa-band .coa-card {
	display: grid;
	gap: var(--space-s);
	padding: var(--space-l);
	border: var(--hairline);
	border-radius: var(--radius-l);
	background: var(--bg);
}
.coa-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
.coa-card__head h3 { margin: 0; font-size: var(--step-1); }
.coa-card dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-s); margin: 0; }
.coa-card dt { font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }
.coa-card dd { margin: 2px 0 0; font-family: var(--font-display); font-weight: 600; color: var(--text); }

/* ---------- FAQ --------------------------------------------------------------------- */

.faq__grid { display: grid; gap: clamp(var(--space-l), 4vw, var(--space-3xl)); align-items: start; }
@media (min-width: 900px) { .faq__grid { grid-template-columns: 0.8fr 1.2fr; } }

/* ---------- CTA band ----------------------------------------------------------------- */

.cta-band { padding-block: var(--section-y); background: var(--ink); }
.cta-band__inner { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1.1fr 0.9fr; } }
.cta-band h2 { color: var(--white); max-width: 18ch; }
.cta-band .lead { color: var(--on-ink-muted); }
.cta-band input { background: var(--on-ink-6); border-color: var(--on-ink-20); color: var(--white); }
.cta-band input::placeholder { color: var(--on-ink-45); }
.cta-band .form-note { margin-top: var(--space-2xs); color: var(--on-ink-muted); }

/* ---------- Footer ---------------------------------------------------------------------- */

.site-footer { padding-block: var(--space-3xl) var(--space-m); background: var(--ink); }
.site-footer__grid {
	display: grid;
	gap: var(--space-xl);
	grid-template-columns: 1fr;
}
@media (min-width: 700px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
/* Five columns since the policies got one of their own: brand, useful links,
   categories, policies, contact. */
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 0.8fr 1.1fr; gap: var(--space-xl); } }
.site-footer__brand p { max-width: 42ch; color: var(--on-ink-muted); font-size: var(--step--1); }
.site-footer h2 {
	margin-bottom: var(--space-m);
	font-size: var(--step--1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--white);
}
.site-footer .menu { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.site-footer .menu li { margin: 0; }
.site-footer .menu a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--on-ink-muted);
	text-decoration: none;
	font-size: var(--step--1);
	transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.site-footer .menu a:hover { color: var(--accent-lift); transform: translateX(3px); }

.trust-list, .contact-list { margin: var(--space-m) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); }
.trust-list li, .contact-list li {
	display: flex; gap: var(--space-2xs); align-items: center;
	margin: 0;
	color: var(--on-ink-muted);
	font-size: var(--step--1);
}
.contact-list li { min-height: 40px; }
.trust-list .icon, .contact-list .icon { width: 18px; height: 18px; color: var(--accent-lift); flex: none; }
/* 24px minimum target height (WCAG 2.5.8) — the bare text line measured 22px
   on phones, and these are the primary way anyone contacts the lab. */
.contact-list a { display: inline-flex; align-items: center; min-height: 24px; color: var(--on-ink-muted); text-decoration: none; }
.contact-list a:hover { color: var(--accent-lift); }
.contact-list strong { color: var(--white); font-weight: 600; }

.site-footer__disclaimer {
	margin-top: var(--space-xl);
	padding: var(--space-s) var(--space-m);
	border-left: 3px solid var(--on-ink-16);
	border-radius: 0 var(--radius-m) var(--radius-m) 0;
	background: var(--on-ink-4);
	color: var(--on-ink-muted);
	font-size: var(--step--1);
	max-width: var(--measure);
}
.site-footer__bottom {
	display: flex; flex-wrap: wrap; gap: var(--space-s);
	align-items: center; justify-content: space-between;
	margin-top: var(--space-l);
	padding-top: var(--space-m);
	border-top: var(--hairline-ink);
	color: var(--on-ink-muted);
}
.site-footer__bottom .menu { display: flex; flex-wrap: wrap; gap: var(--space-m); }
.site-footer__bottom .menu a { min-height: 32px; }

/* ---------- Legal / prose pages ------------------------------------------------------------- */

.legal-layout { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 900px) { .legal-layout { grid-template-columns: 250px 1fr; gap: var(--space-3xl); } }
.legal-toc { font-size: var(--step--1); }
@media (min-width: 900px) { .legal-toc { position: sticky; top: calc(var(--header-h) + var(--space-m)); } }
.legal-toc h2 { font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: var(--space-s); }
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.legal-toc li { margin: 0; border-left: 2px solid var(--border); }
.legal-toc a {
	display: block;
	padding: 10px var(--space-s);
	color: var(--text-muted);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.legal-toc li:hover, .legal-toc li.is-active { border-left-color: var(--accent-text); }
.legal-toc li.is-active a { color: var(--text); font-weight: 600; }
.legal-meta { margin-bottom: var(--space-l); color: var(--text-subtle); font-size: var(--step--1); }

/* ---------- Contact ------------------------------------------------------------------------- */

.contact-layout { display: grid; gap: clamp(var(--space-xl), 4vw, var(--space-3xl)); align-items: start; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1.2fr 0.8fr; } }
.contact-cards { display: grid; gap: var(--space-s); }
.contact-cards .card { padding: var(--space-m); }
.contact-cards .feature h3 { font-size: var(--step-0); }
.contact-cards .feature p { margin: 0; font-size: var(--step--1); }
.contact-cards .card-icon { width: 40px; height: 40px; }

/* ---------- Blog ---------------------------------------------------------------------------- */

.post-card { display: flex; flex-direction: column; overflow: hidden; }
.post-card__media { aspect-ratio: 16 / 10; background: var(--surface); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { display: grid; gap: var(--space-2xs); padding: var(--space-l); }
.post-card__meta { font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }
.post-card h3 { font-size: var(--step-1); margin: 0; }
.post-card h3 a { color: var(--text); text-decoration: none; }
.post-card h3 a:hover { color: var(--accent-ink); }

.entry-content { max-width: var(--measure); }
.entry-content img { border-radius: var(--radius-l); }

/* ---------- 404 ------------------------------------------------------------------------------ */

.error-404 { padding-block: var(--hero-y); text-align: center; color: var(--on-ink); }
.error-404 .display { color: var(--white); }
.error-404 p { max-width: 52ch; margin-inline: auto; color: var(--on-ink-muted); }
.error-404 .cluster { justify-content: center; }

/* ---------- Wishlist / compare --------------------------------------------------------------- */

.wishlist-grid { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* ---------- Product carousel ------------------------------------------------------
   A scroll-snap track. Without JS it is still a usable horizontal scroller; with
   JS the buttons page it by a whole number of visible cards.
   --------------------------------------------------------------------------------- */

.carousel-section { overflow: hidden; }

.carousel-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-m);
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: var(--space-xl);
}
.carousel-head .section-head { margin-bottom: 0; }

.carousel-controls { display: flex; align-items: center; gap: var(--space-2xs); }

.carousel-btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: var(--bg);
	color: var(--text);
	cursor: pointer;
	box-shadow: var(--shadow-s);
	transition:
		border-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		transform var(--dur-fast) var(--ease-out),
		opacity var(--dur-fast) var(--ease-out);
}
.carousel-btn:hover:not([disabled]) {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--white);
	box-shadow: var(--shadow-m);
	transform: translateY(-1px);
}
.carousel-btn:active:not([disabled]) { transform: translateY(0); box-shadow: var(--shadow-s); }
.carousel-btn[disabled] {
	opacity: 1;
	cursor: default;
	color: var(--text-subtle);
	border-color: var(--border);
	background: var(--surface);
	box-shadow: none;
}
.carousel-btn .icon { width: 18px; height: 18px; }

/* The viewport bleeds to the screen edge so a partly visible next card hints
   that the row scrolls, while the first card still lines up with the grid. */
.carousel-viewport { padding-right: 0; }
@media (min-width: 700px) { .carousel-viewport { padding-right: var(--gutter); } }

.carousel-track {
	display: flex;
	gap: var(--space-l);
	margin: 0;
	padding: 4px 4px var(--space-s);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	/* proximity, not mandatory: mandatory snapping cancels a programmatic
	   smooth scroll mid-flight in Chrome, so the arrows appear dead. */
	scroll-snap-type: x proximity;
	scroll-padding-left: 4px;
	scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-l); }

/* Fixed-basis items, not fractions: a fraction inside a scroller just squeezes
   every card into the visible width instead of overflowing it. */
.carousel-item {
	flex: 0 0 78%;
	margin: 0;
	scroll-snap-align: start;
	display: flex;
}
@media (min-width: 640px)  { .carousel-item { flex-basis: calc((100% - var(--space-l)) / 2); } }
@media (min-width: 900px)  { .carousel-item { flex-basis: calc((100% - var(--space-l) * 2) / 3); } }
@media (min-width: 1200px) { .carousel-item { flex-basis: calc((100% - var(--space-l) * 3) / 4); } }

.carousel-item .product-card { width: 100%; height: 100%; }

/* ---------- COA certificate gallery ------------------------------------------------ */

.coa-grid {
	display: grid;
	gap: var(--space-l);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.coa-tile {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	margin: 0;
	padding: var(--space-s);
	background: var(--bg);
	border: var(--hairline);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-s);
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.coa-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); }

/* The link is deliberately unpositioned so its overlay resolves against the
   tile: the whole card opens the certificate, not just the thumbnail. The
   clipping and the aspect ratio moved to the media wrapper, which does not
   trap the overlay. */
.coa-tile__link { display: block; }
.coa-tile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-l); }
.coa-tile__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius-m);
	background: var(--surface);
	aspect-ratio: 3 / 4;
}
.coa-tile__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.coa-tile__zoom {
	position: absolute;
	right: var(--space-2xs);
	bottom: var(--space-2xs);
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--frost);
	color: var(--text);
	box-shadow: var(--shadow-s);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.coa-tile:hover .coa-tile__zoom,
.coa-tile__link:focus-visible .coa-tile__zoom { opacity: 1; transform: none; }
/* The keyboard focus ring belongs to the whole card now, not to a 0x0 anchor. */
.coa-tile:has(.coa-tile__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.coa-tile__zoom .icon { width: 18px; height: 18px; }

.coa-tile figcaption { display: grid; gap: var(--space-2xs); justify-items: start; }
.coa-tile__label { font-size: var(--step--1); color: var(--text-muted); }

/* The tile is the containing block for the link overlay above. */
.coa-tile { position: relative; }

/* "Third-party tested" is wider than a half-width phone column, and .badge is
   nowrap by default — it used to run straight out of the card. Inside a
   certificate tile it wraps instead. */
.coa-tile .badge {
	max-width: 100%;
	white-space: normal;
	text-align: left;
}


/* ---------- COA library search ------------------------------------------------------
   Client-side filter over the certificate grid. The control is hidden without
   JS (html.no-js) because there is nothing behind it to filter with.
   ---------------------------------------------------------------------------------- */

.coa-search {
	max-width: 520px;
	margin: 0 auto var(--space-xl);
}
.no-js .coa-search { display: none; }

.coa-search__form { position: relative; display: block; }

/* The base rule is `input[type="search"]`, which outranks a bare class — hence
   the wrapper in front. Room for the icon on the left and the clear button on
   the right, so the text never runs underneath either. */
.coa-search .coa-search__input {
	padding-left: var(--space-xl);
	padding-right: var(--space-xl);
}

/* Every one of these carries a `display` of its own, which beats the browser's
   own [hidden] rule — without this the filter hides nothing. */
.coa-grid[hidden],
.coa-tile[hidden],
.coa-search__clear[hidden],
.coa-search__empty[hidden] { display: none; }

.coa-search__icon {
	position: absolute;
	left: var(--space-s);
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	color: var(--text-subtle);
	pointer-events: none;
	transition: color var(--dur-fast) var(--ease-out);
}
.coa-search__icon .icon { width: 18px; height: 18px; }
/* The icon precedes the input in the DOM (so the label/input order stays
   sane), which rules out a sibling combinator — hence :has on the wrapper. */
.coa-search__form:has(.coa-search__input:focus) .coa-search__icon,
.coa-search.is-active .coa-search__icon { color: var(--accent-text); }

/* The native widget duplicates our own clear button and cannot be styled. */
.coa-search__input::-webkit-search-cancel-button,
.coa-search__input::-webkit-search-decoration { appearance: none; }

.coa-search__clear {
	position: absolute;
	right: var(--space-3xs);
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--text-subtle);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.coa-search__clear:hover { background: var(--surface-2); color: var(--text); }
.coa-search__clear .icon { width: 16px; height: 16px; }

.coa-search__status {
	margin: var(--space-2xs) 0 0;
	font-size: var(--step--1);
	color: var(--text-subtle);
	text-align: center;
	/* Two lines' worth, so a longer message never reflows the grid below it. */
	min-height: calc(var(--step--1) * 2 * 1.5);
}

.coa-search__empty { max-width: 560px; margin-inline: auto; }
.coa-search__empty .card-icon { color: var(--text-subtle); }
.coa-search__echo {
	font-size: var(--step--1);
	color: var(--text-subtle);
	overflow-wrap: anywhere;
}
.coa-search__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	justify-content: center;
}

@media (max-width: 599px) {
	.coa-search { margin-bottom: var(--space-l); }
}

/* ==========================================================================
   About page
   ========================================================================== */

.about-hero { padding-block: var(--hero-y) var(--hero-y-end); }


.about-hero__inner {
	display: grid;
	gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
	align-items: center;
}
@media (min-width: 940px) { .about-hero__inner { grid-template-columns: 1.05fr 0.95fr; } }

.about-hero h1 { color: var(--white); max-width: 17ch; }
.about-hero__lead { max-width: 54ch; color: var(--on-ink-muted); font-size: var(--step-1); line-height: var(--lh-snug); }

/* Product shot with the certificate tucked under its corner — the page's one
   piece of real texture, built from catalogue media rather than stock. */
.about-hero__media { position: relative; padding-bottom: var(--space-2xl); }
.about-hero__shot {
	border-radius: var(--radius-xl);
	overflow: hidden;
	border: 1px solid var(--on-ink-14);
	box-shadow: 0 30px 70px var(--shadow-cast-lg);
	transform: rotate(-1.2deg);
}
.about-hero__shot img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

.about-hero__chip {
	position: absolute;
	z-index: 2;
	right: -6px;
	bottom: 0;
	width: min(168px, 40%);
	padding: 8px 8px 12px;
	border-radius: var(--radius-m);
	background: var(--white);
	box-shadow: 0 18px 40px var(--shadow-cast-md);
	transform: rotate(3deg);
}
.about-hero__chip img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: top center;
	border-radius: var(--radius-xs);
}
/* Sits inside the card: hanging it off the bottom edge clipped it against the
   band's overflow. */
.about-hero__chip .badge { position: absolute; left: 14px; top: 14px; box-shadow: var(--shadow-s); }

/* Stat rail under the hero */
.stat-rail {
	display: grid;
	gap: var(--space-m);
	margin: clamp(var(--space-xl), 5vw, var(--space-3xl)) 0 0;
	padding-top: var(--space-l);
	border-top: var(--hairline-ink);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.stat-rail div { display: grid; gap: 4px; }
.stat-rail dt { order: 2; font-size: var(--step--1); color: var(--on-ink-muted); }
.stat-rail dd {
	order: 1;
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--step-3);
	font-weight: 600;
	line-height: 1;
	color: var(--white);
}

/* ---------- Story ------------------------------------------------------------ */

.story { display: grid; gap: clamp(var(--space-xl), 5vw, var(--space-3xl)); align-items: center; }
@media (min-width: 940px) { .story { grid-template-columns: 1fr 0.85fr; } }
.story__text .prose { margin-top: var(--space-m); }
.story blockquote {
	margin-top: var(--space-xl);
	font-family: var(--font-display);
	font-size: var(--step-1);
	line-height: var(--lh-snug);
}

.story__media { position: relative; min-height: 320px; }
.story__shot {
	margin: 0;
	border-radius: var(--radius-l);
	overflow: hidden;
	box-shadow: var(--shadow-l);
	background: var(--surface);
}
.story__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story__shot--one { width: 78%; aspect-ratio: 4 / 3; }
.story__shot--two {
	position: absolute;
	right: 0;
	bottom: -6%;
	width: 52%;
	aspect-ratio: 1 / 1;
	border: 6px solid var(--bg);
	border-radius: var(--radius-l);
}
@media (max-width: 599px) {
	.story__media { min-height: 0; }
	.story__shot--one { width: 100%; }
	.story__shot--two { position: static; width: 60%; margin-top: calc(var(--space-m) * -1); margin-left: auto; }
}

/* ---------- Principles ------------------------------------------------------- */

.principles {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--hairline);
}
@media (min-width: 800px) { .principles { grid-template-columns: 1fr 1fr; column-gap: var(--space-3xl); } }

.principle {
	display: flex;
	gap: var(--space-m);
	align-items: flex-start;
	margin: 0;
	padding: var(--space-l) 0;
	border-bottom: var(--hairline);
}
.principle__num {
	flex: none;
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 600;
	line-height: 1.1;
	color: var(--accent-text);
	font-variant-numeric: tabular-nums;
}
.principle h3 { margin-bottom: var(--space-2xs); font-size: var(--step-1); }
.principle p { margin: 0; color: var(--text-muted); }

/* ---------- Process band ------------------------------------------------------ */

.process__inner { display: grid; gap: clamp(var(--space-xl), 5vw, var(--space-3xl)); align-items: center; }
@media (min-width: 940px) { .process__inner { grid-template-columns: 1.1fr 0.9fr; } }

.process__proof {
	display: grid;
	gap: var(--space-l);
	justify-items: center;
	padding: var(--space-xl);
	border: 1px solid var(--ink-line);
	border-radius: var(--radius-xl);
	background: var(--on-ink-4);
	text-decoration: none;
	transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.process__proof:hover { border-color: var(--veil-lift); background: var(--on-ink-6); }

.process__stack { position: relative; display: block; width: min(300px, 100%); aspect-ratio: 4 / 3; }
.process__sheet {
	position: absolute;
	top: 0;
	width: 62%;
	border-radius: var(--radius-m);
	overflow: hidden;
	box-shadow: 0 16px 36px var(--shadow-cast-md);
	background: var(--white);
	transition: transform var(--dur-slow) var(--ease-out);
}
.process__sheet img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; display: block; }
.process__sheet--1 { left: 0; transform: rotate(-6deg); }
.process__sheet--2 { left: 19%; transform: rotate(1deg); z-index: 2; }
.process__sheet--3 { left: 38%; transform: rotate(7deg); }
.process__proof:hover .process__sheet--1 { transform: rotate(-9deg) translateY(-4px); }
.process__proof:hover .process__sheet--3 { transform: rotate(10deg) translateY(-4px); }

.process__proof-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	color: var(--accent-lift);
	font-weight: 600;
	font-size: var(--step--1);
}
.process__proof-label .icon { width: 17px; height: 17px; }

/* ---------- Reasons + contact rail --------------------------------------------- */

.reason-grid {
	display: grid;
	gap: var(--space-xl) var(--space-2xl);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Two of the six headings wrap to a second line ("Premium research products",
   "Transparent communication"), which pushed their body copy a line lower than
   their neighbours' and made those cards read as misaligned. Reserving two
   heading lines everywhere puts every paragraph on the same baseline. The
   reservation is dropped when the cards stack, where nothing is beside them. */
@media (min-width: 620px) {
	.reason-grid .feature h3 {
		min-height: calc(2 * 1.25 * 1em);
	}
}

.about-contact { display: grid; gap: clamp(var(--space-xl), 4vw, var(--space-3xl)); align-items: center; }
@media (min-width: 900px) { .about-contact { grid-template-columns: 0.9fr 1.1fr; } }

.contact-rail {
	display: grid;
	gap: var(--space-s);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.contact-rail li {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: var(--space-m);
	background: var(--bg);
	border: var(--hairline);
	border-radius: var(--radius-l);
}
.contact-rail .icon { width: 20px; height: 20px; color: var(--accent-text); }
.contact-rail span { font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }
.contact-rail strong, .contact-rail a { font-family: var(--font-display); font-weight: 600; color: var(--text); word-break: break-word; }
.contact-rail a { text-decoration: none; }
.contact-rail a:hover { color: var(--accent-text); }

/* ---------- Header mini cart -------------------------------------------------------
   A panel anchored to the cart button. Hidden until nav JS opens it, so it never
   flashes on load and a no-JS visitor simply follows the link to /cart/.
   ---------------------------------------------------------------------------------- */

.header-cart-wrap { position: relative; }

.mini-cart-backdrop[hidden], .mini-cart[hidden] { display: none; }

/* Backdrop: dims the page behind the drawer and catches the click that closes it. */
.mini-cart-backdrop {
	position: fixed;
	inset: 0;
	z-index: calc(var(--z-drawer) - 1);
	background: var(--scrim);
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-out);
}
.header-cart-wrap.is-open .mini-cart-backdrop { opacity: 1; }

/* Drawer: flush to the right edge, full viewport height. */
.mini-cart {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-drawer);
	width: min(420px, 92vw);
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--bg);
	border: 0;
	border-left: var(--hairline);
	border-radius: 0;
	box-shadow: -18px 0 48px var(--scrim-shadow);
	transform: translateX(100%);
	transition: transform var(--dur-slow) var(--ease-out);
}
.header-cart-wrap.is-open .mini-cart { transform: none; }

.mini-cart__head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	padding: var(--space-l) var(--space-l) var(--space-m);
	border-bottom: var(--hairline);
}
.mini-cart__title {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	margin: 0;
	font-size: var(--step-1);
	letter-spacing: 0;
}
.mini-cart__count {
	display: grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: var(--radius-full);
	background: var(--accent-soft);
	color: var(--accent-text-hover);
	font-family: var(--font-body);
	font-size: var(--step--2);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.mini-cart__close {
	display: grid; place-items: center;
	width: 36px; height: 36px;
	border: 0; border-radius: 50%;
	background: transparent;
	color: var(--text-subtle);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.mini-cart__close:hover { background: var(--surface); color: var(--text); }
.mini-cart__close .icon { width: 16px; height: 16px; }

.mini-cart__items {
	/* auto basis, not 0: with flex-basis 0 the list contributed no intrinsic
	   height and collapsed to a sliver with its own scrollbar. */
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: var(--space-2xs) var(--space-l);
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.mini-cart__item {
	display: grid;
	grid-template-columns: 56px 1fr 32px;
	gap: var(--space-s);
	align-items: start;
	margin: 0;
	padding: var(--space-s) 0;
	border-bottom: var(--hairline);
}
.mini-cart__item:last-child { border-bottom: 0; }

.mini-cart__thumb {
	position: relative;
	display: block;
	width: 56px; height: 56px;
	border-radius: var(--radius-m);
	overflow: hidden;
	background: var(--surface);
}
.mini-cart__thumb img { width: 100%; height: 100%; object-fit: cover; }

.mini-cart__detail { min-width: 0; display: grid; gap: 6px; }
.mini-cart__detail h3 { margin: 0; font-size: var(--step--1); line-height: 1.35; letter-spacing: 0; }
.mini-cart__detail h3 a {
	display: inline-block;
	padding-block: var(--space-3xs);
	color: var(--text);
	text-decoration: none;
}
.mini-cart__detail h3 a:hover { color: var(--accent-text); }
.mini-cart__variation { margin: 0; font-size: var(--step--2); color: var(--text-subtle); }
.mini-cart__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xs); }
.mini-cart__row .price { font-size: var(--step--1); }

.qty--sm { border-radius: var(--radius-full); }
.qty--sm button { width: 30px; min-height: 32px; font-size: var(--step-0); }
.qty--sm input { width: 34px; min-height: 32px; font-size: var(--step--1); }

.mini-cart__remove {
	display: grid; place-items: center;
	width: 32px; height: 32px;
	border: 0; border-radius: 50%;
	background: var(--surface);
	color: var(--text-subtle);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.mini-cart__remove:hover { background: var(--danger-soft); color: var(--danger); }
.mini-cart__remove .icon { width: 13px; height: 13px; }

.mini-cart__foot {
	flex: none;
	padding: var(--space-m) var(--space-l) calc(var(--space-l) + env(safe-area-inset-bottom));
	border-top: var(--hairline);
	background: var(--surface);
}
.mini-cart__subtotal {
	display: flex; align-items: baseline; justify-content: space-between;
	font-size: var(--step--1);
	color: var(--text-muted);
}
.mini-cart__subtotal strong {
	font-family: var(--font-display);
	font-size: var(--step-1);
	color: var(--text);
	font-variant-numeric: tabular-nums;
}
.mini-cart__note { margin: 0 0 var(--space-s); font-size: var(--step--1); color: var(--text-subtle); }

/* Side by side: stacked full-width buttons pushed the item list down to a
   sliver on short viewports. */
.mini-cart__actions { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-2xs); }
.mini-cart__actions .btn { min-height: 48px; padding-inline: var(--space-s); font-size: var(--step--1); }

.mini-cart__trust {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: var(--space-2xs);
	margin: var(--space-s) 0 0;
	padding: var(--space-s) 0 0;
	border-top: var(--hairline);
	list-style: none;
}
.mini-cart__trust li {
	display: flex; align-items: center; gap: var(--space-3xs);
	margin: 0;
	font-size: var(--step--2);
	color: var(--text-subtle);
}
.mini-cart__trust .icon { width: 14px; height: 14px; color: var(--accent-text); }

.mini-cart__empty {
	display: grid;
	justify-items: center;
	gap: var(--space-s);
	padding: var(--space-2xl) var(--space-m);
	text-align: center;
}
.mini-cart__empty p { margin: 0; color: var(--text-muted); font-size: var(--step--1); }

/* Busy state while a quantity change is in flight. */
.mini-cart__busy {
	position: absolute;
	inset: 0;
	background: var(--on-ink-55);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-fast) var(--ease-out);
}
.mini-cart.is-busy .mini-cart__busy { opacity: 1; pointer-events: auto; }

@media (max-width: 480px) {
	.mini-cart { width: 100vw; border-left: 0; }
}

/* ---------- Research areas (bento) ---------------------------------------------- */

.areas {
	display: grid;
	gap: var(--space-m);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) { .areas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
	.areas { grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: auto auto; }
	.area--lead { grid-column: 1; grid-row: 1 / span 2; }
}

.area {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--space-l);
	border: var(--hairline);
	border-radius: var(--radius-l);
	background: var(--bg);
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out);
}
.area:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); border-color: var(--border-strong); }

.area__icon {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: var(--radius-m);
	background: var(--accent-soft);
	color: var(--accent-text-hover);
}
.area__icon .icon { width: 22px; height: 22px; }

.area__title { margin: var(--space-m) 0 4px; font-size: var(--step-1); }
.area__title a { color: inherit; text-decoration: none; }
.area__count { font-size: var(--step--1); color: var(--text-subtle); font-variant-numeric: tabular-nums; }

/* Compact tiles: icon, name, count — no dead space between them. */
.area--tile { min-height: 0; padding-bottom: var(--space-2xl); color: var(--text); }
.area--tile .area__title { margin-top: var(--space-m); }
.area--tile .area__arrow {
	position: absolute;
	right: var(--space-l);
	bottom: var(--space-m);
	display: grid; place-items: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	border: var(--hairline-strong);
	color: var(--text);
	transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.area--tile .area__arrow .icon { width: 16px; height: 16px; }
.area--tile:hover .area__arrow { background: var(--ink); border-color: var(--ink); color: var(--white); transform: translateX(3px); }

/* Lead card: the ink one, with its sub-areas as chips */
.area--lead {
	justify-content: flex-start;
	padding: clamp(var(--space-l), 3vw, var(--space-2xl));
	border-color: transparent;
	background-color: var(--ink);
}
.area--lead::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(70% 60% at 90% 0%, var(--veil-accent-md) 0%, transparent 62%),
		var(--gradient-ink);
	transition: transform var(--dur-slow) var(--ease-out);
}
.area--lead::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.35;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104' fill='none' stroke='%234fd8c9' stroke-opacity='0.3' stroke-width='1'%3E%3Cpath d='M30 2l28 16v32L30 66 2 50V18z'/%3E%3Cpath d='M90 2l28 16v32L90 66 62 50V18z'/%3E%3Cpath d='M60 54l28 16v32L60 118 32 102V70z'/%3E%3C/svg%3E");
	background-size: 120px 104px;
}
.area--lead:hover::before { transform: scale(1.05); }
.area--lead .area__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
.area--lead .area__title { font-size: var(--step-2); }
.area--lead .area__title a:hover { color: var(--accent-lift); }
.area--lead .area__desc { max-width: 34ch; margin: 0; color: var(--on-ink-muted); font-size: var(--step--1); }

.area__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-l) 0 0; padding: 0; list-style: none; }
.area__chips li { margin: 0; }
.area__chips a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 0 12px;
	border: 1px solid var(--on-ink-20);
	border-radius: var(--radius-full);
	color: var(--on-ink);
	font-size: var(--step--2);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.area__chips a span { color: var(--on-ink-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.area__chips a:hover { border-color: var(--accent-lift); color: var(--accent-lift); background: var(--veil-accent-xs); }

.area--all { background: var(--surface); border-style: dashed; }
.area--all:hover { background: var(--bg); }

.area__go {
	display: inline-flex;
	align-items: center;
	/* 24px minimum target height (WCAG 2.5.8); the text alone measured 22px. */
	min-height: 24px;
	gap: var(--space-2xs);
	margin-top: var(--space-l);
	color: var(--accent-lift);
	font-weight: 600;
	font-size: var(--step--1);
	text-decoration: none;
}
.area__go .icon { width: 1em; height: 1em; transition: transform var(--dur-base) var(--ease-out); }
.area__go:hover .icon { transform: translateX(4px); }

/* Two certificates per row on phones — one per row made the library a very
   long scroll for what are essentially thumbnails. */
@media (max-width: 639px) {
	.coa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); }
	.coa-tile { padding: 6px; gap: var(--space-2xs); }
	.coa-tile figcaption { gap: 4px; }
	.coa-tile__label { font-size: var(--step--2); }
	.coa-tile figcaption .badge { padding: var(--space-3xs) var(--space-2xs); font-size: var(--step--3); letter-spacing: 0.03em; }
	.coa-tile__zoom { width: 32px; height: 32px; opacity: 1; transform: none; }
	.coa-tile__zoom .icon { width: 15px; height: 15px; }
}