/* ============================================================
   property-management.css
   Page-specific overrides for /services/property-management
   Depends on: pearl.css + service-page.css
   Most styles live in service-page.css.
   Only property-management-specific overrides go here.
============================================================ */

/* Hero blob colours specific to this page */
.sp-blob--1 {
  background: radial-gradient(circle, rgba(199, 0, 126, 0.25), transparent 70%);
}
.sp-blob--2 {
  background: radial-gradient(circle, rgba(30, 57, 143, 0.3), transparent 70%);
}

/* Checklist card — slightly taller for 6 items */
.sp-cl-card {
  min-height: 420px;
}

/* Tenant types grid — 2 col */
.sp-tenant-types {
  margin-top: 20px;
}
.ps-hero-slant {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  line-height: 0;
}

.ps-hero-slant svg {
  display: block;
  width: 100%;
}
/* Case study — before state styling */
.sp-case-before {
  background: rgba(254, 242, 242, 0.5);
}

.sp-hc-plans {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.sp-hc-plan-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 2px solid #e8edf5;
    border-radius: 14px;
    padding: 14px 18px;
    transition: border-color .25s, box-shadow .25s, transform .2s;
}

.sp-hc-plan-row:hover {
    border-color: var(--blue);
    box-shadow: 0 6px 24px rgba(30, 57, 143, 0.10);
    transform: translateY(-2px);
}

.sp-hc-plan-row--pop {
    border-color: var(--gold, #f0b429);
    background: linear-gradient(135deg, #fffdf4 0%, #fff8e1 100%);
    box-shadow: 0 4px 18px rgba(240, 180, 41, 0.15);
}

.sp-hc-badge {
    position: absolute;
    top: -11px;
    left: 18px;
    background: linear-gradient(90deg, #f0b429, #e0940a);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.03em;
}

.sp-hc-plan-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--blue, #1e398f), var(--pink, #c7007e));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
}

.sp-hc-plan-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-hc-plan-info strong {
    font-size: 0.95rem;
    color: var(--dark);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
}

.sp-hc-plan-info span {
    font-size: 0.80rem;
    color: #666;
}

.sp-hc-get {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #25D366;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, transform .2s;
    flex-shrink: 0;
}

.sp-hc-get:hover {
    background: #1faa54;
    transform: translateY(-1px);
}

/* Promise strip */
.sp-hc-promise {
    display: flex;
    gap: 18px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.sp-hc-promise-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--blue, #1e398f);
    background: rgba(30, 57, 143, 0.07);
    border-radius: 8px;
    padding: 6px 12px;
}

.sp-hc-promise-item i {
    font-size: 0.82rem;
    color: var(--pink, #c7007e);
}

/* Bottom CTA bar */
.sp-hc-cta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(135deg, #0d1a3a 0%, #1e398f 65%, #2a0845 100%);
    border-radius: 20px;
    padding: 32px 40px;
    flex-wrap: wrap;
}

.sp-hc-cta-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-hc-cta-text strong {
    font-size: 1.25rem;
    color: #fff;
    font-family: 'Playfair Display', serif;
}

.sp-hc-cta-text span {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.72);
}

.sp-hc-cta-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 768px) {
    .sp-hc-cta-bar {
        flex-direction: column;
        text-align: center;
        padding: 28px 24px;
    }

    .sp-hc-cta-actions {
        justify-content: center;
    }

    .sp-hc-plan-row {
        flex-wrap: wrap;
    }

    .sp-hc-get {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }

    .sp-hc-promise {
        justify-content: center;
    }
}