/* rmkm studios — home v3 (2026-10-29). Home-only layer on top of styles.css (tokens, header, footer, badges, .btn, .lb).
   Moves (see _web/_review/rmkm-refs/REFS.md): 1 wordmark-as-hero · 2 editorial index with sticky heads · 3 work shown big as a reel.
   Rules: transform/opacity only · page complete at rest (every hidden start state lives under html.js-motion and is
   released by home.js or the 2.5s failsafe) · hover motion gated by (hover:hover) and (pointer:fine) · reduced-motion = still page. */

:root{
  --rh:clamp(200px,34vh,380px);            /* hero reel tile height */
  --wh:clamp(260px,50vh,560px);
  --wh2:clamp(180px,30vh,340px);           /* work reel — 2 rows */            /* work reel tile height — fits under the pinned head at 800px tall */
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --t-index:clamp(64px,9vw,140px);         /* line numbers */
  --t-sec:clamp(32px,5.2vw,68px);          /* section h2 */
}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* film grain — one fixed layer, static, never animated */
body.home::after{content:"";position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:180px 180px}
@media(prefers-color-scheme:light){ body.home::after{opacity:.035} }
:root[data-theme="light"] body.home::after{opacity:.035}

/* header sits over the hero without a hairline until scrolled (shared header styles do the rest) */
body.home header.site{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body.home header.site.scrolled{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4)}

/* ── 1. Hero — the lockup is the headline ─────────────────────────────── */
.hero{position:relative;display:flex;flex-direction:column;min-height:calc(100svh - var(--nav-h));overflow:hidden}
.hero-top{flex:1 0 auto;display:flex;flex-direction:column;justify-content:flex-end;padding-top:clamp(24px,6vh,64px);padding-bottom:clamp(20px,4vh,40px);width:100%}
.hero-mark{position:relative;width:100%;line-height:0}
.hero-mark img{display:block;width:100%;height:auto;will-change:clip-path,transform}
.hero-mark .logo-dark{display:none}
:root[data-theme="dark"] .hero-mark .logo-light{display:none} :root[data-theme="dark"] .hero-mark .logo-dark{display:block}
:root[data-theme="light"] .hero-mark .logo-light{display:block} :root[data-theme="light"] .hero-mark .logo-dark{display:none}
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .hero-mark .logo-light{display:none} :root:not([data-theme="light"]) .hero-mark .logo-dark{display:block} }
.hero-h1{margin-top:clamp(20px,3.6vh,40px);font-size:clamp(22px,3.1vw,42px);font-weight:500;letter-spacing:-0.03em;line-height:1.12;max-width:26ch;word-break:keep-all;text-wrap:balance}
html[lang="ko"] .hero-h1{letter-spacing:-0.02em;max-width:22ch}
.hero-h1 .hl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero-h1 .hli{display:block;will-change:transform}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--s5) var(--s6);align-items:end;margin-top:clamp(24px,4.6vh,48px)}
.hf-col p{margin-top:8px;font-size:14px;line-height:1.5;color:var(--muted);word-break:keep-all}
.hf-col p b{font-weight:500;color:var(--ink)}
.hf-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.hf-cta .btn{height:46px;padding:0 20px;font-size:14.5px}
@media(max-width:720px){
  .hero-foot{grid-template-columns:1fr 1fr}
  .hf-cta{grid-column:1/-1;justify-content:flex-start}
  .hf-cta .btn{height:44px}
}
.hero-cue{position:absolute;right:var(--inset);bottom:calc(var(--rh) + 28px);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:8px;pointer-events:none}
.hero-cue .ico{width:14px;height:14px}
@media(max-width:720px){ .hero-cue{display:none} }

/* ── Reels (hero + work) ───────────────────────────────────────────────── */
.reel{position:relative;width:100%;overflow:hidden;--h:var(--rh);touch-action:pan-y}
.reel-track{display:flex;gap:12px;width:max-content;will-change:transform;padding:0 var(--inset)}
.reel .rtile{position:relative;flex:none;display:block;height:var(--h);border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2);
  transition:transform 260ms var(--ease-out),border-color 200ms var(--ease-std)}
.reel .rtile img{display:block;height:100%;width:auto;object-fit:cover;object-position:top;user-select:none;-webkit-user-drag:none;pointer-events:none}
.reel .tile-cap{position:absolute;left:0;right:0;bottom:0;padding:48px 14px 12px;display:flex;flex-direction:column;gap:2px;color:#fff;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0));opacity:0;transform:translateY(6px);transition:opacity 220ms var(--ease-out),transform 260ms var(--ease-out)}
.reel .tile-cap b{font-size:14px;font-weight:600;letter-spacing:-0.012em;line-height:1.2}
.reel .tile-cap span{font-size:12px;color:rgba(255,255,255,.78);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reel .rtile:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(hover:hover) and (pointer:fine){
  .reel .rtile:hover{border-color:var(--line-strong)}
  .reel .rtile:hover .tile-cap,.reel .rtile:focus-visible .tile-cap{opacity:1;transform:translateY(0)}
  .reel.is-dragging .rtile{cursor:grabbing}
  .reel.can-drag{cursor:grab}
}
.reel.is-dragging .rtile{transition:none}
.hero-reel{margin-top:auto;padding-bottom:clamp(20px,4vh,36px)}
.reel .tile-web img{height:100%;width:calc(var(--h) * 1.6)}
.reel .tile-sq img{width:var(--h)}
/* mobile / coarse pointer: native swipe + snap, second (loop) copy hidden */
@media(max-width:1023px),(hover:none){
  .reel{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  .reel::-webkit-scrollbar{display:none}
  .reel:not(.work-row) .reel-track{will-change:auto;transform:none!important}
  .reel .rtile{scroll-snap-align:start}
  .reel .rtile.dup{display:none}
  .reel .tile-cap{opacity:1;transform:none}
}

/* ── 2. Sections · split headings ─────────────────────────────────────── */
.sec{padding:clamp(72px,11vw,144px) 0 0}
.sec:last-child{padding-bottom:var(--s8)}
.sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s4) var(--s7);align-items:end;margin-bottom:clamp(32px,5vw,64px)}
.sec-head .label{align-self:start;padding-top:.9em}
.sec-head h2{font-size:var(--t-sec);font-weight:500;letter-spacing:-0.04em;line-height:1.0;word-break:keep-all;text-wrap:balance}
html[lang="ko"] .sec-head h2{letter-spacing:-0.025em;line-height:1.08}
.sec-head .sec-sub{grid-column:2;font-size:16px;color:var(--muted);max-width:52ch;word-break:keep-all}
@media(max-width:820px){ .sec-head{grid-template-columns:1fr;gap:var(--s3)} .sec-head .sec-sub{grid-column:1} .sec-head .label{padding-top:0} }
/* split words: outer clips, inner moves (JS wraps words; at rest both are plain inline text) */
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .02em .1em;margin:0 -.02em -.1em}
.split .wi{display:inline-block;will-change:transform}
#what,#work,#how,#numbers,#contact,[id^="line-"]{scroll-margin-top:calc(var(--nav-h) + 8px)}
/* 2026-10-29 오너: "하는 일" 인트로 헤딩 삭제 — 라벨만 두고 01로 바로 이어진다 */
.sec-head-min{display:block;margin-bottom:var(--s3)}
#what .lines{border-top:0}
#what .line:first-child{padding-top:var(--s5)}
.sec-head-min .label{padding-top:0}
#what{padding-top:clamp(56px,8vw,104px)}

/* ── 2b. Index — four lines, sticky head left, services right ──────────── */
.lines{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.line{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6) var(--s7);padding:clamp(40px,6vw,80px) 0;border-bottom:1px solid var(--line)}
.line-head{min-width:0;align-self:start;position:sticky;top:calc(var(--nav-h) + 24px)}
.line-n{display:block;font-size:var(--t-index);font-weight:500;letter-spacing:-0.06em;line-height:.9;color:var(--ink);font-variant-numeric:tabular-nums}
.line-n .d{display:inline-block;overflow:hidden;vertical-align:top;height:.9em}
.line-n .d span{display:block;will-change:transform}
.line-head h3{margin-top:clamp(14px,2vw,24px);font-size:clamp(26px,3.2vw,44px);font-weight:500;letter-spacing:-0.035em;line-height:1.05;word-break:keep-all}
.line-value{margin-top:var(--s3);font-size:16px;line-height:1.55;color:var(--muted);max-width:36ch;word-break:keep-all}
.line-body{min-width:0;display:flex;flex-direction:column;gap:var(--s5)}
.line-body>.label{margin-top:var(--s3)}
@media(max-width:820px){
  .line{grid-template-columns:1fr;gap:var(--s5);padding:var(--s7) 0}
  .line-head{position:static}
}

/* apps roster — hairline rows: icon · name/sub · official badges */
.roster{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.roster .row{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);min-width:0;
  transition:background 160ms var(--ease-std)}
.roster .row .icon{width:44px;height:44px}
.roster .row-id{min-width:0}
.roster .row-name{display:block;font-size:17px;font-weight:600;letter-spacing:-0.015em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster .row-name::after{content:"";position:absolute;inset:0;z-index:1}
.roster .row-sub{display:block;margin-top:2px;font-size:12.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster .stores{position:relative;z-index:2;gap:6px}
.roster .stores .badge{height:32px}
.roster .row:has(.row-name:focus-visible){outline:2px solid var(--ink);outline-offset:-2px;border-radius:8px}
.roster .row-name:focus-visible{outline:none}
@media(hover:hover) and (pointer:fine){ .roster .row:hover .row-name{color:var(--ink)} .roster .row:hover .icon{transform:scale(1.04)} }
.roster .icon{transition:transform 220ms var(--ease-out)}
@media(max-width:560px){
  .roster .row{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"icon id" "stores stores";row-gap:10px}
  .roster .row .icon{grid-area:icon;width:40px;height:40px}
  .roster .row-id{grid-area:id}
  .roster .stores{grid-area:stores}
  .roster .stores .badge{height:34px}
}

/* web-service cards — browser frame with a large crop of the key scene + name + solid CTA */
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) 14px}
.svc-grid-tools .svc-featured{grid-column:1/-1}
.svc-grid-solo{grid-template-columns:1fr}
.svc{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0}
.svc-id{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);min-width:0}
.svc-txt{min-width:0}
.svc-link{display:block;font-size:19px;font-weight:600;letter-spacing:-0.02em;line-height:1.2;word-break:keep-all}
.svc-link::after{content:"";position:absolute;inset:0;z-index:1}
.svc:has(.svc-link:focus-visible){outline:2px solid var(--ink);outline-offset:4px;border-radius:14px}
.svc-link:focus-visible{outline:none}
.svc-sub{margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--muted);word-break:keep-all;max-width:44ch}
.svc .stores{position:relative;z-index:2;flex:none}
.svc-featured .svc-link{font-size:clamp(22px,2.4vw,28px)}
/* browser frame: top bar + viewport; the image is positioned by --z (zoom) and --fx/--fy (focal 0..1) */
.frame{position:relative;display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2);
  --z:1.6;--fx:0;--fy:.15;transition:border-color 200ms var(--ease-std)}
.frame::before{content:"";position:absolute;left:0;right:0;top:0;height:24px;background:var(--surface);border-bottom:1px solid var(--line);z-index:2}
.frame::after{content:"";position:absolute;left:12px;top:9px;width:6px;height:6px;border-radius:50%;z-index:3;background:var(--line-strong);
  box-shadow:11px 0 0 var(--line-strong),22px 0 0 var(--line-strong)}
.frame-view{position:absolute;left:0;right:0;top:24px;bottom:0;overflow:hidden}
.frame-view img{position:absolute;max-width:none;left:calc((1 - var(--z)) * 100% * var(--fx));top:calc((1 - var(--z)) * 100% * var(--fy));width:calc(var(--z) * 100%);height:auto;
  display:block;transform-origin:0 0;transition:transform .6s var(--ease-expo)}
.frame-sq{aspect-ratio:1/1;--z:1;--fx:.5;--fy:.5}
.frame-sq::before,.frame-sq::after{display:none}
.frame-sq .frame-view{top:0}
.frame-sq .frame-view img{width:100%;height:100%;object-fit:cover;left:0;top:0}
@media(hover:hover) and (pointer:fine){
  .svc:hover .frame{border-color:var(--line-strong)}
  .svc:hover .frame-view img{transform:scale(1.025)}
}
.svc-goods{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5) var(--s6);align-items:center}
.svc-goods .svc-id{flex-direction:column;align-items:flex-start;gap:var(--s4)}
.svc-goods .svc-link{font-size:clamp(22px,2.4vw,28px)}
.svc-goods .svc-sub{font-size:15px;max-width:34ch}
@media(max-width:560px){
  .svc-grid{grid-template-columns:1fr;gap:var(--s5)}
  .svc-goods{grid-template-columns:1fr}
  .svc-id{flex-direction:column;align-items:flex-start;gap:12px}
  .svc .stores .store-btn[data-cta]{height:44px}
}

/* cursor-follow preview (desktop, fine pointer only; created by home.js) */
.cur-prev{position:fixed;left:0;top:0;z-index:40;width:200px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;border:1px solid var(--line-strong);
  background:var(--surface-2);pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.92);will-change:transform,opacity;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.cur-prev img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.cur-prev.frame-prev{aspect-ratio:16/10;width:300px}

/* ── 3. Work reel — big screens, pinned horizontal on desktop ──────────── */
.work{overflow:clip;padding-top:0;margin-top:clamp(72px,11vw,144px)} /* pin starts at the section top — no padding inside the trigger */
.work-pin{display:flex;flex-direction:column;justify-content:center;padding:0 0 var(--s5)}
.work .sec-head{margin-bottom:clamp(20px,3vw,32px)}
.work .sec-head h2{font-size:clamp(30px,4.6vw,60px)}
.work-reel{--h:var(--wh2)}
.work-rows{display:flex;flex-direction:column;gap:12px}
.work-reel .reel-track{padding:0 var(--inset)}
.work-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);margin-top:var(--s5);padding:0 var(--inset)}
.work-foot .progress{flex:1;height:1px;background:var(--line);position:relative;max-width:320px}
.work-foot .progress i{position:absolute;left:0;top:-1px;height:3px;width:20%;background:var(--ink);transform-origin:0 50%;border-radius:2px}
.gt-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap}
.gt-link .ico{width:16px;height:16px;transition:transform 200ms var(--ease-out)}
@media(hover:hover){ .gt-link:hover .ico{transform:translateX(3px)} }
@media(max-width:1023px),(hover:none){ .work-pin{min-height:0;padding-top:0} .work-foot .progress{display:none} }
/* the work section lives outside .wrap so the reel bleeds; its head/foot re-apply the inset */
.work .sec-head{padding:0 var(--inset);width:100%;max-width:1240px;margin-left:auto;margin-right:auto}
.work-foot{width:100%;max-width:1240px;margin-left:auto;margin-right:auto} /* width:100% — auto margins inside the column flex pin would otherwise shrink-wrap */

/* ── 4. How we work — three statements ─────────────────────────────────── */
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);border-top:1px solid var(--line)}
.how{padding-top:var(--s5);min-width:0}
.how .line-n{font-size:clamp(40px,5vw,72px)}
.how h3{margin-top:var(--s4);font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-0.025em;line-height:1.15;word-break:keep-all}
.how p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--muted);max-width:34ch;word-break:keep-all}
@media(max-width:720px){ .how-grid{grid-template-columns:1fr;gap:0} .how{padding:var(--s5) 0;border-top:1px solid var(--line)} .how:first-child{border-top:0} }

/* ── 5. Numbers ────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:var(--s6) var(--s5) var(--s6) 0;border-left:1px solid var(--line);padding-left:var(--s5);min-width:0}
.stat:first-child{border-left:0;padding-left:0}
.stat .n{font-size:clamp(44px,6.4vw,104px);font-weight:500;letter-spacing:-0.05em;line-height:.95;display:block;font-variant-numeric:tabular-nums}
.stat .l{margin-top:12px;font-size:13px;line-height:1.4;color:var(--faint);word-break:keep-all}
.stat.linked a{display:block}
@media(hover:hover){ .stat.linked:hover .n{color:var(--muted)} }
@media(max-width:720px){
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:var(--s5) 0 var(--s5) var(--s4)}
  .stat:nth-child(odd){border-left:0;padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ── 5b. FAQ — hairline accordion (citable passages, EN+KO) ────────────── */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:clamp(18px,2.4vw,26px) 0;
  font-size:clamp(16px,1.6vw,20px);font-weight:500;letter-spacing:-0.02em;color:var(--ink);cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4em;line-height:1;color:var(--muted);flex:none;transition:transform 200ms var(--ease-std)}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{max-width:62ch;padding-bottom:clamp(18px,2.4vw,26px);color:var(--muted);font-size:clamp(14px,1.3vw,16px);line-height:1.6}
.faq-item summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* ── 6. Contact — big line + hairline CTA rows ─────────────────────────── */
.contact .sec-head{margin-bottom:var(--s5)}
.cta-rows{border-top:1px solid var(--line)}
.cta-row{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr) auto;gap:var(--s4) var(--s7);align-items:center;padding:clamp(20px,3vw,32px) 0;border-bottom:1px solid var(--line)}
.cta-row .label{align-self:center}
.cta-row h3{font-size:clamp(20px,2.6vw,32px);font-weight:500;letter-spacing:-0.03em;line-height:1.15;word-break:keep-all;max-width:26ch}
.cta-row .cta-go{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--line-strong);color:var(--ink);
  transition:background 200ms var(--ease-std),color 200ms var(--ease-std),transform 220ms var(--ease-out)}
.cta-row .cta-go .ico{width:20px;height:20px;transition:transform 220ms var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .cta-row:hover .cta-go{background:var(--ink);color:var(--bg)}
  .cta-row:hover .cta-go .ico{transform:translateX(2px)}
  .cta-row:hover h3{transform:translateX(6px)}
}
.cta-row h3{transition:transform 260ms var(--ease-out)}
.cta-row:active .cta-go{transform:scale(.95)}
.cta-row:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:8px}
.contact-mail{margin-top:var(--s6)}
.contact-mail a{display:inline-flex;align-items:center;gap:8px;font-size:clamp(18px,2.2vw,26px);font-weight:500;letter-spacing:-0.02em;color:var(--ink)}
.contact-mail .ico{width:1em;height:1em;color:var(--muted)}
@media(max-width:720px){ .cta-row{grid-template-columns:minmax(0,1fr) auto} .cta-row .label{grid-column:1/-1} .cta-row .cta-go{width:44px;height:44px} }

/* ── Intro — pure CSS keyframes, armed by the inline head script (html.js-motion) and disarmed by it 1.7s later.
   No JS on the critical path: the lockup (LCP) starts revealing at first paint; the sequence runs off the main thread.
   lockup clip-reveal → tagline lines rise → header + foot fade → reel rises. All transform/opacity/clip-path. ── */
@keyframes in-clip{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0% 0 0 0)}}
@keyframes in-rise{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes in-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes in-reel{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes in-op{from{opacity:0}to{opacity:1}}
html.js-motion .hero-mark img{animation:in-clip 1.1s var(--ease-expo) .05s both}
html.js-motion .hero-h1 .hli{animation:in-rise .9s var(--ease-expo) .32s both}
html.js-motion .hero-h1 .hl:nth-child(2) .hli{animation-delay:.41s}
html.js-motion header.site .head-row{animation:in-op .6s var(--ease-expo) .5s both}
html.js-motion .hero-foot,html.js-motion .hero-cue{animation:in-fade .7s var(--ease-expo) .62s both}
html.js-motion .hero-reel{animation:in-reel 1s var(--ease-expo) .5s both}
@media(max-width:1023px){ /* mobile: same choreography, ~20% shorter */
  html.js-motion .hero-mark img{animation-duration:.9s}
  html.js-motion .hero-h1 .hli{animation-duration:.75s;animation-delay:.26s}
  html.js-motion .hero-h1 .hl:nth-child(2) .hli{animation-delay:.34s}
  html.js-motion .hero-foot,html.js-motion .hero-cue{animation-delay:.5s}
  html.js-motion .hero-reel{animation-duration:.8s;animation-delay:.42s}
}

/* reduced motion / no JS motion: still page, reels become native horizontal scrollers (no drift, no pin, no loop copy) */
@media(prefers-reduced-motion:reduce){
  .reel .rtile,.frame-view img,.roster .icon,.cta-row h3,.cta-row .cta-go,.reel .tile-cap{transition:none}
  .reel .tile-cap{opacity:1;transform:none}
  .reel{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
  .reel-track{transform:none!important}
  .reel .rtile.dup{display:none}
  .work-pin{min-height:0;padding-top:0}
  .work-foot .progress{display:none}
}
html.no-motion .reel{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
html.no-motion .reel-track{transform:none!important}
html.no-motion .reel .rtile.dup{display:none}
html.no-motion .work-pin{min-height:0;padding-top:0}
html.no-motion .work-foot .progress{display:none}
html.no-motion .reel .tile-cap{opacity:1;transform:none}

/* ── Design goods — live products only (goods-live.json): 11 series tiles + store CTA ── */
.goods-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.good{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;border-radius:14px}
.good-img{display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;transition:border-color 200ms var(--ease-std)}
.good-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-expo)}
.good-id{display:flex;flex-direction:column;gap:2px;min-width:0;padding:0 2px}
.good-id b{font-size:14.5px;font-weight:600;letter-spacing:-0.012em;line-height:1.25;word-break:keep-all}
.good-price{font-size:12.5px;color:var(--faint)}
.good:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media(hover:hover) and (pointer:fine){ .good:hover .good-img{border-color:var(--line-strong)} .good:hover .good-img img{transform:scale(1.04)} }
.goods-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s3);padding-top:var(--s4);border-top:1px solid var(--line)}
.goods-foot .svc-sub{margin:0;font-size:14px;max-width:40ch}
@media(max-width:1023px){ .goods-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:560px){ .goods-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .good-id b{font-size:13.5px} }

/* work rows: also auto-flow on touch/narrow (owner 10-30) — keep the loop copy, JS transform + pointer drag; vertical page scroll untouched */
@media(max-width:1023px),(hover:none){
  html:not(.no-motion) .work-row{overflow:hidden;scroll-snap-type:none}
  html:not(.no-motion) .work-row .rtile.dup{display:block}
}