@charset "UTF-8";
:root {
--brand:#788b60;
--brand-dark:#61734d;
--brand-pale:#eef1e9;
--sand:#b98953;
--soft:#f5f2ec;
--paper:#fbfaf7;
--ink:#373b36;
--muted:#777b74;
--line:#deddd6;
--white:#fff;
--shadow:0 18px 46px rgba(77,84,68,.1)
}

* {
box-sizing:border-box
}
html {
scroll-behavior:smooth
}
body {
margin:0;
background:#fff;
color:var(--ink);
font:400 17px/1.9 "Noto Sans TC","Microsoft JhengHei",sans-serif;
overflow-x:hidden
}
body.nav-open {
overflow:hidden
}
a {
color:inherit;
text-decoration:none;
transition:.25s
}
img {
display:block;
max-width:100%
}
h1,h2,h3,p {
margin-top:0
}
h1,h2,h3 {
font-family:"Noto Serif TC",serif;
font-weight:600
}
.shell {
width:min(1160px,calc(100% - 48px));
margin:auto
}
.skip-link {
position:fixed;
left:16px;
top:-80px;
z-index:200;
padding:10px 15px;
background:#fff
}
.skip-link:focus {
top:12px
}

.site-header {
position:sticky;
top:0;
z-index:80;
background:rgba(255,255,255,.97);
border-bottom:1px solid #eeede9
}
.nav-shell {
height:90px;
display:flex;
align-items:center;
gap:34px
}
.brand {
display:flex;
align-items:center;
gap:11px;
min-width:max-content
}
.brand-mark {
width:52px;
height:52px;
object-fit:cover;
border-radius:50%;
background:#fff
}
.brand-copy b {
display:block;
color:var(--brand-dark);
font:600 22px/1.1 "Noto Serif TC";
letter-spacing:.12em
}
.brand-copy b small {
font-size:14px;
font-weight:500;
letter-spacing:.14em
}
.brand-copy>span {
display:block;
margin-top:6px;
color:#777268;
font:10px/1 "Noto Serif TC";
letter-spacing:.22em
}
.main-nav {
display:flex;
align-items:center;
gap:30px;
margin-left:auto
}
.nav-dropdown {
position:relative
}
.nav-dropdown-head {
display:flex;
align-items:center;
gap:3px
}
.nav-dropdown-toggle {
width:30px;
height:30px;
display:grid;
place-items:center;
padding:0;
border:1px solid var(--line);
border-radius:50%;
background:#fff;
color:var(--muted);
font-size:10px;
cursor:pointer;
transition:color .25s ease,background .25s ease,border-color .25s ease
}
.nav-dropdown-toggle:hover,.nav-dropdown.is-open .nav-dropdown-toggle {
color:var(--brand);
background:var(--brand-pale);
border-color:#cfd8c5
}
.nav-dropdown-toggle i {
transition:transform .25s ease
}
.nav-dropdown.is-open .nav-dropdown-toggle i {
transform:rotate(180deg)
}
.nav-dropdown-menu {
position:absolute;
top:calc(100% + 14px);
left:50%;
z-index:90;
display:grid;
min-width:170px;
padding:8px;
border:1px solid var(--line);
background:#fff;
box-shadow:0 14px 30px rgba(77,84,68,.12);
opacity:0;
visibility:hidden;
transform:translate(-50%, -5px);
transition:opacity .25s ease,transform .25s ease,visibility .25s ease
}
.nav-dropdown.is-open .nav-dropdown-menu {
opacity:1;
visibility:visible;
transform:translate(-50%, 0)
}
.nav-dropdown-menu a {
padding:9px 12px;
color:var(--muted);
font-size:15px;
white-space:nowrap
}
.nav-dropdown-menu a:after {
display:none
}
.nav-dropdown-menu a:hover {
background:var(--brand-pale);
color:var(--brand-dark);
transform:none
}
.main-nav a {
position:relative;
padding:5px 3px;
color:#66705f;
font-size:16px;
font-weight:500;
transition:color .25s ease,transform .25s ease
}
.main-nav a:after {
content:"";
position:absolute;
left:50%;
right:50%;
bottom:-6px;
height:1px;
background:var(--brand);
transition:.25s
}
.main-nav a:hover,.main-nav a.is-active {
color:var(--brand);
transform:translateY(-2px)
}
.main-nav a:hover:after,.main-nav a.is-active:after {
left:0;
right:0
}
.nav-toggle {
display:none;
margin-left:auto;
padding:10px;
border:0;
background:none
}
.nav-toggle span {
display:block;
width:25px;
height:1px;
margin:6px;
background:var(--brand-dark)
}

.button {
min-height:46px;
padding:0 22px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border:1px solid var(--brand);
background:var(--brand);
color:#fff;
font-weight:600;
font-size:15px;
letter-spacing:.04em
}
.button:hover {
background:var(--sand);
border-color:var(--sand)
}
.button-small {
min-height:40px;
padding:0 17px
}
.nav-socials {
display:flex;
gap:6px;
align-items:center
}
.nav-socials a {
width:32px;
height:32px;
display:grid;
place-items:center;
border-radius:50%;
color:#fff;
font-size:13px
}
.nav-social-facebook { background:#97a6ad; }
.nav-social-instagram { background:#b59696; }
.nav-social-line { background:#73a866; }
.nav-socials a:hover {
background:var(--brand);
color:#fff;
transform:translateY(-2px)
}
.button-outline {
background:transparent;
color:var(--brand-dark)
}
.button-outline:hover {
color:#fff
}
.plain-link,.text-link {
display:inline-flex;
align-items:center;
gap:9px;
color:var(--brand-dark);
font-weight:600;
font-size:15px
}
.plain-link:hover,.text-link:hover {
color:var(--sand)
}
.eyebrow {
display:flex;
align-items:center;
gap:12px;
margin-bottom:14px;
color:var(--brand);
font-size:12px;
font-weight:700;
letter-spacing:.2em
}
.eyebrow:before {
content:"";
width:30px;
height:1px;
background:currentColor
}
.section {
padding:100px 0
}
.center-title {
text-align:center;
margin-bottom:54px
}
.center-title .eyebrow {
justify-content:center
}
.center-title h2,.intro-inner h2 {
font-size:clamp(32px,4vw,46px);
letter-spacing:.08em
}
.center-action {
text-align:center;
margin-top:38px
}
.split-title {
display:flex;
align-items:end;
justify-content:space-between;
gap:50px;
margin-bottom:42px
}
.split-title h2 {
font-size:clamp(32px,4vw,44px);
margin-bottom:0
}
.split-title>p {
color:var(--muted);
margin-bottom:5px
}

/* homepage */.home-hero {
position:relative;
min-height:680px;
padding:85px 0 95px;
background:#fff;
overflow:hidden
}
.home-hero:before {
content:"";
position:absolute;
inset:0;
background-image:radial-gradient(circle,#d8ddd4 1.5px,transparent 1.7px);
background-size:105px 105px;
opacity:.55
}
.vertical-word {
position:absolute;
left:5.5vw;
top:195px;
color:#eceee9;
font:500 18px "Noto Serif TC";
letter-spacing:.35em;
writing-mode:vertical-rl
}
.home-hero-grid {
position:relative;
display:grid;
grid-template-columns:1.12fr .88fr;
gap:78px;
align-items:center
}
.hero-photo-frame {
position:relative;
padding:0 20px 20px 0;
background:transparent
}
.hero-photo-frame img {
width:100%;
aspect-ratio:1.15/1;
object-fit:contain;
object-position:center;
filter:drop-shadow(20px 20px 0 rgba(120,139,96,.16))
}
.hero-photo-frame>span {
position:absolute;
left:34px;
bottom:42px;
padding:9px 15px;
background:rgba(255,255,255,.94);
color:var(--brand-dark);
font-size:16px;
font-weight:500;
letter-spacing:.12em;
line-height:1.6;
box-shadow:0 5px 16px rgba(77,84,68,.08)
}
.hero-photo-frame:before {
content:"";
position:absolute;
width:70%;
height:70%;
left:8%;
top:14%;
border:1px solid rgba(185,137,83,.34);
border-radius:50%;
z-index:-1
}
.home-hero-copy h1 {
font-size:clamp(38px,4.6vw,58px);
line-height:1.45;
letter-spacing:.07em;
color:#4a5046
}
.home-hero-copy h1 strong {
color:var(--brand);
font-weight:600
}
.home-hero-copy>p:not(.eyebrow) {
color:var(--muted);
line-height:2
}
.hero-actions {
display:grid;
gap:10px;
margin-top:30px
}
.hero-line-card {
width:100%;
min-width:0;
min-height:68px;
display:flex;
flex-direction:row;
align-items:center;
gap:12px;
padding:13px 16px!important;
line-height:1.2
}
.hero-line-card>span:last-child {
display:grid;
gap:4px;
text-align:left
}
.hero-action-icon {
width:32px;
height:32px;
flex:0 0 32px;
display:inline-grid;
place-items:center;
border:1px solid currentColor;
border-radius:50%;
font-size:15px
}
.hero-line-card small {
font-size:12px;
font-weight:500;
letter-spacing:.12em;
opacity:.78
}
.hero-line-card strong {
font-size:15px;
letter-spacing:.08em
}
.hero-contact-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px
}
.hero-contact-card {
min-height:68px;
display:flex;
align-items:center;
flex-direction:row;
justify-content:center;
gap:10px;
padding:11px 15px;
border:1px solid var(--line);
background:rgba(255,255,255,.74);
color:var(--muted);
transition:background .2s ease,border-color .2s ease,transform .2s ease,color .2s ease
}
.hero-contact-label {
color:var(--brand-dark);
font-size:13px;
letter-spacing:.14em;
display:block
}
.hero-contact-card .hero-action-icon {
color:var(--brand)
}
.hero-contact-card strong {
font-size:17px;
font-weight:600;
letter-spacing:.04em;
display:block;
white-space:nowrap
}
.hero-contact-card:hover {
color:var(--brand-dark);
background:var(--brand-pale);
border-color:#cfd8c5;
transform:translateY(-3px)
}
.home-intro {
padding:92px 0;
background:var(--soft);
text-align:center
}
.intro-inner {
max-width:760px
}
.intro-inner .eyebrow {
justify-content:center
}
.intro-inner p:last-child {
color:var(--muted);
font-size:17px
}
.treatment-preview {
background:#fff
}
.airy-services {
display:grid;
grid-template-columns:1fr 1fr;
border-top:1px solid var(--line);
border-left:1px solid var(--line)
}
.airy-services>a {
position:relative;
overflow:hidden;
min-height:160px;
display:grid;
grid-template-columns:42px 1fr 20px;
gap:18px;
align-items:start;
padding:24px 28px;
border-right:1px solid var(--line);
border-bottom:1px solid var(--line);
transition:background .35s ease,box-shadow .35s ease
}
.airy-services>a:hover {
background:var(--brand-pale);
box-shadow:inset 0 -3px 0 var(--brand)
}
.airy-services>a:before {
content:"";
position:absolute;
width:150px;
height:150px;
right:-68px;
bottom:-82px;
border:1px solid rgba(185,137,83,.24);
border-radius:50%;
transition:transform .45s ease
}
.airy-services>a:hover:before {
transform:scale(1.35)
}
.airy-services>a>span {
color:var(--sand);
font:600 12px "Noto Serif TC";
transition:transform .35s ease
}
.airy-services h3 {
margin:0 0 9px;
color:var(--brand-dark);
font-size:22px;
transition:transform .35s ease
}
.airy-services p {
margin:0;
color:var(--muted);
font-size:15px;
transition:transform .35s ease
}
.airy-services ul {
display:flex;
flex-wrap:wrap;
gap:5px 16px;
margin:14px 0 0;
padding:0;
list-style:none;
color:var(--muted);
font-size:13px;
transition:transform .35s ease
}
.airy-services li:before {
content:"＋";
margin-right:3px;
color:var(--brand)
}
.airy-services>a:hover>span {
transform:translateX(5px)
}
.airy-services>a:hover h3,.airy-services>a:hover p,.airy-services>a:hover ul {
transform:translateX(-6px)
}
.airy-services>a>i {
margin-top:5px;
color:#aaa;
font-size:12px;
transition:transform .35s ease,color .35s ease
}
.airy-services>a:hover>i {
transform:translateX(6px);
color:var(--brand-dark)
}
.care-values {
padding:90px 0;
background:var(--brand-pale)
}
.care-heading {
text-align:center;
margin-bottom:40px
}
.care-heading .eyebrow {
justify-content:center
}
.care-heading h2 {
font-size:38px;
color:var(--brand-dark)
}
.care-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
background:#fff;
border:1px solid #d9ded4
}
.care-grid article {
padding:35px 40px;
border-right:1px solid #d9ded4
}
.care-grid article:last-child {
border:0
}
.care-grid h3 span {
font-size:23px
}
.care-grid h3 {
margin:12px 0;
display:flex;
align-items:baseline;
gap:12px;
font-size:23px;
color:var(--brand-dark)
}
.care-main {
color:var(--ink);
font-weight:500
}
.care-sub {
color:var(--sand);
font-weight:500
}
.care-grid p {
margin:0;
color:var(--muted);
font-size:15px
}
.team-preview {
background:#fff
}
.home-doctors {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px
}
.home-doctors>a {
padding-bottom:18px;
border-bottom:1px solid var(--line);
transition:transform .35s ease
}
.home-doctors>a:hover {
transform:translateY(-6px)
}
.doctor-image {
position:relative;
aspect-ratio:4/5;
display:grid;
place-items:center;
background:linear-gradient(155deg,#f1f0eb,#d8ddd2);
overflow:hidden
}
.doctor-image:after {
content:"";
position:absolute;
inset:14px;
border:1px solid rgba(120,139,96,.25)
}
.doctor-image img {
width:100%;
height:100%;
object-fit:cover;
object-position:center top;
transition:transform .55s cubic-bezier(.2,.7,.2,1)
}
.home-doctors>a:hover .doctor-image img {
transform:scale(1.07)
}
.doctor-image small {
position:absolute;
left:22px;
bottom:18px;
color:var(--brand);
font-size:10px;
letter-spacing:.16em
}
.home-doctors h3 {
margin:18px 0 5px;
font-size:21px
}
.home-doctors h3 small {
color:var(--muted);
font-size:12px
}
.home-doctors p {
margin:0;
color:var(--muted);
font-size:13px
}
.schedule-home {
background:var(--soft)
}
.schedule-home-grid {
display:grid;
grid-template-columns:.72fr 1.28fr;
gap:75px;
align-items:center
}
.schedule-home h2 {
font-size:42px;
color:var(--brand-dark)
}
.schedule-home p:not(.eyebrow) {
color:var(--muted)
}
.mini-schedule {
background:#fff;
border:1px solid var(--line)
}
.schedule-row {
min-height:70px;
display:grid;
grid-template-columns:1.15fr repeat(7,1fr);
border-bottom:1px solid var(--line)
}
.schedule-row:last-child {
border:0
}
.schedule-row>* {
display:grid;
place-items:center;
margin:0;
border-right:1px solid var(--line);
font-style:normal
}
.schedule-row>*:last-child {
border:0
}
.schedule-row b {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:0;
font-size:14px;
line-height:1.2
}
.schedule-row b small {
display:block;
color:var(--muted);
font-weight:400;
font-size:11px;
line-height:1.3
}
.schedule-head {
min-height:42px;
background:var(--brand);
color:#fff;
font-size:12px
}
.schedule-row .open {
color:var(--sand);
font-size:13px
}
.schedule-row .closed {
position:relative;
background:none
}
.schedule-row .closed:before,.full-row .is-closed:before {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(to bottom right,transparent calc(50% - .5px),#e1e0d9 50%,transparent calc(50% + .5px))
}
.location-home {
padding:82px 0;
background:#fff
}
.location-home-grid {
display:grid;
grid-template-columns:1fr 1.25fr;
border:1px solid var(--line)
}
.location-home-grid>div {
padding:48px
}
.location-home-grid>.map-panel {
padding:0;
min-height:360px
}
.location-home h2 {
font-size:38px
}
.address {
color:var(--brand-dark);
font:500 19px "Noto Serif TC"
}
.location-info .address {
display:flex;
align-items:center;
gap:14px
}
.contact-icon {
width:30px;
height:30px;
flex:0 0 30px;
display:inline-grid;
place-items:center;
border:1px solid #d8ded3;
border-radius:50%;
background:var(--brand-pale);
color:var(--brand);
font-size:13px
}
.contact-inline {
display:flex;
flex-wrap:wrap;
gap:18px;
margin-top:30px
}
.contact-inline a {
display:inline-flex;
align-items:center;
gap:10px;
padding:7px 11px 7px 7px;
border:1px solid #e1e4dd;
background:#fff;
border-radius:3px;
color:var(--muted);
font-size:15px;
transition:color .25s ease,background .25s ease,border-color .25s ease,transform .25s ease
}
.contact-inline a i {
font-size:12px
}
.contact-inline a:hover {
color:var(--brand-dark);
background:var(--brand-pale);
border-color:#d9ded4;
transform:translateY(-2px)
}
.map-panel {
min-height:220px;
overflow:hidden;
background:var(--brand-pale)
}
.map-panel iframe {
width:100%;
height:100%;
min-height:360px;
display:block;
border:0
}

/* common inner pages */.page-hero {
position:relative;
overflow:hidden;
padding:82px 0 66px;
background:var(--soft);
border-bottom:1px solid var(--line)
}
.page-hero:before,.page-hero:after {
content:"";
position:absolute;
pointer-events:none;
border:1px solid rgba(185,137,83,.28);
transform:rotate(28deg)
}
.page-hero:before {
width:180px;
height:180px;
right:8%;
top:-92px;
border-radius:38% 62% 46% 54%
}
.page-hero:after {
width:90px;
height:90px;
right:21%;
bottom:-48px;
border-color:rgba(120,139,96,.28);
border-radius:50%
}
.page-hero .shell {
display:grid;
grid-template-columns:1fr 1fr;
gap:65px;
align-items:end
}
.page-hero h1 {
font-size:clamp(38px,5vw,54px);
margin:7px 0 0;
color:#4b5147;
letter-spacing:.08em
}
.page-hero p {
color:var(--muted);
margin-bottom:7px
}
.treatment-row {
display:grid;
grid-template-columns:.85fr 1.15fr;
gap:90px;
padding:65px 0;
border-bottom:1px solid var(--line);
scroll-margin-top:105px
}
.treatment-row:first-child {
padding-top:0
}
.treatment-title>span {
color:var(--sand);
font:600 12px "Noto Serif TC"
}
.treatment-title h2 {
font-size:34px;
color:var(--brand-dark);
margin:8px 0 13px
}
.treatment-title p {
color:var(--muted)
}
.treatment-title .button {
margin-top:15px
}
.treatment-items {
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
align-content:center
}
.treatment-items span {
padding:17px 18px;
background:var(--paper);
border:1px solid var(--line);
font-size:14px
}
.treatment-items i {
margin-right:10px;
color:var(--brand)
}
.service-detail {
background:#fff
}
.service-detail-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:90px;
align-items:start
}
.service-detail h2 {
margin:0 0 20px;
color:var(--brand-dark);
font-size:38px
}
.service-lead {
max-width:560px;
color:var(--muted);
font-size:17px;
line-height:2
}
.service-checklist {
padding:30px;
background:var(--brand-pale);
border:1px solid #d9ded4
}
.service-checklist h3 {
margin:0 0 16px;
color:var(--brand-dark);
font-size:20px
}
.service-checklist ul {
display:grid;
grid-template-columns:1fr 1fr;
gap:11px 20px;
margin:0;
padding:0;
list-style:none;
color:var(--muted);
font-size:14px
}
.service-checklist li i {
margin-right:9px;
color:var(--brand)
}
.service-story {
padding:30px 0 90px;
background:#fff
}
.service-story-row {
display:grid;
grid-template-columns:1fr 1fr;
gap:90px;
align-items:center;
padding:82px 0;
border-top:1px solid var(--line)
}
.service-story-row.is-reversed .service-story-image {
order:2
}
.service-story-row.is-reversed .service-story-copy {
order:1
}
.service-story-image {
position:relative;
height:330px;
overflow:hidden;
background:var(--brand-pale)
}
.service-story-image:after {
content:"";
position:absolute;
inset:18px;
border:1px solid rgba(255,255,255,.7);
pointer-events:none
}
.service-story-image img {
width:100%;
height:100%;
object-fit:cover;
transition:transform .6s ease
}
.service-story-row:hover .service-story-image img {
transform:scale(1.05)
}
.service-story-image span {
position:absolute;
right:22px;
bottom:18px;
z-index:1;
color:#fff;
font:600 13px "Noto Serif TC";
letter-spacing:.16em
}
.service-story-copy h2 {
margin:8px 0 18px;
color:var(--brand-dark);
font-size:32px
}
.service-story-copy>p:last-child {
max-width:470px;
margin:0;
color:var(--muted);
font-size:16px;
line-height:2
}
.service-switcher {
padding:55px 0;
background:var(--soft)
}
.service-switcher> .shell > div {
display:grid;
grid-template-columns:repeat(4,1fr);
border-top:1px solid var(--line)
}
.service-switcher a {
display:flex;
justify-content:space-between;
gap:10px;
padding:18px 15px;
border-right:1px solid var(--line);
border-bottom:1px solid var(--line);
color:var(--muted);
font-size:13px
}
.service-switcher a:hover,.service-switcher a.is-active {
background:var(--brand-pale);
color:var(--brand-dark)
}

.doctor-grid {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:42px 25px
}
.doctor-card {
display:grid;
grid-template-columns:1.08fr .92fr;
min-height:375px;
border:1px solid var(--line);
background:#fff;
transition:box-shadow .35s ease,transform .35s ease
}
.doctor-card:hover {
transform:translateY(-7px);
box-shadow:0 18px 38px rgba(77,84,68,.13)
}
.doctor-photo {
position:relative;
display:grid;
place-items:center;
overflow:hidden;
background:linear-gradient(155deg,#f1f0eb,#d9ded3)
}
.doctor-photo:after {
content:"";
position:absolute;
inset:15px;
border:1px solid rgba(120,139,96,.25)
}
.doctor-initial {
color:rgba(120,139,96,.17);
font:600 130px "Noto Serif TC"
}
.doctor-photo div {
position:absolute;
left:25px;
bottom:22px;
color:var(--brand-dark);
font-size:12px
}
.doctor-photo img {
width:100%;
height:100%;
object-fit:cover;
object-position:center top;
transition:transform .55s cubic-bezier(.2,.7,.2,1)
}
.doctor-card:hover .doctor-photo img {
transform:scale(1.07)
}
.doctor-photo small {
display:block;
letter-spacing:.17em
}
.doctor-info {
display:flex;
flex-direction:column;
justify-content:end;
padding:28px;
transition:transform .35s ease
}
.doctor-card:hover .doctor-info {
transform:translateX(7px)
}
.doctor-info>p {
margin:0;
color:var(--brand);
font-size:12px
}
.doctor-info h2 {
font-size:27px;
margin:4px 0
}
.doctor-info>span {
min-height:56px;
color:var(--muted);
font-size:13px
}
.doctor-info .text-link {
margin-top:22px;
transition:color .25s ease,transform .35s ease
}
.doctor-card:hover .doctor-info .text-link {
transform:translateX(5px);
color:var(--brand-dark)
}
.team-note {
padding:85px 0;
background:var(--brand-pale);
text-align:center
}
.team-note .eyebrow {
justify-content:center
}
.team-note h2 {
font-size:38px;
color:var(--brand-dark)
}
.team-note>div>p:last-child {
color:var(--muted)
}

.doctor-profile {
padding:82px 0;
background:var(--soft)
}
.profile-grid {
display:grid;
grid-template-columns:420px 1fr;
gap:80px;
align-items:center
}
.profile-photo-box {
height:490px;
display:grid;
place-items:center;
position:relative;
background:linear-gradient(155deg,#efeee9,#d7ddd1)
}
.profile-photo-box:after {
content:"";
position:absolute;
inset:16px;
border:1px solid rgba(120,139,96,.25)
}
.profile-photo-box>span {
color:rgba(120,139,96,.18);
font:600 170px "Noto Serif TC"
}
.profile-photo-box img {
width:100%;
height:100%;
object-fit:cover;
object-position:center top
}
.doctor-bio {
margin:0 0 24px;
padding-left:20px;
color:var(--muted)
}
.doctor-bio li {
margin:4px 0
}
.profile-photo-box>small {
position:absolute;
left:28px;
bottom:24px;
color:var(--brand-dark)
}
.profile-grid h1 {
font-size:48px
}
.profile-grid h1 small {
font-size:17px
}
.profile-lead {
max-width:600px;
color:var(--muted);
font-size:17px
}
.profile-tags {
display:flex;
gap:8px;
margin:25px 0
}
.profile-tags span,.tags button,.tags a,.tag-cloud button,.tag-cloud a {
padding:6px 11px;
border:0;
background:var(--brand-pale);
color:var(--brand-dark);
font-size:12px
}
.profile-content {
display:grid;
grid-template-columns:1fr 320px;
gap:65px
}
.profile-content>aside {
padding:28px;
background:var(--soft);
border:1px solid var(--line)
}
.profile-content>aside p {
color:var(--muted)
}

.article-section {
padding-top:70px
}
.article-layout {
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:68px
}
.article-result {
display:flex;
justify-content:space-between;
padding-bottom:15px;
border-bottom:1px solid var(--line);
color:var(--muted);
font-size:13px
}
.article-result button,.article-result a {
border:0;
background:none;
color:var(--brand-dark);
cursor:pointer
}
.article-card {
display:grid;
grid-template-columns:180px 1fr;
gap:27px;
padding:30px 0;
border-bottom:1px solid var(--line)
}
.article-card[hidden] {
display:none
}
.article-thumb {
height:148px;
display:grid;
place-items:center;
background:var(--brand-pale);
color:rgba(120,139,96,.55);
font:600 46px "Noto Serif TC";
overflow:hidden
}
.article-thumb img {
width:100%;
height:100%;
object-fit:cover;
transition:transform .45s ease
}
.article-thumb:hover img {
transform:scale(1.06)
}
.article-meta {
display:flex;
gap:16px;
color:var(--brand);
font-size:11px
}
.article-meta time {
color:var(--muted)
}
.article-card h2 {
margin:7px 0;
font-size:22px;
line-height:1.5
}
.article-card h2 a:hover {
color:var(--brand-dark)
}
.article-card p {
margin-bottom:9px;
color:var(--muted);
font-size:14px
}
.tags a,.tag-cloud a {
display:inline-block;
margin:0 5px 5px 0;
transition:background .2s ease,color .2s ease
}
.tags a:hover,.tag-cloud a:hover,.tag-cloud a.is-active {
background:var(--brand);
color:#fff
}
.article-sidebar {
position:sticky;
top:115px;
align-self:start
}
.search-box,.side-block {
padding:23px;
margin-bottom:17px;
background:var(--paper);
border:1px solid var(--line)
}
.search-box label,.side-block h3 {
display:block;
margin-bottom:12px;
font:600 17px "Noto Serif TC"
}
.search-box>div {
position:relative
}
.search-box input {
width:100%;
height:45px;
padding:0 40px 0 12px;
border:1px solid var(--line);
background:#fff;
font:inherit
}
.search-box i {
position:absolute;
right:14px;
top:14px;
color:var(--brand)
}
.search-box button {
position:absolute;
inset:0 0 0 auto;
width:45px;
border:0;
background:transparent;
cursor:pointer
}
.search-box button i {
right:15px
}
.category-filter {
width:100%;
display:flex;
justify-content:space-between;
padding:10px 0;
border:0;
border-bottom:1px solid var(--line);
background:none;
color:var(--muted);
text-align:left;
cursor:pointer
}
.category-filter:hover,.category-filter.is-active {
color:var(--brand-dark);
font-weight:600
}
.tag-cloud {
display:flex;
flex-wrap:wrap;
gap:7px
}
.empty-state {
padding:50px;
text-align:center;
color:var(--muted)
}
.pagination {
display:flex;
justify-content:center;
align-items:center;
gap:6px;
margin-top:42px
}
.page-button {
min-width:34px;
height:34px;
display:inline-grid;
place-items:center;
padding:0 8px;
border:1px solid transparent;
background:transparent;
color:var(--muted);
font:500 13px/1 "Noto Sans TC",sans-serif;
cursor:pointer;
transition:background .25s ease,color .25s ease,border-color .25s ease
}
.page-button:hover:not(:disabled),.page-button.is-active {
border-color:var(--brand);
background:var(--brand);
color:#fff
}
.page-button:disabled {
opacity:.32;
cursor:not-allowed
}
.page-icon {
color:var(--brand-dark)
}
.page-button.is-disabled {
opacity:.32;
cursor:default
}
.article-detail-image {
display:block;
width:100%;
max-height:480px;
object-fit:cover;
margin-bottom:35px
}
.article-detail-tags {
margin-top:35px
}
.article-detail header {
padding:75px 0;
background:var(--soft)
}
.narrow {
max-width:820px
}
.article-detail header>a {
font-size:13px
}
.article-detail .eyebrow {
margin-top:50px
}
.article-detail h1 {
font-size:clamp(36px,5vw,54px);
line-height:1.45
}
.article-detail .lead {
color:var(--muted);
font-size:18px
}
.prose {
padding-top:65px;
padding-bottom:90px
}
.prose h2 {
font-size:27px;
margin-top:40px
}
.prose p {
color:#51564f;
font-size:17px;
line-height:2
}
.article-callout {
margin-top:42px;
padding:27px;
background:var(--brand-pale);
border-left:3px solid var(--brand)
}
.article-callout p {
margin:5px 0 0;
font-size:15px
}

.schedule-toolbar {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:24px
}
.schedule-toolbar b,.schedule-toolbar span {
display:block
}
.schedule-toolbar span {
color:var(--muted);
font-size:13px
}
.schedule-legend {
display:flex;
gap:20px
}
.schedule-legend span {
display:flex;
align-items:center;
gap:7px
}
.dot {
width:8px;
height:8px;
background:var(--brand);
border-radius:50%
}
.slash {
width:24px;
height:24px;
background:linear-gradient(135deg,transparent 49%,#e1e0d9 49.5%,#e1e0d9 50.5%,transparent 51%)
}
.full-schedule {
border:1px solid var(--line);
overflow-x:auto
}
.full-row {
min-width:920px;
display:grid;
grid-template-columns:1.1fr repeat(7,1fr);
min-height:88px;
border-bottom:1px solid var(--line)
}
.full-row:last-child {
border:0
}
.full-row>* {
display:grid;
place-items:center;
margin:0;
border-right:1px solid var(--line);
font-style:normal
}
.full-row>*:last-child {
border:0
}
.full-row>b small {
display:block;
color:var(--muted);
font-weight:400;
font-size:12px;
margin-top:1px;
line-height:1.35
}
.full-row>b {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:0;
line-height:1.2
}
.full-head {
min-height:58px;
background:var(--brand);
color:#fff
}
.full-head small {
color:rgba(255,255,255,.65)
}
.full-row .is-open {
color:var(--brand)
}
.full-row .is-open small {
color:var(--brand-dark);
font-size:15px;
font-weight:500;
line-height:1.4;
text-align:center
}
.full-row .is-closed {
position:relative;
background:none
}
.schedule-bottom {
display:flex;
justify-content:space-between;
gap:35px;
align-items:center;
margin-top:28px
}
.schedule-bottom p {
max-width:570px;
margin:0;
color:var(--muted);
font-size:13px
}
.schedule-bottom>div {
display:flex;
gap:8px
}
.schedule-contact-actions {
flex-wrap:wrap;
justify-content:flex-end
}
.schedule-contact-actions .button {
min-height:44px;
padding:0 16px;
font-size:14px
}
.schedule-contact-actions .button i {
font-size:16px
}

.floating-actions {
position:fixed;
right:0;
bottom:24px;
z-index:70;
display:flex;
flex-direction:column;
}
.floating-actions a {
width:48px;
height:48px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.45);
border-right:0;
border-radius:0;
background:rgba(255,255,255,.96);
color:var(--brand-dark);
box-shadow:0 4px 14px rgba(70,78,64,.08);
transition:opacity .28s ease,transform .28s ease,background .2s ease,color .2s ease
}
.floating-actions a:hover {
background:var(--brand);
color:#fff
}
.floating-actions .float-line {
background:#73a866;
color:#fff
}
.floating-actions .float-facebook {
background:#97a6ad;
color:#fff
}
.floating-actions .float-instagram {
background:#b59696;
color:#fff
}
.floating-actions .float-top {
background:#e8ece3;
color:var(--brand-dark);
border-color:#d3dacb;
box-shadow:0 4px 14px rgba(70,78,64,.16);
opacity:0;
visibility:hidden;
transform:translateY(8px);
pointer-events:none
}
.floating-actions.is-scrolled .float-top {
opacity:1;
visibility:visible;
transform:none;
pointer-events:auto
}
.site-footer {
padding:65px 0 24px;
background:var(--soft);
color:var(--ink);
border-top:1px solid var(--line)
}
.footer-grid {
display:grid;
grid-template-columns:2fr repeat(3,1fr);
gap:50px
}
.footer-brand p {
margin-top:20px;
color:var(--muted)
}
.footer-brand .brand-mark {
width:58px;
height:58px
}
.footer-brand .brand {
margin-left:-8px
}
.footer-heading {
margin-left:-8px
}
.footer-grid>div>b {
display:block;
margin-bottom:14px;
color:var(--brand-dark);
font:600 16px "Noto Serif TC"
}
.footer-heading {
display:flex!important;
align-items:center;
gap:10px
}
.footer-icon {
width:30px;
height:30px;
display:inline-grid;
place-items:center;
border:1px solid #d2dacb;
border-radius:50%;
background:#fff;
color:var(--brand);
font-size:13px;
text-align:center
}
.footer-grid>div>a:not(.brand),.footer-grid>div>span {
display:block;
margin:7px 0;
color:var(--muted);
font-size:14px
}
.footer-grid>div>a:hover {
color:var(--sand)
}
.footer-bottom {
display:flex;
justify-content:space-between;
gap:30px;
margin-top:44px;
padding-top:22px;
border-top:1px solid var(--line);
color:#999b95;
font-size:11px
}

/* simple /webcms mockup */.admin-page {
background:#f4f4f1
}
.admin-shell {
min-height:100vh;
display:grid;
grid-template-columns:245px 1fr
}
.admin-side {
display:flex;
flex-direction:column;
padding:28px 22px;
background:#fff;
border-right:1px solid var(--line)
}
.admin-side nav {
display:grid;
margin-top:50px
}
.admin-side nav a {
padding:12px;
color:var(--muted);
border-radius:2px
}
.admin-side nav a:hover,.admin-side nav a.is-active {
background:var(--brand-pale);
color:var(--brand-dark)
}
.back-site {
margin-top:auto;
color:var(--muted);
font-size:13px
}
.admin-main {
padding:46px
}
.admin-title {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:27px
}
.admin-title small {
color:var(--brand);
letter-spacing:.15em
}
.admin-title h1 {
font-size:33px;
margin:4px 0
}
.admin-title p {
margin:0;
color:var(--muted)
}
.admin-panel {
padding:29px;
background:#fff;
border:1px solid var(--line)
}
.week-nav {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:21px
}
.week-nav button {
border:0;
background:none;
color:var(--brand-dark);
cursor:pointer
}
.check-schedule {
border:1px solid var(--line);
overflow-x:auto
}
.check-row {
min-width:720px;
display:grid;
grid-template-columns:1.4fr repeat(6,1fr);
min-height:80px;
border-bottom:1px solid var(--line)
}
.check-row:last-child {
border:0
}
.check-row>* {
display:grid;
place-items:center;
margin:0;
border-right:1px solid var(--line)
}
.check-row>*:last-child {
border:0
}
.check-row b small {
display:block;
color:var(--muted);
font-weight:400;
font-size:10px
}
.check-head {
min-height:44px;
background:var(--soft)
}
.check-row input {
position:absolute;
opacity:0
}
.check-row label span {
width:34px;
height:34px;
display:grid;
place-items:center;
border:1px solid var(--line);
color:transparent;
cursor:pointer
}
.check-row input:checked+span {
background:var(--brand);
border-color:var(--brand);
color:#fff
}
.admin-hint {
display:flex;
gap:15px;
margin-top:24px;
padding:18px;
background:var(--soft)
}
.admin-hint>i {
color:var(--sand)
}
.admin-hint p {
margin:0;
color:var(--muted);
font-size:13px
}
.toast {
position:fixed;
right:30px;
bottom:30px;
padding:14px 20px;
background:var(--brand);
color:#fff;
opacity:0;
transform:translateY(15px);
transition:.25s
}
.toast.show {
opacity:1;
transform:none
}

[data-reveal] {
opacity:0;
transform:translateY(34px);
transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)
}
[data-reveal].is-revealed {
opacity:1;
transform:none
}

@media(max-width:1020px) {
.nav-booking {
display:none
}
.main-nav {
gap:18px
}
.home-hero-grid {
gap:40px
}
.home-doctors {
grid-template-columns:repeat(2,1fr)
}
.schedule-home-grid {
grid-template-columns:1fr;
gap:38px
}
.footer-grid {
grid-template-columns:1.5fr 1fr 1fr
}
.footer-grid>div:last-child {
display:none
}
.doctor-grid {
grid-template-columns:1fr
}
.article-layout {
grid-template-columns:minmax(0,1fr) 270px
}
.admin-shell {
grid-template-columns:200px 1fr
}
.admin-main {
padding:30px
}

}

@media(max-width:760px) {
.shell {
width:min(100% - 30px,1160px)
}
.nav-shell {
height:72px
}
.brand-mark {
width:43px;
height:43px
}
.footer-brand .brand-mark {
width:50px;
height:50px
}
.brand-copy b {
font-size:18px
}
.brand-copy b small {
font-size:11px
}
.nav-toggle {
display:block
}
.nav-toggle {
order:2;
margin-left:auto;
margin-right:2px
}
.nav-socials {
order:3;
margin-left:8px;
gap:4px
}
.nav-toggle.is-open span:first-child {
transform:translateY(3px) rotate(45deg)
}
.nav-toggle.is-open span:last-child {
transform:translateY(-3px) rotate(-45deg)
}
.nav-toggle span {
transition:transform .25s ease
}
.main-nav {
position:fixed;
inset:72px 0 0;
display:none;
align-content:start;
gap:0;
padding:30px;
background:#fff
}
.main-nav.is-open {
display:grid
}
.nav-dropdown {
width:100%
}
.nav-dropdown-head {
justify-content:space-between;
border-bottom:1px solid var(--line)
}
.nav-dropdown-head>a {
border:0
}
.nav-dropdown-toggle {
width:38px;
height:38px;
margin:5px 0;
font-size:13px
}
.nav-dropdown.is-open .nav-dropdown-toggle {
transform:none
}
.nav-dropdown-menu {
position:static;
min-width:0;
padding:5px 0 8px;
border:0;
box-shadow:none;
transform:none;
display:none;
opacity:1;
visibility:visible
}
.nav-dropdown.is-open .nav-dropdown-menu {
display:grid;
transform:none
}
.nav-dropdown-menu a {
padding:8px 18px;
border-bottom:1px solid rgba(222,221,214,.7);
color:var(--muted);
font:400 14px/1.5 "Noto Sans TC",sans-serif
}
.main-nav a {
padding:15px 4px;
border-bottom:1px solid var(--line);
font:600 19px "Noto Serif TC"
}
.main-nav .nav-dropdown-menu a {
padding:8px 18px;
border-bottom:1px solid rgba(222,221,214,.7);
color:var(--muted);
font:400 14px/1.5 "Noto Sans TC",sans-serif
}
.main-nav a:after {
display:none
}
.section {
padding:72px 0
}
.home-hero {
min-height:0;
padding:55px 0 65px
}
.vertical-word {
display:none
}
.home-hero-grid,.page-hero .shell,.profile-grid,.profile-content {
grid-template-columns:1fr
}
.home-hero-copy {
grid-row:1
}
.home-hero-copy h1 {
font-size:36px
}
.hero-photo-frame {
margin-top:15px;
padding:12px
}
.hero-actions {
display:grid;
align-items:start
}
.hero-line-card {
width:100%;
min-width:0
}
.hero-contact-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
width:100%
}
.hero-contact-card {
width:auto;
min-width:0
}
.airy-services,.care-grid {
grid-template-columns:1fr
}
.airy-services>a {
min-height:0
}
.care-grid article {
border-right:0;
border-bottom:1px solid #d9ded4
}
.care-grid article:last-child {
border-bottom:0
}
.split-title {
display:block
}
.split-title>p {
margin-top:16px
}
.home-doctors {
grid-template-columns:1fr 1fr;
gap:18px 12px
}
.schedule-row {
min-width:650px
}
.mini-schedule {
overflow-x:auto
}
.location-home-grid {
grid-template-columns:1fr
}
.map-panel {
min-height:300px
}
.footer-grid {
grid-template-columns:1fr 1fr
}
.footer-brand {
grid-column:1/-1
}
.footer-bottom {
display:grid
}
.floating-actions {
right:0;
bottom:16px
}
.treatment-row {
grid-template-columns:1fr;
gap:28px
}
.service-detail-grid {
grid-template-columns:1fr;
gap:35px
}
.service-story {
padding-top:0
}
.service-story-row,.service-story-row.is-reversed {
grid-template-columns:1fr;
gap:28px;
padding:55px 0
}
.service-story-row.is-reversed .service-story-image,
.service-story-row.is-reversed .service-story-copy {
order:initial
}
.service-story-image {
height:260px
}
.service-switcher> .shell > div {
grid-template-columns:1fr 1fr
}
.doctor-card {
grid-template-columns:1fr;
min-height:0
}
.doctor-photo {
min-height:355px
}
.article-layout {
grid-template-columns:1fr
}
.article-sidebar {
position:static;
grid-row:1
}
.article-card {
grid-template-columns:110px 1fr
}
.article-thumb {
height:120px
}
.article-card h2 {
font-size:19px
}
.profile-photo-box {
height:415px
}
.schedule-bottom {
display:block
}
.schedule-bottom>div {
margin-top:20px
}
.admin-shell {
display:block
}
.admin-side {
display:none
}
.admin-main {
padding:22px 15px
}
.admin-title {
display:block
}
.admin-title .button {
margin-top:18px
}

}

@media(max-width:430px) {
.hero-photo-frame>span {
left:18px;
bottom:24px;
padding:7px 10px;
font-size:14px;
letter-spacing:.08em
}
.home-hero-copy h1 {
font-size:32px
}
.center-title h2,.intro-inner h2,.care-heading h2,.schedule-home h2,.location-home h2 {
font-size:30px
}
.home-doctors h3 {
font-size:18px
}
.footer-grid {
grid-template-columns:1fr
}
.footer-brand {
grid-column:auto
}
.contact-inline {
display:grid;
gap:6px
}

}

.cms-table {
background:#fff;
border:1px solid var(--line);
overflow-x:auto
}
.cms-tr {
min-width:720px;
display:grid;
grid-template-columns:1.4fr 1fr 110px 130px;
align-items:center;
min-height:72px;
padding:0 22px;
border-bottom:1px solid var(--line);
gap:18px
}
.cms-tr:last-child {
border:0
}
.cms-tr span {
color:var(--muted);
font-size:13px
}
.cms-th {
min-height:46px;
background:var(--soft)
}
.cms-th span {
font-weight:600;
color:var(--ink)
}
.cms-status {
color:var(--brand-dark)!important
}
.cms-tr button {
padding:5px 7px;
border:0;
background:none;
color:var(--brand-dark);
cursor:pointer
}

.cms-cards {
display:grid;
grid-template-columns:1fr 1fr;
gap:18px
}
.cms-cards>a {
min-height:135px;
display:grid;
grid-template-columns:48px 1fr 20px;
gap:18px;
align-items:center;
padding:28px;
background:#fff;
border:1px solid var(--line)
}
.cms-cards>a:hover {
border-color:#bfc9b4;
box-shadow:var(--shadow)
}
.cms-cards>a>i {
width:48px;
height:48px;
display:grid;
place-items:center;
border-radius:50%;
background:var(--brand-pale);
color:var(--brand);
font-size:18px
}
.cms-cards b,.cms-cards small {
display:block
}
.cms-cards b {
font:600 18px "Noto Serif TC"
}
.cms-cards small {
margin-top:4px;
color:var(--muted);
font-size:12px
}
.cms-cards em {
color:var(--brand);
font-style:normal
}
@media(max-width:760px) {
.cms-cards {
grid-template-columns:1fr
}

}