/* what-we-do page */
/* ============ WHAT WE DO ============ */
.glow{position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(60vw 60vh at 85% 20%,color-mix(in srgb,var(--accent,var(--violet)) 16%,transparent),transparent 70%);transition:background 1s}
@supports not (background:color-mix(in srgb,red 10%,transparent)){.glow{background:radial-gradient(60vw 60vh at 85% 20%,rgba(143,43,230,.14),transparent 70%)}}
.wwd-hero{padding:calc(150px + env(safe-area-inset-top,0px)) 0 90px}
.wwd-hero .kicker{color:var(--muted);font-size:1rem;margin-bottom:26px;opacity:0;transform:translateY(12px);transition:opacity .8s,transform .8s var(--ease)}
.wwd-hero h1{font-size:clamp(2.4rem,5.6vw,5.2rem);font-weight:700;letter-spacing:-.04em;line-height:1.02;max-width:15ch}
.wwd-hero h1 .ln{display:block;overflow:hidden;padding-bottom:.05em}
.wwd-hero h1 .ln span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease)}
.wwd-hero h1 .ln:nth-child(2) span{transition-delay:.1s}
.wwd-hero .lede{margin-top:30px;opacity:0;transform:translateY(12px);transition:opacity .8s .4s,transform .8s .4s var(--ease)}
.loaded .wwd-hero .kicker,.loaded .wwd-hero .lede{opacity:1;transform:none}
.loaded .wwd-hero h1 .ln span{transform:none}

.index{margin-top:80px;border-top:1px solid var(--line)}
.ix{position:relative;display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:20px;padding:26px 0;border-bottom:1px solid var(--line);overflow:hidden;opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.loaded .ix{opacity:1;transform:none}
.ix::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--c),transparent 70%);opacity:.14;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.ix:hover::before,.ix:focus-visible::before{transform:scaleX(1)}
.ix-n{font-family:var(--display);font-size:.9rem;color:var(--muted);position:relative}
.ix-t{font-family:var(--display);font-size:clamp(1.4rem,3.2vw,2.6rem);font-weight:500;letter-spacing:-.03em;position:relative;transition:transform .6s var(--ease)}
.ix:hover .ix-t{transform:translateX(14px)}
.ix-s{color:var(--muted);font-size:.95rem;position:relative;display:flex;align-items:center;gap:12px}
.ix-s b{width:10px;height:10px;border-radius:50%;background:var(--c)}

.caps{position:relative;display:grid;grid-template-columns:260px 1fr;gap:70px;padding:60px 0 40px}
.caps > *{min-width:0}
.rail{position:sticky;top:120px;align-self:start}
.rail ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rail a{display:flex;align-items:center;gap:14px;padding:10px 0;color:var(--muted);font-size:.98rem;transition:color .3s}
.rail a i{position:relative;width:34px;height:2px;background:var(--line);border-radius:2px;overflow:hidden;flex:none}
.rail a i::after{content:"";position:absolute;inset:0;background:var(--c);transform:scaleX(var(--p,0));transform-origin:left}
.rail a.on{color:var(--paper)}
.rail a:hover{color:var(--paper)}

.cap{padding:40px 0 120px;scroll-margin-top:100px}
.cap + .cap{border-top:1px solid var(--line);padding-top:110px}
.cap-tag{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:.95rem;margin-bottom:22px}
.cap-tag b{width:10px;height:10px;border-radius:50%;background:var(--c)}
.cap h2{font-size:clamp(2rem,4.6vw,3.8rem);font-weight:500;letter-spacing:-.035em;max-width:14ch}
.cap .lede{margin-top:26px;max-width:60ch}
.svc{display:grid;grid-template-columns:repeat(2,1fr);margin-top:50px;border-top:1px solid var(--line)}
.svc li{list-style:none;display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
.svc li:nth-child(odd){padding-right:20px}
.svc li:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}
.svc li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);flex:none;transition:transform .4s var(--ease)}
.svc li:hover::before{transform:scale(1.8)}
.svc{padding:0;margin-bottom:0}

.cap-extra{margin-top:46px}
.mini-sites{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.mini{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 22px;border-radius:16px;border:1px solid var(--line);background:var(--ink-2);transition:border-color .3s}
.mini:hover{border-color:var(--c)}
.mini strong{font-family:var(--display);font-weight:500;font-size:1.05rem;letter-spacing:-.01em}
.mini strong:lang(ja){font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-weight:700}
.mini span{color:var(--muted);font-size:.85rem}
.mini.soon{border-style:dashed;background:none}
.mini.soon strong{color:var(--muted)}
.note{color:var(--muted);font-size:.95rem;margin-top:30px;max-width:60ch}
.note strong{color:var(--paper);font-weight:600}
.cap-cta{margin-top:40px}

.flow{display:flex;align-items:center;gap:0;margin-top:46px;flex-wrap:wrap}
.flow span{padding:.7em 1.2em;border-radius:999px;border:1px solid var(--line);font-size:.92rem}
.flow i{width:34px;height:1px;background:linear-gradient(90deg,var(--line),var(--c))}
.flow span:last-child{border-color:var(--c);color:var(--paper)}

@media (max-width:1020px){
  .caps{grid-template-columns:1fr;gap:0;padding-top:0}
  .rail{position:sticky;top:76px;z-index:20;margin:0 -24px;padding:0 24px;background:rgba(5,6,11,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .rail ol{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none}
  .rail ol::-webkit-scrollbar{display:none}
  .rail a{white-space:nowrap;padding:16px 0;font-size:.92rem}
  .rail a i{display:none}
  .rail a.on{box-shadow:inset 0 -2px 0 var(--c)}
  .cap{scroll-margin-top:140px}
}
@media (max-width:640px){
  .ix{grid-template-columns:44px 1fr}
  .ix-s{display:none}
  .svc,.mini-sites{grid-template-columns:1fr}
  .svc li:nth-child(even){padding-left:0;border-left:0}
  .cap + .cap{padding-top:80px}
  .cap{padding-bottom:80px}
  .flow span{padding:.6em .9em;font-size:.85rem}
  .flow i{width:12px}
}