/* ============================================================
   SERVICE.CSS — service pages, hubs, about, service area, contact
   ============================================================ */

.svc-intro { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; }
.svc-intro .quote-teaser { grid-template-columns: auto 1fr; align-content: center; }
.svc-intro .quote-teaser .btn { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 900px) { .svc-intro { grid-template-columns: 1fr; } }

.benefits { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
.benefit { padding: 28px 24px; display: grid; gap: 14px; align-content: start; }
.benefit h3 { font-size: 1.3rem; }
.benefit p { color: var(--ink-muted); font-size: var(--fs-sm); }
@media (max-width: 1000px) { .benefits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .benefits { grid-template-columns: 1fr; } }

.extra { border-radius: var(--radius-lg); background: var(--dark-card); color: #fff; padding: clamp(32px, 5vw, 64px); display: grid; gap: 28px; }
.extra h2 { font-size: var(--fs-h3); }
.extra__list { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); }
.extra__list > div { padding: 20px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.extra__list dt { font-weight: 600; margin-bottom: 6px; color: var(--accent-on-dark); }
.extra__list dd { font-size: var(--fs-sm); color: rgba(255, 255, 255, .82); }
@media (max-width: 1000px) { .extra__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .extra__list { grid-template-columns: 1fr; } }

.pricing { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(28px, 4vw, 48px); }
.pricing__title { font-size: var(--fs-h3); margin: 10px 0; }
.pricing__title .accent { font-style: normal; }
.pricing__title small { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-muted); }
.pricing__badge { margin-top: 12px; }
.pricing p { color: var(--ink-muted); max-width: 56ch; }

.related-services { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.related-services__link { display: flex; align-items: center; gap: 14px; padding: 18px 20px; text-decoration: none; font-weight: 600; min-height: 64px; }
.related-services__link span { flex: 1; }
.related-services__link > .icon:first-child { color: var(--accent-text); }

.bento--hub { grid-auto-rows: minmax(280px, auto); }
.bento--hub .bento__item--small { grid-column: span 2; }

/* ---- About ---- */
/* about: approach + collage */
.about-approach { display: grid; gap: clamp(32px, 5vw, 80px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.about-approach__copy { display: grid; gap: 18px; }
.about-approach__copy .prose { max-width: 58ch; }
.about-collage { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.about-collage__img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); background: var(--bg-2); }
.about-collage__img img { width: 100%; height: 100%; object-fit: cover; }
.about-collage__img--tall { aspect-ratio: 3 / 4; }
.about-collage__img--side { aspect-ratio: 4 / 5; margin-top: clamp(40px, 8vw, 110px); }

/* about: values */
.values { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.values li { padding: 26px 24px; display: grid; gap: 12px; align-content: start; }
.values h3 { font-size: 1.4rem; }
.values p { color: var(--ink-muted); font-size: var(--fs-sm); }

/* about: on-the-job mosaic (tiles reuse .bento__card) */
.jobs { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; }
.jobs .bento__card { min-height: 0; }
.jobs__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.jobs__item:nth-child(4) { grid-column: 3 / span 2; }
.jobs__item:nth-child(5), .jobs__item:nth-child(6) { grid-column: span 2; }

/* about: why hire a professional */
.about-pro { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.about-pro__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); min-height: 280px; }
.about-pro__media img { width: 100%; height: 100%; object-fit: cover; }
.about-pro .answer-box { align-content: center; }
.about-pro__title { font-size: var(--fs-h3); }

@media (max-width: 1000px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .about-approach, .about-pro { grid-template-columns: minmax(0, 1fr); }
  .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
  .jobs__item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .jobs__item:nth-child(1), .jobs__item:nth-child(4) { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .values { grid-template-columns: minmax(0, 1fr); }
  .jobs { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; }
  .jobs__item:nth-child(n) { grid-column: auto; }
}

/* ---- Contact ---- */
.contact-grid { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); align-items: start; }
.contact-form { padding: clamp(24px, 4vw, 44px); display: grid; gap: 20px; }
.contact-info { display: grid; gap: 14px; }
.contact-info__item { display: flex; gap: 16px; align-items: flex-start; padding: 22px; }
.contact-info__item .steps__icon { flex: none; }
.contact-info__item small { display: block; font-size: var(--fs-xs); color: var(--ink-muted); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.contact-info__item a, .contact-info__item p { font-weight: 600; font-size: var(--fs-base); text-decoration: none; overflow-wrap: anywhere; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---- 404 ---- */
.nf { display: grid; gap: 28px; justify-items: center; text-align: center; }
.nf .search-box { width: min(100%, 560px); padding: 0; text-align: left; }
.nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; }
.nf__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); }
.nf__links a:hover { background: var(--surface); }