/* Services page — content only (shell lives in site.css) */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 3.5rem;
  border-bottom: 1px solid #2b2b2b;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(12,12,12,.92) 0%, rgba(20,20,20,.75) 50%, rgba(12,12,12,.88) 100%),
    url("https://ugdybpjxaaqzrtwudfqx.supabase.co/storage/v1/object/public/brand-logos/dc7b415e-1650-49c0-9ecb-ad74232bebc0/site-build/7f0f5cb5-4b42-4587-b591-a9f0210c1b73/05.webp") center/cover no-repeat;
  z-index: 0;
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(2.5rem, 8vw, 4.5rem); max-width: 14ch; margin-top: .45rem; }
.page-hero .lede { color: #e8e4d8; max-width: 48ch; margin-top: .9rem; font-size: 1.08rem; font-weight: 300; }

section { padding: 4rem 0; }
.sec-head { margin-bottom: 2rem; }
.sec-head h2 { font-size: clamp(2rem, 6vw, 3.2rem); margin-top: .35rem; }
.sec-head p { margin-top: .85rem; color: #c8c4b8; max-width: 58ch; font-size: 1.02rem; }

#core-services { background: var(--black); color: #fff; }
#core-services h2 { color: #fff; }
#core-services .sec-head p { color: #c8c4b8; }
#core-services .svc h3 { color: #fff; }
.svc-grid { display: grid; gap: 1.15rem; }
.svc {
  background: #1b1b1b;
  border: 1px solid #2a2a2a;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.svc img { width: 100%; height: 220px; object-fit: cover; }
.svc-body { padding: 1.3rem 1.25rem 1.45rem; flex: 1; display: flex; flex-direction: column; }
.svc h3 { font-size: 1.45rem; margin-bottom: .55rem; }
.svc > .svc-body > p { color: #c8c4b8; font-size: .96rem; margin-bottom: .85rem; }
.svc ul { list-style: none; display: grid; gap: .35rem; margin-bottom: 1rem; flex: 1; }
.svc ul li {
  font-size: .88rem;
  color: #a8a49a;
  padding-left: 1rem;
  position: relative;
}
.svc ul li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px;
  background: var(--yellow);
  border-radius: 50%;
}
.svc-link {
  font-family: Oswald, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--yellow);
  text-decoration: none;
  margin-top: auto;
}
.svc-link:hover { text-decoration: underline; }

#capabilities { background: var(--cream); color: var(--black); }
#capabilities .sec-head p { color: var(--muted); }
.cap-grid { display: grid; gap: 1rem; }
.cap-block { background: #fff; border: 1px solid #e2dccb; padding: 1.25rem 1.2rem 1.35rem; }
.cap-block h3 { font-size: 1.15rem; margin-bottom: .65rem; color: var(--black); }
.cap-block dl { display: grid; gap: .55rem; }
.cap-block dt {
  font-family: Oswald, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--muted);
}
.cap-block dd { font-size: .94rem; color: #333; margin: 0; }
.cap-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
.cap-tags span {
  border: 1px solid #d5cebb;
  padding: .35rem .6rem;
  font-size: .78rem;
  font-family: Oswald, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#process { background: var(--paper); color: var(--black); }
#process .sec-head p { color: var(--muted); }
.steps { display: grid; gap: .9rem; }
.step { border: 1px solid #ddd6c4; padding: 1.15rem 1.05rem 1.2rem; background: #fff; }
.step em {
  font-style: normal;
  font-family: Oswald, sans-serif;
  color: var(--black);
  letter-spacing: .08em;
  font-size: .78rem;
}
.step h3 { margin: .35rem 0 .4rem; font-size: 1.25rem; color: var(--black); }
.step p { color: #555; font-size: .94rem; }

#audience { background: var(--black); color: #fff; }
#audience h2 { color: #fff; }
#audience .sec-head p { color: #c8c4b8; }
#audience .aud-card h3 { color: #fff; }
.aud-grid { display: grid; gap: 1rem; }
.aud-card { border: 1px solid #2a2a2a; background: #1b1b1b; padding: 1.35rem 1.25rem 1.4rem; }
.aud-card h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.aud-card p { color: #c8c4b8; font-size: .94rem; }

#proof { background: #ece7da; color: var(--black); }
#proof .sec-head p { color: var(--muted); }
.proof-grid { display: grid; gap: .85rem; }
.proof-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #e2dccb;
  overflow: hidden;
}
.proof-card img { width: 100%; height: 180px; object-fit: cover; transition: transform .4s ease; }
.proof-card:hover img { transform: scale(1.03); }
.proof-card figcaption { padding: .85rem 1rem 1rem; }
.proof-card h3 { font-size: 1.05rem; margin-bottom: .2rem; color: var(--black); }
.proof-card p { color: var(--muted); font-size: .85rem; }

#faq { background: var(--black); color: #fff; }
#faq h2,
#faq h3 { color: #fff; }
#faq .sec-head p { color: #c8c4b8; }
.faq-list { display: grid; gap: .75rem; max-width: 52rem; }
.faq-item { border: 1px solid #2a2a2a; background: #1b1b1b; padding: 1.1rem 1.15rem; }
.faq-item h3 { font-size: 1.05rem; margin-bottom: .4rem; color: #fff; }
.faq-item p { color: #c8c4b8; font-size: .92rem; }

#cta-band {
  background: var(--ink);
  border-top: 1px solid #2b2b2b;
  padding: 3.5rem 0;
  color: #fff;
}
.cta-inner { display: grid; gap: 1.5rem; align-items: center; }
.cta-inner h2 { font-size: clamp(1.8rem, 5vw, 2.8rem); color: #fff; }
.cta-inner p { color: #c8c4b8; max-width: 40ch; margin-top: .5rem; }
.phone-xl {
  font-family: Oswald, sans-serif;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  color: var(--yellow);
  text-decoration: none;
  letter-spacing: .02em;
}
.phone-xl:hover { filter: brightness(1.08); }

@media (min-width: 768px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc img { height: 240px; }
  .cap-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .aud-grid { grid-template-columns: repeat(3, 1fr); }
  .proof-grid { grid-template-columns: repeat(3, 1fr); }
  .proof-card img { height: 200px; }
  .cta-inner { grid-template-columns: 1fr auto; }
}

@media (min-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .svc h3 { font-size: 1.55rem; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .proof-grid { grid-template-columns: repeat(4, 1fr); }
}