/* The "stage" blocks of the front site: a full screen, dark home page with scroll driven motion.
   js/stage.js sets --p (how far the section is through the screen, 0 to 1) and --q (how far a pinned
   section has been scrolled, 0 to 1) on each [data-st-scroll]; everything here is worked out from those. */

.st { --st-ink: #f4f2ee; --st-dim: rgba(244, 242, 238, .62); --st-faint: rgba(244, 242, 238, .38); --st-glass: rgba(255, 255, 255, .045); --st-line: rgba(255, 255, 255, .09); --st-gold: var(--accent, #c4a678); position: relative; color: var(--st-ink); }
.st-kicker { margin: 0 0 14px; color: var(--st-gold); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.st-center { text-align: center; }
.st-head { max-width: 820px; margin: 0 0 48px; }
.st-head.st-center { margin-inline: auto; }
.st-h { margin: 0; font-size: clamp(32px, 4.4vw, 60px); font-weight: 600; line-height: 1.02; letter-spacing: -.035em; }
.st-p { margin: 18px 0 0; color: var(--st-dim); font-size: 16.5px; line-height: 1.65; }
.st-btns { margin-top: 28px; }
.st-btns .fr-btns { justify-content: center; margin: 0; }

/* Words and blocks that rise in when they come into view */
[data-st-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
[data-st-reveal].is-in { opacity: 1; transform: none; }
.st-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.st-w > span { display: inline-block; transform: translateY(105%); transition: transform 1s cubic-bezier(.2, .75, .15, 1) var(--d, 0s); }
.is-in .st-w > span, [data-st-words].is-in .st-w > span { transform: none; }

/* Moving silk light behind sections */
.st-silk { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.st-silk i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .55; mix-blend-mode: screen; animation: st-drift 22s ease-in-out infinite alternate; }
.st-silk i:nth-child(1) { left: -12vmax; top: -18vmax; background: radial-gradient(circle, #5a3b8f 0%, transparent 62%); }
.st-silk i:nth-child(2) { right: -16vmax; top: -6vmax; background: radial-gradient(circle, #9b7442 0%, transparent 60%); animation-duration: 26s; animation-delay: -6s; }
.st-silk i:nth-child(3) { left: 20vmax; bottom: -30vmax; background: radial-gradient(circle, #1f5967 0%, transparent 60%); animation-duration: 30s; animation-delay: -12s; }
.st-silk i:nth-child(4) { right: 10vmax; bottom: -24vmax; background: radial-gradient(circle, #6e2453 0%, transparent 60%); animation-duration: 24s; animation-delay: -3s; }
.st-silk.is-soft i { opacity: .28; }
.st-silk::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 9px); mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 70%); }
@keyframes st-drift { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 50% { transform: translate(6vmax, 4vmax) scale(1.12) rotate(20deg); } 100% { transform: translate(-5vmax, 7vmax) scale(.94) rotate(-15deg); } }

/* ---------------- device frames ---------------- */
.st-dev { position: relative; }
.st-dev-screen { position: relative; overflow: hidden; background: #000; }
.st-dev-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.st-dev-window { border-radius: 14px; background: #161617; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 120px rgba(0, 0, 0, .65); overflow: hidden; }
.st-dev-window .st-dev-bar { display: flex; gap: 7px; align-items: center; height: 30px; padding: 0 12px; background: #1d1d1f; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.st-dev-window .st-dev-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3c; }
.st-dev-window .st-dev-screen { aspect-ratio: 16 / 10; }
.st-dev-phone { width: 100%; aspect-ratio: 9 / 19.5; border-radius: 15% / 7%; padding: 3.2%; background: linear-gradient(145deg, #2a2a2d, #0d0d0e 45%, #1c1c1e); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 40px 90px rgba(0, 0, 0, .6); }
.st-dev-phone .st-dev-screen { height: 100%; border-radius: 12.5% / 5.8%; }
.st-dev-phone .st-dev-screen::before { content: ''; position: absolute; z-index: 2; left: 50%; top: 1.6%; width: 30%; height: 3.6%; border-radius: 99px; background: #000; transform: translateX(-50%); }
.st-dev-tablet { width: 100%; aspect-ratio: 3 / 4.1; border-radius: 6%; padding: 3%; background: linear-gradient(145deg, #2a2a2d, #0e0e0f 50%, #1d1d1f); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12), 0 40px 90px rgba(0, 0, 0, .6); }
.st-dev-tablet .st-dev-screen { height: 100%; border-radius: 3.5%; }
.st-dev-laptop .st-dev-lid { padding: 2.2% 2.2% 3%; border-radius: 3% 3% 0 0 / 4.5% 4.5% 0 0; background: #1a1a1c; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
.st-dev-laptop .st-dev-screen { aspect-ratio: 16 / 10; border-radius: 1%; }
.st-dev-laptop .st-dev-base { height: 0; padding-bottom: 3.4%; margin: 0 -7%; border-radius: 0 0 14% 14% / 0 0 100% 100%; background: linear-gradient(#3a3a3d, #1b1b1d); box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.st-dev-desktop .st-dev-monitor { padding: 1.6%; border-radius: 2.4%; background: #1a1a1c; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1), 0 40px 100px rgba(0, 0, 0, .55); }
.st-dev-desktop .st-dev-screen { aspect-ratio: 16 / 10; border-radius: 1%; }
.st-dev-desktop .st-dev-neck { width: 14%; height: 0; padding-bottom: 9%; margin: 0 auto; background: linear-gradient(90deg, #232325, #3a3a3d, #232325); }
.st-dev-desktop .st-dev-foot { width: 30%; height: 0; padding-bottom: 1.6%; margin: 0 auto; border-radius: 40% 40% 6px 6px; background: #2c2c2f; }

/* ---------------- opening ---------------- */
.st-hero { min-height: 100vh; min-height: 100svh; padding: calc(var(--fr-top, 72px) + 9vh) 0 0; overflow: hidden; background: #060607; text-align: center; }
.st-hero-in { position: relative; z-index: 2; }
.st-hero .st-kicker { margin-bottom: 18px; }
.st-hero-h { max-width: 1080px; margin: 0 auto; font-size: clamp(42px, 7vw, 104px); font-weight: 600; line-height: .98; letter-spacing: -.045em; }
.st-hero-p { max-width: 640px; margin: 26px auto 0; color: var(--st-dim); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; }
.st-hero-shot { position: relative; z-index: 1; width: min(1180px, 92vw); margin: 7vh auto 0; perspective: 1800px; }
.st-hero-win { transform-origin: 50% 0; transform: rotateX(calc((1 - min(1, var(--p, 0) * 2.4)) * 22deg)) scale(calc(.86 + min(1, var(--p, 0) * 2.4) * .14)) translateY(calc((1 - min(1, var(--p, 0) * 2.4)) * 30px)); transition: transform .12s linear; }
.st-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; z-index: 3; background: linear-gradient(transparent, #060607); pointer-events: none; }

/* ---------------- moving names ---------------- */
.st-marquee { padding: 46px 0 40px; background: #060607; overflow: hidden; }
.st-mq { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.st-mq + .st-mq { margin-top: 14px; }
.st-mq-track { display: flex; width: max-content; gap: 14px; animation: st-mq 48s linear infinite; }
.st-mq.is-rev .st-mq-track { animation-direction: reverse; animation-duration: 56s; }
.st-mq:hover .st-mq-track { animation-play-state: paused; }
@keyframes st-mq { to { transform: translateX(-33.333%); } }
.st-mq-item { display: inline-flex; align-items: center; gap: 10px; height: 64px; padding: 0 26px; border-radius: 14px; background: var(--st-glass); box-shadow: inset 0 0 0 1px var(--st-line); color: rgba(244, 242, 238, .78); font-size: 20px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.st-mq-item svg.i { color: var(--st-gold); }

/* ---------------- device story (pinned) ---------------- */
.st-story { height: 520vh; background: #08080a; }
.st-story-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
    --a: clamp(0, (var(--q, 0) - .04) / .24, 1);   /* tiles part */
    --t: clamp(0, (var(--q, 0) - .2) / .1, 1);     /* first title gives way to the second */
    --g: clamp(0, (var(--q, 0) - .26) / .16, 1);   /* phone grows */
    --b: clamp(0, (var(--q, 0) - .44) / .26, 1);   /* screens fly in */
    --c: clamp(0, (var(--q, 0) - .72) / .14, 1);   /* card rises */
}
.st-story-t { position: absolute; z-index: 5; left: 50%; top: calc(var(--fr-top, 72px) + 4vh); width: min(1000px, 92vw); margin: 0; font-size: clamp(30px, 4.6vw, 66px); font-weight: 600; line-height: 1.02; letter-spacing: -.04em; text-align: center; transform: translateX(-50%); }
.st-story-t1 { opacity: calc(1 - var(--t)); transform: translateX(-50%) translateY(calc(var(--t) * -24px)); }
.st-story-t2 { opacity: calc(var(--t) * (1 - var(--b))); transform: translateX(-50%) translateY(calc((1 - var(--t)) * 24px)); }
.st-story-stage { position: absolute; inset: 0; }
.st-story-stage > .st-dev, .st-tile { position: absolute; left: 50%; top: 54%; }
.st-story-phone { z-index: 4; width: clamp(150px, 15vw, 230px); transform: translate(-50%, -50%) translateY(calc(var(--b) * 1vh)) scale(calc(.92 + var(--g) * .22 - var(--b) * .42)); }
.st-story-tablet { z-index: 3; width: clamp(170px, 19vw, 300px); opacity: var(--b); transform: translate(-50%, -50%) translate(calc(23vw + (1 - var(--b)) * 50vw), calc(-4vh + (1 - var(--b)) * 10vh)) rotate(calc((1 - var(--b)) * 10deg)); }
.st-story-laptop { z-index: 3; width: clamp(300px, 36vw, 600px); opacity: var(--b); transform: translate(-50%, -50%) translate(calc(-22vw - (1 - var(--b)) * 50vw), calc(-1vh + (1 - var(--b)) * 10vh)) rotate(calc((1 - var(--b)) * -8deg)); }
.st-story-desktop { z-index: 2; width: clamp(320px, 38vw, 660px); opacity: var(--b); transform: translate(-50%, -50%) translate(0, calc(-17vh - (1 - var(--b)) * 70vh)); }
.st-stiles { position: absolute; inset: 0; z-index: 1; opacity: calc(1 - var(--a)); }
.st-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: clamp(78px, 8.6vw, 132px); aspect-ratio: 1; border-radius: 20%; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--st-line); color: var(--st-dim); font-size: clamp(10px, .85vw, 13px); font-weight: 500; text-align: center;
    transform: translate(-50%, -50%) translate(calc(var(--side) * (14vw + var(--col) * 10vw + var(--a) * 38vw)), calc((var(--row) - 1) * clamp(96px, 11vw, 160px))); }
.st-tile b { display: grid; place-items: center; width: 42%; aspect-ratio: 1; border-radius: 30%; background: linear-gradient(135deg, rgba(196, 166, 120, .32), rgba(120, 90, 180, .3)); color: var(--st-ink); font-size: 1.7em; font-weight: 600; }
.st-story-card { position: absolute; z-index: 6; left: 50%; bottom: 4vh; width: min(680px, 90vw); padding: 20px 30px; border-radius: 22px; background: rgba(14, 14, 16, .72); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: inset 0 0 0 1px var(--st-line), 0 30px 80px rgba(0, 0, 0, .5); text-align: center; opacity: var(--c); transform: translateX(-50%) translateY(calc((1 - var(--c)) * 40px)); }
.st-story-card .st-kicker { margin-bottom: 8px; }
.st-story-card h3 { margin: 0; font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; letter-spacing: -.03em; }
.st-story-card p { margin: 10px 0 0; color: var(--st-dim); font-size: 15.5px; line-height: 1.6; }

/* ---------------- photo panels (stacking) ---------------- */
.st-panels { background: #000; }
.st-panel { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.st-panel-in { position: absolute; inset: 0; }
.st-panel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.18 - min(1, var(--p, 0) * 1.6) * .18)); }
.st-panel-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .1), rgba(0, 0, 0, .55)), linear-gradient(transparent 65%, rgba(0, 0, 0, .5)); }
.st-panel-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px;
    opacity: clamp(0, var(--p, 0) * 3 - .5, 1); transform: scale(calc(.86 + clamp(0, var(--p, 0) * 2.2 - .2, 1) * .14)); }
.st-panel-text h2 { margin: 0; font-size: clamp(56px, 11vw, 170px); font-weight: 700; line-height: .9; letter-spacing: -.055em; text-shadow: 0 10px 60px rgba(0, 0, 0, .45); }
.st-panel-text p { margin: 14px 0 0; color: rgba(255, 255, 255, .86); font-size: clamp(16px, 1.6vw, 22px); }

/* ---------------- light band ---------------- */
.st-banner { display: flex; align-items: center; min-height: 72vh; padding: 12vh 0; overflow: hidden; background: #050506; text-align: center; }
.st-banner-in { position: relative; z-index: 2; }
.st-banner-h { max-width: 980px; margin: 0 auto; font-size: clamp(40px, 6.2vw, 92px); font-weight: 600; line-height: .98; letter-spacing: -.045em; }
.st-banner-p { max-width: 620px; margin: 22px auto 0; color: var(--st-dim); font-size: 17px; line-height: 1.6; }
.st-streaks { position: absolute; inset: 0; z-index: 0; transform: perspective(900px) rotateX(calc(18deg - var(--p, 0) * 18deg)) scale(1.3); }
.st-streaks i { position: absolute; left: -50%; top: var(--y); width: var(--w); height: 2px; border-radius: 99px; background: linear-gradient(90deg, transparent, hsl(calc(18 + var(--h) * 1.2) 90% 62% / .9), #fff, transparent); filter: drop-shadow(0 0 12px hsl(calc(18 + var(--h) * 1.2) 90% 60%)); opacity: .65; animation: st-streak var(--t) linear infinite; animation-delay: calc(var(--k) * -.83s); }
.st-streaks i:nth-child(3n) { height: 6px; filter: blur(3px); opacity: .4; }
.st-streaks i:nth-child(4n) { background: linear-gradient(90deg, transparent, rgba(110, 200, 220, .8), #fff, transparent); filter: drop-shadow(0 0 10px rgba(110, 200, 220, .9)); }
@keyframes st-streak { to { transform: translateX(260%); } }
.st-banner::after { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgba(5, 5, 6, .35) 20%, rgba(5, 5, 6, .8) 75%); }

/* ---------------- switching features ---------------- */
.st-tabs { background: #0b0b0d; }
.st-tabs-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 28px; align-items: center; }
.st-tabs-list { display: flex; flex-direction: column; gap: 12px; }
.st-tab { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border-radius: 18px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--st-line); color: var(--st-faint); text-align: left; overflow: hidden; transition: background .3s, color .3s; }
.st-tab b { color: inherit; font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.st-tab span { font-size: 14.5px; line-height: 1.55; }
.st-tab:hover { color: var(--st-dim); }
.st-tab.is-on { background: rgba(255, 255, 255, .07); color: var(--st-ink); }
.st-tab.is-on span { color: var(--st-dim); }
.st-tab-bar { position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: rgba(255, 255, 255, .08); opacity: 0; }
.st-tab-bar i { display: block; width: 0; height: 100%; background: var(--st-gold); }
.st-tab.is-on .st-tab-bar { opacity: 1; }
.st-tab.is-on .st-tab-bar i { animation: st-bar var(--st-tab-ms, 6s) linear forwards; }
[data-st-tabs]:hover .st-tab.is-on .st-tab-bar i { animation-play-state: paused; }
@keyframes st-bar { to { width: 100%; } }
.st-tabs-view { position: relative; display: grid; }
.st-tabs-pane { grid-area: 1 / 1; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .6s, transform .6s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.st-tabs-pane.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* ---------------- glass feature ---------------- */
.st-split { padding: 13vh 0; overflow: hidden; background: #08080a; }
.st-split-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.st-split.is-left .st-glass { order: 2; }
.st-glass { padding: clamp(28px, 4vw, 52px); border-radius: 26px; background: var(--st-glass); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px var(--st-line); }
.st-split-media { display: flex; justify-content: center; transform: translateX(calc((1 - clamp(0, var(--p, 0) * 2.4 - .35, 1)) * 14vw)); opacity: clamp(0, var(--p, 0) * 3 - .35, 1); }
.st-split.is-left .st-split-media { transform: translateX(calc((1 - clamp(0, var(--p, 0) * 2.4 - .35, 1)) * -14vw)); }
.st-split.is-phone .st-dev { width: clamp(220px, 22vw, 320px); }
.st-split.is-tablet .st-dev { width: clamp(260px, 30vw, 440px); }
.st-split.is-window .st-dev { width: 100%; }

/* ---------------- photo tiles ---------------- */
.st-tiles { background: #060607; }
.st-tiles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.st-tiles-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-tiles-grid.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-tiles-grid.n3 { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.st-tiles-grid.n3 .st-ptile:first-child { grid-row: span 2; }
.st-ptile { position: relative; display: block; min-height: 240px; overflow: hidden; border-radius: 22px; background: #111; isolation: isolate; }
.st-tiles-grid.n3 .st-ptile:first-child { min-height: 496px; }
.st-ptile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.st-ptile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0, 0, 0, .55)), rgba(0, 0, 0, .28); transition: background .4s; }
.st-ptile span { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; color: #fff; font-size: clamp(24px, 2.6vw, 38px); font-weight: 600; letter-spacing: -.03em; text-shadow: 0 6px 30px rgba(0, 0, 0, .5); }
a.st-ptile:hover img { transform: scale(1.07); }
a.st-ptile:hover::after { background: linear-gradient(transparent 30%, rgba(0, 0, 0, .45)), rgba(0, 0, 0, .12); }

/* ---------------- who it is for (pinned) ---------------- */
.st-cases { height: calc(var(--n, 3) * 90vh + 70vh); background: #08080a; }
.st-cases-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: calc(var(--fr-top, 72px) + 2vh) 24px 4vh; }
.st-cases-pin > .st-head { position: relative; z-index: 2; margin-bottom: 3vh; }
.st-cases-stage { position: relative; z-index: 1; width: min(1180px, 100%); height: min(62vh, 560px); margin: 0 auto; }
.st-case { position: absolute; inset: 6% 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(180px, 22vw, 300px); border-radius: 26px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--st-line); overflow: hidden; opacity: 0; transform: translateY(30px) scale(.97); transition: opacity .7s, transform .8s cubic-bezier(.2, .7, .2, 1); }
.st-case.is-on { opacity: 1; transform: none; }
.st-case-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(22px, 3vw, 44px); }
.st-case-text h3 { margin: 0 0 12px; font-size: clamp(24px, 2.6vw, 38px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.st-case-text .st-kicker { margin: 0 0 10px; }
.st-case-text p { margin: 0; color: var(--st-dim); font-size: 15px; line-height: 1.6; }
.st-case-photo { position: relative; }
.st-case-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-cases-phone { position: absolute; z-index: 3; left: 50%; top: 50%; width: clamp(170px, 17vw, 250px); transform: translate(-50%, -50%) rotate(calc((var(--q, 0) - .5) * -6deg)); }
.st-cases-phone .st-dev-screen img { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.st-cases-phone .st-dev-screen img.is-on { opacity: 1; }
.st-cases-dots { position: absolute; left: 50%; bottom: -34px; display: flex; gap: 8px; transform: translateX(-50%); }
.st-cases-dots i { width: 28px; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .18); transition: background .3s; }
.st-cases-dots i.is-on { background: var(--st-gold); }

/* ---------------- moving catalog ---------------- */
.st-rail { background: #060607; overflow: hidden; }
.st-rail-mq .st-mq-track { gap: 18px; animation-duration: 70s; }
.st-rail-mq .st-mq-track { animation-name: st-mq2; }
@keyframes st-mq2 { to { transform: translateX(-50%); } }
.st-rail-card { display: flex; flex-direction: column; gap: 4px; width: clamp(170px, 16vw, 230px); color: var(--st-ink); }
.st-rail-art { display: block; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #151517; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.st-rail-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.st-rail-card:hover .st-rail-art img { transform: scale(1.06); }
.st-rail-card b { margin-top: 10px; overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.st-rail-card small { overflow: hidden; color: var(--st-faint); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

/* The plans and call to action blocks, when they follow the stage blocks: the same type and glass */
.st ~ .fr-sec { background: #08080a; }
.st ~ .fr-sec .fr-h { font-weight: 600; letter-spacing: -.035em; }
.st ~ .fr-sec .fr-kicker { color: var(--accent, #c4a678); font-weight: 600; letter-spacing: .2em; }
.st ~ .fr-cta { position: relative; overflow: hidden; }

/* ---------------- tablets and phones ---------------- */
@media (max-width: 900px) {
    .st-tabs-grid, .st-split-in { grid-template-columns: minmax(0, 1fr); }
    .st-split.is-left .st-glass { order: 0; }
    .st-split-media { transform: none !important; opacity: 1 !important; }
    .st-tiles-grid, .st-tiles-grid.n3, .st-tiles-grid.n4 { grid-template-columns: minmax(0, 1fr); }
    .st-tiles-grid.n3 .st-ptile:first-child { grid-row: auto; min-height: 300px; }
    .st-ptile { min-height: 220px; }
    .st-case { inset: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0; }
    .st-case-text { padding: 22px 22px 18px; }
    .st-case-photo { opacity: .35; }
    .st-cases-stage { height: min(68vh, 600px); }
    .st-cases-phone { top: auto; bottom: -4%; width: clamp(130px, 34vw, 190px); transform: translateX(-50%); }
    .st-cases-dots { bottom: -26px; }
}
@media (max-width: 700px) {
    .st-story { height: 460vh; }
    .st-story-t { top: calc(var(--fr-top, 72px) + 2vh); }
    .st-story-phone { width: 38vw; top: 58%; transform: translate(-50%, -50%) translateY(calc(var(--b) * 12vh)) scale(calc(.9 + var(--g) * .14 - var(--b) * .3)); }
    .st-story-tablet { width: 34vw; transform: translate(-50%, -50%) translate(calc(26vw + (1 - var(--b)) * 60vw), calc(10vh + (1 - var(--b)) * 10vh)); }
    .st-story-laptop { width: 62vw; transform: translate(-50%, -50%) translate(calc(-14vw - (1 - var(--b)) * 70vw), calc(13vh + (1 - var(--b)) * 10vh)); }
    .st-story-desktop { width: 78vw; transform: translate(-50%, -50%) translate(0, calc(-6vh - (1 - var(--b)) * 70vh)); }
    .st-tile { width: 21vw; transform: translate(-50%, -50%) translate(calc(var(--side) * (34vw + var(--a) * 40vw)), calc((var(--row) - 1) * 26vw + var(--col) * 9vw - 4vw)); }
    .st-tile:nth-child(n+7) { display: none; }
    .st-story-card { padding: 20px; bottom: 3vh; }
    .st-mq-item { height: 52px; padding: 0 18px; font-size: 16px; }
    .st-hero-shot { width: 108vw; margin-left: -4vw; }
}

/* ---------------- less motion ---------------- */
@media (prefers-reduced-motion: reduce) {
    .st, .st * { animation: none !important; transition: none !important; }
    [data-st-reveal], .st-w > span { opacity: 1 !important; transform: none !important; }
    .st-story, .st-cases { height: auto; }
    .st-story-pin, .st-cases-pin { position: relative; height: auto; min-height: 100vh; --q: 1 !important; }
    .st-story-pin { min-height: 820px; }
    .st-cases-pin { --q: .5 !important; }
    .st-hero-win, .st-panel-img, .st-panel-text, .st-split-media, .st-streaks { transform: none !important; opacity: 1 !important; }
    .st-panel { position: relative; }
    .st-mq-track { flex-wrap: wrap; justify-content: center; width: auto; }
    .st-mq.is-rev, .st-mq-track > [aria-hidden="true"] { display: none; }
}
.st ~ .fr-cta-wrap .fr-cta.is-dark { border-radius: 26px; background: radial-gradient(ellipse at 15% 0%, rgba(155, 116, 66, .38), transparent 60%), radial-gradient(ellipse at 90% 100%, rgba(90, 59, 143, .4), transparent 60%), #0e0e10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); padding: clamp(40px, 6vw, 80px) clamp(28px, 5vw, 72px); }
.st ~ .fr-cta-wrap .fr-cta .fr-h { font-size: clamp(32px, 4.4vw, 60px); }