/* ==========================================================================
   Stream Spare: manga-panel design system
   Ink outlines, screentone dots, hard shadows, colour-coded divisions.
   Sky = Stream Spare, Sakura = SpareAI, Tangerine = Studios.
   ========================================================================== */

@font-face{font-family:"Dela Gothic One";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dela-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Dela Gothic One";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dela-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Zen Maru Gothic";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/zen-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Zen Maru Gothic";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/zen-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Zen Maru Gothic";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/zen-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Zen Maru Gothic";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/zen-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Zen Maru Gothic";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/zen-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Zen Maru Gothic";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/zen-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#1A1033;
  --paper:#FFFFFF;
  --tone:#F1EEFF;
  --sky:#3D8BFF;   --sky-l:#D3E4FF;
  --sakura:#FF5C9E;--sakura-l:#FFD6E7;
  --sun:#FFCF2E;   --sun-l:#FFF0B0;
  --tang:#FF8A2A;  --tang-l:#FFDDBA;
  --mint:#2FD9A0;  --mint-l:#C6F5E4;
  --grape:#A386FF;
  --f-display:"Dela Gothic One","Arial Black","Impact",sans-serif;
  --f-body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Nunito","Segoe UI",system-ui,sans-serif;
  --line:3px solid var(--ink);
  --wrap:min(1200px,92vw);
  --hdr:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-body);font-size:1.05rem;line-height:1.65;color:var(--ink);background:#fff;
  background-image:radial-gradient(rgba(26,16,51,.06) 1.3px,transparent 1.5px);background-size:16px 16px;overflow-x:hidden;overflow-x:clip}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:2px}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.12;font-weight:400;font-family:var(--f-display);letter-spacing:.005em}
h3{font-family:var(--f-body);font-weight:700;font-size:1.25rem;line-height:1.25}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:4px solid var(--sakura);outline-offset:3px;border-radius:6px}
::selection{background:var(--sun);color:var(--ink)}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:1rem;top:-5rem;background:var(--sun);border:var(--line);padding:.6rem 1rem;z-index:100;font-weight:700}
.skip:focus{top:1rem}
.narrow{max-width:760px}

/* ---------- colour helpers ---------- */
.bg-sky{background:var(--sky)}.bg-sakura{background:var(--sakura)}.bg-sun{background:var(--sun)}
.bg-tang{background:var(--tang)}.bg-mint{background:var(--mint)}.bg-grape{background:var(--grape)}.bg-white{background:#fff}
.c-sky{--c:var(--sky)}.c-sakura{--c:var(--sakura)}.c-sun{--c:var(--sun)}
.c-tang{--c:var(--tang)}.c-mint{--c:var(--mint)}.c-grape{--c:var(--grape)}

/* screentone dots on any coloured panel */
.tone,.phero::before,.squad-card::before,.div-banner::before,.cta-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(26,16,51,.16) 1.5px,transparent 1.7px);background-size:12px 12px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:4px solid var(--ink)}
.hdr-in{display:flex;align-items:center;gap:1.2rem;height:var(--hdr);width:min(1320px,94vw);margin-inline:auto}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-family:var(--f-display);font-size:1.2rem;white-space:nowrap}
.logo-mark{width:42px;height:42px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .logo-mark{transform:rotate(90deg) scale(1.08)}
.nav{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav>a{padding:.35rem .75rem;border:2.5px solid transparent;border-radius:12px;font-weight:700;text-decoration:none;font-size:.98rem}
.nav>a:hover{background:var(--sakura-l);border-color:var(--ink)}
.nav>a.on{background:var(--sun);border-color:var(--ink)}
.nav-cta{display:none}
.hdr-cta{display:flex;gap:.6rem}
.burger{display:none;width:48px;height:48px;border:var(--line);border-radius:14px;background:var(--sun);box-shadow:3px 3px 0 var(--ink);cursor:pointer;padding:0;margin-left:auto;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:3px;background:var(--ink);border-radius:3px;transition:transform .25s,opacity .2s,top .25s}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:30px}
.burger[aria-expanded=true] span:nth-child(1){top:22px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){top:22px;transform:rotate(-45deg)}

/* ---------- buttons, chips, tags ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75em 1.35em;border:var(--line);border-radius:999px;
  background:var(--sun);color:var(--ink);font-weight:700;text-decoration:none;cursor:pointer;line-height:1.15;text-align:center;
  box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-pink{background:var(--sakura)}.btn-white{background:#fff}.btn-sky{background:var(--sky)}
.btn-sm{padding:.55em 1.05em;font-size:.92rem;box-shadow:3px 3px 0 var(--ink)}
.btn-lg{padding:.9em 1.7em;font-size:1.1rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem}
.chips,.link-list,.ticks,.team-mini{list-style:none}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.6rem 0 0}
.chips li{padding:.2em .75em;border:2.5px solid var(--ink);border-radius:999px;background:#fff;font-weight:700;font-size:.86rem}
.chips-ink li{background:var(--ink);color:#fff}
.tags-row{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.2rem}
.tag{display:inline-block;padding:.15em .8em;border:2.5px solid var(--ink);border-radius:8px;background:var(--c,#fff);font-weight:700;transform:rotate(-2deg)}
.tag:nth-child(2){transform:rotate(1.5deg)}
.phero .tag.c-sky,.phero .tag.c-sakura,.phero .tag.c-tang{background:#fff}

.panel{position:relative;background:#fff;border:4px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);padding:clamp(1.2rem,3vw,2rem)}

/* ---------- section scaffolding ---------- */
.section{padding-block:clamp(3rem,7vw,5.5rem);position:relative}
.section-tint{background:var(--tone);border-block:4px solid var(--ink);background-image:radial-gradient(rgba(26,16,51,.07) 1.4px,transparent 1.6px);background-size:14px 14px}
.sec-title{font-size:clamp(1.8rem,4.2vw,3rem);width:fit-content;max-width:100%;margin-bottom:.6rem;
  background:linear-gradient(transparent 62%,var(--hl,var(--sun)) 62% 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.section:nth-of-type(3n) .sec-title{--hl:var(--sakura-l)}
.section:nth-of-type(3n+1) .sec-title{--hl:var(--sky-l)}
.sec-lede{max-width:60ch;font-size:1.12rem;margin-bottom:2.2rem}
.lead-p{font-size:1.25rem;line-height:1.55;font-weight:500}
.detail-main h2,.founder-copy h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:2.2rem 0 1rem}
.detail-main h2:first-of-type{margin-top:1.6rem}

/* ---------- zigzag edges ---------- */
.zig{position:absolute;left:0;right:0;bottom:-1px;height:16px;z-index:3;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M-1 17 L16 3 L33 17Z' fill='white'/%3E%3Cpath d='M-1 17 L16 3 L33 17' fill='none' stroke='%231A1033' stroke-width='3.2' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x bottom left/32px 16px}
.zig-top{top:-15px;bottom:auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M0 16 L16 1 L32 16Z' fill='%231A1033'/%3E%3C/svg%3E") repeat-x bottom left/32px 16px}

/* ---------- home hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--sun);padding-block:clamp(2rem,5vw,3.5rem) clamp(3.5rem,6vw,4.5rem);min-height:min(calc(100svh - var(--hdr)),820px);display:flex;align-items:center}
.hero-rays{position:absolute;left:70%;top:62%;width:230vmax;height:230vmax;translate:-50% -50%;pointer-events:none;
  background:repeating-conic-gradient(#FFDD63 0 6deg,#FFCF2E 6deg 12deg);animation:spin 120s linear infinite}
.hero .tone{-webkit-mask-image:linear-gradient(100deg,#000 10%,transparent 60%);mask-image:linear-gradient(100deg,#000 10%,transparent 60%)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:clamp(1rem,3vw,3rem);z-index:2;width:var(--wrap);margin-inline:auto}
.title-cards{font-size:clamp(2.2rem,4.9vw,4.5rem);line-height:1.02;margin-bottom:1.4rem;display:flex;flex-direction:column;align-items:flex-start;gap:.14em}
.tc{display:inline-block;padding:.04em .28em .1em;border:4px solid var(--ink);border-radius:14px;box-shadow:7px 7px 0 var(--ink);animation:slam .6s cubic-bezier(.2,1.5,.4,1) both}
.tc1{background:#fff;transform:rotate(-2deg)}
.tc2{background:var(--sakura);transform:rotate(1.2deg) translateX(.35em);animation-delay:.15s}
.tc3{background:var(--sky);transform:rotate(-1.2deg);animation-delay:.3s}
.hero-p{max-width:32rem;background:#fff;border:var(--line);border-radius:18px 18px 18px 4px;padding:.9rem 1.15rem;box-shadow:5px 5px 0 var(--ink);font-size:1.12rem;font-weight:500;margin-bottom:1.6rem;animation:slam .5s .55s cubic-bezier(.2,1.4,.4,1) both}
.hero .cta-row{animation:slam .5s .7s cubic-bezier(.2,1.4,.4,1) both}
.hero-stage{position:relative;aspect-ratio:1/.92;width:100%;max-width:640px;margin-left:auto}
.hero-char{position:absolute;bottom:0;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;animation:popin .85s cubic-bezier(.2,1.5,.4,1) both;transform-origin:50% 100%}
.hero-char .char{width:100%;height:auto;filter:drop-shadow(5px 6px 0 rgba(26,16,51,.28))}
.hc-pixel{left:-2%;width:41%;z-index:2;animation-delay:.6s}
.hc-nova{left:27%;width:48%;z-index:3;animation-delay:.85s}
.hc-kaito{right:-2%;width:41%;z-index:2;animation-delay:1.1s}
.hero-char.hop{animation:hop .55s cubic-bezier(.3,1.7,.5,1)}
.hero-char:hover .char{transform:scale(1.03) rotate(-1deg);transition:transform .2s}
.bubble{position:absolute;left:50%;top:-7%;translate:-50% 0;z-index:5;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:.3em .8em;font-weight:700;font-size:clamp(.72rem,1.25vw,.92rem);line-height:1.25;text-align:center;width:max-content;max-width:9.5em;box-shadow:3px 3px 0 var(--ink);color:var(--ink);transition:transform .2s cubic-bezier(.3,1.7,.5,1)}
.bubble::after{content:"";position:absolute;left:50%;bottom:-9px;width:14px;height:14px;background:#fff;border:solid var(--ink);border-width:0 3px 3px 0;transform:translateX(-50%) rotate(45deg)}
.hero-char:hover .bubble,.hero-char:focus-visible .bubble{transform:scale(1.08) rotate(-2deg)}
.hc-nova .bubble{top:-11%}
.sfx{position:absolute;z-index:4;font-family:var(--f-display);color:var(--sakura);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink);pointer-events:none;letter-spacing:.02em}
.sfx-a{right:4%;top:9%;font-size:clamp(2rem,6vw,4.4rem);transform:rotate(12deg);animation:sfx 2.2s 1.2s both}

/* ---------- marquee ---------- */
.marquee{background:var(--ink);border-block:4px solid var(--ink);transform:rotate(-1.4deg);margin:2.4rem -3vw;overflow:hidden;white-space:nowrap;padding:.7rem 0;position:relative;z-index:4}
.marquee-track{display:inline-flex;align-items:center;gap:1.5rem;animation:marq 34s linear infinite;padding-left:1.5rem}
.marquee-track.rev{animation-direction:reverse}
.marquee span{font-family:var(--f-display);font-size:clamp(1.15rem,2.6vw,1.9rem);color:var(--sun)}
.marquee span:nth-of-type(4n+2){color:var(--sakura)}.marquee span:nth-of-type(4n+3){color:var(--sky)}.marquee span:nth-of-type(4n){color:var(--mint)}
.marquee i{width:1.1rem;height:1.1rem;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);flex:none}
.marquee-2{background:var(--sakura);transform:rotate(1.2deg)}
.marquee-2 span,.marquee-2 span:nth-of-type(n){color:var(--ink)}
.marquee-2 i{background:var(--ink)}

/* ---------- squad cards (home) ---------- */
.squad-sec{padding-top:1rem}
.squad-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.6rem);margin-top:clamp(9rem,17vw,12rem);align-items:start}
.squad-card{position:relative;border:4px solid var(--ink);border-radius:24px;box-shadow:9px 9px 0 var(--ink);padding:0 clamp(1.1rem,2vw,1.7rem) clamp(1.3rem,2vw,1.8rem)}
.squad-card:nth-child(1){transform:rotate(-1deg)}
.squad-card:nth-child(2){margin-top:-2.2rem}
.squad-card:nth-child(3){transform:rotate(1deg)}
.squad-card::before{border-radius:20px;-webkit-mask-image:linear-gradient(#000,transparent 60%);mask-image:linear-gradient(#000,transparent 60%)}
.sq-art{position:relative;width:min(250px,78%);margin:calc(-1 * clamp(8rem,15vw,11rem)) auto .4rem;transform-origin:50% 100%;z-index:2}
.sq-art .char{filter:drop-shadow(4px 5px 0 rgba(26,16,51,.3))}
.squad-card:hover .sq-art,.squad-card.hop .sq-art{animation:hop .6s cubic-bezier(.3,1.7,.5,1)}
.sq-body{position:relative;z-index:2}
.sq-body h3{font-family:var(--f-display);font-weight:400;font-size:1.6rem}
.sq-body .btn{margin-top:1.1rem}

/* ---------- world tiles ---------- */
.world-grid{margin-top:1.6rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.world-tile{display:flex;flex-direction:column;justify-content:space-between;min-height:9.5rem;padding:1.1rem 1.2rem;border:4px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink);text-decoration:none;transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .18s}
.world-tile strong{font-family:var(--f-display);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.05}
.world-tile span{font-weight:500;font-size:.98rem}
.wt0{transform:rotate(-1.2deg)}.wt1{transform:rotate(1deg);border-radius:30px 12px 24px 12px}.wt2{transform:rotate(-.6deg)}.wt3{transform:rotate(1.4deg);border-radius:12px 28px 12px 24px}
.wt4{transform:rotate(1deg);border-radius:24px 12px 30px 12px}.wt5{transform:rotate(-1.4deg)}.wt6{transform:rotate(.8deg);border-radius:12px 24px 12px 30px}.wt7{transform:rotate(-1deg)}
.world-tile:hover{transform:translate(-3px,-5px) rotate(0) scale(1.03);box-shadow:10px 10px 0 var(--ink)}

/* ---------- CTA band ---------- */
.cta-band{padding:clamp(4rem,9vw,7rem) 0 clamp(2.5rem,5vw,4rem)}
.cta-panel{position:relative;display:grid;grid-template-columns:minmax(150px,280px) 1fr;align-items:center;gap:clamp(1rem,3vw,3rem);background:var(--sky);border:4px solid var(--ink);border-radius:28px;box-shadow:10px 10px 0 var(--ink);padding:clamp(1.4rem,4vw,3rem);margin-top:clamp(2rem,5vw,4rem)}
.cta-panel::before{border-radius:24px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 70%);mask-image:linear-gradient(90deg,#000,transparent 70%)}
.cta-art{position:relative;align-self:end;margin-top:calc(-1 * clamp(4rem,9vw,8rem));margin-bottom:calc(-1 * clamp(1.4rem,4vw,3rem) - 4px)}
.cta-art .char{width:100%;filter:drop-shadow(4px 5px 0 rgba(26,16,51,.28))}
.cta-copy{position:relative;z-index:2}
.cta-copy h2{font-size:clamp(1.8rem,4vw,3rem);margin-bottom:.4rem;text-shadow:3px 3px 0 rgba(255,255,255,.75)}
.cta-copy p{font-size:1.15rem;max-width:36rem}

/* ---------- inner-page hero ---------- */
.phero{position:relative;color:var(--ink);border-bottom:0;overflow:hidden}
.phero::before{-webkit-mask-image:linear-gradient(100deg,#000 5%,transparent 65%);mask-image:linear-gradient(100deg,#000 5%,transparent 65%)}
.phero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);gap:2rem;align-items:end;padding-top:clamp(1.4rem,3vw,2.4rem)}
.phero-copy{padding-bottom:clamp(3rem,6vw,4.5rem);position:relative;z-index:2}
.phero h1{font-size:clamp(2rem,4.8vw,3.8rem);text-shadow:3px 3px 0 rgba(255,255,255,.8);margin-bottom:1rem}
.lede{display:inline-block;max-width:34rem;background:#fff;border:var(--line);border-radius:6px 18px 18px 18px;padding:.8rem 1.1rem;box-shadow:5px 5px 0 var(--ink);font-weight:500;font-size:1.1rem;margin-bottom:1.2rem}
.phero .cta-row{margin-top:.4rem}
.phero-art{align-self:end;position:relative;z-index:1}
.phero-art::before{content:"";position:absolute;right:0;top:6%;width:min(300px,100%);aspect-ratio:1;border-radius:50%;background:#fff radial-gradient(rgba(26,16,51,.14) 1.5px,transparent 1.7px) 0 0/10px 10px;border:4px solid var(--ink);box-shadow:7px 7px 0 var(--ink);z-index:0}
.phero-art>.char{position:relative;z-index:1}
.phero-art.has-trio::before{display:none}
@media (min-width:901px){.phero-art.has-trio{margin-left:-32%}}
.trio{display:flex;align-items:flex-end;justify-content:center;padding-inline:4%}
.trio .char{width:38%;height:auto;filter:drop-shadow(4px 5px 0 rgba(26,16,51,.25))}
.trio .char:nth-child(2){width:46%;margin-inline:-9%;position:relative;z-index:2}
.trio .char:first-child,.trio .char:last-child{position:relative;z-index:1}
.phero-char{width:min(300px,100%);margin-left:auto;filter:drop-shadow(4px 5px 0 rgba(26,16,51,.25))}
.phero-slim .phero-copy{padding-bottom:2.6rem}
.crumbs{display:flex;flex-wrap:wrap;gap:.35rem;font-size:.9rem;font-weight:700;margin-bottom:.9rem}
.crumbs a{text-decoration:none;border-bottom:2px solid var(--ink)}
.crumbs i{font-style:normal;opacity:.6}

/* ---------- services ---------- */
.div-sec{padding-block:clamp(2.2rem,5vw,3.6rem)}
.div-banner{position:relative;display:grid;grid-template-columns:1fr minmax(140px,230px);align-items:end;gap:1rem;border:4px solid var(--ink);border-radius:24px;box-shadow:8px 8px 0 var(--ink);padding:clamp(1.2rem,3vw,2rem) clamp(1.2rem,3vw,2.2rem) 0;margin-bottom:2rem;overflow:hidden}
.div-banner::before{-webkit-mask-image:linear-gradient(100deg,#000,transparent 65%);mask-image:linear-gradient(100deg,#000,transparent 65%)}
.div-copy{position:relative;padding-bottom:1.6rem}
.div-copy h2{font-size:clamp(1.7rem,3.6vw,2.6rem);text-shadow:3px 3px 0 rgba(255,255,255,.75)}
.div-copy p{max-width:44ch;font-weight:500}
.div-mascot{font-weight:700;display:inline-block;background:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:.1em .8em;font-size:.92rem}
.div-art{position:relative}
.div-art .char{width:100%}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:1.5rem}
.svc{position:relative;display:flex;flex-direction:column;gap:.45rem;padding:1.6rem 1.2rem 1.15rem;background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink);text-decoration:none;overflow:hidden;transition:transform .15s,box-shadow .15s}
.svc::before{content:"";position:absolute;left:0;right:0;top:0;height:11px;background:var(--c);border-bottom:3px solid var(--ink)}
.svc:hover{transform:translate(-3px,-4px) rotate(-.6deg);box-shadow:9px 9px 0 var(--ink)}
.svc-tag{align-self:flex-start;padding:.05em .7em;border:2.5px solid var(--ink);border-radius:8px;background:var(--c);font-weight:700;font-size:.8rem}
.svc h3{margin:.2rem 0 0}
.svc p{margin:0;font-size:.98rem}
.svc-more{margin-top:auto;padding-top:.6rem;font-weight:700;text-decoration:underline wavy var(--c);text-decoration-thickness:2.5px;text-underline-offset:.35em}

/* ---------- service detail ---------- */
.detail-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
.detail-side{display:grid;gap:1.4rem;position:sticky;top:calc(var(--hdr) + 1.2rem)}
.side-card{background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);padding:1.1rem 1.2rem}
.side-card:nth-child(2){transform:rotate(.7deg)}.side-card:nth-child(3){transform:rotate(-.6deg)}
.side-card h2{font-size:1.05rem;margin-bottom:.4rem}
.big-price{font-family:var(--f-display);font-size:1.7rem;margin-bottom:.3rem}
.mini-person{display:flex;gap:.8rem;align-items:center;margin-bottom:.6rem}
.mini-person img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid var(--ink);background:var(--sun);flex:none}
.mini-person p{margin:0;font-size:.92rem;line-height:1.4}
.mini-person span{display:block}
.team-mini li{padding:.4rem 0;border-top:2px dashed rgba(26,16,51,.3);font-size:.94rem}
.team-mini li b{display:block}
.ticks li{position:relative;padding:.3rem 0 .3rem 2.3rem}
.ticks li::before{content:"";position:absolute;left:0;top:.42rem;width:1.55rem;height:1.55rem;border:2.5px solid var(--ink);border-radius:50%;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231A1033' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.steps-list{list-style:none;counter-reset:s;display:grid;gap:.9rem}
.steps-list li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;column-gap:1rem;padding:.9rem 1.1rem;background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink)}
.steps-list li::before{content:counter(s);grid-row:span 2;align-self:center;display:grid;place-items:center;width:2.7rem;height:2.7rem;border:3px solid var(--ink);border-radius:50%;background:var(--sun);font-family:var(--f-display);font-size:1.15rem}
.steps-list li:nth-child(5n+2)::before{background:var(--sakura)}.steps-list li:nth-child(5n+3)::before{background:var(--sky)}
.steps-list li:nth-child(5n+4)::before{background:var(--mint)}.steps-list li:nth-child(5n)::before{background:var(--tang)}
.steps-list h3{margin:0;font-size:1.08rem}.steps-list p{margin:0;font-size:.97rem}
.faq{border:3px solid var(--ink);border-radius:16px;background:#fff;margin-bottom:.9rem;box-shadow:4px 4px 0 var(--ink)}
.faq summary{cursor:pointer;list-style:none;padding:.9rem 3.2rem .9rem 1.1rem;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1rem;top:50%;translate:0 -50%;width:1.7rem;height:1.7rem;display:grid;place-items:center;border:2.5px solid var(--ink);border-radius:50%;background:var(--sun);font-family:var(--f-display);line-height:1;transition:transform .25s}
.faq[open]{background:var(--sun-l)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0;padding:0 1.1rem 1rem;animation:faqin .25s ease-out}

/* ---------- portfolio ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:1.4rem}
.cat-tile{display:flex;flex-direction:column;gap:.3rem;padding:1.2rem;border:4px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.cat-tile:nth-child(odd){transform:rotate(-.8deg)}.cat-tile:nth-child(even){transform:rotate(.8deg)}
.cat-tile strong{font-family:var(--f-display);font-weight:400;font-size:1.5rem}
.cat-tile:hover{transform:translate(-3px,-4px) rotate(0);box-shadow:9px 9px 0 var(--ink)}
.empty-work{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:1.6rem;align-items:center;background:#fff;border:4px solid var(--ink);border-radius:24px;box-shadow:8px 8px 0 var(--ink);padding:1.4rem 1.6rem 0 1.6rem;overflow:hidden}
.empty-work>div:last-child{padding-bottom:1.6rem}
.empty-art{align-self:end}
.chips-bar{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.4rem}
.chip{padding:.4em 1em;border:3px solid var(--ink);border-radius:999px;background:#fff;font-weight:700;cursor:pointer}
.chip.on{background:var(--sun);box-shadow:3px 3px 0 var(--ink)}
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.5rem}
.work{background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink);overflow:hidden}
.work img{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:3px solid var(--ink)}
.work>div{padding:1rem 1.1rem}

/* ---------- pricing ---------- */
.ptabs{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:2.4rem}
.ptab{padding:.7rem 1.3rem;border:3px solid var(--ink);border-radius:14px;background:#fff;font-weight:700;font-size:1.02rem;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .12s}
.ptab:hover{transform:translate(-1px,-2px)}
.ptab[aria-selected=true]{background:var(--c);transform:translateY(-3px);box-shadow:6px 6px 0 var(--ink)}
.ptitle{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:1.6rem}
.js .ppanel{display:none}
.js .ppanel.on{display:block;animation:panelin .35s cubic-bezier(.2,1.3,.4,1)}
.ppanel+.ppanel{margin-top:3rem}.js .ppanel+.ppanel{margin-top:0}
.tier-grid{display:grid;gap:1.7rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr))}
.tier-grid.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
.tier-grid.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tier{position:relative;display:flex;flex-direction:column;gap:.5rem;background:#fff;border:3px solid var(--ink);border-radius:20px;box-shadow:7px 7px 0 var(--ink);padding:1.4rem 1.3rem}
.tier.is-pop{background:var(--sun-l);border-width:4px}
.tier h3{margin:0;font-size:1.15rem}
.price{font-family:var(--f-display);font-size:clamp(1.7rem,2.5vw,2.2rem);line-height:1.05;margin:.1rem 0 0}
.tier-blurb{margin:0 0 .4rem;font-size:.98rem}
.tier .ticks{margin-bottom:1rem;flex:1}
.tier .ticks li{padding-block:.2rem}
.tier-badge{align-self:flex-start;margin:0;background:var(--ink);color:#fff;border-radius:8px;padding:.05em .7em;font-weight:700;font-size:.8rem}
.stamp{position:absolute;top:-17px;right:-10px;background:var(--sakura);border:3px solid var(--ink);border-radius:9px;padding:.15em .8em;font-weight:700;font-size:.9rem;transform:rotate(6deg);box-shadow:3px 3px 0 var(--ink)}
.ptail{margin-top:2rem;font-weight:500}

/* ---------- process ---------- */
.process-list{list-style:none;display:grid;gap:1.1rem;position:relative}
.process-list::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:4px dashed rgba(26,16,51,.28)}
.pstep{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:center;width:min(100%,600px);padding:1.3rem 1.4rem;border:4px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink)}
.pstep:nth-child(odd){transform:rotate(-.8deg)}
.pstep:nth-child(even){margin-left:auto;transform:rotate(.8deg)}
.pstep h3{font-family:var(--f-display);font-weight:400;font-size:1.4rem;margin-bottom:.2rem}
.pstep p{margin:0}
.pnum{display:grid;place-items:center;width:3.8rem;height:3.8rem;border:4px solid var(--ink);border-radius:50%;background:#fff;font-family:var(--f-display);font-size:1.7rem}

/* ---------- about / team ---------- */
.founder-grid{display:grid;grid-template-columns:minmax(240px,420px) 1fr;gap:clamp(1.6rem,5vw,4rem);align-items:center}
.founder-photo{margin:0;background:#fff;border:4px solid var(--ink);padding:.8rem .8rem 0;box-shadow:9px 9px 0 var(--ink);transform:rotate(-2deg);border-radius:6px}
.founder-photo img,.ph-fallback{width:100%;aspect-ratio:4/5;object-fit:cover;border:3px solid var(--ink);background:var(--sakura)}
.founder-photo figcaption{font-family:var(--f-display);padding:.8rem .2rem;font-size:1.15rem}
.founder-photo figcaption span{display:block;font-family:var(--f-body);font-weight:700;font-size:.9rem}
.ph-fallback{display:grid;place-items:center;font-family:var(--f-display);font-size:4rem}
.vmm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
.vm{border:4px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);padding:1.4rem 1.5rem}
.vm:nth-child(1){transform:rotate(-1deg)}.vm:nth-child(3){transform:rotate(1deg)}
.vm h2{font-size:1.6rem}.vm p{margin:0;font-size:1.05rem}
.motto{font-family:var(--f-display);font-size:1.5rem!important;line-height:1.25}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.link-list li{margin:.5rem 0}.link-list a{font-weight:700}
.collage-pics{position:relative;aspect-ratio:1/.85}
.pic{position:absolute;width:64%;aspect-ratio:3/2;object-fit:cover;border:4px solid var(--ink);box-shadow:7px 7px 0 var(--ink);background:var(--sky-l)}
.p1{left:0;top:0;transform:rotate(-4deg)}.p2{right:0;bottom:0;transform:rotate(3deg)}
.leaders{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.leader{display:grid;grid-template-columns:minmax(110px,170px) 1fr;gap:1.3rem;align-items:start;background:#fff;border:4px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);padding:1.2rem}
.leader:nth-child(2){transform:rotate(.8deg)}.leader:nth-child(1){transform:rotate(-.8deg)}
.leader-photo img,.leader-photo .ph-fallback{width:100%;aspect-ratio:4/5;object-fit:cover;border:3px solid var(--ink);border-radius:14px;background:var(--sakura)}
.leader h3{font-family:var(--f-display);font-weight:400;font-size:1.5rem;margin-bottom:.1rem}
.role{font-weight:700;margin-bottom:.5rem}
.squad-grid2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
.squad{border:3px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);padding:1.2rem}
.squad:nth-child(odd){transform:rotate(-.5deg)}.squad:nth-child(even){transform:rotate(.5deg)}
.badge{display:inline-grid;place-items:center;min-width:3rem;height:3rem;padding:0 .4rem;border:3px solid var(--ink);border-radius:12px;font-family:var(--f-display);margin-bottom:.6rem}
.assoc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;margin-top:clamp(5rem,9vw,7rem)}
.assoc{position:relative;border:4px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);padding:0 1.3rem 1.4rem}
.assoc-art{width:min(180px,55%);margin:calc(-1 * clamp(5rem,9vw,7rem)) auto .8rem}
.assoc h3{font-family:var(--f-display);font-weight:400;font-size:1.4rem}
.assoc .role{margin-bottom:.2rem}

/* ---------- forms / contact ---------- */
.contact-grid,.sp-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3rem);align-items:start}
.form-panel h2{font-size:1.7rem}
form label,fieldset legend{display:block;font-weight:700;margin-bottom:1rem}
fieldset{border:0;padding:0;margin:0 0 1rem}
form input:not([type=checkbox]),form select,form textarea{display:block;width:100%;margin-top:.35rem;padding:.7rem .9rem;border:3px solid var(--ink);border-radius:12px;background:#fff;font-weight:500;transition:box-shadow .15s,transform .15s}
form input:focus,form select:focus,form textarea:focus{outline:none;box-shadow:5px 5px 0 var(--sun);transform:translate(-2px,-2px)}
textarea{resize:vertical;min-height:7rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.checks{display:flex;flex-wrap:wrap;gap:.6rem}
.check{position:relative;margin:0!important;cursor:pointer}
.check input{position:absolute;opacity:0;inset:0}
.check span{display:inline-block;padding:.4em 1em;border:3px solid var(--ink);border-radius:999px;background:#fff;font-weight:700;font-size:.92rem;transition:background .12s,transform .12s}
.check input:checked+span{background:var(--mint);transform:translate(-1px,-2px);box-shadow:3px 3px 0 var(--ink)}
.check input:focus-visible+span{outline:4px solid var(--sakura);outline-offset:3px}
.form-err{color:#B00020;font-weight:700}
.form-ok{text-align:left}
.channels{display:grid;gap:1.2rem}
.channel{display:flex;flex-direction:column;padding:1.1rem 1.3rem;border:4px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.channel:nth-child(odd){transform:rotate(.6deg)}.channel:nth-child(even){transform:rotate(-.6deg)}
.channel strong{font-family:var(--f-display);font-weight:400;font-size:1.35rem}
.channel em{font-style:normal;font-weight:700;margin-top:.3rem;text-decoration:underline;text-decoration-thickness:2px}
.channel:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.rec{position:sticky;top:calc(var(--hdr) + 1rem);overflow:hidden}
.rec-art{width:120px;margin:-.2rem 0 .4rem auto}
.rec h2{font-size:1.4rem;margin-top:-4.2rem}
.rec p{font-weight:500}
.rec .rec-line{display:block;margin-bottom:.6rem}
.term{margin-bottom:1.6rem;padding:1.1rem 1.3rem;background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink)}
.term h2{font-size:1.3rem;margin-bottom:.3rem}.term p{margin:0}
.nf-in{display:grid;grid-template-columns:minmax(160px,320px) 1fr;gap:2rem;align-items:center}
.nf h1{font-size:clamp(2rem,5vw,3.6rem)}

/* ---------- chat ---------- */
.chat{display:flex;flex-direction:column;background:#fff;border:4px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);overflow:hidden;min-height:0}
.chat-page{height:min(72vh,680px);min-height:460px;max-width:860px;margin-inline:auto}
.chat-head{display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;background:var(--sakura);border-bottom:4px solid var(--ink)}
.chat-head img{width:46px;height:46px;border-radius:50%;background:#fff;border:3px solid var(--ink);object-fit:cover;object-position:50% 20%}
.chat-head b{display:block;line-height:1.2}.chat-head span{font-size:.85rem;font-weight:500}
.chat-x{margin-left:auto;width:36px;height:36px;border:3px solid var(--ink);border-radius:10px;background:#fff;cursor:pointer;font-family:var(--f-display);line-height:1;padding:0}
.chat-log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.7rem;background:var(--tone);background-image:radial-gradient(rgba(26,16,51,.08) 1.3px,transparent 1.5px);background-size:14px 14px;scroll-behavior:smooth}
.msg{max-width:88%;padding:.6rem .9rem;border:3px solid var(--ink);border-radius:16px;font-size:.98rem;line-height:1.5;animation:msgin .25s cubic-bezier(.2,1.4,.4,1);word-wrap:break-word;overflow-wrap:anywhere}
.msg p{margin:0 0 .5em}.msg p:last-child{margin:0}
.msg a{font-weight:700}
.msg ul{padding-left:1.1rem;margin:.3rem 0}
.msg.bot{align-self:flex-start;background:#fff;border-bottom-left-radius:4px}
.msg.me{align-self:flex-end;background:var(--sun);border-bottom-right-radius:4px}
.typing{display:inline-flex;gap:.3rem;padding:.2rem 0}
.typing i{width:.55rem;height:.55rem;border-radius:50%;background:var(--ink);animation:dots 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.qr{display:flex;flex-wrap:wrap;gap:.5rem;padding:.6rem 1rem;border-top:3px solid var(--ink);background:#fff}
.qr button{padding:.3em .9em;border:2.5px solid var(--ink);border-radius:999px;background:var(--sky-l);font-weight:700;font-size:.88rem;cursor:pointer;transition:transform .12s,background .12s}
.qr button:hover{background:var(--sun);transform:translateY(-2px)}
.chat-form{display:flex;gap:.6rem;padding:.75rem;border-top:4px solid var(--ink);background:#fff;margin:0}
.chat-form label{margin:0;flex:1}
.chat-form input{margin:0!important;border-radius:999px!important}
.chat-form .btn{padding:.6em 1.2em}
.chat-note{max-width:860px;margin:1.6rem auto 0;font-size:.95rem}
.chat-fab{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:59;width:68px;height:68px;border-radius:50%;background:var(--sakura);border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer;padding:0;overflow:visible;animation:fabhop 6s 3s infinite}
.chat-fab img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 18%}
.chat-fab:hover{transform:scale(1.06) rotate(-4deg)}
.fab-dot{position:absolute;right:-2px;top:-2px;width:18px;height:18px;border-radius:50%;background:var(--mint);border:3px solid var(--ink)}
.chat-pop{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:calc(max(1rem,env(safe-area-inset-bottom)) + 82px);z-index:60;width:min(390px,calc(100vw - 2rem));height:min(580px,calc(100dvh - 130px));display:flex}
.chat-pop .chat{flex:1;width:100%;transform-origin:100% 100%;animation:popchat .35s cubic-bezier(.2,1.4,.4,1)}
.chat-pop[hidden]{display:none}

/* ---------- footer ---------- */
.site-footer{position:relative;background:var(--ink);color:#fff;margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(2.6rem,5vw,3.8rem)}
.site-footer a{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2.4rem}
.foot-about p{max-width:26rem}
.brand-light{color:#fff;margin-bottom:.8rem}
.social,.site-footer ul{list-style:none}
.social li,.site-footer li{margin:.3rem 0}
.foot-h{font-family:var(--f-display);font-size:1rem;color:var(--sun);margin:1.2rem 0 .5rem}
.foot-grid>div>.foot-h:first-child{margin-top:0}
.foot-services ul{columns:2;column-gap:1.4rem}
.foot-services .foot-h{margin-top:0}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;margin-top:2.2rem;padding-block:1.2rem;border-top:2px dashed rgba(255,255,255,.3);font-size:.92rem}
.foot-bar p{margin:0}

/* ---------- pointer sparkles ---------- */
.spark{position:fixed;z-index:70;pointer-events:none;width:16px;height:16px;background:var(--sc,var(--sakura));clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:sparkfade .8s ease-out forwards}

/* ---------- character animation hooks ---------- */
.char{overflow:visible}
.c-float{animation:bob 3.4s ease-in-out infinite}
.c-float.d2{animation-delay:-1.1s}.c-float.d3{animation-delay:-2.2s}
.c-float-slow{animation:bob 4.6s ease-in-out infinite}
.c-float-slow.d2{animation-delay:-2s}
.c-blink{transform-box:fill-box;transform-origin:center;animation:blink 5.2s infinite}
.c-look{transform:translate(calc(var(--lx,0) * 5px),calc(var(--ly,0) * 4px));transition:transform .14s ease-out}
.c-look.m{transform:translate(calc(var(--lx,0) * -5px),calc(var(--ly,0) * 4px))}
.c-sway-l{animation:swayl 4.2s ease-in-out infinite}
.c-sway-r{animation:swayr 4.2s ease-in-out infinite}
.c-wave{animation:wave 1.5s ease-in-out infinite}
.c-clap{animation:clap 2.6s infinite}
.c-glow{transform-box:fill-box;transform-origin:center;animation:glow 2s ease-in-out infinite}
.c-twinkle{animation:twinkle 2.6s ease-in-out infinite}
.c-prop{animation:propbob 3.4s ease-in-out infinite}

@keyframes spin{to{rotate:360deg}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes swayl{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(3deg)}}
@keyframes swayr{0%,100%{transform:rotate(2.5deg)}50%{transform:rotate(-3deg)}}
@keyframes wave{0%,100%{transform:rotate(0)}30%{transform:rotate(-13deg)}60%{transform:rotate(7deg)}}
@keyframes clap{0%,52%{transform:rotate(-26deg)}60%{transform:rotate(0)}72%,100%{transform:rotate(-26deg)}}
@keyframes glow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.75}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.55) rotate(45deg)}}
@keyframes propbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes slam{from{opacity:0;scale:1.9;rotate:-8deg}to{opacity:1;scale:1;rotate:0deg}}
@keyframes popin{0%{opacity:0;transform:translateY(60%) scale(.7) rotate(6deg)}100%{opacity:1;transform:none}}
@keyframes hop{0%{transform:none}30%{transform:translateY(-6%) scale(.94,1.08)}55%{transform:translateY(0) scale(1.08,.92)}75%{transform:translateY(-2%) scale(.98,1.03)}100%{transform:none}}
@keyframes sfx{0%{opacity:0;scale:.2;rotate:-30deg}12%{opacity:1;scale:1.25;rotate:12deg}22%{scale:1}80%{opacity:1}100%{opacity:0;scale:1.1}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes faqin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes panelin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes msgin{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@keyframes dots{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
@keyframes popchat{from{opacity:0;transform:scale(.6) translateY(30px)}to{opacity:1;transform:none}}
@keyframes fabhop{0%,88%,100%{transform:none}92%{transform:translateY(-14px) rotate(-6deg)}96%{transform:translateY(0) scale(1.06,.94)}}
@keyframes sparkfade{from{opacity:1;transform:scale(1) rotate(0)}to{opacity:0;transform:translateY(22px) scale(.2) rotate(120deg)}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .burger{display:block}
  .hdr-cta{display:none}
  .nav{position:fixed;inset:var(--hdr) 0 0 0;margin:0;background:var(--sun);flex-direction:column;align-items:stretch;gap:.7rem;padding:1.4rem 1.2rem 2rem;overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .32s cubic-bezier(.2,1,.3,1),visibility 0s .32s;z-index:49;border-top:4px solid var(--ink);
    background-image:repeating-conic-gradient(from 0deg at 100% 0,#FFDD63 0 6deg,#FFCF2E 6deg 12deg)}
  .nav.open{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.2,1,.3,1)}
  .nav>a{font-family:var(--f-display);font-weight:400;font-size:1.55rem;padding:.55rem 1rem;background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink)}
  .nav>a:nth-child(3n+1){background:var(--sky-l)}.nav>a:nth-child(3n+2){background:var(--sakura-l)}.nav>a:nth-child(3n){background:var(--mint-l)}
  .nav>a.on{background:#fff;border-color:var(--ink);text-decoration:underline wavy var(--sakura);text-decoration-thickness:3px}
  .nav-cta{display:flex;flex-direction:column;gap:.8rem;margin-top:.6rem}
  body.nav-open{overflow:hidden}
  body.nav-open .chat-fab{display:none}
  .world-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}.foot-about{grid-column:1/-1}
}
@media (max-width:900px){
  .hero{min-height:0;display:block}
  .hero-grid,.phero-grid,.detail-grid,.contact-grid,.sp-grid,.founder-grid,.collage,.nf-in{grid-template-columns:1fr}
  .hero-stage{margin:1.8rem auto 0;max-width:520px}
  .phero-art{display:flex;justify-content:flex-end;margin-top:-1.4rem}
  .phero-char{width:min(210px,52vw);margin-left:0}
  .phero-art::before{width:min(210px,52vw)}
  .trio{width:min(340px,90%)}
  .phero-copy{padding-bottom:1.2rem}
  .detail-side{position:static}
  .rec{position:static}
  .squad-grid,.assoc-grid,.vmm,.squad-grid2{grid-template-columns:1fr}
  .squad-grid{gap:9.5rem;margin-top:9rem}
  .squad-card:nth-child(2){margin-top:0}
  .assoc-grid{gap:7rem}
  .squad-grid2,.vmm{gap:1.6rem}
  .process-list::before{display:none}
  .pstep,.pstep:nth-child(even){width:100%;margin-left:0}
  .cta-panel{grid-template-columns:1fr;text-align:left}
  .cta-art{width:min(210px,56%);margin:calc(-1 * clamp(4.5rem,18vw,6.5rem)) 0 -.4rem}
  .collage-pics{max-width:520px}
  .nf-art{width:min(220px,60%)}
  .tier-grid.n3{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:1rem}
  .squad-card:nth-child(n),.vm:nth-child(n),.leader:nth-child(n),.pstep:nth-child(n){transform:none}
  .marquee{margin-inline:0}
  .two{grid-template-columns:1fr}
  .tier-grid.n2{grid-template-columns:1fr}
  .div-banner{grid-template-columns:1fr}
  .div-art{width:min(180px,50%);margin-left:auto;margin-top:-4rem}
  .leader{grid-template-columns:1fr}
  .leader-photo{max-width:170px}
  .empty-work{grid-template-columns:1fr;padding-top:1.2rem}
  .empty-art{width:150px;order:2;margin-inline:auto}
  .foot-grid{grid-template-columns:1fr}
  .foot-services ul{columns:2}
  .world-grid{gap:.9rem}
  .world-tile{min-height:8rem;padding:.9rem}
  .title-cards{gap:.1em}
  .tc{box-shadow:5px 5px 0 var(--ink);border-width:3px}
  .steps-list li{padding:.8rem}
  .chat-pop{right:.5rem;left:.5rem;width:auto;bottom:calc(max(.6rem,env(safe-area-inset-bottom)) + 78px);height:min(72dvh,560px)}
  .bubble{font-size:.68rem;max-width:7.6em;padding:.2em .55em;border-width:2.5px}
  .sfx{-webkit-text-stroke-width:2px;text-shadow:3px 3px 0 var(--ink)}
}
@media (max-width:380px){
  .hdr-in{gap:.6rem}.brand{font-size:1.05rem}.logo-mark{width:36px;height:36px}
  .world-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .tc,.hero-p,.hero .cta-row,.hero-char{opacity:1!important}
}
@media print{.site-header,.chat-fab,.chat-pop,.marquee,.site-footer{display:none}}