/* ------------------------------------------------------------------
   PAGE BLOCKS
   Shared building blocks for the internal pages (buying, selling,
   rentals), which were walls of body copy in identical bordered boxes.

   Same design language as the property cards and the textured heroes:
   green #007e3f, deep green #00522a, light green #7ce0aa, navy #221e71,
   16px radii, soft green-tinted shadows.

   ICONS: Font Awesome is loaded as a KIT (SVG+JS), which replaces every
   <i> with an <svg>. Rules that target `i` alone stop matching after the
   swap, so every icon rule below names both.
   ------------------------------------------------------------------ */

.pb-section { padding: 4.5rem 0; }
.pb-section--tight { padding: 3rem 0; }
.pb-section--tint { background: linear-gradient(180deg, #f6f9f7 0%, #fff 100%); }

.pb-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* --- Section heading --- */
.pb-head { max-width: 720px; margin: 0 auto 2.75rem; text-align: center; }
.pb-head--left { margin-left: 0; text-align: left; }

.pb-eyebrow {
    display: inline-block;
    margin-bottom: .8rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: #edf6f1;
    color: #00522a;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.pb-title {
    margin: 0;
    font-size: clamp(1.5rem, 3.2vw, 2.2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #1d2b24;
}

.pb-sub {
    margin: .8rem 0 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #6a7a72;
}

/* --- Numbered process flow ---------------------------------------
   A real sequence with a connecting rule, not four identical cards
   that happen to have numbers typed into the headings.
   ------------------------------------------------------------------ */
.pb-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The rule runs behind the badges, hidden below the breakpoint where the
   steps stop sitting in one row. */
@media (min-width: 900px) {
    .pb-steps::before {
        content: '';
        position: absolute;
        top: 28px;
        left: 12%;
        right: 12%;
        height: 2px;
        background: repeating-linear-gradient(to right, #cfe3d8 0 10px, transparent 10px 18px);
        z-index: 0;
    }
}

.pb-step { position: relative; z-index: 1; text-align: center; }

.pb-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #007e3f;
    color: #007e3f;
    font-size: 1.15rem;
    font-weight: 700;
    box-shadow: 0 0 0 6px #fff, 0 6px 18px rgba(10, 47, 34, .1);
}

.pb-step h3 {
    margin: 0 0 .45rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1d2b24;
}

.pb-step p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.6;
    color: #55665e;
}

/* --- Figure band --------------------------------------------------
   Numbers on the textured dark ground, so a page of prose has one
   place the eye lands.
   ------------------------------------------------------------------ */
.pb-figures {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 3.25rem 0;
    background:
        radial-gradient(760px 420px at 82% 0%, rgba(0, 126, 63, .38), transparent 62%),
        linear-gradient(168deg, #0a3b2a 0%, #0d3b30 42%, #10233f 74%, #141034 100%);
    color: #fff;
}

.pb-figures::before,
.pb-figures::after {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
    background-color: rgba(255, 255, 255, .05);
    -webkit-mask: url('/media/svg/cpr-tree.svg') center / contain no-repeat;
    mask: url('/media/svg/cpr-tree.svg') center / contain no-repeat;
}

.pb-figures::before { left: -50px; bottom: -40px; width: 220px; height: 220px; }
.pb-figures::after  { right: -40px; top: -40px; width: 175px; height: 175px; transform: scaleX(-1); }

.pb-figure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.pb-figure-num {
    display: block;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: #7ce0aa;
}

.pb-figure-label {
    display: block;
    margin-top: .5rem;
    font-size: .9rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .82);
}

/* --- Icon feature cards --- */
.pb-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pb-card {
    padding: 1.6rem 1.5rem;
    background: #fff;
    border: 1px solid #e8ece9;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(10, 47, 34, .04), 0 8px 24px rgba(10, 47, 34, .06);
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}

.pb-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(10, 47, 34, .06), 0 16px 34px rgba(10, 47, 34, .12);
}

.pb-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1rem;
    border-radius: 13px;
    background: #edf6f1;
    color: #007e3f;
    font-size: 1.05rem;
}

.pb-card-icon i, .pb-card-icon svg { color: inherit; }

.pb-card h3 {
    margin: 0 0 .45rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1d2b24;
}

.pb-card p {
    margin: 0;
    font-size: .93rem;
    line-height: 1.6;
    color: #55665e;
}

/* --- Split: copy beside a panel --- */
.pb-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 900px) {
    .pb-split { grid-template-columns: 1fr 1fr; gap: 3rem; }
    .pb-split--wide-left { grid-template-columns: 1.15fr .85fr; }
}

.pb-prose p {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.7;
    color: #55665e;
}

.pb-prose p:last-child { margin-bottom: 0; }

/* --- Checklist --- */
.pb-checklist { list-style: none; margin: 0; padding: 0; }

.pb-checklist li {
    position: relative;
    padding-left: 2.1rem;
    margin-bottom: .85rem;
    font-size: .97rem;
    line-height: 1.6;
    color: #55665e;
}

.pb-checklist li:last-child { margin-bottom: 0; }
.pb-checklist strong { color: #1d2b24; }

/* Drawn, so it does not depend on the Font Awesome kit having loaded. */
.pb-checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .05rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #edf6f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007e3f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* --- Panel: a bordered aside for facts beside prose --- */
.pb-panel {
    padding: 1.75rem;
    background: #fff;
    border: 1px solid #e8ece9;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(10, 47, 34, .04), 0 8px 24px rgba(10, 47, 34, .06);
}

.pb-panel h3 {
    margin: 0 0 1.1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1d2b24;
}

/* --- Comparison rows --- */
.pb-compare { display: grid; gap: .55rem; }

.pb-compare-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: .8rem .95rem;
    border-radius: 12px;
    background: #f7fbf9;
    font-size: .93rem;
    color: #55665e;
}

.pb-compare-row strong { color: #1d2b24; }

.pb-compare-val {
    font-weight: 700;
    color: #007e3f;
    white-space: nowrap;
}

/* --- CTA band --- */
.pb-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 3.5rem 0;
    text-align: center;
    background:
        radial-gradient(700px 380px at 20% 0%, rgba(0, 126, 63, .4), transparent 60%),
        linear-gradient(150deg, #00522a 0%, #0a3b2a 50%, #10233f 100%);
    color: #fff;
}

.pb-cta::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -50px;
    width: 230px;
    height: 230px;
    z-index: -1;
    pointer-events: none;
    background-color: rgba(255, 255, 255, .06);
    -webkit-mask: url('/media/svg/cpr-tree.svg') center / contain no-repeat;
    mask: url('/media/svg/cpr-tree.svg') center / contain no-repeat;
}

.pb-cta h2 {
    margin: 0 0 .7rem;
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    font-weight: 700;
    color: #fff;
}

.pb-cta p {
    max-width: 620px;
    margin: 0 auto 1.75rem;
    font-size: 1.02rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
}

.pb-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

/* --- Buttons --- */
.pb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* UIkit's a:hover underline is (0,1,1); cover every state. */
a.pb-btn, a.pb-btn:hover, a.pb-btn:focus, a.pb-btn:active, a.pb-btn:visited { text-decoration: none; }

.pb-btn-primary { background: #007e3f; color: #fff; }
.pb-btn-primary:hover, .pb-btn-primary:focus { background: #00662f; color: #fff; }

.pb-cta .pb-btn-primary { background: #fff; color: #00522a; }
.pb-cta .pb-btn-primary:hover, .pb-cta .pb-btn-primary:focus { background: #eaf5ef; color: #00522a; }

.pb-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.pb-btn-ghost:hover, .pb-btn-ghost:focus { background: rgba(255, 255, 255, .14); color: #fff; }

.pb-btn-outline { background: #fff; border-color: #cfe3d8; color: #007e3f; }
.pb-btn-outline:hover, .pb-btn-outline:focus { background: #f2f8f5; border-color: #007e3f; color: #00522a; }

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