/* 關於我們：沿用伴寵一程藍、青綠與草綠品牌色 */
.about-page {
  --about-ink: #0e3f58;
  --about-muted: #465861;
  --about-cream: #f7fcfd;
  --about-cream-deep: #edf8fc;
  --about-coral: #168cbd;
  --about-coral-dark: #0c5f80;
  --about-gold: #a7c42c;
  --about-sage: #25bcb5;
  --about-line: #b7d3df;
  color: var(--about-ink);
  background: var(--about-cream);
  overflow: hidden;
}
.about-page p { color: var(--about-muted); }
.about-page h1, .about-page h2, .about-page h3 { color: var(--about-ink); }

.about-hero { position: relative; padding: 40px 0 108px; background: radial-gradient(circle at 79% 18%, rgba(37, 188, 181, .15), transparent 23rem), linear-gradient(135deg, #fff 0%, #f7fcfd 56%, #edf8fc 100%); }
.about-hero::after { content: ""; position: absolute; right: -8rem; bottom: -10rem; width: 30rem; height: 30rem; border: 1px solid rgba(22, 140, 189, .14); border-radius: 50%; pointer-events: none; }
.about-hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(390px, .98fr); gap: clamp(48px, 8vw, 116px); align-items: center; }
.about-hero__copy { position: relative; z-index: 1; max-width: 640px; min-width: 0; }
.about-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 7px 14px; border: 1px solid rgba(22, 140, 189, .18); border-radius: 999px; color: var(--about-coral) !important; background: rgba(237, 248, 252, .82); box-shadow: 0 6px 16px rgba(18, 59, 82, .06); font-family: var(--title-font), "Noto Sans TC", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .1em; }
.about-eyebrow__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--about-gold); box-shadow: 0 0 0 6px rgba(167, 196, 44, .18); }
.about-hero h1 { max-width: 650px; margin: 0; font-family: var(--title-font), "Noto Sans TC", sans-serif; font-size: clamp(34px, 3.8vw, 58px); font-weight: 700; line-height: 1.2; letter-spacing: -.03em; }
.about-hero h1 span, .about-story h2 span { color: var(--about-coral); }
.about-hero__lead { max-width: 650px; margin: 24px 0 0; font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }
.about-hero__lead p { margin: 0; }
.about-hero__lead p + p { margin-top: 12px; }
.about-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 34px; }
.about-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; border-radius: 999px; padding: 0 22px; font-size: 15px; font-weight: 700; transition: transform .25s ease, box-shadow .25s ease, color .25s ease; }
.about-btn:hover { transform: translateY(-2px); }
.about-btn--primary { color: #fff; background: var(--about-coral); box-shadow: 0 12px 24px rgba(22, 140, 189, .22); }
.about-btn--primary:hover { color: #fff; background: var(--about-coral-dark); box-shadow: 0 16px 28px rgba(12, 95, 128, .28); }
.about-btn--text { color: var(--about-ink); padding-inline: 8px; }
.about-btn--text:hover { color: var(--about-coral); }
.about-hero__stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 54px; }
.about-hero__stats div { min-width: 142px; padding-right: 26px; margin-right: 26px; border-right: 1px solid var(--about-line); }
.about-hero__stats div:last-child { margin-right: 0; padding-right: 0; border-right: 0; }
.about-hero__stats strong { display: block; color: var(--about-ink); font-family: var(--title-font), sans-serif; font-size: 29px; line-height: 1; }
.about-hero__stats span { display: block; margin-top: 8px; color: var(--about-muted); font-size: 13px; }

.about-core { position: relative; z-index: 1; margin-top: 76px; padding-top: 54px; border-top: 1px solid rgba(183, 211, 223, .8); }
.about-core__heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.about-core__heading .about-eyebrow { margin-bottom: 13px; }
.about-core__heading h2 { margin: 0; color: var(--about-ink); font-family: var(--title-font), "Noto Sans TC", sans-serif; font-size: clamp(28px, 3vw, 42px); line-height: 1.25; }
.about-core__heading > p { max-width: 310px; margin: 0 0 3px; font-size: 16px; line-height: 1.8; }
.about-core-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.about-core-card { display: flex; gap: 16px; min-height: 166px; padding: 24px 22px; border: 1px solid rgba(183, 211, 223, .95); border-radius: 18px; background: rgba(255, 255, 255, .86); box-shadow: 0 10px 26px rgba(18, 59, 82, .05); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.about-core-card:hover { transform: translateY(-4px); border-color: rgba(22, 140, 189, .55); box-shadow: 0 16px 30px rgba(18, 59, 82, .1); }
.about-core-card__icon { flex: 0 0 56px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--about-cream-deep); }
.about-core-card__icon img { display: block; width: 42px; height: 42px; object-fit: contain; }
.about-core-card:nth-child(3n + 2) .about-core-card__icon { background: #e7f8f7; }
.about-core-card:nth-child(3n + 3) .about-core-card__icon { background: #f1f7df; }
.about-core-card h3 { margin: 2px 0 8px; color: var(--about-ink); font-family: var(--title-font), "Noto Sans TC", sans-serif; font-size: 19px; line-height: 1.35; }
.about-core-card p { margin: 0; font-size: 14px; line-height: 1.75; }

.about-hero__visual { position: relative; min-height: 560px; }
.about-hero__photo { position: absolute; inset: 32px 30px 16px 18px; z-index: 1; margin: 0; overflow: hidden; border-radius: 42% 42% 42% 12%; border: 12px solid rgba(255, 255, 255, .82); box-shadow: 0 26px 60px rgba(18, 59, 82, .16); transform: rotate(2deg); }
.about-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-hero__sun { position: absolute; top: 0; right: 3%; z-index: 0; width: 140px; height: 140px; border-radius: 50%; background: var(--about-sage); opacity: .28; filter: blur(1px); }
.about-hero__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(22, 140, 189, .3); }
.about-hero__ring--one { inset: 4px 0 12px 0; transform: rotate(15deg); }
.about-hero__ring--two { inset: 40px -16px 4px 42px; border-color: rgba(167, 196, 44, .45); transform: rotate(-18deg); }
.about-hero__note { position: absolute; right: -22px; bottom: 38px; z-index: 2; display: flex; align-items: center; gap: 13px; padding: 15px 19px 15px 14px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 18px; background: rgba(255, 255, 255, .9); box-shadow: 0 15px 34px rgba(18, 59, 82, .14); backdrop-filter: blur(10px); }
.about-hero__note-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; color: #fff; background: var(--about-coral); }
.about-hero__note small, .about-hero__note strong { display: block; }
.about-hero__note small { color: var(--about-muted); font-size: 11px; letter-spacing: .12em; }
.about-hero__note strong { margin-top: 3px; color: var(--about-ink); font-size: 15px; }
.about-hero__spark { position: absolute; z-index: 2; color: var(--about-gold); font-size: 30px; }
.about-hero__spark--one { top: 23%; left: -4%; }
.about-hero__spark--two { right: 7%; top: 42%; color: var(--about-sage); font-size: 20px; }

.about-story { padding: clamp(86px, 10vw, 142px) 0; background: #fff; }
.about-story__grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(52px, 10vw, 150px); align-items: start; }
.about-story__aside { position: sticky; top: 110px; padding: 18px 0 0 24px; border-left: 2px solid var(--about-coral); }
.about-story__index { color: var(--about-coral); font-family: var(--title-font), sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .14em; }
.about-story__index span { margin: 0 4px; color: #9bb9c7; }
.about-story__quote-mark { margin-top: 50px; color: var(--about-gold); font-family: Georgia, serif; font-size: 96px; line-height: .7; }
.about-story__aside p { max-width: 250px; margin: 26px 0; color: var(--about-ink); font-family: var(--title-font), sans-serif; font-size: 27px; line-height: 1.45; }
.about-story__line { width: 44px; height: 2px; margin: 30px 0 13px; background: var(--about-gold); }
.about-story__aside > span:last-child { color: var(--about-muted); font-size: 13px; letter-spacing: .1em; }
.about-story__copy { max-width: 770px; }
.about-story h2, .about-section-heading h2 { margin: 0; font-family: var(--title-font), "Noto Sans TC", sans-serif; font-size: clamp(34px, 4vw, 55px); line-height: 1.2; letter-spacing: -.025em; }
.about-story__copy > p:not(.about-eyebrow) { margin: 24px 0 0; font-size: 17px; line-height: 2; }
.about-story__detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--about-line); }
.about-story__detail span { color: var(--about-ink); font-size: 15px; font-weight: 600; }
.about-story__detail i { margin-right: 10px; color: var(--about-coral); }
.about-story blockquote { margin: 36px 0 0; padding: 24px 26px; border-left: 3px solid var(--about-gold); border-radius: 0 16px 16px 0; background: var(--about-cream); color: var(--about-ink); font-family: var(--title-font), "Noto Sans TC", sans-serif; font-size: 19px; line-height: 1.75; }

.about-vm { padding: clamp(88px, 10vw, 140px) 0; background: var(--about-cream); }
.about-section-heading { max-width: 700px; }
.about-section-heading > p:last-child { max-width: 610px; margin: 22px 0 0; font-size: 17px; line-height: 1.9; }
.about-vm__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 50px; }
.about-vm__card { position: relative; overflow: hidden; min-height: 330px; padding: 32px 34px 36px; border-radius: 24px; }
.about-vm__card::after { content: ""; position: absolute; right: -50px; bottom: -70px; width: 230px; height: 230px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 50%; }
.about-vm__card--vision { background: var(--about-coral); }
.about-vm__card--mission { background: var(--about-sage); }
.about-vm__card h3, .about-vm__card p { position: relative; z-index: 1; color: #fff; }
.about-vm__card-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; color: rgba(255, 255, 255, .84); }
.about-vm__number { font-family: var(--title-font), sans-serif; font-size: 14px; letter-spacing: .13em; }
.about-vm__card-top i { font-size: 28px; }
.about-vm__label { margin: 36px 0 10px !important; color: rgba(255, 255, 255, .82) !important; font-size: 14px; font-weight: 700; letter-spacing: .13em; }
.about-vm__card h3 { max-width: 560px; margin: 0; font-family: var(--title-font), "Noto Sans TC", sans-serif; font-size: clamp(25px, 2.3vw, 34px); line-height: 1.35; }
.about-vm__card > p:last-child { max-width: 540px; margin: 19px 0 0; color: rgba(255, 255, 255, .88); font-size: 16px; line-height: 1.8; }
.about-values-heading { display: flex; align-items: center; gap: 20px; margin: 80px 0 24px; color: var(--about-coral); font-family: var(--title-font), sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .12em; }
.about-values-heading div { width: 80px; height: 1px; background: var(--about-line); }
.about-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.about-value { position: relative; min-height: 208px; padding: 27px 25px 24px; border: 1px solid var(--about-line); border-radius: 18px; background: rgba(255, 255, 255, .62); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.about-value:hover { transform: translateY(-5px); background: #fff; box-shadow: 0 16px 32px rgba(18, 59, 82, .08); }
.about-value > span { position: absolute; top: 22px; right: 24px; color: #9bb9c7; font-family: var(--title-font), sans-serif; font-size: 13px; }
.about-value i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--about-coral); background: var(--about-cream-deep); }
.about-value h3 { margin: 22px 0 7px; font-family: var(--title-font), "Noto Sans TC", sans-serif; font-size: 21px; }
.about-value p { margin: 0; font-size: 15px; line-height: 1.75; }

.about-milestones { padding: clamp(86px, 10vw, 138px) 0 150px; background: #fff; }
.about-section-heading--split { display: flex; align-items: end; justify-content: space-between; gap: 40px; max-width: none; }
.about-section-heading--split > p { max-width: 300px; margin: 0 !important; font-size: 16px; line-height: 1.8; }
.about-timeline { position: relative; max-width: 970px; margin: 70px auto 0; }
.about-timeline::before { content: ""; position: absolute; top: 11px; bottom: 25px; left: 102px; width: 1px; background: var(--about-line); }
.about-timeline__item { position: relative; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 35px; padding: 0 0 40px; }
.about-timeline__item::before { content: ""; position: absolute; top: 7px; left: 96px; z-index: 1; width: 13px; height: 13px; border: 3px solid #fff; border-radius: 50%; background: var(--about-coral); box-shadow: 0 0 0 1px var(--about-coral); }
.about-timeline__year { color: var(--about-coral); font-family: var(--title-font), sans-serif; font-size: 20px; font-weight: 700; text-align: right; }
.about-timeline__content { padding: 0 0 4px 39px; }
.about-timeline__content h3 { margin: 0; font-family: var(--title-font), "Noto Sans TC", sans-serif; font-size: 23px; line-height: 1.35; }
.about-timeline__content p { max-width: 680px; margin: 11px 0 0; font-size: 16px; line-height: 1.85; }
.about-timeline__item--current .about-timeline__content { padding: 22px 28px 24px 39px; border-radius: 18px; background: var(--about-cream); }

@media (max-width: 991px) {
  .about-hero__grid { grid-template-columns: 1fr; }
  .about-hero__copy { max-width: 760px; }
  .about-hero__visual { min-height: 500px; max-width: 620px; width: 100%; margin: 0 auto; }
  .about-core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-story__grid { grid-template-columns: 1fr; gap: 44px; }
  .about-story__aside { position: static; max-width: 500px; }
  .about-story__quote-mark { margin-top: 28px; }
  .about-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  /* 共用頁首在手機版為絕對定位，Hero 要留出完整頁首高度。 */
  .about-hero { padding-top: 126px; padding-bottom: 78px; }
  .header-area.header-layoutone .header-whatsapp-btn { width: 42px; height: 42px; justify-content: center; padding: 0; border-radius: 50%; }
  .header-area.header-layoutone .header-whatsapp-btn span { display: none; }
  .header-area.header-layoutone .header-main .container { padding-left: 16px; padding-right: 16px; }
  .about-hero__visual { min-height: 390px; }
  .about-hero__grid, .about-hero__copy, .about-hero__visual { width: 100%; min-width: 0; max-width: 100%; }
  .about-hero__lead { max-width: calc(100vw - 32px); word-break: break-all; }
  .about-hero__photo { inset: 18px 20px 12px 12px; border-width: 8px; border-radius: 38% 38% 38% 10%; }
  .about-hero__note { right: 0; bottom: 16px; }
  .about-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: calc(100vw - 32px); margin-top: 40px; }
  .about-hero__stats div { min-width: 0; padding-right: 10px; margin-right: 10px; }
  .about-hero__stats strong { font-size: 24px; }
  .about-hero__stats span { font-size: 12px; white-space: normal; word-break: break-all; }
  .about-core { margin-top: 58px; padding-top: 40px; }
  .about-core__heading { display: block; }
  .about-core__heading > p { margin-top: 16px; }
  .about-core-grid { grid-template-columns: 1fr; margin-top: 24px; }
  .about-core-card { min-height: 0; padding: 21px 19px; }
  .about-story__detail, .about-vm__cards, .about-values { grid-template-columns: 1fr; }
  .about-vm__card { min-height: 0; }
  .about-section-heading--split { display: block; }
  .about-section-heading--split > p { margin-top: 22px !important; }
  .about-timeline { margin-top: 48px; }
  .about-timeline::before { left: 12px; }
  .about-timeline__item { display: block; padding: 0 0 34px 43px; }
  .about-timeline__item::before { left: 6px; }
  .about-timeline__year { margin-bottom: 9px; text-align: left; font-size: 18px; }
  .about-timeline__content { padding: 0; }
  .about-timeline__item--current .about-timeline__content { padding: 18px 18px 20px; }
}
@media (max-width: 480px) {
  .about-hero h1 { font-size: 39px; }
  .about-hero__lead, .about-story__copy > p:not(.about-eyebrow), .about-section-heading > p:last-child { font-size: 16px; }
  .about-hero__actions { align-items: stretch; flex-direction: column; }
  .about-btn { justify-content: center; }
  .about-hero__stats div { min-width: 0; flex: 1; }
  .about-hero__stats div:last-child strong { white-space: nowrap; }
  .about-story__aside { padding-left: 18px; }
}

/* === 參考圖版式：模塊一置中、公仔兩側；模塊二左文右圖 === */
.about-hero { padding-top: 40px; padding-bottom: 76px; background: #fff; }
.about-hero .about-eyebrow { padding: 7px 14px; border: 1px solid rgba(22, 140, 189, .18); border-radius: 999px; background: rgba(237, 248, 252, .82); box-shadow: 0 6px 16px rgba(18, 59, 82, .06); letter-spacing: .1em; }
.about-hero .about-eyebrow__dot { width: 25px; height: 5px; border-radius: 4px; background: linear-gradient(90deg, var(--about-coral) 0 34%, var(--about-sage) 34% 67%, var(--about-gold) 67% 100%); box-shadow: none; }
.about-hero__center { position: relative; display: grid; grid-template-columns: minmax(250px, .8fr) minmax(480px, 1.35fr) minmax(290px, .9fr); align-items: end; gap: 20px; min-height: 470px; }
.about-hero__copy { max-width: 690px; margin: 0 auto; text-align: center; }
.about-hero__copy .about-eyebrow { justify-content: center; }
.about-hero h1 { max-width: none; }
.about-hero__lead { max-width: 660px; margin-left: auto; margin-right: auto; }
.about-hero__actions { justify-content: center; }
.about-hero__pet { position: relative; align-self: end; display: flex; align-items: end; height: 100%; pointer-events: none; }
.about-hero__pet img { display: block; width: 100%; height: auto; object-fit: contain; object-position: bottom; filter: drop-shadow(0 20px 20px rgba(18, 59, 82, .08)); }
.about-hero__pet--left { justify-content: flex-end; padding: 44px 0 0; }
.about-hero__pet--left img { max-width: 180px; }
.about-hero__pet--right { justify-content: flex-start; padding: 32px 0 0; }
.about-hero__pet--right img { max-width: 190px; }
.about-hero__pet img { width: 88px; padding: 16px; border-radius: 22px; background: var(--about-cream-deep); filter: none; }
.about-hero__pet--right img { background: #e7f8f7; }
.about-hero__paw { position: absolute; color: rgba(22, 140, 189, .18); font-size: 34px; transform: rotate(-18deg); }
.about-hero__paw--one { top: 19%; left: 2%; }
.about-hero__paw--two { top: 13%; right: 4%; color: rgba(37, 188, 181, .2); transform: rotate(18deg); }
.about-core { margin-top: 56px; padding-top: 42px; border-top-color: rgba(183, 211, 223, .72); }
.about-core__heading { display: block; text-align: center; }
.about-core__title { margin: 0 0 10px; color: var(--about-coral); font-size: 16px; font-weight: 700; letter-spacing: .12em; }
.about-core__heading .about-eyebrow { justify-content: center; margin-bottom: 10px; }
.about-core__heading > p { max-width: 560px; margin: 14px auto 0; }
.about-core-grid { margin-top: 28px; }
.about-core-card { display: flex; flex-direction: column; align-items: center; min-height: 238px; padding: 28px 24px 24px; text-align: center; }
.about-core-card > div { width: 100%; }
.about-core-card__icon { flex: 0 0 64px; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 18px; color: var(--about-coral); background: var(--about-cream-deep); font-size: 25px; }
.about-core-card__icon img { display: none; }
.about-core-card:nth-child(3n + 2) .about-core-card__icon { color: var(--about-sage); background: #e7f8f7; }
.about-core-card:nth-child(3n + 3) .about-core-card__icon { color: #718e19; background: #f1f7df; }
.about-core-card h3 { margin-top: 0; }
.about-core-card p { max-width: 300px; margin-left: auto; margin-right: auto; }

.about-story__grid { grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); gap: clamp(52px, 8vw, 120px); align-items: center; }
.about-story { padding-top: 94px; }
.about-story__copy { max-width: 760px; }
.about-story__copy strong { color: var(--about-coral-dark); font-weight: 700; }
.about-story__visual { position: relative; min-height: 540px; }
.about-story__visual figure { position: absolute; inset: 25px 8px 22px 0; z-index: 1; margin: 0; overflow: hidden; border-radius: 32% 18% 28% 18%; border: 10px solid #fff; box-shadow: 0 22px 50px rgba(18, 59, 82, .16); transform: rotate(-2deg); }
.about-story__visual figure img { width: 100%; height: 100%; object-fit: cover; }
.about-story__visual-ring { position: absolute; inset: 0 0 7px 28px; border: 1px solid rgba(22, 140, 189, .28); border-radius: 32% 18% 28% 18%; transform: rotate(7deg); }
.about-story__visual-note { position: absolute; right: -18px; bottom: 32px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, .95); border-radius: 16px; color: var(--about-ink); background: rgba(255, 255, 255, .94); box-shadow: 0 14px 28px rgba(18, 59, 82, .14); font-weight: 700; }
.about-story__visual-note i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: var(--about-coral); }

@media (max-width: 991px) {
  .about-hero__center { grid-template-columns: minmax(180px, .65fr) minmax(360px, 1.3fr) minmax(190px, .7fr); gap: 8px; }
  .about-hero__pet--left img { max-width: 88px; }
  .about-hero__pet--right img { max-width: 88px; }
  .about-story__grid { grid-template-columns: 1fr; gap: 34px; }
  .about-story__copy { max-width: 760px; }
  .about-story__visual { min-height: 470px; max-width: 620px; width: 100%; margin: 0 auto; }
}
@media (max-width: 767px) {
  .about-hero__center { display: flex; flex-direction: column; align-items: center; gap: 0; width: calc(100vw - 32px); max-width: calc(100vw - 32px); min-height: 0; }
  .about-hero__copy { order: 1; width: 100%; min-width: 0; max-width: 100%; }
  .about-hero h1 { max-width: 100%; font-size: 36px; word-break: break-all; }
  .about-hero__lead { max-width: calc(100vw - 32px); word-break: break-all; }
  .about-hero__actions { flex-direction: column; align-items: center; width: calc(100vw - 32px); max-width: calc(100vw - 32px); }
  .about-hero__actions .about-btn { width: 100%; max-width: calc(100vw - 32px); justify-content: center; }
  .about-hero__pet { position: relative; width: 100%; height: auto; padding: 0; }
  .about-hero__pet--left { order: 2; justify-content: center; margin-top: 24px; }
  .about-hero__pet--right { display: none; }
  .about-hero__pet--left img { width: 88px; max-width: 88px; }
  .about-core { margin-top: 44px; }
  .about-core, .about-core__heading, .about-core__heading h2, .about-core__heading > p { width: calc(100vw - 32px); max-width: calc(100vw - 32px); min-width: 0; overflow-wrap: anywhere; }
  .about-core__heading h2 { font-size: 25px; white-space: normal; word-break: break-all; }
  .about-core__heading > p { margin-left: auto; margin-right: auto; }
  .about-core-grid { width: calc(100vw - 32px); max-width: calc(100vw - 32px); }
  .about-core-card { width: 100%; min-width: 0; }
  .about-core-card > div { min-width: 0; }
  .about-core-card p { overflow-wrap: anywhere; }
  .about-story__visual { min-height: 360px; }
  .about-story__visual figure { inset: 14px 8px 14px 0; border-width: 8px; }
  .about-story__visual-note { right: 0; bottom: 18px; }
}

/* 模塊一的寵物元素改為背景裝飾，不佔用主內容位置。 */
.about-hero__center { position: relative; display: block; min-height: 560px; }
.about-hero__copy { position: relative; z-index: 2; width: min(680px, 100%); margin: 0 auto; padding-top: 42px; }
.about-hero .about-eyebrow { gap: 0; }
.about-hero .about-eyebrow__dot { display: none; }
.about-hero__decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.about-hero__animal { position: absolute; display: grid; place-items: center; color: rgba(22, 140, 189, .15); font-size: 54px; }
.about-hero__animal--paw-left { top: 12%; left: 2%; transform: rotate(-18deg); }
.about-hero__animal--dog-left { top: 51%; left: 10%; color: rgba(167, 196, 44, .16); font-size: 42px; transform: rotate(-12deg); }
.about-hero__animal--bone-left { bottom: 9%; left: 23%; color: rgba(37, 188, 181, .16); font-size: 40px; transform: rotate(-25deg); }
.about-hero__animal--paw-right { top: 10%; right: 3%; color: rgba(37, 188, 181, .16); transform: rotate(18deg); }
.about-hero__animal--cat-right { top: 39%; right: 11%; color: rgba(167, 196, 44, .15); font-size: 43px; transform: rotate(12deg); }
.about-hero__animal--dog-right { bottom: 12%; right: 22%; color: rgba(22, 140, 189, .14); font-size: 45px; transform: rotate(12deg); }
.about-hero__animal--fish-right { bottom: 22%; right: 3%; color: rgba(37, 188, 181, .15); font-size: 40px; transform: rotate(-12deg); }
.about-hero__animal--heart-left { top: 31%; left: 22%; color: rgba(37, 188, 181, .11); font-size: 28px; transform: rotate(-18deg); }
.about-hero__animal--bone-right { top: 24%; right: 25%; color: rgba(167, 196, 44, .11); font-size: 27px; transform: rotate(26deg); }

@media (max-width: 991px) {
  .about-hero__center { min-height: 590px; }
  .about-hero__animal--dog-left { left: 3%; }
  .about-hero__animal--cat-right { right: 3%; }
}
@media (max-width: 767px) {
  .about-hero__center { min-height: 0; }
  .about-hero__copy { padding-top: 8px; }
  .about-hero__animal { font-size: 32px; }
  .about-hero__animal--dog-left, .about-hero__animal--bone-left, .about-hero__animal--cat-right, .about-hero__animal--dog-right, .about-hero__animal--fish-right, .about-hero__animal--heart-left, .about-hero__animal--bone-right { display: none; }
  .about-hero__animal--paw-left { top: 16%; left: 1%; }
  .about-hero__animal--paw-right { top: 17%; right: 1%; }
}

/* 里程碑：以卡片承載完整原文，滾動時讓時間軸進度與目前節點同步。 */
.about-milestones .about-section-heading--split h2 { max-width: 620px; }
.about-milestones .about-section-heading--split > p { color: var(--about-coral-dark); font-weight: 600; }
.about-timeline::before { display: none; }
.about-timeline__rail { position: absolute; top: 11px; bottom: 45px; left: 102px; z-index: 0; width: 2px; overflow: hidden; border-radius: 999px; background: var(--about-line); }
.about-timeline__progress { display: block; width: 100%; height: 0; border-radius: inherit; background: linear-gradient(180deg, var(--about-coral), var(--about-sage)); transition: height .24s ease-out; }
.about-timeline__item { z-index: 1; align-items: start; padding-bottom: 30px; }
.about-timeline__item::before { top: 33px; border-color: #fff; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.about-timeline__item.is-active::before { transform: scale(1.35); background: var(--about-sage); box-shadow: 0 0 0 3px rgba(37, 188, 181, .18); }
.about-timeline__year { position: relative; z-index: 2; padding-top: 30px; }
.about-timeline__year span { display: inline-block; min-width: 56px; padding: 5px 10px; border-radius: 999px; color: var(--about-coral-dark); background: var(--about-cream-deep); text-align: center; }
.about-timeline__item.is-active .about-timeline__year span { color: #fff; background: var(--about-coral); }
.about-timeline__content { position: relative; min-width: 0; padding: 28px 34px 31px; border: 1px solid rgba(183, 211, 223, .9); border-radius: 20px; background: #fff; box-shadow: 0 10px 28px rgba(18, 59, 82, .055); text-align: center; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.about-timeline__item--current .about-timeline__content { padding: 28px 34px 31px; background: #fff; }
.about-timeline__item.is-active .about-timeline__content { border-color: rgba(22, 140, 189, .52); box-shadow: 0 16px 34px rgba(18, 59, 82, .11); transform: translateY(-2px); }
.about-timeline__icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 15px; border-radius: 15px; color: var(--about-coral); background: var(--about-cream-deep); font-size: 20px; }
.about-timeline__item:nth-of-type(3n + 1) .about-timeline__icon { color: var(--about-coral); background: var(--about-cream-deep); }
.about-timeline__item:nth-of-type(3n + 2) .about-timeline__icon { color: var(--about-sage); background: #e7f8f7; }
.about-timeline__item:nth-of-type(3n + 3) .about-timeline__icon { color: #718e19; background: #f1f7df; }
.about-timeline__content h3 { font-size: clamp(20px, 2vw, 24px); }
.about-timeline__content p { max-width: 780px; margin: 13px auto 0; color: var(--about-muted); line-height: 1.9; overflow-wrap: anywhere; }

@media (max-width: 767px) {
  .about-milestones { padding-top: 78px; padding-bottom: 90px; }
  .about-milestones .about-section-heading--split h2 { font-size: 30px; line-height: 1.35; }
  .about-milestones .about-section-heading--split > p { font-size: 15px; }
  .about-timeline { margin-top: 42px; padding-left: 0; }
  .about-timeline__rail { left: 10px; top: 10px; bottom: 32px; }
  .about-timeline__item { padding: 0 0 24px 30px; }
  .about-timeline__item::before { left: 4px; top: 9px; width: 12px; height: 12px; }
  .about-timeline__year { margin: 0 0 10px; padding-top: 0; text-align: left; font-size: 17px; }
  .about-timeline__year span { min-width: 52px; padding: 4px 9px; }
  .about-timeline__content, .about-timeline__item--current .about-timeline__content { padding: 23px 17px 24px; border-radius: 17px; }
  .about-timeline__icon { width: 43px; height: 43px; margin-bottom: 12px; border-radius: 13px; font-size: 18px; }
  .about-timeline__content h3 { font-size: 20px; line-height: 1.45; }
  .about-timeline__content p { margin-top: 10px; font-size: 15px; line-height: 1.85; }
}

/* 模組三：參考圖的左側主視覺＋右側內容排版，文字沿用 MD 原文。 */
.about-vm { background: var(--about-cream); }
.about-vm__heading { max-width: 1120px; }
.about-vm__eyebrow { margin: 0 0 14px; }
.about-vm__heading h2 { margin: 0; color: var(--about-ink); font-family: var(--title-font), "Noto Sans TC", sans-serif; font-size: clamp(34px, 4vw, 54px); line-height: 1.22; letter-spacing: -.025em; }
.about-vm__intro { display: grid; gap: 10px; margin-top: 24px; }
.about-vm__intro p { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 12px; margin: 0; color: var(--about-muted); font-size: 17px; line-height: 1.9; }
.about-vm__intro span, .about-values-heading span { display: inline-block; width: auto; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; color: var(--about-coral-dark); background: transparent; box-shadow: none; font-size: 17px; font-weight: 800; letter-spacing: .1em; line-height: 1.4; white-space: nowrap; }
.about-vm__layout { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: clamp(34px, 7vw, 100px); align-items: stretch; margin-top: 52px; }
.about-vm__content { min-width: 0; }
.about-vm__visual { position: sticky; top: 116px; align-self: start; min-height: 560px; }
.about-vm__visual figure { position: absolute; inset: 0 20px 0 0; margin: 0; overflow: hidden; border-radius: 28px 28px 28px 8px; box-shadow: 0 22px 48px rgba(18, 59, 82, .13); }
.about-vm__visual figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.about-vm__visual-paw { position: absolute; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: var(--about-coral); background: rgba(255, 255, 255, .92); box-shadow: 0 10px 25px rgba(18, 59, 82, .12); font-size: 23px; }
.about-vm__visual-paw--one { top: 28px; right: -4px; transform: rotate(13deg); }
.about-vm__visual-paw--two { right: 22px; bottom: 26px; color: var(--about-gold); transform: rotate(-18deg); }
.about-vm__cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 0; }
.about-vm__card { min-height: 0; padding: 29px 32px 32px; border: 1px solid rgba(183, 211, 223, .82); border-radius: 20px; background: #fff; box-shadow: 0 10px 28px rgba(18, 59, 82, .055); }
.about-vm__card::after { border-color: rgba(22, 140, 189, .13); }
.about-vm__card--vision { background: #edf8fc; }
.about-vm__card--mission { background: #e9f8f7; }
.about-vm__card-top { color: var(--about-ink); }
.about-vm__card-top i { color: var(--about-coral); }
.about-vm__card--mission .about-vm__card-top i { color: var(--about-sage); }
.about-vm__label { margin: 0 !important; color: var(--about-coral-dark) !important; font-size: 15px; font-weight: 700; letter-spacing: .12em; }
.about-vm__card--mission .about-vm__label { color: #137f7b !important; }
.about-vm__card h3 { max-width: 760px; margin: 24px 0 0; color: var(--about-ink); font-family: var(--title-font), "Noto Sans TC", sans-serif; font-size: clamp(21px, 2.2vw, 30px); line-height: 1.55; }
.about-values-heading { margin-top: 74px; }
.about-vm__content .about-values-heading { margin-top: 0; }
.about-vm__content .about-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about-values-heading span { color: var(--about-coral); }
.about-vm__content .about-values { margin-top: 19px; column-gap: 0; row-gap: 0; border-top: 0; }
.about-vm__content .about-value { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-areas: "icon title" "description description"; column-gap: 14px; align-items: center; min-height: 0; padding: 27px 28px 28px 0; border: 0; border-bottom: 1px solid rgba(183, 211, 223, .9); border-radius: 0; background: transparent; box-shadow: none; }
.about-vm__content .about-value:nth-child(odd) { padding-right: 28px; border-right: 1px solid rgba(183, 211, 223, .9); }
.about-vm__content .about-value:nth-child(even) { padding-left: 28px; }
.about-vm__content .about-value:nth-last-child(-n + 2) { border-bottom: 0; }
.about-vm__content .about-value:hover { transform: none; background: transparent; box-shadow: none; }
.about-vm__content .about-value i { grid-area: icon; }
.about-vm__content .about-value h3 { grid-area: title; margin: 0; font-size: 20px; line-height: 1.45; }
.about-vm__content .about-value p { grid-area: description; margin: 13px 0 0; line-height: 1.85; }

@media (max-width: 991px) {
  .about-vm__layout { grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr); gap: 28px; }
  .about-vm__visual { min-height: 500px; }
  .about-vm__visual figure { right: 0; }
  .about-vm__card { padding: 25px 24px 28px; }
  .about-vm__card h3 { font-size: 22px; }
}
@media (max-width: 767px) {
  .about-vm { padding-top: 78px; padding-bottom: 86px; }
  .about-vm__eyebrow { margin-bottom: 11px; }
  .about-vm__heading h2 { font-size: 32px; }
  .about-vm__intro { margin-top: 20px; }
  .about-vm__intro p { font-size: 16px; line-height: 1.85; }
  .about-vm__intro p { grid-template-columns: 88px minmax(0, 1fr); gap: 9px; }
  .about-vm__layout { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }
  .about-vm__visual { position: relative; top: auto; min-height: 330px; }
  .about-vm__visual figure { inset: 0 0 0 0; border-radius: 22px 22px 22px 7px; }
  .about-vm__visual-paw--one { right: 15px; }
  .about-vm__visual-paw--two { right: 28px; bottom: 18px; }
  .about-vm__card { padding: 23px 20px 25px; border-radius: 17px; }
  .about-vm__card h3 { margin-top: 18px; font-size: 20px; line-height: 1.6; }
  .about-values-heading { margin-top: 52px; }
  .about-vm__content .about-values { grid-template-columns: 1fr; }
  .about-vm__content .about-values { margin-top: 15px; }
  .about-vm__content .about-value,
  .about-vm__content .about-value:nth-child(odd),
  .about-vm__content .about-value:nth-child(even) { padding: 23px 0 22px; border-right: 0; border-bottom: 1px solid rgba(183, 211, 223, .9); }
  .about-vm__content .about-value:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(183, 211, 223, .9); }
  .about-vm__content .about-value:last-child { border-bottom: 0; }
  .about-value { min-height: 0; padding: 23px 20px 22px; }
}

/* 里程碑回到原本的時間軸感覺：色塊、左對齊文字，不使用卡片圖標。 */
.about-milestones .about-section-heading--split { display: flex; align-items: end; justify-content: space-between; gap: 48px; max-width: 1050px; text-align: left; }
.about-milestones .about-section-heading--split .about-eyebrow { margin-bottom: 13px; }
.about-milestones .about-section-heading--split h2 { margin: 0; max-width: none; }
.about-milestones .about-section-heading--split > p { max-width: 390px; margin: 0 !important; color: var(--about-muted); font-size: 16px; font-weight: 500; line-height: 1.85; }
.about-milestones .about-timeline__year span { min-width: 0; padding: 0; border-radius: 0; color: var(--about-coral); background: transparent; }
.about-milestones .about-timeline__item.is-active .about-timeline__year span { color: var(--about-coral-dark); background: transparent; }
.about-milestones .about-timeline__icon { display: none; }
.about-milestones .about-timeline { max-width: 1050px; }
.about-milestones .about-timeline__content,
.about-milestones .about-timeline__item--current .about-timeline__content { padding: 28px 32px 30px; border: 0; border-radius: 18px; background: var(--about-cream-deep); box-shadow: none; text-align: left; transform: none; }
.about-milestones .about-timeline__item--current .about-timeline__content { background: #e9f8f7; }
.about-milestones .about-timeline__item.is-active .about-timeline__content { box-shadow: 0 12px 25px rgba(18, 59, 82, .07); transform: none; }
.about-milestones .about-timeline__content h3 { text-align: left; }
.about-milestones .about-timeline__content p { max-width: none; margin: 12px 0 0; text-align: left; }

@media (max-width: 767px) {
  .about-milestones .about-section-heading--split { display: block; }
  .about-milestones .about-section-heading--split h2 { font-size: 30px; }
  .about-milestones .about-section-heading--split > p { max-width: none; margin-top: 16px !important; font-size: 16px; }
  .about-milestones .about-timeline__content,
  .about-milestones .about-timeline__item--current .about-timeline__content { padding: 21px 18px 23px; border-radius: 15px; }
}