/*! Veriquest — Works unit.
    Shared by /works/, the per-title pages /works/<slug>/ and /system/.
    Depends on vq.css for tokens and for the nav/footer chrome. */

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

   The shell (tokens, nav, footer, canvases, motion) comes from vq.css. Only
   what is particular to this unit lives here. Works takes the blue middle of
   the brand gradient — which is also vq.css's default --acc, so the block
   below restates it rather than changing it: the page should not depend on
   the shell's choice of default staying put.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --acc:#4D9BFF;
  --acc-line:rgba(46,123,255,.5);
  --acc-glow:rgba(46,123,255,.18);
  /* Per-title art colour. Products re-point it; everything else inherits the
     house blue, so the catalogue furniture works inside and outside a card. */
  --tint:var(--acc);
}

/* ── ヒーロー周りの部品 ────────────────────────────────────────────
   ヒーロー本体は .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}
.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(46,123,255,.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)}
.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)}
/* Kinsoku. Chrome's default breaks a heading like 「業務・DXソフトウェア」
   between ウ and ェ, dropping a small kana onto the next line; `strict`
   forbids it. Headings are where it shows, being the narrowest measure. */
h2,h3{line-break:strict}
.card p{margin:0;font-size:13.5px;line-height:1.9;color:var(--ink-mid)}

/* ── Product cards ─────────────────────────────────────────────────── */
/* Each title keeps the accent it already has in its own art (--tint). It is
   deliberately confined to the catalogue number, the pip and the media edge:
   the card chrome stays on the house blue, so three different palettes read
   as one shelf rather than three sites. */
.prod{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  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;
}
.prod: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)}
/* ゲーム画面は欠けずに全部見せる（ユーザー指示 2026-09-10。以前は 16:10 の枠に cover で、
   縦長の魂の共鳴は29%しか見えていなかった）。枠は画面の外側＝黒、絵は contain で収める。
   マウスを乗せたときの拡大もやめた（拡大すれば端がまた切れる）。
   横長の画面は 16:9 の枠（14番地はぴったり、遺失録のような 2.2:1 は上下に細い黒帯）。 */
.prod-shot{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.prod-shot img{width:100%;height:100%;object-fit:contain;display:block}
/* 縦長の画面（スマホの縦持ち）のゲームは、画面を左に立て、説明を右に置く横組みのカード。
   画面の幅は 280px まで＝縦は約 600px。2列の段では2枚とも縦長になるよう並べてある。 */
.prod--tall{grid-template-columns:minmax(0,min(280px,44%)) minmax(0,1fr);container-type:inline-size}
/* 枠の最低の高さは、画面の比（魂の共鳴 0.460・十字熟語 0.461 ≒ 9:19.5）と列の幅から決める。
   aspect-ratio で決めると、段が高いときに幅まで押し広げて説明の列に食い込む（実測で30px）ので、
   列の幅と同じ式 min(280px,44%) をカードの幅（cqi）で書いて高さに換算する。段が高ければ枠は下まで伸びる */
.prod--tall .prod-shot{aspect-ratio:auto;align-self:stretch;min-height:calc(min(280px,44cqi) * 19.5 / 9)}
.prod-shot::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--tint),transparent);
}
.prod-body{padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column}
.prod-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.prod-icon{width:56px;height:56px;flex:none;border-radius:14px;
  border:1px solid var(--line);background:#0B1220}
.cat-no{
  display:flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);
}
.cat-no::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--tint);box-shadow:0 0 9px var(--tint)}
.prod h3{margin:6px 0 0;
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:700;font-size:clamp(18px,2vw,24px);line-height:1.3;
  letter-spacing:-.018em;color:var(--ink)}
/* The Logica card is a .card, not a .prod, but wears the same title lockup. */
.prod-head h3{margin:6px 0 0}
.prod h3 small,.prod-head h3 small{display:block;margin-top:4px;font-size:.62em;
  font-weight:500;letter-spacing:0;color:var(--ink-dim)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px;padding:0;list-style:none}
.chips 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}
/* The raw art colours are too dark to set 11px type on this ground (14番地's
   red lands near 3.9:1), so the chip lifts the hue toward white and leaves the
   pure tint to the pip and the media edge, where contrast is not a factor. */
.chips li.is-genre{
  color:color-mix(in srgb,var(--tint) 62%,#FFFFFF);
  border-color:color-mix(in srgb,var(--tint) 50%,transparent);
}
.prod p{margin:0 0 18px;font-size:13.5px;line-height:1.9;color:var(--ink-mid)}

/* Lead title — same card, two columns once there is room for them. */
@media (min-width:940px){
  .prod--lead{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:stretch}
  .prod--lead .prod-shot{aspect-ratio:auto;height:100%}
}
/* スマホ：縦長のカードも縦積みに戻し、画面は高さ 460px の黒い枠の中に立てる */
@media (max-width:620px){
  .prod--tall{grid-template-columns:minmax(0,1fr)}
  .prod--tall .prod-shot{height:460px;min-height:0}
}
.flag{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  margin-bottom:12px;padding:5px 13px;border-radius:100px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  color:#06090F;background:var(--grad);
}

/* ── Store buttons ─────────────────────────────────────────────────── */
.stores{display:flex;flex-wrap:wrap;gap:10px}
.store{
  display:inline-flex;align-items:center;gap:11px;
  border:1px solid var(--line-firm);border-radius:12px;padding:9px 17px 9px 14px;
  background:rgba(255,255,255,.045);
  transition:border-color .25s,background-color .25s,transform .25s;
}
.store:hover{border-color:var(--acc-line);background:rgba(255,255,255,.08);transform:translateY(-2px)}
.store svg{width:22px;height:22px;flex:none}
.store b{display:block;font-family:'Schibsted Grotesk',sans-serif;font-weight:700;
  font-size:14px;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.store i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.02em;color:var(--ink-faint)}
.store--test i{color:var(--acc)}

/* ── Coming-soon app card ──────────────────────────────────────────── */
.soon{display:grid;gap:clamp(20px,2.4vw,34px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.soon-shot{position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:#080C14;max-width:340px}
.soon-shot img{width:100%;height:auto}
.soon-desc{margin-bottom:18px}
.badge-soon{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.14em;color:var(--acc);border:1px solid var(--acc-line);
  border-radius:100px;padding:5px 14px;
}

/* ── Domain / tech ─────────────────────────────────────────────────── */
.stack{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.stack li{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em;
  color:var(--ink-mid);background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:8px;padding:8px 14px;
  transition:color .25s,border-color .25s;
}
.stack li:hover{color:var(--ink);border-color:var(--acc-line)}
.note{margin-top:26px;font-size:12.5px;line-height:1.9;color:var(--ink-faint)}
/* A lede may carry one link (the Works hero points to /system/). */
.w-lede a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--acc-line)}
.note a,.faq .a a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--acc-line)}
.note a:hover,.faq .a a:hover{text-decoration-color:var(--acc)}

/* ── Beta recruiting banner ────────────────────────────────────────── */
.beta{
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--acc-line);border-radius:20px;
  padding:clamp(30px,3.6vw,52px);
  background:
    radial-gradient(120% 140% at 12% 0%,rgba(46,123,255,.17) 0%,transparent 62%),
    rgba(255,255,255,.035);
}
.beta h3{margin:0 0 14px;
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:800;font-size:clamp(21px,2.6vw,31px);line-height:1.35;
  letter-spacing:-.022em;color:var(--ink)}
.beta p{margin:0 0 24px;max-width:46em;font-size:13.5px;line-height:1.95;color:var(--ink-mid)}
.beta ol{margin:0 0 26px;padding:0 0 0 1.25em;max-width:46em;
  font-size:13px;line-height:1.95;color:var(--ink-mid)}
.beta ol li{margin-bottom:6px}

/* ── Support links ─────────────────────────────────────────────────── */
.docs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.doc{
  display:flex;align-items:center;gap:14px;
  border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  background:rgba(255,255,255,.028);
  transition:border-color .3s,background-color .3s,transform .3s;
}
.doc:hover{border-color:var(--acc-line);background:rgba(255,255,255,.05);transform:translateY(-3px)}
.doc b{display:block;font-size:14.5px;font-weight:700;line-height:1.5;color:var(--ink)}
.doc i{display:block;font-style:normal;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.1em;color:var(--ink-faint);margin-top:4px}
.doc span{margin-left:auto;color:var(--acc);font-size:15px}

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

/* ── Support form (type=works) ─────────────────────────────────────── */
.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}
/* Two-line labels (the email hint) otherwise push their input below the ones
   beside it. Letting the caption take the slack row keeps every input in a
   row sitting on the same baseline. */
.fields label{display:grid;grid-template-rows:1fr auto;height:100%}
.fields .lbl{align-self:start}
.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}
.lbl em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--ink-faint)}
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(46,123,255,.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)}

/* ── Catalogue → title page ────────────────────────────────────────── */
/* The whole card is the click target, not a line of text easy to miss. A
   transparent link is layered over everything (.prod already establishes
   the positioning context and a stacking context via isolation:isolate);
   the store buttons are lifted above it so both stay independently
   clickable without nesting an <a> inside an <a>. */
.prod-cover{position:absolute;inset:0;z-index:1}
.prod .stores{margin-top:auto;position:relative;z-index:2}

/* ── Title page — hero ─────────────────────────────────────────────── */
/* A tighter version of the unit hero: icon + name + catch + chips, no
   display-size type. --tint (set inline per page) carries the same accent
   the title already has on its catalogue card. */
.p-hero{
  position:relative;overflow:hidden;background:transparent;
  padding:clamp(52px,7.5vh,92px) var(--pad) clamp(8px,1vh,16px);
}
.p-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 84% at 14% 0%,var(--acc-glow) 0%,transparent 64%);
}
.p-hero .shell{position:relative;z-index:1}
.p-head{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.p-icon{width:76px;height:76px;flex:none;border-radius:18px;
  border:1px solid var(--line);background:#0B1220}
.p-name{margin:0;
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:800;font-size:clamp(26px,4vw,44px);line-height:1.25;
  letter-spacing:-.024em;color:var(--ink)}
.p-name small{display:block;margin-top:6px;font-size:.48em;font-weight:600;
  letter-spacing:0;color:var(--ink-dim)}
.p-catch{margin:0 0 20px;max-width:36em;
  font-size:clamp(14.5px,1.6vw,17px);line-height:1.85;color:var(--ink-mid)}

/* ── Title page — screen frame (used by the rows below) ───────────── */
.p-intro-shot{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#080C14}
.p-intro-shot img{width:100%;height:auto;display:block}

/* ── Title page — rows: a short text beside its own screen ───────────
   Replaces the long intro + feature list + gallery (2026-10-21): each screen
   sits next to the line that explains it. Phone: heading, text, screen, in
   that order. From 860px: text 5 : screen 7, sides swapped by the --flip
   class (not nth-of-type), so a text-only row (--text) never shifts the
   rhythm of the rows after it. --tall is for a portrait phone screen. The
   screen frame is .p-intro-shot (world-pixel.css squares its corners). */
.p-rows{display:grid;gap:clamp(24px,2.6vw,36px)}
.p-row{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:center}
.p-row-text{max-width:40em}
.p-row h3{margin:0 0 6px;
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:700;font-size:clamp(17px,1.7vw,21px);line-height:1.4;color:var(--ink)}
.p-row p{margin:0 0 .6em;font-size:14.5px;line-height:1.85;color:var(--ink-mid)}
.p-row p:last-child{margin-bottom:0}
.p-row--text .p-row-text{border-left:4px solid var(--tint);padding:2px 0 2px 18px}
.p-row--tall .p-intro-shot{width:100%;max-width:260px;margin:0 auto}
@media (min-width:860px){
  .p-row{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,3.4vw,52px)}
  .p-row--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .p-row--flip .p-row-text{order:2}
  .p-row--text{grid-template-columns:minmax(0,1fr)}
}
/* 縦長の画面だけの並び（魂の共鳴）は、560px から画面を上・文を下にした札を並べる。
   1段ずつ左右に置くと、260px の画面の横が空いて縦に長くなるため（2026-10-21）。
   560〜999px は札の幅 180〜220px で折り返し、最後の段は中央に寄せる。
   1000px からは5枚を1段に固定する（自動の列数だと 4枚＋1枚 に割れる幅がある） */
@media (min-width:560px){
  .p-rows--tall{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(18px,2vw,28px)}
  .p-rows--tall .p-row,.p-rows--tall .p-row.p-row--flip{flex:1 1 180px;max-width:220px;
    grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
  .p-rows--tall .p-row .p-intro-shot{order:-1}
}
@media (min-width:1000px){
  .p-rows--tall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  .p-rows--tall .p-row,.p-rows--tall .p-row.p-row--flip{max-width:none}
}

/* ── Title page — highlight cards (subset of titles only) ───────────── */
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}

/* ── Title page — download ───────────────────────────────────────── */
.dl-grid{display:grid;gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-bottom:22px}
.dl-card{border:1px solid var(--line);border-radius:16px;
  padding:clamp(20px,2.2vw,28px);background:rgba(255,255,255,.03)}
.dl-card h3{margin:0 0 14px;
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:700;font-size:16px;color:var(--ink)}
.dl-note{margin:0 0 14px;font-size:12.5px;line-height:1.8;color:var(--ink);
  background:rgba(255,255,255,.03);border:1px solid var(--acc-line);
  border-radius:10px;padding:11px 14px}
.p-back{margin-top:4px;font-size:13px}
.p-back a{color:var(--ink-dim);transition:color .2s}
.p-back a:hover{color:var(--ink)}

/* ── System development (/system/) ──────────────────────────────────
   The parts of the page. Its world (the hero, the colours, the wire that
   joins the sections) is world-flow.css, loaded after this file. Here: a
   list of examples (the same card as the Studio work list: shot on top, a
   role tag, title, text, tags), the numbered flow, the house cards and FAQ,
   and a one-card pricing note.

   This page does not load fonts.css. Latin faces come from fonts-latin.css
   and Japanese is set in the device's own font, so the two rules below
   re-point every family on the page that names the Japanese web font. */
body.build{font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo','Noto Sans JP',sans-serif}
body.build .p-name,body.build .sec h2,body.build .card h3,body.build .work h3{
  font-family:'Schibsted Grotesk','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo','Noto Sans JP',sans-serif}

/* Examples. One column on a phone (the shot runs the full width of the
   card), two from 760px; the first card takes the whole first row and, once
   there is room, sets its text beside the shot. */
.build-cases{display:grid;gap:clamp(14px,1.7vw,22px);grid-template-columns:minmax(0,1fr)}
.work{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 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-size:10.5px;letter-spacing:.1em;
  font-family:'IBM Plex Mono','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo','Noto Sans JP',monospace;
  padding:4px 11px;border-radius:100px;margin-bottom:14px;
}
/* The role tag, as on the Studio work list: a partner project in the house
   blue, our own product in the quiet outline, a demo in the brand teal. */
.role-partner{color:#4D9BFF;border:1px solid rgba(77,155,255,.55)}
.role-own{color:var(--ink-dim);border:1px solid var(--line-firm)}
.role-demo{color:#5FDDD2;border:1px solid rgba(34,211,196,.5)}
.work h3{margin:0 0 12px;font-weight:700;font-size:clamp(17px,1.9vw,22px);
  line-height:1.35;letter-spacing:-.018em;color:var(--ink)}
.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;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}
@media (min-width:760px){
  .build-cases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .build-cases .work--lead{grid-column:1/-1}
}
@media (min-width:940px){
  .build-cases .work--lead{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:auto;align-items:center}
  .work--lead .work-body{padding:clamp(26px,3vw,44px)}
  .work--lead h3{font-size:clamp(21px,2.3vw,28px);margin-bottom:16px}
  .work--lead p{font-size:14px;line-height:1.95;margin-bottom:18px}
}

.build-flow{margin:0;padding:0;list-style:none;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.build-flow li{display:flex;flex-direction:column;gap:8px;
  border:1px solid var(--line);border-radius:16px;padding:clamp(20px,2.2vw,26px);
  background:rgba(255,255,255,.03)}
.build-flow b{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:400;
  letter-spacing:.12em;color:var(--acc)}
.build-flow strong{font-size:15.5px;line-height:1.55;color:var(--ink)}
.build-flow span{font-size:13.5px;line-height:1.9;color:var(--ink-mid)}
.build-flow a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--acc-line)}
.build-flow strong a{display:inline-block;padding:11px 0;margin:-11px 0;color:inherit;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--acc-line)}
.card .build-link,.work .build-link{margin:6px 0 0;font-size:13px}
.card .build-link a,.work .build-link a{display:inline-flex;align-items:center;min-height:44px}
.work .tags + .build-link{margin-top:8px}
.work p.work-note{margin-top:-6px;font-size:12px;color:var(--ink-faint)}
/* Pricing: one card, one sentence, no figures. */
.build-quote{max-width:56em}
.card.build-quote p{font-size:clamp(15px,1.6vw,17.5px);line-height:1.95;color:var(--ink)}
.card.build-quote p.note{margin-top:14px;font-size:12.5px;line-height:1.9;color:var(--ink-faint)}
.nw{white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.build .work,body.build .work-shot img,body.build .card,body.build .btn,body.build .btn-ghost{transition:none}
  body.build .work:hover,body.build .work:hover .work-shot img,body.build .card:hover,body.build .btn:hover{transform:none}
}
#cases{scroll-margin-top:96px}