/* ==========================================================================
   JAGRITI DHAM — BANNER + FLOATING ENQUIRY FORM
   /best-luxury-senior-citizen-home-kolkata/

   This is the banner from the sibling landing page /luxurious-senior-living/,
   ported here so the two campaign pages carry one banner. Loaded LAST, after
   style2.css, responsive2.css and header2.css.

   THREE THINGS ON THIS PAGE THAT THE SIBLING DID NOT HAVE, and that this file
   has to answer:

     1. responsive2.css:234 flags BOTH `height:700px` and `object-fit:cover`
        on `.slick-slide img` above 1400px. An important declaration cannot be
        beaten by an unimportant one at any specificity, so the whole
        --jd-slide-h system would simply stop applying on a large desktop —
        the one place this banner is most often seen. The counter-flag is at
        the foot of this file. (`object-position` there is NOT flagged, so the
        twelve per-slide crop hooks still win on specificity alone.)

     2. responsive2.css:95-97 flags the slick arrows' left/right/width/height
        under 768px, exactly as the sibling's responsive.css:97-99 did. Same
        fix, same reason: without it Previous sits at 34% of the viewport,
        about 122px in at 375px, on top of the pause plate.

     3. The palette tokens. `--jd-gold` and `--jd-gold-lt` are declared on
        :root in the sibling's header.css; here header2.css declares them on
        .jd-header, which the banner is not inside. This file declares them on
        :root itself. That matters more than it sounds: style2.css already
        uses `var(--green)`, `var(--black)` and `var(--gold)` in nine places
        and NONE of the three is declared anywhere in this project, so those
        rules silently do nothing. Do not add a fourth.

   The account of what the design replaces is in the sibling's
   css/banner.css, which this block is otherwise a faithful copy of.
   ========================================================================== */

:root{
  /* The sibling gets these four from its header2.css :root. header2.css on
     this page scopes them to .jd-header, and the banner is not inside it. */
  --jd-gold:#cbb279;
  --jd-gold-lt:#e3cf9c;
  --jd-gold-dp:#7f6630;
  --jd-green-deep:#2b3f2f;

  --jd-slide-h:640px;          /* slides are 1400x700 (2:1) */
  --jd-panel-w:400px;          /* form panel width; the caption reserves this + a gutter */
  --jd-gut:max(24px, calc((100% - 1280px) / 2));
}

/* ---------- shell ---------- */
.banner-main{
  position:relative;
  background-color:#22331f;    /* was #cbb279 — gold only ever showed as letterbox bars */
  overflow:hidden;
}
.full-slider{ position:relative; }
.slider .item{ position:relative; overflow:hidden; }

/* slick.css:7 sets .slick-list{margin:0 -5px}. That was harmless inside the old
   8-column box, but now the slider is full-bleed it makes the track 10px wider
   than the viewport and pushes every slide 5px off-centre. */
.full-slider .slick-list{ margin:0; }

/* before slick initialises, all six .item divs paint stacked on top of each
   other; clip to one slide height so there is no flash of a tall column */
.slider:not(.slick-initialized){ height:var(--jd-slide-h); overflow:hidden; }

/* ---------- the slides ---------- */
.slider .item img{
  width:100%;
  height:var(--jd-slide-h);
  object-fit:cover;            /* was contain */
  object-position:center;
  display:block;
}

/* Per-slide framing hooks. The sources are all 1400x700; desktop crops top and
   bottom, and a phone crops roughly a third of the width, so a subject near an
   edge can be cut. Adjust the pair below per slide if anything is badly framed —
   first value is horizontal, second vertical, 50% 50% is dead centre.
   Use these classes, NOT :nth-child: slick clones slides when infinite:true. */
/* one crop hook per slide. All twelve sit at 50% 50% until somebody
   looks at them on a real screen — these are 1920x800 photographs
   cropped into a shorter box, so the interesting part of two or three
   of them is probably not dead centre. Changing one is a one-line
   edit and affects nothing else. */
.slider .jd-s1 img{ object-position:50% 50%; }
.slider .jd-s2 img{ object-position:50% 50%; }
.slider .jd-s3 img{ object-position:50% 50%; }
.slider .jd-s4 img{ object-position:50% 50%; }
.slider .jd-s5 img{ object-position:50% 50%; }
.slider .jd-s6 img{ object-position:50% 50%; }
.slider .jd-s7 img{ object-position:50% 50%; }
.slider .jd-s8 img{ object-position:50% 50%; }
.slider .jd-s9 img{ object-position:50% 50%; }
.slider .jd-s10 img{ object-position:50% 50%; }
.slider .jd-s11 img{ object-position:50% 50%; }
.slider .jd-s12 img{ object-position:50% 50%; }

/* scrim: dark enough on the left for the caption, lighter through the middle,
   and a touch of weight on the right so the glass panel always has ground */
.slider .item::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(90deg,
      rgba(18,30,21,.82) 0%,
      rgba(18,30,21,.58) 30%,
      rgba(18,30,21,.18) 52%,
      rgba(18,30,21,.42) 100%),
    linear-gradient(0deg, rgba(18,30,21,.55) 0%, rgba(18,30,21,0) 42%);
}
.slider .item > .container{ position:static; }

/* ---------- caption ---------- */
.slider .inner-bx{
  position:absolute; z-index:3;
  bottom:104px;
  left:var(--jd-gut);
  /* reserve the panel's column so the two can never collide at any width */
  right:calc(var(--jd-gut) + var(--jd-panel-w) + 28px);
  width:auto; max-width:560px;
  background:none;             /* was a flat black box */
  padding:0 0 0 22px;
  border-left:2px solid var(--jd-gold);
  transition:none;
}
.cap-eyebrow{
  display:block;
  font-size:12px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--jd-gold-lt);
  margin-bottom:10px;
}
.slider .inner-bx p{
  display:block; width:100%; margin:0;
  color:#fff; font-size:18px; line-height:1.55;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}

/* slide counter — "1 / 6", the slash set as a real glyph */
.count{
  float:none; display:flex; align-items:baseline; gap:6px;
  margin-top:20px;
}
.count span{ display:inline-block; line-height:1; }
.count .slidenum{ font-size:26px; font-weight:600; color:#fff; }
/* THE SLASH IS A REAL GLYPH, NOT A ROTATED BOX.
   Two things had to be got right here and the first one bit once already.
   (1) SPECIFICITY. This must be `.count span.slash`, NOT `.count .slash`.
   style2.css:2145 is `.count span.slash` = 0-2-1; a class-only selector is
   0-2-0 and LOSES however many stylesheets later banner.css loads. What
   shipped before that was understood was the legacy rule entire — a 1x40px bar
   at rotate(45deg) pushed `left:8px`, whose 29x29 bounding box crossed 11px
   INTO the "6" (measured: slash right edge 145 against totalnum left 134).
   Matching the element makes this 0-2-1 too, and the later sheet wins the tie.
   (2) THE OBJECT ITSELF. The legacy slash was a rotated rectangle, which is
   why it could collide: a rotated box keeps its ORIGINAL width for layout (1px
   here) while PAINTING across its 29x29 bounding box, so the flex gap was
   measuring 1px and the eye was seeing 29. A typed "/" cannot do that — it
   occupies exactly the space it draws, carries its own sidebearings, sits on
   the shared baseline, and scales with the type. Every legacy declaration is
   therefore neutralised rather than adjusted. */
.count span.slash{
  width:auto; height:auto;           /* was 1px x 40px */
  margin:0; left:0; position:static;  /* was position:relative; left:8px */
  background:none;                   /* was a solid #cbb279 fill */
  transform:none;                    /* was rotate(45deg) */
  line-height:1;                     /* was 0, which collapsed the box */
  flex:0 0 auto;
  font-size:19px;                    /* between the 26px figure and the 15px
                                        total, so the slash separates them
                                        without competing with either */
  font-weight:400;                   /* the numerals are 600; a lighter slash
                                        keeps them the thing being read */
  color:rgba(227,207,156,.72);       /* 6.1:1 on the caption band — a divider,
                                        quieter than both numerals it sits
                                        between, which is what a slash is */
}
.count span.slash::before{ content:"/"; }
.count .totalnum{ font-size:15px; color:var(--jd-gold-lt); opacity:.85; }

/* ---------- arrows ---------- */
.banner-main button.slick-arrow{
  position:absolute; top:auto; bottom:34px; z-index:6;
  width:50px; height:50px; border-radius:50%;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(227,207,156,.65);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
/* FLAGGED AT EVERY WIDTH, and this is the trap the sibling page does not have.
   style2.css:2119 and :2126 are UNCONDITIONAL - no media query at all:

       button.slick-next            { right:35% !important; }
       button.slick-prev.slick-arrow{ left:57% !important; bottom:28px; }

   An important declaration cannot be beaten by an unimportant one at any
   specificity, so the unflagged pair that ships on the sibling put Previous
   at 57% of the viewport here - measured 903px in at 1600 - sitting beside
   the enquiry panel while Next sat correctly at the left. The two arrows of
   one control, at opposite ends of the banner. The sibling only had to fight
   this under 768px; here it is every width, which is why these two are
   flagged and its equivalents are not. */
.banner-main button.slick-prev.slick-arrow{
  left:var(--jd-gut) !important; right:auto !important;
}
.banner-main button.slick-next.slick-arrow{
  left:calc(var(--jd-gut) + 62px) !important; right:auto !important;
}
.banner-main button.slick-arrow:hover{
  background:var(--jd-gold); border-color:var(--jd-gold); transform:translateY(-2px);
}
.banner-main button.slick-arrow::before{
  top:50% !important; left:50% !important;
  transform:translate(-50%,-50%);
  background-repeat:no-repeat; background-position:center;
}
.banner-main button.slick-arrow:focus-visible{
  outline:2px solid var(--jd-gold-lt); outline-offset:3px;
}

/* ---------- pause / play (injected by custom.js when autoplay is on) ----------
   Autoplay runs for 6s a slide, so WCAG 2.2.2 needs a stop control — and
   pause-on-hover does not exist on a touch screen. */
.banner-main .jd-slide-pause{
  position:absolute; top:auto; bottom:34px; z-index:6;
  left:calc(var(--jd-gut) + 124px);
  width:50px; height:50px; border-radius:50%;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(227,207,156,.65);
  padding:0; cursor:pointer;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.banner-main .jd-slide-pause:hover{
  background:var(--jd-gold); border-color:var(--jd-gold); transform:translateY(-2px);
}
.banner-main .jd-slide-pause:focus-visible{
  outline:2px solid var(--jd-gold-lt); outline-offset:3px;
}
/* two bars = playing (press to pause) */
.banner-main .jd-slide-pause::before,
.banner-main .jd-slide-pause::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:4px; height:15px; background:#f2e8d2;
}
.banner-main .jd-slide-pause::before{ left:19px; }
.banner-main .jd-slide-pause::after{ left:27px; }
.banner-main .jd-slide-pause:hover::before,
.banner-main .jd-slide-pause:hover::after{ background:#22331f; }
/* triangle = paused (press to play) */
.banner-main .jd-slide-pause.is-paused::before{
  left:20px; width:0; height:0; background:transparent;
  border-left:13px solid #f2e8d2;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}
.banner-main .jd-slide-pause.is-paused::after{ display:none; }
.banner-main .jd-slide-pause.is-paused:hover::before{ border-left-color:#22331f; }

/* ==========================================================================
   The enquiry form — translucent panel floating over the banner
   ==========================================================================
   The reference page uses rgba(101,161,130,.7). Measured over a light slide
   that composites to rgb(147,189,168), where white text lands at 2.08:1 —
   a real WCAG failure that changes slide to slide.
   Instead of covering the photo, this darkens the BACKDROP with a filter and
   then lays a much thinner tint (.38) over it. The image stays clearly visible
   through the panel and white text still clears AA on every slide. */
.jd-form-layer{
  position:absolute; inset:0; z-index:5;
  pointer-events:none;                 /* clicks fall through to the slider */
}
.jd-form-inner{
  pointer-events:auto;
  position:absolute; top:50%; transform:translateY(-50%);
  right:calc(var(--jd-gut) + 12px);
  width:min(var(--jd-panel-w), 36%);
  padding:24px 22px 18px;
  /* Matched to /best-luxury-senior-citizen-home-kolkata/, measured live on
     .formbg2: rgba(101,161,130,.7), no backdrop-filter, opacity 1. */
  background:rgba(101,161,130,.7);
  border:1px solid rgba(227,207,156,.45);
  box-shadow:0 24px 48px -28px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.06);
}
.jd-form-inner .banner_right{ margin:0; text-align:left; }
.jd-form-inner .form_area{ margin:0; width:100%; }
.jd-form-inner .form_area .form-title{
  font-size:23px !important;   /* style2.css sets h2 to 20px !important */
  font-weight:700; color:#fff;
  text-align:center; margin:0;
  letter-spacing:.01em;
  text-shadow:0 1px 10px rgba(0,0,0,.4);
}
.jd-form-inner .form_area .form-title::after{
  content:""; display:block;
  /* This heading lives inside .banner_right.section_title, and style2.css:41
     `.section_title h2:after` pins that pseudo-element absolute at bottom:-5px.
     Since the heading became an <h2> that rule applies, so the rule has to be
     put back in flow or it sits on top of the text. */
  position:static; bottom:auto; left:auto; right:auto;
  width:58px; height:1px; margin:10px auto 16px;
  background:linear-gradient(90deg,transparent,rgba(203,178,121,.95),transparent);
}
.jd-form-inner .form_area_mid{ padding:0; }
.jd-form-inner .form_area .form-group{ margin-bottom:10px; }

/* "Interested in Site Visit?*" measures 159px but a col-md-6 inside this narrow
   panel only offers 119px of text width, so the label was cut off. No readable
   font size fits it at half width - give both selects the full row instead. */
.jd-form-inner .form_area_mid .jd-col-full{
  flex:0 0 100%; max-width:100%;
  padding-right:12px !important;   /* beats bootstrap's .pe-0 */
}

/* fields: white plates on the glass, like the reference */
.jd-form-inner input,
.jd-form-inner select,
.jd-form-inner textarea{
  height:46px !important;
  background:#fff;
  border:0 !important;
  border-radius:3px !important;
  color:#2b3f2f !important;
  font-size:15px !important;
  padding:10px 12px !important;
  box-shadow:inset 0 1px 2px rgba(43,63,47,.16), 0 1px 0 rgba(255,255,255,.18);
}
/* the default browser select arrow looks unfinished next to everything else */
.jd-form-inner select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:34px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237f6630' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
.jd-form-inner textarea{ height:66px !important; }
.jd-form-inner input::placeholder,
.jd-form-inner textarea::placeholder{ color:#5f6b60; opacity:1; }   /* 5.9:1 on white */
.jd-form-inner select{ color:#5f6b60 !important; }
.jd-form-inner input:focus,
.jd-form-inner select:focus,
.jd-form-inner textarea:focus{
  outline:2px solid var(--jd-gold-lt) !important;
  outline-offset:1px;
  border-color:var(--jd-gold-lt) !important;
}

/* submit: gold, matching the header CTA. The reference uses green, but green
   on a green panel is muddy and loses the call to action. */
.jd-form-inner input[type=submit]{
  height:auto !important;
  width:auto !important;
  min-width:150px;
  display:block;
  margin:6px auto 0;
  padding:12px 30px !important;
  border:0 !important;
  border-radius:0 !important;
  background:linear-gradient(180deg,#eaddb2 0%,#d9c390 34%,#c9ad72 52%,#d2b87f 66%,#b99a56 100%);
  color:#1d2c20 !important;
  font-size:13px !important; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(127,102,48,.3);
  transition:filter .25s ease, transform .25s ease;
}
.jd-form-inner input[type=submit]:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.jd-form-inner input[type=submit]:active{ transform:translateY(1px); }

/* The reCAPTCHA iframe is a fixed 304px. Its wrapper is col-md-8, which inside a
   ~356px panel is only ~237px - so the widget spilled out of its column and sat
   on top of the SUBMIT button in col-md-4. Stack the two full width instead. */
/* This row is nested directly inside the outer .row, so its negative gutter
   margins compound and pull the captcha/submit ~12px off the axis of the
   fields above. Zero them so everything lines up on one edge. */
.jd-form-inner .form_area_mid .row.align-items-center{
  row-gap:14px;
  margin-left:0; margin-right:0;
}
.jd-form-inner .form_area_mid .row.align-items-center > [class*="col-md-"]{
  flex:0 0 100%; max-width:100%; width:100%;
  padding-left:0; padding-right:0;
  text-align:center;
}
/* The widget is a fixed 304x78 iframe. Keep it at native size so the text
   stays sharp, and centre it. custom.js only ever scales it DOWN, and only
   when the column is narrower than 304px; the height calc keeps the layout
   box honest so nothing below it shifts. */
.jd-form-inner .g-recaptcha{
  width:304px;
  margin:0 !important;
  /* margin:auto cannot centre a box that is WIDER than its column (the auto
     margins resolve to 0), which is exactly the case on a 320px phone. An
     explicit half-offset centres it either way. 152px = 304 / 2. */
  position:relative;
  left:calc(50% - 152px);
  transform:scale(var(--jd-rc, 1));
  transform-origin:50% 0;          /* centre origin, so shrinking stays centred */
  height:calc(78px * var(--jd-rc, 1));
}
/* when the box is wider than a very narrow column, the scaled-down content
   still lands exactly on the column edges - this just stops the unscaled
   layout box from producing a scrollbar */
.jd-form-inner .form_area_mid .row.align-items-center > [class*="col-md-"]{
  overflow:hidden;
}
.jd-form-inner .g-recaptcha > div{ margin:0 !important; transform:none !important; }

/* ---------- the strapline under the banner ---------- */
/* A plinth under the banner, built from the same material as the header ribbon —
   flat green ground, light from above, a little grain — so the page is
   bookended by the same surface rather than three different greens. */
.banner_heading{
  position:relative;
  background-color:#2f4433;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(0,0,0,0) 46%, rgba(0,0,0,.14) 100%);
  border-top:1px solid rgba(203,178,121,.6);
  border-bottom:1px solid rgba(203,178,121,.22);
  padding:26px 0 24px;
  text-align:center;
  font-size:inherit; line-height:inherit; color:#fff;
}

/* the positioning statement */
.banner_heading .bh-title{
  margin:0;
  font-size:clamp(20px, 2.1vw, 27px) !important;   /* style2.css sets h2 to 20px !important */
  font-weight:700;
  line-height:1.28;
  letter-spacing:.004em;
  color:#fff;                                       /* 10.5:1 on #2f4433 */
  text-align:center;
}
.banner_heading .bh-title::after{ display:none; }   /* kill the .section_title h2 underline */

/* rule + diamond, the same ornament language as the header ribbon */
.bh-orn{
  display:block; position:relative;
  width:170px; height:1px; margin:15px auto 0;
  background:linear-gradient(90deg,
    rgba(203,178,121,0), rgba(203,178,121,.6) 22%,
    rgba(203,178,121,.6) 78%, rgba(203,178,121,0));
}
.bh-orn::after{
  content:""; position:absolute; left:50%; top:50%;
  width:6px; height:6px; background:var(--jd-gold);
  transform:translate(-50%,-50%) rotate(45deg);
  box-shadow:0 0 0 4px #2f4433;                     /* punch a hole in the rule */
}

/* the four proof points */
.banner_heading .bh-list{
  display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center;
  gap:8px 0;
  margin:15px 0 0; padding:0;
  color:inherit;
}
.banner_heading .bh-list span{
  position:relative;
  padding:0 20px;
  font-size:13px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  color:#efe4c9;                                    /* 8.3:1 on #2f4433 */
  white-space:nowrap;
}
/* gold diamonds replace the literal "|" characters that used to sit in the markup */
.banner_heading .bh-list span + span::before{
  content:""; position:absolute; left:-3px; top:50%;
  width:5px; height:5px; background:var(--jd-gold);
  transform:translateY(-50%) rotate(45deg);
}

/* Below 1200px the four points no longer fit on one line, and a separator that
   sits BETWEEN items ends up leading a wrapped line — a stray mark on some items
   and none on the first. So drop the between-items logic and give every item its
   own mark: two columns on tablets, one column on phones. */
@media (max-width:1199px){
  .banner_heading .bh-list{
    display:grid;
    grid-template-columns:repeat(2, max-content);
    justify-content:center; justify-items:start;
    gap:11px 36px;
    margin-top:14px;
  }
  .banner_heading .bh-list span{ padding:0 0 0 15px; }
  .banner_heading .bh-list span::before,
  .banner_heading .bh-list span + span::before{
    content:""; position:absolute; left:0; top:.45em;
    width:5px; height:5px; background:var(--jd-gold);
    transform:rotate(45deg);
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1399px){
  :root{ --jd-panel-w:370px; }
  .slider .inner-bx{ max-width:500px; }
}

@media (max-width:1199px){
  :root{ --jd-slide-h:560px; }
  .slider .inner-bx p{ font-size:17px; }
  .jd-form-inner{ padding:18px 18px 14px; }
  .jd-form-inner .form_area .form-title{ font-size:22px !important; }
}

/* below 992px the panel stops floating and flows under the banner, so the
   form is never squeezed against the slide */
@media (max-width:991px){
  :root{ --jd-slide-h:420px; }
  .slider .inner-bx{ right:var(--jd-gut); max-width:560px; bottom:96px; }
  .slider .inner-bx p{ font-size:16px; }

  .jd-form-layer{ position:static; pointer-events:auto; }
  .jd-form-inner{
    position:static; transform:none;
    width:auto; right:auto;
    background:linear-gradient(180deg,#3a5240 0%,#2f4433 100%);
    -webkit-backdrop-filter:none; backdrop-filter:none;
    border:0; border-top:2px solid var(--jd-gold);
    box-shadow:none;
    padding:22px 16px 16px;
  }
  .jd-form-inner{ --jd-rc:1; }
}

/* the reCAPTCHA iframe is a fixed 304px; only shrink it once the panel
   interior is actually narrower than that (below ~360px of viewport) */
@media (max-width:360px){
  .jd-form-inner{ --jd-rc:.9; }
}

@media (max-width:767px){
  :root{ --jd-slide-h:340px; }
  .slider .inner-bx{
    position:static; width:auto; bottom:auto; left:auto; right:auto; max-width:none;
    background:none; border-left:0;
    padding:16px 18px 18px;
  }
  .slider .item::after{
    background:linear-gradient(0deg, rgba(18,30,21,.65) 0%, rgba(18,30,21,0) 55%);
  }
  .slider .item > .container{ padding:0; }
  .slider .inner-bx p{ font-size:15.5px; line-height:1.5; text-shadow:none; }
  .cap-eyebrow{ font-size:11px; letter-spacing:.18em; margin-bottom:7px; }
  .count{ margin-top:14px; }
  .count .slidenum{ font-size:22px; }

  /* caption sits on a solid band under the photo, which is far more readable
     on a phone than 90 words of copy over an image */
  .slider .item .container{ background:#2f4433; }

  .banner-main button.slick-arrow,
  .banner-main .jd-slide-pause{ bottom:auto; top:calc(var(--jd-slide-h) - 62px); }

  /* FLAGGED, AND NOT OPTIONALLY. css/responsive2.css:95 sets
     `button.slick-prev.slick-arrow{ left:34%!important }` and :99 sets
     `button.slick-next, button.slick-prev{ width:50px!important;
     height:50px!important; line-height:40px!important }`, both inside
     @media only screen and (max-width:767px). AN IMPORTANT DECLARATION CANNOT
     BE BEATEN BY AN UNIMPORTANT ONE AT ANY SPECIFICITY, so loading last bought
     nothing: the unflagged rules below lost outright. What shipped on a phone
     was Previous at 34% (about 122px at 375) and 50x50 instead of 14px and
     44x44 - landing almost entirely ON TOP of the pause plate at 118px. Point
     sampling found only 34% of the back arrow's own area actually hit-testing
     to it at 375px, and 25% at 320px, where it overlapped BOTH neighbours; a
     thumb aimed at "back" paused the slideshow instead. Next escaped only
     because its right:34%!important is dropped as over-constrained. */
  .banner-main button.slick-arrow{
    width:44px !important; height:44px !important; line-height:0 !important;
  }
  .banner-main button.slick-prev.slick-arrow{ left:14px !important; right:auto !important; }
  .banner-main button.slick-next.slick-arrow{ left:66px !important; right:auto !important; }
  .banner-main .jd-slide-pause{ left:118px; }
  .banner-main .jd-slide-pause::before{ left:16px; }
  .banner-main .jd-slide-pause::after{ left:24px; }
  .banner-main .jd-slide-pause.is-paused::before{ left:17px; }

  /* On a phone the four points wrap, and a separator that was sitting BETWEEN
     items ends up leading a line — a stray mark on items 2-4 and none on the
     first. So stack them one per line and give every item the same gold mark,
     which reads as an intentional feature list instead. */
  .banner_heading{ padding:20px 0 18px; }
  .banner_heading .bh-list{
    grid-template-columns:max-content;      /* one column on a phone */
    gap:9px; margin:13px auto 0;
  }
  .banner_heading .bh-list span{
    font-size:11.5px; letter-spacing:.1em;
    white-space:normal;
  }
  .bh-orn{ width:130px; margin-top:12px; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference){
  .slider .slick-current img{ animation:jd-ken 9s ease-out both; }
  @keyframes jd-ken{ from{ transform:scale(1.055); } to{ transform:scale(1); } }
}


/* ==========================================================================

/* ==========================================================================
   THE ONE TRAP THIS PAGE HAS AND THE SIBLING DOES NOT
   ==========================================================================
   css/responsive2.css:232-235

       @media (min-width: 1400px) {
         .formbg2{ height:580px; margin:25px 75px 15px 15px; }
         .slick-slide img{ height:700px!important;
                           object-fit:cover!important;
                           object-position:0 100%; }
       }

   Two of those three declarations are flagged, and an important declaration
   cannot be beaten by an unimportant one at ANY specificity — loading later
   buys nothing. Above 1400px every slide would snap back to a 700px box
   regardless of --jd-slide-h, which at that width is 720px: a 20px jump, and
   the caption rail, the arrows and the pause plate are all positioned off
   the variable, so they would sit 20px below the image's bottom edge.

   So these two are flagged back, and ONLY these two. object-position is left
   alone because it is not flagged there and the twelve `.slider .jd-sN img`
   hooks (0-2-1) already outrank `.slick-slide img` (0-1-1).

   `.formbg2` on the same rule is dead now — the class is gone from the
   markup with the old two-form banner — but it is left in place rather than
   edited out of a legacy file this block does not own. */
@media (min-width:1400px){
  .banner-main .slick-slide img{
    height:var(--jd-slide-h) !important;
    object-fit:cover !important;
  }
}

/* ==========================================================================
   NOT THE BANNER — the page's horizontal overflow, parked here
   ==========================================================================
   This file used to carry a second block here: two rules that stopped the
   "Kolkata's only Luxurious Senior Citizen Home" list from pushing the page
   25px sideways at 1280. That list is gone - the section was rebuilt as a
   grid in css/sections2.css - so the patch has been deleted rather than left
   to rot as rules that match nothing and claim to fix something. The pricing
   tables followed it on 2026-09-05: #Pricing was rebuilt as .jd-pricing and
   its scroll wrapper (.jd-p-scroll) lives with the rest of that section in
   css/sections2.css, as does the script hook in js/custom.js. Nothing in this
   file answers for the page's horizontal overflow any more; the heading
   stays so the next reader knows where to look.
   ========================================================================== */