/* Product page — interior hero on the paper field, plain-language statement,
   sibling navigation carrying the morse indices. */
.product-hero {
	background: var(--paper);
	padding-top: calc(var(--header-h) + clamp(48px, 9vh, 110px));
}
.product-hero .eyebrow { color: var(--ash); margin-bottom: 28px; }
/* line breaks are hand-placed via .line spans — no max-width so they hold */
.product-hero .hx { font-size: clamp(2.8rem, 6vw, 6rem); }
.product-hero .sub { margin: 26px 0 34px; }

.product-plain { background: var(--paper); }
.plain-line {
	margin: 0;
	font-size: clamp(1.8rem, 3.4vw, 3.2rem);
	font-weight: 700;
	font-stretch: 87%;
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-transform: lowercase;
	max-width: 26ch;
	text-wrap: balance;
}
/* stacked variant: muted frame words, breathing words in ink — the eye
   lands on "expertise" and "built together"; hover breathes them apart. */
.plain-line--stack { max-width: none; }
.plain-line--stack .line { display: block; color: var(--ash); }
.plain-line--stack .exhale,
.plain-line--stack .inhale { color: var(--ink); white-space: nowrap; }

.sibling-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2px;
	margin-top: clamp(24px, 4vh, 40px);
}
.sibling {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	background: var(--bone);
	border-top: 2px solid var(--ink);
	color: var(--ink);
	text-decoration: none;
	transition: background 0.3s ease;
}
.sibling:hover, .sibling:focus-visible { background: var(--bone-hair); }
.sibling .idx { font-size: 10px; letter-spacing: 0.14em; color: var(--ash); }
.sibling-name { font-weight: 800; font-stretch: 87%; font-size: 19px; text-transform: lowercase; }
.sibling--one { background: var(--aqua); color: var(--ink); }
.sibling--one:hover, .sibling--one:focus-visible { background: #2c1a4e; }
.sibling--one .idx { color: var(--gold); }

/* --- platform capability groups --- */
.capability-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(20px, 3vw, 40px);
	margin-top: clamp(28px, 4vh, 48px);
}
.capability { border-top: 1px solid var(--bone-hair); padding-top: 16px; }
.capability .idx { font-size: 10px; letter-spacing: 0.14em; color: var(--ash); }
.capability-name { margin: 10px 0 8px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; font-stretch: 87%; text-transform: lowercase; }
.capability-copy { margin: 0; font-size: 14px; color: #252a26; }

/* light-surface variant of the delivery steps */
.delivery-steps--light .step { border-top-color: var(--bone-hair); }
.delivery-steps--light .step .idx { color: var(--ash); }
.delivery-steps--light .step-copy { color: #252a26; }

/* --- name story (company) --- */
.name-story-grid {
	display: grid;
	grid-template-columns: minmax(180px, 300px) 1fr;
	gap: clamp(28px, 5vw, 72px);
	align-items: start;
	margin-top: clamp(24px, 4vh, 40px);
}
.story-mark { width: 100%; fill: var(--ink); }
.name-story .sub { margin-bottom: 16px; }
@media (max-width: 700px) {
	.name-story-grid { grid-template-columns: 1fr; }
	.story-mark { max-width: 220px; }
}

/* --- customer stories --- */
.story-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2px;
}
.story-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 22px;
	background: var(--paper);
	border-top: 2px solid var(--gold);
	color: var(--ink);
	text-decoration: none;
	transition: background 0.3s ease;
}
.story-card:hover, .story-card:focus-visible { background: var(--bone-hair); }
.story-card .idx { font-size: 10px; letter-spacing: 0.14em; color: var(--ash); text-transform: uppercase; }
.story-card .card-name { font-size: clamp(19px, 1.8vw, 23px); }

.glance-list { margin: clamp(24px, 4vh, 40px) 0 0; }
.glance-row {
	display: grid;
	grid-template-columns: minmax(160px, 220px) 1fr;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(231, 231, 224, 0.18);
}
.glance-row dt { font-size: var(--fs-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--smoke); }
.glance-row dd { margin: 0; font-size: var(--fs-sub); }
@media (max-width: 560px) { .glance-row { grid-template-columns: 1fr; gap: 4px; } }

/* --- covers: generative brand graphics --- */
.cover { overflow: hidden; aspect-ratio: 16 / 9; background: var(--onyx); }
.cover svg, .cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cover--banner { aspect-ratio: 3 / 1; margin-bottom: clamp(28px, 5vh, 48px); }
.cover--feature { aspect-ratio: auto; height: 100%; min-height: 260px; }

/* --- resources hub + articles --- */
.feature-card {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	background: var(--paper);
	border-top: 2px solid var(--aqua);
	color: var(--ink);
	text-decoration: none;
	margin-bottom: 32px;
	transition: background 0.3s ease;
}
.feature-card:hover, .feature-card:focus-visible { background: var(--bone-hair); }
.feature-body { display: flex; flex-direction: column; gap: 14px; padding: 28px 26px; justify-content: center; }
.feature-title { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
@media (max-width: 760px) {
	.feature-card { grid-template-columns: 1fr; }
	.cover--feature { aspect-ratio: 16 / 9; min-height: 0; height: auto; }
}

.article-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
}
.article-card {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border-top: 2px solid var(--aqua);
	color: var(--ink);
	text-decoration: none;
	transition: background 0.3s ease;
}
.article-card:hover, .article-card:focus-visible { background: var(--bone-hair); }
.article-card-body { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 24px; flex: 1; }
.article-card .idx { font-size: 10px; letter-spacing: 0.14em; color: var(--ash); text-transform: uppercase; }

.article-title { font-size: clamp(2rem, 3.6vw, 3.4rem); max-width: 24ch; }
.article-hero .sub { margin-top: 20px; }

.entry--article { max-width: 68ch; padding-bottom: clamp(48px, 8vh, 96px); }
.entry--article h2 {
	margin: 1.8em 0 0.6em;
	font-size: clamp(1.4rem, 2vw, 1.9rem);
	font-weight: 800;
	font-stretch: 87%;
	text-transform: lowercase;
	letter-spacing: -0.01em;
}
.entry--article h3 { margin: 1.4em 0 0.5em; font-size: 1.1rem; font-weight: 700; }
.entry--article p, .entry--article li { font-size: 16px; line-height: 1.65; color: #252a26; }
.entry--article a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.entry--article blockquote {
	margin: 1.5em 0;
	padding-left: 20px;
	border-left: 3px solid var(--gold);
	font-weight: 500;
}

/* --- contact --- */
.contact-mail {
	display: inline-block;
	margin-top: 10px;
	font-size: clamp(1.6rem, 3vw, 2.6rem);
	font-weight: 700;
	font-stretch: 87%;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: 4px;
}