:root {
  --brand: #1f73b7;
  --navy: #0a315f;
  --deep: #071f3a;
  --sky: #eaf4fc;
  --line: #d8e6f2;
  --gold: #f0b64a;
  --ink: #10253a;
  --text: #40576f;
  --muted: #718498;
  --bg: #f6f9fc;
  --white: #fff;
  --shadow: 0 1.125rem 3.125rem rgba(10,49,95,.10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif; color: var(--ink); background: white; line-height: 1.65; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.container { width: min(73.75rem, calc(100% - 3rem)); margin: 0 auto; }
.section { padding: 5.5rem 0; }
.section.alt { background: linear-gradient(180deg, #f4f8fb 0%, #fff 38%, #f6f9fc 100%); }
.eyebrow { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--brand); font-weight: 900; font-size: 0.875rem; margin-bottom: 0.75rem; }
.eyebrow::before { content: ""; width: 2.125rem; height: 2px; background: var(--gold); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); line-height: 1.06; letter-spacing: 0; margin-bottom: 1.125rem; }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.75rem); line-height: 1.16; margin-bottom: 0.875rem; }
h3 { font-size: 1.3125rem; line-height: 1.35; margin-bottom: 0.625rem; }
.lead { color: var(--text); font-size: clamp(1rem, calc(0.85rem + 0.25vw), 1.125rem); max-width: 47.5rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.25rem; border-radius: 0.375rem; border: 1px solid transparent; font-weight: 900; white-space: nowrap; text-align: center; }
.btn.primary { background: var(--gold); color: #211600; box-shadow: 0 0.875rem 1.75rem rgba(240,182,74,.28); }
.btn.line { background: white; border-color: var(--line); color: var(--navy); }
.case-page-hero { color: white; min-height: 30rem; padding: 6.5rem 0 3.75rem; background: linear-gradient(90deg, rgba(6,26,48,.98) 0%, rgba(8,40,74,.92) 44%, rgba(8,40,74,.58) 70%, rgba(8,40,74,.24) 100%), url("../images/cases/electric-toys-figures.jpg") center 44%/cover; position: relative; overflow: hidden; }
.case-page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,26,48,.08), rgba(6,26,48,.5)); }
.case-page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8rem; background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0, rgba(255,255,255,.08) 1px, transparent 1px, transparent 1rem); opacity: .42; mask-image: linear-gradient(180deg, transparent, #000); }
.case-page-hero .container { min-height: 19rem; position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.25rem; align-items: end; }
.case-page-hero .eyebrow { color: #c6e5ff; }
.case-page-hero .lead { color: rgba(255,255,255,.82); font-size: clamp(1rem, calc(0.85rem + 0.45vw), 1.25rem); }
.case-hero-content { width: min(100%, 53rem); padding-bottom: 0.5rem; }
.case-hero-content .eyebrow { margin-bottom: 1rem; }
.case-hero-content h1 { position: relative; width: min-content; min-width: min(100%, 34rem); max-width: 100%; font-size: clamp(2.5rem, 4.6vw, 3.75rem); margin-bottom: 1rem; text-shadow: 0 0.75rem 1.75rem rgba(0,0,0,.18); }
.case-hero-content h1::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.375rem; height: 0.25rem; background: linear-gradient(90deg, var(--gold), rgba(240,182,74,0)); border-radius: 0.25rem; }
.case-hero-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.375rem; }
.case-hero-meta span { display: inline-flex; align-items: center; min-height: 2.125rem; border: 1px solid rgba(198,229,255,.26); border-radius: 0.25rem; background: rgba(255,255,255,.08); padding: 0 0.75rem; color: rgba(255,255,255,.88); font-size: 0.8125rem; font-weight: 900; backdrop-filter: blur(0.25rem); }
.case-hero-panel { align-self: end; border: 1px solid rgba(198,229,255,.28); border-radius: 0.375rem; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)); padding: 1.25rem; backdrop-filter: blur(0.75rem); box-shadow: 0 1rem 2.5rem rgba(0,0,0,.18); }
.case-hero-panel b { display: block; color: var(--gold); font-size: 3.25rem; line-height: 1; }
.case-hero-panel span { display: block; margin: 0.5rem 0; color: white; font-weight: 900; }
.case-hero-panel small { display: block; border-top: 1px solid rgba(255,255,255,.16); padding-top: 0.75rem; color: rgba(255,255,255,.74); line-height: 1.65; }
.case-workbench { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.case-directory { position: sticky; top: 7rem; display: grid; gap: 0.375rem; padding: 0.75rem; border: 1px solid #d7e5f0; border-radius: 0.375rem; background: white; box-shadow: 0 0.75rem 1.75rem rgba(10,49,95,.06); }
.case-directory-head { padding: 0.375rem 0.375rem 0.75rem; border-bottom: 1px solid #e9f1f8; }
.case-directory-head span { color: var(--gold); font-size: 0.75rem; font-weight: 900; text-transform: uppercase; }
.case-directory-head h2 { margin: 0; font-size: 1.25rem; }
.case-directory a { position: relative; border: 1px solid transparent; border-radius: 0.25rem; background: #f8fbfe; padding: 0.75rem 0.75rem 0.75rem 0.875rem; min-height: 5.25rem; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.125rem 0.625rem; transition: .18s ease; }
.case-directory a::before { content: ""; position: absolute; left: 0; top: 0.75rem; bottom: 0.75rem; width: 0.1875rem; border-radius: 0 0.1875rem 0.1875rem 0; background: transparent; }
.case-directory a:hover, .case-directory a.active { background: #eef6fd; border-color: #cfe1f0; color: var(--ink); }
.case-directory a.active::before { background: var(--gold); }
.case-directory a > span { grid-row: 1 / 3; color: var(--brand); font-size: 0.8125rem; font-weight: 900; }
.case-directory a:hover > span, .case-directory a.active > span { color: var(--brand); }
.case-directory b { min-width: 0; color: inherit; line-height: 1.35; }
.case-directory small { min-width: 0; color: var(--muted); line-height: 1.5; }
.case-directory a:hover small, .case-directory a.active small { color: var(--muted); }
.case-list { display: grid; gap: 1.125rem; }
.case-record { display: none; grid-template-columns: minmax(18rem, 21rem) minmax(0, 1fr); border: 1px solid #d7e5f0; border-radius: 0.375rem; background: white; box-shadow: 0 0.875rem 2.25rem rgba(10,49,95,.07); overflow: hidden; scroll-margin-top: 8.125rem; }
.case-record.active { display: grid; }
.case-photo { min-height: 27rem; color: white; padding: 1.5rem; display: grid; align-content: end; gap: 0.875rem; background: linear-gradient(180deg, rgba(10,49,95,.12), rgba(7,31,58,.9)), var(--case-image) center/cover; }
.case-photo span { width: max-content; max-width: 100%; border: 1px solid rgba(255,255,255,.24); border-radius: 0.25rem; padding: 0.3125rem 0.625rem; background: rgba(255,255,255,.12); font-size: 0.8125rem; font-weight: 900; }
.case-photo h2 { font-size: 1.875rem; line-height: 1.25; margin: 0; }
.case-content { padding: 1.375rem; display: grid; grid-template-areas: "metrics" "facts" "story" "summary"; gap: 1rem; background: linear-gradient(180deg, #fff, #fbfdff); }
.case-metrics { grid-area: metrics; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; }
.case-metric { border-radius: 0.375rem; background: #f8fbfe; padding: 0.875rem; border: 1px solid #d8e9f7; }
.case-metric b { display: block; color: var(--brand); font-size: 1.4375rem; line-height: 1.1; }
.case-metric span { color: var(--muted); font-size: 0.8125rem; }
.case-facts { grid-area: facts; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.case-fact { border: 1px solid #e3edf6; border-radius: 0.375rem; background: white; padding: 0.75rem 0.875rem; color: var(--muted); font-size: 0.8125rem; line-height: 1.6; }
.case-fact b { display: block; color: var(--navy); margin-bottom: 0.1875rem; }
.case-story { grid-area: story; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; align-items: stretch; }
.case-story article { position: relative; border: 1px solid #dfeaf3; border-radius: 0.375rem; background: white; padding: 1.125rem; min-height: 10rem; }
.case-story article::before { content: ""; position: absolute; left: 1.125rem; right: 1.125rem; top: 0; height: 0.1875rem; background: linear-gradient(90deg, var(--gold), var(--brand)); border-radius: 0 0 0.1875rem 0.1875rem; }
.case-story b { display: block; color: var(--navy); margin-bottom: 0.625rem; font-size: 1.0625rem; }
.case-story p { color: var(--muted); margin: 0; font-size: 0.875rem; line-height: 1.65; }
.case-summary { grid-area: summary; border-left: 0.25rem solid var(--gold); background: #fff9eb; border-radius: 0.375rem; padding: 0.9375rem 1.125rem; color: #5b3b00; font-weight: 900; }
.final-cta { background: linear-gradient(90deg, rgba(7,31,58,.96), rgba(10,49,95,.82)); color: white; padding: 5.125rem 0; }
.final-cta.is-bg-loaded { background: linear-gradient(90deg, rgba(7,31,58,.96), rgba(10,49,95,.82)), url("../images/services/service-docs.webp") center/cover; }
.cta-grid { display: grid; grid-template-columns: 1fr 26.25rem; gap: 2.375rem; align-items: center; }
.final-cta .lead, .final-cta p { color: rgba(255,255,255,.8); }
.cta-path { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; margin-top: 1.5rem; }
.cta-path-item { border-top: 1px solid rgba(255,255,255,.28); padding-top: 0.875rem; }
.cta-path-item b { display: block; color: white; font-size: 1.0625rem; margin-bottom: 0.375rem; }
.cta-path-item span { display: block; color: rgba(255,255,255,.72); font-size: 0.875rem; line-height: 1.6; }
.contact-card { background: white; color: var(--ink); border-radius: 0.5rem; padding: 1.5rem; box-shadow: var(--shadow); }
.contact-card input, .contact-card textarea, .contact-card select { width: 100%; border: 1px solid var(--line); border-radius: 0.375rem; min-height: 2.75rem; margin-bottom: 0.625rem; padding: 0 0.75rem; outline: none; }
.contact-card textarea { min-height: 5.75rem; padding-top: 0.75rem; resize: vertical; }
@media (max-width: 1080px) {
  .case-page-hero .container { grid-template-columns: 1fr; align-items: start; }
  .case-hero-panel { width: min(100%, 22rem); }
  .case-workbench, .case-record, .cta-grid { grid-template-columns: 1fr; }
  .case-directory { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-directory-head { grid-column: 1 / -1; }
  .case-photo { min-height: 20rem; }
  .case-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-story { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .container { width: min(100% - 1.75rem, 73.75rem); }
  .section { padding: 3.625rem 0; }
  .case-page-hero { min-height: 0; padding: 4.5rem 0 3.625rem; background-position: center; }
  .case-page-hero .container { min-height: 0; gap: 1.25rem; }
  h1 { font-size: clamp(2.125rem, 10vw, 2.625rem); }
  h2 { font-size: clamp(1.6875rem, 8.5vw, 2.125rem); }
  .lead { font-size: 1rem; }
  .case-hero-content h1 { font-size: clamp(2.125rem, 9vw, 2.875rem); }
  .case-hero-panel { padding: 1rem; }
  .case-hero-panel b { font-size: 2.25rem; }
  .case-directory, .case-metrics, .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-path { grid-template-columns: 1fr; }
  .case-content { padding: 1.125rem; }
  .case-photo { padding: clamp(1rem, 4vw, 1.375rem); min-height: clamp(14rem, 62vw, 20rem); }
  .case-photo h2 { font-size: clamp(1.125rem, 5vw, 1.5625rem); }
  .case-photo span { font-size: 0.75rem; }
  .case-story article { min-height: auto; padding: 1rem; }
}
@media (max-width: 380px) {
  .case-directory, .case-metrics, .case-facts { grid-template-columns: 1fr; }
}