.commitment-grid{
      display:grid; grid-template-columns:1.12fr 1fr; gap:26px;
      align-items:stretch;
    }

    /* ---------- LEFT: photo + 25+ ---------- */
    .commitment-photo{ position:relative; }
    .ap-img{
      position:absolute; inset:0; border-radius:22px; overflow:hidden;
    }
    .ap-img picture{ display:block; width:100%; height:100%; }
    .ap-img img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }

    .ap-stat{
      position:absolute; left:24px; bottom:24px;
      background: linear-gradient(135deg, #fdf9f0 0%, #f4eed9 50%, #ede3c8 100%);
      border-radius:16px;
      padding:18px 26px; display:flex; align-items:center; gap:16px;
      box-shadow:0 12px 30px rgba(0,0,0,.12);
    }
    .ap-stat .num{ font-family:var(--serif); font-size:50px; font-weight:700; color:var(--gold); line-height:1; }
    .ap-stat .lbl{ font-family:var(--serif); font-size:17px; color:var(--ink); line-height:1.3; }

    /* ---------- RIGHT ---------- */
    .commitment-right{ display:flex; flex-direction:column; gap:26px; }

    /* vision card */
    .vision-card{
      position:relative; overflow:hidden;
      background:var(--ink); border-radius:22px;
      padding:34px 36px;
    }
    .vision-card .corner-dot{ position:absolute; top:22px; right:24px; width:7px; height:7px; border-radius:50%; background:var(--gold); z-index:2; }
    .v-carousel{ overflow:hidden; }
    .v-track{ display:flex; transition:transform .7s ease; will-change:transform; }
    .v-slide{ flex:0 0 100%; min-width:100%; padding-right:6px; }
    .vision-head{ display:flex; align-items:center; gap:12px; margin-bottom:20px; transition:opacity .35s ease; }
    .vbadge{ width:34px; height:34px; border-radius:50%; background:var(--gold); display:grid; place-items:center; flex:none; transition:transform .4s ease; }
    .vbadge::after{ content:''; position:absolute; border-radius:50%; width:22px; height:22px; bottom:-8px; right:-7px; background:rgba(255,255,255,.18); pointer-events:none; }
    .vision-card:hover .vbadge{ transform:scaleX(-1); }
    .vbadge svg{ width:16px; height:16px; stroke:#fff; stroke-width:2.6; stroke-linecap:round; }
    .vision-head h3{ font-family:var(--serif); font-size:24px; font-weight:600; color:#fff; }
    .vision-text{ color:#a9a7a1; font-size:15.5px; line-height:1.7; max-width:46ch; }

    /* features card */
    .features-card{
      background:var(--cream); border-radius:22px;
      padding:30px; display:flex; gap:26px; align-items:stretch;
    }
    .fc-left{ flex:1; display:flex; flex-direction:column; }
    .fc-list{ list-style:none; display:flex; flex-direction:column; gap:18px; }
    .fc-list li{ display:flex; align-items:center; gap:13px; font-size:16px; font-weight:500; color:#33332e; }
    .fc-list .check{ flex:none; width:20px; height:20px; }
    .discover{
      align-self:flex-start; margin-top:24px;
      position:relative; overflow:hidden;
      display:inline-flex; align-items:center; gap:14px;
      background:var(--gold-grad); border:none; border-radius:0 100px 100px 0;
      padding:9px 9px 9px 26px; cursor:pointer;
      transition:box-shadow .3s ease;
    }
    .discover::before{ content:''; position:absolute; top:0; left:0; width:2px; height:100%; background:var(--ink); z-index:1; }
    .discover::after{ content:''; position:absolute; inset:0; background:var(--ink); width:0; transition:width .45s ease; z-index:0; }
    .discover:hover::after{ width:100%; }
    .discover:hover{ box-shadow:0 10px 22px rgba(207,182,143,.35); }
    .discover .label{ font-family:var(--serif); font-size:14px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#fff; white-space:nowrap; position:relative; z-index:1; }
    .discover .circle{ flex:none; width:40px; height:40px; border-radius:50%; background:var(--ink); display:grid; place-items:center; position:relative; z-index:1; transition:background .35s ease; }
    .discover:hover .circle{ background:var(--gold); }
    .discover .circle svg{ width:17px; height:17px; fill:none; stroke:#fff; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s ease, stroke .35s ease; }
    .discover:hover .circle svg{ transform:rotate(45deg); stroke:var(--ink); }

    /* 2.4M stat image card */
    .fc-stat{
      position:relative; overflow:hidden;
      flex:0 0 210px; border-radius:16px;
      background-image:
        url("../img/Commitment-sm_scale\,w_210.webp"),
        linear-gradient(160deg,#2b3038,#14171c);
      background-size:cover, cover; background-position:center top, center;
    }
    .fc-stat::after{
      content:""; position:absolute; inset:0;
      background:linear-gradient(to top, rgba(20,22,26,.96) 22%, rgba(20,22,26,.55) 45%, rgba(20,22,26,0) 70%);
    }
    .fc-stat-text{ position:absolute; left:0; right:0; bottom:0; padding:18px 20px; z-index:1; text-align:center; }
    .fc-stat-text .num{ display:block; font-family:var(--serif); font-size:34px; font-weight:700; color:var(--tan); line-height:1; }
    .fc-stat-text .lbl{ display:block; font-family:var(--serif); font-size:16px; color:#fff; margin-top:4px; }

    /* ---------- responsive ---------- */
    @media (max-width:960px){
      .commitment-grid{ grid-template-columns:1fr; }
      .commitment-photo{ min-height:420px; }
    }
    @media (max-width:560px){
      .vision-card{ padding:24px 20px; }
      .vision-head h3{ font-size:20px; }
      .features-card{ flex-direction:column; gap:16px; }
      .fc-stat{ flex:none; height:200px; }
    }
    @media (max-width:400px){
      .vision-card{ padding:20px 16px; }
      .features-card{ padding:20px 18px; }
      .discover .label{ font-size:13px; }
    }