/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/nri.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   NRI page
   -------------------------------------------------------------------------
   Sections, top to bottom:
     .nriHero       navy band — page title + the widening photo banner
     .nriWhy        navy — lead copy beside the 2x2 figure block
     .nriInvest     light band — copy, two large figures, render
     .nriAdv        lounge photograph with the six service cards over it
     .nriJourney    navy — three numbered steps
     .nriSeniors    navy image band — disc photo, copy, two service columns
     .nriFeatured   light band — three upright development cards
   Passport, Testimonials, FAQ, Memories and the Footer below are the shared
   homepage components and carry their own styles in components.css.

   Colours, spacing and type all come from the tokens in globals.css — this
   file declares no new palette.
   ========================================================================= */

.nriPage {
  --nri-navy: #0a1d49;
  --nri-navy-soft: #0a1d49;
  --nri-cream: #f2f6fb;
}

/* Gold / white runs inside a headline or caption. */
.nriPage .t-gold {
  color: var(--gold-500);
  font-style: normal;
}
.nriBanner__caption .t-light {margin-right: 10px;}
.nriPage .t-light {
  color: #fff;
  font-style: normal;
  
}

/* --- Hero ----------------------------------------------------------------
   Deliberately identical to the About page's opening band (.aboutIntro /
   .aboutHero in about.css): same navy, same title weight and scale, the same
   ruled label, and the same banner height, scrim and caption. The rules are
   mirrored here rather than imported, because about.css also carries
   About-only overrides (including an `h2.display` size under 680px) that
   would reach the rest of this page. Change one, change the other.
   ------------------------------------------------------------------------- */

.nriHero {
  position: relative;
  background: #0a1d49;
  color: #fff;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5.5rem));
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  /* `clip`, not `hidden` — hidden would make this a scroll container and
     break how the banner measures itself against the viewport. */
  overflow-x: clip;
}

.nriHero > .shell {
  position: relative;
  z-index: 1;
}

.nriHero__head {
  text-align: center;
  margin-bottom: 60px;
}

.nriHero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.nriHero__title > span {
  display: block;
}

/* Gold runs inside a line. */
.nriHero__title em {
  font-style: normal;
}

.nriHero__title .t-gold {
  color: var(--gold-500);
}

.nriHero__label {
  display: inline-block;
  margin-top: clamp(1rem, 2.4vw, 1.8rem);
  padding: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.5em;
  text-indent: 0.5em; /* balances the trailing tracking space */
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* The banner — the shared .bannerOpen primitive (globals.css). Height is set
   here in absolute terms, not as an aspect-ratio: the opening animates the
   width, and a height that tracked it would shift the page on every frame. */
.nriBanner__card {
  height: clamp(320px, 42.5vw, 730px);
}

.nriBanner__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent 55%);
  opacity: 0.75;
}

.nriBanner__card > img {
  object-position: center 30%;
}

.nriBanner__caption {
  position: absolute;
  left: clamp(1.25rem, 3vw, 2.75rem);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 65px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

/* Direct children only — each is one caption line. Nested spans (the
   .punct wrapper from lib/punct.jsx) must stay inline. */
.nriBanner__caption > span {
  display: block;
}

.nriBanner__caption .t-gold {
  color: var(--gold-500);
}

@media (max-width: 1680px) {
.nriHero__title { font-size: 70px;}
}

@media (max-width: 700px) {
  .nriBanner__card {
    height: clamp(280px, 62vw, 420px);
  }
}

@media (max-width: 680px) {
  .nriHero__title {
    font-size: 38px;
  }

  .nriBanner__caption {
    font-size: 37px;
  }
  
      
}

/* --- Why Radiance? ------------------------------------------------------- */

/* Same navy as the hero above it, so the two bands read as one surface. */
.nriWhy {
  background: #0a1d49;
  color: #fff;
  padding-bottom: 120px;
 
}
.nriWhy  h2.display {
    color: #ffffff;
}

.nriWhy__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-gap: clamp(2rem, 6vw, 6rem);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.nriWhy__copy .display span {
  display: block;
}

.nriWhy__body {
  margin-top: var(--sp-5);
  max-width: 58ch;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

/* The figures are ruled apart rather than boxed: a hairline down the left of
   every cell and under the top row, which is what draws the comp's cross. */
.nriWhy__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(0.5rem, 1.5vw, 1.5rem);
  grid-gap: 30px 0;
  gap: 30px 0;
}

.nriFig {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 0.9rem);
  padding: clamp(1.25rem, 2.4vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.nriFig:nth-child(-n + 2) {
  
}

/* The numeral, its unit letter and the raised plus sit on one baseline box:
   the counter rewrites its own node every frame, so the unit and the plus
   have to be siblings of it to keep sizes of their own. */
.nriFig__value {
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 2rem + 4.2vw, 6rem);
  line-height: 0.82;
  color: var(--gold-500);
  white-space: nowrap;
}

.nriFig__unit {
  font-style: normal;
  font-size: 0.46em;
}

/* White, small, and pinned to the top of the numeral as the comp has it. */
.nriFig__value sup {
  align-self: flex-start;
  margin-left: 0.08em;
  font-size: 0.22em;
  line-height: 1;
  color: #fff;
}

.nriFig__label {
  font-size: clamp(0.72rem, 0.66rem + 0.22vw, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.nriFig__label span {
  display: block;
}

/* --- Why invest back home? ----------------------------------------------
   The artwork is the band's own background, set from the component as
   --nri-invest-bg, so it can bleed off the right edge and run under the copy
   on narrow screens. The band is sized by its content; the image is anchored
   bottom-right and `contain`, so it never crops the towers.
   ------------------------------------------------------------------------- */

.nriInvest {
  position: relative;
  background-color: #fff;
  padding-block: clamp(3.5rem, 7vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}

.nriInvest::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--nri-invest-bg);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: cover;
}
 

/* The copy column is the left half — the artwork owns the right. */
.nriInvest__inner {
  max-width: var(--maxw);
}

.nriInvest__inner > * {
  max-width: min(52ch, 50%);
}

.nriInvest__inner .display {
  color: var(--navy-500);
}

.nriInvest__inner .display span {
  display: block;
}

.nriInvest__body {
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  line-height: 1.55;
  color: var(--ink-900);
}

.nriInvest__figures {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 6vw, 5.5rem);
  list-style: none;
}

.nriBig__value {
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 2rem + 4.4vw, 5.6rem);
  line-height: 0.86;
  color: var(--navy-500);
}

.nriBig__unit {
  font-style: normal;
  font-size: 0.3em;
  margin-left: 0.08em;
}

.nriBig__label {
  margin-top: var(--sp-3);
  font-size: clamp(0.72rem, 0.66rem + 0.22vw, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--navy-500);
}

.nriBig__label span {
  display: block;
}

/* --- NRI Advantage ------------------------------------------------------
   The lounge photograph is the band's background, set from the component as
   --nri-adv-bg. The band is deliberately taller than its copy so the sofa
   keeps the lower third of the frame, exactly as the comp has it, and the
   cards sit in the bright upper half with no chrome of their own.
   ------------------------------------------------------------------------- */

.nriAdv {
  position: relative;
  background-color: #eef3f8;
  background-image: var(--nri-adv-bg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  padding-top: clamp(3rem, 6vw, 6rem);
  /* Room under the copy for the photograph's subject. */
  padding-bottom: clamp(16rem, 34vw, 34rem);
}

.nriAdv__title {
  color: var(--navy-500);
  margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
}

.nriAdv__title span {
  display: block;
}

/* Three columns that stop short of the full width, so the right-hand cards
   clear the window light in the photograph. */
.nriAdv__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: clamp(1.5rem, 3.5vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
  gap: clamp(1.5rem, 3.5vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
  max-width: min(100%, 1120px);
  list-style: none;
}

.advCard__title {
      font-family: var(--font-display);
    font-weight: 500;
    font-size: 38px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #0f2c5f;
}

.advCard__title span {
  display: block;
}

.advCard__body {
   margin-top: 5px;
   max-width: 20ch;
  font-size:20px;
  line-height: 1.2;
  color: var(--ink-900);
}

/* --- Remote buying journey ----------------------------------------------
   Three cards on the navy field. One is gold at rest (.jStep--active); every
   card takes the same gold treatment on hover, and the resting one hands it
   back while another card is hovered — so exactly one card is ever gold and
   the change reads as the highlight moving rather than two cards lighting up.
   Everything that changes is transitioned on one timing, so a fast pointer
   crossing the row leaves no half-painted card behind.
   ------------------------------------------------------------------------- */

.nriJourney {
  /* Lighter toward the middle, as the comp's field is. */
  background: radial-gradient(120% 90% at 58% 38%, #0e4a80 0%, #08305c 45%, #06224a 100%);
  color: #fff;
  padding-block: clamp(3.5rem, 7vw, 7rem);
  text-align: center;
}
.nriJourney h2.display {  color: #fff; }

.nriJourney__title span {
  display: block;
}

.nriJourney__blurb {
  margin: var(--sp-4) auto 0;
  max-width: 68ch;
  color: rgba(255, 255, 255, 0.72);
}

/* The row carries the padding a lifted card needs, so nothing is clipped
   when a card scales up. */
.nriJourney__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
   grid-gap: 58px;
   gap: 58px;
  align-items: center;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
  text-align: left;
  list-style: none;
  padding: 0 80px;
}

.jStep {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 2.6vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 24px 50px rgba(3, 16, 36, 0.32);
  transition: transform 0.5s var(--ease), background-color 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
  will-change: transform;
}

.jStep::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url(/media/c-logo.png) right 143% no-repeat;
    background-size: 57%;
    filter: grayscale(100%);
    pointer-events: none;
    right: -80px;
}
.jStep:hover::after {
    mix-blend-mode: color-dodge;
}

/* The monogram, the same artwork the FAQ section uses. */
.jStep__mark {
  position: absolute;
  right: -16%;
  bottom: -14%;
  width: 72%;
  aspect-ratio: 718 / 741;
  background: url(/media/c-logo.png) center / contain no-repeat;
  filter: grayscale(100%);
  opacity: 0.07;
  pointer-events: none;
  transition: opacity 0.5s var(--ease), filter 0.5s var(--ease);
}

.jStep__step {
  display: inline-block;
  padding: 0.22em 0.55em;
  background: var(--gold-500);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-900);
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}

.jStep__title {
  position: relative;
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--navy-500);
}

.jStep__title span {
  display: block;
}

.jStep__body {
  position: relative;
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--ink-500);
  transition: color 0.5s var(--ease);
      max-width: 95%;
}

/* --- the gold state: at rest on one card, on hover for any of them -------- */
 
.jStep:hover {
  background: linear-gradient(135deg, #f9ae1b 0%, #ef9209 100%);
  transform: translateY(-15px) scale(1);
  box-shadow: 0 34px 66px rgba(3, 16, 36, 0.42);
}

 
.jStep:hover .jStep__step {
  background: #fff;
  color: var(--navy-900);
}

.jStep--active .jStep__body,
.jStep:hover .jStep__body {
  color: rgba(6, 34, 74, 0.88);
}

.jStep--active .jStep__mark,
.jStep:hover .jStep__mark {
  filter: grayscale(0%) brightness(1.6);
  opacity: 0.18;
}

/* While another card is hovered, the resting card gives the gold back. */
.nriJourney__steps:hover .jStep--active:not(:hover) {
  background: #fff;
  transform: none;
  box-shadow: 0 24px 50px rgba(3, 16, 36, 0.32);
}

.nriJourney__steps:hover .jStep--active:not(:hover) .jStep__step {
  background: var(--gold-500);
  color: var(--navy-900);
}

.nriJourney__steps:hover .jStep--active:not(:hover) .jStep__body {
  color: var(--ink-500);
}

.nriJourney__steps:hover .jStep--active:not(:hover) .jStep__mark {
  filter: grayscale(100%);
  opacity: 0.07;
}

/* A pointer is what drives this; on touch the resting card simply stays gold
   and nothing lifts. */
@media (hover: none) {
  .jStep:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jStep,
  .jStep--active,
  .jStep:hover {
    transform: none;
    transition-duration: 0.01ms;
  }
}

/* --- Senior citizens ----------------------------------------------------- */

.nriSeniors {
  position: relative;
  background: linear-gradient(120deg, #05224a 0%, #07335f 45%, #073462 100%);
  color: #fff;
  padding-bottom: clamp(3.5rem, 7vw, 7rem);
}

/* Full-bleed band. The image is 2250x913 (≈2.46:1) with the disc on the
   right and a flat #05224a left edge, so it blends into the section. */
.nriSeniors__top {
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 40.6vw, 56rem);
  padding-block: clamp(3rem, 5vw, 5rem);
  background: #05224a url(/images/nriSeniors-bg.jpg) no-repeat right center / cover;
}

.nriSeniors__top > .shell {
  width: 100%;
}

.nriSeniors__copy {
  max-width: min(36rem, 46%);
}

.nriSeniors__copy .display {
   line-height: 0.95;
  color: #fff;
}

.nriSeniors__copy .display span {
  display: block;
}

.nriSeniors__copy .display .nriSeniors__gold {
  color: var(--gold-500);
}

.nriSeniors__body {
  margin-top: var(--sp-5);
  max-width: 34rem;
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

.nriSeniors__body strong {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.nriSeniors__body + .nriSeniors__body {
  margin-top: var(--sp-6);
}

/* Two service columns mirrored around a thin centre rule: the left one is
   right-aligned with its markers on the right, the right one reads normally. */
.nriSeniors__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 34rem));
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.mCol {
  padding-block: clamp(2rem, 3vw, 3rem) clamp(3rem, 4vw, 4rem);
  padding-inline: clamp(1.5rem, 4.5vw, 5rem);
}

.mCol:first-child {
  text-align: right;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}

.mCol__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4.8rem);
  line-height: 0.9;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: #fff;
}

.mCol__title span {
  display: block;
}

.mCol__list {
  margin-top: clamp(1.5rem, 2.4vw, 2.5rem);
  display: grid;
  grid-gap: clamp(0.55rem, 0.8vw, 0.85rem);
  gap: clamp(0.55rem, 0.8vw, 0.85rem);
  list-style: none;
  padding: 0;
}

.mCol:last-child .mCol__list {
   padding-left: 0.9rem;
}

.mCol__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.15rem);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

/* Small right-angled triangle markers, pointing in toward the centre rule. */
.mCol__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.62em;
  height: 0.62em;
  background: rgba(255, 255, 255, 0.55);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
          clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.mCol:first-child .mCol__list li {
  padding-left: 0;
  padding-right: 1.5rem;
}

.mCol:first-child .mCol__list li::before {
  left: auto;
  right: 0;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* --- Featured projects --------------------------------------------------- */

/* Same tab band + slider as /projects — the p- classes come from
   projects.css (imported by nri/page.js). This only sets the navy band. */
.nriFeatured {
  background: var(--paper);
  background-image: linear-gradient(to bottom, #ffffff 91%, #f7f7f7);
}

/* Light band: dark city tabs over a single hairline, grey active type tab. */
.nriFeatured__band {
  padding-block: clamp(3rem, 6vw, 5rem) 0;
  background: var(--paper);
  color: var(--ink-900);
  text-align: center;
}

.nriFeatured__title {
  color: var(--navy-400);
}

.nriFeatured .pTabs {
  border-top: 0;
  border-bottom-color: rgba(0, 0, 0, 0.22);
}

.nriFeatured .pTab {
  color: #111;
  font-size: 37px;
}
.nriFeatured  .pSubTab {  font-size: 25px;}
.pSubTabs {  margin-top: 5px; }
.nriFeatured .pTab:hover,
.nriFeatured .pTab.is-active {
  color: #000;
}

.nriFeatured .pTab::after {
  background: #000;
}

.nriFeatured .pSubTab {
  color: #111;
}

.nriFeatured .pSubTab + .pSubTab::before {
  background: rgba(0, 0, 0, 0.3);
}

.nriFeatured .pSubTab:hover,
.nriFeatured .pSubTab.is-active {
  color: #8a8a8a;
}

.nriFeatured .pSubTab::after {
  height: 2px;
  background: #8a8a8a;
}

.nriFeatured .pTabs__arrow {
  border-color: rgba(0, 0, 0, 0.35);
  color: #111;
}

.nriFeatured .pList {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.nriFeatured__title span {
  display: inline-block;
}

.nriFeatured__title span + span {
  margin-left: 0.3em;
}

.nriFeatured .pList {
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.nriFeatured__more {
  display: flex;
  justify-content: center;
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  display: none;
}


@media (max-width: 1600px) {
.nriInvest::before {   background-size: 120%; }
.nriWhy__body { font-size: 17px; }
.nriInvest__body { font-size: 17px; }
.advCard__body {  font-size: 17px;}
 .nriJourney__steps {  gap: 50px;}
.nriJourney__steps {  padding: 0 30px; }
.nriSeniors__top {  background: #05224a url(/images/nriSeniors-bg.jpg) no-repeat 47% center / cover; }
}

@media (max-width: 1200px) {
.nriInvest::before {
   background-size: 100%;
}
.nriWhy__body { font-size: 15px; }
.nriInvest__body { font-size: 15px; }
.advCard__body {  font-size: 17px;}
.advCard__title { font-size: 35px;}
.nriJourney__steps {  gap: 30px;}
.nriJourney__steps {  padding: 0 23px; }
}



/* --- Tablet -------------------------------------------------------------- */

@media (max-width: 1024px) {
  .nriWhy__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Copy stacks above; the disc (right side of the image) shows below it. */
  .nriSeniors__top {
    display: block;
    min-height: 0;
    padding-bottom: clamp(20rem, 62vw, 34rem);
    background-size: auto clamp(20rem, 62vw, 34rem);
    background-position: 72% bottom;
  }

  .nriSeniors__copy {
    max-width: 40rem;
  }

  /* The artwork drops behind the copy once there is no room beside it. */
  .nriInvest__inner > * {
    max-width: 62ch;
  }

  .nriInvest::before {
    background-size: auto 62%;
    opacity: 0.9;
  }

  .nriInvest {
    padding-bottom: clamp(14rem, 34vw, 22rem);
  }

  .nriAdv__cards,
  .nriJourney__steps,
  .nriFeatured__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nriAdv {
    padding-bottom: clamp(12rem, 40vw, 22rem);
  }
}

/* --- Phone --------------------------------------------------------------- */

@media (max-width:900px) {
  .nriAdv__cards,
  .nriJourney__steps,
  .nriFeatured__cards,
  .nriSeniors__cols  {
    grid-template-columns: minmax(1, 1fr);
  }
  .nriWhy__figures { gap: 0;}

  /* One per row, so the cross rule becomes a stack of dividers. */
  .nriFig {
    border-left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    padding-inline: 0;
  }

    .nriFig:nth-child(3) {
    border-bottom: 0;
  }
.advCard__title {  font-size: 32px;}
  .nriFig:last-child {
    border-bottom: 0;
  }

  /* One card per row makes the band tall, so the photograph covers it and
     the copy gets a light scrim to stay readable over the sofa. */
.nriAdv {
        background-size: 279%;
        background-position: center bottom;
        padding-bottom: 235px;
        background-color: #fff;
    }
    .nriJourney__steps {
     padding: 0;
}
    .advCard__body { max-width: 95%;}
    .nriAdv__cards {  margin-top : 40px; }

  
  .nriWhy {
     padding-bottom: 60px;
}

  .nriAdv__inner {
    position: relative;
  }

  .mCol {
    padding-inline: 0;
  }

  .mCol:first-child {
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  .mCol:first-child .mCol__list li {
    padding-right: 0;
    padding-left: 1.5rem;
  }

  .mCol:first-child .mCol__list li::before {
    left: 0;
    right: auto;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
            clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }

  .mCol:last-child .mCol__list {
    margin-top: clamp(1.5rem, 2.4vw, 2.5rem);
    padding-left: 0;
  }

  .nriSeniors__top {
    padding-bottom: clamp(17rem, 88vw, 24rem);
    background-size: auto clamp(17rem, 88vw, 24rem);
    background-position: 70% bottom;
  }
  .nriInvest::before {  background-size:175%;   opacity: 0.9; }

    .nriInvest {  padding-bottom: 280px; }

        .nriAdv__cards, .nriJourney__steps, .nriFeatured__cards {
        grid-template-columns: repeat(1, minmax(0, 1fr));  }

}


@media (max-width:600px) {
  .passport h2.display span {
         box-shadow: none;
    }
.nriSeniors__top {
                background-position: 0;
        background: #05224a;
        padding-bottom: 17px;
    }
        .nriSeniors__copy {
         margin: 0 0 60px;
    }
     .nriAdv__cards,
  .nriJourney__steps,
  .nriFeatured__cards,
  .nriSeniors__cols  {  grid-template-columns: repeat(1, minmax(0, 34rem)); }
  .nriFeatured .pSubTab {  font-size: 18px; }
  .nriFeatured .pTab {  font-size: 32px; }
  .advCard__title {    font-size: 29px;  }
  .advCard__body {  font-size: 15px;}
  .pSlider__track {   padding-bottom: 0;   }
  .jStep::after { background-size: 48%;}
      .nriAdv {
        padding-bottom: 260px;
        background-color: #fff;
        text-align: center;
    }
  }
/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/resale-rental.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   Resale & Rental page (/resale-rental)
   -------------------------------------------------------------------------
     .rrHero       reuses .nriHero / .nriBanner from nri.css
     .rrIntro      navy — copy left, towers + coins artwork right
     .rrServices   white — Rental / Resale columns, photo + pin below
     .rrWhy        white — family photo left, six reasons right
   FAQ, Memories and Footer are the shared components (components.css).
   Tokens come from globals.css; no new palette.
   ========================================================================= */

/* --- Intro ---------------------------------------------------------------
   The artwork (rr-intro-art.jpg, 1310×805) is cropped straight from the comp:
   navy ground, towers, coins, and a 45px white strip at the bottom that the
   coins spill onto. It is pinned bottom-right at --rr-art-w wide, and the
   section's background switches from navy to white at that strip's scaled
   height (45 / 1310 of the width), so the white runs the full page width
   exactly as the comp has it.
   ------------------------------------------------------------------------- */

.rrIntro {
  --rr-art-w: min(58.2vw, 1310px);
  --rr-strip: calc(var(--rr-art-w) * 0.03435);
  position: relative;
  z-index: 2;
  min-height: calc(var(--rr-art-w) * 0.6145);
  padding-bottom: clamp(3rem, 8vw, 9rem);
  color: #fff;
  background:#0a1d49;
  overflow: hidden;
  position: relative;
}
.rrIntro::before{content: ''; position: absolute; background: none; bottom: 0; width: 100%; height: 60px;  }
.rrIntro::after{content: '';     position: absolute;
    z-index: 0;
    top: auto;
    bottom: 0;
    left: 50%;
    width: 1px;
      height: 40px;
    transform: translateX(-0.5px);
    background: none;}

.rrIntro__inner {
  position: relative;
  z-index: 1;
}

.rrIntro__copy {
  max-width: min(44rem, 44%);
}

.rrIntro__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 0.8rem + 3vw, 4.8rem);
  line-height: 0.92;
  letter-spacing: -0.005em;
  color: #fff;
}

.rrIntro__title > span {
  display: block;
}

.rrIntro__title em {
  font-style: normal;
}

.rrIntro__title .t-gold {
  color: var(--gold-500);
  margin-left: 0.18em;
}

.rrIntro__body {
  margin-top: clamp(1.5rem, 2.4vw, 2.4rem);
  font-size: clamp(0.95rem, 0.8rem + 0.4vw, 1.25rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.rrIntro__body + .rrIntro__body {
  margin-top: clamp(1.25rem, 2vw, 2rem);
}

.rrIntro__art {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--rr-art-w);
  pointer-events: none;
}

.rrIntro__art img {
  display: block;
  width: 100%;
  height: auto;
  /* Softens the crop's top and left edges into the band's navy. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%),
    linear-gradient(to right, transparent 0, #000 3%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 8%),
    linear-gradient(to right, transparent 0, #000 3%);
  -webkit-mask-composite: source-in, xor;
          mask-composite: intersect;
}

/* Beyond 2250px the art stops growing; keep it sitting on the right. */
@media (min-width: 2251px) {
  .rrIntro {
    background:
      linear-gradient(to bottom, transparent calc(100% - var(--rr-strip)), #fff calc(100% - var(--rr-strip))),
      #073562;
  }
}

/* Stacked: copy first, the artwork full width beneath it. The image's own
   white strip then meets the white services band directly. */
@media (max-width: 1024px) {
  .rrIntro {
    min-height: 0;
    padding-bottom: 0;
    
  }

  .rrIntro__copy {
    max-width: 44rem;
  }

  .rrIntro__art {
    position: relative;
    width: 100%;
    margin-top: clamp(1.5rem, 5vw, 3rem);
  }
}

/* --- Services ------------------------------------------------------------
   Laid out on the 2250×1073 comp, in vw so the type, the centre rule and the
   pin keep their exact relationship at every desktop width (1vw = 22.5px on
   the comp; every number below is comp-px ÷ 22.5):
     band        2250 × 1073  → aspect-ratio, so the pin always lands under
                                the rule
     "RENTAL"    cap 78px  → 111px D-DIN Bold (4.93vw), "SERVICES" 62px
     columns     inner edges 91px / 96px either side of the centre
     list        Manrope 600 at 27px on a 53px pitch
     photo       rr-services-bg.jpg = comp rows 420→1073 (653px tall),
                 pinned to the bottom; its top is haze fading into white, so
                 it can sit behind the list the way the comp's fog does. The
                 1px rule is baked into it down to the pin, and the CSS rule
                 above (behind the photo) continues it to the top.
   ------------------------------------------------------------------------- */

.rrServices {
  position: relative;
  aspect-ratio: 2250 / 1073;
  padding-top: 6.35vw;
  background: #fff;
  overflow: hidden;
  isolation: isolate;
}

.rrServices__rule {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-0.5px);
  background: #0b4c80;
}

.rrServices__cols {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.rrCol:first-child {
  justify-self: end;
  text-align: right;
  padding-right: 4.05vw;
}

.rrCol:last-child {
  justify-self: start;
  padding-left: 4.27vw;
}

.rrCol__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.93vw;
  line-height: 0.72;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #0b4c80;
}

.rrCol__title > span {
  display: block;
}

.rrCol__sub {
  margin-top: 0.3vw;
  font-size: 0.56em;
  letter-spacing: -0.012em;
}

.rrCol__list {
  margin-top: 1.55vw;
  list-style: none;
  padding: 0;
}

.rrCol__list li {
  font-family: var(--font-body);
  font-size: 1.215vw;
  font-weight: 600;
  line-height: 2.36vw;
  letter-spacing: -0.01em;
  color: #1b1b1b;
}

/* Photo: full width, pinned to the band's foot, above the rule. */
.rrServices__media {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
}

.rrServices__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Below 1200px the comp's type would get too small, so it stops scaling
   down; the band grows to fit instead of holding the comp's aspect. */
@media (max-width: 1199px) {
  .rrServices {
    aspect-ratio: auto;
    padding-top: 4rem;
    padding-bottom: 29vw;
  }

  .rrCol__title {
    font-size: 3.6rem;
  }

  .rrCol__sub {
    margin-top: 0.25rem;
  }

  .rrCol__list {
    margin-top: 1.25rem;
  }

  .rrCol__list li {
    font-size: 0.95rem;
    line-height: 1.9;
  }

  .rrCol:first-child {
    padding-right: 2.75rem;
  }

  .rrCol:last-child {
    padding-left: 2.75rem;
  }
}

/* Phone: columns stack, the rule goes, and the photo is cropped taller
   around the pin so it does not shrink to a sliver. */
@media (max-width: 767px) {
  .rrServices {
    padding-top: 3rem;
    padding-bottom: 0;
  }

  .rrServices__rule {
    display: none;
  }

  .rrServices__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    padding-inline: var(--gutter);
  }

  .rrCol:first-child,
  .rrCol:last-child {
    justify-self: stretch;
    text-align: left;
    padding: 0;
  }

  .rrCol__title {
    font-size: 3rem;
  }

  .rrServices__media {
    position: relative;
    margin-top: -2rem;
  }

  .rrServices__media img {
    height: clamp(15rem, 70vw, 20rem);
    object-fit: cover;
    object-position: 50% 100%;
  }
}

/* --- Why choose us -------------------------------------------------------
   Measured off the 2250px comp (1vw = 22.5px there):
     photo      0 → 42.9vw wide, flush left, 965×1057
     gold block 157×182, 27px past the photo's right edge and 26px below
     C mark     grey, 39vw tall, rising from behind the photo
     copy       starts at 48.2vw; reasons in two 20vw columns
   The band fades from white to #eee at the foot, as the comp does.
   ------------------------------------------------------------------------- */

.rrWhy {
  position: relative;
  padding-top: clamp(3.5rem, 9.6vw, 13.5rem);
  padding-bottom: clamp(3.5rem, 6.2vw, 8.75rem);
  background: linear-gradient(to bottom, #fff 0%, #fff 55%, #eeeeee 100%);
  overflow: hidden;
  isolation: isolate;
  padding-left: 80px;

}

.rrWhy__grid {
  position: relative;
  display: grid;
  grid-template-columns: 42.9vw minmax(0, 1fr);
  grid-column-gap: 5.3vw;
  column-gap: 5.3vw;
  align-items: start;
  padding-right: var(--gutter);
}

.rrWhy__media {
  position: relative;
  z-index: 1;
}

.rrWhy__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 965 / 1057;
  object-fit: cover;
}

/* Sits behind the photo; only its bottom-right edge shows. */
.rrWhy__corner {
  position: absolute;
  z-index: 0;
  right: -2.8%;
  bottom: -2.46%;
  width: 16.3%;
  height: 17.2%;
  background: #f9a51a;
}

/* The C — the brand monogram as a flat #f0f0f0 shape (rr-c-mark.png, black
   at ~6% alpha, so it reads the same over the grey fade at the foot). Its
   left half hides behind the photo; the open side faces the copy. */
.rrWhy__mark {
  position: absolute;
  z-index: 0;
  left: 26.4vw;
  top: calc(clamp(3.5rem, 9.6vw, 13.5rem) + 3.6vw);
  height: 39vw;
  aspect-ratio: 718 / 741;
  background: url(/images/rr-c-mark.png) center / contain no-repeat;
  pointer-events: none;
}

.rrWhy__copy {
  position: relative;
  z-index: 1;
  padding-top: 1.55vw;
  max-width: 44rem;
}

.rrWhy__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 0.9rem + 4.1vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #0b4c80;
}

.rrWhy__title span {
  display: block;
}

.rrWhy__lead {
  margin-top: clamp(1rem, 1.6vw, 2.2rem);
  max-width: 34em;
  font-size: clamp(0.92rem, 0.7rem + 0.42vw, 1.4rem);
  font-weight: 400;
  line-height: 1.5;
  color: #1b1b1b;
}

.rrWhy__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 20vw));
  grid-gap: clamp(1.75rem, 3vw, 4.2rem) 0;
  gap: clamp(1.75rem, 3vw, 4.2rem) 0;
  margin-top: clamp(2rem, 3.5vw, 4.9rem);
  list-style: none;
  padding: 0;
}

.rrPoint__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 0.6rem + 1.55vw, 2.7rem);
  line-height: 1;
  color: #0f2c5f;
}

.rrPoint__title span {
  display: block;
}

.rrPoint__body {
  margin-top: 0.45em;
  max-width: 16.5em;
  font-size: clamp(0.85rem, 0.65rem + 0.38vw, 1.25rem);
  font-weight: 400;
  line-height: 1.4;
  color: #2b2b2b;
}

/* Stacked: photo first (still flush left, gold corner kept), copy below. */
@media (max-width: 1024px) {
  .rrWhy__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(2.5rem, 7vw, 4rem);
  }

  .rrWhy__media {
    width: min(100%, 36rem);
  }

  .rrWhy__copy {
    max-width: none;
    padding-top: 0;
    padding-left: var(--gutter);
  }

  .rrWhy__points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .rrWhy__mark {
    left: auto;
    right: -30vw;
    top: auto;
    bottom: 8%;
    height: 80vw;
  }
}

@media (max-width: 560px) {
  .rrWhy__points {
    grid-template-columns: minmax(0, 1fr);
  }
  .rrWhy {  padding-left: 20px; }
      .rrServices__media {  display: none;  }
  .rrServices {  background: #f5f5f5;  }
      .rrCol:first-child  {
        padding: 0 0 40px;  border-bottom: solid 1px #ccc;
    }
       .rrCol:last-child  {
        padding: 0 0 40px;  
    }
   .rrCol li {
    position: relative;
    padding-left: 1.5rem;
 }
    .rrCol li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.62em;
    height: 0.62em;
    background: rgba(24, 24, 24, 0.55);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.rrWhy__copy {   padding-left: 0;   text-align: center;  }
.rrPoint__body {   max-width: 95%; }
}