:root{
  --bg:#F4F3EF; --card:#EBE8E1; --ink:#1B1A17; --grey:#6E6A60;
  --line:rgba(27,26,23,0.055);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{height:100%;}
body{
  min-height:100%;
  font-family:"Inter","Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background-image:repeating-linear-gradient(to right,
    transparent 0, transparent 159px,
    var(--line) 159px, var(--line) 160px);
}

/* ---------- NAV ---------- */
.nav{
  position:absolute; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:30px 48px;
}
.nav-left{ display:flex; align-items:center; gap:54px; }
.logo{ height:30px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-item{
  position:relative;
  font-weight:600; font-size:13px; letter-spacing:.09em;
  color:var(--ink); cursor:pointer; user-select:none;
  padding:6px 0;
  transition:opacity .2s ease;
}
.nav-item:hover{ opacity:.55; }
.nav-right{ display:flex; align-items:center; gap:28px; }
.lang{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; letter-spacing:.06em; }
.lang a{ color:var(--grey); text-decoration:none; transition:opacity .2s ease; }
.lang a.active{ color:var(--ink); }
.lang a:hover{ opacity:.55; }
.lang .sep{ color:var(--grey); opacity:.45; }
.contact{
  font-weight:600; font-size:13px; letter-spacing:.09em;
  color:var(--ink); text-decoration:none; transition:opacity .2s ease;
}
.contact:hover{ opacity:.55; }

/* ---------- CARD BACK PANELS ---------- */
.back-panel{
  position:absolute; inset:0; padding:24px;
  display:flex; flex-direction:column; justify-content:center; gap:9px;
  text-align:left; opacity:0; transition:opacity .3s ease .14s;
  pointer-events:none;
}
.back-logo{ align-items:center; justify-content:center; padding:18px; }
.back-logo img{ width:166px; height:auto; display:block; }
.card.show-logo .back-logo,
.card.show-work .back-work,
.card.show-about .back-about{ opacity:1; }
.back-panel .eyebrow{ font-weight:600; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); }
.back-panel .line{ font-weight:500; font-size:14px; line-height:1.42; letter-spacing:-.01em; color:var(--ink); }
.back-panel .stat{ font-weight:600; font-size:12px; letter-spacing:0; color:var(--ink); }
.back-panel .sub{ font-weight:400; font-size:12px; line-height:1.45; color:var(--grey); }
.back-about .info{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.back-about .info li{ font-size:11.5px; line-height:1.45; color:var(--ink); }
.back-about .info b{ display:block; font-weight:600; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); margin-bottom:2px; }

/* ---------- STAGE (card + flanking text) ---------- */
.stage{
  position:absolute; left:50%; top:43%;
  transform:translate(-50%,-50%);
  width:100%; max-width:1180px; padding:0 40px;
  display:flex; align-items:center; justify-content:center; gap:74px;
  z-index:20;
}
.block{ flex:0 0 auto; }
.block.left{ width:232px; }
.block.right{ width:222px; }
.block .label{ font-weight:700; font-size:15px; letter-spacing:.01em; margin-bottom:13px; }
.block p{ font-size:15px; line-height:1.5; color:var(--ink); }
.block.left p{ color:var(--grey); }
.card{
  flex:0 0 auto; width:214px; height:294px;
  transform:rotate(4deg);
  perspective:1400px; z-index:30; cursor:pointer;
  transition:transform .55s cubic-bezier(.34,.12,.18,1);
}
.card.active{ transform:rotate(0deg) scale(1.18); z-index:60; }
.card-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.34,.12,.18,1);
  will-change:transform;
}
.card.flipped .card-inner{ transform:rotateY(180deg); }
.card-face{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--card); border-radius:18px;
  box-shadow:0 34px 54px rgba(27,26,23,.14), 0 2px 6px rgba(27,26,23,.08);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  padding:18px; overflow:hidden;
}
.card-back{ transform:rotateY(180deg); }
.card-front img{ width:172px; height:auto; display:block; }

/* ---------- HEADLINE ---------- */
.headline{
  position:absolute; left:36px; bottom:7vh;
  width:calc(100% - 72px); height:auto; display:block; z-index:10;
}

/* ---------- LET'S TALK ---------- */
.lets-talk{
  position:absolute; right:50px; bottom:5vh; z-index:25;
  display:flex; align-items:center; gap:10px;
  font-size:16px; font-weight:500; color:var(--ink);
  text-decoration:none; transition:gap .2s ease, opacity .2s ease;
}
.lets-talk:hover{ gap:14px; }
.lets-talk svg{ display:block; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .hero{ min-height:100vh; overflow:visible; }
  .nav{ padding:20px 22px; }
  .nav-left{ gap:22px; }
  .nav-right{ gap:16px; }
  .stage{
    position:static; transform:none; left:auto; top:auto;
    flex-direction:column; gap:30px; padding:120px 24px 0; max-width:100%;
  }
  .block, .block.left, .block.right{ width:100%; max-width:360px; text-align:center; }
  .card{ order:-1; }
  .headline{
    position:static; width:calc(100% - 32px); margin:48px auto 0;
    left:auto; bottom:auto;
  }
  .lets-talk{
    position:static; margin:18px 24px 48px auto; bottom:auto; right:auto;
  }
}