/* ======================================
   PERSONAL SERVICES - two-column image + content sections: Post Marriage (.po), Affair (.po-affair), Spouse Cheating (.po-affair.po-spouse), Adultery and Infidelity Check (.po-affair.po-spouse.po-arrows.po-adultery), Teenager Monitoring (.po-teen), Divorce (.po-divorce), Surveillance & Shadowing (.po-surv)
   used by personal.html - every rule is scoped under .po
====================================== */

.po {
    --po-red: #f12d36;
    --po-red-dark: #d91f2a;
    --po-black: #171717;
    --po-muted: #666d7a;
    --po-pink: #fff2f3;
    --po-line: #f4e3e5;
    --po-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    position: relative;
    padding: clamp(40px, 5vw, 72px) 0;
    overflow: hidden;            /* the red shape behind the image may stick out a little */
    background:
        radial-gradient(circle at 4% 0%, rgba(241, 45, 54, 0.07), transparent 22%),
        radial-gradient(circle at 100% 100%, rgba(241, 45, 54, 0.06), transparent 24%),
        #ffffff;
    color: var(--po-black);
    font-family: "DM Sans", sans-serif;
}

.po *,
.po *::before,
.po *::after {
    box-sizing: border-box;
    font-style: normal;
}

.po-grid {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: clamp(32px, 4.4vw, 64px);
    align-items: center;
}

.po-ico {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- left: content ---- */
.po-content {
    min-width: 0;
}

.po-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--po-red);
}

.po-eyebrow::before {
    content: "";
    width: 38px;
    height: 2px;
    background: var(--po-red);
}

.po .po-title {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(34px, 4.4vw, 60px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--po-black);
}

.po-title span {
    display: block;
    color: var(--po-red);
}

.po-lead {
    max-width: 640px;
    margin: 18px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--po-muted);
}

/* ---- four service cards ---- */
.po-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.po-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    margin: 0;
    padding: 18px 18px 18px 16px;
    border: 1px solid var(--po-line);
    border-radius: 14px;
    background: linear-gradient(135deg, #ffffff 0%, #fff7f8 100%);
    transition: transform 0.3s var(--po-ease), box-shadow 0.3s ease, border-color 0.3s ease;
}

.po-card:hover {
    border-color: #efc9cd;
    box-shadow: 0 16px 30px -20px rgba(241, 45, 54, 0.5);
    transform: translateY(-3px);
}

.po-card-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: #fde8ea;
    color: var(--po-red);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.po-card-icon .po-ico {
    width: 26px;
    height: 26px;
}

.po-card:hover .po-card-icon {
    background: var(--po-red);
    color: #ffffff;
    transform: scale(1.06);
}

.po-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.po-card-text strong {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--po-black);
}

.po-card-text span {
    font-size: 14px;
    line-height: 1.5;
    color: var(--po-muted);
}

/* ---- information panel ---- */
.po-decision {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 24px);
    margin-top: 14px;
    padding: clamp(16px, 1.8vw, 20px) clamp(18px, 2.4vw, 28px);
    border: 1px solid var(--po-line);
    border-radius: 16px;
    background: var(--po-pink);
}

.po-decision-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--po-red);
    color: #ffffff;
    box-shadow: 0 0 0 7px rgba(241, 45, 54, 0.12);
}

.po-decision-icon .po-ico {
    width: 28px;
    height: 28px;
}

.po-decision-line {
    flex: 0 0 1px;
    align-self: stretch;
    background: #efc2c6;
}

.po-decision-text {
    min-width: 0;
}

.po .po-decision-text h3 {
    margin: 0 0 5px;
    font-family: "DM Sans", sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--po-red-dark);
}

.po-decision-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #5b616d;
}

/* ---- right: image card with a red shape behind it ---- */
.po-visual-wrap {
    position: relative;
    align-self: stretch;
    display: flex;
    min-height: 600px;
    padding: 10px 0 10px 0;
}

.po-visual-wrap::before {
    content: "";
    position: absolute;
    top: 7%;
    right: -18px;
    bottom: 1%;
    width: 92%;
    border-radius: 26px;
    background: linear-gradient(140deg, var(--po-red) 0%, var(--po-red-dark) 100%);
    transform: rotate(3.2deg);
    transform-origin: 100% 50%;
}

.po-visual-wrap::after {
    content: "";
    position: absolute;
    top: -26px;
    right: -28px;
    width: 96px;
    height: 96px;
    background-image: radial-gradient(var(--po-red) 1.7px, transparent 1.8px);
    background-size: 16px 16px;
    opacity: 0.4;
}

/* every card is just the photo, without the red shape and dots behind it */
.po .po-visual-wrap::before,
.po .po-visual-wrap::after {
    content: none;
}

.po-visual {
    position: relative;
    flex: 1 1 auto;
    min-height: 580px;
    margin: 0;
    overflow: hidden;
    border-radius: 22px;
    background: #0c0c0e;
    color: #ffffff;
    box-shadow: 0 26px 46px -26px rgba(23, 23, 23, 0.6);
    z-index: 1;
}

.po-visual-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 68%;
    max-width: none;
    object-fit: cover;
    object-position: 38% 50%;
    transition: transform 0.9s var(--po-ease);
}

.po-visual:hover .po-visual-img {
    transform: scale(1.04);
}

/* the photo melts into the dark area that carries the text */
.po-visual-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 12, 14, 0.25) 0%, rgba(12, 12, 14, 0) 22%, rgba(12, 12, 14, 0) 50%, #0c0c0e 68%);
}

.po-visual-copy {
    position: absolute;
    left: clamp(22px, 2.8vw, 36px);
    right: clamp(22px, 2.8vw, 36px);
    bottom: clamp(22px, 2.8vw, 34px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.po-tag {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

.po-tag::before {
    content: "";
    width: 34px;
    height: 2px;
    background: var(--po-red);
}

.po-visual-title {
    margin-top: 12px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #ffffff;
}

.po-visual-title span {
    color: var(--po-red);
}

.po-visual-sub {
    max-width: 420px;
    margin-top: 12px;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
}

/* floating badges */
.po-badge {
    position: absolute;
    right: clamp(14px, 1.8vw, 22px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 9px 10px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.5);
    color: var(--po-black);
    rotate: -3deg;
}

.po-badge-1 {
    top: 9%;
}

.po-badge-2 {
    top: 24%;
    rotate: 2deg;
}

.po-badge-3 {
    top: 39%;
    rotate: -2deg;
}

.po-badge-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--po-red);
    color: #ffffff;
}

.po-badge-icon .po-ico {
    width: 18px;
    height: 18px;
}

.po-badge-text {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
}

/* ---- responsive ---- */
@media (max-width: 1199px) {
    .po-card {
        flex-direction: column;
        gap: 12px;
    }

    .po-visual-wrap {
        min-height: 560px;
    }
}

@media (max-width: 991px) {
    .po-grid {
        grid-template-columns: 1fr;
    }

    .po-visual-wrap {
        min-height: 0;
        height: clamp(520px, 78vw, 640px);
        margin-right: 14px;
    }

    .po-visual-wrap::before {
        right: -14px;
    }

    .po .po-visual-wrap {
        margin-right: 0;
    }

    .po-card {
        flex-direction: row;
    }
}

@media (max-width: 575px) {
    .po-cards {
        grid-template-columns: 1fr;
    }

    .po-visual-wrap {
        height: 560px;
    }

    .po-visual {
        min-height: 0;
        border-radius: 18px;
    }

    .po-visual-img {
        height: 60%;
    }

    .po-visual-shade {
        background: linear-gradient(180deg, rgba(12, 12, 14, 0.25) 0%, rgba(12, 12, 14, 0) 22%, rgba(12, 12, 14, 0) 42%, #0c0c0e 60%);
    }

    .po-badge {
        padding: 7px 12px 7px 8px;
    }

    .po-badge-icon {
        width: 30px;
        height: 30px;
    }

    .po-badge-text {
        font-size: 11.5px;
    }

    .po-decision {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .po-decision-line {
        display: none;
    }

    .po-decision-text {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .po-visual-img,
    .po-card,
    .po-card-icon {
        transition: none;
    }

    .po-visual:hover .po-visual-img,
    .po-card:hover {
        transform: none;
    }
}

/* ======================================
   AFFAIR INVESTIGATION (.po.po-affair): same layout, three cards in a row, full-height photo
====================================== */

.po-affair {
    background:
        radial-gradient(circle at 98% 0%, rgba(241, 45, 54, 0.07), transparent 24%),
        radial-gradient(circle at 0% 100%, rgba(241, 45, 54, 0.06), transparent 26%),
        #fcf9f9;
}

.po-affair .po-title span {
    display: inline;
}

.po-affair .po-lead {
    max-width: 740px;
}

.po-affair .po-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.po-affair .po-card {
    flex-direction: column;
    gap: 12px;
    padding: 18px 16px 16px;
}

/* the photo fills the card; the dark area at the bottom carries the text */
.po-affair .po-visual-img {
    height: 100%;
    object-position: 75% 40%;
}

.po-affair .po-visual-shade {
    background: linear-gradient(180deg, rgba(12, 12, 14, 0.25) 0%, rgba(12, 12, 14, 0) 24%, rgba(12, 12, 14, 0.1) 46%, rgba(12, 12, 14, 0.88) 74%, #0c0c0e 100%);
}

/* red shape peeking out at the top left, mirrored from the Post Marriage section */
.po-affair .po-visual-wrap::before {
    top: 1%;
    right: auto;
    bottom: auto;
    left: -18px;
    width: 46%;
    height: 34%;
    transform: rotate(-3.2deg);
    transform-origin: 0 100%;
}

.po-affair .po-visual-wrap::after {
    top: auto;
    right: auto;
    bottom: -24px;
    left: -26px;
}

/* translucent badges, placed clear of the people and of the text */
.po-affair .po-badge {
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    rotate: 0deg;
}

.po-affair .po-badge-1 {
    top: 6%;
    right: auto;
    left: clamp(14px, 1.8vw, 22px);
}

.po-affair .po-badge-2 {
    top: 20%;
    rotate: 0deg;
}

.po-affair .po-badge-3 {
    top: 34%;
    right: auto;
    left: clamp(14px, 1.8vw, 22px);
    rotate: 0deg;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .po-affair .po-cards {
        gap: 10px;
    }

    .po-affair .po-card {
        padding: 14px 12px;
    }

    .po-affair .po-card-text strong {
        font-size: 15px;
    }

    .po-affair .po-card-text span {
        font-size: 13px;
    }
}

@media (max-width: 575px) {
    .po-affair .po-cards {
        grid-template-columns: 1fr;
    }

    .po-affair .po-card {
        flex-direction: row;
        gap: 16px;
        padding: 16px;
    }

    .po-affair .po-visual-img {
        height: 100%;
    }

    .po-affair .po-visual-shade {
        background: linear-gradient(180deg, rgba(12, 12, 14, 0.25) 0%, rgba(12, 12, 14, 0) 22%, rgba(12, 12, 14, 0.1) 40%, rgba(12, 12, 14, 0.88) 66%, #0c0c0e 100%);
    }
}

/* AFFAIR: image on the left, content on the right (desktop only; below 992px the content stays first, image second) */
@media (min-width: 992px) {
    .po-affair {
        background:
            radial-gradient(circle at 2% 0%, rgba(241, 45, 54, 0.07), transparent 24%),
            radial-gradient(circle at 100% 100%, rgba(241, 45, 54, 0.06), transparent 26%),
            #fcf9f9;
    }

    .po-affair .po-grid {
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    }

    .po-affair .po-visual-wrap {
        order: -1;
    }

    /* the red shape and the dots move to the side that faces the text */
    .po-affair .po-visual-wrap::before {
        right: -18px;
        left: auto;
        transform: rotate(3.2deg);
        transform-origin: 100% 100%;
    }

    .po-affair .po-visual-wrap::after {
        right: -26px;
        left: auto;
    }
}

/* ======================================
   SPOUSE CHEATING (.po.po-affair.po-spouse): image left like Affair, with its own overlay
   (confidential pill, two-line headline, magnifier circle)
====================================== */

.po-spouse {
    background:
        radial-gradient(circle at 2% 0%, rgba(241, 45, 54, 0.07), transparent 24%),
        radial-gradient(circle at 100% 100%, rgba(241, 45, 54, 0.06), transparent 26%),
        #ffffff;
}

.po-spouse .po-lead + .po-lead {
    margin-top: 12px;
}

.po-spouse .po-visual-img {
    object-position: 70% 50%;
}

/* phones: the card is narrower, so frame the woman at the door and the man */
@media (max-width: 575px) {
    .po-spouse .po-visual-img {
        object-position: 42% 50%;
    }
}

.po-spouse .po-visual-shade {
    background: linear-gradient(180deg, rgba(12, 12, 14, 0.2) 0%, rgba(12, 12, 14, 0) 26%, rgba(12, 12, 14, 0.12) 40%, rgba(12, 12, 14, 0.9) 72%, #0c0c0e 100%);
}

/* red pill with a lock */
.po-spouse .po-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 12px;
    border-radius: 999px;
    background: var(--po-red);
    box-shadow: 0 10px 22px -10px rgba(241, 45, 54, 0.85);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #ffffff;
}

.po-spouse .po-pill .po-ico {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
}

.po-spouse .po-visual-title {
    margin-top: 14px;
}

.po-spouse .po-rule {
    width: 52px;
    height: 3px;
    margin: 14px 0 12px;
    border-radius: 2px;
    background: var(--po-red);
}

/* magnified detail near the top of the photo: the walking figure, in grey, with a ring and a red marker */
.po-lens {
    position: absolute;
    top: 6%;
    left: 36%;
    z-index: 2;
    width: clamp(96px, 10.5vw, 148px);
    aspect-ratio: 1;
}

.po-lens::before {
    content: "";
    position: absolute;
    inset: -14px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
}

.po-lens::after {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    border-radius: 50%;
    background: var(--po-red);
    box-shadow: 0 0 0 3px rgba(241, 45, 54, 0.3);
}

.po-lens-in {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #1a1a1e;
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.6);
}

.po-lens-in img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 0% 50%;
    transform-origin: 40.6% 52%;
    transform: translate(9.4%, -2%) scale(2.1);
    filter: grayscale(1) contrast(0.9) brightness(1.3);
}

@media (max-width: 1199px) {
    .po-lens {
        left: auto;
        right: 9%;
    }
}

@media (max-width: 575px) {
    .po-lens {
        top: 5%;
        right: 10%;
        width: 88px;
    }

    .po-spouse .po-visual-shade {
        background: linear-gradient(180deg, rgba(12, 12, 14, 0.2) 0%, rgba(12, 12, 14, 0) 24%, rgba(12, 12, 14, 0.12) 36%, rgba(12, 12, 14, 0.9) 62%, #0c0c0e 100%);
    }
}

/* ======================================
   ADULTERY AND INFIDELITY CHECK (.po-adultery, on top of .po-affair.po-spouse):
   heading on two lines, four wide cards with an arrow, uppercase overlay headline
====================================== */

.po-adultery {
    background:
        radial-gradient(circle at 2% 0%, rgba(241, 45, 54, 0.07), transparent 24%),
        radial-gradient(circle at 100% 100%, rgba(241, 45, 54, 0.06), transparent 26%),
        #fcf9f9;
}

.po-adultery .po-title span {
    display: block;
}

.po-adultery .po-visual-img {
    object-position: 50% 20%;
}

.po-adultery .po-visual-title {
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.po-arrows .po-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.po-arrows .po-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px 16px 14px 14px;
}

.po-arrows .po-card-icon {
    width: 54px;
    height: 54px;
}

.po-arrows .po-card-text {
    flex: 1 1 auto;
}

.po-arrow {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fde8ea;
    color: var(--po-red);
    transition: transform 0.3s var(--po-ease), background-color 0.3s ease, color 0.3s ease;
}

.po-arrow .po-ico {
    width: 14px;
    height: 14px;
    stroke-width: 2.2;
}

.po-arrows .po-card:hover .po-arrow {
    background: var(--po-red);
    color: #ffffff;
    transform: translateX(4px);
}

/* the content column is narrow here: smaller icon, no arrow */
@media (min-width: 992px) and (max-width: 1199px) {
    .po-arrows .po-card {
        gap: 12px;
        padding: 12px;
    }

    .po-arrows .po-card-icon {
        width: 46px;
        height: 46px;
    }

    .po-arrows .po-arrow {
        display: none;
    }
}

@media (max-width: 575px) {
    .po-arrows .po-cards {
        grid-template-columns: 1fr;
    }

    .po-arrows .po-card {
        padding: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .po-arrow {
        transition: none;
    }

    .po-arrows .po-card:hover .po-arrow {
        transform: none;
    }
}

/* ======================================
   TEENAGER MONITORING (.po-teen, on top of .po-affair.po-spouse): the eye photo is toned to grey with a faint red tint
====================================== */

.po-teen .po-visual-img {
    object-position: 12% 50%;
}

.po-teen .po-visual-shade {
    background:
        linear-gradient(180deg, rgba(12, 12, 14, 0.25) 0%, rgba(12, 12, 14, 0) 24%, rgba(12, 12, 14, 0.12) 42%, rgba(12, 12, 14, 0.9) 74%, #0c0c0e 100%);
}

.po-teen .po-pill .po-ico {
    width: 17px;
    height: 17px;
}

/* ======================================
   DIVORCE (.po-divorce, on top of .po): content left, image right (no overlay text), two plain feature items
====================================== */

.po-divorce {
    background:
        radial-gradient(circle at 0% 100%, rgba(241, 45, 54, 0.07), transparent 26%),
        radial-gradient(circle at 100% 0%, rgba(241, 45, 54, 0.06), transparent 24%),
        #fcf9f9;
}

.po-divorce .po-title span {
    display: inline;
}

.po-divorce .po-lead {
    max-width: 800px;
}

.po-divorce .po-visual-img {
    height: 100%;
    object-position: 50% 50%;
}

.po-divorce .po-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px clamp(16px, 2.4vw, 32px);
    margin-top: 18px;
}

.po-divorce .po-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 6px 0;
    border-color: transparent;
    border-radius: 14px;
    background: none;
}

.po-divorce .po-card:hover {
    box-shadow: none;
    transform: translateY(-2px);
}

.po-divorce .po-card-icon {
    width: 54px;
    height: 54px;
}

@media (max-width: 575px) {
    .po-divorce .po-cards {
        grid-template-columns: 1fr;
    }
}

/* ======================================
   SURVEILLANCE & SHADOWING (.po-surv, on top of .po-affair.po-spouse.po-arrows): long text, case-board photo
====================================== */

.po-surv .po-lead {
    max-width: 860px;
}

.po-surv .po-visual-img {
    object-position: 100% 50%;
}

.po-surv .po-visual-title {
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.1;
}

/* IMAGE-FIRST: on phones and tablets the sections with the image on the left (Spouse Cheating, Adultery, Teenager Monitoring,
   Surveillance & Shadowing) show the image above the text; Post Marriage, Affair and Divorce keep the text first */
.po-spouse .po-visual-wrap {
    order: -1;
}

/* Surveillance has a lot of text: on desktop the two paragraphs scroll inside their own box (thin red
   scrollbar) so the whole section fits one viewport below the fixed navbar, and the photo matches
   the height of the content column. Tablets and phones show all the text. */
@media (min-width: 992px) {
    .po-surv {
        padding: clamp(28px, 4.5vh, 56px) 0;
    }

    .po-surv .po-title span {
        display: inline;
    }

    .po-surv .po-scroll {
        max-width: 860px;
        max-height: clamp(130px, calc(100vh - 560px), 420px);
        margin-top: 14px;
        padding-right: 16px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--po-red) rgba(0, 0, 0, 0.08);
    }

    .po-surv .po-scroll::-webkit-scrollbar {
        width: 5px;
    }

    .po-surv .po-scroll::-webkit-scrollbar-track {
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.08);
    }

    .po-surv .po-scroll::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: var(--po-red);
    }

    /* fade at the bottom edge while there is more to read; at the end it sits in its own empty space */
    .po-surv .po-scroll::after {
        content: "";
        position: sticky;
        bottom: 0;
        display: block;
        height: 28px;
        pointer-events: none;
        background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
    }

    .po-surv .po-scroll:focus-visible {
        outline: 2px solid var(--po-red);
        outline-offset: 6px;
        border-radius: 4px;
    }

    .po-surv .po-scroll .po-lead:first-child {
        margin-top: 0;
    }

    .po-surv .po-scroll .po-lead {
        margin-top: 12px;
    }

    .po-surv .po-eyebrow {
        margin-bottom: 8px;
    }

    .po-surv .po-title {
        font-size: clamp(34px, 3.3vw, 50px);
    }

    .po-surv .po-cards {
        gap: 10px;
        margin-top: 8px;
    }

    .po-surv .po-card {
        padding: 10px 14px 10px 10px;
    }

    .po-surv .po-card-icon {
        width: 44px;
        height: 44px;
        border-radius: 11px;
    }

    .po-surv .po-card-icon .po-ico {
        width: 22px;
        height: 22px;
    }

    .po-surv .po-card-text strong {
        font-size: 15px;
    }

    .po-surv .po-card-text span {
        font-size: 13px;
        line-height: 1.4;
    }

    .po-surv .po-decision {
        margin-top: 10px;
        padding: 12px 20px;
    }

    .po-surv .po-decision-icon {
        width: 46px;
        height: 46px;
        box-shadow: 0 0 0 5px rgba(241, 45, 54, 0.12);
    }

    .po-surv .po-decision-icon .po-ico {
        width: 22px;
        height: 22px;
    }

    .po-surv .po-decision-text h3 {
        margin-bottom: 2px;
        font-size: 17px;
    }

    .po-surv .po-decision-text p {
        font-size: 13px;
        line-height: 1.45;
    }

    .po-surv .po-visual-wrap,
    .po-surv .po-visual {
        min-height: 0;
    }
}

/* short laptop screens: the cards keep their titles only and the panel its heading (both repeat the
   paragraphs), which gives the paragraph box back enough height to stay readable */
@media (min-width: 992px) and (max-height: 760px) {
    .po-surv .po-card-text span,
    .po-surv .po-decision-text p {
        display: none;
    }

    .po-surv .po-scroll {
        max-height: clamp(130px, calc(100vh - 500px), 420px);
    }
}

/* SPOUSE CHEATING with the image on the RIGHT (.po-right, desktop only): text left 55%, image right 45%;
   the red shape moves to the top-left corner of the photo and the dots to its bottom-left */
@media (min-width: 992px) {
    .po-spouse.po-right {
        background:
            radial-gradient(circle at 98% 0%, rgba(241, 45, 54, 0.07), transparent 24%),
            radial-gradient(circle at 0% 100%, rgba(241, 45, 54, 0.06), transparent 26%),
            #ffffff;
    }

    .po-spouse.po-right .po-grid {
        grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    }

    .po-spouse.po-right .po-visual-wrap {
        order: 0;
    }

    .po-spouse.po-right .po-visual-wrap::before {
        top: 1%;
        right: auto;
        bottom: auto;
        left: -18px;
        width: 46%;
        height: 34%;
        transform: rotate(-3.2deg);
        transform-origin: 0 100%;
    }

    .po-spouse.po-right .po-visual-wrap::after {
        top: auto;
        right: auto;
        bottom: -24px;
        left: -26px;
    }
}

/* DIVORCE with the image on the LEFT (.po-left, desktop only): image 45%, text 55%;
   the red shape moves to the top-right corner of the photo and the dots to its bottom-right.
   Below 992px the text still comes first. */
@media (min-width: 992px) {
    .po-divorce.po-left {
        background:
            radial-gradient(circle at 100% 100%, rgba(241, 45, 54, 0.07), transparent 26%),
            radial-gradient(circle at 0% 0%, rgba(241, 45, 54, 0.06), transparent 24%),
            #fcf9f9;
    }

    .po-divorce.po-left .po-grid {
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    }

    .po-divorce.po-left .po-visual-wrap {
        order: -1;
    }

    .po-divorce.po-left .po-visual-wrap::before {
        top: 1%;
        right: -18px;
        bottom: auto;
        left: auto;
        width: 46%;
        height: 34%;
        transform: rotate(3.2deg);
        transform-origin: 100% 100%;
    }

    .po-divorce.po-left .po-visual-wrap::after {
        top: auto;
        right: -26px;
        bottom: -24px;
        left: auto;
    }
}

/* ======================================
   PERSONAL DETECTIVE SERVICES IN MUMBAI (local SEO Q&A, after Surveillance)
   heading + 5 question cards in a 3 + 2 grid + a red call strip. Scoped under .pfq;
   uses the site's plain .container for the navbar edges.
====================================== */

.pfq {
    --pfq-red: #f12d36;
    --pfq-red-dark: #d91f2a;
    --pfq-black: #171717;
    --pfq-muted: #666d7a;
    --pfq-pink: #fff2f3;
    --pfq-line: #f4e3e5;
    padding: clamp(36px, 6vh, 64px) 0;
    background: linear-gradient(180deg, #fff7f8 0%, #ffffff 60%);
    color: var(--pfq-black);
    font-family: "DM Sans", sans-serif;
}

.pfq-head {
    max-width: 900px;
    margin: 0 auto clamp(18px, 3vh, 28px);
    text-align: center;
}

.pfq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pfq-red);
}

.pfq-eyebrow i {
    display: block;
    width: 38px;
    height: 2px;
    background: var(--pfq-red);
}

.pfq-title {
    margin: 0 0 10px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(30px, min(3.4vw, 5.8vh), 46px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--pfq-black);
}

.pfq-title em {
    font-style: normal;
    color: var(--pfq-red);
}

.pfq-lead {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--pfq-muted);
}

/* 3 cards on the first row, 2 wider ones on the second */
.pfq-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.pfq-card {
    grid-column: span 2;
    position: relative;
    padding: clamp(16px, 2.6vh, 24px) 24px clamp(18px, 2.8vh, 26px);
    border: 1px solid var(--pfq-line);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 30px -22px rgba(23, 23, 23, 0.35);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.pfq-card:nth-child(n + 4) {
    grid-column: span 3;
}

.pfq-card:hover {
    border-color: rgba(241, 45, 54, 0.4);
    box-shadow: 0 16px 34px -20px rgba(241, 45, 54, 0.45);
    transform: translateY(-3px);
}

.pfq-q {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--pfq-pink);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    color: var(--pfq-red);
}

.pfq-card-h {
    margin: 0 0 8px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--pfq-black);
}

.pfq-card-p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--pfq-muted);
}

.pfq-card-p a {
    color: var(--pfq-black);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--pfq-red);
    text-underline-offset: 3px;
}

.pfq-card-p a:hover,
.pfq-card-p a:focus {
    color: var(--pfq-red);
}

/* ---- call strip ---- */
.pfq-call {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 30px;
    padding: clamp(14px, 2.4vh, 22px) 28px;
    border-radius: 10px;
    background: linear-gradient(140deg, var(--pfq-red) 0%, var(--pfq-red-dark) 100%);
    color: #ffffff;
}

.pfq-call-text strong {
    display: block;
    margin-bottom: 2px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.pfq-call-text span {
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}

.pfq-call-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pfq-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border: 1px solid #ffffff;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.pfq-btn-light {
    background: #ffffff;
    color: var(--pfq-red);
}

.pfq-btn-light:hover,
.pfq-btn-light:focus {
    background: var(--pfq-black);
    border-color: var(--pfq-black);
    color: #ffffff;
}

.pfq-btn-ghost {
    background: transparent;
    color: #ffffff;
}

.pfq-btn-ghost:hover,
.pfq-btn-ghost:focus {
    background: #ffffff;
    color: var(--pfq-red);
}

/* desktop: the Q badge sits beside the question instead of above it */
@media (min-width: 992px) {
    .pfq-card {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
        align-content: start;
    }
    .pfq-q {
        margin: 0;
        align-self: start;
    }
    .pfq-card-h {
        margin: 0;
    }
    .pfq-card-p {
        grid-column: 1 / -1;
        margin-top: 10px;
    }
}

/* short laptop screens */
@media (min-width: 992px) and (max-height: 860px) {
    .pfq-lead {
        font-size: 14.5px;
        line-height: 1.55;
    }
    .pfq-card-h {
        font-size: 19px;
    }
    .pfq-card-p {
        line-height: 1.55;
    }
}

/* tablets and phones: the five question cards become one swipeable row */
@media (max-width: 991px) {
    .pfq {
        padding: 48px 0;
    }
    .pfq-head {
        margin-bottom: 22px;
    }
    .pfq-grid {
        display: flex;
        gap: 14px;
        margin: 0 -27px 16px;
        padding: 0 27px 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 27px;
        scrollbar-width: none;
    }
    .pfq-grid::-webkit-scrollbar {
        display: none;
    }
    .pfq-card {
        flex: 0 0 min(380px, 78%);
        scroll-snap-align: start;
    }
    .pfq-card:hover {
        transform: none;
    }
}

@media (max-width: 767px) {
    .pfq-head {
        text-align: left;
    }
    .pfq-card,
    .pfq-call {
        padding: 20px 18px;
    }
    .pfq-card {
        flex-basis: 84%;
    }
    .pfq-call-text strong {
        font-size: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pfq-card,
    .pfq-btn {
        transition: none;
    }
    .pfq-card:hover {
        transform: none;
    }
}