/* ==========================================================================
   Markital "Do Not Touch" — the story below the game
   ========================================================================== */

/* --- Unlock scrolling once the game is finished --- */
html.dnt-unlocked,
html.dnt-unlocked .dnt-body {
	overflow: visible;
	height: auto;
	overscroll-behavior: auto;
	scroll-behavior: smooth;
}
html.dnt-unlocked .dnt {
	position: relative;
	height: 100svh;
	touch-action: auto;
	z-index: 1;
}
html.dnt-unlocked .dnt-grain { position: fixed; }
html:not(.dnt-unlocked) .st,
html:not(.dnt-unlocked) .st-nav,
html:not(.dnt-unlocked) .st-cue { display: none; }
@media (prefers-reduced-motion: reduce) {
	html.dnt-unlocked { scroll-behavior: auto; }
}

.st {
	position: relative;
	z-index: 2;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	overflow: clip;
}
.st * { box-sizing: border-box; }
.dnt-has-cursor .st,
.dnt-has-cursor .st a,
.dnt-has-cursor .st button { cursor: none; }

.st-wrap {
	width: min(1280px, 100% - clamp(32px, 8vw, 140px));
	margin-inline: auto;
}
.st-sec {
	position: relative;
	padding: clamp(90px, 16vh, 190px) 0;
}
.st-sec[id] { scroll-margin-top: 84px; }
.st em { font-style: normal; color: var(--accent); }
.st .st-accent { color: var(--accent); }
.st .st-link {
	color: var(--ink);
	background-image: linear-gradient(var(--accent), var(--accent));
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: color .25s;
}
.st .st-link:hover { color: var(--accent); }

.st .st-huge {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.4rem, 7.4vw, 7rem);
	line-height: .94;
	letter-spacing: -.055em;
	text-transform: uppercase;
}
.st .st-mid {
	margin: 0;
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.5rem, 3.4vw, 3rem);
	line-height: 1.08;
	letter-spacing: -.035em;
}
.st .st-lead {
	font-size: clamp(1.05rem, 1.7vw, 1.45rem);
	line-height: 1.5;
	color: var(--ink);
	max-width: 46ch;
}
.st p { color: var(--muted); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.6; }
.st .st-kicker {
	margin: 0 0 22px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--accent);
}

/* Character images */
.st .rk {
	display: block;
	width: auto;
	max-width: none;
	filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .6));
	user-select: none;
	-webkit-user-drag: none;
}

/* Scroll reveal */
[data-rise] {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1);
	transition-delay: var(--d, 0ms);
}
[data-rise].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	[data-rise] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.st-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px clamp(16px, 4vw, 44px);
	transform: translateY(-110%);
	transition: transform .7s cubic-bezier(.2, .8, .2, 1), background-color .4s, border-color .4s, backdrop-filter .4s;
	border-bottom: 1px solid transparent;
}
.admin-bar .st-nav { top: 32px; }
.st-nav.is-on { transform: none; }
.st-nav.is-stuck {
	background: rgba(7, 10, 8, .72);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom-color: var(--line);
}
.st-nav__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.st-nav__brand img { width: 30px; height: auto; }
.st-nav__brand span {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.st-nav__links { display: flex; gap: clamp(14px, 2.4vw, 34px); }
.st-nav__links a {
	position: relative;
	color: var(--muted);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: color .25s;
}
.st-nav__links a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.st-nav__links a:hover { color: var(--ink); }
.st-nav__links a:hover::after { transform: none; }
.st-nav__cta {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 22px;
	border-radius: 999px;
	background: var(--accent);
	color: #0A0F0B;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .25s, transform .25s;
}
.st-nav__cta:hover { background: #8FEA45; }
@media (max-width: 860px) {
	.st-nav__links { display: none; }
}

/* Scroll cue after the reveal */
.st-cue {
	position: fixed;
	left: 50%;
	bottom: 26px;
	z-index: 60;
	transform: translateX(-50%) translateY(20px);
	display: grid;
	justify-items: center;
	gap: 8px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .6s ease, transform .6s ease;
}
.st-cue.is-on { opacity: 1; transform: translateX(-50%); }
.st-cue span {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--muted);
}
.st-cue i {
	width: 1px;
	height: 42px;
	background: linear-gradient(180deg, var(--accent), transparent);
	animation: st-cue 1.8s ease-in-out infinite;
}
@keyframes st-cue {
	0%, 100% { transform: scaleY(.4); opacity: .4; transform-origin: 50% 0; }
	50% { transform: scaleY(1); opacity: 1; transform-origin: 50% 0; }
}

/* ==========================================================================
   2. Bridge
   ========================================================================== */
.st-bridge { padding-top: clamp(80px, 14vh, 150px); overflow: hidden; }
.st-bridge .st-wrap { position: relative; }
.st-bridge .st-huge,
.st-bridge .st-kicker { position: relative; z-index: 2; max-width: 68%; }
.st .st-bridge__then {
	margin-top: 28px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.2rem, 2.6vw, 2.2rem);
	letter-spacing: -.03em;
	color: var(--ink);
}
.st-bridge__rk {
	position: absolute;
	right: -3vw;
	bottom: -16vh;
	z-index: 1;
	display: grid;
	justify-items: end;
}
.st-bridge__rk .rk { height: clamp(200px, 40svh, 400px); transform: rotate(-4deg); }
@media (max-width: 860px) {
	.st-bridge .st-huge,
	.st-bridge .st-kicker { max-width: none; }
	.st-bridge__rk { position: static; justify-items: center; margin: 26px auto -6vh; }
	.st-bridge__rk .rk { height: auto; width: min(86vw, 330px); transform: none; }
}

/* ==========================================================================
   3. The problem
   ========================================================================== */
.st-problem { padding: 0; height: 230svh; }
.st-problem__in { position: sticky; top: 0; z-index: 2; height: 100svh; display: grid; align-content: center; text-align: center; }
.st-noise {
	position: sticky;
	top: 0;
	height: 100svh;
	margin-bottom: -100svh;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.st-noise__w {
	position: absolute;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(.9rem, 2.2vw, 2rem);
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: rgba(242, 246, 241, .16);
	white-space: nowrap;
	will-change: transform;
}
.st-problem.is-calm .st-noise__w { opacity: 0; transition: opacity .7s ease; }
.st-problem__rk {
	height: clamp(170px, 42svh, 360px);
	margin: clamp(20px, 4vh, 48px) auto 0;
	display: grid;
	place-items: center;
	transition: opacity .6s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
}
.st-problem__rk .rk { height: 100%; width: auto; }
.st-problem.is-calm .st-problem__rk { opacity: 0; transform: translateY(20px) scale(.94); }
.st-problem__calm {
	position: absolute;
	inset: auto 0 auto 0;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	gap: 18px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .8s ease;
}
.st-problem.is-calm .st-problem__calm { opacity: 1; }
.st-problem.is-calm > .st-wrap > .st-huge { opacity: 0; transition: opacity .6s ease; }

/* ==========================================================================
   4. Philosophy
   ========================================================================== */
.st-philo { text-align: center; overflow: hidden; }
.st-philo__b { margin-top: .18em; }
.st-philo__rk {
	position: relative;
	height: clamp(200px, 44svh, 420px);
	width: fit-content;
	margin: clamp(26px, 5vh, 60px) auto clamp(20px, 4vh, 40px);
	display: grid;
	place-items: end center;
}
.st-philo__rk .rk { height: 100%; width: auto; position: relative; z-index: 2; }
.st-philo__ring {
	position: absolute;
	left: 50%;
	bottom: 6%;
	width: 128%;
	aspect-ratio: 1;
	translate: -50% 0;
	border: 1px solid rgba(124, 224, 42, .3);
	border-radius: 50%;
	animation: st-ring 6s linear infinite;
}
.st-philo__ring--2 { width: 168%; border-color: rgba(124, 224, 42, .14); animation-duration: 9s; animation-direction: reverse; }
@keyframes st-ring {
	0% { transform: rotate(0deg) scale(1); }
	50% { transform: rotate(180deg) scale(1.04); }
	100% { transform: rotate(360deg) scale(1); }
}
.st-pillars {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(12px, 2.6vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.st-pillars li {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(.95rem, 2.1vw, 1.8rem);
	letter-spacing: -.02em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease var(--d, 0ms), transform .8s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms), color .3s;
}
.st-pillars li.is-in { opacity: 1; transform: none; }
.st-pillars li:hover { color: var(--accent); }

/* ==========================================================================
   5. The system
   ========================================================================== */
.st-system { padding: 0; }
.st-system__pin { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; }
.st-system__scroll { height: 240svh; }
.st-system__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 5vw, 80px); align-items: center; }
.st-system__left { position: relative; padding-left: 34px; }
.st-system__list { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(10px, 2.2vh, 26px); }
.st-system__list li { position: relative; opacity: .32; transition: opacity .45s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.st-system__list li.is-on { opacity: 1; transform: translateX(6px); }
.st-system__dot {
	position: absolute;
	left: -34px;
	top: .55em;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 1px solid var(--accent);
	background: var(--bg);
	transition: background-color .35s, box-shadow .35s, transform .35s;
}
.st-system__list li.is-on .st-system__dot { background: var(--accent); box-shadow: 0 0 0 6px rgba(124, 224, 42, .18); transform: scale(1.1); }
.st-system__label {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.4rem, 3.6vw, 3.1rem);
	line-height: 1;
	letter-spacing: -.045em;
	text-transform: uppercase;
}
.st-system__note {
	display: block;
	margin-top: 6px;
	max-width: 34ch;
	color: var(--muted);
	font-size: clamp(.85rem, 1.05vw, 1rem);
	line-height: 1.45;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .5s ease, opacity .4s ease;
}
.st-system__list li.is-on .st-system__note { max-height: 60px; opacity: 1; }
.st-system__line {
	position: absolute;
	left: 5px;
	top: .6em;
	bottom: .6em;
	width: 1px;
	background: var(--line);
}
.st-system__line i { display: block; width: 100%; height: 0; background: var(--accent); transition: height .2s linear; }
.st-system__stage { position: relative; height: min(66svh, 560px); display: grid; place-items: end center; }
.st-system__stage .rk {
	position: absolute;
	bottom: 0;
	height: 100%;
	opacity: 0;
	transform: translateY(24px) scale(.96);
	transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.st-system__stage .rk.is-on { opacity: 1; transform: none; }
.st-system__glow {
	position: absolute;
	left: 50%;
	bottom: -6%;
	width: 90%;
	aspect-ratio: 1.6;
	translate: -50% 0;
	background: radial-gradient(closest-side, rgba(124, 224, 42, .22), transparent);
	filter: blur(6px);
}
@media (max-width: 860px) {
	.st-system__grid { grid-template-columns: 1fr; gap: 18px; }
	.st-system__stage { height: 38svh; order: -1; }
	.st-system__scroll { height: 200svh; }
	.st-system__note { display: none; }
}

/* ==========================================================================
   6. Services
   ========================================================================== */
.st-serv__grid { position: relative; margin-top: clamp(40px, 8vh, 90px); display: grid; gap: 0; }
.st-serv__group {
	position: relative;
	display: grid;
	grid-template-columns: minmax(240px, 34%) 1fr;
	gap: clamp(16px, 4vw, 60px);
	padding: clamp(26px, 5vh, 54px) 0;
	border-top: 1px solid var(--line);
	transition: background-color .4s;
}
.st-serv__group:last-of-type { border-bottom: 1px solid var(--line); }
.st-serv__group header { display: grid; align-content: start; gap: 10px; }
.st-serv__no { font-size: 12px; font-weight: 800; letter-spacing: .3em; color: var(--accent); }
.st-serv__group h3 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.6rem, 4vw, 3.4rem);
	line-height: .95;
	letter-spacing: -.05em;
	text-transform: uppercase;
}
.st-serv__group header p { margin: 0; max-width: 28ch; }
.st-serv__group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; align-content: start; }
.st-serv__group li {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.05rem, 2.1vw, 1.7rem);
	letter-spacing: -.03em;
	color: var(--muted);
	transition: color .3s, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.st-serv__group li span { position: relative; display: inline-block; padding: 4px 0; }
.st-serv__group li span::before {
	content: "";
	position: absolute;
	left: -18px;
	top: 50%;
	width: 10px;
	height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform .3s;
}
.st-serv__group li:hover { color: var(--ink); transform: translateX(18px); }
.st-serv__group li:hover span::before { transform: none; }
.st-serv__group.is-hot h3 { color: var(--accent); }
.st-serv__rk {
	position: absolute;
	right: -2vw;
	bottom: 0;
	width: clamp(150px, 17vw, 260px);
	height: clamp(220px, 34svh, 340px);
	pointer-events: none;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.st-serv__grid.is-hot .st-serv__rk { opacity: 1; transform: none; }
.st-serv__rk .rk { position: absolute; bottom: 0; right: 0; height: 100%; width: auto; opacity: 0; transition: opacity .35s ease; }
.st-serv__rk .rk.is-on { opacity: 1; }
@media (max-width: 860px) {
	.st-serv__group { grid-template-columns: 1fr; }
	.st-serv__rk { display: none; }
}

/* ==========================================================================
   7. One guy
   ========================================================================== */
.st-one { text-align: center; }
.st-one__lines span { display: block; }
.st-one__lines span + span { margin-top: .1em; }
.st-one__lines span:last-child { font-size: clamp(1.5rem, 4.6vw, 4.2rem); letter-spacing: -.04em; }
.st-one__strip {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: clamp(4px, 1.4vw, 24px);
	margin-top: clamp(30px, 6vh, 70px);
	overflow-x: auto;
	scrollbar-width: none;
	padding: 30px 0 10px;
}
.st-one__strip::-webkit-scrollbar { display: none; }
.st-one__strip figure { margin: 0; flex: 0 0 auto; }
.st-one__strip .rk { height: clamp(150px, 24vw, 330px); }
.st-one__strip figure:nth-child(even) { transform: translateY(-14px); }

/* ==========================================================================
   8. Method
   ========================================================================== */
.st-method { padding: 0; }
.st-method__pin { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; }
.st-method__scroll { height: 300svh; }
.st-method__track { position: relative; height: min(62svh, 520px); margin-top: 20px; }
.st-method__step {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr minmax(180px, 30%);
	align-items: center;
	gap: clamp(20px, 4vw, 60px);
	opacity: 0;
	transform: translateY(40px);
	pointer-events: none;
	transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.st-method__step.is-on { opacity: 1; transform: none; }
.st-method__no {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(3rem, 12vw, 11rem);
	line-height: .8;
	letter-spacing: -.07em;
	color: rgba(242, 246, 241, .08);
	grid-column: 1 / -1;
	grid-row: 1;
	align-self: start;
	pointer-events: none;
}
.st-method__step h3 {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	align-self: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.2rem, 7vw, 6rem);
	line-height: .92;
	letter-spacing: -.055em;
	text-transform: uppercase;
}
.st-method__step p { grid-column: 1; grid-row: 2; margin: 14px 0 0; max-width: 42ch; }
.st-method__step .rk { grid-column: 2; grid-row: 1 / span 2; height: min(52svh, 420px); justify-self: end; }
.st-method__bar { margin-top: 26px; height: 2px; background: var(--line); }
.st-method__bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s linear; }
@media (max-width: 860px) {
	.st-method__step { grid-template-columns: 1fr; align-content: center; }
	.st-method__step .rk { grid-column: 1; grid-row: 3; height: 30svh; justify-self: center; margin-top: 14px; }
	.st-method__no { font-size: 5rem; }
	.st-method__scroll { height: 260svh; }
}

/* ==========================================================================
   9. Work
   ========================================================================== */
.st-work .st-wrap { position: relative; }
.st-work__list { margin-top: clamp(36px, 7vh, 80px); border-top: 1px solid var(--line); }
.st-work__item { border-bottom: 1px solid var(--line); }
.st-work__head {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: clamp(12px, 3vw, 34px);
	width: 100%;
	padding: clamp(18px, 3.4vh, 34px) 0;
	background: none;
	border: 0;
	color: inherit;
	text-align: left;
}
.st-work__idx { font-size: 12px; font-weight: 800; letter-spacing: .2em; color: var(--muted); }
.st-work__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 4.4vw, 3.6rem);
	line-height: 1;
	letter-spacing: -.05em;
	text-transform: uppercase;
	transition: color .3s, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.st-work__sector { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.st-work__plus { position: relative; width: 18px; height: 18px; }
.st-work__plus::before,
.st-work__plus::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 1.5px;
	background: var(--ink);
	translate: -50% -50%;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .3s;
}
.st-work__plus::after { transform: rotate(90deg); }
.st-work__head:hover .st-work__name { color: var(--accent); transform: translateX(10px); }
.st-work__head[aria-expanded="true"] .st-work__name { color: var(--accent); }
.st-work__head[aria-expanded="true"] .st-work__plus::after { transform: rotate(0deg); }
.st-work__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.2, .8, .2, 1); }
.st-work__item.is-open .st-work__panel { grid-template-rows: 1fr; }
.st-work__panel-in {
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: clamp(20px, 4vw, 60px);
	align-items: start;
}
.st-work__panel dl { margin: 0 0 clamp(20px, 4vh, 40px); display: grid; gap: 16px; max-width: 70ch; }
.st-work__panel dl > div { display: grid; grid-template-columns: minmax(90px, 120px) 1fr; gap: 16px; }
.st-work__panel dt { font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); padding-top: 3px; }
.st-work__panel dd { margin: 0; color: var(--muted); font-size: clamp(.95rem, 1.15vw, 1.08rem); line-height: 1.55; }
.st-soon { color: var(--muted); opacity: .65; font-style: italic; }
.st-work__side { display: grid; justify-items: start; gap: 14px; margin-bottom: clamp(20px, 4vh, 40px); }
.st-work__logo { width: 200px; height: auto; border-radius: 12px; }
.st-work__visit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
	transition: gap .3s cubic-bezier(.2, .8, .2, 1), color .25s;
}
.st-work__visit:hover { gap: 14px; color: #8FEA45; }
.st-work__peek {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 55;
	width: 200px;
	height: auto;
	border-radius: 12px;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(.9);
	transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.st-work__peek.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (max-width: 860px) {
	.st-work__head { grid-template-columns: auto 1fr auto; }
	.st-work__sector { display: none; }
	.st-work__panel-in { grid-template-columns: 1fr; }
	.st-work__side { justify-items: start; }
	.st-work__panel dl > div { grid-template-columns: 1fr; gap: 4px; }
	.st-work__logo { width: 160px; }
	.st-work__peek { display: none; }
}

/* ==========================================================================
   10. Attention to growth
   ========================================================================== */
.st-journey { padding: 0; }
.st-journey__pin { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; }
.st-journey__scroll { height: 280svh; }
.st-journey__title { margin-bottom: clamp(30px, 8vh, 80px); max-width: 18ch; }
.st-journey__track { position: relative; padding-bottom: clamp(190px, 46svh, 460px); }
.st-journey__rail { position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: var(--line); }
.st-journey__rail i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s linear; }
.st-journey__track { display: grid; grid-template-columns: repeat(5, 1fr); }
.st-journey__stop { position: relative; padding-top: 34px; text-align: left; opacity: .3; transition: opacity .4s ease; }
.st-journey__stop.is-on { opacity: 1; }
.st-journey__dot {
	position: absolute;
	left: 0;
	top: 4px;
	width: 13px;
	height: 13px;
	border: 1px solid var(--accent);
	border-radius: 50%;
	background: var(--bg);
	transition: background-color .3s, box-shadow .3s;
}
.st-journey__stop.is-on .st-journey__dot { background: var(--accent); box-shadow: 0 0 0 7px rgba(124, 224, 42, .16); }
.st-journey__label {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(.85rem, 2.4vw, 2rem);
	letter-spacing: -.04em;
	text-transform: uppercase;
}
.st-journey__rk {
	position: absolute;
	bottom: 0;
	left: 0;
	width: clamp(120px, 16vw, 230px);
	height: clamp(170px, 42svh, 420px);
	transition: transform .5s cubic-bezier(.2, .8, .2, 1);
	will-change: transform;
}
.st-journey__rk .rk {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 100%;
	opacity: 0;
	transition: opacity .35s ease;
}
.st-journey__rk .rk.is-on { opacity: 1; }
@media (max-width: 860px) {
	.st-journey__track { grid-template-columns: repeat(5, 1fr); padding-bottom: 42svh; }
	.st-journey__rk { height: 36svh; }
	.st-journey__label { writing-mode: vertical-rl; letter-spacing: -.02em; }
	.st-journey__scroll { height: 240svh; }
}

/* ==========================================================================
   11. Why
   ========================================================================== */
.st-why__list {
	list-style: none;
	margin: clamp(40px, 8vh, 90px) 0 0;
	padding: 0;
	display: grid;
	gap: 0;
}
.st-why__list li {
	position: relative;
	display: grid;
	grid-template-columns: 90px 1fr minmax(0, 40ch);
	gap: clamp(16px, 3vw, 44px);
	align-items: center;
	padding: clamp(18px, 3.4vh, 34px) 0;
	border-top: 1px solid var(--line);
}
.st-why__list li:last-child { border-bottom: 1px solid var(--line); }
.st-why__list .rk {
	height: 86px;
	opacity: .55;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)) grayscale(.35);
	transition: opacity .35s, filter .35s, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.st-why__list li:hover .rk { opacity: 1; filter: none; transform: translateY(-6px) scale(1.05); }
.st-why__list h3 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.15rem, 2.8vw, 2.2rem);
	line-height: 1.05;
	letter-spacing: -.04em;
}
.st-why__list p { margin: 0; }
@media (max-width: 860px) {
	.st-why__list li { grid-template-columns: 62px 1fr; }
	.st-why__list .rk { height: 60px; }
	.st-why__list p { grid-column: 2; }
}

/* ==========================================================================
   12. About
   ========================================================================== */
.st-about__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.st-about__grid p { margin: 18px 0 0; max-width: 54ch; }
.st-about__rk { display: grid; place-items: center; }
.st-about__rk .rk { height: min(56svh, 480px); }
@media (max-width: 860px) {
	.st-about__grid { grid-template-columns: 1fr; }
	.st-about__rk .rk { height: 40svh; }
}

/* ==========================================================================
   13. Wave
   ========================================================================== */
.st-wave { text-align: center; }
.st-wave__rk { position: relative; height: min(48svh, 400px); margin-bottom: 26px; display: grid; place-items: end center; }
.st-wave__rk .rk {
	position: absolute;
	bottom: 0;
	height: 100%;
	opacity: 0;
	transition: opacity .4s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.st-wave__rk .rk.is-on { opacity: 1; }
.st-wave.is-point .rk--wave { opacity: 0; }
.st-wave.is-point .rk--wave-point { opacity: 1; }
.st-wave__rk .rk--wave { animation: st-wave 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes st-wave {
	0%, 100% { rotate: -2deg; }
	50% { rotate: 2deg; }
}
@media (prefers-reduced-motion: reduce) {
	.st-wave__rk .rk--wave { animation: none; }
}

/* ==========================================================================
   14. Final CTA
   ========================================================================== */
.st-cta { text-align: center; position: relative; padding-bottom: clamp(120px, 20vh, 220px); }
.st-cta__big { max-width: 16ch; margin-inline: auto; }
.st-cta__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(30px, 5vh, 54px); }
.st .st-cta__line { margin: 22px 0 0; font-size: 14px; letter-spacing: .04em; }
.st .st-cta__line a { color: var(--ink); font-weight: 700; transition: color .25s; }
.st .st-cta__line a:hover { color: var(--accent); }
.st-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 60px;
	padding: 0 34px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: background-color .25s, color .25s, border-color .25s, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.st-btn--primary { background: var(--accent); color: #0A0F0B; box-shadow: 0 18px 44px -16px rgba(124, 224, 42, .75); }
.st-btn--primary:hover { background: #8FEA45; }
.st-btn--ghost { border: 1px solid rgba(242, 246, 241, .25); color: var(--ink); }
.st-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.rk--cta {
	position: absolute;
	right: clamp(-10px, 2vw, 60px);
	bottom: 0;
	height: min(40svh, 340px);
	opacity: .9;
}
@media (max-width: 860px) {
	.st-cta__row { flex-direction: column; align-items: stretch; }
	.rk--cta { position: relative; right: auto; height: 30svh; margin: 34px auto 0; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.st-foot { border-top: 1px solid var(--line); padding: clamp(50px, 8vh, 90px) 0 34px; }
.st-foot__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
.st-foot__brand img { width: 220px; height: auto; }
.st-foot__brand p { margin: 14px 0 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.st-foot__nav { display: grid; gap: 10px; }
.st-foot__nav a,
.st-foot__meta a { color: var(--muted); font-size: 14px; transition: color .25s; }
.st-foot__nav a:hover,
.st-foot__meta a:hover { color: var(--accent); }
.st-foot__meta { display: grid; gap: 10px; }
.st-foot__social { display: flex; gap: 16px; margin-top: 6px; }
.st-foot__end { margin: clamp(40px, 6vh, 70px) 0 0; text-align: center; font-size: 12px; letter-spacing: .1em; color: var(--muted); opacity: .7; }
@media (max-width: 860px) {
	.st-foot__grid { grid-template-columns: 1fr; }
}