/* ═══════════════════════════════════════════════════════════════════════
   studio.css — shared by /studio/ and /en/studio/.
   Split out of studio/index.html's embedded <style> on 2026-09-06, when the
   English version was added. Same reasoning as works.css, company.css and
   contact.css: two copies of the same rules drift.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   Veriquest Studio — business unit page.

   The shell (tokens, nav, footer, canvases, motion) comes from vq.css. Only
   what is particular to this unit lives here. Studio's accent is the teal end
   of the brand gradient, re-pointed once on :root so every component below
   picks it up without another hex literal.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --acc:#22D3C4;
  --acc-line:rgba(34,211,196,.5);
  --acc-glow:rgba(34,211,196,.17);
}

/* ── Unit hero ─────────────────────────────────────────────────────── */
.u-hero{
  position:relative;overflow:hidden;background:transparent;
  padding:clamp(56px,8vh,104px) var(--pad) clamp(44px,6vh,80px);
}
.u-hero .shell{position:relative;z-index:2}
.u-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(102deg,
    rgba(10,15,26,.66) 0%,rgba(10,15,26,.30) 24%,
    rgba(10,15,26,.06) 42%,transparent 56%);
}
.crumb{
  display:flex;align-items:center;gap:10px;margin:0 0 22px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim);
}
.crumb a{color:var(--ink-dim);transition:color .2s}
.crumb a:hover{color:var(--ink)}
.crumb span{color:var(--acc)}
.u-name{
  margin:0 0 clamp(14px,2vh,22px);position:relative;
  font-size:min(clamp(38px,7.2vw,98px),13.5vh);line-height:1.0;color:var(--ink);
}
/* One typeface across the lockup. The Fraunces build now carries full basic
   latin (see tools/build.js), so the unit name sets in the same cut as the
   house name — earlier it held only the glyphs of "Veriquest" and fell back
   mid-word. The gradient, not a second typeface, separates the two halves. */
.u-name b,.u-name em{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.026em}
.u-name em{
  font-style:normal;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.u-name::before{
  content:"";position:absolute;left:-6%;top:-26%;width:86%;height:154%;z-index:-1;
  pointer-events:none;
  background:radial-gradient(56% 52% at 36% 50%,
    rgba(34,211,196,.26) 0%,rgba(46,123,255,.13) 46%,transparent 74%);
  filter:blur(30px);
}
.u-sub{
  margin:0 0 clamp(18px,2.6vh,30px);
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:800;font-size:min(clamp(21px,3.1vw,40px),5.4vh);line-height:1.2;
  letter-spacing:-.028em;color:var(--ink);text-wrap:balance;
}
.u-lede{margin:0 0 clamp(26px,3.4vh,40px);max-width:40em;
  font-size:clamp(14.5px,1.5vw,17px);line-height:1.95;color:var(--ink-mid)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;
  color:#06090F;background:var(--grad);border-radius:100px;padding:15px 28px;
  box-shadow:0 12px 38px rgba(34,211,196,.32);
  transition:filter .2s,transform .2s;
}
.btn:hover{filter:brightness(1.1);transform:translateY(-2px)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-mid);
  border:1px solid var(--line-firm);border-radius:100px;padding:14px 24px;
  transition:color .2s,border-color .2s,background-color .2s;
}
.btn-ghost:hover{color:var(--ink);border-color:var(--acc-line);background:rgba(255,255,255,.04)}

/* ── Generic card grid ─────────────────────────────────────────────── */
.grid{display:grid;gap:clamp(14px,1.7vw,22px)}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,282px),1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr))}
.card{
  position:relative;background:rgba(255,255,255,.035);
  border:1px solid var(--line);border-radius:18px;
  padding:clamp(26px,2.7vw,36px) clamp(22px,2.3vw,30px);
  overflow:hidden;isolation:isolate;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s;
}
.card .rail{
  position:absolute;top:0;left:0;right:0;height:3px;
  background-image:var(--grad);background-size:300% 100%;
}
.card:hover{transform:translateY(-7px);border-color:var(--acc-line);
  box-shadow:0 24px 56px rgba(0,0,0,.5),0 0 40px var(--acc-glow)}
.card .idx{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;
  color:var(--acc);display:block;margin-bottom:16px;
}
.card h3{margin:0 0 12px;
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:700;font-size:clamp(18px,2vw,23px);line-height:1.34;
  letter-spacing:-.018em;color:var(--ink)}
.card p{margin:0;font-size:13.5px;line-height:1.9;color:var(--ink-mid)}

/* ── Works ─────────────────────────────────────────────────────────── */
.work{
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;isolation:isolate;
  transition:border-color .4s,transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s;
}
.work:hover{border-color:var(--acc-line);transform:translateY(-6px);
  box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 40px var(--acc-glow)}
.work-shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0B1220}
.work-shot img{width:100%;height:100%;object-fit:cover;object-position:center top;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.work:hover .work-shot img{transform:scale(1.045)}
.work-body{padding:clamp(22px,2.4vw,30px)}
.work-role{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.1em;padding:4px 11px;border-radius:100px;margin-bottom:14px;
}
.role-client{color:#4D9BFF;border:1px solid rgba(77,155,255,.55)}
.role-own{color:var(--ink-dim);border:1px solid var(--line-firm)}
.work h3{margin:0 0 12px;font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:700;font-size:clamp(17px,1.9vw,22px);line-height:1.35;letter-spacing:-.018em}
.work p{margin:0 0 14px;font-size:13px;line-height:1.85;color:var(--ink-mid)}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px;padding:0;list-style:none}
.tags li{font-size:11.5px;color:var(--ink-dim);background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:100px;padding:4px 11px}
.work-seo{display:inline-block;font-size:12px;color:var(--acc);
  border:1px solid var(--acc-line);border-radius:6px;padding:5px 11px;margin-bottom:12px}
.work-link{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--acc)}
.work-note{font-size:11.5px;color:var(--ink-faint)}

/* ── Range chips (対応デザイン) ────────────────────────────────────── */
.ranges{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));
  gap:clamp(11px,1.3vw,16px)}
.range{
  position:relative;border-radius:16px;padding:1.5px;
  background:conic-gradient(from 0deg,var(--teal),var(--blue),var(--violet),var(--teal));
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
.range:hover{transform:translateY(-6px);box-shadow:0 20px 46px rgba(0,0,0,.5),0 0 36px rgba(46,123,255,.22)}
.range span{display:flex;flex-direction:column;gap:10px;height:100%;min-height:142px;
  border-radius:14.5px;background:#0A1018;padding:clamp(18px,2vw,24px)}
.range b{font-size:24px;line-height:1;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.range strong{margin-top:auto;font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:700;font-size:clamp(15px,1.6vw,17px);letter-spacing:-.01em;color:var(--ink)}
.range i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.14em;color:var(--ink-dim)}

/* ── Pricing ───────────────────────────────────────────────────────── */
.plan{display:flex;flex-direction:column}
.plan .price{
  font-family:'Schibsted Grotesk',sans-serif;font-weight:800;
  font-size:clamp(26px,3.2vw,38px);line-height:1;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;margin:0 0 20px;
}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.plan li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.8;color:var(--ink-mid)}
.plan li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc-glow)}
.note{margin-top:26px;font-size:12.5px;line-height:1.9;color:var(--ink-faint)}

/* ── Process ───────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,196px),1fr));
  gap:clamp(12px,1.5vw,18px);counter-reset:s}
.step{position:relative;padding:26px 22px 24px;border:1px solid var(--line);
  border-radius:16px;background:rgba(255,255,255,.028);overflow:hidden}
.step::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;
  background:var(--grad);transform:scaleX(var(--p,1));transform-origin:left}
.step b{display:block;font-family:'IBM Plex Mono',monospace;font-size:26px;
  line-height:1;letter-spacing:-.02em;color:var(--acc);opacity:.5;margin-bottom:16px}
.step strong{display:block;font-size:15.5px;font-weight:700;line-height:1.5;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:8px}
.step span{font-size:12.5px;line-height:1.8;color:var(--ink-dim)}

/* ── FAQ — <details> so it needs no JavaScript at all ──────────────── */
.faq{display:grid;gap:12px}
.faq details{border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.028);overflow:hidden;transition:border-color .3s}
.faq details[open]{border-color:var(--acc-line)}
.faq summary{
  display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  padding:20px 24px;font-size:15px;font-weight:700;line-height:1.6;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:20px;
  font-weight:400;color:var(--acc);transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.1em;color:var(--acc);flex:none}
.faq .a{padding:0 24px 22px 62px;margin:0;font-size:13.5px;line-height:1.95;color:var(--ink-mid)}

/* ── Contact form (type=studio) ────────────────────────────────────── */
.form-wrap{
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:20px;padding:clamp(26px,3.2vw,44px);
}
.fields{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.field-full{grid-column:1/-1}
label{display:block}
.lbl{display:block;margin-bottom:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:#9CA9BC}
.lbl b{color:var(--acc);font-weight:400}
input,select,textarea{
  width:100%;font-family:'Zen Kaku Gothic New',sans-serif;font-size:15px;line-height:1.7;
  color:var(--ink);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:13px 15px;
  transition:border-color .18s,background-color .18s;
}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--acc);background:rgba(255,255,255,.08)}
select{appearance:none;cursor:pointer}
.submit{
  margin-top:26px;width:100%;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:16px;
  color:#06090F;background:var(--grad);border:none;border-radius:100px;padding:17px 24px;
  cursor:pointer;box-shadow:0 12px 38px rgba(34,211,196,.34);
  transition:filter .2s,transform .2s;
}
.submit:hover{filter:brightness(1.08);transform:translateY(-2px)}
.vq-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.form-note{margin:16px 0 0;font-size:12px;line-height:1.85;color:var(--ink-faint)}

@media (prefers-reduced-motion: no-preference){
  .u-name em,.u-sub em{background-size:230% 100%;animation:vq-hue 9s ease-in-out infinite alternate}
  .u-name::before{animation:vq-halo 6s ease-in-out infinite alternate}
  .u-name .ln i{animation-delay:.14s}
  .u-sub .ln i{animation-delay:.28s}
}