:root { --main-red: #a02020; --bg-footer: #fcedec; --s-form: #757575; --s-fb: #3b5998; --s-ig: #262626; --s-yt: #ff0000; --cm-primary: #e8364a; --cm-primary-light: #f06070; --cm-primary-dark: #c02030; --cm-orange: #f07030; --cm-orange-btn: #f08040; --cm-beige: #f5e8d0; --cm-beige-dark: #e8d5b0; --cm-gold: #c8a020; --cm-gold2: #e0c040; --cm-bg-pain: #f8f0f0; --cm-bg-faq: #f5e8e0; --cm-shadow: 0 4px 16px rgba(0,0,0,0.12); --cm-pill: 999px; --cm-box: 12px; }
/* 全域與頁首 */
body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
#Header { background: #fff; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
#Top_bar { padding: 5px 0; }
.logo img { display: block; max-height: 50px; max-width: 100%; width: auto; }
.navbar { padding: 0; }
.menu-main { list-style: none; padding: 0; margin: 0; display: flex; gap: 5px; }
.menu-main .nav-link { text-decoration: none; color: #333; padding: 10px 12px !important; display: block; transition: all 0.3s; font-weight: 500; font-size: 1.05rem; }
.menu-main .nav-link:hover { color: var(--main-red); }
.carousel-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* 固定社交圖標 1:1 還原 */
.social-icons-fixed { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 999; }
.social-icons-fixed a { display: block; width: 50px; height: 50px; color: white; text-align: center; line-height: 50px; margin-bottom: 12px; border-radius: 50%; transition: opacity 0.3s; font-size: 30px; }
.social-icons-fixed a:nth-child(1) { background: var(--s-form); }
.social-icons-fixed a:nth-child(2) { background: var(--s-fb); }
.social-icons-fixed a:nth-child(3) { background: var(--s-ig); }
.social-icons-fixed a:nth-child(4) { background: var(--s-yt); }
.social-icons-fixed a:hover { opacity: 0.8; }
/* 內容區塊 */
.section-image img { width: 100%; height: auto; display: block; }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* 頁尾：品牌聯絡與報名據點分組，所有款式只套用於網站頁尾。 */
#Footer { --footer-bg: #f7f4f1; --footer-ink: #30353b; --footer-muted: #626970; --footer-line: #e5dfd9; background: var(--footer-bg); color: var(--footer-ink); padding: 40px 0 0; border-top: 1px solid var(--footer-line); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", "PingFang TC", sans-serif; scroll-margin-top: 80px; }
#Footer a { color: inherit; text-decoration: none; }
#Footer a:focus-visible, #Footer button:focus-visible { outline: 3px solid var(--main-red); outline-offset: 3px; }
#Footer p, #Footer h2, #Footer h3, #Footer dl, #Footer dd { margin: 0; }
#Footer .footer-layout { display: grid; grid-template-columns: minmax(0,.9fr) repeat(2,minmax(0,1fr)); gap: 24px; align-items: start; }
#Footer .footer-brand { padding: 8px 0; min-width: 0; }
#Footer .footer-brand-heading { display: flex; align-items: center; gap: 14px; }
#Footer .footer-logo { width: 64px; height: 64px; flex: 0 0 64px; object-fit: contain; }
#Footer .footer-brand h2 { font-size: 1.2rem; font-weight: 700; line-height: 1.5; }
#Footer .footer-brand-description { color: var(--footer-muted); font-size: .875rem; line-height: 1.75; margin-top: 4px; }
#Footer .footer-service { display: grid; gap: 12px; margin-top: 24px; }
#Footer .footer-service-phone, #Footer .footer-service-line { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px; border-radius: 12px; }
#Footer .footer-service-phone { background: var(--main-red); color: #fff; }
#Footer .footer-service-phone:hover { background: #821b1b; }
#Footer .footer-service-phone > i { font-size: 1.15rem; }
#Footer .footer-service-label { display: block; font-size: .8125rem; font-weight: 400; line-height: 1.5; margin-bottom: 2px; }
#Footer .footer-service-phone strong { color: inherit; font-size: 1.25rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
#Footer .footer-service-line { background: #fff; border: 1px solid var(--footer-line); }
#Footer .footer-service-line > i { color: #31654b; font-size: 1.7rem; }
#Footer .footer-service-line > span { min-width: 0; flex: 1; }
#Footer .footer-service-line strong { font-size: 1rem; font-weight: 600; }
#Footer .footer-service-line .footer-service-label { color: var(--footer-muted); }
#Footer .footer-copy { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; min-width: 44px; padding: 8px; flex-shrink: 0; border: 0; border-radius: 7px; background: transparent; color: var(--footer-muted); font: inherit; font-size: .8125rem; cursor: pointer; }
#Footer .footer-copy:hover { background: #f1eeea; color: var(--main-red); }
#Footer .footer-copy.is-copied { color: #31654b; background: #eff6f0; }
#Footer .footer-location { min-width: 0; padding: 22px; border: 1px solid var(--footer-line); border-radius: 16px; background: #fff; }
#Footer .footer-location-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
#Footer .footer-location-icon { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; color: var(--main-red); background: #faeeee; font-size: .9375rem; }
#Footer .footer-location h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.5; }
#Footer .footer-address { font-size: .9375rem; line-height: 1.75; overflow-wrap: anywhere; }
#Footer .footer-transit { display: flex; align-items: baseline; gap: 7px; margin-top: 5px; color: var(--footer-muted); font-size: .8125rem; line-height: 1.7; }
#Footer .footer-transit i { flex-shrink: 0; }
#Footer .footer-contact-list { display: grid; gap: 1px; padding-top: 12px; margin-top: 14px; border-top: 1px solid #f0ece8; }
#Footer .footer-contact-list > div { display: grid; grid-template-columns: 94px minmax(0,1fr); align-items: center; column-gap: 6px; min-height: 44px; }
#Footer .footer-contact-list dt { color: var(--footer-muted); font-size: .8125rem; font-weight: 400; line-height: 1.5; }
#Footer .footer-contact-list dd { display: flex; align-items: center; gap: 3px; min-width: 0; font-size: .9375rem; font-weight: 500; line-height: 1.5; }
#Footer .footer-contact-list dd > a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
#Footer .footer-contact-list dd > a:hover { color: var(--main-red); text-decoration: underline; text-underline-offset: 3px; }
#Footer .footer-contact-list dd > span { white-space: nowrap; }
#Footer .footer-copy-compact { margin-left: auto; }
#Footer .footer-copy-compact > span { display: none; }
#Footer .footer-directions { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 14px; padding: 10px 14px; border: 1px solid var(--footer-line); border-radius: 8px; font-size: .875rem; font-weight: 500; }
#Footer .footer-directions:hover { color: var(--main-red); background: #faf7f4; border-color: #d6c8bf; }
#Footer .footer-directions > i:last-child { margin-left: auto; transform: rotate(45deg); font-size: .75rem; }
#Footer .footer-directions > i:first-child { margin-right: auto; }
#Footer .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-top: 28px; padding: 20px 0; border-top: 1px solid var(--footer-line); color: var(--footer-muted); font-size: .75rem; line-height: 1.7; }
@media (min-width: 768px) and (max-width: 1199.98px) {
    #Footer .footer-layout { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
    #Footer .footer-brand { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 0 4px; }
    #Footer .footer-service { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0; }
    #Footer .footer-service-phone, #Footer .footer-service-line { padding: 10px 14px; }
}
/* 其他功能 */
#back_to_top { position: fixed; bottom: 16px; right: 16px; background: var(--main-red); color: white; width: 44px; height: 44px; text-align: center; line-height: 44px; border-radius: 12px; box-shadow: 0 3px 12px rgba(0,0,0,.15); display: none; cursor: pointer; z-index: 999; }
#back_to_top:hover { background: #821b1b; }
@media (max-width: 1199.98px) { .navbar-collapse { background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-top: 10px; } .menu-main { flex-direction: column; gap: 0; } .menu-main .nav-link { border-bottom: 1px solid #eee; padding: 12px 0 !important; } .menu-main li:last-child .nav-link { border-bottom: none; } }
@media (max-width: 768px) { .social-icons-fixed { display: none; } }
/* 6大困擾 + 常見問題 SECTION 容器 */
.pain-section { background: var(--cm-bg-pain); overflow: hidden; }
.faq-section { background: var(--cm-bg-faq); overflow: hidden; }
/* 困擾 Banner */
.pain-banner { background: var(--cm-primary); display: flex; align-items: stretch; min-height: 130px; position: relative; }
.pain-banner::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0,rgba(255,255,255,.06) 8px,transparent 8px,transparent 16px),repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0,rgba(255,255,255,.06) 8px,transparent 8px,transparent 16px); pointer-events: none; }
.pain-banner-photo { width: 160px; flex-shrink: 0; overflow: hidden; }
.pain-banner-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pain-banner-title { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px 24px; text-align: center; }
.pain-banner-title h2 { font-size: clamp(1.6rem,4vw,2.8rem); font-weight: 900; color: #fff; letter-spacing: .15em; text-shadow: 2px 2px 6px rgba(0,0,0,.25); line-height: 1.2; }
.pain-banner-title p { font-size: clamp(.85rem,2vw,1.1rem); color: #fff; margin-top: 8px; font-weight: 500; letter-spacing: .05em; }
/* 困擾 列表 */
.pain-list { padding: 36px 24px 20px; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.pain-item { display: flex; align-items: center; gap: 20px; }
.pain-left { background: var(--cm-beige); border-radius: var(--cm-pill); padding: 14px 24px 14px 16px; display: flex; align-items: center; gap: 12px; min-width: 180px; flex-shrink: 0; box-shadow: var(--cm-shadow); }
.pain-num { font-size: clamp(2rem,5vw,3.2rem); font-weight: 900; color: var(--cm-primary); line-height: 1; font-style: italic; flex-shrink: 0; }
.pain-title-block { display: flex; flex-direction: column; }
.pain-title-block .main-title { font-size: clamp(1rem,2.5vw,1.4rem); font-weight: 700; color: var(--cm-primary); letter-spacing: .08em; }
.pain-title-block .sub-title { font-size: .78rem; color: #a04848; margin-top: 2px; letter-spacing: .03em; }
.pain-arrow { width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-left: 22px solid var(--cm-primary); flex-shrink: 0; }
.pain-desc { flex: 1; background: #fff; border-radius: var(--cm-pill); border: 2.5px solid var(--cm-beige-dark); padding: 14px 28px; font-size: clamp(.85rem,1.8vw,1.05rem); color: #333; font-weight: 500; letter-spacing: .04em; text-align: center; box-shadow: var(--cm-shadow); line-height: 1.5; }
.pain-footer { display: flex; justify-content: center; padding: 24px 0 36px; flex-direction: column; align-items: center; }
.pain-stripe { height: 10px; margin: 3px 0; border-radius: 2px; }
.pain-stripe.s1 { width: 80px; background: var(--cm-primary); }
.pain-stripe.s2 { width: 60px; background: var(--cm-gold2); }
.pain-stripe.s3 { width: 40px; background: var(--cm-gold); }
/* FAQ 標題 */
.faq-top-arrow { width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-top: 28px solid var(--cm-primary); margin: 10px auto 0; }
.faq-title-wrap { display: flex; align-items: center; justify-content: center; gap: 20px; background: var(--cm-bg-faq); background-image: repeating-linear-gradient(45deg,rgba(220,100,80,.1) 0,rgba(220,100,80,.1) 8px,transparent 8px,transparent 16px),repeating-linear-gradient(-45deg,rgba(220,100,80,.1) 0,rgba(220,100,80,.1) 8px,transparent 8px,transparent 16px); padding: 28px 0 20px; }
.faq-deco-arrow { display: flex; gap: 3px; }
.faq-deco-arrow span { display: block; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.faq-deco-arrow.left span { border-right: 14px solid var(--cm-primary); }
.faq-deco-arrow.right span { border-left: 14px solid var(--cm-primary); }
.faq-deco-arrow.left span:nth-child(1) { opacity: .35; }
.faq-deco-arrow.left span:nth-child(2) { opacity: .65; }
.faq-deco-arrow.left span:nth-child(3) { opacity: 1; }
.faq-deco-arrow.right span:nth-child(1) { opacity: 1; }
.faq-deco-arrow.right span:nth-child(2) { opacity: .65; }
.faq-deco-arrow.right span:nth-child(3) { opacity: .35; }
.faq-title-wrap h2 { font-size: clamp(1.4rem,4vw,2.2rem); font-weight: 900; color: #333; letter-spacing: .2em; }
/* FAQ 列表 */
.faq-list { max-width: 760px; margin: 0 auto; padding: 12px 24px 48px; display: flex; flex-direction: column; gap: 28px; }
.faq-item { display: flex; flex-direction: column; }
.faq-question { display: flex; align-items: center; }
.faq-num-wrap { width: 70px; height: 70px; background: linear-gradient(135deg,var(--cm-orange),var(--cm-primary)); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; box-shadow: 0 4px 12px rgba(230,80,60,.35); }
.faq-num-wrap span { font-size: 2.2rem; font-weight: 900; color: #fff; font-style: italic; line-height: 1; }
.faq-q-label { flex: 1; background: linear-gradient(90deg,var(--cm-orange),var(--cm-orange-btn)); color: #fff; font-size: clamp(.85rem,2vw,1.05rem); font-weight: 700; padding: 14px 20px 14px 16px; margin-left: -10px; border-radius: 0 var(--cm-pill) var(--cm-pill) 0; letter-spacing: .04em; }
.faq-q-more { background: var(--cm-primary-dark); color: #fff; font-size: .85rem; font-weight: 700; padding: 14px; border-radius: var(--cm-pill); margin-left: 4px; display: flex; align-items: center; justify-content: center; min-width: 36px; }
.faq-answer { background: rgba(255,255,255,.6); border-left: 4px solid var(--cm-primary-light); margin-left: 36px; margin-top: 10px; padding: 14px 20px; border-radius: 0 var(--cm-box) var(--cm-box) 0; font-size: clamp(.85rem,1.8vw,.98rem); color: #444; line-height: 1.8; }
.faq-answer ul { padding-left: 1.2em; list-style: disc; }
.faq-answer li { margin-bottom: 4px; }
.faq-answer .more-link { display: inline-block; margin-top: 8px; color: var(--cm-primary); font-size: .9rem; font-weight: 700; text-decoration: none; }
@media (max-width:600px) { .pain-banner-photo { width: 100px; } .pain-left { min-width: 140px; padding: 10px 16px 10px 12px; } .pain-item { gap: 12px; } .pain-desc { padding: 12px 16px; } .faq-num-wrap { width: 56px; height: 56px; } .faq-num-wrap span { font-size: 1.7rem; } }
/* 主體區塊微調 */
#Content section.page-content { padding: 40px 15px; background: #fff; min-height: 60vh; }
/* 表單樣式 */
.signup-card { max-width: 900px; margin: 40px auto; background: #fff; border-radius: var(--cm-box); box-shadow: var(--cm-shadow); border-top: 6px solid var(--cm-primary); overflow: hidden; }
.signup-header { background: var(--cm-bg-faq); padding: 24px; text-align: center; border-bottom: 1px solid var(--cm-beige-dark); }
.signup-header h2 { color: var(--cm-primary-dark); font-weight: 900; font-size: 1.8rem; margin: 0; }
.signup-header p { color: #666; font-size: 0.95rem; margin: 8px 0 0; }
.signup-body { padding: 30px; }
.bg-f5 { background: #f5f5f5; }
.nav-signup-btn { color: var(--cm-primary); font-weight: bold; }

/* 可由後台編輯的課程介紹與報名引導。 */
.copy-section { padding: 72px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif; color: #302c29; line-height: 1.85; }
.copy-intro { background: #faf5ee; border-bottom: 1px solid #ece2d8; }
.copy-home-intro { padding: 64px 0; background: linear-gradient(115deg, #faf5ee, #fff8f5); }
.copy-intro-content { max-width: 880px; }
.copy-section .copy-eyebrow { margin: 0 0 12px; color: #9e302c; font-size: .875rem; font-weight: 700; letter-spacing: .1em; }
.copy-section h1 { margin: 0 0 20px; color: #422c29; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.4; letter-spacing: .02em; }
.copy-section .copy-lead { max-width: 760px; margin: 0 0 16px; color: #625a54; font-size: 1.125rem; line-height: 1.9; }
.copy-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.copy-actions-center { justify-content: center; }
.copy-section .copy-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 24px; border: 1px solid #a82c28; border-radius: 8px; background: #a82c28; color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.5; text-align: center; text-decoration: none; transition: background-color .15s, border-color .15s; }
.copy-section .copy-button:hover { background: #86231f; border-color: #86231f; color: #fff; }
.copy-section .copy-button-secondary { border-color: #d5c8bc; background: #fff; color: #673d35; }
.copy-section .copy-button-secondary:hover { border-color: #a82c28; background: #fff5ef; color: #86231f; }
.copy-section .copy-button:focus-visible { outline: 3px solid #bf713d; outline-offset: 4px; }
.copy-section-heading { max-width: 760px; margin-bottom: 32px; }
.copy-section h2 { margin: 0 0 14px; font-size: clamp(1.6rem, 2.8vw, 2.25rem); font-weight: 800; line-height: 1.5; letter-spacing: .015em; }
.copy-section h1, .copy-section h2, .copy-section h3 { text-wrap: balance; }
.copy-section-heading > p:last-child { margin: 0; color: #625a54; font-size: 1rem; }
.copy-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.copy-card { min-width: 0; padding: 28px; border: 1px solid #e8dfd6; border-radius: 14px; background: #fff; }
.copy-section .copy-card h3 { margin: 0 0 12px; font-size: 1.25rem; font-weight: 700; line-height: 1.5; color: #422c29; }
.copy-section .copy-card p { margin: 0; color: #625a54; font-size: 1rem; line-height: 1.85; }
.copy-step { display: inline-block; margin-bottom: 18px; color: #a82c28; font-size: .9375rem; font-weight: 800; letter-spacing: .1em; }
.copy-section-soft { background: #faf7f3; }
.copy-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 32px; padding: 28px; border-radius: 14px; background: #f6eae0; }
.copy-section .copy-cta h3 { margin: 0 0 8px; font-size: 1.375rem; font-weight: 700; line-height: 1.5; }
.copy-section .copy-cta p { margin: 0; color: #625a54; }
.copy-cta > .copy-button { flex-shrink: 0; }
.copy-section .copy-note { margin: 24px 0 0; padding-left: 16px; border-left: 3px solid #c6a88b; color: #625a54; font-size: .9375rem; }
#signupForm { scroll-margin-top: 110px; }
@media (max-width: 991.98px) {
    .copy-section { padding: 52px 0; }
    .copy-card { padding: 22px; }
    .copy-cards { gap: 14px; }
    .copy-cta { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 767.98px) {
    .copy-section { padding: 38px 0; }
    .copy-section > .container { padding-left: 22px; padding-right: 22px; }
    .copy-section h1 { font-size: 1.875rem; line-height: 1.5; margin-bottom: 16px; }
    .copy-home-intro h1 { font-size: clamp(1.625rem, 7vw, 1.875rem); }
    .copy-section .copy-lead { font-size: 1rem; line-height: 1.9; }
    .copy-section .copy-eyebrow { font-size: .8125rem; letter-spacing: .06em; }
    .copy-section-heading { margin-bottom: 24px; }
    .copy-section h2 { font-size: 1.5rem; }
    .copy-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .copy-card { padding: 22px; }
    .copy-step { margin-bottom: 10px; }
    .copy-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; }
    .copy-section .copy-button { width: 100%; padding: 12px 16px; }
    .copy-cta { padding: 24px; gap: 20px; margin-top: 24px; }
}
.btn-submit-signup { background-color: var(--cm-primary); font-weight: bold; border-radius: 999px; border: none; }

/* 推薦頁：橫幅與文字各自依螢幕縮放，避免手機裁圖及數字擠成直排。 */
.recommend-hero { position: relative; }
.recommend-hero-image { display: block; width: 100%; height: 500px; object-fit: cover; object-position: center; }
.recommend-hero-caption { position: absolute; top: 50%; left: 0; width: 100%; padding: 0 24px; transform: translateY(-50%); }
.recommend-hero-caption h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.4; text-shadow: 2px 2px 8px rgba(0,0,0,.6); }
.recommend-hero-caption p { display: inline-block; margin: 0; padding: 8px 24px; border-radius: 999px; background: rgba(0,0,0,.5); font-size: 1.25rem; text-shadow: 1px 1px 4px rgba(0,0,0,.5); }
.recommend-experience { font-size: 2.5rem; line-height: 1.4; }
.recommend-years { color: var(--cm-primary); font-size: 3rem; }
.recommend-proof-icon { position: absolute; top: 8px; right: 8px; font-size: 72px; line-height: 1; opacity: .08; pointer-events: none; }
.recommend-proof h3, .recommend-proof p { position: relative; }
.recommend-testimonials-title { color: var(--cm-primary-dark); font-size: 2.2rem; line-height: 1.5; text-wrap: balance; }
.recommend-testimonials-intro { max-width: 720px; margin-inline: auto; font-size: 1.25rem; line-height: 1.8; }
#Content.recommend-page .recommend-testimonials { padding: 64px 0; }
.recommend-cta { max-width: 100%; padding: 16px 30px; white-space: normal; line-height: 1.6; text-wrap: balance; }

@media (max-width: 1199.98px) {
    .site-header-row { position: relative; min-height: 54px; }
    .site-nav-col, .site-nav-col .navbar, .site-nav-col .container-fluid { position: static; }
    .site-nav-col .navbar-toggler { min-width: 44px; min-height: 44px; padding: 8px; }
    .site-nav-col .navbar-collapse { position: absolute; top: calc(100% + 5px); right: 12px; left: 12px; z-index: 1010; margin-top: 0; max-height: calc(100dvh - 90px); overflow-y: auto; }
    .site-nav-col .menu-main .nav-link { min-height: 44px; }
}

@media (max-width: 767.98px) {
    .logo img { height: 44px; object-fit: contain; object-position: left center; }
    .pain-banner { min-height: 0; }
    .pain-banner-title { padding: 24px 18px; }
    .pain-banner-title h2 { margin: 0; font-size: clamp(1.375rem, 5.6vw, 1.9rem); line-height: 1.5; letter-spacing: .025em; text-wrap: balance; }
    .pain-banner-title p { margin: 10px 0 0; font-size: .95rem; line-height: 1.7; letter-spacing: 0; }
    .pain-list { padding: 24px 16px 12px; gap: 18px; }
    .pain-item { flex-direction: column; align-items: stretch; gap: 0; min-width: 0; border: 1px solid var(--cm-beige-dark); border-radius: 16px; overflow: hidden; box-shadow: 0 3px 12px rgba(0,0,0,.07); }
    .pain-left { width: 100%; min-width: 0; padding: 16px 18px; border-radius: 0; gap: 14px; box-shadow: none; }
    .pain-num { font-size: 2.4rem; }
    .pain-title-block { min-width: 0; }
    .pain-title-block .main-title { font-size: 1.2rem; }
    .pain-title-block .sub-title { font-size: .875rem; line-height: 1.6; letter-spacing: 0; }
    .pain-arrow { display: none; }
    .pain-desc { flex: auto; min-width: 0; width: 100%; padding: 16px 18px; border: 0; border-radius: 0; font-size: 1rem; line-height: 1.75; letter-spacing: 0; text-align: left; box-shadow: none; }
    .pain-footer { padding: 16px 0 24px; }
    .recommend-hero-image { height: auto; object-fit: contain; }
    .recommend-hero-caption { position: static; padding: 24px 16px; transform: none; background: var(--cm-primary-dark); }
    .recommend-hero-caption h1 { font-size: clamp(1.4rem, 5.8vw, 1.9rem); line-height: 1.5; text-shadow: none; }
    .recommend-hero-caption p { padding: 0; border-radius: 0; background: transparent; font-size: 1rem; line-height: 1.7; text-shadow: none; }
    .recommend-experience { font-size: clamp(1.4rem, 6.3vw, 2rem); line-height: 1.6; }
    .recommend-years { font-size: 1.3em; }
    .recommend-proof h3 { font-size: 1.4rem; }
    .recommend-proof p { font-size: 1rem !important; }
    .recommend-guarantees { --bs-gutter-y: 24px; --bs-gutter-x: 16px; }
    .recommend-guarantees h5 { font-size: 1rem; line-height: 1.6; }
    #Content.recommend-page .recommend-testimonials { padding: 40px 0; }
    .recommend-testimonials-title { font-size: clamp(1.4rem, 6vw, 1.8rem); }
    .recommend-testimonials-intro { font-size: 1rem; }
    .recommend-testimonials .card p { text-align: left; font-style: normal !important; }
    .recommend-cta { width: 100%; padding: 14px 18px; font-size: 1rem; }
    #Footer { padding-top: 24px; }
    #Footer > .container { padding-right: 16px; padding-left: 16px; }
    #Footer .footer-layout { grid-template-columns: minmax(0,1fr); gap: 16px; }
    #Footer .footer-brand { padding: 0 2px 4px; }
    #Footer .footer-brand-heading { gap: 12px; }
    #Footer .footer-logo { width: 56px; height: 56px; flex-basis: 56px; }
    #Footer .footer-brand h2 { font-size: 1.125rem; }
    #Footer .footer-brand-description { font-size: .8125rem; }
    #Footer .footer-service { gap: 8px; margin-top: 14px; }
    #Footer .footer-service-phone, #Footer .footer-service-line { padding: 11px 16px; }
    #Footer .footer-service-phone strong { font-size: 1.1875rem; }
    #Footer .footer-location { padding: 16px; }
    #Footer .footer-location-heading { margin-bottom: 10px; }
    #Footer .footer-address { font-size: 1rem; }
    #Footer .footer-contact-list dd { font-size: 1rem; }
    #Footer .footer-contact-list { margin-top: 10px; padding-top: 8px; }
    #Footer .footer-contact-list > div { grid-template-columns: 92px minmax(0,1fr); gap: 4px; }
    #Footer .footer-directions { margin-top: 10px; }
    #Footer .footer-bottom { flex-direction: column; align-items: center; gap: 2px; margin-top: 20px; padding: 18px 12px 56px; text-align: center; }
}