/*!**************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/legal.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   Legal pages — /privacy-policy (and any terms / disclaimer page later)
   -------------------------------------------------------------------------
   Hero: the p- band from projects.css, with no photo banner.
   Body: white; one centred column of numbered sections.
   ========================================================================= */

/* Navy behind everything so the band never shows white while the hero
   paints, matching .careersPage. */
.legalPage {
  background: var(--navy-900);
}

/* --- Hero ---------------------------------------------------------------- */

/* No banner below it, so the band keeps its own bottom padding and the
   eyebrow rules close the composition. */
.legalHero {
  padding-bottom: clamp(2.5rem, 6vw, 5.5rem);
}

.legalHero__inner {
  padding-bottom: 0;
}

/* --- Body ---------------------------------------------------------------- */

.legalBody {
   background: var(--paper);
  color: var(--ink-900);
  padding: 80px 30px;
}

.legalBody__inner {
  max-width: min(100%, calc(60rem + 2 * var(--gutter)));
}

/* --- Text ---------------------------------------------------------------- */

.legalBody__intro {
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
}

.legalBody__intro p {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-700);
}

/* The opening paragraph carries the lead size; the rest read as body. */
.legalBody__intro p:first-child {
   line-height: 1.5;
  color: var(--navy-800);
  font-weight: 600;
}

.legalBody__intro p + p {
  margin-top: var(--sp-4);
}

.legalSec {
  /* Keeps the fixed header off the heading when a rail link lands here. */
  scroll-margin-top: calc(var(--header-h) + 1.25rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--line);
}

.legalSec + .legalSec {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

.legalSec__title {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  grid-column-gap: 0.9rem;
  column-gap: 0.9rem;
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--navy-700);
}

.legalSec__num {
  font-size: 0.68em;
  letter-spacing: 0.06em;
  color: #6a6a6a;
}

.legalSec p,
.legalSec li {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-700);
}

.legalSec p {
  margin: 0;
}

.legalSec p + p,
.legalSec ul + p,
.legalSec address + p {
  margin-top: var(--sp-4);
}

.legalSec__list {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
}

.legalSec__list li {
  position: relative;
  padding-left: 1.4rem;
}

.legalSec__list li + li {
  margin-top: var(--sp-3);
}

/* Gold tick-mark bullet, sized to the x-height. */
.legalSec__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 0.6rem;
  height: 2px;
  background: var(--gold-500);
}

.legalLink {
  color: var(--navy-500);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.25s var(--ease);
}

.legalLink:hover,
.legalLink:focus-visible {
  border-color: var(--navy-500);
}

/* --- Sub-headings -------------------------------------------------------- */

.legalSub {
  margin-top: var(--sp-5);
}

.legalSub__title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
   letter-spacing: 0;
    text-transform: capitalize;
  color:#000;
}

/* A group label ("A. …") with nothing under it: no bottom margin of its own,
   and the sub after it sits closer than the usual gap. */
.legalSub__title:only-child {
  margin-bottom: 0;
}

.legalSub:has(> .legalSub__title:only-child) + .legalSub {
  margin-top: var(--sp-4);
}

/* --- Contact card -------------------------------------------------------- */

.legalContact {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: var(--sp-5);
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
  border-left: 3px solid var(--gold-500);
  background: var(--paper-alt);
  font-style: normal;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-700);
}

.legalContact strong {
  font-weight: 700;
  color: var(--navy-800);
}

.legalContact a {
  width: max-content;
  color: var(--navy-500);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.25s var(--ease);
}

.legalContact a:hover {
  border-color: var(--navy-500);
}

/* --- Narrow screens ------------------------------------------------------ */

@media (max-width: 560px) {
  .legalSec__title {
    font-size: clamp(1.5rem, 1.2rem + 2.2vw, 1.9rem);
  }
}