/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --c-bg:#0e0d0b;
  --c-surface:#161512;
  --c-border:#2a2825;
  --c-text:#e8e4dd;
  --c-text-muted:#8a857c;
  --c-accent:#c49a5c;
  --c-accent-hover:#d4aa6c;
  --font-sans:"Helvetica Neue",Helvetica,"Noto Sans JP",sans-serif;
  --font-serif:Georgia,"Noto Serif JP",serif;
  --max-w:1200px;
  --nav-h:72px;
}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:var(--font-sans);
  background:var(--c-bg);
  color:var(--c-text);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

/* ===== UTILITY ===== */
.section-num{
  display:inline-block;
  font-size:.75rem;
  letter-spacing:.12em;
  color:var(--c-accent);
  margin-bottom:1.25rem;
}
.sp-br{display:none}

/* ===== BUTTONS ===== */
.btn{
  display:inline-block;
  padding:.85rem 2.2rem;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--c-border);
  transition:border-color .3s,background .3s,color .3s;
}
.btn--ghost{
  border-color:var(--c-text-muted);
  color:var(--c-text);
}
.btn--ghost:hover{border-color:var(--c-accent);color:var(--c-accent)}
.btn--solid{
  background:var(--c-accent);
  border-color:var(--c-accent);
  color:var(--c-bg);
}
.btn--solid:hover{background:var(--c-accent-hover);border-color:var(--c-accent-hover)}

/* ===== NAV ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  background:rgba(14,13,11,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--c-border);
}
.nav__inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 2rem;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav__logo{
  font-size:1rem;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1.2;
}
.nav__links{display:flex;align-items:center;gap:2.5rem}
.nav__links a{
  font-size:.8rem;
  letter-spacing:.06em;
  color:var(--c-text-muted);
  transition:color .3s;
}
.nav__links a:hover{color:var(--c-text)}
.nav__cta{
  padding:.55rem 1.4rem;
  border:1px solid var(--c-border);
  color:var(--c-text)!important;
  transition:border-color .3s,color .3s;
}
.nav__cta:hover{border-color:var(--c-accent);color:var(--c-accent)!important}

/* ===== HERO ===== */
.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  max-width:var(--max-w);
  margin:0 auto;
  padding:calc(var(--nav-h) + 3rem) 2rem 4rem;
  gap:3rem;
}
.hero__content{max-width:540px}
.hero__label{
  font-size:.75rem;
  letter-spacing:.14em;
  color:var(--c-text-muted);
  margin-bottom:2rem;
  text-transform:uppercase;
}
.hero__title{
  font-family:var(--font-serif);
  font-size:clamp(2.4rem,5vw,3.8rem);
  font-weight:400;
  line-height:1.2;
  margin-bottom:1.8rem;
}
.hero__title em{
  font-style:italic;
  color:var(--c-accent);
}
.hero__desc{
  font-size:.95rem;
  color:var(--c-text-muted);
  margin-bottom:2.5rem;
  line-height:1.8;
}
.hero__image{
  width:100%;
  aspect-ratio:3/4;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  position:relative;
  overflow:hidden;
}
.hero__image::after{
  content:"IMAGE 1200×1600";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
  letter-spacing:.1em;
  color:var(--c-text-muted);
  opacity:.5;
}

/* ===== SERVICES ===== */
.services{
  max-width:var(--max-w);
  margin:0 auto;
  padding:6rem 2rem;
  border-top:1px solid var(--c-border);
}
.services__head{margin-bottom:3.5rem}
.services__head h2{
  font-family:var(--font-serif);
  font-size:clamp(1.8rem,3vw,2.4rem);
  font-weight:400;
}
.services__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--c-border);
  border:1px solid var(--c-border);
}
.card{
  background:var(--c-bg);
  padding:2.5rem 2rem;
  transition:background .3s;
}
.card:hover{background:var(--c-surface)}
.card__num{
  font-size:.7rem;
  color:var(--c-accent);
  letter-spacing:.1em;
  display:block;
  margin-bottom:1rem;
}
.card__title{
  font-family:var(--font-serif);
  font-size:1.2rem;
  font-weight:400;
  margin-bottom:.75rem;
}
.card__desc{
  font-size:.85rem;
  color:var(--c-text-muted);
  line-height:1.7;
}

/* ===== ABOUT ===== */
.about{
  max-width:var(--max-w);
  margin:0 auto;
  padding:6rem 2rem;
  display:grid;
  grid-template-columns:5fr 6fr;
  gap:4rem;
  align-items:center;
  border-top:1px solid var(--c-border);
}
.about__image{
  width:100%;
  aspect-ratio:9/11;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  position:relative;
  overflow:hidden;
}
.about__image::after{
  content:"IMAGE 900×1100";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
  letter-spacing:.1em;
  color:var(--c-text-muted);
  opacity:.5;
}
.about__content h2{
  font-family:var(--font-serif);
  font-size:clamp(1.8rem,3vw,2.4rem);
  font-weight:400;
  margin-bottom:1.5rem;
}
.about__text{
  font-size:.95rem;
  color:var(--c-text-muted);
  line-height:1.85;
  margin-bottom:2.5rem;
}
.about__stats{
  display:flex;
  gap:3rem;
}
.stat__num{
  display:block;
  font-family:var(--font-serif);
  font-size:2rem;
  color:var(--c-accent);
  line-height:1;
  margin-bottom:.35rem;
}
.stat__label{
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--c-text-muted);
}

/* ===== CTA ===== */
.cta{
  border-top:1px solid var(--c-border);
  padding:6rem 2rem;
  text-align:center;
}
.cta__inner{max-width:480px;margin:0 auto}
.cta h2{
  font-family:var(--font-serif);
  font-size:clamp(2rem,4vw,2.8rem);
  font-weight:400;
  margin-bottom:1.2rem;
}
.cta p{
  font-size:.9rem;
  color:var(--c-text-muted);
  margin-bottom:2.5rem;
  line-height:1.8;
}

/* ===== FOOTER ===== */
.footer{
  border-top:1px solid var(--c-border);
  padding:2rem;
}
.footer__inner{
  max-width:var(--max-w);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.footer__copy{
  font-size:.75rem;
  color:var(--c-text-muted);
}
.footer__links{display:flex;gap:1.5rem}
.footer__links a{
  font-size:.75rem;
  color:var(--c-text-muted);
  transition:color .3s;
}
.footer__links a:hover{color:var(--c-accent)}

/* ===== SCROLL REVEAL ===== */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .sp-br{display:inline}
  .nav__links{gap:1.2rem}
  .nav__links a:not(.nav__cta){display:none}
  .hero{
    grid-template-columns:1fr;
    padding-top:calc(var(--nav-h) + 2rem);
    text-align:left;
  }
  .hero__image{order:-1;aspect-ratio:4/3}
  .services__grid{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;gap:2.5rem}
  .about__image{aspect-ratio:4/3}
  .about__stats{gap:1.5rem}
}