:root{
  --bg:#06092a;--bg2:#0b1040;--fg:#f2f4ff;--muted:#8d94b8;--accent:#00AEEF;--accent2:#4dd2ff;--line:#1a2158;
  --font:"Space Grotesk","Noto Sans JP",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:700;letter-spacing:-0.02em}
section{padding:120px 5vw}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px 5vw;
  background:linear-gradient(to bottom,rgba(6,9,42,.85),transparent)}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.06em;font-size:15px}
.logo img{width:30px;height:30px;border-radius:50%;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nav nav{display:flex;gap:28px;font-size:14px}
.nav nav a{opacity:.7;transition:opacity .2s}
.nav nav a:hover{opacity:1}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:0 5vw;overflow:hidden}
#bg{position:absolute;inset:0;width:100%;height:100%}
.hero-video{position:absolute;inset:0;overflow:hidden;opacity:.4;pointer-events:none}
.hero-video::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,9,42,.35),rgba(6,9,42,.9))}
.hero-video iframe{position:absolute;top:50%;left:50%;width:177.78vh;min-width:100vw;height:56.25vw;min-height:100vh;transform:translate(-50%,-50%);border:0}
.orbit{position:absolute;right:-10vw;top:50%;width:min(70vw,760px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;opacity:.5}
.orbit i{position:absolute;inset:0;border:1px solid rgba(77,210,255,.35);border-radius:50%;animation:spin 40s linear infinite}
.orbit i::before{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:var(--accent2);box-shadow:0 0 18px var(--accent2)}
.orbit i:nth-child(2){inset:14%;animation-duration:26s;animation-direction:reverse;border-color:rgba(77,210,255,.25)}
.orbit i:nth-child(3){inset:30%;animation-duration:18s;border-color:rgba(255,255,255,.18)}
.hero-inner{position:relative;z-index:1;max-width:1100px}
.eyebrow{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent2);margin-bottom:24px}
.title{font-size:clamp(64px,13vw,190px);line-height:.92;margin-bottom:32px}
.title .line{display:block;overflow:hidden;padding:.06em 0}
.title .line span{display:block;transform:translateX(-110%);animation:slidein 2s cubic-bezier(.2,.8,.2,1) forwards}
.title .line:nth-child(2) span{animation-delay:.25s}
.title .line:nth-child(2) .name{color:var(--accent)}
@keyframes slidein{to{transform:translateX(0)}}
.title .name i{display:inline-block;font-style:normal;animation:float 4.5s ease-in-out infinite;animation-delay:calc(2.2s + var(--d));--d:0s;text-shadow:0 0 40px rgba(0,174,239,.3)}
.title .name i:nth-child(2){--d:-1.2s;animation-duration:5.2s}
.title .name i:nth-child(3){--d:-2.4s;animation-duration:4.1s}
.title .name i:nth-child(4){--d:-3.3s;animation-duration:4.8s}
.title .name i:nth-child(5){--d:-.7s;animation-duration:5.6s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-.08em) rotate(-2deg)}65%{transform:translateY(.05em) rotate(1.5deg)}}
.lead{font-size:clamp(15px,1.4vw,20px);color:var(--muted);max-width:560px;margin-bottom:40px;opacity:0;animation:fade .8s 1.2s forwards}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;border:1px solid var(--fg);padding:14px 28px;border-radius:999px;font-size:14px;transition:background .25s,color .25s,border-color .25s;opacity:0;animation:fade .8s 1.5s forwards}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn.play{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.play:hover{background:#fff;border-color:#fff;color:var(--bg)}
.btn.ghost{animation-delay:1.65s}
@keyframes fade{to{opacity:1}}

/* works */
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:48px;gap:16px;flex-wrap:wrap}
.section-head h2{font-size:clamp(32px,4vw,56px)}
.section-head p{color:var(--muted)}
.filters{display:flex;gap:6px}
.filters button{background:none;border:1px solid var(--line);color:var(--muted);padding:8px 16px;border-radius:999px;font:inherit;font-size:13px;cursor:pointer;transition:.2s}
.filters button:hover{color:var(--fg);border-color:var(--muted)}
.filters button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:40px 32px}
.grid .card:first-child{grid-column:1/-1}
.grid .card:first-child .thumb{aspect-ratio:21/9}
.grid .card:first-child h3{font-size:24px}
.card{cursor:pointer;opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s}
.card.in{opacity:1;transform:none}
.card.hide{display:none}
.thumb{aspect-ratio:16/9;border-radius:12px;overflow:hidden;position:relative;background:var(--bg2);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.thumb::after{content:"▶";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;background:rgba(6,9,42,.4);opacity:0;transition:opacity .3s}
.card:hover .thumb img{transform:scale(1.06)}
.card:hover .thumb::after{opacity:1}
.thumb .tag,.thumb .len{position:absolute;z-index:1;font-size:11px;padding:3px 8px;border-radius:4px;background:rgba(6,9,42,.7);font-weight:500}
.thumb .tag{left:10px;top:10px;color:var(--accent2);letter-spacing:.1em}
.thumb .len{right:10px;bottom:10px}
.card h3{margin-top:16px;font-size:17px;line-height:1.4}
.card p{font-size:13px;color:var(--muted);margin-top:4px}
.more{margin-top:48px;text-align:center}
.more a{color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:2px}
.more a:hover{color:var(--fg)}

/* members */
.members{border-top:1px solid var(--line)}
.member-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px}
.member{padding:32px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.03),transparent);transition:transform .4s,border-color .4s}
.member:hover{transform:translateY(-4px);border-color:var(--accent)}
.avatar{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:#fff;background:radial-gradient(circle at 30% 30%,var(--c),transparent 70%),var(--bg2);border:1px solid var(--c);margin-bottom:20px;font-family:"Noto Sans JP",var(--font)}
.member h3{font-size:24px}
.member h3 small{font-size:13px;color:var(--muted);font-weight:400;margin-left:8px;letter-spacing:.1em}
.member .role{color:var(--accent2);font-size:13px;letter-spacing:.08em;margin:6px 0 14px}
.member p{font-size:14px;color:var(--muted)}
.member .links{display:flex;gap:16px;margin-top:20px;font-size:13px}
.member .links a{border-bottom:1px solid var(--line)}
.member .links a:hover{color:var(--accent2);border-color:var(--accent2)}

/* carousel */
.carousel{position:relative;overflow:hidden;margin:0 -5vw;padding:0 5vw;cursor:grab;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.carousel.dragging{cursor:grabbing}
.carousel .track{display:flex;gap:28px;width:max-content;will-change:transform}
.carousel .card{width:min(480px,78vw);flex:none;opacity:1;transform:none;user-select:none}
.carousel .card img{-webkit-user-drag:none}

/* about / contact */
.about{border-top:1px solid var(--line)}
.about-inner{max-width:1100px}
.about h2{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent2);margin-bottom:24px}
.big{font-size:clamp(22px,2.8vw,40px);line-height:1.4;font-weight:500;margin-bottom:64px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px}
.cols h4{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.cols ul{list-style:none}
.cols li{padding:6px 0;border-bottom:1px solid var(--line)}
.cols li a:hover{color:var(--accent2)}
.contact{text-align:center;border-top:1px solid var(--line)}
.contact h2{font-size:clamp(36px,6vw,90px);margin-bottom:16px}
.contact .sub{color:var(--muted);margin-bottom:28px}
.mail{font-size:clamp(18px,2vw,26px);border-bottom:1px solid var(--accent);color:var(--accent2)}
.social{display:flex;justify-content:center;gap:28px;margin-top:48px;color:var(--muted);font-size:14px}
.social a:hover{color:var(--fg)}
footer{padding:32px 5vw;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(3,5,24,.94);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.lightbox.open{opacity:1;pointer-events:auto}
.player{width:min(90vw,1200px);aspect-ratio:16/9}
.player iframe{width:100%;height:100%;border:0;border-radius:8px}
.close{position:absolute;top:20px;right:28px;background:none;border:0;color:#fff;font-size:40px;cursor:pointer}

@media(max-width:640px){
  .nav nav{gap:14px;font-size:13px}.logo span{display:none}
  section{padding:80px 5vw}
  .orbit{right:-40vw;width:120vw;opacity:.3}
  .hero-video{opacity:.35}
  .grid .card:first-child .thumb{aspect-ratio:16/9}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:0s!important;transition-duration:0s!important}
  .title .line span{transform:none}.lead,.btn{opacity:1}.card{opacity:1;transform:none}
}

/* --- member full-screen sections --- */
.member-hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:0 5vw;overflow:hidden;border-top:1px solid var(--line)}
.member-hero .hero-video{opacity:.5}
.member-hero .hero-video::after{background:linear-gradient(to right,rgba(6,9,42,.9),rgba(6,9,42,.3))}
.member-hero .title{font-size:clamp(72px,15vw,220px);margin-bottom:8px;font-family:"Noto Sans JP",var(--font)}
.member-hero .title .line span{animation:none;transform:translateX(-110%)}
.member-hero.in .title .line span{animation:slidein 2s cubic-bezier(.2,.8,.2,1) forwards}
.member-hero .name{color:var(--c)}
.member-hero .name i{text-shadow:0 0 50px var(--c);animation-play-state:paused}
.member-hero.in .name i{animation-play-state:running}
.member-hero .eyebrow{color:var(--c)}
.member-hero .en{font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.member-hero .lead,.member-hero .btn{animation:none;opacity:0}
.member-hero.in .lead{animation:fade .8s 1.2s forwards}
.member-hero.in .btn{animation:fade .8s 1.5s forwards}
.now-playing{position:absolute;bottom:-60px;left:0;font-size:12px;color:var(--muted);letter-spacing:.1em;opacity:0}
.member-hero.in .now-playing{animation:fade 1s 2s forwards}
.member-hero .hero-inner{padding-bottom:40px}

/* --- soft section boundaries --- */
.member-hero{border-top:0}
.member-hero .hero-video::after{background:
  linear-gradient(to right,rgba(6,9,42,.9),rgba(6,9,42,.3)),
  linear-gradient(to bottom,var(--bg) 0%,transparent 22%,transparent 78%,var(--bg) 100%)}
.hero .hero-video::after{background:linear-gradient(to bottom,rgba(6,9,42,.35),rgba(6,9,42,.6) 70%,var(--bg) 100%)}
.hero-video{-webkit-mask:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
.hero .hero-video{-webkit-mask:linear-gradient(to bottom,#000 70%,transparent);mask:linear-gradient(to bottom,#000 70%,transparent)}
.member-hero + .member-hero{margin-top:-12vh}
.works,.about,.members{border-top:0}

/* --- floating works carousel --- */
.float-cards .card{animation:cardfloat var(--fl,5s) ease-in-out infinite;animation-delay:var(--fd,0s)}
.float-cards .card:nth-child(even){margin-top:48px}
@keyframes cardfloat{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-14px) rotate(-.6deg)}70%{transform:translateY(8px) rotate(.5deg)}}
.float-cards .thumb{box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.float-cards .card .thumb{transition:transform .5s,box-shadow .5s}
.float-cards .card:hover .thumb{box-shadow:0 40px 70px -20px rgba(0,174,239,.35)}
.carousel{padding-top:20px;padding-bottom:70px}
@media(prefers-reduced-motion:reduce){.float-cards .card{animation:none}}

/* --- Orbit Lab brand: navy + silver (from icon) --- */
:root{--bg:#000060;--bg2:#0a0a78;--fg:#f4f4fa;--muted:#9c9cc0;--accent:#b4b4c8;--accent2:#d8d8e6;--line:#1c1c8a}
.hero-video::after{background:linear-gradient(to bottom,rgba(0,0,96,.35),rgba(0,0,96,.9))}
.hero .hero-video::after{background:linear-gradient(to bottom,rgba(0,0,96,.35),rgba(0,0,96,.6) 70%,var(--bg) 100%)}
.member-hero .hero-video::after{background:linear-gradient(to right,rgba(0,0,96,.9),rgba(0,0,96,.3)),linear-gradient(to bottom,var(--bg) 0%,transparent 22%,transparent 78%,var(--bg) 100%)}
.nav{background:linear-gradient(to bottom,rgba(0,0,96,.85),transparent)}
.thumb::after{background:rgba(0,0,96,.4)}
.thumb .tag,.thumb .len{background:rgba(0,0,96,.75)}
.lightbox{background:rgba(0,0,40,.94)}
.title .name i{text-shadow:0 0 40px rgba(216,216,230,.35)}
.title .line:nth-child(2) .name{color:transparent;background:linear-gradient(180deg,#e6e6f0,#8c8ca8);-webkit-background-clip:text;background-clip:text}
.orbit i{border-color:rgba(200,200,220,.35)}
.orbit i:nth-child(2){border-color:rgba(200,200,220,.22)}
.orbit i::before{background:#e6e6f0;box-shadow:0 0 18px #e6e6f0}
.btn.play{background:#e6e6f0;border-color:#e6e6f0;color:var(--bg)}
.btn.play:hover{background:#fff;border-color:#fff}
.mail{color:var(--accent2);border-color:var(--accent)}
.float-cards .card:hover .thumb{box-shadow:0 40px 70px -20px rgba(216,216,230,.3)}

/* --- layout fixes --- */
.title .line{padding:.14em 0 .1em;margin:-.06em 0}
.title .name i{text-shadow:none}
.title .line:nth-child(2) .name{color:inherit;background:none;-webkit-background-clip:initial;background-clip:initial}
.title .line:nth-child(2) .name i{color:transparent;background:linear-gradient(180deg,#eeeef6,#8c8ca8);-webkit-background-clip:text;background-clip:text}
.member-hero .name i{color:var(--c);background:none}
.carousel{-webkit-mask:none;mask:none}
.carousel::before,.carousel::after{content:"";position:absolute;top:0;bottom:0;width:10vw;z-index:2;pointer-events:none}
.carousel::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.carousel::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.carousel::before,.carousel::after{width:16vw}
.carousel::before{background:linear-gradient(to right,var(--bg) 20%,transparent)}
.carousel::after{background:linear-gradient(to left,var(--bg) 20%,transparent)}
.members-head{padding:120px 5vw 0;margin-bottom:-10vh;position:relative;z-index:2}
@media(max-width:640px){.members-head{padding-top:80px}}
.members-head{justify-content:center;text-align:center;flex-direction:column;align-items:center;gap:4px}

/* --- works list --- */
.list-toggle{text-align:center;margin-top:-20px}
.list-toggle .btn{opacity:1;animation:none}
.works-list{margin-top:56px}
.works-list .filters{justify-content:center;margin-bottom:40px}
.works-list .grid .card:first-child{grid-column:auto}
.works-list .grid .card:first-child .thumb{aspect-ratio:16/9}
.works-list .grid .card:first-child h3{font-size:17px}
.works-list .filters{flex-wrap:wrap;align-items:center;margin-bottom:12px}
.works-list .filters span{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-right:8px;min-width:60px;text-align:right}
.works-list .count{text-align:center;color:var(--muted);font-size:13px;margin:16px 0 36px}

/* --- Material 3 style filter chips --- */
.filters{gap:8px}
.filters button{position:relative;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 16px;border-radius:8px;
  border:1px solid rgba(200,200,220,.45);background:transparent;color:#e0e0ee;font-size:14px;font-weight:500;letter-spacing:.01em;
  transition:background .15s,border-color .15s,color .15s,padding .2s,box-shadow .15s;overflow:hidden}
.filters button::before{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .15s}
.filters button:hover::before{opacity:.08}
.filters button:focus-visible{outline:0}
.filters button:focus-visible::before{opacity:.12}
.filters button:active::before{opacity:.12}
.filters button::after{content:"";width:0;height:18px;flex:none;margin-left:-8px;opacity:0;transition:width .2s,opacity .2s,margin .2s;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/18px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/18px no-repeat;order:-1}
.filters button.on{background:#c8c8e6;border-color:transparent;color:#0a0a50;padding-left:8px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.filters button.on::after{width:18px;opacity:1;margin-left:0}
.filters button.on:hover{box-shadow:0 2px 6px rgba(0,0,0,.35)}
.works-list .filters span{min-width:64px}

/* --- stable list card motion --- */
.works-list .card{opacity:1;transform:none;transition:none;animation:none}
.works-list.opening .card:not(.hide){animation:cardin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 40ms)}
.works-list.filtering .card:not(.hide){animation:cardfade .25s ease-out both}
@keyframes cardin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cardfade{from{opacity:0}to{opacity:1}}
.works-list.closing .card:not(.hide){animation:cardout .35s cubic-bezier(.4,0,.6,1) both;animation-delay:calc(var(--i,0) * 15ms)}
@keyframes cardout{from{opacity:1;transform:none}to{opacity:0;transform:translateY(12px)}}

/* --- icon buttons (X / YouTube / link) --- */
.icon-btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#fff;font-size:14px;font-weight:500;transition:background .2s,border-color .2s,transform .2s}
.icon-btn svg{width:20px;height:20px;flex:none}
.icon-btn:hover{background:#fff;color:var(--bg);border-color:#fff;transform:translateY(-1px)}
.member-hero .icon-btn{opacity:0}
.member-hero.in .icon-btn{animation:fade .8s 1.5s forwards}
.icon-row{display:flex;gap:10px;flex-wrap:wrap}
.social.icon-row{justify-content:center;margin-top:48px}
.cols li a small{display:block;font-size:12px;color:var(--muted);letter-spacing:.05em}
.cols{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* --- nav active underline --- */
.nav nav{position:relative;padding-bottom:6px}
.nav nav a{padding-bottom:6px}
.nav nav a.active{opacity:1}
.nav .ink{position:absolute;bottom:0;left:0;height:2px;width:0;background:#e6e6f0;border-radius:2px;opacity:0;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),width .4s cubic-bezier(.2,.8,.2,1),opacity .3s}
.nav .ink.show{opacity:1}
.nav nav{font-size:16px;gap:36px}
.nav .ink{height:2px}
@media(max-width:640px){.nav nav{font-size:14px;gap:18px}}
.members-head{justify-content:space-between;text-align:left;flex-direction:row;align-items:baseline;gap:16px}

/* --- bigger controls / merged filter row / contact form --- */
.btn.big{font-size:16px;padding:18px 36px;opacity:1;animation:none}
.list-toggle{margin-top:-10px}
.works-list .filters{justify-content:center;gap:10px;margin-bottom:16px}
.filters button{height:40px;padding:0 20px;font-size:15px;border-radius:10px}
.filters button::after{height:20px}
.filters button.on{padding-left:12px}
.filters .sep{width:1px;height:28px;background:var(--line);margin:0 6px;align-self:center}
.contact-form{max-width:640px;margin:0 auto 24px;text-align:left;display:flex;flex-direction:column;gap:18px}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-form label{display:flex;flex-direction:column;gap:8px;font-size:13px;letter-spacing:.08em;color:var(--muted)}
.contact-form input,.contact-form select,.contact-form textarea{font:inherit;font-size:15px;color:var(--fg);background:rgba(255,255,255,.05);border:1px solid rgba(200,200,220,.3);border-radius:10px;padding:13px 14px;outline:0;transition:border-color .2s,background .2s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:#e6e6f0;background:rgba(255,255,255,.08)}
.contact-form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c8c8e6' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px}
.contact-form select option{color:#111}
.contact-form textarea{resize:vertical;min-height:140px}
.contact-form .hp{position:absolute;left:-9999px;opacity:0;height:0}
.contact-form button[type=submit]{align-self:center;min-width:220px}
.contact-form button[disabled]{opacity:.6;cursor:wait}
.form-msg{text-align:center;font-size:14px;min-height:1.4em;color:var(--muted)}
.form-msg.ok{color:#8ee8c8}.form-msg.err{color:#ff8a9a}
@media(max-width:640px){.contact-form .row{grid-template-columns:1fr}.filters button{height:36px;padding:0 14px;font-size:14px}}
.works-list .filters .sep{min-width:0;width:1px;height:28px;margin:0 6px;text-align:initial;background:var(--line)}

/* --- section title motion --- */
.t-anim{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.t-anim .ch{display:inline-block;transform:translateY(110%) rotate(3deg);opacity:0;transform-origin:left bottom}
.t-anim.in .ch{animation:chrise .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 35ms)}
.t-anim .ch.sp{width:.28em}
@keyframes chrise{to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.t-anim .ch{transform:none;opacity:1;animation:none}}