/*!**************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/projects.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   Project listing pages — /projects/ongoing, /projects/upcoming
   -------------------------------------------------------------------------
   Loaded only by components/projects/ProjectsPage.jsx. Everything is
   namespaced under a p- prefix or .projectsPage so it cannot leak into the
   shared sheets.

   The banner uses the shared .bannerOpen primitive — see "Banner opening" in
   globals.css. This sheet only sets its height and what sits on top of it.
   ========================================================================= */

/* Behind the hero and the banner, so the gap between them and the page edge
   stays navy rather than showing white through. */
.projectsPage {
  background: var(--navy-900);
}

/* =========================================================================
   Hero
   ========================================================================= */

/* Radial rather than the linear --grad-navy: the comp lights the middle of
   the band and falls away to the corners, which a 135deg ramp cannot do. */
.pHero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4.5rem));
  padding-bottom: clamp(2rem, 5vw, 4rem);
   background: #0a1d49;
  color: #fff;
}

.pHero__inner {
  text-align: center;
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}

/* Far bigger than --fs-h1 tops out at, and set in the regular weight rather
   than the bold — at this size the condensed face already reads as heavy, and
   700 closes the counters up. Leading is tighter than the cap height, which
   is what packs the two lines into a block. */
.pHero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 80px;
  line-height: 0.86;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.pHero__line {
  display: block;
}

.pHero__title .is-gold {
  color: var(--gold-500);
}

/* A ruled band, hairlines above and below rather than either side — the same
   device as the city tabs further down the page. The band hugs the label, so
   the rules end just past the tracking.

   Set in the body face: the label is widely tracked, which the condensed
   display face does not take well. */
.pHero__eyebrow {
  width: max-content;
  max-width: 100%;
  margin: clamp(1.2rem, 2.6vw, 2.4rem) auto 0;
  padding: clamp(0.5rem, 1.1vw, 0.95rem) clamp(0.4rem, 0.9vw, 0.9rem);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--font-body);
  font-size: clamp(0.68rem, 1.2vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0.55em;
  text-indent: 0.55em; /* balances the trailing tracking space */
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* =========================================================================
   Banner
   ========================================================================= */

.pReveal {
  padding-block: clamp(1rem, 2vw, 2rem);
}

/* Shallower than the About and Contact banners — this one sits between a
   headline and a tab rail rather than carrying a screen on its own. */
.pBanner {
  height: clamp(240px, 38vw, 700px);
  margin: 0;
}

.pBanner__img {
  object-position: center 42%;
}

/* Scrim so the caption holds against any photograph. */
.pBanner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(4, 20, 45, 0.82), transparent 52%);
}

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

/* Block, so each line wipes up behind the .maskUp clip on its own delay, and
   so the lines break where the comp breaks them rather than wherever the card
   width happens to wrap them. */
.pBanner__line {
  display: block;
  white-space: nowrap;
}

.pBanner__caption .is-gold {
  color: var(--gold-500);
}

/* =========================================================================
   City tabs
   -------------------------------------------------------------------------
   A ruled band: hairlines above and below, the tabs set between them in the
   condensed display face, and the active city carrying a thick rounded bar
   that straddles the lower rule.

   The band hugs its content rather than spanning the shell — the rules run
   just past the outermost tabs, so its width is the tabs plus a little
   breathing room, centred.
   ========================================================================= */

.pTabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  margin-inline: auto;
  gap: clamp(1.5rem, 3.8vw, 4.75rem);
  padding-inline: clamp(1rem, 2.6vw, 3.25rem);
  border-top: 1px solid rgba(255, 255, 255, 0.32);
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
}

/* Title case, not uppercase, and padded on the tab rather than the band so
   each tab's box reaches the rules for the active bar to straddle.

   D-DIN Condensed ships only 400 and 700, so the weight change between
   inactive and active uses exactly those two — asking for 500 or 600 would
   make the browser synthesise a smeared weight. */
.pTab {
  position: relative;
  padding-block: clamp(0.55rem, 1.3vw, 1.15rem);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 3.3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.92);
  transition: color 0.4s var(--ease);
}

.pTab:hover {
  color: #fff;
}

.pTab.is-active {
  font-weight: 700;
  color: #fff;
}

/* Runs a little wider than the label and sits centred on the lower rule.
   Grows from the centre, so switching cities reads as the bar travelling
   rather than blinking on and off. */
.pTab::after {
  content: "";
  position: absolute;
  left: -0.3em;
  right: -0.3em;
  bottom: -4px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: #fff;
  transform: scaleX(0);
  transition: transform 0.45s var(--ease);
}

.pTab.is-active::after {
  transform: scaleX(1);
}

/* --- Property-type rail (Apartment | Villa | Plots) ----------------------
   Sits under the city rail: smaller body type, thin dividers between items,
   gold label and gold underline on the active one. */
.pSubTabs {
  display: flex;
  justify-content: center;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: clamp(1rem, 2vw, 1.6rem) auto 0;
}

.pSubTab {
  position: relative;
  padding: 0.35em clamp(1.6rem, 4.6vw, 4.4rem) 0.45em;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  transition: color 0.4s var(--ease);
}

/* Hairline divider between items. */
.pSubTab + .pSubTab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 1.1em;
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%);
}

.pSubTab:hover,
.pSubTab.is-active {
  color: var(--gold-500);
}

/* Underline spans the label only, not the padding around it. */
.pSubTab::after {
  content: "";
  position: absolute;
  left: clamp(1.6rem, 4.6vw, 4.4rem);
  right: clamp(1.6rem, 4.6vw, 4.4rem);
  bottom: 0;
  height: 3px;
  background: var(--gold-500);
  transform: scaleX(0);
  transition: transform 0.45s var(--ease);
}

.pSubTab.is-active::after {
  transform: scaleX(1);
}

@media (max-width: 640px) {
  .pSubTab {
    padding-inline: 1.1rem;
  }

  .pSubTab::after {
    left: 1.1rem;
    right: 1.1rem;
  }
}

/* =========================================================================
   Listing cards
   -------------------------------------------------------------------------
   One navy plate per development, with the render hanging off its left edge
   and the information panel sitting on its right. Three layers:

     .pCard__plate   the navy rounded plate, inset from the left
     .pCard__media   the render, clipped to a leaf — a deep arc on the left,
                     barely-rounded right edge running under the panel
     .pCard__panel   lockup, white detail box, and the CTA pill beneath

   Layered with grid areas rather than absolute positioning, so the card can
   collapse to a stack at the breakpoint without anything having to be
   un-positioned.
   ========================================================================= */

.pList {
  padding-block: clamp(3rem, 7vw, 6.5rem);
  background: var(--paper);
  color: var(--ink-900);
}

.pList__empty {
  max-width: 46ch;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-lead);
  color: var(--ink-500);
}

.pCard {
  position: relative;
  display: grid;
  /* The boundary between the columns is where the render's right edge and
     the white box's left edge meet — in the comp they are flush, so the
     split is the render's width. */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
 
}

.pCard + .pCard {
  margin-top: clamp(2.5rem, 6vw, 6rem);
}

/* --- Card slider ----------------------------------------------------------
   One card per slide on a scroll-snap track. The track clips sideways, so it
   carries vertical padding for the pieces that hang off a card (the CTA pill
   under the panel). */
/* The track spans the full page width; each card keeps the shell's content
   width (--pcw) and is centred by equal side padding, so the neighbouring
   cards show at the edges. Percentages here resolve against the full-width
   section, which is what makes the maths line up with .shell. */
   .pSlider{display: flex; flex-direction: column;}
.pSlider__track {
  --pcw: calc(min(100%, var(--maxw)) - 2 * var(--gutter));
  display: flex;
  gap: var(--gutter);
  padding-inline: calc((100% - var(--pcw)) / 2);
  scroll-padding-inline: calc((100% - var(--pcw)) / 2);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: 10px 60px;
  outline: none;
  order: 2;
}
.pSlider__nav{ order: 1;}

.pSlider__track::-webkit-scrollbar {
  display: none;
}

/* 100% of the track's content box = the shell's content width. */
.pSlider__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Only the card in view is at full strength; its neighbours at the edges
   sit back at half opacity. */
.pSlider__slide {
  opacity: 0.5;
  transition: opacity 0.5s var(--ease);
}

.pSlider__slide.is-active {
  opacity: 1;
}

.pSlider__slide .pCard + .pCard {
  margin-top: 0;
}

.pSlider__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(0.5rem, 1.5vw, 1.25rem);
}

.pSlider__btn {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid rgba(12, 58, 108, 0.3);
  border-radius: 50%;
  background: #fff;
  color: #0b4c80;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}

.pSlider__btn svg {
  width: 22px;
  height: 22px;
}

.pSlider__btn:hover:not(:disabled) {
  background: #0b4c80;
  border-color: #0b4c80;
  color: #fff;
}

.pSlider__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.pSlider__count {
  min-width: 5ch;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: #0b4c80;
}

.pSlider__count i {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-500);
}

/* --- Navy plate ---------------------------------------------------------- */

.pCard__plate {
  position: absolute;
  z-index: 0;
  /* Left edge lands inside the render, so the render's arc reads as cut out
     of the plate rather than laid beside it. */
  left: 30%;
  right: 0;
  /* Percentages, not a clamp: the plate's insets are a proportion of the card
     in the comp, so they have to track the render's height rather than sit at
     a fixed rem value that drifts out of ratio as the card scales. */
      top: 116px;
    bottom: 0;
  border-radius: var(--radius-lg);
  background: #0b4c80;
      height: 79%;
}

/* --- Render -------------------------------------------------------------- */

/* drop-shadow rather than box-shadow: the render is clipped to a leaf, and a
   box-shadow would be drawn from the unclipped rectangle and hang in mid-air
   around the arc. */
.pCard__media {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
      margin: 0;
 
}

/* A tinted underlay in the same shape, so a cut-out render with a
   transparent background still reads as a solid leaf rather than showing the
   page through it. Sits under the image; harmless behind an opaque photo. */
.pCard__media::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
 
}

/* The leaf. Measured off the comp: the left arc reaches about a third of the
   way across but runs the render's full height, so its horizontal radius is
   much smaller than its vertical one. The right corners are only lightly
   rounded — that edge runs under the navy panel, so it is barely seen.

   Set on the container as well as the image so ::before inherits it. */
.pCard__media,
.pCard__media img,
.pCard__fallback {
   
}

/* The render sits in a <picture> (for the phone-only source), which must
   not add an inline gap under the image. */
.pCard__media picture {
  display: block;
}

.pCard__media img,
.pCard__fallback {
  position: relative;
  display: block;
  width: 100%;
   
}

/* Fallback when a development has no render yet — the watermark name on a
   tinted plate, so the card keeps its shape. */
.pCard__fallback {
  display: grid;
  place-items: center;
  background: var(--grad-navy-panel);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 3rem);
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.45);
}

/* --- Panel --------------------------------------------------------------- */

.pCard__panel {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  padding: 80px 30px 0 0;
}

/* Ranged left, flush with the white box below it — not centred in the panel.
   The lockups vary a lot in width (Eternity's pillars against Solitaire's
   diamond), and centring makes that variation read as misalignment. */
.pCard__lockup {
  display: flex;
  justify-content: flex-start;
  padding: 77px 0 0;
    height: 185px;
 
}

.pCard__lockup .lockup--art {
  width: clamp(160px, 21vw, 350px);
     height : 93px;
   filter: brightness(0) invert(1);
}

/* --- White detail box ---------------------------------------------------- */

.pCard__box {
  position: relative;
  z-index: 1;
  padding: 30px 35px 40px;
  border-radius: 20px 20px 0 0;
  background: var(--paper);
  box-shadow: 0 18px 40px rgba(6, 34, 74, 0.16);
}

.pCard__name {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 1.9vw, 2.15rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy-500);
}

.pCard__place {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding-bottom: clamp(0.8rem, 1.4vw, 1.15rem);
  border-bottom: 1px solid var(--line);
  font-size:20px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-900);
}

.pCard__pin {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  color: var(--gold-500);
}

/* --- Figures ------------------------------------------------------------- */

.pCard__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: clamp(0.8rem, 1.6vw, 1.3rem) clamp(1rem, 2vw, 1.6rem);
  gap: clamp(0.8rem, 1.6vw, 1.3rem) clamp(1rem, 2vw, 1.6rem);
  padding-block: clamp(0.8rem, 1.6vw, 1.25rem);
}

/* Hairline between the two rows, matching the one under the location. Drawn
   on the third and fourth cells rather than as a separate element so it
   disappears with them if a figure is missing. */
.pCard__stat:nth-child(n + 3) {
  padding-top: clamp(0.8rem, 1.6vw, 1.25rem);
  border-top: 1px solid var(--line);
}

.pCard__stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.pCard__statLabel {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink-700);
}

.pCard__statValue {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
     color: #073b72; 
      letter-spacing: -1px;
}

/* The comp sets the ampersand a good deal smaller than the numerals it joins,
   so "2, 3, 4 & 5" reads as one figure rather than a list. */
.pCard__amp {
  font-size: 0.55em;
  font-weight: 400;
  padding-inline: 0.15em;
}

   .pCard__panel .exbloretwoBtn > .btn{background-image: none;}
.pCard__panel .exbloretwoBtn {     position: absolute;
    bottom: -18px;
    z-index: 10;
    left: -5px;
    background-image: var(--grad-cta-orange);
    border-radius: 35px;
    width: 110%;
    justify-content : center;
    max-width: 97%; box-shadow: 0 16px 34px rgba(4, 20, 45, 0.42);}
/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1480px) {
   .pHero__title {  font-size: 75px;}
   .pTab {  font-size: 45px;}
   .pBanner__caption {  font-weight: 500;  font-size: 48px;}
   .pCard__plate {    top: 113px; }
  
}


@media (max-width: 1300px) {
.pCard__statValue {
    font-size: 28px;}
    .pHero__title {  font-size: 75px;}
     .pCard__lockup .lockup--art {  height: 74px;}
     .pCard__plate {   height: 77%;     top: 106px; }
     .pCard__box {   padding: 23px 26px 26px;}
}


@media (max-width: 1200px) {

  .pHero__title {  font-size: 70px;}
  .pCard {  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);  }
  .pCard__statValue {
    font-size: 24px;}
.pCard__plate {   height: 66%; }
.pCard__box {   padding: 13px 19px 19px;}
.exbloretwoBtn button {  font-size: 12px; }
.exbloretwoBtn  a {    font-size: 12px; }
.pCard__lockup .lockup--art {  height: 80px;}
.lockup {    margin: 0 0 8px; }
.pCard__place {   font-size: 18px;}
.pTab { font-size: 40px;}
.pCard__lockup {  padding: 70px 0 10px; }
    .pCard__plate {  top: 125px;}
 
}

@media (max-width: 960px) {
  /* No room to overlap — the card stacks, so the plate goes behind the whole
     thing and the render loses its leaf for a plain rounded plate. */
  .pCard {
    grid-template-columns: minmax(0, 1fr);
  }

  .pCard__media,
  .pCard__panel {
    grid-column: 1;
  }

  .pCard__media {
    grid-row: 1;
  }

  /* The left padding was zeroed so the box could meet the render's edge; with
     nothing to its left the panel needs its gutters back. */
  .pCard__panel {
    grid-row: 2;
    padding-inline: clamp(0.75rem, 3vw, 2rem);
  }
  .pCard__panel .exbloretwoBtn {  left: 5%;   margin: 0 auto;    width: max-content;}

  .pCard__plate {
    left: 0;
    top: clamp(4rem, 22vw, 10rem);
     bottom: 0;
    height: 85%;
        border-radius: 150px 0 0;
  }

  .pCard__actions > .btn + .btn{  box-shadow: none !important;}
  .pCard__panel {  padding: 0 20px 0 ; }
      .pCard__lockup {
        padding: 26px 0 10px;
    }
    .pCard__lockup {   height: 130px;
}
 
  /* Stacked, so the leaf becomes a plain rounded plate — the arc only makes
     sense when there is a panel to its right for it to bite into. */
  .pCard__media,
  .pCard__media img,
  .pCard__fallback {
    border-radius: var(--radius-lg);
  }
  

}

@media (max-width: 620px) {
  .pCard__stats {
    grid-template-columns: minmax(2, 1fr);
  }


  .pCard__actions {
    flex-direction: column;
  }

  /* Stacked, so the hairline moves from the left edge to the top one. */
  .pCard__actions > .btn + .btn {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }

  .pBanner__line {
    white-space: normal;
  }
      .pCard__panel .exbloretwoBtn {
        width: 89%;
    }
        .pHero__title {
        font-size: 50px;
    }
    .pBanner__caption {
        font-weight: 500;
        font-size: 35px;
    }
        .exbloretwoBtn button {
        font-size: 14px;
    }
        .exbloretwoBtn a {
        font-size: 14px;
    }
    .pCard__panel .exbloretwoBtn {  bottom: -50px;}
    .pCard {
        margin: 0 0 30px;
    }
     .pTabs {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        gap: 1.5rem;
        padding-inline: 1rem;
        margin-inline: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pTabs::-webkit-scrollbar {
        display: none;
    }

    .pTabs > * {
        flex: 0 0 auto;
    }
    .pTab {  font-size: 30px;  }
    .pCard__statLabel {  font-size: 13px;}
    .pCard__media, .pCard__media img, .pCard__fallback {
        border-radius: 0;
    }
        .pCard__place {   font-size: 15px;  }
        .pCard__stat:nth-child(n + 3) {   padding-top: 0;  border-top: none; }
        .pSlider__nav {  margin-top: -39px; }
        .pCard__panel button.btn{display: none;}
        .pCard__panel .exbloretwoBtn {   bottom: -22px; }
        .pSubTab {  font-size: 18px;}
        .pHero__title {  font-size: 42px;  }
            .pCard__panel {    padding: 0 7px;   }
            .pSlider{  display: flex;   flex-direction: column;     padding: 0;}
  .pSlider__track {   order: 2;
}
    .pSlider__nav {   order: 1;    margin: 0 0 20px;}
 
.pList{padding-bottom: 0;} 
.pCard__panel .exbloretwoBtn {
        bottom: 0;
        position: relative;
    }

}

/* ---- City rail: prev/next arrows on phones ------------------------------
   Above 620px the wrapper is transparent to layout, so the band still hugs
   its tabs and centres itself, and the arrows are off. At 620px and under the
   rail scrolls sideways and the wrapper becomes the row: arrow, rail, arrow. */
.pTabsNav {
  display: contents;
}

.pTabs__arrow {
  display: none;
}

@media (max-width: 620px) {
  .pTabsNav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: clamp(1.25rem, 4vw, 2rem);
  }

  /* The rail's own top margin moves to the wrapper, so the arrows sit level
     with the rules rather than below them. */
  .pTabsNav .pTabs {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
  }

  .pTabs__arrow {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background: none;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.25s var(--ease);
  }

  /* Chevron drawn from two borders — no icon file. */
  .pTabs__arrow span {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
  }

  .pTabs__arrow--prev span {
    transform: rotate(135deg);
    margin-left: 2px;
  }

  .pTabs__arrow--next span {
    transform: rotate(-45deg);
    margin-right: 2px;
  }

  .pTabs__arrow:disabled {
    opacity: 0.3;
    cursor: default;
  }
   .pCard__lockup {      display: none;   }
    .pCard__box {  background: transparent;}
}

/* =========================================================================
   Phone card: the figures become the card
   ------------------------------------------------------------------------
   ≤620px the white plate is dropped for the navy block from the comp — four
   quarters split by hairlines, white captions over gold figures. Desktop and
   tablet keep the white detail box untouched. Last in the file so it wins
   over the earlier ≤620 tweaks above.
   ========================================================================= */

@media (max-width: 620px) {
  .pCard__box {
    padding: 16px 0 0;
    border-radius: 14px;
    background: #0a3a72;
    box-shadow: 0 16px 34px rgba(4, 20, 45, 0.32);
    color: #fff;
    overflow: hidden;
  }

  .pCard__name {
    padding-inline: 16px;
    font-size: 20px;
    color: #fff;
  }

  /* The rule under the location is dropped — the grid's own top hairline
     does that job now, without doubling up. */
  .pCard__place {
    padding: 0 16px 14px;
    border-bottom: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.86);
  }

  .pCard__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0;
  }

  /* Hairlines drawn per cell: a top rule on every quarter and a right rule on
     the left-hand pair, which together make the cross in the comp. */
  .pCard__stat,
  .pCard__stat:nth-child(n + 3) {
    align-items: center;
    gap: 4px;
    padding: 16px 8px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    text-align: center;
  }

   .pCard__stat:nth-child(1) {border-top: none;}
      .pCard__stat:nth-child(2) {border-top: none;}

  .pCard__stat:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.18);
  }

  .pCard__statLabel {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
  }

  /* Sized so the longest figure — the sq ft range — still holds one line
     inside half the card. */
  .pCard__statValue {
    font-size: clamp(1.1rem, 5.6vw, 1.75rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--gold-500);
    white-space: nowrap;
  }

  /* Room under the last row for the CTA pill that overlaps the bottom edge. */
  .pCard__stat:nth-child(n + 3) {
    padding-bottom: 34px;
  }
       .pCard__panel .exbloretwoBtn {  left: 0;}
    .pCard__panel .pCard__box{background: transparent;  box-shadow: inherit; margin-bottom: 10px;}
        .pCard__panel {
        padding: 10px 0 30px;
        background-image: linear-gradient(to right, #003065, #003e79);
        text-align: center;   
    }
        .pCard__place {  justify-content : center;  }
            .exbloretwoBtn > .btn + .btn::before {  background: none;  }
}

/* ---- Upcoming: poster grid ---------------------------------------------- */
.uGrid {
  --uGap-x: clamp(1rem, 2.2vw, 1.5rem);
  --uCols: 3;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 80%;
  /* Flex rather than grid so a short last row (or a city with only one or
     two cards) sits centred instead of hugging the left. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 3.4vw, 2.5rem) var(--uGap-x);
}

.uCard {
  flex: 0 0 calc((100% - (var(--uCols) - 1) * var(--uGap-x)) / var(--uCols));
  display: flex;
  flex-direction: column;
  background: linear-gradient(to right, #062b5b, #02407d);
  overflow: hidden;
}

.uCard__media {
  aspect-ratio: 219 / 190;
  overflow: hidden;
  background: #dfe6ee;
}

.uCard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.uCard:hover .uCard__media img { transform: scale(1.04); }

.uCard__label {
  display: grid;
  justify-items: center;
  grid-gap: 4px;
  gap: 4px;
  padding: 12px 8px 14px;
  color: #fff;
  text-align: center;
}

.uCard__name {
  margin: 0;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.uCard__place {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.uCard__pin {
  width: 11px;
  height: 11px;
  flex: none;
  color: #f5a11a;
}

@media (max-width: 1680px) {
.pHero__title {  font-size:65px;}
.pHero__eyebrow {  font-size: 15px;}
 .pSlider__track {  padding-inline: calc((110% - var(--pcw)) / 2);}
 .pList {  padding-block: 60px;}
 .pCard__plate {  height: 77%; }
 .pCard__place {  font-size: 17px;}
}

@media (max-width: 900px) {
  .uGrid { --uCols: 2; max-width: 520px; }
  .pHero__title {   font-size: 38px;  }
      .pHero__eyebrow {    font-size: 13px;  }
      .pCard__place {     font-size: 14px;  }
}

@media (max-width: 480px) {
  .uGrid { --uCols: 1; max-width: 320px; }
  .pSlider__btn {  width: 40px;  height: 40px;}
}

/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/stories.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   "Stories that Reflect" (.st) — shared section
   -------------------------------------------------------------------------
   Extracted from project.css so pages other than the project detail page
   (NRI, Careers) can use components/project/Stories.jsx without loading the
   whole project sheet. project.css keeps its own copy for the project page.
   ========================================================================= */



.st {
  padding-block: clamp(3rem, 7vw, 6rem);
  background: var(--paper-alt);
  overflow: hidden;
}

.st__head {
  text-align: center;
}

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

.st__sub {
  margin-top: 0.2rem;
}

.st .rating {
  width: max-content;
  margin-inline: auto;
}

.st__stage {
  display: grid;
  margin-top: clamp(1.75rem, 4vw, 3rem);
}

.st__stage > * {
  grid-area: 1 / 1;
}

.st__rail {
  overflow: hidden;
  cursor: -webkit-grab;
  cursor: grab;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.st__rail.is-dragging,
.st__rail:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.st__track,
.st__set {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.st__track {
  width: max-content;
  will-change: transform;
  position: relative;
  top: 90px;
}

.stQuote {
  position: relative;
  z-index: 1;
  place-self: center;
  isolation: isolate;
  overflow: hidden;
  width: min(46rem, 78vw);
  padding: clamp(1.5rem, 3.5vw, 3.25rem);
  background: #fff;
  /* Barely there — the card reads as a flat plate on the grey, not a raised
     panel, so the shadow only has to separate it from the thumbnails. */
  box-shadow: 0 24px 60px rgba(6, 34, 74, 0.07);
}

.stQuote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 55%;
    height: 100%;
    aspect-ratio: 1;
    pointer-events: none;
    background: url(/media/story-c-bg.png) no-repeat;
    filter: grayscale(100%) opacity(0.9);
    background-size: 100%;
}

.stQuote__mark {
  position: absolute;
  top: 50%;
  left: 4%;
  z-index: -1;
  font-family: var(--font-display);
  font-size: clamp(20rem, 34vw, 34rem);
  font-weight: 700;
  line-height: 0.68;
  color: rgba(6, 34, 74, 0.045);
  transform: translateY(-48%);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: none;
}

.stQuote__all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  float: right;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-900, var(--navy-900));
  transition: color 0.35s var(--ease);
}

.stQuote__all .arrowIcon {
  width: 1.2rem;
  height: 1.2rem;
  transition: transform 0.35s var(--ease);
}

.stQuote__all:hover {
  color: var(--gold-500);
}

.stQuote__all:hover .arrowIcon {
  transform: translateX(4px);
}

.stQuote__body {
  clear: both;
  animation: stFade 0.7s var(--ease) both;
}

.stQuote__quote {
  margin: clamp(1.25rem, 3vw, 2.25rem) 0 0;
  font-size:30px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy-900);
  margin-bottom: 20px;
}

.stQuote__text {
 position: relative;
    color: #12121d;
    max-width: 46ch;
    line-height: 1.3;
}

.stQuote__by {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.stQuote__avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
  width: clamp(48px, 4vw, 62px);
  height: clamp(48px, 4vw, 62px);
  background: var(--paper-blue);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy-500);
}

.stQuote__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stQuote__by strong {
    display: block;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 25px;
    color: #0f3d6a;
    line-height: 1;
}

.stQuote__by em {
     font-weight: 500;
    font-style: normal;
    font-size: 16px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #1c1414;
}

.stVideo {
  position: relative;
  overflow: hidden;
  width: clamp(200px, 20vw, 345px);
  margin: 0;
  aspect-ratio: 6 / 5;
  background: var(--paper-blue);
  cursor: pointer;
}

.stVideo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.stVideo:hover img {
  transform: scale(1.05);
}

.stVideo .storyVideo__play {
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
}

.stVideo:hover .storyVideo__play {
  transform: translate(50%, 50%) scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .stQuote__body {
    animation: none;
  }

  .stVideo img {
    transition: none;
  }
}

@media (max-width: 1480px) {
.stQuote__quote{font-size: 25px;}
}

@media (max-width: 500px) {
                   .stQuote__quote {   font-size: 18px; }
                   .stQuote__by em { font-size: 13px;}
                   .stQuote__by strong {  font-size: 22px;}
  }

@media (max-width: 900px) {
  .stQuote {
    display: none;
}
.st__track{top:0;}
}

@keyframes stFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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;
    }
  }