/* Lumivor Showcase: work case studies and team profiles. Tokens mirror design/DESIGN.md. */

.ls {
	--ls-bg: #0B021A;
	--ls-card: #170F25;
	--ls-card-2: #241C32;
	--ls-ink: #FCFCFC;
	--ls-text: #DCDEED;
	--ls-muted: #A1A3B2;
	--ls-accent: #5D2AA9;
	--ls-bright: #C000FF;
	--ls-data: #FFB347;
	--ls-project: var(--ls-accent);
	--ls-line: rgba(252, 252, 252, 0.1);
	--ls-gutter: clamp(16px, 4vw, 48px);
	--ls-max: 1320px;
	--ls-gap: clamp(72px, 10vw, 160px);
	--ls-r: 20px;
	--ls-r-lg: clamp(20px, 2.4vw, 32px);
	--ls-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ls-display: var(--e-global-typography-primary-font-family, "Fira Sans"), "Fira Sans", system-ui, sans-serif;
	--ls-sans: var(--e-global-typography-text-font-family, "Fira Sans Condensed"), "Fira Sans Condensed", system-ui, sans-serif;
	position: relative;
	color: var(--ls-text);
	font-family: var(--ls-sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.ls *, .ls *::before, .ls *::after { box-sizing: border-box; }
.ls img { display: block; max-width: 100%; height: auto; }
.ls a { color: inherit; text-decoration: none; }
.ls ul, .ls ol, .ls dl, .ls dd, .ls figure, .ls blockquote { margin: 0; padding: 0; list-style: none; }
.ls p { margin: 0; }

.ls .ls-wrap{ width: 100%; max-width: calc(var(--ls-max) + var(--ls-gutter) * 2); margin-inline: auto; padding-inline: var(--ls-gutter); }

.ls .ls-h{ font-family: var(--ls-display); font-weight: 600; color: var(--ls-ink); letter-spacing: -0.025em; line-height: 1.06; margin: 0; }
.ls .ls-muted{ color: var(--ls-muted); }
.ls .ls-label{ font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ls-muted); margin-bottom: 14px; }

.ls .ls-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--ls-bright); box-shadow: 0 0 12px var(--ls-bright); flex: none; }

.ls .ls-btn{
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 24px; border-radius: 999px;
	background: var(--ls-accent); color: var(--ls-ink) !important;
	font-weight: 500; font-size: 1rem; line-height: 1;
	transition: transform 0.2s var(--ls-ease), box-shadow 0.3s var(--ls-ease), background-color 0.2s;
}
.ls .ls-btn svg{ transition: transform 0.3s var(--ls-ease); }
.ls .ls-btn:hover{ box-shadow: 0 0 0 1px rgba(192, 0, 255, 0.5), 0 10px 40px -12px var(--ls-bright); }
.ls .ls-btn:hover svg{ transform: translate(2px, -2px); }
.ls .ls-btn:active{ transform: scale(0.97); }
.ls a:focus-visible, .ls button:focus-visible, .ls input:focus-visible, .ls [tabindex]:focus-visible { outline: 2px solid var(--ls-data); outline-offset: 3px; border-radius: 6px; }

.ls .ls-link{ color: var(--ls-ink); border-bottom: 1px solid var(--ls-accent); padding-bottom: 2px; transition: border-color 0.2s; }
.ls .ls-link:hover{ border-color: var(--ls-data); }

.ls .ls-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.ls .ls-chips li{ padding: 6px 14px; border-radius: 999px; background: rgba(93, 42, 169, 0.22); border: 1px solid rgba(93, 42, 169, 0.55); color: var(--ls-ink); font-size: 0.9rem; line-height: 1.4; }
.ls .ls-chips--quiet li{ background: transparent; border-color: var(--ls-line); color: var(--ls-muted); }

.ls .ls-media{ overflow: hidden; border-radius: var(--ls-r); background: var(--ls-card); }
.ls .ls-media img{ width: 100%; height: 100%; object-fit: cover; }

.ls .ls-notice{ padding: 24px; border: 1px dashed var(--ls-muted); border-radius: 12px; color: var(--ls-muted); font-size: 14px; }
.ls .ls-monogram{ display: grid; place-items: center; width: 100%; height: 100%; aspect-ratio: 4 / 5; background: radial-gradient(120% 90% at 30% 20%, var(--ls-card-2), var(--ls-card)); font-family: var(--ls-display); font-weight: 600; font-size: clamp(2.5rem, 6vw, 5rem); color: var(--ls-muted); letter-spacing: -0.03em; }

/* The theme sets overflow-x: hidden on html/body, which turns body into a scroll container and breaks
   position: sticky in Safari. clip hides horizontal overflow the same way without that side effect. */
html:has(.ls), html:has(.ls) body { overflow: visible; overflow-x: clip; }

/* ---------- Shared hero shell (work + team) ---------- */

.ls.ls-hero, .ls.ls-profile{ padding-top: clamp(28px, 4vw, 56px); overflow: clip; isolation: isolate; }
.ls .ls-hero__glow{
	position: absolute; z-index: -1; inset: -20% 0 auto;
	height: 900px; pointer-events: none;
	background: radial-gradient(50% 45% at 72% 30%, color-mix(in srgb, var(--ls-project) 38%, transparent), transparent 70%);
}
.ls .ls-hero__top{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-bottom: clamp(28px, 4vw, 56px); font-size: 0.95rem; }
.ls .ls-back{ color: var(--ls-muted); transition: color 0.2s; }
.ls .ls-back span{ display: inline-block; transition: transform 0.3s var(--ls-ease); }
.ls .ls-back:hover{ color: var(--ls-ink); }
.ls .ls-back:hover span{ transform: translateX(-4px); }
.ls .ls-client{ display: inline-flex; align-items: center; gap: 10px; color: var(--ls-ink); font-weight: 500; }

/* ---------- Work hero ---------- */

.ls .ls-hero__grid{ display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: end; }
.ls .ls-hero__title{ font-size: clamp(2.6rem, 6vw, 5.75rem); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.ls .ls-hero__title > span{ display: block; }
.ls .ls-hero__subtitle{ margin-top: 0.45em; font-size: clamp(1.15rem, 1.7vw, 1.6rem); line-height: 1.25; font-weight: 400; letter-spacing: -0.01em; color: var(--ls-muted); max-width: 30ch; text-wrap: pretty; }
.ls .ls-hero__side{ display: grid; gap: 28px; justify-items: start; padding-bottom: 0.4rem; }
.ls .ls-hero__intro{ max-width: 46ch; color: var(--ls-text); }

.ls .ls-facts{ display: grid; grid-template-columns: repeat(3, minmax(0, auto)) minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 64px); margin-top: clamp(40px, 5vw, 72px); padding-top: 24px; border-top: 1px solid var(--ls-line); }
.ls .ls-fact dt{ font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ls-muted); margin-bottom: 8px; }
.ls .ls-fact dd{ color: var(--ls-ink); font-size: 1.05rem; line-height: 1.4; }
.ls .ls-fact__num{ font-family: var(--ls-display); font-weight: 600; font-size: 2rem; line-height: 1; color: var(--ls-data); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ls .ls-fact--wide{ justify-self: end; }
.ls .ls-fact--wide dt{ text-align: right; }
.ls .ls-fact--wide .ls-chips{ justify-content: flex-end; }

.ls .ls-hero__media{ margin: 0; padding: clamp(40px, 6vw, 88px) var(--ls-gutter) 0; }
.ls .ls-hero__frame{ max-width: var(--ls-max); margin-inline: auto; aspect-ratio: 16 / 9; border-radius: var(--ls-r-lg); overflow: hidden; background: var(--ls-card); box-shadow: 0 0 0 1px var(--ls-line); }
.ls .ls-hero__frame img{ width: 100%; height: 100%; object-fit: cover; }

/* ---------- Story blocks ---------- */

.ls.ls-story{ display: grid; gap: var(--ls-gap); padding-block: var(--ls-gap); }

.ls .ls-text__inner{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 96px); }
.ls .ls-text--wide .ls-text__inner{ grid-template-columns: minmax(0, 1fr); max-width: 1000px; }
.ls .ls-block__title{ font-size: clamp(1.9rem, 3.4vw, 3rem); text-wrap: balance; }
.ls .ls-text__body{ max-width: 62ch; font-size: 1.15rem; }
.ls .ls-text__body > * + *, .ls .ls-split__copy .ls-body > * + *, .ls .ls-bio__text > * + *, .ls .ls-qa__a > * + *{ margin-top: 1em; }
.ls .ls-body a{ color: var(--ls-ink); text-decoration: underline; text-decoration-color: var(--ls-accent); text-underline-offset: 3px; }

.ls .ls-split__inner{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.ls .ls-split--flip .ls-split__copy{ order: 2; }
.ls .ls-split__copy{ display: grid; gap: 20px; max-width: 52ch; }
.ls .ls-split__media{ aspect-ratio: 4 / 3; }

.ls .ls-full{ padding-inline: var(--ls-gutter); }
.ls .ls-full__frame{ max-width: var(--ls-max); margin-inline: auto; aspect-ratio: 16 / 9; border-radius: var(--ls-r-lg); }
.ls .ls-full--bleed{ padding-inline: 0; }
.ls .ls-full--bleed .ls-full__frame{ max-width: none; border-radius: 0; aspect-ratio: auto; height: min(88vh, 56.25vw); }

.ls .ls-caption{ max-width: var(--ls-max); margin: 14px auto 0; padding-inline: var(--ls-gutter); font-size: 0.9rem; color: var(--ls-muted); }
.ls .ls-pair .ls-caption, .ls .ls-video .ls-caption{ padding-inline: 0; }

.ls .ls-pair__grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.ls .ls-pair__item{ aspect-ratio: 4 / 3; }
.ls .ls-pair__grid > :only-child{ grid-column: 1 / -1; aspect-ratio: 16 / 9; }
/* Offset the second image so pairs read as a composed spread, not a table row. */
@media (min-width: 900px) {
	.ls .ls-pair__item:nth-child(2){ margin-top: clamp(40px, 7vw, 120px); }
}

.ls .ls-gallery .ls-block__title{ margin-bottom: 32px; }
.ls .ls-gallery__grid{ display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.ls .ls-gallery__item{ aspect-ratio: 4 / 3; }
.ls .ls-gallery--masonry .ls-gallery__grid{ display: block; columns: var(--cols, 3); column-gap: clamp(12px, 1.6vw, 24px); }
.ls .ls-gallery--masonry .ls-gallery__item{ aspect-ratio: auto; break-inside: avoid; margin-bottom: clamp(12px, 1.6vw, 24px); }

.ls .ls-rail{ overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; padding-inline: var(--ls-gutter); scroll-padding-inline: var(--ls-gutter); overscroll-behavior-x: contain; }
.ls .ls-rail::-webkit-scrollbar{ display: none; }
.ls .ls-rail.is-dragging{ cursor: grabbing; scroll-snap-type: none; }
.ls .ls-rail.is-dragging img{ pointer-events: none; }
.ls .ls-rail__track{ display: flex; gap: clamp(12px, 1.6vw, 24px); width: max-content; }
.ls .ls-rail__item{ width: min(60vw, 820px); aspect-ratio: 4 / 3; scroll-snap-align: start; flex: none; }

.ls .ls-stats .ls-block__title{ margin-bottom: 40px; max-width: 20ch; }
.ls .ls-stats__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--ls-line); }
.ls .ls-stat{ padding: 28px 24px 8px 0; }
.ls .ls-stat + .ls-stat{ padding-left: 24px; border-left: 1px solid var(--ls-line); }
.ls .ls-stat__value{ font-family: var(--ls-display); font-weight: 600; font-size: clamp(3rem, 6.5vw, 5.5rem); line-height: 1; letter-spacing: -0.04em; color: var(--ls-data); font-variant-numeric: tabular-nums; }
.ls .ls-stat__label{ margin-top: 12px; color: var(--ls-text); max-width: 26ch; }

.ls .ls-quote__inner{ max-width: 1060px; display: grid; gap: 32px; }
.ls .ls-quote__mark{ width: 48px; color: var(--ls-accent); }
.ls .ls-quote__text{ font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance; }
.ls .ls-quote__by{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.ls .ls-quote__by > span{ display: grid; line-height: 1.35; }
.ls .ls-quote__by strong{ color: var(--ls-ink); font-weight: 500; }
.ls .ls-quote__photo{ width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }

.ls .ls-video__frame{ aspect-ratio: 16 / 9; border-radius: var(--ls-r-lg); }
.ls .ls-video__frame video, .ls .ls-video__frame iframe{ width: 100%; height: 100%; display: block; object-fit: cover; border: 0; }
.ls .ls-video--portrait .ls-video__frame{ aspect-ratio: 9 / 16; width: min(100%, 440px, 48vh); margin-inline: auto; }
.ls .ls-hero__frame--video{
	display: grid; place-items: center; container-type: size;
	background:
		radial-gradient(60% 80% at 10% 0%, color-mix(in srgb, var(--ls-project) 50%, #FF80AA), transparent 70%),
		radial-gradient(55% 75% at 95% 100%, color-mix(in srgb, var(--ls-project) 55%, #180630), transparent 70%),
		radial-gradient(70% 70% at 55% 45%, color-mix(in srgb, var(--ls-project) 60%, #fff), transparent 75%),
		var(--ls-project);
}
.ls .ls-hero__video{ --pad: 7cqmin; width: min(100cqw - 2 * var(--pad), (100cqh - 2 * var(--pad)) * var(--r)); aspect-ratio: var(--r); border-radius: clamp(12px, 3cqmin, 24px); overflow: hidden; box-shadow: 0 40px 80px -24px rgba(20, 8, 40, 0.6); }
.ls .ls-hero__video video{ width: 100%; height: 100%; display: block; object-fit: cover; }

/* Device showcase: one mockup or video per tile, seated on its own background. Tiles are size
   containers, so the media box can be the largest rectangle of its own ratio (--r) that fits inside
   the padding, and a video's rounded corners hug the picture rather than the tile. */
.ls .ls-devices__head{ max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.ls .ls-devices__body{ margin-top: 16px; color: var(--ls-muted); }
.ls .ls-devices--follow{ margin-top: calc(clamp(12px, 1.6vw, 24px) - var(--ls-gap)); }
.ls .ls-tiles{ display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.ls .ls-tiles + .ls-tiles{ margin-top: clamp(12px, 1.6vw, 24px); }
.ls .ls-tiles--1{ --cols: 1; --tile: 16 / 9; }
.ls .ls-tiles--2{ --cols: 2; --tile: 1.12; }
.ls .ls-tiles--3{ --cols: 3; --tile: 0.73; }
.ls .ls-tile{ position: relative; display: grid; place-items: center; aspect-ratio: var(--tile); border-radius: var(--ls-r-lg); overflow: hidden; container-type: size; margin: 0; }
.ls .ls-tile__media{ --pad: 9cqmin; width: min(100cqw - 2 * var(--pad), (100cqh - 2 * var(--pad)) * var(--r)); aspect-ratio: var(--r); }
.ls .ls-tiles--1 .ls-tile__media{ --pad: 7cqmin; }
.ls .ls-tile__media img{ width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(20, 8, 40, 0.28)); }
.ls .ls-tile__media--video{ border-radius: clamp(12px, 4cqmin, 24px); overflow: hidden; box-shadow: 0 28px 60px -18px rgba(20, 8, 40, 0.55); }
.ls .ls-tile__media--video video{ width: 100%; height: 100%; display: block; object-fit: cover; }

/* Tile backgrounds, all derived from the project glow colour. */
.ls .ls-tile--soft{ background: linear-gradient(180deg, color-mix(in srgb, var(--ls-project) 10%, #fff) 0%, color-mix(in srgb, var(--ls-project) 28%, #fff) 55%, var(--ls-project) 100%); }
.ls .ls-tile--vivid{ background: radial-gradient(110% 90% at 25% 15%, color-mix(in srgb, var(--ls-project) 55%, #fff), var(--ls-project) 65%); }
.ls .ls-tile--light{ background: color-mix(in srgb, var(--ls-project) 16%, #fff); }
.ls .ls-tile--white{ background: #fff; }
.ls .ls-tile--deep{ background: linear-gradient(160deg, color-mix(in srgb, var(--ls-project) 72%, #000), color-mix(in srgb, var(--ls-project) 30%, #0B021A)); }
.ls .ls-devices .ls-caption{ padding-inline: 0; }

.ls .ls-compare-block .ls-block__title{ margin-bottom: 32px; }
.ls .ls-compare{ position: relative; aspect-ratio: 16 / 9; border-radius: var(--ls-r-lg); user-select: none; }
.ls .ls-compare__after, .ls .ls-compare__before{ position: absolute; inset: 0; }
.ls .ls-compare__before{ clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ls .ls-compare__handle{ position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--ls-ink); pointer-events: none; }
.ls .ls-compare__handle::after{ content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--ls-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6' fill='none' stroke='%230B021A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow: 0 4px 20px rgba(11, 2, 26, 0.5); transition: transform 0.2s var(--ls-ease); }
.ls .ls-compare:active .ls-compare__handle::after{ transform: scale(0.92); }
.ls .ls-compare__range{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ls .ls-compare__labels{ display: flex; justify-content: space-between; margin-top: 12px; font-size: 0.9rem; }

.ls .ls-process__inner{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 96px); }
.ls .ls-process__head{ align-self: start; position: sticky; top: 120px; }
.ls .ls-process__list{ counter-reset: step; display: grid; }
.ls .ls-process__step{ counter-increment: step; display: grid; grid-template-columns: 3.5rem 1fr; column-gap: 20px; padding: 28px 0; border-top: 1px solid var(--ls-line); }
.ls .ls-process__step::before{ content: counter(step, decimal-leading-zero); grid-row: span 2; font-family: var(--ls-display); font-weight: 600; font-size: 1.1rem; color: var(--ls-data); font-variant-numeric: tabular-nums; }
.ls .ls-process__step h3{ font-size: clamp(1.3rem, 2vw, 1.6rem); }
.ls .ls-process__step p{ margin-top: 8px; color: var(--ls-text); max-width: 56ch; }

.ls-progress { position: fixed; z-index: 9999; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.ls-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--ls-accent), var(--ls-bright)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- Credits + next ---------- */

.ls.ls-credits{ padding-bottom: clamp(56px, 7vw, 112px); }
.ls .ls-credits__inner{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; padding-top: 40px; border-top: 1px solid var(--ls-line); }
.ls .ls-credits__title{ font-size: 1.35rem; margin-bottom: 20px; }
.ls .ls-people{ display: flex; flex-wrap: wrap; gap: 12px; }
.ls .ls-person{ display: flex; align-items: center; gap: 14px; padding: 8px 20px 8px 8px; border-radius: 999px; background: var(--ls-card); box-shadow: inset 0 0 0 1px var(--ls-line); transition: background-color 0.25s, transform 0.25s var(--ls-ease); }
.ls .ls-person:hover{ background: var(--ls-card-2); transform: translateY(-2px); }
.ls .ls-person > span:last-child{ display: grid; line-height: 1.3; }
.ls .ls-person strong{ color: var(--ls-ink); font-weight: 500; }
.ls .ls-person__photo, .ls .ls-person .ls-monogram{ width: 48px; height: 48px; border-radius: 50%; object-fit: cover; aspect-ratio: 1; font-size: 1rem; }

.ls.ls-next{ padding-bottom: clamp(56px, 8vw, 128px); }
.ls .ls-next__card{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.ls .ls-next__card > .ls-next__copy, .ls .ls-next__card > .ls-next__media{ background: none; }
.ls .ls-next__copy{ display: grid; gap: 10px; justify-items: start; }
.ls .ls-next__title{ font-size: clamp(2.2rem, 4.8vw, 4.25rem); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.ls .ls-next__arrow{ display: grid; place-items: center; width: 60px; height: 60px; margin-top: 18px; border-radius: 50%; background: var(--ls-accent); color: var(--ls-ink); transition: transform 0.4s var(--ls-ease), box-shadow 0.4s var(--ls-ease); }
.ls .ls-next__media{ aspect-ratio: 16 / 10; border-radius: var(--ls-r-lg); overflow: hidden; background: var(--ls-card); }
.ls .ls-next__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ls-ease); }
.ls .ls-next__card:hover .ls-next__media img{ transform: scale(1.04); }
.ls .ls-next__card:hover .ls-next__arrow{ transform: translateX(8px); box-shadow: 0 10px 40px -12px var(--ls-bright); }

/* ---------- Team profile ---------- */

.ls .ls-profile__grid{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.ls .ls-profile__copy{ padding-bottom: clamp(8px, 2vw, 32px); }
.ls .ls-profile__name{ font-size: clamp(3.2rem, 8.5vw, 8rem); line-height: 0.95; letter-spacing: -0.045em; }
.ls .ls-profile__name > span{ display: block; }
.ls .ls-profile__last{ color: var(--ls-muted); font-weight: 400; }
.ls .ls-profile__role{ margin-top: 24px; font-size: 1.2rem; color: var(--ls-ink); font-weight: 500; }
.ls .ls-profile__headline{ margin-top: 14px; max-width: 42ch; font-size: 1.15rem; color: var(--ls-text); }
.ls .ls-socials{ display: flex; gap: 10px; margin-top: 28px; }
.ls .ls-socials a{ display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ls-ink); box-shadow: inset 0 0 0 1px var(--ls-line); transition: background-color 0.2s, box-shadow 0.2s; }
.ls .ls-socials a:hover{ background: var(--ls-accent); box-shadow: inset 0 0 0 1px var(--ls-accent); }
.ls .ls-profile__photo{ position: relative; aspect-ratio: 4 / 5; max-height: min(78vh, 760px); width: 100%; justify-self: end; border-radius: var(--ls-r-lg); overflow: hidden; background: var(--ls-card); }
.ls .ls-profile__photo img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

.ls .ls-bio{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(24px, 5vw, 96px); padding-block: clamp(72px, 9vw, 144px) clamp(40px, 5vw, 72px); }
.ls .ls-bio__title{ font-size: clamp(1.8rem, 3vw, 2.6rem); align-self: start; position: sticky; top: 120px; }
.ls .ls-bio__text{ max-width: 64ch; font-size: 1.15rem; }
.ls .ls-bio__text > p:first-child{ font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.45; color: var(--ls-ink); }
.ls .ls-bio__text b, .ls .ls-bio__text strong{ color: var(--ls-ink); font-weight: 500; }

/* ---------- Team Q&A ---------- */

.ls.ls-qa{ padding-block: clamp(56px, 7vw, 112px); }
.ls .ls-qa__grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(24px, 5vw, 96px); align-items: start; }
.ls .ls-qa__aside{ position: sticky; top: 110px; max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ls-card-2) transparent; }
.ls .ls-qa__title{ font-size: clamp(1.8rem, 3vw, 2.6rem); }
.ls .ls-qa__index ol{ display: grid; gap: 2px; margin-top: 28px; counter-reset: q; }
.ls .ls-qa__index a{ counter-increment: q; display: grid; grid-template-columns: 2rem 1fr; padding: 8px 0; font-size: 0.95rem; line-height: 1.4; color: var(--ls-muted); transition: color 0.25s; }
.ls .ls-qa__index a::before{ content: counter(q, decimal-leading-zero); font-variant-numeric: tabular-nums; opacity: 0.6; }
.ls .ls-qa__index a:hover, .ls .ls-qa__index a.is-active{ color: var(--ls-ink); }
.ls .ls-qa__index a.is-active::before{ color: var(--ls-data); opacity: 1; }
.ls .ls-qa__item{ padding: 32px 0; border-top: 1px solid var(--ls-line); scroll-margin-top: 120px; }
.ls .ls-qa__item:first-child{ border-top: 0; padding-top: 0; }
.ls .ls-qa__q{ font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.2; letter-spacing: -0.015em; }
.ls .ls-qa__a{ margin-top: 14px; max-width: 62ch; color: var(--ls-text); font-size: 1.1rem; }

/* ---------- Project cards (team member works) ---------- */

.ls.ls-works{ padding-block: clamp(40px, 5vw, 72px) clamp(72px, 9vw, 144px); }
.ls .ls-works__title{ font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 36px; }
.ls .ls-cards{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.ls .ls-cards--single{ grid-template-columns: minmax(0, 1fr); max-width: 880px; }
.ls .ls-card{ display: grid; gap: 10px; }
.ls .ls-card__media{ aspect-ratio: 16 / 10; margin-bottom: 8px; border-radius: var(--ls-r); }
.ls .ls-card__media img{ transition: transform 0.9s var(--ls-ease); }
.ls .ls-card:hover .ls-card__media img{ transform: scale(1.04); }
.ls .ls-card__meta{ font-size: 0.9rem; }
.ls .ls-card__title{ font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.12; transition: color 0.2s; }
.ls .ls-card:hover .ls-card__title{ color: var(--ls-text); }

/* ---------- Team grid (archive) ---------- */

.ls .ls-filter{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 4vw, 48px); }
.ls .ls-filter button{ font: inherit; font-size: 0.95rem; line-height: 1; padding: 11px 18px; border-radius: 999px; border: 0; cursor: pointer; background: transparent; color: var(--ls-muted); box-shadow: inset 0 0 0 1px var(--ls-line); transition: color 0.2s, background-color 0.2s, box-shadow 0.2s, transform 0.15s; }
.ls .ls-filter button:hover{ color: var(--ls-ink); }
.ls .ls-filter button:active{ transform: scale(0.96); }
.ls .ls-filter button.is-active{ background: var(--ls-accent); color: var(--ls-ink); box-shadow: inset 0 0 0 1px var(--ls-accent); }
.ls .ls-team{ display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(16px, 2vw, 32px); }
.ls .ls-member a{ display: grid; gap: 4px; }
.ls .ls-member__photo{ aspect-ratio: 4 / 5; margin-bottom: 14px; border-radius: var(--ls-r); }
.ls .ls-member__photo img{ object-position: 50% 20%; filter: saturate(0.85); transition: transform 0.9s var(--ls-ease), filter 0.5s; }
.ls .ls-member a:hover .ls-member__photo img{ transform: scale(1.04); filter: saturate(1); }
.ls .ls-member__name{ font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.15; }
.ls .ls-member__line{ margin-top: 8px; font-size: 0.98rem; color: var(--ls-text); max-width: 40ch; }
.ls .ls-member.is-hidden{ display: none; }
.ls .ls-member.is-entering{ animation: ls-fade-up 0.5s var(--ls-ease) both; animation-delay: calc(var(--i, 0) * 50ms); }

/* ---------- Motion ---------- */

@keyframes ls-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ls-zoom { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }

/* Entrance on load: title lines rise in sequence. */
.ls .ls-rise{ animation: ls-fade-up 0.9s var(--ls-ease) both; animation-delay: calc(var(--d, 0) * 90ms + 60ms); }
.ls .ls-zoom-in{ animation: ls-zoom 1.4s var(--ls-ease) both; animation-delay: 0.25s; }
.ls .ls-zoom-in img{ transform-origin: 50% 40%; }

/* Scroll reveals only arm once the script confirms it is running, so content never stays hidden. */
.ls-js .ls-reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.9s var(--ls-ease), transform 0.9s var(--ls-ease); transition-delay: calc(var(--d, 0) * 90ms); }
.ls-js .ls-reveal.is-in { opacity: 1; transform: none; }

/* Scroll-linked drift on large imagery, where the browser supports scroll-driven animation. */
@supports (animation-timeline: view()) {
	.ls .ls-full .ls-parallax, .ls .ls-hero__frame .ls-parallax{ animation: ls-drift linear both; animation-timeline: view(); animation-range: cover; scale: 1.12; }
	@keyframes ls-drift { from { translate: 0 -4%; } to { translate: 0 4%; } }
}

@media (prefers-reduced-motion: reduce) {
	.ls .ls-rise, .ls .ls-zoom-in, .ls .ls-member.is-entering{ animation: none; }
	.ls .ls-flow__dot{ animation: none; }
	.ls-js .ls-reveal { opacity: 1; transform: none; transition: none; }
	.ls .ls-parallax { animation: none !important; scale: none; translate: none; }
	.ls *, .ls *::before, .ls *::after { transition-duration: 0.01ms !important; }
	.ls-progress { display: none; }
}

/* ---------- Contact ---------- */

.ls.ls-contact, .ls.ls-prose{ padding-block: clamp(40px, 6vw, 96px) var(--ls-gap); overflow: clip; isolation: isolate; }
.ls .ls-contact__head{ max-width: 860px; margin-bottom: clamp(36px, 5vw, 72px); }
.ls .ls-contact__title{ font-size: clamp(2.6rem, 6.4vw, 5.75rem); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.ls .ls-contact__intro{ margin-top: clamp(18px, 2vw, 28px); max-width: 52ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--ls-text); }

.ls .ls-channels{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 24px); }
.ls .ls-channel{
	display: grid; grid-template-rows: auto 1fr auto; gap: clamp(28px, 5vw, 72px);
	min-height: clamp(300px, 32vw, 420px); padding: clamp(24px, 3vw, 40px);
	border-radius: var(--ls-r-lg); background: var(--ls-card); box-shadow: inset 0 0 0 1px var(--ls-line);
	transition: transform 0.4s var(--ls-ease), background-color 0.3s, box-shadow 0.3s;
}
.ls .ls-channel--primary{ background: radial-gradient(120% 100% at 0% 0%, #7A3FD0, var(--ls-accent) 60%); box-shadow: none; }
.ls .ls-channel:hover{ transform: translateY(-4px); }
.ls .ls-channel:not(.ls-channel--primary):hover{ background: var(--ls-card-2); }
.ls .ls-channel--primary:hover{ box-shadow: 0 24px 60px -24px var(--ls-bright); }
.ls .ls-channel:active{ transform: scale(0.99); }
.ls .ls-channel__top{ display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ls .ls-channel__icon{ display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(252, 252, 252, 0.1); color: var(--ls-ink); }
.ls .ls-channel__tag{ padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(252, 252, 252, 0.28); color: var(--ls-ink); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; }
.ls .ls-channel__body{ display: grid; gap: 12px; align-content: end; }
.ls .ls-channel__title{ font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.05; }
.ls .ls-channel__text{ max-width: 38ch; color: var(--ls-text); }
.ls .ls-channel--primary .ls-channel__text{ color: rgba(252, 252, 252, 0.86); }
.ls .ls-channel__foot{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 20px; border-top: 1px solid rgba(252, 252, 252, 0.16); color: var(--ls-ink); }
.ls .ls-channel__detail{ font-variant-numeric: tabular-nums; color: rgba(252, 252, 252, 0.8); }
.ls .ls-channel__cta{ display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.ls .ls-channel__cta svg{ transition: transform 0.3s var(--ls-ease); }
.ls .ls-channel:hover .ls-channel__cta svg{ transform: translate(3px, -3px); }

.ls .ls-routes{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 6vw, 88px); border-top: 1px solid var(--ls-line); }
.ls .ls-route{ position: relative; display: grid; gap: 6px; height: 100%; padding: 28px 48px 28px 0; transition: color 0.2s; }
.ls .ls-routes li + li .ls-route{ padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid var(--ls-line); }
.ls .ls-route strong{ color: var(--ls-ink); font-family: var(--ls-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.ls .ls-route__arrow{ position: absolute; right: 20px; top: 28px; color: var(--ls-muted); transition: transform 0.3s var(--ls-ease), color 0.2s; }
.ls .ls-route:hover .ls-route__arrow{ transform: translateX(4px); color: var(--ls-ink); }

/* ---------- Text page ---------- */

.ls .ls-prose__inner{ max-width: calc(760px + var(--ls-gutter) * 2); }
.ls .ls-prose__head{ margin-bottom: clamp(36px, 5vw, 64px); padding-bottom: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--ls-line); }
.ls .ls-prose__title{ font-size: clamp(2.4rem, 5.4vw, 4.5rem); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 16px; }
.ls .ls-prose__body > * + *{ margin-top: 1.05em; }
.ls .ls-prose__body h2{ margin-top: 2.2em; font-family: var(--ls-display); font-weight: 600; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--ls-ink); }
.ls .ls-prose__body h3{ margin-top: 1.6em; font-family: var(--ls-display); font-weight: 600; font-size: 1.15rem; color: var(--ls-ink); }
.ls .ls-prose__body ul{ list-style: disc; padding-left: 1.2em; }
.ls .ls-prose__body li + li{ margin-top: 0.5em; }
.ls .ls-prose__body li::marker{ color: var(--ls-accent); }
.ls .ls-prose__body a{ color: var(--ls-ink); border-bottom: 1px solid var(--ls-accent); }
.ls .ls-prose__body a:hover{ border-color: var(--ls-data); }
.ls .ls-prose__body strong{ color: var(--ls-ink); font-weight: 500; }

/* ---------- Service page ---------- */

.ls .ls-btn--ghost{ background: transparent; box-shadow: inset 0 0 0 1px rgba(252, 252, 252, 0.28); }
.ls .ls-btn--ghost:hover{ box-shadow: inset 0 0 0 1px rgba(252, 252, 252, 0.6); background: rgba(252, 252, 252, 0.06); }
.ls .ls-chips--lg li{ padding: 10px 18px; font-size: 1rem; color: var(--ls-text); }

.ls .ls-svc__hero{ position: relative; padding-block: clamp(40px, 6vw, 96px) clamp(48px, 7vw, 112px); overflow: clip; isolation: isolate; }
.ls .ls-svc__hero-grid{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ls .ls-svc__title{ font-size: clamp(2.6rem, 6.2vw, 5.5rem); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.ls .ls-svc__intro{ margin-top: clamp(18px, 2vw, 28px); max-width: 50ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.ls .ls-svc__actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 40px); }

/* The hero's flow diagram: a vertical run of steps with a pulse travelling down the line. */
.ls .ls-flow{ position: relative; display: grid; gap: 10px; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--ls-r-lg); background: var(--ls-card); box-shadow: inset 0 0 0 1px var(--ls-line); }
.ls .ls-flow__step{ position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 16px; border-radius: 14px; background: var(--ls-card-2); }
.ls .ls-flow__step > span:last-child{ display: grid; gap: 2px; line-height: 1.4; }
.ls .ls-flow__step strong{ color: var(--ls-ink); font-weight: 500; }
.ls .ls-flow__step .ls-muted{ font-size: 0.92rem; }
.ls .ls-flow__dot{ width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--ls-accent); box-shadow: 0 0 0 4px rgba(93, 42, 169, 0.25); animation: ls-flow-pulse 4.8s var(--ls-ease) infinite; animation-delay: calc(var(--i) * 1.2s); }
@keyframes ls-flow-pulse { 0%, 30%, 100% { background: var(--ls-accent); box-shadow: 0 0 0 4px rgba(93, 42, 169, 0.25); } 10% { background: var(--ls-bright); box-shadow: 0 0 0 6px rgba(192, 0, 255, 0.28), 0 0 18px var(--ls-bright); } }

.ls .ls-svc__section{ padding-block: calc(var(--ls-gap) / 2); }
.ls .ls-svc__head{ max-width: 820px; margin-bottom: clamp(32px, 4.5vw, 64px); }
.ls .ls-svc__lede{ margin-top: 18px; max-width: 58ch; color: var(--ls-muted); }
.ls .ls-svc__split{ display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.ls .ls-svc__split .ls-svc__head{ margin-bottom: 0; position: sticky; top: 120px; }
.ls .ls-svc__note{ margin-top: 20px; }

.ls .ls-points{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ls-line); }
.ls .ls-point{ display: grid; gap: 12px; align-content: start; padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px) 0 0; }
.ls .ls-point + .ls-point{ padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid var(--ls-line); }
.ls .ls-point__num, .ls .ls-steps4__num{ font-family: var(--ls-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--ls-data); }
.ls .ls-point h3, .ls .ls-steps4 h3{ font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.15; }
.ls .ls-point p, .ls .ls-steps4 p{ color: var(--ls-muted); }

.ls .ls-areas{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.ls .ls-area{ display: grid; grid-template-rows: auto 1fr auto; gap: 24px; padding: clamp(24px, 3vw, 40px); border-radius: var(--ls-r-lg); background: var(--ls-card); box-shadow: inset 0 0 0 1px var(--ls-line); }
.ls .ls-area__title{ font-size: clamp(1.5rem, 2.4vw, 2rem); }
.ls .ls-area__list{ display: grid; gap: 16px; align-content: start; }
.ls .ls-area__list li{ display: grid; gap: 2px; padding-left: 20px; position: relative; }
.ls .ls-area__list li::before{ content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--ls-accent); }
.ls .ls-area__list strong{ color: var(--ls-ink); font-weight: 500; }
.ls .ls-area__list span{ color: var(--ls-muted); }
.ls .ls-area__outcome{ padding-top: 20px; border-top: 1px solid var(--ls-line); color: var(--ls-ink); }

.ls .ls-steps4{ display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: none; }
.ls .ls-steps4 li{ display: grid; gap: 12px; align-content: start; padding-top: 24px; border-top: 2px solid var(--ls-accent); }

.ls .ls-calc{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--ls-r-lg); overflow: hidden; background: var(--ls-card); box-shadow: inset 0 0 0 1px var(--ls-line); }
.ls .ls-calc__inputs{ display: grid; gap: 32px; align-content: center; padding: clamp(24px, 4vw, 56px); }
.ls .ls-calc__field{ display: grid; grid-template-columns: 1fr auto; gap: 12px 16px; align-items: baseline; }
.ls .ls-calc__field label{ color: var(--ls-text); }
.ls .ls-calc__field output{ font-family: var(--ls-display); font-weight: 600; font-size: 1.25rem; color: var(--ls-ink); font-variant-numeric: tabular-nums; }
.ls .ls-calc__field input[type=range]{ grid-column: 1 / -1; width: 100%; height: 28px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ls .ls-calc__field input[type=range]::-webkit-slider-runnable-track{ height: 4px; border-radius: 999px; background: var(--ls-card-2); box-shadow: inset 0 0 0 1px var(--ls-line); }
.ls .ls-calc__field input[type=range]::-moz-range-track{ height: 4px; border-radius: 999px; background: var(--ls-card-2); }
.ls .ls-calc__field input[type=range]::-webkit-slider-thumb{ -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--ls-ink); border: 5px solid var(--ls-accent); box-shadow: 0 0 0 4px rgba(93, 42, 169, 0.3); }
.ls .ls-calc__field input[type=range]::-moz-range-thumb{ width: 12px; height: 12px; border-radius: 50%; background: var(--ls-ink); border: 5px solid var(--ls-accent); box-shadow: 0 0 0 4px rgba(93, 42, 169, 0.3); }
.ls .ls-calc__field input[type=range]:focus-visible{ outline: 2px solid var(--ls-data); outline-offset: 4px; border-radius: 999px; }
.ls .ls-calc__result{ display: grid; gap: 14px; align-content: center; padding: clamp(24px, 4vw, 56px); background: radial-gradient(120% 100% at 0% 0%, rgba(93, 42, 169, 0.55), rgba(93, 42, 169, 0.12) 70%); }
.ls .ls-calc__big{ font-family: var(--ls-display); font-weight: 600; font-size: clamp(3.5rem, 8vw, 6.5rem); line-height: 0.95; letter-spacing: -0.04em; color: var(--ls-data); font-variant-numeric: tabular-nums; }
.ls .ls-calc__big small{ display: block; margin-top: 12px; font-family: var(--ls-sans); font-weight: 400; font-size: 1.05rem; letter-spacing: 0; line-height: 1.4; color: var(--ls-text); }
.ls .ls-calc__money{ font-size: 1.15rem; color: var(--ls-text); }
.ls .ls-calc__money strong{ color: var(--ls-ink); font-family: var(--ls-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.ls .ls-calc__note{ font-size: 0.9rem; max-width: 46ch; }

.ls .ls-faq{ border-top: 1px solid var(--ls-line); }
.ls .ls-faq__item{ border-bottom: 1px solid var(--ls-line); }
.ls .ls-faq__item summary{ display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font-family: var(--ls-display); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: -0.01em; color: var(--ls-ink); }
.ls .ls-faq__item summary::-webkit-details-marker{ display: none; }
.ls .ls-faq__item summary span{ position: relative; flex: none; width: 16px; height: 16px; }
.ls .ls-faq__item summary span::before, .ls .ls-faq__item summary span::after{ content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: currentColor; transition: transform 0.3s var(--ls-ease); }
.ls .ls-faq__item summary span::after{ transform: rotate(90deg); }
.ls .ls-faq__item[open] summary span::after{ transform: rotate(0deg); }
.ls .ls-faq__item summary:focus-visible{ outline: 2px solid var(--ls-data); outline-offset: 3px; border-radius: 6px; }
.ls .ls-faq__item p{ padding-bottom: 24px; max-width: 62ch; color: var(--ls-muted); }

.ls .ls-svc__close{ padding-block: calc(var(--ls-gap) / 2) var(--ls-gap); }
.ls .ls-svc__close-card{ display: grid; gap: 16px; justify-items: start; padding: clamp(32px, 6vw, 96px); border-radius: var(--ls-r-lg); background: radial-gradient(120% 120% at 0% 0%, #7A3FD0, var(--ls-accent) 55%, #2B1257); }
.ls .ls-svc__close-card .ls-label{ color: rgba(252, 252, 252, 0.75); margin: 0; }
.ls .ls-svc__close-title{ font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 18ch; }
.ls .ls-svc__close-card .ls-body{ max-width: 52ch; color: rgba(252, 252, 252, 0.86); }
.ls .ls-svc__close-card .ls-btn{ background: var(--ls-ink); color: #170F25 !important; }
.ls .ls-svc__close-card .ls-btn--ghost{ background: transparent; color: var(--ls-ink) !important; }

/* ---------- Reviews ---------- */

.ls.ls-reviews{ padding-block: var(--ls-gap) clamp(16px, 3vw, 40px); overflow: clip; }
.ls .ls-reviews__head{ display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(32px, 4.5vw, 64px); }
.ls .ls-reviews__summary{ display: grid; gap: 10px; justify-items: start; }
.ls .ls-reviews__summary .ls-muted{ display: inline-flex; align-items: center; gap: 8px; }
.ls .ls-reviews__score{ display: flex; align-items: center; gap: 16px; }
.ls .ls-reviews__num{ font-family: var(--ls-display); font-weight: 600; font-size: clamp(3rem, 6vw, 5rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--ls-data); font-variant-numeric: tabular-nums; }
/* Five stars drawn once as a mask; the amber fill is clipped to the rating. */
.ls .ls-stars{ --w: 96px; display: inline-block; width: var(--w); height: calc(var(--w) / 5); flex: none;
	background: linear-gradient(90deg, var(--ls-data) calc(var(--rating) / 5 * 100%), rgba(252, 252, 252, 0.18) 0);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m10 1.6 2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.6 7.7l5.8-.8Z'/%3E%3C/svg%3E") 0 0 / 20% 100% repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m10 1.6 2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.6 7.7l5.8-.8Z'/%3E%3C/svg%3E") 0 0 / 20% 100% repeat-x; }
.ls .ls-reviews__score .ls-stars{ --w: 140px; }

.ls .ls-reviews__rail{ overflow-x: auto; scrollbar-width: none; cursor: grab; scroll-snap-type: x proximity; padding-inline: max(var(--ls-gutter), calc((100vw - var(--ls-max)) / 2)); scroll-padding-inline: max(var(--ls-gutter), calc((100vw - var(--ls-max)) / 2)); }
.ls .ls-reviews__rail::-webkit-scrollbar{ display: none; }
.ls .ls-reviews__rail.is-dragging{ cursor: grabbing; scroll-snap-type: none; user-select: none; }
.ls .ls-reviews__rail .ls-rail__track{ display: flex; gap: clamp(12px, 1.6vw, 24px); width: max-content; padding: 4px 0; }
.ls .ls-review{ display: grid; grid-template-rows: auto auto 1fr auto; gap: 18px; width: min(84vw, 440px); padding: clamp(22px, 2.4vw, 32px); border-radius: var(--ls-r-lg); background: var(--ls-card); box-shadow: inset 0 0 0 1px var(--ls-line); scroll-snap-align: start; }
.ls .ls-review__top{ display: flex; align-items: center; justify-content: space-between; }
.ls .ls-review__title{ font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.015em; }
.ls .ls-review .ls-review__text{ display: grid; gap: 0.8em; align-content: start; margin: 0; padding: 0 6px 1.2em 0; border: 0; background: none; font-style: normal; font-size: inherit; color: var(--ls-text); max-height: 15.5em; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ls-card-2) transparent; -webkit-mask-image: linear-gradient(#000 calc(100% - 2.2em), transparent); mask-image: linear-gradient(#000 calc(100% - 2.2em), transparent); }
.ls .ls-review .ls-review__text p{ margin: 0; font-style: normal; }
.ls .ls-review__by{ display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-top: 18px; border-top: 1px solid var(--ls-line); }
.ls .ls-review__by > span:nth-child(2){ display: grid; line-height: 1.35; }
.ls .ls-review__by strong{ color: var(--ls-ink); font-weight: 500; }
.ls .ls-review__by .ls-muted{ font-size: 0.92rem; }
.ls .ls-review__photo{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ls .ls-review__photo--initial{ display: grid; place-items: center; background: var(--ls-accent); color: var(--ls-ink); font-family: var(--ls-display); font-weight: 600; }
.ls .ls-review__link{ display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ls-line); color: var(--ls-ink); transition: background-color 0.2s, transform 0.3s var(--ls-ease); }
.ls .ls-review__link:hover{ background: var(--ls-accent); transform: translate(2px, -2px); }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
	.ls .ls-facts{ grid-template-columns: repeat(3, minmax(0, auto)); }
	.ls .ls-fact--wide{ grid-column: 1 / -1; justify-self: start; }
	.ls .ls-fact--wide dt{ text-align: left; }
	.ls .ls-fact--wide .ls-chips{ justify-content: flex-start; }
}

@media (max-width: 900px) {
	.ls .ls-hero__grid, .ls .ls-text__inner, .ls .ls-split__inner, .ls .ls-process__inner, .ls .ls-next__card, .ls .ls-profile__grid, .ls .ls-bio, .ls .ls-qa__grid{ grid-template-columns: minmax(0, 1fr); }
	.ls .ls-split--flip .ls-split__copy{ order: 0; }
	.ls .ls-process__head, .ls .ls-bio__title, .ls .ls-qa__aside{ position: static; }
	.ls .ls-qa__index{ display: none; }
	.ls .ls-qa__title{ margin-bottom: 8px; }
	.ls .ls-next__media{ order: -1; }
	.ls .ls-profile__photo{ justify-self: stretch; max-height: none; order: -1; aspect-ratio: 4 / 4.4; }
	.ls .ls-profile__copy{ padding-bottom: 0; }
	.ls .ls-full--bleed .ls-full__frame{ height: auto; aspect-ratio: 4 / 3; }
	.ls .ls-full__frame, .ls .ls-hero__frame{ aspect-ratio: 4 / 3; }
	.ls .ls-reviews__head{ grid-template-columns: minmax(0, 1fr); align-items: start; }
	.ls .ls-svc__hero-grid, .ls .ls-svc__split, .ls .ls-points, .ls .ls-areas, .ls .ls-calc{ grid-template-columns: minmax(0, 1fr); }
	.ls .ls-svc__split .ls-svc__head{ position: static; margin-bottom: 8px; }
	.ls .ls-point + .ls-point{ padding-left: 0; border-left: 0; border-top: 1px solid var(--ls-line); margin-top: 24px; }
	.ls .ls-steps4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ls .ls-channels, .ls .ls-routes{ grid-template-columns: minmax(0, 1fr); }
	.ls .ls-routes li + li .ls-route{ padding-left: 0; border-left: 0; border-top: 1px solid var(--ls-line); }
	.ls .ls-channel{ min-height: 0; }
	/* On phones every tile takes the full width; its shape follows the mockup inside. */
	.ls .ls-tiles{ --cols: 1; }
	.ls .ls-tile:has(.is-portrait), .ls .ls-tile.is-portrait{ aspect-ratio: 4 / 5; }
	.ls .ls-tile.is-landscape{ aspect-ratio: 4 / 3; }
	.ls .ls-tiles--1 .ls-tile.is-landscape{ aspect-ratio: 4 / 3; }
	.ls .ls-gallery__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ls .ls-gallery--masonry .ls-gallery__grid{ columns: 2; }
	.ls .ls-rail__item{ width: 82vw; }
	.ls .ls-stat + .ls-stat{ padding-left: 0; border-left: 0; border-top: 1px solid var(--ls-line); }
	.ls .ls-stat{ padding-right: 0; }
}

@media (max-width: 600px) {
	.ls { font-size: 1rem; }
	.ls .ls-steps4{ grid-template-columns: minmax(0, 1fr); }
	.ls .ls-facts{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ls .ls-pair__grid, .ls .ls-cards{ grid-template-columns: minmax(0, 1fr); }
	.ls .ls-gallery__grid{ grid-template-columns: minmax(0, 1fr); }
	.ls .ls-gallery--masonry .ls-gallery__grid{ columns: 1; }
	.ls .ls-credits__inner{ flex-direction: column; align-items: flex-start; }
	.ls .ls-person{ padding-right: 16px; }
}