main.studio-page-approach > .approach-path {
	margin-inline: calc(var(--wp--style--root--padding-left, 1.5rem) * -1)
		calc(var(--wp--style--root--padding-right, 1.5rem) * -1);
	max-width: none;
	width: auto;
}

.studio-page-approach .approach-path {
	--base: var(--wp--preset--color--base, #faf9f7);
	--contrast: var(--wp--preset--color--contrast, #1a1a1a);
	--muted: var(--wp--preset--color--muted, #6b6560);
	--accent: var(--wp--preset--color--accent, #2c5f6e);
	--subtle: var(--wp--preset--color--subtle, #f0ede8);
	--cream: var(--wp--preset--color--cream, #f3efe8);
	--rule: rgba(26, 26, 26, 0.14);
	--serif: var(--wp--preset--font-family--serif, Fraunces, Georgia, serif);
	--sans: var(--wp--preset--font-family--sans, "Source Sans 3", system-ui, sans-serif);
	--sp30: 1rem;
	--sp50: 2.5rem;
	--pc: var(--accent);
	margin-block: 0;
	font-family: var(--sans);
	color: var(--contrast);
}

.studio-page-approach .approach-path *,
.studio-page-approach .approach-path *::before,
.studio-page-approach .approach-path *::after {
	box-sizing: border-box;
}
.studio-page-approach .approach-path .stage {
	background: var(--cream);
	border-top: 1px solid var(--subtle);
	border-bottom: 1px solid var(--subtle);
	padding: var(--sp50) 0;
	container-type: inline-size;
	position: relative;
}

.studio-page-approach .approach-path .band-label {
	font-family: var(--sans);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--muted);
	margin: 0 0 1rem;
	padding-inline: var(--studio-rail-inset-left, max(1.5rem, 5cqi)) var(--studio-rail-inset-right, max(1.5rem, 5cqi));
}

.studio-page-approach .approach-path .inset {
	padding-inline: var(--studio-rail-inset-left, max(1.5rem, 5cqi)) var(--studio-rail-inset-right, max(1.5rem, 5cqi));
}
.studio-page-approach .approach-path .card {
	flex: 0 0 240px;
	width: 240px;
	min-width: 0;
	margin: 0;
	border-top: 1px solid var(--contrast);
	padding-top: var(--sp30);
	scroll-snap-align: start;
	cursor: pointer;
	transition: background-color 0.2s;
}

.studio-page-approach .approach-path .card .kind {
	font: 600 0.66rem var(--sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pc);
	margin: 0 0 0.4rem;
}

.studio-page-approach .approach-path .card h4 {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 1.02rem;
	margin: 0 0 0.6rem;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	color: var(--contrast);
}

.studio-page-approach .approach-path .card .media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: #e2ddd4;
	border-radius: 2px;
	overflow: hidden;
	margin: 0 0 0.6rem;
	cursor: pointer;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
}

.studio-page-approach .approach-path .card .media img,
.studio-page-approach .approach-path .card .media video {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

.studio-page-approach .approach-path .card .media.portrait img {
	object-position: center 30%;
}

.studio-page-approach .approach-path .card .play {
	position: absolute;
	right: 0.4rem;
	bottom: 0.4rem;
	background: rgba(26, 26, 26, 0.78);
	color: #fff;
	font: 600 0.6rem ui-monospace, monospace;
	letter-spacing: 0.06em;
	padding: 0.2rem 0.45rem;
	border-radius: 2px;
	pointer-events: none;
}

.studio-page-approach .approach-path .card p.cap {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--muted);
}

.studio-page-approach .approach-path .card .src {
	display: block;
	margin-top: 0.45rem;
	font: 600 0.62rem var(--sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--contrast);
	opacity: 0.55;
}
.studio-page-approach .approach-path .card .media.quote {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem 1.1rem;
	background: var(--contrast);
	cursor: default;
}

.studio-page-approach .approach-path .card .media.quote .q {
	margin: 0;
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.15rem;
	line-height: 1.2;
	color: var(--base);
}

.studio-page-approach .approach-path .card .media.quote .a {
	margin: 0;
	font: 600 0.7rem var(--sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(250, 249, 247, 0.62);
}
.studio-page-approach .approach-path .card .media.contain {
	background: #fbf5ee;
}

.studio-page-approach .approach-path .card .media.contain img {
	object-fit: contain;
}

.studio-page-approach .approach-path .card:focus {
	outline: none;
}

.studio-page-approach .approach-path .card:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 6px;
}

.studio-page-approach .approach-path .card.hl {
	background: rgba(44, 95, 110, 0.07);
	box-shadow: 0 0 0 6px rgba(44, 95, 110, 0.07);
}

.studio-page-approach .approach-path .card.selected {
	border-top: 3px solid var(--accent);
}

.studio-page-approach .approach-path .card.selected .kind {
	color: var(--contrast);
}
.studio-page-approach .approach-path .crail {
	display: flex;
	gap: var(--sp50);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding-inline: var(--studio-rail-inset-left, max(1.5rem, 5cqi)) var(--studio-rail-inset-right, max(1.5rem, 5cqi));
	scroll-padding-inline: var(--studio-rail-inset-left, max(1.5rem, 5cqi)) var(--studio-rail-inset-right, max(1.5rem, 5cqi));
	padding-bottom: var(--sp30);
}

.studio-page-approach .approach-path .crail::-webkit-scrollbar {
	display: none;
}

.studio-page-approach .approach-path .crail:focus {
	outline: none;
}

.studio-page-approach .approach-path .crail:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.studio-page-approach .approach-path .crail .tail {
	flex: 0 0 auto;
	display: none;
}
.studio-page-approach .approach-path .head,
.about-approach .approach-path .head {
	display: flex;
	gap: 1.6rem;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 1.2rem;
}

.studio-page-approach .approach-path .nowcol,
.about-approach .approach-path .nowcol {
	flex: 1 1 16rem;
	min-width: 0;
}

.studio-page-approach .approach-path .now,
.about-approach .approach-path .now {
	margin: 0;
	min-height: 1.6em;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(1.02rem, 2cqi, 1.25rem);
	line-height: 1.35;
	color: var(--contrast);
}

.studio-page-approach .approach-path .now b,
.about-approach .approach-path .now b {
	font: 600 0.66rem var(--sans);
	font-style: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pc);
	margin-right: 0.6rem;
	vertical-align: 0.12em;
}
.studio-page-approach .approach-path .strands,
.about-approach .approach-path .strands {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.9rem;
	margin: 0.55rem 0 0;
	padding: 0;
	list-style: none;
}

.studio-page-approach .approach-path .strands li,
.about-approach .approach-path .strands li {
	margin: 0;
}

.studio-page-approach .approach-path .strands[hidden],
.about-approach .approach-path .strands[hidden] {
	display: none;
}

.studio-page-approach .approach-path .strands button,
.about-approach .approach-path .strands button {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font: 600 0.66rem var(--sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0.15rem 0;
	cursor: pointer;
}

.studio-page-approach .approach-path .strands button:hover,
.about-approach .approach-path .strands button:hover,
.studio-page-approach .approach-path .strands button.on,
.about-approach .approach-path .strands button.on {
	color: var(--contrast);
}

.studio-page-approach .approach-path .strands button:focus-visible,
.about-approach .approach-path .strands button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.studio-page-approach .approach-path .strands button[disabled],
.about-approach .approach-path .strands button[disabled] {
	cursor: default;
	opacity: 0.5;
}

.studio-page-approach .approach-path .strands svg,
.about-approach .approach-path .strands svg {
	width: 30px;
	height: 8px;
	overflow: visible;
}

.studio-page-approach .approach-path .strands line,
.about-approach .approach-path .strands line {
	stroke: var(--accent);
	stroke-width: 2;
	stroke-linecap: round;
}

.studio-page-approach .approach-path .strands button.on line,
.about-approach .approach-path .strands button.on line {
	stroke: var(--contrast);
	stroke-width: 3;
}

.studio-page-approach .approach-path .strands [data-style="dash"] line,
.about-approach .approach-path .strands [data-style="dash"] line {
	stroke-dasharray: 5 3;
}

.studio-page-approach .approach-path .strands [data-style="dashdot"] line,
.about-approach .approach-path .strands [data-style="dashdot"] line {
	stroke-dasharray: 6 3 0.1 3;
}

.studio-page-approach .approach-path .strands [data-style="dot"] line,
.about-approach .approach-path .strands [data-style="dot"] line {
	stroke-dasharray: 0.1 4.5;
	stroke-width: 3;
}

.studio-page-approach .approach-path .strands [data-style="dot"].on line,
.about-approach .approach-path .strands [data-style="dot"].on line {
	stroke-width: 4;
}

.studio-page-approach .approach-path .strands [data-style="stage"] line.tick,
.about-approach .approach-path .strands [data-style="stage"] line.tick {
	stroke-width: 1.5;
}

.studio-page-approach .approach-path .strands .thinking,
.about-approach .approach-path .strands .thinking {
	font: 600 0.6rem ui-monospace, monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	border: 1px solid currentColor;
	border-radius: 2px;
	padding: 0.12rem 0.35rem;
	align-self: center;
}

.studio-page-approach .approach-path .strand-def,
.about-approach .approach-path .strand-def {
	margin: 0.45rem 0 0;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--muted);
	max-width: 62ch;
	min-height: 1.25em;
}

.studio-page-approach .approach-path .strand-def .goal,
.about-approach .approach-path .strand-def .goal {
	display: block;
	color: var(--contrast);
	opacity: 0.7;
	font-size: 0.8rem;
	margin-top: 0.15rem;
}
.studio-page-approach .approach-path .dd {
	display: block;
	overflow: visible;
	max-width: none;
}

.approach-path .dd .zone { opacity: 0.16; transition: opacity 0.35s; }
.approach-path .dd .zone.on { opacity: 1; }
.approach-path .dd .zone.hover:not(.on) { opacity: 0.34; }
.approach-path .dd .f-light { fill: #adbdbd; }
.approach-path .dd .f-mid { fill: #90a7ab; }
.approach-path .dd .f-dark { fill: #406e7a; }
.approach-path .dd .ol { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.45; }
.approach-path .dd .sp { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 8; opacity: 0.3; }
.approach-path .dd .arc { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-dasharray: 8 7; }
.approach-path .dd .ah { fill: var(--muted); }
.approach-path .dd .pt { fill: var(--cream); stroke: var(--accent); stroke-width: 3; }
.approach-path .dd .hit { fill: transparent; cursor: pointer; }
.approach-path .dd .hit:focus { outline: none; }
.approach-path .dd .hit:focus-visible { stroke: var(--contrast); stroke-width: 4; }
.approach-path .dd .route-layer { pointer-events: none; }
.approach-path .dd .lane { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.approach-path .dd .lane.base { stroke: var(--accent); stroke-width: 7; opacity: 0.4; transition: opacity 0.3s, stroke-width 0.3s; }
.approach-path .dd .lane.halo { stroke: var(--cream); stroke-width: 17; opacity: 0.55; stroke-dasharray: none; }
.approach-path .dd .lane.drawn { stroke: var(--contrast); stroke-width: 9; }
.approach-path .dd .strand.on .lane.base { opacity: 1; stroke-width: 11; }
.approach-path .dd .strand.on .lane.drawn { stroke-width: 13; }
.approach-path .dd .strand[data-style="dash"] .lane:not(.halo) { stroke-dasharray: 26 16; }
.approach-path .dd .strand[data-style="dashdot"] .lane:not(.halo) { stroke-dasharray: 28 14 1 14; }
.approach-path .dd .strand[data-style="dot"] .lane:not(.halo) { stroke-dasharray: 1 19; }
.approach-path .dd .strand[data-style="dot"] .lane.base,
.approach-path .dd .strand[data-style="dot"] .lane.drawn { stroke-width: 12; }
.approach-path .dd .strand[data-style="dot"].on .lane.base,
.approach-path .dd .strand[data-style="dot"].on .lane.drawn { stroke-width: 17; }

.approach-path .dd .route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.approach-path .dd .stage-case { fill: none; stroke: var(--contrast); stroke-width: 13; opacity: 0.45; stroke-linecap: butt; transition: opacity 0.3s, stroke-width 0.3s; }
.approach-path .dd .stage-seg { fill: none; stroke: var(--cream); stroke-width: 5; opacity: 0.8; stroke-linecap: butt; transition: stroke-width 0.3s; }
.approach-path .dd .stage.on .stage-case { opacity: 1; stroke-width: 23; }
.approach-path .dd .stage.on .stage-seg { opacity: 1; stroke-width: 13; }
.approach-path .dd .stage-tick { stroke: var(--cream); stroke-width: 5; }
.approach-path .dd .stage-tick-case { stroke: var(--contrast); stroke-width: 11; opacity: 0.6; }
.approach-path .dd .route.base { stroke: var(--accent); stroke-width: 5; opacity: 0.35; }
.approach-path .dd .route.drawn { stroke: var(--contrast); stroke-width: 9; }
.approach-path .dd .nd { stroke: var(--accent); stroke-width: 5; fill: var(--accent); }
.approach-path .dd .ring { fill: none; stroke: var(--contrast); stroke-width: 5; }
.approach-path .dd .nd.hl,
.approach-path .dd .nd.sel { fill: var(--contrast); stroke: var(--contrast); }
.approach-path .dd .hlring { fill: var(--cream); fill-opacity: 0.9; stroke: var(--contrast); stroke-width: 4; pointer-events: none; }
.approach-path .dd .selring { fill: none; stroke: var(--contrast); stroke-width: 4; stroke-dasharray: 9 7; pointer-events: none; }
.approach-path .dd .nhit { fill: transparent; cursor: pointer; pointer-events: all; }
.approach-path .dd .nhit:focus { outline: none; }
.approach-path .dd .nhit:focus-visible { stroke: var(--contrast); stroke-width: 5; }
.approach-path .dd .front { fill: var(--contrast); stroke: var(--cream); stroke-width: 5; }
.approach-path .dd .front.on { stroke-width: 6; }
.approach-path .dd .dot { fill: var(--contrast); stroke: var(--cream); stroke-width: 6; }
.studio-page-approach .approach-path .pinwrap {
	position: relative;
	height: calc(var(--pin-steps, 15) * 30vh + 100vh);
}

.studio-page-approach .approach-path .pinband {
	position: sticky;
	top: var(--sticky-top, 0px);
}

.studio-page-approach .approach-path .pinwrap .stage {
	padding-block: 1.1rem;
}

.studio-page-approach .approach-path .pinwrap .band-label {
	margin-bottom: 0.6rem;
}
.studio-page-approach .approach-path .band-intro {
	font-family: var(--sans); font-size: 0.95rem; line-height: 1.45; color: var(--muted); margin: -0.2rem 0 0.9rem;
	max-width: none;
	padding-inline: var(--studio-rail-inset-left, max(1.5rem, 5cqi)) var(--studio-rail-inset-right, max(1.5rem, 5cqi));
}
.studio-page-approach .approach-path .pinwrap--phone .band-intro { display: none; }
@media (max-height: 780px) { .studio-page-approach .approach-path .band-intro { display: none; } }
.studio-page-approach .approach-path .pinhead .dd {
	flex: 0 0 auto;
	height: clamp(125px, calc(100vh - 600px - var(--sticky-top, 0px)), 250px);
	width: auto;
	aspect-ratio: 1220 / 630;
}

@container (max-width: 600px) {
	.studio-page-approach .approach-path .pinhead .dd {
		height: auto;
		width: 100%;
	}
}

.studio-page-approach .approach-path .pinwrap.pinned .crail {
	overflow-x: hidden;
	scroll-snap-type: none;
}

.studio-page-approach .approach-path .pinwrap.pinned .crail .tail {
	display: block;
}

.studio-page-approach .approach-path .bandfoot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.35rem 1.2rem;
	margin: 0.2rem 0 0;
	padding-inline: var(--studio-rail-inset-left, max(1.5rem, 5cqi)) var(--studio-rail-inset-right, max(1.5rem, 5cqi));
}

.studio-page-approach .approach-path .pinhint {
	font: 600 0.64rem var(--sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0;
}

.studio-page-approach .approach-path .pinhint .swipe {
	display: none;
}
.studio-page-approach .approach-path .caselink {
	font: 600 0.8rem var(--sans);
	color: var(--contrast);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.studio-page-approach .approach-path .caselink:hover {
	color: var(--accent);
}

.studio-page-approach .approach-path .caselink:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.studio-page-approach .approach-path .pinwrap:not(.pinned) {
	height: auto;
}

.studio-page-approach .approach-path .pinwrap:not(.pinned) .pinband {
	position: relative;
	top: auto;
}

.studio-page-approach .approach-path .pinwrap:not(.pinned) .pinhint .scroll {
	display: none;
}

.studio-page-approach .approach-path .pinwrap:not(.pinned) .pinhint .swipe {
	display: inline;
}

@media (prefers-reduced-motion: reduce) {
	.studio-page-approach .approach-path * {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}
.studio-page-approach .approach-path .card button.media {
	cursor: zoom-in;
}

.studio-page-approach .approach-path .card button.media img,
.studio-page-approach .approach-path .card button.media video {
	transition: transform 0.35s ease;
}

.studio-page-approach .approach-path .card button.media:hover img,
.studio-page-approach .approach-path .card button.media:hover video {
	transform: scale(1.03);
}

.studio-page-approach .approach-path .card button.media:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.studio-page-approach .approach-path .card button.media:hover .play,
.studio-page-approach .approach-path .card button.media:focus-visible .play {
	background: var(--contrast);
}
.approach-path-lightbox .studio-bridge-lightbox__nav,
.approach-path-lightbox .approach-path-lightbox__nav {
	display: flex;
	gap: 0.5rem;
	margin-left: auto;
}

.approach-path-lightbox .approach-path-lightbox__count {
	font-family: monospace;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	color: rgba(250, 249, 247, 0.55);
	white-space: nowrap;
}

.approach-path-lightbox .studio-bridge-lightbox__eyebrow {
	min-width: 0;
}

.approach-path-lightbox .studio-bridge-lightbox__img {
	background: #fff;
}

.approach-path-lightbox .studio-bridge-lightbox__caption {
	white-space: normal;
	text-overflow: unset;
	font-size: 0.875rem;
	line-height: 1.45;
	max-width: none;
}

.approach-path-lightbox .studio-bridge-lightbox__caption b {
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

@media (max-width: 600px) {
	.approach-path-lightbox .studio-bridge-lightbox__chrome {
		flex-wrap: wrap;
		row-gap: 0.5rem;
	}

	.approach-path-lightbox .studio-bridge-lightbox__eyebrow {
		flex: 1 1 100%;
		order: 3;
	}
}
.studio-page-approach .approach-path .pinwrap.pinned .crail {
	touch-action: pan-y;
}

.studio-page-approach .approach-path .crail {
	cursor: grab;
}

.studio-page-approach .approach-path .crail.dragging,
.studio-page-approach .approach-path .crail.dragging * {
	cursor: grabbing;
	user-select: none;
	-webkit-user-select: none;
}
.studio-page-approach .approach-orbits {
	--contrast: var(--wp--preset--color--contrast, #1a1a1a);
	--muted: var(--wp--preset--color--muted, #6b6560);
	--accent: var(--wp--preset--color--accent, #2c5f6e);
	--cream: var(--wp--preset--color--cream, #f3efe8);
	--serif: var(--wp--preset--font-family--serif, Fraunces, Georgia, serif);
	--sans: var(--wp--preset--font-family--sans, "Source Sans 3", system-ui, sans-serif);
	container-type: inline-size;
	margin: var(--wp--preset--spacing--45) 0 0;
	padding: 0;
	max-width: none;
}

.studio-page-approach .approach-orbits svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	overflow: visible;
}

.studio-page-approach .approach-orbits .wide { display: block; }
.studio-page-approach .approach-orbits .tall { display: none; }

@container (max-width: 640px) {
	.studio-page-approach .approach-orbits .wide { display: none; }
	.studio-page-approach .approach-orbits .tall { display: block; max-width: 420px; margin-inline: auto; }
}

.approach-orbits .ring { fill: none; stroke: var(--accent); }
.approach-orbits .ring.product { stroke-width: 3; opacity: 0.55; }
.approach-orbits .ring.proto { stroke-width: 3; stroke-dasharray: 14 10; opacity: 0.75; }
.approach-orbits .ring-fill.product { fill: #e9e3d8; }
.approach-orbits .ring-fill.proto { fill: #f7f3ec; }
.approach-orbits .flow { fill: none; stroke: var(--contrast); stroke-width: 3; stroke-linecap: round; }
.approach-orbits .loop { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.1 11; opacity: 0.9; }
.approach-orbits .ah { fill: var(--contrast); }
.approach-orbits .ah.accent { fill: var(--accent); }
.approach-orbits .spin { fill: var(--accent); opacity: 0.8; }
.approach-orbits .intent { fill: var(--accent); }
.approach-orbits .intent-ring { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.35; }
.approach-orbits .intent-t { font: 600 30px var(--serif); fill: #faf9f7; text-anchor: middle; }
.approach-orbits .intent-s { font: 600 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; fill: rgba(250, 249, 247, 0.78); text-anchor: middle; }
.approach-orbits .nd { fill: var(--accent); stroke: var(--cream); stroke-width: 4; }
.approach-orbits .ph-n { font: 600 12px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; fill: var(--accent); }
.approach-orbits .ph-t { font: 600 17px var(--serif); fill: var(--contrast); }
.approach-orbits .ph-s { font: 400 14px var(--sans); fill: var(--muted); }
.approach-orbits .orbit-t { font: 600 12px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; fill: var(--accent); text-anchor: middle; }
.approach-orbits .orbit-s { font: 400 14px var(--sans); fill: var(--muted); text-anchor: middle; }
.approach-orbits .loop-t { font: italic 500 17px var(--serif); fill: var(--contrast); text-anchor: middle; }
.approach-orbits .halo { fill: var(--cream); }
.approach-orbits .tall .ph-t { font-size: 23px; }
.approach-orbits .tall .ph-n { font-size: 14px; }
.approach-orbits .tall .intent-t { font-size: 34px; }
.approach-orbits g { transition: opacity 0.3s; }
.approach-orbits g.dim { opacity: 0.28; }
.approach-orbits .dot { fill: var(--contrast); stroke: var(--cream); stroke-width: 3; display: none; }
.approach-orbits.is-moving .dot { display: inline; }
.studio-page-approach .approach-orbits .okey {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.6rem;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
}

.studio-page-approach .approach-orbits .okey li { margin: 0; }

.studio-page-approach .approach-orbits .okey button {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	text-align: left;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0.2rem 0;
	cursor: pointer;
	color: var(--muted);
	font: 400 0.9rem/1.4 var(--sans);
	max-width: 22rem;
}

.studio-page-approach .approach-orbits .okey button:hover,
.studio-page-approach .approach-orbits .okey button.on { color: var(--contrast); }
.studio-page-approach .approach-orbits .okey button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.studio-page-approach .approach-orbits .okey b { display: block; font: 600 0.66rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.1rem; }
.studio-page-approach .approach-orbits .okey svg { flex: 0 0 36px; width: 36px; height: 10px; margin-top: 0.35rem; }
.approach-orbits .okey line { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.approach-orbits .okey .k-proto line { stroke-dasharray: 7 5; }
.approach-orbits .okey .k-product line { opacity: 0.7; }
.approach-orbits .okey .k-loop line { stroke-dasharray: 0.1 6; stroke-width: 4; }

@media (prefers-reduced-motion: reduce) {
	.approach-orbits g { transition: none; }
}
.studio-page-approach .approach-path .pinwrap--phone { height: calc(var(--pin-steps, 15) * 22vh + 100vh); }
.studio-page-approach .approach-path .pinwrap--phone .stage { padding-block: 0.5rem; }
.studio-page-approach .approach-path .pinwrap--phone .band-label { margin-bottom: 0.3rem; }
.studio-page-approach .approach-path .pinwrap--phone .pinhead .dd { height: clamp(76px, 13vh, 104px) !important; width: auto !important; max-width: 100%; margin-inline: auto; }
.studio-page-approach .approach-path .pinwrap--phone .now { font-size: 1rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.studio-page-approach .approach-path .pinwrap--phone .strands { gap: 0.25rem 0.6rem; }
.studio-page-approach .approach-path .pinwrap--phone .strands button { font-size: 0.6rem; padding: 0.15rem 0.4rem; }
.studio-page-approach .approach-path .pinwrap--phone .strand-def { font-size: 0.86rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-block: 0.3rem 0.5rem; }
.studio-page-approach .approach-path .pinwrap--phone .card .media { height: clamp(90px, 17vh, 128px); }
.studio-page-approach .approach-path .pinwrap--phone .card h4 { font-size: 1.05rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.studio-page-approach .approach-path .pinwrap--phone .card p.cap { font-size: 0.86rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.studio-page-approach .approach-path .pinwrap--phone .card .src { display: none; }
.studio-page-approach .approach-path .pinwrap--phone.pinned .pinhint .swipe { display: none; }
.studio-page-approach .approach-path .pinwrap--phone.pinned .pinhint .scroll { display: inline; }
@media (max-height: 700px) {
	.studio-page-approach .approach-path .pinwrap--phone .strand-def { -webkit-line-clamp: 1; }
	.studio-page-approach .approach-path .pinwrap--phone .card p.cap { -webkit-line-clamp: 2; }
	.studio-page-approach .approach-path .pinwrap--phone .now { font-size: 0.95rem; }
	.studio-page-approach .approach-path .pinwrap--phone .stage { padding-block: 0.35rem; }
}
@media (max-height: 600px) {
	.studio-page-approach .approach-path .pinwrap--phone .card p.cap { display: none; }
	.studio-page-approach .approach-path .pinwrap--phone .strand-def { display: none; }
	.studio-page-approach .approach-path .pinwrap--phone .card .media { height: clamp(84px, 16vh, 110px); }
}