/* YOUYI Inner Pages V2 — shared base (tokens, header, footer, buttons, FAQ, CTA)
   Ported from the approved English Homepage "Premium & Editorial" design system
   (en/index.html Option 2 Final). Used by specialist-page-v2.css and guide-page-v2.css.
   V2 PILOT ONLY — not linked from any production route. */
:root {
  --logo-navy:#04346b;
  --logo-blue:#0b7bd7;
  --brand:#1f5fa8;
  --brand-deep:#0b2a52;
  --ink:#0c2340;
  --ink-2:#5b6b80;
  --ink-3:#8b97a8;
  --paper:#faf7f0;
  --paper-warm:#f6f2ea;
  --paper-pure:#fffdf9;
  --paper-blue:#e9eff6;
  --paper-blue-2:#eef3f8;
  --navy:#0b1e3a;
  --on-dark:#ffffff;
  --on-dark-2:#c3d2e2;
  --on-dark-3:#8ea6c2;
  --line:#e7e1d3;
  --line-cool:#d6e0ea;
  --gutter:clamp(20px, 3.2vw, 40px);
  --wrap:1280px;
  --sp:clamp(56px, 6.4vw, 100px);
  --fs-h1:clamp(30px, 3.6vw, 50px);
  --fs-h2:clamp(24px, 2.7vw, 36px);
  --fs-h3:clamp(16px, 1.2vw, 18px);
  --fs-lead:clamp(15.5px, 1.1vw, 17px);
  --fs-body:16px;
  --fs-sm:14px;
  --fs-kicker:11px;
  --ease:cubic-bezier(.4,0,.2,1);
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body {margin:0; font-family:var(--sans); font-size:var(--fs-body); line-height:1.65; color:var(--ink); background:var(--paper-pure); overflow-x:hidden;}
a {color:inherit; text-decoration:none}
img {max-width:100%; display:block;}
.wrap {width:min(var(--wrap), calc(100% - var(--gutter)*2)); margin:auto;}
h1,h2,h3,h4 {font-family:var(--serif); font-weight:700; margin:0; color:var(--ink); letter-spacing:-.01em;}
h1 {font-size:var(--fs-h1); line-height:1.08;}
h2 {font-size:var(--fs-h2); line-height:1.15;}
h3 {font-size:var(--fs-h3); line-height:1.35;}
p {margin:0;}
.kicker {font-family:var(--sans); font-size:var(--fs-kicker); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand);}
.btn {display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 24px; border-radius:999px; font-family:var(--sans); font-weight:600; font-size:14px; white-space:nowrap; transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);}
.btn.primary {background:var(--brand-deep); color:#fff;}
.btn.primary:hover {background:var(--navy);}
.btn.on-dark {background:#fff; color:var(--brand-deep);}
.btn.on-dark:hover {background:var(--paper-warm);}
.btn.secondary {background:transparent; border:1px solid var(--line-cool); color:var(--ink);}
.btn.secondary:hover {border-color:var(--brand); color:var(--brand-deep);}
.btn-arrow {display:inline-block; margin-left:2px;}
.actions {display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px;}

/* ---------- Header (shared with homepage) ---------- */
.header {position:sticky; top:0; z-index:60; background:var(--paper-pure); border-bottom:1px solid var(--line);}
.nav {display:flex; align-items:center; gap:clamp(16px,1.8vw,28px); min-height:78px;}
.brand {display:flex; align-items:center; gap:12px; flex:0 0 auto;}
.brand .mark {display:block; flex:0 0 auto;}
.brand .mark img {display:block; width:auto; height:30px;}
.brand-text {display:flex; flex-direction:column; justify-content:center; font-family:var(--sans); font-size:12.5px; font-weight:700; line-height:1.3; color:var(--ink);}
.brand-text small {display:block; margin-top:2px; font-size:10.5px; font-weight:400; color:var(--ink-3);}
.menu {display:flex; align-items:center; gap:clamp(14px,1.5vw,22px); margin-left:auto; font-size:13.5px;}
.menu > a {position:relative; white-space:nowrap; color:var(--ink-2); font-weight:500; padding:8px 0; transition:color .16s var(--ease);}
.menu > a:hover {color:var(--ink);}
.lang {display:flex; align-items:center; gap:1px; padding-left:clamp(14px,1.6vw,24px); border-left:1px solid var(--line);}
.lang a {display:inline-flex; align-items:center; min-height:32px; padding:0 8px; border-radius:4px; font-size:12px; font-weight:500; color:var(--ink-3); white-space:nowrap; transition:background-color .16s var(--ease), color .16s var(--ease);}
.lang a:hover {background:var(--paper-warm); color:var(--ink);}
.lang a.active {color:var(--brand-deep); font-weight:700;}
.nav-cta {flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 18px; border-radius:999px; background:var(--brand-deep); color:#fff; font-size:12.6px; font-weight:600; white-space:nowrap; transition:background-color .2s var(--ease);}
.nav-cta:hover {background:var(--navy);}
@media (max-width:1180px) {
  .menu {gap:16px; font-size:13.5px;}
  .nav-cta {padding:0 16px; font-size:12.5px;}
}
@media (max-width:1240px) {
  .nav {flex-wrap:wrap; min-height:0; padding:14px 0; gap:12px 18px;}
  .brand {flex:1 1 auto; min-width:0;}
  .brand-text {min-width:0;}
  .brand-text, .brand-text small {overflow-wrap:break-word;}
  .nav-cta {margin-left:auto;}
  .menu {order:3; width:100%; margin-left:0; flex-wrap:wrap; gap:10px 20px; padding-top:12px; border-top:1px solid var(--line);}
  .lang {margin-left:auto;}
}

/* ---------- Breadcrumb ---------- */
.crumb {padding:14px 0 0; font-size:12.5px; line-height:1.5; color:var(--ink-3);}
.crumb a {color:var(--ink-2); border-bottom:1px solid transparent;}
.crumb a:hover {color:var(--brand); border-bottom-color:var(--brand);}
.crumb span[aria-hidden] {margin:0 6px;}
@media (max-width:640px) {
  .crumb {padding:10px 0 0; font-size:11px; line-height:1.6; overflow-wrap:break-word;}
  .crumb span[aria-hidden] {margin:0 4px;}
}

/* ---------- FAQ (shared) ---------- */
.faq-list {display:grid; gap:0; max-width:820px;}
.faq-item {border-top:1px solid var(--line-cool); padding:22px 0;}
.faq-item:first-child {border-top:0;}
.faq-item h3 {font-family:var(--sans); font-size:16px; font-weight:700; margin:0 0 8px;}
.faq-item p {color:var(--ink-2); font-size:14.5px; line-height:1.75; margin:0;}
.faq-item p a {color:var(--brand); border-bottom:1px solid var(--line-cool);}

/* ---------- Related services ---------- */
.related-grid {display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(14px,1.6vw,20px);}
.related-card {display:flex; flex-direction:column; gap:8px; background:var(--paper-blue-2); border:1px solid var(--line-cool); padding:22px 22px 24px; transition:background-color .18s var(--ease), border-color .18s var(--ease);}
.related-card:hover {background:var(--paper-blue); border-color:#c3d4e4;}
.related-card h3 {font-family:var(--sans); font-size:15px;}
.related-card p {color:var(--ink-2); font-size:13.5px; line-height:1.6; margin:0;}
.related-card .arrow {margin-top:auto; align-self:flex-end; color:var(--brand); font-size:15px;}
@media (max-width:900px) {.related-grid {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px) {.related-grid {grid-template-columns:1fr;}}
.related-grid.cols-4 {grid-template-columns:repeat(4, minmax(0,1fr));}
@media (max-width:1100px) {.related-grid.cols-4 {grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (max-width:620px) {.related-grid.cols-4 {grid-template-columns:1fr;}}

/* ---------- Final CTA band ---------- */
.final-cta {position:relative; isolation:isolate; overflow:hidden; background:var(--navy); color:#fff; padding:var(--sp) 0;}
.final-cta .kicker {color:#8ec2ee;}
.final-cta h2 {color:#fff; max-width:20ch;}
.final-cta p {margin-top:14px; max-width:56ch; color:var(--on-dark-2); font-size:15px; line-height:1.75;}
.final-cta .actions {margin-top:28px;}

/* ---------- Contact card (lightweight — no map on inner pages) ---------- */
.contact-band {background:var(--paper-warm); padding:var(--sp) 0;}
.contact-card {background:#fff; border:1px solid var(--line); padding:clamp(28px,3vw,40px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px 44px; align-items:center;}
.contact-card h3 {font-family:var(--sans); font-size:16px; margin-bottom:16px;}
.contact-details {display:grid; gap:12px;}
.contact-line {display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; color:var(--ink-2); font-size:14px;}
.contact-line strong {color:var(--ink-3); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;}
.qr-grid {display:grid; grid-template-columns:repeat(2, minmax(110px,140px)); gap:16px;}
.qr-box {background:var(--paper-blue-2); border:1px solid var(--line-cool); padding:14px; text-align:center;}
.qr-box img {width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff;}
.qr-box b {display:block; margin-top:10px; font-size:13px; color:var(--ink);}
.qr-box small {display:block; margin-top:2px; font-size:10.5px; color:var(--ink-3); line-height:1.4;}
@media (max-width:760px) {
  .contact-card {grid-template-columns:1fr; gap:24px;}
  .qr-grid {grid-template-columns:repeat(2,1fr); max-width:280px;}
}

/* ---------- Footer (shared with homepage) ---------- */
.footer {background:var(--paper-warm); color:var(--ink-2); padding:clamp(26px,2.8vw,38px) 0;}
.footer-row {display:flex; align-items:center; justify-content:space-between; gap:16px 32px; flex-wrap:wrap;}
.footer-logo {display:flex; align-items:center; line-height:0;}
.footer-logo img {display:block; width:clamp(96px,7vw,116px); height:auto;}
.footer-nav {display:flex; align-items:center; gap:clamp(14px,1.8vw,26px); flex-wrap:wrap; font-size:13px;}
.footer-nav a {color:var(--ink-2); transition:color .16s var(--ease);}
.footer-nav a:hover {color:var(--brand);}
.copyright {font-size:12.5px; color:var(--ink-3);}
.footer-bottom-border {border-top:1px solid var(--line); margin-top:clamp(20px,2.2vw,28px); padding-top:clamp(16px,1.8vw,22px);}
.footer-tags {color:var(--ink-3); font-size:11px; line-height:1.7;}
@media (max-width:640px) {.footer-row {justify-content:flex-start;}}

/* ---------- Float contact ---------- */
.float-contact {position:fixed; right:clamp(16px,2vw,28px); bottom:clamp(16px,2vw,28px); z-index:70; display:flex; flex-direction:column; align-items:flex-end; gap:10px;}
.float-panel {display:none; width:260px; background:#fff; border:1px solid var(--line); padding:18px; box-shadow:0 18px 40px rgba(11,30,58,.16);}
.float-contact.open .float-panel {display:block;}
.float-panel > strong {display:block; font-size:14.5px; font-weight:600; color:var(--ink);}
.float-panel a {color:var(--brand);}
.mini-qrs {display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:14px;}
.mini-qrs img {display:block; width:100%; border:1px solid var(--line);}
.float-btn {border:1px solid var(--line-cool); background:#fff; color:var(--ink-2); cursor:pointer; border-radius:999px; padding:12px 18px; font-weight:600; font-size:13px; box-shadow:0 10px 26px rgba(11,30,58,.12); transition:color .16s var(--ease), border-color .16s var(--ease);}
.float-btn:hover {color:var(--ink); border-color:#b9c7d6;}
@media (max-width:480px) {.float-contact {display:none !important;}}

/* ---------- Section rhythm ---------- */
.section {padding:var(--sp) 0;}
.section.alt {background:var(--paper-blue-2);}
.sec-head {max-width:760px; margin-bottom:clamp(28px,3.2vw,44px);}
.sec-head h2 {margin-top:10px;}
.sec-head p {margin-top:14px; color:var(--ink-2); font-size:15px; line-height:1.75; max-width:60ch;}