/* ATO — Showreel 2026 (v3: deep ink, warm ivory and a restrained champagne gold)
   The page is cut like a reel: a title sequence, then one "shot" per section.
   128 BPM: one beat = .46875s. Motion is transform/opacity only, eased with long, momentum-carrying curves. */

:root{
  --bg:#0D1118; --bg2:#11161F; --panel:#151B25; --panel2:#1B222D;
  --line:rgba(238,232,220,.12); --line2:rgba(238,232,220,.22);
  --ink:#EEE8DC; --muted:#A39D91; --dim:#7A766D;
  --gold:#C8B084; --gold-hi:#E0CDA5; --gold-lo:#9C8459; --gold-rgb:200 176 132;
  --gold-v:linear-gradient(180deg,#E9DBBB 0%,#CDB68A 52%,#A88D5F 100%);
  --on-gold:#141922;
  --ok:#B5CBA6; --err:#E0B47E;
  --pad:clamp(16px,4vw,56px);
  --beat:.46875s; --loop:7.5s;
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.7,0,.25,1);
  --e-soft:cubic-bezier(.33,1,.68,1);
  --sans:"Plus Jakarta Sans","Noto Sans JP","Hiragino Sans",system-ui,-apple-system,sans-serif;
  --jp:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --disp:"Anton","Noto Sans JP",Impact,"Arial Narrow",sans-serif;
  --serif:"Instrument Serif","Shippori Mincho",Georgia,"Times New Roman",serif;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
/* light sections: soft stone, deep-ink type, the gold darkened to bronze so it still reads */
.light{--bg:#F1ECE3;--bg2:#E9E3D8;--panel:#F8F5EF;--panel2:#E6DFD3;--ink:#171C25;--muted:#5D584F;--dim:#6E695F;--line:rgba(23,28,37,.13);--line2:rgba(23,28,37,.26);
  --gold:#8A7048;--gold-hi:#A08457;--gold-lo:#6E5836;--gold-rgb:138 112 72;--on-gold:#F8F4EC;
  background:#F1ECE3;color:var(--ink);color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
@media (prefers-reduced-motion:no-preference){html:not(.lenis){scroll-behavior:smooth}}
::selection{background:var(--gold);color:var(--on-gold)}

body{margin:0;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/180px 180px;color:var(--ink);font-family:var(--jp);font-weight:500;font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"palt" 1;overflow-x:clip}
html[data-lang="en"] body{font-family:var(--sans);line-height:1.65;font-feature-settings:normal}
html[data-lang="ja"] .en,html[data-lang="en"] .ja{display:none!important}
html[data-lang="ja"] p,html[data-lang="ja"] h2,html[data-lang="ja"] h3,html[data-lang="ja"] dt,html[data-lang="ja"] li,html[data-lang="ja"] summary{word-break:auto-phrase}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
button{font:inherit;color:inherit}
.mono{font-family:var(--mono);letter-spacing:.06em}
.nb{display:inline-block}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--pad)}
[id]{scroll-margin-top:72px}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--gold);color:var(--on-gold);padding:10px 16px;border-radius:999px;font-weight:700;text-decoration:none;transition:top .3s}
.skip:focus{top:12px}

/* ---------- split text (built by site.js) ---------- */
.sp .w{display:inline-block;white-space:nowrap}
.sp .c{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .045em .14em;margin:-.06em -.045em -.14em}
.sp .c>i{display:inline-block;font-style:inherit}
html.anim .sp .c>i{transform:translateY(118%);transition:transform 1.05s var(--e-out);transition-delay:calc(var(--d0,0ms) + var(--i,0)*var(--st,22ms))}
html.anim .sp.in .c>i{transform:none}

/* reveal blocks */
html.anim [data-reveal]{opacity:0;transform:translate3d(0,44px,0);transition:opacity 1s var(--e-out),transform 1.3s var(--e-out)}
html.anim [data-reveal].in{opacity:1;transform:none}
/* if site.js never runs, nothing stays hidden */
html.anim:not(.ready) [data-reveal],html.anim:not(.ready) .hero-in>*,html.anim:not(.ready) .hero-foot,html.anim:not(.ready) .nav,html.anim:not(.ready) .dial-in{animation:failsafeShow .01s 3.5s forwards}
@keyframes failsafeShow{to{opacity:1;transform:none}}
html.anim:not(.ready) .letterbox{animation:failsafeHide .01s 3.5s forwards}
@keyframes failsafeHide{to{visibility:hidden}}

/* ---------- kicker / headings ---------- */
.kicker{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.kicker .k-no{display:inline-flex;align-items:center;gap:12px;color:var(--muted)}
.kicker .k-no::after{content:"";width:34px;height:1px;background:var(--line2)}
.sec-head{display:flex;flex-direction:column;gap:20px;max-width:58em}
.sec-head h2{font-family:var(--jp);font-weight:900;font-size:clamp(30px,4.8vw,68px);line-height:1.22;letter-spacing:.01em;text-wrap:balance}
html[data-lang="en"] .sec-head h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(42px,6.8vw,104px);line-height:.94;letter-spacing:.004em}
.sec-head .d{color:var(--muted);font-size:clamp(15px,1.25vw,17.5px);max-width:40em}
.sec-head .d b{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;font-weight:700;font-size:15.5px;line-height:1.25;text-decoration:none;letter-spacing:.01em;transition:transform .6s var(--e-out),box-shadow .6s var(--e-out),border-color .4s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:translateX(-101%);transition:transform .7s var(--e-out)}
.btn:hover::before{transform:none}
.btn:active{transform:scale(.97)}
.btn .arr{position:relative;display:inline-block;width:1.1em;height:1.2em;overflow:hidden}
.btn .arr i{position:absolute;left:0;top:0;font-style:normal;transition:transform .55s var(--e-out)}
.btn .arr i+i{transform:translateX(-140%)}
.btn:hover .arr i{transform:translateX(140%)}
.btn:hover .arr i+i{transform:none}
.btn-gold{background:var(--gold);color:var(--on-gold);box-shadow:0 20px 44px -26px rgb(var(--gold-rgb) / .7)}
.btn-gold::before{background:var(--gold-hi)}
.btn-gold:hover{color:var(--on-gold)}
.btn-ghost{background:rgba(238,232,220,.03);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.btn-ghost::before{background:rgba(238,232,220,.07)}
.line-dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.85;box-shadow:0 0 0 3px rgb(var(--gold-rgb) / .22);flex:none}


/* ---------- nav ---------- */
.nav{position:fixed;left:0;right:0;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:transform .7s var(--e-out),background-color .5s,box-shadow .5s}
.nav.solid,html.menu-open .nav{background:rgba(13,17,24,.78);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.nav.hide{transform:translateY(-110%)}
.nav-in{display:flex;align-items:center;gap:26px;height:68px;max-width:1340px;margin:0 auto;padding-inline:var(--pad)}
.logo{display:flex;align-items:center;flex:none;color:var(--ink);text-decoration:none;border-radius:6px}
.logo svg{height:38px;width:auto}
.nav-links{display:flex;gap:22px;margin-left:auto;font-size:13px;font-weight:600;letter-spacing:.03em}
.nav-links a{position:relative;text-decoration:none;color:var(--muted);padding:6px 0;transition:color .3s;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--gold);transform:scaleX(0);transform-origin:100% 50%;transition:transform .6s var(--e-out)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:0 50%}
.nav-tools{display:flex;align-items:center;gap:10px}
.motion-btn{width:36px;height:36px;border-radius:50%;border:0;background:transparent;box-shadow:inset 0 0 0 1px var(--line2);cursor:pointer;display:grid;place-items:center;padding:0}
.mb-ic{display:flex;gap:3px}
.mb-ic i{width:2.5px;height:11px;background:var(--ink);border-radius:1px}
.motion-btn[aria-pressed="true"] .mb-ic{gap:0}
.motion-btn[aria-pressed="true"] .mb-ic i:first-child{width:0;height:0;background:none;border-left:9px solid var(--gold);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
.motion-btn[aria-pressed="true"] .mb-ic i+i{display:none}
.langs{display:inline-flex;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2)}
.langs a{color:var(--muted);font:600 11.5px/1 var(--mono);letter-spacing:.08em;padding:9px 11px;border-radius:999px;text-decoration:none;transition:background .3s,color .3s}
.langs a:hover{color:var(--ink)}
.langs a[aria-current="true"]{background:var(--ink);color:var(--bg)}
.nav-line{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;background:rgba(238,232,220,.04);box-shadow:inset 0 0 0 1px var(--line2);font:600 12px/1 var(--mono);letter-spacing:.1em;text-decoration:none;transition:background .3s}
.nav-line:hover{background:rgba(238,232,220,.1)}
.menu-btn{display:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--ink);cursor:pointer;place-items:center;padding:0}
.mi{position:relative;display:block;width:16px;height:10px}
.mi i{position:absolute;left:0;right:0;height:1.6px;background:var(--bg);border-radius:1px;transition:transform .5s var(--e-out),top .5s var(--e-out)}
.mi i:first-child{top:1px}.mi i+i{top:7.4px}
.menu-btn[aria-expanded="true"]{background:var(--gold)}
.menu-btn[aria-expanded="true"] .mi i{background:var(--on-gold)}
.menu-btn[aria-expanded="true"] .mi i:first-child{top:4.2px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .mi i+i{top:4.2px;transform:rotate(-45deg)}
@media (max-width:1180px){.nav-links{display:none}.nav-tools{margin-left:auto}.menu-btn{display:grid}}
@media (max-width:560px){.nav-in{height:60px;gap:10px}.logo svg{height:32px}.nav-tools{gap:7px}.nav-line{padding:0 10px;height:34px}.langs a{padding:8px 9px}.nav-tools>.motion-btn{display:none}}

/* ---------- menu (phones and tablets) ---------- */
.menu{position:fixed;inset:0;z-index:48;background:var(--bg);overflow-y:auto;overscroll-behavior:contain;clip-path:inset(0 0 100% 0);transition:clip-path .75s var(--e-io)}
.menu.open{clip-path:inset(0 0 0 0)}
.menu-in{min-height:100%;display:flex;flex-direction:column;gap:30px;padding:calc(96px + env(safe-area-inset-top,0px)) var(--pad) calc(40px + env(safe-area-inset-bottom,0px));max-width:760px;margin:0 auto}
.menu .kicker{gap:14px}
.menu-list{border-top:1px solid var(--line)}
.menu-list a{display:flex;align-items:baseline;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.menu-list .mono{font-size:12px;color:var(--gold);min-width:24px}
.menu-list b{font-weight:900;font-size:clamp(26px,7.4vw,44px);line-height:1.15}
html[data-lang="en"] .menu-list b{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.01em}
.menu-list a:hover b{color:var(--gold)}
.menu-sub{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:15px;font-weight:700}
.menu-sub a{text-decoration:none;color:var(--muted)}
.menu-sub a:hover{color:var(--ink)}
.menu-foot{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.menu-foot .btn{width:100%;max-width:420px;justify-content:space-between}
.motion-txt{border:0;background:none;padding:6px 0;color:var(--muted);font:500 12px/1 var(--mono);letter-spacing:.12em;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.menu li,.menu-sub,.menu-foot{opacity:0;transform:translate3d(0,26px,0);transition:opacity .6s var(--e-out),transform .9s var(--e-out)}
.menu.open li,.menu.open .menu-sub,.menu.open .menu-foot{opacity:1;transform:none}
.menu.open .menu-list li:nth-child(1){transition-delay:.18s}.menu.open .menu-list li:nth-child(2){transition-delay:.24s}.menu.open .menu-list li:nth-child(3){transition-delay:.3s}.menu.open .menu-list li:nth-child(4){transition-delay:.36s}
.menu.open .menu-sub{transition-delay:.42s}.menu.open .menu-foot{transition-delay:.48s}
.menu-sub li{opacity:1;transform:none}
html.menu-open body{overflow:hidden}

/* =========================================================
   01 TITLE SEQUENCE
   ========================================================= */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:calc(96px + env(safe-area-inset-top,0px)) var(--pad) 58px;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(70% 60% at 74% 44%,rgba(238,232,220,.05),transparent 62%),
  radial-gradient(55% 45% at 12% 105%,rgb(var(--gold-rgb) / .06),transparent 70%),
  linear-gradient(180deg,transparent,rgba(18,23,32,.45) 70%,transparent);
  -webkit-mask:linear-gradient(#000 70%,transparent);mask:linear-gradient(#000 70%,transparent)}
.dial{--ds:min(86vh,60vw);position:absolute;z-index:-1;width:var(--ds);height:var(--ds);top:calc(50% - var(--ds)/2 + 26px);right:calc(var(--ds)*-.1);will-change:transform,opacity}
.dial-in{position:absolute;inset:0}
.globe-cv{position:absolute;inset:0;width:100%;height:100%}

.dial .globe-cv{inset:0;width:100%;height:100%}
.dial-glow{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(closest-side,rgba(238,232,220,.06),rgb(var(--gold-rgb) / .035) 70%,transparent)}
.dial-ring{position:absolute;inset:0;border-radius:50%}
.dial-ring.ticks{background:repeating-conic-gradient(from 0deg,rgba(238,232,220,.34) 0deg .35deg,transparent .35deg 3deg);-webkit-mask:radial-gradient(closest-side,transparent 95.6%,#000 95.8%,#000 98.6%,transparent 98.8%);mask:radial-gradient(closest-side,transparent 95.6%,#000 95.8%,#000 98.6%,transparent 98.8%);animation:spin 150s linear infinite}
.dial-ring.major{background:repeating-conic-gradient(from 0deg,rgb(var(--gold-rgb) / .8) 0deg .5deg,transparent .5deg 30deg);-webkit-mask:radial-gradient(closest-side,transparent 94.2%,#000 94.4%,#000 99.6%,transparent 99.8%);mask:radial-gradient(closest-side,transparent 94.2%,#000 94.4%,#000 99.6%,transparent 99.8%);animation:spin 150s linear infinite}
.dial-sweep{position:absolute;inset:-1.5%;width:103%;height:103%;animation:spin calc(var(--beat)*8) linear infinite}
.dial-sweep circle{fill:none;stroke:var(--gold);stroke-width:.35;stroke-dasharray:14 86;stroke-linecap:round;opacity:.9}
.dial-pulse{position:absolute;inset:9.4%;border-radius:50%;box-shadow:0 0 0 1px rgb(var(--gold-rgb) / .5);opacity:0;animation:pulse calc(var(--beat)*2) var(--e-out) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.12);opacity:0}}
.dial-lab{position:absolute;font:500 10px/1 var(--mono);letter-spacing:.2em;color:var(--muted);white-space:nowrap}
.dial-lab.l-n{top:-2.4%;left:50%;transform:translateX(-50%)}

.hero-in{position:relative;z-index:2;max-width:820px}
.slate{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.slate .rec{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgb(var(--gold-rgb) / .45);animation:blink calc(var(--beat)*2) steps(1) infinite}
.slate .tc{color:var(--ink);font-variant-numeric:tabular-nums}
.slate .sl-sep{opacity:.4}
@keyframes blink{50%{opacity:.25}}
/* the slate cycles through the four chapters, one change every 4 beats */
.slot{display:inline-block;height:1.25em;line-height:1.25em;overflow:hidden;vertical-align:middle;color:var(--gold)}
.slot-in{display:flex;flex-direction:column}
.slot b{font-weight:500;white-space:nowrap}
html.intro-done .slot-in{animation:slot calc(var(--beat)*20) var(--e-io) infinite}
@keyframes slot{0%,16%{transform:translateY(0)}20%,36%{transform:translateY(-1.25em)}40%,56%{transform:translateY(-2.5em)}60%,76%{transform:translateY(-3.75em)}80%,96%{transform:translateY(-5em)}100%{transform:translateY(-6.25em)}}
.hero-title{margin-top:22px;font-weight:400}
.hero-title .ht-1,.hero-title .ht-2{display:block}
html[data-lang="en"] .hero-title .ht-1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(54px,7.1vw,112px);line-height:.92;letter-spacing:.006em}
html[data-lang="en"] .hero-in{max-width:900px}
html[data-lang="en"] .hero-title .ht-2{font-family:var(--serif);font-style:italic;font-size:clamp(62px,9.4vw,150px);line-height:.98;letter-spacing:-.025em;margin-top:.04em}
.hero-title .ja .ht-1{font-family:var(--jp);font-weight:900;font-size:clamp(40px,6.3vw,96px);line-height:1.16;letter-spacing:.02em}
.hero-title .ja .ht-2{font-family:var(--jp);font-weight:900;font-size:clamp(78px,11vw,168px);line-height:1.04;letter-spacing:.01em}
.hero-title .ja em{font-family:var(--mincho);font-weight:800;font-style:normal;letter-spacing:-.02em}
.hero-title em{font-style:italic;background:var(--gold-v);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-title .sp em{background:none}
.hero-title .sp em .c>i{background:var(--gold-v);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-title .ht-2 .c{padding-inline:.12em;margin-inline:-.12em}
.lead{margin-top:24px;max-width:31em;color:var(--muted);font-size:clamp(15px,1.25vw,17.5px)}
.lead strong{display:block;color:var(--ink);font-weight:700}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.hero-foot{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:10px 40px}
.stats{display:flex;border-top:1px solid var(--line);grid-column:1/2}
.stat{padding:16px 34px 0 0;margin-right:34px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0;margin-right:0}
.stat dt{font:500 10.5px/1.3 var(--mono);letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.stat dd b{display:block;margin-top:8px;font-family:var(--disp);font-weight:400;font-size:clamp(28px,2.9vw,44px);line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat dd b.ja{font-family:var(--jp);font-weight:900;letter-spacing:0}
.stat:first-child dd b{color:var(--gold)}
.fine{grid-column:1/2;font-size:11px;color:var(--dim);line-height:1.5}
.scroll-cue{grid-column:3;grid-row:1/3;align-self:end;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:10px;letter-spacing:.3em;text-decoration:none;color:var(--muted);writing-mode:vertical-rl;padding-bottom:4px}
.scroll-cue i{position:relative;width:1px;height:64px;background:var(--line2);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;right:0;top:0;height:40%;background:var(--gold);animation:cue calc(var(--beat)*4) var(--e-io) infinite}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}

/* letterbox: the film opens */
.letterbox{position:absolute;inset:0;z-index:30;pointer-events:none;display:none}
html.anim:not(.skip-intro) .letterbox{display:block}
.letterbox .lb-t,.letterbox .lb-b{position:absolute;left:0;right:0;height:50.5%;background:#07090D}
.letterbox .lb-t{top:0}.letterbox .lb-b{bottom:0}
.letterbox .lb-line{position:absolute;left:calc(50% - min(32vw,360px));top:50%;width:min(64vw,720px);height:1px;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold-hi) 50%,var(--gold) 80%,transparent);transform:scaleX(0)}
html.anim:not(.skip-intro) .letterbox .lb-line{animation:lbLineIn .55s var(--e-out) .05s both}
html.anim.intro-go:not(.skip-intro) .letterbox .lb-line{animation:lbLine calc(var(--beat)*1.6) var(--e-out) forwards}
.letterbox .lb-cap{position:absolute;left:0;right:0;top:calc(50% + 18px);text-align:center;font:500 15px/1 var(--mono);letter-spacing:.62em;padding-left:.62em;color:var(--gold-hi);opacity:0}
html.anim:not(.skip-intro) .letterbox .lb-cap{animation:fadeIn .6s ease .25s both}
html.anim.intro-go:not(.skip-intro) .letterbox .lb-cap{animation:fadeOut .3s ease both}
@keyframes lbLineIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
html.intro-go .letterbox .lb-t{animation:lbUp calc(var(--beat)*2) var(--e-io) calc(var(--beat)*.45) forwards}
html.intro-go .letterbox .lb-b{animation:lbDown calc(var(--beat)*2) var(--e-io) calc(var(--beat)*.45) forwards}
@keyframes lbLine{0%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1.7);opacity:0}}
@keyframes lbUp{to{transform:translateY(-101%)}}
@keyframes lbDown{to{transform:translateY(101%)}}

/* intro choreography (beat-indexed) */
html.anim:not(.skip-intro):not(.intro-done) .hero-in>:not(.hero-title),html.anim:not(.skip-intro):not(.intro-done) .hero-foot,html.anim:not(.skip-intro):not(.intro-done) .nav{opacity:0}
html.anim:not(.skip-intro):not(.intro-done) .dial-in{opacity:0;transform:scale(.82) rotate(-24deg)}
html.intro-done .hero-in>*,html.intro-done .hero-foot,html.intro-done .dial-in,html.intro-done .nav{animation:none!important}
html.intro-go .nav{animation:fadeIn 1.2s var(--e-out) calc(var(--beat)*1.5) both}
html.intro-go .hero-in>.slate{animation:riseIn 1.2s var(--e-out) calc(var(--beat)*1.2) both}
html.intro-go .hero-in>.lead{animation:riseIn 1.3s var(--e-out) calc(var(--beat)*2.5) both}
html.intro-go .hero-in>.ctas{animation:riseIn 1.3s var(--e-out) calc(var(--beat)*2.9) both}
html.intro-go .hero-foot{animation:riseIn 1.4s var(--e-out) calc(var(--beat)*3.5) both}
html.intro-go .dial-in{animation:dialIn calc(var(--beat)*6) var(--e-out) calc(var(--beat)*.8) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes dialIn{from{opacity:0;transform:scale(.82) rotate(-24deg)}to{opacity:1;transform:none}}
.hero-title .ht-1 .c>i{--st:26ms}
.hero-title .ht-2 .c>i{--st:40ms}

@media (max-width:860px){
  .hero{padding-top:calc(92px + env(safe-area-inset-top,0px));gap:28px}
  .dial{--ds:min(106vw,560px);top:calc(env(safe-area-inset-top,0px) + 66px);right:calc(var(--ds)*-.4);opacity:.6}
  .dial-lab{display:none}
  .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,17,24,.86) 0%,rgba(13,17,24,.55) 55%,rgba(13,17,24,0) 100%)}
  .hero-foot{grid-template-columns:1fr auto}
  .stats{width:100%}
  .stat{flex:1;padding-right:12px;margin-right:12px;min-width:0}
  .stat dt{font-size:9px;letter-spacing:.1em}
  .stat dd b{font-size:clamp(20px,6.4vw,30px)}
  .stat dd b.ja{font-size:clamp(17px,5vw,26px)}
  .fine{grid-column:1/-1}
  .scroll-cue{display:none}
  .slate{font-size:9.5px;letter-spacing:.14em;gap:8px}
  .ctas .btn{flex:1 1 auto}
}
@media (max-width:400px){.stat dt{min-height:2.6em}}

/* =========================================================
   02 FROM JAPAN — voice-over
   ========================================================= */
.statement{padding-block:clamp(130px,18vw,240px) clamp(80px,12vw,160px)}
.statement .kicker{margin-bottom:34px}
.fill{max-width:21em;text-wrap:pretty}
.fill.ja{font-family:var(--mincho);font-weight:800;font-size:clamp(25px,3.6vw,52px);line-height:1.72;letter-spacing:.02em}
.fill.en{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.8vw,72px);line-height:1.12;letter-spacing:-.012em;max-width:17em}
html.js .fill .fc{opacity:.16;transition:opacity .5s ease}
html.js .fill .fc.on{opacity:1}
.fill .key{color:var(--gold);background:linear-gradient(var(--gold),var(--gold)) 0 96%/0% 1.5px no-repeat;transition:background-size 1.4s var(--e-out)}
.fill .key.on,html:not(.js) .fill .key,html.rm .fill .key{background-size:100% 1.5px}


/* =========================================================
   03 REACH — the globe plays by itself (scenes on a timer, no pinning)
   ========================================================= */
.reach{position:relative}
.stage{position:relative;height:clamp(660px,100svh,1000px);overflow:hidden;isolation:isolate;background:#0A0E14}
.stage .globe-box{position:absolute;inset:0;z-index:0}
.globe-gl{pointer-events:none}
.st-top{position:absolute;left:0;right:0;top:0;z-index:2;padding:clamp(70px,9vh,110px) var(--pad) 90px;background:linear-gradient(180deg,rgba(10,14,20,.94) 0%,rgba(10,14,20,.66) 55%,rgba(10,14,20,0) 100%)}
.st-top>*{max-width:1240px;margin-inline:auto}
.hudline{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.2em;color:var(--muted)}
.hudline .live{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgb(var(--gold-rgb) / .2);animation:blink calc(var(--beat)*2) steps(1) infinite}
.hudline .hl-tc{margin-left:auto;color:var(--ink)}
.hudline .hl-no{display:inline-flex;align-items:center;gap:12px;margin-right:4px}
.hudline .hl-no::after{content:"";width:34px;height:1px;background:var(--line2)}
.beats{position:relative;margin-top:22px;min-height:8.6em}
.beat{position:absolute;left:0;top:0;width:min(100%,880px)}
.beat:not(.on){pointer-events:none}
/* screen readers get every caption (the .sr copy); sighted visitors see only the playing scene */
html:not(.ready) .beat:not(.on),html.ready .beat:not(.on):not(.out) [aria-hidden="true"]{visibility:hidden}
.beat h2{font-weight:800;text-shadow:0 2px 30px rgba(0,0,0,.8)}
.beat h2 .ja{font-family:var(--mincho);font-size:clamp(27px,3.8vw,56px);line-height:1.45;letter-spacing:.03em}
.beat h2 .en{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,76px);line-height:1.04;letter-spacing:-.015em}
.beat p{margin-top:16px;max-width:30em;color:var(--muted);font-size:clamp(14px,1.2vw,16.5px);opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .9s var(--e-out)}
.beat.on p{opacity:1;transform:none;transition-delay:.45s}
html.anim .beat .c>i{transform:translateY(118%);transition:transform .95s var(--e-out);transition-delay:calc(var(--i)*16ms)}
html.anim .beat.on .c>i{transform:none}
html.anim .beat.out .c>i{transform:translateY(-118%);transition:transform .55s var(--e-io);transition-delay:calc(var(--i)*6ms)}
html.anim .beat:not(.on):not(.out) .c>i{transition:none}
.st-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:110px max(var(--pad),calc(50% - 620px + var(--pad))) clamp(48px,7vh,70px);background:linear-gradient(180deg,rgba(10,14,20,0) 0%,rgba(10,14,20,.84) 70%)}
.count .lbl{display:block;font-size:10.5px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.count .big{display:block;margin-top:10px;font-family:var(--disp);font-weight:400;font-size:clamp(52px,7.4vw,118px);line-height:.9;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
.count .big .ja{font-family:var(--jp);font-weight:900;font-size:.72em;letter-spacing:-.01em}
.count-sub{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:16px;font-size:13px;color:var(--muted)}
.count-sub b{color:var(--ink);font-weight:800;font-size:15px;margin-right:8px;font-variant-numeric:tabular-nums}
.beat-nav{display:flex;align-items:center;gap:14px}
.bn-count{font-size:11px;letter-spacing:.14em;color:var(--muted)}
.bn-count b{color:var(--ink);font-weight:500}
.beat-ticks{display:flex;gap:2px}
.beat-ticks button{position:relative;width:36px;height:28px;border:0;padding:0;background:transparent;cursor:pointer}
.beat-ticks button::before,.beat-ticks button i{content:"";position:absolute;left:3px;right:3px;top:50%;height:2px;margin-top:-1px;border-radius:1px}
.beat-ticks button::before{background:rgba(238,232,220,.22)}
.beat-ticks button i{background:var(--gold);transform-origin:0 50%;transform:scaleX(0)}
.beat-ticks button.done i{transform:scaleX(1);background:var(--ink)}
.beat-ticks button:hover::before{background:var(--muted)}
@media (max-width:860px){
  .stage{height:max(700px,100svh)}
  .st-top{padding-top:calc(78px + env(safe-area-inset-top,0px))}
  .beats{min-height:9.4em}
  .st-foot{flex-direction:column;align-items:flex-start;gap:16px}
  .beat-nav{align-self:flex-end}
}
/* reduced motion: the whole story at once, the globe still */
html.rm .stage{height:auto;overflow:visible;display:flex;flex-direction:column;padding-block:100px 60px}
html.rm .stage .globe-box{position:relative;order:1;width:100%;aspect-ratio:1.5;max-width:760px;margin:16px auto}
html.rm .st-top,html.rm .st-foot{position:relative;padding-top:0;padding-bottom:0;background:none}
html.rm .st-top{order:0}
html.rm .st-foot{order:2}
html.rm .beat-nav,html.rm .hudline .hl-tc{display:none}
html.rm .beats{display:flex;flex-direction:column;gap:26px;min-height:0}
html.rm .beat{position:relative;visibility:visible}
html.rm .beat p{opacity:1;transform:none}


/* =========================================================
   04 FOUR SERVICES
   ========================================================= */
.svc4{padding:clamp(100px,12vw,170px) 0}
.svc4-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"k k" "t d";gap:18px clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.svc4-head .kicker{grid-area:k}
.svc4-title{grid-area:t;font-family:var(--jp);font-weight:900;font-size:clamp(64px,8.4vw,128px);line-height:.95;letter-spacing:.01em}
.svc4-title .ja{white-space:nowrap}
.svc4-title b{font-family:var(--disp);font-weight:400;color:var(--gold);font-size:1.2em;line-height:.8;margin-right:.04em}
html[data-lang="en"] .svc4-title{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.005em}
html[data-lang="en"] .svc4-title b{font-size:1em}
.svc4-head .d{grid-area:d;color:var(--muted);font-size:clamp(15px,1.25vw,17.5px);max-width:30em}
@media (max-width:860px){.svc4-head{grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "t" "d"}}

.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.tiles-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles>li{display:flex}
.tile{--hv:#151B25;position:relative;flex:1;display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);padding:clamp(10px,1.1vw,14px);border:1px solid var(--line);border-radius:22px;text-decoration:none;color:var(--ink);background:var(--panel);overflow:hidden;isolation:isolate;box-shadow:0 36px 70px -56px rgba(10,12,18,.55);transition:color .55s var(--e-out),border-color .55s}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hv);transform:translateY(101%);transition:transform .8s var(--e-io)}
.tile:hover,.tile:focus-visible{color:#EEE8DC;border-color:var(--hv)}
.tile:hover::before,.tile:focus-visible::before{transform:none}
.t-media{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#11161F;box-shadow:inset 0 0 0 1px rgba(238,232,220,.08)}
.t-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--e-out)}
.t-watch img{object-position:50% 36%}
.tile:hover .t-media img,.tile:hover .t-art svg{transform:scale(1.05)}
.t-body{flex:1;display:flex;flex-direction:column;gap:12px;padding:0 clamp(8px,1.2vw,18px) clamp(10px,1.2vw,16px)}
.t-head{display:flex;align-items:flex-end;gap:clamp(12px,1.4vw,18px)}
.t-no{flex:none;font-family:var(--disp);font-size:clamp(46px,4.4vw,68px);line-height:.8;letter-spacing:.01em;color:var(--gold);transition:color .5s}
.tile:hover .t-no,.tile:focus-visible .t-no{color:#C8B084}
.t-name{font-weight:900;font-size:clamp(24px,2.3vw,34px);line-height:1.18;letter-spacing:.01em}
.t-name .ja{word-break:keep-all}
html[data-lang="en"] .t-name{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:1}
.t-name small{display:block;margin-top:6px;font-family:var(--jp);font-weight:700;font-size:12.5px;letter-spacing:.04em;color:var(--muted);text-transform:none;transition:color .5s}
html[data-lang="en"] .t-name small{font-family:var(--sans)}
.t-line{flex:1;color:var(--muted);font-size:clamp(14.5px,1.12vw,16px);max-width:30em;transition:color .5s}
.tile:hover .t-line,.tile:hover .t-name small,.tile:focus-visible .t-line{color:rgba(238,232,220,.72)}
.t-more{margin-top:4px;display:inline-flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.14em;color:var(--gold);transition:color .5s}
.t-more i{font-style:normal;transition:transform .55s var(--e-out)}
.tile:hover .t-more i{transform:translateX(7px)}
.tile:hover .t-more,.tile:focus-visible .t-more{color:#C8B084}
/* drawn tile art (EC and SNS): always on the dark media ground */
.t-art{display:grid;place-items:center;background:radial-gradient(80% 90% at 70% 60%,rgba(200,176,132,.08),transparent 70%),#11161F}
.t-art svg{width:100%;height:100%;transition:transform 1.6s var(--e-out)}
.t-art .g1{stroke:rgba(238,232,220,.06);stroke-width:.4}
.t-art .ln{fill:none;stroke:rgba(238,232,220,.55);stroke-width:.7}
.t-art .bx{fill:rgba(238,232,220,.04);stroke:rgba(238,232,220,.5);stroke-width:.6}
.t-art .ph{fill:rgba(238,232,220,.1)}
.t-art .tx{fill:rgba(238,232,220,.32)}
.t-art .gd{fill:#C8B084}
.t-art .gs{fill:none;stroke:#C8B084;stroke-width:.8}
.t-art .ds{fill:none;stroke:rgba(200,176,132,.7);stroke-width:.6;stroke-dasharray:1.2 2.4}
.t-art .br{fill:rgba(238,232,220,.18);stroke:rgba(238,232,220,.4);stroke-width:.3}
.t-art .br.hi{fill:#C8B084;stroke:#C8B084}
.t-art .cv{fill:none;stroke:#F2ECE0;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.tiles-3 .t-name{font-size:clamp(20px,1.8vw,27px)}
.tiles-3 .t-no{font-size:clamp(40px,3.6vw,56px)}
html.anim .tiles>li{opacity:0;transform:translate3d(0,46px,0);transition:opacity 1s var(--e-out),transform 1.25s var(--e-out)}
html.anim .tiles.in>li{opacity:1;transform:none}
html.anim .tiles.in>li:nth-child(2){transition-delay:.08s}html.anim .tiles.in>li:nth-child(3){transition-delay:.16s}html.anim .tiles.in>li:nth-child(4){transition-delay:.24s}
html.anim:not(.ready) .tiles>li{animation:failsafeShow .01s 3.5s forwards}
/* on a dark section the hover lifts to a lighter panel */
:not(.light)>.wrap>.tiles .tile,.more .tile{--hv:#1C2430}
.more .tile:hover{border-color:rgb(var(--gold-rgb) / .5)}
/* compact row: text left, a square frame right */
@media (max-width:1000px){
  .tiles-3{grid-template-columns:minmax(0,1fr)}
  .tiles-3 .tile{display:grid;grid-template-columns:minmax(0,1fr) clamp(88px,22vw,120px);grid-template-areas:"body media";align-items:start;gap:16px;padding:18px}
  .tiles-3 .t-media{grid-area:media;aspect-ratio:1}
  .tiles-3 .t-body{grid-area:body;padding:0}
  .tiles-3 .t-watch img{object-position:50% 29%}
}
@media (max-width:760px){
  .tiles{grid-template-columns:minmax(0,1fr)}
  .tiles .tile{display:grid;grid-template-columns:minmax(0,1fr) 96px;grid-template-areas:"body media";align-items:start;gap:14px;padding:18px;border-radius:18px}
  .tiles .t-media{grid-area:media;aspect-ratio:1;border-radius:12px}
  .tiles .t-body{grid-area:body;padding:0}
  .tiles .t-watch img{object-position:50% 29%}
  .t-head{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ---------- monitor (shared) ---------- */
.mon{position:relative;margin:0}
.mon-screen{position:relative;aspect-ratio:1/1;border-radius:clamp(14px,1.6vw,22px);overflow:hidden;background:#10151D;container-type:size;box-shadow:inset 0 0 0 1px var(--line),0 50px 90px -50px rgba(0,0,0,.9);isolation:isolate}
.mon-screen::before{content:"";position:absolute;inset:3.2cqw;z-index:7;pointer-events:none;background:
  linear-gradient(var(--line2),var(--line2)) 0 0/3cqw 1px no-repeat,linear-gradient(var(--line2),var(--line2)) 0 0/1px 3cqw no-repeat,
  linear-gradient(var(--line2),var(--line2)) 100% 0/3cqw 1px no-repeat,linear-gradient(var(--line2),var(--line2)) 100% 0/1px 3cqw no-repeat,
  linear-gradient(var(--line2),var(--line2)) 0 100%/3cqw 1px no-repeat,linear-gradient(var(--line2),var(--line2)) 0 100%/1px 3cqw no-repeat,
  linear-gradient(var(--line2),var(--line2)) 100% 100%/3cqw 1px no-repeat,linear-gradient(var(--line2),var(--line2)) 100% 100%/1px 3cqw no-repeat}
.mon-hud{position:absolute;left:0;right:0;top:0;z-index:8;display:flex;justify-content:space-between;padding:5cqw 5.4cqw;font-size:max(8.5px,1.85cqw);letter-spacing:.16em;color:rgba(238,232,220,.62);pointer-events:none}
.hud-rec{display:inline-flex;align-items:center;gap:1cqw}
.hud-rec::before{content:"";width:1.3cqw;height:1.3cqw;min-width:5px;min-height:5px;border-radius:50%;background:var(--gold);animation:blink calc(var(--beat)*2) steps(1) infinite}
.mon-tl{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:10.5px;letter-spacing:.12em;color:var(--muted)}
.tl-play{width:0;height:0;border-left:8px solid var(--ink);border-top:5px solid transparent;border-bottom:5px solid transparent}
.tl-bar{position:relative;flex:1;height:22px;border-radius:5px;background:rgba(238,232,220,.035);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.tl-bar i{position:absolute;top:4px;bottom:4px;border-radius:3px}
.tl-bar .k1{left:1%;width:23%;background:rgba(238,232,220,.28)}
.tl-bar .k2{left:25%;width:36%;background:rgb(var(--gold-rgb) / .32)}
.tl-bar .k3{left:62%;width:37%;background:rgba(238,232,220,.16)}
.tl-bar .ph-head{inset:0;border-radius:0;animation:playhead var(--loop) linear infinite}
.tl-bar .ph-head::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);box-shadow:0 0 10px rgb(var(--gold-rgb) / .8)}
@keyframes playhead{from{transform:translateX(0)}to{transform:translateX(100%)}}
html.hero-off .dial *,html.hero-off .slate *,.mon:not(.live) *,.mon:not(.live) *::before,.mon:not(.live) *::after,html.paused *,html.paused *::before,html.paused *::after{animation-play-state:paused!important}

/* ---------- CH.04 blueprint → analytics ---------- */
.grid-bp,.grid-an{position:absolute;inset:0}
.grid-bp{background:#111720;background-image:linear-gradient(rgba(238,232,220,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(238,232,220,.13) 1px,transparent 1px),linear-gradient(rgba(238,232,220,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(238,232,220,.05) 1px,transparent 1px);background-size:10cqw 10cqw,10cqw 10cqw,2.5cqw 2.5cqw,2.5cqw 2.5cqw;opacity:0}
.grid-an{background:radial-gradient(70% 60% at 60% 50%,rgb(var(--gold-rgb) / .06),transparent 70%),#10151D;background-image:radial-gradient(70% 60% at 60% 50%,rgb(var(--gold-rgb) / .06),transparent 70%),linear-gradient(rgba(238,232,220,.05) 1px,transparent 1px);background-size:auto,100% 8cqw}
.bp,.an{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bp{opacity:0}
.bp-bx,.bp-cn{fill:none;stroke:#CFC5B2;stroke-width:.35;stroke-dasharray:100}
.bp-cn{stroke-dasharray:1.2 1.2;opacity:.7}
.bp-bx{fill:rgba(238,232,220,.05)}
.bp-tx text{font-family:var(--mono);font-size:2.6px;letter-spacing:.2px;fill:#CFC5B2}
.bp-tx text.big{font-family:var(--jp);font-weight:700;font-size:5px;letter-spacing:.1px;fill:#F2ECE0}
html[data-lang="en"] .bp-tx text.big{font-family:var(--disp);font-weight:400;font-size:6px;letter-spacing:.2px}
.an-ax{stroke:rgba(238,232,220,.25);stroke-width:.3}
.bar{fill:rgba(238,232,220,.14);stroke:rgba(238,232,220,.45);stroke-width:.25;transform-box:fill-box;transform-origin:50% 100%}
.bar.k6{fill:var(--gold);stroke:var(--gold)}
.an-ln{fill:none;stroke:#F2ECE0;stroke-width:.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0;filter:drop-shadow(0 0 1.2px rgba(238,232,220,.7))}
.an-hd{fill:var(--gold);transform-box:fill-box;transform-origin:50% 50%}
.an-tx text{font-family:var(--mono);font-size:2.4px;fill:var(--muted)}
.kpis{position:absolute;left:6%;top:13%;display:flex;flex-wrap:wrap;gap:1.4cqw;font-size:max(7px,1.7cqw);letter-spacing:.14em;max-width:60%}
.kpis span{padding:1.1cqw 1.6cqw;border-radius:99px;background:rgba(13,17,24,.7);box-shadow:inset 0 0 0 1px rgba(238,232,220,.4);color:#F2ECE0}
.kpis i{font-style:normal;color:var(--ok)}
.steps{position:absolute;left:5.4%;right:5.4%;bottom:4.5%;display:grid;grid-template-columns:repeat(4,1fr);gap:1cqw;font-size:max(7.5px,1.8cqw);font-weight:700;letter-spacing:.04em}
.steps li{text-align:center;padding:1.3cqw 0;border-radius:1cqw;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);counter-increment:st}
.steps li::before{content:"0" counter(st) " ";font-family:var(--mono);font-weight:500;opacity:.7}
.steps .st4{background:var(--gold);color:var(--on-gold);box-shadow:none}
/* loop */
.mon-sns .grid-bp{animation:gbp var(--loop) infinite both}
@keyframes gbp{0%,30%{opacity:1}40%,92%{opacity:0}100%{opacity:1}}
.mon-sns .bp{animation:bpOut var(--loop) infinite both}
@keyframes bpOut{0%,30%{opacity:1;transform:none}30.1%{animation-timing-function:var(--e-io)}38%{opacity:0;transform:scaleY(.2) translateY(30%)}38.1%,99%{opacity:0;transform:none}100%{opacity:1}}
.mon-sns .bp{transform-box:fill-box;transform-origin:50% 100%}
.mon-sns .bp-bx{animation:bpDraw var(--loop) infinite both}
.mon-sns .bp-bx.b2{animation-delay:.25s}.mon-sns .bp-bx.b3{animation-delay:.5s}.mon-sns .bp-bx.b4{animation-delay:.75s}
@keyframes bpDraw{0%{stroke-dashoffset:100;fill-opacity:0;animation-timing-function:var(--e-io)}10%{stroke-dashoffset:0;fill-opacity:0}14%,100%{stroke-dashoffset:0;fill-opacity:1}}
.mon-sns .bp-cn{animation:bpCn var(--loop) infinite both}
@keyframes bpCn{0%,16%{opacity:0}22%,100%{opacity:.7}}
.mon-sns .bp-tx{animation:bpTx var(--loop) infinite both}
@keyframes bpTx{0%,6%{opacity:0}14%,100%{opacity:1}}
.mon-sns .bar{animation:barUp var(--loop) infinite both}
.mon-sns .bar.k2{animation-delay:.12s}.mon-sns .bar.k3{animation-delay:.24s}.mon-sns .bar.k4{animation-delay:.36s}.mon-sns .bar.k5{animation-delay:.48s}.mon-sns .bar.k6{animation-delay:.6s}
@keyframes barUp{0%,37.9%{transform:scaleY(0)}38%{transform:scaleY(0);animation-timing-function:var(--e-out)}48%,90%{transform:scaleY(1);opacity:1}96%,100%{transform:scaleY(1);opacity:0}}
.mon-sns .an-ln{animation:anLn var(--loop) infinite both}
@keyframes anLn{0%,45%{stroke-dashoffset:100;opacity:1;animation-timing-function:var(--e-io)}70%{stroke-dashoffset:0}90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.mon-sns .an-hd{animation:anHd var(--loop) infinite both}
@keyframes anHd{0%,69%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(2.4);animation-timing-function:var(--e-out)}75%{transform:scale(1)}79%{transform:scale(1.6)}83%{transform:scale(1)}90%{opacity:1}96%,100%{opacity:0;transform:scale(1)}}
.mon-sns .an-tx,.mon-sns .an-ax{animation:anTx var(--loop) infinite both}
@keyframes anTx{0%,34%{opacity:0}42%,92%{opacity:1}98%,100%{opacity:0}}
.mon-sns .kpis span{animation:kp var(--loop) infinite both}
.mon-sns .kpis .kp2{animation-delay:.2s}.mon-sns .kpis .kp3{animation-delay:.4s}
@keyframes kp{0%,71.9%{opacity:0;transform:translateY(40%)}72%{opacity:0;transform:translateY(40%);animation-timing-function:var(--e-out)}77%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
.mon-sns .steps li{animation:none}
.mon-sns .steps .st1{animation:st1 var(--loop) infinite both}
.mon-sns .steps .st2{animation:st2 var(--loop) infinite both}
.mon-sns .steps .st3{animation:st3 var(--loop) infinite both}
.mon-sns .steps .st4{animation:st4 var(--loop) infinite both}
@keyframes st1{0%,15.9%{background:var(--gold);color:var(--on-gold)}16%,100%{background:transparent;color:var(--muted)}}
@keyframes st2{0%,15.9%{background:transparent;color:var(--muted)}16%,30.9%{background:var(--gold);color:var(--on-gold)}31%,100%{background:transparent;color:var(--muted)}}
@keyframes st3{0%,30.9%{background:transparent;color:var(--muted)}31%,49.9%{background:var(--gold);color:var(--on-gold)}50%,100%{background:transparent;color:var(--muted)}}
@keyframes st4{0%,49.9%{background:transparent;color:var(--muted)}50%,94%{background:var(--gold);color:var(--on-gold)}95%,100%{background:transparent;color:var(--muted)}}

/* ---------- EC: storefront blueprint → partners, traffic and orders → sales chart ---------- */
.bp-tx text.sm{font-family:var(--jp);font-weight:700;font-size:3.5px;letter-spacing:.05px;fill:#F2ECE0}
html[data-lang="en"] .bp-tx text.sm{font-family:var(--disp);font-weight:400;font-size:3.4px;letter-spacing:.15px}
.bp-tx text.mid{text-anchor:middle}
.bp-ph{stroke:#CFC5B2;stroke-width:.25;opacity:.45}
.bp-btn{fill:rgba(200,176,132,.16)!important;stroke:#C8B084!important}
.bp-pill{fill:none;stroke:#CFC5B2;stroke-width:.3}
.fl{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0}
.fl-ln{fill:none;stroke:rgba(200,176,132,.75);stroke-width:.55;stroke-dasharray:1 4;stroke-linecap:round}
.fl-rail{fill:none;stroke:rgba(238,232,220,.14);stroke-width:.3}
.fl-nd circle{fill:#151B25;stroke:#CFC5B2;stroke-width:.4}
.fl-nd path{fill:none;stroke:#F2ECE0;stroke-width:.55;stroke-linecap:round;stroke-linejoin:round}
.fl-nd,.fl-store,.ord{transform-box:fill-box;transform-origin:50% 50%}
.fl-tx{font-family:var(--jp);font-weight:700;font-size:3.3px;fill:#CFC5B2;text-anchor:middle}
html[data-lang="en"] .fl-tx{font-family:var(--mono);font-weight:500;font-size:2.8px;letter-spacing:.3px}
.fl-store circle{fill:#C8B084}
.fl-store .halo{fill:none;stroke:rgba(200,176,132,.45);stroke-width:.4}
.fl-store path{fill:none;stroke:#141922;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.ord rect{fill:#151B25;stroke:rgba(200,176,132,.8);stroke-width:.35}
.ord text{font-family:var(--mono);font-size:2.5px;letter-spacing:.25px;fill:#F2ECE0;text-anchor:middle}
.mon-ec .grid-bp{animation:ecGbp var(--loop) infinite both}
@keyframes ecGbp{0%,28%{opacity:1}36%,94%{opacity:0}100%{opacity:1}}
.mon-ec .bp{transform-box:fill-box;transform-origin:50% 50%;animation:ecBpOut var(--loop) infinite both}
@keyframes ecBpOut{0%,27%{opacity:1;transform:none}27.1%{animation-timing-function:var(--e-io)}33%{opacity:0;transform:scale(.18)}33.1%,99%{opacity:0;transform:none}100%{opacity:1}}
.mon-ec .bp-bx{animation:bpDraw var(--loop) infinite both}
.mon-ec .bp-bx.b2{animation-delay:.2s}.mon-ec .bp-bx.b3{animation-delay:.4s}.mon-ec .bp-bx.b4{animation-delay:.6s}.mon-ec .bp-bx.b5{animation-delay:.75s}
.mon-ec .bp-cn,.mon-ec .bp-ph,.mon-ec .bp-pill{animation:bpCn var(--loop) infinite both}
.mon-ec .bp-tx{animation:bpTx var(--loop) infinite both}
.mon-ec .fl{animation:ecFl var(--loop) infinite both}
@keyframes ecFl{0%,30%{opacity:0}33%,58%{opacity:1}63%,100%{opacity:0}}
.mon-ec .fl-store{animation:ecStore var(--loop) infinite both}
@keyframes ecStore{0%,30%{transform:scale(0)}30.1%{animation-timing-function:var(--e-out)}36%,100%{transform:scale(1)}}
.mon-ec .fl-nd{animation:ecNd var(--loop) infinite both}
.mon-ec .fl-nd.n2{animation-delay:.12s}.mon-ec .fl-nd.n3{animation-delay:.24s}.mon-ec .fl-nd.n4{animation-delay:.36s}
@keyframes ecNd{0%,33%{opacity:0;transform:scale(.4)}33.1%{animation-timing-function:var(--e-out)}38%,100%{opacity:1;transform:none}}
.mon-ec .fl-ln{animation:ecDash .9s linear infinite}
@keyframes ecDash{to{stroke-dashoffset:-10}}
.mon-ec .ord{opacity:0;animation:ecOrd var(--loop) infinite both}
.mon-ec .ord.o2{animation-delay:.6s}.mon-ec .ord.o3{animation-delay:1.2s}
@keyframes ecOrd{0%,40%{opacity:0;transform:translateY(5px)}40.1%{animation-timing-function:var(--e-out)}43%{opacity:1;transform:none}47%{opacity:1;transform:translateY(-3px)}50%,100%{opacity:0;transform:translateY(-6px)}}
.mon-ec .bar{animation:ecBar var(--loop) infinite both}
.mon-ec .bar.k2{animation-delay:.12s}.mon-ec .bar.k3{animation-delay:.24s}.mon-ec .bar.k4{animation-delay:.36s}.mon-ec .bar.k5{animation-delay:.48s}.mon-ec .bar.k6{animation-delay:.6s}
@keyframes ecBar{0%,61.9%{transform:scaleY(0)}62%{transform:scaleY(0);animation-timing-function:var(--e-out)}71%,92%{transform:scaleY(1);opacity:1}97%,100%{transform:scaleY(1);opacity:0}}
.mon-ec .an-ln{animation:ecLn var(--loop) infinite both}
@keyframes ecLn{0%,66%{stroke-dashoffset:100;opacity:1;animation-timing-function:var(--e-io)}82%{stroke-dashoffset:0}92%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:0;opacity:0}}
.mon-ec .an-hd{animation:ecHd var(--loop) infinite both}
@keyframes ecHd{0%,81%{opacity:0;transform:scale(0)}82%{opacity:1;transform:scale(2.2);animation-timing-function:var(--e-out)}86%{transform:scale(1)}92%{opacity:1}97%,100%{opacity:0;transform:scale(1)}}
.mon-ec .an-tx,.mon-ec .an-ax{animation:ecTx var(--loop) infinite both}
@keyframes ecTx{0%,58%{opacity:0}64%,93%{opacity:1}98%,100%{opacity:0}}
.mon-ec .kpis span{animation:ecKp var(--loop) infinite both}
.mon-ec .kpis .kp2{animation-delay:.2s}.mon-ec .kpis .kp3{animation-delay:.4s}
@keyframes ecKp{0%,83.9%{opacity:0;transform:translateY(40%)}84%{opacity:0;transform:translateY(40%);animation-timing-function:var(--e-out)}88%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
.mon-ec .steps li{animation:none}
.mon-ec .steps .st1{animation:ecSt1 var(--loop) infinite both}
.mon-ec .steps .st2{animation:ecSt2 var(--loop) infinite both}
.mon-ec .steps .st3{animation:ecSt3 var(--loop) infinite both}
.mon-ec .steps .st4{animation:ecSt4 var(--loop) infinite both}
@keyframes ecSt1{0%,29.9%{background:var(--gold);color:var(--on-gold)}30%,100%{background:transparent;color:var(--muted)}}
@keyframes ecSt2{0%,29.9%{background:transparent;color:var(--muted)}30%,41.9%{background:var(--gold);color:var(--on-gold)}42%,100%{background:transparent;color:var(--muted)}}
@keyframes ecSt3{0%,41.9%{background:transparent;color:var(--muted)}42%,61.9%{background:var(--gold);color:var(--on-gold)}62%,100%{background:transparent;color:var(--muted)}}
@keyframes ecSt4{0%,61.9%{background:transparent;color:var(--muted)}62%,95%{background:var(--gold);color:var(--on-gold)}96%,100%{background:transparent;color:var(--muted)}}
html.rm .mon-ec .fl{opacity:0}

/* chapter entrance: the monitor is wiped on like a cut */
html.anim .ch .mon-screen{clip-path:inset(0 100% 0 0 round 22px);transition:clip-path 1.3s var(--e-io) .15s}
html.anim .ch-r .mon-screen{clip-path:inset(0 0 0 100% round 22px)}
html.anim .ch.in .mon-screen{clip-path:inset(0 0 0 0 round 22px)}
html.anim .ch .mon-tl{opacity:0;transform:translateY(12px);transition:opacity .8s var(--e-out) .9s,transform 1s var(--e-out) .9s}
html.anim .ch.in .mon-tl{opacity:1;transform:none}
html.anim:not(.ready) .ch .mon-screen{animation:failClip .01s 4s forwards}
@keyframes failClip{to{clip-path:none}}

/* =========================================================
   05 WHY ATO
   ========================================================= */
.why-sec{padding-block:clamp(90px,11vw,160px) 0}
.why{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.why article{position:relative;display:grid;grid-template-columns:clamp(70px,8vw,120px) minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"n tag p" "n h3 p";column-gap:clamp(20px,4vw,64px);row-gap:12px;padding:clamp(28px,3.4vw,46px) 0;border-bottom:1px solid var(--line)}
.why .w-no{grid-area:n;font-family:var(--disp);font-size:clamp(40px,4.4vw,64px);line-height:.9;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px var(--gold)}
.why .tag{grid-area:tag;justify-self:start;font-size:10.5px;letter-spacing:.16em;padding:6px 10px;border-radius:4px;box-shadow:inset 0 0 0 1px rgb(var(--gold-rgb) / .5);color:var(--gold)}
.why h3{grid-area:h3;font-weight:900;font-size:clamp(22px,2.6vw,36px);line-height:1.35}
html[data-lang="en"] .why h3{font-weight:700;letter-spacing:-.01em;line-height:1.15}
.why p{grid-area:p;align-self:end;color:var(--muted);font-size:clamp(15px,1.2vw,17px)}
@media (max-width:860px){.why article{grid-template-columns:52px minmax(0,1fr);grid-template-areas:"n tag" "n h3" "n p"}.why .w-no{font-size:38px}}
.why article::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s var(--e-io) .2s}
.why article.in::after{transform:scaleX(1)}
html.rm .why article::after{transform:scaleX(1)}

/* =========================================================
   06 PROCESS
   ========================================================= */
.flow-sec{padding-block:clamp(110px,13vw,190px) 0}
.flow{position:relative;margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.flow::before{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:var(--gold);transform-origin:0 0;transform:scaleY(var(--fp,1))}
html.anim .flow::before{--fp:0}
.flow li{display:grid;grid-template-columns:minmax(80px,140px) minmax(0,1fr);gap:20px;padding:clamp(24px,3vw,36px) 0 clamp(24px,3vw,36px) clamp(18px,2.4vw,32px);border-bottom:1px solid var(--line);align-items:baseline}
.flow .n{font-size:clamp(30px,3.4vw,48px);font-family:var(--disp);color:var(--gold);letter-spacing:.02em;line-height:1}
.flow li>div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:6px 40px;align-items:baseline}
.flow h3{font-size:clamp(18px,1.8vw,24px);line-height:1.45;font-weight:800}
.flow p{color:var(--muted);font-size:clamp(14.5px,1.15vw,16.5px)}
@media (max-width:760px){.flow li{grid-template-columns:58px minmax(0,1fr);gap:12px}.flow li>div{grid-template-columns:minmax(0,1fr)}}

/* =========================================================
   07 FOUNDER
   ========================================================= */
.founder{padding-block:clamp(40px,6vw,80px) clamp(100px,12vw,160px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5.6vw,88px);align-items:start}
.card-id{position:relative;border-radius:22px;overflow:hidden;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line),0 50px 90px -50px rgba(0,0,0,.9)}
.cid-img{position:relative;aspect-ratio:4/5;overflow:hidden}
.cid-img img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;transform:scale(1.001);transition:transform 2.4s var(--e-out)}
html.anim .card-id:not(.in) .cid-img img{transform:scale(1.18)}
.cid-wipe{position:absolute;left:0;right:0;top:0;aspect-ratio:4/5;display:flex;flex-direction:column;pointer-events:none;overflow:hidden}
.cid-wipe i{flex:1;background:var(--bg)}
html:not(.anim) .cid-wipe{display:none}
.cid-wipe i{transition:transform 1.4s var(--e-io) .1s}
.card-id.in .cid-wipe i:first-child{transform:translateY(-101%)}
.card-id.in .cid-wipe i:last-child{transform:translateY(101%)}
html.anim:not(.ready) .cid-wipe{animation:failsafeHide .01s 3.5s forwards}
.card-id figcaption{padding:22px 24px 24px;display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg,#171D27,#10141C)}
.card-id .role{align-self:flex-start;font-size:10.5px;letter-spacing:.18em;padding:6px 10px;border-radius:4px;background:var(--gold);color:var(--on-gold)}
.card-id .big{font-weight:900;font-size:clamp(28px,3vw,40px);line-height:1.15;letter-spacing:.02em}
html[data-lang="en"] .card-id .big{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.01em}
.card-id .big small{display:block;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.24em;color:var(--muted);margin-top:8px;text-transform:none}
.card-meta{display:flex;flex-direction:column;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.cm-row{display:flex;flex-direction:column;gap:6px}
.cm-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.loc{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px}
.loc svg{width:15px;height:15px;fill:var(--gold);flex:none}
.langs-spoken{display:flex;gap:8px;flex-wrap:wrap}
.langs-spoken span{font-size:12px;font-weight:700;box-shadow:inset 0 0 0 1px var(--line2);padding:5px 11px;border-radius:999px}
.ta{font-family:"Noto Sans Tamil",var(--sans)}
.founder-copy{display:flex;flex-direction:column;gap:28px}
.msg{font-size:clamp(16px,1.35vw,19px);line-height:2;max-width:34em}
html[data-lang="en"] .msg{line-height:1.7}
.credits{border-top:1px solid var(--line)}
.credits li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:18px;padding:15px 0;border-bottom:1px solid var(--line);font-size:15px}
.credits li>span:first-child{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);line-height:2.3}
@media (max-width:900px){.founder{grid-template-columns:minmax(0,1fr)}.card-id{max-width:460px}.credits li{grid-template-columns:minmax(0,1fr);gap:2px}}

/* =========================================================
   08 FAQ
   ========================================================= */
.faq-sec{margin-top:clamp(110px,13vw,190px);padding-block:clamp(100px,12vw,160px)}
.faq{margin-top:clamp(36px,4.6vw,56px);border-top:1px solid var(--line);max-width:920px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0;font-weight:700;font-size:clamp(16px,1.4vw,19px);transition:color .3s}
.faq summary:hover{color:var(--gold)}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{flex:none;position:relative;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);transition:background .4s,box-shadow .4s}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .5s var(--e-out),background .4s}
.faq .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .pm{background:var(--gold);box-shadow:none}
.faq details[open] .pm::before,.faq details[open] .pm::after{background:var(--on-gold)}
.faq details[open] .pm::after{transform:translate(-50%,-50%) rotate(0)}
.faq .a{padding:0 56px 26px 0;color:var(--muted)}
.faq .a p{font-size:15.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chips span{font-size:13px;font-weight:700;box-shadow:inset 0 0 0 1px var(--line2);padding:6px 12px;border-radius:999px;color:var(--ink)}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .6s var(--e-out),content-visibility .6s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* =========================================================
   09 END CARD
   ========================================================= */
.final{position:relative;margin-top:0;padding:clamp(110px,12vw,170px) 0 clamp(90px,10vw,130px);overflow:hidden;isolation:isolate;background:radial-gradient(60% 50% at 24% 30%,rgb(var(--gold-rgb) / .07),transparent 70%),radial-gradient(50% 50% at 90% 100%,rgb(var(--gold-rgb) / .05),transparent 70%)}
.final::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6}
.final-bars i{position:absolute;left:0;right:0;height:clamp(18px,4vh,40px);background:#07090D;z-index:-1;transform:scaleY(0);transition:transform 1.4s var(--e-io)}
.final-bars i:first-child{top:0;transform-origin:50% 0}.final-bars i:last-child{bottom:0;transform-origin:50% 100%}
.final.in .final-bars i{transform:none}
.final-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
.final-l{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.final h2{font-weight:900;font-size:clamp(40px,4.9vw,74px);line-height:1.18;letter-spacing:.01em}
.final h2>.ja>span{display:block}
html[data-lang="en"] .final h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(76px,11vw,184px);line-height:.88}
.final-l>p{color:var(--muted);max-width:32em;font-size:clamp(15px,1.2vw,17px)}
.final-l .btn{width:100%;max-width:440px;justify-content:space-between}
.btn-line{min-height:64px;font-size:16.5px}
.form{position:relative;background:linear-gradient(180deg,rgba(25,31,41,.94),rgba(16,20,27,.94));border-radius:24px;padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:16px;box-shadow:inset 0 0 0 1px var(--line),0 50px 100px -50px rgba(0,0,0,.95)}
.form h3{font-size:clamp(19px,1.6vw,23px);font-weight:800}
.sub-t{font-size:14px;color:var(--muted);margin-top:-8px}
.field{display:flex;flex-direction:column;gap:7px}
.field label,.field legend{font-size:14px;font-weight:700;color:var(--ink)}
.field label em,.field legend em{font-style:normal;color:var(--gold);margin-left:4px}
.field input,.field textarea{font:500 16px/1.5 var(--jp);color:var(--ink);background:rgba(13,17,24,.6);border:1px solid var(--line2);border-radius:12px;padding:13px 14px;width:100%;transition:border-color .3s,background .3s,box-shadow .3s}
html[data-lang="en"] .field input,html[data-lang="en"] .field textarea{font-family:var(--sans)}
.field input::placeholder{color:#6F6A61}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:rgba(13,17,24,.85);box-shadow:0 0 0 3px rgb(var(--gold-rgb) / .18)}
.field textarea{min-height:110px;resize:vertical}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
.field-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px}
.hint-t{font-size:12px;color:var(--muted);line-height:1.5}
@media (max-width:520px){.field-row{grid-template-columns:minmax(0,1fr);gap:16px}}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.opts label{position:relative;cursor:pointer}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts .chip{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;border-radius:999px;padding:9px 14px;box-shadow:inset 0 0 0 1px var(--line2);background:rgba(13,17,24,.4);color:var(--ink);transition:background .3s,box-shadow .3s,color .3s,transform .3s var(--e-out)}
.opts .chip::before{content:"";flex:none;width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line2);transition:all .3s}
.opts label:hover .chip{box-shadow:inset 0 0 0 1px var(--ink)}
.opts input:checked+.chip{background:var(--gold);color:var(--on-gold);box-shadow:none;font-weight:800}
.opts input:checked+.chip::before{box-shadow:none;background:var(--on-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23C8B084' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.opts input:focus-visible+.chip{outline:2px solid var(--gold);outline-offset:2px}
.opt{font-weight:500;color:var(--muted);font-size:12px;margin-left:6px}
.hp{position:absolute;left:-9999px}
.form .btn{width:100%;justify-content:center}
.form .btn[disabled]{opacity:.6;cursor:progress}
.status{font-size:14px;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.status.ok{background:rgba(181,203,166,.1);color:var(--ok)}
.status.err{background:rgba(224,180,126,.1);color:var(--err)}
.status a{font-weight:700;color:inherit}
.privacy{font-size:12px;color:var(--muted)}
@media (max-width:900px){.final-in{grid-template-columns:minmax(0,1fr)}}

.final-in-1{grid-template-columns:minmax(0,1fr)}
.final-short .final-l{max-width:820px}
.final-ctas{display:flex;flex-wrap:wrap;gap:12px;width:100%}
.final-ctas .btn{width:auto;max-width:none;flex:1 1 280px}


/* footer */
.foot{padding:clamp(60px,8vw,110px) 0 calc(60px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);overflow:hidden}
.foot-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:start;padding-bottom:clamp(36px,5vw,64px);border-bottom:1px solid var(--line);margin-bottom:24px}
.foot-logo{display:block;width:clamp(120px,13vw,170px);color:var(--gold)}
.foot-logo svg{width:100%;height:auto}
.foot-nav{display:flex;flex-direction:column;gap:12px;font-size:15px;font-weight:700}
.foot-nav p{font-size:10.5px;letter-spacing:.2em;color:var(--gold);margin-bottom:4px}
.foot-nav a{text-decoration:none;color:var(--ink);transition:color .3s}
.foot-nav a:hover{color:var(--gold)}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.foot-links{display:flex;gap:20px}
.foot-links a,.to-top{text-decoration:none;transition:color .3s}
.foot-links a:hover,.to-top:hover{color:var(--gold)}
.to-top{font-size:11px;letter-spacing:.16em}
@media (max-width:760px){.foot-top{grid-template-columns:1fr 1fr}.foot-logo{grid-column:1/-1;width:120px}}

/* =========================================================
   HUD frame
   ========================================================= */
.hud-frame{position:static;pointer-events:none;--hi:16px;--hb:16px;color:var(--muted);font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.hud-frame .br,.hud-frame .lab,.hud-frame .rail{z-index:45}
.hud-frame .br{position:fixed;width:22px;height:22px;border:0 solid rgba(238,232,220,.32)}
.hud-frame .tl{left:var(--hi);top:84px;border-left-width:1px;border-top-width:1px}
.hud-frame .tr{right:var(--hi);top:84px;border-right-width:1px;border-top-width:1px}
.hud-frame .bl{left:var(--hi);bottom:var(--hb);border-left-width:1px;border-bottom-width:1px}
.hud-frame .brr{right:var(--hi);bottom:var(--hb);border-right-width:1px;border-bottom-width:1px}
.hud-frame .lab{position:fixed;display:flex;align-items:center;gap:10px;white-space:nowrap}
.hud-frame .l-top{right:calc(var(--hi) + 32px);top:90px;color:var(--ink)}
.hud-frame .l-top span:first-of-type{color:var(--muted)}
.hud-frame .rec-d{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:blink calc(var(--beat)*2) steps(1) infinite}
.hud-frame .l-sec{left:calc(var(--hi) + 32px);bottom:calc(var(--hb) + 2px)}
.hud-frame .l-sec b{color:var(--gold);font-weight:500}
.hud-frame .l-tky{right:calc(var(--hi) + 32px);bottom:calc(var(--hb) + 2px)}
.hud-frame .l-tky i{width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgb(var(--gold-rgb) / .2)}
.hud-frame .rail{position:fixed;left:calc(var(--hi) + 32px + var(--secw,190px));right:calc(var(--hi) + 32px + var(--tkyw,230px));bottom:calc(var(--hb) + 6px);height:1px;background:rgba(238,232,220,.14)}
.hud-frame .rail i{position:absolute;left:0;top:-.5px;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--gold)}
html.anim:not(.skip-intro):not(.intro-done) .hud-frame{opacity:0}
html.intro-done .hud-frame{animation:none}
html.intro-go .hud-frame{animation:fadeIn 1.4s var(--e-out) calc(var(--beat)*2) both}
html.anim:not(.ready) .hud-frame{animation:failsafeShow .01s 4s forwards}
@media (max-width:860px){
  .hud-frame{--hi:8px;--hb:8px;font-size:8.5px;letter-spacing:.12em}
  .hud-frame .br{width:12px;height:12px}
  .hud-frame .tl,.hud-frame .tr,.hud-frame .l-top{display:none}
  .hud-frame .l-sec{left:calc(var(--hi) + 18px)}
  .hud-frame .l-tky{right:calc(var(--hi) + 18px)}
  .hud-frame .l-tky .geo{display:none}
  .hud-frame .rail{left:calc(var(--hi) + 18px + var(--secw,140px));right:calc(var(--hi) + 18px + var(--tkyw,110px))}
}

/* over the white sections the HUD switches to ink */
html.hud-light .hud-frame{color:#5D584F}
html.hud-light .hud-frame .bl,html.hud-light .hud-frame .brr,html.hud-light-top .hud-frame .tl,html.hud-light-top .hud-frame .tr{border-color:rgba(23,28,37,.4)}
html.hud-light-top .hud-frame .l-top{color:#171C25}
html.hud-light-top .hud-frame .l-top span:first-of-type{color:#5D584F}
html.hud-light .hud-frame .rail{background:rgba(23,28,37,.14)}
html.hud-light .hud-frame .l-sec b,html.hud-light .hud-frame .rail i,html.hud-light .hud-frame .l-tky i{background-color:#8A7048;color:#8A7048}
html.hud-light .hud-frame .l-sec b{background:none}
.hud-frame .br,.hud-frame .lab,.hud-frame .rail{transition:color .4s,border-color .4s,background-color .4s}


/* =========================================================
   inner pages: about, the four services
   ========================================================= */
.sub-hero{position:relative;padding:calc(118px + env(safe-area-inset-top,0px)) 0 clamp(70px,9vw,120px)}
.sub-hero.wrap{padding-inline:var(--pad)}
.page-about .sub-hero{padding-bottom:clamp(8px,2vw,28px)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:11px;letter-spacing:.14em;color:var(--muted);margin-bottom:26px}
.crumbs a{color:var(--muted);text-decoration:none;transition:color .3s}
.crumbs a:hover{color:var(--ink)}
.crumbs i{font-style:normal;opacity:.5}
.crumbs [aria-current]{color:var(--ink)}
.sub-title{margin-top:16px;font-family:var(--jp);font-weight:900;font-size:clamp(46px,6.6vw,108px);line-height:1.08;letter-spacing:.01em}
html[data-lang="en"] .sub-title{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.92;font-size:clamp(54px,7.6vw,124px)}
html[data-lang="en"] .svc-title{font-size:clamp(50px,5.8vw,100px)}
.sub-title .brand-title{font-family:var(--disp);font-weight:400;text-transform:none;line-height:.92;font-size:1.12em}
.svc-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,96px);align-items:center}
.svc-ec .svc-hero-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
.svc-sns .svc-hero-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.svc-no{font-family:var(--disp);font-size:clamp(110px,14vw,220px);line-height:.78;color:transparent;-webkit-text-stroke:1.2px var(--gold);margin:0 0 6px -.04em;letter-spacing:.01em}
.svc-no+.kicker{margin-top:16px}
.svc-lede{margin-top:22px;font-family:var(--mincho);font-weight:600;font-size:clamp(22px,2.3vw,32px);line-height:1.5}
.svc-lede .en{font-family:var(--serif);font-weight:400;font-size:1.18em;line-height:1.2;letter-spacing:-.005em}
html[data-lang="en"] .svc-lede{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,2.7vw,40px);line-height:1.15}
.svc-body{margin-top:16px;color:var(--muted);max-width:32em;font-size:clamp(15px,1.2vw,17px)}
.svc-hero-copy .ctas{margin-top:32px}
html.anim .svc-hero-copy>*{opacity:0;transform:translate3d(0,30px,0);animation:riseIn 1.2s var(--e-out) both}
html.anim .svc-hero-copy>:nth-child(2){animation-delay:.08s}html.anim .svc-hero-copy>:nth-child(3){animation-delay:.14s}html.anim .svc-hero-copy>:nth-child(4){animation-delay:.2s}
html.anim .svc-hero-copy>:nth-child(5){animation-delay:.32s}html.anim .svc-hero-copy>:nth-child(6){animation-delay:.42s}html.anim .svc-hero-copy>:nth-child(7){animation-delay:.5s}
@media (max-width:900px){.svc-hero-grid,.svc-ec .svc-hero-grid,.svc-sns .svc-hero-grid,.svc-video .svc-hero-grid{grid-template-columns:minmax(0,1fr)}.sub-hero{padding-top:calc(96px + env(safe-area-inset-top,0px))}}

/* video player: plays muted on screen, sound only on request */
.vp{margin:0}
.vp-frame{position:relative;background:#07090D;overflow:hidden;isolation:isolate}
.vp video{display:block;width:100%;height:100%;object-fit:cover}
.vp-vert .vp-frame{aspect-ratio:9/16;max-width:400px;margin-inline:auto;border-radius:34px;padding:9px;box-shadow:0 0 0 1px var(--line2),0 60px 100px -50px rgba(0,0,0,.95),0 0 120px -40px rgb(var(--gold-rgb) / .2)}
.vp-vert video{border-radius:26px}
.vp-wide .vp-frame{aspect-ratio:16/9;border-radius:22px;box-shadow:0 0 0 1px var(--line2),0 60px 100px -50px rgba(0,0,0,.95)}
.vp figcaption{margin-top:14px;font-size:12.5px;color:var(--muted);text-align:center}
.vp-tag{position:absolute;top:20px;left:20px;z-index:2;display:inline-flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.16em;padding:6px 10px;border-radius:99px;background:rgba(7,9,13,.62);color:#F2ECE0}
.vp-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.vp-wide .vp-tag{top:14px;left:14px}
.vp-sound{position:absolute;right:20px;bottom:20px;z-index:3;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:99px;border:0;background:rgba(7,9,13,.66);color:#F2ECE0;font-size:10.5px;letter-spacing:.12em;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(238,232,220,.25)}
.vp-sound:hover{background:rgba(0,0,0,.85)}
.vp-sound[aria-pressed="true"]{background:#C8B084;color:#141922;box-shadow:none}
.vs-ic{width:14px;height:14px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2ECE0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='%23F2ECE0'/%3E%3Cpath d='M17 9l5 6M22 9l-5 6'/%3E%3C/svg%3E")}
.vp-sound[aria-pressed="true"] .vs-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141922' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='%23141922'/%3E%3Cpath d='M17 8.5a5 5 0 0 1 0 7M19.5 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E")}
.vp-sound .vs-on,.vp-sound[aria-pressed="true"] .vs-off{display:none}
.vp-sound[aria-pressed="true"] .vs-on{display:inline}
.vp-sound[hidden]{display:none}
.svc-hero-media .mon{max-width:600px;margin-inline:auto}
.svc-hero-media .mon figcaption{margin-top:12px;font-size:12.5px;color:var(--muted);text-align:center}

/* points */
.points{padding:clamp(100px,12vw,170px) 0}
.pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.2vw,28px);margin-top:clamp(40px,5vw,64px)}
.pts>li{position:relative;display:flex;flex-direction:column;gap:12px;padding-top:clamp(20px,2.2vw,30px);border-top:2px solid var(--ink)}
.pt-no{font-family:var(--disp);font-size:clamp(46px,4.8vw,76px);line-height:.85;color:var(--gold)}
.pts h3{font-weight:900;font-size:clamp(20px,1.9vw,27px);line-height:1.35}
html[data-lang="en"] .pts h3{font-weight:700;line-height:1.2}
.pts p{color:var(--muted);font-size:15.5px}
.ring{position:absolute;right:0;top:clamp(20px,2.2vw,30px);width:clamp(66px,6vw,84px);aspect-ratio:1;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:5}
.ring .r-trk{stroke:var(--line)}
.ring .r-arc{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;animation:ring3 3s linear infinite}
.ring b{font-family:var(--disp);font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1;margin-top:-6px}
.ring small{position:absolute;bottom:22%;font-size:8px;letter-spacing:.2em;color:var(--muted)}
@keyframes ring3{from{stroke-dashoffset:0}to{stroke-dashoffset:100}}
.platforms{margin-top:clamp(36px,4vw,56px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.platforms p{font-size:11px;letter-spacing:.18em;color:var(--muted)}
.platforms .chips{margin:0}
@media (max-width:860px){.pts{grid-template-columns:minmax(0,1fr)}}

/* EC: everything we do for a store, as rows */
.pt-intro{color:var(--muted);font-size:clamp(15px,1.25vw,17.5px);max-width:40em}
.pts-rows{grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line2)}
.pts-rows>li{display:grid;grid-template-columns:clamp(64px,7vw,110px) minmax(0,.85fr) minmax(0,1.25fr);grid-template-areas:"n h d" "n h c";column-gap:clamp(20px,3.4vw,56px);row-gap:14px;align-items:start;padding:clamp(26px,3vw,40px) 0;border-top:0;border-bottom:1px solid var(--line2)}
.pts-rows .pt-no{grid-area:n;font-size:clamp(38px,3.8vw,58px)}
.pts-rows h3{grid-area:h;font-size:clamp(20px,1.9vw,27px)}
.pts-rows p{grid-area:d}
.pts-rows .chips{grid-area:c;margin:0}
.pts-rows .chips span{font-weight:600;font-size:12.5px;background:rgba(238,232,220,.35)}
@media (max-width:860px){.pts-rows>li{grid-template-columns:50px minmax(0,1fr);grid-template-areas:"n h" "n d" "n c";column-gap:14px}}
@media (min-width:901px){.svc-video .svc-hero-grid{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}}
.more .sec-head .d{margin-top:-6px}

/* founder teaser on home */
.teaser{padding-block:clamp(100px,12vw,170px) 0}
.teaser-card{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:clamp(24px,4.4vw,72px);align-items:center;padding:clamp(16px,2vw,26px);border:1px solid var(--line2);border-radius:26px;text-decoration:none;color:inherit;transition:border-color .5s,background-color .5s}
.teaser-card:hover{border-color:var(--gold);background:rgba(238,232,220,.02)}
.teaser-img{display:block;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--panel)}
.teaser-img img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform 1.6s var(--e-out)}
.teaser-card:hover .teaser-img img{transform:scale(1.05)}
.teaser-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-right:clamp(0px,2vw,24px)}
.teaser-name{font-weight:900;font-size:clamp(30px,3.6vw,56px);line-height:1.18}
html[data-lang="en"] .teaser-name{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.98}
.teaser-txt{color:var(--muted);max-width:34em;font-size:clamp(15px,1.2vw,17px)}
.teaser .t-more{margin-top:0}
@media (max-width:700px){.teaser-card{grid-template-columns:minmax(0,1fr)}.teaser-img{max-width:280px}}

/* about: track record, more */
.track{padding:clamp(90px,11vw,150px) 0}
.track-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(36px,4.6vw,56px)}
.track-stats>div{padding-top:20px;border-top:2px solid var(--ink)}
.track-stats dt{font:500 11px/1.4 var(--mono);letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.track-stats dd{margin-top:10px;font-family:var(--disp);font-size:clamp(42px,5.6vw,88px);line-height:1}
.track-stats dd .ja{font-family:var(--jp);font-weight:900;font-size:.8em}
.track-stats>div:first-child dd{color:var(--gold)}
.track .fine{margin-top:16px;font-size:12px;color:var(--muted)}
@media (max-width:760px){.track-stats{grid-template-columns:minmax(0,1fr)}}
.more{padding-block:clamp(100px,12vw,170px)}
.more .sec-head{margin-bottom:clamp(36px,4.6vw,56px)}
.page-inner .flow-sec{padding-block:clamp(100px,12vw,170px) 0}
.page-inner .final{margin-top:0}

/* =========================================================
   reduced motion: calm, complete, static
   ========================================================= */
html.rm *,html.rm *::before,html.rm *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.rm .letterbox{display:none}
html.rm .grid-bp,html.rm .bp{opacity:0}
html.rm .menu li,html.rm .menu-sub,html.rm .menu-foot{opacity:1;transform:none}
html.rm .svc-hero-copy>*{opacity:1;transform:none}
html.rm .tiles>li{opacity:1;transform:none}
html.rm .ring .r-arc{stroke-dashoffset:0}