.page-about{
  background:linear-gradient(170deg,#FDF7F7 0%, #FFFFFF 52%, #FBEFF0 100%);
  --paper:#F5F0ED;
  --terra:#7E6D80;
  --cocoa:#5A5C70;
  --text:#5A5C70;
  --ink:#2B2D46;
}
.page-about .nav{
  background:rgba(255,253,253,.93);
  backdrop-filter:blur(8px);
}
.page-about .nav-links a[aria-current="page"],
.page-about .nav-menu-links a[aria-current="page"]{border-bottom-color:var(--rose)}

.about-page{color:var(--text)}
.about-page .h{letter-spacing:.01em; line-height:1.16; text-transform:none}
.about-page .h--xl{font-size:clamp(30px,4.4vw,60px); line-height:1.06; text-transform:uppercase}
.about-page .h--lg{font-size:clamp(23px,2.7vw,38px)}
.about-page .h--md{font-size:clamp(18px,2vw,26px)}
.about-page .eyebrow{font-weight:500; color:var(--ink)}
.about-page .hand{font-size:clamp(18px,2vw,26px); line-height:1.3; color:var(--rose)}
.about-page .body-copy{font-size:clamp(13.5px,1.4vw,15.5px); line-height:1.9; color:var(--cocoa); margin:0}
.about-page .wrap{max-width:1180px; margin:0 auto; padding-inline:var(--pad); position:relative}
.about-page .sec{position:relative; overflow:hidden; padding-block:clamp(20px,2.6vw,42px)}

.about-num{
  position:absolute; right:calc(var(--pad) * .2); font-family:var(--display);
  font-size:clamp(12px,1.3vw,17px); color:#8E4B55; letter-spacing:.06em;
}
.about-num::after{content:""; display:block; width:26px; height:1px; background:currentColor; opacity:.5; margin-top:6px}
.about-rail{
  position:absolute; left:calc(var(--pad) * .18); top:clamp(120px,15vw,215px); z-index:3;
  writing-mode:vertical-rl; font-size:9.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--ink); font-weight:400;
}

.about-hero{position:relative; overflow:hidden}
.about-hero-in{display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(14px,2.2vw,34px); align-items:center}
.about-hero-copy{position:relative; z-index:5}
.about-hero-copy .eyebrow{margin-bottom:clamp(12px,1.8vw,20px)}
.about-hero-copy h1{margin:0 0 clamp(12px,1.6vw,18px)}
.about-hero-copy .hand{margin-bottom:clamp(22px,3vw,36px); font-size:clamp(19px,2.2vw,30px)}
.about-hero-copy .body-copy{max-width:34ch; position:relative; z-index:2; line-height:2; margin-bottom:clamp(30px,4vw,58px)}
.about-hero-mark{
  position:absolute; left:calc(var(--pad) * -.4); bottom:clamp(-52px,-4vw,-22px); z-index:0;
  width:min(52%,540px); aspect-ratio:460/111; opacity:.42;
  background:url("/images/home/wordmark.webp") center/contain no-repeat; pointer-events:none;
}
.about-hero-art{position:relative; min-height:clamp(380px,48vw,600px)}
.about-hero-art img{height:auto; display:block; max-width:none}
.hero-sheet{
  position:absolute; right:2%; top:4%; width:min(69%,440px); aspect-ratio:.82;
  background:#FBF7F1; box-shadow:0 16px 38px rgba(140,110,88,.15);
  clip-path:polygon(2% 3%,26% 0,52% 2%,78% 0,99% 3%,100% 26%,98% 51%,100% 75%,99% 98%,74% 100%,48% 98%,24% 100%,1% 97%,3% 73%,0 49%,2% 25%);
}
.hero-tape{
  position:absolute; right:35%; top:1%; z-index:4; width:clamp(58px,7.4vw,112px); aspect-ratio:2.6;
  background:linear-gradient(102deg, rgba(233,206,170,.95), rgba(216,184,144,.9));
  clip-path:polygon(3% 0,97% 4%,100% 96%,1% 100%);
}
.hero-founder{position:absolute; right:0; bottom:0; width:min(66%,410px); z-index:3}
.hero-hanok{position:absolute; right:-2%; top:3%; width:min(37%,290px); z-index:1; opacity:.75}
.hero-sprig{position:absolute; left:14%; top:1%; width:min(26%,160px); z-index:2; rotate:8deg}
.hero-stamp{position:absolute; left:0; top:44%; width:min(19%,128px); z-index:4}
.hero-note{position:absolute; left:14%; top:57%; width:min(21%,146px); z-index:4; rotate:-3deg}
.leaf-corner{
  position:absolute; left:0; top:0; z-index:0; width:min(19%,258px); aspect-ratio:258/172;
  background:url("/images/about/leaf-corner.webp") left top/contain no-repeat;
  opacity:.85; pointer-events:none;
}
.botanical{
  position:absolute; right:0; z-index:0; pointer-events:none;
  width:min(13%,180px); aspect-ratio:300/1464;
  background:url("/images/about/botanical.webp") center/contain no-repeat; opacity:.85;
}

.trust-in{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(20px,3vw,44px); align-items:center}
.trust-copy .eyebrow{margin-bottom:clamp(14px,2vw,22px)}
.trust-copy h2{margin:0 0 clamp(16px,2.2vw,26px)}
.trust-copy .body-copy{max-width:36ch; line-height:2}
.trust-art{position:relative; min-height:clamp(240px,28vw,350px)}
.trust-art .hand{position:absolute; right:0; top:30%; text-align:center; line-height:1.6}
.trust-collage{position:absolute; left:0; top:0; width:min(76%,390px); rotate:-1deg}
.trust-collage img{width:100%; height:auto; display:block}

.about-kspa-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,3vw,46px); align-items:center}
.about-kspa-copy{position:relative}
.about-kspa-copy .eyebrow{margin-bottom:clamp(12px,1.6vw,18px)}
.about-kspa-copy h2{margin:0 0 clamp(14px,1.8vw,22px)}
.about-kspa-copy .body-copy{max-width:42ch; margin-bottom:clamp(22px,3vw,36px); line-height:2}
.klist{list-style:none; margin:0; padding:0; display:grid; gap:clamp(14px,1.9vw,24px); max-width:42ch}
.klist li{display:grid; grid-template-columns:auto 1px 1fr; gap:clamp(14px,1.9vw,24px); align-items:start}
.klist .n{font-family:var(--display); font-size:clamp(19px,2.1vw,28px); line-height:1; color:var(--rose)}
.klist .bar{background:rgba(166,72,78,.3); align-self:stretch}
.klist h3{margin:0 0 6px; font-family:var(--sans); font-weight:500; font-size:clamp(10px,1.05vw,12px); letter-spacing:.16em; text-transform:uppercase; color:var(--rose)}
.klist p{margin:0; font-size:clamp(12px,1.25vw,14px); line-height:1.85; color:var(--cocoa)}
.kseal{position:absolute; right:2%; bottom:2%; width:clamp(72px,9vw,120px); color:var(--rose)}
.about-kspa-art img{width:100%; height:auto}

.name-in{display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:clamp(20px,3vw,46px); align-items:center}
.name-art{position:relative; padding-top:clamp(34px,5vw,68px); display:grid; gap:clamp(10px,1.4vw,18px); justify-items:center}
.name-art .hand{position:absolute; left:2%; top:0; text-align:center; line-height:1.5; z-index:2}
.name-art img{width:min(100%,430px); height:auto}
.name-copy .eyebrow{margin-bottom:clamp(12px,1.6vw,18px)}
.name-copy h2{margin:0 0 clamp(16px,2.2vw,24px)}
.name-copy p{margin:0 0 14px; font-size:clamp(13.5px,1.4vw,15.5px); line-height:2; color:var(--cocoa); max-width:44ch}
.tagrow{display:flex; flex-wrap:wrap; gap:10px clamp(20px,3vw,44px); margin:clamp(20px,2.8vw,32px) 0 0; padding:0; list-style:none}
.tagrow li{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--rose)}

.philo{position:relative; text-align:center}
.philo .eyebrow{font-size:clamp(13.5px,1.4vw,15.5px); margin-bottom:clamp(18px,2.6vw,28px); letter-spacing:.3em; color:var(--rose)}
.philo p:not(.hand):not(.creed):not(.eyebrow){margin:0 auto 12px; font-size:clamp(12.5px,1.32vw,15px); line-height:1.95; color:var(--cocoa); max-width:min(100%,86ch)}
.creed{
  margin:clamp(6px,1vw,14px) auto clamp(10px,1.4vw,16px)!important;
  font-family:var(--headline); font-weight:600; font-size:clamp(24px,3.5vw,50px);
  color:var(--ink); letter-spacing:.02em;
}
.creed i{font-style:normal; color:var(--rose); margin:0 clamp(10px,1.4vw,18px)}
.philo .hand{font-size:clamp(17px,1.9vw,25px)}

.journey-in{display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:clamp(20px,3vw,44px); align-items:center}
.journey-copy .eyebrow{margin-bottom:clamp(14px,2vw,22px)}
.journey-copy h2{margin:0 0 clamp(16px,2.2vw,26px)}
.journey-art img{width:min(100%,470px); margin-inline:auto}
.journey-copy p:not(.route){margin:0 0 14px; font-size:clamp(13px,1.35vw,15px); line-height:2; color:var(--cocoa); max-width:36ch}
.route{display:flex; align-items:flex-start; gap:clamp(8px,1.4vw,16px); margin-top:clamp(22px,3vw,36px)}
.route-pt{display:grid; justify-items:center; gap:10px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--rose); text-align:center; white-space:nowrap; flex:none}
.route-pt svg{color:var(--rose)}
.route-path{flex:1 1 auto; width:auto; min-width:clamp(90px,11vw,200px); height:auto; color:var(--rose); align-self:center}

.values{position:relative}
.values .wrap{text-align:center}
.values .eyebrow{font-size:clamp(13.5px,1.4vw,15.5px); margin-bottom:clamp(18px,2.6vw,30px); letter-spacing:.24em}
.vlist{
  list-style:none; margin:0 auto; padding:0; width:fit-content; text-align:left;
  display:grid; grid-template-columns:auto minmax(7ch,auto) auto minmax(0,36ch);
  align-items:center; column-gap:clamp(14px,2.4vw,40px); row-gap:clamp(20px,2.8vw,34px);
}
.vlist li{display:contents}
.vlist .n{font-family:var(--display); font-size:clamp(22px,2.6vw,36px); line-height:1; color:var(--rose)}
.vlist h3{margin:0; justify-self:start; font-family:var(--headline); font-weight:600; font-size:clamp(13px,1.5vw,19px); letter-spacing:.12em; text-transform:uppercase; color:var(--ink)}
.vlist .dash{width:clamp(20px,3vw,42px); height:1px; background:var(--rose); opacity:.75}
.vlist p{margin:0; font-size:clamp(13px,1.4vw,15.5px); color:var(--cocoa)}
.hanok-corner{
  position:absolute; left:0; bottom:0; z-index:0; pointer-events:none;
  width:min(20%,270px); aspect-ratio:380/675;
  background:url("/images/about/hanok-corner.webp") left bottom/contain no-repeat; opacity:.9;
}
.dried-corner{
  position:absolute; right:0; bottom:0; z-index:0; pointer-events:none;
  width:min(15%,210px); aspect-ratio:330/567;
  background:url("/images/about/dried-corner.webp") right bottom/contain no-repeat; opacity:.95;
}

.about-closing{position:relative; text-align:center; padding:0 0 clamp(30px,4.4vw,64px)}
.about-closing .hand{font-size:clamp(26px,3.6vw,52px); color:var(--rose)}
.write-in{position:relative; display:inline-block}
.write-in .write-text{display:inline-block}
.write-in.pre .write-text{clip-path:inset(-15% 100% -25% -2%)}
.write-in.in-view .write-text{clip-path:inset(-15% 0% -25% -2%); transition:clip-path 1.9s cubic-bezier(.6,0,.35,1)}
.write-pen{
  position:absolute; top:6%; left:0; width:clamp(15px,1.9vw,21px); height:clamp(15px,1.9vw,21px);
  color:var(--rose); opacity:0; transform:translate(-40%,-4%) rotate(-8deg); pointer-events:none;
}
.write-in.in-view .write-pen{animation:write-pen-move 1.9s cubic-bezier(.6,0,.35,1) forwards}
@keyframes write-pen-move{
  0%{left:0%; opacity:0}
  5%{opacity:1}
  90%{opacity:1}
  100%{left:100%; opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .write-in.pre .write-text{clip-path:none}
  .write-in.in-view .write-pen{animation:none; opacity:0}
}
.closing-acts{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:clamp(14px,2.4vw,36px); margin-top:clamp(18px,2.6vw,32px)}
.closing-acts .sep{width:1px; height:16px; background:rgba(166,72,78,.4)}
.link-a{display:inline-flex; align-items:center; gap:12px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--rose); transition:color .3s}
.link-a svg{transition:transform .35s ease}
.link-a:hover{color:var(--ink)}
.link-a:hover svg{transform:translateX(4px)}

@media (max-width:1000px){
  .about-rail,.about-num{display:none}
  .about-hero-in,.trust-in,.about-kspa-in,.name-in,.journey-in{grid-template-columns:1fr}
  .about-hero-art{margin-top:clamp(20px,5vw,32px); min-height:0; width:min(100%,420px); aspect-ratio:583/545; justify-self:center}
  .about-hero-copy .body-copy{max-width:none}
  .about-hero-mark{position:static; width:min(70%,420px); margin:clamp(18px,4vw,26px) 0 0; opacity:.28}
  .trust-copy{text-align:center}
  .trust-copy .body-copy{margin-inline:auto}
  .trust-art{margin-top:clamp(20px,5vw,32px)}
  .trust-collage{position:relative; width:100%; max-width:390px; rotate:0}
  .trust-art .hand{position:static; text-align:right; margin-top:clamp(10px,3vw,16px)}
  .about-kspa-art{margin-bottom:clamp(20px,5vw,32px)}
  .name-art{margin-bottom:clamp(24px,6vw,36px); padding-top:0}
  .name-art .hand{position:static; margin:0 0 clamp(10px,3vw,16px); text-align:left; justify-self:start}
  .name-art img{width:100%; margin:0}
  .journey-art{margin-top:clamp(20px,5vw,32px)}
  .kseal{position:static; display:block; width:clamp(72px,18vw,104px); margin:clamp(16px,4vw,24px) 0 0 auto}
}
@media (max-width:620px){
  .vlist{grid-template-columns:auto 1fr; row-gap:clamp(6px,2vw,10px); column-gap:clamp(12px,3vw,18px)}
  .vlist .dash{display:none}
  .vlist p{grid-column:1 / -1; margin-bottom:clamp(14px,4vw,22px)}
  .vlist p:last-of-type{margin-bottom:0}
}