/* ===========================================================================
   TANOSHI SCOUT
   Palette taken from the logo: grape purple + gold, on midnight and cream.
   Plain CSS, no build step — the site stays a drag-and-drop folder.
   =========================================================================== */

:root{
  --ink:#2B1B4D;
  --midnight:#22103F;
  --grape:#6D28D9;
  --violet:#A855F7;
  --gold:#FFB524;
  --sun:#FFD666;
  --tangerine:#FF7A1A;
  --coral:#FF6B8B;
  --teal:#14B8A6;
  --cream:#FFF7EC;
  --lilac:#F5F0FF;
  --wrap:74rem;
  --r:1.5rem;
  --shadow:0 2px 6px rgba(43,27,77,.05), 0 18px 40px -22px rgba(43,27,77,.3);
  --shadow-lg:0 10px 20px rgba(43,27,77,.08), 0 30px 60px -28px rgba(43,27,77,.5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:#fff; color:var(--ink);
  font:400 16px/1.65 "Nunito", system-ui, sans-serif;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:"Baloo 2", system-ui, sans-serif; font-weight:800; line-height:1.12; margin:0}
:lang(ja){font-family:"Noto Sans JP","Nunito",system-ui,sans-serif}
img{max-width:100%; display:block}
a{color:inherit}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:1.25rem}
@media(min-width:720px){.wrap{padding-inline:2rem}}
.wrap.narrow{max-width:46rem}

.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; z-index:100; background:var(--grape); color:#fff; padding:.8rem 1.2rem; border-radius:999px; font-weight:700}

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--gold); outline-offset:3px; border-radius:8px;
}

/* ------------------------------------------------------------------ nav */
.nav{
  position:fixed; inset:0 0 auto; z-index:50;
  display:flex; align-items:center; gap:1rem;
  padding:.85rem 1.25rem; transition:background .3s, box-shadow .3s, padding .3s;
}
@media(min-width:720px){.nav{padding:.85rem 2rem}}
.nav.solid{background:rgba(255,255,255,.96); backdrop-filter:blur(10px); box-shadow:var(--shadow)}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto}
.brand img{border-radius:.85rem; width:44px; height:44px}
.brand b{display:block; font-family:"Baloo 2",sans-serif; font-size:1.12rem; line-height:1.1; color:#fff}
.brand small{display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sun)}
.nav.solid .brand b{color:var(--ink)}
.nav.solid .brand small{color:var(--grape)}

.nav-links{display:none; gap:.25rem}
@media(min-width:1000px){.nav-links{display:flex}}
.nav-links a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 .9rem;
  border-radius:999px; text-decoration:none; font-weight:700; font-size:.95rem; color:rgba(255,255,255,.92);
}
.nav-links a:hover{background:rgba(255,255,255,.2)}
.nav.solid .nav-links a{color:rgba(43,27,77,.8)}
.nav.solid .nav-links a:hover{background:var(--lilac); color:var(--grape)}
.nav-cta{display:none}
@media(min-width:1000px){.nav-cta{display:inline-flex; margin-left:.5rem}}

.nav-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; padding:0 11px; border-radius:.85rem; cursor:pointer;
  background:rgba(255,255,255,.2); border:2px solid rgba(255,255,255,.55);
}
.nav.solid .nav-toggle{background:#fff; border-color:rgba(109,40,217,.25)}
.nav-toggle span{display:block; height:2.5px; border-radius:2px; background:#fff}
.nav.solid .nav-toggle span{background:var(--grape)}
@media(min-width:1000px){.nav-toggle{display:none}}

.nav-mobile{
  position:fixed; inset:4.5rem .75rem auto; z-index:49;
  background:#fff; border-radius:var(--r); box-shadow:var(--shadow-lg); padding:.5rem;
}
.nav-mobile a{
  display:flex; align-items:center; min-height:52px; padding:0 1rem;
  border-radius:1rem; text-decoration:none; font-weight:700; font-size:1.05rem;
}
.nav-mobile a:hover{background:var(--lilac)}
.nav-mobile .btn{margin-top:.4rem; justify-content:center}

/* ----------------------------------------------------------------- bits */
.eyebrow{
  display:inline-block; margin:0 0 1rem;
  padding:.4rem 1rem; border-radius:999px;
  background:var(--lilac); color:var(--grape);
  font-family:"Baloo 2",sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.02em;
}
.eyebrow.light{background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.4); color:var(--sun)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.85rem 1.6rem; border-radius:999px; border:0; cursor:pointer;
  font-family:"Baloo 2",sans-serif; font-weight:700; font-size:1rem; text-decoration:none;
  transition:transform .2s, box-shadow .2s, background .2s;
}
.btn-gold{background:linear-gradient(135deg,var(--sun),var(--tangerine)); color:var(--ink); box-shadow:0 14px 30px -12px rgba(255,122,26,.6)}
.btn-grape{background:var(--grape); color:#fff; box-shadow:0 14px 30px -14px rgba(109,40,217,.8)}
.btn-ghost{background:rgba(255,255,255,.14); color:#fff; border:2px solid rgba(255,255,255,.55); backdrop-filter:blur(6px)}
.btn:hover{transform:translateY(-2px)}
.btn-ghost:hover{background:#fff; color:var(--ink)}
.btn.wide{width:100%}

.lede{font-size:1.1rem; line-height:1.7; max-width:46rem; margin:0 0 1.4rem}
.lede.light{color:rgba(255,255,255,.9)}
.lede.dark{color:rgba(43,27,77,.8)}
.body{font-size:1.06rem; line-height:1.75; color:rgba(43,27,77,.85); margin:0 0 1.1rem}
.muted{color:rgba(43,27,77,.6); font-size:.88rem}
.row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}

.section{padding:5rem 0}
@media(min-width:720px){.section{padding:6rem 0}}
.section h2, .studio h2{font-size:clamp(2rem,4.4vw,3.1rem); margin-bottom:1.1rem}
.band{background:var(--lilac)}

/* ----------------------------------------------------------------- hero */
.hero{position:relative; display:flex; align-items:center; min-height:min(46rem,92svh); padding:8rem 0 5rem; isolation:isolate; overflow:hidden}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.hero-scrim{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(34,16,63,.82) 0%, rgba(34,16,63,.72) 45%, rgba(34,16,63,.92) 100%)}
.hero h1{font-size:clamp(2.6rem,7vw,4.9rem); color:#fff; margin-bottom:1.4rem}
.hero h1 em{font-style:normal; color:var(--sun)}
.hero .lede{color:rgba(255,255,255,.9)}

/* ---------------------------------------------------------------- reach */
.reach{background:var(--midnight); padding:0 0 3.5rem}
.reach-inner{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1.5rem;
  background:linear-gradient(135deg,var(--sun),var(--gold) 45%,var(--tangerine));
  border-radius:2.25rem; padding:2rem;
}
@media(min-width:720px){.reach-inner{padding:2.5rem 3rem}}
.stat{font-family:"Baloo 2",sans-serif; font-weight:800; font-size:clamp(2.6rem,8vw,4.2rem); line-height:1; margin:0; color:var(--ink)}
.stat-label{font-family:"Baloo 2",sans-serif; font-weight:700; font-size:1.2rem; margin:.4rem 0 0; color:rgba(43,27,77,.85)}
.stat-note{margin:0; max-width:20rem; font-weight:700; color:rgba(43,27,77,.8); font-size:.95rem}
.stat-note .muted{color:rgba(43,27,77,.6); font-weight:600; font-size:.85rem}

/* ---------------------------------------------------------------- cards */
.cards{display:grid; gap:1.1rem; margin-top:2.5rem}
@media(min-width:720px){.cards.three{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff; border-radius:var(--r); padding:1.8rem; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.card h3{font-size:1.3rem; margin-bottom:.5rem}
.card h4{font-size:1.15rem; margin-bottom:.15rem}
.card p{margin:0; color:rgba(43,27,77,.8); font-size:.98rem}
.chip{display:inline-flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem; border-radius:999px;
  font-family:"Baloo 2",sans-serif; font-weight:800; color:#fff; margin-bottom:1rem}
.chip-grape{background:var(--grape)} .chip-coral{background:var(--coral)} .chip-teal{background:var(--teal)}

/* ----------------------------------------------------------------- tags */
.tags{list-style:none; display:grid; gap:.8rem; padding:0; margin:2.5rem 0 0}
@media(min-width:560px){.tags{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.tags{grid-template-columns:repeat(3,1fr)}}
.tags li{background:#fff; border-radius:var(--r); padding:1.2rem 1.4rem; box-shadow:var(--shadow);
  font-family:"Baloo 2",sans-serif; font-weight:700; font-size:1.05rem}
.tags span{display:block; color:var(--grape); font-size:.85rem; font-weight:700; margin-bottom:.1rem}

/* --------------------------------------------------------------- studio */
.studio{position:relative; isolation:isolate; overflow:hidden; padding:5rem 0; color:#fff}
@media(min-width:720px){.studio{padding:6.5rem 0}}
.studio-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.studio-scrim{position:absolute; inset:0; z-index:-1; background:rgba(34,16,63,.93)}
.ja-head{font-size:clamp(1.8rem,4.2vw,2.8rem); margin-bottom:1rem; color:#fff}
.en-head{font-family:"Baloo 2",sans-serif; font-size:1.45rem; margin:2.5rem 0 .8rem; color:var(--sun)}
.light-card{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(4px)}
.light-card h4{color:#fff}
.light-card p{color:rgba(255,255,255,.85)}
.ja-sub{font-size:.85rem; color:var(--sun); margin:0 0 .5rem}
.ja-sub.block{display:block; margin-top:.5rem}
.who{margin:2.5rem 0 2rem; max-width:48rem; color:rgba(255,255,255,.88); line-height:1.7}
.who strong{color:var(--sun)}

/* ----------------------------------------------------------------- form */
form{margin-top:2rem}
.grid2{display:grid; gap:1.1rem}
@media(min-width:620px){.grid2{grid-template-columns:repeat(2,1fr)} .grid2 .span2{grid-column:1/-1}}
.grid2 p{margin:0}
label{display:block; font-family:"Baloo 2",sans-serif; font-weight:700; font-size:.95rem; margin-bottom:.35rem}
label b{color:var(--coral)}
.ja-label{font-weight:400; font-size:.8rem; color:rgba(43,27,77,.6)}
input,select,textarea{
  width:100%; min-height:48px; padding:.75rem 1rem; border-radius:1rem;
  border:2px solid rgba(43,27,77,.12); background:#fff; color:var(--ink);
  font:inherit; transition:border-color .2s, box-shadow .2s;
}
textarea{min-height:auto; resize:vertical}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--grape); box-shadow:0 0 0 4px rgba(109,40,217,.15)}
input.err,select.err,textarea.err{border-color:var(--coral)}
.hp{position:absolute; left:-9999px}
.form-error{color:#C2185B; font-weight:700; font-size:.92rem; margin:1rem 0 0; min-height:1.2em}
.fineprint{font-size:.85rem; color:rgba(43,27,77,.65); margin:1rem 0 0; text-align:center}

/* -------------------------------------------------------------- socials */
.socials{list-style:none; display:grid; gap:.8rem; padding:0; margin:2.5rem 0 0}
@media(min-width:560px){.socials{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.socials{grid-template-columns:repeat(5,1fr)}}
.socials a{
  display:flex; flex-direction:column; gap:.15rem; min-height:72px; justify-content:center;
  background:#fff; border-radius:var(--r); padding:1.1rem 1.3rem; text-decoration:none; box-shadow:var(--shadow);
  transition:transform .2s, box-shadow .2s;
}
.socials a:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.socials b{font-family:"Baloo 2",sans-serif; font-size:1.1rem}
.socials span{font-size:.85rem; color:rgba(43,27,77,.6)}

/* ----------------------------------------------------------------- foot */
.foot{background:var(--midnight); color:rgba(255,255,255,.85); padding:3.5rem 0 3rem}
.foot-inner{display:flex; flex-wrap:wrap; gap:2rem; align-items:flex-start}
.foot img{width:120px; height:auto}
.foot p{margin:0 0 .8rem; max-width:44rem}
.foot .muted{color:rgba(255,255,255,.6); font-size:.85rem}

/* --------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms !important; animation-duration:.001ms !important}
  .btn:hover,.card:hover,.socials a:hover{transform:none}
}