/* ═══════════════════════════════════════════════════════════════════════
   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);
}

/* ── ヒーロー周りの部品 ────────────────────────────────────────────
   ヒーロー本体は .w-hero（world-*.css）。旧・共通ヒーローの .u-hero /
   .u-name / .u-sub / .u-lede は 2026-09-10 の世界観の実装で使われなくなった。 */
.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)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.cta-note{margin:14px 0 0;max-width:44em;font-size:13px;line-height:1.8;color:var(--ink-mid)}
.prose{max-width:44em;font-size:15px;line-height:1.95;color:var(--ink-mid)}
.prose strong{color:var(--ink)}
.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)}

/* ── 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 .foot{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:12.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-mid)}

/* ── 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);margin-bottom:16px}  /* 2026-09-19: was opacity:.5 (≈2:1); full-strength accent clears 3:1 for 26px */
.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)}