/* Homepage chrome from ucena-full-updated.html.
   Scoped to homepage section ids so service-page .svc / .step rules stay put. */

#dna,
#system,
#services,
#work,
#who,
#growth.process {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

#dna h2,
#system h2,
#services h2,
#work h2,
#who h2,
#growth.process h2 {
	text-wrap: unset;
}

/* ============ DNA ============ */
#dna.dna {
	background: var(--paper);
	color: var(--ink);
	padding: 120px var(--pad-x);
	position: relative;
}
#dna .dna-grid { align-items: start; }
#dna .dna-left {
	grid-column: 1 / 6;
	position: sticky;
	top: 130px;
	align-self: start;
}
#dna .dna-left .label {
	display: block;
	color: var(--red-text-safe);
	margin-bottom: 22px;
}
#dna .dna-left h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(42px, 4vw, 58px);
	line-height: 1.04;
	letter-spacing: 0.01em;
	color: var(--ink);
	max-width: 100%;
	margin: 0;
	overflow-wrap: break-word;
	word-break: normal;
}
#dna .dna-helix {
	margin-top: clamp(28px, 3.2vw, 40px);
	width: 100%;
	max-width: 420px;
}
#dna .dna-helix-canvas {
	width: 100%;
	height: min(64vh, 560px);
	display: block;
}
#dna .dna-principles { grid-column: 7 / 13; position: relative; }
#dna .dna-list { list-style: none; margin: 0; padding: 0; }
#dna .dna-item {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 70px 0;
	border-bottom: 1px solid var(--line-l);
	cursor: default;
}
#dna .dna-item:first-child { border-top: 1px solid var(--line-l); }
#dna .dna-num {
	font-style: normal;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.05em;
	color: var(--grey-l);
	flex-shrink: 0;
	transition: color 0.5s ease;
}
#dna .dna-item.active .dna-num { color: var(--red-text-safe); }
#dna .dna-item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s var(--ease-inout);
}
#dna .dna-item.active::after { transform: scaleX(1); }
#dna .dna-item span {
	font-size: clamp(19px, 1.5vw, 25px);
	font-weight: 500;
	color: var(--grey-l);
	transition: color 0.5s ease;
	line-height: 1.3;
}
#dna .dna-item.active span { color: var(--ink); }

/* ============ SYSTEM ============ */
/* About one viewport of scroll per stage, so a normal flick does not skip a text stage
   (220vh gave each stage ~320px). */
#system.system {
	height: 400vh;
	background: var(--ink2);
	color: var(--paper);
	position: relative;
	padding: 0;
}
#system .system-stick {
	position: sticky;
	top: 0;
	height: 100svh;
	padding: 0 var(--pad-x);
	display: flex;
	align-items: center;
	overflow: hidden;
}
#system .system-grid {
	width: 100%;
	max-width: 1560px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: clamp(16px, 1.8vw, 28px);
	align-items: center;
}
#system .sys-copy-wrap {
	grid-column: 1 / 6;
	display: flex;
	align-items: stretch;
	gap: 38px;
}
#system .sys-copy {
	position: relative;
	min-height: 470px;
	overflow: hidden;
	flex: 1;
	min-width: 0;
}
#system .sys-dots {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 14px;
	margin-left: clamp(-28px, -2.2vw, -14px);
}
#system .sys-dots .tick {
	width: 2px;
	height: 56px;
	background: rgba(235, 235, 235, 0.2);
	transition: background 0.5s ease, height 0.5s ease;
}
#system[data-stage="1"] .sys-dots .tick:nth-child(1),
#system[data-stage="2"] .sys-dots .tick:nth-child(2),
#system[data-stage="3"] .sys-dots .tick:nth-child(3) {
	background: var(--red);
	height: 96px;
}
#system .sys-state {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transform: translateY(100%);
	transition: transform 0.8s var(--ease-inout);
	pointer-events: none;
}
#system .sys-state .label { display: block; margin: 0 0 26px; color: var(--red-on-dark); }
#system .sys-state h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(40px, 3.7vw, 64px);
	line-height: 0.98;
	letter-spacing: 0.005em;
	color: var(--paper);
	max-width: 13ch;
	margin: 0;
	overflow-wrap: break-word;
	word-break: normal;
}
#system .sys-state p {
	color: var(--grey-d);
	margin: 26px 0 0;
	max-width: 36ch;
	font-size: clamp(17px, 1.3vw, 20px);
	line-height: 1.45;
}
#system[data-stage="1"] .sys-state--1,
#system[data-stage="2"] .sys-state--2,
#system[data-stage="3"] .sys-state--3 {
	transform: translateY(0);
	pointer-events: auto;
}
#system[data-stage="2"] .sys-state--1,
#system[data-stage="3"] .sys-state--1,
#system[data-stage="3"] .sys-state--2 {
	transform: translateY(-100%);
}
#system .sys-visual { grid-column: 6 / 13; }
#system .sys-stage-vis { position: relative; width: 100%; height: min(66vh, 600px); }
#system .choreo-svg { width: 100%; height: 100%; overflow: visible; }
#system .choreo-svg .g-m,
#system .choreo-svg .g-p,
#system .choreo-svg .g-g,
#system .choreo-svg .m-system {
	transform-box: view-box;
	transform-origin: 0 0;
	transition: transform 1.3s var(--ease-inout);
}
#system .choreo-svg .m-rect { transition: opacity 0.8s ease; }
#system .choreo-svg .s { fill: none; stroke: #9aa1a9; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#system .choreo-svg .s2 { fill: none; stroke: rgba(154, 161, 169, 0.55); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
#system .choreo-svg .dash { stroke-dasharray: 3 5; }
#system .choreo-svg .dot { fill: #9aa1a9; stroke: none; }
#system .choreo-svg .red { fill: none; stroke: #ef493f; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#system .choreo-svg .reddot { fill: #ef493f; stroke: none; }
#system .choreo-svg .faint { fill: none; stroke: rgba(154, 161, 169, 0.45); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
#system .choreo-svg [class] { vector-effect: non-scaling-stroke; }
#system .choreo-svg .g-m [class],
#system .choreo-svg .g-p [class],
#system .choreo-svg .g-g [class],
#system .choreo-svg .m-rect rect,
#system .choreo-svg .m-rect line,
#system .choreo-svg .m-blocks [class] {
	stroke-dasharray: var(--len);
	stroke-dashoffset: var(--len);
}
#system .choreo-svg .g-m [class*="dot"],
#system .choreo-svg .g-p [class*="dot"],
#system .choreo-svg .g-g [class*="dot"],
#system .choreo-svg .m-blocks [class*="dot"],
#system .choreo-svg [class*="reddot"] {
	stroke-dasharray: none;
	stroke-dashoffset: 0;
}
#system .choreo-svg.d1 .g-m [class],
#system .choreo-svg.d1 .g-p [class],
#system .choreo-svg.d1 .g-g [class] {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.1s var(--ease-inout);
}
#system .choreo-svg.d2 .m-rect rect,
#system .choreo-svg.d2 .m-rect line {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1s var(--ease-inout);
}
#system .choreo-svg .m-blocks .cblock { opacity: 0; }
#system .choreo-svg.d3 .m-blocks [class] {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.9s var(--ease-inout);
}
#system .choreo-svg .g-m { transform: translate(110px, 77.4px) scale(0.46); }
#system .choreo-svg .g-p { transform: translate(620px, 232.8px) scale(0.46); }
#system .choreo-svg .g-g { transform: translate(130px, 431.2px) scale(0.46); }
#system .choreo-svg .m-rect { opacity: 0; }
#system .choreo-svg .m-system { transform: translate(0, 0) scale(1); }
#system[data-stage="2"] .g-m { transform: translate(230px, 291.8px) scale(0.22); }
#system[data-stage="2"] .g-p { transform: translate(490px, 289.6px) scale(0.22); }
#system[data-stage="2"] .g-g { transform: translate(750px, 298.4px) scale(0.22); }
#system[data-stage="2"] .m-rect { opacity: 1; }
#system[data-stage="2"] .m-system { transform: translate(0, 0) scale(1); }
#system[data-stage="3"] .g-m { transform: translate(230px, 291.8px) scale(0.22); }
#system[data-stage="3"] .g-p { transform: translate(490px, 289.6px) scale(0.22); }
#system[data-stage="3"] .g-g { transform: translate(750px, 298.4px) scale(0.22); }
#system[data-stage="3"] .m-rect { opacity: 1; }
#system[data-stage="3"] .m-system { transform: translate(16.8px, 430.8px) scale(0.2533); }
#system .system-m-stick { display: none; }

/* ============ SERVICES ============ */
#services.services {
	background: var(--ink);
	color: var(--paper);
	padding: 120px var(--pad-x) 140px;
}
#services .sec-head .label { display: block; margin-bottom: 22px; color: var(--red-on-dark); }
#services h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(40px, 3.7vw, 64px);
	line-height: 0.98;
	letter-spacing: 0.005em;
	color: var(--paper);
	max-width: 20ch;
	margin: 0 0 clamp(80px, 7vw, 100px);
}
#services .svc a {
	align-items: center;
	text-decoration: none;
	color: inherit;
}
#services .svc-title { color: var(--paper); }
#services .svc:hover .svc-title { color: var(--ink); }
#services .svc:hover .svc-title small { color: rgba(20, 20, 20, .7); }
#services .svc:hover .svc-desc { color: rgba(20, 20, 20, .8); }
#services .svc-arrow { fill: currentColor; }

/* ============ WORK ============ */
#work.work {
	background: var(--ink2);
	color: var(--paper);
	padding: clamp(110px, 12vw, 180px) var(--pad-x);
}
#work h2 {
	max-width: 16ch;
	margin: 0;
	color: var(--paper);
	font-size: clamp(40px, 3.7vw, 64px);
	line-height: 0.98;
}
#work .work-note {
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--grey-d);
	letter-spacing: 0.02em;
}
#work .work-more {
	margin-top: 2px;
	color: var(--paper);
	text-decoration: none;
}
#work .cases {
	margin-top: clamp(80px, 6vw, 100px);
	display: flex;
	flex-direction: column;
	gap: clamp(72px, 9vw, 140px);
}
#work .case { align-items: end; row-gap: 28px; }
#work .case--1 { align-items: center; }
#work .case--2 { align-items: start; }
#work .ph {
	background: var(--slate-2);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
#work .ph[data-rv] {
	clip-path: inset(0 0 0 100%);
	transition: clip-path 1.05s var(--ease-inout);
}
#work .case--2 .ph[data-rv] { clip-path: inset(0 100% 0 0); }
#work .case--3 .ph[data-rv] { clip-path: inset(0 0 100% 0); }
#work .ph[data-rv].in { clip-path: inset(0 0 0 0); }
#work .ph img,
#work .ph video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	transition: transform 1.2s var(--ease-out);
}
#work .ph.in img,
#work .ph.in video { transform: scale(1); }
#work .case--1 .ph { grid-column: 1 / 9; aspect-ratio: 16 / 10; }
#work .case--1 .case-body { grid-column: 9 / 13; }
#work .case--2 .case-body { grid-column: 1 / 5; order: 1; }
#work .case--2 .ph { grid-column: 5 / 13; aspect-ratio: 1.92; order: 2; }
#work .case--3 { row-gap: 36px; }
#work .case--3 .case-body { grid-column: 2 / 9; order: 1; }
#work .case--3 .ph { grid-column: 2 / 13; aspect-ratio: 21 / 9; order: 2; }
#work .case-cats { display: flex; gap: 18px; margin-bottom: 14px; }
#work .case-cats span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--red-on-dark);
}
#work .case-name,
#work a.case-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(20px, 1.7vw, 26px);
	letter-spacing: 0.005em;
	color: var(--paper);
	display: block;
	margin-bottom: 20px;
	text-decoration: none;
}
#work .case-desc {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: clamp(18px, 1.4vw, 22px);
	line-height: 1.4;
	max-width: 34ch;
	color: var(--paper);
	margin: 0;
}
#work .case-stat {
	display: inline-block;
	margin-top: 16px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.03em;
	color: var(--red-on-dark);
}

/* ============ WHO ============ */
#who.who {
	background: var(--ink2);
	color: var(--paper);
	padding: clamp(100px, 11vw, 150px) var(--pad-x);
}
#who .who-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: clamp(32px, 4vw, 64px);
}
#who .who-head .label { display: block; color: var(--red); margin-bottom: 24px; }
#who .who-head h2 {
	max-width: 20ch;
	margin: 0;
	color: var(--paper);
	font-size: clamp(38px, 3.6vw, 58px);
}
#who .who-note { flex: 0 0 auto; max-width: 52ch; text-align: right; }
#who .who-note p { color: var(--grey-d); font-size: 13.5px; line-height: 1.5; margin: 0; }
#who .who-mosaic { margin-top: clamp(56px, 6.4vw, 84px); }
#who .who-band {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: clamp(28px, 3.2vw, 44px);
	align-items: start;
}
#who .m-item { display: flex; flex-direction: column; min-height: 0; }
#who .m-visual { position: relative; overflow: hidden; background: var(--ink); }
#who .m-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.02);
	transition: transform 1s var(--ease-inout), opacity 0.5s ease;
}
#who .m-item.in .m-img { transform: scale(1); }
#who .who-band:hover .m-item:not(:hover) .m-img { opacity: 0.9; }
#who .m-item:hover .m-img { transition: transform 0.5s var(--ease-out); transform: scale(1.015); }
#who .m-cap {
	margin: 20px 0 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(19px, 1.6vw, 24px);
	line-height: 1.28;
	color: var(--grey-d);
	transition: color 0.4s ease;
	max-width: 34ch;
}
#who .m-item:hover .m-cap { color: var(--red); }
#who .m-startups { grid-column: 1 / 6; }
#who .m-startups .m-visual {
	height: clamp(330px, 32vw, 380px);
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.05s var(--ease-inout);
}
#who .m-startups.in .m-visual { clip-path: inset(0 0 0 0); }
#who .m-scaling { grid-column: 6 / 13; }
#who .m-scaling .m-visual {
	height: clamp(460px, 40vw, 520px);
	clip-path: inset(0 0 0 100%);
	transition: clip-path 1.05s var(--ease-inout) 0.1s;
}
#who .m-scaling.in .m-visual { clip-path: inset(0 0 0 0); }
#who .who-band + .who-band { margin-top: clamp(100px, 10vw, 140px); }
#who .m-established { grid-column: 1 / 8; }
#who .m-established .m-visual {
	height: clamp(460px, 40vw, 520px);
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1.05s var(--ease-inout) 0.2s;
}
#who .m-established.in .m-visual { clip-path: inset(0 0 0 0); }
#who .m-multicultural { grid-column: 8 / 13; }
#who .m-multicultural .m-visual {
	height: clamp(330px, 32vw, 380px);
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1.05s var(--ease-inout) 0.3s;
}
#who .m-multicultural.in .m-visual { clip-path: inset(0 0 0 0); }

/* ============ PROCESS (homepage) mobile hud ============ */
#growth.process {
	background: var(--ink2);
	color: var(--paper);
}
#growth .process-note {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(20px, 1.9vw, 28px);
	color: var(--grey-d);
	line-height: 1.3;
	margin: 0;
}
#growth .process-note .accent { color: var(--red-on-dark); font-weight: 700; }
#growth .process-note-wrap { margin-top: clamp(16px, 2vw, 28px); text-align: right; }
#growth h2 { margin-bottom: 0; color: var(--paper); }

@media (max-width: 1024px) {
	#dna .dna-left { grid-column: 1 / 13; position: static; top: auto; margin-bottom: 48px; }
	#dna .dna-helix { display: none; }
	#dna .dna-principles { grid-column: 1 / 13; padding-left: 0; }
	#system .sys-copy-wrap { grid-column: 1 / 6; }
	#system .sys-visual { grid-column: 6 / 13; }
	#system .sys-state h2 { font-size: clamp(32px, 3.8vw, 64px); }
	#services .svc a { grid-template-columns: repeat(6, 1fr); }
	#services .svc-num { grid-column: 1 / 2; }
	#services .svc-title { grid-column: 1 / 6; grid-row: 2; margin-top: 10px; }
	#services .svc-desc { grid-column: 1 / 6; grid-row: 3; margin-top: 16px; margin-left: 0; }
	#services .svc-arrow { grid-column: 6 / 7; grid-row: 1; justify-self: end; }
	#work .case--1 .ph,
	#work .case--2 .ph,
	#work .case--3 .ph { grid-column: 1 / 13; order: 1; }
	#work .case--1 .case-body,
	#work .case--2 .case-body,
	#work .case--3 .case-body { grid-column: 1 / 13; order: 2; }
	#who .who-head h2 { max-width: 100%; }
	#who .who-top { flex-direction: column; gap: 32px; }
	#who .who-note { text-align: left; max-width: 100%; }
}

@media (max-width: 767px) {
	#system.system { height: 340vh; }
	#system .system-stick { display: none; }
	#system .system-m-stick {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: sticky;
		top: 0;
		height: 100svh;
		padding: 0 22px;
	}
	#system .system-m-copy { position: relative; min-height: 270px; overflow: hidden; }
	#system .system-m-copy .sys-state { justify-content: flex-start; visibility: hidden; }
	#system[data-stage="1"] .system-m-copy .sys-state--1,
	#system[data-stage="2"] .system-m-copy .sys-state--2,
	#system[data-stage="3"] .system-m-copy .sys-state--3 { visibility: visible; }
	#system .system-m-copy .sys-state h2 {
		font-size: clamp(32px, 9vw, 42px);
		line-height: 1.05;
		max-width: none;
	}
	#system .system-m-copy .sys-state p { font-size: 16px; margin-top: 16px; max-width: 34ch; }
	#system .system-m-copy .sys-state .label { margin-bottom: 14px; }
	#system .system-m-visual { margin-top: 32px; }
	#system .system-m-visual .choreo-svg {
		width: 100%;
		height: auto;
		max-width: 340px;
		aspect-ratio: 1200 / 720;
		overflow: visible;
		display: block;
	}
	#system .system-m-dots { flex-direction: row; margin: 24px 0 0; justify-content: flex-start; }
	#system .system-m-dots .tick {
		width: 32px;
		height: 2px;
		background: rgba(235, 235, 235, 0.2);
		transition: background 0.5s ease, width 0.5s ease;
	}
	#system[data-stage="1"] .system-m-dots .tick:nth-child(1),
	#system[data-stage="2"] .system-m-dots .tick:nth-child(2),
	#system[data-stage="3"] .system-m-dots .tick:nth-child(3) {
		background: var(--red);
		height: 2px;
		width: 56px;
	}
	#services.services,
	#growth.process { padding: 88px 22px; }
	#work.work { padding: 96px 22px; }
	#dna.dna { padding: 84px 22px; }
	#dna .dna-left h2 { font-size: clamp(32px, 8.6vw, 40px); }
	#dna .dna-item { padding: 40px 0; }
	#who.who { padding: 92px 22px; }
	#who .who-band { grid-template-columns: 1fr; row-gap: 32px; }
	#who .who-band + .who-band { margin-top: 56px; }
	#who .who-band .m-item { grid-column: 1 / 2; }
	#who .m-startups .m-visual,
	#who .m-multicultural .m-visual { height: auto; aspect-ratio: 4 / 3; }
	#who .m-scaling .m-visual,
	#who .m-established .m-visual { height: auto; aspect-ratio: 16 / 10; }
	#services .svc-title {
		grid-column: 1 / 7;
		font-size: clamp(30px, 8.6vw, 38px);
		white-space: normal;
	}
	#work .ph { margin-inline: -22px; width: calc(100% + 44px); }
	#work .case--3 .ph { aspect-ratio: 16 / 10; }
	#growth .steps-wrap { height: auto; }
	#growth .steps-pin {
		position: static;
		height: auto;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 14px;
		scroll-snap-type: x mandatory;
	}
	#growth .steps { transform: none !important; }
	#growth .step { scroll-snap-align: start; }
	#growth .steps-mobile-hud {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 6px;
	}
	#growth .steps-progress {
		font-family: var(--font-body);
		font-weight: 600;
		font-size: 12px;
		letter-spacing: 0.05em;
		color: var(--grey-d);
	}
	#growth .steps-progress em { font-style: normal; color: var(--red-on-dark); }
	#growth .steps-swipe-cue {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.05em;
		color: var(--grey-d);
		transition: opacity 0.5s ease;
	}
	#growth .steps-swipe-cue .uc { width: 14px; height: 14px; fill: currentColor; }
	#growth .steps-swipe-cue.hidden { opacity: 0; }
	#growth .process-note-wrap { margin-top: 56px; }
	#growth .steps-line-fill { display: none; }
	#work .sec-head--split { flex-direction: column; align-items: flex-start; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	#dna .dna-helix-canvas { display: none; }
	#system .sys-state { transition: none; }
	#work .ph[data-rv] { clip-path: inset(0 0 0 0) !important; }
	#work .ph img,
	#work .ph video { transform: none !important; }
	#who .m-visual { clip-path: inset(0 0 0 0) !important; }
	#who .m-img { transform: none !important; opacity: 1 !important; }
}