/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{overflow-x:hidden}

/* ── SWITCHER ── */
#psw{position:fixed;top:0;left:0;right:0;z-index:9999;background:#000;height:44px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid #1c1c1c}
#psw .lbl{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.18em;color:#333;text-transform:uppercase;margin-right:16px;white-space:nowrap}
#psw button{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;color:#444;background:none;border:none;cursor:pointer;padding:0 14px;height:44px;border-right:1px solid #161616;transition:color .2s,background .2s;white-space:nowrap}
#psw button:hover{color:#fff;background:#111}
#psw button.active{color:#fff;background:#141414}
.pw{padding-top:44px;min-height:100vh;position:relative;z-index:1}
#tp{display:none;position:fixed;bottom:24px;right:24px;z-index:9998;background:rgba(5,5,5,.97);backdrop-filter:blur(20px);border:1px solid #252525;border-radius:12px;padding:20px;width:240px;color:#fff;font-family:'IBM Plex Mono',monospace;font-size:11px}
#tp h4{font-size:9px;letter-spacing:.18em;color:#444;margin-bottom:14px;text-transform:uppercase}
#tp label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:#666;font-size:10px}
#tp select{background:#111;border:1px solid #333;color:#fff;border-radius:4px;padding:2px 6px;font-family:inherit;font-size:10px}
.sr{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s ease}
.sr.visible{opacity:1;transform:none}
.sr-d1{transition-delay:.12s}.sr-d2{transition-delay:.24s}.sr-d3{transition-delay:.36s}.sr-d4{transition-delay:.48s}
@keyframes fadepw{from{opacity:0}to{opacity:1}}
.pw{animation:fadepw .35s ease both}

/* ══════════════════════════════════════════
   P6 — VELOCITY  Black + Acid Yellow #d4ff00
   Layout: Split hero crash + accordion services
   + asymmetric why + inverted contact
══════════════════════════════════════════ */
.p6{background:#0b0b0b;color:#f2ece0;font-family:'Syne',sans-serif}
/* nav: minimal floating */
.p6-nav{position:fixed;top:44px;left:0;right:0;z-index:200;display:flex;justify-content:space-between;align-items:center;padding:0 52px;height:60px;background:rgba(11,11,11,0);transition:background .4s}
.p6-nav.scrolled{background:rgba(11,11,11,.92);backdrop-filter:blur(16px)}
.p6-logo{font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#f2ece0}
.p6-nl{display:flex;gap:32px;align-items:center}
.p6-nl a{color:rgba(242,236,224,.3);text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:color .2s}
.p6-nl a:hover{color:#d4ff00}
.p6-cta{border:1px solid rgba(212,255,0,.4)!important;color:#d4ff00!important;padding:9px 22px;transition:all .2s!important}
.p6-cta:hover{background:rgba(212,255,0,.08)!important}
/* hero: 60/40 split with crash animation */
.p6-hero{display:grid;grid-template-columns:1fr .65fr;min-height:100vh;padding-top:104px;overflow:hidden}
.p6-hl{padding:60px 52px 80px;display:flex;flex-direction:column;justify-content:flex-end}
.p6-crash-wrap{overflow:hidden}
.p6-w1{font-size:clamp(80px,10vw,160px);font-weight:800;line-height:.88;letter-spacing:-.04em;text-transform:uppercase;display:block;transform:translateX(-110%) skewX(-4deg);animation:p6sl .75s .1s cubic-bezier(.16,1,.3,1) forwards}
.p6-w2{font-size:clamp(80px,10vw,160px);font-weight:800;line-height:.88;letter-spacing:-.04em;text-transform:uppercase;display:block;color:#d4ff00;transform:translateX(110%) skewX(4deg);animation:p6sr .75s .28s cubic-bezier(.16,1,.3,1) forwards}
.p6-w3{font-size:clamp(80px,10vw,160px);font-weight:800;line-height:.88;letter-spacing:-.04em;text-transform:uppercase;display:block;transform:translateY(110%);animation:p6sd .75s .46s cubic-bezier(.16,1,.3,1) forwards}
@keyframes p6sl{to{transform:none}}
@keyframes p6sr{to{transform:none}}
@keyframes p6sd{to{transform:none}}
.p6-accent-line{width:0;height:2px;background:#d4ff00;margin:28px 0;animation:p6line .6s .8s cubic-bezier(.16,1,.3,1) forwards}
@keyframes p6line{to{width:200px}}
.p6-sub{font-family:'Noto Sans JP',sans-serif;font-size:14px;color:rgba(242,236,224,.45);line-height:2;max-width:380px;opacity:0;animation:p6up .7s .95s both}
.p6-btns{display:flex;gap:12px;margin-top:36px;opacity:0;animation:p6up .7s 1.1s both}
@keyframes p6up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.p6-btn{background:#d4ff00;color:#0b0b0b;padding:14px 36px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border:none;cursor:pointer;font-family:'Syne',sans-serif;transition:opacity .2s}
.p6-btn:hover{opacity:.82}
.p6-btn-o{background:none;border:1px solid #2a2a2a;color:#555;padding:14px 36px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;font-family:'Syne',sans-serif;transition:all .2s}
.p6-btn-o:hover{border-color:#f2ece0;color:#f2ece0}
/* right side: photo + floating text */
.p6-hr{position:relative;overflow:hidden;opacity:0;animation:p6up .8s 1.2s both}
.p6-photo{width:100%;height:100%;object-fit:cover;display:flex;flex-direction:column;justify-content:flex-end;position:relative}
.p6-photo-bg{position:absolute;inset:0;background:linear-gradient(135deg,#1a1a1a 0%,#2d2d1a 40%,#1a2010 70%,#0d1a0d 100%)}
.p6-photo-pattern{position:absolute;inset:0;opacity:.06;background-image:repeating-linear-gradient(45deg,#d4ff00 0,#d4ff00 1px,transparent 0,transparent 50%);background-size:20px 20px}
.p6-photo-grain{position:absolute;inset:0;opacity:.4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E")}
.p6-photo-label{position:absolute;bottom:24px;left:24px;font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(212,255,0,.4);letter-spacing:.2em;text-transform:uppercase}
.p6-photo-tags{position:absolute;top:32px;right:24px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.p6-photo-tag{font-family:'IBM Plex Mono',monospace;font-size:9px;background:rgba(212,255,0,.12);border:1px solid rgba(212,255,0,.25);padding:4px 10px;color:rgba(212,255,0,.6);letter-spacing:.12em;text-transform:uppercase}
/* horizontal service strip */
.p6-strip{display:flex;overflow:hidden;border-top:1px solid #1e1e1e;border-bottom:1px solid #1e1e1e;background:#d4ff00}
.p6-strip-inner{display:flex;animation:p6mq 16s linear infinite;white-space:nowrap}
.p6-strip-item{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:14px 36px;color:#0b0b0b;border-right:1px solid rgba(11,11,11,.15)}
/* accordion services */
.p6-svc{border-bottom:1px solid #1e1e1e}
.p6-svc-head{padding:52px 52px 36px;display:grid;grid-template-columns:1fr 1fr;gap:60px;border-bottom:1px solid #1e1e1e}
.p6-svc-head h2{font-size:clamp(32px,4vw,52px);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05}
.p6-svc-head p{font-family:'Noto Sans JP',sans-serif;font-size:14px;color:rgba(242,236,224,.45);line-height:2;align-self:end}
.p6-acc{border-bottom:1px solid #1e1e1e;cursor:pointer;overflow:hidden;transition:background .25s}
.p6-acc:hover{background:#111}
.p6-acc-top{display:flex;align-items:center;gap:0;padding:0 52px;height:80px}
.p6-acc-num{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#d4ff00;letter-spacing:.12em;width:60px;flex-shrink:0}
.p6-acc-name{font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;flex:1}
.p6-acc-tags-inline{display:flex;gap:8px;flex-wrap:wrap;margin-right:20px}
.p6-acc-tag-sm{font-family:'IBM Plex Mono',monospace;font-size:9px;border:1px solid #2a2a2a;padding:3px 10px;color:#444;letter-spacing:.08em}
.p6-acc-plus{font-size:24px;color:#2a2a2a;transition:transform .3s,color .3s;margin-left:auto}
.p6-acc.open .p6-acc-plus{transform:rotate(45deg);color:#d4ff00}
.p6-acc-body{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s}
.p6-acc.open .p6-acc-body{max-height:200px;padding:0 52px 28px 112px}
.p6-acc-desc{font-family:'Noto Sans JP',sans-serif;font-size:13px;color:rgba(242,236,224,.45);line-height:2}
/* why: asymmetric 3-column with big numbers */
.p6-why{display:grid;grid-template-columns:1.5fr 1fr 1fr;border-top:1px solid #1e1e1e;border-bottom:1px solid #1e1e1e}
.p6-why-intro{padding:64px 52px;border-right:1px solid #1e1e1e;display:flex;flex-direction:column;justify-content:space-between}
.p6-why-intro-tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;color:#d4ff00;text-transform:uppercase;margin-bottom:20px}
.p6-why-intro h2{font-size:clamp(32px,4vw,52px);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05}
.p6-wc{padding:64px 40px;border-right:1px solid #1e1e1e;position:relative;overflow:hidden}
.p6-wc:last-child{border-right:none}
.p6-wbg-num{position:absolute;bottom:-20px;right:-10px;font-size:140px;font-weight:800;color:#141414;line-height:1;pointer-events:none}
.p6-wt{font-size:17px;font-weight:800;text-transform:uppercase;margin-bottom:14px;position:relative;z-index:1}
.p6-wtx{font-family:'Noto Sans JP',sans-serif;font-size:13px;color:rgba(242,236,224,.42);line-height:2;position:relative;z-index:1}
/* contact: inverted yellow */
.p6-ct{background:#d4ff00;padding:100px 52px;color:#0b0b0b}
.p6-ct-tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(11,11,11,.35);margin-bottom:20px}
.p6-ct h2{font-size:clamp(40px,5vw,72px);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:56px;line-height:1}
.p6-ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.p6-ct-l p{font-family:'Noto Sans JP',sans-serif;font-size:14px;color:rgba(11,11,11,.5);line-height:2}
.p6-form .fr{margin-bottom:20px}
.p6-form label{display:block;font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(11,11,11,.35);margin-bottom:6px}
.p6-form input,.p6-form select,.p6-form textarea{width:100%;background:rgba(11,11,11,.07);border:none;border-bottom:2px solid rgba(11,11,11,.18);color:#0b0b0b;padding:11px 0;font-family:'Noto Sans JP',sans-serif;font-size:14px;outline:none;transition:border-color .2s}
.p6-form input:focus,.p6-form select:focus,.p6-form textarea:focus{border-color:#0b0b0b}
.p6-form textarea{height:96px;resize:none}
.p6-bdk{background:#0b0b0b;color:#d4ff00;padding:15px 40px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border:none;cursor:pointer;font-family:'Syne',sans-serif;transition:opacity .2s}
.p6-bdk:hover{opacity:.8}
.p6-ft{padding:32px 52px;background:#0b0b0b;border-top:1px solid #1e1e1e;display:flex;justify-content:space-between;align-items:center}
.p6-ft-copy{font-family:'IBM Plex Mono',monospace;font-size:9px;color:#272727;letter-spacing:.12em}
@keyframes p6mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ══════════════════════════════════════════
   P7 — COSMOS  #030612 · Cyan #00ffd0
   Layout: Full-screen canvas sphere hero
   → centered content → radial why → split contact
══════════════════════════════════════════ */
.p7{background:#030612;color:#cce8ff;font-family:'Space Grotesk',sans-serif}
.p7-nav{position:fixed;top:44px;left:0;right:0;z-index:200;display:flex;justify-content:space-between;align-items:center;padding:0 56px;height:64px;background:rgba(3,6,18,.0);transition:background .4s}
.p7-nav.scrolled{background:rgba(3,6,18,.92);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,220,200,.07)}
.p7-logo{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.22em;color:#00ffd0;text-transform:uppercase}
.p7-nl{display:flex;gap:36px;align-items:center}
.p7-nl a{color:rgba(204,232,255,.28);text-decoration:none;font-size:12px;letter-spacing:.06em;transition:color .2s}
.p7-nl a:hover{color:#00ffd0}
.p7-cta{border:1px solid rgba(0,255,208,.32)!important;color:#00ffd0!important;padding:8px 20px;font-size:11px!important;transition:all .2s}
.p7-cta:hover{background:rgba(0,255,208,.07)!important}
/* hero: full viewport, canvas behind, text centered */
.p7-hero{position:relative;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}
#p7cv{position:absolute;inset:0;z-index:0}
.p7-hero-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.p7-ey{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.28em;color:rgba(0,255,208,.5);text-transform:uppercase;margin-bottom:32px;display:flex;align-items:center;gap:16px;animation:p7up 1s .3s both}
.p7-ey::before,.p7-ey::after{content:'';width:40px;height:1px;background:rgba(0,255,208,.3)}
@keyframes p7up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.p7-title{font-size:clamp(52px,7vw,100px);font-weight:700;line-height:.97;letter-spacing:-.04em;color:#cce8ff;margin-bottom:24px;animation:p7up 1s .5s both}
.p7-title span{color:#00ffd0;display:block}
.p7-sub{font-size:16px;color:rgba(204,232,255,.4);line-height:1.8;max-width:480px;margin-bottom:44px;animation:p7up 1s .7s both}
.p7-hb{display:flex;gap:16px;animation:p7up 1s .9s both}
.p7-bp{background:#00ffd0;color:#030612;padding:14px 40px;font-size:13px;font-weight:700;border:none;cursor:pointer;font-family:'Space Grotesk',sans-serif;letter-spacing:.04em;transition:opacity .2s}
.p7-bp:hover{opacity:.82}
.p7-bo{background:none;border:1px solid rgba(204,232,255,.16);color:rgba(204,232,255,.55);padding:14px 40px;font-size:13px;cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:all .2s}
.p7-bo:hover{border-color:#00ffd0;color:#00ffd0}
.p7-scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.2em;color:rgba(0,255,208,.3);text-transform:uppercase;display:flex;align-items:center;gap:8px;animation:p7up 1s 1.2s both}
.p7-scroll-hint::after{content:'↓';animation:p7bounce 2s infinite}
@keyframes p7bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
/* stats bar */
.p7-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(0,220,200,.07);border-bottom:1px solid rgba(0,220,200,.07)}
.p7-stat{padding:44px 40px;border-right:1px solid rgba(0,220,200,.07);text-align:center}
.p7-stat:last-child{border-right:none}
.p7-sv{font-size:42px;font-weight:700;color:#00ffd0;letter-spacing:-.02em;margin-bottom:6px}
.p7-sl{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.18em;color:rgba(204,232,255,.25);text-transform:uppercase}
/* services: 4-col glowing cards */
.p7-svc{padding:96px 56px}
.p7-sec{margin-bottom:52px}
.p7-stag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.22em;color:rgba(0,255,208,.42);text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:14px}
.p7-stag::after{content:'';flex:0 0 48px;height:1px;background:rgba(0,255,208,.25)}
.p7-stitle{font-size:28px;font-weight:600;color:#cce8ff}
.p7-sg{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.p7-sc{background:rgba(255,255,255,.022);border:1px solid rgba(0,220,200,.08);padding:36px 28px;position:relative;overflow:hidden;transition:border-color .3s,transform .3s,box-shadow .3s;cursor:pointer}
.p7-sc:hover{border-color:rgba(0,255,208,.38);transform:translateY(-8px);box-shadow:0 24px 60px rgba(0,255,208,.07)}
.p7-sc-glow{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,rgba(0,255,208,.6) 0%,transparent 70%);margin-bottom:24px;box-shadow:0 0 28px rgba(0,255,208,.22)}
.p7-sn{font-size:17px;font-weight:600;margin-bottom:12px;color:#cce8ff}
.p7-sd{font-family:'Noto Sans JP',sans-serif;font-size:12px;color:rgba(204,232,255,.35);line-height:1.9;margin-bottom:18px}
.p7-st2{display:flex;flex-wrap:wrap;gap:6px}
.p7-stg{font-family:'IBM Plex Mono',monospace;font-size:9px;border:1px solid rgba(0,255,208,.13);padding:3px 8px;color:rgba(0,255,208,.42)}
/* why: horizontal timeline */
.p7-why{padding:96px 56px;border-top:1px solid rgba(0,220,200,.07)}
.p7-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:52px;position:relative}
.p7-timeline::before{content:'';position:absolute;top:24px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,255,208,.25),transparent)}
.p7-tc{padding:0 40px 0 0;position:relative}
.p7-tc-dot{width:12px;height:12px;border-radius:50%;background:#00ffd0;box-shadow:0 0 20px rgba(0,255,208,.5);margin-bottom:28px}
.p7-tc-num{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.18em;color:rgba(0,255,208,.35);text-transform:uppercase;margin-bottom:12px}
.p7-tc-t{font-size:18px;font-weight:600;color:#cce8ff;margin-bottom:12px}
.p7-tc-tx{font-family:'Noto Sans JP',sans-serif;font-size:13px;color:rgba(204,232,255,.35);line-height:1.9}
/* contact: split with cosmic bg */
.p7-ct{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(0,220,200,.07)}
.p7-ctl{padding:80px 56px;position:relative;overflow:hidden}
.p7-ctl::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(0,255,208,.06) 0%,transparent 70%)}
.p7-ctl h2{font-size:36px;font-weight:700;color:#cce8ff;margin-bottom:12px;position:relative;z-index:1}
.p7-ctl>p{font-family:'Noto Sans JP',sans-serif;font-size:14px;color:rgba(204,232,255,.35);line-height:2;position:relative;z-index:1}
.p7-ctr{padding:80px 56px;border-left:1px solid rgba(0,220,200,.07)}
.p7-form .fr{margin-bottom:22px}
.p7-form label{display:block;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.18em;color:rgba(204,232,255,.2);text-transform:uppercase;margin-bottom:7px}
.p7-form input,.p7-form select,.p7-form textarea{width:100%;background:rgba(0,255,208,.025);border:1px solid rgba(0,220,200,.1);color:#cce8ff;padding:11px 16px;font-family:'Space Grotesk',sans-serif;font-size:14px;outline:none;transition:border-color .2s}
.p7-form input:focus,.p7-form select:focus,.p7-form textarea:focus{border-color:#00ffd0}
.p7-form textarea{height:108px;resize:vertical}
.p7-form select option{background:#030612}
.p7-ft{padding:32px 56px;border-top:1px solid rgba(0,220,200,.07);display:flex;justify-content:space-between;align-items:center}
.p7-ftl{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;color:#00ffd0;text-transform:uppercase}
.p7-ftc{font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(204,232,255,.14)}

/* ══════════════════════════════════════════
   P8 — NOIR FILM  #080603 · Amber #f5a623
   Layout: Letterbox hero + film strip
   → 2col services → big why blocks → amber contact
══════════════════════════════════════════ */
.p8{background:#080603;color:#f0e6d0;font-family:'Noto Serif JP',serif}
.p8-nav{position:fixed;top:44px;left:0;right:0;z-index:200;display:flex;justify-content:space-between;align-items:center;padding:0 60px;height:64px;background:rgba(8,6,3,.0);transition:background .4s}
.p8-nav.scrolled{background:rgba(8,6,3,.92);backdrop-filter:blur(20px)}
.p8-logo{font-family:'DM Serif Display',serif;font-size:17px;letter-spacing:.06em;color:#f0e6d0}
.p8-nl{display:flex;gap:36px;align-items:center}
.p8-nl a{color:rgba(240,230,208,.28);text-decoration:none;font-family:'Noto Sans JP',sans-serif;font-size:12px;letter-spacing:.08em;transition:color .2s}
.p8-nl a:hover{color:#f5a623}
.p8-cta{background:#f5a623!important;color:#080603!important;padding:9px 22px;font-family:'Noto Sans JP',sans-serif!important;font-size:12px!important;font-weight:700!important}
/* letterbox hero */
.p8-hero{position:relative;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.p8-letter-t,.p8-letter-b{position:absolute;left:0;right:0;height:80px;background:#080603;z-index:10;animation:p8bar .6s .2s cubic-bezier(.4,0,.2,1) both}
.p8-letter-t{top:0;transform-origin:top;animation-name:p8barT}
.p8-letter-b{bottom:0;transform-origin:bottom;animation-name:p8barB}
@keyframes p8barT{from{height:0}to{height:80px}}
@keyframes p8barB{from{height:0}to{height:80px}}
.p8-photo-bg{position:absolute;inset:0;background:linear-gradient(160deg,#1a1208 0%,#261a08 30%,#1a1004 60%,#0d0803 100%)}
.p8-photo-mid{position:absolute;inset:80px;background:linear-gradient(135deg,rgba(245,166,35,.06) 0%,transparent 50%)}
.p8-grain{position:absolute;inset:0;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.88' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");animation:p8grain .12s steps(1) infinite}
@keyframes p8grain{0%{transform:translate(0,0)}25%{transform:translate(-1%,2%)}50%{transform:translate(1%,-1%)}75%{transform:translate(-2%,1%)}100%{transform:translate(0,0)}}
.p8-scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px);pointer-events:none}
.p8-hero-content{position:relative;z-index:5;text-align:center;padding:0 80px}
.p8-film-id{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.28em;color:rgba(245,166,35,.35);text-transform:uppercase;margin-bottom:40px;animation:p8up .8s .8s both}
@keyframes p8up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.p8-title{font-family:'DM Serif Display',serif;font-size:clamp(60px,9vw,130px);line-height:.9;color:#f0e6d0;margin-bottom:40px;animation:p8up .9s 1s both}
.p8-title em{font-style:italic;color:#f5a623}
.p8-hero-sub{font-family:'Noto Sans JP',sans-serif;font-size:14px;color:rgba(240,230,208,.4);line-height:2;max-width:380px;margin:0 auto 40px;animation:p8up .8s 1.2s both}
.p8-hbtns{display:flex;gap:16px;justify-content:center;animation:p8up .8s 1.4s both}
.p8-btn{background:#f5a623;color:#080603;padding:14px 40px;font-family:'Noto Sans JP',sans-serif;font-size:13px;font-weight:700;border:none;cursor:pointer;transition:opacity .2s}
.p8-btn:hover{opacity:.82}
.p8-btn-o{background:none;border:1px solid rgba(240,230,208,.18);color:rgba(240,230,208,.5);padding:14px 40px;font-family:'Noto Sans JP',sans-serif;font-size:13px;cursor:pointer;transition:all .2s}
.p8-btn-o:hover{border-color:#f5a623;color:#f5a623}
.p8-film-label{position:absolute;bottom:90px;right:48px;z-index:6;font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.15em;color:rgba(245,166,35,.2);text-transform:uppercase}
/* film strip */
.p8-strip{overflow:hidden;border-top:1px solid rgba(245,166,35,.08);border-bottom:1px solid rgba(245,166,35,.08);height:200px;position:relative}
.p8-strip-inner{display:flex;gap:2px;animation:p8film 30s linear infinite;height:100%}
@keyframes p8film{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.p8-frame{flex:0 0 280px;height:100%;position:relative;overflow:hidden}
.p8-frame-bg{position:absolute;inset:0}
.p8-frame-holes{position:absolute;left:0;right:0;display:flex;justify-content:space-around;padding:0 20px}
.p8-frame-holes-t{top:8px}
.p8-frame-holes-b{bottom:8px}
.p8-hole{width:12px;height:8px;background:#080603;border-radius:2px}
.p8-frame-label{position:absolute;bottom:20px;left:16px;font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(245,166,35,.3);letter-spacing:.15em;text-transform:uppercase}
/* services: 2-col minimal */
.p8-svc{padding:96px 60px;border-bottom:1px solid rgba(245,166,35,.08)}
.p8-svc-hd{display:grid;grid-template-columns:1fr 2fr;gap:80px;margin-bottom:64px}
.p8-stag{font-family:'Noto Sans JP',sans-serif;font-size:9px;letter-spacing:.28em;color:rgba(245,166,35,.38);text-transform:uppercase;margin-bottom:14px}
.p8-stitle{font-family:'DM Serif Display',serif;font-size:32px;color:#f0e6d0;line-height:1.2}
.p8-svc-desc{font-family:'Noto Sans JP',sans-serif;font-size:14px;color:rgba(240,230,208,.38);line-height:2;align-self:end;max-width:480px}
.p8-sl{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(245,166,35,.08)}
.p8-sc{background:#080603;padding:48px 48px;transition:background .3s;cursor:pointer}
.p8-sc:hover{background:#0e0a06}
.p8-snum{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.22em;color:rgba(245,166,35,.32);text-transform:uppercase;margin-bottom:20px}
.p8-sname{font-family:'DM Serif Display',serif;font-size:28px;margin-bottom:16px;color:#f0e6d0}
.p8-sdesc{font-family:'Noto Sans JP',sans-serif;font-size:13px;color:rgba(240,230,208,.4);line-height:2;margin-bottom:20px}
.p8-stags{display:flex;gap:8px;flex-wrap:wrap}
.p8-stg{font-family:'Noto Sans JP',sans-serif;font-size:11px;background:rgba(245,166,35,.07);padding:3px 12px;color:rgba(245,166,35,.48)}
/* why: large numbered blocks */
.p8-why{border-bottom:1px solid rgba(245,166,35,.08)}
.p8-why-top{padding:80px 60px 40px;border-bottom:1px solid rgba(245,166,35,.08)}
.p8-why-top h2{font-family:'DM Serif Display',serif;font-size:clamp(36px,5vw,64px);color:#f0e6d0;line-height:1.1}
.p8-why-top h2 em{font-style:italic;color:#f5a623}
.p8-wblocks{display:grid;grid-template-columns:repeat(3,1fr)}
.p8-wb{padding:60px 48px;border-right:1px solid rgba(245,166,35,.08);position:relative;overflow:hidden}
.p8-wb:last-child{border-right:none}
.p8-wbig{font-family:'DM Serif Display',serif;font-size:120px;color:rgba(245,166,35,.05);line-height:.9;position:absolute;top:16px;right:16px}
.p8-wnum{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.22em;color:rgba(245,166,35,.32);text-transform:uppercase;margin-bottom:20px;position:relative;z-index:1}
.p8-wt{font-family:'DM Serif Display',serif;font-size:22px;color:#f0e6d0;margin-bottom:14px;position:relative;z-index:1}
.p8-wtx{font-family:'Noto Sans JP',sans-serif;font-size:13px;color:rgba(240,230,208,.4);line-height:2;position:relative;z-index:1}
/* contact: amber bg */
.p8-ct{background:#f5a623;padding:100px 60px;color:#080603}
.p8-ct-tag{font-family:'Noto Sans JP',sans-serif;font-size:9px;letter-spacing:.28em;color:rgba(8,6,3,.38);text-transform:uppercase;margin-bottom:16px}
.p8-ct h2{font-family:'DM Serif Display',serif;font-size:clamp(40px,5vw,64px);color:#080603;margin-bottom:12px;line-height:1.1}
.p8-ct>p{font-family:'Noto Sans JP',sans-serif;font-size:14px;color:rgba(8,6,3,.45);margin-bottom:52px}
.p8-ctg{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.p8-form .fr{margin-bottom:22px}
.p8-form label{display:block;font-family:'Noto Sans JP',sans-serif;font-size:10px;letter-spacing:.14em;color:rgba(8,6,3,.35);text-transform:uppercase;margin-bottom:6px}
.p8-form input,.p8-form select,.p8-form textarea{width:100%;background:none;border:none;border-bottom:1.5px solid rgba(8,6,3,.18);color:#080603;padding:11px 0;font-family:'Noto Sans JP',sans-serif;font-size:14px;outline:none;transition:border-color .2s}
.p8-form input:focus,.p8-form select:focus,.p8-form textarea:focus{border-color:#080603}
.p8-form textarea{height:96px;resize:none}
.p8-bdk{background:#080603;color:#f5a623;padding:14px 40px;font-family:'Noto Sans JP',sans-serif;font-size:13px;font-weight:700;border:none;cursor:pointer;transition:opacity .2s}
.p8-bdk:hover{opacity:.82}
.p8-ft{padding:32px 60px;border-top:1px solid rgba(245,166,35,.08);background:#080603;display:flex;justify-content:space-between;align-items:center}
.p8-ftl{font-family:'DM Serif Display',serif;font-size:14px;color:#f0e6d0}
.p8-ftc{font-family:'Noto Sans JP',sans-serif;font-size:11px;color:rgba(240,230,208,.16)}

/* ══════════════════════════════════════════
   P9 — PRISM  #08001a · Purple+Pink+Orange
   Layout: 3D CSS hero → bento grid
   → gradient why cards → glass contact
══════════════════════════════════════════ */
.p9{background:#08001a;font-family:'Outfit',sans-serif;color:#ede8ff;position:relative;overflow-x:hidden}
.p9-mbg{position:fixed;top:44px;left:0;right:0;bottom:0;z-index:0;overflow:hidden}
.p9b{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.p9b1{width:700px;height:700px;top:-200px;left:-150px;background:radial-gradient(circle,rgba(124,58,237,.45),transparent 70%);animation:p9d1 14s ease-in-out infinite}
.p9b2{width:600px;height:600px;top:300px;right:-200px;background:radial-gradient(circle,rgba(236,72,153,.35),transparent 70%);animation:p9d2 17s ease-in-out infinite}
.p9b3{width:500px;height:500px;bottom:-120px;left:38%;background:radial-gradient(circle,rgba(249,115,22,.25),transparent 70%);animation:p9d3 20s ease-in-out infinite}
@keyframes p9d1{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,30px)}}
@keyframes p9d2{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,50px)}}
@keyframes p9d3{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-40px)}}
.p9c{position:relative;z-index:1}
.p9-nav{position:fixed;top:44px;left:0;right:0;z-index:200;display:flex;justify-content:space-between;align-items:center;padding:0 60px;height:70px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(8,0,26,.72);backdrop-filter:blur(24px)}
.p9-logo{font-size:16px;font-weight:700;color:#ede8ff}
.p9-nl{display:flex;gap:36px;align-items:center}
.p9-nl a{color:rgba(237,232,255,.28);text-decoration:none;font-size:13px;transition:color .2s}
.p9-nl a:hover{color:#ede8ff}
.p9-cta{background:linear-gradient(135deg,rgba(124,58,237,.75),rgba(236,72,153,.75))!important;color:#fff!important;padding:10px 24px;border:1px solid rgba(255,255,255,.12)!important;font-weight:600!important;font-size:13px!important;backdrop-filter:blur(8px)}
/* 3D hero */
.p9-hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;padding:120px 60px 80px;perspective:1200px}
.p9-hl{padding-right:60px}
.p9-kicker{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;background:linear-gradient(135deg,#a78bfa,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:30px;animation:p9up 1s .2s both}
@keyframes p9up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.p9-title{font-size:clamp(46px,5.5vw,80px);font-weight:800;line-height:1.04;letter-spacing:-.025em;color:#ede8ff;margin-bottom:24px;animation:p9up 1s .38s both}
.p9-title em{font-style:italic;background:linear-gradient(135deg,#a78bfa,#f472b6,#fb923c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.p9-sub{font-size:16px;color:rgba(237,232,255,.42);line-height:1.8;margin-bottom:44px;animation:p9up 1s .56s both}
.p9-hb{display:flex;gap:14px;animation:p9up 1s .74s both}
.p9-btn{background:linear-gradient(135deg,#7c3aed,#ec4899);color:#fff;padding:15px 40px;font-size:14px;font-weight:700;border:none;cursor:pointer;font-family:'Outfit',sans-serif;transition:opacity .2s}
.p9-btn:hover{opacity:.82}
.p9-btn-o{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(237,232,255,.65);padding:15px 40px;font-size:14px;cursor:pointer;font-family:'Outfit',sans-serif;backdrop-filter:blur(8px);transition:all .2s}
.p9-btn-o:hover{background:rgba(255,255,255,.11);color:#ede8ff}
/* 3D floating cards right side */
.p9-3d-scene{position:relative;transform-style:preserve-3d;animation:p9up 1s .4s both}
.p9-card3d{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px);padding:28px 32px;position:absolute;box-shadow:0 32px 80px rgba(0,0,0,.4)}
.p9-card3d-main{position:relative;width:320px;transform:perspective(1000px) rotateY(-6deg) rotateX(3deg);animation:p9hov 7s ease-in-out infinite}
@keyframes p9hov{0%,100%{transform:perspective(1000px) rotateY(-6deg) rotateX(3deg) translateY(0)}50%{transform:perspective(1000px) rotateY(-6deg) rotateX(3deg) translateY(-14px)}}
.p9-card3d-float1{width:200px;top:-40px;right:-60px;transform:perspective(800px) rotateY(-18deg) rotateX(8deg) scale(.85);opacity:.7;animation:p9hov2 9s ease-in-out infinite}
.p9-card3d-float2{width:180px;bottom:-50px;left:-40px;transform:perspective(800px) rotateY(12deg) rotateX(-6deg) scale(.75);opacity:.55;animation:p9hov3 11s ease-in-out infinite}
@keyframes p9hov2{0%,100%{transform:perspective(800px) rotateY(-18deg) rotateX(8deg) scale(.85) translateY(0)}50%{transform:perspective(800px) rotateY(-18deg) rotateX(8deg) scale(.85) translateY(-10px)}}
@keyframes p9hov3{0%,100%{transform:perspective(800px) rotateY(12deg) rotateX(-6deg) scale(.75) translateY(0)}50%{transform:perspective(800px) rotateY(12deg) rotateX(-6deg) scale(.75) translateY(-8px)}}
.p9-card3d-label{font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(237,232,255,.3);margin-bottom:10px}
.p9-card3d-val{font-size:28px;font-weight:800;background:linear-gradient(135deg,#a78bfa,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:6px}
.p9-card3d-sub{font-size:13px;color:rgba(237,232,255,.4)}
.p9-prism-accent{position:absolute;top:50%;right:-80px;transform:translateY(-50%);width:4px;height:200px;background:linear-gradient(180deg,transparent,rgba(167,139,250,.6),rgba(244,114,182,.6),transparent);filter:blur(1px)}
/* bento grid */
.p9-bento{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto;gap:16px;padding:80px 60px;border-top:1px solid rgba(255,255,255,.05)}
.p9-bc{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(14px);padding:36px;transition:border-color .3s,transform .3s;cursor:pointer;position:relative;overflow:hidden}
.p9-bc:hover{border-color:rgba(167,139,250,.32);transform:translateY(-4px)}
.p9-bc-wide{grid-column:span 2}
.p9-bc-tall{grid-row:span 2}
.p9-bc-accent{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#7c3aed,#ec4899)}
.p9-bc-glow{position:absolute;top:-80px;right:-80px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.14),transparent 70%)}
.p9-bc-num{font-size:10px;font-weight:600;letter-spacing:.15em;color:rgba(167,139,250,.4);margin-bottom:12px}
.p9-bc-name{font-size:20px;font-weight:800;color:#ede8ff;margin-bottom:12px;line-height:1.2}
.p9-bc-desc{font-family:'Noto Sans JP',sans-serif;font-size:13px;color:rgba(237,232,255,.38);line-height:1.9;margin-bottom:16px}
.p9-bc-tags{display:flex;flex-wrap:wrap;gap:6px}
.p9-bc-tag{font-size:11px;background:rgba(124,58,237,.16);border:1px solid rgba(167,139,250,.16);padding:3px 12px;color:rgba(167,139,250,.7);font-weight:500}
/* why: 3 gradient-top cards */
.p9-why{padding:80px 60px;border-top:1px solid rgba(255,255,255,.05)}
.p9-wsec{margin-bottom:48px}
.p9-wstag{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#a78bfa;margin-bottom:12px}
.p9-wstitle{font-size:32px;font-weight:800;color:#ede8ff;line-height:1.2}
.p9-wg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.p9-wc{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(14px);padding:44px 36px;position:relative;overflow:hidden;transition:transform .3s}
.p9-wc:hover{transform:translateY(-6px)}
.p9-wacc{position:absolute;top:0;left:0;right:0;height:3px}
.p9-wacc1{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
.p9-wacc2{background:linear-gradient(90deg,#ec4899,#f472b6)}
.p9-wacc3{background:linear-gradient(90deg,#f97316,#fb923c)}
.p9-wnum{font-size:44px;font-weight:800;background:linear-gradient(135deg,rgba(167,139,250,.25),rgba(244,114,182,.25));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px;line-height:1}
.p9-wt{font-size:18px;font-weight:700;color:#ede8ff;margin-bottom:12px}
.p9-wtx{font-family:'Noto Sans JP',sans-serif;font-size:13px;color:rgba(237,232,255,.38);line-height:2}
/* glass contact */
.p9-ct{padding:80px 60px;border-top:1px solid rgba(255,255,255,.05)}
.p9-ctw{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(24px);padding:64px;display:grid;grid-template-columns:1fr 1fr;gap:80px;position:relative;overflow:hidden}
.p9-ctw::before{content:'';position:absolute;top:-100px;right:-100px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.14),transparent 70%)}
.p9-ct h2{font-size:36px;font-weight:800;color:#ede8ff;margin-bottom:12px;line-height:1.2;position:relative;z-index:1}
.p9-ct h2 em{font-style:italic;background:linear-gradient(135deg,#a78bfa,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.p9-ctdesc{font-family:'Noto Sans JP',sans-serif;font-size:14px;color:rgba(237,232,255,.35);line-height:2;margin-top:14px;position:relative;z-index:1}
.p9-form .fr{margin-bottom:22px}
.p9-form label{display:block;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(237,232,255,.25);margin-bottom:7px}
.p9-form input,.p9-form select,.p9-form textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#ede8ff;padding:13px 18px;font-family:'Outfit',sans-serif;font-size:14px;outline:none;transition:border-color .2s;backdrop-filter:blur(6px)}
.p9-form input:focus,.p9-form select:focus,.p9-form textarea:focus{border-color:#a78bfa}
.p9-form textarea{height:108px;resize:vertical}
.p9-form select option{background:#1a0038}
.p9-ft{padding:32px 60px;border-top:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;align-items:center}
.p9-ftl{font-size:15px;font-weight:700;color:#ede8ff}
.p9-ftc{font-size:11px;color:rgba(237,232,255,.18)}

/* ══════════════════════════════════════════
   P10 — PUNK RIOT  White · #ffe500 · #ff2200
   Layout: Collage hero slam + brutalist table
   + stacked color blocks + riot contact
══════════════════════════════════════════ */
.p10{background:#fff;color:#000;font-family:'Syne',sans-serif;overflow-x:hidden}
.p10-nav{position:fixed;top:44px;left:0;right:0;z-index:200;display:flex;justify-content:space-between;align-items:center;padding:0 56px;height:60px;background:#ffe500;border-bottom:3px solid #000}
.p10-logo{font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.p10-nl{display:flex;gap:28px;align-items:center}
.p10-nl a{color:rgba(0,0,0,.42);text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:color .15s}
.p10-nl a:hover{color:#000}
.p10-cta{background:#000!important;color:#ffe500!important;padding:9px 22px;font-weight:800!important;font-size:11px!important;letter-spacing:.1em!important;text-transform:uppercase!important;box-shadow:3px 3px 0 #555;transition:transform .15s,box-shadow .15s!important}
.p10-cta:hover{transform:translate(-2px,-2px)!important;box-shadow:5px 5px 0 #555!important}
/* collage hero: overlapping color blocks */
.p10-hero{min-height:100vh;position:relative;overflow:hidden;padding-top:104px;display:grid;grid-template-columns:1fr 1fr}
.p10-blk-y{position:absolute;top:0;left:0;right:0;bottom:0;background:#ffe500;transform:translateX(-100%);animation:p10sl .5s .1s cubic-bezier(.16,1,.3,1) forwards}
@keyframes p10sl{to{transform:none}}
.p10-blk-r{position:absolute;top:0;right:0;width:42%;bottom:0;background:#ff2200;transform:translateX(100%);animation:p10sr .5s .2s cubic-bezier(.16,1,.3,1) forwards;z-index:1}
@keyframes p10sr{to{transform:none}}
.p10-blk-b{position:absolute;bottom:0;left:0;width:58%;height:52%;background:#000;transform:translateY(100%);animation:p10sd .5s .32s cubic-bezier(.16,1,.3,1) forwards;z-index:2}
@keyframes p10sd{to{transform:none}}
.p10-hero-content{position:relative;z-index:10;padding:60px 56px;display:flex;flex-direction:column;justify-content:center}
.p10-hero-label{font-size:9px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:rgba(0,0,0,.3);margin-bottom:28px;animation:p10up .6s .7s both}
@keyframes p10up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.p10-title{font-size:clamp(64px,8.5vw,128px);font-weight:800;line-height:.88;letter-spacing:-.04em;text-transform:uppercase;margin-bottom:32px}
.p10-t1{display:block;color:#000;transform:translateY(-120%);animation:p10tu .6s .5s cubic-bezier(.16,1,.3,1) forwards}
.p10-t2{display:block;color:#ff2200;transform:translateY(-120%);animation:p10tu .6s .65s cubic-bezier(.16,1,.3,1) forwards}
.p10-t3{display:block;color:#000;transform:translateY(-120%);animation:p10tu .6s .8s cubic-bezier(.16,1,.3,1) forwards}
@keyframes p10tu{to{transform:none}}
.p10-sub{font-family:'Noto Sans JP',sans-serif;font-size:15px;color:rgba(0,0,0,.5);line-height:1.9;max-width:400px;margin-bottom:40px;animation:p10up .6s .9s both}
.p10-hbtns{display:flex;animation:p10up .6s 1s both}
.p10-btn{background:#000;color:#ffe500;padding:18px 48px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border:3px solid #000;cursor:pointer;font-family:'Syne',sans-serif;box-shadow:4px 4px 0 #333;transition:transform .15s,box-shadow .15s}
.p10-btn:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 #333}
.p10-btn-o{background:#ffe500;color:#000;padding:18px 48px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border:3px solid #000;border-left:none;cursor:pointer;font-family:'Syne',sans-serif;box-shadow:4px 4px 0 #888;transition:transform .15s,box-shadow .15s,background .15s}
.p10-btn-o:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 #888;background:#adff2f}
/* glitch photo */
.p10-hero-right{position:relative;z-index:10;display:flex;flex-direction:column;justify-content:flex-end;padding:60px 56px 60px 0}
.p10-photo{width:100%;aspect-ratio:1;position:relative;overflow:hidden;animation:p10up .7s .6s both}
.p10-photo-bg{position:absolute;inset:0;background:linear-gradient(135deg,#1a1a1a,#2a2a00)}
.p10-photo-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,229,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,229,0,.06) 1px,transparent 1px);background-size:40px 40px}
.p10-photo-label{position:absolute;bottom:16px;left:16px;font-family:'IBM Plex Mono',monospace;font-size:8px;color:rgba(255,229,0,.4);letter-spacing:.18em;text-transform:uppercase}
.p10-glitch-title{font-size:clamp(48px,5vw,80px);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;color:#ffe500;line-height:.92;position:relative;z-index:11;animation:p10glitch 5s 2s infinite}
@keyframes p10glitch{
  0%,88%,100%{color:#ffe500;text-shadow:none}
  89%{color:#ffe500;text-shadow:-3px 0 #ff2200,3px 0 #00ffff;clip-path:inset(15% 0 70% 0);transform:translateX(3px)}
  90%{clip-path:inset(50% 0 30% 0);transform:translateX(-3px);color:#fff}
  91%{clip-path:inset(75% 0 10% 0);transform:translateX(2px)}
  92%{clip-path:inset(0 0 0 0);transform:none;color:#ffe500}
}
/* marquee */
.p10-mq{border-top:3px solid #000;border-bottom:3px solid #000;background:#ff2200;overflow:hidden;padding:13px 0}
.p10-mqi{display:flex;animation:p10mq 14s linear infinite;white-space:nowrap}
.p10-mqitem{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:0 36px;color:#fff}
.p10-mqdot{color:#ffe500}
@keyframes p10mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* brutalist table services */
.p10-svc{border-bottom:3px solid #000}
.p10-svch{border-bottom:3px solid #000;padding:52px 56px;display:flex;justify-content:space-between;align-items:flex-end}
.p10-svch h2{font-size:clamp(28px,4vw,52px);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05}
.p10-svcht{font-size:9px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:rgba(0,0,0,.28);margin-bottom:8px}
.p10-svch p{font-family:'Noto Sans JP',sans-serif;font-size:14px;color:rgba(0,0,0,.45);max-width:360px;line-height:1.8;text-align:right}
.p10-table{width:100%;border-collapse:collapse}
.p10-table th{border:3px solid #000;padding:16px 32px;font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;background:#ffe500;text-align:left}
.p10-table td{border:3px solid #000;padding:24px 32px;font-family:'Noto Sans JP',sans-serif;font-size:13px;vertical-align:top;line-height:1.7;color:rgba(0,0,0,.65)}
.p10-table tr:hover td{background:#f5f5f5}
.p10-td-name{font-family:'Syne',sans-serif;font-size:16px;font-weight:800;color:#000;text-transform:uppercase;margin-bottom:6px;letter-spacing:-.01em}
.p10-td-num{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.18em;color:rgba(0,0,0,.25);display:block;margin-bottom:4px}
.p10-td-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.p10-td-tag{font-size:9px;font-weight:800;border:2px solid #000;padding:2px 8px;letter-spacing:.08em;text-transform:uppercase}
/* stacked color block why */
.p10-why{border-bottom:3px solid #000}
.p10-why-top{padding:60px 56px;border-bottom:3px solid #000;display:flex;justify-content:space-between;align-items:flex-end}
.p10-why-top h2{font-size:clamp(28px,4vw,52px);font-weight:800;text-transform:uppercase;letter-spacing:-.02em}
.p10-why-top-tag{font-size:9px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:rgba(0,0,0,.28);margin-bottom:8px}
.p10-wblocks{display:grid;grid-template-columns:1fr 1fr 1fr}
.p10-wb{padding:56px 48px;border-right:3px solid #000;position:relative;transition:background .15s;cursor:default}
.p10-wb:last-child{border-right:none}
.p10-wb:nth-child(1){background:#fff}
.p10-wb:nth-child(2){background:#ffe500}
.p10-wb:nth-child(3){background:#000;color:#fff}
.p10-wbn{font-size:80px;font-weight:800;line-height:.9;opacity:.07;margin-bottom:16px}
.p10-wbt{font-size:16px;font-weight:800;text-transform:uppercase;margin-bottom:14px;letter-spacing:-.01em}
.p10-wbtx{font-family:'Noto Sans JP',sans-serif;font-size:13px;color:inherit;opacity:.55;line-height:1.9}
.p10-wb:nth-child(3) .p10-wbn{color:#ffe500;opacity:.1}
.p10-wb:nth-child(3) .p10-wbtx{color:#fff}
/* contact: 2-color riot */
.p10-ct{display:grid;grid-template-columns:1fr 1fr}
.p10-ctl{padding:80px 56px;background:#ff2200;color:#fff;border-right:3px solid #000}
.p10-ctl h2{font-size:clamp(36px,4.5vw,60px);font-weight:800;text-transform:uppercase;line-height:1.0;margin-bottom:16px;letter-spacing:-.025em}
.p10-ctl p{font-family:'Noto Sans JP',sans-serif;font-size:14px;color:rgba(255,255,255,.55);line-height:2}
.p10-ctr{padding:80px 56px;background:#fff}
.p10-form .fr{margin-bottom:22px}
.p10-form label{display:block;font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(0,0,0,.28);margin-bottom:6px}
.p10-form input,.p10-form select,.p10-form textarea{width:100%;background:none;border:none;border-bottom:3px solid #000;color:#000;padding:11px 0;font-family:'Noto Sans JP',sans-serif;font-size:14px;outline:none;transition:border-color .15s}
.p10-form input:focus,.p10-form select:focus,.p10-form textarea:focus{border-color:#ff2200}
.p10-form textarea{height:96px;resize:none}
.p10-bsub{background:#000;color:#ffe500;padding:18px 48px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border:3px solid #000;cursor:pointer;font-family:'Syne',sans-serif;box-shadow:4px 4px 0 #333;transition:transform .15s,box-shadow .15s}
.p10-bsub:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 #333}
.p10-ft{padding:28px 56px;border-top:3px solid #000;display:flex;justify-content:space-between;align-items:center;background:#ffe500}
.p10-ftl{font-size:13px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.p10-ftc{font-size:9px;font-weight:700;color:rgba(0,0,0,.35);letter-spacing:.1em;text-transform:uppercase}