/* ==========================================================================
   BLKTHRN GRP — Main stylesheet (v1.2)
   Dark-first, electric-blue, sharp. Coalition-class energy in BTG's brand.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
img, svg, iframe, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-700); }

h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: var(--lh-snug);
	letter-spacing: var(--tracking-head);
	margin: 0 0 0.5em;
	color: var(--ink);
	text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1rem; }
strong { font-weight: 700; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 0.5rem + 2vw, 2.25rem); }
.measure { max-width: var(--container-narrow); margin-inline: auto; }
.align-center { text-align: center; }
.align-center .section__intro { margin-inline: auto; }

.eyebrow {
	display: inline-flex; align-items: center; gap: 0.55rem;
	font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow); font-size: var(--fs-eyebrow);
	color: var(--blue); margin: 0 0 1rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.hero--dark .eyebrow, .section--stats .eyebrow { color: var(--blue-400); }

.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 0.75rem 1rem; z-index: 1000; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
::selection { background: rgba(var(--blue-rgb), 0.85); color: #fff; }

/* ---- Decorative patterns (pure CSS, no assets) ---- */
.bg-grid { position: relative; }
.bg-grid::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 78%);
	mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 78%);
}
.bg-grid > * { position: relative; z-index: 1; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
	font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em;
	padding: 0.85rem 1.5rem; border-radius: var(--radius-pill); border: 1.5px solid transparent;
	cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
	line-height: 1; white-space: nowrap; overflow: hidden;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--grad-blue); color: #fff; box-shadow: 0 6px 20px rgba(var(--blue-rgb), 0.30); }
.btn--primary:hover { color: #fff; box-shadow: var(--glow-blue); }
.btn--primary::after { /* shimmer */
	content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
	transform: translateX(-120%); transition: transform 700ms var(--ease);
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--grey-300); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light:hover { color: var(--blue-700); }
.btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.btn-row--center { justify-content: center; }
.hero--dark .btn--ghost, .cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.32); }
.hero--dark .btn--ghost:hover, .cta-band .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.72); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--transition), background var(--transition); }
.site-header.is-stuck { border-bottom-color: var(--line); background: rgba(255,255,255,0.9); }
.site-header__bar { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
.brand-text { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.03em; color: var(--ink); display: inline-flex; align-items: center; gap: 0.1rem; }
.brand-text::before { content: ""; width: 12px; height: 12px; margin-right: 0.55rem; background: var(--grad-blue); border-radius: 3px; transform: rotate(45deg); box-shadow: 0 0 14px rgba(var(--blue-rgb), 0.6); }
.custom-logo-link { display: inline-flex; } .custom-logo { max-height: 46px; width: auto; }
.site-header__brand .brand, .site-footer__brand .brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.site-logo { height: 40px; width: auto; display: block; }
.site-logo--footer { height: 36px; }
.brand-name { font-family: var(--font-head); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.03em; line-height: 1; color: var(--ink); white-space: nowrap; }
.brand-name strong { font-weight: 800; }
.site-footer__brand .brand-name { color: #fff; }
@media (max-width: 560px) { .site-logo { height: 34px; } .brand-name { font-size: 1.12rem; } }

/* ---- Brand mark placements: "in the stars" network panel, CTA watermark, popup ---- */
.graphic-panel[data-graphic="network"] .graphic-panel__emblem {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	height: 58%; width: auto; z-index: 1; opacity: 0.96; pointer-events: none;
	filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.5));
}
@media (max-width: 860px) { .graphic-panel[data-graphic="network"] .graphic-panel__emblem { height: 50%; } }

.cta-band__inner { position: relative; z-index: 1; }
.cta-band::before {
	content: ""; position: absolute; z-index: 0; right: -3%; bottom: -34%;
	width: 360px; height: 360px; background: url(../img/logo-white.png) no-repeat center / contain;
	opacity: 0.07; pointer-events: none;
}
@media (max-width: 720px) { .cta-band::before { width: 220px; height: 220px; } }

.popup__logo { display: block; height: 40px; width: auto; margin: 0 0 1.1rem; }

.site-nav { margin-left: auto; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.15rem; }
.menu--primary > li { position: relative; }
.menu--primary > li > a { display: inline-flex; align-items: center; padding: 0.6rem 0.9rem; font-family: var(--font-head); font-weight: 500; font-size: 0.97rem; color: var(--grey-700); border-radius: var(--radius-sm); transition: color var(--transition); }
.menu--primary > li > a:hover { color: var(--ink); }
.menu--primary > li > a::after { content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.35rem; height: 2px; background: var(--blue); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--transition); }
.menu--primary > li:hover > a::after { transform: scaleX(1); }
.menu--primary .menu-item-has-children > a { gap: 0.35rem; }
.menu--primary .menu-item-has-children > a::before { content: ""; order: 2; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; opacity: 0.55; }
.menu--primary .sub-menu {
	position: absolute; top: calc(100% - 2px); left: 0; min-width: 280px; background: #fff;
	border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
	padding: 0.5rem; list-style: none; margin: 0.6rem 0 0; display: grid; gap: 1px;
	opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); z-index: 50;
}
.menu--primary > li:hover > .sub-menu, .menu--primary > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.menu--primary .sub-menu a { display: block; padding: 0.62rem 0.8rem; border-radius: var(--radius-sm); color: var(--grey-600); font-size: 0.94rem; font-weight: 500; transition: background var(--transition), color var(--transition); }
.menu--primary .sub-menu a:hover { background: var(--blue); color: #fff; }

.site-header__actions { display: flex; align-items: center; gap: 0.85rem; }
.header-call { font-family: var(--font-head); font-weight: 600; color: var(--ink); white-space: nowrap; font-size: 0.95rem; }
.header-call:hover { color: var(--blue); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 0.5rem; cursor: pointer; }
.nav-toggle span { width: 26px; height: 2px; background: var(--ink); border-radius: 2px; transition: var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav { border-top: 1px solid var(--line); background: #fff; padding: 1rem 1.25rem 1.5rem; max-height: 80vh; overflow-y: auto; }
.mobile-nav .menu { flex-direction: column; gap: 0; }
.mobile-nav .menu a { display: block; padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--line); color: var(--ink); font-family: var(--font-head); font-weight: 600; }
.mobile-nav .sub-menu { list-style: none; padding-left: 1rem; margin: 0; }
.mobile-nav .sub-menu a { font-weight: 500; color: var(--grey-600); }
.mobile-nav__cta { margin-top: 1.25rem; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--bg-alt); }
.section__title { margin-bottom: 0.6rem; }
.section__intro { color: var(--text-soft); font-size: var(--fs-lead); max-width: 62ch; margin-bottom: 2.5rem; }
.rich p { margin-bottom: 1rem; } .rich ul { padding-left: 1.2rem; display: grid; gap: 0.4rem; } .rich h3 { margin-top: 1.75rem; }
.rich a { font-weight: 600; border-bottom: 1px solid rgba(var(--blue-rgb),0.35); }

/* ---- Hero ---- */
.hero { position: relative; padding-top: clamp(3.5rem, 2rem + 4.5vw, 6rem); padding-bottom: clamp(2.75rem, 1.5rem + 4.5vw, 5.5rem); overflow: hidden; isolation: isolate; }
.hero--dark { background: var(--ink); color: var(--text-invert); }
.hero--dark h1 { color: #fff; }
.hero--dark::before { /* blueprint grid */
	content: ""; position: absolute; inset: 0; z-index: -2;
	background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: 60px 60px;
	-webkit-mask-image: radial-gradient(130% 100% at 70% 10%, #000 35%, transparent 80%);
	mask-image: radial-gradient(130% 100% at 70% 10%, #000 35%, transparent 80%);
}
.hero--dark::after { /* kinetic gradient mesh glow */
	content: ""; position: absolute; z-index: -1; width: 120vw; height: 120vh; top: -40%; right: -30%;
	background:
		radial-gradient(40% 40% at 70% 30%, rgba(var(--blue-rgb), 0.55) 0%, transparent 60%),
		radial-gradient(35% 35% at 85% 60%, rgba(96, 165, 250, 0.35) 0%, transparent 60%);
	filter: blur(20px); opacity: 0.9; animation: meshFloat 16s ease-in-out infinite alternate;
}
@keyframes meshFloat { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-4%, 3%) scale(1.08); } }
.hero--light { background: linear-gradient(180deg, #fff 0%, var(--grey-50) 100%); }
.hero--image::before { background-image: var(--hero-img); background-size: cover; background-position: center; opacity: 0.18; mask-image: none; -webkit-mask-image: none; }
.hero__inner { position: relative; max-width: 880px; }
.hero__title { margin-bottom: 1.1rem; }
.hero--dark .hero__title { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { font-size: var(--fs-lead); max-width: 60ch; margin-bottom: 2rem; color: inherit; opacity: 0.9; }
.hero__cta { gap: 0.85rem; }

/* ---- Trust band ---- */
.trust-band { background: var(--ink-2); color: #fff; padding-block: 1.1rem; border-block: 1px solid var(--line-dark); }
.trust-band__inner { display: flex; flex-wrap: wrap; gap: 1rem 2.75rem; align-items: center; justify-content: center; }
.trust-band__item { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; }
.trust-band__item .icon { width: 20px; height: 20px; color: var(--blue-400); }

/* ---- Feature cards ---- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.card {
	position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 1.85rem; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
	overflow: hidden;
}
.card::before { /* gradient top edge on hover */
	content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-blue);
	transform: scaleX(0); transform-origin: left; transition: transform var(--transition);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, rgba(var(--blue-rgb), 0.14), rgba(var(--blue-rgb), 0.05)); color: var(--blue); margin-bottom: 1.15rem; border: 1px solid rgba(var(--blue-rgb), 0.18); transition: transform var(--transition); }
.card:hover .card__icon { transform: scale(1.06) rotate(-3deg); }
.card__icon .icon { width: 27px; height: 27px; }
.card__title { font-size: 1.22rem; }
.card__text { color: var(--text-soft); margin-bottom: 0.9rem; }
.card__link { font-family: var(--font-head); font-weight: 600; color: var(--blue); display: inline-flex; align-items: center; gap: 0.35rem; }
.card__link::after { content: "\2192"; transition: transform var(--transition); }
.card__link:hover { color: var(--blue-700); } .card__link:hover::after { transform: translateX(4px); }

/* ---- Bullets / checklist ---- */
.bullets, .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.bullets.cols-2, .checklist { grid-template-columns: repeat(2, 1fr); }
.bullets.cols-3 { grid-template-columns: repeat(3, 1fr); }
.bullets li, .checklist li { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 500; }
.bullets .icon, .checklist .icon { flex: 0 0 auto; width: 24px; height: 24px; padding: 4px; color: var(--blue); background: rgba(var(--blue-rgb), 0.1); border-radius: 7px; margin-top: 1px; }
.checklist li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.95rem 1.1rem; transition: border-color var(--transition), box-shadow var(--transition); }
.checklist li:hover { border-color: rgba(var(--blue-rgb), 0.4); box-shadow: var(--shadow-sm); }

/* ---- Two column ---- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.two__img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; object-fit: cover; }

/* ---- Stats ---- */
.section--stats { background: var(--ink); color: var(--text-invert); }
.section--stats .section__title { color: #fff; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.stat { position: relative; padding: 1.5rem 1.25rem; border: 1px solid var(--line-dark); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent); }
.stat::before { content: ""; position: absolute; top: 1.5rem; left: 0; width: 3px; height: 2.2rem; background: var(--grad-blue); border-radius: 2px; }
.stat__num { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); color: #fff; line-height: 1; letter-spacing: -0.03em; }
.stat__label { display: block; color: var(--text-invert-soft); margin-top: 0.6rem; font-size: 0.95rem; }
.stat__src { color: var(--blue-400); font-size: 0.8rem; }

/* ---- Process steps ---- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.steps li::marker, .steps > li::before { content: none; } /* belt-and-suspenders: only .step__n shows a number, never a list bullet/counter */
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.75rem; }
.step__n { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; background: var(--grad-blue); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; margin-bottom: 1rem; box-shadow: 0 6px 18px rgba(var(--blue-rgb),0.3); }
.step h3 { font-size: 1.12rem; } .step p { color: var(--text-soft); margin: 0; font-size: 0.97rem; }

/* ---- FAQ ---- */
.faq { display: grid; gap: 0.75rem; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color var(--transition); }
.faq__item[open] { border-color: rgba(var(--blue-rgb), 0.4); box-shadow: var(--shadow-sm); }
.faq__item summary { cursor: pointer; padding: 1.15rem 1.35rem; font-family: var(--font-head); font-weight: 600; font-size: 1.06rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; flex: 0 0 auto; width: 22px; height: 22px; position: relative; }
.faq__item summary::before { content: ""; position: absolute; right: 1.5rem; width: 13px; height: 2px; background: var(--blue); transition: transform var(--transition); }
.faq__item summary { position: relative; }
.faq__item summary::after { content: ""; position: absolute; right: 1.85rem; width: 2px; height: 13px; background: var(--blue); transition: transform var(--transition); }
.faq__item[open] summary::after { transform: scaleY(0); }
.faq__a { padding: 0 1.35rem 1.3rem; color: var(--text-soft); }

/* ---- CTA band ---- */
.cta-band { padding-block: clamp(3rem, 1.5rem + 5vw, 5rem); position: relative; overflow: hidden; isolation: isolate; }
.cta-band--accent { background: var(--grad-blue); color: #fff; }
.cta-band--dark { background: var(--ink); color: #fff; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5;
	background-image: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 48px 48px; }
.cta-band h2 { color: #fff; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta-band p { margin: 0; opacity: 0.95; max-width: 56ch; font-size: var(--fs-lead); }

/* ---- Breadcrumbs / page head ---- */
.breadcrumbs { padding-top: 1.5rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; font-size: 0.85rem; color: var(--text-soft); }
.breadcrumbs a { color: var(--text-soft); } .breadcrumbs a:hover { color: var(--blue); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.45rem; opacity: 0.4; }
.page-head { position: relative; background: var(--ink); color: #fff; padding-block: 2rem 2.75rem; overflow: hidden; isolation: isolate; }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 120% at 80% 0%, rgba(var(--blue-rgb), 0.35), transparent 70%); }
.page-head h1 { margin: 0.75rem 0 0; color: #fff; }
.page-head .breadcrumbs a, .page-head .breadcrumbs { color: rgba(255,255,255,0.7); }
.page-head .breadcrumbs a:hover { color: #fff; }

/* ---- Contact ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); }
.contact-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.95rem; }
.contact-list li { display: flex; gap: 0.7rem; align-items: center; }
.contact-list .icon { width: 24px; height: 24px; padding: 4px; color: var(--blue); background: rgba(var(--blue-rgb), 0.1); border-radius: 7px; flex: 0 0 auto; }
.contact-map iframe { width: 100%; min-height: 380px; border: 0; border-radius: var(--radius-lg); }

/* ---- Forms ---- */
.form-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-md); }
.form-placeholder { background: var(--grey-50); border: 2px dashed var(--grey-300); border-radius: var(--radius-lg); padding: 2rem; text-align: center; color: var(--text-soft); }
.btg-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; margin-bottom: 1.5rem; }
.btg-field { display: flex; flex-direction: column; gap: 0.4rem; }
.btg-field--wide { grid-column: 1 / -1; }
.btg-field label, .btg-checks legend { font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.btg-field .req { color: var(--blue); }
.btg-form input[type="text"], .btg-form input[type="email"], .btg-form input[type="tel"], .btg-form input[type="date"], .btg-form select, .btg-form textarea {
	width: 100%; padding: 0.8rem 0.95rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
	font: inherit; color: var(--text); background: #fff; transition: border-color var(--transition), box-shadow var(--transition);
}
.btg-form input:focus, .btg-form select:focus, .btg-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.15); }
.btg-form textarea { resize: vertical; min-height: 110px; }
.btg-checks { border: 0; padding: 0; margin: 0; grid-column: 1 / -1; }
.btg-checks__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem 1rem; margin-top: 0.65rem; }
.btg-check { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 0.95rem; color: var(--text); cursor: pointer; }
.btg-check input { width: 18px; height: 18px; accent-color: var(--blue); flex: 0 0 auto; }
.btg-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btg-form__fineprint { font-size: 0.82rem; color: var(--text-soft); margin: 0.9rem 0 0; }
.btg-form__success { background: rgba(var(--blue-rgb), 0.08); border: 1px solid rgba(var(--blue-rgb), 0.3); color: var(--blue-700); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-weight: 500; }
@media (max-width: 620px) { .btg-form__grid { grid-template-columns: 1fr; } .btg-checks__grid { grid-template-columns: 1fr 1fr; } }

/* ---- Blog / empty ---- */
.section--empty { text-align: center; }
.empty-icon { display: inline-flex; width: 68px; height: 68px; align-items: center; justify-content: center; border-radius: 18px; background: linear-gradient(135deg, rgba(var(--blue-rgb), 0.14), rgba(var(--blue-rgb), 0.04)); color: var(--blue); margin-bottom: 1.25rem; border: 1px solid rgba(var(--blue-rgb), 0.18); }
.empty-icon .icon { width: 30px; height: 30px; }
.post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-card__body { padding: 1.35rem 1.5rem 1.75rem; }

/* ---- Footer ---- */
.site-footer { background: var(--ink); color: var(--text-invert-soft); margin-top: 0; position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad-blue); opacity: 0.7; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
.site-footer .brand-text, .site-footer .brand-text strong { color: #fff; }
.site-footer__tag { color: var(--blue-400); font-family: var(--font-head); font-weight: 600; margin: 0.85rem 0 1.1rem; }
.site-footer__nap { font-style: normal; line-height: 1.9; }
.site-footer__nap a { color: var(--text-invert-soft); } .site-footer__nap a:hover { color: #fff; }
.site-footer__col h3 { color: #fff; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1rem; }
.footer-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-menu a { color: var(--text-invert-soft); font-size: 0.95rem; transition: color var(--transition); }
.footer-menu a:hover { color: #fff; padding-left: 3px; }
.site-footer__legal { border-top: 1px solid var(--line-dark); padding-block: 1.5rem; font-size: 0.85rem; }
.disclaimer { color: var(--grey-500); max-width: 92ch; }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 0.75rem; }
.site-footer__bottom .footer-menu { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ---- Sticky mobile bar + float call ---- */
.mobile-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; display: none; grid-template-columns: 1fr 1fr 1.5fr; background: rgba(255,255,255,0.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(10,10,15,0.12); }
.mobile-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0.6rem; font-size: 0.78rem; font-weight: 600; color: var(--ink); font-family: var(--font-head); }
.mobile-bar .icon { width: 20px; height: 20px; color: var(--blue); }
.mobile-bar__cta { background: var(--grad-blue); color: #fff !important; flex-direction: row !important; }
.float-call { position: fixed; right: 1.4rem; bottom: 1.6rem; z-index: 85; width: 58px; height: 58px; border-radius: 50%; background: var(--grad-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--glow-blue); transition: transform var(--transition); }
.float-call::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(var(--blue-rgb), 0.4); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0% { transform: scale(0.9); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } }
.float-call:hover { transform: scale(1.08); } .float-call .icon { width: 24px; height: 24px; }

/* ---- Popup ---- */
.popup { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.popup[hidden] { display: none; }
.popup__backdrop { position: absolute; inset: 0; background: rgba(10,10,15,0.7); backdrop-filter: blur(3px); }
.popup__panel { position: relative; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 480px; width: 100%; padding: 2.5rem; animation: popIn 320ms var(--ease); overflow: hidden; }
.popup__panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad-blue); }
.popup__close { position: absolute; top: 0.85rem; right: 1.1rem; background: none; border: 0; font-size: 1.8rem; line-height: 1; color: var(--grey-400); cursor: pointer; transition: color var(--transition); }
.popup__close:hover { color: var(--ink); }
.popup__actions { display: grid; gap: 0.65rem; margin-top: 1.4rem; }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

/* ---- Reveal + count-up ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.cards, .post-list { grid-template-columns: repeat(2, 1fr); }
	.steps, .stats { grid-template-columns: repeat(2, 1fr); }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	.site-nav { display: none; } .nav-toggle { display: flex; }
	.header-call { display: none; } .site-header__actions .btn--primary { display: none; }
	.two, .contact-grid, .cta-band__inner { grid-template-columns: 1fr; }
	body { padding-bottom: 80px; } .mobile-bar { display: grid; } .float-call { display: none; }
}
@media (max-width: 560px) {
	.cards, .post-list, .steps, .stats, .bullets.cols-2, .bullets.cols-3, .checklist, .site-footer__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1; transform: none; transition: none; }
	.hero--dark::after, .float-call::after, .card--featured::after, .scroll-cue__line::after { animation: none; }
	body::after { display: none; }
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   v1.6 — Cinematic layer (Lenis, grain, glass, kinetic headline, depth)
   ========================================================================== */

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Filmic grain overlay — barely perceptible, adds organic depth */
body::after {
	content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
	opacity: 0.035; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Kinetic headline (word rise + clip reveal); inert until motion.js splits the title */
.kw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; }
.kw__i { display: inline-block; will-change: transform; }
/* When the dark-hero gradient title is split into word spans for the kinetic animation, the
   parent's background-clip:text no longer paints the child glyphs — re-apply the gradient per word. */
.hero--dark .hero__title .kw__i { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Glass surface utility */
.glass {
	background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
	-webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}

/* Scroll cue in the hero */
.scroll-cue { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--text-invert-soft); font-family: var(--font-head); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; z-index: 2; }
.scroll-cue__line { width: 1px; height: 36px; background: linear-gradient(var(--blue-400), transparent); position: relative; overflow: hidden; }
.scroll-cue__line::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 40%; background: var(--blue-400); animation: cueFall 1.9s var(--ease) infinite; }
@keyframes cueFall { 0% { transform: translateY(-110%); } 100% { transform: translateY(260%); } }

/* Featured card — rotating conic edge-light */
.card--featured { border-color: transparent; }
.card--featured::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
	background: conic-gradient(from var(--angle), transparent 0 55%, var(--blue-400) 78%, var(--blue) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	animation: angleSpin 6s linear infinite;
}
@keyframes angleSpin { to { --angle: 360deg; } }

/* Stat callouts — subtle 3D tilt on hover */
@media (hover: hover) and (pointer: fine) {
	.stat { transition: transform var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); }
	.stat:hover { transform: perspective(900px) rotateX(3deg) rotateY(-3deg) translateY(-3px); border-color: rgba(var(--blue-rgb), 0.4); }
}

/* Magnetic buttons (transform driven by motion.js) */
.is-magnetic { transition: transform 0.18s var(--ease), box-shadow var(--transition); will-change: transform; }

/* Interactive risk-network hero canvas (Phase 2) */
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.2s var(--ease); pointer-events: none; }
.hero__canvas.is-ready { opacity: 0.85; }
.hero--dark .hero__inner, .hero--dark .scroll-cue { position: relative; z-index: 1; }

/* Interactive tools (Phase 3): risk quiz, estimator, certificate helper */
.btg-quiz, .btg-estimator, .btg-coi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-md); }
.btg-quiz__bar { height: 6px; background: var(--grey-100); border-radius: 999px; overflow: hidden; margin-bottom: 0.75rem; }
.btg-quiz__fill { display: block; height: 100%; width: 0; background: var(--grad-blue); transition: width 0.4s var(--ease); }
.btg-quiz__count { font-family: var(--font-head); font-size: 0.85rem; color: var(--text-soft); margin: 0 0 1.25rem; }
.btg-quiz__step { border: 0; padding: 0; margin: 0; }
.btg-quiz__q { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h3); color: var(--ink); margin-bottom: 1.25rem; padding: 0; }
.btg-quiz__opts { display: grid; gap: 0.6rem; }
.btg-quiz__opt { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.15rem; border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer; font-weight: 500; transition: border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); }
.btg-quiz__opt:hover { border-color: rgba(var(--blue-rgb), 0.5); transform: translateX(3px); }
.btg-quiz__opt input { accent-color: var(--blue); width: 18px; height: 18px; flex: 0 0 auto; }
.btg-quiz__opt:has(input:checked) { border-color: var(--blue); background: rgba(var(--blue-rgb), 0.06); }
.btg-quiz__nav { margin-top: 1.25rem; }
.btg-quiz__result { text-align: center; }
.btg-gauge { position: relative; width: 140px; height: 140px; margin: 0 auto 1rem; }
.btg-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.btg-gauge__track { fill: none; stroke: var(--grey-100); stroke-width: 9; }
.btg-gauge__val { fill: none; stroke: var(--blue); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1s var(--ease); }
.btg-gauge__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; color: var(--ink); }
.btg-quiz__rtitle { font-size: var(--fs-h3); }
.btg-quiz__recs { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 1.25rem 0; }
.btg-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.95rem; border-radius: 999px; background: rgba(var(--blue-rgb), 0.1); color: var(--blue-700); font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; border: 1px solid rgba(var(--blue-rgb), 0.2); transition: background var(--dur-hover) var(--ease); }
.btg-chip:hover { background: rgba(var(--blue-rgb), 0.18); text-decoration: none; }
.btg-quiz__capture { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; text-align: left; margin: 1.5rem 0; }
.btg-estimator { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; }
.btg-estimator__inputs { display: grid; gap: 1rem; }
.btg-estimator__out { text-align: center; background: var(--ink); color: #fff; border-radius: var(--radius); padding: 1.75rem; }
.btg-estimator__label { display: block; color: var(--text-invert-soft); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; }
.btg-estimator__range { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); color: #fff; margin: 0.5rem 0 0.75rem; }
.btg-estimator__disc { font-size: 0.78rem; color: var(--text-invert-soft); margin-bottom: 1rem; }
.btg-coi__list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.75rem; }
.btg-coi__list li { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 500; }
.btg-coi__list .icon { color: var(--blue); flex: 0 0 auto; margin-top: 1px; }
/* When a tool is dropped into a form_embed section, don't double-box it */
.form-wrap > .btg-quiz, .form-wrap > .btg-estimator, .form-wrap > .btg-coi { box-shadow: none; border: 0; padding: 0; background: transparent; }
@media (max-width: 620px) { .btg-quiz__capture, .btg-estimator { grid-template-columns: 1fr; } }

/* ==========================================================================
   v2.0 — Page transitions + scroll progress (Phase 5)
   ========================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.34s; animation-timing-function: var(--ease); }

.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--grad-blue); z-index: 300; pointer-events: none; }
@supports (animation-timeline: scroll()) {
	.scroll-progress { animation: spGrow linear both; animation-timeline: scroll(root block); }
	@keyframes spGrow { to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
	.scroll-progress { display: none; }
}

/* ==========================================================================
   v2.2 — Premium content sections (Coalition-grade editorial + lists)
   ========================================================================== */

/* (v2.3: page is tinted and framed sections render as white cards — see Phase 10 block below) */

/* Editorial two-column: heading aside (sticky) + structured body */
.rich-layout { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2rem, 1rem + 4vw, 5.5rem); align-items: start; }
.rich-layout__aside { position: relative; }
.rich-layout__aside .section__title { position: sticky; top: calc(var(--header-h) + 1.5rem); margin: 0; }
.rich-layout__body { font-size: 1.1rem; }
.rich-layout__body > p:first-child { font-size: 1.22rem; line-height: 1.6; color: var(--text); }
@media (max-width: 880px) { .rich-layout { grid-template-columns: 1fr; gap: 1rem; } .rich-layout__aside .section__title { position: static; } }

/* Accent bar above section headings (labeled, premium feel) */
.section__title::before {
	content: ""; display: block; width: 42px; height: 3px; border-radius: 3px;
	background: var(--grad-blue); margin-bottom: 1.1rem;
}
.section--stats .section__title::before { background: var(--blue-400); }
.align-center .section__title::before, .section--empty .section__title::before { margin-left: auto; margin-right: auto; }

/* Premium lists inside rich content — replaces default disc bullets */
.rich ul { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 0; }
.rich ul li {
	position: relative; padding: 0.9rem 0 0.9rem 2.4rem; border-bottom: 1px solid var(--line);
	font-weight: 500; color: var(--text); line-height: 1.5;
}
.rich ul li:first-child { border-top: 1px solid var(--line); }
.rich ul li::before {
	content: ""; position: absolute; left: 0; top: 0.85rem; width: 24px; height: 24px; border-radius: 7px;
	background-color: rgba(var(--blue-rgb), 0.1);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 14px;
}
.rich ol { list-style: none; padding: 0; margin: 1.5rem 0; counter-reset: ri; display: grid; gap: 0.85rem; }
.rich ol li { position: relative; padding: 0.15rem 0 0.15rem 3rem; counter-increment: ri; font-weight: 500; }
.rich ol li::before {
	content: counter(ri); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 8px;
	background: var(--grad-blue); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 0.9rem;
	display: flex; align-items: center; justify-content: center;
}

/* ==========================================================================
   v2.3 — Coalition-depth: tinted page, framed content cards, brand graphics
   ========================================================================== */

/* Tinted page so framed content sections float as white cards */
.site-main { background: var(--bg-alt); }

/* Framed content card — wraps rich_text, two_column, bullet_grid, faq content */
.frame {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md); padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}
/* The frame provides internal space + separation, so trim framed-section vertical rhythm */
.section--text, .section--two, .section--bullets, .section--faq, .section--ledger, .section--cycle, .section--compare { padding-block: clamp(1.4rem, 0.9rem + 1.8vw, 2.6rem); }
.frame .section__title::before { /* keep accent bar aligned within frame */ margin-bottom: 1rem; }

/* Two-column with brand visual (Coalition's text + visual pattern) */
.two--visual { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.two--visual.is-right .two__text { order: 1; } .two--visual.is-right .graphic-panel { order: 2; }
.two--visual.is-left .two__text { order: 2; } .two--visual.is-left .graphic-panel { order: 1; }
.two__text .section__title { margin-top: 0; }

/* Abstract brand-graphic panel (dark surface, glow, blueprint, optional live canvas/SVG) */
.graphic-panel {
	position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden;
	background: radial-gradient(120% 120% at 75% 15%, #1b1e26 0%, var(--ink) 70%);
	border: 1px solid var(--line-dark); isolation: isolate;
}
.graphic-panel canvas, .graphic-panel > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.graphic-panel__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(110% 110% at 60% 20%, #000 40%, transparent 82%); mask-image: radial-gradient(110% 110% at 60% 20%, #000 40%, transparent 82%); }
.graphic-panel__glow { position: absolute; width: 85%; height: 85%; top: -22%; right: -18%; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--blue-rgb), 0.55), transparent 70%); filter: blur(30px); animation: gpFloat 14s var(--ease) infinite alternate; }
.graphic-panel__art { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; padding: 12%; }
.graphic-panel__art svg { position: static; inset: auto; width: 100%; height: auto; max-height: 78%; color: var(--blue-400); }
@media (max-width: 860px) {
	.two--visual { grid-template-columns: 1fr; }
	.two--visual.is-right .graphic-panel, .two--visual.is-left .graphic-panel { order: 2; }
	.graphic-panel { aspect-ratio: 16 / 9; }
}

@keyframes gpFloat { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-5%, 4%) scale(1.07); } }
@keyframes gpDraw { to { stroke-dashoffset: 0; } }
.gp-draw { stroke-dasharray: 520; stroke-dashoffset: 520; animation: gpDraw 2.6s var(--ease) forwards; }
@keyframes gpBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.gp-bar { transform-origin: bottom; animation: gpBar 0.9s var(--ease) forwards; }
.gp-bar:nth-child(2) { animation-delay: 0.12s; } .gp-bar:nth-child(3) { animation-delay: 0.24s; } .gp-bar:nth-child(4) { animation-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
	.graphic-panel__glow, .gp-draw, .gp-bar { animation: none; }
	.gp-draw { stroke-dashoffset: 0; } .gp-bar { transform: none; }
}

/* ==========================================================================
   v2.4 — In-brand multi-color variety + bento + richer gradients
   ========================================================================== */

/* Feature cards cycle through the cool spectrum (blue → cyan → violet → emerald) */
.cards .card { --c: var(--blue); --c-rgb: var(--blue-rgb); --c-400: var(--blue-400); }
.cards .card:nth-child(4n+2) { --c: var(--cyan); --c-rgb: var(--cyan-rgb); --c-400: var(--cyan-400); }
.cards .card:nth-child(4n+3) { --c: var(--violet); --c-rgb: var(--violet-rgb); --c-400: var(--violet-400); }
.cards .card:nth-child(4n+4) { --c: var(--emerald); --c-rgb: var(--emerald-rgb); --c-400: var(--emerald-400); }
.cards .card__icon { background: linear-gradient(135deg, rgba(var(--c-rgb), 0.16), rgba(var(--c-rgb), 0.05)); color: var(--c); border-color: rgba(var(--c-rgb), 0.22); }
.cards .card__link { color: var(--c); }
.cards .card::before { background: var(--c); }
.cards .card:hover { box-shadow: 0 18px 48px rgba(var(--c-rgb), 0.20), var(--shadow-lg); }
.cards .card--featured::after { background: conic-gradient(from var(--angle), transparent 0 55%, var(--c-400) 78%, var(--c) 100%); }

/* Bento layout — varied tile sizes; first tile is a large featured cell */
.cards--bento .card:first-child { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
.cards--bento .card:first-child .card__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem); }
.cards--bento .card:first-child .card__icon { width: 64px; height: 64px; }
@media (max-width: 1024px) { .cards--bento .card:first-child { grid-column: span 2; grid-row: auto; } }
@media (max-width: 560px) { .cards--bento .card:first-child { grid-column: auto; } }

/* Brand-graphic panels: accent glow + art color vary by graphic type */
.graphic-panel { --g: var(--blue-rgb); }
.graphic-panel[data-graphic="shield"] { --g: var(--violet-rgb); }
.graphic-panel[data-graphic="dataviz"] { --g: var(--cyan-rgb); }
.graphic-panel[data-graphic="topo"] { --g: var(--emerald-rgb); }
.graphic-panel[data-graphic="blueprint"] { --g: var(--indigo-rgb); }
.graphic-panel__glow { background: radial-gradient(50% 50% at 50% 50%, rgba(var(--g), 0.55), transparent 70%); }
.graphic-panel[data-graphic="shield"] .graphic-panel__art svg { color: var(--violet-400); }
.graphic-panel[data-graphic="dataviz"] .graphic-panel__art svg { color: var(--cyan-400); }
.graphic-panel[data-graphic="topo"] .graphic-panel__art svg { color: var(--emerald-400); }
.graphic-panel[data-graphic="blueprint"] .graphic-panel__art svg { color: var(--indigo-400); }

/* Multi-color hero mesh glow (blue + violet + cyan) */
.hero--dark::after {
	background:
		radial-gradient(38% 38% at 70% 28%, rgba(var(--blue-rgb), 0.5) 0%, transparent 60%),
		radial-gradient(32% 32% at 90% 58%, rgba(var(--violet-rgb), 0.34) 0%, transparent 60%),
		radial-gradient(30% 30% at 56% 80%, rgba(var(--cyan-rgb), 0.26) 0%, transparent 60%);
}

/* Spectrum CTA band + multi-color stat / trust accents */
.cta-band--accent { background: var(--grad-spectrum); }
.section--stats .stat:nth-child(4n+2)::before { background: var(--cyan-400); }
.section--stats .stat:nth-child(4n+3)::before { background: var(--violet-400); }
.section--stats .stat:nth-child(4n+4)::before { background: var(--emerald-400); }
.trust-band__item:nth-child(4n+2) .icon { color: var(--cyan-400); }
.trust-band__item:nth-child(4n+3) .icon { color: var(--violet-400); }
.trust-band__item:nth-child(4n+4) .icon { color: var(--emerald-400); }

/* ==========================================================================
   v2.5 — Distinct complex sections (statement · compare · feature band · bento tiles)
   ========================================================================== */

/* (1) Oversized statement with gradient-highlighted keyword */
.statement { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.statement--dark { background: var(--ink); color: #fff; }
.statement__title { font-size: var(--fs-display); line-height: 1.03; letter-spacing: -0.03em; margin: 0.5rem 0 1.25rem; }
.statement--dark .statement__title { color: #fff; }
.statement__title mark { background: var(--grad-spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding: 0 0.05em; }
.statement__body { font-size: var(--fs-lead); color: var(--text-soft); max-width: 62ch; margin-inline: auto; }
.statement--dark .statement__body { color: var(--text-invert-soft); }

/* (2) Comparison matrix */
.section--compare .section__title, .section--compare .section__intro { text-align: center; }
.section--compare .section__title::before { margin-left: auto; margin-right: auto; }
.compare { margin-top: 1.5rem; }
.compare__row { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr; gap: 1rem; align-items: center; padding: 0.95rem 0.5rem; border-top: 1px solid var(--line); }
.compare__row--head { border-top: 0; }
.compare__aspect { font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.compare__cell--old { color: var(--text-soft); font-size: 0.97rem; }
.compare__row--head .compare__cell--old { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; color: var(--grey-400); }
.compare__cell--new { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 500; color: var(--ink); font-size: 0.97rem; padding: 0.8rem 1rem; margin: -0.8rem 0; background: rgba(var(--blue-rgb), 0.06); border-radius: var(--radius-sm); }
.compare__row--head .compare__cell--new { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; color: var(--blue); background: transparent; margin: 0; padding: 0; }
.compare__cell--new .icon { width: 19px; height: 19px; color: var(--blue); flex: 0 0 auto; margin-top: 2px; }
@media (max-width: 700px) { .compare__row { grid-template-columns: 1fr; gap: 0.3rem; } .compare__cell--new { margin: 0.3rem 0 0; } }

/* (3) Feature band (dark, icon-list) */
.section--fband .fband { position: relative; background: var(--ink); border-radius: var(--radius-xl); padding: clamp(2rem, 1.5rem + 3vw, 3.5rem); display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; overflow: hidden; isolation: isolate; }
.section--fband .fband::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 90% at 88% 8%, rgba(var(--blue-rgb), 0.35), transparent 70%), radial-gradient(40% 70% at 95% 90%, rgba(var(--violet-rgb), 0.22), transparent 70%); }
.fband__intro h2 { color: #fff; } .fband__intro p { color: var(--text-invert-soft); margin-bottom: 1.5rem; }
.fband__items { display: grid; gap: 0.5rem; }
.fband__item { display: flex; align-items: center; gap: 1rem; padding: 1.05rem 1.2rem; border-radius: var(--radius); border: 1px solid var(--line-dark); background: rgba(255, 255, 255, 0.03); color: #fff; transition: border-color var(--transition), background var(--transition), transform var(--transition); }
.fband__item:hover { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); transform: translateX(4px); text-decoration: none; color: #fff; }
.fband__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto; }
.fband__item--0 .fband__icon { background: rgba(var(--blue-rgb), 0.16); color: var(--blue-400); }
.fband__item--1 .fband__icon { background: rgba(var(--cyan-rgb), 0.16); color: var(--cyan-400); }
.fband__item--2 .fband__icon { background: rgba(var(--violet-rgb), 0.16); color: var(--violet-400); }
.fband__item--3 .fband__icon { background: rgba(var(--emerald-rgb), 0.16); color: var(--emerald-400); }
.fband__icon .icon { width: 24px; height: 24px; }
.fband__title { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; }
@media (max-width: 860px) { .section--fband .fband { grid-template-columns: 1fr; } }

/* (4 + 5) Bento accent + stat tiles */
.card--accent { color: #fff; border: 0; background: var(--grad-spectrum); }
.cards .card--accent:nth-child(4n+2) { background: linear-gradient(135deg, var(--cyan), var(--blue)); }
.cards .card--accent:nth-child(4n+3) { background: linear-gradient(135deg, var(--violet), var(--blue)); }
.cards .card--accent:nth-child(4n+4) { background: linear-gradient(135deg, var(--emerald), var(--cyan)); }
.card--accent .card__title, .card--accent .card__text { color: #fff; }
.card--accent .card__text { opacity: 0.92; }
.card--accent .card__icon { background: rgba(255, 255, 255, 0.18); color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.card--accent .card__link { color: #fff; }
.card--accent::before { display: none; }
.card--stat { display: flex; flex-direction: column; justify-content: center; }
.card__num { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; color: var(--c, var(--blue)); }
.card__statlabel { color: var(--text-soft); margin-top: 0.5rem; font-size: 0.97rem; }


/* ==========================================================================
   v2.6 — 10 Coalition-grade section types (ledger, cycle, showcase, pagenav,
   linkpanel, pill_statement, feature_split+radar, mosaic, impact, foldcards)
   ========================================================================== */

/* ===== v2.6 :: ledger (Center-spine comparison ledger) ===== */
/* =========================================================================
   LEDGER — center-spine staggered comparison (framed light surface)
   ========================================================================= */
.section--ledger .frame { overflow: hidden; }
.section--ledger .section__intro { max-width: 60ch; }

.ledger {
	--lg-spine-w: 2px;
	--lg-node: 13px;
	position: relative;
	margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}

/* ---- Header row: two column labels straddling the spine ---- */
.ledger__head {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(1.25rem, 0.5rem + 2.5vw, 3.5rem);
	padding-bottom: 1.25rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid var(--line);
}
.ledger__head-cell {
	font-family: var(--font-head);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	font-size: var(--fs-eyebrow);
	line-height: 1.3;
}
.ledger__head-cell--old { color: var(--grey-500); text-align: right; }
.ledger__head-cell--new {
	color: var(--blue-700);
	text-align: left;
	background: var(--grad-spectrum);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.ledger__head-spine { width: var(--lg-node); }

/* ---- The drawn central spine ---- */
.ledger__spine {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--lg-spine-w);
	transform: translateX(-50%);
	pointer-events: none;
}
.ledger__spine-line {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(var(--blue-rgb), 0.35) 0%, rgba(var(--violet-rgb), 0.35) 50%, rgba(var(--cyan-rgb), 0.35) 100%);
	transform-origin: top center;
	transform: scaleY(0);
	transition: transform 1100ms var(--ease);
}
.ledger.is-drawn .ledger__spine-line { transform: scaleY(1); }

/* ---- Rows ---- */
.ledger__rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.ledger__row {
	/* spectrum accent cycle */
	--c: var(--blue);
	--c-rgb: var(--blue-rgb);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(1.25rem, 0.5rem + 2.5vw, 3.5rem);
	padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.6rem);
	position: relative;
}
.ledger__row--1 { --c: var(--cyan);    --c-rgb: var(--cyan-rgb); }
.ledger__row--2 { --c: var(--violet);  --c-rgb: var(--violet-rgb); }
.ledger__row--3 { --c: var(--emerald); --c-rgb: var(--emerald-rgb); }
.ledger__row + .ledger__row::before {
	/* hairline divider that spans the row for a ledger feel */
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--line);
}

/* ---- Left (traditional) + Right (BLKTHRN) sides ---- */
.ledger__side { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.ledger__side--old { text-align: right; align-items: flex-end; }
.ledger__side--new { text-align: left; align-items: flex-start; }

.ledger__eyebrow {
	font-family: var(--font-head);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	font-size: var(--fs-eyebrow);
	line-height: 1.2;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.ledger__eyebrow--old { color: var(--grey-500); }
.ledger__eyebrow--new { color: var(--c); }
.ledger__eyebrow--new::before {
	content: "";
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--c);
	flex: 0 0 auto;
}

.ledger__desc {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	max-width: 34ch;
}
.ledger__desc--old { color: var(--text-soft); }
.ledger__desc--new { color: var(--text); font-weight: 500; }

/* ---- Center pillar: word on the spine + node + chevron connector ---- */
.ledger__pillar {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: clamp(7rem, 4rem + 8vw, 11rem);
	padding-inline: 0.5rem;
}
.ledger__node {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--radius-pill);
	background: var(--white);
	border: 2px solid var(--c);
	box-shadow: 0 0 0 5px rgba(var(--c-rgb), 0.10), 0 6px 18px rgba(var(--c-rgb), 0.18);
	color: var(--c);
	margin-bottom: 0.85rem;
	transform: scale(0.6);
	opacity: 0;
	transition: transform 460ms var(--ease), opacity 460ms var(--ease), box-shadow var(--transition);
}
.ledger__node .icon { width: 17px; height: 17px; stroke-width: 2.5; }
.ledger__pillar-word {
	font-family: var(--font-head);
	font-weight: 700;
	letter-spacing: var(--tracking-head);
	line-height: var(--lh-snug);
	font-size: var(--fs-h3);
	color: var(--ink);
	text-align: center;
}
.ledger__chevron {
	margin-top: 0.75rem;
	color: rgba(var(--c-rgb), 0.55);
	line-height: 0;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 460ms var(--ease) 120ms, transform 460ms var(--ease) 120ms;
}
/* last row has no onward chevron */
.ledger__row:last-child .ledger__chevron { display: none; }

/* node/chevron appear with the draw */
.ledger.is-drawn .ledger__node { transform: scale(1); opacity: 1; }
.ledger.is-drawn .ledger__chevron { opacity: 1; transform: translateY(0); }

/* ---- Row reveal stagger (driven by JS adding .is-in to rows) ---- */
.ledger__row {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms var(--ease), transform 620ms var(--ease);
	transition-delay: calc(var(--lg-i, 0) * 90ms);
}
.ledger__row.is-aleft { transform: translateY(18px) translateX(-10px); }
.ledger__row.is-aright { transform: translateY(18px) translateX(10px); }
.ledger__row.is-in { opacity: 1; transform: none; }

/* No-JS / fallback safety: if the ledger never gets activated, never trap content invisible. */
.no-js .ledger__row,
.no-js .ledger__node,
.no-js .ledger__chevron,
.no-js .ledger__spine-line { opacity: 1; transform: none; }

@media (hover: hover) {
	.ledger__row:hover .ledger__node {
		box-shadow: 0 0 0 6px rgba(var(--c-rgb), 0.14), 0 10px 26px rgba(var(--c-rgb), 0.28);
	}
	.ledger__row:hover .ledger__desc--new { color: var(--ink); }
}

/* =========================================================================
   MOBILE (<=720px): collapse to single-column stacked cards, hide spine
   ========================================================================= */
@media (max-width: 720px) {
	.ledger__head { display: none; }
	.ledger__spine { display: none; }
	.ledger__rows { gap: 1rem; }
	.ledger__row,
	.ledger__row.is-aleft,
	.ledger__row.is-aright {
		grid-template-columns: 1fr;
		gap: 0.85rem;
		padding: 1.25rem 1.25rem 1.35rem;
		border: 1px solid var(--line);
		border-left: 3px solid var(--c);
		border-radius: var(--radius);
		background: var(--white);
		box-shadow: var(--shadow-sm);
		transform: translateY(18px);
	}
	.ledger__row.is-in { transform: none; }
	.ledger__row + .ledger__row::before { display: none; }

	.ledger__pillar {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 0.7rem;
		min-width: 0;
		padding: 0;
		order: 1;
	}
	.ledger__node { margin: 0; width: 30px; height: 30px; transform: scale(1); opacity: 1; }
	.ledger__node .icon { width: 15px; height: 15px; }
	.ledger__pillar-word { text-align: left; font-size: var(--fs-h3); }
	.ledger__chevron,
	.ledger__row:last-child .ledger__chevron { display: none; }

	.ledger__side { order: 2; }
	.ledger__side--old,
	.ledger__side--new {
		text-align: left;
		align-items: flex-start;
		padding-top: 0.85rem;
		border-top: 1px dashed var(--line);
	}
	.ledger__desc { max-width: none; }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.ledger__spine-line { transform: scaleY(1) !important; transition: none; }
	.ledger__node,
	.ledger__chevron { opacity: 1 !important; transform: none !important; transition: none; }
	.ledger__row,
	.ledger__row.is-aleft,
	.ledger__row.is-aright {
		opacity: 1 !important;
		transform: none !important;
		transition: none;
	}
}

/* ===== v2.6 :: cycle (Radial cycle diagram) ===== */
/* ============================================================
   CYCLE — Radial segmented cycle diagram (FRAMED light, 2-col)
   ============================================================ */
.section--cycle .frame { overflow: visible; }

.cycle {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

/* ---------- LEFT: ring ---------- */
.cycle__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cycle__ringwrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  /* soft radial wash behind the ring for depth */
  background:
    radial-gradient(60% 60% at 50% 46%, rgba(var(--blue-rgb), 0.10), transparent 70%);
  border-radius: 50%;
}
.cycle__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Track behind the segments */
.cycle__track {
  stroke: var(--grey-100);
}

/* Coloured arc segments */
.cycle__seg {
  --seg-c: var(--blue);
  --seg-c-rgb: var(--blue-rgb);
  stroke: var(--seg-c);
  /* draw-in start state: fully hidden */
  stroke-dasharray: var(--seg-len) calc(var(--seg-len) + 4);
  stroke-dashoffset: var(--seg-len);
  transition:
    stroke-dashoffset 1s var(--ease),
    filter 240ms var(--ease);
  transition-delay: var(--seg-delay, 0s);
  filter: drop-shadow(0 6px 14px rgba(var(--seg-c-rgb), 0.28));
}
.cycle__seg--blue    { --seg-c: var(--blue);    --seg-c-rgb: var(--blue-rgb); }
.cycle__seg--violet  { --seg-c: var(--violet);  --seg-c-rgb: var(--violet-rgb); }
.cycle__seg--cyan    { --seg-c: var(--cyan);    --seg-c-rgb: var(--cyan-rgb); }
.cycle__seg--emerald { --seg-c: var(--emerald); --seg-c-rgb: var(--emerald-rgb); }
.cycle__seg--indigo  { --seg-c: var(--indigo);  --seg-c-rgb: var(--indigo-rgb); }

/* draw-in trigger (added by JS, or present by default for reduced-motion / no-IO) */
.section--cycle.is-cycle-in .cycle__seg,
.section--cycle .cycle__seg.is-drawn {
  stroke-dashoffset: 0;
}

/* Curved labels — decorative reinforcement (real text lives in .cycle__list).
   White fill with a dark halo via paint-order:stroke so it stays legible on
   every accent arc (cyan/emerald included), well clear of AA on the body list. */
.cycle__seglabel {
  font-family: var(--font-head);
  font-size: 7.4px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--white);
  stroke: rgba(var(--ink-rgb), 0.55);
  stroke-width: 1.6px;
  paint-order: stroke fill;
}

/* Segment icon badges */
.cycle__iconwrap {
  --ic-c: var(--blue);
  --ic-c-rgb: var(--blue-rgb);
  opacity: 0;
  transition: opacity 320ms var(--ease);
  transition-delay: var(--seg-delay, 0s);
  transform-box: fill-box;
}
.cycle__iconwrap--blue    { --ic-c: var(--blue);    --ic-c-rgb: var(--blue-rgb); }
.cycle__iconwrap--violet  { --ic-c: var(--violet);  --ic-c-rgb: var(--violet-rgb); }
.cycle__iconwrap--cyan    { --ic-c: var(--cyan);    --ic-c-rgb: var(--cyan-rgb); }
.cycle__iconwrap--emerald { --ic-c: var(--emerald); --ic-c-rgb: var(--emerald-rgb); }
.cycle__iconwrap--indigo  { --ic-c: var(--indigo);  --ic-c-rgb: var(--indigo-rgb); }

.section--cycle.is-cycle-in .cycle__iconwrap,
.section--cycle .cycle__iconwrap.is-drawn { opacity: 1; }

.cycle__iconbg {
  fill: var(--white);
  stroke: var(--ic-c);
  stroke-width: 1.5;
}
.cycle__iconglyph {
  fill: none;
  stroke: var(--ic-c);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Center label overlay */
.cycle__center {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 47%;
  height: 47%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  gap: 0.35rem;
  padding: 0.5rem;
}
.cycle__center-eyebrow {
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-soft);
}
.cycle__center-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(0.95rem, 0.7rem + 1vw, 1.3rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-head);
  background: var(--grad-spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- RIGHT: content ---------- */
.cycle__content { max-width: 36rem; }
.cycle__eyebrow { color: var(--blue); }
.cycle__title { margin-top: 0.4rem; }
.cycle__body { margin-top: 0.9rem; }

.cycle__list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.cycle__listitem {
  --li-c: var(--blue);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--li-c);
  border-radius: var(--radius-sm);
  background: var(--grey-50);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms var(--ease);
}
.cycle__listitem--blue    { --li-c: var(--blue); }
.cycle__listitem--violet  { --li-c: var(--violet); }
.cycle__listitem--cyan    { --li-c: var(--cyan); }
.cycle__listitem--emerald { --li-c: var(--emerald); }
.cycle__listitem--indigo  { --li-c: var(--indigo); }

.cycle__listicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  color: var(--li-c);
  background: color-mix(in srgb, var(--li-c) 12%, var(--white));
}
.cycle__listicon .icon { width: 20px; height: 20px; }
.cycle__listtext { line-height: 1.3; }

.cycle__cta { margin-top: 1.7rem; }

/* ---------- Hover (capable pointers only) ---------- */
@media (hover: hover) {
  .cycle__listitem:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
    border-color: var(--li-c);
  }
}

/* ---------- Responsive: stack ---------- */
@media (max-width: 820px) {
  .cycle {
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 1rem + 4vw, 2.75rem);
  }
  .cycle__visual { order: -1; }
  .cycle__ringwrap { max-width: 320px; }
  .cycle__content { max-width: none; }
}
@media (max-width: 420px) {
  .cycle__ringwrap { max-width: 280px; }
  .cycle__seglabel { font-size: 7px; }
}

/* ---------- Reduced motion: show end state ---------- */
@media (prefers-reduced-motion: reduce) {
  .cycle__seg {
    stroke-dashoffset: 0;
    transition: none;
  }
  .cycle__iconwrap {
    opacity: 1;
    transition: none;
  }
  .cycle__listitem { transition: none; }
}

/* ===== v2.6 :: showcase (Tabbed showcase (dark)) ===== */
/* ==========================================================================
   showcase — Tabbed showcase (dark, full-bleed). Pill tabs + per-tab bento.
   ========================================================================== */
.section--showcase {
	background: var(--ink);
	color: var(--text-invert);
	padding-block: var(--section-y);
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
/* Ambient multi-accent mesh behind the whole section */
.section--showcase::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(42% 38% at 16% 0%, rgba(var(--blue-rgb), 0.22), transparent 70%),
		radial-gradient(40% 40% at 92% 14%, rgba(var(--violet-rgb), 0.18), transparent 70%),
		radial-gradient(46% 44% at 78% 100%, rgba(var(--cyan-rgb), 0.15), transparent 72%);
	pointer-events: none;
}

/* ---- Head ---- */
.showcase__head { text-align: center; max-width: var(--container-narrow); margin-inline: auto; }
.showcase__title { color: #fff; }
.showcase__title::before { margin-left: auto; margin-right: auto; background: var(--blue-400); }
.showcase__intro { color: var(--text-invert-soft); font-size: var(--fs-lead); margin: 0 auto; max-width: 60ch; }

/* ---- Tab strip (pills) ---- */
.showcase__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: clamp(2rem, 1.4rem + 2vw, 3rem) auto clamp(2rem, 1.4rem + 2vw, 2.75rem);
}
.showcase__tab {
	--c: var(--blue);
	--c-rgb: var(--blue-rgb);
	--c-400: var(--blue-400);
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 46px;
	padding: 0.6rem 1.15rem;
	border-radius: var(--radius-pill);
	border: 1px solid var(--line-dark);
	background: rgba(255, 255, 255, 0.035);
	color: var(--text-invert-soft);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.showcase__tab--1 { --c: var(--cyan); --c-rgb: var(--cyan-rgb); --c-400: var(--cyan-400); }
.showcase__tab--2 { --c: var(--violet); --c-rgb: var(--violet-rgb); --c-400: var(--violet-400); }
.showcase__tab--3 { --c: var(--emerald); --c-rgb: var(--emerald-rgb); --c-400: var(--emerald-400); }
.showcase__tab-icon { display: inline-flex; }
.showcase__tab-icon .icon { width: 18px; height: 18px; }
.showcase__tab-label { display: inline-block; }
@media (hover: hover) {
	.showcase__tab:hover {
		color: #fff;
		border-color: rgba(var(--c-rgb), 0.5);
		background: rgba(var(--c-rgb), 0.12);
	}
}
.showcase__tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--c-rgb), 0.5); }
.showcase__tab[aria-selected="true"] {
	color: #fff;
	border-color: transparent;
	background: linear-gradient(135deg, var(--c-400) 0%, var(--c) 100%);
	box-shadow: 0 10px 30px rgba(var(--c-rgb), 0.4);
}
.showcase__tab[aria-selected="true"] .icon { color: #fff; }

/* ---- Panels ---- */
.showcase__panels { position: relative; }
.showcase__panel { --c: var(--blue); --c-rgb: var(--blue-rgb); --c-400: var(--blue-400); }
.showcase__panel--1 { --c: var(--cyan); --c-rgb: var(--cyan-rgb); --c-400: var(--cyan-400); }
.showcase__panel--2 { --c: var(--violet); --c-rgb: var(--violet-rgb); --c-400: var(--violet-400); }
.showcase__panel--3 { --c: var(--emerald); --c-rgb: var(--emerald-rgb); --c-400: var(--emerald-400); }
.showcase__panel[hidden] { display: none; }
.showcase__panel:focus { outline: none; }
.showcase__panel:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--c-rgb), 0.45); border-radius: var(--radius-xl); }
/* Stacked spacing when JS absent (progressive enhancement) */
.showcase__panel + .showcase__panel { margin-top: 1.25rem; }
/* Entrance animation when JS activates a panel */
.showcase__panel.is-active { animation: scPanelIn 0.5s var(--ease) both; }
@keyframes scPanelIn {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

/* ---- Bento grid ---- */
.showcase__bento {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	grid-template-rows: auto auto;
	gap: 1.1rem;
	grid-template-areas:
		"primary stat"
		"primary detail";
}
.showcase__card {
	position: relative;
	border-radius: var(--radius-lg);
	border: 1px solid var(--line-dark);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
	padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
	overflow: hidden;
	isolation: isolate;
	transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
/* Subtle inner top highlight for dimensionality */
.showcase__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
	z-index: 2;
}
/* Accent edge-glow per card (uses panel accent --c) */
.showcase__card-glow {
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(60% 80% at 18% -10%, rgba(var(--c-rgb), 0.28), transparent 68%);
	opacity: 0.9;
	pointer-events: none;
}
@media (hover: hover) {
	.showcase__card:hover {
		border-color: rgba(var(--c-rgb), 0.42);
		transform: translateY(-3px);
		box-shadow: 0 22px 60px rgba(var(--c-rgb), 0.22);
	}
}

/* Primary card */
.showcase__card--primary {
	grid-area: primary;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.showcase__card-title {
	font-family: var(--font-head);
	font-weight: 700;
	letter-spacing: var(--tracking-head);
	line-height: var(--lh-snug);
	font-size: var(--fs-h3);
	color: #fff;
	margin: 0 0 0.85rem;
}
.showcase__card-text {
	color: var(--text-invert-soft);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	margin: 0;
	max-width: 48ch;
}
.showcase__card-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1.5rem;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1rem;
	color: var(--c-400);
	align-self: flex-start;
	min-height: 44px;
}
.showcase__card-link .showcase__arrow { transition: transform var(--transition); }
@media (hover: hover) {
	.showcase__card-link:hover { color: #fff; }
	.showcase__card-link:hover .showcase__arrow { transform: translateX(5px); }
}
.showcase__card-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--c-rgb), 0.5); border-radius: var(--radius-sm); }

/* Stat card */
.showcase__card--stat {
	grid-area: stat;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.35rem;
}
.showcase__stat-num {
	font-family: var(--font-head);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	font-size: clamp(2.75rem, 1.8rem + 3.4vw, 4rem);
	color: var(--c-400); /* fallback for non-clip browsers */
	background: linear-gradient(135deg, #fff 0%, var(--c-400) 60%, var(--c) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.showcase__stat-label {
	color: var(--text-invert-soft);
	font-size: 0.95rem;
	line-height: 1.45;
	max-width: 26ch;
}

/* Detail card */
.showcase__card--detail {
	grid-area: detail;
	display: flex;
	flex-direction: column;
}
.showcase__detail-title {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.05rem;
	color: #fff;
	margin: 0 0 1rem;
}
.showcase__checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.showcase__check {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	color: var(--text-invert);
	font-size: 0.95rem;
	line-height: 1.4;
}
.showcase__check-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 7px;
	background: rgba(var(--c-rgb), 0.16);
	color: var(--c-400);
	margin-top: 0.05rem;
}
.showcase__check-icon .icon { width: 15px; height: 15px; stroke-width: 2.4; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.showcase__bento {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"primary primary"
			"stat detail";
	}
}
@media (max-width: 820px) {
	/* Tabs become a horizontal scroll row */
	.showcase__tabs {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.5rem;
		margin-inline: 0;
		scrollbar-width: none;
	}
	.showcase__tabs::-webkit-scrollbar { display: none; }
	.showcase__tab { flex: 0 0 auto; scroll-snap-align: start; }
	/* Bento collapses to single column: large, stat, detail */
	.showcase__bento {
		grid-template-columns: 1fr;
		grid-template-areas:
			"primary"
			"stat"
			"detail";
	}
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.showcase__panel.is-active { animation: none; }
	.showcase__card,
	.showcase__card-link .showcase__arrow,
	.showcase__tab { transition: none; }
	.showcase__card:hover { transform: none; }
}

/* ===== v2.6 :: pagenav (Sticky in-page section nav) ===== */
/* ====================================================================
   pagenav — Sticky in-page section nav with scroll-spy
   Surface: white sticky bar, sits directly under the site header.
   Single cool-accent (blue) by design: this is wayfinding chrome, so
   one disciplined accent reads as "you are here" — cycling 5 colors
   across nav links would create noise and hurt the active-state signal.
   ==================================================================== */
.pagenav {
	position: sticky;
	top: var(--header-h);
	z-index: 90; /* below .site-header (100), above page content */
	background: rgba(255, 255, 255, 0.88);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 1px 0 rgba(var(--ink-rgb), 0.02);
	transition: box-shadow var(--transition), background var(--transition), border-color var(--transition);
}

/* Hairline always; deeper shadow once the bar is pinned (toggled by JS). */
.pagenav.is-stuck {
	background: rgba(255, 255, 255, 0.94);
	box-shadow: var(--shadow-sm);
}

.pagenav__bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 52px;
}

/* ---- Link list ---- */
.pagenav__list {
	display: flex;
	align-items: stretch;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
}
.pagenav__list::-webkit-scrollbar { display: none; } /* WebKit */

.pagenav__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.pagenav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 0.95rem;
	font-family: var(--font-head);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1;
	color: var(--text-soft);
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--radius-sm);
	transition: color var(--transition), background var(--transition);
}

/* Animated active underline — anchored to the link, scales in from center. */
.pagenav__link::after {
	content: "";
	position: absolute;
	left: 0.95rem;
	right: 0.95rem;
	bottom: 0;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: var(--blue);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 320ms var(--ease);
}

@media (hover: hover) {
	.pagenav__link:hover {
		color: var(--text);
		background: rgba(var(--blue-rgb), 0.05);
	}
}

.pagenav__link:focus-visible {
	outline: none;
	box-shadow: var(--ring);
	color: var(--text);
}

/* Active state: blue text + drawn underline. */
.pagenav__link.is-active {
	color: var(--blue);
}
.pagenav__link.is-active::after {
	transform: scaleX(1);
}

/* ---- Pinned CTA ---- */
.pagenav__cta {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding-left: 0.5rem;
	position: relative;
}
/* Subtle fade so scrolling chips slide under the CTA cleanly on narrow rows. */
.pagenav__cta::before {
	content: "";
	position: absolute;
	left: -1.75rem;
	top: 0;
	bottom: 0;
	width: 1.75rem;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.94));
}

.pagenav__btn.pagenav__btn {
	padding: 0.5rem 1.05rem;
	font-size: 0.9rem;
	white-space: nowrap;
}

/* ---- Mobile: horizontally scrollable chip row ---- */
@media (max-width: 860px) {
	.pagenav__bar {
		gap: 0.5rem;
	}
	.pagenav__list {
		gap: 0.4rem;
		padding: 0.5rem 0;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
	}
	.pagenav__link {
		min-height: 44px;
		padding: 0 0.9rem;
		font-size: 0.875rem;
		border: 1px solid var(--line);
		border-radius: var(--radius-pill);
		background: var(--white);
	}
	/* Chips use a filled active pill instead of an underline on mobile. */
	.pagenav__link::after { display: none; }
	.pagenav__link.is-active {
		color: var(--white);
		background: var(--blue);
		border-color: var(--blue);
	}
	@media (hover: hover) {
		.pagenav__link:hover {
			background: rgba(var(--blue-rgb), 0.06);
		}
		.pagenav__link.is-active:hover {
			background: var(--blue);
		}
	}
	.pagenav__cta { padding-left: 0.25rem; }
	.pagenav__cta::before { display: none; }
	.pagenav__btn.pagenav__btn {
		padding: 0.5rem 0.9rem;
		font-size: 0.85rem;
		min-height: 44px;
	}
}

@media (max-width: 540px) {
	/* On very small screens, drop the CTA so the chip row owns the width. */
	.pagenav__cta { display: none; }
}

/* ---- Reduced motion: kill the underline slide, show active state instantly ---- */
@media (prefers-reduced-motion: reduce) {
	.pagenav,
	.pagenav__link {
		transition: none;
	}
	.pagenav__link::after {
		transition: none;
		transform: scaleX(0);
	}
	/* Active underline appears immediately, no scale tween. */
	.pagenav__link.is-active::after {
		transform: scaleX(1);
	}
}

/* ===== v2.6 :: linkpanel (Dark resource link-panel) ===== */
/* ============================================================
   linkpanel — Dark resource link-panel (Coalition "Stay ahead" dark split hub)
   DARK rounded mega-panel inside .container: sticky heading left +
   stacked icon link-cards right, cool multi-accent per card.
   ============================================================ */
.section--linkpanel { padding-block: var(--section-y); }

/* The dark mega-panel shell */
.linkpanel {
	position: relative;
	background: var(--ink);
	border-radius: var(--radius-xl);
	border: 1px solid var(--line-dark);
	box-shadow: var(--shadow-lg);
	padding: clamp(1.75rem, 1.2rem + 3vw, 3.75rem);
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
	overflow: clip;
	isolation: isolate;
	color: var(--text-invert);
}

/* Soft cool aura behind the panel content */
.linkpanel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(48% 70% at 6% 4%, rgba(var(--blue-rgb), 0.30), transparent 72%),
		radial-gradient(42% 65% at 98% 96%, rgba(var(--violet-rgb), 0.22), transparent 74%),
		radial-gradient(36% 55% at 88% 12%, rgba(var(--cyan-rgb), 0.16), transparent 70%);
}

/* 1px inner top highlight for premium edge lighting */
.linkpanel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ---- LEFT: sticky heading column ---- */
.linkpanel__aside { position: relative; }
.linkpanel__asideInner {
	position: sticky;
	top: calc(var(--header-h) + 1.5rem);
}
/* Own the heading deterministically. The shared .section__title carries a
   ::before accent bar; pin its color + margin here so the cascade is not
   order-dependent and the bar reads on-brand against the dark panel. */
.linkpanel__title.section__title {
	color: var(--text-invert);
	margin: 0 0 1rem;
	line-height: var(--lh-snug);
}
.linkpanel__title.section__title::before {
	background: var(--blue-400);
	margin-bottom: 1.1rem;
}
.linkpanel__text {
	color: var(--text-invert-soft);
	font-size: var(--fs-lead);
	line-height: var(--lh-body);
	margin: 0 0 1.75rem;
	max-width: 38ch;
}
.linkpanel__cta { margin-top: 0.25rem; }

/* ---- RIGHT: stacked link-cards ---- */
.linkpanel__list {
	display: grid;
	gap: 0.85rem;
	align-content: start;
}

.linkpanel__card {
	--c: var(--blue);
	--c-rgb: var(--blue-rgb);
	--c-400: var(--blue-400);
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.15rem;
	align-items: start;
	padding: 1.3rem 1.4rem;
	border-radius: var(--radius);
	border: 1px solid var(--line-dark);
	background: rgba(255, 255, 255, 0.025);
	color: var(--text-invert);
	text-decoration: none;
	overflow: hidden;
	transition:
		border-color var(--transition),
		background var(--transition),
		transform var(--transition),
		box-shadow var(--transition);
}

/* Per-card cool-spectrum cycling: blue -> cyan -> violet -> emerald */
.linkpanel__card:nth-child(4n + 1) { --c: var(--blue);    --c-rgb: var(--blue-rgb);    --c-400: var(--blue-400); }
.linkpanel__card:nth-child(4n + 2) { --c: var(--cyan);    --c-rgb: var(--cyan-rgb);    --c-400: var(--cyan-400); }
.linkpanel__card:nth-child(4n + 3) { --c: var(--violet);  --c-rgb: var(--violet-rgb);  --c-400: var(--violet-400); }
.linkpanel__card:nth-child(4n + 4) { --c: var(--emerald); --c-rgb: var(--emerald-rgb); --c-400: var(--emerald-400); }

/* Accent edge that brightens on hover/focus */
.linkpanel__card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, rgba(var(--c-rgb), 0.9), rgba(var(--c-rgb), 0.35));
	opacity: 0;
	transition: opacity var(--transition);
}

/* Icon tile */
.linkpanel__tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	border-radius: 14px;
	background: rgba(var(--c-rgb), 0.16);
	color: var(--c-400);
	border: 1px solid rgba(var(--c-rgb), 0.22);
	transition: background var(--transition), border-color var(--transition);
}
.linkpanel__tile .icon { width: 26px; height: 26px; }

.linkpanel__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}
.linkpanel__cardTitle {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-h3);
	line-height: var(--lh-snug);
	letter-spacing: var(--tracking-head);
	color: var(--text-invert);
}
.linkpanel__cardText {
	color: var(--text-invert-soft);
	font-size: var(--fs-body);
	line-height: 1.5;
}
.linkpanel__arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.4rem;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--c-400);
}
.linkpanel__arrowIcon {
	transition: transform var(--transition);
	flex: 0 0 auto;
}

/* Hover / focus lift — guarded for pointer devices */
@media (hover: hover) {
	a.linkpanel__card:hover {
		transform: translateY(-3px);
		border-color: rgba(var(--c-rgb), 0.45);
		background: rgba(var(--c-rgb), 0.07);
		box-shadow: 0 18px 44px rgba(var(--c-rgb), 0.18);
	}
	a.linkpanel__card:hover::before { opacity: 1; }
	a.linkpanel__card:hover .linkpanel__tile {
		background: rgba(var(--c-rgb), 0.24);
		border-color: rgba(var(--c-rgb), 0.4);
	}
	a.linkpanel__card:hover .linkpanel__arrowIcon { transform: translateX(4px); }
}

/* Keyboard focus — visible AA ring, independent of hover guard */
a.linkpanel__card:focus-visible {
	outline: none;
	border-color: rgba(var(--c-rgb), 0.6);
	box-shadow: 0 0 0 3px rgba(var(--c-rgb), 0.5);
}
a.linkpanel__card:focus-visible::before { opacity: 1; }

/* ---- Responsive: collapse to a single column ---- */
@media (max-width: 860px) {
	.linkpanel {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.linkpanel__asideInner {
		position: static;
		top: auto;
	}
	.linkpanel__text { max-width: none; }
	.linkpanel__card {
		grid-template-columns: auto 1fr;
		gap: 1rem;
		padding: 1.2rem;
	}
	.linkpanel__tile { width: 48px; height: 48px; }
}

/* Touch targets stay >=44px; arrow link inherits card hit area when linked */
@media (max-width: 560px) {
	.linkpanel { padding: 1.4rem; }
	.linkpanel__card {
		grid-template-columns: 1fr;
		gap: 0.85rem;
	}
}

/* ---- Reduced motion: no lift / slide ---- */
@media (prefers-reduced-motion: reduce) {
	.linkpanel__card,
	.linkpanel__arrowIcon,
	.linkpanel__tile,
	.linkpanel__card::before {
		transition: none;
	}
	a.linkpanel__card:hover { transform: none; }
	a.linkpanel__card:hover .linkpanel__arrowIcon { transform: none; }
}

/* ===== v2.6 :: pill_statement (Inline icon-pill statement) ===== */
/* ============================================================
   pill_statement - Inline icon-pill kinetic statement (FULL-BLEED DARK)
   ============================================================ */
.pillstmt {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: radial-gradient(135% 120% at 50% -10%, var(--ink-3) 0%, var(--ink) 62%);
	color: var(--text-invert);
	padding-block: clamp(4rem, 2.4rem + 6vw, 8.5rem);
	/* full-bleed: edge-to-edge dark (the .container child holds the readable width) */
	margin-inline: 0;
}

/* Depth: faint engineering grid, masked to fade at the edges */
.pillstmt__grid {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image:
		linear-gradient(var(--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: 52px 52px;
	-webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 38%, transparent 80%);
	mask-image: radial-gradient(120% 90% at 50% 0%, #000 38%, transparent 80%);
	pointer-events: none;
}

/* Soft spectrum glow blooming behind the headline */
.pillstmt__glow {
	position: absolute;
	z-index: -1;
	top: -18%;
	left: 50%;
	width: min(820px, 92%);
	height: 70%;
	transform: translateX(-50%);
	background:
		radial-gradient(42% 60% at 38% 30%, rgba(var(--blue-rgb), 0.30) 0%, transparent 62%),
		radial-gradient(40% 55% at 70% 40%, rgba(var(--violet-rgb), 0.24) 0%, transparent 64%),
		radial-gradient(38% 50% at 55% 70%, rgba(var(--cyan-rgb), 0.20) 0%, transparent 66%);
	filter: blur(36px);
	pointer-events: none;
}

.pillstmt__inner {
	position: relative;
	text-align: center;
	/* measure tuned for big-type punch without one-word-per-line wrapping.
	   px-based so the oversized display title (not the body ch) drives the width.
	   Overrides .measure's max-width via higher specificity (two classes). */
	max-width: min(900px, 92vw);
	margin-inline: auto;
}

.pillstmt__eyebrow {
	color: var(--text-invert-soft);
	margin: 0 0 1.25rem;
	justify-content: center;
}

/* The oversized headline */
.pillstmt__title {
	font-family: var(--font-head);
	font-weight: 600;
	/* impactful but not so large the inline pill is forced onto a lonely line */
	font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);
	line-height: 1.08;
	letter-spacing: var(--tracking-head);
	text-wrap: balance;
	margin: 0;
	color: var(--text-invert);
}

.pillstmt__lead,
.pillstmt__mid { color: var(--text-invert); }

/* Gradient-clipped closing phrase */
.pillstmt__hl {
	background: var(--grad-spectrum);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	padding: 0 0.04em;
	animation: pillstmtHueShift 9s var(--ease) infinite alternate;
}
@keyframes pillstmtHueShift {
	from { background-position: 0% 50%; }
	to   { background-position: 100% 50%; }
}

/* ---- The inline glass pill ---- */
.pillstmt__pill {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	position: relative;
	/* sizes relative to the headline so it scales with the type */
	gap: 0.12em;
	padding: 0.1em 0.42em;
	margin: 0 0.12em;
	border-radius: var(--radius-pill);
	border: 1px solid var(--glass-border);
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		0 0.18em 0.7em rgba(0, 0, 0, 0.45),
		0 0 0.1em rgba(var(--blue-rgb), 0.25);
	overflow: hidden;
	/* lift onto the optical baseline of the cap-height type */
	transform: translateY(-0.06em);
	white-space: nowrap;
}

/* Travelling highlight sweep across the pill face */
.pillstmt__sheen {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%);
	background-size: 220% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
	animation: pillstmtSheen 5.5s var(--ease) infinite;
}
@keyframes pillstmtSheen {
	0%   { background-position: 140% 0; }
	55%  { background-position: -40% 0; }
	100% { background-position: -40% 0; }
}

.pillstmt__icons {
	display: inline-flex;
	align-items: center;
	gap: 0.16em;
}

/* Each icon chip - sized in em so it tracks the headline scale */
.pillstmt__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* refined chip: icons sit at roughly cap-height so the pill nestles in the line */
	width: 0.52em;
	height: 0.52em;
	color: var(--c, var(--blue-400));
	/* gentle staggered pulse */
	animation: pillstmtPulse 3.6s var(--ease) infinite;
	animation-delay: calc(var(--i, 0) * 0.26s);
	will-change: transform, opacity;
}
.pillstmt__ico .icon {
	width: 100%;
	height: 100%;
	stroke-width: 2;
	filter: drop-shadow(0 0 0.16em rgba(var(--c-rgb, var(--blue-rgb)), 0.6));
}

/* Cool-spectrum cycle across the pill icons */
.pillstmt__ico--0 { --c: var(--blue-400);    --c-rgb: var(--blue-rgb); }
.pillstmt__ico--1 { --c: var(--cyan-400);    --c-rgb: var(--cyan-rgb); }
.pillstmt__ico--2 { --c: var(--violet-400);  --c-rgb: var(--violet-rgb); }
.pillstmt__ico--3 { --c: var(--emerald-400); --c-rgb: var(--emerald-rgb); }
.pillstmt__ico--4 { --c: var(--indigo-400);  --c-rgb: var(--indigo-rgb); }

@keyframes pillstmtPulse {
	0%, 100% { transform: scale(1);    opacity: 0.82; }
	45%      { transform: scale(1.14); opacity: 1; }
}

/* Supporting line */
.pillstmt__body {
	font-family: var(--font-body);
	font-size: var(--fs-lead);
	line-height: var(--lh-body);
	color: var(--text-invert-soft);
	max-width: 56ch;
	margin: 1.6rem auto 0;
	text-wrap: pretty;
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
	.pillstmt__inner { max-width: min(620px, 90vw); }
}
@media (max-width: 720px) {
	.pillstmt__inner { max-width: 92vw; }
	.pillstmt__title { line-height: 1.08; }
	/* pill stays inline but tightens so all icons survive on narrow lines */
	.pillstmt__pill { gap: 0.1em; padding: 0.1em 0.38em; margin: 0 0.08em; }
	.pillstmt__icons { gap: 0.1em; }
	.pillstmt__ico { width: 0.6em; height: 0.6em; }
}
@media (max-width: 420px) {
	.pillstmt__pill { gap: 0.06em; padding: 0.12em 0.36em; }
	.pillstmt__icons { gap: 0.06em; }
}

/* ---- Reduced motion: everything static, fully visible ---- */
@media (prefers-reduced-motion: reduce) {
	.pillstmt__hl { animation: none; background-position: 0% 50%; }
	.pillstmt__sheen { animation: none; display: none; }
	.pillstmt__ico { animation: none; opacity: 1; transform: none; }
}

/* ===== v2.6 :: feature_split (Radar/visual + feature grid) ===== */
/* ==========================================================================
   feature_split — Radar/visual + feature grid (FRAMED light two-column)
   ========================================================================== */
.section--fsplit { padding-block: clamp(1.4rem, 0.9rem + 1.8vw, 2.6rem); }

.fsplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 1rem + 3.4vw, 4rem);
  align-items: center;
}
/* image_side: which side the visual sits on (desktop) */
.fsplit--right .fsplit__visual { order: 2; }
.fsplit--right .fsplit__body   { order: 1; }
.fsplit--left  .fsplit__visual { order: 1; }
.fsplit--left  .fsplit__body   { order: 2; }

/* ---- Content side ---- */
.fsplit__head { margin-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); }
.fsplit__eyebrow { color: var(--blue); margin-bottom: 0.85rem; }
.fsplit__title { margin-top: 0; margin-bottom: 0.6rem; }
.fsplit__intro { margin-bottom: 0; max-width: 52ch; }

/* 2x2 feature grid (2xN; collapses to 1 col on small) */
.fsplit__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.85rem);
}

.fsplit__feat {
  --c: var(--blue); --c-rgb: var(--blue-rgb); --c-400: var(--blue-400);
  position: relative;
  display: flex; gap: 0.95rem; align-items: flex-start;
  padding-top: 0.35rem;
}
/* Multi-accent cool spectrum cycle: blue -> cyan -> violet -> emerald -> indigo */
.fsplit__feat:nth-child(5n+2) { --c: var(--cyan);    --c-rgb: var(--cyan-rgb);    --c-400: var(--cyan-400); }
.fsplit__feat:nth-child(5n+3) { --c: var(--violet);  --c-rgb: var(--violet-rgb);  --c-400: var(--violet-400); }
.fsplit__feat:nth-child(5n+4) { --c: var(--emerald); --c-rgb: var(--emerald-rgb); --c-400: var(--emerald-400); }
.fsplit__feat:nth-child(5n+5) { --c: var(--indigo);  --c-rgb: var(--indigo-rgb);  --c-400: var(--indigo-400); }

.fsplit__icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  color: var(--c);
  background: linear-gradient(135deg, rgba(var(--c-rgb), 0.16), rgba(var(--c-rgb), 0.05));
  border: 1px solid rgba(var(--c-rgb), 0.22);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.fsplit__icon .icon { width: 24px; height: 24px; }

.fsplit__feat-body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.fsplit__feat-title {
  font-family: var(--font-head); font-weight: 600;
  font-size: var(--fs-h3); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-head); color: var(--text);
}
.fsplit__feat-text {
  color: var(--text-soft); font-size: var(--fs-body); line-height: var(--lh-body);
}

@media (hover: hover) {
  .fsplit__feat:hover .fsplit__icon {
    transform: translateY(-3px);
    border-color: rgba(var(--c-rgb), 0.42);
    box-shadow: 0 10px 26px rgba(var(--c-rgb), 0.22);
  }
}

/* ---- Visual side wrapper ---- */
.fsplit__visual { min-width: 0; }
.fsplit__visual .graphic-panel { aspect-ratio: 1 / 1; width: 100%; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .fsplit { grid-template-columns: 1fr; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
  /* Visual always stacks ABOVE the features on mobile, regardless of side */
  .fsplit--right .fsplit__visual,
  .fsplit--left  .fsplit__visual { order: 1; }
  .fsplit--right .fsplit__body,
  .fsplit--left  .fsplit__body   { order: 2; }
  .fsplit__visual .graphic-panel { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .fsplit__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   RADAR / SONAR graphic — accent blue/cyan. Belongs with the .graphic-panel
   system in main.css; included here so the feature_split bundle is
   self-contained. Glow tint follows the shared --g convention.
   ========================================================================== */
.graphic-panel[data-graphic="radar"] { --g: var(--cyan-rgb); }
.graphic-panel[data-graphic="radar"] .graphic-panel__art { padding: 8%; }
.graphic-panel[data-graphic="radar"] .graphic-panel__art svg { color: var(--cyan-400); max-height: 92%; }

/* Static radar frame (rings/crosshair/grid circles) */
.gp-radar__frame { stroke: rgba(var(--cyan-rgb), 0.30); fill: none; }
.gp-radar__axis  { stroke: rgba(var(--blue-rgb), 0.22); }
.gp-radar__blip  { fill: var(--cyan-400); }

/* Central node */
.gp-radar__node       { fill: var(--blue); }
.gp-radar__node-ring  { fill: none; stroke: var(--cyan-400); stroke-width: 1.4; opacity: 0.9; }
.gp-radar__label {
  font-family: var(--font-body); font-size: 7px; font-weight: 600;
  fill: var(--text-invert); letter-spacing: 0.02em;
}

/* Sonar pings — concentric rings expand + fade outward from the node */
.gp-ping {
  transform-box: fill-box; transform-origin: center;
  transform: scale(0.18); opacity: 0;
  animation: gpRadarPing 3.6s var(--ease) infinite;
}
.gp-ping:nth-of-type(2) { animation-delay: 1.2s; }
.gp-ping:nth-of-type(3) { animation-delay: 2.4s; }
@keyframes gpRadarPing {
  0%   { transform: scale(0.18); opacity: 0; }
  12%  { opacity: 0.85; }
  100% { transform: scale(1); opacity: 0; }
}

/* Sweep — a soft gradient wedge rotates around the node like a radar beam */
.gp-sweep {
  transform-box: view-box; transform-origin: 75px 75px;
  animation: gpRadarSweep 4.4s linear infinite;
}
@keyframes gpRadarSweep { to { transform: rotate(360deg); } }

/* Blips gently fade in/out as the sweep "discovers" them */
.gp-radar__blip { animation: gpRadarBlip 3.6s var(--ease) infinite; }
.gp-radar__blip:nth-of-type(2) { animation-delay: 0.9s; }
.gp-radar__blip:nth-of-type(3) { animation-delay: 1.8s; }
.gp-radar__blip:nth-of-type(4) { animation-delay: 2.7s; }
@keyframes gpRadarBlip {
  0%, 60%, 100% { opacity: 0.35; }
  20%           { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .gp-ping { animation: none; transform: scale(1); opacity: 0.18; }
  .gp-ping:nth-of-type(1) { opacity: 0.30; }
  .gp-sweep { animation: none; }
  .gp-radar__blip { animation: none; opacity: 0.85; }
  .fsplit__icon { transition: none; }
  @media (hover: hover) {
    .fsplit__feat:hover .fsplit__icon { transform: none; }
  }
}

/* ===== v2.6 :: mosaic (Geometric motif band) ===== */
/* ============================================================
   MOSAIC -- Geometric motif-tile band
   ============================================================ */
.mosaic { padding-block: var(--section-y); position: relative; }
.mosaic--dark { background: var(--ink); color: var(--text-invert); }
.mosaic--dark::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(50% 80% at 12% 0%, rgba(var(--blue-rgb), 0.16), transparent 70%),
		radial-gradient(46% 78% at 92% 100%, rgba(var(--violet-rgb), 0.14), transparent 72%);
}
.mosaic > .container { position: relative; z-index: 1; }

/* --- Eyebrow --- */
/* Band variant: centered above the strip. */
.mosaic__eyebrow { display: flex; justify-content: center; align-items: center; margin-bottom: 1.4rem; color: var(--text-soft); }
/* Feature variant: left-aligned within the intro column. */
.mosaic__eyebrow--inline { justify-content: flex-start; margin-bottom: 0.9rem; }
.mosaic--dark .mosaic__eyebrow { color: var(--blue-400); }
/* Guarantee AA-contrast eyebrow on dark for the feature variant too. */
.mosaic--dark .eyebrow { color: var(--blue-400); }

/* --- Feature variant: intro beside the tile cluster --- */
.mosaic__layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.mosaic__intro { max-width: 46ch; }
.mosaic__title { margin-bottom: 0.85rem; }
.mosaic--dark .mosaic__title { color: #fff; }
.mosaic--dark .mosaic__title::before { background: var(--blue-400); }
.mosaic__text { color: var(--text-soft); font-size: var(--fs-lead); line-height: var(--lh-body); }
.mosaic--dark .mosaic__text { color: var(--text-invert-soft); }
.mosaic__cta { margin-top: 1.6rem; }

/* --- The quilt grid --- */
.mosaic__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(0.5rem, 0.3rem + 0.6vw, 0.85rem);
	border-radius: var(--radius-lg);
}
.mosaic--band .mosaic__grid { grid-template-columns: repeat(10, 1fr); }
.mosaic--feature .mosaic__grid { grid-template-columns: repeat(4, 1fr); }

/* --- Individual tile (always a square) --- */
.mosaic__tile {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius);
	overflow: hidden;
	isolation: isolate;
	/* per-tile accent -- set by the color modifiers below */
	--mc: var(--blue); --mc-rgb: var(--blue-rgb); --mc-400: var(--blue-400);
	transition: transform var(--transition), box-shadow var(--transition);
}
.mosaic__tile--blue    { --mc: var(--blue);    --mc-rgb: var(--blue-rgb);    --mc-400: var(--blue-400); }
.mosaic__tile--cyan    { --mc: var(--cyan);    --mc-rgb: var(--cyan-rgb);    --mc-400: var(--cyan-400); }
.mosaic__tile--violet  { --mc: var(--violet);  --mc-rgb: var(--violet-rgb);  --mc-400: var(--violet-400); }
.mosaic__tile--emerald { --mc: var(--emerald); --mc-rgb: var(--emerald-rgb); --mc-400: var(--emerald-400); }
.mosaic__tile--indigo  { --mc: var(--indigo);  --mc-rgb: var(--indigo-rgb);  --mc-400: var(--indigo-400); }

/* Fill treatments. Solid keeps a flat var(--mc) base as a fallback, then layers
   a subtle gradient where color-mix() is supported (the invalid declaration is
   simply dropped on older engines, leaving the flat color). */
.mosaic__tile--solid {
	color: #fff;
	background: var(--mc);
	background: linear-gradient(150deg, color-mix(in srgb, var(--mc) 86%, #fff 14%), var(--mc) 60%, color-mix(in srgb, var(--mc) 78%, #000 22%));
}
.mosaic__tile--tint    { background: rgba(var(--mc-rgb), 0.10); color: var(--mc); border: 1px solid rgba(var(--mc-rgb), 0.22); }
.mosaic__tile--outline { background: var(--bg); color: var(--mc); border: 1px solid var(--line); }
.mosaic--dark .mosaic__tile--tint    { background: rgba(var(--mc-rgb), 0.16); color: var(--mc-400); border-color: rgba(var(--mc-rgb), 0.32); }
.mosaic--dark .mosaic__tile--outline { background: rgba(255, 255, 255, 0.03); color: var(--mc-400); border-color: var(--line-dark); }

/* SVG motif sizing */
.mosaic__svg { width: 58%; height: 58%; display: block; }
.mosaic--band .mosaic__svg { width: 54%; height: 54%; }

/* Shimmer sweep overlay (animated once on reveal) */
.mosaic__sweep {
	position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
	transform: translateX(-130%);
	opacity: 0;
}
.mosaic__tile--tint .mosaic__sweep,
.mosaic__tile--outline .mosaic__sweep { background: linear-gradient(115deg, transparent 30%, rgba(var(--mc-rgb), 0.20) 50%, transparent 70%); }
.reveal.is-in .mosaic__sweep { animation: mosaic-sweep 1.5s var(--ease) forwards; animation-delay: 0.35s; }

/* Slow rotation for sunburst motifs */
.mosaic__spin { transform-origin: 50px 50px; }
.reveal.is-in .mosaic__tile[data-shape="sunburst"] .mosaic__spin { animation: mosaic-spin 26s linear infinite; }

/* Gentle pulse for star motifs */
.reveal.is-in .mosaic__tile[data-shape="star"] .mosaic__pulse { transform-origin: 50px 50px; animation: mosaic-pulse 5.5s var(--ease) infinite; }

/* Hover lift on tiles */
@media (hover: hover) {
	.mosaic__tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(var(--mc-rgb), 0.30); z-index: 3; }
}

@keyframes mosaic-sweep {
	0%   { transform: translateX(-130%); opacity: 1; }
	100% { transform: translateX(130%);  opacity: 0; }
}
@keyframes mosaic-spin { to { transform: rotate(360deg); } }
@keyframes mosaic-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(0.88); opacity: 0.8; }
}

/* --- Responsive --- */
@media (max-width: 980px) {
	.mosaic--feature .mosaic__layout { grid-template-columns: 1fr; gap: clamp(1.8rem, 1rem + 3vw, 2.6rem); }
	.mosaic--band .mosaic__grid { grid-template-columns: repeat(5, 1fr); }
	.mosaic--feature .mosaic__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
	.mosaic__grid,
	.mosaic--band .mosaic__grid,
	.mosaic--feature .mosaic__grid { grid-template-columns: repeat(3, 1fr); }
	.mosaic__eyebrow { margin-bottom: 1rem; }
}

/* --- Reduced motion: freeze all tile motion, show end state --- */
@media (prefers-reduced-motion: reduce) {
	.mosaic__sweep { display: none; }
	.reveal.is-in .mosaic__tile[data-shape="sunburst"] .mosaic__spin,
	.reveal.is-in .mosaic__tile[data-shape="star"] .mosaic__pulse { animation: none; transform: none; }
	.mosaic__tile { transition: none; }
	@media (hover: hover) {
		.mosaic__tile:hover { transform: none; }
	}
}

/* ===== v2.6 :: impact (Impact stat band (dark)) ===== */
/* ============================================================
   IMPACT STAT BAND (dark, full-bleed) — circled-icon big stats
   ============================================================ */
.section--impact{
	position:relative;
	overflow:hidden;
	isolation:isolate;
	background:var(--ink);
	color:var(--text-invert);
	padding-block:var(--section-y);
}
/* layered depth: spectrum wash top-left, faint grid, vignette */
.section--impact::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:0;
	background:
		radial-gradient(120% 80% at 12% -10%, rgba(var(--blue-rgb),.18), transparent 60%),
		radial-gradient(90% 70% at 100% 120%, rgba(var(--violet-rgb),.16), transparent 62%),
		linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 60%);
	pointer-events:none;
}
.section--impact::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:0;
	background-image:
		linear-gradient(var(--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size:64px 64px;
	-webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
	        mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
	pointer-events:none;
}
.impact__glow{
	position:absolute;
	z-index:0;
	top:-22%;
	left:50%;
	width:min(900px, 92%);
	height:60%;
	transform:translateX(-50%);
	background:var(--grad-spectrum);
	filter:blur(110px);
	opacity:.14;
	pointer-events:none;
}
.impact__inner{ position:relative; z-index:1; }

/* ---- Head: eyebrow + narrative ---- */
.impact__head{
	max-width:var(--container-narrow);
	margin-bottom:clamp(2.5rem,1.6rem + 3vw,4rem);
}
.impact__eyebrow{
	display:inline-block;
	margin:0 0 1rem;
	color:var(--cyan-400);
	background:linear-gradient(90deg,var(--blue-400),var(--cyan-400),var(--violet-400));
	-webkit-background-clip:text;
	        background-clip:text;
	-webkit-text-fill-color:transparent;
}
.impact__intro{
	margin:0;
	font-family:var(--font-head);
	font-size:var(--fs-lead);
	line-height:var(--lh-snug);
	letter-spacing:var(--tracking-head);
	color:var(--text-invert);
	text-wrap:balance;
}

/* ---- Stat grid ---- */
.impact__grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:clamp(1.5rem,1rem + 2vw,2.75rem);
}
/* 3-stat layouts read better at 3 columns */
.impact__grid:has(.impact__stat:nth-child(3):last-child){
	grid-template-columns:repeat(3,1fr);
}

.impact__stat{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	padding-top:.5rem;
	/* per-stat cool-spectrum accent: blue -> cyan -> violet -> emerald */
	--c:var(--blue);
	--c-rgb:var(--blue-rgb);
	--c-400:var(--blue-400);
}
.impact__stat:nth-child(4n+2){ --c:var(--cyan);    --c-rgb:var(--cyan-rgb);    --c-400:var(--cyan-400); }
.impact__stat:nth-child(4n+3){ --c:var(--violet);  --c-rgb:var(--violet-rgb);  --c-400:var(--violet-400); }
.impact__stat:nth-child(4n+4){ --c:var(--emerald); --c-rgb:var(--emerald-rgb); --c-400:var(--emerald-400); }

/* divider hairlines between stats on wide screens */
.impact__stat::before{
	content:"";
	position:absolute;
	top:8%;
	left:calc(-1 * clamp(.75rem,.5rem + 1vw,1.375rem));
	width:1px;
	height:84%;
	background:linear-gradient(180deg,transparent,var(--line-dark),transparent);
}
.impact__stat:first-child::before{ display:none; }

/* ---- Circled icon "minted token" ---- */
.impact__ring{
	position:relative;
	display:grid;
	place-items:center;
	width:78px;
	height:78px;
	margin-bottom:1.5rem;
	border-radius:var(--radius-pill);
	color:var(--c-400);
	background:
		radial-gradient(closest-side, rgba(var(--c-rgb),.16), rgba(var(--c-rgb),.04) 70%, transparent),
		var(--ink-3);
	border:1.5px solid rgba(var(--c-rgb),.55);
	box-shadow:
		0 0 0 1px rgba(255,255,255,.03) inset,
		0 8px 26px rgba(var(--c-rgb),.30),
		0 14px 40px rgba(0,0,0,.45);
	transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
/* soft accent halo behind the ring */
.impact__ring::after{
	content:"";
	position:absolute;
	inset:-38%;
	z-index:-1;
	border-radius:inherit;
	background:radial-gradient(closest-side, rgba(var(--c-rgb),.40), transparent 70%);
	filter:blur(14px);
	opacity:.55;
}
/* the orbiting tick on the ring edge */
.impact__ring-dot{
	position:absolute;
	top:-3px;
	left:50%;
	width:7px;
	height:7px;
	margin-left:-3.5px;
	border-radius:50%;
	background:var(--c-400);
	box-shadow:0 0 12px 1px rgba(var(--c-rgb),.9);
}
.impact__icon{ display:grid; place-items:center; }
.impact__icon .icon{ width:30px; height:30px; }

/* ---- The big number (count-up target) ---- */
.impact__num{
	display:block;
	font-family:var(--font-head);
	font-weight:600;
	font-size:clamp(2.75rem,1.9rem + 3vw,4rem);
	line-height:var(--lh-tight);
	letter-spacing:var(--tracking-head);
	color:var(--white);
	font-variant-numeric:tabular-nums;
	background:linear-gradient(180deg,#fff 0%, rgba(255,255,255,.72) 100%);
	-webkit-background-clip:text;
	        background-clip:text;
	-webkit-text-fill-color:transparent;
}
.impact__label{
	display:block;
	margin-top:.65rem;
	max-width:24ch;
	font-size:var(--fs-body);
	line-height:1.45;
	color:var(--text-invert-soft);
}
.impact__src{
	display:inline-flex;
	align-items:center;
	margin-top:.85rem;
	min-height:24px;
	font-family:var(--font-body);
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--grey-400);
	text-decoration:none;
	border-bottom:1px solid transparent;
	transition:color var(--transition), border-color var(--transition);
}
.impact__src::before{
	content:"";
	width:6px;
	height:6px;
	margin-right:.5rem;
	border-radius:50%;
	background:var(--c-400);
	flex:none;
}
.impact__src:hover,
.impact__src:focus-visible{
	color:var(--c-400);
	border-bottom-color:rgba(var(--c-rgb),.6);
}
.impact__src:focus-visible{
	outline:none;
	box-shadow:var(--ring);
	border-radius:var(--radius-sm);
}

/* ---- Hover: lift the minted token ---- */
@media (hover:hover){
	.impact__stat:hover .impact__ring{
		transform:translateY(-4px);
		border-color:rgba(var(--c-rgb),.9);
		box-shadow:
			0 0 0 1px rgba(255,255,255,.05) inset,
			0 14px 36px rgba(var(--c-rgb),.45),
			0 20px 50px rgba(0,0,0,.5);
	}
}

/* ---- Responsive ---- */
@media (max-width:900px){
	.impact__grid,
	.impact__grid:has(.impact__stat:nth-child(3):last-child){
		grid-template-columns:repeat(2,1fr);
		gap:clamp(2rem,1rem + 4vw,3rem);
	}
	/* dividers don't track 2-up rows cleanly; remove on reflow */
	.impact__stat::before{ display:none; }
}
@media (max-width:560px){
	.impact__grid,
	.impact__grid:has(.impact__stat:nth-child(3):last-child){
		grid-template-columns:1fr;
	}
	.impact__ring{ width:68px; height:68px; }
	.impact__label{ max-width:32ch; }
}

/* ---- Reduced motion: kill transitions/hover lift, keep numbers visible ---- */
@media (prefers-reduced-motion:reduce){
	.impact__ring,
	.impact__src{ transition:none; }
	.impact__stat:hover .impact__ring{ transform:none; }
	/* count-up is already skipped by main.js; numbers render final value */
}

/* ===== v2.6 :: foldcards (Corner-fold nav cards) ===== */
/* ============================================================
   Corner-fold nav cards  (.foldcards)
   Light white cards on the tinted page surface — each card
   carries a colored "dog-ear" folded-corner triangle that
   peels further on hover. Accent cycles across 5 cool hues.
   ============================================================ */
.section--foldcards { padding-block: var(--section-y); }

.foldcards__head {
  max-width: var(--container-narrow);
  margin: 0 0 clamp(2rem, 1rem + 3vw, 3.25rem);
}
.foldcards__head .section__intro { margin-bottom: 0; }

.foldcards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, .6rem + 1.4vw, 1.75rem);
}

/* ---- Card shell ---- */
.foldcards__card {
  /* per-card accent (defaults; overridden by :nth-child below) */
  --c: var(--blue);
  --c-rgb: var(--blue-rgb);
  --fold: 34px;          /* resting fold size  */
  --fold-hover: 56px;    /* peeled fold size   */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* reserve bottom-right room so the fold never overlaps the link */
  padding: clamp(1.6rem, 1.1rem + 1.3vw, 2.25rem);
  padding-right: clamp(2.6rem, 1.6rem + 2.2vw, 3.5rem);
  padding-bottom: clamp(2.6rem, 1.6rem + 2.2vw, 3.5rem);
  min-height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  text-decoration: none;
  overflow: hidden; /* clips the fold to the rounded corner */
  isolation: isolate;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* faint accent wash that strengthens on hover for depth */
.foldcards__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 100% 100%, rgba(var(--c-rgb), .07), transparent 60%);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
  z-index: 0;
}

/* ---- The dog-ear fold (bottom-right) ----
   Two layers: a soft cast shadow under the lifted corner, plus
   the folded triangle itself rendered as a clipped accent square. */
.foldcards__fold {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--fold);
  height: var(--fold);
  z-index: 2;
  pointer-events: none;
  transition: width var(--transition), height var(--transition);
}
/* cast shadow of the peeling corner */
.foldcards__fold::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--ink-rgb), .22);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  filter: blur(5px);
  transform: translate(-4px, -4px);
  transition: inherit;
}
/* the folded paper triangle in the accent color */
.foldcards__fold::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(var(--c-rgb), .82) 0%, var(--c) 60%, rgba(var(--ink-rgb), .55) 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  border-bottom-right-radius: var(--radius-lg);
}

/* ---- Title ---- */
.foldcards__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-head);
  color: var(--text);
}

/* ---- Accent underline rule beneath the title ---- */
.foldcards__rule {
  position: relative;
  z-index: 1;
  display: block;
  width: 44px;
  height: 4px;
  margin: 1rem 0 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--c);
  transition: width var(--transition);
}

/* ---- Body text ---- */
.foldcards__text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-soft);
}

/* ---- Arrow CTA ---- */
.foldcards__cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: 1.4rem;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--c);
}
.foldcards__arrow {
  flex: none;
  transition: transform var(--transition);
}

/* ---- Multi-accent cycle: blue -> cyan -> violet -> emerald -> indigo ---- */
.foldcards__card:nth-child(5n+1) { --c: var(--blue);    --c-rgb: var(--blue-rgb); }
.foldcards__card:nth-child(5n+2) { --c: var(--cyan);    --c-rgb: var(--cyan-rgb); }
.foldcards__card:nth-child(5n+3) { --c: var(--violet);  --c-rgb: var(--violet-rgb); }
.foldcards__card:nth-child(5n+4) { --c: var(--emerald); --c-rgb: var(--emerald-rgb); }
.foldcards__card:nth-child(5n+5) { --c: var(--indigo);  --c-rgb: var(--indigo-rgb); }

/* ---- Hover (pointer devices only): lift + peel + extend rule ---- */
@media (hover: hover) {
  .foldcards__card:not(.foldcards__card--static):hover,
  .foldcards__card:not(.foldcards__card--static):focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(var(--c-rgb), .35);
  }
  .foldcards__card:not(.foldcards__card--static):hover::before,
  .foldcards__card:not(.foldcards__card--static):focus-visible::before { opacity: 1; }
  .foldcards__card:not(.foldcards__card--static):hover .foldcards__fold,
  .foldcards__card:not(.foldcards__card--static):focus-visible .foldcards__fold {
    width: var(--fold-hover);
    height: var(--fold-hover);
  }
  .foldcards__card:not(.foldcards__card--static):hover .foldcards__rule,
  .foldcards__card:not(.foldcards__card--static):focus-visible .foldcards__rule { width: 72px; }
  .foldcards__card:not(.foldcards__card--static):hover .foldcards__arrow,
  .foldcards__card:not(.foldcards__card--static):focus-visible .foldcards__arrow { transform: translateX(4px); }
}

/* keyboard focus ring for the whole-card link */
.foldcards__card:focus-visible {
  outline: none;
  box-shadow: var(--ring), var(--shadow-md);
}

/* ---- Responsive ---- */
@media (max-width: 1040px) {
  .foldcards__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .foldcards__grid { grid-template-columns: 1fr; }
  .foldcards__card { min-height: 0; }
}

/* ---- Reduced motion: no lift / no peel, fold stays at rest ---- */
@media (prefers-reduced-motion: reduce) {
  .foldcards__card,
  .foldcards__fold,
  .foldcards__fold::before,
  .foldcards__rule,
  .foldcards__arrow,
  .foldcards__card::before { transition: none; }
  .foldcards__card:hover,
  .foldcards__card:focus-visible { transform: none; }
  .foldcards__card:hover .foldcards__fold,
  .foldcards__card:focus-visible .foldcards__fold {
    width: var(--fold);
    height: var(--fold);
  }
  .foldcards__card:hover .foldcards__rule,
  .foldcards__card:focus-visible .foldcards__rule { width: 44px; }
  .foldcards__card:hover .foldcards__arrow,
  .foldcards__card:focus-visible .foldcards__arrow { transform: none; }
}

/* ==========================================================================
   v2.8 — QA pass: spacing & structure fixes
   ========================================================================== */

/* feature_split: balance the visual against the (taller) feature column on desktop
   so the graphic isn't a short panel floating centered. Mobile keeps a fixed aspect. */
@media (min-width: 861px) {
  .fsplit { align-items: stretch; }
  .fsplit__visual { display: flex; }
  .fsplit__visual .graphic-panel { aspect-ratio: auto; width: 100%; height: 100%; min-height: 340px; }
}

/* feature_cards orphans (non-bento only): 4 cards => clean 2x2; a lone last orphan in a 3-col grid => centered */
.cards:not(.cards--bento):has(.card:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
.cards:not(.cards--bento) > .card:nth-child(3n+1):last-child { grid-column: 2; }

/* cycle ring: a touch more margin so curved arc labels never reach the card edge */
.cycle__ringwrap { max-width: 400px; }

/* impact stat tokens: keep single-word qualitative labels ("Independent", "Year-round")
   on one line so the four columns stay balanced */
.impact__num { white-space: nowrap; }
@media (max-width: 560px) { .impact__num { white-space: normal; } }