.hero {
        position: relative;
        min-height: 460px;
        overflow: hidden;
        padding: 26px;
        background:
          linear-gradient(
            90deg,
            rgba(5, 9, 20, 0.96) 0%,
            rgba(5, 9, 20, 0.78) 46%,
            rgba(5, 9, 20, 0.55) 100%
          ),
          url("../../images/family-law.webp") center / cover no-repeat;
      }

      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        /* background:
        radial-gradient(circle at 25% 60%, rgba(216, 11, 108, 0.13), transparent 36%),
        linear-gradient(to bottom, transparent 70%, #0b1220 100%);
      pointer-events: none; */
      }

      .topbar {
        position: relative;
        z-index: 5;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }

      .logo-white {
        width: 120px;
      }

      .hero-inner {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 36px;
      }

      .photo-wrap {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: end;
      }

      .photo-wrap::before {
        content: "";
        position: absolute;
        width: 290px;
        height: 290px;
        border-radius: 50%;
        filter: blur(22px);
        bottom: 20px;
      }

      .lawyer-photo {
        position: relative;
        width: 260px;
        height: 340px;
        object-fit: contain;
        object-position: bottom center;
        mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
      }

      .hero-content {
        max-width: 560px;
      }

      .tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 15px;
        margin-bottom: 16px;
        border-radius: 999px;
        border: 1px solid rgba(216, 11, 108, 0.5);
        background: rgba(216, 11, 108, 0.08);
        color: #ffc4df;
        font-size: 15px;
        font-weight: 700;
      }

      .hero h1 {
        font-size: clamp(50px, 8vw, 76px);
        line-height: 1.03;
        margin-bottom: 12px;
        letter-spacing: -1px;
      }

      .hero h1 small {
        display: block;
        font-size: clamp(22px, 6vw, 40px);
        color: var(--muted);
        margin-bottom: 10px;
        font-weight: 700;
      }

      .meta {
        color: var(--muted);
        font-size: 21px;
        line-height: 1.7;
        font-weight: 500;
      }

      .cert-box {
        margin-top: 26px;
        display: flex;
        justify-content: space-between;
        gap: 18px;
        padding: 17px 20px;
        border-radius: 20px;
        border: 1px solid rgba(217, 173, 85, 0.55);
        background: rgba(217, 173, 85, 0.07);
        color: #f4ddb0;
      }

      .rating {
        color: var(--gold);
        white-space: nowrap;
        font-weight: 800;
      }


      @media (max-width: 820px) {

        .hero {
          width: 100vw;
          margin: 0;
          border-radius: 0;
          min-height: 360px;
        }

        .logo {
          font-size: 28px;
        }

        .icon-btn {
          width: 44px;
          height: 44px;
          font-size: 22px;
        }

        .hero-inner {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 14px;
          margin-top: 28px;
        }

        .photo-wrap {
          width: 50%;
          flex-shrink: 0;
        }

        .photo-wrap::before {
          width: 190px;
          height: 190px;
        }

        .lawyer-photo {
          width: 100%;
          max-width: 170px;
          height: 235px;
        }

        .tag {
          font-size: 14px;
          padding: 6px 11px;
          margin-bottom: 15px;
        }

        .cert-box {
          margin-top: 14px;
          padding: 12px;
          border-radius: 16px;
          font-size: 12px;
          flex-direction: column;
          gap: 8px;
        }

        .rating {
          white-space: normal;
        }
      }

        @media (max-width: 390px) {
        .hero h1 {
          font-size: 30px;
        }

        .lawyer-photo {
          max-width: 145px;
          height: 215px;
        }

        .meta {
          font-size: 14px;
        }

        .cert-box {
          display: none;
        }
      }