/* v81: the welcome pages, built from the Figma "current version" layers (figma/build-site.rb → js/landing-v5-pages.js).
   Every layer is positioned in Figma px through --u (1 Figma px). Motion lives in js/landing-v5.js. */
.lp5 { --u: calc(100cqw / 1920); position: relative; width: 100%; min-height: 100vh; background: #000; overflow-x: clip; container-type: inline-size;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.lp5 .pg { position: relative; width: 100%; overflow: clip; }
.lp5 .pg .c, .lp5 .pg .l, .lp5 .pg .mk { position: absolute; box-sizing: border-box; margin: 0; }
.lp5 .pg .mk { overflow: clip; }
.lp5 .pg .t { display: flex; flex-direction: column; overflow-wrap: normal; }
.lp5 .pg .t p { margin: 0; font: inherit; text-box: inherit; }
.lp5 .pg .t span { -webkit-box-decoration-break: clone; }
/* gradient text: the gradient is painted on each run so it covers the glyphs whatever the line height */
.lp5 .pg .t[style*="--tg"] span { background-image: var(--tg); -webkit-background-clip: text; background-clip: text; }
.lp5 .pg svg.l { display: block; }
.lp5 .pg .st { position: absolute; display: block; pointer-events: none; box-sizing: border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* Figma "Noise" effect: a fine grain over the layer */
.lp5 .pg .nz::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 -0.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: calc(160 * var(--u)) calc(160 * var(--u));
  -webkit-mask-image: var(--nzm, none); mask-image: var(--nzm, none); }
.lp5 .hot { position: absolute; z-index: 20; display: block; border-radius: 999px; transition: box-shadow .35s ease, background-color .35s ease; }
.lp5 .hot:hover { background: rgba(255,255,255,.06); box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 0 24px rgba(255,255,255,.25); }
.lp5 .hot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lp5-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
/* motion helpers */
.lp5 .pg .w { display: inline-block; white-space: pre; will-change: transform; padding: .3em .04em; margin: -.3em -.04em; }
.lp5 .pg .t[style*="--tg"] span:has(> .w) { background-image: none; }
.lp5 .pg .ph-off { opacity: 0 !important; transition: opacity .2s ease; }
.lp5 .pg [data-n] { pointer-events: none; }
.lp5 .pg .lk, .lp5 .pg .lk *, .lp5 .pg .tap, .lp5 .pg .hv, .lp5 .pg .spin, .lp5 .pg .spin * { pointer-events: auto; }
.lp5 .pg .lk, .lp5 .pg .tap { cursor: pointer; }
.lp5 .pg .lk:focus-visible, .lp5 .pg .tap:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }
.lp5 .pg .nav .lk .t { transition: text-shadow .3s ease; }

.lp5 .pg .spin { cursor: grab; touch-action: pan-y; }
.lp5 .pg .spin.drag { cursor: grabbing; }
.lp5 .pg .nav { z-index: 30; }
/* the Call Me Maybe form sits on the Figma field boxes */
.lp5 .lp5-form input, .lp5 .lp5-form textarea { position: absolute; z-index: 25; box-sizing: border-box; margin: 0; border: 0; outline: 0; background: transparent; color: #fff;
  font-size: calc(20*var(--u)); resize: none; caret-color: #fff; border-radius: calc(10*var(--u)); transition: box-shadow .3s ease; }
.lp5 .lp5-form input:focus, .lp5 .lp5-form textarea:focus { box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 calc(24*var(--u)) rgba(255,255,255,.18); }
.lp5 .lp5-form .bad { box-shadow: 0 0 0 1px rgba(255,90,90,.8); }
.lp5.is-loading .pg { visibility: hidden; }
/* hero: the white frame drawing itself */
.lp5 .pg svg.draw { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lp5 .pg svg.draw path { fill: none; stroke: #fff; stroke-width: 1; stroke-dasharray: 1000; }
.lp5 .pg .slice { will-change: transform, opacity, filter; }
/* full-width bands fade into their neighbours at the top and bottom edge (set up in landing-v5.js) */
.lp5 .pg .band { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%); }
/* ---- hover states copied from the Figma prototype's component variants ---- */
/* Call Me Maybe: fills white, text turns black and semibold (0.3 s ease out) */
.lp5 .pg .fx-call [data-n="Rectangle 3"] { transition: background-color .3s cubic-bezier(0,0,.58,1); }
.lp5 .pg .fx-call:hover [data-n="Rectangle 3"] { background-color: #fff; }
.lp5 .pg .fx-call .t span { transition: color .3s cubic-bezier(0,0,.58,1); }
.lp5 .pg .fx-call:hover .t span { color: #000 !important; font-weight: 600 !important; }
/* Sign Up: fills white, text and arrow turn near-black, the arrow turns up to the right (0.3 s ease out) */
.lp5 .pg .fx-sign [data-n="Rectangle 191"] { transition: background-color .3s cubic-bezier(0,0,.58,1); }
.lp5 .pg .fx-sign:hover [data-n="Rectangle 191"] { background-color: #fff; }
.lp5 .pg .fx-sign .t span { transition: color .3s cubic-bezier(0,0,.58,1); }
.lp5 .pg .fx-sign:hover .t span { color: #0e0e0e !important; }
.lp5 .pg .fx-sign svg[data-n="Arrow 8"] { transition: rotate .3s cubic-bezier(0,0,.58,1); }
.lp5 .pg .fx-sign svg[data-n="Arrow 8"] path { transition: fill .3s cubic-bezier(0,0,.58,1); }
.lp5 .pg .fx-sign:hover svg[data-n="Arrow 8"] { rotate: 80deg; }
.lp5 .pg .fx-sign:hover svg[data-n="Arrow 8"] path { fill: #0e0e0e; }
/* nav links: 15 → 17 px and grey (0.3 s ease out) */
.lp5 .pg .fx-nav .t { transition: scale .3s cubic-bezier(0,0,.58,1); }
.lp5 .pg .fx-nav .t span { transition: color .3s cubic-bezier(0,0,.58,1); }
.lp5 .pg .fx-nav:hover .t { scale: 1.133; }
.lp5 .pg .fx-nav:hover .t span { color: #8c8c8c !important; }
/* service rows: a soft grey gradient lights the row, the title grows 40 → 42 and the number 20 → 22 (0.3 s ease out) */
.lp5 .pg .fx-row [data-n="Rectangle 174"]::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none;
  background: linear-gradient(55deg, rgba(196,196,196,.5), rgba(68,68,68,.5)); transition: opacity .3s cubic-bezier(0,0,.58,1); }
.lp5 .pg .fx-row:hover [data-n="Rectangle 174"]::before { opacity: 1; }
.lp5 .pg .fx-row .fx-title, .lp5 .pg .fx-row .fx-num { transition: scale .3s cubic-bezier(0,0,.58,1); transform-origin: 0 50%; }
.lp5 .pg .fx-row .fx-num { transform-origin: 50% 50%; }
.lp5 .pg .fx-row:hover .fx-title { scale: 1.05; }
.lp5 .pg .fx-row:hover .fx-num { scale: 1.1; }
/* team cards: grow from 268 × 321 to 288 × 345 and light up a little (0.2 s ease in) */
.lp5 .pg .fx-team { transition: scale .2s cubic-bezier(.42,0,1,1), filter .2s cubic-bezier(.42,0,1,1); transform-origin: 50% 0; pointer-events: auto; }
.lp5 .pg .fx-team:hover { scale: 1.075; filter: brightness(1.15); z-index: 5; }
.lp5 .pg .fx-row { pointer-events: auto; }
/* prototype scrolling: sticky layers sit in a wrapper that spans their parent, frames that scroll sideways hide their bar */
.lp5 .pg .stk { position: absolute; pointer-events: none; }
.lp5 .pg .stk > [data-sticky] { position: sticky !important; top: 0 !important; left: auto !important; margin: 0; }
.lp5 .pg .stk > .nav { pointer-events: auto; }
.lp5 .pg [data-hscroll] { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; pointer-events: auto; cursor: grab; }
.lp5 .pg [data-hscroll]::-webkit-scrollbar { display: none; }
.lp5 .pg [data-hscroll].drag { cursor: grabbing; }
.lp5.is-motion .pg .hero-in { opacity: 0; }
/* "It starts with YOU.": on hover YOU. turns from white to a dark gradient (Figma variant, 0.1 s ease out) */
.lp5 .pg .fx-you { pointer-events: auto; }
.lp5 .pg .fx-you:hover .t p > span:last-child { --tg: linear-gradient(-106deg, #000 0%, rgba(0,0,0,.49) 100%); }
/* ACCESSIBLE · FLEXIBLE · CRAZY: letters that move on their own */
.lp5 .pg .ch { display: inline-block; padding: .3em .02em; margin: -.3em -.02em; will-change: transform; }
.lp5 .pg .t[style*="--tg"] span:has(> .ch) { background-image: none; }
.lp5 .pg [data-n="CRAZY"] p > span { display: inline-block; }
.lp5 .pg [role="switch"] { cursor: pointer; }
.lp5 .pg [role="switch"]:focus-visible { outline: 2px solid #000; outline-offset: 4px; border-radius: 999px; }
/* "We are Just-Jame Studio Corp.": one 3D card with a soft band of light */
.lp5 .pg .about3d { position: absolute; transform-style: flat; will-change: transform; }
.lp5 .pg .about3d > [data-n="Rectangle 188"] { overflow: clip; }
.lp5 .pg .about3d .shine, .lp5 .pg .kpi3d .shine { position: absolute; top: -25%; bottom: -25%; left: 0; width: calc(240*var(--u)); pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.07) 35%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.07) 65%, rgba(255,255,255,0) 100%);
  mix-blend-mode: screen; rotate: 14deg; visibility: hidden; }
/* BRANDS THAT TRUSTED US: the logo under the cursor lights up softly and grows a little */
.lp5 .pg .brand { transition: scale .35s cubic-bezier(.2,.7,.2,1), filter .35s ease-out; }
.lp5 .pg .brand.on { scale: 1.12; z-index: 2; filter: brightness(1.45) drop-shadow(0 0 calc(10*var(--u)) rgba(255,255,255,.45)); }
.lp5 .pg .odo { font-variant-numeric: tabular-nums; }
.lp5 .pg .odo p { white-space: nowrap; }
/* hero: a chrome-like sheen that runs across the JUST-JAME STUDIO letters (masked to the wordmark itself) */
.lp5 .pg .glint { position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; background-size: 260% 100%; background-position: -60% 0;
  background-image: linear-gradient(105deg, rgba(90,90,90,0) 36%, rgba(90,90,90,.8) 45%, rgba(255,255,255,1) 50%, rgba(90,90,90,.8) 55%, rgba(90,90,90,0) 64%); }
/* "best work" → "It starts with YOU.": pictures fade into the dark at their edges; YOU. scales on its own */
.lp5 .pg .soft { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%); }
.lp5 .pg .you-word { display: inline-block; padding: .3em .04em; margin: -.3em -.04em; }
/* the word "start" travelling from "But the best work…" into "It starts with YOU." */
.lp5 .fly-word { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; opacity: 0; white-space: nowrap; color: #fff;
  font-family: 'Montserrat', sans-serif; line-height: 1; will-change: transform, font-size; }
.lp5 .fly-word .s { opacity: 0; }
/* the "with you" process: the WE block holds on screen while the wheel turns */
.lp5 .pg .hold > .held { position: sticky !important; top: max(0px, calc((100vh - 820 * var(--u)) / 2)) !important; left: auto !important; margin: 0; }
/* floating silver pieces and flowing silky shapes (motion in landing-v5.js) */
.lp5 .pg .floaty { translate: calc(var(--fx, 0px) + var(--hx, 0px)) calc(var(--fy, 0px) + var(--hy, 0px)); rotate: var(--fr, 0deg); scale: var(--fs, 1); pointer-events: auto; will-change: translate, rotate, scale, opacity; }
.lp5 .pg .silky { translate: var(--sx, 0px) var(--sy, 0px); rotate: var(--sr, 0deg); scale: var(--ss, 1); will-change: translate, rotate, scale; }
/* "We GROW OLD": the tight letter spacing made the silver fill stop short of the last letter (the D looked cut);
   the fill now reaches past it without moving the text */
.lp5 .pg [data-n="Frame 8"] .t[style*="--tg"] span { padding-right: .12em; margin-right: -.12em; }
.lp5 .pg [data-n="PAC-MASK"] { filter: brightness(var(--pb, 1)) drop-shadow(0 0 var(--pr, 0px) rgba(255,255,255,var(--pa, 0))); will-change: opacity, filter; }
/* the grey L pieces in ACCESSIBLE / FLEXIBLE / CRAZY drift gently (on top of their Figma rotation) */
.lp5 .pg .drift { translate: var(--dx, 0px) var(--dy, 0px) !important; rotate: var(--dr, 0deg) !important; will-change: translate, rotate; }
/* top bar: its background sits on a layer that fades away when only the logo stays (lp5MiniNav) */
.lp5 .pg .nav.navbg::before { content: ""; position: absolute; inset: 0; background-image: var(--navbg); opacity: var(--navbgo, 1); pointer-events: none; }
.lp5 .pg .nav.mini { pointer-events: none; }
.lp5 .pg .nav.mini .navlogo { pointer-events: auto; filter: drop-shadow(0 0 1px rgba(0,0,0,.55)) drop-shadow(0 2px 8px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(0,0,0,.25)); }
.lp5 .pg .nav.mini * { pointer-events: none !important; }
.lp5 .pg .nav.mini .navlogo, .lp5 .pg .nav.mini .navlogo * { pointer-events: auto !important; }
/* team photo (Sino Kami): the lit copies that take turns over the dimmed photo */
.lp5 .pg .team-lit { filter: brightness(1.12) contrast(1.06); pointer-events: none; will-change: opacity; }
/* MEET THE TEAM (Sino Kami): the silver ring turns slowly; a soft band of light crosses each card */
@keyframes lp5-ring { to { rotate: 360deg; } }
.lp5 .pg .ring-spin { animation: lp5-ring 16s linear infinite; }
.lp5 .pg .tshine { position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.07) 40%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.07) 60%, rgba(255,255,255,0) 100%); }
@media (prefers-reduced-motion: reduce){ .lp5 .pg .ring-spin { animation: none; } }
.lp5 .pg .navlogo { transition: filter .4s ease; }
/* Works: the reel carousel (drag / swipe sideways) */
.lp5 .pg .reel { pointer-events: auto; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-drag: none; will-change: transform, opacity; }
.lp5 .pg .reel:active { cursor: grabbing; }
/* Works: Go Back */
.lp5 .pg .fx-back { pointer-events: auto; cursor: pointer; transition: scale .3s ease, filter .3s ease; }
.lp5 .pg .fx-back:hover { scale: 1.04; filter: brightness(1.2); }
/* Works: "Our Works" — a slow silver shine travels across "Works" and its soft glow breathes */
@keyframes lp5-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
@keyframes lp5-glowbreathe { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); } 50% { filter: drop-shadow(0 0 calc(18*var(--u)) rgba(255,255,255,.28)); } }
.lp5 .pg .t[style*="--tg"] span.shimmer { background-image: linear-gradient(100deg, #8f8f8f 0%, #f4f4f4 30%, #ffffff 45%, #bdbdbd 55%, #f4f4f4 70%, #8f8f8f 100%); background-size: 250% 100%; padding-right: .12em; margin-right: -.12em; /* the shine reaches the whole s */
  animation: lp5-shimmer 5.5s cubic-bezier(.45,0,.25,1) infinite, lp5-glowbreathe 5.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .lp5 .pg .t[style*="--tg"] span.shimmer { animation: none; } }
/* Works grid: on hover the photo zooms in a little and a soft band of light passes across it once */
.lp5 .pg .wtile { pointer-events: auto; }
.lp5 .pg .wtile .mk > .l { transition: scale .9s cubic-bezier(.22,1,.36,1); }
.lp5 .pg .wtile:hover .mk > .l { scale: 1.06; }
.lp5 .pg .wshine { position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.12) 45%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.12) 55%, rgba(255,255,255,0) 100%);
  transform: translateX(-160%) skewX(-18deg); }
.lp5 .pg .wtile:hover .wshine { transform: translateX(300%) skewX(-18deg); transition: transform 1.1s cubic-bezier(.45,0,.25,1); }
@media (prefers-reduced-motion: reduce){ .lp5 .pg .wtile .mk > .l, .lp5 .pg .wtile:hover .wshine { transition: none; } }
/* Call me Maybe: a soft light passes through "LET'S DO IT THE JUST-JAME WAY." on a loop (about 1.6 s across, then a short rest) */
@keyframes lp5-shine-loop { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }
.lp5 .pg .t[style*="--tg"] span.shine-loop { background-image: linear-gradient(100deg, #d6d6d6 0%, #d6d6d6 38%, #ffffff 48%, #ffffff 52%, #d6d6d6 62%, #d6d6d6 100%);
  background-size: 260% 100%; padding-right: .12em; margin-right: -.12em; animation: lp5-shine-loop 3s cubic-bezier(.45,0,.25,1) infinite; }
@media (prefers-reduced-motion: reduce){ .lp5 .pg .t[style*="--tg"] span.shine-loop { animation: none; } }
/* the silky background group keeps only a whisper of grain (it stops smooth fades from showing steps) */
.lp5 .pg .nz.nz-soft::after { opacity: .06; }
/* lighter mode (phones, tablets, low-power computers): the big background shapes stay still, so no layer reservation */
.lp5.lite .pg .silky { will-change: auto; }