.city-os-page {
  background: #f3ede1;
  color: #17130f;
}

.city-os-hero,
.city-case-section {
  position: relative;
  overflow: hidden;
}

.city-os-hero {
  display: grid;
  min-height: 92vh;
  align-content: center;
  padding: clamp(130px, 14vh, 180px) clamp(28px, 9vw, 150px) clamp(86px, 10vh, 130px) clamp(94px, 13vw, 220px);
  background: #f3ede1;
}

.city-os-hero-copy {
  position: relative;
  z-index: 2;
  width: min(980px, 82vw);
}

.city-os-hero-copy h1 {
  max-width: 980px;
  margin: 24px 0 26px;
  color: #17130f;
  font: 300 clamp(54px, 7.4vw, 126px)/1.08 "Noto Serif SC", "Songti SC", SimSun, serif;
  letter-spacing: 0;
}

.city-os-hero-copy > p:last-child {
  max-width: 720px;
  color: rgba(42, 36, 30, 0.72);
  font-size: clamp(16px, 1.35vw, 22px);
  line-height: 1.9;
}

.city-os-boundary {
  position: absolute;
  right: clamp(28px, 7vw, 112px);
  bottom: clamp(34px, 6vh, 74px);
  z-index: 2;
  max-width: 380px;
  padding-left: 18px;
  border-left: 1px solid rgba(180, 147, 79, 0.54);
  color: rgba(72, 63, 52, 0.62);
  font-size: 12px;
  line-height: 1.8;
}

.city-os-orbit {
  position: absolute;
  right: -10vw;
  top: 6vh;
  width: min(62vw, 920px);
  aspect-ratio: 1;
  border: 1px solid rgba(180, 147, 79, 0.13);
  border-radius: 50%;
  pointer-events: none;
}

.city-os-orbit::before,
.city-os-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(77, 97, 86, 0.11);
  border-radius: 50%;
}

.city-os-orbit::before {
  inset: 15% -10% 8% 18%;
}

.city-os-orbit::after {
  inset: 34% 18% -8% -12%;
  border-color: rgba(180, 147, 79, 0.1);
}

.city-case-section {
  min-height: 100vh;
  padding: clamp(120px, 13vh, 170px) clamp(28px, 8vw, 132px) clamp(100px, 12vh, 150px) clamp(94px, 12vw, 204px);
  background: #100c08;
  color: #f6f1e8;
}

.city-case-heading {
  width: min(880px, 86vw);
  margin-bottom: clamp(48px, 7vh, 88px);
}

.city-case-heading h2 {
  color: #f6f1e8;
  font: 300 clamp(44px, 5.8vw, 90px)/1.15 "Noto Serif SC", "Songti SC", SimSun, serif;
}

.city-case-heading > p:last-child {
  max-width: 860px;
  color: rgba(246, 241, 232, 0.68);
  font-size: 15px;
  line-height: 2;
}

.city-case-main-host {
  width: 100%;
  margin-bottom: 22px;
}

.city-case-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(216, 189, 120, 0.34);
  background: rgba(32, 25, 21, 0.72);
  color: #f6f1e8;
}

.city-case-card:hover {
  border-color: rgba(216, 189, 120, 0.62);
}

.city-case-main {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.7fr);
  min-height: min(68vh, 680px);
}

.city-case-media {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  background: #090705;
}

.city-case-main .city-case-media {
  min-height: 560px;
}

.city-case-media video,
.city-case-media iframe,
.city-case-media img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.city-case-media iframe {
  background: #060504;
}

.city-case-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 36px;
  color: rgba(216, 189, 120, 0.78);
  font: 500 12px/1.8 "Noto Sans SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0.2em;
  text-align: center;
}

.city-case-status::before,
.city-case-status::after {
  content: "";
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  border: 1px solid rgba(216, 189, 120, 0.16);
  border-radius: 50%;
}

.city-case-status::after {
  width: 64%;
  border-color: rgba(138, 167, 199, 0.09);
}

.city-case-copy {
  display: flex;
  min-width: 0;
  padding: clamp(28px, 4vw, 58px);
  flex-direction: column;
  justify-content: flex-end;
  border-left: 1px solid rgba(216, 189, 120, 0.16);
}

.city-case-copy > span {
  color: #b4934f;
  font: 700 10px/1.4 "Noto Sans SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0.2em;
}

.city-case-copy h3 {
  margin: 18px 0 14px;
  color: #f6f1e8;
  font: 300 clamp(27px, 3vw, 48px)/1.3 "Noto Serif SC", "Songti SC", SimSun, serif;
}

.city-case-copy p {
  margin: 0;
  color: rgba(246, 241, 232, 0.6);
  font-size: 13px;
  line-height: 1.9;
}

.city-case-link,
.city-code-copy {
  display: inline-flex;
  min-height: 40px;
  margin-top: 24px;
  padding: 0 16px;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  border: 1px solid rgba(216, 189, 120, 0.46);
  background: transparent;
  color: #d8bd78;
  font: 700 11px/1 "Noto Sans SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
}

.city-case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.city-case-grid .city-case-card {
  display: grid;
  grid-template-rows: minmax(250px, 1fr) auto;
  min-height: 480px;
}

.city-case-grid .city-case-copy {
  min-height: 190px;
  border-top: 1px solid rgba(216, 189, 120, 0.16);
  border-left: 0;
}

.city-code-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 280px;
  padding: 24px;
  overflow: auto;
  background: #090705;
}

.city-code-shell pre {
  margin: 0;
  color: rgba(246, 241, 232, 0.76);
  font: 12px/1.75 Consolas, "Courier New", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.city-code-shell .city-code-copy {
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0;
  background: rgba(16, 12, 8, 0.84);
}

.city-copy-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  padding: 12px 16px;
  border: 1px solid rgba(216, 189, 120, 0.48);
  background: #17130f;
  color: #f6f1e8;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.city-copy-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.city-os-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  width: 100%;
  margin-top: 36px;
  padding: 28px 32px;
  align-items: center;
  border: 1px solid rgba(180, 147, 79, 0.38);
  color: #17130f;
  text-decoration: none;
}

.city-os-entry b {
  display: block;
  margin-bottom: 8px;
  font: 400 clamp(22px, 2.4vw, 36px)/1.3 "Noto Serif SC", "Songti SC", SimSun, serif;
}

.city-os-entry small {
  color: rgba(42, 36, 30, 0.62);
  font-size: 12px;
}

.city-os-entry > span:last-child {
  color: #b4934f;
  font-size: 24px;
}

@media (max-width: 980px) {
  .city-case-main {
    grid-template-columns: 1fr;
  }

  .city-case-main .city-case-media {
    min-height: min(60vw, 520px);
  }

  .city-case-copy {
    border-top: 1px solid rgba(216, 189, 120, 0.16);
    border-left: 0;
  }

  .city-case-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .city-os-hero,
  .city-case-section {
    min-height: auto;
    padding: 116px 22px 78px;
  }

  .city-os-hero-copy,
  .city-case-heading {
    width: 100%;
  }

  .city-os-hero-copy h1 {
    font-size: clamp(46px, 15vw, 72px);
  }

  .city-os-boundary {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 56px 0 0 72px;
  }

  .city-case-main .city-case-media,
  .city-case-media {
    min-height: 58vw;
  }

  .city-case-grid .city-case-card {
    min-height: 420px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .city-copy-toast {
    transition: none;
  }
}

/* v34: every extension case keeps the same visual ratio. */
.city-case-grid {
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.city-case-grid .city-case-card {
  grid-template-rows: auto minmax(190px, 1fr);
  height: 100%;
  min-height: 0;
}

.city-case-grid .city-case-media {
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 10;
}

.city-case-grid .city-code-shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
}

/* v34: city method map installation */
.city-method-map-section {
  position: relative;
  min-height: 100vh;
  padding: clamp(110px, 12vh, 160px) clamp(28px, 8vw, 132px) clamp(90px, 10vh, 130px) clamp(94px, 13vw, 220px);
  overflow: hidden;
  background: #100c08;
  color: #f6f1e8;
}
.city-method-map-heading {
  width: min(900px, 82vw);
  margin-bottom: clamp(42px, 6vh, 76px);
}
.city-method-map-heading h2 {
  color: #f6f1e8;
}
.city-method-map-heading > p:last-child {
  max-width: 720px;
  color: rgba(246, 241, 232, .62);
}
.city-method-map-host {
  width: min(100%, 1280px);
}
.city-method-map-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .45fr);
  min-height: 600px;
  border: 1px solid rgba(216, 189, 120, .3);
  background: rgba(32, 25, 21, .68);
}
.city-method-map-media {
  min-height: 600px;
  background: #080604;
}
.city-method-map-media > video,
.city-method-map-media > img,
.city-method-map-media > iframe {
  width: 100%;
  height: 100%;
  min-height: 600px;
  border: 0;
  object-fit: contain;
}
.city-method-map-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 4vw, 56px);
  border-left: 1px solid rgba(216, 189, 120, .16);
}
.city-method-map-copy > span {
  color: #b4934f;
  font-size: 10px;
  letter-spacing: .2em;
}
.city-method-map-copy h3 {
  margin: 20px 0 14px;
  font: 400 clamp(30px, 3vw, 52px)/1.18 "Noto Serif SC", "Songti SC", SimSun, serif;
}
.city-method-map-copy p {
  color: rgba(246, 241, 232, .58);
  line-height: 1.8;
}
@media (max-width: 900px) {
  .city-method-map-card { grid-template-columns: 1fr; min-height: 0; }
  .city-method-map-media,
  .city-method-map-media > video,
  .city-method-map-media > img,
  .city-method-map-media > iframe { min-height: 58vw; }
  .city-method-map-copy { border-left: 0; border-top: 1px solid rgba(216, 189, 120, .16); }
}
@media (max-width: 760px) {
  .city-method-map-section { min-height: auto; padding: 116px 22px 78px; }
  .city-method-map-heading { width: 100%; }
}

/* v37 full-screen city method installation */
.city-method-map-section {
  min-height: 100vh;
  padding: 0 !important;
  background: #080604;
}
.city-method-map-heading {
  position: absolute;
  top: clamp(104px, 12vh, 146px);
  left: clamp(94px, 12vw, 204px);
  z-index: 6;
  width: min(620px, 48vw);
  margin: 0;
  padding: 20px 24px;
  border-left: 1px solid rgba(216, 189, 120, .58);
  background: rgba(8, 6, 4, .66);
}
.city-method-map-heading h2 {
  margin: 12px 0;
  font-size: clamp(38px, 4.6vw, 72px);
}
.city-method-map-host,
.city-method-map-card,
.city-method-map-media {
  width: 100%;
  min-height: 100vh;
}
.city-method-map-card {
  position: relative;
  display: block;
  border: 0 !important;
  background: #080604;
}
.city-method-map-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.city-method-map-media > video,
.city-method-map-media > img,
.city-method-map-media > iframe,
.city-method-map-media .city-code-shell {
  display: block;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  border: 0;
  object-fit: cover !important;
}
.city-method-map-copy {
  position: absolute;
  right: clamp(28px, 5vw, 76px);
  bottom: clamp(28px, 5vh, 58px);
  z-index: 5;
  width: min(420px, 38vw);
  padding: 22px 26px;
  border: 1px solid rgba(216, 189, 120, .24);
  background: rgba(8, 6, 4, .72);
}
.city-case-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .city-method-map-heading {
    left: 76px;
    width: calc(100% - 98px);
  }
  .city-method-map-copy {
    right: 22px;
    bottom: 24px;
    width: calc(100% - 44px);
  }
}
@media (max-width: 760px) {
  .city-method-map-section,
  .city-method-map-host,
  .city-method-map-card,
  .city-method-map-media,
  .city-method-map-media > video,
  .city-method-map-media > img,
  .city-method-map-media > iframe,
  .city-method-map-media .city-code-shell {
    min-height: 100svh;
    height: 100svh;
  }
  .city-method-map-heading {
    top: 92px;
    left: 58px;
    width: calc(100% - 80px);
    padding: 14px 16px;
  }
  .city-method-map-heading > p:last-child,
  .city-method-map-copy p {
    display: none;
  }
  .city-case-grid {
    grid-template-columns: 1fr;
  }
}


/* v38 city method map: shared editorial frame + full installation */
.city-method-map-section { min-height:100vh!important; padding:0!important; background:#f3ede1!important; color:#17130f!important; }
.city-method-map-heading { top:clamp(92px,10vh,126px)!important; left:clamp(92px,10vw,168px)!important; width:min(650px,48vw)!important; padding:20px 24px!important; border-left:1px solid rgba(184,149,79,.68)!important; background:rgba(243,237,225,.9)!important; }
.city-method-map-heading h2 { color:#17130f!important; }
.city-method-map-heading > p:last-child { color:rgba(42,36,30,.68)!important; }
.city-method-map-host, .city-method-map-card, .city-method-map-media { min-height:100vh!important; }
.city-method-map-card { background:#100c08!important; }
.city-method-map-copy { border-color:rgba(216,189,120,.34)!important; background:rgba(16,12,8,.82)!important; color:#f6f1e8!important; }
@media (max-width:760px) { .city-method-map-heading { left:58px!important; width:calc(100% - 80px)!important; } }


/* v39 city map and compact Quancheng case */
.city-method-map-heading { background: transparent !important; box-shadow: none !important; }
.city-method-map-heading h2 { color: #f6f1e8 !important; text-shadow: 0 2px 18px rgba(0,0,0,.28); }
.city-method-map-heading > p:last-child { color: rgba(246,241,232,.7) !important; text-shadow: 0 1px 12px rgba(0,0,0,.34); }
.city-map-sound {
  position:absolute;top:24px;right:26px;z-index:8;min-height:34px;padding:0 12px;
  border:1px solid rgba(216,189,120,.5);background:rgba(8,6,4,.68);color:#d8bd78;
  font:700 10px/1 sans-serif;letter-spacing:.08em;cursor:pointer;backdrop-filter:blur(8px);
}
.city-case-main { min-height: 500px !important; grid-template-columns:minmax(0,1.75fr) minmax(280px,.62fr) !important; }
.city-case-main .city-case-media { min-height: 440px !important; }
.city-case-main .city-case-copy { padding: clamp(24px,3vw,42px) !important; }
.city-case-lead { margin:0 0 auto!important;color:rgba(246,241,232,.72)!important;font:400 13px/1.8 "Noto Sans SC","Microsoft YaHei",sans-serif!important; }
.city-case-grid .city-case-card { min-height: 0 !important; grid-template-rows:auto 1fr !important; }
.city-case-grid .city-case-media { aspect-ratio:16 / 8.8 !important; min-height:0!important; }
.city-case-grid .city-case-copy { min-height:150px!important;padding:22px 24px!important; }
@media(max-width:980px){.city-case-main{grid-template-columns:1fr!important}.city-case-main .city-case-media{min-height:min(56vw,460px)!important}}


/* v40 city map and Quancheng detail */
.city-method-map-heading { border-left:0 !important; }
.city-case-main { min-height:492px !important; }
.city-case-main .city-case-media { min-height:432px !important; }
.city-case-lead { margin:0 0 5px !important; }


/* v42 independent city case page */
.city-case-standalone { min-height: 100vh; background: #100c08; }
.city-case-standalone .city-case-section { padding-top: clamp(120px, 15vh, 180px); }

/* v44 city case refinements */
.city-map-sound {
  display: none !important;
}

.city-case-main {
  min-height: 617px !important;
  height: 617px !important;
  max-height: 617px !important;
}

.city-case-main .city-case-media,
.city-case-main .city-case-copy {
  min-height: 615px !important;
  height: 615px !important;
  max-height: 615px !important;
}

.city-case-main .city-case-copy {
  overflow: auto !important;
}

@media (max-width: 980px) {
  .city-case-main,
  .city-case-main .city-case-media,
  .city-case-main .city-case-copy {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
}
/* v44b shorter Quancheng main case */
.city-case-main {
  min-height: 416px !important;
  height: 416px !important;
  max-height: 416px !important;
}

.city-case-main .city-case-media,
.city-case-main .city-case-copy {
  min-height: 356px !important;
  height: 356px !important;
  max-height: 356px !important;
}

@media (max-width: 980px) {
  .city-case-main,
  .city-case-main .city-case-media,
  .city-case-main .city-case-copy {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* v47 city backend cleanup and shorter main case */
.city-map-sound { display: none !important; }
.city-case-main {
  min-height: 0 !important;
  height: 617px !important;
  max-height: 617px !important;
}
.city-case-main .city-case-media,
.city-case-main .city-case-copy {
  height: 615px !important;
  min-height: 615px !important;
  max-height: 615px !important;
}
.city-case-main .city-case-copy { overflow: auto !important; }
@media (max-width: 980px) {
  .city-case-main,
  .city-case-main .city-case-media,
  .city-case-main .city-case-copy {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}


/* v49 city case inline pages and editable copy panels */
.city-case-pages-section {
  min-height: auto;
  padding: clamp(96px, 12vh, 150px) clamp(28px, 6vw, 92px);
  background: #100c08;
  color: #f6f1e8;
}
.city-case-pages-section[hidden] { display: none !important; }
.city-case-pages-list {
  display: grid;
  gap: clamp(64px, 8vw, 110px);
}
.city-case-page-block {
  padding: clamp(54px, 7vw, 88px) 0 0;
  border-top: 1px solid rgba(216, 189, 120, .18);
}
.city-case-page-block .city-case-heading {
  margin-bottom: clamp(28px, 4vw, 48px);
}
.city-case-copy[data-style-key] {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.city-method-map-card:has(.city-method-map-media:only-child) {
  grid-template-columns: 1fr !important;
}
.city-method-map-card:has(.city-method-map-media:only-child) .city-method-map-media {
  min-height: 100vh !important;
}
@media (max-width: 760px) {
  .city-case-pages-section { padding: 84px 22px; }
}


/* v55 city case proportion and spacing */
.city-case-section {
  padding-top: clamp(82px, 10vh, 118px) !important;
}
.city-case-main-host,
.city-case-grid,
.city-case-pages-list,
.city-case-page-block .city-case-heading {
  width: min(1180px, calc(100vw - 220px)) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.city-case-heading {
  margin-bottom: clamp(26px, 4vh, 42px) !important;
}
.city-case-main {
  min-height: 430px !important;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, .62fr) !important;
}
.city-case-main .city-case-media,
.city-case-main .city-case-copy {
  min-height: 390px !important;
  height: 390px !important;
}
.city-case-grid {
  gap: 18px !important;
}
.city-case-grid .city-case-media {
  aspect-ratio: 16 / 8.6 !important;
  min-height: 0 !important;
}
.city-case-grid .city-case-card {
  min-height: 0 !important;
}
.city-case-grid .city-case-copy {
  min-height: 128px !important;
  padding: 18px 20px !important;
}
.city-case-pages-section,
.city-case-page-block {
  padding-top: clamp(60px, 7vh, 86px) !important;
}
@media (max-width: 980px) {
  .city-case-main-host,
  .city-case-grid,
  .city-case-pages-list,
  .city-case-page-block .city-case-heading { width: 100% !important; }
  .city-case-main,
  .city-case-main .city-case-media,
  .city-case-main .city-case-copy { height: auto !important; min-height: 0 !important; }
}

/* v56 city case spacing, editable copy, and extra-page width discipline */
.city-case-section {
  padding-top: clamp(62px, 8vh, 96px) !important;
}
.city-case-main-host,
.city-case-grid,
.city-case-pages-list,
.city-case-page-block .city-case-heading {
  width: min(1120px, calc(100vw - 260px)) !important;
  max-width: 100% !important;
}
.city-case-heading {
  margin-bottom: clamp(18px, 3vh, 32px) !important;
}
.city-case-main {
  min-height: 398px !important;
  grid-template-columns: minmax(0, 1.58fr) minmax(250px, .58fr) !important;
}
.city-case-main .city-case-media,
.city-case-main .city-case-copy {
  min-height: 360px !important;
  height: 360px !important;
  max-height: 360px !important;
}
.city-case-grid {
  width: min(1120px, calc(100vw - 260px)) !important;
  gap: 18px !important;
}
.city-case-grid .city-case-media {
  aspect-ratio: 16 / 8.6 !important;
}
.city-case-copy[data-style-key],
.city-case-copy [data-style-key] {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, font-size .18s ease;
}
.city-case-pages-section {
  padding-top: clamp(54px, 6vh, 80px) !important;
}
@media (max-width: 980px) {
  .city-case-main-host,
  .city-case-grid,
  .city-case-pages-list,
  .city-case-page-block .city-case-heading {
    width: 100% !important;
  }
  .city-case-main,
  .city-case-main .city-case-media,
  .city-case-main .city-case-copy {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}
/* v57 city case refinement: keep the original case visible, tighter media rhythm */
.city-method-map-host {
  width: min(1280px, 100%);
  margin-inline: auto;
}
.city-method-map-card {
  min-height: min(86vh, 760px);
}
.city-method-map-card > .city-case-media,
.city-method-map-media {
  min-height: min(86vh, 760px);
}
.city-method-map-card:not(:has(.city-method-map-copy)) {
  display: block;
}
.city-method-map-card:not(:has(.city-method-map-copy)) .city-case-media,
.city-method-map-card:not(:has(.city-method-map-copy)) .city-method-map-media {
  width: 100%;
}
.city-case-section {
  padding-top: clamp(96px, 10vh, 132px);
}
.city-case-heading {
  margin-bottom: clamp(30px, 4vh, 52px);
}
.city-case-main-host,
.city-case-pages-list .city-case-main-host {
  width: min(1210px, 100%);
  margin: 0 auto 20px;
}
.city-case-main {
  grid-template-columns: minmax(0, 1.62fr) minmax(280px, .68fr);
  min-height: min(58vh, 600px);
}
.city-case-main .city-case-media {
  min-height: 500px;
}
.city-case-grid,
.city-case-pages-list .city-case-grid {
  width: min(1210px, 100%);
  margin-inline: auto;
}
.city-case-grid .city-case-card {
  min-height: 410px;
  grid-template-rows: minmax(210px, 1fr) auto;
}
.city-case-grid .city-case-copy {
  min-height: 150px;
  padding: 22px 24px 24px;
}
.city-case-copy {
  background: var(--city-copy-bg, transparent);
  color: var(--city-copy-color, #f6f1e8);
}
.city-case-copy h3 {
  color: var(--city-copy-title-color, #f6f1e8);
}
.city-case-copy p {
  color: var(--city-copy-text-color, rgba(246,241,232,.62));
}
.city-case-page-block {
  padding-top: clamp(72px, 8vh, 110px);
  padding-bottom: clamp(88px, 10vh, 130px);
}
.city-case-pages-section[hidden] {
  display: none !important;
}
@media (max-width: 980px) {
  .city-case-main {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .city-case-main .city-case-media {
    min-height: 320px;
  }
  .city-case-copy {
    border-left: 0;
    border-top: 1px solid rgba(216,189,120,.16);
  }
}
.city-case-copy > span {
  color: var(--city-copy-meta-color, #b4934f);
}

/* v57b city OS case tightening and editable copy surfaces */
.city-case-section {
  padding-top: clamp(78px, 8vh, 108px) !important;
}
.city-case-heading {
  margin-bottom: clamp(20px, 2.8vh, 34px) !important;
}
.city-case-main-host,
.city-case-pages-list .city-case-main-host,
.city-case-grid,
.city-case-pages-list .city-case-grid,
.city-case-pages-list,
.city-case-page-block .city-case-heading {
  width: min(1120px, calc(100vw - 260px)) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.city-case-main {
  min-height: 382px !important;
  height: 382px !important;
  max-height: 382px !important;
  grid-template-columns: minmax(0, 1.56fr) minmax(248px, .58fr) !important;
}
.city-case-main .city-case-media,
.city-case-main .city-case-copy {
  min-height: 360px !important;
  height: 360px !important;
  max-height: 360px !important;
}
.city-case-main .city-case-copy {
  overflow: auto !important;
}
.city-case-grid {
  gap: 18px !important;
}
.city-case-grid .city-case-card {
  min-height: 384px !important;
  grid-template-rows: minmax(198px, 1fr) auto !important;
}
.city-case-grid .city-case-media {
  aspect-ratio: 16 / 8.85 !important;
  min-height: 0 !important;
}
.city-case-grid .city-case-copy {
  min-height: 140px !important;
  padding: 18px 20px 20px !important;
}
.city-case-copy {
  background: var(--city-copy-bg, #201915) !important;
}
.city-case-copy h3,
.city-case-copy [data-city-case-title] {
  color: var(--city-copy-title-color, #f6f1e8) !important;
}
.city-case-copy p,
.city-case-copy [data-city-case-description],
.city-case-lead {
  color: var(--city-copy-text-color, rgba(246,241,232,.64)) !important;
}
.city-case-copy > span {
  color: var(--city-copy-meta-color, #b4934f) !important;
}
@media (max-width: 980px) {
  .city-case-main-host,
  .city-case-pages-list .city-case-main-host,
  .city-case-grid,
  .city-case-pages-list .city-case-grid,
  .city-case-pages-list,
  .city-case-page-block .city-case-heading { width: 100% !important; }
  .city-case-main,
  .city-case-main .city-case-media,
  .city-case-main .city-case-copy {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }
}


/* v62 requested larger Quancheng main case */
.city-case-main-host,
.city-case-pages-list .city-case-main-host,
.city-case-grid,
.city-case-pages-list .city-case-grid,
.city-case-pages-list,
.city-case-page-block .city-case-heading {
  width: min(1456px, calc(100vw - 144px)) !important;
}
.city-case-main {
  min-height: 611px !important;
  height: 611px !important;
  max-height: 611px !important;
  grid-template-columns: minmax(0, 1.72fr) minmax(300px, .64fr) !important;
}
.city-case-main .city-case-media,
.city-case-main .city-case-copy {
  min-height: 589px !important;
  height: 589px !important;
  max-height: 589px !important;
}
@media (max-width: 980px) {
  .city-case-main,
  .city-case-main .city-case-media,
  .city-case-main .city-case-copy {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}


/* v63 Quancheng case width release */
#quancheng-case.city-case-section,
.city-case-page-block.city-case-section {
  padding-left: 72px !important;
  padding-right: 72px !important;
}
.city-case-main-host,
.city-case-pages-list .city-case-main-host,
.city-case-grid,
.city-case-pages-list .city-case-grid,
.city-case-pages-list,
.city-case-page-block .city-case-heading {
  width: min(1456px, 100%) !important;
}
@media (max-width: 980px) {
  #quancheng-case.city-case-section,
  .city-case-page-block.city-case-section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}


/* v64 city method map upload fills full page */
#city-method-map.city-method-map-section {
  min-height: 100vh !important;
  height: 100vh !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #080604 !important;
}
#city-method-map .city-method-map-host,
#city-method-map .city-method-map-card,
#city-method-map .city-method-map-media {
  width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: none !important;
  margin: 0 !important;
}
#city-method-map .city-method-map-card {
  display: block !important;
  position: relative !important;
  border: 0 !important;
  background: #080604 !important;
}
#city-method-map .city-method-map-media {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
}
#city-method-map .city-method-map-media > video,
#city-method-map .city-method-map-media > img,
#city-method-map .city-method-map-media > iframe,
#city-method-map .city-method-map-media .city-code-shell {
  display: block !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: none !important;
  object-fit: cover !important;
  border: 0 !important;
}
#city-method-map .city-method-map-heading {
  z-index: 6 !important;
}
#city-method-map .city-method-map-copy {
  z-index: 5 !important;
}
@media (max-width: 760px) {
  #city-method-map.city-method-map-section,
  #city-method-map .city-method-map-host,
  #city-method-map .city-method-map-card,
  #city-method-map .city-method-map-media,
  #city-method-map .city-method-map-media > video,
  #city-method-map .city-method-map-media > img,
  #city-method-map .city-method-map-media > iframe,
  #city-method-map .city-method-map-media .city-code-shell {
    height: 100svh !important;
    min-height: 100svh !important;
  }
}


/* v65 city case heading follows method map rhythm */
#quancheng-case > .city-case-heading {
  width: min(980px, calc(100vw - 260px)) !important;
  margin-left: clamp(120px, 10vw, 168px) !important;
  margin-right: auto !important;
  margin-bottom: clamp(30px, 4vh, 52px) !important;
}
#quancheng-case > .city-case-heading > p:last-child {
  max-width: 980px !important;
}
@media (max-width: 980px) {
  #quancheng-case > .city-case-heading {
    width: 100% !important;
    margin-left: 0 !important;
  }
}


/* v66 Quancheng heading alignment and editable added pages */
#quancheng-case > .city-case-heading {
  width: min(980px, calc(100vw - 260px)) !important;
  margin-left: clamp(132px, 12vw, 196px) !important;
  margin-right: auto !important;
  margin-bottom: clamp(28px, 3.8vh, 48px) !important;
}
#quancheng-case > .city-case-heading > p:last-child {
  max-width: 980px !important;
}
.city-case-page-block .cms-v31-delete-page {
  position: absolute;
  right: clamp(32px, 5vw, 72px);
  top: clamp(72px, 8vh, 104px);
  z-index: 8;
}
@media (max-width: 980px) {
  #quancheng-case > .city-case-heading {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .city-case-page-block .cms-v31-delete-page {
    position: static;
    margin: 0 0 18px auto;
    display: block;
  }
}

/* v72 targeted subpage refinements */
.city-case-pages-section .city-case-page-block {
  margin-top: -36px !important;
}
.ai-app-library-section .ai-app-library-grid {
  margin-top: -36px !important;
}
.city-case-copy {
  background: var(--city-copy-bg, rgba(26,22,17,.92)) !important;
}
.city-case-copy > span {
  color: var(--city-copy-meta-color, #b4934f) !important;
}
.city-case-copy h3 {
  color: var(--city-copy-title-color, #f6f1e8) !important;
}
.city-case-copy p {
  color: var(--city-copy-text-color, #bdb4a8) !important;
}
.course-managed-body {
  margin: 0;
  display: block;
  width: 100%;
}
.course-image-frame {
  margin: 0;
  width: 100%;
  border-top: 1px solid rgba(180,147,79,.28);
  background: transparent;
  overflow: visible;
}
.course-image-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
}
@media (max-width: 760px) {
  .city-case-pages-section .city-case-page-block,
  .ai-app-library-section .ai-app-library-grid { margin-top: -20px !important; }
}

@media (min-width: 981px) {
  .city-case-main {
    align-items: stretch !important;
    overflow: hidden !important;
  }
  .city-case-main .city-case-media,
  .city-case-main .city-case-copy {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
  }
}