/* ============================================
   匠工房 TAKUMI KOBO — 工務店
   Theme: Monochrome Japanese Modern
   Black base, full-bleed photos, serif typography
   ============================================ */
:root{
  --pri:#111;--pri2:#222;--acc:#c9a96e;--acc2:#b08d57;
  --txt:#888;--heading:#111;
  --bg:#fff;--bg2:#f5f4f1;--bg3:#0a0a0a;
  --ff:'Zen Old Mincho','Noto Serif JP',serif;
  --fb:'Noto Sans JP',sans-serif;
  --fe:'Cormorant Garamond',serif;
  --r:0;--rlg:0;
  --hh:80px;
  /* Override base.css vars */
  --color-primary:#111;--color-accent:#c9a96e;--color-text:#888;--color-heading:#111;
  --color-bg:#fff;--color-bg-alt:#f5f4f1;
  --color-header-bg:rgba(255,255,255,.95);
  --color-footer-bg:#0a0a0a;--color-footer-text:rgba(255,255,255,.4);
  --font-heading:'Zen Old Mincho','Noto Serif JP',serif;
  --font-body:'Noto Sans JP',sans-serif;
  --font-en:'Cormorant Garamond',serif;
  --header-height:80px;--radius:0;--radius-lg:0;
  --hero-overlay:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 50%);
}

/* --- Loading --- */
.loading-screen{background:var(--bg3)}
.loading-logo{font-family:var(--fe);color:var(--acc);font-size:clamp(1.5rem,3vw,2.5rem);font-weight:300;letter-spacing:.3em}

/* --- Header --- */
.header .logo{font-family:var(--ff);font-size:1rem;color:#fff;letter-spacing:.15em;font-weight:400}
.header.scrolled .logo{color:var(--heading)}
.header .nav-link{font-size:.75rem;color:rgba(255,255,255,.7);letter-spacing:.08em}
.header.scrolled .nav-link{color:var(--txt)}
.header .nav-link::after{background:var(--acc)}
.header .hamburger span{background:#fff}
.header.scrolled .hamburger span{background:var(--heading)}

/* --- Hero --- */
.hero-build{min-height:100vh;position:relative;display:flex;align-items:flex-end;overflow:hidden}
.hero-build .hero-bg{filter:brightness(.35)}
.hero-build .hero-overlay{background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.1) 60%)}
.hero-build .hero-inner{position:relative;z-index:1;padding:0 clamp(2rem,5vw,4rem) clamp(4rem,8vw,6rem);width:100%}
.hero-build .hero-tag{font-family:var(--fe);font-size:.65rem;letter-spacing:.3em;color:var(--acc);text-transform:uppercase;margin-bottom:1.5rem;display:flex;align-items:center;gap:.75rem}
.hero-build .hero-tag::before{content:'';width:40px;height:1px;background:var(--acc)}
.hero-build h1{font-family:var(--ff);font-size:clamp(2.5rem,6vw,5rem);color:#fff;font-weight:400;line-height:1.3;letter-spacing:.08em}
.hero-build .hero-sub{font-size:.85rem;color:rgba(255,255,255,.4);line-height:2.2;max-width:450px;margin-top:1.5rem}
.hero-scroll-v{position:absolute;bottom:2rem;right:clamp(2rem,5vw,4rem);writing-mode:vertical-rl;font-family:var(--fe);font-size:.6rem;letter-spacing:.2em;color:rgba(255,255,255,.25);display:flex;align-items:center;gap:.75rem}
.hero-scroll-v::after{content:'';width:1px;height:50px;background:rgba(255,255,255,.15)}

/* --- Works Gallery --- */
.works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.5rem,1vw,.75rem);margin-top:2.5rem}
.works-item{position:relative;overflow:hidden;cursor:pointer}
.works-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1),filter .6s}
.works-item:hover img{transform:scale(1.06);filter:brightness(.65)}
.works-cap{position:absolute;bottom:0;left:0;right:0;padding:1.5rem;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);opacity:0;transform:translateY(10px);transition:all .4s;color:#fff}
.works-item:hover .works-cap{opacity:1;transform:none}
.works-cap h3{font-family:var(--ff);font-size:.85rem;font-weight:400;letter-spacing:.08em}
.works-cap p{font-size:.6rem;color:rgba(255,255,255,.5);margin-top:.2rem}
.wi-tall{grid-row:span 2}
.wi-std{aspect-ratio:4/3}
@media(max-width:640px){.works-grid{grid-template-columns:1fr}.wi-tall{grid-row:auto}}

/* --- Philosophy --- */
.phil-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,6rem);align-items:center}
.phil-img{position:relative;overflow:hidden}
.phil-img img{width:100%;aspect-ratio:3/4;object-fit:cover}
.phil-img::before{content:'';position:absolute;inset:12px;border:1px solid var(--acc);z-index:1;pointer-events:none;opacity:.25}
.phil-text h2{font-family:var(--ff);font-size:clamp(1.4rem,3vw,2.2rem);font-weight:400;color:var(--heading);line-height:1.8;letter-spacing:.08em;margin-bottom:1.5rem}
.phil-text p{font-size:.88rem;line-height:2.4;margin-bottom:1rem}
@media(max-width:768px){.phil-grid{grid-template-columns:1fr}}

/* --- Services --- */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:2.5rem;border:1px solid rgba(0,0,0,.06)}
.svc{padding:clamp(1.5rem,3vw,2.5rem);border-bottom:1px solid rgba(0,0,0,.06);border-right:1px solid rgba(0,0,0,.06);transition:background .4s}
.svc:hover{background:var(--bg2)}
.svc:nth-child(even){border-right:none}
.svc-num{font-family:var(--fe);font-size:2.5rem;font-weight:300;color:rgba(0,0,0,.04);margin-bottom:.75rem;line-height:1}
.svc h3{font-family:var(--ff);font-size:1rem;font-weight:500;color:var(--heading);letter-spacing:.06em;margin-bottom:.5rem}
.svc p{font-size:.78rem;line-height:1.9}
@media(max-width:640px){.svc-grid{grid-template-columns:1fr}.svc{border-right:none}}

/* --- Numbers --- */
.nums-bar{display:grid;grid-template-columns:repeat(4,1fr);background:var(--bg3);color:#fff}
.nb{padding:clamp(2rem,4vw,3rem);text-align:center;position:relative}
.nb+.nb::before{content:'';position:absolute;left:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.06)}
.nb-v{font-family:var(--fe);font-size:clamp(2rem,4vw,3rem);font-weight:300;color:var(--acc)}
.nb-l{font-size:.6rem;color:rgba(255,255,255,.25);margin-top:.25rem;letter-spacing:.08em}
@media(max-width:640px){.nums-bar{grid-template-columns:repeat(2,1fr)}.nb:nth-child(2)::before{display:none}}

/* --- Process --- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:2.5rem;counter-reset:step}
.step{padding:1.5rem;text-align:center;border-right:1px solid rgba(0,0,0,.06);counter-increment:step}
.step:last-child{border-right:none}
.step::before{content:counter(step,decimal-leading-zero);font-family:var(--fe);font-size:2.5rem;font-weight:300;color:rgba(0,0,0,.04);display:block;margin-bottom:.6rem}
.step h4{font-family:var(--ff);font-size:.82rem;font-weight:500;color:var(--heading);letter-spacing:.05em;margin-bottom:.25rem}
.step p{font-size:.68rem;line-height:1.7}
@media(max-width:768px){.process{grid-template-columns:repeat(2,1fr)}.step:nth-child(2){border-right:none}}

/* --- CTA --- */
.cta-build{background:var(--bg3);padding:clamp(5rem,10vw,8rem) 0;text-align:center;position:relative;overflow:hidden}
.cta-build::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;height:300px;border:1px solid rgba(201,169,110,.06);border-radius:50%}
.cta-build h2{font-family:var(--ff);color:#fff;font-size:clamp(1.4rem,3vw,2rem);font-weight:400;letter-spacing:.1em;margin-bottom:.75rem}
.cta-build p{color:rgba(255,255,255,.3);font-size:.82rem;margin-bottom:2rem}
.btn-cta{display:inline-flex;align-items:center;gap:.75rem;padding:.8rem 2.5rem;border:1px solid var(--acc);color:var(--acc);font-family:var(--fe);font-size:.78rem;letter-spacing:.15em;transition:all .3s}
.btn-cta:hover{background:var(--acc);color:var(--bg3);opacity:1}

/* --- Contact Form --- */
.form-input,.form-textarea,.form-select{background:var(--bg2);border:1px solid rgba(0,0,0,.06)}
.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--acc)}

/* --- SCALE Badge --- */
.scale-badge{background:var(--bg3)}
.scale-badge-dot{background:var(--acc)}

/* Page Header */
.page-header{background:var(--bg3);padding:calc(var(--hh) + 3rem) 0 3rem;color:#fff}
.page-header .section-label{color:var(--acc)}
.page-header .section-label::before{background:var(--acc)}
.page-header h1{font-family:var(--ff);color:#fff;font-size:clamp(2rem,4vw,3rem);font-weight:400;letter-spacing:.1em}
.page-header .page-subtitle{font-family:var(--fe);font-size:.7rem;color:rgba(255,255,255,.3);letter-spacing:.2em;margin-top:.4rem}
.breadcrumb a{color:var(--acc)}