/* Additional layouts for the four NEW service pages only.
   The homepage continues to use its unchanged style.css. */
.service-detail .detail-hero { padding: 130px 0 75px; background: var(--service-bg); }
.detail-back { display: inline-flex; margin-bottom: 30px; font-size: .9rem; font-weight: 600; }
.detail-back:hover { text-decoration: underline; text-underline-offset: 5px; }
.service-detail h1 { font-size: clamp(2.6rem, 4.7vw, 4.1rem); margin-bottom: 25px; }
.detail-hero .lead { font-size: 1.12rem; margin-bottom: 30px; }
.detail-hero .two-col { gap: 48px; }
.detail-visual { background: rgba(255,255,255,.58); border-radius: 40px; padding: 22px; box-shadow: var(--shadow); }
.detail-visual.detail-visual-dark { background: radial-gradient(ellipse at 28% 45%, #3D4077 0%, #272B55 48%, var(--ink) 100%); }
.detail-visual img { width: 100%; height: auto; }
.detail-promises { padding: 55px 0; background: var(--cream); }
.detail-promise-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 25px; }
.detail-promise { padding: 36px; background: var(--service); border-radius: 30px; }
.detail-eyebrow { font-size: .85rem; font-weight: 700; margin-bottom: 18px; }
.detail-promise h2 { font-size: clamp(1.8rem,2.4vw,2.4rem); margin-bottom: 20px; }
.detail-promise>p:last-child { color: var(--ink-soft); font-size: 1rem; line-height: 1.8; }
.detail-programme { padding: 75px 0 90px; }
.detail-programme .center-head { margin-bottom: 32px; }
.detail-jumps { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 38px; }
.detail-jumps a { display: inline-flex; gap: 8px; align-items: center; font-size: .8rem; padding: 10px 15px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--service-dark); transition: background .2s,transform .2s; }
.detail-jumps a:hover { background: var(--service); transform: translateY(-2px); }
.detail-jumps b { font-size: .72rem; }
.detail-pillar-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px; }
.detail-pillar { display: flex; flex-direction: column; scroll-margin-top: 110px; padding: 33px; border-radius: 32px; background: #fff; box-shadow: var(--shadow-sm); border: 1px solid var(--service); }
.detail-pillar:nth-child(3n+2) { background: var(--service-bg); }
.detail-pillar-top { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 27px; font-size: .78rem; font-weight: 700; }
.detail-pillar-top span:last-child { font-size: .72rem; font-weight: 500; padding: 6px 10px; border-radius: 999px; background: var(--service); white-space: nowrap; }
.detail-pillar h3 { font-size: clamp(1.6rem,2.4vw,2rem); }
.detail-pillar-subtitle { color: var(--ink-soft); margin: 13px 0 25px; font-size: 1rem; }
.detail-deliverables { display: grid; gap: 14px; margin-bottom: 30px; }
.detail-deliverables li { display: flex; align-items: flex-start; gap: 12px; font-size: .95rem; line-height: 1.65; }
.detail-deliverables li>span { display: grid; place-items: center; width: 23px; height: 23px; flex: none; margin-top: 2px; border-radius: 50%; background: var(--service); font-size: .75rem; font-weight: 700; }
.detail-tags { margin-top: auto; padding-top: 21px; border-top: 1px solid var(--service-dark); display: flex; flex-wrap: wrap; gap: 8px; }
.detail-tags span { background: var(--service); border-radius: 999px; font-size: .73rem; font-weight: 600; padding: 7px 12px; }
.detail-process { background: var(--service-bg); padding: 75px 0; }
.detail-process .center-head { margin-bottom: 40px; }
.detail-process-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.detail-process-grid li { background: rgba(255,255,255,.72); border-radius: 28px; padding: 30px; }
.detail-step-number { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--service); font-family: var(--font-head); font-weight: 700; margin-bottom: 25px; }
.detail-process-grid h3 { font-size: 1.5rem; margin-bottom: 15px; }
.detail-process-grid p { color: var(--ink-soft); font-size: .95rem; }
.service-detail .faq-section { padding: 85px 0; }
.service-detail .faq-section::before { display: none; }
.detail-cta { padding: 75px 0; background: var(--service); }
.detail-cta .center-head { margin-bottom: 0; }
.detail-cta .lede { margin-bottom: 30px; }
.detail-related { padding: 75px 0; }
.detail-related h2 { font-size: clamp(2rem,3vw,2.7rem); margin-bottom: 35px; }
.detail-related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.detail-related-card { display: flex; flex-direction: column; gap: 18px; background: var(--related); padding: 28px; border-radius: 28px; transition: transform .25s,box-shadow .25s; }
.detail-related-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.detail-related-card>span { font-size: .83rem; font-weight: 700; }
.detail-related-card h3 { font-size: 1.6rem; }
.detail-related-card p { margin-top: auto; color: var(--ink-soft); font-size: .88rem; }
@media(max-width:960px) {
  .detail-hero .two-col { grid-template-columns: 1fr; }
  .detail-visual { width: 100%; max-width: 530px; margin-inline: auto; }
  .detail-promise { padding: 28px; }
  .detail-pillar { padding: 27px; }
  .detail-process-grid { gap: 18px; }
  .detail-process-grid li { padding: 24px; }
  .detail-related-grid { gap: 18px; }
  .detail-related-card { padding: 24px; }
}
@media(max-width:640px) {
  .service-detail .detail-hero { padding-top: 118px; }
  .detail-back { font-size: .82rem; }
  .detail-promise-grid,.detail-pillar-grid,.detail-process-grid,.detail-related-grid { grid-template-columns: 1fr; }
  .detail-pillar-top { font-size: .73rem; }
  .detail-pillar-top span:last-child { font-size: .68rem; }
  .detail-pillar h3 { font-size: 1.8rem; }
  .detail-deliverables li { font-size: .93rem; }
  .detail-jumps { justify-content: flex-start; }
  .detail-jumps a { font-size: .72rem; padding: 9px 12px; }
  .detail-programme,.detail-process,.detail-related,.detail-cta { padding-block: 60px; }
}
@media(prefers-reduced-motion:reduce) {
  .detail-jumps a,.detail-related-card { transition: none; }
}