/* ==========================================================================
   KEY FACTS / OVERVIEW SECTION
   Ported from the reference landing page (manaprojects.com/nri-official).
   Markup lives in index.php: section.nri-sec#about-section
   ========================================================================== */

/* The reference sets its body type in Futura. The template already ships two
   Futura faces in /font, so point the --sans tokens at them instead of falling
   back to Lato/Montserrat. Delete this block to go back to the fallbacks. */
@font-face {
    font-family: 'futura-light';
    src: url('../../../font/FuturaBookBT.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'futura-medium-bt';
    src: url('../../../font/FUTURA%20BK%20BT%20BOOK.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- override the legacy #about-section rule in template.css (line ~5288),
       which collapses this section to 15px padding. ID specificity, so it must
       be matched.
       The -37px margin-top is kept deliberately: the banner carousel (.cust-top,
       template.css ~6254) carries margin-bottom:37px, and this negative margin is
       what cancels it. Drop it and a 37px band of bare body background opens up
       between the banner and this section. Breathing room comes from padding. --- */
#about-section.nri-sec {
    margin-top: -37px;
    padding: 100px 0 84px;
    background: var(--mana-cream);
}

/* template.css pins these two to `padding: 15px 0` by id (~4609 and ~5433), so
   the sections end up almost touching. Match the id specificity to restore the
   section rhythm. */
#section-id-1507611941.nri-sec,
#section-id-1507611947.nri-sec {
    padding: 90px 0;
    background: var(--mana-cream);
}

@media (max-width: 991px) {
    #about-section.nri-sec {
        padding: 70px 0 62px;
    }

    #section-id-1507611941.nri-sec,
    #section-id-1507611947.nri-sec {
        padding: 64px 0;
    }
}

@media (max-width: 767px) {
    #about-section.nri-sec {
        padding: 55px 0 48px;
    }

    #section-id-1507611941.nri-sec,
    #section-id-1507611947.nri-sec {
        padding: 50px 0;
    }
}

/* --- palette ---
   primary   = gold, matching the site's existing Enquire Now / I'm Interested buttons
   secondary = the cream ground from the "One city. Four ways to feel at home" banner
   Everything below is expressed through these tokens, so retheming means
   editing this block and nothing else. */
.nri-sec {
    /* gold — the fill matches the site's existing Enquire Now / I'm Interested
       buttons. --mana-gold-ink is the same hue taken darker, for anywhere the
       gold has to be *text*: at 1.7:1 on cream the fill tone is unreadable. */
    --mana-accent: #e0c588;
    --mana-accent-hv: #cfae63;
    --mana-gold-ink: #8a6d24;
    --mana-on-accent: #2a2420;
    --mana-cream: #f7f1e8;
    --mana-cream-dk: #efe5d7;

    --mana-maroon: #2a2420;
    --mana-maroon-dk: #1c1815;
    --mana-body: #5c544c;
    --mana-muted: #8c8177;
    --mana-line: #e2d9cc;
    --mana-white: #ffffff;
    --serif: 'JoaneRegular', 'Optima', 'Times New Roman', Georgia, serif;
    --sans: 'futura-light', 'Lato', 'Helvetica Neue', Arial, sans-serif;
    --sans-md: 'futura-medium-bt', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

/* --- shell --- */
.nri-sec {
    padding: 84px 0;
    background: var(--mana-white);
}

.nri-wrap {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- type --- */
.nri-sec .nri-h {
    font-family: var(--serif);
    font-weight: normal;
    color: var(--mana-maroon);
    font-size: 46px;
    line-height: 1.22;
    letter-spacing: -.2px;
    margin: 0 0 26px;
}

.nri-sec .nri-p {
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.85;
    color: var(--mana-body);
    margin: 0 0 20px;
}

.nri-sec .nri-p:last-child {
    margin-bottom: 0;
}

/* eyebrow — small caps with a hairline running off to the right */
.nri-sec .nri-eyebrow {
    display: flex;
    align-items: center;
    font-family: var(--sans-md);
    font-size: 14px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--mana-gold-ink);
    margin: 0 0 22px;
}

.nri-sec .nri-eyebrow:after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--mana-line);
    margin-left: 22px;
}

/* --- key facts split --- */
.nri-factsplit {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.nri-factsplit-head {
    width: 42%;
    padding-right: 70px;
}

.nri-factsplit-list {
    width: 58%;
    border-top: 1px solid var(--mana-line);
}

.nri-factrow {
    display: flex;
    align-items: baseline;
    gap: 28px;
    padding: 30px 0;
    border-bottom: 1px solid var(--mana-line);
    transition: padding-left .3s ease;
}

.nri-factrow:hover {
    padding-left: 10px;
}

.nri-factrow-no {
    font-family: var(--sans-md);
    font-size: 12px;
    letter-spacing: 2.5px;
    color: var(--mana-muted);
    width: 30px;
    flex: none;
}

.nri-factrow-key {
    font-family: var(--serif);
    font-size: 27px;
    line-height: 1.15;
    color: var(--mana-maroon);
    width: 190px;
    flex: none;
}

.nri-factrow-val {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.75;
    color: var(--mana-body);
    flex: 1;
}

/* --- responsive --- */
@media (max-width: 1199px) {
    .nri-sec .nri-h {
        font-size: 40px;
    }
}

@media (max-width: 991px) {
    .nri-sec {
        padding: 62px 0;
    }

    .nri-sec .nri-h {
        font-size: 34px;
    }

    .nri-factsplit-head,
    .nri-factsplit-list {
        width: 100%;
        padding-right: 0;
    }

    .nri-factsplit-list {
        margin-top: 34px;
    }
}

@media (max-width: 767px) {
    .nri-sec {
        padding: 48px 0;
    }

    .nri-wrap {
        padding: 0 22px;
    }

    .nri-sec .nri-h {
        font-size: 28px;
        margin-bottom: 20px;
    }

    /* fact rows: number in its own column, value and copy stacked beside it */
    .nri-factrow {
        display: grid;
        grid-template-columns: 34px 1fr;
        column-gap: 14px;
        row-gap: 4px;
        align-items: baseline;
        padding: 22px 0;
    }

    .nri-factrow-no {
        grid-column: 1;
        grid-row: 1;
        width: auto;
    }

    .nri-factrow-key {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        font-size: 23px;
    }

    .nri-factrow-val {
        grid-column: 2;
        grid-row: 2;
        width: auto;
        font-size: 15px;
    }

    .nri-factrow:hover {
        padding-left: 0;
    }
}

/* ==========================================================================
   OUR PROJECTS — card grid
   Ported from the same reference landing page (.nri-proj* rules).
   Markup lives in index.php: section.nri-sec#section-id-1507611941
   ========================================================================== */

.nri-sec-head {
    max-width: 800px;
    margin: 0 auto 50px;
}

.nri-center {
    text-align: center;
}

/* centred eyebrow gets a rule on both sides */
.nri-sec .nri-center .nri-eyebrow {
    justify-content: center;
}

.nri-sec .nri-center .nri-eyebrow:before,
.nri-sec .nri-center .nri-eyebrow:after {
    content: "";
    width: 90px;
    flex: none;
    height: 1px;
    background: var(--mana-line);
}

.nri-sec .nri-center .nri-eyebrow:before {
    margin-right: 22px;
}

.nri-sec .nri-center .nri-eyebrow:after {
    margin-left: 22px;
}

.nri-projwrap {
    display: block;
}

/* 4 cards carrying a tag, headline and paragraph need more width than the
   reference's 3-up grid gives them, so they sit 2-up and fall to 1 on mobile. */
.nri-projgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.nri-proj {
    background: var(--mana-white);
    border: 0;
    border-radius: 0;
    box-shadow: 2px 2px 11px rgba(51, 35, 31, .28);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
    transition: ease all .5s;
}

.nri-proj:hover {
    border: 0;
    box-shadow: 2px 2px 18px rgba(51, 35, 31, .4);
}

.nri-proj-imglink,
.nri-proj-imglink:hover,
.nri-proj-imglink:focus,
.nri-proj-imglink:active {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.nri-proj-media {
    position: relative;
    overflow: hidden;
}

.nri-proj-media img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: none;
}

/* tag plate sits on the image */
.nri-proj-tag {
    position: absolute;
    left: 0;
    bottom: 30px;
    background: var(--mana-accent);
    color: var(--mana-on-accent);
    font-family: var(--sans-md);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 12px;
}

/* white detail panel lifts over the image */
.nri-proj-details {
    position: relative;
    width: 100%;
    background: var(--mana-white);
    margin-top: -30px;
    padding: 22px 22px 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* project name — outlined plate: black rule, no fill */
.nri-proj-name {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 7px 10px;
    text-align: center;
    color: var(--mana-maroon);
    border: 1px solid var(--mana-line);
    border-radius: 6px;
    font-family: var(--sans-md);
    font-size: 13px;
    line-height: 1.3;
}

/* per-card headline */
.nri-proj-head {
    font-family: var(--serif);
    font-weight: normal;
    font-size: 19px;
    line-height: 1.25;
    color: var(--mana-maroon);
    margin: 0 0 9px;
}

.nri-proj-copy {
    font-family: var(--sans);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--mana-body);
    margin: 0 0 14px;
}

/* label / value rows */
.nri-proj-inner {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    border-bottom: 1px solid var(--mana-line);
    color: var(--mana-body);
    font-size: 12px;
}

.nri-proj-k {
    float: none;
    margin: 4px 0;
    font-family: var(--sans-md);
    font-size: 11.5px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--mana-muted);
    white-space: nowrap;
}

.nri-proj-v {
    text-align: right;
    margin: 4px 0;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--mana-maroon-dk, #33231f);
}

.nri-proj-v.is-rera {
    font-size: 10px;
    letter-spacing: .2px;
    word-break: break-all;
}

.nri-proj-v.is-price {
    font-weight: 700;
    letter-spacing: .5px;
    font-size: 13px;
}

/* campaign hook line under the rows */
.nri-proj-hook {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--mana-gold-ink);
    text-align: center;
    margin: 12px 0 0;
}

/* CTAs — Book an Appointment (solid) + Download Brochure (outline) */
.nri-proj-enqparent {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 14px 0;
}

.nri-proj-enqbtn {
    margin: 0;
    flex: 1;
}

.nri-proj-clickhere {
    display: block;
    width: 100%;
    border: 1px solid var(--mana-gold-ink);
    border-radius: 6px;
    color: var(--mana-gold-ink);
    background: transparent;
    padding: 9px 6px;
    text-align: center;
    font-family: var(--sans-md);
    font-size: 11px;
    letter-spacing: .8px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.nri-proj-clickhere:hover,
.nri-proj-clickhere:focus,
.nri-proj-clickhere:active {
    background: var(--mana-accent);
    color: var(--mana-on-accent);
    text-decoration: none;
    outline: none;
}

.nri-proj-clickhere.is-solid {
    background: var(--mana-accent);
    border-color: var(--mana-accent);
    color: var(--mana-on-accent);
}

.nri-proj-clickhere.is-solid:hover,
.nri-proj-clickhere.is-solid:focus,
.nri-proj-clickhere.is-solid:active {
    background: var(--mana-accent-hv);
    border-color: var(--mana-accent-hv);
    color: var(--mana-on-accent);
    text-decoration: none;
}

@media (max-width: 991px) {
    .nri-sec-head {
        margin-bottom: 40px;
    }

    .nri-proj-head {
        font-size: 17px;
    }
}

@media (max-width: 767px) {
    .nri-projgrid {
        grid-template-columns: 1fr;
    }

    .nri-proj-details {
        padding: 18px 18px 0;
    }

    .nri-proj-media img {
        height: 200px;
    }

    .nri-proj-clickhere {
        font-size: 11px;
        padding: 10px 6px;
    }

    .nri-sec .nri-center .nri-eyebrow:before,
    .nri-sec .nri-center .nri-eyebrow:after {
        width: 30px;
    }
}

/* ==========================================================================
   ABOUT US + ENQUIRY — split copy / form card
   Ported from the same reference landing page (.nri-contact-* / .nri-formcard).
   Markup lives in index.php: section.nri-sec#section-id-1507611947
   ========================================================================== */

.nri-contact-split {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.nri-contact-left {
    width: 48%;
    padding-right: 60px;
    /* the form card is taller than the copy; centre the copy against it rather
       than leaving it hanging off the top */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nri-contact-right {
    width: 52%;
}

.nri-formcard {
    background: var(--mana-white);
    border: 1px solid var(--mana-line);
    padding: 52px 48px 50px;
}

.nri-formcard-title {
    font-family: var(--serif);
    font-weight: normal;
    color: var(--mana-maroon);
    font-size: 32px;
    line-height: 1.25;
    margin: 0 0 12px;
}

.nri-formcard-sub {
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.75;
    color: var(--mana-body);
    margin: 0 0 34px;
}

/* template.css ~4444 carries a site-wide `label { color: red; position: absolute }`,
   which drops every label on top of its own field instead of above it. Undo it
   for the form-card labels only, so the rest of the site's forms are untouched. */
.nri-formcard .nri-flabel,
.nri-contactform .nri-flabel {
    position: static;
    width: 100%;
    float: none;
}

.nri-flabel {
    display: block;
    font-family: var(--sans-md);
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--mana-muted);
    margin: 0 0 10px;
}

.nri-contactform .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -14px;
}

.nri-contactform .nri-col {
    width: 50%;
    padding: 0 14px;
}

.nri-contactform .nri-col-full {
    width: 100%;
    padding: 0 14px;
}

/* beats the template's own "#contact-form .form-group{width:100%;height:40px}" */
#contact-form.nri-contactform .form-group,
.nri-formcard .form-group,
.nri-contactform .form-group {
    width: 100%;
    height: auto;
    float: none;
    margin: 0 0 26px;
    padding: 0;
}

#contact-form.nri-contactform .form-control,
.nri-formcard .form-control,
.nri-contactform .form-control {
    height: 52px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--mana-line);
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none;
    padding: 0;
    font-family: var(--sans);
    font-size: 17px;
    color: var(--mana-maroon);
    transition: border-color .2s ease;
}

#contact-form.nri-contactform .form-control:focus,
.nri-formcard .form-control:focus,
.nri-contactform .form-control:focus {
    border-bottom-color: var(--mana-gold-ink);
    box-shadow: none;
    outline: 0;
}

#contact-form.nri-contactform .form-control::placeholder,
.nri-formcard .form-control::placeholder,
.nri-contactform .form-control::placeholder {
    color: #b4aea7;
}

/* ---------- project select ----------
   The underlined field style above is written for inputs, so the native select
   chrome is dropped and rebuilt: a soft sand well that keeps the underline of
   its sibling fields, a thin chevron of our own, and a maroon accent that only
   appears once the field is engaged. */
#contact-form.nri-contactform select.form-control,
.nri-formcard select.form-control,
.nri-contactform select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 52px;
    padding: 0 42px 0 14px;
    cursor: pointer;
    color: var(--mana-maroon);
    background-color: var(--mana-cream);
    border-bottom: 1px solid var(--mana-line);
    border-radius: 3px 3px 0 0 !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%238b8580' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L7 7.5L13 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 13px 8px;
    text-overflow: ellipsis;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#contact-form.nri-contactform select.form-control:hover,
.nri-formcard select.form-control:hover,
.nri-contactform select.form-control:hover {
    background-color: var(--mana-cream-dk);
}

#contact-form.nri-contactform select.form-control:focus,
.nri-formcard select.form-control:focus,
.nri-contactform select.form-control:focus {
    outline: 0;
    background-color: var(--mana-white);
    border-bottom-color: var(--mana-gold-ink);
    box-shadow: inset 0 -1px 0 0 var(--mana-gold-ink);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%238a6d24' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L7 7.5L13 1.5'/%3E%3C/svg%3E");
}

/* the placeholder option reads as placeholder text until a project is picked */
#contact-form.nri-contactform select.form-control:invalid,
.nri-formcard select.form-control:invalid,
.nri-contactform select.form-control:invalid {
    color: var(--mana-muted);
}

/* ---------- phone: dial-code well + underlined number field ----------
   Mirrors the reference's country picker: a sand well carrying the flag and
   dial code, with the number sitting on the same underline as its siblings. */
.nri-phone {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.nri-contactform .nri-cc-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex: 0 0 104px;
    width: 104px;
    height: 52px;
    margin: 0;
    padding: 0 26px 0 40px;
    border: 0;
    border-bottom: 1px solid var(--mana-line);
    border-radius: 3px 3px 0 0;
    background-color: var(--mana-cream);
    color: var(--mana-maroon);
    font-family: var(--sans);
    font-size: 16px;
    cursor: pointer;
    /* India tricolour on the left, chevron on the right */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='13.33' fill='%23ff9933'/%3E%3Crect y='13.33' width='60' height='13.34' fill='%23fff'/%3E%3Crect y='26.67' width='60' height='13.33' fill='%23138808'/%3E%3Ccircle cx='30' cy='20' r='5.4' fill='none' stroke='%23000080' stroke-width='1'/%3E%3C/svg%3E"),
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%238b8580' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L7 7.5L13 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: left 12px center, right 10px center;
    background-size: 21px 14px, 11px 7px;
    transition: background-color .2s ease, border-color .2s ease;
}

.nri-contactform .nri-cc-select:hover {
    background-color: var(--mana-cream-dk);
}

.nri-contactform .nri-cc-select:focus {
    outline: 0;
    background-color: var(--mana-white);
    border-bottom-color: var(--mana-gold-ink);
    box-shadow: inset 0 -1px 0 0 var(--mana-gold-ink);
}

/* Singapore */
.nri-contactform .nri-cc-select.is-sg {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%23fff'/%3E%3Crect width='60' height='20' fill='%23ef3340'/%3E%3Ccircle cx='12' cy='10' r='6.4' fill='%23fff'/%3E%3Ccircle cx='15.6' cy='10' r='5.4' fill='%23ef3340'/%3E%3C/svg%3E"),
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%238b8580' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L7 7.5L13 1.5'/%3E%3C/svg%3E");
}

/* Kenya */
.nri-contactform .nri-cc-select.is-ke {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='11' fill='%23000'/%3E%3Crect y='11' width='60' height='4' fill='%23fff'/%3E%3Crect y='15' width='60' height='10' fill='%23bb0000'/%3E%3Crect y='25' width='60' height='4' fill='%23fff'/%3E%3Crect y='29' width='60' height='11' fill='%23006600'/%3E%3Cellipse cx='30' cy='20' rx='5' ry='11' fill='%23bb0000' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E"),
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%238b8580' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L7 7.5L13 1.5'/%3E%3C/svg%3E");
}

.nri-contactform .nri-phone .form-control {
    flex: 1;
    min-width: 0;
}

.nri-contactform .select-validate:empty {
    display: none;
}

.nri-contactform .select-validate {
    display: block;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: normal;
    color: #b3261e;
    margin: 6px 0 0;
}

.nri-btn {
    display: inline-block;
    font-family: var(--sans-md);
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--mana-gold-ink);
    background: transparent;
    border: 1px solid var(--mana-gold-ink);
    padding: 17px 40px;
    text-decoration: none;
    cursor: pointer;
    transition: background .28s ease, color .28s ease, border-color .28s ease;
}

.nri-btn:hover,
.nri-btn:focus {
    background: var(--mana-accent);
    border-color: var(--mana-accent);
    color: var(--mana-on-accent);
    text-decoration: none;
}

.nri-btn-solid {
    background: var(--mana-accent);
    border-color: var(--mana-accent);
    color: var(--mana-on-accent);
}

.nri-btn-solid:hover,
.nri-btn-solid:focus {
    background: var(--mana-accent-hv);
    border-color: var(--mana-accent-hv);
    color: var(--mana-on-accent);
}

.nri-btn-block {
    display: block;
    width: 100%;
    margin-top: 12px;
}

.nri-form-note {
    font-family: var(--sans);
    font-size: 12px;
    line-height: 1.7;
    color: var(--mana-muted);
    margin: 20px 0 0;
    text-align: center;
}

/* QR strip + disclaimer carried over from the old Contact Us section.
   .qr-row carries an inline `style="margin-top:20px"` in the markup, which
   beats any rule here, so the separation is set on the wrapper instead. */
.nri-sec .qr-after {
    margin-top: 78px;
    padding-top: 46px;
    border-top: 1px solid var(--mana-line);
}

.nri-sec .qr-row {
    margin-top: 0;
}

.nri-sec .overview-txt-new {
    font-family: var(--sans);
    font-size: 12px;
    line-height: 1.8;
    color: var(--mana-body);
    margin: 44px 0 0;
}

@media (max-width: 991px) {
    .nri-contact-left,
    .nri-contact-right {
        width: 100%;
        padding-right: 0;
    }

    .nri-contact-left {
        display: block;
    }

    .nri-contact-right {
        margin-top: 44px;
    }
}

@media (max-width: 767px) {
    .nri-sec .qr-after {
        margin-top: 48px;
        padding-top: 32px;
    }

    .nri-formcard {
        padding: 34px 24px 36px;
    }

    .nri-formcard-title {
        font-size: 26px;
    }

    .nri-contactform .nri-col {
        width: 100%;
    }
}

/* ==========================================================================
   CTA BUTTONS — desktop treatment
   The flat fill reads as a placeholder at desktop size, so from 992px up the
   buttons get a wipe fill, a travelling arrow and a small lift. Touch sizes
   keep the plain fill: no hover state to reward the extra weight.
   ========================================================================== */

@media (min-width: 992px) {

    .nri-proj-clickhere,
    .nri-btn {
        position: relative;
        overflow: hidden;
        letter-spacing: 1.4px;
        /* the wipe is a background-image so it layers over the base colour;
           a pseudo-element would sit behind it on the solid variants */
        background-image: linear-gradient(var(--mana-accent), var(--mana-accent));
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 0 100%;
        transition: background-size .4s cubic-bezier(.4, 0, .2, 1),
                    color .25s ease,
                    border-color .25s ease,
                    transform .25s ease,
                    box-shadow .25s ease;
    }

    /* the arrow rides out on hover */
    .nri-proj-clickhere::after,
    .nri-btn::after {
        content: "";
        display: inline-block;
        width: 0;
        margin-left: 0;
        vertical-align: middle;
        border-top: 1px solid currentColor;
        opacity: 0;
        transition: width .3s ease, margin-left .3s ease, opacity .25s ease;
    }

    .nri-proj-clickhere:hover::after,
    .nri-proj-clickhere:focus::after,
    .nri-btn:hover::after,
    .nri-btn:focus::after {
        width: 18px;
        margin-left: 10px;
        opacity: 1;
    }

    /* outline variant: wipe in the accent, text flips to cream */
    .nri-proj-clickhere:hover,
    .nri-proj-clickhere:focus,
    .nri-proj-clickhere:active,
    .nri-btn:hover,
    .nri-btn:focus {
        background-color: transparent;
        background-image: linear-gradient(var(--mana-accent), var(--mana-accent));
        background-size: 100% 100%;
        border-color: var(--mana-accent);
        color: var(--mana-on-accent);
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(176, 145, 70, .32);
    }

    /* solid variant: already accent, so wipe the darker shade over it */
    .nri-proj-clickhere.is-solid,
    .nri-btn-solid {
        background-color: var(--mana-accent);
        background-image: linear-gradient(var(--mana-accent-hv), var(--mana-accent-hv));
        background-size: 0 100%;
    }

    .nri-proj-clickhere.is-solid:hover,
    .nri-proj-clickhere.is-solid:focus,
    .nri-proj-clickhere.is-solid:active,
    .nri-btn-solid:hover,
    .nri-btn-solid:focus {
        background-color: var(--mana-accent);
        background-image: linear-gradient(var(--mana-accent-hv), var(--mana-accent-hv));
        background-size: 100% 100%;
        border-color: var(--mana-accent-hv);
        box-shadow: 0 8px 18px rgba(150, 121, 52, .36);
    }

    /* a little more presence at desktop size */
    .nri-proj-clickhere {
        padding: 12px 8px;
        font-size: 11.5px;
    }

    .nri-btn-block {
        padding: 19px 40px;
        font-size: 13px;
    }
}

/* ==========================================================================
   FLOATING CTAs — "Enquire Now" / "I'm Interested"
   template.css (~6556) leaves these as a flat gold block with a 2px black
   border and a broken font stack ("latp"). Restyled here as a brushed-gold
   plate: gradient, inner highlight, drop shadow, and a sheen that sweeps
   across on hover. Loaded after template.css, matching its specificity.
   ========================================================================== */

:root {
    --bh-gold: #e0c588;
    --bh-gold-lt: #f4e6be;
    --bh-gold-dk: #c6a55a;
    --bh-gold-ink: #8a6d24;
    --bh-ink: #2a2420;
}

button.btn.btn-danger.interested,
button.btn.btn-danger.interested2 {
    position: fixed;
    bottom: 26px;
    z-index: 99999;

    font-family: 'futura-medium-bt', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--bh-ink);

    padding: 15px 28px;
    border: 1px solid rgba(138, 109, 36, .5);
    border-radius: 2px;

    /* brushed gold rather than one flat fill */
    background-color: var(--bh-gold);
    background-image: linear-gradient(135deg,
            var(--bh-gold-lt) 0%,
            var(--bh-gold) 46%,
            var(--bh-gold-dk) 100%);

    /* lifted off the page, with a highlight along the top edge */
    box-shadow: 0 12px 28px rgba(42, 36, 32, .26),
                0 2px 6px rgba(42, 36, 32, .14),
                inset 0 1px 0 rgba(255, 255, 255, .6);

    overflow: hidden;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1),
                box-shadow .32s ease,
                filter .32s ease;
}

button.btn.btn-danger.interested {
    left: 24px;
}

button.btn.btn-danger.interested2 {
    right: 24px;
}

button.btn.btn-danger.interested .f-icon,
button.btn.btn-danger.interested2 .f-icon {
    margin-right: 9px;
    font-size: 13px;
    color: var(--bh-gold-ink);
}

/* the sheen — a soft band that travels across the plate on hover */
button.btn.btn-danger.interested::after,
button.btn.btn-danger.interested2::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 65%;
    height: 100%;
    transform: skewX(-22deg);
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .72) 50%,
            rgba(255, 255, 255, 0) 100%);
    transition: left .65s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}

button.btn.btn-danger.interested:hover,
button.btn.btn-danger.interested2:hover,
button.btn.btn-danger.interested:focus,
button.btn.btn-danger.interested2:focus {
    color: var(--bh-ink);
    background-color: var(--bh-gold);
    transform: translateY(-3px);
    filter: saturate(1.06);
    box-shadow: 0 18px 38px rgba(42, 36, 32, .32),
                0 3px 8px rgba(42, 36, 32, .18),
                inset 0 1px 0 rgba(255, 255, 255, .7);
    outline: none;
}

button.btn.btn-danger.interested:hover::after,
button.btn.btn-danger.interested2:hover::after,
button.btn.btn-danger.interested:focus::after,
button.btn.btn-danger.interested2:focus::after {
    left: 150%;
}

button.btn.btn-danger.interested:active,
button.btn.btn-danger.interested2:active {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(42, 36, 32, .28),
                inset 0 1px 0 rgba(255, 255, 255, .5);
}

@media (max-width: 991px) {
    button.btn.btn-danger.interested,
    button.btn.btn-danger.interested2 {
        padding: 13px 20px;
        font-size: 11px;
        letter-spacing: 1.6px;
        bottom: 18px;
    }

    button.btn.btn-danger.interested {
        left: 14px;
    }

    button.btn.btn-danger.interested2 {
        right: 14px;
    }
}

/* ==========================================================================
   HEADER
   template.css (~1251) leaves the bar on the old olive-beige #EDE8D0, which
   now clashes with the cream the sections sit on. Bring it onto the same
   ground, separated by a gold hairline rather than a colour break, and give
   the nav links a gold hover rule.
   ========================================================================== */

:root {
    --bh-cream: #f7f1e8;
}

#sp-header {
    background: var(--bh-cream);
    border-bottom: 1px solid rgba(138, 109, 36, .28);
    box-shadow: 0 2px 16px rgba(42, 36, 32, .09);
}

/* the wrapper paints its own ground behind the fixed bar */
.topup {
    background: var(--bh-cream);
}

.sp-megamenu-parent>li>a {
    position: relative;
    color: var(--bh-ink) !important;
    transition: color .28s ease;
}

/* a gold rule that grows out from the centre on hover */
.sp-megamenu-parent>li>a:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 24px;
    width: 0;
    height: 1px;
    background: var(--bh-gold-ink);
    transform: translateX(-50%);
    transition: width .3s cubic-bezier(.4, 0, .2, 1);
}

.sp-megamenu-parent>li>a:hover,
.sp-megamenu-parent>li>a:focus,
.sp-megamenu-parent>li.active>a,
.sp-megamenu-parent>li.current-item>a {
    color: var(--bh-gold-ink) !important;
}

.sp-megamenu-parent>li>a:hover:after,
.sp-megamenu-parent>li>a:focus:after,
.sp-megamenu-parent>li.active>a:after {
    width: 100%;
}

.menu-fixed#sp-header .sp-megamenu-parent>li>a:after {
    bottom: 17px;
}

/* ==========================================================================
   KEY FACTS LIST — card treatment
   Restyles .nri-factsplit-list from hairline-separated rows into discrete
   tinted cards: rounded corners, a gold bar down the left edge and a round
   badge, per the reference layout. Appended after the base rules so it
   overrides them at equal specificity.
   ========================================================================== */

.nri-factsplit-list {
    border-top: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nri-factrow {
    position: relative;
    align-items: center;
    gap: 20px;
    padding: 22px 28px 22px 32px;
    border-bottom: 0;
    border-radius: 10px;
    background: #f3ead9;
    overflow: hidden;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1),
                box-shadow .32s ease,
                background-color .32s ease;
}

/* the gold bar down the left edge */
.nri-factrow:before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 5px;
    border-radius: 0 4px 4px 0;
    background: var(--mana-gold-ink);
    transition: top .32s ease, bottom .32s ease;
}

.nri-factrow:hover {
    padding-left: 32px;
    background: #f0e5cf;
    transform: translateX(4px);
    box-shadow: 0 10px 24px rgba(42, 36, 32, .10);
}

.nri-factrow:hover:before {
    top: 0;
    bottom: 0;
}

/* the number becomes a round badge, standing in for the reference's tick */
.nri-factrow-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    padding: 0;
    border-radius: 50%;
    background: var(--mana-gold-ink);
    color: #fdf8ee;
    font-size: 11px;
    letter-spacing: .5px;
}

.nri-factrow-key {
    width: 230px;
    font-size: 25px;
}

.nri-factrow-val {
    font-size: 15px;
    line-height: 1.65;
}

@media (max-width: 767px) {
    .nri-factrow {
        display: grid;
        grid-template-columns: 28px 1fr;
        column-gap: 16px;
        row-gap: 6px;
        align-items: center;
        padding: 20px 20px 20px 26px;
    }

    .nri-factrow:hover {
        padding-left: 26px;
        transform: none;
    }

    .nri-factrow-key {
        width: auto;
    }

    .nri-factrow-val {
        grid-column: 1 / -1;
        font-size: 14px;
    }
}

/* ==========================================================================
   PROJECT CARD IMAGES
   The 210px fixed height was set when the cards were 578px wide; once the
   grid went full-width (728px) that became a 3.5:1 letterbox. Switch to an
   aspect ratio so the image grows with the card instead of flattening, and
   add a slow zoom on hover.
   ========================================================================== */

.nri-proj-media img {
    /* fallback for browsers without aspect-ratio */
    height: 330px;
    aspect-ratio: 20 / 9;
    transition: transform 1.1s cubic-bezier(.2, .6, .2, 1);
}

@supports (aspect-ratio: 1) {
    .nri-proj-media img {
        height: auto;
    }
}

.nri-proj:hover .nri-proj-media img {
    transform: scale(1.055);
}

/* the tag plate rides above the zoom */
.nri-proj-tag {
    z-index: 2;
}

@media (max-width: 1199px) {
    .nri-proj-media img {
        height: 300px;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767px) {
    .nri-proj-media img {
        height: 240px;
        aspect-ratio: 16 / 9;
    }
}

/* ==========================================================================
   CAMPAIGN HOOK
   14px italic in the light gold sat at 4.4:1 and read as a caption. Give it a
   tinted plate, more size, and a darker gold so it carries as a pull-quote.
   ========================================================================== */

.nri-proj-hook {
    display: block;
    margin: 18px 0 4px;
    padding: 13px 20px;
    border-radius: 6px;
    background: var(--mana-cream);
    border: 1px solid rgba(138, 109, 36, .22);
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.45;
    letter-spacing: .3px;
    color: #6b5418;
    text-align: center;
}

@media (max-width: 767px) {
    .nri-proj-hook {
        font-size: 15px;
        padding: 11px 14px;
    }
}