.page-hero{
    padding:160px clamp(24px, 6vw, 64px) 76px;
  }
  .page-hero-inner{
    max-width:800px; margin:0 auto; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:22px;
  }
  .page-hero h1{
    font-size:clamp(34px, 4.4vw, 54px);
    font-weight:600; letter-spacing:-0.025em; line-height:1.1;
    text-wrap:balance;
  }
  .page-hero p{
    font-size:17.5px; 
    line-height:1.7; 
    color:var(--neutral-700);
    max-width: 680px;
  }

  /* =========================================================
     SERVICE BLOCKS — split layout, image | content
     alternates sides via .reverse
     ========================================================= */
  .service-block{
    padding:64px clamp(24px, 6vw, 64px);
  }

  .service-block:last-of-type{
    padding-bottom:120px;
  }
  .service-block.alt{ background:var(--white); }
  .service-inner{
    max-width:var(--container); margin:0 auto;
    display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
  }
  .service-block.reverse .service-inner{ direction:rtl; }
  .service-block.reverse .service-inner > *{ direction:ltr; }

  /* --- Visual side --- */
  .service-visual{
    position:relative;
    aspect-ratio:4/3.4;
    border-radius:28px;
    overflow:hidden;
    background:linear-gradient(150deg, var(--teal-100), var(--paper-50));
    isolation:isolate;
  }
  .service-visual img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  }
  .service-visual .img-fallback{
    position:absolute; inset:0;
    display:none; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; color:var(--teal-700); text-align:center; padding:24px;
  }
  .service-visual .img-fallback svg{ width:44px; height:44px; }
  .service-visual .img-fallback span{ font-size:13px; font-weight:500; max-width:240px; color:var(--neutral-700); }

  /* --- Content side --- */
  .service-content{ display:flex; flex-direction:column; gap:20px; }

  .service-eyebrow{
    display:flex; align-items:center; gap:12px;
  }
  .service-icon-sm{
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    background:var(--teal-100); color:var(--teal-700);
    display:flex; align-items:center; justify-content:center;
  }
  .service-icon-sm svg{ width:19px; height:19px; stroke-width:1.6; }
  .service-num{
    font-size:12.5px; font-weight:600; letter-spacing:0.08em; color:var(--teal-700);
    text-transform:uppercase;
  }

  .service-content h2{
    font-size:clamp(25px, 2.7vw, 34px); font-weight:600;
    letter-spacing:-0.025em; line-height:1.18;
    max-width:24ch;
  }
  .service-content > p.overview{
    font-size:16px; line-height:1.75; color:var(--neutral-700);
    max-width:52ch;
  }
  .service-content > p.overview .accent{
    color:var(--ink-900); font-weight:600;
  }

  /* Capability chips — replaces the old plain checklist */
  .capabilities-label{
    font-size:11.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--neutral-400); margin-top:4px;
  }
  .capability-chips{
    display:flex; flex-wrap:wrap; gap:9px; margin-top:12px;
  }
  .chip{
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 16px 9px 12px; border-radius:999px;
    background:var(--white); border:1px solid var(--neutral-200);
    font-size:13.5px; font-weight:500; color:var(--ink-900);
    transition:border-color 200ms ease, background 200ms ease, transform 200ms ease;
  }
  .service-block.alt .chip{ background:var(--paper-50); }
  .chip svg{ width:15px; height:15px; color:var(--teal-500); flex-shrink:0; stroke-width:2.2; }
  .chip:hover{ border-color:var(--teal-500); background:var(--teal-100); transform:translateY(-1px); }

  /* Divider before CTA */
  .content-divider{
    height:1px; width:100%; background:var(--neutral-200); margin:6px 0 2px;
  }

  .btn-primary{
    display:inline-flex; align-items:center; justify-content:space-between; gap:18px;
    padding:6px 6px 6px 24px; border-radius:999px; font-size:14.5px; font-weight:500;
    font-family:inherit; cursor:pointer; white-space:nowrap; text-decoration:none;
    background:var(--teal-500); color:var(--white); border:none; width:fit-content;
    box-shadow:0 10px 24px rgba(29,158,117,0.28);
    transition:background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  }
  .btn-primary .btn-icon{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:34px; height:34px; border-radius:50%;
    background:var(--white); color:var(--teal-700);
    transition:transform 350ms cubic-bezier(.2,.8,.2,1);
  }
  .btn-primary .btn-icon svg{ width:14px; height:14px; display:block; }
  .btn-primary:hover{
    background:var(--teal-700); transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(15,110,86,0.32);
  }
  .btn-primary:hover .btn-icon{ transform:rotate(45deg); }

  @media (max-width:900px){
    .service-inner{ grid-template-columns:1fr; gap:32px; }
    .service-block.reverse .service-inner{ direction:ltr; }
    .service-visual{ aspect-ratio:16/11; }
    .service-content h2, .service-content > p.overview{ max-width:none; }
  }
  @media (max-width:600px){
    .page-hero{ padding:88px 20px 56px; }
    .service-block{ padding:48px 20px; }
    .service-block:last-of-type{ padding-bottom:88px; }
  }