/* NINEWORKS — Branding Process / 2026-08-20 */

body.branding-page{
  --bp-ink:#151515;
  --bp-muted:#777;
  --bp-faint:#a8a8a3;
  --bp-line:#e4e4e0;
  --bp-soft:#f5f5f2;
  --bp-paper:#fff;
}

/* Hero */
body.branding-page .branding-process-hero{
  display:grid!important;
  grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr)!important;
  gap:clamp(56px,7vw,120px)!important;
  align-items:end!important;
  min-height:clamp(520px,68vh,760px)!important;
  padding-top:clamp(110px,9vw,150px)!important;
  padding-bottom:clamp(74px,7vw,108px)!important;
  border-bottom:1px solid var(--bp-line)!important;
}
body.branding-page .branding-process-hero__label{align-self:start;padding-top:10px}
body.branding-page .branding-process-hero .eyebrow{margin-bottom:0!important}
body.branding-page .branding-process-hero__body{max-width:930px}
body.branding-page .branding-process-hero .page-title{
  max-width:13ch!important;
  margin:0!important;
  font-size:clamp(48px,5.5vw,78px)!important;
  font-weight:470!important;
  line-height:1.06!important;
  letter-spacing:-.055em!important;
  word-break:keep-all!important;
  text-wrap:balance!important;
}
body.branding-page .branding-process-hero__lead{
  max-width:760px!important;
  margin-top:34px!important;
  color:#343434!important;
  font-size:clamp(18px,1.55vw,22px)!important;
  line-height:1.72!important;
  letter-spacing:-.025em!important;
  word-break:keep-all!important;
  text-wrap:pretty!important;
}
body.branding-page .branding-process-hero__scroll{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:44px;
  padding-bottom:5px;
  border-bottom:1px solid currentColor;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
}
body.branding-page .branding-process-hero__scroll span{font-size:16px;line-height:1}

/* Intro */
body.branding-page .branding-process-intro{
  padding-top:clamp(84px,8vw,128px)!important;
  padding-bottom:clamp(84px,8vw,128px)!important;
  border-bottom:1px solid var(--bp-line);
}
body.branding-page .branding-process-intro__grid{
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);
  gap:clamp(56px,7vw,120px);
  align-items:start;
}
body.branding-page .branding-process-intro__body{max-width:900px}
body.branding-page .branding-process-intro h2{
  max-width:18ch;
  margin:0;
  font-size:clamp(32px,3.5vw,52px);
  font-weight:480;
  line-height:1.14;
  letter-spacing:-.052em;
  text-wrap:balance;
}
body.branding-page .branding-process-intro__copy{
  max-width:720px;
  margin-top:28px!important;
  color:#585858;
  font-size:17px;
  line-height:1.76;
  text-wrap:pretty;
}
body.branding-page .branding-process-index{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:58px;
  border-top:1px solid #cfcfcb;
  border-left:1px solid var(--bp-line);
}
body.branding-page .branding-process-index a{
  position:relative;
  min-height:118px;
  padding:20px 22px;
  border-right:1px solid var(--bp-line);
  border-bottom:1px solid var(--bp-line);
  transition:background .24s ease,color .24s ease;
}
body.branding-page .branding-process-index a:hover{background:var(--bp-soft)}
body.branding-page .branding-process-index small{
  display:block;
  color:#8a8a8a;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
}
body.branding-page .branding-process-index strong{
  display:block;
  margin-top:28px;
  font-size:15px;
  font-weight:520;
  line-height:1.45;
}
body.branding-page .branding-process-index span{
  position:absolute;
  right:18px;
  bottom:18px;
  color:#aaa;
  font-size:14px;
  transition:transform .25s ease,color .25s ease;
}
body.branding-page .branding-process-index a:hover span{color:#111;transform:translateY(3px)}

/* Process layout */
body.branding-page .brand-process{background:var(--bp-paper)}
body.branding-page .brand-process__layout{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:clamp(52px,6vw,104px);
  align-items:start;
}
body.branding-page .brand-process__side{
  position:sticky;
  top:calc(var(--header-height,104px) + 34px);
  padding:74px 0 70px;
}
body.branding-page .brand-process__side-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-bottom:28px;
  color:#8d8d89;
  font-size:11px;
  font-weight:600;
  letter-spacing:.09em;
}
body.branding-page .brand-process__nav{border-top:1px solid var(--bp-line)}
body.branding-page .brand-process__nav a{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:10px;
  padding:11px 0;
  border-bottom:1px solid var(--bp-line);
  color:#aaa;
  font-size:12px;
  line-height:1.45;
  transition:color .2s ease,padding-left .2s ease;
}
body.branding-page .brand-process__nav a span:first-child{font-variant-numeric:tabular-nums}
body.branding-page .brand-process__nav a:hover{color:#555;padding-left:4px}
body.branding-page .brand-process__nav a.is-active{color:#111;padding-left:8px}
body.branding-page .brand-process__nav a.is-active span:last-child{font-weight:560}

body.branding-page .brand-process__timeline{
  position:relative;
  min-width:0;
  --process-progress:0%;
}
body.branding-page .brand-process__track{
  position:absolute;
  z-index:1;
  top:0;
  bottom:0;
  left:18px;
  width:1px;
  background:#deded9;
}
body.branding-page .brand-process__track-fill{
  position:absolute;
  top:0;
  left:0;
  width:1px;
  height:var(--process-progress);
  background:#111;
  transition:height .08s linear;
}

/* Steps */
body.branding-page .brand-step{
  position:relative;
  min-height:clamp(650px,92vh,900px);
  padding:clamp(84px,8vw,132px) 0 clamp(84px,8vw,132px) 72px;
  border-bottom:1px solid var(--bp-line);
  scroll-margin-top:calc(var(--header-height,104px) + 20px);
}
body.branding-page .brand-step:first-of-type{border-top:0}
body.branding-page .brand-step__node{
  position:absolute;
  z-index:3;
  top:clamp(96px,9vw,146px);
  left:12px;
  width:13px;
  height:13px;
  border:1px solid #9d9d99;
  border-radius:50%;
  background:#fff;
  transition:background .28s ease,border-color .28s ease,transform .28s ease;
}
body.branding-page .brand-step.is-active .brand-step__node,
body.branding-page .brand-step.is-seen .brand-step__node{border-color:#111;background:#111}
body.branding-page .brand-step.is-active .brand-step__node{transform:scale(1.28)}
body.branding-page .brand-step__inner{
  display:grid;
  grid-template-columns:minmax(300px,.86fr) minmax(380px,1.14fr);
  gap:clamp(52px,6vw,96px);
  align-items:center;
}
body.branding-page .brand-step__copy{max-width:580px}
body.branding-page .brand-step__number{
  display:block;
  color:#999;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
}
body.branding-page .brand-step__en{
  display:block;
  margin-top:34px;
  color:#777;
  font-size:12px;
  font-weight:600;
  letter-spacing:.11em;
}
body.branding-page .brand-step h3{
  max-width:12ch;
  margin:12px 0 0;
  font-size:clamp(36px,4vw,58px)!important;
  font-weight:480!important;
  line-height:1.08!important;
  letter-spacing:-.055em!important;
  text-wrap:balance!important;
}
body.branding-page .brand-step__description{
  max-width:560px;
  margin-top:28px!important;
  color:#4f4f4f;
  font-size:17px;
  line-height:1.76;
  text-wrap:pretty;
}
body.branding-page .brand-step__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:34px;
}
body.branding-page .brand-step__meta span{
  padding:8px 11px 7px;
  border:1px solid #deded9;
  border-radius:999px;
  color:#696969;
  background:#fff;
  font-size:11px;
  line-height:1;
  letter-spacing:.025em;
}

/* Visual stage */
body.branding-page .brand-step__visual{
  position:relative;
  display:grid;
  min-height:440px;
  overflow:hidden;
  place-items:center;
  border:1px solid var(--bp-line);
  background:var(--bp-soft);
  isolation:isolate;
}
body.branding-page .brand-step__visual::before{
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:linear-gradient(#e7e7e2 1px,transparent 1px),linear-gradient(90deg,#e7e7e2 1px,transparent 1px);
  background-size:48px 48px;
  opacity:.42;
  content:'';
}
body.branding-page .brand-step__visual>*{transition:transform .72s cubic-bezier(.22,1,.36,1),opacity .55s ease}
body.branding-page .brand-step:not(.is-seen) .brand-step__visual>*{opacity:.28;transform:translateY(14px)}
body.branding-page .brand-step.is-seen .brand-step__visual>*{opacity:1;transform:none}
body.branding-page .brand-visual__center{
  position:absolute;
  display:grid;
  width:112px;
  height:112px;
  place-items:center;
  border-radius:50%;
  background:#151515;
  color:#fff;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
}

/* 01 Discover */
body.branding-page .visual-discover .brand-visual__item{
  position:absolute;
  display:grid;
  min-width:98px;
  min-height:42px;
  padding:0 13px;
  place-items:center;
  border:1px solid #cfcfca;
  border-radius:999px;
  background:#fff;
  color:#555;
  font-size:11px;
  letter-spacing:.045em;
}
body.branding-page .visual-discover .item-a{top:16%;left:12%}
body.branding-page .visual-discover .item-b{top:18%;right:10%}
body.branding-page .visual-discover .item-c{bottom:18%;left:10%}
body.branding-page .visual-discover .item-d{right:10%;bottom:18%}
body.branding-page .visual-discover .item-e{top:50%;right:5%;transform:translateY(-50%)}
body.branding-page .visual-discover .brand-visual__line{position:absolute;width:32%;height:1px;background:#bdbdb8;transform-origin:left center}
body.branding-page .visual-discover .line-a{left:27%;top:28%;transform:rotate(22deg)}
body.branding-page .visual-discover .line-b{right:22%;top:30%;transform:rotate(154deg)}
body.branding-page .visual-discover .line-c{left:26%;bottom:28%;transform:rotate(-22deg)}
body.branding-page .visual-discover .line-d{right:20%;bottom:29%;transform:rotate(206deg)}

/* 02 Diagnose */
body.branding-page .visual-diagnose{padding:50px}
body.branding-page .diagnose-grid{display:grid;width:min(100%,480px);grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body.branding-page .diagnose-card{min-height:112px;padding:18px;border:1px solid #d6d6d1;background:#fff}
body.branding-page .diagnose-card small{display:block;color:#9a9a95;font-size:10px;letter-spacing:.08em}
body.branding-page .diagnose-card strong{display:block;margin-top:22px;font-size:15px;font-weight:530}
body.branding-page .diagnose-card.is-focus{border-color:#111;box-shadow:inset 3px 0 0 #111}

/* 03 Define */
body.branding-page .define-stack{display:grid;width:min(100%,480px);gap:10px}
body.branding-page .define-row{display:grid;grid-template-columns:120px minmax(0,1fr);min-height:86px;border:1px solid #d8d8d3;background:#fff}
body.branding-page .define-row b{display:grid;place-items:center;border-right:1px solid #deded9;font-size:13px;letter-spacing:.08em}
body.branding-page .define-row span{display:flex;align-items:center;padding:0 24px;color:#666;font-size:13px}

/* 04 Concept */
body.branding-page .concept-flow{display:grid;width:min(100%,500px);grid-template-columns:minmax(0,1fr) 54px minmax(150px,.72fr);align-items:center;gap:12px}
body.branding-page .concept-keywords{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body.branding-page .concept-keywords span{display:grid;min-height:58px;place-items:center;border:1px solid #d8d8d2;background:#fff;color:#666;font-size:11px;letter-spacing:.06em}
body.branding-page .concept-arrow{text-align:center;color:#858580;font-size:24px}
body.branding-page .concept-result{display:grid;min-height:180px;padding:22px;place-items:center;border:1px solid #111;background:#111;color:#fff;text-align:center;font-size:18px;font-weight:520;line-height:1.35}

/* 05 Identity */
body.branding-page .identity-system{display:grid;width:min(100%,500px);grid-template-columns:1.1fr .9fr;gap:12px}
body.branding-page .identity-logo{display:grid;min-height:250px;place-items:center;border:1px solid #111;background:#fff;font-size:32px;font-weight:650;letter-spacing:-.06em}
body.branding-page .identity-tools{display:grid;gap:12px}
body.branding-page .identity-type,.identity-chips{border:1px solid #d7d7d2;background:#fff}
body.branding-page .identity-type{display:grid;min-height:116px;padding:16px;align-content:space-between}
body.branding-page .identity-type b{font-size:30px;font-weight:500;line-height:1}
body.branding-page .identity-type small{color:#888;font-size:10px;letter-spacing:.06em}
body.branding-page .identity-chips{display:grid;grid-template-columns:repeat(3,1fr);min-height:122px;padding:12px;gap:8px}
body.branding-page .identity-chips i{display:block;background:#111}
body.branding-page .identity-chips i:nth-child(2){background:#777}
body.branding-page .identity-chips i:nth-child(3){background:#d5d5d0}

/* 06 Apply */
body.branding-page .apply-map{position:relative;width:min(100%,520px);height:330px}
body.branding-page .apply-map .brand-visual__center{top:50%;left:50%;transform:translate(-50%,-50%)}
body.branding-page .apply-node{position:absolute;display:grid;min-width:102px;height:46px;padding:0 12px;place-items:center;border:1px solid #d2d2cd;background:#fff;color:#555;font-size:11px;letter-spacing:.05em}
body.branding-page .apply-node:nth-of-type(2){top:12%;left:8%}
body.branding-page .apply-node:nth-of-type(3){top:12%;right:8%}
body.branding-page .apply-node:nth-of-type(4){bottom:12%;left:8%}
body.branding-page .apply-node:nth-of-type(5){right:8%;bottom:12%}
body.branding-page .apply-node:nth-of-type(6){top:50%;left:2%;transform:translateY(-50%)}
body.branding-page .apply-node:nth-of-type(7){top:50%;right:2%;transform:translateY(-50%)}
body.branding-page .apply-line{position:absolute;top:50%;left:50%;width:36%;height:1px;background:#c5c5c0;transform-origin:left center}
body.branding-page .apply-line.l1{transform:rotate(210deg)}
body.branding-page .apply-line.l2{transform:rotate(330deg)}
body.branding-page .apply-line.l3{transform:rotate(150deg)}
body.branding-page .apply-line.l4{transform:rotate(30deg)}
body.branding-page .apply-line.l5{transform:rotate(180deg)}
body.branding-page .apply-line.l6{transform:rotate(0deg)}

/* 07 Build */
body.branding-page .build-tree{width:min(100%,520px);font-size:12px}
body.branding-page .build-root{display:inline-flex;padding:10px 14px;background:#111;color:#fff;font-weight:600;letter-spacing:.06em}
body.branding-page .build-list{display:grid;margin-top:18px;margin-left:24px;border-left:1px solid #bfbfba}
body.branding-page .build-list>div{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr);gap:20px;padding:13px 0 13px 26px;border-bottom:1px solid #deded9}
body.branding-page .build-list>div::before{position:absolute;top:50%;left:0;width:18px;height:1px;background:#bfbfba;content:''}
body.branding-page .build-list b{font-weight:550}
body.branding-page .build-list span{color:#777;line-height:1.5}

/* 08 Grow */
body.branding-page .grow-map{position:relative;width:min(100%,520px);height:350px}
body.branding-page .grow-map .brand-visual__center{top:50%;left:16%;transform:translateY(-50%)}
body.branding-page .grow-branch{position:absolute;left:39%;display:grid;min-width:150px;height:52px;padding:0 14px;place-items:center;border:1px solid #d3d3ce;background:#fff;color:#555;font-size:11px;letter-spacing:.05em}
body.branding-page .grow-branch.b1{top:8%}
body.branding-page .grow-branch.b2{top:29%}
body.branding-page .grow-branch.b3{top:50%;transform:translateY(-50%)}
body.branding-page .grow-branch.b4{bottom:29%}
body.branding-page .grow-branch.b5{bottom:8%}
body.branding-page .grow-line{position:absolute;left:35%;width:1px;background:#c0c0bb}
body.branding-page .grow-line.main{top:14%;height:72%}
body.branding-page .grow-line.stem{top:50%;left:36%;width:14%;height:1px}
body.branding-page .grow-line.s1{top:15%;left:35%;width:9%;height:1px}
body.branding-page .grow-line.s2{top:34%;left:35%;width:9%;height:1px}
body.branding-page .grow-line.s3{top:66%;left:35%;width:9%;height:1px}
body.branding-page .grow-line.s4{top:85%;left:35%;width:9%;height:1px}

/* 09 Sustain */
body.branding-page .sustain-loop{position:relative;width:330px;height:330px;border:1px solid #bdbdb8;border-radius:50%}
body.branding-page .sustain-loop::before{position:absolute;inset:32px;border:1px dashed #cfcfca;border-radius:50%;content:''}
body.branding-page .sustain-loop .brand-visual__center{top:50%;left:50%;transform:translate(-50%,-50%)}
body.branding-page .sustain-item{position:absolute;display:grid;min-width:86px;height:36px;padding:0 10px;place-items:center;background:var(--bp-soft);color:#555;font-size:10px;letter-spacing:.06em}
body.branding-page .sustain-item.s1{top:-18px;left:50%;transform:translateX(-50%)}
body.branding-page .sustain-item.s2{top:50%;right:-38px;transform:translateY(-50%)}
body.branding-page .sustain-item.s3{bottom:-18px;left:50%;transform:translateX(-50%)}
body.branding-page .sustain-item.s4{top:50%;left:-38px;transform:translateY(-50%)}
body.branding-page .sustain-arrow{position:absolute;top:23px;right:35px;font-size:28px;transform:rotate(24deg)}

/* Closing */
body.branding-page .branding-process-closing{
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);
  gap:clamp(56px,7vw,120px);
  padding-top:clamp(88px,8vw,132px)!important;
  padding-bottom:clamp(88px,8vw,132px)!important;
  border-bottom:1px solid var(--bp-line);
}
body.branding-page .branding-process-closing__body{max-width:900px}
body.branding-page .branding-process-closing h2{
  max-width:17ch;
  margin:0;
  font-size:clamp(34px,3.7vw,56px);
  font-weight:480;
  line-height:1.12;
  letter-spacing:-.052em;
  text-wrap:balance;
}
body.branding-page .branding-process-closing p{
  max-width:700px;
  margin-top:26px!important;
  color:#555;
  font-size:17px;
  line-height:1.76;
}
body.branding-page .branding-process-closing__back{display:inline-flex;margin-top:34px;padding-bottom:4px;border-bottom:1px solid currentColor;font-size:12px;font-weight:600;letter-spacing:.07em}

/* CTA refinement for process page */
body.branding-page .cta.branding-process-cta{margin-top:0!important}
body.branding-page .branding-process-cta .cta__title{max-width:900px!important}

/* Tablet */
@media(max-width:1080px){
  body.branding-page .brand-process__layout{grid-template-columns:190px minmax(0,1fr);gap:40px}
  body.branding-page .brand-step__inner{grid-template-columns:1fr;gap:44px}
  body.branding-page .brand-step__visual{min-height:400px}
}

@media(max-width:900px){
  body.branding-page .branding-process-hero,
  body.branding-page .branding-process-intro__grid,
  body.branding-page .branding-process-closing{grid-template-columns:1fr!important;gap:30px!important}
  body.branding-page .branding-process-hero{min-height:0!important;align-items:start!important;padding-top:82px!important}
  body.branding-page .branding-process-hero__label{padding-top:0}
  body.branding-page .brand-process__layout{display:block}
  body.branding-page .brand-process__side{display:none}
  body.branding-page .brand-process__timeline{margin-left:0}
  body.branding-page .branding-process-index{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:680px){
  body.branding-page .branding-process-hero{padding-top:58px!important;padding-bottom:64px!important}
  body.branding-page .branding-process-hero .page-title{font-size:clamp(40px,11vw,54px)!important}
  body.branding-page .branding-process-hero__lead{margin-top:24px!important;font-size:17px!important}
  body.branding-page .branding-process-hero__scroll{margin-top:30px}
  body.branding-page .branding-process-intro{width:calc(100% - 32px)!important;padding-top:68px!important;padding-bottom:68px!important}
  body.branding-page .branding-process-intro h2{font-size:clamp(28px,8vw,38px)}
  body.branding-page .branding-process-intro__copy{font-size:16px}
  body.branding-page .branding-process-index{
    display:flex;
    width:calc(100vw - 16px);
    margin-right:-16px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    border-left:0;
    scrollbar-width:none;
  }
  body.branding-page .branding-process-index::-webkit-scrollbar{display:none}
  body.branding-page .branding-process-index a{flex:0 0 152px;min-height:110px;scroll-snap-align:start;border-left:1px solid var(--bp-line)}
  body.branding-page .brand-process__layout{width:calc(100% - 32px)!important}
  body.branding-page .brand-process__track{left:8px}
  body.branding-page .brand-step{min-height:0;padding:72px 0 78px 42px}
  body.branding-page .brand-step__node{top:80px;left:2px;width:13px;height:13px}
  body.branding-page .brand-step__inner{gap:34px}
  body.branding-page .brand-step h3{font-size:clamp(32px,9vw,42px)!important}
  body.branding-page .brand-step__description{margin-top:22px!important;font-size:16px}
  body.branding-page .brand-step__meta{margin-top:26px}
  body.branding-page .brand-step__visual{min-height:320px}
  body.branding-page .visual-diagnose{padding:24px}
  body.branding-page .diagnose-card{min-height:92px;padding:14px}
  body.branding-page .diagnose-card strong{margin-top:16px;font-size:13px}
  body.branding-page .define-row{grid-template-columns:90px minmax(0,1fr);min-height:76px}
  body.branding-page .define-row span{padding:0 15px;font-size:12px}
  body.branding-page .concept-flow{grid-template-columns:1fr;gap:10px;padding:22px}
  body.branding-page .concept-arrow{transform:rotate(90deg)}
  body.branding-page .concept-result{min-height:100px}
  body.branding-page .identity-system{grid-template-columns:1fr;padding:24px}
  body.branding-page .identity-logo{min-height:140px}
  body.branding-page .apply-map,.grow-map{transform:scale(.82)}
  body.branding-page .build-tree{padding:26px 18px}
  body.branding-page .build-list>div{grid-template-columns:100px minmax(0,1fr);gap:12px;padding-left:20px}
  body.branding-page .sustain-loop{width:240px;height:240px}
  body.branding-page .sustain-item.s2{right:-28px}
  body.branding-page .sustain-item.s4{left:-28px}
  body.branding-page .branding-process-closing{width:calc(100% - 32px)!important;padding-top:68px!important;padding-bottom:68px!important}
  body.branding-page .branding-process-closing h2{font-size:clamp(30px,8.4vw,40px)}
  body.branding-page .branding-process-closing p{font-size:16px}
}

@media(prefers-reduced-motion:reduce){
  body.branding-page .brand-step__visual>*,
  body.branding-page .brand-step__node,
  body.branding-page .brand-process__nav a,
  body.branding-page .branding-process-index a,
  body.branding-page .branding-process-index span{transition:none!important}
  body.branding-page .brand-step:not(.is-seen) .brand-step__visual>*{opacity:1;transform:none}
}