/* KS One-O-8 brand override on top of the archin theme.
   Fonts + accent colour matched from ksone-08.com (the project's own site):
   body copy in 'optima', section headings in 'Indigo-Regular', accent
   #af7564 (warm rose-gold), secondary accent #0a3a81 (navy). */

@font-face {
  font-family: 'optima';
  src: url('../fonts/optima.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Indigo-Regular';
  src: url('../fonts/Indigo-Forest-regular.woff2') format('woff2');
  font-display: swap;
}

:root {
  --color-orange1: #af7564; /* accent colour matched from ksone-08.com */
  --ks108-navy: #0a3a81;
  --ks108-body-font: 'optima', Georgia, 'Times New Roman', serif;
  --ks108-heading-font: 'Indigo-Regular', Georgia, serif;
}

body,
.navbar-nav .nav-link,
.butn,
p,
.text,
input,
textarea,
select {
  font-family: var(--ks108-body-font) !important;
}

/* h1-h6 default to the body serif so card/accordion/stat titles - anything
   short but multi-word or small - stay legible. Only the big single-line
   section labels below get the script display font. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ks108-body-font);
}

/* Major section headings get the same treatment as ksone-08.com's
   ".sec-head.golden.indigoFont" pattern: a single short line, set large,
   in the script display font, in the accent colour. Matches their look on
   "Overview", "Amenities", "Gallery" etc. - not for card/body headings. */
h2.fsz-45,
.tc-experience-style1 .info h3 {
  font-family: var(--ks108-heading-font) !important;
  color: var(--color-orange1);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* Combined "KS 108 : The Address" heading - one line, sized down from
   the theme's default 45px so the longer combined phrase still fits
   without wrapping (script fonts break down badly once they wrap). */
.ks108-address-heading {
  font-size: 26px !important;
  white-space: nowrap;
}

.ks108-address-colon {
  opacity: 0.6;
  margin: 0 2px;
}

@media (max-width: 991px) {
  .ks108-address-heading {
    font-size: 20px !important;
  }
}

@media (max-width: 575px) {
  .ks108-address-heading {
    font-size: 16px !important;
  }
}

h2.fsz-45 {
  font-size: 56px;
}

/* Hero display numerals (header swiper h1) stay in the clean body serif,
   bold - the script face breaks down at this size and wraps mid-word. */
.js-title {
  font-family: var(--ks108-body-font);
  font-weight: 700;
}

/* Enquiry forms (_ModalEmail / _ParEmail) sit on light cards inside a dark
   footer/modal - force readable label + input colors regardless of the
   surrounding section's default text color. */
.tc-footer-style1 form label,
.modal form label {
  color: #333 !important;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
  display: block;
}

.tc-footer-style1 form .form-control,
.modal form .form-control {
  border-radius: 6px;
  border: 1px solid #ddd;
  padding: 10px 14px;
}

.tc-footer-style1 form input[type="submit"],
.modal form input[type="submit"] {
  background: var(--color-orange1);
  border-color: var(--color-orange1);
  border-radius: 30px;
  padding: 10px 30px;
  font-weight: 600;
}

.tc-footer-style1 .branch-card form {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-top: 20px;
}

/* Official hero banner (real marketing creative - already carries its own
   headline/price/stats, so we only add a floating enquiry CTA on top).
   The archin theme's GSAP/ScrollSmoother setup was tuned for a 100vh
   swiper hero and ends up shrinking a plain <img> hero's effective flow
   height (the next section's -40px pull then lands well inside the image
   instead of just past it). The padding-ratio box below is immune to
   that: its height comes from padding, which normal layout can't shrink,
   so the section after the header always starts exactly at the image's
   real bottom edge regardless of what the theme's JS does. */
.tc-header-banner {
  position: relative !important;
}

/* archin's CSS has an unscoped ".swiper-wrapper{flex-direction:column}"
   rule meant for a different, vertical slider elsewhere in the theme - it
   was leaking into every swiper on the page, including this one, and
   collapsing the wrapper to zero height. Force it back to swiper's own
   default row layout. */
.ks108-hero-slider .swiper-wrapper {
  flex-direction: row !important;
}

.ks108-hero-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 2000 / 900; /* matches the banner's own aspect ratio - shows the full image, uncropped, like the official site */
  overflow: hidden !important;
}

.ks108-hero-slider .swiper-slide {
  overflow: hidden;
}

.ks108-hero-frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.ks108-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Neutralise the theme's built-in overlap pull so it can't bite into the
   banner image the way it did with the old tall swiper hero. */
.tc-experience-style1 {
  margin-top: 0 !important;
}

/* Prev/next arrows for the two-slide hero, styled like ksone-08.com's
   simple circular controls rather than archin's default swiper arrows. */
.ks108-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  z-index: 6;
  transition: background 0.2s ease;
}

.ks108-hero-nav:hover {
  background: rgba(255, 255, 255, 0.45);
}

.ks108-hero-nav.swiper-button-prev {
  left: 24px;
}

.ks108-hero-nav.swiper-button-next {
  right: 24px;
}

.ks108-hero-nav::after {
  content: none;
}

/* Navbar background matched from ksone-08.com's .navbar-default.
   The archin theme has this navbar as position:absolute + transparent,
   designed to float over the hero image. Now that it has a solid
   background, absolute positioning makes it sit on top of (hiding) the
   top of the hero instead of pushing it down - switch to relative so it
   takes up real space in the page flow like any normal navbar. */
.tc-navbar-style1 {
  position: relative !important;
  top: auto !important;
  background: #18211A;
  margin-bottom: 0px;
  border: none;
  border-radius: 0;
  transition: ease all 0.5s;
}

/* Official KS One-O-8 project mark (wide lockup, ~4:1) - constrain to a
   sane navbar height instead of rendering at native 3308px width. */
.ks108-navbar-logo {
  height: 40px;
  width: auto;
  max-width: none;
}

@media (max-width: 767px) {
  .ks108-navbar-logo {
    height: 30px;
  }
}

/* Centre the main nav links in the navbar, independent of the logo's and
   the right-side actions' widths (desktop only - mobile keeps the normal
   collapsed-menu stacking). */
@media (min-width: 992px) {
  .tc-navbar-style1 .content {
    position: relative;
  }

  .tc-navbar-style1 .content .navbar-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
  }

  /* Taking the nav links out of flow (above) removed the space that used
     to push these to the right - pin them back to the end explicitly. */
  .tc-navbar-style1 .content .nav-side {
    margin-left: auto;
  }
}

/* ============================================================
   "108" scroll-story: pinned section that reveals 1 -> 0 -> 8
   one at a time as the visitor scrolls, driven by GSAP
   ScrollTrigger (script at the bottom of Preview.cshtml).
   ============================================================ */

/* Used to be a pinned section given 320vh of scroll distance for a
   scrub-tied GSAP timeline to play through while the viewport locked in
   place. Panels now sit in normal flow (see .ks108-story-panels below) and
   each reveals itself once via IntersectionObserver, so this just needs to
   be a normal block-level container - no artificial height, no pin. */
.ks108-scrollstory {
  position: relative;
  padding: 80px 0;
  text-align: center;
}

/* Normal-flow heading above the panel list - no longer needs to be
   absolutely positioned now that nothing is pinned beneath it. */
.ks108-numerology-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 0 6vw;
}

.ks108-numerology-eyebrow {
  font-size: 22px;
}

.ks108-numerology-heading {
  font-family: var(--ks108-heading-font) !important;
  color: var(--color-orange1);
  font-weight: 400;
  font-size: 70px;
  line-height: 1;
  margin: 0;
}

.ks108-numerology-heading-sm {
  font-size: 40px;
}

@media (max-width: 575px) {
  /* "KS 108" stays horizontal, on its own line under the eyebrow label,
     rather than stacked - stacking two Indigo-Regular script elements
     directly on top of each other let their oversized ascenders/descenders
     collide (that font renders well outside its own line box). Sized down
     so "KS 108" fits one line on a narrow phone without wrapping. */
  .ks108-numerology-heading-row {
    row-gap: 0;
    column-gap: 10px;
  }

  .ks108-numerology-eyebrow {
    font-size: 15px;
    flex-basis: 100%;
  }

  /* row-gap alone isn't enough clearance - the script glyphs render well
     above their own line box, so the gap has to be real margin on the
     script elements themselves, not space between the flex rows. */
  .ks108-numerology-heading-sm {
    font-size: 30px;
    margin-top: 38px;
  }

  .ks108-numerology-heading:not(.ks108-numerology-heading-sm) {
    font-size: 40px;
    margin-top: 38px; /* matches "KS"'s margin-top so both sit on the same line */
  }
}

/* Panels now sit one after another in normal document flow, each given
   room to breathe by .ks108-story-panels' gap below, instead of being
   absolutely stacked on top of each other for a pinned crossfade. Content
   on the left, the digit mark on the right. */
.ks108-story-panels {
  display: flex;
  flex-direction: column;
  gap: 12vh;
  padding: 40px 0;
}

.ks108-story-panel {
  display: flex;
  flex-direction: row-reverse; /* digit on the left, text on the right */
  align-items: center;
  justify-content: center;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 6vw;
  text-align: left;
  /* One-shot reveal, triggered once by the IntersectionObserver in
     Preview.cshtml adding .is-active - a plain CSS transition the
     compositor drives on its own, not a per-frame scroll-scrubbed tween. */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ks108-story-panel.is-active {
  opacity: 1;
  transform: translateY(0);
}

.ks108-story-text {
  flex: 1 1 auto;
  max-width: 620px;
}

.ks108-story-digit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px solid var(--color-orange1);
  font-family: var(--ks108-heading-font);
  font-size: 84px;
  color: var(--color-orange1);
}

.ks108-story-panel h6 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 18px;
}

.ks108-story-panel p {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  margin: 0;
}

@media (max-width: 900px) {
  .ks108-story-panel {
    flex-direction: column-reverse;
    gap: 30px;
    text-align: center;
    /* overflow-y:auto + max-height here used to turn each panel into its
       own native touch-scroll container the instant its content (heading +
       paragraph + digit, stacked column-reverse here) ran even slightly
       past 90vh, which it does on real phones by ~15px - fighting the
       page's own scroll for every touch gesture through this section. The
       panels are in normal document flow now (no pin ancestor to clip
       against), so any excess just adds a little extra page height instead
       of creating a second, competing scroll container. */
  }

  .ks108-story-text {
    max-width: 100%;
  }
}

.ks108-story-progress {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 30px 0 60px;
}

.ks108-story-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--color-orange1);
  transition: background 0.3s ease;
}

.ks108-story-dot.is-active {
  background: var(--color-orange1);
}

@media (max-width: 767px) {
  .ks108-story-digit {
    width: 100px;
    height: 100px;
    font-size: 46px;
  }

  .ks108-story-panel p {
    font-size: 14px;
  }
}

/* 4th, closing panel of the scroll-story: no digit circle, just the
   philosophy statement centred and set larger in the script face. */
.ks108-story-panel-close .ks108-story-text {
  max-width: 900px;
  text-align: center;
}

.ks108-story-close-lead {
  font-family: var(--ks108-body-font) !important;
  color: #333 !important;
  font-size: 22px !important;
  font-weight: 500;
  line-height: 1.7;
  margin-bottom: 26px !important;
}

/* Only the "1-0-8" / "108" numerals get the script display face - the
   full sentence in that face was illegible (same issue as the card
   titles earlier: script fonts don't hold up over multiple words). */
.ks108-inline-accent {
  font-family: var(--ks108-heading-font) !important;
  color: var(--color-orange1);
  font-size: 1.5em;
  font-weight: 400;
}

.ks108-story-close-lead:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 767px) {
  .ks108-story-close-lead {
    font-size: 20px;
  }
}


/* "The Address" section rebuilt as a clean two-column layout: full-bleed
   image on the left, everything else (stat, heading, copy, CTA, contact)
   stacked on the right - replaces the old 4-column strip where the image
   was a small rotated thumbnail wedged between two text blocks. */
.ks108-address-row {
  gap: 40px 0;
}

.ks108-address-img {
  width: 100%;
  height: 560px;
  border-radius: 20px;
  overflow: hidden;
}

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

.ks108-address-content {
  padding-left: 20px;
}

.ks108-address-content .info h3 {
  margin-top: 0;
}

.ks108-address-list {
  list-style: none;
  margin: 60px 0 0 !important;
  padding: 0;
}

.ks108-address-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 14px;
  font-size: 15px;
  color: #666;
  line-height: 1.6;
}

.ks108-address-list li:last-child {
  margin-bottom: 0;
}

.ks108-address-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-orange1);
}

.ks108-address-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
}

.ks108-address-contact a {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #333;
  border-bottom: 1px solid var(--color-orange1);
  padding-bottom: 2px;
}

.ks108-address-contact a:hover {
  color: var(--color-orange1);
}

@media (max-width: 991px) {
  .ks108-address-img {
    height: 380px;
    margin-bottom: 20px;
  }

  .ks108-address-content {
    padding-left: 0;
  }
}

/* "108" self-draws as a large faint outline watermark behind the text
   content, on scroll - a brand-specific replacement for archin's generic
   decorative squiggle (c_line.png). Uses stroke-dashoffset rather than
   the theme's clip-path wipe (see the script at the bottom of the page).
   Lives inside .ks108-address-content, as its first child, so it paints
   behind the heading/copy instead of getting covered by the image column. */
.ks108-address-content {
  position: relative;
}

.ks108-line-draw {
  position: absolute;
  top: -40px;
  right: -20px;
  left: auto;
  width: 90%;
  max-width: 520px;
  height: auto;
  clip-path: none !important;
  pointer-events: none;
  z-index: 0;
}

.ks108-line-draw-text {
  font-family: var(--ks108-heading-font);
  font-size: 220px;
  fill: none;
  stroke: var(--color-orange1);
  stroke-width: 1.2px;
  opacity: 0.35;
  transition: stroke-dashoffset 1.8s ease;
}

.ks108-address-content > .info,
.ks108-address-content > .ks108-address-contact {
  position: relative;
  z-index: 1;
}

@media (max-width: 991px) {
  .ks108-line-draw {
    width: 80%;
    max-width: 320px;
    top: -20px;
  }

  .ks108-line-draw-text {
    font-size: 150px;
  }
}

/* "Project Highlights" - real icons + captions sourced from the official
   KS One-O-8 site (ksone-08.com), which uses this same 6-item set in an
   owl-carousel. Rebuilt here as a Swiper slider (3-at-a-time, matching the
   official layout) reusing the icon-tint approach from the earlier static
   version. archin ships an unscoped ".swiper-wrapper{flex-direction:column}"
   rule elsewhere in the theme (see .ks108-hero-slider below) - scope this
   slider's wrapper back to row too, same fix. */
.tc-highlights-style {
  padding: 120px 0;
}

.ks108-highlights-slider .swiper-wrapper {
  flex-direction: row !important;
}

.ks108-highlights-slider .swiper-slide {
  height: auto;
}

/* .swiper itself is overflow:hidden (theme base rule, needed to clip the
   loop's duplicate slides) so the nav arrows live on this outer wrapper
   instead, positioned just outside the slider's edges. */
.ks108-highlights-slider-wrap {
  position: relative;
}

/* Prev/next arrows, sitting on the section's light background rather than
   over an image - same circular shape as .ks108-hero-nav but in outline
   form (accent-gold border/icon on transparent) instead of frosted glass. */
.ks108-highlights-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--color-orange1);
  color: var(--color-orange1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  z-index: 6;
  transition: background 0.2s ease, color 0.2s ease;
}

.ks108-highlights-nav:hover {
  background: var(--color-orange1);
  color: #fff;
}

.ks108-highlights-nav.swiper-button-prev {
  left: -60px;
}

.ks108-highlights-nav.swiper-button-next {
  right: -60px;
}

.ks108-highlights-nav::after {
  content: none;
}

@media (max-width: 1200px) {
  .ks108-highlights-nav.swiper-button-prev {
    left: 0;
  }

  .ks108-highlights-nav.swiper-button-next {
    right: 0;
  }
}

.ks108-highlight-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.ks108-highlight-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  margin-bottom: 24px;
  border-radius: 50%;
  border: 1px solid var(--color-orange1);
}

.ks108-highlight-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  /* the source PNGs are plain black line-art - tint them to the accent gold */
  filter: invert(53%) sepia(22%) saturate(738%) hue-rotate(324deg) brightness(88%) contrast(87%);
}

.ks108-highlight-card p {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: #333;
  margin: 0;
  max-width: 280px;
}

@media (max-width: 767px) {
  .tc-highlights-style {
    padding: 80px 0;
  }
}

/* ---- Configurations: floor-plan rows --------------------------------------
   Each unit type is a full-width editorial row: an indexed number, a
   floor-plan preview (kept behind a blueprint-grid veil + lock button,
   since the plans route through the same lead-capture modal as every
   other CTA on the page) and a spec panel. Real data only - BHK type,
   tower, RERA super area, starting price, and the genuine "2 residences
   per floor" exclusivity note for Tower 6. */
.ks108-config-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.ks108-config-row {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(260px, 360px) 1fr;
  border: 1px solid #e4dcd3;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.ks108-config-row:hover {
  box-shadow: 0 26px 54px rgba(24, 33, 26, 0.12);
  border-color: rgba(175, 117, 100, 0.4);
  transform: translateY(-3px);
}

.ks108-config-row-index {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ks108-heading-font);
  font-size: 22px;
  color: rgba(175, 117, 100, 0.4);
  background: #faf7f3;
  border-right: 1px solid #eee7de;
}

.ks108-config-row-plan {
  position: relative;
  aspect-ratio: 16 / 11;
  background: #f4efe9;
  overflow: hidden;
}

.ks108-config-row-plan img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  /* No blur filter here (nor inside the SVG). A CSS blur() and an SVG
     feGaussianBlur both re-rasterize every frame while ScrollSmoother
     transforms the page, which was the scroll lag through this section.
     The placeholder SVGs are drawn faint instead, and the veil + lock
     button carry the "locked" read. If real raster plans are dropped in
     later they can take a light blur() safely - one static bitmap,
     unlike four filter graphs. */
}

.ks108-config-row:hover .ks108-config-row-plan img {
  transform: scale(1.06);
}

.ks108-config-row-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(10, 20, 15, 0.7), rgba(10, 20, 15, 0.38)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 32px);
}

/* script headings in this section ("A Class Apart", "Configurations") -
   the font's tall ascenders overrun the line box into the eyebrow above,
   so give them headroom. */
.tc-services-style1 .title h2.fsz-45 {
  margin-top: 42px;
}

.ks108-edge-heading {
  font-size: 34px !important;
  margin-top: 22px;
}

.ks108-config-row-unlock {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(10, 20, 15, 0.35);
  color: #fff;
  font-family: var(--ks108-body-font) !important;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.ks108-config-row-unlock i {
  font-size: 15px;
}

.ks108-config-row:hover .ks108-config-row-unlock {
  background: var(--color-orange1);
  border-color: var(--color-orange1);
}

/* Real floor-plan raster (not the faint placeholder SVG): no veil/lock,
   shown uncropped so every room dimension stays legible, click to zoom
   into the full-resolution version via fancybox. */
.ks108-config-row-plan.is-unlocked {
  background: #fff;
  cursor: zoom-in;
}

.ks108-config-row-plan.is-unlocked img {
  object-fit: contain;
}

.ks108-config-row-plan.is-unlocked .ks108-config-row-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(24, 33, 26, 0.15);
  background: rgba(255, 255, 255, 0.92);
  color: #18211a;
  font-family: var(--ks108-body-font) !important;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease;
}

.ks108-config-row:hover .ks108-config-row-plan.is-unlocked .ks108-config-row-zoom {
  background: var(--color-orange1);
  color: #fff;
}

/* "See the full range" card - opens the enquiry modal instead of showing
   a real floor plan, for configurations we don't have plans for on hand. */
.ks108-config-row-cta {
  cursor: pointer;
}

.ks108-config-row-cta-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(175, 117, 100, 0.14), rgba(175, 117, 100, 0.05));
  color: var(--color-orange1);
}

.ks108-config-row-cta-plan i {
  font-size: 32px;
}

.ks108-config-row-cta-plan span {
  font-family: var(--ks108-body-font) !important;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ks108-config-row-cta-text {
  margin: 6px 0 18px;
}

.ks108-config-row-cta-btn {
  align-self: flex-start;
  pointer-events: none;
}

.ks108-config-row-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 30px 36px;
}

.ks108-config-row-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee7de;
}

.ks108-config-row-tag {
  display: block;
  margin-bottom: 6px;
  color: #8b8378;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
}

.ks108-config-row-title {
  margin: 0;
  font-family: var(--ks108-body-font);
  color: #18211a;
  font-size: 26px;
  font-weight: 600;
}

.ks108-config-row-price {
  text-align: right;
}

.ks108-config-row-price .label {
  display: block;
  margin-bottom: 4px;
  color: #8b8378;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}

.ks108-config-row-price .value {
  color: var(--color-orange1);
  font-weight: 600;
  font-size: 24px;
}

.ks108-config-row-specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.ks108-config-row-specs li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  color: #333;
}

.ks108-config-row-specs li i {
  color: var(--color-orange1);
  font-size: 16px;
}

.ks108-config-row-specs li em {
  color: #8b8378;
  font-style: normal;
}

.ks108-config-row-badge {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(175, 117, 100, 0.1);
  color: var(--color-orange1);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

@media (max-width: 991px) {
  .ks108-config-row {
    grid-template-columns: 1fr;
  }

  .ks108-config-row-index {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    border-right: none;
    font-size: 15px;
  }

  .ks108-config-row-plan {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 575px) {
  .ks108-config-row-body {
    padding: 22px 20px 24px;
  }

  .ks108-config-row-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .ks108-config-row-price {
    text-align: left;
  }
}

/* ---- Film / video band -------------------------------------------------
   Full-bleed poster with a play button that opens the YouTube film in the
   fancybox lightbox already loaded for the galleries. Deliberately a
   static background image - no background-attachment:fixed, no autoplay
   <video>, no infinite animation - so it costs nothing while scrolling. */
.ks108-film {
  position: relative;
  padding: 170px 0;
  background-color: #18211a;
  background-size: cover;
  background-position: center;
}

.ks108-film-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(24, 33, 26, 0.58), rgba(24, 33, 26, 0.8));
}

.ks108-film .container {
  position: relative;
  z-index: 2;
}

.ks108-film-inner h2.fsz-45 {
  color: #fff !important; /* override the accent-gold that script headings get elsewhere */
  margin-top: 0;
  margin-bottom: 46px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.ks108-film-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--color-orange1);
  color: #fff;
  font-size: 30px;
  transition: transform 0.25s ease, background 0.25s ease;
}

.ks108-film-play:hover {
  color: #fff;
  background: #9a6455;
  transform: scale(1.06);
}

.ks108-film-play i {
  margin-left: 5px; /* optical centring of the play glyph */
}

/* The theme's own breakpoint (archin style.css, .home-style1 .fsz-45)
   drops this heading to 25px starting at 991px, not 767px - matching that
   same breakpoint here so tablet widths (768-991px) get the fix too,
   instead of only phones. The Indigo-Regular script font renders far
   larger than its declared font-size relative to a normal typeface - even
   at 25px, "The KS One-O-8 Walkthrough" (a long heading) still spans two
   overlapping lines without real line-height to separate them. */
@media (max-width: 991px) {
  .ks108-film-inner h2.fsz-45 {
    font-size: 15px !important;
    line-height: 2.4;
  }
}

@media (max-width: 767px) {
  .ks108-film {
    padding: 100px 0;
  }

  .ks108-film-play {
    width: 70px;
    height: 70px;
    font-size: 26px;
  }
}

/* ---- Amenities: full "40+" list image --------------------------------
   Static poster of the complete amenity set, sitting under the photo
   slider in #clubhouse. Click opens it in the fancybox lightbox already
   on the page so the small labels can be zoomed on mobile.

   NB: no border-radius + overflow:hidden here. Rounded-corner clipping of
   a ~1300px-wide image inside ScrollSmoother's per-frame transform forces
   the browser to re-composite a masked layer every frame - that was the
   scroll lag. Square edges on the near-white marble art are invisible
   anyway; a hairline border sits directly on the <img>. */
/* script "Amenities" heading - clear the eyebrow above it, same as the
   other script headings whose tall capitals overrun the line box */
.tc-projects-style1 .title h2.fsz-45 {
  margin-top: 30px;
}

.ks108-amenities-intro,
.ks108-section-lead {
  max-width: 780px;
  line-height: 1.8;
  font-size: 16px;
}

.ks108-amenities-full-img {
  display: block;
}

.ks108-amenities-full-img img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e4dcd3;
}

/* Footer redesign: dropped the inline enquiry form (redundant with the
   "Enquire Now" modal used everywhere else on the page) and rebalanced the
   three columns - brand/description/CTA gets more room now that the form
   column is gone, and Site Office / Quick Links sit as two evenly divided
   columns with a hairline between each. */
.ks108-footer .top-content {
  padding-top: 90px;
  padding-bottom: 60px;
}

.ks108-footer .info-side .text {
  max-width: 380px;
}

.ks108-footer .branch-card h5 {
  font-family: var(--ks108-body-font) !important;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b8378;
}

.ks108-footer .footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.ks108-footer .footer-links a {
  color: #4a453f;
}

.ks108-footer .footer-links a:hover {
  color: var(--color-orange1);
  text-decoration: none;
}

@media (min-width: 992px) {
  .ks108-footer .top-content .col-lg-5 {
    padding-right: 30px;
  }

  .ks108-footer .top-content .col-lg-3.offset-lg-1,
  .ks108-footer .top-content .col-lg-3:not(.offset-lg-1) {
    border-left: 1px solid #e4dcd3;
    padding-left: 40px;
  }
}

/* The "why Zirakpur" testimonial quotes were removed from
   .tc-testimonials-style1, leaving just the RERA/80% Green/108m marquee.
   Its 100px padding-top was the gap under the removed quotes block, which
   stacked on top of the section's own 150px padding - two gaps back to
   back. The section padding alone is enough breathing room now. */
.tc-testimonials-style1 .marq-slider {
  padding-top: 0;
}

/* Footer background: the same cream marble texture from the brochure's
   own closing page ("Your journey to a world of luxury begins here"),
   cropped clear of its watermark/logo/legal text. */
.ks108-chat-marble {
  background-image: url('../img/chat-bg-marble.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* The phone number's 120px .xl-text size (theme default) was sized for
   the section's old full-width single-column layout. Now that it shares
   the row with the form card in a narrower col-lg-6, that size overflows
   and wraps awkwardly - scaled down to fit. */
.tc-chat-style1 .xl-text {
  font-size: 56px;
}

@media screen and (max-width: 991px) {
  .tc-chat-style1 .xl-text {
    font-size: 38px;
  }
}

/* Inline enquiry form on the closing "Ready to own an address" CTA -
   reuses the existing _ParEmail partial/handler (already wired to the
   Index page's OnPostFoot, phone-OTP verification and CRM forwarding; see
   the "no duplicate lead-capture logic" note in Preview.cshtml.cs) so this
   is just a second place to render the same form, not new backend work. */
.ks108-chat-form-card {
  background: #fff;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 26px 54px rgba(24, 33, 26, 0.08);
}

.ks108-chat-form-card label {
  font-size: 13px;
  color: #8b8378;
  margin-bottom: 4px;
}

.ks108-chat-form-card .form-control {
  border-radius: 10px;
  border-color: #e4dcd3;
  padding: 10px 14px;
}

.ks108-chat-form-card .form-control:focus {
  border-color: var(--color-orange1);
  box-shadow: 0 0 0 0.2rem rgba(175, 117, 100, 0.15);
}

.ks108-chat-form-card input[type="submit"] {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 13px 22px;
  background: var(--color-orange1);
  font-family: var(--ks108-body-font) !important;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ks108-chat-form-card input[type="submit"]:hover {
  background: #18211a;
}

/* Footer legal disclaimer (same copy pattern as the Evoq site's .ev-footer-disclaimer) */
.ks108-footer-disclaimer {
  font-size: 12px;
  line-height: 1.8;
  color: #666;
  padding: 20px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}