main { overflow: hidden; max-width: 100vw; }

#digital-value { position: relative; padding-bottom: 0; }
#digital-value:before { overflow: hidden; position: absolute; height: 80%; border-radius: 0 0 87px 87px; background: url(/images/00/digital-background.webp); inset: 0; z-index: -1; content: ""; }
.digital-title { margin: 3rem auto; display: flex; flex-direction: column; gap: 1.5rem; }
.digital-title .text-muted { margin: auto; width: 65%; }
.bg-text-branding { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 3%; font-family: "Cormorant Garamond", serif; line-height: 1; letter-spacing: .3rem; font-size: 9vw; color: #fff; white-space: nowrap; text-transform: uppercase; }

/* --- branding --- */
.branding-container { position: relative; margin-top: -3vw; padding: 0; display: flex; }
.branding-card { position: relative; padding: 4rem; flex: 1; display: flex; flex-direction: column; align-items: flex-start; transition: transform var(--transition-speed); color: #5d4037; }
.branding-card:before { overflow: hidden; position: absolute; inset: 0; content: ""; }

.branding-card.clinic:before { border-radius: 80px 0 0 80px; background: url(/images/00/clinic-background.webp) no-repeat 50% 0 / cover; }
.branding-card.personal:before { border-radius: 0 80px 80px 0; background: url(/images/00/personal-background.webp) no-repeat 50% 0 / cover; }

.card-bg-number { position: absolute; font-family: "Cormorant Garamond", serif; font-style: italic; line-height: 1; font-size: 10rem; color: #fefefe; opacity: .4; z-index: 0; bottom: -20px; right: 20px; pointer-events: none; }

.card-illustration { position: absolute; top: -3rem; right: 1rem; animation: float-slow 4s ease-in-out infinite; }
.personal .card-illustration { right: 3rem; animation-delay: 1s; }

/* --- card-header --- */
.card-header { position: relative; margin-bottom: 4rem; padding-left: 1.8rem; width: 100%; z-index: 1; }
.card-header:before { position: absolute; width: 80%; height: 1px; bottom: -2rem; left: 0; opacity: .3; content: ""; }
.en-title { margin-bottom: 1.3rem; display: block; line-height: 1; letter-spacing: 2px; text-transform: uppercase; font-size: 0.9rem; }
.zh-title { display: flex; flex-direction: column; gap: 1rem; line-height: 1; font-weight: bold; font-size: 3rem; color: #fff; }
.zh-title span:last-child { opacity: .5; color: #21211f; }

.branding-card.clinic .card-header { border-left: 5px #ffd89a solid; }
.branding-card.clinic .card-header:before {background: #ffffff;}
.branding-card.clinic .en-title { color: #ffd89a; }
.branding-card.personal .card-header { border-left: 5px #ffc7ad solid; }
.branding-card.personal .card-header:before {background: #ffffff;}
.branding-card.personal .en-title { color: #ffc7ad; }

.card-intro {position: relative;margin-bottom: 2rem;font-size: 1.15rem;color: #52483f;z-index: 1;}

/* --- feature-grid --- */
.feature-grid { position: relative; margin-bottom: auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; z-index: 1; }
.feature-item {padding: 15px;background: rgba(255, 255, 255, 0.3);border: 1px rgba(120, 120, 120, 0.2) solid;border-radius: 8px;display: flex;align-items: center;gap: 10px;transition: transform var(--transition-speed);}
.feature-item:hover { transform: translateY(-5px); }
.feature-icon { width: 50px; aspect-ratio: 1/1; fill: #f98f02; }
.feature-text h4 {margin-bottom: .2rem;font-weight: bold;font-size: 1.2rem;color: #52483f;}
.feature-text p {line-height: 1;font-size: 1rem;font-weight: 400;color: #825f3f;margin-top: 6px;letter-spacing: 1px;}

/* --- step-list --- */
.step-list { margin-bottom: auto; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; z-index: 1; }
.step-item { position: relative; padding: 10px; display: flex; align-items: center; gap: 10px; transition: transform var(--transition-speed); }
.step-item:hover { transform: translateX(10px); }
.step-number { margin-bottom: 0.5rem; width: 50px; aspect-ratio: 1/1; border: 1px solid #e35f27; border-radius: 50%; display: inline-block; font-family: "Cormorant Garamond", serif; font-style: italic; text-align: center; line-height: 1; font-size: 40px; color: #e35f27; }
.step-content h4 {margin-bottom: 0.3rem;font-weight: bold;font-size: 1.3rem;color: #6d3822;}
.step-content p {font-size: 1.1rem;color: #975b41;}

/* --- bottom-tag --- */
.bottom-tag {position: relative;margin-top: 2rem;padding: 0.5rem 1.5rem;border: 1px rgba(245, 245, 245, 0.5) solid;border-radius: 50px;display: inline-block;font-size: 1.1rem;text-align: center;color: white;z-index: 1;}
.clinic .bottom-tag { background-color: rgba(219, 129, 0, 0.5); }
.personal .bottom-tag { background-color: rgba(197, 63, 0, 0.5); }

/* --- arTree Section --- */
.artree-section { position: relative; width: 100%; background-image: url(/images/00/philosophy-left.webp),url(/images/00/philosophy-right.webp); background-repeat: no-repeat; background-position: 0 bottom, right 0; background-size: 29% auto, 27% auto; display: flex; justify-content: center; align-items: center; }
.bgCircle { position: absolute; width: min(95%, 1043px); top: 50%; left: 50%; z-index: 0; transition: transform 0.1s linear; transform: translate(-50%, -50%) scale(1); }
.bgCircle img { animation: rotate-slow 120s linear infinite; }
.decoTextBox { overflow: hidden; position: absolute; max-width: 100%; will-change: transform, opacity; transform: translate(-50%, -50%); top: 50%; left: 50%; z-index: 0; opacity: 0; pointer-events: none; }
.decoText .txt { font-family: "Cormorant Garamond", serif; line-height: 1; font-size: 16vw; color: #fbe8dd; white-space: nowrap; text-transform: uppercase; opacity: .5; }
.linkBox { position: absolute; width: 100%; height: 100%; z-index: 5; top: 0; left: 0; pointer-events: none; }
.floating-img { overflow: hidden; position: absolute; will-change: transform; transition: transform 0.3s ease-out; }
.floating-img img { display: block; width: 100%; height: auto; transition: transform 0.5s; }
.floating-img:hover img { transform: scale(1.1); }
.floating-img.img-1 { width: 31%; top: 12%; right: 62%; z-index: 9; }
.floating-img.img-2 { width: 25%; top: 10%; left: 59%; z-index: 1; }
.floating-img.img-3 { width: 33%; bottom: 7%; left: 57%; z-index: 3; }
.floating-img.img-4 { width: 5%; bottom: 21%; right: 65%; z-index: 2; }
.floating-img.img-5 { width: 4%; top: 21%; left: 56%; z-index: 1; }
.center-content { position: relative; margin: 16% 0; padding: 2rem; width: min(95%, 560px); aspect-ratio: 1/1; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(4px); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; z-index: 10; animation: float-slow 6s ease-in-out infinite; }

/* --- Service Box --- */
.serviceBox { overflow: hidden; position: relative; margin-top: -4rem; padding: 6rem 0; color: #fff; z-index: 2; }
.serviceBox:before { position: absolute; width: 100vw; height: 100%; background: var(--brand-text-gradient); border-radius: 50% 50% 0 0 / 8% 8% 0 0; content: ""; inset: 0; z-index: -1; }
.serviceList { position: relative; margin: 6rem auto 0; padding: 0 1.5rem; max-width: 1200px; }
.serviceList::before { position: absolute; width: 1px; background: #ffb09f; transform: translateX(-50%); z-index: 0; top: 0; bottom: 0; left: 50%; content: ''; }

.scroll-line { position: absolute; width: 2px; height: 0%; background: #fff; border-radius: 99px; top: 0; left: 50%; z-index: 1; transform: translateX(-50%); transition: height 0.1s linear; }

.serviceItem { position: relative; margin-bottom: 6rem; display: flex; align-items: center; justify-content: space-between; z-index: 1; opacity: 1; transform: translateY(50px); transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.serviceItem.active { opacity: 1; transform: translateY(0); }
.serviceItem:last-child { margin-bottom: 0; }
.serviceItem:nth-child(odd) { flex-direction: row; }
.serviceItem:nth-child(even) { flex-direction: row-reverse; }
.serviceItem .textBox { position: relative; width: 42%; }
.serviceItem .topBox .title { position: absolute; font-size: 4rem; line-height: 1; font-weight: bold; opacity: .2; top: -2rem; right: 0; z-index: -1; transition: color 0.5s; }
.serviceItem.highlight .topBox .title { opacity: .4; }
.serviceItem .subtitle { margin-bottom: 0.5rem; font-size: 2rem; letter-spacing: 0.1em; }
.serviceItem .tags { margin: 1.5rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; }
.serviceItem .tags .badge { padding: 0.5rem .8rem; background: #fff; border: 0; line-height: .8; color: #68453b; }
.serviceItem .tags .badge:not(:last-child):after { position: absolute; width: 1px; height: 60%; background: #fff; display: inline-block; right: -1rem; content: ""; }
.serviceItem .text { line-height: 1.8; font-size: 1.1rem; }
.serviceItem .iconBox {position: absolute;width: 80px;aspect-ratio: 1/1;background: #f58a2a;border: 1px solid #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;left: 50%;z-index: 2;transform: translateX(-50%);transition: all 0.5s;}
.serviceItem.highlight .iconBox { background: #fff; transform: translateX(-50%) scale(1.1); }
.serviceItem .iconBox svg { width: 60%; aspect-ratio: 1/1; fill: #fff; }
.serviceItem.highlight .iconBox svg { fill: url(#icon-gradient-orange); }
.serviceItem .imgBox { overflow: hidden; position: relative; width: 42%; border-radius: 0 0 90px 0; box-shadow: 20px 20px 0px #ffb09f; transform: scale(0.9); transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.serviceItem.active .imgBox { transform: scale(1); }
.serviceItem .imgBox img { width: 100%; height: auto; display: block; transition: transform 0.8s; }
.serviceItem:hover .imgBox img { transform: scale(1.05); }

/* --- Process Section --- */
.process-section { position: relative; background: var(--brand-text-gradient); }
.process-section:before {overflow: hidden;position: absolute;border-radius: 120px 120px 0 0;inset: 0;content: "";background-color: #ffefe6;}
.process-title { position: absolute; top: 6rem; left: 5%; z-index: 20; }
.process-title .text-gradient { font-style: italic; letter-spacing: .1rem; }
.process-sticky { overflow: hidden; position: sticky; max-width: 100vw; height: 100vh; display: flex; align-items: center; top: var(--header-height); }

.bg-text-process { position: absolute; font-family: "Cormorant Garamond", serif; line-height: 1; font-size: 20vw; bottom: 0; left: 50%; transform: translate(-50%, 0); white-space: nowrap; z-index: 0; opacity: .1; }

.process-track { padding-right: 480px; padding-left: 10vw; display: flex; gap: 5rem; will-change: transform; z-index: 10; }
.process-card { min-width: min(70vw, 480px); display: flex; flex-direction: column; gap: 2.2rem; }
.process-card .card-header { margin-bottom: 0; padding: 0 0 .5rem; display: flex; align-items: baseline; justify-content: space-between; }
.process-card .card-header:before { width: 100%; background: #fc8b6a; bottom: 0; opacity: 1; }
.process-card .card-header .process-num { font-family: "Cormorant Garamond", serif; line-height: 1; font-size: 4rem; font-style: italic; }
.process-card .card-header .category a { color: #df533c; }
.process-card .en-title { margin-bottom: .8rem; font-family: "Cormorant Garamond", serif; font-style: italic; color: #bd8061; text-transform: inherit; }
.process-card .zh-title { font-size: 1.5rem; }
.process-card .zh-title a { overflow: hidden; height: 1.5rem; text-overflow: ellipsis; display: -webkit-box; color: var(--text-main); -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.process-img-box { overflow: hidden; position: relative; padding: 1rem; width: 100%; background: linear-gradient(-141deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%); border-radius: 1rem; box-shadow: 0 0 40px rgb(31, 31, 31, 0.26); }
.process-img-box:before { margin-bottom: .8rem; width: 100%; height: 10px; background-image: url(/images/00/process-img-bg-left.webp), url(/images/00/process-img-bg-right.webp); background-position: 0 50%, right 50%; background-size: auto 100%; background-repeat: no-repeat; display: block; content: ""; inset: 0; }
.process-img-box a { display: block; }
.process-img-box img { width: 100%; aspect-ratio: 5/3; object-fit: cover; }

/* --- Success Stories --- */
.stories-section { position: relative; max-width: 100vw; padding-bottom: 0; }
.stories-section:before { position: absolute; background: url(/images/00/stories-bg.webp) #f8f8f8 no-repeat right 0; background-attachment: fixed; inset: 0; content: ""; }
.split-container { display: flex; flex-direction: column; gap: 4rem 0; }
.sticky-visual { position: relative; overflow: hidden; padding: 3rem 4rem; width: 100%; background: #fff; border-radius: 4rem; }
.sticky-visual .text-gradient { margin-bottom: 1rem; font-style: italic; letter-spacing: .1rem; }
.split-content { position: relative; width: 100%; }
.grid-2-feature { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* --- Circular Chart --- */
.chart-container { position: relative; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }
.chart-item { display: flex; gap: 20px; align-items: center; }
.circular-chart { display: block; margin: 0 auto; width: 100%; height: 100%; }
.circle-bg { fill: none; stroke: #dbdbdb; stroke-width: 2.5; }
.circle-path { fill: none; stroke-width: 2.5; stroke: url(#icon-gradient-orange); stroke-dasharray: 0, 100; transition: stroke-dasharray 2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.chart-text { position: absolute; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 2.5rem; }
.chart-text span { font-size: 0.5em; }
.chart-item .text-muted { width: 1%; flex: 1 1 auto; }

/* --- Success Stories --- */
.story-card { position: relative; margin-bottom: 3rem; padding: 3rem; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 3rem; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 3rem; transition: all 0.3s; }
.story-card:before { position: absolute; width: 15px; aspect-ratio: 1/1; background: var(--brand-text-gradient); border-radius: 50%; display: block; left: calc(-10% - 8px); content: ""; }
.story-num { position: absolute; font-family: "Cormorant Garamond", serif; font-style: italic; letter-spacing: .5rem; line-height: 1; font-size: 6rem; top: .8rem; right: -3rem; opacity: .5; }
.story-card .card-title .en-title { margin-bottom: .3rem; display: inline-block; }
.story-card .card-bottom { padding-top: 3rem; border-top: 1px #dedede solid; }
.story-card .card-bottom p { width: 80%; }

@media (max-width: 1280px) {
	.serviceBox:before { border-radius: 110vw 110vw 0 0 / 8% 8% 0 0; }
}
@media (min-width: 1161px) {
	.split-container { flex-direction: row; align-items: flex-start; }
	.sticky-visual { position: sticky; width: 35%; top: 102px; }
	.split-content { margin-left: 5%; padding-left: 5%; width: 55%; }
	.split-content:before { position: absolute; width: 1px; height: calc(100% - 3rem); background: #d1d1d1; display: block; top: 3rem; left: 0; content: ""; }
}
@media (max-width: 1160px) {
	.stories-section { overflow: hidden; }
}
@media (max-width: 1024px) {
	.branding-container { flex-direction: column; gap: 5rem; }
	.branding-card { padding: 2.5rem 2rem; min-height: auto; }
	.branding-card.clinic:before , .branding-card.personal:before { border-radius: 80px; }
	.card-bg-number { font-size: 6rem; bottom: 10px; }
	.bg-decoration-text { font-size: 4rem; top: 20px; }
	.floating-img.img-1 { width: 41vw; }
	.floating-img.img-2 { width: 37vw; top: 3%; }
	.floating-img.img-3 { width: 43vw; bottom: 10%; }
	.process-section:before { border-radius: 80px 80px 0 0; }
	.process-track { margin-top: 5rem; padding-right: 0; padding-left: 0; gap: 0; }
	.process-card { padding: 0 5vw; min-width: min(90vw, 480px); flex: initial; }
	.story-card:before { display: none; }
	.story-num { right: 0; }
}
@media (max-width: 768px) {
	.serviceBox:before { border-radius: 210vw 210vw 0 0 / 8% 8% 0 0; }
	.serviceList::before { left: 20px; }
	.scroll-line { left: 20px; }
	.serviceItem { margin-left: 3rem; flex-direction: column !important; align-items: flex-start; }
	.serviceItem .textBox, .serviceItem .imgBox { width: 100%; text-align: left !important; }
	.serviceItem .iconBox { width: 60px; top: 1%; left: 20px; transform: translateX(-50%); }
	.serviceItem .topBox { padding-left: 70px }
	.serviceItem .topBox .title { font-size: 3rem; top: -1rem; opacity: 0.5; }
	.serviceItem .imgBox { margin-top: 2rem; }
}
@media (max-width: 640px) {
	.grid-2-feature { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.section-title { font-size: 1.8rem; }
	.digital-title { margin: 3rem auto 0; }
	.bg-text-branding { font-size: 15vw; }
	.feature-grid, .step-list { grid-template-columns: 1fr; gap: 1rem; }
	.card-illustration { width: 45%; top: 2rem; right: 1.5rem; opacity: .6; }
	.personal .card-illustration { width: 35%; right: 1.5rem; }
	.branding-card { padding: 2rem 1.5rem; }
	.branding-card.clinic:before , .branding-card.personal:before { border-radius: 3rem; }
	.serviceItem { margin-left: 5%; }
	.sticky-visual { padding: 10%; border-radius: 2rem; }
	.story-card { padding: 10% 5%; border-radius: 2rem; }
	.story-card .card-bottom p { width: 100%; }
}
@media (max-width: 550px) {
	.split-container { padding: 0; }
}