/*
  YANGPU HEALTH VI V1.0 — WEBSITE APPLICATION
  Reference: 阳璞健康_VI规范_V1.0_20261010.pptx
  Standard A approved logo, forest-green scheme, warm-white primary canvas.
  No remote fonts and no third-party runtime dependencies.
*/
:root {
  --ink: #203B32;
  --muted: #5B7166;
  --deep: #1F5A46;
  --dark: #203B32;
  --cream: #FAF9F5;
  --warm: #F2F5EF;
  --paper: #fff;
  --line: #D5E1D9;
  --sage: #95B49E;
  --gold: #BE912D;
  --display: "Manrope", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif;
  --sans: "Inter", "Source Han Sans CN", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --gutter: clamp(24px, 4.9vw, 80px);
  --header-h: 102px;
  --container: 1400px;
}
html { scroll-padding-top:105px; }
body { color:var(--ink); background:var(--cream); font-family:var(--sans); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {outline:2px solid var(--deep);outline-offset:4px;}
::selection {background:#cfe1d3;color:var(--ink);}
.container { width:min(100% - 2 * var(--gutter), var(--container)); }
.section-pad { padding-block:clamp(78px, 8.3vw, 124px); }

/* Exact approved assets on their appropriate light/dark surfaces — never white-box a logo */
.site-header,
.site-header.is-scrolled {
  position:fixed; top:0; left:0; width:100%; height:var(--header-h);
  color:var(--ink); background:rgba(250,249,245,.985);
  box-shadow:0 1px 0 rgba(31,90,70,.12); border:0;
  backdrop-filter:blur(14px);
}
.site-header.is-scrolled {height:var(--header-h);box-shadow:0 1px 0 rgba(31,90,70,.12),0 9px 28px rgba(31,90,70,.045);}
.site-header {gap:20px;}
.brand, .site-header.is-scrolled .brand {background:transparent;padding:0;border-radius:0;justify-content:flex-start;min-width:0;}
.brand-logo {width:252px;height:auto;aspect-ratio:1696 / 589;object-fit:contain;}
.brand-compact {display:none;}
.desktop-nav {gap:clamp(14px,1.45vw,25px);}
.desktop-nav a {font-size:12px;font-weight:600;color:var(--ink);opacity:.88;white-space:nowrap;}
.desktop-nav a:hover {color:var(--deep);opacity:1;}
.header-right {gap:16px;margin-left:0;}
.language-picker {color:var(--ink);}
.language-picker select {font-weight:600;color:var(--ink);font-size:12px;}
.globe-icon {font-size:19px;color:var(--deep);}
.header-contact, .site-header.is-scrolled .header-contact {
  background:var(--deep);border:1px solid var(--deep);color:white;
  font-size:12px;font-weight:650;letter-spacing:.01em;padding:13px 18px;
}
.header-contact:hover, .site-header.is-scrolled .header-contact:hover {background:var(--dark);border-color:var(--dark);color:white;}
.menu-toggle {color:var(--deep);}
.mobile-menu {top:var(--header-h);background:var(--cream);color:var(--deep);border-top:1px solid var(--line);}
.mobile-menu a {font-family:var(--sans);font-size:18px;font-weight:600;}

/* Hero follows slide 20: readable warm-white lead, right-hand atmosphere imagery. */
.hero {height:clamp(645px, 79svh, 790px);min-height:645px;max-height:none;background:var(--cream);color:var(--ink);}
.hero-image {inset:0 0 0 auto;width:56.5%;height:100%;object-fit:cover;object-position:70% center;animation:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.25) 13%,#000 38%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.25) 13%,#000 38%);
}
.hero-overlay,.hero-decor {display:none;}
.hero-content {height:100%;padding-top:var(--header-h);}
.hero-copy {max-width:730px;width:min(57%,710px);padding:38px 0 70px;position:relative;z-index:2;}
.hero-eyebrow {color:var(--deep);margin-bottom:28px;font-size:11px;font-weight:750;letter-spacing:.115em;}
.eyebrow-line {width:31px;background:var(--deep);}
.hero h1 {font-family:var(--display);font-size:clamp(48px,5.1vw,78px);line-height:1.13;letter-spacing:-.043em;font-weight:750;color:var(--deep);max-width:850px;margin:0 0 26px;text-wrap:balance;}
.hero h1 em {font:inherit;font-style:normal;}
.hero-subtitle {font-size:clamp(15px,1.3vw,18px);font-weight:400;line-height:1.87;max-width:525px;color:var(--ink);margin-bottom:36px;}
.hero-actions {gap:12px;}
.btn {font-size:13px;font-weight:650;letter-spacing:0;min-height:48px;padding:14px 22px;gap:28px;}
.btn-light,.btn-dark {background:var(--deep);border-color:var(--deep);color:white;}
.btn-light:hover,.btn-dark:hover {background:var(--dark);border-color:var(--dark);color:white;}
.btn-outline-light {border-color:var(--deep);color:var(--deep);}
.btn-outline-light:hover {background:#e1ede5;color:var(--deep);}
.hero-footer {color:var(--muted);bottom:20px;font-size:10px;letter-spacing:.08em;z-index:2;}
.location-dot {background:var(--deep);}
.hero-count-line {background:#95B49E;}
.scroll-note {color:var(--muted);}
.hero-image-caption {position:absolute;bottom:26px;right:var(--gutter);color:var(--dark);background:rgba(250,249,245,.82);padding:7px 11px;font-size:10px;letter-spacing:.03em;z-index:3;margin:0;max-width:260px;text-align:right;}

/* Who does what: explicit commercial coordination vs. clinical provision. */
.role-strip {background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);scroll-margin-top:100px;}
.role-layout {display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(25px,5vw,80px);padding-block:45px 49px;align-items:start;}
.role-mini-label {display:block;font-size:10px;font-weight:750;letter-spacing:.13em;color:var(--deep);margin-bottom:15px;}
.role-identity h2 {font-size:clamp(21px,2vw,30px);font-weight:750;line-height:1.33;letter-spacing:-.02em;color:var(--deep);font-family:var(--display);margin:0 0 9px;}
.role-identity > p {font-size:13px;color:var(--muted);margin:0;}
.role-cell {padding-left:23px;border-left:2px solid #D7E4DA;}
.role-cell p {font-size:14px;color:var(--ink);line-height:1.83;margin:0;max-width:400px;}

/* Typography and grids derived from VI title/paragraph hierarchy. */
.eyebrow {font-weight:750;letter-spacing:.105em;}
.overline {color:var(--deep);}
.editorial-heading {font-family:var(--display);font-size:clamp(39px,4vw,62px);font-weight:750;line-height:1.22;letter-spacing:-.036em;color:var(--ink);}
.editorial-heading em {font:inherit;font-style:normal;color:var(--deep);}
.section-description {color:var(--muted);font-size:14px;line-height:1.8;}
.section-head {align-items:end;gap:56px;}
.text-link {color:var(--deep);border-color:var(--deep);font-size:13px;font-weight:650;}

/* Welcome and commitments */
.intro-section {background:var(--cream);}
.intro-layout {grid-template-columns:1.05fr .95fr;gap:clamp(60px,8vw,130px);}
.intro-right {padding-top:34px;line-height:1.85;color:var(--muted);}
.intro-right .intro-lead {font-family:var(--display);font-size:clamp(19px,1.75vw,25px);line-height:1.5;color:var(--deep);font-weight:650;}
.principles-row {margin-top:clamp(58px,6.2vw,85px);border-color:var(--line);}
.principle {gap:16px;}
.principle-icon {color:var(--deep);}
.principle h3 {font-weight:750;color:var(--deep);}

/* Service cards */
.experiences-section {background:var(--warm);}
.filter-chip {background:transparent;border:1px solid #B7C9BC;color:var(--ink);border-radius:2px;padding:12px 20px;}
.filter-chip.selected {background:var(--deep);border-color:var(--deep);color:white;}
.program-grid {gap:23px;}
.program-card {background:white;border:1px solid var(--line);box-shadow:none;}
.program-cover {aspect-ratio:1.45;background:#d5e2d7;}
.program-index {background:rgba(31,90,70,.9);}
.program-duration {background:rgba(250,249,245,.96);color:var(--deep);}
.program-body {padding:27px 28px 30px;}
.program-cat {color:var(--muted);font-weight:700;letter-spacing:.08em;}
.program-body h3 {font-family:var(--display);font-size:clamp(22px,1.9vw,28px);font-weight:750;color:var(--deep);letter-spacing:-.025em;}
.program-body p {color:var(--muted);}
.programme-note {font-size:12px;color:var(--muted);line-height:1.85;}
.program-more {color:var(--deep);}

/* Hainan feature uses AI atmosphere, not a venue-verified image. */
.feature-section {background:#EAF0E9;grid-template-columns:1fr 1fr;min-height:570px;}
.feature-image-area {min-height:570px;}
.feature-image-area img {object-position:75% center;}
.feature-image-area::after {background:linear-gradient(0deg,rgba(15,38,29,.55),transparent 21%);}
.photo-caption {bottom:25px;left:var(--gutter);color:white;text-shadow:0 1px 5px rgba(0,0,0,.5);letter-spacing:.08em;}
.feature-content-area {padding:65px clamp(40px,6.7vw,110px);}
.feature-copy .editorial-heading {font-size:clamp(40px,3.6vw,58px);}
.feature-lead {font-family:var(--display);font-size:23px;font-weight:650;}
.feature-tags span {border-color:#ADC6B1;color:var(--dark);}

/* Image-led moments, controlled treatment */
.gallery-section {background:var(--cream);}
.gallery-heading {margin-bottom:42px;}
.gallery-grid {gap:17px;grid-template-rows:340px 220px;}
.gallery-bottom-copy {background:#E9F1E9;}
.gallery-bottom-copy p {color:var(--muted);}
.gallery-star {color:var(--sage);}

/* Process uses a quiet sage surface rather than a dominant dark block. */
.approach-section {background:#E5EEE6;color:var(--ink);}
.approach-top {margin-bottom:55px;}
.approach-top > p {color:var(--muted);}
.light-overline {color:var(--deep);}
.light-heading {color:var(--deep);}
.steps-grid {border-color:#AFC7B4;}
.step-card {border-color:#BED0C1;}
.step-num {color:var(--deep);font-family:var(--display);font-weight:650;font-size:27px;margin-bottom:34px;}
.step-card h3 {font-family:var(--display);font-weight:700;color:var(--deep);font-size:18px;}
.step-card p {color:var(--muted);font-size:13px;}
.approach-bottom {color:var(--muted);}
.text-link-light {color:var(--deep);border-color:var(--deep);}

/* Collaboration / quotes */
.partners-section {background:var(--cream);}
.partners-image-border {border-color:#B3CDB8;}
.partners-lead {font-family:var(--display);font-size:clamp(20px,1.9vw,26px);font-weight:650;}
.partner-points div {color:var(--ink);border-color:var(--line);}
.partner-points div span:first-child {color:var(--deep);}
.quote-strip {min-height:280px;background:#E6EEE6;color:var(--deep);}
.quote-strip-bg {background:linear-gradient(90deg,rgba(234,242,234,.91),rgba(234,242,234,.94)),url('../assets/vi/scene-h05.webp') center/cover;}
.quote-symbol {font-size:52px;color:var(--deep);}
.quote-strip p {font-family:var(--display);font-style:normal;font-weight:650;font-size:clamp(26px,2.6vw,38px);line-height:1.42;}
.quote-attr {color:var(--muted);}

/* FAQs */
.faq-section {background:var(--warm);}
.faq-question {color:var(--deep);font-weight:650;}
.faq-item,.faq-item:first-child {border-color:#B9C9BD;}
.faq-symbol {color:var(--deep);}
.faq-answer {color:var(--muted);}

/* Contact: one measured dark surface, with warm-white form. */
.contact-section {background:var(--dark);}
.contact-copy .editorial-heading,.contact-copy .editorial-heading em {color:var(--cream);}
.contact-lead {color:rgba(255,255,255,.79);}
.contact-details > span {color:#D4E5D5;}
.contact-illustration {display:none;}
.contact-form-panel {background:var(--cream);border:1px solid rgba(149,180,158,.55);padding:clamp(32px,4vw,60px);}
.contact-form-panel h3 {font-family:var(--display);font-weight:750;font-size:clamp(27px,2.5vw,36px);color:var(--deep);}
.form-overline {color:var(--deep);}
.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus {border-color:var(--deep);}
.consent input {accent-color:var(--deep);}

/* Footer: exact VI reverse logo, no coloured backing panel. */
.site-footer {background:var(--deep);color:white;padding-top:67px;}
.footer-logo-link {background:transparent;border:0;border-radius:0;padding:0;justify-content:flex-start;}
.footer-logo {width:252px;height:auto;aspect-ratio:1696 / 589;object-fit:contain;}
.footer-brand p {color:rgba(255,255,255,.78);font-size:13px;max-width:340px;margin-top:18px;}
.footer-nav p {color:#D5E4D6;font-weight:700;letter-spacing:.1em;}
.footer-nav a {color:rgba(255,255,255,.82);}
.footer-nav a:hover {color:white;text-decoration:underline;}
.footer-bottom {color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.25);}
.back-top {border-color:rgba(255,255,255,.48);}

/* Modals */
.programme-dialog {background:var(--cream);color:var(--ink);}
.dialog-close {background:var(--cream);color:var(--deep);}
.dialog-copy .editorial-heading {font-size:clamp(32px,3vw,41px);}
.dialog-lead,.dialog-copy li,.dialog-note {color:var(--muted);}
.dialog-copy li::before {color:var(--deep);}

/* Keep title languages faithful: Songti SC for Chinese headings, Manrope for Latin. */
html[lang="zh-CN"] .hero h1,
html[lang="zh-CN"] .editorial-heading,
html[lang="zh-CN"] .role-identity h2,
html[lang="zh-CN"] .intro-right .intro-lead,
html[lang="zh-CN"] .program-body h3,
html[lang="zh-CN"] .feature-lead,
html[lang="zh-CN"] .partners-lead,
html[lang="zh-CN"] .step-card h3,
html[lang="zh-CN"] .contact-form-panel h3 {font-family:var(--serif);font-weight:700;letter-spacing:0;}

@media (max-width:1350px) {
  :root {--header-h:92px;}
  .brand-logo {width:240px;}
  .site-header {gap:10px;}
  .desktop-nav {gap:15px;}
  .header-right {gap:10px;}
  .header-contact {padding:12px 12px;}
  .hero h1 {font-size:clamp(44px,4.9vw,70px);}
}
@media (max-width:1050px) {
  :root {--header-h:84px;}
  .desktop-nav {display:none;}
  .menu-toggle {display:block;}
  .brand-logo {width:245px;}
  .site-header {gap:14px;}
  .hero-copy {width:62%;}
  .hero-image {width:62%;}
  .hero h1 {font-size:clamp(42px,5.7vw,66px);}
  .role-layout {grid-template-columns:1.1fr 1fr 1fr;gap:25px;}
  .role-cell {padding-left:17px;}
  .mobile-menu {top:var(--header-h);}
}
@media (max-width:760px) {
  :root {--header-h:77px;--gutter:22px;}
  .section-pad {padding-block:72px;}
  .site-header,.site-header.is-scrolled {height:var(--header-h);padding-inline:var(--gutter);}
  .brand-logo {display:none;}
  .brand-compact {display:inline-flex;align-items:center;gap:7px;max-width:182px;color:var(--deep);}
  .brand-compact > img {width:37px;height:35px;object-fit:contain;flex-shrink:0;}
  .brand-compact-type {font-family:var(--serif);font-size:16px;line-height:1.18;font-weight:700;white-space:nowrap;}
  .brand-compact-type small {font-family:var(--sans);font-size:8px;letter-spacing:.04em;display:block;margin-top:3px;}
  .header-contact {display:none;}
  .header-right {gap:9px;}
  .language-picker {gap:0;}
  .language-picker select {font-size:11px;padding:5px 1px;}
  .globe-icon {font-size:17px;}
  .mobile-menu {top:var(--header-h);}
  .hero {height:810px;min-height:760px;max-height:none;}
  .hero-image {inset:auto 0 0 0;width:100%;height:46%;object-position:70% 55%;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%);mask-image:linear-gradient(to bottom,transparent 0%,#000 30%);}
  .hero-content {padding-top:var(--header-h);align-items:start;}
  .hero-copy {width:100%;max-width:680px;padding:86px 0 0;}
  .hero-eyebrow {letter-spacing:.065em;font-size:10px;margin-bottom:19px;}
  .hero h1 {font-size:clamp(40px,7.7vw,60px);line-height:1.18;margin-bottom:18px;max-width:650px;}
  .hero-subtitle {font-size:14px;line-height:1.72;max-width:610px;margin-bottom:23px;}
  .hero-actions {gap:10px;}
  .hero-actions .btn {padding:12px 15px;font-size:12px;gap:10px;min-height:44px;}
  .hero-footer {bottom:14px;}
  .hero-location {display:none;}
  .hero-image-caption {font-size:9px;max-width:80%;bottom:17px;right:var(--gutter);}
  .role-layout {grid-template-columns:1fr;gap:23px;padding-block:38px;}
  .role-identity h2 {font-size:26px;}
  .role-cell {padding-left:16px;}
  .editorial-heading {font-size:clamp(35px,7vw,49px);}
  .intro-layout {grid-template-columns:1fr;gap:20px;}
  .intro-right {padding-top:0;}
  .principles-row {margin-top:48px;}
  .section-head {display:block;}
  .program-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;}
  .program-body {padding:20px;}
  .program-body h3 {font-size:21px;}
  .feature-section {grid-template-columns:1fr;}
  .feature-image-area {min-height:380px;}
  .feature-content-area {padding:60px var(--gutter);}
  .gallery-grid {grid-template-rows:250px 200px;}
  .approach-top {display:block;margin-bottom:38px;}
  .steps-grid {grid-template-columns:repeat(2,1fr);}
  .step-card:nth-child(2) {border-right:0;}
  .step-card:nth-child(-n+2) {border-bottom:1px solid #BED0C1;}
  .step-card:nth-child(3) {padding-left:0;}
  .partners-layout,.faq-layout,.contact-layout {grid-template-columns:1fr;gap:42px;}
  .footer-logo {width:250px;}
  .footer-main {grid-template-columns:1fr 1fr;gap:35px;}
  .footer-brand {grid-column:1/-1;}
}
@media (max-width:520px) {
  .site-header {gap:4px;}
  .hero {height:790px;min-height:790px;}
  .hero-copy {padding-top:80px;}
  .hero h1 {font-size:clamp(38px,9.3vw,48px);}
  .hero-subtitle {font-size:13px;line-height:1.73;}
  .hero-image {height:43%;}
  .hero-image-caption {bottom:17px;}
  .role-identity h2 {font-size:23px;}
  .program-grid {grid-template-columns:1fr;gap:20px;}
  .program-cover {aspect-ratio:1.45;}
  .program-body h3 {font-size:24px;}
  .gallery-grid {display:block;}
  .gallery-large {height:300px;}
  .gallery-small {height:200px;}
  .gallery-bottom-copy {padding:25px;}
  .steps-grid {grid-template-columns:1fr;}
  .step-card,.step-card:first-child,.step-card:nth-child(3) {padding:23px 0 27px;border-right:0;border-bottom:1px solid #BED0C1;}
  .step-card:last-child {border-bottom:0;}
  .step-num {margin-bottom:14px;}
  .form-grid {grid-template-columns:1fr;}
  .footer-main {grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion:reduce) {
  .hero-image {animation:none;}
}