/* ==========================================================================
   Section: Work / Hero (copy + stat-strip + case-index panel).
   Ported from work-styles.css. Hero grid layout included so the page is
   self-contained (home section CSS does not load here).
   ========================================================================== */

.work-hero {
	padding: 150px 0 80px;
	background: linear-gradient(180deg, var(--bg-alt) 0, var(--bg-alt) 55%, var(--bg) 100%);
	overflow: hidden; position: relative;
}
.work-hero .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
.work-hero .hero-copy { display: flex; flex-direction: column; gap: 22px; }
.work-hero h1 { font-size: clamp(40px, 4.6vw, 60px); line-height: 1.05; max-width: 16ch; }
.work-hero h1 .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.work-hero .hero-lead { font-size: 18px; color: var(--body); max-width: 560px; line-height: 1.7; }

/* ---------- Hero stat strip ---------- */
.work-stat-strip {
	margin-top: 4px; padding-top: 26px; border-top: 1px solid var(--line);
	display: grid; grid-template-columns: repeat(2, 1fr); max-width: 480px;
}
.work-stat-strip .stat { display: flex; flex-direction: column; gap: 4px; padding-right: 28px; }
.work-stat-strip .stat + .stat { padding-left: 28px; border-left: 1px solid var(--line); }
.work-stat-strip .stat .v { font-family: var(--sans); font-weight: 700; font-size: 30px; color: var(--navy); line-height: 1; }
.work-stat-strip .stat .v .grad-text, .work-stat-strip .stat .v .u { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.work-stat-strip .stat .k { font-size: 13px; color: var(--muted); max-width: 20ch; }

/* ---------- Hero case-index panel (right column) ---------- */
.work-hero-aside { display: flex; justify-content: flex-end; }
.case-index-panel {
	width: 100%; max-width: 430px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	box-shadow: var(--shadow); overflow: hidden;
}
.cip-head {
	padding: 17px 26px; border-bottom: 1px solid var(--line-soft);
	font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
	display: flex; align-items: center; gap: 9px;
}
.cip-head::before { content:''; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 3px rgba(24,173,231,0.12); }
.case-nav {
	width: 100%; display: grid; grid-template-columns: 44px 1fr 16px; align-items: center; gap: 16px;
	padding: 22px 26px; border: none; border-top: 1px solid var(--line-soft); background: none;
	font: inherit; text-align: left; cursor: pointer; color: inherit;
	transition: background .22s ease, padding-left .22s ease;
}
.case-nav:first-of-type { border-top: none; }
.case-nav .cn-num {
	width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
	font-family: var(--sans); font-weight: 700; font-size: 16px; color: #fff; background: #C7CDD4;
	transition: background .25s ease, transform .25s ease;
}
.case-nav .cn-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.case-nav .cn-axis { font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); transition: color .22s ease; }
.case-nav .cn-desc { font-size: 14px; color: var(--body); line-height: 1.35; }
.case-nav .cn-arrow { width: 16px; height: 16px; color: var(--cyan); opacity: 0; transform: translateX(-6px); transition: opacity .22s ease, transform .22s ease; }
.case-nav:hover { background: var(--bg-alt); padding-left: 32px; }
.case-nav:hover .cn-arrow { opacity: 1; transform: none; }
.case-nav.active { background: var(--grad-soft); }
.case-nav.active .cn-num { background: var(--grad); transform: scale(1.04); }
.case-nav.active .cn-axis { color: var(--cyan); }
.case-nav.active .cn-desc { color: var(--navy); }
.case-nav.active .cn-arrow { opacity: 1; transform: none; }

@media (max-width: 1080px) {
	.work-hero .hero-grid { grid-template-columns: 1fr; gap: 40px; }
	.work-hero-aside { justify-content: flex-start; }
	.case-index-panel { max-width: none; }
}
@media (max-width: 820px) {
	.work-stat-strip .stat .v { font-size: 24px; }
}
@media (max-width: 560px) {
	.work-stat-strip .stat { padding-right: 16px; }
	.work-stat-strip .stat + .stat { padding-left: 16px; }
	.work-stat-strip .stat .k { font-size: 12.5px; }
}