/* City Choice NYC — service-area pages. Loaded after home.css + why.css (hero, eyebrow, FAQ, CTA band
   come from there). Values from reference/design/area-pages. */

/* Hero: full-bleed neighbourhood photo under a neutral scrim */
.ccl-hero { background: var(--cc-ink); }
.ccl-hero .cchw-hero__img { left: 0; }
.ccl-hero .cchw-hero__scrim { background-image: linear-gradient(90deg, rgba(30,26,25,.90) 0%, rgba(30,26,25,.78) 34%, rgba(30,26,25,.34) 62%, rgba(30,26,25,.06) 100%); }
.ccl-hero .cchw-hero__copy > p { color: #ECE7E5; }

.ccl-page .cchw-faq { padding-top: 86px; }
.ccl-page p { text-wrap: pretty; }

/* Overview: two columns of copy */
.ccl-overview { padding: 88px 0 78px; }
.ccl-overview .cch-wrap, .ccl-services .cch-wrap, .ccl-start .cch-wrap, .ccl-others .cch-wrap { display: flex; flex-direction: column; gap: 30px; }
.ccl-overview .cch-wrap { gap: 34px; }
.ccl-overview h2 { max-width: 780px; }
.ccl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 6px; }
.ccl-cols > div, .ccl-split__head, .ccl-split__body { display: flex; flex-direction: column; gap: 20px; }
.ccl-cols p, .ccl-split__body p { font-size: 16px; line-height: 1.85; color: var(--cc-muted); }

/* Heading-left / copy-right rows */
.ccl-split { display: grid; grid-template-columns: 430px minmax(0, 1fr); gap: 56px; align-items: start; }
.ccl-places { padding: 20px 0 86px; }
.ccl-paying { padding: 86px 0 78px; }

/* Services: 2 × 2 cards */
.ccl-services { padding: 82px 0; }
.ccl-services h2, .ccl-start h2 { max-width: 700px; }
.ccl-services__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 10px; }
.ccl-service { display: flex; flex-direction: column; border-radius: 20px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.14); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.ccl-service:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.ccl-service__media { position: relative; height: 196px; flex-shrink: 0; }
.ccl-service__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ccl-service__media b { position: absolute; left: 22px; bottom: -20px; width: 44px; height: 44px; border-radius: 13px; background: var(--cc-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; box-shadow: 0 6px 16px rgba(0,0,0,.22); }
.ccl-service__body { display: flex; flex-direction: column; gap: 12px; padding: 34px 26px 28px; flex-grow: 1; }
.ccl-service h3 { font-size: 21px; }
.ccl-service:hover h3 { color: var(--cc-red); }
.ccl-service p { font-size: 14px; line-height: 1.85; font-weight: 300; color: var(--cc-muted); }

/* Accepted ways to pay */
.ccl-payways { background: var(--cc-green-dk); padding: 34px 0; }
.ccl-payways .cch-wrap { display: flex; flex-direction: column; gap: 20px; }
.cch-page .ccl-payways h3 { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-align: center; color: rgba(255,255,255,.72); }
.cch-page .ccl-payways ul { list-style: none; display: flex; align-items: stretch; }
.ccl-payways li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 30px; border-left: 1px solid rgba(255,255,255,.22); font-size: 16px; line-height: 1.5; font-weight: 600; color: #fff; }
.ccl-payways li:first-child { border-left: 0; }

/* Why: numbered list */
.cch-page .ccl-reasons { list-style: none; display: flex; flex-direction: column; gap: 26px; }
.ccl-reasons li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 22px; align-items: start; padding-bottom: 26px; border-bottom: 1px solid #CDCBCC; }
.ccl-reasons li:last-child { border-bottom: 0; }
.ccl-reasons span { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--cc-green-dk); }
.ccl-reasons p { font-size: 16px; line-height: 1.9; font-weight: 300; color: var(--cc-muted); }

/* Getting started: steps on the curved path (desktop); cards below 1280 */
.ccl-start { padding: 84px 0; }
.cch-page .ccl-steps { list-style: none; }
.ccl-path { position: relative; height: 470px; margin-top: 10px; }
.ccl-path__curve { position: absolute; left: 0; top: 0; width: 1240px; height: 470px; }
.ccl-steps__num { position: absolute; left: calc(var(--x) + 16px); top: calc(var(--y) + 34px); font-size: 104px; line-height: 1; font-weight: 700; color: #EAE6E5; }
.ccl-step.is-high .ccl-steps__num { top: calc(var(--y) - 140px); }
.ccl-steps__icon { position: absolute; z-index: 2; left: calc(var(--x) - 30px); top: calc(var(--y) - 30px); width: 60px; height: 60px; border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; }
/* Copy sits above a trough and below a crest, always 24px clear of the tile however long it runs. */
.ccl-steps p { position: absolute; z-index: 1; left: calc(var(--x) - var(--tw) / 2); width: var(--tw); bottom: 204px; font-size: 14px; line-height: 1.75; font-weight: 300; color: var(--cc-muted); }
.ccl-step.is-high p { bottom: auto; top: 236px; }

/* Other areas */
.ccl-others { padding: 80px 0; }
.ccl-others .cch-wrap { gap: 28px; }
.ccl-others h2 { max-width: 780px; }
.ccl-others__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; padding-top: 8px; }
.ccl-other { display: flex; flex-direction: column; border-radius: 20px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.14); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.ccl-other:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.ccl-other img { width: 100%; height: 124px; object-fit: cover; }
.ccl-other div { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; }
.ccl-other h3 { font-size: 17px; line-height: 1.3; }
.ccl-other em { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; font-style: normal; color: var(--cc-red); }

@media (max-width: 1279px) {
  .ccl-split { grid-template-columns: 1fr; gap: 20px; }
  .ccl-others__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ccl-path { height: auto; }
  .ccl-path__curve { display: none; }
  .cch-page .ccl-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; }
  .ccl-step { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 18px; padding: 30px 26px; border-radius: 20px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.14); overflow: hidden; }
  .ccl-steps__num, .ccl-step.is-high .ccl-steps__num { left: auto; right: 18px; top: 6px; z-index: -1; color: #F1EEED; }
  .ccl-steps__icon { position: static; }
  .ccl-steps p, .ccl-step.is-high p { position: static; width: auto; font-size: 14px; line-height: 1.8; }
}

@media (max-width: 960px) {
  .ccl-page .cchw-faq { padding-top: 34px; }
  /* Hero keeps its eyebrow and both buttons on mobile */
  .ccl-hero { height: 470px; }
  .ccl-hero .cchw-hero__eyebrow { display: inline-flex; padding: 6px 12px; font-size: 11px; gap: 7px; }
  .ccl-hero .cchw-hero__btns { flex-direction: column; align-items: stretch; gap: 10px; }
  .ccl-hero .cchw-btn--glass { display: inline-flex !important; padding: 13px; }
  .ccl-overview, .ccl-places, .ccl-services, .ccl-paying, .ccl-start, .ccl-others { padding: 34px 0; }
  .ccl-places { padding-top: 0; }
  .ccl-overview .cch-wrap, .ccl-services .cch-wrap, .ccl-start .cch-wrap, .ccl-others .cch-wrap { gap: 16px; }
  .ccl-cols { grid-template-columns: 1fr; gap: 16px; padding-top: 0; }
  .ccl-cols > div, .ccl-split__head, .ccl-split__body { gap: 16px; }
  .ccl-cols p, .ccl-split__body p { font-size: 14px; font-weight: 300; }
  .ccl-split { gap: 16px; }

  .ccl-services__grid { grid-template-columns: 1fr; gap: 16px; padding-top: 0; }
  .ccl-service__media { height: 160px; }
  .ccl-service__body { padding: 30px 20px 22px; gap: 10px; }
  .ccl-service h3 { font-size: 18px; }
  .ccl-service p { font-size: 13px; }

  .ccl-payways { padding: 24px 0; }
  .ccl-payways .cch-wrap { gap: 14px; }
  .cch-page .ccl-payways h3 { text-align: left; font-size: 11px; }
  .cch-page .ccl-payways ul { flex-direction: column; gap: 12px; }
  .ccl-payways li { justify-content: flex-start; padding: 0; border: 0; gap: 11px; font-size: 14px; }
  .ccl-payways li svg { width: 20px; height: 20px; }

  .cch-page .ccl-reasons { gap: 18px; }
  .ccl-reasons li { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
  .ccl-reasons span { font-size: 20px; }
  .ccl-reasons p { font-size: 14px; line-height: 1.85; }

  .cch-page .ccl-steps { grid-auto-flow: row; gap: 14px; padding-top: 0; }
  .ccl-step { padding: 22px 20px; gap: 14px; border-radius: 18px; }
  .ccl-steps__icon { width: 48px; height: 48px; border-radius: 14px; }
  .ccl-steps__icon svg { width: 22px; height: 22px; }
  .ccl-steps__num { font-size: 72px; }
  .ccl-steps p, .ccl-step.is-high p { font-size: 13px; }

  .ccl-others__grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 4px 20px 10px; }
  .ccl-other { flex: 0 0 200px; scroll-snap-align: start; }
}

@media (min-width: 601px) and (max-width: 960px) {
  .ccl-others__grid { margin: 0 -32px; padding-left: 32px; padding-right: 32px; }
}