/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:var(--paper);
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 18% 20%,rgba(176,141,87,.10),transparent 45%),
    radial-gradient(circle at 82% 78%,rgba(176,141,87,.08),transparent 45%);
}
.hero-inner{position:relative;text-align:center;padding-top:40px;}
.hero-eyebrow{
  font-family:var(--eng);font-style:italic;color:var(--gold);
  letter-spacing:.3em;font-size:1rem;margin-bottom:46px;display:block;
  position:relative;z-index:2;
}
.hero-sig{
  width:min(620px,76vw);
  margin:0 auto 36px;
  display:block;
  overflow:visible;
}
.hero-sig path{
  fill:none;
  stroke:var(--ink);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.hero-sig path.is-ready{
  animation:draw-sig 1.8s cubic-bezier(.65,0,.35,1) forwards .3s,
            ink-color 1.8s linear forwards .3s;
}
@keyframes draw-sig{to{stroke-dashoffset:0;}}
@keyframes ink-color{
  0%{stroke:var(--ink);}
  50%{stroke:var(--ink);}
  100%{stroke:var(--gold-deep);}
}
@media(prefers-reduced-motion:reduce){
  .hero-sig path.is-ready{animation:none;stroke-dashoffset:0;stroke:var(--gold-deep);}
}
.hero h1{
  font-size:clamp(1.6rem,3vw,2rem);
  letter-spacing:.25em;color:var(--ink-soft);font-weight:400;
  font-family:var(--sans);
  opacity:0;animation:fadein 1s ease forwards 1.9s;
}
@keyframes fadein{to{opacity:1;}}
.hero-lede{
  margin-top:26px;font-size:.92rem;color:var(--ink-soft);
  opacity:0;animation:fadein 1s ease forwards 2.2s;
}
.hero-scroll{
  position:absolute;bottom:46px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;animation:fadein 1s ease forwards 2.5s;
}
.hero-scroll .ln{width:1px;height:50px;background:linear-gradient(var(--gold),transparent);animation:scrolldown 2.2s ease infinite;}
@keyframes scrolldown{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}50.01%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}
.hero-scroll span{font-size:.68rem;letter-spacing:.2em;color:var(--gold);font-family:var(--eng);}

/* ===== Philosophy / about strip ===== */
.philosophy{background:var(--paper-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.philo-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center;}
.philo-grid .num{font-family:var(--eng);font-style:italic;color:var(--gold);font-size:1rem;letter-spacing:.2em;}
.philo-grid h2{font-size:2rem;line-height:1.7;margin:18px 0 28px;}
.philo-grid h2 .accent{color:var(--gold);}
.philo-grid p{font-size:.92rem;}
.philo-points{display:flex;flex-direction:column;gap:36px;}
.philo-point{display:flex;gap:24px;padding-bottom:30px;border-bottom:1px solid var(--line);}
.philo-point:last-child{border-bottom:none;padding-bottom:0;}
.philo-point .pn{font-family:var(--serif);font-size:1.6rem;color:var(--gold-bright);flex-shrink:0;width:50px;}
.philo-point h4{font-size:1.02rem;margin-bottom:10px;letter-spacing:.05em;}
.philo-point p{font-size:.85rem;margin:0;}

/* ===== Service ===== */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);outline:1px solid var(--line);}
.service-card{
  background:var(--paper);padding:54px 38px;text-align:center;
  transition:background .4s ease;
}
.service-card:hover{background:var(--paper-deep);}
.service-card .ic{
  width:54px;height:54px;margin:0 auto 28px;
  border:1px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.service-card .ic svg{width:24px;height:24px;stroke:var(--gold);}
.service-card h3{font-size:1.1rem;margin-bottom:16px;letter-spacing:.06em;}
.service-card p{font-size:.84rem;}

/* ===== Works marquee (home) ===== */
.works-marquee{
  overflow:hidden;
  position:relative;
  margin:0 calc(-1 * (50vw - var(--max)/2));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
@media(max-width:1240px){
  .works-marquee{margin:0;}
}
.works-track{
  display:flex;
  gap:24px;
  width:max-content;
  animation:marquee-scroll 38s linear infinite;
}
.works-marquee:hover .works-track{animation-play-state:paused;}
@keyframes marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.work-tile{
  position:relative;overflow:hidden;cursor:pointer;
  width:280px;aspect-ratio:4/5;flex-shrink:0;
}
.work-tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.25,1,.5,1);filter:saturate(.85) contrast(1.02);}
.work-tile:hover img{transform:scale(1.08);}
.work-tile .tile-frame{position:absolute;inset:10px;border:1px solid rgba(255,255,255,.0);transition:border-color .5s ease;pointer-events:none;}
.work-tile:hover .tile-frame{border-color:rgba(232,226,213,.7);}
.work-tile .tile-info{
  position:absolute;left:0;right:0;bottom:0;padding:24px 20px;
  background:linear-gradient(transparent,rgba(28,28,26,.82));
  color:var(--paper);
  transform:translateY(8px);opacity:.92;transition:transform .4s ease;
}
.work-tile .tile-info .kan{font-family:var(--serif);color:var(--gold-bright);font-size:.78rem;letter-spacing:.15em;display:block;margin-bottom:6px;}
.work-tile .tile-info h4{color:var(--paper);font-size:.95rem;letter-spacing:.04em;}
.works-more{text-align:center;margin-top:64px;}

@media(prefers-reduced-motion:reduce){
  .works-track{animation:none;}
}

/* ===== Voice / testimonial ===== */
.voice{background:var(--ink);color:var(--gold-pale);text-align:center;position:relative;}
.voice::before,.voice::after{
  content:'"';font-family:var(--serif);font-size:6rem;color:var(--gold);opacity:.25;
  position:absolute;line-height:1;
}
.voice::before{top:60px;left:50%;transform:translateX(-160px);}
.voice::after{bottom:30px;left:50%;transform:translateX(140px) rotate(180deg);}
.voice blockquote{
  max-width:720px;margin:0 auto 30px;font-family:var(--serif);
  font-size:1.5rem;line-height:2;color:var(--paper);font-weight:500;
}
.voice cite{font-style:normal;font-size:.82rem;letter-spacing:.1em;color:var(--gold-bright);}

/* ===== Process (home short) ===== */
.flow{display:flex;justify-content:space-between;gap:20px;position:relative;}
.flow::before{content:'';position:absolute;top:30px;left:6%;right:6%;height:1px;background:var(--line);}
.flow-step{flex:1;text-align:center;position:relative;}
.flow-step .fn{
  width:60px;height:60px;border-radius:50%;background:var(--paper);
  border:1px solid var(--gold);margin:0 auto 24px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--eng);font-style:italic;color:var(--gold);font-size:1.1rem;
  position:relative;z-index:2;
}
.flow-step h4{font-size:.95rem;margin-bottom:10px;}
.flow-step p{font-size:.8rem;}

/* ===== Flow branch (分岐) ===== */
.flow-branch{margin-top:70px;}
.branch-label{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin-bottom:46px;
  font-size:.8rem;letter-spacing:.08em;color:var(--ink-soft);
}
.branch-label .bl-line{height:1px;width:60px;background:var(--line);}
.branch-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);outline:1px solid var(--line);
  max-width:880px;margin:0 auto;
  position:relative;
}
.branch-grid::before{
  content:'';position:absolute;left:50%;top:-46px;width:1px;height:46px;
  background:linear-gradient(var(--gold),transparent);transform:translateX(-50%);
}
.branch-card{
  background:var(--paper);padding:46px 40px;text-align:center;
  transition:background .4s ease;
}
.branch-card:hover{background:var(--paper-deep);}
.branch-card.is-alt{background:var(--paper);}
.branch-card.is-alt:hover{background:var(--paper-deep);}
.bc-tag{
  display:inline-block;font-family:var(--eng);font-style:italic;
  color:var(--gold);font-size:.85rem;letter-spacing:.08em;
  margin-bottom:18px;
}
.branch-card h4{font-size:1.05rem;margin-bottom:14px;letter-spacing:.04em;}
.branch-card p{font-size:.83rem;margin:0;}

@media(max-width:900px){
  .branch-grid{grid-template-columns:1fr;}
  .branch-label{flex-direction:column;gap:10px;}
  .branch-label .bl-line{display:none;}
}

/* ===== CTA ===== */
.cta-band{
  background:
    radial-gradient(ellipse at center,rgba(176,141,87,.12),transparent 70%),
    var(--paper-deep);
  text-align:center;border-top:1px solid var(--line);
}
.cta-band h2{font-size:2rem;margin-bottom:20px;}
.cta-band p{margin-bottom:42px;}
.cta-actions{display:flex;gap:20px;justify-content:center;}

@media(max-width:900px){
  .philo-grid{grid-template-columns:1fr;gap:50px;}
  .service-grid{grid-template-columns:1fr;}
  .work-tile{width:220px;}
  .flow{flex-direction:column;gap:40px;}
  .flow::before{display:none;}
  .cta-actions{flex-direction:column;align-items:center;}
}