/* ============================================
   CRAFT BRAND — ブランディング会社
   Theme: Ultra-Minimal Sophisticated (melon-inspired)
   Custom cursor, smooth scroll, monochrome
   COMPLETELY different structure from #1-6
   ============================================ */

/* --- No base.css dependency — standalone design --- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}  /* We handle scroll ourselves */
body{
  font-family:'Noto Sans JP','Inter',system-ui,sans-serif;
  color:#666;background:#fafaf9;font-size:15px;line-height:1.9;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  cursor:none; /* Hide default cursor */
}
a{color:inherit;text-decoration:none;cursor:none}
img{max-width:100%;display:block}
ul{list-style:none}
::selection{background:rgba(0,0,0,.06)}

/* === CUSTOM CURSOR === */
.cursor{position:fixed;width:20px;height:20px;border:1.5px solid #111;border-radius:50%;pointer-events:none;z-index:9999;transition:width .3s,height .3s,margin .3s,border-color .3s,background .3s;margin:-10px 0 0 -10px;mix-blend-mode:difference}
.cursor.hover{width:60px;height:60px;margin:-30px 0 0 -30px;background:rgba(255,255,255,.1);border-color:#fff}
.cursor-dot{position:fixed;width:4px;height:4px;background:#111;border-radius:50%;pointer-events:none;z-index:10000;margin:-2px 0 0 -2px;transition:opacity .3s}
@media(max-width:768px){.cursor,.cursor-dot{display:none}body{cursor:auto}a{cursor:auto}}

/* === LAYOUT === */
.mx{max-width:1100px;margin:0 auto;padding:0 clamp(2rem,6vw,4rem)}

/* === HEADER — Minimal: logo + hamburger only === */
.hdr{position:fixed;top:0;left:0;width:100%;z-index:800;padding:1.5rem clamp(2rem,6vw,4rem);display:flex;align-items:center;justify-content:space-between;mix-blend-mode:difference;color:#fff}
.hdr-logo{font-family:'Inter',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.hdr-menu{font-family:'Inter',sans-serif;font-size:.65rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;display:flex;align-items:center;gap:.5rem}
.hdr-menu-dot{width:6px;height:6px;background:#fff;border-radius:50%;transition:transform .3s}
.hdr-menu:hover .hdr-menu-dot{transform:scale(1.5)}

/* === FULLSCREEN OVERLAY MENU === */
.overlay-menu{position:fixed;inset:0;background:#111;z-index:900;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.overlay-menu.open{opacity:1;visibility:visible}
.overlay-menu nav{text-align:center}
.overlay-menu a{display:block;font-family:'Inter',sans-serif;font-size:clamp(2rem,5vw,4rem);font-weight:300;color:rgba(255,255,255,.4);letter-spacing:.05em;padding:.5rem 0;transition:color .3s,letter-spacing .3s}
.overlay-menu a:hover{color:#fff;letter-spacing:.1em}
.overlay-close{position:absolute;top:1.5rem;right:clamp(2rem,6vw,4rem);font-family:'Inter',sans-serif;font-size:.65rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.4);transition:color .3s}
.overlay-close:hover{color:#fff}

/* === HERO — Giant text only, no image === */
.hero-craft{min-height:100vh;display:flex;align-items:center;padding:0 clamp(2rem,6vw,4rem);position:relative}
.hero-craft h1{font-family:'Inter','Noto Sans JP',sans-serif;font-size:clamp(2.5rem,7vw,6rem);font-weight:200;color:#111;line-height:1.15;letter-spacing:-.03em}
.hero-craft h1 strong{font-weight:700}
.hero-craft h1 em{font-style:italic;font-weight:300;color:#999}
.hero-craft .hero-sub{position:absolute;bottom:clamp(2rem,5vw,4rem);right:clamp(2rem,6vw,4rem);font-size:.72rem;color:#aaa;max-width:280px;text-align:right;line-height:1.9}
.hero-scroll-line{position:absolute;bottom:clamp(2rem,5vw,4rem);left:clamp(2rem,6vw,4rem);width:1px;height:60px;background:linear-gradient(to bottom,#ccc,transparent)}

/* === HORIZONTAL DIVIDER === */
.hr{height:1px;background:rgba(0,0,0,.06);margin:0 clamp(2rem,6vw,4rem)}

/* === SECTION — Extreme whitespace === */
.sc{padding:clamp(6rem,14vw,12rem) clamp(2rem,6vw,4rem)}

/* === TWO COLUMN — Asymmetric === */
.two-col{display:grid;grid-template-columns:160px 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.two-col-label{font-family:'Inter',sans-serif;font-size:.55rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:#aaa;position:sticky;top:6rem}
.two-col-content h2{font-size:clamp(1.3rem,3vw,2rem);font-weight:600;color:#111;line-height:1.6;margin-bottom:1.5rem;letter-spacing:-.01em}
.two-col-content p{font-size:.88rem;line-height:2.4;margin-bottom:1.25rem}
@media(max-width:768px){.two-col{grid-template-columns:1fr;gap:1rem}.two-col-label{position:static;margin-bottom:.5rem}}

/* === SERVICES — Numbered list, not cards === */
.svc-list{counter-reset:svc;max-width:1100px;margin:0 auto;padding:0 clamp(2rem,6vw,4rem)}
.svc-item{display:flex;gap:2rem;padding:clamp(2rem,4vw,3rem) 0;border-bottom:1px solid rgba(0,0,0,.04);counter-increment:svc;transition:background .3s}
.svc-item:hover{background:rgba(0,0,0,.01)}
.svc-num{font-family:'Inter',sans-serif;font-size:2.5rem;font-weight:100;color:rgba(0,0,0,.07);line-height:1;flex-shrink:0;width:60px}
.svc-body h3{font-size:1.1rem;font-weight:600;color:#111;margin-bottom:.4rem;letter-spacing:-.01em}
.svc-body p{font-size:.8rem;line-height:1.9}
@media(max-width:640px){.svc-item{flex-direction:column;gap:.75rem}.svc-num{font-size:1.5rem}}

/* === WORKS — Full-width images with text overlay === */
.work-block{position:relative;overflow:hidden;display:block;border-radius:0}
.work-block img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;filter:brightness(.85);transition:transform .8s cubic-bezier(.22,1,.36,1),filter .6s;display:block}
.work-block:hover img{transform:scale(1.03);filter:brightness(.65)}
.work-block-text{position:absolute;bottom:0;left:0;right:0;padding:clamp(1.5rem,3vw,2.5rem);color:#fff}
.work-block-text h3{font-size:clamp(1rem,2vw,1.5rem);font-weight:600;margin-bottom:.3rem}
.work-block-text p{font-size:.72rem;color:rgba(255,255,255,.5)}

/* === CLIENTS — Simple text list === */
.client-list{display:flex;flex-wrap:wrap;gap:2rem 3rem;margin-top:2rem}
.client-list span{font-family:'Inter',sans-serif;font-size:.75rem;font-weight:500;color:#bbb;letter-spacing:.05em;transition:color .3s}
.client-list span:hover{color:#111}

/* === CONTACT — Minimal === */
.contact-minimal{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,5rem);align-items:start}
.contact-minimal h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:600;color:#111;line-height:1.5;margin-bottom:1.5rem}
.contact-minimal .info-item{margin-bottom:1.5rem}
.contact-minimal .info-label{font-family:'Inter',sans-serif;font-size:.55rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#aaa;margin-bottom:.3rem}
.contact-minimal .info-value{font-size:.9rem;color:#111}
.contact-minimal .info-value a{border-bottom:1px solid rgba(0,0,0,.1);transition:border-color .3s}
.contact-minimal .info-value a:hover{border-color:#111}
@media(max-width:768px){.contact-minimal{grid-template-columns:1fr}}

/* === FOOTER — Ultra minimal === */
.ftr{padding:3rem clamp(2rem,6vw,4rem) 1.5rem;display:flex;justify-content:space-between;align-items:center;font-size:.6rem;color:#bbb;border-top:1px solid rgba(0,0,0,.04)}
.ftr a:hover{color:#111}
@media(max-width:640px){.ftr{flex-direction:column;gap:.5rem}}

/* === ANIMATIONS === */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.rv.v{opacity:1;transform:none}
.rv-word{display:inline-block;opacity:0;transform:translateY(100%);transition:opacity .6s,transform .8s cubic-bezier(.22,1,.36,1)}
.rv-word.v{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

/* === SCALE BADGE === */
.badge{position:fixed;bottom:1.5rem;left:1.5rem;font-size:.55rem;color:#bbb;letter-spacing:.08em;display:flex;align-items:center;gap:.4rem;z-index:700}
.badge::before{content:'';width:4px;height:4px;background:#111;border-radius:50%}