/* refinements.css
   Fixes added after the port. This file is linked last on every page, so
   anything here wins over webflow.css and the other shared sheets.
   Delete a block to revert that one change — nothing else depends on it. */


/* ---------------------------------------------------------------------------
   1. Circular buttons: centre the label

   ".btn-circle" already centres its label box inside the ring, but the label
   inherits text-align:start, so a two-word label like "Explore Residences"
   wraps to two ragged-left lines and reads as off-centre. Centring the text
   lines makes it sit visually in the middle of the circle.
   --------------------------------------------------------------------------- */
.btn-circle_label,
.btn-circle_label .nav-item_label,
.btn-circle_label .nav-item_label_text,
.btn-circle_label .l1,
.btn-circle_label .l2 {
  text-align: center;
}

.btn-circle_label .nav-item {
  display: block;
  width: 100%;
}

/* The hover duplicate is absolutely positioned; span the full label so its
   centred lines line up with the ones underneath. */
.btn-circle_label .nav-item_label_text.is-2 {
  right: 0;
  width: 100%;
}


/* ---------------------------------------------------------------------------
   2. Stop iOS zooming the page when a form field is focused

   Mobile Safari zooms in on any input whose font-size is under 16px, then
   leaves the page scaled. The fields compute to ~14.4px, so they trip it.
   Only applied on touch devices; the desktop type scale is untouched.
   --------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {

  .input_field,
  .input_field.l1,
  .input_field.area,
  input.w-input,
  textarea.w-input,
  select.w-select {
    font-size: 16px;
  }
}


/* ---------------------------------------------------------------------------
   3. Bigger tap targets for the location category pills

   The pills are 25px tall, well under the ~44px a finger needs. Grown only on
   touch devices, and only vertically, so the row still wraps the same way.
   --------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {

  .cat-btn {
    min-height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .cat-item {
    min-height: 44px;
  }
}


/* ---------------------------------------------------------------------------
   4. Touch polish

   Removes the grey flash iOS paints over links on tap, and keeps long words
   (addresses, unit names) from spilling out of narrow columns.
   --------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {

  a,
  button,
  .cat-btn,
  .nav-item,
  .link {
    -webkit-tap-highlight-color: rgba(18, 42, 77, 0.08);
  }

  .l1,
  .l2,
  .p1,
  .h5,
  .h6 {
    overflow-wrap: break-word;
  }
}


/* ---------------------------------------------------------------------------
   5. Floating chrome must follow the section under it

   The header nav, the scroll progress bar and the "Scroll" indicator all float
   above the page. text-contrast.css forces them pure white with a dark shadow,
   which is right over the hero photograph and the dark footer, but leaves them
   invisible over the pink and cream sections.

   app.js already tags them with theme_on-light / theme_on-color / theme_on-dark
   as you scroll (initThemeChange, driven by each section's data-bg). These rules
   just honour that: navy over a light section, white everywhere else.
   --------------------------------------------------------------------------- */
.header-nav.theme_on-light,
.header-nav.theme_on-light *,
.header-cramps.theme_on-light,
.header-cramps.theme_on-light *,
.header-logo.theme_on-light,
.header-logo.theme_on-light *,
.s-bar-w.theme_on-light,
.s-bar-w.theme_on-light *,
.s-down.theme_on-light,
.s-down.theme_on-light * {
  color: #122a4d !important;
  text-shadow: none !important;
}

/* SVG chrome: the rotating logo lettering, the menu icon, the scroll arrow */
.header-logo.theme_on-light text,
.header-logo.theme_on-light svg path,
.header-nav.theme_on-light svg path,
.s-down.theme_on-light svg path {
  fill: #122a4d !important;
  stroke: #122a4d !important;
  text-shadow: none !important;
}

.s-down.theme_on-light .s-down_arrow svg path {
  fill: #122a4d !important;
  stroke: #122a4d !important;
}

/* The progress bar reads as a solid white pill on cream otherwise */
.s-bar-w.theme_on-light .s-bar_track {
  background-color: rgba(18, 42, 77, 0.25) !important;
}

.s-bar-w.theme_on-light .s-bar_fill {
  background-color: #122a4d !important;
  box-shadow: none !important;
}

.header-cramps.theme_on-light .line-h,
.header-cramps.theme_on-light .data-divider {
  background-color: rgba(18, 42, 77, 0.45) !important;
}

/* ---------------------------------------------------------------------------
   6. Header logo badge emblem sizing & containment
   Ensures the Pink Oaks emblem sits comfortably inside the circular text track
   with ample padding on all screens (especially mobile) so boundaries never touch.
   --------------------------------------------------------------------------- */
.header-logo .logo_symbol.header {
  /* Square now, not 56x36. The inner image used to be logo.webp, the full
     horizontal lockup (1600x651), so a wide letterbox made sense — but it
     shrank the mark to ~32x20 on a phone and repeated the name the rotating
     ring already shows. The inner image is now the leaf alone (511x439), so a
     square box lets it fill the circle instead of letterboxing. */
  /* the desktop ring renders ~122px, so ~50% of it reads well */
  width: 62px !important;
  height: 62px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.header-logo .logo_symbol.header .logo,
.header-logo .logo_symbol.header .logo img,
.header-logo .logo_symbol.header img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

@media screen and (max-width: 991px) {
  .header-logo .logo_symbol.header {
    width: 42px !important;
    height: 42px !important;
  }
}

@media screen and (max-width: 479px) {
  .header-logo .logo_symbol.header {
    width: 38px !important;
    height: 38px !important;
  }
}

/* ---------------------------------------------------------------------------
   7. Full-bleed Quote / Building Twilight Section
   Desktop: Full image (entire building from rooftop to ground) with text on the left.
   Mobile: Full cover with centered readable text.
   --------------------------------------------------------------------------- */
.quote-full-section {
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  background-color: #031326 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media screen and (min-width: 992px) {
  .quote-full-section {
    width: 100vw !important;
    aspect-ratio: 1493 / 1054 !important;
    height: calc(100vw * 1054 / 1493) !important;
    min-height: unset !important;
    max-height: unset !important;
  }

  .quote-full-section .quote-bg-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #031326 !important;
  }

  .quote-full-section picture {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  .quote-full-section picture img,
  .quote-full-section .twilight-img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  .quote-full-section .quote-content-container {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    width: 100% !important;
    max-width: 1540px !important;
    margin: 0 auto !important;
    padding: 0 clamp(2rem, 5vw, 6rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
  }

  .quote-full-section .quote-content-box {
    max-width: 440px !important;
    pointer-events: auto !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9) !important;
  }

  .quote-full-section .quote-text {
    font-size: clamp(20px, 1.8vw, 26px) !important;
    line-height: 1.4 !important;
    max-width: 440px !important;
    margin: 0 0 2rem 0 !important;
  }

  .quote-full-section .twilight-overlay {
    background: linear-gradient(90deg, rgba(3,19,38,0.72) 0%, rgba(3,19,38,0.35) 40%, rgba(3,19,38,0) 68%) !important;
  }
}

@media screen and (max-width: 991px) {
  .quote-full-section {
    min-height: 85vh !important;
    height: auto !important;
  }

  .quote-full-section .quote-bg-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .quote-full-section picture,
  .quote-full-section picture img,
  .quote-full-section .twilight-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  .quote-full-section .quote-content-container {
    position: relative !important;
    z-index: 5 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4.5rem 1.5rem 4rem 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .quote-full-section .quote-content-box {
    max-width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .quote-full-section .quote-text {
    font-size: 20px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    margin: 0 auto 2rem auto !important;
  }

  .quote-full-section .quote-divider {
    margin: 0 auto 1.5rem auto !important;
  }

  .quote-full-section .quote-author {
    text-align: center !important;
  }

  .quote-full-section .twilight-overlay {
    background: linear-gradient(180deg, rgba(3,19,38,0.25) 0%, rgba(3,19,38,0.55) 50%, rgba(3,19,38,0.85) 100%) !important;
  }
}

/* ---------------------------------------------------------------------------
   Location Category Tabs & Cards — Centered in both desktop and mobile views
   --------------------------------------------------------------------------- */
.category-section {
  width: 100% !important;
  max-width: 960px !important;
  margin: 32px auto 0 auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
  z-index: 5 !important;
  clear: both !important;
}

.cat-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 10px 14px !important;
  margin: 0 auto 24px auto !important;
  width: 100% !important;
  max-width: 850px !important;
}

.cat-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.cat-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 767px) {
  .category-section {
    margin-top: 24px !important;
    padding: 0 12px !important;
  }
  .cat-nav {
    gap: 8px 10px !important;
    margin-bottom: 20px !important;
    justify-content: center !important;
  }
  .cat-btn {
    padding: 7px 14px !important;
    font-size: 10.5px !important;
  }
  .cat-grid {
    grid-template-columns: 1fr !important;
    max-width: 440px !important;
    margin: 0 auto !important;
  }
  .s-bar-w, .s-down {
    display: none !important;
  }
}

.quote-w_bg {
  position: absolute !important;
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.quote-w_bg .img-w,
.quote-w_bg_img {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0% !important;
}

.quote-w_bg picture,
.quote-w_bg img,
.img.h-auto.quote-w_bg_img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Dark gradient overlay so text stands out crisply over the image on all devices */
.quote-w_bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0% !important;
  background: linear-gradient(180deg, rgba(12, 24, 41, 0.2) 0%, rgba(12, 24, 41, 0.45) 50%, rgba(12, 24, 41, 0.88) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Quote content overlay */
.quote-s {
  position: relative !important;
  z-index: 5 !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 3rem var(--_special-units---offset-l, 2.5rem) 4rem var(--_special-units---offset-l, 2.5rem) !important;
}

.quote-s .grid {
  display: block !important;
}

.quote-s .quote-s_c {
  grid-area: auto !important;
  width: 100% !important;
  max-width: 820px !important;
  color: #FFFFFF !important;
}

.quote-s h4,
.quote-s .h5 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75) !important;
  font-size: 26px !important;
  line-height: 1.35 !important;
  max-width: 820px !important;
}

.quote-s .quote-s_author .l1 {
  color: #FFFFFF !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6) !important;
}

.quote-s .quote-s_author .l1.reg {
  color: rgba(255, 255, 255, 0.85) !important;
}

.quote-s .ico svg,
.quote-s .ico svg path {
  fill: #FFFFFF !important;
}

.quote-s .red-line {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

@media screen and (max-width: 991px) {
  .quote-full-section,
  .section.z-2.theme_on-brand,
  .quote-w,
  .quote-full-section .container {
    min-height: 85vh !important;
    height: auto !important;
  }
  .quote-s {
    padding: 2rem 1.5rem 3rem 1.5rem !important;
  }
  .quote-s h4,
  .quote-s .h5 {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }
}

@media screen and (max-width: 479px) {
  .quote-full-section,
  .section.z-2.theme_on-brand,
  .quote-w,
  .quote-full-section .container {
    min-height: 80vh !important;
  }
  .quote-s {
    padding: 1.5rem 1rem 2.5rem 1rem !important;
  }
  .quote-s h4,
  .quote-s .h5 {
    font-size: 17px !important;
    line-height: 1.4 !important;
  }
}

/* ---------------------------------------------------------------------------
   8. Interior Section Title ("The space to Live in") Desktop-like Layout
   Prevents single/double-letter word wrapping on mobile screens.
   Matches desktop presentation: 3 clean centered words + cursive overlay.
   --------------------------------------------------------------------------- */
.interior-s .grid:has(.interior-s_title),
.interior-s_title {
  grid-column: 1 / -1 !important;
  grid-area: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.interior-s_title .h1,
.interior-s_title h2.h1 {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  font-size: clamp(34px, 12vw, 110px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  margin: 0 auto !important;
}

.interior-s_title .h1 .split-word {
  display: block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  text-align: center !important;
  margin: 0 auto !important;
}

.interior-s_title .h1 .split-char {
  display: inline-block !important;
  white-space: nowrap !important;
  position: relative !important;
}

.interior-s_title_a {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: -0.4em !important;
  margin-left: 0 !important;
  transform: rotate(-10deg) !important;
}

.interior-s_title_a .a1,
.interior-s_title_a h3.a1 {
  font-size: clamp(30px, 11vw, 95px) !important;
  font-family: var(--_fonts---font-accent, 'Alex Brush', 'Corinthia', cursive) !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  line-height: 1 !important;
}

@media screen and (max-width: 991px) {
  .section.arch {
    border-top-left-radius: 50vw !important;
    border-top-right-radius: 50vw !important;
    position: relative !important;
    z-index: 10 !important;
    background-color: var(--_colors---other--bg, #f7f4ee) !important;
  }

  .interior-w {
    margin-top: -35vh !important;
    position: relative !important;
    width: 100% !important;
    z-index: 10 !important;
  }

  .interior-s_title {
    grid-column: 1 / -1 !important;
    grid-area: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .interior-s_title h2.h1,
  .interior-s_title .h1 {
    font-size: clamp(34px, 11vw, 72px) !important;
    line-height: 0.88 !important;
    white-space: nowrap !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  .interior-s_title h2.h1 br,
  .interior-s_title .h1 br {
    display: none !important;
  }

  .interior-s_title .h1 .split-word {
    display: block !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0.88 !important;
    text-align: center !important;
  }

  .interior-s_title .h1 .split-char {
    display: inline-block !important;
    white-space: nowrap !important;
    position: relative !important;
  }

  .interior-s_title_a {
    margin-top: -0.36em !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transform: rotate(-8deg) !important;
  }

  .interior-s_title_a .a1 {
    font-size: clamp(36px, 12vw, 76px) !important;
    font-family: var(--_fonts---font-accent, 'Alex Brush', 'Corinthia', cursive) !important;
    white-space: nowrap !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
}

@media screen and (max-width: 479px) {
  .section.arch {
    border-top-left-radius: 50vw !important;
    border-top-right-radius: 50vw !important;
  }

  .interior-w {
    margin-top: -30vh !important;
  }

  .interior-s_title h2.h1,
  .interior-s_title .h1 {
    font-size: clamp(30px, 11vw, 56px) !important;
    line-height: 0.88 !important;
    text-align: center !important;
  }

  .interior-s_title h2.h1 br,
  .interior-s_title .h1 br {
    display: none !important;
  }

  .interior-s_title h2.h1 .split-word,
  .interior-s_title .h1 .split-word {
    display: block !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0.88 !important;
    text-align: center !important;
  }

  .interior-s_title h2.h1 .split-char,
  .interior-s_title .h1 .split-char {
    display: inline-block !important;
    white-space: nowrap !important;
    position: relative !important;
  }

  .interior-s_title_a {
    margin-top: -0.36em !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transform: rotate(-8deg) !important;
  }

  .interior-s_title_a .a1 {
    font-size: clamp(34px, 12.5vw, 62px) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--_fonts---font-accent, 'Alex Brush', 'Corinthia', cursive) !important;
    white-space: nowrap !important;
    text-align: center !important;
    line-height: 1 !important;
  }
}

/* ---------------------------------------------------------------------------
   9. CTA / Nahargarh Rooftop Terrace Section Full Coverage on Mobile
   Ensures the rooftop terrace background image fully covers the entire section
   from top to bottom with no uncovered gaps.
   --------------------------------------------------------------------------- */
.cta-section-wrap {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  background-color: #0c1829 !important;
}

.cta-section-wrap .container,
.cta-section-wrap .container[data-footer-clip] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

.cta-w {
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

.cta-w .w_bg {
  position: absolute !important;
  inset: 0% !important;
  top: 0% !important;
  bottom: 0% !important;
  left: 0% !important;
  right: 0% !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.cta-w .w_bg .img-w,
.cta-w .w_bg picture {
  position: absolute !important;
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.cta-w .w_bg img,
.cta-w .w_bg .img-p {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center bottom !important;
  display: block !important;
}

/* Gradient overlay so the white text is beautifully legible from top to bottom */
.cta-w .w_bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0% !important;
  background: linear-gradient(180deg, rgba(12, 24, 41, 0.45) 0%, rgba(12, 24, 41, 0.2) 35%, rgba(12, 24, 41, 0.6) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.cta-s {
  position: relative !important;
  z-index: 5 !important;
  height: 100% !important;
  min-height: 100vh !important;
  aspect-ratio: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 3.5rem var(--_special-units---offset-l, 1.5rem) 4rem var(--_special-units---offset-l, 1.5rem) !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

.cta-s_desc {
  margin-top: 1rem !important;
  margin-bottom: 2rem !important;
  width: 100% !important;
  max-width: 650px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.cta-s_desc p {
  color: #FFFFFF !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

.cta-s_title {
  margin-top: auto !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.cta-s_title h2.h1,
.cta-s_title .h1 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9) !important;
  font-size: clamp(34px, 11vw, 72px) !important;
  line-height: 0.95 !important;
  text-align: center !important;
  white-space: nowrap !important;
  margin-bottom: 0.75rem !important;
}

.cta-s_title h3.c1,
.cta-s_title .c1 {
  color: #FFFFFF !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8) !important;
  font-size: clamp(13px, 4vw, 22px) !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin-bottom: 2rem !important;
}

.cta-s_title_btn {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

@media screen and (max-width: 991px) {
  .cta-section-wrap,
  .section.theme_on-color.cta-section-wrap {
    padding: 0 !important;
    background: #0c1829 !important;
  }

  .cta-w {
    min-height: 90vh !important;
  }

  .cta-s {
    min-height: 90vh !important;
    padding: 2.5rem 1.25rem 3.5rem 1.25rem !important;
  }

  .cta-s .u-272,
  .cta-s .u-48,
  .cta-s .u-160 {
    display: none !important;
  }

  .cta-w .w_bg img,
  .cta-w .w_bg .img-p {
    object-fit: cover !important;
    object-position: center bottom !important;
  }
}

@media screen and (max-width: 479px) {
  .cta-w {
    min-height: 85vh !important;
  }

  .cta-s {
    min-height: 85vh !important;
    padding: 2rem 1rem 3rem 1rem !important;
  }

  .cta-s_title h2.h1 {
    font-size: clamp(28px, 10vw, 48px) !important;
  }

  .cta-s_title h3.c1 {
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 1.5rem !important;
  }
}







/* ---------------------------------------------------------------------------
   6. Oversized display headings must not widen the page on a phone

   contact.html rendered "Contact Us" at 86px inside a 375px viewport, which
   pushed the document to 413px wide and gave the whole page a horizontal
   scrollbar. The headings are sized in vw/px without an upper bound at the
   small end, so they overflow their own box.

   This caps them to the viewport and lets long words break rather than spill.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* editorial-lux.css is linked after this file, so these need !important to
     land; everything else in this stylesheet relies on load order alone. */
  .contact-page-title,
  .cta-banner-headline,
  .apart-hero-title,
  .apartments-hero-title,
  .font-didone {
    max-width: 100% !important;
    font-size: clamp(30px, 11vw, 52px) !important;
    overflow-wrap: break-word !important;
    word-break: normal;
    hyphens: auto;
  }

}


/* ---------------------------------------------------------------------------
   7. Kill the sideways scroll from the full-bleed quote section

   `section.z-2` and its children use the classic `width: 100vw` + negative
   margin full-bleed. 100vw counts the scrollbar but the content box does not,
   so the section hangs ~8px past each edge and the whole page scrolls sideways.

   `clip` rather than `hidden`: hidden would turn <body> into a scroll container
   and break the five position:sticky elements that drive the pinned hero,
   location and architecture animations. `clip` trims the overhang and leaves
   sticky alone.
   --------------------------------------------------------------------------- */
html,
body {
  overflow-x: clip;
}


/* ---------------------------------------------------------------------------
   8. Form validation feedback (used by assets/js/forms.js)
   --------------------------------------------------------------------------- */
.po-field-error {
  margin-top: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  line-height: 1.4;
  color: #B3261E;
}

[aria-invalid="true"] {
  border-color: #B3261E !important;
}

.po-form-status {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(18, 42, 77, 0.06);
  border: 1px solid rgba(18, 42, 77, 0.16);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #122a4d;
}

.po-form-status.is-error {
  background: rgba(179, 38, 30, 0.07);
  border-color: rgba(179, 38, 30, 0.3);
  color: #B3261E;
}


/* ---------------------------------------------------------------------------
   9. Rotating brand badge — keep the leaf inside the ring

   editorial-lux.css declares `.brand-badge-emblem` twice. The first, meant for
   this badge, is `position:absolute; width:32px`. The second belongs to the
   `.brand-badge-l` variant that wraps the emblem in a navy `.brand-badge-circle-bg`
   and sets `width:100%`. The second one wins, so on apartments.html, contact.html
   and the three variants — none of which have a circle background — the leaf
   rendered at 80x80, the full badge, covering the rotating "PINK OAKS • RESIDENCE"
   ring and spilling past the circle.

   Scoped through .top-header-bar so specificity (0,3,0) beats the stray rule
   regardless of stylesheet order: on apartments.html editorial-lux.css loads
   after this file.

   The ring's text sits at 38% radius, leaving roughly 63% of the badge clear,
   so 45% keeps the leaf comfortably inside it.
   --------------------------------------------------------------------------- */
.top-header-bar .brand-badge-logo {
  width: 130px;
  height: 130px;
}

@media (max-width: 768px) {
  .top-header-bar .brand-badge-logo {
    width: 104px;
    height: 104px;
  }
}

.top-header-bar .brand-badge-logo > .brand-badge-emblem {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18%;
  height: 18%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* restore the intended sizing when the navy circle variant IS present */
.top-header-bar .brand-badge-circle-bg > .brand-badge-emblem {
  position: static;
  transform: none;
  width: 62%;
  height: 62%;
}

.top-header-bar .brand-badge-logo > .brand-badge-emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Centering calibration: shifts the leaf's bounding center directly onto the circle center.
     Keeps the leaf small, centered, and safely nested with generous breathing room from the text ring. */
  transform: translate(0.6%, 3.8%);
}


/* ===========================================================================
   10. Neighbourhood distance list (index.html)
   ---------------------------------------------------------------------------
   The category buttons and the distance cards live inside .loc-scroll-area_screen,
   a sticky panel pinned to exactly 100vh. Anything taller than that is simply
   painted over by the section that follows, with no scrollbar and no warning.

   At 1366px the seven buttons needed 869px inside an 850px row, so they wrapped
   to two lines. That pushed the card grid past the panel edge and all the user
   could see was the top border of each card. The cards were never missing from
   the markup - they were hidden under the next section.

   Three changes buy back roughly 95px of vertical room:
     - tighter buttons, so the seven fit on one line down to ~1100px
     - the grid no longer forces 90px-tall cards for one line of text
     - smaller gaps above and below the button row

   Everything here needs !important: the original markup sets these values as
   inline style attributes.
   ========================================================================= */

/* ===========================================================================
   10. Neighbourhood distance list (index.html)
   ---------------------------------------------------------------------------
   Ensure .loc-scroll-area_screen allows content to fully render without being
   cut off or submerged by sticky/fixed height boundaries.
   ========================================================================= */

.loc-scroll-area_screen {
  min-height: 100vh !important;
  height: auto !important;
}

/* Position the "Between Jaipur and Jaipur" text block so full heading & paragraph are clearly visible without overlapping adjacent elements */
.loc-intro-s_desc {
  align-self: center !important;
  margin-top: 300px !important;
  padding-bottom: 20px !important;
  max-width: 440px !important;
}

@media screen and (max-width: 767px) {
  .loc-intro-s_desc {
    margin-top: 40px !important;
    padding-bottom: 16px !important;
  }
}

@media screen and (min-width: 992px) {
  .loc-intro-s_desc {
    align-self: center !important;
    margin-top: 340px !important;
    padding-bottom: 24px !important;
    max-width: 460px !important;
  }
}

.loc-path-w {
  min-height: 100vh !important;
  height: auto !important;
}

.loc-path-s {
  min-height: 100vh !important;
  height: auto !important;
  justify-content: center !important;
  padding-top: clamp(24px, 4vh, 48px) !important;
  padding-bottom: clamp(40px, 6vh, 72px) !important;
  box-sizing: border-box !important;
}

.loc-path-s_t {
  display: none !important;
}

.loc-path-s_path_c {
  padding: 10px 20px 24px !important;
}

.category-section {
  width: 100% !important;
  max-width: 1080px !important;
  margin: 16px auto 0 !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

/* --- button row ----------------------------------------------------------- */
.category-section .cat-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px 10px !important;
  margin: 0 auto 20px !important;
}

.category-section .cat-btn {
  padding: 8px 16px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.3 !important;
  border-radius: 24px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

/* --- cards ---------------------------------------------------------------- */
.category-section .cat-grid {
  display: grid !important;
  min-height: 0 !important;
  align-content: start !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 10px 14px !important;
  width: 100% !important;
  max-width: 960px !important;
  margin: 0 auto !important;
}

.category-section .cat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px !important;
  min-height: 48px !important;
  background: rgba(18, 42, 77, 0.04) !important;
  border: 1px solid rgba(18, 42, 77, 0.1) !important;
  border-radius: 10px !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}

.category-section .cat-item:hover {
  background: rgba(18, 42, 77, 0.07) !important;
}

/* --- phone: let the button row scroll sideways smoothly ------------------ */
@media (max-width: 767px) {
  .category-section {
    padding: 0 !important;
    margin-top: 14px !important;
  }

  .category-section .cat-nav {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 16px 6px !important;
    gap: 8px !important;
  }

  .category-section .cat-nav::-webkit-scrollbar {
    display: none;
  }

  .category-section .cat-btn {
    flex: none !important;
    padding: 7px 14px !important;
    font-size: 10.5px !important;
  }

  .category-section .cat-grid {
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
  }
}


/* ===========================================================================
   11. Full wordmark wherever the leaf stood alone
   ---------------------------------------------------------------------------
   Two logo treatments exist and they were being confused with each other:

     .logo_symbol.header  - the leaf centred inside the rotating ring badge.
                            The ring carries the "PINK OAKS / RESIDENCE"
                            lettering, so the leaf alone reads correctly there.
                            Left as it was.

     .logo_symbol.ico-48  - a bare leaf with nothing around it, at the foot of
                            the mobile menu, in the section signatures and in
                            the contact block. With no ring and no wordmark the
                            leaf read as a stray graphic rather than a logo.

   The second group now carries .logo_lockup and draws logo.webp, the full
   leaf-plus-script lockup - the same asset the footer already uses.

   .ico-48 is a 48px square, which would letterbox a 2.46:1 lockup down to
   about 48x19. The box is re-proportioned here instead.
   ========================================================================= */

.logo_symbol.ico-48.logo_lockup {
  width: 168px !important;
  height: 52px !important;
  /* these sit in flex rows; without flex:none they shrink to nothing, and
     min-width:0 would let that happen silently */
  flex: none !important;
  min-width: 168px !important;
  min-height: 52px !important;
  border-radius: 0 !important;
  background: none !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.logo_symbol.ico-48.logo_lockup .logo.w-embed,
.logo_symbol.ico-48.logo_lockup img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* the ring badge's decorative backdrop must not follow the wordmark */
.logo_symbol.ico-48.logo_lockup + .header-logo_bg,
.logo_symbol.ico-48.logo_lockup .header-logo_bg {
  display: none !important;
}

/* centre it in the places that stack their contents */
.s_logo:has(.logo_lockup),
.modal_menu_b .s_logo,
.modal_cta_desc {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {

  .logo_symbol.ico-48.logo_lockup {
    width: 140px !important;
    min-width: 140px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* ===========================================================================
   11. Architecture Section Typography & Vastu Quote Fit & Alignment
   Fixes:
   - "Architecture" title overflow / truncation on desktop, laptop, and mobile screens.
   - Proper margin, max-width, line-height, and alignment for the Vastu quote
     ("The architecture of Pink Oaks blends contemporary luxury with Vastu principles
     by 265 Degree Consultants") so all words are 100% visible, beautifully aligned,
     and perfectly legible against the building backdrop.
   ========================================================================= */

.arch-s_t {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.arch-s_t h2.h1,
.arch-s_t .h1 {
  max-width: 92vw !important;
  margin: 0 auto !important;
  text-align: center !important;
  letter-spacing: -0.02em !important;
  box-sizing: border-box !important;
}

/* Ensure the Vastu quote box is spacious, well-aligned, and wraps elegantly */
.arch-s_quote {
  width: 100% !important;
  max-width: 720px !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
}

.arch-s_quote h3.h5,
.arch-s_quote .h5 {
  font-family: var(--_fonts---font-display, 'Playfair Display', serif) !important;
  font-size: clamp(20px, 2.2vw, 36px) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 0, 0, 0.75) !important;
  margin: 0 0 1.5rem 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: normal !important;
}

.arch-s_quote .red-line {
  margin-bottom: 1.25rem !important;
}

.arch-s_author {
  margin-top: 0.5rem !important;
}

.arch-s_author .l1 {
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  line-height: 1.4 !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8) !important;
}

.arch-s_author .l1.reg {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-top: 2px !important;
}

/* Mobile & Tablet Specific Refinements */
@media screen and (max-width: 991px) {
  .arch-s_t h2.h1,
  .arch-s_t .h1 {
    font-size: clamp(34px, 10vw, 68px) !important;
    white-space: normal !important;
    word-break: normal !important;
    text-align: center !important;
  }

  .arch-s_quote {
    max-width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
  }

  .arch-s_quote .red-line {
    margin: 0 auto 1.25rem auto !important;
    float: none !important;
  }

  .arch-s_quote h3.h5,
  .arch-s_quote .h5 {
    font-size: clamp(18px, 5.5vw, 28px) !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  .arch-s_quote .grid._4-columns {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

}

/* ===========================================================================
   12. Refined & Slimmer Typography for Information Leads & Amenity Descriptions
   Optimizes bulky uppercase headings shown across Concept, Overview & Amenities:
   - Sets a more refined, elegant font-weight (300-400 instead of bold/heavy)
   - Calibrates font-size so it does not feel overpowering
   - Increases line-height and letter-spacing for high-end luxury editorial balance
   ========================================================================= */

.info-s_lead h3.h4,
.info-s_lead .h4 {
  font-family: var(--_fonts---font-display, 'Playfair Display', Georgia, serif) !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2.5vw, 36px) !important;
  line-height: 1.35 !important;
  letter-spacing: 0.03em !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.amen-slide_desc h4.h5,
.amen-slide_desc .h5 {
  font-family: var(--_fonts---font-display, 'Playfair Display', Georgia, serif) !important;
  font-weight: 400 !important;
  font-size: clamp(18px, 1.8vw, 24px) !important;
  line-height: 1.45 !important;
  letter-spacing: 0.035em !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

@media screen and (max-width: 767px) {
  .info-s_lead h3.h4,
  .info-s_lead .h4 {
    font-size: clamp(19px, 5.5vw, 25px) !important;
    line-height: 1.38 !important;
    letter-spacing: 0.025em !important;
    padding: 0 12px !important;
  }

  .amen-slide_desc h4.h5,
  .amen-slide_desc .h5 {
    font-size: clamp(16px, 4.2vw, 20px) !important;
    line-height: 1.4 !important;
    letter-spacing: 0.025em !important;
  }
}