.city-page { font-size: 16px; line-height: 1.7; }

.city-breadcrumb { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #96918a; padding: 26px clamp(22px, 4vw, 72px) 0; }
.city-breadcrumb a:hover { color: var(--orange); }

.city-hero { padding: 24px clamp(22px, 4vw, 72px) 72px; }
.city-hero h1 { max-width: 760px; margin: 22px 0 24px; font: 600 clamp(40px, 5.5vw, 72px)/1.02 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.city-hero h1 em { font-style: normal; color: var(--orange); }
.city-intro { max-width: 620px; margin: 0 0 28px; color: #b9b3aa; font-size: 16px; line-height: 1.75; }

.city-why, .city-faq { background: var(--cream); color: #171715; padding: clamp(56px, 8vw, 96px) clamp(22px, 4vw, 72px); }
.city-why h2, .city-faq h2, .city-services h2 { margin: 20px 0 34px; font: 600 clamp(30px, 3.5vw, 46px)/1.05 "Barlow Condensed", sans-serif; text-transform: uppercase; max-width: 760px; }

.city-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: 1px solid #d9d3c9; padding-top: 32px; }
.city-fact-number { display: block; margin-bottom: 14px; font: 500 30px "Barlow Condensed", sans-serif; color: #a73c17; }
.city-fact p { margin: 0; color: #514c45; font-size: 15px; line-height: 1.7; }

.city-districts { margin: 36px 0 0; padding-top: 28px; border-top: 1px solid #d9d3c9; color: #514c45; font-size: 15px; line-height: 1.75; }
.city-districts strong { color: #171715; }

.city-services { background: var(--black-2); padding: clamp(56px, 8vw, 96px) clamp(22px, 4vw, 72px); }

.city-service-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 8px; }
.city-service-list article { display: grid; grid-template-columns: 32px 1fr; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line-dark); }
.city-service-list article > span { color: var(--orange); font-family: "Barlow Condensed", sans-serif; font-size: 22px; }
.city-service-list h3 { margin: 0 0 10px; font: 600 22px "Barlow Condensed", sans-serif; text-transform: uppercase; }
.city-service-list p { margin: 0 0 14px; color: #b9b3aa; font-size: 14px; line-height: 1.7; }
.city-service-list a { display: inline-flex; gap: 10px; align-items: center; color: var(--orange); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 5px; border-bottom: 1px solid currentColor; }

.city-faq-list details { border-bottom: 1px solid #c6c1b7; }
.city-faq-list details:first-child { border-top: 1px solid #c6c1b7; }
.city-faq-list summary { cursor: pointer; padding: 22px 35px 22px 0; font-weight: 600; position: relative; list-style: none; line-height: 1.6; }
.city-faq-list summary::-webkit-details-marker { display: none; }
.city-faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 18px; color: #a73c17; font-size: 25px; font-weight: 400; }
.city-faq-list details[open] summary::after { content: "\2212"; }
.city-faq-list details p { margin: 0; padding: 0 25px 24px 0; color: #514c45; }
.city-faq-list details a { text-decoration: underline; text-underline-offset: 3px; }

.city-final { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 32px; padding: clamp(56px, 8vw, 88px) clamp(22px, 4vw, 72px); border-top: 3px solid var(--orange); }
.city-final h2 { margin: 16px 0 10px; font: 600 clamp(34px, 4.5vw, 56px)/1.05 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.city-final p { margin: 0; max-width: 420px; color: #b9b3aa; }
.city-final-actions { display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 900px) {
  .city-facts, .city-service-list { grid-template-columns: 1fr; }
}