@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
:root{--bg:#050505;--panel:#0b0b0d;--text:#f2f1ed;--muted:#8e8e94;--line:#242428;--accent:#6e6bff;--pad:clamp(22px,5vw,76px)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,'Noto Sans JP',sans-serif;line-height:1.7}a{color:inherit;text-decoration:none}.header{height:88px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;position:absolute;z-index:20;width:100%;border-bottom:1px solid rgba(255,255,255,.12)}.logo{font-weight:700;letter-spacing:.16em;display:flex;align-items:center;gap:11px}.logo-mark{width:29px;height:29px;display:grid;place-items:center;background:var(--text);color:#080808;border-radius:50%;font-size:13px;letter-spacing:0}.header nav{display:flex;align-items:center;gap:34px;text-transform:uppercase;font-size:12px;letter-spacing:.12em}.header nav a{transition:.2s}.header nav a:hover{color:#a9a7ff}.nav-cta{border:1px solid #55545c;padding:12px 18px;border-radius:99px}.menu{display:none;background:transparent;border:0}.hero{min-height:100svh;padding:180px var(--pad) 64px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to bottom,black,transparent 80%)}.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.8}.orb-a{width:55vw;height:55vw;right:-13vw;top:-20vw;background:radial-gradient(circle at 35% 35%,#8683ff,#29205f 45%,transparent 70%)}.orb-b{width:30vw;height:30vw;right:21vw;bottom:-24vw;background:#3430d3;filter:blur(80px);opacity:.35}.eyebrow,.section-no,.card-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#a3a2a8}.hero h1{position:relative;font-size:clamp(54px,8.2vw,132px);line-height:1.02;letter-spacing:-.055em;margin:26px 0 64px;font-weight:500;max-width:1300px}.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.8)}.hero-foot{position:relative;display:flex;align-items:end;justify-content:space-between;max-width:900px;margin-left:auto;width:65%;color:#b8b8bc}.circle-link{width:64px;height:64px;border:1px solid #555;border-radius:50%;display:grid;place-items:center;font-size:22px}.scroll{position:absolute;right:var(--pad);bottom:34px;font-size:9px;letter-spacing:.25em;color:#777;writing-mode:vertical-rl}.section{padding:140px var(--pad)}.statement{display:grid;grid-template-columns:28% 1fr;border-top:1px solid var(--line)}.statement>div{max-width:860px}.lead{font-size:clamp(42px,6vw,88px);line-height:1.2;letter-spacing:-.05em;margin:0 0 60px}.body-copy{max-width:720px;color:#aaa;font-size:clamp(15px,1.3vw,19px);line-height:2.1}.section-head{display:grid;grid-template-columns:28% 1fr;margin-bottom:72px}.section-head h2{font-size:clamp(48px,7vw,100px);font-weight:500;letter-spacing:-.05em;line-height:1;margin:0}.section-head>div>p{color:#888;margin-top:18px}.business{background:#09090b}.service-card{display:grid;grid-template-columns:28% 1fr auto;border-top:1px solid var(--line);padding:54px 0;transition:.3s}.service-card:last-child{border-bottom:1px solid var(--line)}.service-card:hover{padding-left:18px;background:#0e0e12}.card-no{color:#777}.service-card h3{font-size:clamp(28px,3.6vw,54px);line-height:1.35;margin:10px 0 30px;font-weight:500;letter-spacing:-.04em}.service-card ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:0}.service-card li,.tag{border:1px solid #34343a;border-radius:99px;padding:5px 13px;font-size:11px;color:#aaa}.arrow{font-size:25px}.company{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(50px,10vw,160px);align-items:center}.company-art{aspect-ratio:1;background:radial-gradient(circle at 30% 20%,#403d9b,transparent 37%),#0d0d10;display:flex;flex-direction:column;justify-content:center;padding:10%;font-size:clamp(34px,6vw,90px);font-weight:600;line-height:.92;letter-spacing:-.07em;overflow:hidden}.company-art span:nth-child(2){color:transparent;-webkit-text-stroke:1px #9694dc;margin-left:18%}.company-art span:nth-child(3){color:#7774ed;margin-left:4%}.company-copy h2{font-size:clamp(36px,4.2vw,65px);line-height:1.35;letter-spacing:-.05em;margin:34px 0}.company-copy>p:not(.section-no){color:#999;max-width:520px}.text-link{display:inline-flex;justify-content:space-between;gap:80px;border-bottom:1px solid #59595e;padding:14px 0;margin-top:30px;text-transform:uppercase;font-size:12px;letter-spacing:.12em}.news{background:#efeee9;color:#111}.news .section-no,.news .section-head>div>p{color:#666}.news-list{border-top:1px solid #bbb}.news-list a{display:grid;grid-template-columns:130px 120px 1fr auto;gap:20px;align-items:center;padding:30px 0;border-bottom:1px solid #c9c8c3}.news-list time{font-size:12px}.news .tag{border-color:#aaa;color:#555;text-align:center}.contact-band{padding:90px var(--pad);background:#6b68ef;color:#080808}.contact-band p{text-transform:uppercase;font-size:11px;letter-spacing:.18em}.contact-band a{font-size:clamp(36px,6vw,86px);font-weight:600;letter-spacing:-.05em;display:flex;justify-content:space-between}footer{padding:70px var(--pad) 30px;display:grid;grid-template-columns:1fr 1fr;gap:40px;color:#aaa}footer .logo{color:#fff}footer>p{margin:0}footer>div{grid-column:1/-1;display:flex;gap:30px;border-top:1px solid var(--line);padding-top:28px;font-size:12px;text-transform:uppercase}footer small{grid-column:1/-1;color:#555}.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:none}
/* inner pages */.inner-hero{padding:200px var(--pad) 100px;min-height:58vh;display:flex;flex-direction:column;justify-content:end;border-bottom:1px solid var(--line);background:radial-gradient(circle at 85% 15%,#252260,transparent 30%)}.inner-hero h1{font-size:clamp(64px,11vw,160px);line-height:1;margin:15px 0;letter-spacing:-.07em;font-weight:500}.inner-hero p{color:#888}.page-content{padding:100px var(--pad) 150px}.detail-block{display:grid;grid-template-columns:28% 1fr;padding:70px 0;border-bottom:1px solid var(--line)}.detail-block h2{font-size:clamp(32px,4vw,58px);line-height:1.3;margin:0}.detail-block p{color:#aaa;max-width:720px}.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:40px}.service-grid div{background:var(--bg);padding:40px}.company-table{width:100%;border-collapse:collapse}.company-table th,.company-table td{text-align:left;border-bottom:1px solid var(--line);padding:25px 0}.company-table th{width:28%;color:#777;font-weight:400}.form{max-width:850px}.field{margin-bottom:34px}.field label{display:block;font-size:12px;color:#999;margin-bottom:10px}.field input,.field textarea,.field select{width:100%;background:#0b0b0d;border:1px solid #29292e;color:white;padding:17px;font:inherit}.field textarea{min-height:180px}.submit{background:#6b68ef;border:0;border-radius:99px;padding:18px 38px;font-weight:700}.article{max-width:820px;margin:auto}.article time{color:#888}.article h2{font-size:clamp(30px,4vw,52px);line-height:1.45}.article p{color:#aaa;line-height:2.1}
@media(max-width:760px){.header{height:72px}.header nav{position:fixed;inset:0;background:#080808;padding:120px 28px 40px;flex-direction:column;align-items:flex-start;font-size:22px;transform:translateX(100%);transition:.35s}.header nav.open{transform:none}.menu{display:block;position:relative;z-index:2;width:40px;height:40px}.menu i{display:block;width:25px;height:1px;background:white;margin:8px}.hero{padding-top:140px}.hero h1{font-size:14vw}.hero-foot{width:100%;margin:0;align-items:center}.hero-foot p{font-size:13px}.statement,.section-head,.company,.detail-block{grid-template-columns:1fr}.section{padding-top:90px;padding-bottom:90px}.section-no{margin-bottom:35px}.service-card{grid-template-columns:45px 1fr auto}.service-card ul{display:none}.company-art{order:2}.news-list a{grid-template-columns:1fr auto}.news-list .tag,.news-list b{display:none}.news-list p{grid-column:1/-1;margin:0}.contact-band a{font-size:10vw}.service-grid{grid-template-columns:1fr}footer{grid-template-columns:1fr}.inner-hero{padding-top:160px}.company-table th{width:35%}}

/* ARUKUL brand logo */
.logo{width:126px;height:52px;background:url('assets/arukuru-logo.png') center/contain no-repeat;font-size:0;filter:invert(1) grayscale(1) brightness(2);mix-blend-mode:screen}.logo-mark{display:none}.hero-brand{position:absolute;z-index:1;right:clamp(20px,5vw,76px);top:50%;width:clamp(250px,37vw,590px);transform:translateY(-42%);opacity:.12;filter:invert(1) grayscale(1) brightness(2);mix-blend-mode:screen;pointer-events:none}.hero-brand img{display:block;width:100%}.intro-lock{overflow:hidden}.intro{position:fixed;z-index:1000;inset:0;background:#030305;display:grid;place-items:center;transition:opacity .65s cubic-bezier(.7,0,.2,1),visibility .65s}.intro::before,.intro::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(110,107,255,.09) 48%,transparent 66%);transform:translateX(-100%);animation:introSweep 2s ease forwards}.intro::after{animation-delay:.25s;opacity:.45}.intro img{position:relative;width:min(54vw,390px);filter:invert(1) grayscale(1) brightness(2);mix-blend-mode:screen;opacity:0;transform:scale(.78);animation:logoIn 1.15s cubic-bezier(.16,1,.3,1) .15s forwards}.intro p{position:absolute;top:calc(50% + min(29vw,210px));font-size:9px;letter-spacing:.5em;color:#73737b;opacity:0;animation:fadeIn .7s ease .9s forwards}.intro>span{position:absolute;left:50%;bottom:10%;height:1px;width:0;background:linear-gradient(90deg,transparent,#7875ff,transparent);transform:translateX(-50%);animation:lineGrow 1.35s ease .45s forwards}.intro-glow{position:absolute;width:40vw;height:40vw;border-radius:50%;background:#3935c9;filter:blur(120px);opacity:.18;animation:glowPulse 2s ease}.intro.is-done{opacity:0;visibility:hidden}.intro.is-done img{transform:scale(1.08);transition:transform .65s}.intro-lock.intro-finished{overflow:auto}@keyframes logoIn{to{opacity:1;transform:scale(1)}}@keyframes fadeIn{to{opacity:1}}@keyframes introSweep{to{transform:translateX(100%)}}@keyframes lineGrow{to{width:min(54vw,390px)}}@keyframes glowPulse{50%{opacity:.35;transform:scale(1.15)}}
@media(max-width:760px){.logo{width:92px;height:42px}.hero-brand{width:72vw;right:-13vw;top:32%;opacity:.09}.intro img{width:72vw}.intro p{top:calc(50% + 40vw)}}
@media(prefers-reduced-motion:reduce){.intro{display:none}.intro-lock{overflow:auto}.reveal{opacity:1;transform:none}}
.hero-brand{z-index:3;top:55%;width:clamp(270px,31vw,480px);opacity:.2}
.hero{background-image:linear-gradient(90deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.08) 55%,rgba(0,0,0,.12) 100%),url('assets/hero-blue-abstract.png');background-size:cover;background-position:center}.hero .orb,.hero .hero-grid{display:none}

/* Light editorial first view */
.home .header{color:#3c3c43;border-bottom-color:#d9d9dc}.home .header .logo{filter:none;mix-blend-mode:multiply}.home .header nav a:hover{color:#777}.home .nav-cta{border-color:#b7b7bb}.home .hero{color:#3c3c43;background:#f4f4f6;isolation:isolate}.home .hero::before{content:'';position:absolute;z-index:-1;width:min(60vw,780px);aspect-ratio:1;border:2px solid #d7d7dc;border-left-color:transparent;border-bottom-color:#c9c9ce;border-radius:50%;left:48%;top:43%;transform:translate(-50%,-35%) rotate(-18deg)}.home .hero::after{content:'CREATIVE  /  BUSINESS  /  FORWARD';position:absolute;z-index:-1;left:var(--pad);bottom:30px;font-size:9px;letter-spacing:.4em;color:#c1c1c6}.home .hero .eyebrow{color:#77777e}.home .hero h1{font-weight:400;letter-spacing:-.075em;line-height:.94;max-width:1200px}.home .hero h1 em{display:block;margin-left:22%;margin-top:.08em;color:#3c3c43;-webkit-text-stroke:0;font-weight:600}.home .hero-foot{color:#68686f}.home .circle-link{border-color:#aaaab0;color:#3c3c43}.home .scroll{color:#aaaab0}.home .menu i{background:#3c3c43}
@media(max-width:760px){.home .header nav{color:#f2f1ed}.home .header nav a:hover{color:#a9a7ff}.home .hero h1{font-size:13.5vw;line-height:1.05}.home .hero h1 em{margin-left:8%}.home .hero::before{width:110vw;left:58%;top:40%}.home .hero::after{display:none}}