/* ============================================================
   CanEnso — washi paper, warm ink, one maple accent
============================================================ */
:root{
  --paper:      #F5F0E6;
  --paper-2:    #EDE5D3;
  --ink:        #1D1A15;
  --ink-2:      #6E6553;
  --maple:      #C8102E;
  --maple-d:    #9E0C24;
  --line:       rgba(29,26,21,.16);
  --dark:       #191611;
  --darker:     #12100C;
  --cream:      #EFE8D9;
  --cream-2:    rgba(239,232,217,.62);
  --line-d:     rgba(239,232,217,.16);
  --f-disp: 'Fraunces', Georgia, serif;
  --f-body: 'Instrument Sans', 'Helvetica Neue', sans-serif;
  --f-jp:   'Noto Serif JP', serif;
  --ease:   cubic-bezier(.55,.06,.25,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  font-family:var(--f-body);
  font-size:16.5px; line-height:1.65;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
body.locked{ overflow:hidden }
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
address{ font-style:normal }
::selection{ background:var(--maple); color:var(--paper) }
:focus-visible{ outline:2px solid var(--maple); outline-offset:3px }

::-webkit-scrollbar{ width:11px }
::-webkit-scrollbar-track{ background:var(--paper-2) }
::-webkit-scrollbar-thumb{ background:var(--ink-2); border:3px solid var(--paper-2); border-radius:8px }

.container{ max-width:1240px; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem) }
.ic{ width:1.15em; height:1.15em; flex:none }
.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:2000;
  background:var(--ink); color:var(--paper); padding:.6rem 1rem;
  transition:top .25s;
}
.skip-link:focus{ top:1rem }

/* ---------- lazy-load fade-in (JS present only; images always safe) ---------- */
.js img.lz{ opacity:0; transition:opacity .9s var(--ease) }
.js img.lz.ld{ opacity:1 }

/* ---------- shared type ---------- */
h1,h2,h3{ font-family:var(--f-disp); font-weight:480; letter-spacing:-.02em }
h1 em, h2 em, .rot-word em{ font-style:italic; font-weight:420; color:var(--maple) }
.section{ padding:clamp(4.5rem,9vw,8rem) 0; scroll-margin-top:96px }
.section-alt{ background:var(--paper-2) }

.sec-head{
  display:grid; grid-template-columns:1fr; gap:1.2rem;
  margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
.kicker{
  display:flex; align-items:center; gap:.8rem;
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-2); font-weight:600;
}
.k-num{ font-family:var(--f-disp); font-style:italic; font-size:1rem; color:var(--maple); letter-spacing:0 }
.k-rule{ width:34px; height:1px; background:var(--maple) }
.sec-head h2{
  font-size:clamp(2.1rem,4.8vw,3.5rem); line-height:1.04; max-width:14ch;
}
.sec-lede{ max-width:52ch; color:var(--ink-2); font-size:1.08rem }
@media (min-width:900px){
  .sec-head{ grid-template-columns:1fr 1fr; align-items:end }
  .sec-head .kicker{ grid-column:1/-1 }
  .sec-head h2{ grid-column:1 }
  .sec-lede{ grid-column:2; justify-self:end }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.6rem; font-weight:600; font-size:.95rem;
  border-radius:999px; transition:background .3s var(--ease), color .3s, border-color .3s, transform .3s var(--ease);
}
.btn .ic{ transition:transform .3s var(--ease) }
.btn:hover .ic{ transform:translateX(4px) }
.btn-ink{ background:var(--ink); color:var(--paper) }
.btn-ink:hover{ background:var(--maple) }
.btn-ghost{ border:1px solid var(--line); color:var(--ink) }
.btn-ghost:hover{ border-color:var(--ink); background:var(--ink); color:var(--paper) }
.btn-paper{ background:var(--paper); color:var(--ink) }
.btn-paper:hover{ background:var(--maple); color:var(--paper) }

/* ---------- reveal system ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0s) }
.reveal.in{ opacity:1; transform:none }

/* ============================================================
   Topbar + header
============================================================ */
.topbar{ background:var(--ink); color:var(--cream-2); font-size:.78rem }
.topbar-in{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-block:.5rem }
.tb-item{ display:inline-flex; align-items:center; gap:.45rem; letter-spacing:.04em }
.tb-item a{ transition:color .25s }
.topbar a.tb-item:hover{ color:var(--cream) }
.tb-right{ display:flex; gap:1.4rem }
.ic{ stroke:currentColor }
.tb-item .ic{ width:.95rem; height:.95rem }
@media (max-width:860px){ .tb-mid,.tb-loc{ display:none } .topbar-in{ justify-content:center } }

.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s;
}
.site-header.scrolled{ box-shadow:0 1px 0 var(--line), 0 10px 30px -18px rgba(29,26,21,.25) }
.header-in{ display:flex; align-items:center; justify-content:space-between; gap:2rem; height:74px; position:relative }
.logo{
  font-family:var(--f-disp); font-weight:560; font-size:1.55rem; letter-spacing:-.02em;
  display:inline-flex; align-items:baseline;
}
.wm-o{ width:.74em; height:.74em; margin-left:.06em; color:var(--maple); transition:transform .6s var(--ease) }
.logo:hover .wm-o{ transform:rotate(120deg) }
.nav{ display:flex; gap:1.9rem }
.nav a{
  position:relative; font-size:.92rem; font-weight:500; padding-block:.4rem;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--maple); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav a:hover::after, .nav a.active::after{ transform:scaleX(1); transform-origin:left }
.header-cta{ padding:.7rem 1.3rem; font-size:.88rem }
.progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:var(--maple);
}

.nav-toggle{ display:none; flex-direction:column; gap:6px; padding:.6rem }
.nav-toggle span{ width:26px; height:2px; background:var(--ink); transition:transform .35s var(--ease), opacity .3s }
.nav-toggle[aria-expanded=true] span:first-child{ transform:translateY(4px) rotate(45deg) }
.nav-toggle[aria-expanded=true] span:last-child{ transform:translateY(-4px) rotate(-45deg) }
@media (max-width:1024px){
  .nav,.header-cta{ display:none }
  .nav-toggle{ display:flex }
}

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:90; background:var(--darker); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center; padding:clamp(1.5rem,6vw,3rem);
  opacity:0; transition:opacity .4s var(--ease);
}
.mobile-menu.open{ opacity:1 }
.mobile-menu nav{ display:flex; flex-direction:column; gap:.4rem }
.m-link{
  font-family:var(--f-disp); font-size:clamp(2rem,8vw,3rem);
  padding-block:.5rem; border-bottom:1px solid var(--line-d);
  display:flex; justify-content:space-between; align-items:center;
  opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.mobile-menu.open .m-link{ opacity:1; transform:none }
.m-link:hover{ color:var(--maple) }
.m-foot{ margin-top:2.5rem; display:flex; flex-direction:column; gap:.3rem; color:var(--cream-2); font-size:.92rem }
.m-foot a{ color:var(--cream) }

/* ============================================================
   Hero
============================================================ */
.hero{ position:relative; overflow:hidden }
.hero-grid{
  display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(2rem,5vw,4rem);
  align-items:center; min-height:calc(100svh - 110px); padding-block:clamp(3rem,6vw,5rem);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2); font-weight:600; margin-bottom:1.6rem;
}
.hanko-s{ width:1.15rem; height:1.15rem }
.hero h1{ font-size:clamp(2.9rem,7vw,5.5rem); line-height:.99 }
.hero-sub{ margin-top:1.6rem; max-width:46ch; color:var(--ink-2); font-size:1.1rem }
.hero-sub strong{ color:var(--ink) }

.rotator-line{ margin-top:1.4rem; display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap }
.rot-label{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); font-weight:600 }
.rotator{ display:block; position:relative; height:1.7em; overflow:hidden; min-width:16ch }
.rot-word{
  position:absolute; left:0; top:0; font-family:var(--f-disp); font-style:italic;
  font-size:1.35rem; color:var(--maple); white-space:nowrap;
  transform:translateY(115%); opacity:0;
  transition:transform .6s var(--ease), opacity .6s;
}
.rot-word.on{ transform:none; opacity:1 }
.rot-word.out{ transform:translateY(-115%); opacity:0 }

.hero-cta{ margin-top:2.2rem; display:flex; gap:.9rem; flex-wrap:wrap }

.hero-visual{ position:relative; height:clamp(320px,44vw,560px) }
.enso{ position:absolute; color:var(--ink) }
.enso svg{ width:100%; height:100%; overflow:visible }
.enso-draw{ stroke-dasharray:100 100; stroke-dashoffset:100 }
.drawn .enso-draw{ transition:stroke-dashoffset 2s cubic-bezier(.6,.05,.3,1); stroke-dashoffset:0 }
.drawn .enso-echo{ transition:stroke-dashoffset 2.5s cubic-bezier(.6,.05,.3,1) .15s; }

.hero-guides{ position:absolute; inset:6%; border:1px solid var(--line); border-radius:50% }
.hero-guides::before{
  content:""; position:absolute; left:50%; top:-6%; bottom:-6%; width:1px; background:var(--line);
}
.hero-guides::after{
  content:""; position:absolute; top:50%; left:-6%; right:-6%; height:1px; background:var(--line);
}
.enso-hero{ inset:0; animation:breathe 9s ease-in-out infinite }
@keyframes breathe{ 50%{ transform:scale(1.015) } }
.hero-hanko{
  position:absolute; top:4%; left:70%;
  opacity:0; transform:scale(.6) rotate(-14deg);
  transition:opacity .5s var(--ease) 1.9s, transform .5s var(--ease) 1.9s;
}
.drawn .hero-hanko, .drawn .phil-hanko{ opacity:1; transform:scale(1) rotate(-6deg) }
.hero-hanko svg{ width:clamp(34px,4.5vw,52px); height:auto }
.kanji{
  position:absolute; right:-.4rem; top:8%;
  writing-mode:vertical-rl; font-family:var(--f-jp); font-size:clamp(1.2rem,1.8vw,1.6rem);
  letter-spacing:.5em; color:var(--ink-2);
}
.kanji-cap{
  position:absolute; right:-.6rem; bottom:0;
  writing-mode:vertical-rl; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2);
}
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; min-height:0; padding-top:2.5rem }
  .hero-visual{ order:-1; height:64vw; max-height:340px; width:64vw; max-width:340px; justify-self:end; margin-right:-6vw }
  .kanji,.kanji-cap{ display:none }
}

.hero-meta{
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-block:1.1rem 1.6rem;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
}
.scroll-cue{ display:flex; align-items:center; gap:.7rem }
.cue-line{ width:1px; height:34px; background:var(--ink-2); position:relative; overflow:hidden }
.cue-line::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--maple); animation:cue 1.8s var(--ease) infinite;
}
@keyframes cue{ to{ top:100% } }

/* ============================================================
   Marquee
============================================================ */
.marquee{ overflow:hidden; border-block:1px solid var(--line); background:var(--paper) }
.marquee-track{ display:flex; width:max-content; animation:mq 30s linear infinite }
.marquee:hover .marquee-track{ animation-play-state:paused }
.mq-group{ display:flex; align-items:center }
.mq-group span{
  font-family:var(--f-disp); font-size:1.05rem; white-space:nowrap;
  padding:.9rem 1.4rem; color:var(--ink-2);
}
.mq-ring{ width:9px; height:9px; border:1.5px solid var(--maple); border-radius:50%; flex:none }
@keyframes mq{ to{ transform:translateX(-50%) } }

/* ============================================================
   Philosophy
============================================================ */
.phil-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2.5rem,6vw,5rem); align-items:center }
.phil-visual{ position:relative; max-width:460px }
.enso-phil{ position:relative; width:100%; aspect-ratio:1 }
.phil-hanko{
  position:absolute; top:2%; right:12%; opacity:0; transform:scale(.6) rotate(-14deg);
  transition:opacity .5s var(--ease) 2s, transform .5s var(--ease) 2s;
}
.phil-hanko svg{ width:clamp(34px,4vw,48px); height:auto }
.kanji-phil{ right:auto; left:-1.8rem; top:4% }
.etym{
  margin-top:2rem; display:grid; grid-template-columns:1fr auto 1fr; gap:1.1rem; align-items:center;
  border-top:1px solid var(--line); padding-top:1.4rem;
}
.etym-half{ display:flex; flex-direction:column; gap:.1rem }
.etym-half b{ font-family:var(--f-disp); font-size:1.5rem; font-weight:520 }
.etym-half i{ font-style:italic; font-family:var(--f-disp); color:var(--maple); font-size:.95rem }
.etym-half u{ text-decoration:none; font-size:.85rem; color:var(--ink-2) }
.etym-x{ font-family:var(--f-jp); font-size:1.9rem; color:var(--maple); border:1px solid var(--line); border-radius:50%; width:3.4rem; height:3.4rem; display:grid; place-items:center }

.principles{ display:flex; flex-direction:column }
.principle{
  display:grid; grid-template-columns:3.2rem 4.5rem 1fr; gap:1.2rem; align-items:start;
  padding:1.7rem 0; border-top:1px solid var(--line);
}
.principle:last-child{ border-bottom:1px solid var(--line) }
.pr-num{ font-family:var(--f-disp); font-style:italic; color:var(--maple); font-size:1.15rem; padding-top:.2rem }
.pr-kanji{ font-family:var(--f-jp); font-size:1.7rem; line-height:1.1 }
.principle h3{ font-size:1.3rem; margin-bottom:.3rem }
.principle p{ color:var(--ink-2); max-width:42ch }
.phil-note{ margin-top:1.8rem; font-family:var(--f-disp); font-style:italic; font-size:1.12rem; color:var(--ink); max-width:44ch }
@media (max-width:900px){ .phil-grid{ grid-template-columns:1fr } .phil-visual{ margin-inline:auto } }

/* ============================================================
   Services — editorial index
============================================================ */
.svc-list{ border-bottom:1px solid var(--line) }
.svc{ border-top:1px solid var(--line); transition:background .3s }
.svc:hover{ background:rgba(200,16,46,.035) }
.svc-head{
  width:100%; display:grid; grid-template-columns:3.4rem 1fr auto 3rem;
  align-items:center; gap:1.2rem; text-align:left; padding:1.55rem 0;
}
.svc-num{ font-family:var(--f-disp); font-style:italic; color:var(--ink-2); transition:color .3s }
.svc:hover .svc-num, .svc.open .svc-num{ color:var(--maple) }
.svc-title{
  font-family:var(--f-disp); font-size:clamp(1.35rem,2.6vw,1.9rem); font-weight:480;
  transition:transform .4s var(--ease);
}
.svc:hover .svc-title{ transform:translateX(10px) }
.svc-hint{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2) }
.svc-icon{
  width:2.6rem; height:2.6rem; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; justify-self:end;
  transition:border-color .3s, background .3s, color .3s, transform .45s var(--ease);
}
.svc:hover .svc-icon{ border-color:var(--ink) }
.svc.open .svc-icon{ transform:rotate(45deg); background:var(--ink); color:var(--paper); border-color:var(--ink) }
.svc-panel{ overflow:hidden; max-height:0; transition:max-height .55s var(--ease) }
.svc-body{ padding:0 0 2rem; display:grid; grid-template-columns:3.4rem 1fr auto; gap:1.2rem; align-items:start }
.svc-body > *{ grid-column:2 }
.svc-body p{ max-width:52ch; color:var(--ink-2) }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem }
.chips li{
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--line); border-radius:999px; padding:.35rem .8rem; color:var(--ink-2);
}
.svc-link{
  grid-column:3 !important; grid-row:1; justify-self:end;
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:var(--maple);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.svc-link:hover{ border-color:var(--maple) }
@media (max-width:860px){
  .svc-head{ grid-template-columns:2.4rem 1fr 2.6rem }
  .svc-hint{ display:none }
  .svc-body{ grid-template-columns:1fr }
  .svc-body > *{ grid-column:2 }
  .svc-link{ grid-column:2 !important; grid-row:auto; justify-self:start }
}

/* ============================================================
   Work — static showcase, no pop-ups
============================================================ */
.work-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem) }
.work-card:nth-child(even){ margin-top:clamp(2.5rem,7vw,6rem) }
.work-card figure{ position:relative; overflow:hidden; background:var(--paper-2) }
.work-card img{
  width:100%; transition:opacity .9s var(--ease), transform .9s var(--ease);
  filter:sepia(.12) saturate(.9) contrast(1.04);
}
.work-card:hover img{ transform:scale(1.03) }
.card-seal{
  position:absolute; top:1rem; right:1rem; opacity:0; transform:translateY(-8px) rotate(-8deg);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.card-seal svg{ width:38px; height:auto }
.work-card:hover .card-seal{ opacity:1; transform:rotate(-6deg) }
@media (hover:none){ .card-seal{ opacity:1; transform:rotate(-6deg) } }
.card-cap{ padding-top:1.1rem }
.card-cap h3{ font-size:1.35rem }
.wc-meta{ font-size:.85rem; color:var(--maple); margin-top:.15rem; letter-spacing:.04em }
.wc-desc{ font-size:.95rem; color:var(--ink-2); margin-top:.55rem; max-width:44ch }
.wc-chips{ margin-top:.8rem }
@media (max-width:760px){
  .work-grid{ grid-template-columns:1fr }
  .work-card:nth-child(even){ margin-top:0 }
}

/* ============================================================
   Process
============================================================ */
.proc{ position:relative; max-width:760px; padding-left:clamp(3rem,7vw,5rem); display:flex; flex-direction:column; gap:clamp(2.2rem,5vw,3.5rem) }
.proc-track{ position:absolute; left:.95rem; top:0; bottom:0; width:1px; background:var(--line) }
.proc-fill{
  position:absolute; left:.95rem; top:0; height:100%; width:1px; background:var(--maple);
  transform:scaleY(0); transform-origin:top;
}
.proc-step{ position:relative }
.pr-step-mark{
  position:absolute; left:calc(-1 * clamp(3rem,7vw,5rem) + .95rem); transform:translateX(-50%);
  top:.1rem; width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--paper-2); border:1px solid var(--line);
  display:grid; place-items:center; font-family:var(--f-jp); font-size:1.05rem;
  transition:background .5s, color .5s, border-color .5s;
}
.proc-step.in .pr-step-mark{ background:var(--maple); border-color:var(--maple); color:var(--paper) }
.pr-step-k{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--maple); font-weight:600; margin-bottom:.3rem }
.proc-step h3{ font-size:1.5rem; margin-bottom:.35rem }
.proc-step p{ color:var(--ink-2); max-width:52ch }

/* ============================================================
   Testimonials
============================================================ */
.t-wrap{ position:relative; max-width:900px }
.t-glyph{
  position:absolute; top:-4.5rem; left:-1.5rem; font-family:var(--f-disp);
  font-size:12rem; line-height:1; color:var(--maple); opacity:.14; user-select:none;
}
.t-viewport{ position:relative; min-height:15rem; transition:height .4s var(--ease) }
.t-slide{
  position:absolute; inset:0 0 auto 0;
  opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.t-slide.active{ opacity:1; transform:none; pointer-events:auto }
.t-slide blockquote{
  font-family:var(--f-disp); font-size:clamp(1.35rem,2.8vw,1.9rem);
  line-height:1.35; font-weight:420; letter-spacing:-.01em; max-width:26ch;
}
.t-slide figcaption{
  margin-top:1.6rem; display:grid; grid-template-columns:auto 1fr; column-gap:1rem; align-items:center;
}
.t-stars{ grid-row:1/3; display:flex; gap:.15rem; color:var(--maple) }
.t-stars .star{ width:.95rem; height:.95rem }
.t-slide figcaption strong{ font-size:1rem }
.t-slide figcaption span:not(.t-stars){ display:block; font-size:.88rem; color:var(--ink-2) }
.t-seal{ position:absolute; right:0; bottom:0; transform:rotate(-6deg) }
.t-seal svg{ width:44px; height:auto }
.t-controls{ margin-top:2.2rem; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:1.2rem }
.t-btn{
  width:3rem; height:3rem; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; transition:background .3s, color .3s, border-color .3s;
}
.t-btn:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.t-index{ font-size:.85rem; letter-spacing:.14em; color:var(--ink-2); display:flex; align-items:center; gap:1rem }
.t-bar{ display:inline-block; width:90px; height:2px; background:var(--line); overflow:hidden }
.t-bar span{ display:block; height:100%; width:100%; background:var(--maple); transform:scaleX(0); transform-origin:left }
.t-bar span.run{ animation:tprog 6.5s linear forwards }
@keyframes tprog{ to{ transform:scaleX(1) } }

/* ============================================================
   Contact
============================================================ */
.contact{ background:var(--dark); color:var(--cream) }
.contact .kicker{ color:var(--cream-2) }
.contact-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:clamp(2.5rem,5vw,4rem) }
.contact h2{ font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.02 }
.enso-contact{ position:relative; width:clamp(120px,16vw,190px); aspect-ratio:1; color:var(--cream); flex:none }
.enso-contact .contact-stroke{ stroke:var(--cream) }
.enso-contact .enso-draw{ transition:stroke-dashoffset 1.8s cubic-bezier(.6,.05,.3,1) }
.enso-contact.closing .enso-draw{ transition:stroke-dashoffset 1.4s cubic-bezier(.5,.05,.3,1), stroke .5s .9s }
.enso-contact.closing .contact-stroke{ stroke:var(--maple) }
@media (max-width:760px){ .contact-head{ flex-direction:column; align-items:flex-start } }

.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2.5rem,6vw,5rem) }
.contact-lede{ color:var(--cream-2); font-size:1.08rem; max-width:44ch; margin-bottom:2rem }
.c-list{ display:flex; flex-direction:column; gap:1.3rem }
.c-list li{ display:flex; gap:1rem; align-items:flex-start }
.c-list .ic{ width:1.3rem; height:1.3rem; color:var(--maple); margin-top:.2rem }
.c-list b{ display:block; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-2); margin-bottom:.15rem }
.c-list a{ border-bottom:1px solid var(--line-d); transition:color .3s, border-color .3s }
.c-list a:hover{ color:var(--maple); border-color:var(--maple) }
.palette-note{ margin-top:2.2rem; display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-2) }
.palette-note span{ display:inline-flex; align-items:center; gap:.45rem }
.palette-note i{ width:.85rem; height:.85rem; border-radius:2px; display:inline-block }

.contact-form{ display:flex; flex-direction:column; gap:1.5rem }
.field{ display:flex; flex-direction:column; gap:.45rem; position:relative }
.field label{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-2); font-weight:600 }
.field input,.field select,.field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--line-d);
  color:var(--cream); font:inherit; padding:.65rem 0; border-radius:0;
  transition:border-color .3s;
}
.field textarea{ resize:vertical; min-height:6rem }
.field input::placeholder,.field textarea::placeholder{ color:rgba(239,232,217,.35) }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--maple) }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23EFE8D9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .2rem center;
}
.field select option{ color:var(--ink) }
.f-error{ display:none; font-size:.82rem; color:var(--maple) }
.field.invalid input,.field.invalid textarea{ border-color:var(--maple) }
.field.invalid .f-error{ display:block }
.form-note{ font-size:.82rem; color:var(--cream-2) }
.form-success{
  font-size:.95rem; color:var(--cream);
  border-left:3px solid var(--maple); padding:.7rem 1rem;
  background:rgba(200,16,46,.08); border-radius:0 4px 4px 0;
}
.contact-form .btn{ align-self:flex-start }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr } }

/* ============================================================
   Footer
============================================================ */
.footer{ background:var(--darker); color:var(--cream); padding:clamp(3.5rem,7vw,5.5rem) 0 2rem }
.foot-wordmark{
  font-family:var(--f-disp); font-weight:560; letter-spacing:-.03em;
  font-size:clamp(3.4rem,12vw,9.5rem); line-height:1;
  display:inline-flex; align-items:baseline;
}
.foot-wordmark .wm-o{ color:var(--maple) }
.foot-tag{ margin-top:.8rem; color:var(--cream-2); font-size:1.05rem }
.kanji-inline{ font-family:var(--f-jp); color:var(--maple); margin-left:.5rem }
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:clamp(2rem,5vw,4rem);
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:2.5rem; border-top:1px solid var(--line-d);
}
.foot-grid h4{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-2); margin-bottom:1.1rem; font-family:var(--f-body); font-weight:600 }
.foot-grid ul{ display:flex; flex-direction:column; gap:.55rem }
.foot-grid a{ color:var(--cream-2); transition:color .3s; font-size:.95rem }
.foot-grid a:hover{ color:var(--cream) }
.foot-grid address{ color:var(--cream-2); font-size:.95rem; line-height:1.7; margin-bottom:1rem }
.foot-contact a{ border-bottom:1px solid var(--line-d) }
.socials{ display:flex; gap:.7rem; margin-top:1.3rem }
.socials a{
  width:2.5rem; height:2.5rem; border:1px solid var(--line-d); border-radius:50%;
  display:grid; place-items:center; color:var(--cream-2);
  transition:border-color .3s, color .3s, background .3s;
}
.socials a:hover{ border-color:var(--maple); color:var(--paper); background:var(--maple) }
.socials svg{ width:1.15rem; height:1.15rem }
.foot-bottom{
  margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--line-d);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.82rem; color:var(--cream-2);
}
.foot-made{ display:inline-flex; align-items:center; gap:.5rem }
.foot-made .hanko-s{ width:1rem; height:1rem }
.foot-made a{ color:var(--cream); border-bottom:1px solid var(--line-d) }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr } }

/* ============================================================
   To-top, grain
============================================================ */
.to-top{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:400;
  width:3rem; height:3rem; border-radius:50%;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  display:grid; place-items:center;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .35s, transform .35s var(--ease), background .3s, color .3s;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto }
.to-top:hover{ background:var(--ink); color:var(--paper) }

.grain{
  position:fixed; inset:-50px; z-index:450; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   Reduced motion
============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .reveal{ opacity:1; transform:none }
  .enso-draw{ stroke-dashoffset:0 }
  .hero-hanko,.phil-hanko{ opacity:1; transform:rotate(-6deg) }
  .js img.lz{ opacity:1 }
}