/*!**************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/careers.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   Careers — /careers
   -------------------------------------------------------------------------
   Loaded only by careers/page.js, after projects.css (the hero reuses the
   listing pages' .pHero / .pBanner). Everything here is prefixed cr-.

     .crHero   headline + banner (p- classes)
     .crWhy    navy — "Why you'll love working here"
     .crLife   light — six points beside a photograph
     .crJobs   navy — open roles slider
     .crForm   white — application form
   ========================================================================= */

.careersPage {
  background: #0a1d49;
}

/* --- Hero: flows straight into the "why" band -------------------------- */

.crHero {
  padding-bottom: 0;
}

/* --- Why you'll love working here -------------------------------------- */

.crWhy {
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(3.5rem, 7vw, 7rem);
  background: #0a1d49;
  color: #fff;
  text-align: center;
}
.crWhy h2.display{color: #fff;}
.crWhy__title {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.6rem);
}

.crWhy__body {
  max-width: 80%;
  margin: var(--sp-5) auto 0;
  font-size: clamp(0.9rem, 0.82rem + 0.3vw, 1.1rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}
/* Second and later paragraphs sit close under the first. */
.crWhy__body + .crWhy__body {
  margin-top: var(--sp-3);
}

/* --- Life at Radiance --------------------------------------------------- */

.crLife {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 6rem) clamp(3rem, 5vw, 5rem);
  background: linear-gradient(180deg, #fff 0%, #fff 55%, #eeeeee 100%);
  color: var(--ink-900);
}

/* The faint grey ring hanging off the left edge. */
.crLife__ring {
     position: absolute;
    z-index: 0;
    left: -12vw;
    top: 22%;
    height: 30vw;
    aspect-ratio: 718 / 741;
    background: url(/images/rr-c-mark.png) center / contain no-repeat;
    pointer-events: none;
}

/* Copy sits in the shell's left half; the photo runs to the right edge. */
.crLife__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-gap: clamp(2rem, 4vw, 4rem);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: stretch;
  padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}

.crLife__copy {
  max-width: 45rem;
  justify-self: end;
  width: 100%;
  padding-top: clamp(0.5rem, 1.5vw, 1.5rem);
}

.crLife__title {
  font-size: clamp(2.2rem, 1.3rem + 3vw, 4.4rem);
  color: var(--navy-500);
}

.crLife__blurb {
  max-width: 50ch;
  margin-top: var(--sp-4);
  font-size: clamp(0.88rem, 0.8rem + 0.25vw, 1.05rem);
  line-height: 1.55;
  color: var(--ink-700);
}

.crLife__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: clamp(1.75rem, 3.4vw, 3.25rem) clamp(1.5rem, 3vw, 3rem);
  gap: clamp(1.75rem, 3.4vw, 3.25rem) clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding: 0;
  list-style: none;
}

.crPoint__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 35px;
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--navy-500);
}

.crPoint__title span {
  display: block;
}

.crPoint__body {
  max-width: 30ch;
  margin-top: var(--sp-2);
  font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.95rem);
  line-height: 1.45;
  color: var(--ink-700);
}

/* Photo with the gold block peeking out bottom-left. */
.crLife__media {
  position: relative;
  margin: 0;
  min-height: clamp(22rem, 44vw, 46rem);
}

.crLife__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crLife__block {
  position: absolute;
  left: clamp(-1.25rem, -1.6vw, -0.75rem);
  bottom: clamp(-1.25rem, -1.6vw, -0.75rem);
  width: clamp(3.5rem, 7vw, 7rem);
  height: clamp(3.5rem, 7vw, 7rem);
  background: var(--gold-500);
}

/* --- Your next opportunity ---------------------------------------------- */

.crJobs {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  background: linear-gradient(180deg, #06224a 0%, #0a3059 100%);
  color: #fff;
  overflow: hidden;
}
.crJobs h2.display{color: #fff;}
.crJobs__title {
  font-size: clamp(2.2rem, 1.3rem + 3vw, 4.4rem);
}

.crJobs__blurb {
  max-width: 62ch;
  margin-top: var(--sp-4);
  font-size: clamp(0.85rem, 0.78rem + 0.25vw, 1rem);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

/* Starts on the shell's left edge and runs off the right of the page. */
.crJobs__track {
  display: flex;
  gap: clamp(1.25rem, 2.6vw, 2.75rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding: 1.5rem 0 1.75rem;
  padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  scroll-padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

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

.crJobs__track::after {
  content: "";
  flex: 0 0 var(--gutter);
}

/* Grab cursor on desktop; snapping off while dragging so the track follows
   the pointer, and text selection off so a drag is not a highlight. */
@media (hover: hover) and (pointer: fine) {
  .crJobs__track {
    cursor: -webkit-grab;
    cursor: grab;
  }
}

.crJobs__track.is-dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.crJobs__track.is-dragging .crJob {
  pointer-events: none;
}

/* --- Rail + arrows under the track --------------------------------------- */

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

/* Thin hairline with a gold thumb; the tall hit area is invisible padding. */
.crRail {
  position: relative;
  flex: 1 1 auto;
  height: 3px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  touch-action: none;
}

.crRail::before {
  content: "";
  position: absolute;
  inset: -10px 0;
}

.crRail__thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--gold-500);
  will-change: transform;
}

.crRail:hover .crRail__thumb {
  background: var(--gold-400);
}

.crJobs__arrows {
  display: flex;
  gap: 0.6rem;
  flex: none;
}

.crJobs__arrow {
  display: grid;
  place-items: center;
  width: clamp(40px, 3.4vw, 48px);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    color 0.3s var(--ease), opacity 0.3s var(--ease);
}

.crJobs__arrow svg {
  width: 20px;
  height: 20px;
}

.crJobs__arrow:hover:not(:disabled) {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
}

.crJobs__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.crJob {
  position: relative;
  flex: 0 0 clamp(16rem, 22vw, 24rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1.25rem, 2.4vw, 2.2rem) clamp(1.4rem, 2.4vw, 2rem);
  border-radius: 12px;
  background: #fff;
  color: var(--navy-500);
  overflow: hidden;
  scroll-snap-align: start;
  transition: background-color 0.4s var(--ease), transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

/* Faint "C" ring in the lower right, as in the comp. */
.crJob::before {
  content: "";
     position: absolute;
    right: -16%;
    bottom: -14%;
    width: 60%;
    aspect-ratio: 718 / 741;
    background: url(/media/c-logo.png) center / contain no-repeat;
    filter: grayscale(100%);
    opacity: 0.9;
    pointer-events: none;
    transition: opacity 0.5s var(--ease), filter 0.5s var(--ease);
    z-index: 10000;
}
.crJob:hover::before {
    filter: grayscale(0%) brightness(5);
    opacity: 1;
}

.crJob > * {
  position: relative;
}

.crJob__city {
  padding: 0.2em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--gold-500);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-900);
}

.crJob__title {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.2rem);
  line-height: 1;
}

.crJob__exp {
  margin-top: var(--sp-3);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crJob__body {
  margin-top: var(--sp-4);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-700);
}

.crJob__btn {
  margin-top: var(--sp-5);
  padding: 0.6em 2.2em;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--navy-800);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}

.crJob__btn:hover {
  background: var(--navy-900);
}

/* Hovered / focused card turns gold and lifts. */
.crJob:hover,
.crJob:focus-within {
  background: var(--gold-500);
  color: #fff;
  transform: translateY(-14px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28);
}

.crJob:hover::before,
.crJob:focus-within::before {
  border-color: rgba(255, 255, 255, 0.16);
}

.crJob:hover .crJob__city,
.crJob:focus-within .crJob__city {
  background: #fff;
}

.crJob:hover .crJob__body,
.crJob:focus-within .crJob__body {
  color: #fff;
}

/* --- Take the first step (form) ----------------------------------------- */

/* The stairs photograph is a panel on the section itself, running from the
   page's left edge to just short of the form, so the heading sits over it. */
.crForm {
  position: relative;
  padding-block: clamp(3rem, 6vw, 6rem);
  background: #fff;
  color: var(--ink-900);
  overflow: hidden;
}

.crForm::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(2rem, 4.5vw, 5.5rem);
  bottom: clamp(3rem, 6vw, 7rem);
  width: 44%;
  background: var(--step-img) no-repeat left center / cover;
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
  mask-image: linear-gradient(90deg, #000 80%, transparent);
  pointer-events: none;
}

.crForm__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  grid-gap: clamp(1.5rem, 3.4vw, 3.75rem);
  gap: clamp(1.5rem, 3.4vw, 3.75rem);
  align-items: start;
}

.crForm__aside {
  padding-top: clamp(0.5rem, 1.6vw, 2rem);
  text-align: right;
}

.crForm__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5.4rem);
  line-height: 0.88;
  color: var(--navy-500);
}

.crForm__title span {
  display: block;
}

.crForm__blurb {
  max-width: 14.5rem;
  margin: var(--sp-4) 0 0 auto;
  font-size: clamp(0.9rem, 0.8rem + 0.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-900);
}

.crForm__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: clamp(1rem, 1.8vw, 1.75rem) clamp(1rem, 2vw, 2.25rem);
  gap: clamp(1rem, 1.8vw, 1.75rem) clamp(1rem, 2vw, 2.25rem);
  padding-top: clamp(1rem, 2.4vw, 2.5rem);
}

/* Navy box, thin gold rule, label over the input. */
.crField {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  min-height: 66px;
  padding: 9px 13px;
  border: 1px solid #c9a24d;
  border-radius: 8px;
  background: #0a1f45;
  color: #fff;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.crField:focus-within {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(248, 166, 25, 0.2);
}

.crField.is-error {
  border-color: #e0453a;
}

.crField--full {
  grid-column: 1 / -1;
}

.crField__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.crField--full .crField__label {
  letter-spacing: 0.12em;
}

.crField__label i {
  margin-left: 0.25em;
  font-style: normal;
  color: #e0302a;
}

.crField__input {
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: clamp(0.8rem, 0.86vw, 0.95rem);
  line-height: 1.4;
  color: #fff;
  resize: vertical;
}

.crField__input::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.crField__select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  padding-right: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E")
    no-repeat right center / 14px;
}

.crField__select.is-empty {
  color: rgba(255, 255, 255, 0.72);
}

.crField__select option {
  color: var(--ink-900);
}

.crField__err {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 2px;
  font-size: 0.72rem;
  color: #d23a2f;
}

.crField__err:empty {
  display: none;
}

/* File picker: a small white "Choose file" chip and the file name. */
.crFile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.crFile__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.crFile__btn {
  flex: none;
  padding: 0.1em 0.45em;
  border: 1px solid #767676;
  border-radius: 2px;
  background: #efefef;
  font-size: 0.85rem;
  color: #111;
}

.crFile__name {
  min-width: 0;
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.72);
}

.crFile:focus-within .crFile__btn {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

.crForm__actions {
  grid-column: 1 / -1;
  margin-top: clamp(0.75rem, 1.8vw, 1.75rem);
}

/* Submit — the site's solid CTA (.btn--solid in globals.css /
   components.css): orange gradient pill, and on hover it lifts, the shadow
   deepens, a sheen sweeps across and the tracking opens up. Shared by every
   crField form (careers, joint venture, referral, pay now, channel
   partners). */
.crSubmit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0.95em 2.8em;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: #0f3d6a;
  background-image: linear-gradient(to right, #f6800e, #f9a51a, #f6800e);
  box-shadow: 0 14px 30px rgba(246, 128, 14, 0.32);
  font-family: var(--font-body);
  font-size: clamp(0.78rem, 0.72rem + 0.2vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
    letter-spacing 0.45s var(--ease);
}

.crSubmit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease);
}

.crSubmit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(246, 128, 14, 0.45);
  letter-spacing: 0.16em;
}

.crSubmit:hover:not(:disabled)::after {
  transform: translateX(100%);
}

.crSubmit:disabled {
  opacity: 0.7;
  cursor: progress;
}

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

@media (max-width: 1024px) {
  .crLife__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--gutter);
  }

  .crLife__copy {
    justify-self: start;
    max-width: none;
  }

  .crLife__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin-left: clamp(0.75rem, 1.6vw, 1.25rem);
  }

  .crForm__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Heading block over the stairs, form underneath. */
  .crForm::before {
    top: 0;
    bottom: auto;
    width: 100%;
    height: clamp(20rem, 55vw, 30rem);
    background-position: center 30%;
    opacity: 0.85;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
    mask-image: linear-gradient(180deg, #000 70%, transparent);
  }

  .crForm__aside {
    min-height: clamp(14rem, 45vw, 24rem);
    padding-block: 1rem 2rem;
  }
}

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

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

  .crJob {
    flex-basis: 78vw;
  }

  .crJob:hover,
  .crJob:focus-within {
    transform: none;
  }

  .crForm__aside {
    text-align: left;
  }

  .crForm__blurb {
    margin-left: 0;
  }

  .crField {
    min-height: 4.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crJob,
  .crSubmit,
  .crSubmit::after {
    transition: none;
  }
}

/* ---- Form section, desktop: sized off the 2000px comp ------------------
   Every measurement is the comp's pixel value / 2000 × 100vw, so the block
   keeps the comp's exact proportions at any desktop width. Floors keep text
   readable on smaller laptops. */
@media (min-width: 1025px) {
  .crForm {
    padding: 5.75vw 0 7vw;
  }

  /* Stairs panel: comp x 0–872, y 90–725. */
  .crForm::before {
    top: 4.5vw;
    bottom: auto;
    width: 43.6vw;
    height: 31.75vw;
    background-size: cover;
    background-position: left top;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }

  /* Heading ends at x 778, form runs x 838–1662. */
  .crForm__inner {
    max-width: none;
    padding: 0;
    grid-template-columns: 38.9vw 41.2vw;
    column-gap: 3vw;
  }

  .crForm__aside {
    padding-top: 0;
  }

  .crForm__title {
    font-size: 3.95vw;
    line-height: 0.85;
  }

  .crForm__blurb {
    max-width: max(12.4vw, 160px);
    margin-top: 0.9vw;
    margin-right: 0.5vw;
    font-size: max(1vw, 13px);
    line-height: 1.6;
  }

  .crForm__grid {
    padding-top: 0.3vw;
    gap: 1.2vw 1.75vw;
  }

  .crField {
    min-height: 66px;
    padding: 9px 13px;
    gap: 0.2rem;
  }

  .crField--full {
    min-height: 66px;
  }

  .crField__label {
    font-size: 12px;
  }

  .crField__input,
  .crField .rip .rip__input,
  .crField .rip input.react-international-phone-input {
    font-size: clamp(0.8rem, 0.86vw, 0.95rem);
  }

  .crFile__btn {
    font-size: max(0.72vw, 11px);
  }

  .crFile__name {
    font-size: max(0.75vw, 11px);
  }

  .crForm__actions {
    margin-top: 0.7vw;
  }

  .crSubmit {
    min-width: 7.4vw;
    height: 2.4vw;
    min-height: 34px;
    padding: 0 2.1vw;
    font-size: max(0.78vw, 11px);
  }
}

/* Compact phone control inside the navy box, so its row matches the others. */
.crField .rip {
  --react-international-phone-flag-width: 18px;
  --react-international-phone-flag-height: 18px;
  display: flex;
  align-items: center;
  height: 1.45em;
  line-height: 1.2;
}

.crField .rip .react-international-phone-country-selector,
.crField .rip .react-international-phone-country-selector-button {
  height: 1.45em;
}

.crField .rip .react-international-phone-country-selector-button {
  height: auto;
  min-height: 0;
  padding: 0.1rem 0.35rem;
}

.crField .rip input.react-international-phone-input {
  height: auto;
  min-height: 0;
}

/* As in the comp: no resize grip on Message, no arrow on Apply For. */
.crField textarea.crField__input {
  resize: none;
}

@media (min-width: 1025px) {
  .crField__select {
    background-image: none;
    padding-right: 0;
  }
}

@media (max-width: 1640px) {
.crLife__copy {  max-width: 38rem ;}

}

@media (max-width: 1500px) {
.crLife__copy { max-width: 38rem; }
 .crJobs__track{ position: relative;   left: 69px;}
 
}

@media (max-width: 1400px) {
.crLife__copy { max-width: 38rem; }
 .crJobs__track{ position: relative;   left: 50px;}
 
}

@media (max-width: 900px) {
.crPoint__body {
    max-width: 100%;}
    .crPoint__title {  font-size: 28px;}
        .crJobs__track {  left: 0;  }
        .crWhy__body {  max-width: 100%;}
        .crPoint__title span {   display: inline;   margin-right: 5px;}
}
/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/testimonials.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   Testimonials — /testimonials
   -------------------------------------------------------------------------
   Loaded after projects.css (hero), careers.css (crWhy intro band) and
   stories.css (stQuote card, stVideo tile). Only the page's own layout
   lives here (tm-).

   The wall follows the comp (measured on its width; 1vw of the comp = 5.25
   comp-px):
     row A   wide quote 13 → 53.4vw with a 16.6vw video under its right end;
             tall quote 57.1 → 85.1vw running the full height of the row
     row B   video 10.5 → 27.5vw · quote 30.5 → 66.1vw · video 69 → 86vw,
             the right video sitting a little lower than the left
   ========================================================================= */

/* --- Intro band ----------------------------------------------------------- */

.tmIntro .crWhy__title {
  color: #fff;
}

.tmIntro__sub {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1rem + 1.8vw, 3rem);
  line-height: 1;
  color: var(--gold-500);
}

/* --- The wall ------------------------------------------------------------- */

.tmWall {
  padding-block: clamp(3rem, 6vw, 6rem) clamp(4rem, 8vw, 8rem);
  background: #efefef;
  overflow: hidden;
}

.tmWall__rating {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(2rem, 4.5vw, 4rem);
}

.tmWall__rows {
  display: grid;
  grid-gap: clamp(2rem, 4.5vw, 5rem);
  gap: clamp(2rem, 4.5vw, 5rem);
}

/* Quote plate: stories.css sizes it for the single homepage card, so the
   wall versions get their own width and a type scale that fits a column. */
.tmQuote.stQuote {
  /* stories.css hides .stQuote under 900px (the homepage carousel drops
     its card there); on this page the quotes are the content. */
  display: block;
  place-self: stretch;
  width: auto;
  padding: clamp(1.25rem, 2.4vw, 2.75rem) clamp(1.25rem, 2.6vw, 3rem);
  box-shadow: 0 20px 50px rgba(6, 34, 74, 0.06);
}

.tmQuote__body {
  clear: both;
}

.tmQuote .stQuote__quote {
  margin-top: clamp(0.75rem, 1.4vw, 1.5rem);
  margin-bottom: 0.9em;
  font-size: clamp(1rem, 0.7rem + 0.75vw, 1.7rem);
  line-height: 1.35;
  white-space: pre-line;
}

.tmQuote .stQuote__text {
  font-size: clamp(0.8rem, 0.7rem + 0.3vw, 1.05rem);
}

.tmQuote .stQuote__by {
  margin-top: clamp(1rem, 2vw, 2rem);
}

.tmQuote .stQuote__by strong {
  font-size: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
}

.tmQuote .stQuote__by em {
  font-size: clamp(0.66rem, 0.6rem + 0.2vw, 0.85rem);
}

.tmQuote--tall .stQuote__quote {
  margin-top: clamp(1.5rem, 3vw, 3rem);
}

/* Video tile as a real button (keyboard reachable). */
.tmVideo.stVideo {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  aspect-ratio: 87 / 77;
  font: inherit;
}

.tmVideo:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
}
.stQuote__all{display: none;}
.stQuote::before {  width: 100%;}

/* --- Desktop: the comp's two row shapes ----------------------------------- */

@media (min-width: 900px) {
  .tmRow--a {
    display: grid;
    grid-template-columns: 40.4vw 26vw;
    grid-column-gap: 3.7vw;
    column-gap: 3.7vw;
    margin-left: 13vw;
    align-items: stretch;
  }

  .tmRow__stack {
    display: flex;
    flex-direction: column;
  }

  .tmVideo--under.stVideo {
    align-self: flex-end;
    width: 16.6vw;
    margin-top: 3vw;
  }

  .tmRow--b {
    display: grid;
    grid-template-columns: 17vw 35.6vw 17vw;
    grid-column-gap: 3vw;
    column-gap: 3vw;
    margin-left: 10.5vw;
    align-items: center;
  }

  .tmVideo--low.stVideo {
    align-self: center;
    transform: translateY(1.5vw);
  }
}

/* --- Tablet / phone: one column, videos in pairs ---------------------------- */

@media (max-width: 899px) {
  .tmWall__rows {
    padding-inline: var(--gutter);
  }

  .tmRow,
  .tmRow__stack {
    display: grid;
    grid-gap: 1.25rem;
    gap: 1.25rem;
  }

  .tmRow--b {
    grid-template-columns: 1fr 1fr;
  }

  /* Quote first, the two videos side by side under it. */
  .tmRow--b .tmQuote {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .tmVideo--under.stVideo {
    width: 60%;
    justify-self: end;
  }
}

.tmWall__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

/* Optional heading (used when the wall is reused on other pages). */
.tmWall__head {
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
  text-align: center;
}

.tmWall h2.tmWall__title {
  color: #0b4c80;
}

.tmWall__sub {
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1rem + 1.2vw, 2.4rem);
  line-height: 1;
  color: #333;
}

/*!****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/media-news.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   Media, News & Updates — /media-news-updates
   -------------------------------------------------------------------------
   Loaded after projects.css / careers.css (hero), stories.css and
   testimonials.css (the reused wall). Only this page's pieces (mn-):
     .mnTabs     category bar under the banner, on the navy band
     .mnEvents   white — event photo cards, three to a row
     .mnBox      the photo lightbox
   ========================================================================= */

/* --- Category bar ------------------------------------------------------------ */

.mnHero {
  padding-bottom: 0;
}

.mnTabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 clamp(1.25rem, 2.6vw, 2.75rem);
  width: min(100%, 72vw);
  margin: clamp(2rem, 4vw, 3.5rem) auto 0;
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
}

.mnTab {
  position: relative;
  padding: 0.7rem 0.1rem 0.8rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  background: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 0.8rem + 0.75vw, 1.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}

/* The hairline runs under the whole row: each tab draws its own piece and
   the gap between them is bridged by a pseudo-line. */
.mnTab + .mnTab::before {
  content: "";
  position: absolute;
  right: 100%;
  bottom: -1px;
  width: clamp(1.25rem, 2.6vw, 2.75rem);
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.mnTab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: #fff;
  transform: scaleX(0);
  transition: transform 0.35s var(--ease);
}

.mnTab:hover {
  color: #fff;
}

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

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

.mnTab:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
}

/* --- Event cards ------------------------------------------------------------ */

.mnEvents {
  padding-block: clamp(3rem, 6.5vw, 7rem) clamp(4rem, 8vw, 9rem);
  background: #fff;
}

.mnGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: clamp(1rem, 2.4vw, 2.6rem);
  gap: clamp(1rem, 2.4vw, 2.6rem);
  width: min(100%, 66vw);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.mnGrid > li {
  animation: mnIn 0.55s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.mnCard {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 110 / 86;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: var(--paper-blue);
  box-shadow: 0 18px 34px rgba(6, 34, 74, 0.16);
  font: inherit;
  text-align: left;
  cursor: pointer;
  isolation: isolate;
}

.mnCard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

/* Navy scrim from the foot so the caption always reads. */
.mnCard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(6, 34, 74, 0.92) 0%, rgba(6, 34, 74, 0.35) 38%, transparent 62%);
  transition: opacity 0.4s var(--ease);
}

.mnCard__text {
  position: absolute;
  left: clamp(0.8rem, 1.2vw, 1.3rem);
  right: clamp(0.8rem, 1.2vw, 1.3rem);
  bottom: clamp(0.7rem, 1.1vw, 1.2rem);
  z-index: 2;
  display: grid;
  grid-gap: 0.15rem;
  gap: 0.15rem;
  color: #fff;
}

.mnCard__text strong {
  font-size: clamp(0.8rem, 0.7rem + 0.3vw, 1.05rem);
  font-weight: 700;
  line-height: 1.25;
}

.mnCard__text span {
  font-size: clamp(0.68rem, 0.62rem + 0.18vw, 0.85rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.mnCard:hover .mnCard__img,
.mnCard:focus-visible .mnCard__img {
  transform: scale(1.06);
}

.mnCard:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
}

.mnEvents__empty {
  padding: clamp(2rem, 5vw, 4rem) 0;
  text-align: center;
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.15rem);
  color: var(--ink-500);
  animation: mnIn 0.45s var(--ease) both;
}

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

/* --- Lightbox ----------------------------------------------------------------- */

.mnBox {
  position: fixed;
  inset: 0;
  /* Above the fixed header, side CTA and scroll-top button. */
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(3, 14, 32, 0.9);
  animation: mnFade 0.3s var(--ease) both;
}

.mnBox__inner {
  position: relative;
  width: min(100%, 72rem);
}

.mnBox__figure {
  margin: 0;
}

.mnBox__img {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 6px;
  animation: mnFade 0.35s var(--ease) both;
}

.mnBox__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  margin-top: 0.9rem;
  color: #fff;
}

.mnBox__caption strong {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem);
  font-weight: 700;
}

.mnBox__caption span {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.mnBox__count {
  margin-left: auto;
  letter-spacing: 0.08em;
}

.mnBox__close,
.mnBox__arrow {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.mnBox__close {
  top: -3.2rem;
  right: 0;
  width: 2.6rem;
  height: 2.6rem;
}

.mnBox__arrow {
  top: calc(50% - 1.6rem);
  width: 3rem;
  height: 3rem;
}

.mnBox__close svg,
.mnBox__arrow svg {
  width: 55%;
  height: 55%;
}

.mnBox__arrow--prev {
  left: 0.75rem;
}

.mnBox__arrow--next {
  right: 0.75rem;
}

.mnBox__close:hover,
.mnBox__arrow:hover {
  background: var(--gold-500);
  color: var(--navy-900);
}

.mnBox__close:focus-visible,
.mnBox__arrow:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
}

@keyframes mnFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- Testimonials wall on this page ----------------------------------------- */

.mnPage .tmWall {
  padding-top: clamp(3rem, 6vw, 6rem);
}

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

@media (max-width: 900px) {
  .mnGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .mnTabs {
    width: 100%;
  }
}

@media (max-width: 620px) {
  /* The bar scrolls sideways rather than wrapping into a stack. */
  .mnTabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2.25rem;
  }

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

  .mnTab {
    flex: none;
  }

  .mnGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mnGrid > li,
  .mnEvents__empty,
  .mnBox,
  .mnBox__img {
    animation: none;
  }

  .mnCard__img {
    transition: none;
  }
}