.svc-grid{
      display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
    }

    /* each card sits in a relative wrapper so the + button + notch can overlap it */
    .svc-wrap{
      position:relative;
    }

    .svc-card{
      background:#fff;
      border-radius:24px;
      padding:40px 32px 30px;
      box-shadow:0 14px 34px rgba(20,20,20,.06);
    }

    /* page-coloured notch carving a SMOOTH concave corner: a block with a
       rounded inner corner + two fillets that round where its straight edges
       meet the card (convex → concave → convex). Real elements, not a mask,
       so the card keeps its drop shadow. */
    .svc-notch{
      position:absolute; top:0; right:0;
      width:84px; height:84px;
      background:var(--page);
      border-bottom-left-radius:40px;
      z-index:2;
    }
    .svc-notch::before{   /* fillet: card right edge → notch bottom */
      content:""; position:absolute; bottom:-18px; right:0;
      width:18px; height:18px;
      background:radial-gradient(circle at 0 100%, transparent 17.3px, var(--page) 18px);
    }
    .svc-notch::after{    /* fillet: card top edge → notch left */
      content:""; position:absolute; top:0; left:-18px;
      width:18px; height:18px;
      background:radial-gradient(circle at 0 100%, transparent 17.3px, var(--page) 18px);
    }
    /* gold + button, concentric with the notch's concave arc */
    .svc-plus{
      position:absolute; top:15px; right:15px;
      width:58px; height:58px;
      background:var(--gold);
      border-radius:50%;
      display:grid; place-items:center;
      z-index:3;
    }
    .svc-plus svg{ width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

    /* hover: gold → dark charcoal + icon flip */
    .svc-icon, .svc-plus{ transition:all 300ms ease; }
    .svc-wrap:hover .svc-icon,
    .svc-wrap:hover .svc-plus{ background-color:#222429; }

    /* icon */
    .svc-icon{
      width:84px; height:84px; border-radius:50%;
      background:var(--gold); display:grid; place-items:center;
    }
    .svc-icon svg{ width:46px; height:46px; transition:transform .4s ease; }
    .svc-wrap:hover .svc-icon svg{ transform:scaleX(-1); }

    /* card overlay sweep (same pattern as why-us) */
    .svc-card{ position:relative; overflow:hidden; }
    .svc-card::before{
      position:absolute; left:0; top:0; width:100%; height:100%; content:"";
      transform:scale(.2,1); background-color:rgba(12,47,37,.07);
      opacity:0; transition:500ms; pointer-events:none;
    }
    .svc-wrap:hover .svc-card::before{ transform:scale(1,1); opacity:1; }

    .svc-title{ font-family:var(--serif); font-size:24px; font-weight:600; color:var(--ink); margin-top:28px; }
    .svc-desc{ font-size:15px; line-height:1.72; color:#8f8a80; margin-top:14px; }

    /* card image */
    .svc-img-wrap{
      position:relative; overflow:hidden;
      border-radius:14px; margin-top:26px;
    }
    .svc-img{ display:block; width:100%; height:220px; object-fit:cover; }

    /* responsive */
    @media (max-width:920px){
      .svc-grid{ grid-template-columns:1fr; max-width:520px; }
    }
    @media (max-width:560px){
      .svc-card{ padding:30px 24px 24px; border-radius:18px; }
      .svc-title{ font-size:20px; margin-top:20px; }
    }