/* =============================================
   DEZAIT v2 — Shared Design System
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500&family=Shippori+Mincho:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root {
  --ink:      #1a1814;
  --paper:    #faf8f5;
  --warm:     #f4efe6;
  --warm2:    #ede7db;
  --mid:      #6b6760;
  --light:    #bfbab0;
  --rule:     #e0dbd0;
  --accent:   #c4874e;
  --accent2:  #d9a06a;
  --al:       #f0e3d0;
  --serif:    'Shippori Mincho','Noto Serif JP',serif;
  --sans:     'DM Sans',sans-serif;
  --max:      1200px;
  --gutter:   clamp(1.25rem, 4vw, 2.75rem);
  --eout:     cubic-bezier(.16,1,.3,1);
}

html { scroll-behavior: smooth }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* GRAIN */
.grain {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9990; opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* CURSOR */
.cring {
  position: fixed; width: 36px; height: 36px;
  border: 1.5px solid var(--accent); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .3s var(--eout), height .3s var(--eout), border-color .25s, background .3s;
  will-change: left,top;
}
.cdot {
  position: fixed; width: 5px; height: 5px;
  background: var(--ink); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  will-change: left,top;
}
.cring.hov { width: 56px; height: 56px; background: rgba(196,135,78,.06); border-color: var(--accent2); }
.cring.click { width: 28px; height: 28px; }
@media(pointer:coarse){.cring,.cdot{display:none}}

/* PROGRESS */
.pbar {
  position: fixed; top: 0; left: 0; height: 1.5px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  z-index: 500; width: 0; transition: width .08s linear;
  box-shadow: 0 0 8px rgba(196,135,78,.4);
}

/* PAGE FADE */
.page-fade {
  position: fixed; inset: 0; background: var(--paper);
  z-index: 9998; pointer-events: none; opacity: 0; transition: opacity .4s ease;
}
.page-fade.out { opacity: 1; pointer-events: all; }

/* REVEAL */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--eout), transform .9s var(--eout); }
.reveal.visible { opacity: 1; transform: none; }
.rd1{transition-delay:.1s} .rd2{transition-delay:.2s} .rd3{transition-delay:.3s} .rd4{transition-delay:.44s}

/* NAV */
nav.main {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(250,248,245,0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
  border-bottom: 1px solid transparent;
  transition: background .5s, backdrop-filter .5s, border-color .5s, box-shadow .5s;
}
nav.main.sc {
  background: rgba(250,248,245,.95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-color: var(--rule); box-shadow: 0 1px 40px rgba(26,24,20,.05);
}
nav.main.solid { background: rgba(250,248,245,.97); border-color: var(--rule); }
.nav-inner {
  max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter); height: 68px;
}
.nl { text-decoration: none; display: flex; align-items: center; }
.nls { font-weight: 300; font-size: 10px; color: var(--light); letter-spacing: .1em; }
.nav-logo { height: 28px; width: auto; display: block; }
.footer-logo { height: 22px; width: auto; display: block; margin-bottom: 5px; }
.nlinks { display: flex; list-style: none; }
.nlinks a {
  font-size: 11.5px; font-weight: 400; color: var(--mid); text-decoration: none;
  letter-spacing: .1em; padding: 0 1.15rem; height: 68px; display: flex; align-items: center;
  position: relative; transition: color .2s;
}
.nlinks a::after {
  content: ''; position: absolute; bottom: 0; left: 1.15rem; right: 1.15rem;
  height: 1.5px; background: var(--accent); border-radius: 1px;
  transform: scaleX(0); transition: transform .35s var(--eout);
}
.nlinks a:hover, .nlinks a.active { color: var(--ink); }
.nlinks a:hover::after, .nlinks a.active::after { transform: scaleX(1); }
.ncta {
  font-size: 11.5px; font-weight: 500; letter-spacing: .12em;
  color: var(--paper); background: var(--ink); padding: 11px 24px;
  border: none; cursor: pointer; transition: background .3s;
  text-decoration: none; border-radius: 2px; position: relative; overflow: hidden;
}
.ncta::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: translateX(-100%); transition: transform .35s var(--eout); }
.ncta:hover::after { transform: translateX(0); }
.ncta span { position: relative; z-index: 1; }
.hbg { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; }
.hbg span { display: block; width: 22px; height: 1px; background: var(--ink); transition: all .3s; }
.hbg.open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
.hbg.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hbg.open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }
nav.mob {
  display: none; position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
  z-index: 190; background: var(--paper); flex-direction: column;
  padding: 2rem var(--gutter); border-top: 1px solid var(--rule); overflow-y: auto;
}
nav.mob.open { display: flex; }
nav.mob a { font-size: 1.8rem; font-family: var(--serif); color: var(--ink); text-decoration: none; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); letter-spacing: .04em; transition: color .2s; }
nav.mob a:hover { color: var(--accent); }
nav.mob .mcta { margin-top: 2rem; background: var(--ink); color: var(--paper); padding: 1.1rem; text-align: center; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .1em; border-radius: 2px; transition: background .3s; }
nav.mob .mcta:hover { background: var(--accent); color: var(--paper); }

/* WRAP / SECTIONS */
.wrap { max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; width: 100%; padding: 0 var(--gutter); }
.sec { padding: 6rem 0; border-bottom: 1px solid var(--rule); }
.sec .wrap { padding: 0 var(--gutter); }

/* EYEBROW / HEADINGS */
.ey {
  font-size: 10px; font-weight: 400; letter-spacing: .28em; color: var(--accent);
  margin-bottom: 1.25rem; display: flex; align-items: center; gap: 10px; text-transform: uppercase;
}
.ey::before { content: ''; display: block; width: 20px; height: 1px; background: var(--accent); border-radius: 1px; }
.sh2 { font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 3.2rem); font-weight: 400; letter-spacing: .04em; line-height: 1.38; color: var(--ink); margin-bottom: 1.1rem; word-break: keep-all; }
.sh2 em { font-style: italic; font-weight: 300; color: var(--accent); opacity: .88; display: block; }
.sl { font-size: 15px; line-height: 2.05; color: var(--mid); max-width: 560px; }

/* PAGE HEADER (inner pages) */
.page-header {
  padding: 130px var(--gutter) 5.5rem; border-bottom: 1px solid var(--rule);
  background: var(--warm); position: relative; overflow: hidden;
}
.page-header-inner { max-width: var(--max); }
.page-header .ey { margin-bottom: 1rem; }
.page-header h1 { font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4.2rem); font-weight: 400; letter-spacing: .04em; line-height: 1.28; color: var(--ink); margin-bottom: 1.25rem; }
.page-header h1 em { font-style: italic; font-weight: 300; color: var(--accent); opacity: .85; display: block; }
.page-header .lead { font-size: 15.5px; line-height: 2.05; color: var(--mid); max-width: 540px; }
.page-header-bg { position: absolute; right: -3vw; top: 50%; transform: translateY(-50%); font-family: var(--serif); font-size: 30vw; font-weight: 300; color: var(--ink); opacity: .022; pointer-events: none; user-select: none; line-height: 1; }

/* BUTTONS */
.bp { font-size: 12.5px; font-weight: 500; letter-spacing: .12em; color: var(--paper); background: var(--ink); padding: 15px 32px; border: none; cursor: pointer; text-decoration: none; display: inline-block; border-radius: 2px; position: relative; overflow: hidden; }
.bp::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: translateX(-100%); transition: transform .38s var(--eout); }
.bp:hover::after { transform: translateX(0); }
.bp span { position: relative; z-index: 1; }
.bp-outline { font-size: 12.5px; font-weight: 500; letter-spacing: .12em; color: var(--ink); background: transparent; padding: 14px 30px; border: 1px solid var(--ink); cursor: pointer; text-decoration: none; display: inline-block; border-radius: 2px; transition: background .25s, color .25s; }
.bp-outline:hover { background: var(--ink); color: var(--paper); }

/* BREADCRUMB */
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: 11px; color: var(--light); letter-spacing: .06em; margin-bottom: 1.75rem; }
.breadcrumb a { color: var(--light); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb-sep { opacity: .4; }

/* CTA BANNER */
.cta-banner { background: var(--ink); padding: 7rem var(--gutter); text-align: center; position: relative; overflow: hidden; }
.cta-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 50% 110%, rgba(196,135,78,.2) 0%, transparent 70%); pointer-events: none; }
.cta-banner-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--serif); font-size: 22vw; font-weight: 300; color: rgba(250,248,245,.02); pointer-events: none; user-select: none; white-space: nowrap; letter-spacing: -.04em; }
.cta-banner h2 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 400; color: var(--paper); margin-bottom: 1.1rem; position: relative; letter-spacing: .04em; line-height: 1.38; }
.cta-banner h2 em { font-style: italic; color: var(--accent); opacity: .88; }
.cta-banner p { font-size: 15px; line-height: 2; color: rgba(250,248,245,.52); max-width: 460px; margin: 0 auto 2.75rem; position: relative; }
.cta-banner .bp { background: var(--accent); position: relative; }
.cta-banner .bp::after { background: rgba(255,255,255,.15); }

/* FOOTER */
footer { background: var(--paper); }
.footer-inner { max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 2.5rem var(--gutter); border-top: 1px solid var(--rule); }
.fl2 { font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: .16em; }
.ft { font-size: 11px; color: var(--light); letter-spacing: .1em; margin-top: 4px; }
.flinks { display: flex; gap: 2rem; }
.flinks a { font-size: 11.5px; color: var(--mid); text-decoration: none; letter-spacing: .06em; transition: color .2s; }
.flinks a:hover { color: var(--accent); }
.fcp { font-size: 11px; color: var(--light); letter-spacing: .05em; }

/* RESPONSIVE */
@media(max-width:768px) {
  .nlinks,.ncta { display: none; }
  .hbg { display: flex; }
  .footer-inner { flex-direction: column; gap: 1.5rem; text-align: center; }
  .flinks { flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
  .page-header { padding: 100px var(--gutter) 3.5rem; }
  .page-header-bg { display: none; }
}