/* Public studio identity. Loaded after the existing page styles. */
:root {
  --studio-accent: #cf4714;
  --studio-tint: #fff5ed;
  --studio-ink: #222222;
  --studio-muted: #525252;
  --studio-line: #f2dfd2;
  --studio-paper: #ffffff;
  --studio-emphasis: #cf4714;
  --orange: #cf4714;
  --orange-dark: #b63c10;
  --orange-soft: #fff5ed;
  --ink: #222222;
  --ink-2: #525252;
  --muted: #525252;
  --line: #f2dfd2;
  --bg: #ffffff;
  --bg-soft: #fff5ed;
  --maxw: 1280px;
}
body { background: var(--studio-paper); color: var(--studio-ink); }
.wrap, .solution-detail-page .wrap { max-width: 1280px; padding-left: 40px; padding-right: 40px; }
::selection { background: #ffd8bd; color: var(--studio-ink); }
:focus-visible { outline-color: var(--studio-accent); }

/* Keep navigation geometry aligned with studio.js and the solution directory. */
body > header.studio-header { background: var(--studio-accent); color: #fff; border-color: var(--orange-dark); backdrop-filter: none; }
.studio-header .studio-brand { color: #fff; }
.studio-header .studio-brand img { background: #fff; border-radius: 9px; padding: 3px; }
.studio-header .studio-links { color: #fff; }
.studio-header .studio-links .studio-language { color: inherit; border-color: #ffffff66; }
.studio-header .studio-links a:hover { color: #fff; }
.studio-header .studio-consult, .studio-header .studio-phone, .studio-header .studio-menu-toggle { background: #fff; color: var(--orange-dark); border-color: #fff; }
.studio-header .studio-consult:hover, .studio-header .studio-phone:hover, .studio-header .studio-menu-toggle:hover { background: var(--studio-tint); color: var(--orange-dark); }
.studio-home .studio-header .studio-links a:not(.studio-language)::after { background: #fff; }
.studio-header .studio-links.is-open { color: var(--studio-ink); }
.studio-header .studio-links.is-open a { color: var(--studio-ink); }
.studio-header .studio-links.is-open a:hover { color: var(--orange-dark); }
.studio-home .studio-header .studio-links.is-open a:not(.studio-language)::after { background: var(--studio-accent); }
.studio-nav { max-width: 1280px; height: 72px; padding: 0 40px; gap: 26px; }
.studio-brand { font-size: 18px; font-weight: 750; letter-spacing: -.035em; }
.studio-brand img { width: 38px; height: 38px; }
.studio-links { gap: 24px; font-size: 13px; color: var(--studio-ink); }
.studio-links a { transition: color .18s; }
.studio-links .studio-language { color: var(--studio-muted); border-color: var(--studio-line); }
.studio-consult, .studio-phone { background: var(--studio-accent); color: #fff; border-radius: 12px; padding: 11px 19px; }
.studio-consult:hover, .studio-phone:hover { background: var(--orange-dark); }
.studio-skip { background: var(--studio-paper); border: 1px solid var(--studio-line); }
.studio-text-button { color: var(--orange-dark); }
.btn { border-radius: 11px; font-weight: 650; box-shadow: none; transition: background .18s, color .18s, border-color .18s; }
.btn-primary { background: var(--studio-accent); color: #fff; box-shadow: none; }
.btn-primary:hover { background: var(--orange-dark); box-shadow: none; transform: none; }
.btn-ghost { background: transparent; color: var(--studio-ink); border-color: var(--studio-line); }
.btn-ghost:hover { background: var(--studio-tint); color: var(--studio-accent); border-color: var(--studio-accent); }
.btn-white { background: var(--studio-paper); color: var(--studio-emphasis); }
.btn-white:hover { background: var(--studio-tint); color: var(--orange-dark); }
.btn-out, .btn-outline { background: transparent; color: #fff; border-color: #ffffffb3; }
.btn-out:hover, .btn-outline:hover { background: #ffffff10; border-color: #fff; }

/* Interior pages use a quiet, left-aligned opening. */
.page-hero, .case-list-page .page-hero, .service-page .page-hero, .case-detail-page .page-hero {
  padding: 80px 0 66px;
  background: var(--studio-paper);
  border-bottom: 1px solid var(--studio-line);
}
.page-hero::before, .page-hero::after, .solution-hero::before, .solution-hero::after { content: none; }
.page-hero .wrap { text-align: left; }
.page-hero h1, .case-list-page .page-hero h1, .service-page .page-hero h1, .case-detail-page .page-hero h1 {
  max-width: 1040px;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.045em;
  color: var(--studio-ink);
}
.page-hero p, .service-page .page-hero p, .case-detail-page .page-hero p {
  max-width: 760px;
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 1.9;
  color: var(--studio-muted);
}
.page-hero .hero-actions, .hero-counts { justify-content: flex-start; }
.hero-counts { gap: 10px 24px; }
.hero-counts span { background: none; border: 0; border-radius: 0; padding: 0; font-size: 12px; color: var(--studio-muted); }
.eyebrow, .sec-eyebrow { color: var(--orange-dark); font-size: 11px; font-weight: 650; letter-spacing: .12em; }
.eyebrow::before, .sec-eyebrow::before { content: none; }
.breadcrumbs { color: var(--studio-muted); font-size: 12px; margin-bottom: 25px; }
.section-soft, .section-tint { background: var(--studio-tint); }
body:not(.home-page) .section { padding-top: 72px; padding-bottom: 72px; }
body:not(.home-page) .sec-head { text-align: left; margin-bottom: 36px; }
body:not(.home-page) .sec-title { font-size: 34px; font-weight: 700; letter-spacing: -.035em; }
body:not(.home-page) .sec-sub { max-width: 760px; margin-left: 0; margin-right: 0; line-height: 1.8; }

/* Portfolio images carry the emphasis; supporting copy sits on the page. */
.tag-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tag-btn { border: 1px solid var(--studio-line); cursor: pointer; font-family: inherit; font-size: 14px; }
.work-grid, .case-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 42px 32px; }
.work-card, .case { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.work-card:hover, .case:hover { transform: none; box-shadow: none; border-color: transparent; }
.work-preview { aspect-ratio: 1.6; border: 1px solid var(--studio-line); border-radius: 8px; background: var(--studio-tint); padding-top: 0; }
.work-preview::before { content: none; }
.work-preview img { transition: transform .3s; }
.work-preview--mobile { background: var(--studio-tint); }
.work-preview--mobile img { max-width: 46%; height: 89%; border-radius: 10px; box-shadow: 0 4px 12px #cf471414; }
.work-placeholder { color: var(--studio-muted); }
.work-kind { left: 16px; bottom: 14px; padding: 4px 8px; background: var(--studio-paper); border: 0; border-radius: 4px; color: var(--studio-muted); }
.work-body { padding: 22px 0 0; }
.work-tags { margin-bottom: 12px; gap: 7px 14px; }
.work-tags span, .case .tag { padding: 0; border-radius: 0; background: none; color: var(--studio-muted); font-size: 11px; }
.work-body h3 { font-size: 23px; font-weight: 650; line-height: 1.5; letter-spacing: -.025em; margin-bottom: 9px; }
.work-body > p { font-size: 14px; line-height: 1.85; max-width: 560px; margin-bottom: 20px; }
.work-actions { padding-top: 15px; border-color: var(--studio-line); font-size: 13px; }
.work-actions a, .work-actions button { color: var(--studio-ink); }
.work-actions a:hover, .work-actions button:hover { color: var(--studio-accent); }
.case .shot { aspect-ratio: 1.6; border: 1px solid var(--studio-line); border-radius: 8px; background: var(--studio-tint); }
.case .shot::before, .case .shot::after { display: none; }
.case .shot--has-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.case .shot--browser.shot--has-image img, .case .shot--dashboard.shot--has-image img { top: 0; height: 100%; border: 0; }
.case .shot--mobile.shot--has-image { background: var(--studio-tint); }
.case .shot--mobile.shot--has-image img { width: auto; max-width: 46%; height: 89%; object-fit: contain; border-radius: 10px; }
.case:hover .shot { background: var(--studio-tint); }
.case:hover .shot--mobile { background: var(--studio-tint); }
.case:hover .shot img { transform: scale(1.025); }
.case .body { padding: 22px 0 0; }
.case .body h3 { font-size: 23px; font-weight: 650; letter-spacing: -.025em; }
.case .tags { gap: 14px; margin-top: 12px; }
.tag-bar, .filter-bar { justify-content: flex-start; gap: 10px; margin-bottom: 24px; }
.tag-btn, .filter-btn { border-radius: 7px; padding: 9px 17px; background: transparent; border-color: var(--studio-line); color: var(--studio-muted); font-weight: 500; }
.tag-btn.active, .filter-btn.active { background: var(--studio-accent); color: #fff; border-color: var(--studio-accent); }
.tag-btn:hover, .filter-btn:hover { color: var(--studio-accent); border-color: var(--studio-accent); }
.tag-btn.active:hover, .filter-btn.active:hover { color: #fff; }
.case-filter-status { font-size: 12px; margin-bottom: 26px; }
.case-detail-image { background: var(--studio-tint); border-radius: 10px; padding: 20px; box-shadow: none; }
.case-detail-image img { border-radius: 3px; }

/* Service and solution content retains its information architecture. */
.service-facts { gap: 0; border-top: 1px solid var(--studio-line); border-bottom: 1px solid var(--studio-line); margin-top: 38px; }
.service-facts > div { background: transparent; border: 0; border-right: 1px solid var(--studio-line); border-radius: 0; padding: 24px; }
.service-facts > div:first-child { padding-left: 0; }
.service-facts > div:last-child { border-right: 0; }
.service-page .page-hero .price-note { font-size: 12px; line-height: 1.8; margin-top: 18px; max-width: 1000px; }
.service-feature { background: transparent; border: 0; border-top: 1px solid var(--studio-line); border-radius: 0; padding: 25px 0 15px; }
.service-feature h3 { font-size: 23px; font-weight: 650; }
.service-delivery li { background: transparent; border-radius: 8px; border-color: var(--studio-line); }
.related-card { background: transparent; border-radius: 8px; }
.related-card:hover { transform: none; background: var(--studio-tint); border-color: var(--studio-accent); }
.solution-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 32px; }
.solution-card { background: transparent; border: 0; border-top: 1px solid var(--studio-line); border-radius: 0; padding: 28px 0 32px; min-height: 240px; }
.solution-card::after { display: none; }
.solution-card:hover { transform: none; box-shadow: none; background: transparent; border-color: var(--studio-ink); }
.solution-card h2, .solution-card h3 { font-weight: 650; font-size: 22px; letter-spacing: -.025em; }
.solution-card .type { color: var(--orange-dark); font-size: 11px; letter-spacing: .06em; }
.solution-card .code { color: var(--studio-muted); font-size: 10px; }
.solution-card p { color: var(--studio-muted); line-height: 1.8; }
.solution-hero { padding-top: 66px; background: var(--studio-paper); border-color: var(--studio-line); }
.solution-hero h1 { font-size: 56px; font-weight: 700; line-height: 1.22; letter-spacing: -.04em; }
.solution-hero-copy > p { color: var(--studio-muted); font-size: 18px; line-height: 1.85; }
.solution-tags { gap: 16px; }
.solution-tags span { background: none; border: 0; border-radius: 0; padding: 0; color: var(--studio-accent); font-size: 11px; font-weight: 600; }
.solution-coverage { background: transparent; border: 0; border-top: 1px solid var(--studio-line); border-radius: 0; backdrop-filter: none; }
.solution-coverage div { padding: 25px; border-color: var(--studio-line); }
.solution-coverage div:first-child { padding-left: 0; }
.solution-coverage strong { color: var(--studio-ink); font-size: 26px; font-weight: 600; }
.plan-nav { top: 72px; background: rgba(255,255,255,.97); border-color: var(--studio-line); }
.plan-nav a { color: var(--studio-muted); }
.plan-section { scroll-margin-top: 138px; }
.section-dark { background: #222222; }
.structure-map { border-radius: 12px; box-shadow: none; }
.technical-item, .quotation-card { border-radius: 8px; box-shadow: none; }

/* Recolor the diagram's legacy green nodes without changing its layout. */
.feature::before { background: var(--studio-tint); color: var(--studio-accent); }
.info-box, .info-box:nth-child(2), .case-card .shot { background: var(--studio-tint); }
.section-index { color: #f06425; }
.section-tint .section-index { color: var(--studio-accent); }
.structure-map, .structure-map-meta, .structure-visual, .legend-page { border-color: var(--studio-line); }
.structure-legend span, .structure-swipe-hint, .branch-head p { color: var(--studio-muted); }
.legend-section { background: #f06425; }
.structure-map-viewport { scrollbar-color: #f3b592 var(--studio-tint); }
.structure-map-viewport::-webkit-scrollbar-track { background: var(--studio-tint); }
.structure-map-viewport::-webkit-scrollbar-thumb { background: #f3b592; }
.structure-visual, .structure-root { background: var(--studio-tint); }
.structure-origin::after, .structure-branches::before, .structure-branch::before,
.branch-head::after, .structure-branch ul::before, .structure-branch li::before { background: #f3b592; }
.branch-head { background: var(--studio-tint); border-color: var(--studio-line); box-shadow: 0 8px 24px #cf47140e; }
.branch-head > span { background: var(--studio-paper); color: var(--studio-accent); }
.structure-branch li { background: var(--studio-paper); border-color: var(--studio-line); color: var(--studio-ink); }
.structure-branch:nth-child(4n+2)::after,
.structure-branch:nth-child(4n+3)::after,
.structure-branch:nth-child(4n+4)::after { border-color: var(--studio-accent); }
/* This functional section stays dark, with legible text and warm accents. */
.section-dark .wide-heading h2, .section-dark .function-title h3 { color: #fff; }
.section-dark .wide-heading > p, .section-dark .function-detail p, .section-dark .function-detail li { color: #ededed; }
.section-dark .wide-heading .section-index, .section-dark .wide-heading .sec-eyebrow,
.section-dark .function-title span { color: #ffb184; }
.section-dark .function-detail { background: #2b2b2b; border-color: #525252; }
.section-dark .function-detail ul { border-color: #525252; }
.section-dark .function-detail li::before { background: #ffb184; }

/* A consistent closing panel and footer across both languages. */
.cta-banner { background: var(--studio-emphasis); color: #fff; border-radius: 12px; box-shadow: none; padding: 48px; }
.cta-banner::before, .cta-banner::after { content: none; }
.cta-banner h2 { font-weight: 600; line-height: 1.45; letter-spacing: -.025em; }
.cta-banner p { color: #fff; opacity: 1; font-size: 15px; line-height: 1.8; }
.cta-banner .btn-white { background: var(--studio-paper); color: var(--studio-emphasis); }
.cta-banner .btn-white:hover { background: var(--studio-tint); }
.cta-banner .btn-out, .cta-banner .btn-outline { border-color: #ffffffb3; color: #fff; }
.studio-footer { background: var(--studio-tint); color: var(--studio-muted); padding-top: 60px; padding-bottom: 28px; }
.studio-footer-grid { gap: 64px; }
.studio-footer .studio-brand, .studio-footer h2 { color: var(--studio-ink); }
.studio-footer h2 { font-size: 13px; font-weight: 600; }
.studio-footer li, .studio-footer-brand p { font-size: 13px; }
.studio-footer li { padding: 6px 0; }
.studio-footer .studio-text-button, .studio-footer a:hover { color: var(--orange-dark); }
.studio-footer-bottom { border-color: var(--studio-line); color: var(--studio-muted); margin-top: 42px; }
.studio-mobile-contact { background: rgba(255,255,255,.98); border-color: var(--studio-line); box-shadow: none; }
.studio-mobile-contact button { border-color: var(--studio-line); border-radius: 9px; background: var(--studio-paper); color: var(--studio-ink); }
.studio-mobile-contact button:first-child { background: var(--studio-accent); border-color: var(--studio-accent); color: #fff; }

.studio-dialog { background: #222222b3; backdrop-filter: blur(5px); }
.studio-dialog-box { background: var(--studio-paper); border-radius: 15px; box-shadow: 0 18px 60px #22222224; }
.studio-dialog-close { border-radius: 8px; color: var(--studio-ink); background: var(--studio-tint); }
.studio-dialog h2 { font-weight: 650; letter-spacing: -.035em; }
.studio-qr { background: #fff; border-radius: 8px; padding: 7px; }
.studio-wechat-id button, .studio-form-row input, .studio-form-row textarea { background: var(--studio-paper); border-color: var(--studio-line); border-radius: 8px; }
.studio-submit { border-radius: 9px; }
.studio-submit:hover { background: var(--orange-dark); }

/* Both homepages use studio-home.css; English typography has a small dedicated layer. */

@media (max-width: 1180px) {
  .studio-nav { gap: 18px; }
  .studio-links { gap: 16px; }
  .studio-brand { font-size: 17px; }
  .studio-consult { padding: 11px 15px; }
  .studio-footer-grid { gap: 36px; }
}
@media (max-width: 1000px) {
  .studio-nav { height: 64px; }
  .studio-links { top: 64px; background: var(--studio-paper); border-color: var(--studio-line); padding: 16px 40px 22px; box-shadow: 0 10px 18px #cf47140c; }
  .studio-links a { background: var(--studio-tint); border-radius: 6px; }
  .studio-menu-toggle { background: var(--studio-paper); color: var(--studio-ink); border-color: var(--studio-line); border-radius: 9px; }
  .work-grid, .case-grid { gap: 34px 24px; }
  .work-body h3, .case .body h3 { font-size: 21px; }
  .solution-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-facts > div:first-child { border-right: 0; border-bottom: 1px solid var(--studio-line); }
  .service-facts > div:nth-child(2) { padding-left: 0; }
  .plan-nav { top: 64px; }
}
@media (max-width: 700px) {
  .wrap, .solution-detail-page .wrap { padding-left: 22px; padding-right: 22px; }
  .studio-nav { padding: 0 22px; gap: 10px; }
  .studio-brand { font-size: 16px; gap: 7px; }
  .studio-brand img { width: 31px; height: 31px; }
  .studio-phone { font-size: 12px; padding: 10px 12px; border-radius: 9px; }
  .studio-links { padding: 14px 22px 20px; }
  .studio-links.is-open { gap: 6px 10px; }
  .studio-links a { font-size: 14px; }
  .page-hero, .case-list-page .page-hero, .service-page .page-hero, .case-detail-page .page-hero { padding: 44px 0 38px; }
  .page-hero h1, .case-list-page .page-hero h1, .service-page .page-hero h1, .case-detail-page .page-hero h1, .solution-hero h1 { font-size: 32px; line-height: 1.3; letter-spacing: -.035em; }
  .page-hero p, .service-page .page-hero p, .case-detail-page .page-hero p { margin-top: 18px; font-size: 15px; }
  .page-hero .hero-actions { gap: 10px; margin-top: 24px; }
  .hero-counts { gap: 8px 15px; }
  .hero-counts span { font-size: 11px; }
  .breadcrumbs { margin-bottom: 20px; font-size: 11px; }
  body:not(.home-page) .section { padding-top: 44px; padding-bottom: 44px; }
  body:not(.home-page) .sec-head { margin-bottom: 26px; }
  body:not(.home-page) .sec-title { font-size: 27px; }
  .work-grid, .case-grid { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .work-preview, .case .shot { aspect-ratio: 1.6; }
  .work-body, .case .body { padding: 18px 0 0; }
  .work-body h3, .case .body h3 { font-size: 21px; }
  .work-body > p { font-size: 14px; margin-bottom: 16px; }
  .work-actions { font-size: 13px; padding-top: 11px; }
  .tag-bar, .filter-bar { gap: 8px; }
  .tag-btn, .filter-btn { padding: 8px 12px; font-size: 13px; }
  .service-facts { margin-top: 28px; }
  .service-facts > div { padding: 18px 0; border: 0; border-bottom: 1px solid var(--studio-line); }
  .service-facts > div:last-child { border-bottom: 0; }
  .service-feature { padding-top: 22px; }
  .service-feature h3 { font-size: 21px; }
  .service-delivery li { padding: 16px; font-size: 13px; }
  .solution-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .solution-card { min-height: 0; padding: 24px 0 28px; }
  .solution-card h2 { font-size: 21px; }
  .solution-hero { padding-top: 38px; }
  .solution-hero-copy > p { font-size: 15px; }
  .solution-coverage div { padding: 18px 14px; }
  .solution-coverage div:nth-child(odd) { padding-left: 0; }
  .solution-coverage strong { font-size: 23px; }
  .plan-nav .wrap { gap: 24px; }
  .plan-nav a { font-size: 12px; }
  .plan-section { scroll-margin-top: 126px; }
  .cta-banner { padding: 30px 24px; text-align: left; align-items: flex-start; gap: 24px; border-radius: 9px; }
  .cta-banner h2 { font-size: 25px; }
  .cta-banner p { font-size: 14px; }
  .cta-banner .btns, .cta-banner .actions { justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
  .cta-banner .btn { font-size: 14px; padding: 12px 18px; }
  .studio-footer { padding-top: 42px; }
  .studio-footer-grid { gap: 26px; }
  .studio-footer-bottom { margin-top: 30px; }
  .studio-footer li { font-size: 12px; }
  .studio-dialog-box { border-radius: 12px; }
}
@media (max-width: 380px) {
  .studio-nav { padding: 0 16px; gap: 7px; }
  .studio-brand { font-size: 14px; gap: 6px; }
  .studio-brand img { width: 28px; height: 28px; }
  .studio-nav-actions { gap: 7px; }
  .studio-menu-toggle { min-width: 36px; padding: 7px; }
  .studio-menu-toggle > span:last-child { display: none; }
  .studio-phone { padding: 10px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}