/* ==========================================================================
   JAGRITI DHAM — BANNER + FLOATING ENQUIRY FORM
   Loaded after header.css so it wins the cascade.

   What this replaces:
     · .slider img was object-fit:contain, which letterboxed every 1400x700
       slide against .banner-main's gold background. Now full-bleed cover.
     · the caption was a flat rgba(0,0,0,.7) box; now a scrim + gold rule
     · the form moves out of an 8/4 column split and floats over the banner
       as a translucent green panel, the way /best-luxury-senior-citizen-home-kolkata/
       does — but with the contrast fixed (see the note on the panel below).
   ========================================================================== */

:root{
  --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`.
   style.css:1905 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;
}
.banner-main button.slick-prev.slick-arrow{ left:var(--jd-gut); right:auto; }
.banner-main button.slick-next.slick-arrow{ left:calc(var(--jd-gut) + 62px); right:auto; }
.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{
  /* 22, not 23. The heading is now "Book a tour or Schedule Visit", whose
     natural single-line width is 327px at 23px against a panel that is 324px
     wide from 1200 all the way to 1399 - so it broke to two lines across that
     whole band, 1366x768 laptops included, and only fitted at 1400+ where the
     panel grows to 354. At 22px it measures 312.8px and sits on one line from
     375px up. The 1199-and-below rule below already used 22px. */
  font-size:22px !important;   /* style.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 style.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;   /* style.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/responsive.css:97 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); } }
}


/* ==========================================================================
   "LIVE A BETTER LIFE" SECTION
   Was: a centred 36px heading, two justified paragraphs, and six long bullets
   running the full 1280px container. Justified text with hyphens and negative
   word-spacing opens rivers and is the hardest setting to read at 65+, and a
   1280px measure is roughly double the comfortable line length.
   Now: a constrained measure for the prose, and the six offerings — which are
   six distinct things, not a list — as cards.
   ========================================================================== */

/* --- the ground ----------------------------------------------------------
   Was: linear-gradient(180deg,#fdfaf2 0%,#f7f2e6 100%) — a cream wash spanning
   dL* 2.72, which left the six white cards only dL* 1.70 off the paper they
   sit on. At that distance a card stops reading as an object and starts
   reading as a gap in the page. So "make the background more beautiful" turned
   out to be the same job as making the cards visible: drive the paper down
   until they lift off it, and stop exactly at the AAA floor for body copy.

   Now the section is a wall plane under the #2f4433 plinth: one flat sheet of
   warm paper, one band of light spilling out from under the plinth and leaning
   12 degrees off vertical, and the plinth's own contact shadow pressing into
   the top of that light. The ground BRIGHTENS as it clears the overhang
   (peak at y~118, not at y=0) — that rise-then-fall is what reads as light
   rather than as a gradient.

   Read the stack bottom-up, since CSS lists the topmost layer first:
     3  the light      168deg, px stops. Only 12 degrees off vertical: steeper
                       and the centre of a 1280px container sits past the
                       light's reach, so the centred heading and measure would
                       fall outside their own light.
     2  contact shade  the overhang. Biased to 34% — the SAME side the light
                       enters, because a shadow is only visible where there is
                       light to occlude. Biased the other way it lands on unlit
                       plane and just eats contrast budget.
     1  grain          the plinth's own feTurbulence, at .026 not .05 because
                       this ground is light. Texture, not dither: the longest
                       identical-RGB run down a 1px column in the graded zone
                       measures 30-42px from 390 to 1920, so nothing is close
                       to banding either way. It is here because the plinth
                       has it. 298 bytes.

   Verified across 320-1920: body #3f4a41 never drops below 7.08:1 and headings
   #2b3f2f never below 8.66:1 — AAA at the DARKEST point of the field, not just
   the lightest. White card vs ground goes 1.04-1.12:1 -> 1.23-1.31:1.
   No pseudo-element, so the section still needs no position:relative and the
   absolutely-positioned .lb-ic medallions cannot be disturbed.
   This rule MUST stay above the 991px/640px blocks further down the file: they
   share its 0-2-0 specificity and only source order separates them. */
.section-gaping.live_better{
  padding:56px 0 60px;

  /* The settled plane, and the honest fallback — if any layer below fails to
     parse the whole background-image is dropped and this is what remains, on
     which body copy still measures 7.15:1. #e9e1c7 after grain. */
  background-color:#eae2c8;

  background-image:
    /* 1 - grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='lbg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23lbg)' opacity='.026'/%3E%3C/svg%3E"),

    /* 2 - the lintel's contact shade. 140px is a physical distance from the
       plinth, so it is px. The min() on the CENTRE stops the shade sliding
       further along the gradient line as the viewport widens, into a region
       where the light has already decayed: uncapped, body contrast measures
       6.74:1 at 3840px, under the 7:1 AAA floor. Capped, it holds 7.05:1 from
       320 through 3840 and is identical to uncapped at every width <=1264px.
       The SIZE deliberately stays a bare 70% with no min(): Chromium rejects
       math functions in a radial-gradient's explicit-size slot (it accepts
       them in the position slot), and one unparseable layer invalidates the
       whole background-image declaration — which is exactly what happened on
       the first pass. Measured: the size cap bought nothing anyway; the centre
       is the whole mechanism. No white lip on the shade's lower side — a
       lintel yields occlusion, and a light line there would double the
       plinth's existing gold rule. */
    radial-gradient(70% 140px at min(34%, 430px) -10px,
      rgba(34,51,31,.094) 0%,
      rgba(34,51,31,.04)  42%,
      rgba(34,51,31,0)    100%),

    /* 3 - the light. A band, not a pool: no centre to find, so it reads as a
       lit plane rather than a spotlight. It dies at t=660 along the gradient
       line, where t = 0.208x + 0.978y from the section's top-left. The first
       card row sits at t = 382-550 depending on width, so the light DOES reach
       it, at alpha .08-.28; card-vs-ground is 1.226:1 at its weakest (768px)
       against 1.311:1 on the settled plane below. That is the price of
       lighting the prose, and it is still ~3x what the old cream wash gave.
       Warm-white rather than #fff so the paper stays cream. */
    linear-gradient(168deg,
      rgba(255,254,247,.97)   0,
      rgba(255,254,247,.72) 120px,
      rgba(255,254,247,.40) 300px,
      rgba(255,254,247,.14) 470px,
      rgba(255,254,247,0)   660px);

  background-repeat:repeat, no-repeat, no-repeat;

  /* The gilt edge. The plinth closes with a rgba(203,178,121,.22) hairline
     that composites to a dim olive-brass on its own dark ground; this lays a
     bright brass line immediately under it, compositing to #e8debf on the lit
     paper. Dark green, dim brass, bright brass, light — a gold-leafed page
     edge instead of a butt joint. Deliberately an inset box-shadow and not a
     faded ::before: the plinth's border-bottom is a solid full-bleed line, and
     a hairline that fades at the ends would read as a double rule across the
     middle and a smudge at the edges. Full bleed matches full bleed. */
  box-shadow:inset 0 1px 0 rgba(227,207,156,.5);

  /* raised from .35 because the foot is deeper than it was: .35 gave the rule
     1.16:1 against the new ground, .45 restores 1.22:1 so it still closes the
     section against the flat #e6eee7 band below. */
  border-bottom:1px solid rgba(203,178,121,.45);
}

/* Note on invariance, because the comments above are easy to over-read: the
   light's stops are px, so the ground is invariant in Y — identical at 320px
   and 1920px down any given column. It is NOT invariant in X, because t
   carries a 0.208x term: the top edge runs alpha .97->.83 at 320px but
   .97->.25 at 1920px. The 12-degree lean is therefore a desktop reading, and a
   phone sees a near-horizontal band. Both are correct; the existing 991px and
   640px blocks need nothing added either way. */

/* Contrast-sensitive readers want nothing modulating the field behind
   justified copy. Dropping the images leaves the plane already declared above,
   which raises BOTH text minima at once (body 7.08 -> 7.15:1, headings
   8.66 -> 8.74:1) and flattens card separation to a constant 1.295:1. */
@media (prefers-contrast:more){
  .section-gaping.live_better{ background-image:none; }
}

/* forced-colors overrides background-COLOR but leaves background-image alone,
   so the images have to be dropped by hand or the grain and the light survive
   on top of the system Canvas. Nothing here carries information. Declared
   AFTER prefers-contrast on purpose: Chromium matches both under Windows High
   Contrast, and this one has to win. */
@media (forced-colors:active){
  .section-gaping.live_better{
    background-image:none;
    background-color:Canvas;
    box-shadow:none;
    border-bottom-color:CanvasText;
  }
}

/* Paper is not a room — drop the modelling. But NOT to #fff: white paper puts
   the six white cards at exactly 1.00:1 and they vanish, which is worse than
   what printing gives today. A faint tint costs almost no ink and keeps them
   as objects. The rule goes solid because .45 alpha would print as nothing. */
@media print{
  .section-gaping.live_better{
    background-image:none;
    background-color:#f6f1e3;
    box-shadow:none;
    border-bottom:1px solid #7f6630;
  }
}

/* --- heading, with the same rule-and-diamond as the plinth and the form --- */
.live_better .section_title{ margin-bottom:0; }
.live_better .section_title h2{
  font-size:clamp(23px, 2.7vw, 34px) !important;
  font-weight:700;
  line-height:1.25;
  color:var(--jd-green-deep);
  max-width:26em;          /* 20ch broke this 63-character headline over 4 lines */
  margin:0 auto;
}
.live_better .section_title h2::after{
  position:static; display:block;         /* .section_title h2:after is absolute */
  content:"";
  width:58px; height:1px;
  margin:16px auto 0;
  background:linear-gradient(90deg,transparent,rgba(203,178,121,.95),transparent);
}

/* The heading's second line. Split out of the single 63-character headline,
   where an en-dash was doing a subtitle's job. It sits INSIDE the h2 so the
   announced heading is unchanged and so the gold rule above - which is a
   position:static, display:block pseudo-element and therefore renders after all
   of the h2's content - still lands under BOTH lines instead of between them.
   Deliberately NO colour: it inherits the h2's, so any contrast, print or
   forced-colors override of that heading covers this line too. Size and weight
   carry the hierarchy on their own. Its own clamp rather than an em ratio, so
   it cannot shrink below 15px on a phone where the h2 bottoms out at 23px. */
.live_better .section_title h2 .lb-sub{
  display:block;
  margin-top:8px;
  font-size:clamp(15px, 1.55vw, 20px);
  font-weight:500;
  letter-spacing:.012em;
}

/* --- the prose, at a readable measure and no longer justified --- */
.live_better p{
  text-align:justify;
  /* justified text needs break opportunities or it opens big word gaps, so
     hyphenation stays ON. The original also had word-spacing:-0.05em, which
     fought the justification engine - that stays off. */
  hyphens:auto; -webkit-hyphens:auto;
  word-spacing:normal;
}
.live_better .lb-lead{
  max-width:80ch;
  margin:24px auto 0;
  text-align:justify;
  text-align-last:center;
  font-size:17px;
  line-height:1.72;
  color:#3f4a41;                           /* 8.48:1 in the light, 7.08:1 on the plane */
}
.live_better .lb-offer{
  max-width:80ch;
  margin:36px auto 0;
  text-align:center;
}
.live_better .greehead{
  font-size:19px; font-weight:700;
  /* NOT var(--jd-green): at <=640px this drops to 17px bold = 12.75pt, which is
     not WCAG large text, so it needs 4.5:1 as body copy. #4f6f52 measures
     4.505:1 on the new ground and 4.348:1 under prefers-contrast - a fail.
     --jd-ribbon-bg is one step deeper, holds 6.5:1, and stays visibly lighter
     than the #2b3f2f h2 above it so the hierarchy survives. */
  color:var(--jd-ribbon-bg);
  margin:0 0 8px;
  letter-spacing:.01em;
}
.live_better .lb-offer p{
  text-align:justify;
  text-align-last:center;
  font-size:16px; line-height:1.7;
  color:#3f4a41;
  margin:0;
}

/* --- the six offerings ---------------------------------------------------
   Boxes matched to the "Cloud Nine Amenities" cards on
   infinityheights.in/residential-clubhouse-guwahati/ : white card, 12px radius,
   1px #e6ebe8 hairline, soft 2px/10px shadow, a tinted circular icon medallion
   pinned top-left, the title as a block in brand green, and the body indented
   past the medallion. Their green (#006a34) is swapped for Jagriti's #4f6f52. */
.live_better .lb-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-auto-rows:1fr;                     /* equal-height boxes, as theirs */
  gap:18px;
  list-style:none;
  margin:38px 0 0; padding:0;
}
.live_better .lb-card{
  position:relative;
  display:block;
  background:#fff;
  border:1px solid #e6ebe8;
  border-radius:12px;
  padding:22px 22px 22px 86px;            /* left pad clears the medallion */
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.live_better .lb-ic{
  position:absolute; left:20px; top:20px;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  /* a lit dish rather than a flat tint: light from above, a fine green rim,
     a white top edge and a soft drop so it sits on the card, not in it */
  background:linear-gradient(145deg,#f3f7f2 0%,#e3ebe3 100%);
  border:1px solid rgba(79,111,82,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
             0 2px 6px -2px rgba(43,63,47,.3);
  transition:transform .45s cubic-bezier(.34,1.35,.5,1),
             background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* a brass ring that blooms outward on hover */
.live_better .lb-ic::after{
  content:""; position:absolute; inset:-5px;
  border-radius:50%;
  border:1px solid rgba(203,178,121,.85);
  opacity:0; transform:scale(.82);
  pointer-events:none;
  transition:opacity .4s ease, transform .45s cubic-bezier(.34,1.35,.5,1);
}
.live_better .lb-ic i{
  font-size:22px; color:var(--jd-green);
  background:transparent; width:auto; height:auto; line-height:1;
  transition:color .35s ease, transform .45s cubic-bezier(.34,1.35,.5,1);
}
.live_better .lb-card h4{
  display:block;
  font-size:16.5px; font-weight:700;
  color:var(--jd-green);                  /* 5.2:1 on white */
  margin:0 0 5px;
  letter-spacing:0;
}
.live_better .lb-card p{
  text-align:justify;
  text-align-last:left;
  font-size:14px; line-height:1.65;
  color:#5a5a5a;                          /* 6.9:1 on white */
  margin:0;
}

@media (hover:hover){
  .live_better .lb-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 24px rgba(0,0,0,.14);
  }
  .live_better .lb-card:hover .lb-ic{
    background:linear-gradient(145deg,var(--jd-green) 0%,#3a5240 100%);
    border-color:var(--jd-green);
    transform:translateY(-2px) scale(1.06);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),
               0 10px 18px -8px rgba(43,63,47,.6);
  }
  .live_better .lb-card:hover .lb-ic::after{ opacity:1; transform:scale(1); }
  .live_better .lb-card:hover .lb-ic i{ color:#f2e8d2; transform:scale(1.08); }
}

@media (max-width:991px){
  .section-gaping.live_better{ padding:44px 0 46px; }
  .live_better .lb-grid{ grid-template-columns:repeat(2, 1fr); gap:18px; }
  .live_better .lb-lead{ font-size:16px; }
}

@media (max-width:640px){
  .section-gaping.live_better{ padding:34px 0 36px; }
  .live_better .lb-grid{ grid-template-columns:1fr; gap:14px; margin-top:28px; }
  /* keep the 68px left inset: the medallion is absolutely positioned, so any
     smaller left padding runs the text underneath it */
  .live_better .lb-card{ padding:18px 16px 18px 78px; }
  .live_better .lb-lead{ font-size:15.5px; margin-top:18px; }
  .live_better .lb-offer{ margin-top:26px; }
  .live_better .greehead{ font-size:17px; }
  .live_better .lb-ic{ left:16px; top:16px; width:48px; height:48px; }
  .live_better .lb-ic i{ font-size:20px; }
}

@media (prefers-reduced-motion:reduce){
  .live_better .lb-card,
  .live_better .lb-ic,
  .live_better .lb-ic::after,
  .live_better .lb-ic i{ transition-duration:.01ms !important; }
  .live_better .lb-card:hover,
  .live_better .lb-card:hover .lb-ic,
  .live_better .lb-card:hover .lb-ic i{ transform:none !important; }
}


/* ==========================================================================
   "WE CARE LIKE FAMILY" SECTION
   Was: a flat #e6eee7 mint band shared with #floor-plan; a 36px #222 heading
   under the absolute 4px gold bar; a rail of five pills whose hover paint is
   IDENTICAL to their active paint; a white panel floating on a 0 0 12px #ccc
   halo that glows evenly in every direction; five raw 800x500 photographs;
   and 20px check-squares hung off a negative margin.

   Three things were wrong and only one of them was cosmetic:
     · the white panel measured 1.183:1 against the mint. At that distance a
       panel is not an object standing on a ground, it is a hole in the page.
     · style.css:1667 paints :hover #4f6f52 and style.css:1671 paints .active
       #4f6f52, so while the pointer is anywhere in the rail you cannot see
       which tab is open. That is a broken tab control, not a style nit.
     · the warm #eae2c8 paper above butts straight into cool mint with nothing
       between them, so the page changes hue at a hard edge and reads as two
       sites stapled together.

   Now: the same building, one room further in. The plinth section is a wall
   plane lit from under a lintel; this is the room through the opening. Its
   ground holds the SAME lightness as the paper next door and changes only
   material. The rail and the panel are two plates of one material standing in
   that light, and the section has exactly ONE gesture — five brass seals down
   the rail, one of them struck into a dark plate. Everything else is quiet on
   purpose.

   EVERYTHING is scoped through .we_care (index.php:453). .section_gaping_bg1
   is also on the #floor-plan <section> at index.php:728, .tick is on seven
   other blocks and .sticky_div on nine, so an unscoped selector here would
   repaint half the page.
   ========================================================================== */

/* --- the ground ----------------------------------------------------------
   Was: .section_gaping_bg1{background:#e6eee7} — Y=0.837416, L*=93.34, on
   which the white panel measured 1.183:1. The paper next door had exactly
   this problem and was solved by driving the ground down until the white
   objects lifted off it. The same arithmetic applies, but the target here is
   not "darker", it is a specific number: match the paper's LIGHTNESS.

     paper above  #eae2c8  L* 89.885   ->  #e9e1c7 after grain, L* 89.435
     this plane   #dbe5dc  L* 89.983   ->  #dae4db after grain, L* 89.532
     dL* after grain = 0.097

   Under a tenth of a CIE lightness step. So the two rooms are the same wall at
   the same brightness and the ONLY thing that changes across the threshold is
   the finish: warm lime paper on one side, cool green plaster on the other.
   Hue moves, value does not. That is what makes it read as architecture rather
   than as two coloured bands, and it is a principle the rest of the page can
   use rather than a patch for this one seam.

   Read the stack bottom-up, since CSS lists the topmost layer first:
     3  the light     168deg, px stops, the SAME lean and the same warm white
                      as the plinth room, because it is the same source seen
                      from further away. It dies at 300px, not 660px: only the
                      title and its rule need it, and a longer throw would eat
                      the panel's separation exactly where the panel's top edge
                      lives (y~198, where alpha is .10 and white-vs-ground is
                      still 1.283:1). It does a second job for free — the first
                      80px of a cool plane are warm, so the paper's colour
                      temperature carries across the seam and then cools out.
                      One gesture, two seams' worth of work.
     2  the foot      the section BELOW (.section-gaping.senior_living) has no
                      background rule and is therefore plain #fff. This room
                      does not close against that white, it dissolves into it:
                      the last pixel measures 1.070:1 against it. There is no
                      brass rule at the foot BECAUSE there is no edge there to
                      draw — see the note under --wc-foot.
     1  grain         the plinth's own feTurbulence at .026, identical to the
                      paper room's tile, because this ground is also light.
                      Texture, not dither. 298 bytes. (fractalNoise averages
                      0.5 in all four channels including alpha, so this lays
                      1.3% coverage of mid-grey over the plane — which is why
                      #eae2c8 grains to #e9e1c7 and #dbe5dc to #dae4db.)

   Verified across the whole field at the DARKEST point, the settled plane
   after grain (#dae4db), not the lightest:
     body    #3f4a41  7.083:1   (AAA holds; 7.58:1 where the subtitle sits)
     heading #2b3f2f  8.658:1   (9.27:1 where the h2 sits)
     white panel vs ground  1.3077:1  (was 1.1832:1 — a 1.61x improvement)
   No pseudo-element, so no position:relative is needed and nothing here can
   disturb the sticky rail.

   Specificity 0-2-0, which beats .section_gaping_bg1 (0-1-0) and
   .section-gaping (0-1-0) without !important. background-size is deliberately
   not declared, so the grain tile keeps its intrinsic 120x120 and the
   gradients keep 100% 100% — the same choice the paper room makes. */
.section-gaping.we_care{
  padding:56px 0 60px;

  /* the length of the foot dissolve, held in a custom property so the two
     responsive blocks can shorten it in ONE token when the padding shrinks.
     It must never exceed padding-bottom: the panel's lower edge sits exactly
     that far up, and a dissolve that reached it would wash out the panel's
     separation at the one place the eye checks it. */
  --wc-foot:60px;

  /* the settled plane, and the honest fallback: if any layer below fails to
     parse, the whole background-image is dropped and this is what remains, on
     which body copy still measures 7.169:1 and the panel still reads 1.292:1 */
  background-color:#dbe5dc;

  background-image:
    /* 1 - grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='wcg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23wcg)' opacity='.026'/%3E%3C/svg%3E"),

    /* 2 - the foot, dissolving into the white section below. `to top` puts the
       gradient line's origin at the BOTTOM, so the stops are measured up from
       the skirting:  0 -> #f6f8f6 (1.070:1 vs #fff),  22px -> #e4ebe5,
       and it is fully spent at the panel's lower edge. */
    linear-gradient(to top,
      rgba(255,255,255,.78) 0,
      rgba(255,255,255,.30) calc(var(--wc-foot) * .37),
      rgba(255,255,255,0)   var(--wc-foot)),

    /* 3 - the seam carry. The 168deg layer below is a RAKING light, so its
       t = 0.2079x + 0.9781y: the top-right corner sits at t = 0.2079W, which
       is 299px at 1440 and 399px at 1920 - past the raking layer's 300px
       throw. Left alone, the warm paper carried across the threshold only at
       the left edge and the seam re-opened as a cold butt joint on the right.
       This layer is vertical and full-width so the carry is even, and it is
       spent at 120px, far above the panel's top edge, so it cannot wash out
       the 1.283:1 panel separation. */
    linear-gradient(to bottom,
      rgba(255,252,240,.34) 0,
      rgba(255,252,240,0)   120px),

    /* 4 - the light through the doorway. Same 168deg, same warm white as the
       plinth room, shorter throw. Composited over the grained plane it runs
         y=0    #faf8ed  L* 97.46   heading 10.63:1  body 8.70:1
         y=80   #e9eee3  L* 93.42   heading  9.59:1  body 7.85:1
         y=175  #dfe7de  L* 90.77   heading  8.95:1  body 7.32:1
         y=300+ #dae4db  L* 89.53   heading  8.66:1  body 7.08:1
       The rise-then-settle is what reads as light rather than as a gradient. */
    linear-gradient(168deg,
      rgba(255,252,240,.90)   0,
      rgba(255,252,240,.44)  80px,
      rgba(255,252,240,.14) 175px,
      rgba(255,252,240,0)   300px);

  background-repeat:repeat, no-repeat, no-repeat;

  /* NO border-bottom, and NO inset top lip — both deliberate omissions.
     .live_better closes with border-bottom:1px rgba(203,178,121,.45), which
     composites to #dbcca4 and measures 1.217:1 against its own paper and
     1.498:1 against this room's lit top. That single rule already reads from
     BOTH sides, so it is the threshold; a second line below it would be a
     double rule and a white lip under it measured 1.027:1 — invisible work.
     At the foot there is no edge at all to draw: the ground becomes the white
     of the next section, and a rule there would put a line in the middle of
     nothing. Three joins on this page, three honest treatments: a brass
     threshold above, a dissolve below. */
}

/* --- the title ----------------------------------------------------------
   .section_title h2:after (style.css:41) is position:absolute with
   bottom:-5px and has already caused two overlap bugs on this page. It is
   neutralised EXPLICITLY here — static, block, and re-drawn as flow content —
   rather than inherited, and re-cut as the same 58px fading-brass hairline the
   plinth room and the form use. Repeating the building's ornament is what
   makes two rooms read as one building.
   The !important on font-size is not optional and it is not laziness:
   responsive.css:52 sets .section_title h2{font-size:20px!important} under
   (max-width:767px) and style.css:451 sets .h2,h2{font-size:20px!important}
   under (max-width:575.98px). No amount of specificity beats an important
   declaration. Everything else here wins on specificity alone — 0-2-1 against
   style.css's 0-1-1, and 0-2-1 against responsive.css:162's 0-1-1. */
.we_care .section_title{ margin-bottom:32px; }
.we_care .section_title h2{
  font-family:Helvetica, sans-serif;
  font-size:clamp(23px, 2.7vw, 34px) !important;   /* matched to .live_better's
     h2 on purpose: a larger figure here would out-shout the room above and
     break the descent through the page */
  font-weight:700;
  line-height:1.25;
  color:var(--jd-green-deep);        /* #2b3f2f — 8.658:1 at the darkest point */
  max-width:24ch;                    /* "We Care Like Family" is 19 — one line */
  margin:0 auto;
}
.we_care .section_title h2::after{
  position:static; display:block;    /* kills the absolute 4px #cbb279 bar */
  content:"";
  width:58px; height:1px;
  margin:16px auto 0;
  background:linear-gradient(90deg,transparent,rgba(203,178,121,.95),transparent);
}
.we_care .section_title p{
  /* p{font-size:15px} at style.css:23 is below the 16px floor this audience
     needs, and .section_title p{font-weight:500} sets a line of introduction
     in semibold, which reads as a second heading. */
  /* No width cap. The cap used to be 46ch, which resolved to 435px against a
     440px string - five pixels short, so the old sentence broke over two lines
     at EVERY width. That string is gone: the line now reads "We believe that
     the best senior living experience is made possible through Care", 78
     characters against the old 58, measuring 599.8px at 17px Helvetica. So it
     sets on ONE line from 768px up, two below that, and three at 320px. That is
     not a regression to chase - one line on a 375px phone would need ~10px type,
     well under the 16px floor this audience needs, which is the same floor the
     font-size below is here to hold. */
  max-width:none;
  margin:16px auto 0;
  font-size:17px;
  font-weight:400;
  line-height:1.6;
  color:#3f4a41;                     /* 7.58:1 where it sits, 7.08:1 floor */
}

/* --- the sticky offset ---------------------------------------------------
   .sticky_div is top:100px but .jd-header is fixed at
   var(--jd-ribbon-h) + var(--jd-bar-h) = 106px at >=992 and 96px at 768-991,
   so today the rail slides 6px UNDER the header every time it sticks. Express
   the offset in the header's own tokens rather than a magic number and it
   maintains itself: 120px on desktop, 110px on tablet, each clearing its own
   header with 14px to spare.

   The min-width guard is load-bearing. responsive.css:111 sets
   .sticky_div{position:relative;top:0} under (max-width:767px); a bare
   .we_care .sticky_div{top:...} at 0-2-0 would beat that `top:0` while leaving
   position:relative alone, which would shove the rail 110px DOWN the page on
   every phone. Only declare an offset where the element is actually sticky. */
/* --- equal-height plates -------------------------------------------------
   The rail is 398px at desktop and the panel only 363-399px depending on which
   tab is open, so the right plate sat ~30px short of the left AND changed
   height every time you clicked. Stretching the row fixes both: the row takes
   the height of whichever plate is taller and the other fills it.

   The sticky has to move for this to work. `.sticky_div` is on .nav_left, the
   COLUMN, and a stretched column is exactly as tall as its own containing
   block - so it can never scroll within it and sticky becomes a no-op. Put the
   sticky on the .nav-pills plate INSIDE the column instead: the column now
   stretches to the row, and the plate sticks within it. When the panel is the
   taller of the two (which is every width below 992px, where the narrower
   column wraps the copy) the rail still sticks exactly as before; when the
   rail is taller the column is only as tall as the plate, so there is nothing
   to scroll and it correctly does not stick. */
@media (min-width:768px){
  .we_care .left_nav{ align-items:stretch !important; }   /* .align-items-start
                                       is a Bootstrap utility, so it is !important */
  .we_care .nav_left.sticky_div{ position:static; }       /* 0-3-0 beats .sticky_div */
  .we_care .left_nav .tab-content{ height:100%; }
  /* the plate carries `mb-2` in the markup and Bootstrap ships
     .mb-2{margin-bottom:.5rem!important}. Left alone the column measures the
     plate PLUS 8px, so the panel stretched to 406px against a 398px rail and
     the two boxes still did not line up. Zero it and they match exactly. */
  .we_care .nav_left .nav-pills{ margin-bottom:0 !important; }

  /* NOT --jd-ribbon-h + --jd-bar-h. Those describe the UN-condensed header,
     which cannot coexist with this rail being stuck: index.php adds
     .jd-scrolled at scrollY>96 and only removes it below 44, and this section
     is thousands of pixels down the page, so by the time the rail sticks the
     ribbon is collapsed to 0 and the bar is 54px here / 58px above. Offsetting
     against 106px left ~60px of dead air over the rail. */
  .we_care .nav_left .nav-pills{ position:sticky; top:68px; }  /* 54px bar + 14 */
}
@media (min-width:992px){
  .we_care .nav_left .nav-pills{ top:72px; }   /* 58px condensed bar + 14 */
}
/* NB the 768 block is deliberately open-ended rather than capped at 991px. On a
   fractional device-pixel-ratio (1.25 is common on Windows) a viewport of
   991.x matches NEITHER max-width:991px NOR min-width:992px, and a capped
   block would leave that sliver falling through to style.css:1652's legacy
   top:100px. Open-ended, 992+ simply overrides 768+ and nothing can fall
   between them. */
/* every pane's .card-body ALSO carries .sticky_div. Its containing block is
   the pane, which is never taller than it is, so it can only ever let the text
   drift away from its own plate. Off. 0-4-0 against style.css:1652's 0-1-0. */
.we_care .tab-content .card-body.sticky_div{ position:static; top:auto; }

.we_care .left_nav{ margin-top:8px; }   /* style.css:1655 sets 20px on the ROW;
                                           the section padding carries that air */

/* --- the two plates -------------------------------------------------------
   The rail and the panel are the same object made twice: same 168deg face (the
   light direction of the ground), same #c9d4cb hairline, same two-part shadow
   thrown 2px right and 18px down, because the light is up and to the left.
   #c9d4cb is chosen to be a real edge on BOTH sides — 1.526:1 against the
   plate it bounds and 1.167:1 against the ground it sits on. The #e6ebe8 the
   paper room uses for its cards would have measured 1.059:1 against this
   ground: it would have vanished exactly where the plate meets the wall.

   This section runs a three-step hairline register and every line knows which
   step it is on:  plate edge #c9d4cb 1.526:1  >  heading rule #d9e2db
   1.325:1  >  list divider #e0e7e2 1.258:1.

   No overflow:hidden anywhere — it would clip the focus ring. */
.we_care .left_nav .nav-pills,
.we_care .left_nav .tab-content{
  background:linear-gradient(168deg,#ffffff 0%,#fbfcfb 100%);
  border:1px solid #c9d4cb;
  border-radius:14px;
  box-shadow:0 1px 2px rgba(34,51,31,.05),
             2px 18px 34px -22px rgba(34,51,31,.42);
}
.we_care .left_nav .nav-pills{
  /* 6px, not Bootstrap's 0. This is the focus ring's clearance and it is
     chosen, not inherited: the ring below is 2px thick at outline-offset:3px,
     so it reaches 5px beyond the pill's own box, and outlines paint without
     affecting layout. At any gap under 5px that ring lands ON the neighbouring
     pill — and when the neighbour is the active one it would be #2b3f2f on
     #3a5240, i.e. 1.327:1, invisible. 6px keeps a pixel in hand. */
  padding:6px;
}

/* --- the pills ------------------------------------------------------------
   style.css:1685 paints these with a 200%-wide left-sliding green gradient and
   style.css:1702 turns the label white on hover — which is exactly what
   style.css:1671 does for .active. The two states are indistinguishable, and
   during the 500ms wipe the label straddles the boundary between #000-on-pale
   and #000-on-green. The base rule below replaces the shorthand at 0-4-0,
   which ALSO resets background-size (200% 100%, 0-3-0) and background-position
   (right bottom, 0-3-0) to their initial values in the same declaration, and
   replaces transition:all .5s with a named list so a 500ms `all` no longer
   drags the shadows around.

   border:0 removes the 1px #4f6f52 rules between pills; they come back as
   inset ::after hairlines that do not fight the rounded plate hover and active
   paint under them. font-family:inherit is required — these are <button>s.

   min-height 72px = a 46px seal plus 13px of padding either side. The rail is
   this section's entire control surface and the audience is 55+; the target is
   generous by a wide margin over the 44px floor. */
.we_care .left_nav .nav-pills .nav-link{
  position:relative;
  --wc-pill-x:14px;                  /* drives the divider inset below too */
  display:flex; align-items:center;
  width:100%; min-height:72px;
  padding:13px var(--wc-pill-x);
  text-align:left;
  white-space:normal;
  overflow-wrap:break-word;
  font-family:inherit;
  font-size:16px;                    /* never below 16px for this audience */
  font-weight:600;
  line-height:1.3;
  color:var(--jd-green-deep);        /* 11.32:1 on the plate; was #000 */
  background:transparent;
  border:0;
  border-radius:9px;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
/* the divider, drawn INSIDE the pill's own box (bottom:0, not -1px) so it can
   never land on top of the plate that :hover or .active paints beneath it —
   which is why no :has() selector is needed anywhere in this file. */
.we_care .left_nav .nav-pills .nav-link::after{
  content:"";
  position:absolute; left:var(--wc-pill-x); right:var(--wc-pill-x); bottom:0; height:1px;
  background:#e0e7e2;                /* 1.258:1 on the plate — quiet, but read */
  transition:opacity .25s ease;
}
.we_care .left_nav .nav-pills .nav-link:last-child::after,
.we_care .left_nav .nav-pills .nav-link.active::after{ opacity:0; }

/* the pill-to-pill separation, on margin rather than the plate's flex `gap`
   for the same cross-browser reason as the seal above. This distance is load
   bearing: the focus ring below is 2px at outline-offset:3px, so it reaches
   5px past the pill's own box and outlines paint without affecting layout. At
   any less than 5px that ring lands ON the neighbour, and when the neighbour
   is the active pill it would be #2b3f2f on #2b3f2f - invisible. 6px keeps a
   pixel in hand. */
.we_care .left_nav .nav-pills .nav-link + .nav-link{ margin-top:6px; }

/* hover: a lift, not an inversion. :not(.active) makes this order-independent
   against the .active rule below (0-6-0 against 0-5-0) and it is gated behind
   (hover:hover) so a touch device never sticks in a hover state after a tap.
   The nosing is GREEN here and BRASS on .active — "you may go here" against
   "you are here" — and the seal only grows very slightly, because the active
   state has to stay unmistakably the louder of the two. */
@media (hover:hover){
  .we_care .left_nav .nav-pills .nav-link:not(.active):hover{
    background-color:#edf3ee;                   /* 1.126:1 off the plate */
    color:var(--jd-green-deep);                 /* 10.06:1 on the tint */
    box-shadow:inset 3px 0 0 var(--jd-green);   /* #4f6f52 — 5.004:1 on it */
  }
  .we_care .left_nav .nav-pills .nav-link:not(.active):hover::after{ opacity:0; }
  .we_care .left_nav .nav-pills .nav-link:not(.active):hover img{
    transform:scale(1.04);
  }
}
/* a press state for touch, where there is no hover to give any feedback */
.we_care .left_nav .nav-pills .nav-link:active{ transform:translateY(1px); }

/* active. THIS is the one paint declaration on the page that needs !important.
   style.css:1671 is `.left_nav .nav-pills .nav-link.active{background:#4f6f52
   !important}` at 0-4-0, and an important declaration can only be beaten by
   another important declaration; among those, specificity decides. The
   selector below is 0-5-0 + !important, so it wins cleanly. The `color:#fff`
   in that same legacy rule carries NO !important, so my color needs no flag
   and does not get one.

   The paint is deepened from #4f6f52 to the ribbon's own #3a5240 -> #2b3f2f
   for a reason that is not taste: white on #4f6f52 measures 5.633:1, which is
   AA and not AAA. White on #3a5240 measures 8.534:1 and on #2b3f2f 11.322:1,
   so the selected tab's label is AAA at every point of its own gradient. */
.we_care .left_nav .nav-pills .nav-link.active{
  color:#fff;
  background:linear-gradient(160deg,#3a5240 0%,#2b3f2f 100%) !important;
  box-shadow:inset 3px 0 0 var(--jd-gold),        /* brass nosing, 4.138:1 */
             inset 0 1px 0 rgba(255,255,255,.10),
             0 6px 14px -8px rgba(34,51,31,.55);
}

/* focus. Bootstrap 5.1.3 ships no .nav-link focus box-shadow (only
   `.nav-link:focus,.nav-link:hover{color:#0a58ca}` at 0-2-0, beaten by the
   base rule at 0-4-0), so there is no blue glow to suppress — only the UA
   ring, replaced here with the header's own idiom (header.css:281): 2px solid,
   offset 3px, deep green.

   The offset is structural, not decoration. A #2b3f2f ring laid DIRECTLY on
   the active pill would measure 1.327:1 and fail 1.4.11. At offset:3px the
   ring never touches the pill — a 3px band of plate sits between them — so the
   indicator is legible on both of its sides: ring against plate 11.32:1, plate
   against pill 8.534:1. And it never reaches the neighbour either, because
   2 + 3 = 5px of reach against the 6px gap set above. */
.we_care .left_nav .nav-pills .nav-link:focus-visible{
  outline:2px solid var(--jd-green-deep);
  outline-offset:3px;
  border-radius:9px;
}

/* --- the five seals -------------------------------------------------------
   THE SECTION'S ONE GESTURE, so it is the one place that gets a detail budget.

   The PNGs are 32x32 RGBA and every opaque pixel in all five is exactly
   rgb(203,179,127) — brass, one step off --jd-gold (#cbb279). They are already
   the brand's metal, already downloaded, and there is nothing to replace them
   WITH that would say more; five Font Awesome glyphs would make this rail
   texturally identical to the six FA medallions in .live_better directly
   above, which is the same device twice running.

   What they lacked was a ground. Brass on a light pill is ~2:1 and looks
   tarnished. So the <img> ITSELF becomes the medallion: padding + background +
   border-radius on the element means the raster paints in the content box and
   the dark disc fills the padding box — no wrapper element, no markup change.
   46px with 7px of padding leaves a 32px content box (and 44px with 6px at <=991), so the raster renders at
   its NATIVE size and is never resampled. That matters: these are thin line
   drawings (133-276 opaque pixels out of 1024) and any downscale would mush
   them, which is the wrong trade for a 55+ reader.

   This inverts .lb-ic next door — their 52px LIGHT dish holds a GREEN glyph,
   this 46px DARK dish holds a BRASS one — which is the ribbon's own colour
   logic, and it makes the two rooms read as one design language rather than
   one repeated device. Brass goes from ~2:1 to 4.183:1 at the top of the dish
   and 6.593:1 at its foot.

   display:block also restores the seals at iPad portrait, where
   responsive.css:149 hides them (0-3-1, beaten by this rule's 0-4-1). That
   hide dates from when they were bare 32px rasters jammed against a label in a
   216px column; with a dish, a flex gap and a wrapping label there is nothing
   left to patch, so it is retired deliberately rather than by accident.

   NOTE: no CSS filter recolours the glyph, and none can — filter applies to
   the element's entire rendered output, so it would black out the medallion
   background painted on that same element. */
.we_care .left_nav .nav-pills .nav-link img{
  display:block;
  flex:0 0 auto;
  box-sizing:border-box;
  width:46px; height:46px;
  padding:7px;                       /* 46 - 14 = a 32px content box, 1:1 */
  margin:0 14px 0 0;                 /* replaces a flex gap: `gap` is unsupported
                                        on Safari < 14.1 / Chrome < 84 and there
                                        is no reliable @supports probe for it,
                                        and this is the ONLY thing separating
                                        the seal from its label. Also kills
                                        style.css:1697's margin-right:5px. */
  border-radius:50%;
  background:linear-gradient(150deg,#2b3f2f 0%,#22331f 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
             0 2px 5px -2px rgba(34,51,31,.45);
  object-fit:contain;
  transition:background .3s ease, box-shadow .3s ease,
             transform .35s cubic-bezier(.34,1.35,.5,1);
}
/* on the selected pill the disc goes DARKER than the plate it sits on and
   takes a bright brass rim: a seal struck into the plate. The rim is doing
   real work, not decoration — the disc's interior against the pill measures
   only 1.576:1, so the edge has to be carried by the line. #e3cf9c measures
   5.556:1 against #3a5240 and 8.756:1 against the disc, and the glyph gains
   contrast in the bargain: 6.593:1 rising to 8.179:1 down the dish.
   The rim is a spread-only box-shadow, not a border, so the content box never
   changes and the raster never shifts by a pixel between states. */
.we_care .left_nav .nav-pills .nav-link.active img{
  background:linear-gradient(150deg,#22331f 0%,#16210f 100%);
  box-shadow:0 0 0 1px var(--jd-gold-lt),
             inset 0 1px 0 rgba(255,255,255,.06);
}

/* --- the panel, the rail's twin ------------------------------------------
   style.css:1676 gives it background:#fff, no border, no radius and a
   0 0 12px #ccc halo that glows evenly in all directions — a light source, not
   a shadow, and the clearest tell of the era this section is being pulled out
   of. It takes the same face, hairline and directional shadow as the rail
   (declared together, above). Its weakest separation from the ground is
   1.283:1, at its top edge (y~198) where the doorway light is still at alpha
   .10; below that it settles to 1.3077:1. The old panel never got above
   1.183:1 anywhere.
   width:100% from the legacy rule is deliberately left alone: no margin is
   added here, so the panel's right edge stays on the section's own alignment
   line. */
.we_care .left_nav .tab-content{
  padding:clamp(20px, 2.4vw, 32px);
  color:#3f4a41;                     /* 9.263:1; was #000 at a hard 21:1 */
}
.we_care .tab-pane > .row{ align-items:center; }

/* pane headings. h4 is a bare element selector in style.css (25px/700/#4f6f52,
   dropping to 20px under 575.98px). Kept large, taken to --jd-green-deep for
   11.32:1, and separated from its list by a plain hairline. The rule is
   NEUTRAL, not brass, on purpose: brass is spent on the title ornament and on
   the rail's state marker, and a third brass mark here would dilute both. */
.we_care .tab-content h4{
  font-size:clamp(19px, 1.7vw, 23px);
  font-weight:700;
  line-height:1.3;
  letter-spacing:.005em;
  color:var(--jd-green-deep);
  margin:0 0 18px;
  padding-bottom:14px;
  border-bottom:1px solid #d9e2db;   /* 1.325:1 — the middle hairline step */
}

/* --- the ticked lists ----------------------------------------------------
   style.css:1567 sets width:30px;height:30px on an INLINE :before, where both
   are silently ignored, then leans on margin-left:-25px against the ul's
   margin-left:25px to fake a hanging indent. The indent is the right idea; the
   box was never real, and because the mark is pulled INTO the indent, the
   second line of any wrapping item runs back underneath its own checkmark.
   Several of the twenty-one items across these five panes wrap.

   Rebuilt as a true hanging indent: the li is the positioning context and the
   mark is absolute at left:0, so wrapped lines align under the first character
   every time. This is the one change in the section that a reader will feel
   rather than see, and for a 55+ audience it is worth more than any of the
   modelling above it.

   The mark KEEPS \f14a. It is the page's affirmative mark — the Facilities
   section immediately below uses the same .tick idiom — and changing it here
   would desynchronise two adjacent lists for no gain now that the marks carry
   no dish of their own. Keeping it also means the FA5/FA6 codepoint trap is
   never engaged rather than merely survived. (\f00c was verified anyway, since
   it was the obvious alternative: fa-solid-900.ttf parses to 3 cmap subtables
   at pid/eid 0/3 fmt4, 1/0 fmt0, 3/1 fmt4, 960 codepoints across U+F000-F8D9;
   \f00c is at gid 13 with a real 1-contour outline, bbox (0,1)-(512,383);
   \f14a is at gid 239 with 2 contours, which confirms the parse. Both are also
   present in the fa-solid-900.svg shipped beside it, and css/all.css:7800
   declares "Font Awesome 5 Free" weight 900 against those same files.)

   .9em x 1.8 = 26.7px, which is exactly the li's 16.5 x 1.62 line box — that
   is what puts the mark on the first line's optical centre and keeps it there
   if the reader zooms. transition is removed: style.css:1567 animates `all`
   for a mark that never changes.

   Specificity: .we_care .tab-content.tick ul is 0-3-1 over style.css:1940's
   0-2-1; .we_care .tick ul li is 0-2-2 over responsive.css:165's 0-1-2, which
   is what pins body copy at 16.5px in the 820-1180 landscape band where the
   legacy rule drops it to 15px. */
.we_care .tab-content.tick ul{
  padding-left:0;
  margin:0;
}
.we_care .tick ul li{
  position:relative;
  /* the well is in em, not px, because the mark inside it is: Font Awesome's
     check-square has a .875em advance at font-size:.9em = .7875em, and under
     Firefox's text-only zoom (which scales font-size but not px padding) a
     30px well is overrun at ~262%. 1.85em keeps 1.06em of clearance at every
     zoom level, and resolves to 30.5px at 100% - unchanged to the eye. */
  padding-left:1.85em;
  margin:0 0 13px;
  font-size:16.5px;
  line-height:1.62;
  color:#3f4a41;                     /* 9.263:1 on the panel */
}
.we_care .tick ul li:last-child{ margin-bottom:0; }
.we_care .tick ul li::before{
  position:absolute;
  left:0; top:0;
  width:auto; height:auto;           /* the legacy 30x30 box is inert on an
                                        inline pseudo-element and misleading on
                                        an absolute one — drop it, do not
                                        inherit it */
  margin:0;                          /* undoes -25px left / 6px right */
  font-size:.9em;
  line-height:1.8;
  color:var(--jd-green);             /* 5.633:1 — the page's tick colour */
  transition:none;
}

/* --- the photographs -----------------------------------------------------
   All five sources are exactly 800x500, so 8/5 crops nothing today; declaring
   the ratio rather than inheriting it costs nothing and buys a reserved box,
   so the panel does not reflow while a .webp decodes and the page height does
   not jump between tabs. These <img> carry no width/height attributes, so
   without this every first paint and every tab switch shifts layout — a Core
   Web Vital, on a page bought with Google Ads money.
   Radius and shadow are the panel's, scaled down and thrown in the same
   direction, so the photograph is an object lying in the same light rather
   than a rectangle punched through the plate. The 1px ring is a spread-only
   shadow, so it adds no layout box and cannot fight .img-fluid. */
.we_care .tab-pane img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:8 / 5;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 0 0 1px rgba(34,51,31,.14),     /* #e0e2e0 — 1.299:1 on the plate */
             2px 16px 30px -20px rgba(34,51,31,.55);
}

/* ---------- responsive ---------- */
@media (max-width:991px){
  /* --wc-foot tracks padding-bottom, or the dissolve would reach the panel */
  .section-gaping.we_care{ padding:44px 0 46px; --wc-foot:46px; }
  .we_care .section_title{ margin-bottom:26px; }
  .we_care .left_nav .nav-pills .nav-link{
    --wc-pill-x:12px;                /* the divider inset follows this */
    min-height:66px; padding:12px;
  }
  /* 44, not 38. border-radius:50% on a 38px box clips at r=19, but the raster's
     ink reaches r=21.22 in two of the five icons (welness, Physical-Care), so
     their corners were being shaved. 44 - 12 = a 32px content box, still 1:1,
     and r=22 now clears the worst-case ink. */
  .we_care .left_nav .nav-pills .nav-link img{
    width:44px; height:44px; padding:6px; margin-right:10px;
  }
  /* col-md-12 stacks the pane's two columns: the photograph drops below its
     text and needs air */
  .we_care .tab-pane > .row > div + div{ margin-top:20px; }
}

@media (max-width:767px){
  .section-gaping.we_care{ padding:34px 0 36px; --wc-foot:36px; }
  .we_care .section_title{ margin-bottom:22px; }
  .we_care .section_title p{ font-size:16px; }   /* the floor, not below it */
  /* the rail is above the panel here, so it needs a real gap. The !important
     is unavoidable: the div carries `mb-2` in the markup and Bootstrap 5.1.3
     ships .mb-2{margin-bottom:.5rem!important}, so any weight of specificity
     without a flag loses and the two plates sit 8px apart. */
  .we_care .left_nav .nav-pills{ margin-bottom:20px !important; }
  .we_care .tick ul li{ font-size:16px; }
}

@media (max-width:479px){
  /* at 320px: 320 - 24 container - 2 border - 32 padding - 28 indent = 234px
     of measure, ~29 characters at 16px. Tight but honest, and no overflow. */
  .we_care .left_nav .nav-pills .nav-link{ --wc-pill-x:10px; padding:11px 10px; }
  .we_care .left_nav .nav-pills .nav-link img{ margin-right:9px; }
  .we_care .tick ul li{ padding-left:1.75em; }
}

/* ---------- motion ---------- */
/* the section title carries an inline style="animation-name:zoomIn" from
   .wow, and the two columns carry fadeInUp / fadeInDown. Only an !important
   rule beats an inline declaration, and visibility has to be forced with it or
   an element WOW.js has not yet revealed stays hidden forever. */
@media (prefers-reduced-motion:reduce){
  .we_care .wow{ animation:none !important; visibility:visible !important; }
  .we_care .left_nav .nav-pills .nav-link,
  .we_care .left_nav .nav-pills .nav-link::after,
  .we_care .left_nav .nav-pills .nav-link img{ transition-duration:.01ms !important; }
  .we_care .left_nav .nav-pills .nav-link:hover img,
  .we_care .left_nav .nav-pills .nav-link:active{ transform:none !important; }
}

/* ---------- prefers-contrast ---------- */
/* Dropping the images leaves the plane already declared above, which raises
   both text minima at once (body 7.083 -> 7.169:1, heading 8.658 -> 8.763:1)
   and flattens panel separation to a constant 1.292:1. The hairlines then have
   to do the work the modelling was doing, so they go to #93a697 — 2.579:1 on
   the plates and 1.996:1 on the ground, roughly a 70% gain on both — and the
   selected pill flattens to a single #2b3f2f, putting its label at 11.322:1
   and its brass nosing at 5.490:1. */
@media (prefers-contrast:more){
  .section-gaping.we_care{ background-image:none; }
  .we_care .left_nav .nav-pills,
  .we_care .left_nav .tab-content{
    background:#fff;
    border-color:#748578;
  }
  .we_care .left_nav .nav-pills .nav-link::after{ background:#748578; }
  .we_care .left_nav .nav-pills .nav-link.active{ background:#2b3f2f !important; }
  .we_care .tab-content h4{ border-bottom-color:#748578; }
  .we_care .tab-pane img{ box-shadow:0 0 0 1px #5f6f62; }
}

/* ---------- forced-colors ---------- */
/* forced-colors overrides background-COLOR but leaves background-IMAGE alone,
   so the grain and both gradients have to be dropped by hand or they survive
   on top of the system Canvas. Nothing in them carries information the system
   palette cannot re-state. Declared AFTER prefers-contrast on purpose:
   Chromium matches both under Windows High Contrast and this one has to win.
   The selected pill is repainted with system keywords rather than left to
   ButtonFace, because a tab control with no visible selected state is broken
   at any contrast level. forced-color-adjust is deliberately NOT set to none
   anywhere — the point is to hand the user's palette control, not take it. */
@media (forced-colors:active){
  .section-gaping.we_care{
    background-image:none;
    background-color:Canvas;
  }
  .we_care .left_nav .nav-pills,
  .we_care .left_nav .tab-content{
    background:Canvas;
    border:1px solid CanvasText;
    box-shadow:none;
  }
  .we_care .left_nav .nav-pills .nav-link{ color:ButtonText; }
  .we_care .left_nav .nav-pills .nav-link::after{ background:CanvasText; }
  .we_care .left_nav .nav-pills .nav-link.active{
    background:Highlight !important;
    color:HighlightText;
    box-shadow:none;
  }
  .we_care .left_nav .nav-pills .nav-link:focus-visible{
    outline:2px solid CanvasText;
    outline-offset:3px;
  }
  /* image content is exempt from forced colours, so the brass glyphs stay
     brass; strip the dish so they sit on the system ground rather than mine */
  .we_care .left_nav .nav-pills .nav-link img{
    background:none;
    box-shadow:0 0 0 1px CanvasText;
  }
  .we_care .tab-content h4{ border-bottom-color:CanvasText; }
  .we_care .tab-pane img{ box-shadow:none; outline:1px solid CanvasText; }
}

/* ---------- print ---------- */
/* Today this section prints ONE of its five panes, because
   .tab-content>.tab-pane{display:none} and .fade:not(.show){opacity:0} are
   still in force on paper: four fifths of the content is silently lost. Both
   are 0-2-0 and both are beaten here on specificity alone, so all five panes
   print, separated by a rule.

   The rail is then hidden — the one place anything is removed — and it is safe
   because it is pure duplication: the five pill labels (Wellness Services /
   Round The Clock Support / Nutritious Meal / Physical Care / Stress
   Management) are the same five strings as the five pane <h4>s, which now all
   print. A tab control is a thing you operate; on paper it is five words
   printed twice. Net effect: print GAINS four panes and loses nothing.

   The column is widened with `width`, not `max-width`: Bootstrap 5.1.3 ships
   .col-md-8{flex:0 0 auto;width:66.66666667%}, so the Bootstrap-4 idiom of
   flex + max-width would leave the panes on two thirds of the sheet.

   The plane goes to a faint #eef3ef rather than white, because on white the
   panel would sit at 1.00:1 and disappear; a tint costs almost no ink and
   keeps body copy at 8.249:1. The brass goes solid — .45 alpha prints as
   nothing. */
@media print{
  /* FIRST, or none of the rest matters: WOW.js writes an inline
     style="visibility:hidden" onto every .wow element at init and only clears
     it when that element scrolls into view. Printing fires no scroll and
     inline styles are media-independent, so all three .wow elements in this
     section - the title, the rail, and the div wrapping the WHOLE tab-content
     - stay hidden and the section prints blank. Only an author !important
     rule outranks a non-important inline declaration. */
  .we_care .wow{ visibility:visible !important; animation:none !important; }

  .section-gaping.we_care{
    padding:24px 0;
    background-image:none;
    background-color:#eef3ef;
    border-bottom:1px solid #7f6630;
  }
  .we_care .nav_left{ display:none; }
  .we_care .left_nav > *{ width:100%; max-width:100%; flex:0 0 auto; }
  .we_care .sticky_div,
  .we_care .nav_left .nav-pills{ position:static; }
  .we_care .left_nav{ align-items:flex-start !important; }
  .we_care .left_nav .tab-content{ height:auto; }
  .we_care .left_nav .tab-content{
    padding:16px;
    background:#fff;
    border:1px solid #7f6630;
    box-shadow:none;
  }
  .we_care .left_nav .tab-content > .tab-pane{
    display:block;
    break-inside:avoid; page-break-inside:avoid;
  }
  .we_care .left_nav .tab-content > .tab-pane.fade{ opacity:1; }
  .we_care .left_nav .tab-content > .tab-pane + .tab-pane{
    margin-top:18px; padding-top:18px;
    border-top:1px solid #d8d2bd;
  }
  .we_care .tab-content h4{ border-bottom-color:#d8d2bd; }
  .we_care .tab-pane img{ box-shadow:none; outline:1px solid #b9c3ba; }
}


/* ==========================================================================
   "JAGRITI DHAM: BECAUSE YOU DESERVE A LUXURIOUS SENIOR LIVING"
   THE PROSPECTUS SPREAD

   Was: a three-tone ramp (#d9c69d / #f5edda / #fdf9e9) of butted blocks whose
   steps measure 1.439 : 1.105 : 1.055 against each other and the white behind
   them. The first step is loud and the next two are all but invisible, so the
   eye reads one strong stripe and two accidents rather than a system. On the
   loud stripe the h4 sits at 3.357:1 — the weakest text on the page — the
   prose is 15px (13px at 320px, from responsive.css:131), below the floor this
   page now holds for a 55+ reader, and the CTA still wears a 0 0 10px #8d8d8d
   halo, a 2px white border, and a hover that paints #fff on #cbb279 at
   2.062:1 — a live WCAG failure on a conversion control.

   Now: one leaf of warm paper with the structure ruled onto it. THREE hairline
   weights carry the whole layout and colour is spent only where it means
   something. The section is the LIGHTEST plane on the page — the printed sheet
   between the lime-paper room and the green-plaster room above it and the mint
   room below — and it is warm because the paper is warm, not because anything
   is tinted.

   Why this sheet belongs to the building, stated properly: it is not "a
   desaturated version of the paper next door". Measured in CIE LCh the painted
   sheet is L* 95.22 / C* 4.81 / h 92deg, .we_care's plaster is C* 5.92 / h 147
   and #floor-plan's mint is C* 4.61 / h 148. Three rooms inside one chroma
   point of each other, two cool and one warm, separated by HUE and by value
   rank rather than by saturation. That is a system. (The old #d9c69d sat at
   C* 23.01 and belonged to none of it.)

   SCOPING. Every selector below is anchored on .senior_living (index.php:652,
   which occurs exactly once). This is not defensive habit: .bg1/.bg2/.bg3 are
   repeated verbatim on a SECOND .row.g-0.tick at index.php:1168-1195 inside
   .room_features, .sticky_div is on nine boxes across the page, and .tick,
   .section_title, .section-gaping and .btn_blue_rounded (three body buttons
   plus the header) are used everywhere. An unanchored rule here would repaint
   the room-features grid, the five we_care panes and three other buttons.
   Checked one by one, including the second half of every grouped selector.

   !important AUDIT — six declarations, each named at its own site. Two of them
   are the same property at three places, and that is the point: the first pass
   of this design missed one of them and shipped a block of dead code.
     1  .senior_living .section_title h2 font-size
        (responsive.css:52 and style.css:451 are both flagged; only a flag
        beats a flag, and among flagged declarations specificity decides)
     2  .senior_living .facilities margin-top                (Bootstrap .mt-4)
     3  .senior_living .facilities > .text-center margin-top (Bootstrap .mt-3)
     4  .senior_living .btn_blue_rounded PADDING, at ALL THREE sites it is
        declared — the base rule, the <=767 block and the <=479 block.
        style.css:414 sets .btn_blue_rounded{padding:8px 12px!important}
        UNANCHORED inside @media (max-width:575.98px). It is 0-1-0 against this
        rule's 0-2-0 and it still wins, because a flagged author declaration
        beats an unflagged one regardless of specificity. Unflagged, the button
        collapses to 8px/12px on every phone — the width most of this page's
        Google Ads traffic arrives at — and the entire <=479 block is dead from
        the day it ships.
     5  the .wow visibility/animation resets in the reduced-motion and print
        blocks (WOW.js writes an INLINE style="visibility:hidden", and only an
        author !important rule outranks a non-important inline declaration)
   Everything else wins on specificity alone, because banner.css loads last.
   NOTE style.css:414 also sets font-size:14px in the same rule WITHOUT a flag,
   so the font-size here needs none: 0-2-0 beats 0-1-0.
   ========================================================================== */

/* --- the ground ----------------------------------------------------------
   The target is not "a nicer cream", it is two specific numbers at the two
   seams and one relationship to the rest of the page.

     paper above   #eae2c8  L* 89.90  ->  #e9e1c7 after grain, L* 89.53
     plaster above #dbe5dc  L* 89.98  ->  #dae4db after grain, L* 89.63
     THIS SHEET    #f7f3e9  L* 95.90  ->  #f6f2e8 after grain, L* 95.22
     mint below    #e6eee7  L* 93.34

   #f7f3e9 is #eae2c8 — the live_better paper — lifted 60% toward white. It is
   the same material in its lightest state, which is why the sheet reads as
   paper and not as an absence of colour, and it is the brightest plane on the
   page, which is the correct rank for it: two rooms at L* 89.5-89.6, a sheet
   at 95.2, a room at 93.3. Nothing on this sheet is white, so there is no
   white object to lose against it and no reason to drive it darker the way
   live_better and we_care both had to.

   Read the stack bottom-up, since CSS lists the topmost layer first:
     3  the light   168deg, px stops — the SAME lean and the same warm white as
                    both rooms above, because it is the same source. Longer
                    throw than we_care's (380px vs 300px) because this section
                    has no plate whose separation a long throw could wash out.
     2  the carry   VERTICAL and full-width, and it is the whole seam solution;
                    read its own note below. Listed ABOVE the light so it
                    composites last and its alpha-1 stop is unconditional.
     1  grain       the plinth's own feTurbulence at .026, byte-identical to
                    the tile in live_better and we_care apart from the filter
                    id, so no two filters in the document can collide.
                    fractalNoise averages 0.5 in all four channels, so this
                    lays 1.3% coverage of rgb(127.5): #f7f3e9 grains to
                    #f6f2e8, exactly as #eae2c8 grains to #e9e1c7 next door.
                    298 bytes. Texture, not dither. background-size is
                    deliberately not declared, so the tile keeps its intrinsic
                    120x120 and the gradients keep 100% 100%.

   Verified at the DARKEST point of the field — the settled plane after grain,
   #f6f2e8 — not the lightest:
     body      #3f4a41   8.217:1     (8.636:1 at the lit top)
     mid voice #35473a   8.814:1     (9.263:1 at the lit top)
     headings  #2b3f2f  10.044:1    (10.557:1 at the lit top)
     ticks     #4f6f52   4.997:1     (5.252:1 at the lit top)
   AAA for body and headings across the whole field at every width.

   No pseudo-element is used anywhere in this section, so the section needs no
   position:relative and nothing here can become a containing block for
   anything else. No overflow:hidden and no overflow-x:hidden appears on the
   row or on any column — the brief's warning about killing a sticky
   scrollport, and, now that the sticky is retired, about clipping the CTA's
   focus ring.

   Specificity 0-2-0. That beats style.css:14 (.section-gaping, 0-1-0) and TIES
   style.css:471 (.section-gaping:nth-child(odd){padding:15px 0}, also 0-2-0,
   inside the 575.98 block) — a tie banner.css wins on source order, so the
   padding needs no flag either. This rule MUST stay above the responsive
   blocks further down: they share its 0-2-0 and only source order separates
   them. */
.section-gaping.senior_living{
  padding:56px 0 60px;              /* was 30px 0, and 15px 0 under the
                                       nth-child(odd) rule — far tighter than
                                       the 56/60 and 44/46 the two finished
                                       sections above use */

  /* the settled plane, and the honest fallback: if any layer below fails to
     parse the whole background-image is dropped and this is what remains, on
     which body copy still measures 8.359:1 and headings 10.218:1. There is
     deliberately no calc() and no math function anywhere in the gradients —
     one unparseable layer invalidates the entire declaration, which is what
     bit the first pass at live_better. */
  background-color:#f7f3e9;

  background-image:
    /* 1 - grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='slg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23slg)' opacity='.026'/%3E%3C/svg%3E"),

    /* 2 - the carry, and read the 0-stop carefully, because the obvious value
       is wrong by one unit per channel. .we_care's foot composites to the
       UNROUNDED (247.08, 249.28, 247.30); its own grain then takes that to
       (245.53, 247.70, 245.74), which paints as #f6f8f6 — the value that block
       records. A carry starting at rgb(247,249,247) — we_care's rounded
       PRE-grain colour — grains to (245.45, 247.42, 245.45) = #f5f7f5, and the
       join lands at 1.009:1. Close, but the seam is between PAINTED pixels,
       not between pre-grain intentions. Measured by RASTERISING the shipped
       tile rather than modelling it: rgb(247,249,247) is the integer triple
       that grains to exactly (246.43, 248.41, 246.43) = #f6f8f6, so the first
       painted row of .senior_living is the SAME INTEGER TRIPLE as the last
       painted row of .we_care and the join measures 1.000:1 — better than the
       1.070:1 the dissolve was engineered for, and better than the 1.067:1 it
       gets against #fff today. Integers, so nothing here can invalidate the
       declaration. If we_care's foot is ever re-tuned this 0-stop is the
       single number to change. Vertical and full-width so the join is even at
       every viewport; spent by 176px, well above the lead statement. */
    linear-gradient(to bottom,
      rgba(247,249,247,1)    0,
      rgba(247,249,247,.55) 52px,
      rgba(247,249,247,0)  176px),

    /* 3 - the light. Same 168deg and the same warm white as both rooms above.
       t = 0.2079x + 0.9781y, so at 1920 the section's top-right corner sits at
       t = 399px, past this layer's throw — which is precisely why the carry
       above is a SEPARATE vertical layer and not folded into this one. Left to
       a raking layer the seam would close on the left and re-open cold on the
       right, the exact bug documented at we_care's own head. */
    linear-gradient(168deg,
      rgba(255,252,240,.62)   0,
      rgba(255,252,240,.30) 150px,
      rgba(255,252,240,0)   380px);

  background-repeat:repeat, no-repeat, no-repeat;

  /* NO border-top: the room above dissolves into this one, and a rule laid in
     the middle of a dissolve is a line drawn across nothing.
     At the FOOT there IS a real edge — #floor-plan is a flat, unmodulated
     #e6eee7 with no dissolve of its own — so it is drawn, with the page's own
     brass threshold, the same declaration live_better closes with. Over this
     sheet it composites to #e2d5b6 and reads from both sides: 1.291:1 against
     the sheet and 1.230:1 against the mint. (live_better's reads 1.215:1 /
     1.343:1 against its own neighbours, so the two thresholds are the same
     line at the same weight.) The two grounds themselves meet at 1.050:1 —
     hue moves, value barely does — so this hairline is the ONLY thing marking
     the join, which makes it structural rather than ornamental. Three joins on
     this page, three honest treatments: a brass threshold, a dissolve, a brass
     threshold. */
  border-bottom:1px solid rgba(203,178,121,.45);
}

/* Bootstrap's .mt-4 puts 24px on .facilities. The section padding above is
   chosen to carry that air; left in, it makes the head 80px. */
.senior_living .facilities{ margin-top:0 !important; }

/* --- the title -----------------------------------------------------------
   .section_title h2:after (style.css:41) is position:absolute at bottom:-5px
   and has already caused two overlap bugs on this page. It is neutralised
   EXPLICITLY — static, block, redrawn as flow content — and re-cut as the same
   58px fading-brass hairline the plinth, the form, live_better and we_care all
   use. Repeating the ornament is what makes four rooms read as one building.
   The font-size flag is not laziness: responsive.css:52 sets
   .section_title h2{font-size:20px!important} under 767 and style.css:451 sets
   .h2,h2{font-size:20px!important} under 575.98. Everything else here wins on
   specificity — 0-2-1 against style.css:31's 0-1-1 and against
   responsive.css:21 and :162, both 0-1-1. The clamp is matched to live_better
   and we_care exactly; a bigger figure here would out-shout both and break the
   descent through the page. */
.senior_living .section_title{ margin-bottom:40px; }
.senior_living .section_title h2{
  font-family:Helvetica, sans-serif;
  font-size:clamp(23px, 2.7vw, 34px) !important;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.004em;
  color:var(--jd-green-deep);        /* #2b3f2f — 10.557:1 where it sits */
  /* the headline is 58 characters and would set as one 986px line at 1280.
     17em breaks it over two, which is the right shape for a centred deck and
     holds that shape all the way down the clamp. */
  max-width:17em;
  margin:0 auto;
}
.senior_living .section_title h2::after{
  position:static; display:block;    /* kills the absolute 4px #cbb279 bar */
  content:"";
  width:58px; height:1px;
  margin:18px auto 0;
  background:linear-gradient(90deg,transparent,rgba(203,178,121,.95),transparent);
}
/* style.css:23 sets p{font-size:15px} and style.css:58 sets
   .section_title p{font-weight:500} — a line of introduction in semibold below
   the floor, which reads as a second heading. 0-2-1 over both. */
.senior_living .section_title p{
  max-width:none;
  margin:14px auto 0;
  font-size:17px;
  font-weight:400;
  line-height:1.6;
  color:#3f4a41;                     /* 8.636:1 where it sits */
}

/* --- the spread ----------------------------------------------------------
   THE SECTION'S ONE GESTURE. A brass head-rule ruled across the full spread, a
   quiet foot-rule closing it, and the three columns hanging between them.
   This is what makes the two registers line up: the lead statement's own rule
   and the schedule's first item are at different heights and always will be,
   so the alignment device has to be a line ABOVE both of them, not a line
   inside either. It is also the reason the vertical divider below has
   somewhere to start and somewhere to stop instead of ending in mid-air.

   Head brass, foot neutral — the classic weighting of a set table, and here it
   also means the section's strongest line is warm and its quietest is not.
   .row carries no borders of its own and .g-0 zeroes --bs-gutter-x/y, so there
   are no negative margins for a border to expose. 0-3-0.

   The row is NOT a .wow element, so these two rules paint before the columns
   fade up into them. That is deliberate and it is the right reading — the
   sheet is ruled, then set — and at 1.829:1 and 1.311:1 an empty frame is
   barely a mark for the length of one fade. Moving .wow onto the row was
   considered and rejected: it would put the whole spread behind a single
   trigger and lose the per-column reveal, and with slideIn* (no opacity
   channel) it would have painted a frame around 500px of travelling opaque
   column. The markup delta fixes that at the source by moving all three
   columns to fadeInUp, which is opacity-guarded. */
.senior_living .row.tick{
  border-top:1px solid var(--jd-gold);    /* #cbb279 — 1.829:1, the strongest
                                             line in the section and the only
                                             coloured one */
  border-bottom:1px solid #dcd4bf;        /* 1.311:1 */
}

/* --- the sticky, retired -------------------------------------------------
   .sticky_div is on BOTH list columns at top:100px and it has never once
   stuck. At >=992 and at 768-991 the row is Bootstrap's default
   align-items:stretch, so each column is exactly as tall as its own containing
   block and there is nothing for the wrapper to scroll within; at <=767
   responsive.css:111 turns it off outright. On top of that the offset is
   wrong: .jd-scrolled has condensed the header to 58px long before this
   section can be reached, so 100px would leave ~42px of dead air if it ever
   did engage. Even given a taller lead column it could only buy ~70px of
   travel — which is not a sticky, it is a jitter, and with the schedule now
   hung off a head-rule that spans the spread, anything that slides breaks the
   one alignment the design depends on. It is off because it has never worked,
   not because its offset is wrong — although the offset is wrong too.
   0-2-0 beats style.css:1652 (0-1-0) and responsive.css:111 (0-1-0) at every
   width, so no min-width guard is needed and no sliver of viewport can fall
   through to the legacy top:100px on a fractional device-pixel-ratio.
   position:static and position:relative;top:0 lay out identically, so nothing
   moves on a phone.
   If a future editor genuinely wants the schedule to travel, the change is NOT
   to restore top:100px — it is to sticky the <ul> rather than the stretched
   column, at top:72px (58px condensed bar + 14) inside @media (min-width:992px),
   the same move banner.css makes for we_care's rail. */
.senior_living .sticky_div{ position:static; top:auto; }

/* --- the columns ---------------------------------------------------------
   The row is .g-0, so Bootstrap's .row > *{padding:0} leaves the three blocks
   butted edge to edge; today the only thing holding them apart is the 20px on
   .bg1/.bg2/.bg3 and the tints that made the join visible. Both go. The
   padding is redeclared here, anchored, and ONE vertical rule is hung on a
   column edge.

   ONE, not two. The first pass of this design ran FOUR hairline weights —
   1.83 / 1.48 / 1.31 / 1.19 — and the last two are not separable at arm's
   length, which is the old three-tone ramp's failure repeated in a quieter
   register. The rule that went is the one between .bg2 and .bg3, because it
   divided two runs of the SAME list rather than two registers; 52px of gutter
   says that on its own. Three ranks now, each with a job it can be held to:
     brass head-rule  #cbb279  1.829:1   the spread's top edge, and the only
                                         coloured line in the section
     register divider #d0c8b4  1.478:1   prose | schedule — the one place the
                                         KIND of content changes
     text rules       #dcd4bf  1.311:1   the spread's foot, the lead
                                         statement's rule, the closing line's
                                         rule, and every row of the schedule

   Measures at the 1280 container (responsive.css:10):
     (responsive.css:10 sets .container{max-width:1280px} as the BORDER box and
     Bootstrap adds 12px of padding per side, so the row is 1256px and the
     columns are 628 / 314 / 314 — not 640 / 320 / 320.)
     lead      628 - 64          = 564px, ~62 characters at 17px — the top of
                                   the comfortable band, and the column IS the
                                   measure, so no ch cap is applied that the
                                   container would make inert anyway
     schedule  314 - 32 - 26 - 1 = 255px   and   314 - 26 - 0 = 288px
   The 33px difference between the two schedule columns is deliberate and not
   an oversight: the outer column runs to the margin, as the outer column of a
   printed schedule does. It is smaller than the rag inside either column.

   Specificity 0-2-0, which beats style.css:1711/1716/1720 (0-1-0),
   responsive.css:115 (.bg1,.bg2,.bg3{padding:0 12px}, 0-1-0) and Bootstrap's
   .row > * (0-1-0). No flags. */
.senior_living .bg1,
.senior_living .bg2,
.senior_living .bg3{
  background-color:transparent;      /* the three tints, gone */
}
.senior_living .bg1{ padding:30px 64px 34px 0; }
.senior_living .bg2{
  padding:30px 26px 34px 32px;
  border-left:1px solid #d0c8b4;     /* 1.478:1 — the register divider */
}
.senior_living .bg3{ padding:30px 0 34px 26px; }

/* --- the lead statement --------------------------------------------------
   h4 is a bare element selector in style.css (25px/700/#4f6f52, dropping to
   20px in the narrow block at style.css:457). On #d9c69d it measured 3.357:1 —
   large-text AA by a hair and the weakest type on the page. Taken to
   --jd-green-deep on the sheet it is 10.044:1, and it gains a rule of its own,
   which is what makes it a lead statement rather than a bold line. Both legacy
   h4 rules are 0-0-1 against this 0-2-1, so neither needs a flag. */
.senior_living .bg1 h4{
  font-size:clamp(21px, 2.1vw, 27px);
  font-weight:700;
  line-height:1.28;
  letter-spacing:.005em;
  color:var(--jd-green-deep);        /* 10.044:1 */
  margin:0 0 20px;
  padding-bottom:16px;
  border-bottom:1px solid #dcd4bf;   /* 1.311:1 — the text rank */
}

/* the prose. style.css:23 pins p at 15px and responsive.css:131 takes it to
   13px/300 at 320px — both 0-0-1, both beaten here at 0-2-1 without a flag.
   Ragged right, not justified: live_better justifies because its measure is
   80ch and six short offerings need the block to square up. Four paragraphs of
   welcome are a letter, and a letter is set ragged — no rivers, and no hyphen
   break in the middle of "air-conditioned". */
.senior_living .bg1 p{
  /* responsive.css:131 sets p{font-weight:300} under (max-width:320px) - which
     is also the 400%-zoom reflow width at 1280. Helvetica has a real Light face
     on iOS/macOS, so without this the whole prose column thins out on the
     narrowest phones. 0-2-1 beats its 0-0-1; no flag needed. */
  font-weight:400;
  font-size:17px;
  line-height:1.75;
  color:#3f4a41;                     /* 8.217:1 at the darkest point */
  margin:0 0 17px;
  overflow-wrap:break-word;

  /* Justified, as asked. hyphens:auto is not optional company for it: justified
     text with no break opportunities opens rivers of white down the column, and
     this measure (564px, ~62 characters at 17px) is short enough to show them.
     <html lang="en"> is set at index.php:2, so the hyphenation dictionary
     actually loads - without a lang the property silently does nothing.
     text-align-last:left stops the FINAL line of each paragraph being stretched
     across the full measure, which is what browsers do to a justified block's
     last line if you let them. word-spacing is deliberately left at normal:
     the legacy sheet's -0.05em fights the justification engine. */
  text-align:justify;
  text-align-last:left;
  hyphens:auto;
  -webkit-hyphens:auto;
}
/* The column opens and closes in ONE raised voice — same size, same ink, used
   twice, and told apart by the rule rather than by a second size step. The
   first pass ran 27 / 19 / 17 / 18 down this column, and 19 against 18 is the
   four-hairline problem again in type: two steps nobody can separate doing the
   work of one. Three sizes now.
   The opening sentence ("Embrace luxury, harmony, and tranquillity at Jagriti
   Dham, a premier retirement home near IIM Joka, Kolkata.") is already written
   as a standfirst; setting it as one costs no markup, because it is simply the
   first paragraph in the column. Weight stays 400 so it cannot compete with
   the 700 statement above it — the size and the colour step carry it. */
.senior_living .bg1 p:first-of-type{
  font-size:19px;
  line-height:1.62;
  color:#35473a;                     /* 8.814:1 — one step darker than body,
                                        one step lighter than the heading */
  margin-bottom:20px;
}
/* the sign-off. "You won't miss your home if you choose to stay with us for a
   few days." is the warmest sentence in the section and today it is the fourth
   paragraph of four. Set above its own rule, in the same raised voice the
   column opened in, it becomes the closing line of the spread.
   The rule is the TEXT rank and deliberately not a fourth brass mark: brass is
   already spent on the title ornament, the spread's head-rule, the CTA plate
   and the foot threshold, and a fifth would dilute all four. */
.senior_living .bg1 p:last-of-type{
  margin:24px 0 0;
  padding-top:20px;
  border-top:1px solid #dcd4bf;
  font-size:19px;
  line-height:1.6;
  color:#35473a;                     /* 8.814:1 */
}

/* --- the schedule --------------------------------------------------------
   style.css:1567 sets width:30px;height:30px on an INLINE :before, where both
   are silently ignored, then leans on margin-left:-25px against the ul's
   margin-left:25px to fake a hanging indent. The indent is the right idea; the
   box was never real, and because the mark is pulled INTO the indent, the
   second and subsequent lines of any wrapping item run back underneath their
   own checkmark. In a 261px column that is not an edge case: "Access to
   Library, Games Room, Cards Room, Gym, AV Theatre, Yoga and Meditation Room"
   wraps to four lines, and five of the twelve items wrap to two or more.
   Rebuilt as a true hanging indent — the li is the positioning context and the
   mark is absolute at left:0 — so wrapped lines align under the first
   character every time. This is the one change in the section a reader will
   FEEL rather than see, and for a 55+ audience it is worth more than any of
   the modelling above it.

   The mark KEEPS \f14a and keeps a green rather than the legacy #9b6f3f
   (3.800:1 on the old tint). It is the page's affirmative mark, .we_care
   directly above uses exactly the same glyph in exactly this colour, and
   desynchronising two adjacent lists to look editorial would be a real cost
   for no gain. Numerals were the obvious alternative and were rejected on the
   same grounds: they are colder, and the risk in this direction is coldness,
   not disorder. Keeping the glyph also means the FA5/FA6 codepoint trap is
   never engaged rather than merely survived. Verified rather than asserted:
   webfonts/ is Font Awesome Free 5.11.2 while css/all.css is 6.1.1. Parsing
   the cmap of webfonts/fa-solid-900.ttf gives 3 subtables at pid/eid 0/3 fmt4,
   1/0 fmt0 and 3/1 fmt4, 960 codepoints spanning U+F000-U+F8D9, and ZERO in
   the U+E000-U+EFFF range the FA6 CSS uses; \f14a resolves to gid 239 with a
   real 2-contour outline, bbox (0,-32)-(448,416). css/all.css:7801 declares
   "Font Awesome 5 Free" weight 900 against that same file.

   Specificity: .senior_living .tick ul is 0-2-1 over style.css:1564's 0-1-1
   and style.css:1724's 0-1-1; .senior_living .tick ul li is 0-2-2 over
   style.css:1565's 0-1-2 and over responsive.css:165's 0-1-2, which is what
   stops the 820-1180 landscape band dropping this copy to 15px; and
   .senior_living .tick ul li::before is 0-2-3 over style.css:1567's and
   style.css:1613's 0-1-3. No flags anywhere. (responsive.css:56's
   `ul.tick li{font-size:14px}` cannot reach these items at all — .tick is on
   the ROW here, not on the <ul>.) */
.senior_living .tick ul{
  margin:0;
  padding:0;
}
.senior_living .tick ul li{
  --sl-row-y:13px;                   /* one token: the row's vertical padding
                                        AND the mark's offset, so they can
                                        never drift apart in a media block */
  position:relative;
  /* the well is in em, not px, because the mark inside it is: Font Awesome's
     check-square has a .875em advance, at font-size:.9em that is .7875em, and
     under Firefox's text-only zoom (which scales font-size but not px padding)
     a 30px well is overrun at ~260%. 1.9em keeps 1.11em of clearance at every
     zoom level and resolves to 31.4px at 100% — unchanged to the eye. */
  padding:var(--sl-row-y) 0 var(--sl-row-y) 1.9em;
  margin:0;                          /* undoes style.css:1565's 10px */
  border-top:1px solid #dcd4bf;      /* 1.311:1 */
  font-size:16.5px;
  line-height:1.6;
  color:#3f4a41;                     /* 8.217:1 */
  overflow-wrap:break-word;
}
/* the first item in each column hangs directly off the spread's brass
   head-rule with 30px of air, so it carries no rule of its own. Rules go on
   the TOP of each row rather than the bottom for the same reason: both columns
   then open on the same line, and the two ragged ends are simply where the
   text stops — which is honest, where two mismatched closing rules would not
   be. */
.senior_living .tick ul li:first-child{ border-top:0; }
.senior_living .tick ul li::before{
  /* the alt-text form of content(). U+F14A is a PRIVATE-USE codepoint and
     CSS generated content reaches the accessibility tree, so without the
     "/ ''" a screen reader announces garbage before all twelve items.
     Where the syntax is unsupported the declaration is dropped whole and
     style.css:1567 still supplies the glyph, so it renders identically. */
  content:"\f14a" / "";
  position:absolute;
  left:0; top:var(--sl-row-y);       /* an abspos child's containing block is
                                        the PADDING box, so top:0 would sit the
                                        mark above the first line by exactly
                                        the row padding */
  width:auto; height:auto;           /* the legacy 30x30 box is inert on an
                                        inline pseudo-element and misleading on
                                        an absolute one — dropped, not
                                        inherited */
  margin:0;                          /* undoes -25px left / 6px right */
  font-size:.9em;
  /* .9em x 1.78 = the li's own 1.6 line box, whatever the font size, because
     both terms are em-derived — which is what puts the mark on the first
     line's optical centre and keeps it there under zoom and in every
     responsive block below, with no px offset to maintain. */
  line-height:1.78;
  color:var(--jd-green);             /* #4f6f52 — 4.997:1; was #9b6f3f at
                                        3.800:1, a fail */
  transition:none;                   /* style.css:1567 animates `all` for a
                                        mark that never changes */
}

/* --- the call to action --------------------------------------------------
   style.css:1121 gives this a 0 0 10px #8d8d8d halo that glows evenly in all
   directions — a light source rather than a shadow, and the clearest tell of
   the era this page is being pulled out of — plus a 2px white border that
   reads as a cut-out. Worse, style.css:1137 paints :hover flat #cbb279 and
   keeps color:#fff, which is white on brass at 2.062:1: a live WCAG failure on
   a conversion control, in the one state a visitor is in at the moment of
   clicking.

   Replaced with the lit brass plate the header CTA (header.css:215) and the
   banner form's submit already use — same five stops, same specular highlight,
   same light direction as everything else on the page. It is the ONE warm
   object in the section, which is how a typography-led spread stays warm
   without tinting anything. The header's touch-only sheen is deliberately NOT
   repeated: it fires 1.2s after paint, and this button is thousands of pixels
   down the page behind a .wow that is still visibility:hidden at that moment,
   so it would play to nobody, once, and then never again.

   overflow:visible was CHECKED, not assumed: there is no .btn_blue_rounded
   ::before or ::after anywhere in style.css, responsive.css, responsive2.css
   or header.css, so style.css:1128's overflow:hidden is vestigial Hover.css
   boilerplate and releasing it puts nothing on the page.

   The label is set at 17px in sentence case rather than 13px tracked caps. The
   form's submit is small because its panel is 370px wide; this one sits in the
   reading column of a prospectus, where the call to action is set in text, and
   the audience is 55+. That is a deliberate divergence from the submit button,
   not an inconsistency.

   Cascade: 0-2-0 over style.css:1121's 0-1-0, 0-3-0 over style.css:1137's
   :hover 0-2-0, 0-2-1 over style.css:1142's 0-1-1 and 0-3-1 over
   style.css:1143's 0-2-1. responsive.css:77 and responsive2.css:75 are both
   .navbar-scoped and cannot reach here. The ONE flagged property is padding,
   against style.css:414 — see the audit at the head of this block. */
.senior_living .facilities > .text-center{ margin-top:44px !important; }

.senior_living .btn_blue_rounded{
  display:inline-flex;
  align-items:center; justify-content:center;
  min-height:52px;                   /* well over the 44px floor; width is
                                        content + 68px, ~210px at 17px */
  padding:14px 34px !important;      /* FLAGGED against style.css:414's
                                        .btn_blue_rounded{padding:8px 12px
                                        !important}, which is unanchored inside
                                        @media (max-width:575.98px) and would
                                        otherwise win on every phone */
  border:1px solid var(--jd-gold-dp);
  border-radius:0;
  overflow:visible;                  /* was hidden, for a wipe that is gone */
  transform:none;                    /* was perspective(1px) translateZ(0) */
  font-size:17px; font-weight:700;
  letter-spacing:.01em; line-height:1.2;
  text-transform:none;
  color:#1d2c20;
  background:linear-gradient(180deg,#eaddb2 0%,#d9c390 34%,#c9ad72 52%,#d2b87f 66%,#b99a56 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),
             0 1px 2px rgba(34,51,31,.10),
             2px 12px 22px -14px rgba(34,51,31,.5);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color:transparent;
}
/* The 1px #7f6630 border is structural, not trim. The plate's own darkest stop
   measures only 2.382:1 against the sheet, which would leave the control's
   lower boundary under the 3:1 that 1.4.11 asks of a UI component; the border
   carries it at 4.844:1 all the way round. The label runs 5.455:1 at the
   darkest stop to 10.802:1 at the lightest — AA at every point of its own
   gradient and AAA over most of it. */
.senior_living .btn_blue_rounded i{
  margin-left:11px;                  /* not flex `gap`: unsupported on
                                        Safari < 14.1 / Chrome < 84 with no
                                        reliable @supports probe, and this is
                                        the only thing separating the two */
  font-size:15px;
  color:inherit;                     /* was #cbb279 on brass */
  transition:transform .25s ease;
}
@media (hover:hover){
  /* a brighter plate, not an inversion, and the background is redeclared here
     rather than left to the base rule: style.css:1137 ties the base rule on
     specificity and only source order separates them, which is too thin a
     thread to hang a live contrast failure on. The label RISES on hover, from
     6.240:1 at the darkest stop to 12.090:1 at the lightest — the opposite of
     what the legacy hover did. */
  .senior_living .btn_blue_rounded:hover{
    color:#1d2c20;
    background:linear-gradient(180deg,#f3e9cb 0%,#e2cfa2 34%,#d5bb84 52%,#dcc491 66%,#c3a660 100%);
    transform:translateY(-2px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
               0 1px 2px rgba(34,51,31,.12),
               2px 18px 30px -16px rgba(34,51,31,.55);
  }
  .senior_living .btn_blue_rounded:hover i{ color:inherit; transform:translateX(3px); }
}
/* a press state, because on a touch screen there is no hover to give feedback */
.senior_living .btn_blue_rounded:active{ transform:translateY(1px); }
/* the header's own focus idiom (header.css:281). The offset is structural: a
   #2b3f2f ring laid directly on the plate would measure 2.1-9.5:1 depending on
   where down the gradient it fell, so it is held 3px off, on the sheet, where
   it reads 10.044:1 — and the band of sheet between ring and plate is bounded
   by the #7f6630 border at 4.844:1, so the indicator is legible on both sides. */
.senior_living .btn_blue_rounded:focus-visible{
  outline:2px solid var(--jd-green-deep);
  outline-offset:3px;
}

/* ==========================================================================
   Responsive — 320 to 1920, no horizontal overflow at any width
   ========================================================================== */

/* 992-1199 was the band nobody looked at. Bootstrap's container is a FIXED
   960px here, not fluid, so the two schedule columns are 234px and the longest
   inclusion ("Access to Library, Games Room, ...") set SIX lines in a 154px
   measure - an item taller than its column is wide. Trim the gutters and the
   indent to take that measure back to ~172px. */
@media (min-width:992px) and (max-width:1199px){
  .senior_living .bg1{ padding-right:34px; }
  .senior_living .bg2{ padding-left:20px; padding-right:14px; }
  .senior_living .bg3{ padding-left:14px; }
  .senior_living .tick ul li{ font-size:16px; padding-left:1.7em; }
}

@media (max-width:1199px){
  /* the container is fluid below 1200, so the fixed gutters have to come in or
     the 261px schedule column collapses toward the wrap point */
  .senior_living .bg1{ padding-right:46px; }
  .senior_living .bg2{ padding-left:26px; padding-right:22px; }
  .senior_living .bg3{ padding-left:22px; }
}

/* col-lg-6 / col-lg-3 / col-lg-3 becomes col-md-12 / col-md-6 / col-md-6: the
   lead takes the full width on its own line and the two schedule columns sit
   under it. So the register divider ROTATES — it comes off .bg2's left edge
   and goes onto .bg1's foot, at the same weight, doing the same job. */
@media (max-width:991px){
  .section-gaping.senior_living{ padding:44px 0 46px; }
  .senior_living .section_title{ margin-bottom:30px; }
  .senior_living .bg1{
    padding:26px 0 28px;
    border-bottom:1px solid #d0c8b4;
  }
  .senior_living .bg2{ padding:26px 22px 28px 0; border-left:0; }
  .senior_living .bg3{ padding:26px 0 28px 22px; }
  .senior_living .bg1 h4{ margin-bottom:18px; padding-bottom:14px; }
  .senior_living .bg1 p{ font-size:16.5px; line-height:1.72; }
  /* restated because the base :first-of-type / :last-of-type rules are 0-3-1
     and would otherwise hold 19px here */
  .senior_living .bg1 p:first-of-type,
  .senior_living .bg1 p:last-of-type{ font-size:18px; }
  .senior_living .bg1 p:last-of-type{ margin-top:20px; padding-top:18px; }
  .senior_living .facilities > .text-center{ margin-top:34px !important; }
}

@media (max-width:767px){
  .section-gaping.senior_living{ padding:34px 0 36px; }
  .senior_living .section_title{ margin-bottom:24px; }
  .senior_living .section_title p{ font-size:16px; }   /* the floor, not below it */
  /* all three columns are full width now. responsive.css:115 puts 12px of side
     padding on .bg1/.bg2/.bg3, which would inset them from a container that
     already carries Bootstrap's own 12px — zero it and everything sits on one
     alignment line. */
  .senior_living .bg1{ padding:22px 0 24px; }
  /* .bg3 follows .bg2 directly, so the two runs close up into one continuous
     twelve-item schedule and .bg3's first item takes a normal rule rather than
     opening a second head. Both selectors are 0-3-2, so this wins on source
     order over the base :first-child{border-top:0}. */
  .senior_living .bg2{ padding:22px 0 0; }
  .senior_living .bg3{ padding:0 0 24px; }
  .senior_living .bg3 ul li:first-child{ border-top:1px solid #dcd4bf; }
  .senior_living .tick ul li{ --sl-row-y:12px; font-size:16px; }
  .senior_living .btn_blue_rounded{
    font-size:16px;
    padding:13px 26px !important;    /* FLAGGED: this block overlaps
                                        style.css:414's 575.98 block */
  }
}

@media (max-width:479px){
  /* at 320: 320 - 24 container - 30 indent = 266px of measure, ~32 characters
     at 16px. Tight but honest, and nothing overflows — the widest fixed-width
     object in the section is the 58px title ornament. */
  .senior_living .bg1 p{ font-size:16px; }
  .senior_living .bg1 p:first-of-type,
  .senior_living .bg1 p:last-of-type{ font-size:17px; }
  .senior_living .tick ul li{ padding-left:1.8em; }
  .senior_living .btn_blue_rounded{ padding:13px 20px !important; }  /* FLAGGED,
                                        same reason — without it this whole
                                        block is dead code */
}

/* ---------- motion ---------- */
/* FIVE .wow elements in this section — the title (655), the three columns
   (661, 677, 693) and the CTA wrapper (711) — each carrying an inline
   style="visibility:hidden" plus an inline animation-name that WOW.js clears
   only on scroll-into-view. Only an author !important rule outranks a
   non-important inline declaration, and visibility has to be forced with it or
   an element WOW.js has not yet reached stays hidden forever.
   The entrance DIRECTIONS are harmonised in the MARKUP, not here, and that is
   deliberate: js/wow.min.js writes `animation-name:none` inline at init, so a
   flagged CSS override would beat it, fire every animation at first paint while
   the element is still hidden, and leave all three columns simply popping in.
   Swapping the animate.css class leaves WOW's mechanism intact. */
@media (prefers-reduced-motion:reduce){
  .senior_living .wow{ animation:none !important; visibility:visible !important; }
  .senior_living .btn_blue_rounded,
  .senior_living .btn_blue_rounded i{ transition-duration:.01ms !important; }
  .senior_living .btn_blue_rounded:hover,
  .senior_living .btn_blue_rounded:active,
  .senior_living .btn_blue_rounded:hover i{ transform:none !important; }
}

/* ---------- prefers-contrast ---------- */
/* Dropping the images leaves the plane already declared above, which raises
   every text minimum at once (body 8.217 -> 8.359:1, headings 10.044 ->
   10.218:1, ticks 4.997 -> 5.084:1). The hairlines then have to do the work
   the modelling was doing, so the three ranks collapse to two: one neutral
   #948a72 at 3.088:1 — clears the 3:1 structural-border bar, where the first
   choice of #948a72 measured 2.784:1 and missed it by 8% in the one branch
   whose whole purpose is more contrast. Still visibly quieter than the
   4.928:1 brass head-rule, so the two-rank collapse survives. An 88% gain on
   the text rules — and the brass head-rule to #7f6630 at 4.928:1, so the
   spread's one coloured mark survives as the strongest line rather than being
   flattened into the rest.
   The section's own FOOT threshold goes with them, and that is not an
   afterthought: it is the boundary between this section and the next, which is
   the one edge a high-contrast reader most needs. Left at
   rgba(203,178,121,.45) it composites to ~1.29:1; solid #7f6630 reads 4.928:1
   against this sheet and 4.615:1 against the mint below.
   Declared after the responsive blocks on purpose — several of these selectors
   tie those rules on specificity and only source order separates them. */
@media (prefers-contrast:more){
  .section-gaping.senior_living{
    background-image:none;
    border-bottom-color:#7f6630;
  }
  .senior_living .row.tick{ border-top-color:#7f6630; border-bottom-color:#948a72; }
  .senior_living .bg1{ border-bottom-color:#948a72; }
  .senior_living .bg2{ border-left-color:#948a72; }
  .senior_living .bg1 h4{ border-bottom-color:#948a72; }
  .senior_living .bg1 p:last-of-type{ border-top-color:#948a72; }
  .senior_living .tick ul li,
  .senior_living .bg3 ul li:first-child{ border-top-color:#948a72; }
}

/* ---------- forced-colors ---------- */
/* forced-colors overrides background-COLOR but leaves background-IMAGE alone,
   so the grain, the carry and the light have to be dropped by hand or all
   three survive on top of the system Canvas. Nothing in them carries
   information the system palette cannot re-state. Declared AFTER
   prefers-contrast on purpose: Chromium matches both under Windows High
   Contrast and this one has to win. forced-color-adjust is deliberately NOT
   set to none anywhere — the point is to hand the user's palette control, not
   take it. The tick marks are font glyphs, so they take CanvasText for free. */
@media (forced-colors:active){
  .section-gaping.senior_living{
    background-image:none;
    background-color:Canvas;
    border-bottom-color:CanvasText;
  }
  .senior_living .row.tick{ border-top-color:CanvasText; border-bottom-color:CanvasText; }
  .senior_living .bg1{ border-bottom-color:CanvasText; }
  .senior_living .bg2{ border-left-color:CanvasText; }
  .senior_living .bg1 h4{ border-bottom-color:CanvasText; }
  .senior_living .bg1 p:last-of-type{ border-top-color:CanvasText; }
  .senior_living .tick ul li,
  .senior_living .bg3 ul li:first-child{ border-top-color:CanvasText; }
  .senior_living .btn_blue_rounded{
    background:ButtonFace; color:ButtonText;
    border:1px solid ButtonText; box-shadow:none;
  }
  .senior_living .btn_blue_rounded:hover{ background:Highlight; color:HighlightText; }
  .senior_living .btn_blue_rounded:focus-visible{
    outline:2px solid CanvasText; outline-offset:3px;
  }
}

/* ---------- print ---------- */
/* FIRST, or none of the rest matters: WOW.js writes an inline
   style="visibility:hidden" onto all five .wow elements in this section and
   only clears it when they scroll into view. Printing fires no scroll and
   inline styles are media-independent, so without this line the entire section
   — title, all three columns and the CTA — prints blank.

   Unlike live_better and we_care this section has no white objects on it, so
   paper can simply be paper: the ground goes to plain white and the ink is
   spent on the rules instead, which go solid because a .45 alpha and a 1.311:1
   hairline both print as nothing. Layout is left alone — at a typical ~1000px
   print viewport the lg columns hold and the spread prints as a spread. */
@media print{
  .senior_living .wow{ visibility:visible !important; animation:none !important; }

  .section-gaping.senior_living{
    padding:24px 0;
    background-image:none;
    background-color:#fff;
    border-bottom:1px solid #7f6630;   /* 5.461:1 on white */
  }
  /* The widest print page area that exists is 816px (US Letter, zero margins);
     A4 zero-margin is 794px and Chrome's default A4 margins leave ~718px. So
     col-lg-* (>=992px) can NEVER apply on paper: this always prints stacked,
     with the row 960-1289px tall. break-inside:avoid on a box that size either
     does nothing or shunts the whole row to a fresh page and strands the title
     above ~900px of blank paper. Avoid on the FRAGMENTS instead, and keep the
     title with what it introduces. */
  .senior_living .row.tick{
    border-top:1px solid #7f6630;      /* 5.461:1 on white */
    border-bottom:1px solid #a89f8a;   /* 2.628:1 */
  }
  .senior_living .section_title{ break-after:avoid; page-break-after:avoid; }
  .senior_living .bg1{ border-bottom-color:#a89f8a; }   /* in print this IS the
                                        prose|schedule register divider: the
                                        vertical one cannot exist here, because
                                        .bg2 has border-left:0 from the 991
                                        block and that block always matches on
                                        paper. */
  .senior_living .bg1 h4{
    border-bottom-color:#c6bfae;       /* 1.832:1 */
    break-after:avoid; page-break-after:avoid;
  }
  .senior_living .bg1 p{ break-inside:avoid; page-break-inside:avoid; }
  .senior_living .bg1 p:last-of-type{ border-top-color:#c6bfae; }
  .senior_living .tick ul li,
  .senior_living .bg3 ul li:first-child{
    border-top-color:#c6bfae;
    break-inside:avoid; page-break-inside:avoid;
  }
  .senior_living .btn_blue_rounded{
    background:none;
    color:#22331f;                     /* 13.450:1 on white */
    border:1px solid #7f6630;
    box-shadow:none;
    transform:none;
  }
  .senior_living .btn_blue_rounded i{ color:#7f6630; }
}


/* ==========================================================================
   "SPACES THAT COMFORT YOU" (#floor-plan) — THE HUNG GALLERY
   Appended to css/banner.css, which loads LAST (index.php:22, after
   style.css:15, responsive.css:19, owl.carousel.css:20 and header.css:21).

   Was:
     · a flat #e6eee7 at L* 93.34 — the one plane on this page outside the
       lightness system the three rooms above now share, and the only
       unmodelled one on a page where every other ground carries the same
       grain tile and the same 168deg light
     · fifteen photographs bleeding straight onto it, no frame, no edge
     · four floor tabs measuring 27px idle / 32px active — the section's only
       control, 12-17px under the hit-area floor — which turn NAVY #1d384f
       on phones and nowhere else in the brand
     · .owl-nav: two bare 22px glyphs in #4f6f52 with no box, no hit area and
       nothing to say they are pressable
     · a .tick list whose wrapped lines run back under their own checkmark
     · 15px prose, below the 16px floor the rest of this page now holds

   Now: the room where the work is hung. Two materials and only two —
     stone  #e5e1d8   L* 89.61 declared, 89.26 painted   the wall
     paper  #f7f3e9   L* 95.90                           the mount board
   and ONE gesture: a single mount per pane, with the picture changing inside
   it. Everything else is quiet on purpose.

   WHY A NEAR-NEUTRAL WARM STONE, and not a fourth colour. The lightness is
   the system:
     paper    .live_better    #eae2c8 -> #e9e1c7   L* 89.53
     plaster  .we_care        #dbe5dc -> #dae4db   L* 89.63
     sheet    .senior_living  #f7f3e9 -> #f6f2e8   L* 95.55
     THIS     stone           #e5e1d8 -> #e4e0d7   L* 89.26
   Same rank as the two rooms, within a third of a lightness unit — value
   holds, hue and chroma move, which is what makes a join read as a change of
   material rather than a change of website. But the hue choice is this room's
   own job, not a slot to fill: it is the only room on the page with fifteen
   photographs in it, and any saturated ground tints every one of them by
   simultaneous contrast. So the wall is the quietest member of the set, and
   the colour in the room is the colour in the pictures. Warm rather than cool
   for a second reason: a cool green-grey here would be .we_care's plaster
   again, one section later, and at that distance the eye reads a repeat.

   In exchange this room gets the one object no other room can have — a MOUNT,
   cut from .senior_living's own sheet directly above and carried down as
   mount board. The picture is hung on the paper the room above is printed on.

   HAIRLINE RANK. One rank, calibrated separately to each ground, because the
   same value cannot serve both:
     brass hanging rail  #cbb279 2px   1.565:1 on stone, 1.861:1 on paper
                                        — the ONE line that crosses both
                                          columns, and the section's structure
     text rank on stone  #cfc7b1       1.280:1  (matched to .senior_living's
                                        #dcd4bf at 1.311:1 on its own sheet)
     text rank on paper  #dcd4bf       1.333:1  (the same rule, same weight,
                                        on the lighter ground inside the mount)
   Warm rules on warm grounds, and no second family. There is no cool rank in
   this section because there is no cool material in it.

   SCOPING. Every selector is anchored on #floor-plan (index.php:727, which
   occurs once). This is not defensive habit. .section_separation, .nav-pills,
   .nav-link, .tab-content, .tab-pane, .item, .owl-carousel, .section_title
   and .tick are all used elsewhere on this page: .we_care at index.php:453
   has its own pill rail AND five .text-start blocks with their own h4s and
   tick lists at 500/534/564/590/619, .room_features has .bg1/.bg2/.bg3 tick
   lists, and there are further owl carousels including .photo_gallery
   (js/custom.js:63). A selector like `.section_separation .nav-link` or
   `.tick ul li` would repaint half the page. Checked one by one, including
   the second half of every grouped selector.

   FONT AWESOME. webfonts/ is Font Awesome Free 5.11.2 while css/all.css is
   6.1.1, so U+Exxx codepoints render as tofu. Verified rather than asserted,
   by parsing the cmap of webfonts/fa-solid-900.ttf directly: 13 tables, 3
   cmap subtables at pid/eid 0/3 fmt4, 1/0 fmt0 and 3/1 fmt4, 960 codepoints
   spanning U+F000-U+F8D9 and ZERO in U+E000-U+EFFF. \f14a — the tick mark,
   the only glyph this block styles — resolves to gid 239. The two arrow
   glyphs the plugin injects were checked too, since this block dresses them:
   css/all.css gives .fa-chevron-left::before content:"\f053" and
   .fa-chevron-right::before content:"\f054", and both resolve, to gid 70 and
   gid 71. No new codepoint is introduced anywhere, and no data-URI SVG is
   needed, so the FA5/FA6 trap is never engaged rather than merely survived.

   OWL. Owl Carousel 2 owns .owl-stage and .owl-item widths and the stage
   transform inline from JS; none of them is touched. Only the .owl-carousel
   itself, .item, the img, .owl-nav and .owl-dots are styled.

   !important AUDIT — five declarations, each named at its own site:
     1  #floor-plan .section_title h2 font-size, against responsive.css:52
        (.section_title h2{font-size:20px!important}, max-width:767) and
        style.css:451 (.h2,h2{font-size:20px!important}, max-width:575.98).
        Only a flag beats a flag.
     2  #floor-plan .section_separation .nav-pills margin-bottom, against
        Bootstrap's .mb-3{margin-bottom:1rem!important} in the markup.
     3  the same rule's justify-content, against .justify-content-evenly
        {justify-content:space-evenly!important}.
     4  #floor-plan .tab-content .row.align-items-center align-items, against
        .align-items-center{align-items:center!important}. This one is the
        section's whole composition and it is easy to miss: unflagged, the row
        stays vertically centred and the shared brass hanging line — the
        single alignment this design depends on — silently never happens.
     5  the .owl-nav.disabled / .owl-dots:empty display, against style.css:1648
        (.owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled
        {display:inherit!important}). See the plaque block for why this is a
        real bug and not tidying.
     (plus the .wow visibility/animation resets in the reduced-motion and
      print blocks — WOW.js writes an INLINE style="visibility:hidden", and
      only an author !important rule outranks a non-important inline
      declaration.)
   Two flagged rules elsewhere are LOST TO and routed around rather than
   fought, and both are named where they bite:
     · owl.carousel.css:64-69, .owl-carousel .owl-nav button.owl-prev
       {padding:0 !important} at (0,3,1) — no scoped selector can outrank it,
       so the nav hit area is built from width/height, never from padding.
     · style.css:1556, .owl-carousel .owl-item img{border-radius:0!important}
       — border-radius is never declared here. Square is what a mounted print
       wants, so the flag stays dormant instead of being fought.
   Everything else wins on specificity, or on source order where it ties, and
   each of those is stated at its own rule.
   ========================================================================== */

/* ---------- the wall -----------------------------------------------------
   Specificity 1-1-0. That beats style.css:15 (.section_gaping_bg1, 0-1-0),
   style.css:14 (.section-gaping, 0-1-0) and style.css:471
   (.section-gaping:nth-child(odd){padding:15px 0}, 0-2-0, inside the 575.98
   block) — which is what makes this the tightest section on the page today.
   No flag needed for any of them. This rule MUST stay above the responsive
   blocks further down the file: they share its 1-1-0 and only source order
   separates them.

   Padding goes to the house figures, 56/60 - 44/46 - 34/36, against the
   30px 0 and 15px 0 it holds now.

   No calc() and no math function in any gradient stop: one unparseable layer
   invalidates the whole background-image declaration — the bug that bit the
   first pass at .live_better — and background-color below is the honest
   fallback, on which body copy still measures 7.098:1 and headings 8.677:1.

   NO border-top. .senior_living already draws the page's brass threshold at
   that join, and a second line on the same seam is a doubled rule. Worth
   recording what the ground change does to that existing threshold, because
   it was calibrated against the mint: senior_living's foot rule composites to
   #e2d5b6 and now reads 1.116:1 against this stone, down from 1.230:1 against
   #e6eee7. That is not a regression to repair — the two GROUNDS themselves
   have gone from 1.058:1 to 1.178:1 at that seam, so the materials now do
   most of the work and the hairline is doing less of it. The join is stronger
   than it was, not weaker; the number that got smaller is the one that was
   carrying the whole load alone.

   At the FOOT there IS a real edge — .section-gaping.testimonials carries no
   background rule of its own and paints plain #fff, meeting this stone at
   1.317:1 — so the page's own brass threshold closes the room, the same
   declaration .live_better and .senior_living close with. It composites to
   #d9cbad: 1.217:1 against this stone and 1.604:1 against the white below,
   where live_better's reads 1.215:1 / 1.343:1. The same line at the same
   weight. */
.section-gaping#floor-plan{
  padding:56px 0 60px;

  /* the settled plane, and the honest fallback */
  background-color:#e5e1d8;

  background-image:
    /* 1 - grain. The plinth's own feTurbulence tile at the page's own .026,
       byte-identical to the three rooms above. Texture, not dither. 298
       bytes. fractalNoise averages 0.5 in all four channels including alpha,
       so this lays 1.3% coverage of mid-grey over the plane — which is why
       #e5e1d8 paints as #e4e0d7, and every ratio quoted in this file is
       computed against that DARKER painted value, not the declared one. */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='fpg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23fpg)' opacity='.026'/%3E%3C/svg%3E"),

    /* 2 - the light. The SAME 168deg lean and the same warm white as
       live_better, we_care and senior_living, because it is the same source
       seen from one room further in. Same throw as senior_living's, 380px:
       the title and the tab rail sit inside it and the mounts sit past it, so
       the frames are read against the settled plane rather than against a
       gradient — which is what keeps the mount's 1.189:1 lift constant across
       all four panes instead of drifting down the section.
       It lightens only, so every figure in the contrast table is the worst
       case anywhere in the room. No carry layer: .senior_living closes on a
       drawn threshold, not a dissolve, so there is nothing to carry. */
    linear-gradient(168deg,
      rgba(255,252,240,.62)   0,
      rgba(255,252,240,.30) 150px,
      rgba(255,252,240,0)   380px);

  background-repeat:repeat, no-repeat;

  border-bottom:1px solid rgba(203,178,121,.45);
}

/* ---------- the title ----------------------------------------------------
   .section_title h2:after (style.css:37) is position:absolute with
   bottom:-5px and has caused three overlap bugs on this page. It is
   neutralised EXPLICITLY — static, block, redrawn as flow content — rather
   than inherited, and re-cut as the same 58px fading-brass hairline the
   plinth, the form, live_better, we_care and senior_living all close with.
   Repeating the building's ornament is what makes five rooms read as one
   building; the clamp is byte-identical to those rooms, because a larger
   figure here would break the descent through the page.

   The font-size flag is the only flag in this block and it is not laziness:
   see item 1 of the audit. Everything else wins on specificity — 1-1-1
   against style.css:31's 0-1-1 and responsive.css:21's 0-1-1, and 1-1-2 for
   the pseudo-element against style.css:37's 0-1-2. */
#floor-plan .section_title{ margin-bottom:38px; }
#floor-plan .section_title h2{
  font-family:Helvetica, sans-serif;
  font-size:clamp(23px, 2.7vw, 34px) !important;   /* FLAG 1 */
  font-weight:700;
  line-height:1.25;
  letter-spacing:.004em;
  color:#2b3f2f;                     /* --jd-green-deep — 8.595:1 */
  max-width:20em;
  margin:0 auto;
  position:static;
}
#floor-plan .section_title h2::after{
  position:static; display:block;    /* kills the absolute 4px #cbb279 bar */
  content:"";
  width:58px; height:1px;
  margin:18px auto 0;
  background:linear-gradient(90deg,transparent,rgba(203,178,121,.95),transparent);
  bottom:auto; left:auto; right:auto;
}

/* ---------- the register (the four floor plates) -------------------------
   This is the section's only control, and today it measures 27px idle and
   32px active — 12-17px under the 44px floor — with padding:0 and
   margin:0 26px, which bought horizontal air with no target underneath it.
   Below 768, responsive.css:67 additionally paints the active plate
   background:#1d384f with white text. That navy appears NOWHERE else in this
   brand: it is residue from the source template, the only cool blue on a page
   built from #4f6f52 / #2b3f2f / #3a5240 and #cbb279 / #7f6630, and white on
   it passes contrast — the contrast was never the problem. The problem is
   that the phone has a state of its own. Today the rail is a green underline
   on desktop and a navy slab on a phone: two designs, one of them wrong.

   Both are fixed by the same rebuild and NEITHER needs a flag. Read the file
   rather than the summary: responsive.css:67 is
     .section_separation .nav-pills .nav-link.active
       {color:#fff;background:#1d384f;padding:5px;}
   with no !important on any of the three. It is 0-4-0. The rule below is
   1-4-0 and banner.css loads after responsive.css, so it goes on specificity
   and on order. All three properties are restated explicitly so none can leak
   through, and border-bottom:0 additionally clears style.css:1414's 2px
   underline, which the plaque replaces.

   After this there is ONE treatment at every width from 320 to 1920. The
   media blocks below change size only — never colour, never state.

   STATE IS CARRIED THREE WAYS, so never by colour alone:
     1  FIGURE/GROUND INVERSION — the current floor is the only filled object
        in the rail. It survives full desaturation: an L* 32 plaque on an
        L* 89 wall.
     2  SHAPE — the pointer. style.css:1424 already builds a CSS-border
        triangle on every .nav-link at opacity:0, hidden INSIDE the old 32px
        tab at top:68% + translateY(100%). It is re-hung below the plaque
        where it points at the pane it opens. A border triangle is geometry,
        not a background, so it survives forced-colors, greyscale and paper.
     3  WEIGHT — 700 against 600.
   plus aria-selected, which Bootstrap's pill JS already maintains in the
   markup and which is not touched. The plaque alone measures 6.478:1 against
   the wall, so the state indication clears 1.4.11's 3:1 before any of the
   other three is counted.

   Cascade: the ul is 1-2-0 and needs FLAGS 2 and 3 only because Bootstrap
   ships its utilities flagged. .nav-item and .nav-link are 1-3-0 against
   style.css:1410/1420 (0-3-0), responsive.css:22 (0-3-0) and responsive.css:66
   (0-3-0); .active is 1-4-0 against style.css:1414 and responsive.css:67
   (both 0-4-0); ::before is 1-2-1 against style.css:1424's 0-2-1. */
#floor-plan .section_separation .nav-pills{
  display:flex;
  flex-wrap:wrap;                    /* four across at 1440, two by two at
                                        320 — and every plate keeps its 48px.
                                        The rail is allowed to grow; the
                                        target never shrinks. */
  justify-content:center !important; /* FLAG 3 — .justify-content-evenly
                                        strands two lone plates once the rail
                                        wraps */
  align-items:flex-end;
  gap:8px;
  margin:0 0 6px !important;         /* FLAG 2 — .mb-3 */
  padding:0 0 16px;                  /* room for the pointer, which hangs
                                        below the plate at top:100% */
  border-bottom:1px solid #cfc7b1;   /* 1.280:1 — the picture rail. The text
                                        rank, not the brass: the brass is
                                        reserved for the hanging line. */
  list-style:none;
}
#floor-plan .section_separation .nav-pills .nav-item{ margin:0; }
#floor-plan .section_separation .nav-pills .nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;                   /* 27px -> 48px. 2.5.8's floor is 44. */
  min-width:112px;                   /* so the four read as one set, and every
                                        target clears 44px in BOTH axes */
  margin:0;                          /* undoes style.css:1411's 0 26px and
                                        responsive.css:66's 2px */
  padding:12px 20px;                 /* undoes style.css:1411's padding:0 and
                                        responsive.css:66's 5px */
  border:1px solid transparent;      /* reserved, so selecting a plate shifts
                                        nothing in the rail */
  border-radius:0;
  background:transparent;
  font-size:17px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.005em;
  color:#35473a;                     /* 7.542:1 — was #000 at 15.9:1, a
                                        knowing reduction that ties the rail
                                        to the four rooms' green and is still
                                        past AAA */
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
@media (hover:hover){
  #floor-plan .section_separation .nav-pills .nav-link:hover{
    background:#f7f3e9;              /* the mount's paper, used as a wash */
    border-color:#cfc7b1;
    color:#22331f;                   /* 12.138:1 on that paper */
  }
}
#floor-plan .section_separation .nav-pills .nav-link.active,
#floor-plan .section_separation .nav-pills .nav-link.active:hover{
  background:#3a5240;                /* --jd-ribbon-bg — 6.478:1 on the wall,
                                        the header's own plate colour */
  border-color:#3a5240;
  border-bottom:1px solid #3a5240;   /* undoes style.css:1414's 2px underline */
  padding-bottom:12px;               /* ONLY the bottom. style.css:1414 sets
                                        padding-bottom:3px and that is all that
                                        needed undoing; restating the whole
                                        shorthand at (1,4,0) also outranked
                                        every responsive padding step (1,3,0),
                                        so the active plate kept 12px 20px at
                                        four of five breakpoints while its
                                        neighbours shrank around it. */
  color:#f7f3e9;                     /* 7.701:1 on the plaque */
  font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(203,178,121,.55);  /* a brass hairline struck
                                        into the plate, 4.138:1 against it —
                                        ornament, never state */
}
/* the pointer, re-hung. It now sits in the 16px band between the plate and
   the rail, pointing at the pane it opens, in the plaque's own green
   (6.478:1 on the wall — a non-text indicator, floor 3:1). Every property
   style.css:1424 sets is restated rather than left to chance. */
#floor-plan .section_separation .nav-link::before{
  top:100%; bottom:auto;
  left:0; right:0; margin:0 auto;
  transform:none;
  width:0; height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:9px solid #3a5240;
  opacity:0;
  transition:opacity .2s ease;
}
#floor-plan .section_separation .nav-link.active::before{ opacity:1; }
/* the page's focus idiom (header.css:281, .senior_living's CTA). offset:2px
   lands the ring on the WALL at 8.595:1 — #2b3f2f ON the plaque would be
   1.327:1 and useless. :focus{outline:0} is set alongside it so a mouse press
   does not leave a ring behind. */
#floor-plan .section_separation .nav-link:focus:not(:focus-visible){ outline:0; }
#floor-plan .section_separation .nav-link:focus-visible{
  outline:2px solid #2b3f2f;
  outline-offset:2px;
}

/* ---------- the spread ---------------------------------------------------
   style.css:1445 is `#floor-plan .tab-content{...padding:20px}` — 1-1-0,
   exactly the same weight as this selector, so this wins on SOURCE ORDER
   alone (index.php:22 against :15). Called out because that is a thinner
   thread than the rest of this file hangs on: if banner.css ever stops
   loading last, this is the first rule to fail, and it fails to a 20px inset
   rather than to anything broken.

   The alignment is the composition. The row carries .align-items-center,
   which floated the picture and its caption against each other's midpoints;
   flex-start puts both on the hanging rail instead, which is the ONE
   structural alignment this design depends on. Bootstrap ships that utility
   FLAGGED, so this needs FLAG 4 — unflagged it is dead code and the brass
   line never forms. The ragged foot is the honest reading: two hung objects
   are not the same height and never will be. */
#floor-plan .tab-content{ padding:0; background:transparent; border:0; }
#floor-plan .tab-content .row.align-items-center{
  align-items:flex-start !important;      /* FLAG 4 */
  row-gap:34px;                           /* carries the stacked phone case */
}

/* ---------- the mount ----------------------------------------------------
   THE SECTION'S ONE GESTURE, and the answer to "do not put fussy chrome
   around fifteen images": there is ONE frame per pane, not fifteen. The mat
   belongs to the .owl-carousel and the photographs change inside it, which is
   how a frame serves a photograph — the frame is a fixture on the wall.

   That placement also routes around two real constraints instead of fighting
   them, and both were verified in source rather than assumed:
     · js/owl.carousel.js:2841 appends .owl-nav to $element — the
       .owl-carousel itself, NOT to .owl-stage-outer. So hanging the mat here
       puts the prev/next INSIDE the frame, on its bottom rail, below the
       picture. Nothing is ever laid over the photograph, so every
       <a data-fancybox="img"> keeps its whole hit area, its cursor and its
       click.
     · owl.carousel.css:29 sets .owl-stage-outer{overflow:hidden}. A mat and a
       drop shadow on .item would be clipped left and right on every slide.
       Hung on the carousel they sit outside the clipped box entirely.

   The brass border-top is the hanging rail. The caption column below repeats
   it exactly, and with the row top-aligned the two are ONE line across the
   spread — which is the whole relationship: not a caption beside a photo, two
   objects on the same hanging line.

   1-1-0 over owl.carousel.css:9's 0-1-0. */
#floor-plan .owl-carousel{
  background-color:#f7f3e9;          /* senior_living's own sheet, as mount
                                        board — 1.189:1 off the wall. The mount
                                        is found by its brass rail, its edge
                                        and its shadow, not by a value jump. */
  padding:14px;
  border-top:2px solid #cbb279;      /* 1.861:1 on the paper — the hanging rail */
  box-shadow:
    0 0 0 1px #cfc7b1,               /* 1.280:1 on the wall — the mount's edge */
    0 1px 2px rgba(34,51,31,.06),
    2px 14px 26px -14px rgba(34,51,31,.34);   /* light from above, as everywhere */
}
/* Before Owl initialises, owl.carousel.css:9 holds .owl-carousel at
   display:none, so the image column is a zero-height hole and the pane jumps
   open when the JS lands. This restores it and clips the stacked .item divs
   to one frame, which is a much smaller shift than the collapse it replaces.
   1-2-0 over 0-1-0, unflagged. Honest about what it is: 5/3 is the PICTURE's
   ratio (every source is 800x480), not the frame's — the frame is that plus
   28px of mat and a ~74px nav rail — so a small settle remains. If it ever
   reads badly the fix is a fixed min-height per breakpoint, not removing the
   guard. Note the side effect, which is a net gain: with JS disabled the pane
   now shows one photograph per floor where today it shows nothing at all. */
#floor-plan .owl-carousel:not(.owl-loaded){
  display:block;
  /* content-box, because Bootstrap sets *{box-sizing:border-box} and the mount
     rule adds 14px of mat plus a 2px rule: with the default border-box the
     aspect-ratio sized the FRAME, so the reserved space came up ~87px short at
     1440 and the jump this exists to prevent still happened at a third size.
     padding-bottom reserves the ~76px nav rail on top of the mat. */
  box-sizing:content-box;
  aspect-ratio:5 / 3;
  padding-bottom:90px;
  overflow:hidden;
}
/* style.css:1559 sets .owl-carousel .item{width:96%;margin:0 auto}, which left
   a 2% sliver of mat down each side of every photograph and none above or
   below — an asymmetric mat, which is the one thing a mount must not be.
   1-2-0 over its 0-2-0. */
#floor-plan .owl-carousel .item{ width:100%; margin:0; }
#floor-plan .owl-carousel .owl-item img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:5 / 3;                /* the sources' own 800x480. This crops
                                        nothing; it reserves the box before
                                        decode and stops one odd file making
                                        one slide taller than its neighbours. */
  object-fit:cover;                  /* was fill */
  object-position:center;
  /* NO box-shadow here. An inset shadow is painted above the element's
     background but BELOW its content, and on a replaced element the content is
     an opaque bitmap - so an inset ring on the <img> renders nothing at all.
     The edge line lives on .item > a::after instead, which paints over the
     picture. border-radius is NOT declared: style.css:1556 forces 0 with a
     flag and square is what a mounted print wants, so that flag stays dormant. */
  box-shadow:none;
}
/* position:relative so the overlay below can size to the picture; the overlay
   carries pointer-events:none so the fancybox link keeps its full hit area. */
#floor-plan .owl-carousel .item > a{ display:block; line-height:0; position:relative; }
#floor-plan .owl-carousel .item > a::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(34,51,31,.14);   /* the line where the
                                        photograph meets its mount */
}
#floor-plan .owl-carousel .item > a:focus:not(:focus-visible){ outline:0; }
/* The anchor's border box IS the photograph - .item fills the inline-width
   .owl-item exactly - so a negative offset draws the ring ON the picture, not
   on the 14px mat, and several of these fifteen are dark interiors. The ring
   therefore brings its own backing: 3px of the mount's own paper immediately
   inside it, so the pairing is always #2b3f2f on #f7f3e9 = 10.218:1 whatever
   the photograph does. */
#floor-plan .owl-carousel .item > a:focus-visible{
  outline:3px solid #2b3f2f;
  outline-offset:-3px;
}
#floor-plan .owl-carousel .item > a:focus-visible::after{
  box-shadow:inset 0 0 0 3px #f7f3e9, inset 0 0 0 4px rgba(34,51,31,.14);
}

/* ---------- the plaque on the bottom rail --------------------------------
   .owl-nav today is two 22px glyphs in #4f6f52 (style.css:1640-1647) with no
   box, no border, no hit area and nothing to say they are pressable. Fifteen
   photographs behind two invisible glyphs. They become two 46x46 plates on
   the mount's bottom rail, separated from the picture by the mat's own
   hairline.

   THE HIT AREA IS BUILT FROM width/height, NEVER FROM PADDING, and that is
   forced, not stylistic: owl.carousel.css:64-69 sets
     .owl-carousel .owl-nav button.owl-prev{... padding:0 !important}
   at 0-3-1 WITH a flag, which no scoped selector can outrank. Named as a rule
   this block LOSES TO and routes around. Its unflagged neighbours in the same
   declaration — background:none, border:none, color:inherit, font:inherit —
   are all beaten normally at 1-3-1.

   A REAL BUG, and the reason FLAG 5 exists. The four carousels do not hold
   seven photographs each: counted in the markup they hold 6, 5, 3 and ONE.
   With items:1 at every breakpoint (js/custom.js:52-59), Owl's
   Navigation.update marks .owl-nav .disabled whenever items <= settings.items
   — so the 3rd Floor carousel's nav is disabled — and style.css:1648 forces
     .owl-carousel .owl-nav.disabled{display:inherit!important}
   which overrides owl.carousel.css:52's display:none. The 3rd Floor pane
   therefore ships two inert arrows today, and would ship two beautifully
   dressed inert arrows without the flag below. Same rule, same flag, second
   case: js/owl.carousel.js:2866 appends .owl-dots to $element
   UNCONDITIONALLY and only then adds .disabled, so an empty .owl-dots div
   sits inside every mount and style.css:1648 forces it visible too. It is
   hidden with :empty rather than outright, so if anyone ever flips
   dots:false in js/custom.js:46 the rule stops applying on its own and the
   dots are not suppressed by a stale line. */
#floor-plan .owl-carousel .owl-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px solid #dcd4bf;      /* 1.333:1 — the text rank, on paper */
  text-align:center;
}
#floor-plan .owl-carousel .owl-nav.disabled{ display:none !important; }  /* FLAG 5 */
#floor-plan .owl-carousel .owl-dots:empty{ display:none !important; }    /* FLAG 5 */
#floor-plan .owl-carousel .owl-nav button.owl-prev,
#floor-plan .owl-carousel .owl-nav button.owl-next{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:46px; height:46px;
  min-width:46px;                    /* 2.5.8: 46 >= 44 in both axes */
  margin:0;                          /* undoes style.css:1643's 0 5px */
  border:1px solid #7f8f84;          /* 3.074:1 on the mat — clears 1.4.11 */
  border-radius:0;
  background:transparent;
  color:#2b3f2f;                     /* 10.218:1; was #4f6f52 at 5.084:1 */
  font-size:0;                       /* the button's own whitespace — the <i>
                                        is sized on its own line below */
  line-height:1;
  cursor:pointer;
  transition:background-color .22s ease, color .22s ease, border-color .22s ease;
}
#floor-plan .owl-carousel .owl-nav button.owl-prev i,
#floor-plan .owl-carousel .owl-nav button.owl-next i{
  font-size:15px;
  line-height:1;
  color:inherit;
  /* js/owl.carousel.js:2815 injects fa-chevron-left / fa-chevron-right as real
     <i> elements, so they are dressed, never replaced, and no content is
     injected from CSS. Verified: css/all.css maps them to \f053 and \f054,
     and both resolve in webfonts/fa-solid-900.ttf (gid 70 and gid 71). */
}
@media (hover:hover){
  #floor-plan .owl-carousel .owl-nav button.owl-prev:hover,
  #floor-plan .owl-carousel .owl-nav button.owl-next:hover{
    background:#3a5240;
    border-color:#3a5240;
    color:#f7f3e9;                   /* 7.701:1 inverted */
  }
}
#floor-plan .owl-carousel .owl-nav button.owl-prev:focus,
#floor-plan .owl-carousel .owl-nav button.owl-next:focus:not(:focus-visible){ outline:0; }
#floor-plan .owl-carousel .owl-nav button.owl-prev:focus-visible,
#floor-plan .owl-carousel .owl-nav button.owl-next:focus-visible{
  background:#3a5240;
  border-color:#3a5240;
  color:#f7f3e9;
  outline:2px solid #2b3f2f;         /* 10.218:1 on the mat */
  outline-offset:2px;
}
#floor-plan .owl-carousel .owl-nav button.owl-prev:active,
#floor-plan .owl-carousel .owl-nav button.owl-next:active{ transform:translateY(1px); }

/* ---------- the caption column -------------------------------------------
   The second object on the wall, hung from the same brass rail as the mount.
   Deliberately NOT a second paper board: the mount is the only paper in this
   room, so the photographs keep the strongest object on the wall and the
   caption is text ruled onto the stone — the same brass-head-rule and ruled
   rank .senior_living's prospectus uses one section up. Repeating that
   language rather than inventing a fifth material is what makes the room
   belong to the building.

   EVERY selector goes through #floor-plan .tab-content .text-start. .text-start
   is a Bootstrap utility and .we_care uses it five times (index.php:500, 534,
   564, 590, 619) with its own h4s and its own tick lists; #floor-plan opens at
   index.php:727, so none of them is reachable. */
#floor-plan .tab-content .text-start{
  border-top:2px solid #cbb279;      /* 1.565:1 on the wall — the SAME hanging
                                        rail as the mount, on the same line */
  padding-top:26px;
  max-width:36em;
}
/* h4 is a bare element selector at style.css:67 (25px/700/#4f6f52). On this
   stone #4f6f52 measures 4.276:1 — a fail at body size and the weakest type
   in the section even as large text. Taken to --jd-green-deep it is 8.595:1
   and it gains a rule of its own, which is what makes it a label title rather
   than a bold line. 1-2-1 over style.css:67's 0-0-1 and style.css:457's
   0-0-1. */
#floor-plan .tab-content .text-start h4{
  font-size:clamp(20px, 1.9vw, 24px);
  font-weight:700;
  line-height:1.3;
  letter-spacing:.004em;
  color:#2b3f2f;                     /* 8.595:1 */
  margin:0 0 16px;
  padding-bottom:14px;
  border-bottom:1px solid #cfc7b1;   /* 1.280:1 — the text rank, on stone */
}
/* style.css:23 pins p at 15px, below the 16px floor the rest of this page now
   holds, and responsive.css:131 takes it to 13px/300 at 320px — which is also
   the 400%-zoom reflow width at 1280. Helvetica has a real Light face on
   iOS/macOS, so the weight is restated or the whole column thins out on the
   narrowest phones. This is the pane's standfirst — one paragraph introducing
   a floor — so it is set above body, in .senior_living's own standfirst ink.
   1-2-1 over both 0-0-1s; no flag. */
#floor-plan .tab-content .text-start p{
  margin:0 0 4px;
  font-size:17px;
  font-weight:400;
  line-height:1.62;
  color:#35473a;                     /* 7.542:1 */
  overflow-wrap:break-word;
}

/* --- the inclusions ------------------------------------------------------
   The same bug and the same fix as .senior_living. style.css:1564 puts
   margin-left:25px on the ul and style.css:1567 leaves the mark as an INLINE
   :before with margin:0 — so the mark sits at the head of the first line and
   the second and later lines of any wrapping item run back underneath it. In
   a ~300px column at 768 that is most of these items, not an edge case.

   Rebuilt as a true hanging indent: the li is the positioning context, the
   mark is absolute at left:0, and the well is measured in em because the mark
   inside it is — Font Awesome's check-square has a .875em advance, at
   font-size:.9em that is .7875em, and under Firefox's text-only zoom (which
   scales font-size but not px padding) a 30px well is overrun at ~260%.
   1.9em keeps 1.11em of clearance at every zoom level and resolves to 31.4px
   at 100%, unchanged to the eye.

   The mark's COLOUR moves, and that is forced rather than stylistic:
   --jd-green #4f6f52 measures 4.997:1 on .senior_living's paper but only
   4.276:1 on this darker stone — a fail. --jd-ribbon-bg #3a5240 is the next
   green in the palette, reads 6.478:1, and holds the same relationship to its
   ground that the mark holds one room up, in the same hue family.

   Cascade: ul is 1-3-1 over style.css:1564's 0-1-1 and style.css:1724's 0-1-1;
   li is 1-3-2 over style.css:1565's 0-1-2, over responsive.css:165's 0-1-2
   (which is what stops the 820-1180 landscape band dropping this copy to
   15px) and over responsive.css:164's `#floor-plan ul li` at 1-0-2; ::before
   is 1-3-3 over style.css:1567's 0-1-3. responsive.css:58-59's `ul.tick li`
   cannot reach these items at all — .tick is on a wrapping DIV here, not on
   the <ul>. No flags anywhere in this block. */
#floor-plan .tab-content .text-start .tick{ margin-top:22px; }
#floor-plan .tab-content .text-start .tick ul{
  margin:0;
  padding:0;
  list-style:none;
}
#floor-plan .tab-content .text-start .tick ul li{
  --fp-row-y:12px;                   /* ONE token: the row's vertical padding
                                        AND the mark's offset, so they cannot
                                        drift apart in a media block below */
  position:relative;
  padding:var(--fp-row-y) 0 var(--fp-row-y) 1.9em;
  margin:0;                          /* undoes style.css:1565's 10px */
  border-top:1px solid #cfc7b1;      /* 1.280:1 — a rule, not a message */
  font-size:16.5px;
  line-height:1.6;
  color:#3f4a41;                     /* 7.032:1 */
  overflow-wrap:break-word;
}
/* the first item hangs off the h4's own rule with the .tick margin as air, so
   it carries no rule of its own. Rules go on the TOP of each row, never the
   bottom — the list then opens on one line and its ragged end is simply where
   the text stops, which is honest where a closing rule would not be. */
#floor-plan .tab-content .text-start .tick ul li:first-child{ border-top:0; }
#floor-plan .tab-content .text-start .tick ul li::before{
  /* the alt-text form of content(). U+F14A is a PRIVATE-USE codepoint and CSS
     generated content reaches the accessibility tree, so without the "/ ''" a
     screen reader announces garbage before every item. Where the syntax is
     unsupported the declaration is dropped whole and style.css:1567 still
     supplies the glyph, so it renders identically. */
  content:"\f14a" / "";
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  position:absolute;
  left:0; top:var(--fp-row-y);       /* an abspos child's containing block is
                                        the PADDING box, so top:0 would sit
                                        the mark above the first line by
                                        exactly the row padding */
  width:auto; height:auto;
  margin:0;
  padding:0;
  vertical-align:baseline;           /* style.css:1567's vertical-align:middle
                                        is inert once absolute, and misleading
                                        left in place */
  font-size:.9em;
  line-height:1.78;                  /* .9em x 1.78 = the li's own 1.6 line box
                                        at any font size, because both terms
                                        are em-derived — so the mark stays on
                                        the first line's optical centre under
                                        zoom and in every block below, with no
                                        px offset to maintain */
  color:#3a5240;                     /* 6.478:1; #4f6f52 is 4.276:1 here */
  transition:none;                   /* style.css:1567 animates `all` for a
                                        mark that never changes */
}

/* ==========================================================================
   RESPONSIVE — 320 to 1920, no horizontal overflow at any width
   ========================================================================== */

/* 992-1199. The container is fluid below 1200, so each col-md-6 comes in to
   ~445px and the mat's 14px sides start eating the measure. */
@media (max-width:1199.98px){
  #floor-plan .tab-content .text-start{ max-width:none; }
  #floor-plan .section_separation .nav-pills .nav-link{ min-width:104px; padding:12px 16px; }
}

/* 768-991. col-md-6 still holds two up, at ~342px each — the tightest the
   spread ever gets while the picture and its caption are still side by side,
   so the type steps down one notch rather than letting the inclusions set
   four-line items. */
@media (min-width:768px) and (max-width:991.98px){
  .section-gaping#floor-plan{ padding:44px 0 46px; }
  #floor-plan .section_title{ margin-bottom:30px; }
  #floor-plan .section_separation .nav-pills{ gap:6px; padding-bottom:14px; }
  #floor-plan .section_separation .nav-pills .nav-link{
    min-width:0; padding:12px 12px; font-size:16px;
  }
  #floor-plan .owl-carousel{ padding:12px; }
  #floor-plan .tab-content .text-start{ padding-top:22px; }
  #floor-plan .tab-content .text-start p{ font-size:16px; }
  #floor-plan .tab-content .text-start .tick ul li{ font-size:16px; padding-left:1.8em; }
}

/* <=767. The columns stack. No source-order rule is needed and none would
   work: index.php:763/853/899/959 all carry order-1 order-sm-1 on the image
   column, so the picture already leads in every pane, and Bootstrap ships
   .order-1{order:1!important} flagged, so any CSS trying to re-order these
   from an unflagged rule would be dead code.
   The plate and the pointer come through from the base rules unchanged — only
   the sizes are restated here — so a phone signals the current floor exactly
   the way a desktop does. responsive.css:66's 14px is below this page's floor
   and is overturned at 1-3-0 with no flag. */
@media (max-width:767.98px){
  .section-gaping#floor-plan{ padding:34px 0 36px; }
  #floor-plan .section_title{ margin-bottom:26px; }
  /* row gap 16px, not 6px: the active plate's pointer is 9px tall at top:100%,
     so a 6px row gap drove the triangle 3px into the plate beneath it on every
     phone where Ground Floor or 1st Floor is the current one. */
  #floor-plan .section_separation .nav-pills{ gap:16px 6px; padding-bottom:14px; }
  /* NOT flex:1 1 132px. A 132px basis lets THREE plates fit any rail >=408px,
     so from 432 to 767 the rail broke 3+1 and flex-grow stretched "3rd Floor"
     across the full width as a slab. Half the rail minus half the column gap
     forces 2x2 at every width from 320 to 767. */
  #floor-plan .section_separation .nav-pills .nav-item{
    flex:1 1 calc(50% - 3px);
    max-width:calc(50% - 3px);
  }
  #floor-plan .section_separation .nav-pills .nav-link{
    width:100%;
    min-width:0;
    min-height:48px;                 /* never shrinks; the rail wraps 2x2 at
                                        320 instead */
    padding:12px 14px;
    font-size:16px;
  }
  #floor-plan .tab-content .row.align-items-center{ row-gap:26px; }
  #floor-plan .owl-carousel{ padding:12px; }
  #floor-plan .owl-carousel .owl-nav{ margin-top:12px; padding-top:12px; }
  /* stacked, the caption's brass rail would read as a second hanging line
     26px under the first. It becomes the foot of one column instead: the two
     objects are hung once, at the top. */
  #floor-plan .tab-content .text-start{
    border-top:1px solid #cfc7b1;
    padding-top:22px;
  }
  #floor-plan .tab-content .text-start p{ font-size:16px; }
  #floor-plan .tab-content .text-start .tick ul li{ font-size:16px; --fp-row-y:11px; }
}

/* <=479. At 320 — which is also the 400%-zoom reflow width at 1280 —
   320 - 24 container - 24 mat - 30 indent leaves ~242px of measure, about 29
   characters at 16px. Tight but honest. The widest fixed object in the room is
   the 58px title ornament and the widest control run is two 46px nav plates
   plus a 10px gap = 102px, both far inside 296px. */
@media (max-width:479.98px){
  #floor-plan .section_separation .nav-pills .nav-link{ padding:12px 10px; font-size:15.5px; }
  #floor-plan .owl-carousel{ padding:10px; }
  #floor-plan .tab-content .text-start .tick ul li{ padding-left:1.8em; }
}

/* ==========================================================================
   PREFERENCES
   ========================================================================== */

/* ---------- prefers-reduced-motion ---------------------------------------
   WOW.js writes an INLINE style="visibility:hidden" on .section_title.wow
   (index.php:731) and clears it on scroll, and animate__animated
   animate__zoomIn is on all four image columns. Both are stopped and
   visibility is forced back — an author !important rule is the only thing
   that outranks a non-important inline declaration, and without it the title
   never appears for anyone who has the preference set and JS half-running.

   Honest about the limit. js/custom.js:47-50 sets autoplay:true,
   autoplayTimeout:1700, loop:true and smartSpeed:2000 on all four of these
   carousels: the picture is in motion for more than half of every cycle,
   unasked. Owl writes the stage transform from JS, so the SLIDE ITSELF cannot
   be stopped from CSS. What CAN be stopped is the 2000ms glide — Owl applies
   its duration as an inline transition on .owl-stage, and collapsing that to
   .01ms turns a two-second travelling image into a cut. That is a real
   reduction, not a complete one. The complete fix is a one-token change in
   js/custom.js:47, and it is genuinely one token: `jdReduceMotion` is already
   declared at file scope on line 2 of that same file and already used on line
   10 for the banner slider, so line 47 becomes
     autoplay: !jdReduceMotion,
   This is a live 2.2.2 issue on a page whose audience is 55+, and it is named
   here because the CSS makes the section look finished while it is still
   true. */
@media (prefers-reduced-motion:reduce){
  #floor-plan .wow,
  #floor-plan .animate__animated{
    animation:none !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  #floor-plan .owl-stage{ transition-duration:.01ms !important; }
  #floor-plan .section_separation .nav-pills .nav-link,
  #floor-plan .section_separation .nav-link::before,
  #floor-plan .owl-carousel .owl-nav button.owl-prev,
  #floor-plan .owl-carousel .owl-nav button.owl-next{
    transition-duration:.01ms !important;
  }
  #floor-plan .owl-carousel .owl-nav button.owl-prev:active,
  #floor-plan .owl-carousel .owl-nav button.owl-next:active{ transform:none !important; }
}

/* the accessible name for the two carousel controls. js/custom.js now renders
   them as real <button type="button">s - Owl's default navElement is a DIV,
   which is neither focusable nor nameable - and passes navText as an
   aria-hidden icon plus this label. Scoped so it collides with nothing. */
#floor-plan .jd-sr{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* --- the pause control ----------------------------------------------------
   js/custom.js injects one of these per floor carousel. It exists because the
   four carousels autoplay and autoplayHoverPause does not exist on a phone
   (WCAG 2.2.2) - the banner slider has carried the same control since the
   header work. It sits on the mount's bottom rail beside the arrows, hard
   right, so it never lands on a photograph or on a fancybox link. Same 46px
   plate as the arrows, so the rail reads as one set of three controls. */
#floor-plan .owl-carousel{ position:relative; }
#floor-plan .jd-owl-pause{
  position:absolute; right:14px; bottom:14px; z-index:2;
  box-sizing:border-box;
  width:46px; height:46px; min-width:46px;
  padding:0; cursor:pointer;
  background:#f7f3e9;
  border:1px solid #7f8f84;          /* 3.03:1 on the mount */
  border-radius:0;
  transition:background .25s ease, border-color .25s ease;
}
@media (hover:hover){
  #floor-plan .jd-owl-pause:hover{ background:#efe9da; border-color:#2b3f2f; }
}
#floor-plan .jd-owl-pause:focus:not(:focus-visible){ outline:0; }
#floor-plan .jd-owl-pause:focus-visible{
  outline:2px solid #2b3f2f; outline-offset:2px;
}
/* two bars = playing (press to pause); one triangle = paused (press to play).
   Shape, not colour, so the state survives forced-colors and greyscale. */
#floor-plan .jd-owl-pause::before,
#floor-plan .jd-owl-pause::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:4px; height:14px; background:#2b3f2f;
}
#floor-plan .jd-owl-pause::before{ left:17px; }
#floor-plan .jd-owl-pause::after{ left:25px; }
#floor-plan .jd-owl-pause.is-paused::before{
  left:18px; width:0; height:0; background:none;
  border-left:12px solid #2b3f2f;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}
#floor-plan .jd-owl-pause.is-paused::after{ display:none; }

/* ---------- prefers-contrast ---------------------------------------------
   Dropping the grain and the light leaves the declared plane, which raises
   every minimum at once: body 7.032 -> 7.098:1, headings 8.595 -> 8.677:1,
   standfirst 7.542 -> 7.614:1, the tick mark 6.478 -> 6.540:1. The hairlines
   then have to carry what the modelling was carrying, so the text rank
   collapses upward to #837c6a — 3.183:1 on the stone and 3.748:1 on the mat,
   over the 3:1 structural bar where #8c8471 measured 2.846:1 and missed it by
   5% in the one branch whose entire purpose is more contrast. A 149% gain on
   the text rules, and the brass keeps its rank above them by going solid.
   The type itself does not move: it is already 7.0-12.1:1, and darkening it
   further would only harden the page. */
@media (prefers-contrast:more){
  .section-gaping#floor-plan{
    background-image:none;
    background-color:#e5e1d8;
    border-bottom-color:#7f6630;     /* solid: 4.185:1 on the stone, 5.461:1
                                        against the white below, where .45
                                        alpha reads 1.217 — and that boundary
                                        is the one edge this reader most needs */
  }
  #floor-plan .section_separation .nav-pills{ border-bottom-color:#837c6a; }
  #floor-plan .section_separation .nav-pills .nav-link{ color:#22331f; }  /* 10.211:1 */
  #floor-plan .section_separation .nav-pills .nav-link.active,
  #floor-plan .section_separation .nav-pills .nav-link.active:hover{
    background:#22331f;              /* #f7f3e9 on it is 12.138:1 */
    border-color:#22331f;
    box-shadow:inset 0 0 0 1px #e3cf9c;
  }
  #floor-plan .section_separation .nav-link.active::before{ border-top-color:#22331f; }
  #floor-plan .section_title h2::after{ background:#7f6630; }
  #floor-plan .owl-carousel{
    border-top-color:#7f6630;        /* 4.928:1 on the mat, 4.146:1 on the wall */
    box-shadow:0 0 0 1px #837c6a;
  }
  #floor-plan .owl-carousel .item > a::after{ box-shadow:inset 0 0 0 1px rgba(34,51,31,.45); }
  #floor-plan .owl-carousel .owl-nav{ border-top-color:#837c6a; }
  #floor-plan .owl-carousel .owl-nav button.owl-prev,
  #floor-plan .owl-carousel .owl-nav button.owl-next{ border-color:#2b3f2f; border-width:2px; }
  #floor-plan .tab-content .text-start{ border-top-color:#7f6630; }
  #floor-plan .tab-content .text-start h4{ border-bottom-color:#837c6a; }
  #floor-plan .tab-content .text-start p{ color:#22331f; }
  #floor-plan .tab-content .text-start .tick ul li{ color:#22331f; border-top-color:#837c6a; }
  #floor-plan .tab-content .text-start .tick ul li::before{ color:#22331f; }
}

/* ---------- forced-colors ------------------------------------------------
   forced-colors overrides background-COLOR but leaves background-IMAGE alone,
   so the grain and the light have to be dropped by hand or both survive on
   top of the system Canvas; neither carries information the user's palette
   cannot restate. box-shadow is not honoured at all here, so every
   shadow-borne edge in this room — the mount's, the picture's line — is
   restated as a real border. forced-color-adjust is used only on the two
   controls whose state must survive; everywhere else the point is to hand the
   reader their palette, not take it.
   The current floor keeps all three of its form cues: the Highlight fill, the
   weight, and the pointer — which is a bordered pseudo-element, so
   border-top-color:Highlight keeps it drawn, and it is the reason the state
   is still readable if a user's Highlight and Canvas resolve close together.
   Declared AFTER prefers-contrast on purpose: Chromium matches both under
   Windows High Contrast and this block must be the one that lands. */
@media (forced-colors:active){
  .section-gaping#floor-plan{
    background-image:none;
    background-color:Canvas;
    border-bottom-color:CanvasText;
  }
  #floor-plan .section_title h2{ color:CanvasText; }
  #floor-plan .section_title h2::after{
    background:none; border-top:1px solid CanvasText; height:0;
  }
  #floor-plan .section_separation .nav-pills{ border-bottom-color:CanvasText; }
  #floor-plan .section_separation .nav-pills .nav-link{
    background:Canvas;
    color:LinkText;
    border-color:CanvasText;
    forced-color-adjust:none;
  }
  #floor-plan .section_separation .nav-pills .nav-link.active,
  #floor-plan .section_separation .nav-pills .nav-link.active:hover{
    background:Highlight;
    color:HighlightText;
    border-color:HighlightText;
    box-shadow:none;
  }
  #floor-plan .section_separation .nav-link.active::before{ border-top-color:Highlight; }
  #floor-plan .section_separation .nav-link:focus-visible{ outline-color:CanvasText; }
  #floor-plan .owl-carousel{
    background:Canvas;
    border:1px solid CanvasText;
    border-top-width:2px;
    box-shadow:none;
  }
  /* NOT an outline on the img: at the default offset:0 it is drawn immediately
     OUTSIDE the img's border box, and the img exactly fills .owl-stage-outer,
     whose overflow:hidden clips it on all four sides - so in High Contrast the
     photograph had no edge of its own. The overlay is inside the clip. */
  #floor-plan .owl-carousel .owl-item img{ box-shadow:none; }
  #floor-plan .owl-carousel .item > a::after{ box-shadow:none; border:1px solid CanvasText; }
  #floor-plan .owl-carousel .item > a:focus-visible{ outline-color:CanvasText; }
  #floor-plan .owl-carousel .owl-nav{ border-top-color:CanvasText; }
  #floor-plan .owl-carousel .owl-nav button.owl-prev,
  #floor-plan .owl-carousel .owl-nav button.owl-next{
    background:ButtonFace; color:ButtonText; border-color:ButtonText;
    forced-color-adjust:none;
  }
  #floor-plan .owl-carousel .owl-nav button.owl-prev:hover,
  #floor-plan .owl-carousel .owl-nav button.owl-next:hover,
  #floor-plan .owl-carousel .owl-nav button.owl-prev:focus-visible,
  #floor-plan .owl-carousel .owl-nav button.owl-next:focus-visible{
    background:Highlight; color:HighlightText; border-color:HighlightText;
  }
  #floor-plan .tab-content .text-start{ border-top-color:CanvasText; }
  #floor-plan .tab-content .text-start h4{ color:CanvasText; border-bottom-color:CanvasText; }
  #floor-plan .tab-content .text-start p{ color:CanvasText; }
  #floor-plan .tab-content .text-start .tick ul li{
    color:CanvasText; border-top-color:CanvasText;
  }
  #floor-plan .tab-content .text-start .tick ul li::before{ color:CanvasText; }
}

/* ---------- print --------------------------------------------------------
   FIRST, before anything else, or none of the rest matters: WOW.js writes an
   inline style="visibility:hidden" on the .wow title and only clears it on
   scroll. A print fired from the top of the page has had no scroll and inline
   styles are media-independent, so without this line the section prints
   headless. The four image columns carry animate__animated animate__zoomIn,
   which has an opacity channel that ends at 1 — stopped here anyway rather
   than trusted.

   Only the ACTIVE pane prints. The other three are display:none from
   Bootstrap and forcing them visible would print four stacked floors of
   inline-transformed owl stages as clipped fragments — worse than one honest
   page. The reader printed the floor they were looking at.

   Ink is spent on the rules, which go solid: a .45 alpha and a 1.28:1
   hairline both print as nothing. The plaque becomes an outline rather than a
   fill, because a filled plate prints as a black slab and the rail still has
   to say which floor this is. */
@media print{
  #floor-plan .wow,
  #floor-plan .animate__animated{
    visibility:visible !important;
    opacity:1 !important;
    animation:none !important;
  }
  .section-gaping#floor-plan{
    padding:24px 0 18pt;
    background-image:none !important;
    background-color:#fff !important;
    border-bottom:1px solid #7f6630;      /* 5.461:1 on white */
  }
  #floor-plan .section_title{ break-after:avoid; page-break-after:avoid; }
  #floor-plan .section_title h2{ color:#000; }
  #floor-plan .section_title h2::after{
    background:none; border-top:1px solid #a89f8a; height:0;
  }
  #floor-plan .section_separation .nav-pills{ border-bottom-color:#a89f8a; gap:0; padding-bottom:6pt; }
  #floor-plan .section_separation .nav-pills .nav-link{
    min-height:0; min-width:0; padding:6pt 10pt;
    background:none; box-shadow:none; border-color:transparent;
    color:#555;
  }
  #floor-plan .section_separation .nav-pills .nav-link.active,
  #floor-plan .section_separation .nav-pills .nav-link.active:hover{
    background:none; box-shadow:none;
    color:#22331f;                        /* 13.450:1 on white */
    border:1px solid #7f6630;
  }
  #floor-plan .section_separation .nav-link::before{ display:none; }
  /* controls that cannot be operated on paper. Flagged because style.css:1648
     forces these two containers visible with display:inherit!important. */
  #floor-plan .owl-carousel .owl-nav,
  #floor-plan .owl-carousel .owl-dots{ display:none !important; }
  #floor-plan .owl-carousel{
    /* no drawn box in print. Owl writes .owl-stage/.owl-item widths as inline
       pixels computed for the SCREEN viewport and never recomputes them for the
       page box, and .col-md-6 does not match a ~660px print area either - so a
       frame would print at the full page measure with the picture at its screen
       width inside it and an empty gutter on the right. The brass rule alone
       carries the mount, matching the caption column's hanging line. */
    background:none;
    padding:0;
    border:0;
    border-top:2px solid #7f6630;
    box-shadow:none;
    break-inside:avoid; page-break-inside:avoid;
  }
  #floor-plan .owl-carousel .owl-item img{ box-shadow:none; }
  #floor-plan .tab-content .text-start{
    border-top:2px solid #7f6630;
    break-inside:avoid; page-break-inside:avoid;
  }
  #floor-plan .tab-content .text-start h4{
    color:#000; border-bottom-color:#a89f8a;
    break-after:avoid; page-break-after:avoid;
  }
  #floor-plan .tab-content .text-start p{ color:#000; break-inside:avoid; page-break-inside:avoid; }
  #floor-plan .tab-content .text-start .tick ul li{
    color:#000; border-top-color:#a89f8a;
    break-inside:avoid; page-break-inside:avoid;
  }
  #floor-plan .tab-content .text-start .tick ul li::before{ color:#000; }
}


/* ==========================================================================
   "TESTIMONIALS" — THE PORTRAIT WALL
   Appended to css/banner.css, which loads LAST (index.php:22, after
   style.css:15, responsive.css:19, owl.carousel.css:20 and header.css:21).

   Was:
     · plain #fff from .section-gaping (style.css:14), and 30px 0 of padding
       — 15px 0 below 576 (style.css:471) — under a room that had just been
       rebuilt at 56/60
     · eight YouTube hqdefault thumbnails bleeding straight onto that white,
       no frame, no edge, no shadow: a contact sheet, not a wall
     · a play affordance that DOES NOT EXIST until hover. .photo-date is
       opacity:0 scale(.5) and only .post-box:hover reveals it (style.css:1473
       / 1519). On the touch traffic this page is bought for, eight films read
       as eight photographs and nothing says otherwise
     · that glyph, when it did appear, was #4f6f52 on rgba(0,0,0,.7) — dark
       green on near-black, 3.73:1
     · captions at 13px desktop / 11px below 767 (style.css:1540,
       responsive.css:112) on a page that holds a 16px floor for this
       audience, in a box with a FIXED height:72px / 80px, which overflowed on
       3 of 8 quotes at 768 and 1 of 8 at 992
     · white type on a #4f6f52 slab: 5.74:1, a pass, and the loudest block in
       the section — eight green bars shouting under eight quiet photographs

   Now: a wall of framed portraits in a hallway. Two materials and only two —
     wall   #2f4433  L* 26.67 declared, 27.37 painted   the plinth's own green
     mount  #f7f3e9  L* 95.90                           .senior_living's sheet
   and ONE gesture: a permanent, seated play mark on every picture. Everything
   else is quiet on purpose. The grid stays dead square — no tilt, no tape, no
   torn edge, no polaroid. Eight identical frames hung on a level wall. That
   squareness is the whole defence against sentiment: the warmth is in the
   material and in the faces, not in a gesture pretending to be a scrapbook.

   WHY THIS ROOM LEAVES THE LIGHTNESS SYSTEM, which is the decision to argue
   with first. Four rooms now sit within a third of a lightness unit:
     paper    .live_better    #eae2c8 -> #e9e1c7   L* 89.53
     plaster  .we_care        #dbe5dc -> #dae4db   L* 89.63
     sheet    .senior_living  #f7f3e9 -> #f6f2e8   L* 95.55
     stone    #floor-plan     #e5e1d8 -> #e4e0d7   L* 89.16
   A fifth at L* 89 would be the rut, not the system. #floor-plan's own
   comment already refuses to reuse .we_care's plaster on the grounds that at
   one room's distance the eye reads a repeat — and this room is not one room
   away from the stone, it is directly under it. So this room takes the page's
   OTHER stated principle instead, the one written at banner.css:324: the page
   is bookended by the same surface. The plinth under the banner is #2f4433
   with the same feTurbulence tile at .05 and a brass rule top and bottom;
   this is that surface again, at the far end, closing the body of the page.
   The descent becomes dark plinth -> four lit rooms -> dark wall -> the white
   of .room_features, which is an arc. Five light bands and then white is not.

   AND WHY GREEN IS SAFE HERE, when #floor-plan argued a saturated ground
   tints every photograph in the room. That argument is right and it is
   sharper here — this is the only section on the page whose entire content is
   human faces, and skin is the one subject simultaneous contrast damages
   visibly. The answer is the object the design is built from: every picture
   is surrounded by 9px of #f7f3e9 paper on all four sides, so no photograph
   ever touches the wall. That is what a mount is FOR, and it is the technical
   reason mounts exist in framing. The wall is never adjacent to a face.

   WHAT THE GROUND CHANGE DOES TO THE SEAM ABOVE, since it is the largest
   single number this block moves. #floor-plan closes with
   border-bottom:1px rgba(203,178,121,.45), which composites on its own
   grained stone to #d9cbad. Against the OLD white below it measured 1.604:1 —
   a hairline doing almost nothing. Against this wall it measures 6.403:1, and
   the two grounds themselves go from 1.321:1 to 7.775:1. That is not an
   accident to apologise for: a bright brass line between a light stone floor
   and a deep green wall is a picture rail, and this section is a wall of
   pictures. The line that was a whisper becomes the moulding it always was,
   and it is drawn by a declaration that already exists, so nothing is added
   at the join. NO border-top here — that would be the doubled rule.

   AT THE FOOT there is a real edge and it is drawn: .room_features carries no
   background rule and paints plain #fff, and wall-vs-white is 10.268:1. The
   plinth's own foot rule is rgba(203,178,121,.22), which is right when there
   is nothing below to answer to; here it composites to #535d44 and reads
   1.481:1 from inside the room against 6.934:1 from below — a line legible
   from one side only. .55 gives #86815a: 2.595:1 against the wall and
   3.957:1 against the white. It reads as brass from both sides, which is what
   a skirting on a boundary this hard has to do.

   SCOPING. Every one of the 28 selector groups below is anchored on
   `.testimonials` (index.php:993, which occurs once), and each was checked
   individually rather than assumed. This is not defensive habit:
   `.photo-item` is also on `.map .photo-item` (style.css:1193) and on the
   photo-gallery cards, `.view_title` is styled unscoped at style.css:1529 and
   responsive.css:69, `.post-box`, `.photo-img`, `.photo-date` and
   `.photo-icon` are the gallery's shared card markup, and `.section_title`,
   `.section-gaping` and `.row`/`.col` are everywhere. An unscoped
   `.view_title` or `.photo-icon` here would repaint the gallery.

   FONT AWESOME. webfonts/ is Font Awesome Free 5.11.2 while css/all.css is
   6.1.1, so U+Exxx renders as tofu. NO new codepoint is introduced. The only
   glyph this block styles is `fa-play` \f04b, which is already in the markup
   and already resolving, so the FA5/FA6 trap is never engaged rather than
   merely survived. The one other mark added — the opening quote on the
   caption — is U+201C from the system Helvetica stack, not an icon font.

   !important AUDIT — two declarations in normal media, each named at its own
   site, plus the WOW resets:
     1  .testimonials .section_title h2 font-size, against responsive.css:52
        (.section_title h2{font-size:20px!important}, max-width:767) and
        style.css:451 (.h2,h2{font-size:20px!important}, max-width:575.98).
        Only a flag beats a flag.
     2  .testimonials .row > .col.mb-3 margin-bottom, against Bootstrap's
        .mb-3{margin-bottom:1rem!important} (bootstrap.min.css, v5.1.3),
        which the markup puts on the last two columns only (index.php:1108,
        1127). Today it is harmless because nothing stretches. The moment the
        cards below become equal-height flex items, a margin-bottom on a
        stretched item is subtracted from the line's cross size and those two
        frames come out 16px SHORT of their neighbours — a visible ragged
        edge on the bottom row, caused by markup that reads like spacing.
     (plus .testimonials .wow{visibility:visible!important} in the
      reduced-motion and print blocks — WOW.js writes an INLINE
      style="visibility:hidden" on all nine .wow elements in this section, the
      title and eight cards, and only an author !important declaration
      outranks a non-important inline one. Without that line a print fired
      from the top of the page prints this section completely blank.)
   Everything else wins on specificity, or on source order where it ties, and
   is stated at its own rule. One flagged rule elsewhere is routed around
   rather than fought: style.css:1556
   `.owl-carousel .owl-item img{border-radius:0!important}` — there is no owl
   carousel in this section, and border-radius:0 is what a mounted print wants
   anyway, so the flag stays dormant.
   ========================================================================== */

/* ---------- the wall -----------------------------------------------------
   Specificity 0-2-1. The element selector is load-bearing and not padding:
   `.section-gaping.testimonials` alone is 0-2-0, which TIES style.css:471
   (.section-gaping:nth-child(odd){padding:15px 0}, also 0-2-0, inside the
   575.98 block) and would win on source order only. Adding `section` settles
   it outright, and also beats style.css:14 (.section-gaping{background:#fff;
   padding:30px 0}, 0-1-0). No flag needed for either.

   Padding goes to the house figures, 56/60 - 44/46 - 34/36.

   No calc() and no math function in any gradient stop: one unparseable layer
   invalidates the whole background-image declaration — the bug that bit the
   first pass at .live_better — and background-color below is the honest
   fallback, on which the title still measures 9.266:1 and the mounts still
   lift off the wall at 9.266:1.

   Read the stack bottom-up, since CSS lists the topmost layer first:
     2  the light   the SAME 168deg lean and the same warm white as all four
                    rooms above, because it is the same source. But the peak
                    is .06, not .62 or .97: on a DARK plane a warm-white
                    overlay lifts fast, and .06 is already the ceiling that
                    keeps the worst case AAA. At the peak the plane paints
                    #3d5040 (L* 32.21), where the title reads 7.782:1 and the
                    standfirst 7.429:1 — so every ratio quoted for this room
                    is taken at its LIGHTEST point, which for light type on a
                    dark ground is the worst case, exactly inverting the
                    convention the four light rooms use. It settles to
                    #314535 by 420px, where the same two read 9.266:1 and
                    8.846:1. The rise-then-settle is what reads as light
                    spilling down from the room above rather than as a
                    gradient, and it is doing a second job for free: the
                    brightest part of the wall is the strip immediately under
                    #floor-plan's brass rule, which is what physically
                    connects a dark plane to the lit stone above it.
     1  grain       the plinth's own feTurbulence tile at .05 — the DARK-room
                    opacity, not the .026 the four light rooms use. Byte-wise
                    identical to .banner_heading's. fractalNoise averages 0.5
                    in all four channels including alpha, so this lays 2.5%
                    coverage of mid-grey, which is why #2f4433 paints as
                    #314535 and every ratio in this block is computed against
                    that LIGHTER painted value, not the declared one. 298
                    bytes. Texture, not dither.
   No pseudo-element on the section, so it needs no position:relative and
   nothing here can disturb the absolutely-positioned play marks. */
section.section-gaping.testimonials{
  padding:56px 0 60px;

  /* the settled plane, and the honest fallback */
  background-color:#2f4433;

  background-image:
    /* 1 - grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='tsg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23tsg)' opacity='.05'/%3E%3C/svg%3E"),

    /* 2 - the light */
    linear-gradient(168deg,
      rgba(255,252,240,.06)   0,
      rgba(255,252,240,.03) 170px,
      rgba(255,252,240,0)   420px);

  background-repeat:repeat, no-repeat;

  /* the skirting. .55, not the plinth's .22 — see the note in the header on
     why a boundary with white beneath it needs a line legible from both
     sides. Composites to #86815a: 2.595:1 on the wall, 3.957:1 on the #fff
     of .room_features below. NO border-top: #floor-plan's own foot rule is
     the threshold and now reads 6.403:1 across it. */
  border-bottom:1px solid rgba(203,178,121,.55);
}

/* ---------- the title ----------------------------------------------------
   .section_title h2:after (style.css:41) is position:absolute with
   bottom:-5px and has caused overlap bugs on this page more than once. It is
   neutralised EXPLICITLY — static, block, redrawn as flow content, with
   bottom/left/right unset — rather than inherited, and re-cut as the same
   58px fading-brass hairline the plinth, the form, live_better, we_care,
   senior_living and floor-plan all close with. Repeating the building's
   ornament is what makes six rooms read as one building. The clamp is
   byte-identical to those rooms: a larger figure here would break the descent.

   The font-size flag is the only flag in this block; see item 1 of the audit.
   Everything else wins on specificity — 0-2-1 against style.css:31's 0-1-1
   and responsive.css:21's 0-1-1, and 0-2-2 for the pseudo-element against
   style.css:41's 0-1-2.

   #f7f3e9 rather than #fff on purpose: it is the same warm sheet the mounts
   are cut from, so the type on the wall and the paper on the wall are one
   material seen at two sizes. 7.782:1 at the light's peak, 9.266:1 settled. */
.testimonials .section_title{ margin-bottom:34px; }
.testimonials .section_title h2{
  font-family:Helvetica, sans-serif;
  font-size:clamp(23px, 2.7vw, 34px) !important;   /* FLAG 1 */
  font-weight:700;
  line-height:1.25;
  letter-spacing:.004em;
  color:#f7f3e9;
  max-width:20em;
  margin:0 auto;
  position:static;
}
.testimonials .section_title h2::after{
  position:static; display:block;    /* kills the absolute 4px #cbb279 bar */
  content:"";
  width:58px; height:1px;
  margin:18px auto 0;
  background:linear-gradient(90deg,transparent,rgba(203,178,121,.95),transparent);
  bottom:auto; left:auto; right:auto;
}
/* the standfirst. Only matches if the recommended <p> is added at
   index.php:996; harmless and inert otherwise.
   #f2eee1, not the plinth's secondary #efe4c9: at the light's peak #efe4c9
   measures 6.820:1 and #e3cf9c 5.613:1, both under the 7:1 this page holds
   for 17px body copy. So the hierarchy is carried by size and weight — 34px
   bold against 17px regular, with the brass hairline between them — and not
   by tinting the second line down until it fails. 7.429:1 at the peak,
   8.846:1 settled. p{font-size:15px} at style.css:23 is below the floor and
   .section_title p{font-weight:500} sets an introduction in semibold, which
   reads as a second heading; both are overridden here at 0-2-1. */
.testimonials .section_title p{
  max-width:60ch;
  margin:16px auto 0;
  font-size:17px;
  font-weight:400;
  line-height:1.6;
  color:#f2eee1;
}

/* ---------- the hang -----------------------------------------------------
   Bootstrap 5.1.3 gutters live in custom properties on .row, and `.g-2` sets
   both to 0.5rem at 0-1-0. `.testimonials .row` is 0-2-0, so 24px lands
   without a flag. 8px was right for a contact sheet and wrong for a wall:
   frames need air or they read as one perforated sheet.

   The height chain is built entirely from flex, with NO percentage heights
   anywhere. Percentages against a flex-STRETCHED item resolve correctly in
   every current engine, but they are a definite-size rule that has changed
   before; four nested `display:flex` declarations cannot be got wrong. Each
   level also carries min-width:0, without which a long unbroken word in a
   caption would set the flex item's automatic minimum size and push the card
   wider than its column — the classic flex overflow, and the reason a 104-
   character quote is safe at a 33-character measure.

   `.col` gets display:flex as a CONTAINER; it remains a flex ITEM of .row
   with the flex:0 0 auto and width:X% that .row-cols-* gave it. Nothing about
   the Bootstrap column model is disturbed. */
.testimonials .row{
  --bs-gutter-x:24px;
  --bs-gutter-y:24px;
}
.testimonials .row > .col{ display:flex; }
.testimonials .row > .col.mb-3{ margin-bottom:0 !important; }   /* FLAG 2 */
.testimonials .row > .col > .wow{ display:flex; flex:1 1 auto; min-width:0; }

/* .post-box computes display:table today (style.css:1518), which shrink-wraps
   and is why the anchor never filled its column. 0-2-0 beats 0-1-0.
   The <a> is the ONLY interactive thing in the card and it keeps its
   data-fancybox hook untouched: nothing below introduces a new stacking
   context above it, no overlay takes pointer events away from it, and its
   own box is the whole frame — a target far past 44px at every width. */
.testimonials .post-box{
  display:flex; flex:1 1 auto; min-width:0;
  margin-bottom:0;
  color:inherit;
  text-decoration:none;
}

/* ---------- the mount ----------------------------------------------------
   Cut from .senior_living's own #f7f3e9 sheet and carried down as mount
   board, the same borrowing #floor-plan makes — but the OBJECT is different,
   and that difference is the point. #floor-plan's is a mat with a 2px brass
   head-rule, one per floor, landscape, on stone. This is a FRAME: a small
   portrait board with the picture inset behind a gilt fillet, eight of them,
   on a dark wall. Same paper, different joinery, so the two rooms are
   furnished from one store without repeating a piece of furniture.

   The mount is the section's structural line and it does not need help:
   #f7f3e9 against the wall is 9.266:1 settled and 7.782:1 at the light's
   peak. That is the card edge. No hairline is drawn on it — an inset
   rgba(43,63,47,.09) bevel was tried and measures 1.04:1 on its own paper,
   which is invisible work on top of a 9:1 edge.

   The shadow is the only thing that says these hang OFF the wall rather than
   being painted on it, and on a dark ground a black shadow is subtle, so it
   is near-black GREEN and tight rather than wide: a frame sits close to a
   wall. Offset down, with no x-offset — the 168deg light enters top-left at
   only 12 degrees off vertical, so the cast is essentially straight down.
   padding is 9px on three sides and 0 at the foot, because the caption
   supplies its own. */
.testimonials .photo-item{
  position:relative;
  display:flex; flex-direction:column; flex:1 1 auto; min-width:0;
  background:#f7f3e9;
  padding:9px 9px 0;
  border-radius:0;
  box-shadow:
    0 12px 24px -14px rgba(9,14,10,.85),
    0 3px  7px  -4px rgba(9,14,10,.70);
  transition:transform .32s ease, box-shadow .32s ease;
}

/* ---------- the opening --------------------------------------------------
   4:3 IS THE CARD RATIO, and this is the one measurement in the section worth
   defending in writing. hqdefault.jpg is 480x360 and it is NOT letterboxed
   for these eight videos: YouTube centre-CROPS the 16:9 source into it, first
   non-black row 0 and last 359 on all eight, top 45px band mean luminance
   63-85. So there are no bars to remove, and the reflex fix —
   aspect-ratio:16/9 with object-fit:cover — would crop a full 4:3 frame a
   second time. Per-band detail variance says exactly what that would cost:
   in three of four sampled thumbnails the TOP 45px carries the HIGHEST detail
   (8222 / 8908 / 7039 against a 2700-4415 middle). These are talking heads
   and the heads are high in frame. A 16:9 re-crop throws away the faces.
   With the box at 4:3 and the source at 4:3, `cover` crops exactly nothing;
   object-position is declared for honesty and does nothing at all.
   maxresdefault.jpg 404s for these videos (1097-byte error body) and
   mqdefault.jpg is a harder centre-crop at 320x180 — lower resolution than a
   308px card needs. hqdefault is the right source and this is its native box.

   position:relative is a fix, not scaffolding. .photo-img is static today, so
   .photo-date — absolute with bottom:0, width:100%, height:100% — resolves
   against .photo-item, which means the hover overlay currently covers the
   CAPTION as well as the picture. Making this the containing block scopes the
   overlay to the opening, where it belongs.

   The background is the empty frame. If img.youtube.com 404s, is blocked by a
   privacy extension, or is simply slow, this deep-green field is what the
   opening shows — the wall's own material seen through the mat, with the
   fillet and the play mark still drawn on top. Paired with the recommended
   alt="", a failed image renders as nothing at all rather than as broken-image
   chrome, and the card reads as a film that has not loaded instead of as a
   broken page. If aspect-ratio is unsupported the box falls back to height
   auto and the img's own 4:3 intrinsic ratio drives it — the identical
   result; only the empty-frame case loses its height. */
.testimonials .photo-img{
  position:relative;
  flex:0 0 auto;
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:0;
  background:linear-gradient(168deg,#3a5240 0%,#2b3f2f 100%);
}
.testimonials .photo-img img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 50%;      /* box ratio == source ratio: zero crop */
  border-radius:0;
  transform:scale(1);
  transition:transform .5s ease-in-out;
}
/* the gilt fillet. It CANNOT be an inset shadow on the <img>: inner shadows
   paint below element content and a bitmap is opaque, so an inset shadow on
   the image — or on .photo-img itself, whose background the image completely
   covers — draws literally nothing. It has to be an overlay, and the overlay
   has to be inert. 1.861:1 against the mount paper, which is decorative and
   is stated as decorative: it is the same brass at the same weight
   #floor-plan lays on the same sheet, and the load-bearing edge in this card
   is the mount against the wall at 9.266:1. z-index:1 puts it over the
   picture and under the play mark, which style.css:1473 pins at 99. */
.testimonials .photo-img::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(203,178,121,.85);
  transition:box-shadow .32s ease;
}

/* ---------- the mark -----------------------------------------------------
   THE SECTION'S ONE GESTURE, and the fix for its one real defect.

   .photo-date is opacity:0 transform:scale(.5) and only .post-box:hover
   brings it back (style.css:1473, 1519). On a touch screen there is no hover,
   so on the traffic this page is bought for the play affordance has never
   existed: eight films that look like eight photographs. Both the base rule
   (0-1-0 vs this 0-2-0) and the hover rule (0-3-0 vs this 0-4-0) are beaten
   on specificity, including its transition-delay:300ms, which would otherwise
   hold the hover state back by a third of a second.

   The layer stays, but it stops being a reveal and becomes a base: a short
   scrim in the bottom 46% of the opening only. It does not veil a single
   face — the measured detail says the heads are in the TOP band — and it is
   what a photograph's own foot shadow looks like. It exists so the mark has
   ground on a bright thumbnail as well as a dark one.

   The mark itself sits bottom-left rather than in the middle, and that is the
   difference between a dignified permanent mark and a video-site button
   stamped on someone's face. style.css:1497 puts it at top:38% left:50%,
   which on a 4:3 talking head is squarely on the face; bottom-left is the
   corner the measurements say is emptiest.

   NON-TEXT CONTRAST, PROVEN RATHER THAN EYEBALLED. The backdrop is eight
   cross-origin photographs, so it is an arbitrary colour and no single edge
   can be guaranteed against it. The mark therefore carries TWO edges of
   opposite polarity — an opaque #22331f body and a solid 1px #f7f3e9 rim —
   and what is guaranteed is the BETTER of the two. Sweeping the full RGB cube
   (3-step on R and G, 51-step on B), the minimum over all backdrops of
   max(body-vs-backdrop, rim-vs-backdrop) is 3.484:1, at #758a33. Over 3:1
   everywhere, by construction rather than by luck. A scrim alone cannot do
   this: darkening the backdrop toward the body's own value destroys the
   body's edge — at alpha .78 over a white thumbnail the disc measures
   1.678:1 — which is why the scrim here is gentle and the rim does the work.
   The glyph is #e3cf9c on #22331f: 8.756:1.

   46px, so the mark clears 44px on its own even though the target is the
   whole frame. \f04b is the codepoint already in the markup; nothing new is
   asked of the 5.11.2 webfonts. The 2px nudge is optical — a play triangle
   centred on its bounding box reads left of centre. */
.testimonials .photo-date{
  position:absolute; inset:0; top:0; bottom:0;
  width:100%; height:100%;
  z-index:2;
  display:block;
  opacity:1;
  transform:none;
  transition:background .32s ease;
  background:linear-gradient(to top,
    rgba(23,34,25,.34)  0,
    rgba(23,34,25,.14) 22%,
    rgba(23,34,25,0)   46%);
}
.testimonials .post-box:hover .photo-date{
  opacity:1;
  transform:none;
  transition-delay:0s;              /* kills style.css:1519's 300ms hold */
}
.testimonials .photo-icon{
  position:absolute;
  top:auto; bottom:11px; left:11px;
  transform:none;
  width:46px; height:46px;
  border-radius:50%;
  background:#22331f;
  box-shadow:
    0 0 0 1px #f7f3e9,            /* the guaranteed edge — see the note */
    0 3px 9px rgba(9,14,10,.6);
  text-align:center;
  transition:box-shadow .32s ease, transform .32s cubic-bezier(.34,1.35,.5,1);
}
.testimonials .photo-icon i{
  display:block;
  line-height:46px;
  font-size:16px;
  color:#e3cf9c;                    /* 8.756:1 on the body */
  transform:translateX(2px);        /* optical centring of the triangle */
  transition:color .32s ease;
}

/* ---------- the label ----------------------------------------------------
   The quote is the card under the frame, and it stops being a green slab.

   THE CLIP. style.css:1540 sets height:72px and responsive.css:112 sets
   height:80px, both fixed, and both were measured overflowing: scrollHeight >
   clientHeight on 3 of 8 quotes at 768 and 1 of 8 at 992. Both are 0-2-0 and
   unflagged, so this rule beats them on source order — but height:auto is
   declared EXPLICITLY rather than left to min-height, because a min-height
   larger than a set height wins while a set height still clips anything past
   it, and leaving that rule live is how the bug comes back.

   THE SIZE. 16px, the floor this page holds for a 55+ audience, against 13px
   desktop and 11px on phones. That is a 45% increase in the small case and it
   is the reason the columns are recut at 768-991 below.

   THE GROUND. background-image:linear-gradient(#4f6f52,#4f6f52) at
   style.css:1540 painted eight solid green bars — white on green at 5.74:1, a
   pass, and the loudest thing in a section whose subject is eight faces. It
   goes; the label is printed on the mount board it sits on, #22331f ink on
   #f7f3e9 at 12.138:1. Dark ink on paper is what a gallery label is.

   THE BOX. Column-flex and centred, so a 31-character quote sits in the
   middle of the space the tallest quote in its row needs, instead of
   ragged-topping with a hole beneath it. Measured at 16px Helvetica the
   longest quote (104 characters) sets in 3-5 lines at every width: 4 lines at
   1920/1440/1200, 5 at 992, 3 at 900/768/390, 4 at 576/320. The caption box
   never exceeds ~154px. overflow-wrap is insurance for 320px, where the
   measure is 33 characters and the longest word is 11.

   The opening quote is the label's own ornament, not a third gesture — one
   character of the system Helvetica stack, #7f6630 at 4.928:1 on the paper.
   --jd-gold #cbb279 was the obvious choice and measures 1.861:1 there, which
   is fine for a fillet drawn against a photograph and is mush for a mark that
   has to be read as a shape. */
.testimonials .view_title{
  flex:1 1 auto;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  height:auto; min-height:0;
  margin:0;
  padding:14px 11px 16px;
  background:none;
  font-size:16px;
  line-height:1.5;
  font-weight:400;
  letter-spacing:.005em;
  text-align:center;
  overflow-wrap:break-word;
  color:#22331f;                    /* 12.138:1 on the mount */
}
.testimonials .view_title::before{
  content:"\201C";
  display:block;
  font-size:26px; line-height:.72;
  margin:0 0 7px;
  color:#7f6630;                    /* 4.928:1 on the mount */
}

/* ---------- hover --------------------------------------------------------
   Gated on (hover:hover) so a touch device never gets a stuck hover state.

   The frame lifts 3px and its shadow lengthens — the only honest way a hung
   object responds. The picture's 1.1 scale (style.css:1451) comes down to
   1.04: on a face, a 10% zoom is a lurch. The fillet goes to full #e3cf9c.

   AND THE MARK DOES NOT CHANGE COLOUR. That is deliberate and it is a
   correctness point, not taste. Filling the body with brass on hover was the
   first draft; sweeping the cube again with a brass body and the same rim,
   the guaranteed edge collapses from 3.484:1 to 1.364:1 at #ccdb66 — a
   yellow-green both #cbb279 and #f7f3e9 sit close to. So the identifying edge
   is the SAME mechanism in every state, and hover adds a brass ring blooming
   outward instead — which is also the hover idiom .live_better already uses
   on .lb-ic::after, so the building repeats itself rather than inventing. */
@media (hover:hover){
  .testimonials .post-box:hover .photo-item{
    transform:translateY(-3px);
    box-shadow:
      0 20px 34px -16px rgba(9,14,10,.90),
      0  5px 10px  -5px rgba(9,14,10,.75);
  }
  .testimonials .post-box:hover .photo-img img{ transform:scale(1.04); }
  .testimonials .post-box:hover .photo-img::after{
    box-shadow:inset 0 0 0 1px #e3cf9c;
  }
  .testimonials .post-box:hover .photo-date{
    background:linear-gradient(to top,
      rgba(23,34,25,.46)  0,
      rgba(23,34,25,.20) 26%,
      rgba(23,34,25,.04) 52%);
  }
  .testimonials .post-box:hover .photo-icon{
    transform:scale(1.06);
    box-shadow:
      0 0 0 1px #f7f3e9,
      0 0 0 5px rgba(227,207,156,.42),
      0 5px 13px rgba(9,14,10,.7);
  }
}

/* ---------- focus --------------------------------------------------------
   outline-offset is measured from the element's own border box, and the <a>'s
   border box IS the frame — so a 3px offset puts the whole ring out on the
   wall, with wall on both sides of it and 3px of wall between it and the
   paper. That is what the 6.685:1 (settled) / 5.613:1 (at the light's peak)
   figures are against, and there is no width at which the ring is adjacent to
   the #f7f3e9 mount, where #e3cf9c would measure 1.386:1.
   Nothing in this section sets overflow:hidden on a card ancestor, so the
   ring is never clipped, and the 5px it needs sits inside the container's own
   12px gutter at every width.
   The mark takes the hover bloom on focus too, so a keyboard user gets the
   same feedback a pointer does rather than an outline alone. */
.testimonials .post-box:focus:not(:focus-visible){ outline:0; }
.testimonials .post-box:focus-visible{
  outline:2px solid #e3cf9c;
  outline-offset:3px;
}
.testimonials .post-box:focus-visible .photo-icon{
  box-shadow:
    0 0 0 1px #f7f3e9,
    0 0 0 5px rgba(227,207,156,.42),
    0 5px 13px rgba(9,14,10,.7);
}

/* ==========================================================================
   Responsive
   These blocks share the base rules' specificity and are separated from them
   by source order alone, so they MUST stay below everything above.
   ========================================================================== */

@media (max-width:1199px){
  .testimonials .row{ --bs-gutter-x:20px; --bs-gutter-y:20px; }
}

/* 768-991 IS RECUT FROM FOUR COLUMNS TO TWO, and it is the one place the
   16px floor forces a layout decision rather than a type decision.
   .row-cols-md-4 gives 25% from 768 up, which measures a 168px card. Take off
   18px of mat and 22px of caption padding and the measure is 128px — about 17
   characters at 16px Helvetica, on which the longest quote sets in 7 lines
   under a picture only 126px tall. A label twice the height of its own
   picture is not a framed portrait. Two columns give a 338px card, a 296px
   measure, 3 lines, and a 253px picture: the people get bigger at exactly the
   width where the old design made them smallest. The cost is four rows
   instead of two on a tablet, and it is the right side of that trade on a
   page whose subject is faces.
   `.row-cols-md-4>*` is 0-1-0; `.testimonials .row > .col` is 0-2-0, so this
   lands without a flag and without touching the markup's column classes.
   Bounded implicitly rather than explicitly: at 576-767 Bootstrap's
   .row-cols-sm-2 already gives 50%, so this rule agrees with it, and below
   576 the next block puts it back to 100%. Two max-width blocks in descending
   order, which is the file's existing shape — no min-width query is
   introduced. */
@media (max-width:991px){
  section.section-gaping.testimonials{ padding:44px 0 46px; }
  .testimonials .section_title{ margin-bottom:28px; }
  .testimonials .row{ --bs-gutter-x:22px; --bs-gutter-y:22px; }
  .testimonials .row > .col{ width:50%; }
}

@media (max-width:767px){
  section.section-gaping.testimonials{ padding:34px 0 36px; }
  .testimonials .section_title p{ font-size:16px; margin-top:13px; }
  .testimonials .photo-item{ padding:8px 8px 0; }
  .testimonials .view_title{ padding:12px 9px 14px; }
  .testimonials .photo-icon{ bottom:10px; left:10px; }
}

/* Below 576 the grid is one column, and a full-bleed frame on a phone is not
   a hung portrait, it is a banner. Capping the column at 340px and centring
   it keeps the object reading as a framed picture on a wall and takes roughly
   300px off the section's total height at 390 — which matters, because 16px
   captions in one column are the reason this section gets taller on a phone
   than it was (about +16% against the 11px original). That is the honest
   price of a readable caption for this audience and it is paid deliberately.
   Auto margins on a flex item absorb the free space and centre it; the
   x-gutter goes to 0 because with one column there is nothing to gutter
   against and the container's own padding already sets the margin. */
@media (max-width:575.98px){
  .testimonials .row{ --bs-gutter-x:0px; --bs-gutter-y:24px; }
  .testimonials .row > .col{
    width:100%;
    max-width:340px;
    margin-left:auto; margin-right:auto;
  }
}

/* ==========================================================================
   PREFERENCES
   ========================================================================== */

/* ---------- prefers-reduced-motion ---------------------------------------
   WOW.js writes an INLINE style="visibility:hidden" on all nine .wow elements
   here — the title at index.php:995 and the eight card wrappers — and clears
   it only on scroll. An author !important rule is the only thing that
   outranks a non-important inline declaration, so without the first block the
   section never appears for anyone with the preference set and JS half
   running. CORRECTION: animate.min.css is v3.7.2 and contains ZERO
   `animate__` occurrences, so the unprefixed `zoomIn` in the markup is LIVE,
   not inert. (It is opacity-guarded - 0%{opacity:0} - so it is not the
   slideIn hazard.) The
   animation is stopped rather than trusted either way.
   Unlike #floor-plan there is nothing here that autoplays: the videos live
   behind a fancybox lightbox and start only when a person asks for one, so
   this section has no 2.2.2 exposure to be honest about. */
@media (prefers-reduced-motion:reduce){
  .testimonials .wow{
    animation:none !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  .testimonials .photo-item,
  .testimonials .photo-img img,
  .testimonials .photo-img::after,
  .testimonials .photo-date,
  .testimonials .photo-icon,
  .testimonials .photo-icon i{ transition-duration:.01ms !important; }
  .testimonials .post-box:hover .photo-item,
  .testimonials .post-box:hover .photo-img img,
  .testimonials .post-box:hover .photo-icon{ transform:none !important; }
}

/* ---------- prefers-contrast ---------------------------------------------
   Dropping the grain and the light leaves the DECLARED plane, #2f4433, which
   is darker than the painted one and so raises every light-on-dark minimum at
   once: title #fff 10.524:1, standfirst #f4ead2 8.793:1, mount #fdfbf5
   10.170:1. The mount goes up to #fdfbf5 and the ink down to #1b2a1c, giving
   14.552:1 on the label. The hairlines then have to carry what the modelling
   was carrying, so the fillet collapses upward from a 1.861:1 brass wash to
   solid #7f6630 at 5.277:1 on the new paper, at 2px, and the quote mark to
   #6b551f at 6.893:1. The play mark's body deepens to #0f1a10 and its rim
   goes to 2px, widening the guaranteed edge rather than changing its
   mechanism. The skirting goes solid #cbb279 — brass on the dark side, where
   this reader is looking, because the boundary itself is already carried at
   10.268:1 by the two grounds and does not need the rule to make it. */
@media (prefers-contrast:more){
  section.section-gaping.testimonials{
    background-image:none;
    background-color:#2f4433;
    border-bottom-color:#cbb279;
  }
  .testimonials .section_title h2{ color:#fff; }                  /* 10.524:1 */
  .testimonials .section_title h2::after{ background:#cbb279; }
  .testimonials .section_title p{ color:#f4ead2; }                /*  8.793:1 */
  .testimonials .photo-item{ background:#fdfbf5; }                /* 10.170:1 */
  .testimonials .photo-img::after{ box-shadow:inset 0 0 0 2px #7f6630; }
  .testimonials .view_title{ color:#1b2a1c; }                     /* 14.552:1 */
  .testimonials .view_title::before{ color:#6b551f; }             /*  6.893:1 */
  .testimonials .photo-icon{
    background:#0f1a10;
    box-shadow:0 0 0 2px #fdfbf5;
  }
  .testimonials .photo-icon i{ color:#fdfbf5; }
  .testimonials .post-box:focus-visible{ outline-color:#fff; }
}

/* ---------- forced-colors ------------------------------------------------
   forced-colors overrides background-COLOR but leaves background-IMAGE alone,
   so the grain and the light have to be dropped by hand or both survive on
   top of the system Canvas; neither carries information the user's palette
   cannot restate. box-shadow is not honoured here at all, which matters more
   in this section than anywhere else on the page: the mount's edge, the
   picture's fillet and the play mark's guaranteed rim are ALL shadow-borne,
   so every one of them is restated as a real border. Photographs keep their
   own colours in forced-colors, so a Canvas-filled, CanvasText-bordered disc
   still reads as a control sitting on a picture. The scrim goes — it would be
   a coloured wash the reader did not ask for, and the disc's border has
   replaced the job it was doing.
   Declared AFTER prefers-contrast on purpose: Chromium matches both under
   Windows High Contrast and this block must be the one that lands. */
@media (forced-colors:active){
  section.section-gaping.testimonials{
    background-image:none;
    background-color:Canvas;
    border-bottom-color:CanvasText;
  }
  .testimonials .section_title h2{ color:CanvasText; }
  .testimonials .section_title h2::after{
    background:none; border-top:1px solid CanvasText; height:0;
  }
  .testimonials .section_title p{ color:CanvasText; }
  .testimonials .photo-item{
    background:Canvas;
    border:1px solid CanvasText;
    box-shadow:none;
  }
  .testimonials .photo-img{ background:Canvas; }
  .testimonials .photo-img::after{
    box-shadow:none;
    border:1px solid CanvasText;
  }
  .testimonials .photo-date{ background:none; }
  .testimonials .photo-icon{
    background:Canvas;
    border:1px solid CanvasText;
    box-shadow:none;
  }
  .testimonials .photo-icon i{ color:CanvasText; line-height:44px; }
  .testimonials .view_title{ color:CanvasText; }
  .testimonials .view_title::before{ color:CanvasText; }
  .testimonials .post-box:focus-visible{ outline-color:CanvasText; }
}

/* ---------- print --------------------------------------------------------
   FIRST, before anything else, or none of the rest matters: WOW.js's inline
   style="visibility:hidden" is media-independent and a print fired from the
   top of the page has had no scroll, so without the first rule this section
   prints completely blank — the title and all eight cards.

   A wall is not paper. The ground drops to white and the mount stops being a
   fill and becomes an outline, because a #f7f3e9 board on a white page is
   1.045:1 — the .live_better lesson, one room later. The fillet becomes the
   single rule under the picture that separates it from its label, which is
   all a printed frame needs.

   The play mark stays, as an outline. It cannot be operated on paper, but it
   is the only thing on the page that says these eight quotes came from films,
   and a reader holding a printout has more use for that fact than for the
   ink saved by deleting it. Its brass glyph would print as nothing, so it
   goes to #000 on white.

   Not promised: the thumbnails themselves. They are cross-origin and a
   browser that blocked or failed them on screen will print empty frames —
   which, with alt="", is exactly the empty-frame state described above. */
@media print{
  .testimonials .wow{
    visibility:visible !important;
    opacity:1 !important;
    animation:none !important;
  }
  section.section-gaping.testimonials{
    padding:24px 0 18pt;
    background-image:none !important;
    background-color:#fff !important;
    border-bottom:1px solid #7f6630;      /* 5.461:1 on white */
  }
  .testimonials .section_title{ break-after:avoid; page-break-after:avoid; }
  .testimonials .section_title h2{ color:#000; }
  .testimonials .section_title h2::after{
    background:none; border-top:1px solid #a89f8a; height:0;
  }
  .testimonials .section_title p{ color:#000; }
  .testimonials .row{ --bs-gutter-x:14pt; --bs-gutter-y:14pt; }
  .testimonials .photo-item{
    background:none;
    padding:0;
    border:1px solid #a89f8a;
    box-shadow:none;
    transform:none;
    break-inside:avoid; page-break-inside:avoid;
  }
  .testimonials .photo-img::after{
    box-shadow:none;
    border-bottom:1px solid #a89f8a;
  }
  .testimonials .photo-date{ background:none; }
  .testimonials .photo-icon{
    background:none;
    border:1pt solid #555;
    box-shadow:none;
    transform:none;
  }
  .testimonials .photo-icon i{ color:#000; }
  .testimonials .view_title{
    color:#000;
    padding:8pt 7pt 10pt;
    break-inside:avoid; page-break-inside:avoid;
  }
  .testimonials .view_title::before{ color:#555; }
}


/* >>> 2026-09-16: THIS SECTION WAS REMOVED FROM index.php. The "Well-furnished
   Rooms to Give You the Best Comfort" markup - heading, intro, sixteen fittings -
   is gone, and .testimonials now sits directly above .gallery. Every rule from
   here to the gallery header below (this block, its RESPONSIVE and PREFERENCES
   sub-blocks) now matches NOTHING. Left in place, reasoning intact, so the
   section can be restored from _bak/index.php.pre-rooms-2026.09.16 without
   rebuilding its styling. <<< */
/* ==========================================================================
   ROOM FEATURES — "Well-furnished Rooms to Give You the Best Comfort"
   index.php:1161-1212. THE INVENTORY.
   Appended to css/banner.css, which loads LAST (index.php:22, after
   style.css:15, responsive.css:19 and header.css:21).

   Was: the SAME three-tone ramp this file already deleted two sections up
   (#d9c69d / #f5edda / #fdf9e9, stepping 1.439 : 1.105 : 1.055 — one loud
   stripe and two accidents nobody can see), the SAME .tick machinery, the
   SAME check-square, and the SAME legacy hanging-indent bug: style.css:1567
   sets width/height:30px on an INLINE :before where both are silently
   ignored, then leans on margin-left:-25px against the ul's margin-left:25px
   to fake an indent. The mark is pulled INTO the indent, so the second and
   every later line of a wrapping item runs back underneath its own mark. At
   768 each column is 240px and eleven of the sixteen items wrap. The
   standfirst is 15px (13px at 320, responsive.css:131), the headline is 20px
   at EVERY width up to 991, the bg1 row rule #9b6f3f measures 2.640:1 on its
   own tint, and SIX rules aimed at this section — style.css:1594/1595/1596/
   1604 and responsive.css:33/34/35, :80/81, :90 — style .li_txt / .li_icon /
   li span elements that DO NOT EXIST. Verified: the items are plain
   <li>text</li> with zero inner markup. Nothing below revives them and
   nothing below inherits from them.

   Now: an inventory. Sixteen physical objects, counted 01-16 in ONE
   continuous run across the three columns, on a near-neutral floor, with NO
   line anywhere in the schedule. Two decisions carry the whole section and
   both are arguable, so both are argued.

   WHY THIS IS NOT .senior_living AGAIN, which is the thing to settle first.
   Two sections up is a printed sheet: a prose lead, twelve service inclusions
   ruled across two columns, a rule on EVERY row, a brass head-rule spanning
   the spread, one vertical divider, and a check-square on every item.
   Repeating any of that here would make the page say the same thing twice in
   the same voice inside three screens. Every one of those devices is
   deliberately absent, and the absences are not squeamishness — each one is
   the inverse of its counterpart because the content is the inverse:

     .senior_living                    .room_features
     ------------------------------    ------------------------------
     what the SERVICE includes         what the ROOM contains
     abstract, ongoing, promised       countable, present, touchable
     a covenant                        an inventory
     check-square \f14a x12            numerals 01-16, no glyph at all
     a rule on EVERY row               NO rules of any kind
     one vertical divider              NO vertical rules
     a spread-wide brass head-rule     nothing spans
     prose + schedule, two registers   one list, three runs, no registers
     warm sheet   L* 95.37  C* 5.23    neutral floor  L* 93.60  C* 3.11
     dense and banded                  open, and counted

   1  THE MARK. .senior_living considered numerals and rejected them in these
      words: "they are colder, and the risk in this direction is coldness, not
      disorder." That is right THERE. A list of assurances about someone's
      care, ordered 1..12, reads as a rota. It is exactly wrong here. These
      sixteen are objects — a bed, a wardrobe, a kettle, a grab-bar — and an
      inventory is the one kind of list that is always numbered, on every
      schedule of fittings and every handover sheet ever printed. The count is
      also this section's actual argument: sixteen ticks say "yes" sixteen
      times, where 01-16 says "sixteen fittings, and here they all are", which
      is the sentence an adult child comparing three homes is trying to read
      and which this page did not previously make. And because senior_living
      has already spent the tick, the mark is free to carry the distinction on
      its own. It is also the single most legible difference at arm's length:
      a page of ticks and a page of figures do not look alike from across the
      room.

   2  THE RULING, AND THE THREE COLUMNS. There is none. No row rules, no
      column rules, no frame. That is a consequence, not a style: the numeral
      already enumerates, and a rule as well is the same information stated
      twice — which is precisely the ledger .senior_living already is.
      Vertical rules were modelled and REJECTED on the content. Naming the
      three columns is the only thing that would let a grid be drawn honestly
      here, and the names would be new client copy about a real care home that
      nobody has approved. They would also be shaky: column two mixes bathroom
      plumbing with the TV and the Wi-Fi, column three mixes a bathroom with a
      pantry and a balcony. These are not three zones and they are not three
      registers — they are ONE list of sixteen broken into three runs for
      measure, and .senior_living's own comment says why that earns no
      divider: its second rule went because it "divided two runs of the SAME
      list rather than two registers". Same argument, three runs, so: zero
      rules. The continuous 01-16 count is what states the truth in the
      layout, and the column gutters carry the rest.

      Because nothing is ruled, grouping falls to the one typographic law that
      governs an unruled list: the space BETWEEN items must exceed the leading
      WITHIN them. The line box is 16.5 x 1.55 = 25.58px and the gap between
      the last line of one entry and the first of the next is 7 + 16 + 7 =
      30px, a ratio of 1.173 on that conservative measure and 2.17 measured
      baseline-to-baseline across the boundary against 1.00 within. A
      three-line entry reads as one block and cannot merge with its neighbour,
      and it is reinforced by the fact that every block — and only a block —
      opens with a figure hanging in the margin.

   WHAT THEY DO SHARE, on purpose, is the building: the same .container, the
   same 58px fading-brass hairline under the h2, the same
   clamp(23px,2.7vw,34px) headline, the same 168deg warm-white rake, the same
   feTurbulence grain tile, the same 56/60 - 44/46 - 34/36 padding ladder, the
   same house ink #3f4a41, the same rgba(203,178,121,.45) brass threshold at
   the foot, the same fadeInUp entrance fix and the same em-based hanging
   indent. Those are what make seven rooms one building. The list treatment is
   what makes them different rooms, and the test I designed to is that a
   reader can tell these two apart from six feet without reading a word.

   SCOPING. `.room_features` occurs exactly ONCE (index.php:1161) and needs no
   markup change to be a hook. EVERY selector below is anchored on it, checked
   one at a time INCLUDING the second half of every grouped selector. This is
   not defensive habit: `.bg1` appears 4x in this document, `.bg2` 4x, `.bg3`
   2x, and .senior_living — a FINISHED section — is built on all three on its
   own .row.g-0.tick at index.php:660-708. `.tick` is on seven rows,
   `.section_title` on four, `.section-gaping` on all of them. One unanchored
   rule here repaints a finished room. There is no exception in this block:
   not in the media blocks, not in the preference blocks, not in print. There
   is no bare .bg1 / .bg2 / .bg3 / .tick / .section_title / .section-gaping /
   li / ::before rule anywhere below.

   !important AUDIT — every flag in this block, named at its own site:
     1  .room_features .section_title h2 font-size. responsive.css:52 sets
        .section_title h2{font-size:20px!important} under 767 and style.css:451
        sets .h2,h2{font-size:20px!important} inside @media (max-width:575.98px)
        — I checked that block's extent rather than assuming it. Only a flag
        beats a flag, and among flagged declarations specificity decides:
        0-2-1 wins. Without it the headline is 20px at every width up to 991,
        which is where most of this page's Google Ads traffic arrives.
     2  the .wow resets in the prefers-reduced-motion and print blocks. WOW.js
        writes an INLINE style="visibility:hidden" on all FOUR .wow elements
        here — the title at index.php:1163 and the three columns at 1170, 1182
        and 1196 — and clears it only on scroll-into-view. An author
        !important declaration is the only thing that outranks a non-important
        inline one; without it a print fired from the top of the page, which
        has had no scroll, comes out completely blank.
   That is all. Everything else wins on specificity, or on source order where
   it ties, and is stated at its own rule.

   MEDIA-BLOCK ORDER. Broad band first, narrow band after, all of them BELOW
   the base rules they share 0-2-x with, then prefers-contrast, then
   forced-colors, then print. That order is not cosmetic: this file already
   ships a live ordering bug at banner.css:2251/2258, where .senior_living's
   @media (min-width:992px) and (max-width:1199px) padding values are dead code
   under the (max-width:1199px) block that follows them at equal specificity.
   Nothing below repeats it.

   FONT AWESOME. Not survived — never engaged. This block requests no
   codepoint: `content` is a counter, and the ::before's font-family is
   overridden away from "Font Awesome 5 Free", which is essential rather than
   tidy since style.css:1567 declares that family with NO fallback and it has
   no digits. Verified independently rather than taken from the comment two
   sections up: css/all.css banners "Font Awesome Free 6.1.1" while
   webfonts/fa-solid-900.svg declares font-family "Font Awesome 5 Free Solid"
   and carries 960 U+Fxxx codepoints and ZERO in U+Exxx. \f14a is present and
   safe; every U+Exxx the FA6 CSS references is tofu. Because the marks here
   are counters and not glyphs, they also still render if all.css or the
   webfonts fail — today, if that font fails, all sixteen marks vanish and the
   -25px indent leaves sixteen holes.

   No pseudo-element on the section and none on the row, so neither needs
   position:relative and nothing here becomes a containing block for anything
   else. No overflow:hidden and no overflow-x anywhere.
   ========================================================================== */

/* ---------- the floor ----------------------------------------------------
   Specificity 0-2-1. The element selector is load-bearing and not padding:
   `.section-gaping.room_features` alone is 0-2-0, which TIES style.css:471
   (.section-gaping:nth-child(odd){padding:15px 0}, also 0-2-0 — and I checked
   that it sits inside the @media (max-width:575.98px) block opening at
   style.css:411) and would win on source order only. `section` settles it
   outright, and also beats style.css:14 (.section-gaping{background:#fff;
   padding:30px 0}, 0-1-0). Padding to the house figures, 56/60 - 44/46 -
   34/36; it was 30px 0, and 15px 0 at 390.

   WHERE THIS ROOM SITS IN THE PAGE LIGHTNESS SYSTEM, recomputed from relative
   luminance rather than quoted (my figures agree with the ones published in
   this file to within 0.15 L*, and the file itself quotes .senior_living at
   both 95.22 and 95.55 in two different blocks):
     live_better    #eae2c8 -> #e9e1c7   L* 89.43   C* 13.61   h  96.5
     we_care        #dbe5dc -> #dae4db   L* 89.53   C*  5.84   h 147.1
     senior_living  #f7f3e9 -> #f5f1e8   L* 95.37   C*  5.23   h  94.0
     floor_plan     #e5e1d8 -> #e4e0d7   L* 89.16   C*  4.81   h  92.4
     testimonials   #2f4433 -> #314535   L* 27.37   C* 14.18   h 148.3
     THIS FLOOR     #f0eee8 -> #efede7   L* 93.60   C*  3.11   h  96.8
   Three rooms sit inside 0.4 of a lightness unit and one sheet sits at 95.4.
   .testimonials' own header warned that "a fifth at L* 89 would be the rut,
   not the system", and 95.4 is taken by the sheet this section must not be
   mistaken for. So this plane takes neither. But the value is the smaller
   half of the argument. In CIE LCh this ground is C* 3.11 — the LEAST
   saturated plane on the page by a clear margin, against floor_plan's 4.81,
   senior_living's 5.23, we_care's 5.84 and live_better's 13.61. Four rooms
   take their seat by hue and value; this one takes its seat by CHROMA. It is
   the only ground on the page that is a NEUTRAL rather than a tint, which is
   what "the room itself, plaster and paint" should be, and it is a new
   position rather than a spare one.

   THE SEAM ABOVE, which is the hard one and the biggest number here.
   .testimonials is the page's one dark plane: #2f4433 declared, painted
   #314535 by its own .05 grain, Y 0.052260. It closes with
   border-bottom:1px solid rgba(203,178,121,.55), which composites over that
   wall to #86815a, Y 0.214761. That rule was engineered to read from BOTH
   sides — its own comment says a boundary this hard needs a line legible from
   both — and today it reads 2.589:1 on the wall and 3.966:1 on the #fff this
   section currently paints. A SPREAD OF 1.377. That, not the raw step, is why
   the join reads as a cut rather than a threshold: it is the same line at two
   visibly different weights.

   THE RESOLUTION, IN FOUR MOVES.

   1  GIVE THE WALL A FLOOR. .room_features carries no background rule at all
      today, so it is #fff by default — and so is .gallery below it. The last
      third of the page is a dark wall standing over an undifferentiated white
      run of two sections with no edge between them. The wall is not standing
      on a floor, it is standing over a gap. The ground change alone takes the
      raw step from 10.268:1 to 8.736:1.

   2  CLOSE THE SPREAD, WHICH IS THE ACTUAL TARGET. Layer 2 below is a
      wall-foot shadow in the wall's own PAINTED colour, #314535 — painted
      pixels, not pre-grain intentions, the same discipline senior_living's
      0-stop note insists on. .06 at the join, spent by 130px. Against the
      first painted row the skirting then reads 3.073:1 at the settled right
      and 3.178:1 at the lit left, against 2.589:1 above. The spread falls
      from 1.377 to 0.484 — a 65% reduction — and the raw step at the joint
      falls from 10.268:1 to 7.957:1, a 22.5% reduction. Both bought without
      darkening the room and without touching one byte of the finished block
      above.

   3  .06 IS A CEILING, NOT A TASTE VALUE, and this is where I part company
      with the proposal that argued for matching the two sides exactly. To
      reach 2.589:1 from below the band would have to sit near alpha .14 — and
      that takes a line which SHIPS at 3.966:1 down to about 2.58:1, breaking
      the 3:1 structural bar on a finished section's own closing rule because
      of a change made underneath it. .06 is the largest alpha that keeps the
      below side over 3:1 at the plane's darkest point. Matching a rule's two
      weights is the right objective; lowering a shipped ratio to get there is
      not.

   4  NO BORDER-TOP AND NO DISSOLVE, both stated as decisions. The wall
      already closes with a real brass skirting; a second hairline 1px beneath
      it is two lines doing one line's work, the same reasoning .testimonials
      itself used against a border-top. And a dissolve is wrong in both
      directions: senior_living dissolves into we_care because two light
      planes of near-equal value genuinely CAN be one surface, but a carry
      from #314535 would lay a dark band across the head of a light room,
      which is not a dissolve, it is a stain. You do not blend a wall into a
      floor. You trim the join, and the trim is already drawn.

   AT THE FOOT there is a real edge and it is drawn. .gallery carries no
   background rule of its own and paints flat #fff, and 1.175:1 is not an edge
   anyone can see. So the page's own brass threshold closes this room, the
   declaration byte-identical to the one .live_better and .senior_living both
   use. See its note at the border-bottom below.

   Read the stack bottom-up, since CSS lists the topmost layer first:
     3  the light   the same 168deg lean and the same warm white as all five
                    rooms above, because it is the same source. Peak .30, not
                    senior_living's .62: this room has a shadow band at its
                    head, and a .62 lift under a .06 shadow would erase the
                    band's own 1.096:1 depth on the lit side and reopen the
                    seam mismatch across the width. .30 lifts the head from
                    L* 93.60 to 95.02, which is what raises the skirting from
                    3.073 to 3.178:1, and it is the physically true picture: a
                    lit floor under a dark wall is a room, a dark gradient
                    under a dark wall is a smudge.
     2  the shadow  VERTICAL and full-width so the join is even at every
                    viewport — a raking layer closes a seam on the left and
                    reopens it cold on the right at 1920, the bug documented
                    at .we_care's head. Listed ABOVE the light so it
                    composites LAST and its .06 stop is unconditional. Spent
                    by 130px, which is entirely inside the title zone (56px of
                    padding plus a two-line 34px headline already reaches
                    ~160px), so it never touches the schedule and never
                    touches the numerals — the one element here with no
                    contrast headroom to give away. If .testimonials' foot is
                    ever re-tuned, this 0-stop is the single number to change.
     1  grain       the plinth's own feTurbulence tile at .026 — the
                    LIGHT-room opacity, byte-identical to live_better's,
                    we_care's and senior_living's apart from the filter id
                    ('rfg', checked against the five already in this file:
                    fpg, lbg, n, slg, tsg, wcg — so no two filters in the
                    document can collide). fractalNoise averages 0.5 in all
                    four channels INCLUDING alpha, so at .026 this lays 1.3%
                    coverage of mid-grey: #f0eee8 PAINTS as #efede7, one unit
                    down per channel, exactly as #f7f3e9 paints as #f5f1e8
                    next door. 298 bytes. Texture, not dither.
                    background-size is deliberately not declared, so the tile
                    keeps its intrinsic 120x120 and the gradients keep
                    100% 100%.

   Every ratio in this block is computed in true CSS compositing order and at
   the plane's SETTLED point — below the light's throw, the worst case for
   dark type — never at the declared colour and never at the lightest point.

   No calc() and no math function in any gradient stop: one unparseable layer
   invalidates the WHOLE background-image declaration, the bug that bit the
   first pass at .live_better. background-color is the honest fallback, on
   which the items still measure 7.983:1, the headline 9.759:1 and the
   numerals 4.707:1 — every bar still cleared with all three layers gone. */
section.section-gaping.room_features{
  padding:56px 0 60px;

  /* the settled plane, and the honest fallback */
  background-color:#f0eee8;          /* L* 94.10 declared / 93.60 painted,
                                        C* 3.11, h 96.8deg */

  background-image:
    /* 1 - grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='rfg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23rfg)' opacity='.026'/%3E%3C/svg%3E"),

    /* 2 - the wall-foot shadow, in the wall's own PAINTED green. Integers
       throughout; nothing here can invalidate the declaration. */
    linear-gradient(to bottom,
      rgba(49,69,53,.06)    0,
      rgba(49,69,53,.026) 50px,
      rgba(49,69,53,0)   130px),

    /* 3 - the light. t = 0.2079x + 0.9781y, so at 1920 the top-right corner
       sits at t = 399px, past this layer's throw — which is exactly why the
       shadow above is a SEPARATE vertical layer and not folded into it. */
    linear-gradient(168deg,
      rgba(255,252,240,.30)   0,
      rgba(255,252,240,.14) 150px,
      rgba(255,252,240,0)   380px);

  background-repeat:repeat, no-repeat, no-repeat;

  /* NO border-top — see move 4 in the seam note above.
     AT THE FOOT, the page's own brass threshold, the same declaration
     .live_better and .senior_living close with. It composites over this floor
     to #dfd2b6 and reads from both sides: 1.270:1 against the floor and
     1.493:1 against the white of .gallery below. (senior_living's reads
     1.291:1 / 1.230:1 against its own neighbours — the same line at the same
     weight, three rooms running.) Slightly stronger on the white side, which
     is right: that is the flatter of the two joins and needs the more of the
     two. A threshold, not a structural line; the 3:1 bar is not claimed for
     it, exactly as those two rooms do not claim it. The result is that the
     page's last three planes are finally three planes — dark wall, warm
     neutral floor, white gallery, with a trimmed join at each boundary. Today
     they are two. */
  border-bottom:1px solid rgba(203,178,121,.45);
}

/* ---------- the title ----------------------------------------------------
   .section_title h2:after (style.css:41) is position:absolute at bottom:-5px
   and has caused overlap bugs on this page more than once. Neutralised
   EXPLICITLY — static, block, bottom/left/right unset, redrawn as flow
   content — rather than inherited, and re-cut as the same 58px fading-brass
   hairline the plinth, the form, live_better, we_care, senior_living,
   floor-plan and testimonials all close with. Repeating the building's
   ornament is what makes seven rooms read as one building, and it matters
   most in the section that changes its idiom hardest below the title: this
   room arrives through the same door as every other. It is also the only
   place #cbb279 itself appears in this block.

   The clamp is byte-identical to those rooms; a larger figure here would
   out-shout them and break the descent through the page. The font-size flag
   is FLAG 1 and the only flag outside the preference blocks. Everything else
   is 0-2-1 against style.css:31's 0-1-1, responsive.css:21's 0-1-1 and
   responsive.css:162's 0-1-1, so nothing else needs help. The pseudo-element
   is 0-2-2 against style.css:41's 0-1-2.

   17em is matched to .senior_living: the headline is 48 characters and would
   set as one ~816px line at 34px, and 17em breaks it over two, which is the
   right shape for a centred deck and holds that shape all the way down the
   clamp. */
.room_features .section_title{ margin-bottom:40px; }
.room_features .section_title h2{
  font-family:Helvetica, sans-serif;
  font-size:clamp(23px, 2.7vw, 34px) !important;   /* FLAG 1 */
  font-weight:700;
  line-height:1.25;
  letter-spacing:.004em;
  color:var(--jd-green-deep);        /* #2b3f2f — 8.774:1 at its worst, which
                                        is its own top edge inside the shadow
                                        band; 9.633:1 on the settled floor */
  max-width:17em;
  margin:0 auto;
}
.room_features .section_title h2::after{
  position:static; display:block;    /* kills the absolute 4px #cbb279 bar */
  bottom:auto; left:auto; right:auto;
  content:"";
  width:58px; height:1px;
  margin:18px auto 0;
  background:linear-gradient(90deg,transparent,rgba(203,178,121,.95),transparent);
}
/* style.css:23 sets p{font-size:15px} and style.css:58 sets
   .section_title p{font-weight:500} — a line of introduction in semibold
   below the 16px floor this page holds for a 55+ reader, which reads as a
   second heading. 0-2-1 beats both, and beats responsive.css:131's `p` at
   0-0-1, which is what stops this dropping to 13px at 320.
   The 36em cap is measure, not decoration: the standfirst is 102 characters
   and .col-md-10.offset-md-1 is ~1030px at 1280, so it would otherwise set as
   one ~105-character line. 36em at 17px is 612px, about 74 characters, so it
   breaks over two — the top of the comfortable band. Where senior_living
   leaves this uncapped its own standfirst is 38 characters and does not need
   it. */
.room_features .section_title p{
  max-width:36em;
  margin:14px auto 0;
  font-size:17px;
  font-weight:400;
  line-height:1.6;
  color:#3f4a41;                     /* 7.881:1 where it actually sits, past
                                        the shadow band; 7.190:1 quoted as an
                                        absolute floor if the band ever
                                        reached it */
}

/* ---------- the count ----------------------------------------------------
   ONE counter, reset on the ROW and incremented on every li. The row is the
   only element containing all three <ul>, which is exactly why the count runs
   continuously 01-16 across the three columns instead of restarting at each
   one. Custom counters take no implicit reset from ul or li, so the run is
   unbroken across the three sibling lists in document order: 01-05 in bg1,
   06-11 in bg2, 12-16 in bg3 at every width, and 01-16 straight down the page
   once they stack. A continuous count is the whole claim of the section —
   sixteen things, counted once, in one room — and it is also what makes the
   absence of vertical rules legible rather than merely empty: the numbering
   says out loud that the three columns are one list. If an item is ever added
   or moved the numbering re-derives itself and cannot go stale. 0-3-0. */
/* the rf-item counter is gone: it existed to number the sixteen fittings
   01-16 and they now carry a glyph each, so nothing references it. Removed
   rather than left behind as dead state. */

/* ---------- the three runs -----------------------------------------------
   The three tints go — defect 1, and the same broken ramp .senior_living
   already deleted, which leaving here would also leave this section visibly
   INCONSISTENT with the finished section that shares its markup hooks.

   The row is .g-0, so Bootstrap's .row > *{padding:0} leaves the blocks
   butted edge to edge, and the only things that ever held them apart were the
   20px on .bg1/.bg2/.bg3 and the tints that made the join visible. Both go,
   replaced by a symmetrical 20px inset on every interior edge — so the gutter
   between any two runs is 40px and the outer two columns run flush to the
   container, as the outer columns of a printed schedule do.

   NO border-left on .bg2 or .bg3, and that is the section's second decision,
   argued at the head. Measures at the 1280 container (responsive.css:10 sets
   .container{max-width:1280px} as the BORDER box and Bootstrap adds 12px per
   side, so the row is 1256px and each column is 418.67px — not 426.67):
     column 1   418.67 - 20 = 398.67px, less the 39.6px numeral well = 359px
     column 2   418.67 - 40 = 378.67px, less the well                = 339px
     column 3   418.67 - 20 = 398.67px, less the well                = 359px
   ~40-42 characters at 16.5px, which is a printed schedule's measure.

   bg1 has five items, bg2 six and bg3 five, so the two short runs end above
   the tall one. That is what a schedule does — .senior_living's own note puts
   it exactly right, that the ragged ends "are simply where the text stops,
   which is honest, where two mismatched closing rules would not be" — and
   with no fills and no rules there are no blocks left to be ragged, which
   retires the measured 298/299/282 feet at 390 for good.

   Specificity 0-2-0, which beats style.css:1711/1716/1720 (0-1-0),
   responsive.css:115 (.bg1,.bg2,.bg3{padding:0px 12px}, 0-1-0) and
   Bootstrap's .row > * (0-1-0). No flags. */
.room_features .bg1,
.room_features .bg2,
.room_features .bg3{
  background-color:transparent;      /* the three tints, gone */
  background-image:none;
}
.room_features .bg1{ padding:0 20px 0 0; }
.room_features .bg2{ padding:0 20px; }
.room_features .bg3{ padding:0 0 0 20px; }

/* ---------- the sixteen items --------------------------------------------
   THE HANGING-INDENT BUG, fixed at the source and not patched around. The li
   becomes the containing block, the mark becomes absolute at left:0 with
   margin:0, and the well is real padding the text can never re-enter — the
   same construction .we_care, .senior_living and #floor-plan all carry. This
   is the one change in the section a reader will FEEL rather than see, and
   for a 55+ audience it outweighs everything above it.

   THE WELL IS IN em, NOT px, because the thing inside it is. Two Helvetica
   bold digits at .85em are 2 x .556 = 1.112em of that size, which is .945em
   of the li's own font-size, plus .06em of tracking — about 1.0em. A 2.4em
   well leaves ~1.4em of clearance, and under Firefox's text-only zoom (which
   scales font-size but not px padding) both terms scale together where a
   39.6px well would be overrun at high zoom. 2.4em resolves to 39.6px at
   100%.

   THE 7px OF VERTICAL PADDING is one token, --rf-row-y, because it does two
   jobs that must never drift apart in a media block: it is the mark's top
   offset, and it is the height the reading wash extends above and below the
   text. The gap between entries is therefore 7 + 16 + 7 = 30px against a
   25.58px line box — see the grouping law at the head of this block.

   NO BORDERS OF ANY KIND. `border:0` kills style.css:1592's #9b6f3f (2.640:1
   on the old #d9c69d, under the 3:1 structural bar — defect 5) and
   style.css:1593's #bda891 at one stroke, and nothing replaces them.

   Specificity: `.room_features .tick ul` is 0-2-1 over style.css:1564's 0-1-1
   and style.css:1724's (.bg2 ul,.bg3 ul) 0-1-1; `.room_features .tick ul li`
   is 0-2-2 over style.css:1565's 0-1-2, style.css:1593's 0-1-1,
   style.css:1592's 0-2-1 (same class count, one fewer type selector, so this
   wins without a flag) and — this one matters — responsive.css:165's
   `.tick ul li{font-size:15px}` at 0-1-2, which lives in the 820-1180
   LANDSCAPE block and DOES match here, so today every item on an iPad held
   sideways is 15px, below this page's floor. The ::before is 0-2-3 over
   style.css:1567's and style.css:1613's 0-1-3. No flags anywhere.
   (responsive.css:59's `ul.tick li{font-size:14px}` cannot reach these at
   all — .tick is on the ROW here, not on the <ul>. Checked, not assumed.) */
.room_features .tick ul{
  margin:0;                          /* undoes style.css:1564's
                                        20px 0 20px 25px */
  padding:0;
}
.room_features .tick ul li{
  --rf-row-y:7px;
  position:relative;                 /* defect 2 */
  margin:0 0 16px;                   /* undoes style.css:1565's 10px and
                                        style.css:1592/1593's 20px */
  padding:var(--rf-row-y) 0 var(--rf-row-y) 2.1em;  /* was 2.4em for a
                                        two-digit numeral. One glyph is
                                        narrower: FA solid advances run
                                        .875-1.25em of the MARK size, i.e. at
                                        most 1.19em of the li size, so 2.1em
                                        still leaves ~0.9em of clearance and
                                        buys measure back in the 312px
                                        columns at 992. */
  border:0;                          /* the 2.640:1 rule, gone */
  font-size:16.5px;
  line-height:1.55;
  color:#3f4a41;                     /* 7.881:1 settled, 8.175:1 lit — the
                                        building's own ink, unchanged */
  overflow-wrap:break-word;          /* "Wall-mounted" and "Anti-skid" are the
                                        long tokens; nothing clips at 320 */
}
.room_features .tick ul li:last-child{ margin-bottom:0; }

/* --- the sixteen glyphs ---------------------------------------------------
   One per fitting, keyed off :nth-child so the markup stays plain <li>text</li>
   and the six dead .li_icon / .li_txt / li span rules stay dead.

   EVERY codepoint below was verified present in webfonts/fa-solid-900.ttf by
   parsing the cmap table. The bundled webfonts are Font Awesome 5.11.2 while
   css/all.css is 6.1.1, so any U+Exxx glyph renders as tofu. The probe
   rejected fa-faucet (U+E005), fa-sink (U+E06D), fa-soap (U+E06E),
   fa-pump-soap (U+E06B) and fa-hands-wash (U+E05E) for exactly that reason -
   every one an obvious first pick for a bathroom list - and fa-desktop too,
   which all.css maps to the FA6 codepoint U+F390 that the FA5 file does not
   carry. Everything used here is U+Fxxx and present.

   NOTE for anyone re-checking: advance width is NOT a presence test in this
   font. .notdef advances a full 1em, and so do several real glyphs here
   (clone, fan, shower, mug-hot, archive). Rasterise and count ink instead.

   0-3-3 against the base rule's 0-2-3, so these win on specificity without a
   flag and without depending on source order. They set `content` only; the
   family, size, colour and centring all come from the base rule above. */
.room_features .bg1 ul li:nth-child(1)::before{ content:"\f236" / ""; }
  /* fa-bed : Bed with Bedding, Bed Sheet, Pillow, Blanket & Linen */
.room_features .bg1 ul li:nth-child(2)::before{ content:"\f24d" / ""; }
  /* fa-clone : Mirror (Wall-mounted). FA5 has no mirror glyph; two offset panels is the conventional reflection mark */
.room_features .bg1 ul li:nth-child(3)::before{ content:"\f4b8" / ""; }
  /* fa-couch : One Sofa with Table */
.room_features .bg1 ul li:nth-child(4)::before{ content:"\f553" / ""; }
  /* fa-tshirt : Wardrobe. Clothes storage reads at 15px where a cabinet door would just read as "door" */
.room_features .bg1 ul li:nth-child(5)::before{ content:"\f02d" / ""; }
  /* fa-book : Writing Table with Book Shelf */
.room_features .bg2 ul li:nth-child(1)::before{ content:"\f7d8" / ""; }
  /* fa-toilet : Hot Geyser, Wash Basin, Western Style Commode - the sanitaryware item */
.room_features .bg2 ul li:nth-child(2)::before{ content:"\f26c" / ""; }
  /* fa-tv : Wall-mounted TV */
.room_features .bg2 ul li:nth-child(3)::before{ content:"\f2dc" / ""; }
  /* fa-snowflake : Air Conditioning in Every Bedroom */
.room_features .bg2 ul li:nth-child(4)::before{ content:"\f1eb" / ""; }
  /* fa-wifi : Wi-Fi Facility */
.room_features .bg2 ul li:nth-child(5)::before{ content:"\f2a0" / ""; }
  /* fa-phone-volume : Intercom Facility. Handset with waves rather than a plain phone, because an intercom is two-way */
.room_features .bg2 ul li:nth-child(6)::before{ content:"\f863" / ""; }
  /* fa-fan : Ceiling Fan, Calling Bell, Plug Points - the fan leads the item */
.room_features .bg3 ul li:nth-child(1)::before{ content:"\f2cc" / ""; }
  /* fa-shower : Furnished Bathrooms with Shower Cubicle, Grab-bars, Anti-skid. The item names the cubicle, which is why this is the shower and bg2:1 is the commode */
.room_features .bg3 ul li:nth-child(2)::before{ content:"\f0f3" / ""; }
  /* fa-bell : Emergency Call Switch */
.room_features .bg3 ul li:nth-child(3)::before{ content:"\f7b6" / ""; }
  /* fa-mug-hot : Dry Pantry with Electric Kettle in Every Unit */
.room_features .bg3 ul li:nth-child(4)::before{ content:"\f6c0" / ""; }
  /* fa-chair : Attached Balcony with Chairs & Table */
.room_features .bg3 ul li:nth-child(5)::before{ content:"\f187" / ""; }
  /* fa-archive : Overhead Cabinets */


/* --- the numerals ---------------------------------------------------------
   THIS IS THE DECISION THE SECTION TURNS ON, and the argument is at the head
   of this block. Three mechanical notes:

   decimal-leading-zero is not styling. Every numeral is then exactly two
   digits, so sixteen left-aligned marks in a fixed well align without a
   right-alignment trick and the well can be one width at every breakpoint.
   font-variant-numeric held that under any Helvetica
   substitution, whose digits would otherwise be proportional.

   content IS DECLARED TWICE ON PURPOSE, and a tidying pass must not delete
   the first. The `/ ""` alt-text form keeps the ordinal out of the
   accessibility tree — a <ul> already announces "list, 5 items" and a spoken
   "zero one" before every entry is noise. But where that syntax is
   unsupported the declaration is dropped WHOLE, and unlike the tick next door
   nothing in style.css backstops a numeral: a dropped `content` here would
   let style.css:1567's content:"\f14a" through while this rule's font-family
   overrode "Font Awesome 5 Free", rendering tofu rather than a checkmark. The
   plain declaration first makes that impossible — content is never unset.
   Because the numeral is silent to AT, the markup delta adds role="list" to
   the three <ul>: style.css:13's global li{list-style:none} makes
   Safari/VoiceOver strip the list role, and once the figures are silent the
   list semantics are the ONLY thing left conveying enumeration.

   font-family MUST be stated. style.css:1567 sets "Font Awesome 5 Free" with
   NO fallback family, and that face has no digits — inherited, ASCII numerals
   would miss its U+F000-U+F8D9 coverage entirely and drop to the browser's
   default rather than to this page's Helvetica. Its font-weight:900 goes the
   same way: Helvetica has no 900 face and would synthesise a smear at 14px.

   .85em x 1.824 = 1.55em, which is the li's own line box whatever the font
   size, because both terms are em-derived. That is what puts the numeral on
   the first line's optical centre and keeps it there under zoom and in every
   responsive block below, with no px offset to maintain. top:var(--rf-row-y),
   not 0, because an absolutely positioned child's containing block is the
   PADDING box — top:0 would sit the figure above the first line by exactly
   the row padding. */
.room_features .tick ul li::before{
  /* Sixteen glyphs, one per fitting, set per item in the block below.

     THE ALT-TEXT FORM IS RIGHT HERE AND WAS WRONG FOR THE NUMERALS, and the
     difference is worth stating because it looks like the same decision. A
     numeral carried information nothing else in the DOM stated - this is item
     7 of 16 - so silencing it lost content, which is why the numeral shipped
     speaking "1." through "16.". An icon carries nothing the item text does
     not already say in words: "Wall-mounted TV" IS the television. It is
     decorative by definition, and U+Fxxx is a PRIVATE-USE codepoint that
     assistive tech would otherwise announce as garbage sixteen times. So the
     glyph is silenced and the enumeration now rests entirely on role="list"
     on the three <ul> - which is still needed and still load-bearing, because
     style.css:13's global li{list-style:none} makes Safari/VoiceOver strip
     the list role.

     This rule sets no `content` of its own: with sixteen different glyphs
     there is nothing sensible to default to, and every li is covered by the
     per-item block below. */
  position:absolute;
  left:0; top:var(--rf-row-y);
  width:auto; height:auto;           /* the legacy 30x30 box is inert on an
                                        inline pseudo-element and misleading
                                        on an absolute one - dropped, not
                                        inherited */
  margin:0;                          /* undoes -25px left / 6px right */
  /* the family and weight the glyphs need. This is the same pair
     style.css:1567 sets, so the override is no longer undoing it - but it
     stays declared explicitly rather than inherited, because that legacy rule
     also sets content, font-size, width, height, margin and a transition, all
     of which this rule has to beat anyway. */
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  font-size:.95em;                   /* 15.68px at 16.5px, 15.2px at 16px. A
                                        solid glyph reads heavier than a digit
                                        at the same size, so this sits under
                                        1em on purpose. */
  line-height:1.632;                 /* .95 x 1.632 = 1.5504em against the li's
                                        own 1.55 line box, so the glyph lands
                                        on the first line's optical centre at
                                        EVERY font size and in every media
                                        block, with no px offset to maintain.
                                        Was .85 x 1.824 for the two-digit
                                        numerals - same construction,
                                        re-derived for the new size. */
  color:var(--jd-gold-dp);           /* #7f6630. Needed EXPLICITLY: style.css
                                        :1613 sets .bg1/.bg2/.bg3 ul li:before
                                        to #9b6f3f at 0-1-3, and while this
                                        rule's 0-2-3 beats it, the per-item
                                        rules below are 0-3-3 and set only
                                        `content` - so the colour has to come
                                        from here or the legacy 3.800:1 brown
                                        wins by default. Measured 4.646:1
                                        settled / 4.820:1 lit. The glyphs are
                                        decorative so the bar is 3:1, but they
                                        are held at text contrast anyway. */
  transition:none;                   /* style.css:1567 animates `all` for a
                                        mark that never changes */
}

/* ---------- the reading wash ---------------------------------------------
   There is nothing interactive in this section — no link, no button, no form
   control between index.php:1161 and 1212, checked line by line — so there is
   no focus state to design and none is invented. What there IS is a scanning
   problem that removing the rules created and that has to be paid for: a
   40-character column, sixteen entries, and a reader looking for one of them.

   So the row lifts under the pointer. It is deliberately NOT an affordance:
   no cursor change, no colour change on the text, no underline, no lift, no
   shadow — a <li> is not a button and a 55+ reader must not be invited to
   click one. The wash is the SAME warm white as the building's light at .6,
   which means it LIGHTENS: the item goes 7.881 -> 8.673:1 and the numeral
   4.646 -> 5.113:1. That direction is the constraint, not a bonus — a brass
   tint at even .09 would push the numeral toward 4.4:1 and break 4.5 on
   hover, which is how a decorative flourish silently fails an audit. Because
   the li fills its column's content box, plain background-color is enough and
   no box-shadow spread is needed; a spread would bleed into the gutter.

   Behind @media (hover:hover) and (pointer:fine), and the transition is
   declared INSIDE the gate, so a touch device never carries it at all and can
   never stick the wash to the last-tapped row. */
@media (hover:hover) and (pointer:fine){
  .room_features .tick ul li{
    transition:background-color .18s ease;
  }
  .room_features .tick ul li:hover{
    background-color:rgba(255,252,240,.6);
  }
}

/* ==========================================================================
   RESPONSIVE — 320 to 1920, no horizontal overflow at any width
   Broad band first, narrow band after, all below the base rules they tie
   with. See the ordering note at the head.
     1200-1919  three runs, 40px gutters, the design as drawn
     992-1199   the same at 32px gutters — Bootstrap's container is 960px
                here, so the columns are 312px
     768-991    THE STACK. Bootstrap's container is 720px and .col-md-4 gives
                232-240px columns; less the gutter and a 39.6px well that is
                about 20 characters of measure, and the 104-character entry
                sets as SIX ragged lines. So the three runs go full width and
                each sets two-up in CSS multicol: ~326px per sub-column, about
                39 characters — the SAME measure as desktop — and the longest
                entry lands in three lines instead of six.
     <=767      one column. Bootstrap's col-* no longer apply and .row > *
                already gives width:100%, so only the multicol and the type
                sizes change, and the three runs close up into ONE unbroken
                sixteen-item schedule at a constant 30px pitch — which is the
                correct reading of this content on a phone, since it is one
                inventory and always was.
     <=575      house padding 34/36, standfirst to the 16px floor.
   ========================================================================== */

@media (max-width:1199.98px){
  .room_features .bg1{ padding-right:16px; }
  .room_features .bg2{ padding:0 16px; }
  .room_features .bg3{ padding-left:16px; }
}

@media (max-width:991.98px){
  .room_features .section_title{ margin-bottom:34px; }
  /* width:100% is 0-2-0 against .col-md-4's 0-1-0, so no flag. Bootstrap sets
     flex:0 0 auto with an explicit width, so width alone is enough. */
  .room_features .bg1,
  .room_features .bg2,
  .room_features .bg3{
    width:100%;
    max-width:100%;
    padding:0;
  }
  .room_features .tick ul{
    columns:2;
    column-gap:44px;
  }
  /* break-inside:avoid stops multicol splitting an entry across the gap,
     which would orphan its figure from its text — on a numbered inventory
     that is the one failure that makes the document wrong rather than merely
     ugly. */
  .room_features .tick ul li{
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
  }
  /* the base rule zeroes the last item's margin so the three desktop columns
     end clean. Stacked, that would close the gap between the last item of one
     run and the first of the next and break the constant 30px pitch that is
     the only thing grouping an unruled list — so it is restored, and zeroed
     again only on the very last item on the page. .bg3 ul li:last-child is
     0-3-3 over the 0-2-3 above it. */
  .room_features .tick ul li:last-child{ margin-bottom:16px; }
  .room_features .bg3 ul li:last-child{ margin-bottom:0; }
}

@media (max-width:767.98px){
  section.section-gaping.room_features{ padding:44px 0 46px; }
  .room_features .section_title{ margin-bottom:28px; }
  .room_features .section_title p{ font-size:16.5px; }
  .room_features .tick ul{ columns:1; }
  .room_features .tick ul li{
    font-size:16px;                  /* the floor, not below it. NOTE this is
                                        NOT what beats responsive.css:165: that
                                        band is min-device-width:820px, so its
                                        viewport is >=820 and this block never
                                        applies there. The BASE rule
                                        .room_features .tick ul li (0-2-2)
                                        beats .tick ul li (0-1-2) in the
                                        820-1180 landscape band - do not weaken
                                        it assuming this one is the backstop. */
    margin-bottom:15px;              /* 7 + 15 + 7 = 29px against a 24.8px
                                        line box — the same 1.17 ratio */
  }
  /* the 991.98 block's :last-child restore is 0-3-2 and outranks the 0-2-2
     rule above, so it has to be RESTATED at this pitch rather than inherited.
     Without this the run is 29px everywhere except the two boundaries between
     bg1/bg2 and bg2/bg3, which sit at 30px - and in an unruled list the pitch
     is the only thing carrying the grouping. */
  .room_features .tick ul li:last-child{ margin-bottom:15px; }
  .room_features .bg3 ul li:last-child{ margin-bottom:0; }
}

@media (max-width:575.98px){
  section.section-gaping.room_features{ padding:34px 0 36px; }
  .room_features .section_title{ margin-bottom:24px; }
  .room_features .section_title p{ font-size:16px; }
  /* at 320 the container leaves 296px, less a 38.4px well and nothing else,
     which is ~257px or about 31 characters at 16px; the 104-character entry
     sets in four lines. Nothing overflows: the widest fixed-width object in
     the section is the 58px title ornament. */
  .room_features .tick ul li{ padding-left:2.3em; }
}

/* ==========================================================================
   PREFERENCES
   ========================================================================== */

/* ---------- prefers-reduced-motion ---------------------------------------
   FOUR .wow elements — the title at index.php:1163 and the three columns at
   1170, 1182 and 1196 — each carrying an inline style="visibility:hidden"
   plus an inline animation-name that WOW.js clears only on scroll-into-view.
   Only an author !important rule outranks a non-important inline declaration,
   and visibility has to be forced alongside animation or an element WOW.js
   has not yet reached stays hidden forever. FLAG 2.

   The entrance DIRECTIONS are harmonised in the MARKUP, not here, and that is
   deliberate: js/wow.min.js writes `animation-name:none` INLINE at init, so a
   flagged CSS override would beat it, fire all four entrances at first paint
   while the elements are still hidden, and leave the columns simply popping
   in. Swapping the animate.css class leaves WOW's mechanism intact. It
   matters more here than anywhere else on the page, because what three opaque
   slideIn columns would travel across is the dark #2f4433 wall. */
@media (prefers-reduced-motion:reduce){
  .room_features .wow{
    animation:none !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  .room_features .tick ul li{ transition-duration:.01ms !important; }
}

/* ---------- prefers-contrast ---------------------------------------------
   Dropping the three layers leaves the plane already declared above, which is
   LIGHTER than the painted one — so every dark-on-light minimum rises at once
   and these are quoted as the honest worst case: headline 9.759 -> 12.698:1
   at #1f2b21, items 7.983 -> 10.224:1 at #2f3a31, numerals 4.707 -> 6.147:1
   at #6b551f. The ink deepens rather than the ground changing, because the
   ground IS the section here and a contrast-sensitive reader wants nothing
   modulating the field behind the type.
   The section's FOOT threshold goes solid with them, and that is not an
   afterthought: it is the boundary between this room and .gallery, which for
   a high-contrast reader is the one edge in this section that carries
   meaning. Left at rgba(203,178,121,.45) it composites to 1.270:1; solid
   #7f6630 reads 4.707:1 against this floor and 5.461:1 against the white
   below. The hover wash is dropped outright — a reader who has asked for
   contrast has not asked for a tint over their text.
   The seam above is untouched and needs no help: with the shadow band gone
   the two grounds meet at 8.736:1 on their own.
   Declared AFTER the responsive blocks on purpose — several of these
   selectors tie those rules on specificity and only source order separates
   them. */
@media (prefers-contrast:more){
  section.section-gaping.room_features{
    background-image:none;
    background-color:#f0eee8;
    border-bottom-color:#7f6630;                    /* 4.707:1 / 5.461:1 */
  }
  .room_features .section_title h2{ color:#1f2b21; }
  .room_features .section_title h2::after{ background:#7f6630; }
  .room_features .section_title p{ color:#2f3a31; }        /* 10.224:1 */
  .room_features .tick ul li{ color:#2f3a31; }             /* 10.224:1 */
  .room_features .tick ul li::before{ color:#6b551f; }     /*  6.147:1 */
  .room_features .tick ul li:hover{ background-color:transparent; }
}

/* ---------- forced-colors ------------------------------------------------
   forced-colors overrides background-COLOR but leaves background-IMAGE alone,
   so the grain, the shadow and the light have to be dropped by hand or all
   three survive on top of the system Canvas; none of them carries information
   the user's palette cannot restate. forced-color-adjust is deliberately NOT
   set to none anywhere — the point is to hand the user's palette control, not
   to take it. The numerals are TEXT, so `color` is forced to CanvasText for
   free and nothing here has to name them; that is a quiet argument for the
   figure over a painted box, which would have had to be restated by hand or
   vanish. The hover wash's background-color is forced too, so it is set back
   to Canvas rather than left to paint a system colour across a row.
   Declared AFTER prefers-contrast on purpose: Chromium matches both under
   Windows High Contrast and this block must be the one that lands. */
@media (forced-colors:active){
  section.section-gaping.room_features{
    background-image:none;
    background-color:Canvas;
    border-bottom-color:CanvasText;
  }
  .room_features .section_title h2::after{
    background:none; border-top:1px solid CanvasText; height:0;
  }
  .room_features .tick ul li:hover{ background-color:Canvas; }
}

/* ---------- print --------------------------------------------------------
   FIRST, or none of the rest matters: WOW.js's inline
   style="visibility:hidden" is media-independent and a print fired from the
   top of the page has had no scroll, so without this line the title and all
   three columns print blank. FLAG 2.

   Worth knowing rather than assuming: the print page box is 793.7 CSS px at
   A4 and 816 at Letter, so the (max-width:1199.98px) block above DOES match
   when printing and the (max-width:991.98px) block does NOT — the three runs
   stay side by side on paper, at the 16px gutters, which is right for a
   schedule.

   This section has no white objects on it, so paper can simply be paper: the
   ground goes to plain white and the ink to black. The numerals stay in the
   deep brass at 5.461:1 on white — they are the section's content, not its
   decoration, and a printed inventory with its figures stripped is not an
   inventory; at that ratio they also survive a greyscale printer. NOTHING is
   ruled on paper either: the printed page is the same unruled counted
   schedule as the screen, which is the point, and it is what keeps it from
   turning into .senior_living in the one medium where the temptation is
   strongest. break-inside:avoid on the items stops an entry splitting across
   a page break and orphaning its figure. */
@media print{
  .room_features .wow{
    visibility:visible !important;
    opacity:1 !important;
    animation:none !important;
  }
  section.section-gaping.room_features{
    padding:24px 0 18pt;
    background-image:none;
    background-color:#fff;
    border-bottom:1px solid #7f6630;      /* 5.461:1 on white */
  }
  .room_features .section_title{ break-after:avoid; page-break-after:avoid; }
  .room_features .section_title h2{ color:#000; font-size:20pt !important; }
  .room_features .section_title h2::after{
    background:none; border-top:1px solid #a89f8a; height:0;
  }
  .room_features .section_title p{ color:#000; }
  .room_features .tick ul li{
    --rf-row-y:5pt;
    margin-bottom:10pt;
    padding:var(--rf-row-y) 0 var(--rf-row-y) 2.1em;
    color:#000;                           /* 21:1 */
    background:none;
    border:0;
    break-inside:avoid; page-break-inside:avoid;
    font-size:10.5pt;
  }
  .room_features .tick ul li::before{ color:#7f6630; }   /* 5.461:1 */

  /* DECLARE the printed layout; do not inherit it. The print page box is
     ~717px on A4 at Chrome's default 0.4in margins, ~739px on Letter and 794px
     at margins:none - all of which match BOTH (max-width:991.98px) AND, with
     margins, (max-width:767.98px). Landscape (~1045-1122px) matches neither.
     Left alone the same page printed as a one-, two- or three-column schedule
     depending on paper size, orientation and the user's margin setting. */
  .room_features .bg1,
  .room_features .bg2,
  .room_features .bg3{ width:33.3333%; max-width:33.3333%; }
  .room_features .bg1{ padding:0 12pt 0 0; }
  .room_features .bg2{ padding:0 12pt; }
  .room_features .bg3{ padding:0 0 0 12pt; }
  .room_features .tick ul{ columns:auto; column-gap:normal; }
  /* 0-3-2, to beat the 991.98 block's :last-child restore - which would
     otherwise leave 16px under the last item of bg1 and bg2 while every other
     item got 10pt, a visible pitch break at exactly the two run boundaries the
     continuous count has to read across. */
  .room_features .tick ul li:last-child{ margin-bottom:0; }
}


/* ==========================================================================
   "OUR VIBRANT SENIOR LIVING COMMUNITY"  (#Gallery) - THE PLATES
   ==========================================================================
   Twenty albums of life at Jagriti Dham. The sibling page's gallery went
   through two passes - "the elevation" (a mid-toned wall with twenty
   openings, two to a bay) and then "the plate", which found that idea was
   why the photographs were small and replaced it with one or two plates on
   a table: a single photograph at the size it deserves, its name under it,
   the page turned by hand, a count, and NOTHING DRAWN ON ANY PHOTOGRAPH IN
   ANY STATE - no scrim, no zoom, no badge, not on hover, focus or press.
   Both passes are carried here in the sibling's order (ELEVATION first,
   THE PLATE overriding it, as on the sibling), from css/banner.css lines
   5453 and 13986, where the full account lives.

   WHAT IS DIFFERENT HERE IS THE UNIT. The sibling's twenty plates are
   twenty photographs; this page's twenty are ALBUMS - a cover and, behind
   it, from one to ninety-one more photographs (or, for the newsletter,
   sixteen films). The old markup carried every one of them as an empty,
   unnamed <a> inside the carousel: 302 anchors, 282 of them tab stops
   leading nowhere, cloned again by Owl, and bound to fancybox once for EACH
   anchor in the same album. They are one JSON block now, and a plate shows
   its cover, its name and how many photographs are behind it - which is the
   one fact the old cards withheld.

   THE LEGACY RULES THIS BLOCK MEETS on this page (the same family as the
   testimonials above): style2.css:1553-1569 .photo-icon, :1529 .photo-date,
   :1585 .view_title on a green slab, :1574 .post-box{display:table}, :1620
   .owl-carousel .item{width:96%}, :1700-1709 .owl-nav, and responsive2.css:88
   .section-gaping.gallery{padding:0 0 15px} below 768 (0-2-0, beaten by the
   0-2-1 section rule). The two tokens the sibling's rules read from its
   header.css :root are declared on the section here.
   ========================================================================== */
section.section-gaping.gallery{
  --jd-green-deep:#2b3f2f;
  --jd-gold-dp:#7f6630;
}

section.section-gaping.gallery{
  padding:56px 0 60px;

  background-color:#d5d3cb;

  background-image:

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='pgg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23pgg)' opacity='.026'/%3E%3C/svg%3E"),

    linear-gradient(168deg,
      rgba(255,252,240,.12)   0,
      rgba(255,252,240,.05) 170px,
      rgba(255,252,240,0)   420px);

  background-repeat:repeat, no-repeat;
}

.gallery .section_title{ margin-bottom:36px; }
.gallery .section_title h2{
  font-family:Helvetica, sans-serif;
  font-size:clamp(23px, 2.7vw, 34px) !important;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.004em;
  color:#22331f;
  margin:0 auto;
  position:static;
}
.gallery .section_title h2::after{
  position:static; display:block;
  bottom:auto; left:auto; right:auto;
  content:"";
  width:58px; height:1px;
  margin:18px auto 0;
  background:linear-gradient(90deg,transparent,rgba(127,102,48,.95),transparent);
}

.gallery .section_title p{
  margin:14px auto 0;
  font-size:17px;
  font-weight:400;
  line-height:1.6;
  color:#2b3f2f;
}

.gallery .photo_gallery{ position:relative; }
.gallery .photo_gallery:not(.owl-loaded){
  display:flex;
  flex-wrap:nowrap;
  overflow:hidden;
}
/* The pre-init fallback ladder lives in ONE place, at the end of the second
   pass, so it can be read against the JS. See "the fallback, once" below. */

.gallery .photo_gallery .item{
  width:100%;
  margin:0;
  padding:8px;
}

.gallery .post-box{
  display:block;
  margin:0 0 16px;
  color:inherit;
  text-decoration:none;
}
.gallery .item > .post-box:last-child{ margin-bottom:0; }

.gallery .photo-item{
  position:relative;
  display:block;
  background:none;
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.gallery .photo-item.mb-1{ margin-bottom:0 !important; }

.gallery .photo-img{
  display:block;
  width:100%;
  min-height:0;
  aspect-ratio:4 / 3;
  overflow:hidden;

  border-radius:6px;
  background:#c3c1b8;
  outline:1px solid #4f6f52;
  outline-offset:0;
  transition:outline-color .26s ease;
}
.gallery .photo-img img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 50%;
  border-radius:0;
  transform:none;
  transition:none;
  box-shadow:none;
}

.gallery .photo-date{
  position:absolute; inset:0; top:0; bottom:0; left:0; right:0;
  width:100%; height:100%;
  z-index:2;
  display:block;
  opacity:1;
  transform:none;
  background:none;
  transition:none;
  pointer-events:none;
}
.gallery .post-box:hover .photo-date{
  opacity:1;
  transform:none;
  transition-delay:0s;
}
/* THE MAGNIFIER IS NOW A MARK ON THE FOOT LINE, NOT A BOX BESIDE THE NAME.
   .photo-date is absolute inset:0, but .photo-img sets no position, so its
   containing block is .photo-item (style2.css:1520 is position:relative) - the
   WHOLE plate. The badge therefore anchors to the plate's bottom-right, level
   with the album name, and .view_title carried padding-right:56px to clear it.
   At two-up that gutter was 9% of the measure; at a quarter width it is 19%,
   and the name collides anyway as soon as it needs two lines.
   It is NOT moved onto the photograph: the preamble at the head of this block
   forbids that outright - no scrim, no zoom, no badge, in any state. Instead the
   46px box, its border and its filled hover state all go, and what is left is a
   15px glyph sitting at the right-hand end of the count line. */
.gallery .photo-icon{
  position:absolute;
  top:auto; left:auto; right:0; bottom:0;
  transform:none;
  box-sizing:border-box;
  width:auto; height:20px; min-width:18px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  font-size:0;
  letter-spacing:normal;
  text-transform:none;
  text-align:right;
  transition:color .22s ease;
}
.gallery .photo-icon i{
  display:block;
  line-height:20px;
  font-size:15px;
  color:#2b3f2f;                     /* 7.54:1 on the ground */
  transition:color .22s ease;
}

/* THE ENTRY. Four-up costs the album name 52% of its measure - 605px to 292px -
   and the way to give it presence back is not a bigger face but STRUCTURE: the
   name in one register, the count in another, and a fixed box so that the foot
   lines of all four plates in a spread sit on ONE line whether a name took one
   row or two. That single alignment is what makes four plates read as a row of
   an index rather than four loose cards.
   The gutter is 26px now, not 56px: all that has to clear is a 15px glyph. */
.gallery .view_title{
  display:block;
  height:auto; min-height:76px;      /* measured: the tallest of the twenty
                                        entries is a two-line name plus the foot
                                        line; below this the counts stop
                                        aligning across a spread */
  margin:12px 0 0;
  padding:0 26px 0 0;
  background:none;
  background-image:none;
  border:0;
  border-radius:0;
  text-align:left;
  vertical-align:baseline;
  font-size:17px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.002em;
  color:#22331f;                     /* 8.89:1 on the ground */
  transition:color .22s ease;
}
.gallery .view_title span{
  display:flex;
  flex-direction:column;
  min-height:76px;
  min-width:0;
  overflow-wrap:break-word;
  hyphens:none;
}

@media (hover:hover){
  .gallery .post-box:hover .photo-img{ outline-color:#2b3f2f; }
  .gallery .post-box:hover .photo-img img{ transform:none; }
  /* there is no box left to fill - only the glyph deepens */
  .gallery .post-box:hover .photo-icon i{ color:#1d2c20; }
  .gallery .post-box:hover .view_title{ color:#1d2c20; }
}

.gallery .post-box:active .photo-img{ outline-color:#2b3f2f; }

.gallery .post-box:focus:not(:focus-visible){ outline:0; }
.gallery .post-box:focus-visible{
  outline:2px solid #2b3f2f;
  outline-offset:2px;
}
.gallery .post-box:focus-visible .photo-img{ outline-color:#2b3f2f; }
.gallery .post-box:focus-visible .photo-icon i{ color:#1d2c20; }
.gallery .post-box:focus-visible .view_title{ color:#1d2c20; }

/* A RUNNING FOOT, not two arrows adrift in a void. The readout used to be
   injected BETWEEN the arrows and the three of them centred, which left a wide
   empty band under the plates - and four-up makes that band wider still. The
   gap is not closed by removing space; it is closed by giving the space a job:
   the count at the left, the controls at the right, on a brass hairline. */
.gallery .photo_gallery .owl-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:30px 0 0;
  padding:18px 0 0;
  border:0;
  border-top:1px solid rgba(127,102,48,.42);
  text-align:left;
}
.gallery .photo_gallery .owl-dots:empty{ display:none !important; }

.gallery .photo_gallery .owl-nav button.owl-prev,
.gallery .photo_gallery .owl-nav button.owl-next{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:46px; height:46px;
  min-width:46px;
  margin:0;
  padding:0;
  border:1px solid #4f6f52;
  border-radius:3px;
  background:transparent;
  color:#22331f;
  font-size:0;
  line-height:1;
  cursor:pointer;
  transition:background-color .22s ease, color .22s ease, border-color .22s ease;
}
.gallery .photo_gallery .owl-nav button.owl-prev i,
.gallery .photo_gallery .owl-nav button.owl-next i{
  font-size:16px;
  line-height:1;
  color:inherit;

}
@media (hover:hover){
  .gallery .photo_gallery .owl-nav button.owl-prev:hover,
  .gallery .photo_gallery .owl-nav button.owl-next:hover{
    background:#3a5240;
    border-color:#3a5240;
    color:#f7f3e9;
  }
}
.gallery .photo_gallery .owl-nav button.owl-prev:focus,
.gallery .photo_gallery .owl-nav button.owl-next:focus:not(:focus-visible){ outline:0; }
.gallery .photo_gallery .owl-nav button.owl-prev:focus-visible,
.gallery .photo_gallery .owl-nav button.owl-next:focus-visible{
  background:#3a5240;
  border-color:#3a5240;
  color:#f7f3e9;
  outline:2px solid #2b3f2f;
  outline-offset:2px;
}
.gallery .photo_gallery .owl-nav button.owl-prev:active,
.gallery .photo_gallery .owl-nav button.owl-next:active{ transform:translateY(1px); }

.gallery .jd-sr{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* THE CONTROL SITS IN THE RUNNING FOOT, beside the arrows - not floating over
   the plates. This rule was written when the button was appended to the
   carousel itself, and at right:8px/bottom:0 over a .photo_gallery that is
   position:relative it lands ON the bottom row of photographs, which the
   preamble at the head of this block forbids outright.
   position:relative and NOT static: the two bars of the pause mark are
   ::before/::after with position:absolute, so this button has to go on being
   their containing block. */
.gallery .photo_gallery .owl-nav .jd-owl-pause{
  position:relative;
  right:auto; bottom:auto;
}

.gallery .jd-owl-pause{
  position:absolute; right:8px; bottom:0; z-index:3;
  box-sizing:border-box;
  width:46px; height:46px; min-width:46px;
  padding:0; cursor:pointer;
  background:transparent;
  border:1px solid #4f6f52;
  border-radius:3px;
  transition:background-color .22s ease, border-color .22s ease;
}
@media (hover:hover){
  .gallery .jd-owl-pause:hover{ background:#c6c3ba; border-color:#2b3f2f; }
}
.gallery .jd-owl-pause:focus:not(:focus-visible){ outline:0; }
.gallery .jd-owl-pause:focus-visible{
  outline:2px solid #2b3f2f;
  outline-offset:2px;
}

.gallery .jd-owl-pause::before,
.gallery .jd-owl-pause::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:4px; height:14px; background:#22331f;
}
.gallery .jd-owl-pause::before{ left:17px; }
.gallery .jd-owl-pause::after{ left:25px; }
.gallery .jd-owl-pause.is-paused::before{
  left:18px; width:0; height:0; background:none;
  border-left:12px solid #22331f;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}
.gallery .jd-owl-pause.is-paused::after{ display:none; }

.gallery .text-center.mt-3{ margin-top:44px !important; }

.gallery .btn_blue_rounded{
  display:inline-flex;
  align-items:center; justify-content:center;
  min-height:52px;
  padding:14px 34px !important;
  border:1px solid var(--jd-gold-dp);
  border-radius:0;
  overflow:visible;
  transform:none;
  font-size:17px; font-weight:700;
  letter-spacing:.01em; line-height:1.2;
  text-transform:none;
  color:#1d2c20;
  background:linear-gradient(180deg,#eaddb2 0%,#d9c390 34%,#c9ad72 52%,#d2b87f 66%,#b99a56 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),
             0 1px 2px rgba(34,51,31,.10),
             2px 12px 22px -14px rgba(34,51,31,.5);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.gallery .btn_blue_rounded i{
  margin-left:11px;
  font-size:15px;
  color:inherit;
  transition:transform .25s ease;
}
@media (hover:hover){

  .gallery .btn_blue_rounded:hover{
    color:#1d2c20;
    background:linear-gradient(180deg,#f3e9cb 0%,#e2cfa2 34%,#d5bb84 52%,#dcc491 66%,#c3a660 100%);
    transform:translateY(-2px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
               0 1px 2px rgba(34,51,31,.12),
               2px 18px 30px -16px rgba(34,51,31,.55);
  }
  .gallery .btn_blue_rounded:hover i{ color:inherit; transform:translateX(3px); }
}

.gallery .btn_blue_rounded:active{ transform:translateY(1px); }

.gallery .btn_blue_rounded:focus:not(:focus-visible){ outline:0; }
.gallery .btn_blue_rounded:focus-visible{
  outline:2px solid var(--jd-green-deep);
  outline-offset:3px;
}

@media (max-width:991.98px){
  section.section-gaping.gallery{ padding:44px 0 46px; }
  .gallery .section_title{ margin-bottom:30px; }
  .gallery .photo_gallery .owl-nav{ margin-top:22px; }
}

@media (max-width:767.98px){
  section.section-gaping.gallery{ padding:34px 0 36px; }
  .gallery .section_title{ margin-bottom:26px; }
  .gallery .section_title p{ font-size:16px; margin-top:13px; }
}

@media (max-width:575.98px){
  .gallery .btn_blue_rounded{ padding:13px 20px !important; font-size:16px; }
}

@media (prefers-reduced-motion:reduce){
  .gallery .wow{
    animation:none !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  .gallery .photo_gallery .owl-stage{ transition-duration:.01ms !important; }
  .gallery .photo-img,
  .gallery .photo-icon,
  .gallery .photo-icon i,
  .gallery .view_title,
  .gallery .photo_gallery .owl-nav button.owl-prev,
  .gallery .photo_gallery .owl-nav button.owl-next,
  .gallery .jd-owl-pause,
  .gallery .btn_blue_rounded,
  .gallery .btn_blue_rounded i{ transition-duration:.01ms !important; }
  .gallery .btn_blue_rounded:hover,
  .gallery .btn_blue_rounded:active,
  .gallery .btn_blue_rounded:hover i,
  .gallery .photo_gallery .owl-nav button.owl-prev:active,
  .gallery .photo_gallery .owl-nav button.owl-next:active{ transform:none !important; }
}

@media (prefers-contrast:more){
  section.section-gaping.gallery{
    background-image:none;
    background-color:#d5d3cb;
  }
  .gallery .section_title h2::after{
    background:none;
    border-top:1px solid #6b551f;
    height:0;
  }
  .gallery .photo-img{
    background:#bcbab1;
    outline-color:#2b3f2f;
  }
  .gallery .post-box:hover .photo-img{ outline-width:2px; }
  .gallery .photo-icon,
  .gallery .photo_gallery .owl-nav button.owl-prev,
  .gallery .photo_gallery .owl-nav button.owl-next,
  .gallery .jd-owl-pause{ border-color:#2b3f2f; }
  .gallery .btn_blue_rounded{ border-color:#6b551f; }
}

@media (forced-colors:active){
  section.section-gaping.gallery{
    background-image:none;
    background-color:Canvas;
  }
  .gallery .section_title h2{ color:CanvasText; }
  .gallery .section_title h2::after{
    background:none; border-top:1px solid CanvasText; height:0;
  }
  .gallery .section_title p{ color:CanvasText; }
  .gallery .photo-img{ background:Canvas; outline-color:CanvasText; }
  .gallery .photo-date{ background:none; }
  .gallery .photo-icon,
  .gallery .photo_gallery .owl-nav button.owl-prev,
  .gallery .photo_gallery .owl-nav button.owl-next,
  .gallery .jd-owl-pause{
    background:ButtonFace; color:ButtonText; border:1px solid ButtonText;
  }
  .gallery .photo-icon i{ color:ButtonText; }
  .gallery .post-box:hover .photo-icon,
  .gallery .photo_gallery .owl-nav button.owl-prev:hover,
  .gallery .photo_gallery .owl-nav button.owl-next:hover,
  .gallery .jd-owl-pause:hover{ background:Highlight; color:HighlightText; }
  .gallery .post-box:hover .photo-icon i{ color:HighlightText; }
  .gallery .jd-owl-pause::before,
  .gallery .jd-owl-pause::after{ background:ButtonText; }
  .gallery .jd-owl-pause.is-paused::before{
    background:none; border-left-color:ButtonText;
  }
  .gallery .view_title{ color:CanvasText; }
  .gallery .btn_blue_rounded{
    background-image:none;
    background-color:ButtonFace; color:ButtonText;
    border:1px solid ButtonText; box-shadow:none;
  }
  .gallery .btn_blue_rounded i{ color:ButtonText; }
  .gallery .btn_blue_rounded:hover{ background-color:Highlight; color:HighlightText; }
  .gallery .post-box:focus-visible,
  .gallery .photo_gallery .owl-nav button.owl-prev:focus-visible,
  .gallery .photo_gallery .owl-nav button.owl-next:focus-visible,
  .gallery .jd-owl-pause:focus-visible,
  .gallery .btn_blue_rounded:focus-visible{ outline-color:CanvasText; }
}

@media print{
  .gallery .wow{
    visibility:visible !important;
    opacity:1 !important;
    animation:none !important;
  }
  section.section-gaping.gallery{
    padding:24px 0 18pt;
    background-image:none !important;
    background-color:#fff !important;
    border-bottom:1px solid #7f6630;
  }
  .gallery .section_title{ break-after:avoid; page-break-after:avoid; }
  .gallery .section_title h2{ color:#000; }
  .gallery .section_title h2::after{
    background:none; border-top:1px solid #a89f8a; height:0;
  }
  .gallery .section_title p{ color:#000; }
  .gallery .photo_gallery .item{ padding:6pt; }
  .gallery .post-box{ margin-bottom:14pt; break-inside:avoid; page-break-inside:avoid; }
  .gallery .photo-img{
    background:none;
    outline:1px solid #a89f8a;
    outline-offset:0;
  }

  .gallery .photo-date,
  .gallery .photo-icon,
  .gallery .jd-owl-pause{ display:none; }

  .gallery .photo_gallery .owl-nav,
  .gallery .photo_gallery .owl-dots{ display:none !important; }
  .gallery .view_title{
    color:#000;
    min-height:0;
    margin-top:6pt;
    padding-right:0;
    break-inside:avoid; page-break-inside:avoid;
  }
  .gallery .text-center.mt-3{ margin-top:18pt !important; }
  .gallery .btn_blue_rounded{
    background:none !important;
    color:#000;
    border:1px solid #7f6630;
    box-shadow:none;
    transform:none;
    padding:8pt 16pt !important;
    min-height:0;
  }
  .gallery .btn_blue_rounded i{ color:#7f6630; }
}

/* ---------- second pass: the plate ---------- */
.gallery .post-box{ margin:0; }

/* THE FALLBACK, ONCE. What the plates look like in the window between the
   markup arriving and Owl initialising - which on this page is not a flicker:
   the gallery is far down a long document and initialises late.
   These three steps mirror the JS ladder exactly (1 / 2 / 4 - see the
   responsive map in js/custom.js), so nothing jumps when Owl takes over.
   Six contradictory declarations used to be spread across two passes here -
   25%, 33.33%, 50%, 100%, then 50% and 100% again, the later pair silently
   winning on source order - and none of them matched the ladder. */
.gallery .photo_gallery:not(.owl-loaded) .item{ flex:0 0 25%; }
@media (max-width:991.98px){
  .gallery .photo_gallery:not(.owl-loaded) .item{ flex:0 0 50%; }
}
@media (max-width:575.98px){
  .gallery .photo_gallery:not(.owl-loaded) .item{ flex:0 0 100%; }
}

@media (min-width:992px){
  .gallery .photo_gallery .item{ padding:8px 12px; }
}

@media (min-width:768px){
  .gallery .view_title{
    font-size:19px;
    margin-top:12px;
  }
}

.gallery .photo_gallery .owl-nav{ gap:16px; }
@media (min-width:768px){
  .gallery .photo_gallery .owl-nav{ margin-top:32px; }
}

.gallery .post-box:focus{
  outline:2px solid #2b3f2f;
  outline-offset:2px;
}
.gallery .post-box:focus:not(:focus-visible){ outline:0; }
.gallery .post-box:focus-visible{
  outline:2px solid #2b3f2f;
  outline-offset:2px;
}

.gallery .photo_gallery .owl-nav button.owl-prev:focus,
.gallery .photo_gallery .owl-nav button.owl-next:focus{
  outline:2px solid #2b3f2f;
  outline-offset:2px;
}
.gallery .photo_gallery .owl-nav button.owl-prev:focus:not(:focus-visible),
.gallery .photo_gallery .owl-nav button.owl-next:focus:not(:focus-visible){
  outline:0;
}
.gallery .photo_gallery .owl-nav button.owl-prev:focus-visible,
.gallery .photo_gallery .owl-nav button.owl-next:focus-visible{
  background:#3a5240;
  border-color:#3a5240;
  color:#f7f3e9;
  outline:2px solid #2b3f2f;
  outline-offset:2px;
}

.gallery .btn_blue_rounded:focus{
  outline:2px solid var(--jd-green-deep);
  outline-offset:3px;
}
.gallery .btn_blue_rounded:focus:not(:focus-visible){ outline:0; }
.gallery .btn_blue_rounded:focus-visible{
  outline:2px solid var(--jd-green-deep);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  .gallery .photo_gallery .owl-stage{ transition-duration:.01ms !important; }
}

@media (prefers-contrast:more){
  .gallery .photo_gallery .owl-nav button.owl-prev:hover,
  .gallery .photo_gallery .owl-nav button.owl-next:hover,
  .gallery .photo_gallery .owl-nav button.owl-prev:focus-visible,
  .gallery .photo_gallery .owl-nav button.owl-next:focus-visible{
    border-color:#2b3f2f;
  }
  .gallery .post-box:hover .photo-icon,
  .gallery .post-box:focus-visible .photo-icon{ border-color:#2b3f2f; }
}

@media (forced-colors:active){
  .gallery .post-box:focus,
  .gallery .photo_gallery .owl-nav button.owl-prev:focus,
  .gallery .photo_gallery .owl-nav button.owl-next:focus,
  .gallery .btn_blue_rounded:focus{ outline-color:CanvasText; }
  .gallery .photo_gallery .owl-nav button.owl-prev:focus-visible,
  .gallery .photo_gallery .owl-nav button.owl-next:focus-visible{
    background:Highlight; color:HighlightText; border-color:HighlightText;
  }
}

@media print{
  .gallery .photo_gallery .item{ padding:6pt; }
  .gallery .view_title{ font-size:16px; margin-top:6pt; }
}

/* The block that stood here zeroed the item padding and capped .post-box at
   680px between 992 and 1279.98. It was written when 992 showed ONE plate and
   the cap was what stopped a single photograph filling the band. There are FOUR
   plates there now, and with the padding gone their photographs touched - no
   gutter at all. Removed rather than re-tuned: the base .item{padding:8px} is
   already the right gutter at every step of the 1/2/4 ladder. */


/* ---------- this page's additions to the plate ---------- */
/* "11 photographs" under the album's name: the one fact the old cards
   withheld. 14px is below the body floor and that is deliberate - it is a
   label on a caption, set in the darker green so it still reads at 6.4:1 on
   the painted wall. */
/* THE FOOT LINE: count, a leader rule, and the magnifier at the right-hand end.
   margin-top:auto pushes it to the bottom of the fixed box, which is what puts
   every plate's foot on one line across a spread. The leader states nothing the
   words do not - it is there to carry the eye to the mark. */
.gallery .view_title .jd-g-n{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top:auto;
  padding-top:6px;
  font-size:16px;                    /* the page's floor for this audience. It
                                        was 14px, then 15px, on the argument
                                        that a count is a label rather than
                                        prose - but "N photographs" is the one
                                        fact the old cards withheld, and it is
                                        the reason to open the album. */
  line-height:1.3;
  font-weight:400;
  letter-spacing:.04em;
  color:#2b3f2f;                     /* 7.54:1 on the ground */
  font-variant-numeric:tabular-nums;
}
.gallery .view_title .jd-g-n::after{
  content:"";
  flex:1 1 auto;
  min-width:12px;
  border-top:1px solid rgba(43,63,47,.25);
  transform:translateY(-.32em);
}
/* (the 15px step that stood here is redundant now the base is 16px) */

/* the count between the arrows - "3 of 20 albums" - which the sibling's
   script inserts but its stylesheet never dressed */
.gallery .photo_gallery .jd-owl-count{
  order:-1;                          /* the script inserts it after .owl-prev;
                                        this puts it at the head of the foot */
  margin:0;
  margin-right:auto;
  min-width:0;
  font-family:Helvetica, sans-serif;
  font-size:16px;
  line-height:1.3;                   /* it is no longer being propped level with
                                        the arrows by hand */
  font-weight:400;
  letter-spacing:.01em;
  color:#22331f;
  text-align:left;
  font-variant-numeric:tabular-nums;
}
@media (prefers-contrast:more){
  .gallery .view_title .jd-g-n,
  .gallery .photo_gallery .jd-owl-count{ color:#1d2c20; }
}
@media (forced-colors:active){
  .gallery .view_title .jd-g-n,
  .gallery .photo_gallery .jd-owl-count{ color:CanvasText; }
}
@media print{
  .gallery .view_title .jd-g-n{ color:#000; }
  .gallery .photo_gallery .jd-owl-count{ display:none; }
}


/* ==========================================================================
   "WE WELCOME YOU TO JAGRITI DHAM FAMILY" (.jd-welcome) — THE LETTER AND THE
   REGISTER
   index.php:1553-1646, the last persuasive room before the address plinth.
   Appended to css/banner.css, which is the LAST of this page's own stylesheets
   (index.php:22, after css/all.css:13, css/bootstrap.min.css:14, style.css:15,
   css/slick.css:16, css/animate.min.css:17, css/jquery.fancybox.min.css:18,
   css/responsive.css:19, css/owl.carousel.css:20 and css/header.css:21), so
   every rule here wins on equal specificity by source order and needs no flag
   except the two named in the audit. Only waitMe's CDN sheet (:23) follows it,
   and every selector in that file is .waitMe-scoped. css/responsive2.css is
   NOT linked on this page, so nothing in it can reach here and it is cited
   nowhere below.

   Was:
     · #f0ece1 from style.css:16, painted #efebe0, L* 93.08 — which is 0.67
       lightness units from .room_features' floor at 93.75. The page holds that
       value twice, and this is the tighter of the two rooms that do it.
     · 30px 0 of padding, and 15px 0 below 576 (style.css:471, and this section
       IS an odd child) — under seven rooms rebuilt at 56/60.
     · A BARE h2, outside .section_title, so style.css:41's absolute 4px
       #cbb279 bar never applied and this heading has never had the ornament
       the other eight rooms close their titles with — while style.css:451
       `.h2,h2{font-size:20px!important}` DOES reach it under 575.98px, which
       .section_title h2 rules would have shielded it from.
     · Five paragraphs at 15px (style.css:23), dropping to 13px/300 at 320
       (responsive.css:131) — the longest continuous read on the page, below
       the 16px floor this page holds for a 55+ reader, and going lighter on
       the narrowest measure for the oldest eyes.
     · ALL FOUR FIGURE PARAGRAPHS AT opacity:0 AND transform:scale(0), AT
       EVERY WIDTH. style.css:1802 sets them; only style.css:1819's :hover
       restores them. There is no hover on a phone. That is 1,088 characters of
       the client's own writing about Meaning, Care, Peace and Companionship
       which the traffic this page is bought for has never seen. Not an
       affordance hidden behind hover — the content.
     · The four names pushed to the floor of their own boxes: style.css:1792
       `figure.effect-oscar h2{margin:90% 0 0 0}` computes 250px of top margin
       at 1440, 178px at 992, 286px at 768 and 292.5px at 390, plus a 24px
       translate, rising only when a mouse arrives.
     · A 1px #efc86f frame inside each figcaption (style.css:1782) and #efc86f
       names with `text-shadow:1px 1px #000` — a gold that appears NOWHERE in
       the seven finished rooms.
     · All four photographs grayscale(1) at rest (style.css:1746) and then
       dimmed to opacity:.4 on hover (style.css:1828) — desaturated AND
       half-erased, in the one state where their own caption could be read.
     · A 90px play glyph in #1690f0 at opacity .5 (style.css:730) — the only
       blue on a green-and-brass page — inside a 350px strip (style.css:692)
       cropped from a 4:3 source, wearing box-shadow 0 1px 11px 0 #438d467a,
       a green glow matching nothing in :root. Its hover rule (style.css:736)
       sets opacity:10, which is invalid and clamps to 1.
     · alt="Avatar" on that thumbnail: the only non-empty alt in the section,
       and the anchor's entire accessible name.
     · .grid figure float:left inside a Bootstrap flex grid, .grid capped at
       max-width:1000px with text-align:center — a 2013 layout inside a 2021
       one — and figcaption uppercase at 13px.
     · .sticky_div top:100px again, against a header that is 58px condensed at
       >=992 and 54px at 768-991 and is always condensed by the time a reader
       is this far down.

   Now: THE LETTER AND THE REGISTER. The left column is set as what it already
   is — five first-person-plural paragraphs closing on an invitation, with the
   film at its foot as the door. The right column stops being a decorative 2x2
   and becomes the four things the letter is promising, set as a REGISTER: one
   entry per row from 320 to 1920, a photograph beside a name beside a
   paragraph, the entries ruled off from one another and from nothing else.

   THE SPLIT IS 5/7 AND IT IS THE SECTION'S LARGEST STRUCTURAL DECISION. The
   register takes 58.333% and the letter 41.667%, and the argument is measure,
   not emphasis. In the authored 2x2 inside a col-lg-6, each cell's text column
   is about 230px, where Companionship's 365 characters set thirteen lines of
   28 — a measure at which no type size is readable by anyone, let alone the
   audience this page is bought for. As one entry per row in the wider half the
   same paragraph gets 501px and about 59 characters at 1440, inside the 45-75 band.
   The recut also settles the room's other problem for free: at 1440 the letter
   (heading, five paragraphs, film and label) runs about 1,190px and the
   register about 1,020px, so the two halves end within about 170px of each
   other — a normal ragged editorial bottom rather than the 436px hole a 6/6
   split leaves, and the reason the sticky can simply be retired below.

   NOTHING IS DRAWN ON ANY PHOTOGRAPH IN ANY STATE. That is the rule that
   arrived one section above, in .gallery, and this room inherits it rather
   than re-arguing it — including on the film, which is the one thumbnail on
   this page the site does not own. Five photographs in this room, one line
   each at their edge, nothing else.

   THE ROOM IS DRAWN WITH ONE LINE AND ONE BRASS. #4f6f52 --jd-green at
   4.559:1 on the settled plane is the four picture edges, the film's edge, the
   register's three joints and the film plate's border — one colour, one
   weight, seven roles. Brass appears EXACTLY ONCE, on the heading's 58px
   hairline, which is the signature every finished room closes with. Two ranks,
   not four.

   *** THE GROUND — DERIVED, NOT PICKED, AND NOT ANY OF THE THREE PROPOSED ***
   I recomputed every plane on this page from relative luminance and CIELAB
   under D65 rather than quoting the brief, and the brief's table is off:
     gallery        #d5d3cb -> #d4d2ca   L* 84.15   C*  4.26   the one mid wall
     floor_plan     #e5e1d8 -> #e4e0d7   L* 89.26   C*  4.88
     live_better    #eae2c8 -> #e9e1c7   L* 89.53   C* 13.79
     we_care        #dbe5dc -> #dae4db   L* 89.63   C*  5.93
     room_features  #f0eee8 -> #efede7   L* 93.75   C*  3.16
     senior_living  #f7f3e9 -> #f6f2e8   L* 95.55   C*  5.30
     testimonials   #2f4433 -> #2e4332   L* 26.23   the one dark plane
     THIS ROOM      #f0ece1 -> #efebe0   L* 93.08   C*  5.83
   So today this room sits 0.67 units from .room_features. THAT is the rut —
   tighter than any of the three proposals said — and the page's one genuinely
   empty stretch is 89.63 to 93.75, 4.12 units wide with nothing in it.

   It goes to #ece8dd, painted #ebe7dc, L* 91.68: 2.05 from we_care and 2.07
   from room_features, which is as close to the centre of that gap as three
   hex digits can land. And the pigment is NOT NEW — C* 5.85 at h 95.3deg
   against this room's own C* 5.83 at h 95.3deg. Same chroma to two decimals,
   same hue to one. This is THIS ROOM'S OWN COLOUR CUT ONE STEP DARKER, which
   is exactly the move .gallery made on .room_features' floor ("one material at
   two lightnesses, so the seam is a change of tone and not of substance"),
   applied here to the room's own material rather than to a neighbour's.

   Two things follow from that, and the second is a gift rather than a plan.
   FIRST, the direction is right: the reader comes off the gallery's mid wall
   at 84.15 into the page's most reading-dense room, and the next thing after
   it is a solid #4f6f52 plinth at L* 43.71. The page should be closing down,
   not opening up, so this room re-lights by 7.5 units and stops 2 short of the
   floor rather than reaching past it toward the sheet.
   SECOND, THE LIT HEAD OF THIS ROOM PAINTS TO THIS ROOM'S PRESENT PLANE,
   EXACTLY. The .22 light over #ece8dd composites to #f0ece1 — the declared
   colour in style.css:16 — and the grain takes it to #efebe0, which is that
   colour's painted value, to the byte. The top of the new room is the whole of
   the old one. I did not construct that; I found it after choosing the value
   on lightness alone, and it is the strongest evidence available that this is
   the right pigment: the room is not repainted, it is shaded.

   AND THE CHROMA MATTERS HERE MORE THAN IN ANY OTHER ROOM. C* 5.85 against
   the 8.55 one proposal reached for. This is the only section on the page
   where four photographs of PEOPLE are laid directly on the ground with no
   mount between them, and .testimonials needed #f7f3e9 paper mounts precisely
   because, in that block's words, skin is where induced hue is unforgivable.
   A surround at C* 5.9 cannot push a hue into four faces; one at C* 8.6 —
   twice .gallery's, under the same subject .testimonials protected — can.

   THE TWO SEAMS, both left undrawn and both measured:
     HEAD  gallery painted #d4d2ca -> this #ebe7dc   1.225:1, dL* 7.53
           .gallery declares no border-bottom and sizes its own head gradient
           against "the visible step at the joint" of dL* 7.81. This joint is
           7.53. It reads by the measure that room set, and a hairline laid a
           few pixels under a moulding that was deliberately left out is a
           second moulding.
     FOOT  this -> .greenbg2 #4f6f52 (index.php:1653, style.css:1837)
           4.559:1, dL* 47.96 — and that section already carries
           border-top:2px solid #4f6f52 of its own. A 4.5:1 edge with 2px of
           green on it is a boundary; a hairline on top of it is the doubled
           line.
   Three joins on this page now, three honest treatments: a brass threshold, a
   dissolve, and — three times — nothing.

   >>> REQUIRED IN THE SAME COMMIT, and this is the discipline .gallery's own
   block asked for when it changed a ground under a neighbour's foot rule. The
   comment in the .gallery block states its foot seam as
   "wall #d4d2ca -> .section_gaping_bg2 #f0ece1   1.283:1, dL* 9.28". Both
   figures stop being true the moment this ground ships; the join becomes
   1.225:1 and dL* 7.53. That comment must be corrected in the same commit, or
   this file starts lying about its own measurements — which, in seven rebuilt
   rooms, it has so far never done. <<<

   *** THE VIDEO MARK — THE PAGE'S FOURTH, AND THE SECOND INSTANCE OF AN
   EXISTING OBJECT RATHER THAN A FOURTH INVENTION ***
   The page does not carry three unrelated affordances. It carries ONE rule
   that has produced TWO objects, and the rule is about GROUND, not shape:
     if the mark MUST stand on a photograph it is a 46px FILLED DISC carrying
     two edges of opposite polarity — #22331f body, 1px #f7f3e9 rim, \f04b in
     #e3cf9c, over a foot scrim — because the backdrop is an arbitrary bitmap
     and no single edge can be guaranteed against it. That is .testimonials,
     eight thumbnails in carousel cards with no wall beside them, and its rim
     was swept over the RGB cube to a guaranteed 3.484:1.
     if the mark CAN stand on a KNOWN ground it is a 46px BORDERED PLATE with
     a bare solid glyph — 3px radius, 1px #4f6f52, transparent, #22331f glyph,
     filling to #3a5240 with the glyph inverted to #f7f3e9 — because a measured
     number beats a swept minimum and no photograph is veiled. That is
     .gallery: the plate in the caption row, never on a picture, and the same
     object again as both chevrons and the pause. "One control object, four
     instances."
   THIS FILM CAN STAND ON A KNOWN GROUND, because the hinge below builds it
   one, so it takes THE PLATE — not a variation on the plate, the plate. Same
   46px, same 3px radius, same 1px #4f6f52, same transparent fill, same bare
   solid glyph, same #3a5240 hover with the same inverted glyph, same focus
   behaviour. One control object, now five instances across two rooms, and a
   reader who learned it in the gallery does not learn it again here.
   Choosing the disc instead would have been the WRONG BRANCH of the same
   rule: a filled circle on the one thumbnail on this page the site does not
   own, cross-origin from i3.ytimg.com, whose contents cannot be audited and
   can change without notice — in the room directly below the section that
   established that photographs are not drawn on.
   WHAT THE ROOM ADDS IS NOT A SHAPE, IT IS A WORD. This is the only single
   video on the page. Forty repeated marks cannot each carry a label; one can.
   So the plate is followed by "Take a tour of Jagriti Dham" at 17px/700 in
   #22331f — and that word is what fixes this link's real defect, which was
   never that the glyph was blue but that its only accessible name was
   alt="Avatar". Same furniture, different room.

   *** THE FOUR FIGURES — WHY THIS IS NOT A FOURTH CARD GRID ***
   The three existing families share three properties, and naming them
   precisely is what makes the distinction checkable rather than asserted:
     .live_better   six WHITE CARDS, 12px radius, circular brass medallions
     .we_care       WHITE PLATES, brass medallions, a rail and a panel
     .testimonials  PAPER MOUNTS, an inset picture, a label beneath, eight
                    across a grid
   Every one is (a) a container with its OWN FILL floating on the ground,
   (b) carrying a RADIUS on that container, (c) REPEATED ACROSS A GRID AXIS.
   The register has none of the three:
     (a) NO FILL. Nothing in the four entries has a background — not the entry,
         not the figure, not the figcaption. The only fill in the room is the
         empty-opening plate behind each photograph, seen for the milliseconds
         before it decodes. style.css:1778's rgba(0,0,0,.9) — the black plate
         the whole hover mechanism was painted on — is removed outright.
     (b) NO RADIUS ON ANY CONTAINER. The only radius in the section is 6px on
         the five photographs: .gallery's opening, borrowed deliberately.
     (c) NOT GRIDDED. One entry per row from 320 to 1920. There is no second
         column at any width, and nothing else on this page is a single-column
         list of four.
   What separates the entries is a LINE IN THE GROUND, not an object standing
   on it. That is the whole distance between a register and a rack, and it is
   also a considered relationship with the room above rather than an escape
   from it: the .gallery block argues that a rule under twenty openings "would
   be the only horizontal in a room whose argument is that it has none", and
   this is the room that has nothing BUT horizontals. Three of them, in the
   same #4f6f52 that room draws its openings with. Two rooms, one idea,
   photographed from opposite sides — which is a relationship. A fourth card
   grid would have been a repetition.
   And the ENTRY is a different shape of object: picture and words SIDE BY
   SIDE, read across, rather than picture over title over body, read down.
   Every card family on this page reads down. A register reads across, and a
   card cannot.

   SCOPING. Everything is anchored on `.jd-welcome`, `.jd-w-letter`,
   `.jd-w-side` or `.jd-w-register`. Every shared name was COUNTED in
   index.php rather than assumed:
     section_gaping_bg2   1  (1553) — the hook, but a colour utility name, so
                                a semantic class is added and the utility is
                                left in place as the no-CSS fallback
     grid                 4  (1597, 1608, 1619, 1630) — all four here
     effect-oscar         4  (1598, 1609, 1620, 1631) — all four here, BUT
                                `figure.effect-oscar` is styled as a BARE
                                compound at style.css:1778-1834, so every one
                                of those rules would follow the next
                                .effect-oscar anybody adds to this page
     videotambal          1  · videogallery 1 · image-overlay 1
     overlayheight        1  · overlayy 1
                             — unique to this section TODAY, and every one of
                                them is styled UNSCOPED at style.css:681-736,
                                so an unanchored rule here would be a landmine
                                for the next video rather than a style
     sticky_div           9  (460, 499, 533, 563, 589, 618, 678, 694, 1594).
                                ONLY 1594 is ours. An unscoped
                                `.sticky_div{position:static}` would unpin the
                                .we_care rail, five #floor-plan card bodies and
                                two .senior_living panes. This is the one name
                                that MUST be scoped, and it is.
     section-gaping       9, and .row / .col-* / .wow / figure / h2 / h3 / p
                                are everywhere.
   There is no bare rule anywhere below and no rule that can leave the room.

   FONT AWESOME — a real trap, engaged and caught, because this block DOES
   change a glyph. css/all.css is FA 6.1.1 and webfonts/ is FA 5.11.2, so
   U+Exxx is tofu. I parsed both faces directly — cmap format 4 walked,
   loca/glyf entered, contour counts and bounding boxes read; advance width is
   NOT a presence test, because .notdef advances a full em:
     fa-solid-900.ttf    960 codepoints mapped, ZERO in U+E000-U+EFFF.
                         \f04b -> gid 63, 1 contour, 52 bytes of outline,
                         bbox (0,-72)-(449,456) on a 512 upem.  PRESENT.
                         \f144 -> gid 237, 2 contours, 76 bytes. PRESENT.
     fa-regular-400.ttf  151 codepoints mapped, ZERO in U+E000-U+EFFF.
                         \f04b -> NOT IN THE CMAP.  ABSENT.
                         \f144 -> gid 45, 3 contours, 96 bytes. PRESENT.
     .notdef in BOTH:    loca[0] == loca[1]. Zero bytes, no outline at all —
                         so this font's tofu is a BLANK, not a box, and a
                         missing glyph here would leave an empty plate with
                         nothing to notice.
   So `far fa-play-circle` in the file today RESOLVES; the swap is a shape
   decision, not a repair. AND IT IS ONLY SAFE WITH THE font-weight:900 BELOW.
   style.css:730 sets `.overlayy .text i{font-weight:300}` at 0-2-1, which
   BEATS all.css's `.fas,.fa-solid{font-weight:900}` at 0-1-0. CSS font
   matching for a desired weight under 400 checks <= target descending (none
   exist in this family) then ascending, landing on 400 — fa-regular-400.ttf,
   where \f04b is not mapped. Without the reset this plate renders EMPTY. The
   reason the current blue glyph survives the same 300 is that \f144 IS in the
   regular face, so the fall-through is harmless there and fatal here.
   Nothing is injected from CSS `content` anywhere in this block — the only
   generated content is the heading's ornament, an empty string — so the FA
   trap is engaged exactly once, at exactly one declaration, and named there.

   !important AUDIT — TWO declarations in normal media, plus the WOW resets:
     FLAG 1  .jd-welcome .jd-w-letter > h2 font-size, against style.css:451
             `.h2,h2{font-size:20px!important}` inside @media
             (max-width:575.98px), opened at style.css:411. It reaches this
             element because the h2 is BARE, not inside .section_title —
             responsive.css:52 `.section_title h2{font-size:20px!important}`
             cannot reach it, confirmed. Only a flag beats a flag.
             NOTE style.css:451 also sets font-weight:700 and margin-bottom:0
             in the same rule and NEITHER carries the flag, so nothing else in
             it is owed one — but both are RESTATED below, because a font-size
             that wins while a margin loses is how a heading loses its space at
             575px.
             (style.css:498 `.section-gaping h2{font-size:2rem;
             margin-bottom:6px}` inside max-width:767.98 is 0-1-1 and
             UNFLAGGED; 0-2-1 beats it with no flag, which is why the 576-767
             band needs nothing. responsive.css:167's bare `h2{font-size:25px}`
             is 0-0-1, same answer.)
     FLAG 2  .jd-welcome ... figcaption h2, ... figcaption h3 font-size,
             against the same style.css:451. Harmless on the h3 arm, which
             that rule cannot reach — one flag covers both spellings, and the
             grouped selector is why this block is correct whether or not the
             optional h2 -> h3 markup edit is applied.
     (plus .jd-welcome .wow{visibility:visible!important; opacity:1!important;
      animation:none!important} in the reduced-motion and print branches. WOW
      writes an INLINE style="visibility:hidden" at init and only an author
      !important outranks a non-important inline declaration. After the markup
      delta exactly ONE .wow remains in this section — the letter column at
      index.php:1557 — and it carries the heading, all five paragraphs and the
      film, so without that line a print fired from the top of the page comes
      out with the entire left half blank. animate.min.css is v3.7.2, zero
      `animate__` occurrences, and fadeInDown's 0% is opacity:0, which is why
      opacity is reset as well as visibility.)
   THAT IS ALL. Three Bootstrap utilities that would otherwise have needed
   flags — .mb-3 on the letter column, .mt-1 and .g-2 on the register row —
   are DELETED IN MARKUP instead. Deleting one class is cheaper and more
   honest than a flagged declaration answering it, and it is why this block
   carries two flags where the proposals carried three and four.
   Flags routed around rather than fought: style.css:1557's
   `.owl-carousel .owl-item img{border-radius:0!important}` is scoped to a
   carousel and there is no carousel here — which is why, unlike .gallery, the
   radius can go directly on the <img> and needs no wrapper. style.css:249/267
   are scoped to form inputs and buttons. `.w-100{width:100%!important}` on the
   film link is dormant: 100% is the value this block wants, and max-width is a
   different property that caps it cleanly.

   AN INSET BOX-SHADOW ON AN <img> DRAWS NOTHING — inner shadows paint above an
   element's background but BELOW its content, and a bitmap is opaque — so no
   edge in this room is shadow-borne on an image. All five picture edges are
   `outline`, which paints ABOVE content, takes no layout (so it cannot resize
   an aspect-ratio box), needs no pointer-events:none, follows border-radius in
   this engine, and — the real prize — is HONOURED under forced-colors where
   box-shadow is dropped entirely. outline-offset is 0 and never negative: an
   outline at a negative offset lands ON the bitmap's outermost pixel row,
   which would contradict this room's governing rule.

   NO ANIMATION IS DECLARED ANYWHERE IN THIS BLOCK. Not a preference — a
   consequence. A register does not enter; it is simply there.

   Every ratio below is computed from relative luminance in true CSS
   compositing order at the plane's SETTLED point (#ebe7dc, below the light's
   throw), which for dark ink on a light ground is the worst case. That is the
   convention the six light rooms use and it inverts .testimonials'. No value
   here was judged by eye.
   ========================================================================== */

/* ---------- the ground ---------------------------------------------------
   Specificity 0-2-1. The element selector is load-bearing and not padding:
   `.section-gaping.jd-welcome` alone is 0-2-0, which TIES style.css:471
   (.section-gaping:nth-child(odd){padding:15px 0}, inside the 575.98 block —
   and this section IS an odd child, which is where the measured 15px at 390
   comes from) and would win on source order only. `section` settles it
   outright, and also beats style.css:14 (.section-gaping{background:#fff;
   padding:30px 0}), style.css:16 (.section_gaping_bg2{background:#f0ece1}) and
   style.css:532 (.section-gaping{padding:20px 0 15px 0}, in the same 575.98
   block), all 0-1-0. The responsive blocks repeat the element selector for the
   same reason. No flag is needed for any of them.

   Padding to the house figures, 56/60 - 44/46 - 34/36.

   No calc() and no math function in any gradient stop: one unparseable layer
   invalidates the WHOLE background-image declaration — the bug that bit the
   first pass at .live_better — and background-color is the honest fallback.
   That fallback is LIGHTER than the painted plane, so a browser that drops
   both layers gets slightly MORE contrast, never less: the heading goes
   10.886 -> 10.986:1, the prose 7.497 -> 7.566:1 and the line 4.559 ->
   4.601:1.

   Read the stack bottom-up, since CSS lists the topmost layer first:
     2  the light   the SAME 168deg lean and the same warm white as all seven
                    rooms above, because it is the same source. Peak .22 —
                    between .gallery's .12 and the light rooms' .30/.62 — and
                    it is a DERIVED figure rather than a taste one: at .22 the
                    head composites to #f0ece1 and paints, after the grain, to
                    #efebe0, which is this room's present plane to the byte
                    (see the header). At .30 the head would reach L* 94.2 and
                    start crowding .room_features from below, which is the
                    relationship this ground change exists to open up. The
                    throw is 420px, the geometry verified next door: the 168deg
                    vector is t = 0.2079x + 0.9781y, so at 1920 the top-RIGHT
                    corner sits at t = 399px — still inside 420 at about 5% of
                    peak, which is what stops the head reading unevenly across
                    the width. Same throw, so no second vertical layer is
                    needed and none is added.
     1  grain       the plinth's own feTurbulence tile at .026 — the LIGHT-room
                    opacity, byte-identical in shape to .live_better's,
                    .we_care's, .senior_living's, .room_features' and
                    .gallery's apart from the filter id ('wfg', checked against
                    the eight already in this document by grep: fpg, lbg, n,
                    pgg, rfg, slg, tsg, wcg — no two filters in one document
                    may collide). fractalNoise averages 0.5 in all four
                    channels INCLUDING alpha, so at .026 this lays 1.3%
                    coverage of mid-grey: #ece8dd PAINTS as #ebe7dc, one unit
                    down per channel, exactly as #d5d3cb paints as #d4d2ca next
                    door. 298 bytes. Texture, not dither. background-size is
                    deliberately not declared, so the tile keeps its intrinsic
                    120x120 and the gradient keeps 100%.
   No pseudo-element on the section, so it needs no position:relative and
   nothing here can disturb the absolutely-positioned plate.
   NO border-top and NO border-bottom — see the seam note in the header. */
section.section-gaping.jd-welcome{
  padding:56px 0 60px;

  /* the settled plane, and the honest fallback */
  background-color:#ece8dd;          /* L* 92.03 declared / 91.68 painted,
                                        a* -0.53, b* +5.83, C* 5.85, h 95.3deg
                                        — this room's own chroma and hue, cut
                                        1.40 lightness units darker */

  background-image:
    /* 1 - grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='wfg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23wfg)' opacity='.026'/%3E%3C/svg%3E"),

    /* 2 - the light */
    linear-gradient(168deg,
      rgba(255,252,240,.22)   0,
      rgba(255,252,240,.09) 170px,
      rgba(255,252,240,0)   420px);

  background-repeat:repeat, no-repeat;
}

/* ---------- the spread ---------------------------------------------------
   5/7 rather than 6/6 — the direction stated as a number. Nothing is
   reordered: the heading is the section's name and must come first in both DOM
   and reading order. Everything after it defers to the register.

   align-items:flex-start because the two halves are no longer meant to be one
   object; each is exactly as tall as its own content.

   The child combinators are not decoration. `.jd-welcome .row` would also
   match the register's own inner row, whose children are full-width blocks
   that must not be stretched; `> .container > .row` reaches exactly the outer
   one and would keep doing so if a third row were ever added inside.

   THE COLUMN GAP IS 44px AT >=992 AND IT IS BUILT FROM THE GUTTER, NOT BESIDE
   IT. Bootstrap gives each column 12px of horizontal padding, so the content
   gap is 24px — a column gap, not a change of subject. Raising the register's
   left padding to 32px makes the content gap 12 + 32 = 44px while leaving the
   row's own negative margins and total width untouched, so nothing has to be
   un-done anywhere else.
   0-2-0 against .col-lg-6's 0-1-0. Declared inside min-width:992 so it lands
   in the same band Bootstrap's own .col-lg-6 does. */
.jd-welcome > .container > .row{ align-items:flex-start; }

@media (min-width:992px){
  .jd-welcome .jd-w-letter{ width:41.6667%; }
  .jd-welcome .jd-w-side{
    width:58.3333%;
    padding-left:32px;               /* 12 base + 20 = a 44px content gap */
  }
}

/* ---------- the sticky, retired ------------------------------------------
   style.css:1652 sets `.sticky_div{position:sticky;top:100px}` on NINE boxes
   across this page and responsive.css:111 relaxes it below 767. Both are
   0-1-0; this is 0-2-0, so it wins at every width with no media query and the
   other eight boxes are untouched.

   The offset is wrong on its own terms — the header is 58px condensed at >=992
   and 54px at 768-991, and it is always condensed by the time a reader is this
   far down, so top:100px overshoots by 42px — but that is the smaller
   question. The larger one is that position:sticky only does work when the
   sticky column is SHORTER than its neighbour AND shorter than the viewport.
   After the 5/7 recut the register runs about 1,020px at 1440 against the
   letter's ~1,190: it has barely any travel to spend, and at 1,020px tall it
   is taller than a 700px laptop viewport, so once pinned its fourth entry
   could not be reached at all. That is the classic sticky trap and no media
   query can honestly guard it, because the trigger is content height rather
   than viewport width.
   `top` is reset EXPLICITLY rather than left inherited: a stale offset on a
   static box is inert today and returns the moment anything here is positioned
   again. .senior_living and #floor-plan retired their own for the same class
   of reason. */
.jd-welcome .sticky_div{ position:static; top:auto; }

/* ==========================================================================
   THE LETTER
   ========================================================================== */

/* ---------- the heading --------------------------------------------------
   A BARE h2, outside .section_title. Two consequences pulling opposite ways:
   it gets no ornament from style.css:41, so there is no absolute 4px #cbb279
   bar to neutralise first and the pseudo is drawn on clean ground — and it IS
   reached by style.css:451's flagged 20px below 576, which a .section_title
   rule would have shielded it from. So: the ornament is authored clean, and
   the size carries FLAG 1.

   THE ANCHOR IS `.jd-w-letter > h2` AND THE CHILD COMBINATOR IS LOAD-BEARING.
   This section contains FIVE h2 elements — the lead plus one per figcaption —
   so `.jd-welcome h2` would hit all five. The direct-child combinator off the
   letter column hits exactly one, and would keep doing so if a sixth were ever
   added inside a figure.

   THE CLAMP IS BYTE-IDENTICAL to .gallery's, .room_features' and
   .testimonials'. A larger figure here would out-shout them and break the
   descent through the page.

   THE ORNAMENT IS THE HOUSE ORNAMENT, NOT A REGRADE. Same 58px, same 1px, same
   rgba(203,178,121,.95) that .live_better, .we_care, .senior_living,
   #floor-plan, .testimonials, .room_features and .gallery all close with. It
   composites here to #cdb57e and measures 1.618:1 — decorative rank, stated as
   decorative, and the 3:1 bar is not claimed for it. It is NOT darkened to buy
   a number: eight rooms draw this line at this value and the consistency of a
   signature is worth more than a local gain on an element that carries no
   information. prefers-contrast takes it to solid #6b551f at 5.826:1, exactly
   as .room_features and #floor-plan already do in their own branches.
   ONE difference, and it is structural rather than cosmetic: the house version
   fades at BOTH ends because it sits under a centred title. This heading is a
   column head set flush left, and a hairline that fades IN from the same left
   edge the text starts at reads as a printing fault. So the fade runs one way,
   left to right, and the margin is `18px 0 0` rather than `18px auto 0`.

   `strong` IS RESET AND THAT IS NOT PEDANTRY. The markup is
   <h2><strong>...</strong></h2>. The UA style for strong is font-weight:bolder,
   and bolder against an inherited 700 computes to 900 per the CSS Fonts
   mapping table. Helvetica registers no 900 face, so the engine either picks
   700 or synthesises a heavier one, and which it does varies. Inheriting the
   parent's weight makes the answer the same everywhere and the same as the
   other eight titles.

   font-weight and margin-bottom are RESTATED because style.css:451 sets both
   unflagged in the rule FLAG 1 answers, and style.css:498 sets margin-bottom:6px
   at 768. A font-size that wins while a margin loses is how a heading loses its
   space at exactly one breakpoint. */
.jd-welcome .jd-w-letter > h2{
  font-family:Helvetica, sans-serif;
  font-size:clamp(23px, 2.7vw, 34px) !important;   /* FLAG 1 */
  font-weight:700;
  line-height:1.24;
  letter-spacing:.004em;
  color:#22331f;                     /* 10.886:1 settled, 11.292:1 at the lit
                                        head where this heading actually sits */
  margin:0 0 22px;
  padding:0;
  position:static;
  text-align:left;
  text-transform:none;
}
.jd-welcome .jd-w-letter > h2 strong{
  font-weight:inherit;               /* not `bolder` -> 900 — see the note */
}
.jd-welcome .jd-w-letter > h2::after{
  content:"";
  position:static; display:block;
  bottom:auto; left:auto; right:auto;
  width:58px; height:1px;
  margin:18px 0 0;                   /* flush left, like its title */
  background:linear-gradient(90deg,
    rgba(203,178,121,.95),
    rgba(203,178,121,0));            /* composites #cdb57e, 1.618:1 —
                                        decorative, and the house signature */
}

/* ---------- the prose ----------------------------------------------------
   15px goes. 17px is the figure .senior_living's and .gallery's standfirsts
   already use, it is above the 16px floor this page holds for a 55+ reader,
   and it is above it on purpose: this is the one block of continuous reading
   on the page — about 1,270 characters before the film — and it is a letter,
   not a specification.

   `> p` reaches ONLY the five direct-child paragraphs of the letter column and
   never the four figure paragraphs, which are styled on their own terms below.

   FOUR RULES TO BEAT, all won on specificity at 0-2-1, no flag:
     style.css:23        p{font-size:15px}                            0-0-1
     responsive.css:131  p{font-size:13px;line-height:20px;
                           font-weight:300}  @media(max-width:320px)  0-0-1
     responsive.css:167  (the iPad-landscape block)                   0-0-1
     style.css:498       .section-gaping h2{...}                      h2 only
   line-height AND font-weight are restated rather than left to inherit:
   responsive.css:131 sets all three, and without the weight the whole letter
   goes LIGHT at 320 — on the narrowest measure, for the oldest reader, which
   is the exact inverse of what that width needs.

   THE MEASURE IS A rem, NOT AN em, ON PURPOSE. 34rem is 544px at every size in
   this column, so the closing line at 19px (about 57 characters) and the body
   at 17px (about 64) share ONE ragged right edge and the film below shares it
   too. An em-based measure would give the 19px line a wider column than the
   paragraphs above it and the letter would end in a staircase. At >=992 the
   column's content is about 526px so the cap never bites; below 992, where the
   halves stack into 696 or 540, it is the only thing keeping this letter off a
   90-character line.

   THIS RULE'S text-align AND hyphens ARE NO LONGER WHAT SHIPS. They are
   overridden at the end of this file, under "THE WELCOME LETTER AND REGISTER,
   JUSTIFIED", which was asked for directly. The original reasoning is kept
   here because it is still the honest argument against: WCAG 1.4.8 asks that
   text not be justified, and justified text with automatic hyphenation is
   measurably harder for exactly this 55+ reader. It lost to consistency —
   .live_better and .senior_living already justify — not to a counter-argument.
   Read the override block for the measures and the narrow-width fallback. */
.jd-welcome .jd-w-letter > p{
  max-width:34rem;
  margin:0 0 1.1em;
  font-size:17px;
  font-weight:400;
  line-height:1.72;
  letter-spacing:.005em;
  color:#3f4a41;                     /* 7.497:1 settled, 7.776:1 at the head */
  text-align:left;
  hyphens:manual;
  -webkit-hyphens:manual;
  overflow-wrap:break-word;
}

/* THE OPENING LINE. One size step and one ink step, no weight change, so it
   cannot compete with the heading above it. Three sizes in this column and no
   more: 34 / 19 / 17. */
.jd-welcome .jd-w-letter > p:first-of-type{
  font-size:19px;
  line-height:1.62;
  color:#2b3f2f;                     /* 9.164:1 */
  margin-bottom:1.05em;
}

/* THE INVITATION. "A visit to Jagriti Dham could be the beginning of a
   beautiful new chapter." is the one sentence in this letter that asks for
   something, and today it is set identically to the four that describe. It
   gets size and ink instead of a box — the heading's own #22331f, so it closes
   the letter the way a signature does. Weight stays 400: the size, the ink and
   the film directly under it are carrying the emphasis, and 700 here would be
   the hard sell this room is written to avoid.
   NO RULE ABOVE IT. A brass hairline here would be the room's second brass
   weight and its fourth horizontal, in a section whose whole discipline is one
   line and one signature. The white space does the work.
   `:last-of-type` is safe: the element after the fifth <p> is the <a>. */
.jd-welcome .jd-w-letter > p:last-of-type{
  margin:26px 0 0;
  font-size:19px;
  line-height:1.55;
  color:#22331f;                     /* 10.886:1 */
}

/* ==========================================================================
   THE FILM — the page's fourth video affordance, joining a family of two
   ========================================================================== */

/* ---------- the frame and THE HINGE --------------------------------------
   THE GREEN GLOW GOES. style.css:708 puts box-shadow:0 1px 11px 0 #438d467a on
   .videotambal — an off-palette green at 48% alpha that appears in none of the
   seven finished rooms and matches nothing in :root. Nothing replaces it: this
   room's edges are hairlines, not shadows, and that decision pays for itself
   again in the forced-colors branch, where box-shadow is not rendered at all.

   THE HINGE, AND IT IS WHY NO NODE HAS TO MOVE. `.overlayy` has no base rule
   anywhere in style.css — I read 675-740, and there is only `.overlayy .text`
   (position:absolute, top:50%, left:50%) and `.overlayy .text i`. So that
   absolute box resolves today against `.videogallery`, which style.css:681
   makes position:relative — i.e. against the photograph exactly. Making
   `.videogallery` STATIC and `.videotambal` RELATIVE moves the containing
   block out to the WHOLE LINK, thumbnail plus the 46px label row below it, so
   the mark stands on the paper beside the film's name instead of on the film.
   Two properties on two elements, and the section's entire repetition question
   answers itself without touching the DOM.

   overflow goes VISIBLE. style.css:708 sets overflow:hidden, which was there
   to clip a radius that is declared 0 anyway; visible is what lets the focus
   ring be seen at outline-offset:3px.

   The 34rem cap is the letter's own measure, so the film's right edge lines up
   with the prose above it. At >=992 the column is narrower than the cap and it
   never bites; below 992 it is what stops a 696px-wide film under a 544px
   letter. */
.jd-welcome .videotambal{
  position:relative;                 /* THE HINGE — see the note */
  display:block;                     /* was inline-block; kills the baseline
                                        gap under the picture */
  max-width:34rem;                   /* the letter's own measure */
  margin:30px 0 0;
  overflow:visible;                  /* was hidden — it would clip the ring */
  border-radius:0;
  box-shadow:none;                   /* was 0 1px 11px 0 #438d467a */
  text-decoration:none;
  color:#22331f;
  -webkit-tap-highlight-color:transparent;
}
/* ---------- the film is the right-hand half now (2026-09-16) ----------
   The register that used to fill .jd-w-side is gone from the markup and the
   film moved out of the letter into that column. Two of the values above were
   about sitting UNDER the prose and stop applying once it sits BESIDE it:
   the 34rem cap kept the film's right edge on the paragraph edge above it, and
   the 30px top margin was the gap from the last paragraph. In its own column
   the film takes the column, and its top edge sits on the heading's top edge.
   Below 992 the halves stack again - letter, then film - so the cap comes
   back there (a 696px film under a 544px letter is the thing it prevents) and
   the stacked gap is the letter's own padding-bottom, not a second margin. */
.jd-welcome .jd-w-side .videotambal{ margin-top:0; }
@media (min-width:992px){
  .jd-welcome .jd-w-side .videotambal{ max-width:none; }
}

.jd-welcome .videogallery{
  position:static;                   /* THE HINGE — was relative */
  width:100%;
  line-height:0;                     /* no inline-descender gap under the img */
}
.jd-welcome .overlayy{
  position:static;
  pointer-events:none;               /* the plate is an affordance, not a
                                        second control; the anchor keeps its
                                        whole hit area */
}

/* ---------- the opening --------------------------------------------------
   16/9 IS NOT A CROP DECISION, IT IS A LETTERBOX REMOVAL, AND IT IS EXACT.
   YouTube's hqdefault.jpg is a 480x360 canvas; a 16:9 source arrives inside it
   as 480x270 centred, leaving 45px of black bar top and bottom. Today
   style.css:686/692 set a fixed height on that 4:3 canvas with object-fit:
   cover, so both bars are composited into the frame at every width. With the
   box at 16/9 and the source at 4/3, cover scales to width: rendered height is
   0.75W in a 0.5625W box, so the crop is 0.1875W total, 0.09375W a side —
   which is 12.5% of the rendered height, i.e. 45/360 exactly. The bars are
   removed to the pixel and nothing of the frame is lost.
   At the 526px column this is a 296px-tall opening against the 350px it
   occupies today, so the letter column barely moves.

   `.overlayheight{height:350px}` is 0-1-0 and `.image-overlay{height:232px}`
   is 0-1-0; this rule is 0-2-0 on an element carrying both classes, so
   height:auto settles both without a flag.

   THE BACKGROUND IS THE EMPTY OPENING, and here it earns its keep more than
   anywhere else in the room: this is the section's one cross-origin asset, and
   the one image on this page a corporate proxy, an ad blocker or a dead video
   ID can remove. #dad5c6 is one step deeper than the plane at 1.187:1 — the
   same relationship .gallery's #c3c1b8 holds to its wall at 1.192:1 — with the
   hairline still drawn round it, so the failure renders as a shuttered opening
   rather than as broken-image chrome. The label underneath still names the
   film either way.

   THE LINE IS AN OUTLINE, NOT AN INSET SHADOW, and it has to be — see the
   header. Offset 0 puts it 1px OUTSIDE the content edge, on the paper, never
   on the picture. The radius goes on the <img> directly: there is no carousel
   in this section, so style.css:1557's flagged border-radius:0 never applies
   and the wrapper dodge .gallery needed is not needed here. 6px, .gallery's
   opening figure — an opening cut into the paper, not a card. */
.jd-welcome .image-overlay{
  display:block;
  width:100%;
  height:auto;                       /* kills 232px and .overlayheight's 350px */
  min-height:0;
  aspect-ratio:16 / 9;               /* removes hqdefault's 45px bars exactly */
  object-fit:cover;
  object-position:50% 50%;
  border-radius:6px;
  background:#dad5c6;                /* the empty opening — 1.187:1 */
  outline:1px solid #4f6f52;         /* 4.559:1 — THE LINE */
  outline-offset:0;
  filter:none; -webkit-filter:none;
  transition:outline-color .22s ease;
}

/* ---------- the label ----------------------------------------------------
   THE LINK GETS A NAME. Today the anchor's entire accessible name is the
   thumbnail's alt="Avatar", so this film is announced as "Avatar, link". The
   alt goes null in the markup and a visible label carries the name — the
   version everybody gets rather than the version only a screen reader gets,
   and because it is real visible text inside the anchor, 2.5.3 Label in Name
   is satisfied by construction rather than by an aria-label that would have
   had to be audited against it.

   THE ROW IS 46px BECAUSE THE PLATE IS 46px, and that is the whole sizing
   argument — the same one .gallery's caption row makes. The mark stands at the
   row's right end; the row is exactly as tall as the control's target size;
   the name sits against it. padding-right:58px is 46 plus a 12px stand-off, so
   a long name never runs under the plate; if it wraps, min-height grows, the
   plate stays at bottom:0 and stays level with the last line. Nothing here is
   a magic number and nothing has to be re-tuned if the copy changes. */
.jd-welcome .jd-w-filmlabel{
  display:flex;
  align-items:center;
  min-height:46px;
  margin-top:14px;
  padding-right:58px;
  font-size:17px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.005em;
  color:#22331f;                     /* 10.886:1 */
  transition:color .22s ease;
}

/* ---------- the mark -----------------------------------------------------
   .gallery's PLATE, whole. Same 46px, same 3px radius, same 1px #4f6f52, same
   transparent fill, same bare solid glyph, same #3a5240 hover with the glyph
   inverted to #f7f3e9. Not a variation — the object. See the header for why
   this branch of the page's own rule and not .testimonials' disc.

   AND THE FONT-WEIGHT RESET IS MANDATORY, NOT TIDINESS. style.css:730 sets
   `.overlayy .text i{font-weight:300}` at 0-2-1, which BEATS all.css's
   `.fas{font-weight:900}` at 0-1-0. Weight 300 resolves to the family's 400
   face — fa-regular-400.ttf — and I verified by cmap walk that \f04b is NOT
   MAPPED there. Without the 900 restated at 0-3-1 this plate renders EMPTY,
   and it renders empty SILENTLY: this font's .notdef has loca[0]==loca[1],
   zero bytes, no outline at all, so there is not even a tofu box to notice.
   If a future edit drops this one declaration, the fallback that removes the
   risk entirely is to put `far fa-play-circle` back in the markup — \f144 is
   gid 45 in the regular face — at the cost of a ring drawn inside a square.

   46px clears the 44px floor on both axes on its own, though the real target
   is the whole anchor: 526 x 296 plus the label row. The 2px nudge is optical
   — a play triangle centred on its bounding box reads left of centre — and it
   is the nudge .testimonials already ships for this exact glyph. */
.jd-welcome .overlayy .text{
  position:absolute;
  top:auto; left:auto; right:0; bottom:0;
  transform:none;                    /* was translate(-50%,-50%) */
  -webkit-transform:none;
  -ms-transform:none;
  box-sizing:border-box;
  width:46px; height:46px;
  border-radius:3px;                 /* slight, not square — the plate, and the
                                        deliberate inverse of .testimonials'
                                        round filled disc */
  border:1px solid #4f6f52;          /* 4.559:1 */
  background:transparent;
  box-shadow:none;
  font-size:0;                       /* the div's own whitespace; the <i> is
                                        sized on its own line below */
  color:inherit;
  text-align:center;
  transition:background-color .22s ease, border-color .22s ease;
}
.jd-welcome .overlayy .text i{
  display:block;
  line-height:44px;                  /* 46 less the 1px border top and bottom */
  font-size:17px;                    /* was 90px */
  font-weight:900;                   /* MANDATORY — see the note. Was 300,
                                        which selects the regular face, which
                                        does not contain \f04b. */
  color:#22331f;                     /* 10.886:1; was #1690f0 */
  opacity:1;                         /* was .5 */
  transform:translateX(2px);         /* optical centring of the triangle */
  transition:color .22s ease;
}

/* ---------- hover and press ----------------------------------------------
   Gated on (hover:hover) so a touch device never inherits a stuck state.

   NOTHING MOVES AND NOTHING IS OVERLAID — .gallery's answer, one room on.
   Three things respond, all at the edges, and every one RAISES a measured
   ratio rather than lowering one: the opening's line firms #4f6f52 -> #2b3f2f
   (4.559 -> 9.164:1), the plate fills to #3a5240 with its glyph inverted to
   #f7f3e9 (7.701:1, ground-independent), and the name goes #22331f -> #1d2c20
   (10.886 -> 11.858:1). The plate's fill is the same #3a5240 the gallery's
   plate and both nav chevrons take, so pointing at this film and pointing at a
   photograph do the same thing to the same object.

   THE 0-4-1 IS NOT PADDING. style.css:736 is
   `.videogallery:hover .overlayy .text i{opacity:10}` at 0-3-1 — a number CSS
   clamps to 1, so it does no visible harm, but a tie on an invalid value is
   not a state to leave live and it would win against anything shorter. */
@media (hover:hover){
  .jd-welcome .videotambal:hover .image-overlay{ outline-color:#2b3f2f; }  /* 9.164:1 */
  .jd-welcome .videotambal:hover .overlayy .text{
    background:#3a5240;              /* 6.907:1 on the plane */
    border-color:#3a5240;
  }
  .jd-welcome .videogallery:hover .overlayy .text i,
  .jd-welcome .videotambal:hover .overlayy .text i{
    color:#f7f3e9;                   /* 7.701:1 on the filled plate */
    opacity:1;
  }
  .jd-welcome .videotambal:hover .jd-w-filmlabel{ color:#1d2c20; }         /* 11.858:1 */
}
/* a press state, because on a touch screen there is no hover to give feedback */
.jd-welcome .videotambal:active .image-overlay{ outline-color:#2b3f2f; }

/* ---------- focus --------------------------------------------------------
   outline-offset is measured from the element's own border box, and the <a>'s
   border box IS the whole object — film plus label row. The ring goes OUTWARD
   onto the paper, where the pairing is always #2b3f2f on #ebe7dc = 9.164:1
   whatever the YouTube thumbnail happens to be; a negative offset would land
   it on a frame nobody here controls.
   AND IT IS NOT CLIPPED, which is computed rather than hoped: a 2px ring at
   3px offset extends 5px, inside the .container's own 12px padding at every
   width, and no ancestor in this section carries overflow:hidden — the one
   that did, .videotambal, is set visible above.
   The focus state mirrors the hover state exactly, so a keyboard reader is
   given the same object a pointer user gets rather than a bare ring. */
.jd-welcome .videotambal:focus:not(:focus-visible){ outline:0; }
.jd-welcome .videotambal:focus-visible{
  outline:2px solid #2b3f2f;         /* 9.164:1 */
  outline-offset:3px;
  border-radius:6px;
}
.jd-welcome .videotambal:focus-visible .image-overlay{ outline-color:#2b3f2f; }
.jd-welcome .videotambal:focus-visible .overlayy .text{
  background:#3a5240; border-color:#3a5240;
}
.jd-welcome .videotambal:focus-visible .overlayy .text i{ color:#f7f3e9; }
.jd-welcome .videotambal:focus-visible .jd-w-filmlabel{ color:#1d2c20; }

/* ==========================================================================
   THE REGISTER — the section's one gesture
   ========================================================================== */

/* ---------- the rows -----------------------------------------------------
   The authored 2x2 becomes one column. `.jd-welcome .jd-w-register > div` is
   0-2-1 against Bootstrap's `.col-lg-6` and `.col-md-6`, both 0-1-0, so it
   wins with no flag and at every width — the classes are on the elements
   regardless of which media block is live, so no breakpoint has to know about
   this. `> div` is used rather than `> [class*="col-"]`: a substring attribute
   selector would match any future class containing "col-" on a direct child,
   and the four wrappers are the only elements this row will ever hold.
   The gutters go to zero through Bootstrap's OWN custom properties, which
   carry no !important — the way .g-2 is meant to be overridden — and .mt-1 and
   .g-2 are removed in markup anyway, so no negative margin is left dangling.

   THE JOINTS. 28px above and below with a 1px #4f6f52 hairline between, so the
   entries are 57px apart and the rhythm is one figure rather than a stack of
   guesses. Same colour, same weight and same 4.559:1 as the five picture edges
   and the plate's border: this room is drawn with ONE line and these are three
   of its seven appearances. No joint above the first entry and none below the
   fourth — the register hangs off the top of its column, level with the
   letter's cap-height, and ends where its last paragraph ends. A head rule and
   a foot rule would box the four in, and a box is the one thing a register
   must not be. */
/* >>> 2026-09-16: THE REGISTER MARKUP WAS REMOVED from index.php - the four
   entries (Meaning / Care / Peace / Companionship) no longer exist on the page
   and the film took the column. Every .jd-w-register / .grid / .effect-oscar
   rule from here to the end of this block, and their responsive, contrast,
   forced-colors and print variants further down, now matches NOTHING. They are
   left in place, with their reasoning intact, so the register can be restored
   from _bak/index.php.pre-welcome-2026.09.16 without rebuilding its CSS. <<< */
.jd-welcome .jd-w-register{
  --bs-gutter-x:0;
  --bs-gutter-y:0;
  margin:0;
}
.jd-welcome .jd-w-register > div{
  flex:0 0 100%;
  width:100%;
  max-width:100%;
  margin-top:0;
  padding-left:0;
  padding-right:0;
}
.jd-welcome .jd-w-register > div + div > .grid{
  margin-top:28px;
  padding-top:28px;
  border-top:1px solid #4f6f52;      /* 4.559:1 — THE LINE, third role */
}

/* .grid was position:relative, max-width:1000px, margin:0 auto and
   text-align:center — a 2013 centred block sitting inside a 2021 Bootstrap
   column. All four go. 0-2-0 over style.css:1730's 0-1-0. */
.jd-welcome .grid{
  position:static;
  max-width:none;
  margin:0;
  padding:0;
  text-align:left;
  list-style:none;
}

/* AND THE REGISTER DOES NOT DEPEND ON THE MARKUP EDIT EITHER. index.php:1755
   runs `new WOW().init()` unconditionally, and WOW's applyStyle writes an
   INLINE visibility:hidden on every .wow box at init. Markup edit 4 deletes
   `wow zoomIn` from these four divs and that is the right fix - but the four
   paragraphs are the reason this room was rebuilt, and the file that ships is
   this one. Only an author !important outranks a non-important inline
   declaration. Inert once edit 4 lands; load-bearing the day it does not, or
   the day someone pastes the class back. */
.jd-welcome .jd-w-register .grid{
  visibility:visible !important;
  animation:none !important;
}

/* ---------- the entry ----------------------------------------------------
   THE FLOAT GOES. style.css:1738 makes `.grid figure` float:left inside a
   Bootstrap flex grid, which is why these four have never sat on a shared
   baseline. Flex replaces it. overflow goes VISIBLE (hidden would clip the
   photograph's own outline), the rgba(0,0,0,.9) ground from style.css:1778
   goes transparent, and cursor goes AUTO — style.css:1738 sets pointer on a
   <figure> that is not a link, not a button and has no handler bound to it. A
   pointer cursor on unclickable prose is a lie, and on a page selling to adult
   children researching a home for a parent it is the kind of lie that produces
   a click, no response, and a closed tab.
   0-3-1 against style.css:1738's 0-1-1 and style.css:1778's 0-1-1.

   THE WRAP THRESHOLD IS THE LAYOUT, AND NO MEDIA QUERY OWNS IT. The
   figcaption's flex-basis is 240px, so the flex algorithm itself decides: if
   the plate plus the gap plus 240px fits, the entry is a picture beside a
   paragraph; if it does not, the caption wraps to its own line and takes the
   full width. Measured at six widths against the real Bootstrap containers:
     MEASURED in the browser at each width, not derived from the grid maths -
     the gap is 22px below 1200, not 26, and the 992 row moved when the
     45/55 rebalance above landed. The CONCLUSION is unchanged either way:
     the row goes side by side from 576 up and wraps below it.

     1440  content 703 - plate 176 - gap 26 = 501 >= 240   -> side by side
     1200  content 647 - plate 156 - gap 26 = 465 >= 240   -> side by side
      992  content 484 - plate 129 - gap 22 = 333 >= 240   -> side by side
      768  content 696 - plate 120 - gap 22 = 554 >= 240   -> side by side
      576  content 516 - plate 120 - gap 22 = 374 >= 240   -> side by side
      375  content 336 - plate 120 - gap 22 = 194 <  240   -> WRAPS, 336px
      320  content 281 - plate 120 - gap 22 = 139 <  240   -> WRAPS, 281px
   So the only widths that stack are the ones where stacking gives the
   paragraph a 296-351px measure instead of a 150-205px one, and the picture
   stays at its 120px floor when it does — no 320px-wide portrait eating half a
   phone screen before a word is read. The content decides, not a breakpoint,
   and it stays right for any future copy length. */
.jd-welcome .grid figure.effect-oscar{
  position:static;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:14px 26px;
  float:none;
  overflow:visible;
  margin:0;
  padding:0;
  text-align:left;
  cursor:auto;                       /* was pointer, on a non-interactive box */
  background:transparent;            /* was rgba(0,0,0,0.9) */
}

/* ---------- the photograph -----------------------------------------------
   11:12 IS THE SOURCES' OWN RATIO AND IT IS EXACT. All four files are 550x600
   — parsed from the VP8 frame headers, not assumed, and uniform across the set
   — so with the box at 11/12 and the source at 11/12, `cover` crops precisely
   nothing and object-position is declared for honesty. aspect-ratio reserves
   each box before decode, so four lazy images cannot reflow the register as
   they arrive, and where the property is unsupported the intrinsic width and
   height attributes land the image on the same pixel anyway.

   THE GREYSCALE GOES, AND SO DOES THE DIMMING. style.css:1746 sets
   `filter:gray` — an invalid value for the standard property, dropped at parse
   — and `-webkit-filter:grayscale(1)`, which IS the same property in Blink and
   is what actually desaturates these four. style.css:1828 then takes the image
   to opacity:.4 on hover. So today four photographs of people are colourless
   at rest and colourful-but-half-erased on hover, which is backwards in both
   states. Both spellings are reset because only the prefixed one is doing the
   work, and an engine honouring only the prefix would keep the desaturation on
   an unprefixed reset alone.

   THE SIZE IS A CLAMP WITH A REAL FLOOR. 120px is not decoration: it is the
   figure that keeps the caption's 240px basis satisfiable at 992, where the
   register's content is only 536px wide, and that keeps the wrap threshold
   above from firing on a desktop. The vw arm bites from about 924 to 1354;
   above 1400 Bootstrap caps the container at 1320 so the plate is pinned at
   176 and stays there to 1920.

   Same 6px opening and same 1px #4f6f52 line as .gallery's twenty and as the
   film above — one edge treatment for every photograph in the bottom third of
   this page. Outline, not inset shadow, for the reason in the header. */
.jd-welcome .grid figure img{
  position:static;
  display:block;
  float:none;
  flex:0 0 auto;
  width:clamp(120px, 13vw, 176px);
  height:auto;
  min-height:0;                      /* was 100% */
  max-width:100%;
  aspect-ratio:11 / 12;              /* 550x600 — zero crop */
  object-fit:cover;
  object-position:50% 50%;
  border-radius:6px;
  background:#dad5c6;                /* the empty opening — 1.187:1 */
  outline:1px solid #4f6f52;         /* 4.559:1 — THE LINE */
  outline-offset:0;
  opacity:1;
  filter:none;
  -webkit-filter:none;               /* the one actually doing it */
  transform:none;
  -webkit-transform:none;
  transition:none;
  -webkit-transition:none;           /* was `all .8s ease-in-out` */
}

/* ---------- the copy -----------------------------------------------------
   THE SECTION'S LARGEST DEFECT, FIXED BY SUBTRACTION.

   The figcaption is absolutely positioned at inset 0 over the photograph
   (style.css:1768), painted #fff, uppercased at 13px (style.css:1756), with a
   1px #efc86f frame drawn by ::before (style.css:1782); its <p> is opacity:0
   transform:scale(0) (style.css:1802) and its <h2> is margin:90% with
   translate3d(0,100%,0) (style.css:1792). Measured on the live page: p opacity
   0 and matrix(0,0,0,0,0,0) at EVERY width, and the h2's computed margin-top
   is 250px at 1440, 178px at 992, 286px at 768 and 292.5px at 390.

   It is NOT converted into a tap target, a disclosure, an accordion, a
   :focus-within trick or an overlay a touch can open. It is made into TEXT.
   The figcaption stops being a layer over the picture and becomes the second
   flex item beside it: static, in the flow, on the paper, in the letter's own
   ink, present in the first paint, at every width from 320 to 1920, on every
   input modality, with JavaScript off, in print, in Reader mode, and to a
   screen reader reading the document in order. A hover-reachability question
   does not arise, because after this nothing is conditioned on hover.

   AND THE OLD ARRANGEMENT WAS NOT MERELY LATE — WHERE IT DID APPEAR IT WAS
   UNDER-CONTRAST. On hover the visible ground is 0.4 x image over 0.6 x
   (rgba(0,0,0,.9) over the section). Over a bright region of a photograph that
   composites to #747473, where the #efc86f name measures 2.932:1 — a fail for
   20px non-bold text — and `text-shadow:1px 1px #000` is not a contrast
   mechanism. The body copy never appeared at all.

   ::before is removed with content:none rather than opacity:0, so the box is
   never generated and style.css:1819's `:hover figcaption::before` has nothing
   left to act on. 0-3-3 against style.css:1782's 0-1-3.

   THE NAME RULE IS GROUPED ON h2 AND h3 ON PURPOSE, AND THIS IS THE ONE PIECE
   OF DEFENSIVENESS IN THE BLOCK. The markup delta recommends h2 -> h3 for the
   four names — a better outline, and it takes them out of style.css:451's
   flagged reach. But a design whose correctness depends on an edit it labels
   optional is not finished, so both spellings are answered here at 0-3-3,
   which beats style.css:1792 (0-1-2), style.css:1815 (0-2-2), style.css:60's
   bare `h3{font-size:30px;font-weight:500;color:#4f6f52;margin-bottom:16px}`
   (0-0-1) and responsive.css:51's `h3{font-size:26px}` (0-0-1) alike. Apply
   the swap, skip it, or apply it to two of the four: the register renders the
   same. FLAG 2 is style.css:451 again, and only under 575.98px, where it is
   harmless on the h3 arm. */
.jd-welcome .grid figure figcaption{
  position:static;                   /* was absolute, inset 0 */
  top:auto; left:auto;
  width:auto; height:auto;
  flex:1 1 240px;                    /* the wrap threshold — see the entry */
  min-width:0;                       /* without it a flex item's automatic
                                        minimum size is its longest word, and
                                        "Companionship" would push the row past
                                        the container at 320 */
  padding:0;                         /* was 1em */
  margin:0;
  color:#3f4a41;                     /* was #fff */
  font-size:16px;                    /* was 13px */
  text-transform:none;               /* was uppercase */
  text-align:left;
  backface-visibility:visible;       /* was hidden — it promoted four boxes to
                                        their own compositing layer for an
                                        effect that no longer exists */
}
.jd-welcome .grid figure.effect-oscar figcaption::before{
  content:none;                      /* the 1px #efc86f frame, never generated */
  display:none;
}
.jd-welcome .grid figure.effect-oscar figcaption h2,
.jd-welcome .grid figure.effect-oscar figcaption h3{
  margin:0 0 8px;                    /* was 90% 0 0 0 */
  padding:0;
  transform:none;                    /* was translate3d(0,100%,0) */
  transition:none;
  font-family:Helvetica, sans-serif;
  font-size:18px !important;         /* FLAG 2 */
  font-weight:700;
  line-height:1.3;
  letter-spacing:.005em;
  color:#22331f;                     /* 10.886:1 — was #efc86f at 2.932:1 over
                                        a bright frame */
  text-transform:none;
  text-shadow:none;                  /* was 1px 1px #000 */
}
.jd-welcome .grid figure.effect-oscar figcaption p{
  margin:0;
  padding:0;                         /* was 0 10px */
  opacity:1;                         /* was 0 */
  transform:none;                    /* was scale(0) */
  transition:none;
  font-size:16px;                    /* was 14px */
  font-weight:400;
  line-height:1.6;                   /* was a hard 16px, i.e. 1.14 at 14px */
  letter-spacing:.005em;
  color:#3f4a41;                     /* 7.497:1 — was #fff */
  text-transform:none;
  overflow-wrap:break-word;
}

/* ---------- hover does nothing, and that is the position -----------------
   Declared explicitly rather than left to source order. style.css:1815, :1819,
   :1825 and :1828 all match at 0-2-2, which my base rules would beat only
   because banner.css loads later — true today, and far too thin a thread when
   the failure mode is a photograph of a person dropping to opacity .4 under
   the reader's cursor. 0-4-2 settles all four outright.
   Gated on (hover:hover) so a touch device never inherits a stuck state.
   NOTHING IN THE FOUR RESPONDS TO A POINTER AT ALL, and that is deliberate:
   they are not links, not buttons and not lightbox triggers, so there is
   nothing to click, and a hover state on a paragraph is a promise of a click
   that never arrives. */
@media (hover:hover){
  .jd-welcome .grid figure.effect-oscar:hover img{
    opacity:1;                       /* was .4 */
    filter:none; -webkit-filter:none;
    transform:none; -webkit-transform:none;   /* was scale(1.01) */
  }
  .jd-welcome .grid figure.effect-oscar:hover figcaption{
    background-color:transparent;
  }
  .jd-welcome .grid figure.effect-oscar:hover figcaption h2,
  .jd-welcome .grid figure.effect-oscar:hover figcaption h3{
    transform:none; margin:0 0 8px;
  }
  .jd-welcome .grid figure.effect-oscar:hover figcaption p{
    opacity:1; transform:none;
  }
}

/* ==========================================================================
   RESPONSIVE — 320 to 1920, desktop-first, matching the file's idiom.
   These blocks share the base rules' specificity and are separated from them
   by source order alone, so they MUST stay below everything above.
   ========================================================================== */

/* 992-1199 is the one band where the 5/7 split costs the letter too much: its
   content falls to 376px, about 44 characters at 17px, just under the 45-75
   measure this block sets as its own standard. Rebalancing to 45/55 there
   gives the letter 408px (~48 characters) and still leaves the register's
   entry paragraph 300px, above the 240px flex basis that decides whether a
   picture and its words sit side by side. No other band needs it. */
@media (min-width:992px) and (max-width:1199.98px){
  .jd-welcome .jd-w-letter{ width:45%; }
  .jd-welcome .jd-w-side{ width:55%; }
}

@media (max-width:1199.98px){
  /* Bootstrap's container is a FIXED 1140 from 1200 to 1399, so the register's
     content is 656px and the caption gets 474 — inside the band, and nothing
     is owed here except the gap, which tightens with the column. */
  .jd-welcome .grid figure.effect-oscar{ gap:14px 22px; }
}

@media (max-width:991.98px){
  /* the two halves stack: letter, then film. (The register is gone.) */
  section.section-gaping.jd-welcome{ padding:44px 0 46px; }
  .jd-welcome .jd-w-letter{ padding-bottom:40px; }   /* the gap `mb-3` used to
                                        pretend to provide, at the one width
                                        where it is actually visible */
}

@media (max-width:767.98px){
  /* The element selector again, so this beats style.css:498's
     `.section-gaping h2{font-size:2rem;margin-bottom:6px}` and every padding
     rule on specificity rather than on source order. 34/36 is the house's
     phone padding, shared with the seven finished rooms. */
  section.section-gaping.jd-welcome{ padding:34px 0 36px; }
  .jd-welcome .jd-w-letter{ padding-bottom:32px; }
  .jd-welcome .jd-w-letter > p{ font-size:16px; line-height:1.68; }
  .jd-welcome .jd-w-letter > p:first-of-type{ font-size:18px; }
  .jd-welcome .jd-w-letter > p:last-of-type{ font-size:18px; margin-top:22px; }
  .jd-welcome .videotambal{ margin-top:24px; }
  .jd-welcome .jd-w-register > div + div > .grid{
    margin-top:24px; padding-top:24px;
  }
}

@media (max-width:575.98px){
  /* THE TWO FLAGS LIVE IN THE BASE RULES, NOT HERE, because the !important
     they answer (style.css:451) has to be beaten wherever it applies and a
     flagged base rule already does that at every width. Nothing else in
     style.css's 575.98 block reaches this section: :471 and :532 are padding
     rules the base 0-2-1 already settles.
     THE PLATE DOES NOT SHRINK. 46px stays at 320 — the 44px floor does not
     move because the screen got smaller — and it still fits: the film row is
     46 + 12 + the label, and "Take a tour of Jagriti Dham" wraps to two lines
     in the 238px that leaves at 320, which is exactly what min-height and
     align-items are there for. */
  .jd-welcome .jd-w-filmlabel{ font-size:16px; padding-right:56px; }
  .jd-welcome .grid figure.effect-oscar{ gap:12px 22px; }
}

/* ==========================================================================
   PREFERENCE AND OUTPUT BRANCHES
   ========================================================================== */

/* ---------- prefers-reduced-motion ---------------------------------------
   The WOW reset comes first. After the markup delta exactly ONE .wow remains
   in this section — the letter column at index.php:1557 — and it carries the
   heading, all five paragraphs and the film. WOW's applyStyle writes an INLINE
   style="visibility:hidden" on it at init, and only an author !important
   outranks a non-important inline declaration.
   `animation` is flagged too, and that is belt-and-braces rather than a
   requirement: I read wow.min.js and applyStyle also writes
   `animationName: b ? "none" : cached`, so the inline name is already `none`
   before any trigger, and in a browser where WOW never runs at all the
   markup's `animation-name:zoomIn` is inert because animate.min.css v3.7.2
   puts `animation-duration:1s` on `.animated` and WOW adds that class only on
   trigger. The flag costs one keyword and removes a dependency on a minified
   third party's ordering. fadeInDown IS opacity-guarded, which is why opacity
   is reset as well as visibility.
   The four .grid divs are no longer .wow at all, so the register is
   independent of the script — on paper as on screen — which is the section's
   most important content made independent of a scroll observer.
   Nothing else here moves: this block declares no animation and no transform
   transition anywhere, so the list is short by construction rather than by
   suppression. */
@media (prefers-reduced-motion:reduce){
  .jd-welcome .wow{
    animation:none !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  .jd-welcome .image-overlay,
  .jd-welcome .overlayy .text,
  .jd-welcome .overlayy .text i,
  .jd-welcome .jd-w-filmlabel{
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
}

/* ---------- prefers-contrast ---------------------------------------------
   Dropping the grain and the light leaves the DECLARED plane, which is lighter
   than the painted one, so every dark-on-light minimum rises at once without a
   single ink value being touched: the heading and the four names 10.886 ->
   10.986:1, the prose 7.497 -> 7.566:1, the opening line and the focus ring
   9.164 -> 9.248:1.

   Then the one line colour takes over what nothing else was carrying: #4f6f52
   collapses to #2b3f2f, 4.601 -> 9.248:1 — a 101% gain on the line that draws
   five photographs, three register joints and the plate's border, in the one
   branch whose entire purpose is more contrast. The heading ornament goes
   solid #6b551f at 5.826:1, from a fading composite at 1.618:1 — the exact
   move .room_features and #floor-plan already make in their own branches. The
   empty opening deepens so it still reads as a recess against the lighter
   plane.

   THE TYPE ITSELF DOES NOT MOVE. It is already 7.5-10.9:1 and darkening it
   further would only harden a room whose subject is warmth.
   Declared AFTER the responsive blocks on purpose — several of these selectors
   tie their base rules and must land last. */
@media (prefers-contrast:more){
  section.section-gaping.jd-welcome{
    background-image:none;
    background-color:#ece8dd;
  }
  .jd-welcome .jd-w-letter > h2::after{
    background:none;
    border-top:1px solid #6b551f;    /* 5.826:1 solid, where the fading
                                        composite reads 1.618:1 */
    height:0;
  }
  .jd-welcome .jd-w-register > div + div > .grid{
    border-top-color:#2b3f2f;        /* 9.248:1, from 4.601:1 */
  }
  .jd-welcome .image-overlay,
  .jd-welcome .grid figure img{
    background:#cec8b6;
    outline-color:#2b3f2f;           /* 9.248:1 */
  }
  .jd-welcome .videotambal:hover .image-overlay{ outline-width:2px; }
  .jd-welcome .overlayy .text{ border-color:#2b3f2f; }   /* 9.248:1 */
}

/* ---------- forced-colors ------------------------------------------------
   forced-colors overrides background-COLOR but leaves background-IMAGE alone,
   so the grain and the light have to be dropped by hand or both survive on top
   of the system Canvas; neither carries information the user's palette cannot
   restate. Declared AFTER prefers-contrast on purpose: Chromium matches both
   under Windows High Contrast and this block has to be the one that lands.
   forced-color-adjust is deliberately NOT set to none anywhere — the point is
   to hand the user's palette control, not take it.

   THIS BRANCH IS CHEAP HERE, AND THAT IS THE SECOND PAYOFF FOR THE OUTLINE.
   box-shadow is not rendered at all under forced-colors. A version of this
   section shipping the green glow on the film and inset rings on the openings
   would have lost both silently and had to restate them; nothing in this room
   is shadow-borne. Every photographic edge is an outline, which IS honoured
   and needs a colour keyword and nothing more, and the one control is already
   a real border. Photographs keep their own colours here, so five
   CanvasText-outlined openings in a Canvas room is exactly the right result,
   and the glyph is a font glyph that takes ButtonText for free.
   NOTHING IS HIDDEN AND NOTHING NEEDS TO BE REVEALED: the four paragraphs are
   ordinary flow content in this branch as in every other. */
@media (forced-colors:active){
  section.section-gaping.jd-welcome{
    background-image:none;
    background-color:Canvas;
  }
  .jd-welcome .jd-w-letter > h2{ color:CanvasText; }
  .jd-welcome .jd-w-letter > h2::after{
    background:none; border-top:1px solid CanvasText; height:0;
  }
  .jd-welcome .jd-w-letter > p,
  .jd-welcome .jd-w-letter > p:first-of-type,
  .jd-welcome .jd-w-letter > p:last-of-type{ color:CanvasText; }
  .jd-welcome .jd-w-register > div + div > .grid{ border-top-color:CanvasText; }
  .jd-welcome .image-overlay,
  .jd-welcome .grid figure img{
    background:Canvas; outline-color:CanvasText;
  }
  .jd-welcome .grid figure.effect-oscar figcaption h2,
  .jd-welcome .grid figure.effect-oscar figcaption h3,
  .jd-welcome .grid figure.effect-oscar figcaption p{ color:CanvasText; }
  .jd-welcome .jd-w-filmlabel{ color:LinkText; }
  .jd-welcome .overlayy .text{
    background:ButtonFace; border:1px solid ButtonText;
  }
  .jd-welcome .overlayy .text i{ color:ButtonText; }
  .jd-welcome .videotambal:hover .overlayy .text{
    background:Highlight; border-color:HighlightText;
  }
  .jd-welcome .videotambal:hover .overlayy .text i{ color:HighlightText; }
  .jd-welcome .videotambal:focus-visible{ outline-color:CanvasText; }
}

/* ---------- print --------------------------------------------------------
   FIRST, or none of the rest matters: WOW.js has written an inline
   style="visibility:hidden" on the letter column and clears it only on scroll.
   Printing fires no scroll and inline styles are media-independent, so without
   this line the section prints with no heading, no letter and no film.

   NOTHING THAT IS CONTENT IS HIDDEN, and after this rebuild that sentence is
   finally true of this section. The whole letter prints. All four entries
   print — photographs, names and paragraphs — which is the difference between
   this version and the one in the file, where a printout of this section is
   four grey photographs with four one-word labels under them, because the copy
   is opacity:0 and printing fires no hover. That single fact is the clearest
   statement of what the defect was.

   What goes is the one piece of furniture that cannot be operated on paper:
   the 46px plate. A plate meaning "press to watch" is a lie in ink, and
   because it stands on the paper beside the film's name rather than on the
   frame, removing it takes nothing off the picture and leaves no hole in any
   corner. The film's LABEL stays, because the name of the film is content and
   "Take a tour of Jagriti Dham" is a true sentence on paper.

   Not promised: the film's own thumbnail. It is cross-origin and a browser
   that blocked it prints an empty frame — which, with alt="", is exactly the
   empty-opening state the background above describes. The four .webp figures
   are local and print normally.

   Ink goes to the edges, which go solid: a 4.6:1 green hairline prints as mud.
   #a89f8a at 2.628:1 is the neutral .senior_living, .testimonials and .gallery
   already print their hairlines in — one value across four rooms.
   break-inside goes on the individual .grid, not on the register: an entry is
   a picture with its own name and paragraph and must not be split, and a
   paginator asked to keep all four together cannot.
   The foot rule exists only on paper. On screen this section closes onto solid
   #4f6f52 and needs no line; in print that plane is gone and the letter would
   run into the address block with nothing between them. */
@media print{
  .jd-welcome .wow{
    visibility:visible !important;
    opacity:1 !important;
    animation:none !important;
  }
  section.section-gaping.jd-welcome{
    padding:24px 0 18pt;
    background-image:none !important;
    background-color:#fff !important;
    border-bottom:1px solid #7f6630;              /* 5.461:1 on white */
  }
  .jd-welcome .jd-w-letter{ padding-bottom:18pt; }
  .jd-welcome .jd-w-letter > h2{
    color:#000; break-after:avoid; page-break-after:avoid;
  }
  .jd-welcome .jd-w-letter > h2::after{
    background:none; border-top:1px solid #a89f8a; height:0;
  }
  .jd-welcome .jd-w-letter > p,
  .jd-welcome .jd-w-letter > p:first-of-type,
  .jd-welcome .jd-w-letter > p:last-of-type{
    color:#000;
    max-width:none;                               /* the page box is the measure */
  }
  .jd-welcome .videotambal{
    margin-top:14pt; max-width:none;
    break-inside:avoid; page-break-inside:avoid;
  }
  .jd-welcome .image-overlay,
  .jd-welcome .grid figure img{
    background:none;
    outline:1px solid #a89f8a;                    /* 2.628:1 on white */
    outline-offset:0;
  }
  /* an affordance, not content — and it takes nothing off a picture with it */
  .jd-welcome .overlayy{ display:none; }
  .jd-welcome .jd-w-filmlabel{
    color:#000; min-height:0; padding-right:0; margin-top:6pt;
  }
  .jd-welcome .jd-w-side{ padding-left:0; }
  .jd-welcome .grid{ break-inside:avoid; page-break-inside:avoid; }
  .jd-welcome .jd-w-register > div + div > .grid{
    margin-top:14pt; padding-top:14pt; border-top-color:#a89f8a;
  }
  .jd-welcome .grid figure.effect-oscar figcaption h2,
  .jd-welcome .grid figure.effect-oscar figcaption h3,
  .jd-welcome .grid figure.effect-oscar figcaption p{ color:#000; }
}

/* ==========================================================================
   THE WELCOME LETTER AND REGISTER, JUSTIFIED — asked for directly
   ==========================================================================

   This overturns a decision the block above argues for at length, so the
   reversal is written down rather than left to look like a later hand edited
   past it. That comment says: NOT JUSTIFIED, because WCAG 1.4.8 asks that
   text not be justified and justified text with automatic hyphenation is
   measurably harder for a 55+ reader, which is this page's whole audience.
   That reasoning has not stopped being true. It is overruled here because the
   call was made deliberately and made before — .live_better (style.css:1932)
   and .senior_living (banner.css:2003) already justify, and this section
   being the one ragged column on the page was the odder outcome of the two.
   Consistency wins; the trade is recorded.

   hyphens:auto is NOT optional company for justify — it is the thing that
   makes it survivable. With no break opportunities the engine can only stretch
   word spaces, and rivers of white open straight down a column at any measure
   short of about 70 characters. Every measure here is shorter than that.
   `<html lang="en">` is set at index.php:2, so the dictionary actually loads —
   without a lang attribute the property silently does nothing and you get the
   rivers anyway. This is why the `hyphens:manual` above had to go: it was
   there to guarantee no word is ever broken, which is exactly the guarantee
   that makes justification fail.

   text-align-last:left stops the FINAL line of each paragraph being stretched
   across the full measure. Browsers do that to a justified block's last line
   if you let them, and on a four-word closing line it is grotesque.

   word-spacing is deliberately left at normal. style.css:1937 sets -0.05em,
   but it is scoped to `.live_better p` and does not reach this section — worth
   saying because it DOES fight the justification engine where it applies, and
   copying it here would be copying a bug.

   THE MEASURES, so the next person can judge the same trade with numbers.
   Measured in the browser, characters at each paragraph's own size:

     width   letter (17px)        register entry (16px)
     1440    501px  ~59 ch        501px  ~59 ch
     1200    465px  ~55 ch        465px  ~55 ch
      992    408px  ~48 ch        333px  ~39 ch   <- reverts to left
      768    696px  ~82 ch        554px  ~65 ch
      576    516px  ~61 ch        374px  ~44 ch
      375    336px  ~40 ch        336px  ~40 ch   <- reverts to left
      320    281px  ~33 ch        281px  ~33 ch   <- reverts to left

   992-1199 GOES BACK TO RAGGED TOO, and that is a correction: the first pass
   of this block kept it justified and claimed hyphens:auto was carrying the
   weight there. Measurement says otherwise. Stretch was sampled per line as
   (rendered space width / natural space width) across every paragraph of both
   kinds, at each width:

     width   letter                        register entry
     1440    2.26x worst,  0% over 2.5x    3.17x worst, 11% over 2.5x
     1200    2.60x worst, 10% over 2.5x    2.92x worst,  5% over 2.5x
      992    3.84x worst, 40% over 2.5x    6.12x worst, 17% over 2.5x   <-- out
      768    2.98x worst, 11% over 2.5x    2.16x worst,  0% over 2.5x
      576    2.99x worst, 17% over 2.5x    3.44x worst, 12% over 2.5x

   A word space stretched past about 2.5x its natural width reads as a hole;
   past 3x the holes line up down the column and that is a river. 992-1199 is
   the only band where that happens at scale — 40% of the letter's lines — and
   a 6.12x space is six normal spaces wide in one gap. The cause is structural,
   not incidental: that is the band where the halves first split two-up, so
   both columns fall to 333-408px while the type stays 16-19px. Nothing in the
   type can fix it and hyphens:auto demonstrably does not.

   So justification ships in three of the five bands and the two where the
   measure collapses are ragged. The alternative — one uniform rule and a
   visible river at a common laptop width — is worse than a treatment that
   changes with the column, which is what a measure-driven decision looks like.

   BELOW 576 IT GOES BACK TO RAGGED RIGHT. At 375 and 320 the measure falls to
   40 and 33 characters, and no hyphenation dictionary saves justification that
   short — the engine runs out of places to put the slack and every line gets
   visible gaps. This is not a hedge against the request; it is the width where
   honouring it literally would produce the thing justification is meant to
   avoid. 575.98px is Bootstrap's own breakpoint, already used four times in
   the block above, so it introduces no new number to the file.               */

.jd-welcome .jd-w-letter > p,
.jd-welcome .grid figure figcaption p{
  text-align:justify;
  text-align-last:left;
  hyphens:auto;
  -webkit-hyphens:auto;
  word-spacing:normal;
}

/* headings, the film's label and the four entry names are NOT touched. A
   justified heading is a justified single line, which is either unchanged or
   stretched into nonsense, and `text-align-last` would not save it. The h3
   arm is named explicitly because figcaption's own text-align:left is what
   they inherit, and this file should say that was a choice. */
.jd-welcome .jd-w-letter > h2,
.jd-welcome .jd-w-filmlabel,
.jd-welcome .grid figure.effect-oscar figcaption h2,
.jd-welcome .grid figure.effect-oscar figcaption h3{
  text-align:left;
  text-align-last:auto;
}

/* the two bands where the measure collapses — see the table above. Same
   declarations, kept as one grouped rule so they cannot drift apart. */
@media (max-width:575.98px),
       (min-width:992px) and (max-width:1199.98px){
  .jd-welcome .jd-w-letter > p,
  .jd-welcome .grid figure figcaption p{
    text-align:left;
    text-align-last:auto;
    hyphens:manual;                  /* back to no word broken at all, which is
                                        the right default once the column is
                                        ragged again */
    -webkit-hyphens:manual;
  }
}

/* Print keeps the justification — a printed column is the one place the
   measure is fixed, generous and known (the print block above sets this
   section to a single column on paper), so the case against it is weakest. */
@media print{
  .jd-welcome .jd-w-letter > p,
  .jd-welcome .grid figure figcaption p{
    text-align:justify;
    text-align-last:left;
    hyphens:auto;
    -webkit-hyphens:auto;
  }
}

/* ==========================================================================
   "LOCATION ADVANTAGES" (.jd-location) — THE BOARD AND THE MAP
   index.php:1653-1686, the last content room on the page, between .jd-welcome
   and the footer, and the only one whose job is logistics rather than
   persuasion. Appended to css/banner.css, which is the LAST of this page's own
   stylesheets (index.php:22, after css/all.css:13, css/bootstrap.min.css:14,
   style.css:15, css/slick.css:16, css/animate.min.css:17,
   css/jquery.fancybox.min.css:18, css/responsive.css:19, css/owl.carousel.css:20
   and css/header.css:21), so every rule below wins on EQUAL specificity by
   source order and needs no flag except the two named FLAG 1 and FLAG 2.

   WAS:
     · NO HEADING ELEMENT AT ALL. Nine sections on this page, eight with an h2;
       this one goes straight from the welcome room's heading to a bare <ul>.
       A screen-reader user listing headings finds nothing between "WE WELCOME
       YOU..." and the footer, and the region has no accessible name.
     · Ten <li> inside a `.section_title` — an element whose entire purpose is
       to hold a heading — carrying no heading, wearing `tick2` (a class with
       NO rules in any stylesheet on this page) and `wow zoomIn` with a
       hard-coded inline style attribute.
     · `<strong>10 km</strong> – Bharat Sevasram Hospital` eight times: the
       measure buried at the head of an en-dash sentence, sorted by distance,
       unlabelled, ten deep. The single most reassuring fact in the section is
       the fifth bullet down a list whose first two entries are not distances.
     · #fff on #4f6f52 at 16px/24px = 5.633:1 (computed, and it matches the
       measured baseline). Passes AA. Fails AAA for an audience of 55+ and
       their adult children.
     · title="" on the iframe — WCAG 4.1.2 / 2.4.1, an unnamed frame.
     · `.row g-0 align-items-center` with a 330px map (style.css:1851) floating
       in the vertical middle of a 414px section, dropping to 225px under 767
       (responsive.css:114 — that block opens at responsive.css:49 and closes
       at 122; it is a 767 rule, NOT a 992 one). 225px of Google Maps is about
       four streets.
     · The street address existed on this page ONLY inside the JSON-LD at
       index.php:59-66 and inside the iframe's cross-origin query string.
       Nowhere a human could read it, copy it or print it.

   *** THE ONE MEASUREMENT THAT DECIDES THIS ROOM ***
   On #4f6f52 the MAXIMUM achievable text contrast is 5.633:1, and that is pure
   #fff. There is no colour — none — that reads at AAA on this ground. The
   green is a ceiling, not a choice. So the question is not "what colour is the
   text" but "WHAT IS ALLOWED TO STAY ON THE GREEN AT ALL", and the answer is:
   the room's name, and nothing else. Everything a reader actually has to read
   comes off the green and onto paper, where it reads at 12.138:1 — a 115%
   improvement on the list that is there today, on the one section of this page
   somebody reads when they are frightened.

   *** THE GROUND IS NOT TOUCHED, AND THAT IS A DECISION, NOT AN OMISSION ***
   Every other rebuilt room re-argued its ground. This one does not, and it is
   the only room on the page where that is the right answer, for two reasons.
     1. THE PAPER BUYS THE CONTRAST OUTRIGHT. The two proposals that darkened
        this ground to #3a5240 bought #f7f3e9 at 7.701:1. The paper plate below
        buys #22331f at 12.138:1 for free. Repainting a wall to gain 7.7 when
        the furniture already gives you 12.1 is spending a brand colour for
        nothing.
     2. THIS GROUND IS THE ONLY ONE ON THE PAGE THAT ANOTHER ROOM'S COMMENT IS
        MEASURED AGAINST. banner.css:6956 states .jd-welcome's foot seam as
        "FOOT this -> .greenbg2 #4f6f52 (index.php:1653, style.css:1837)
        4.559:1, dL* 47.96", and .gallery's block was already forced to correct
        its own foot figures once when a neighbour repainted underneath it.
        Moving this value — or even laying the house grain tile over it, which
        would paint #4f6f52 as #506f53 and turn that seam into 4.545:1 / dL*
        47.88 — would invalidate a measurement in a block that has never been
        wrong, and would require an edit 1,400 lines up in a file this change
        is only supposed to append to. GRAIN WAS CONSIDERED AND DECLINED: it
        buys 0.09 L* of texture nobody can see and costs a cross-file
        correction. No grain, no light gradient, no foot rule. The plinth is
        left exactly as style.css:1837 paints it.
   The ladder is unchanged and the room still holds its seat as the page's
   bridge from its lightest wall to its darkest edge:
     senior_living  L* 95.55 | room_features 93.75 | jd-welcome   92.03
     we_care        L* 89.63 | live_better   89.53 | floor_plan   89.26
     gallery        L* 84.15 | THIS ROOM     43.71 | testimonials 26.67
     footer         L* 13.23
   Both seams are left undrawn and both are measured:
     HEAD  .jd-welcome #ebe7dc -> this #4f6f52   4.559:1, dL* 47.96
     FOOT  this #4f6f52 -> footer #222222        2.833:1, dL* 30.48
   style.css:1837 already puts border-top and border-bottom:2px solid #4f6f52
   on this element — 2px of the section's own colour, which is to say no edge
   at all. Left exactly as it is. A 47.96-unit step at the head and a
   30.48-unit step at the foot are boundaries already; a hairline on either is
   the doubled line this file has refused three times.

   *** THE GOVERNING IDEA: TWO PLATES OF EQUAL WEIGHT ***
   The room holds two objects and they are twins — a paper board and the map,
   same height, same 3px radius, no border on either, both simply laid on the
   green. The green stops being a wall with a list painted on it and becomes a
   plinth carrying two panels, which is what a plinth is for.
   That the map is a light rectangle is the whole argument for the board being
   one too: a dark board beside a light map is an odd pair; two light panels on
   green are a pair. And it is not a new idiom — .testimonials, this page's
   OTHER dark room, cuts .senior_living's own #f7f3e9 sheet and carries it down
   as mount board for exactly this reason (banner.css:3879-3903). One page, two
   dark rooms, one answer.
   MEASURED, and the twins are real: at 1440 the board is 719x668 and the map
   509x668, and the two columns end on the same pixel (857/857). At 1200,
   663x668 / 470x668 (855/855). At 992, 532x718 / 376x718 (897/897).

   *** THE BOARD IS A TIMETABLE, NOT A LIST — AND IT ANSWERS TWO QUESTIONS ***
   The reference page nests <p> inside <h3> eight times. That is invalid — a
   <p> is not permitted inside a heading — but the deeper problem is that it is
   a lie about the content: it would put eight sibling headings into this
   page's outline, each a place name glued to a duration, directly under this
   section's own h2. A heading names a section of content that follows it.
   "Airport" names nothing and introduces nothing. These are not headings; they
   are name/value pairs where the value column is the entire point.
   So: a real <table>. Destination is <th scope="row">, duration is <td>, and
   BOTH COLUMNS ARE NAMED by <th scope="col">. Three things follow that neither
   a <ul> nor a <dl> can do:
     1. A screen reader hitting row six announces "Drive time, 1 hr 21 minutes"
        rather than an orphan string. A <dl> cannot name its value column.
     2. The reader's real task is a cross-row comparison INSIDE the time
        column, which is what a column structure is for.
     3. Auto table layout sizes the time column to its widest cell across ALL
        rows for free — the alignment work a list would need a hard-coded width
        to fake.
   AND THE EIGHT ROWS ARE PARTITIONED INTO THE TWO QUESTIONS THE READER
   ACTUALLY ARRIVES WITH — "Care and everyday needs" and "Getting here, and
   into the city" — as two <tbody> groups, each opened by a
   <th scope="rowgroup" colspan="2">. This is the room's findability answer:
   a reader scanning for "hospital" reads one label, not seven rows.
   THE LOAD-BEARING PART IS THAT NOTHING IS REORDERED. The run stays strictly
   ascending straight across the split — 7, 15, 25, 35, 46, 1:21, 1:40, 1:58 —
   so the groups partition the list without rearranging it, and nothing can
   have been moved to flatter. This room's whole job is to be believed.
   It also DODGES two legacy rules rather than fighting them: with no <li> and
   no <ul> left in the section, style.css:1847 `.greenbg2 li{color:#fff;
   margin:0 0 10px 0}` and responsive.css:113 `.content_box ul{padding-left:0}`
   can no longer reach anything here. `.content_box`, `.tick2` and `.text-left`
   are deleted in markup for the same reason: a class with nothing left to
   style is cheaper to remove than to override.

   AND THE RAGGED LEFT EDGE OF THE TIME COLUMN IS THE ONLY CHART IN THE ROOM.
   The eight durations ascend. Right-aligned, "minutes" stacks into a
   constant-width block, the figures align on their units place immediately
   left of it, and the three "1 hr" rows hang further left than the five that
   are not. MEASURED left edge of the duration text at 1440, sorted: 648, 684,
   694 — three steps, one for the single-digit row, one for the five two-digit
   rows, one for the three "1 hr" rows. The column's left edge steps as you
   read down. Nothing is drawn: the data draws it. This is why the time column
   is right-aligned and NOT centred or padded to a fixed width — either would
   erase the one piece of information design here that cost nothing.

   *** THE ICONS EARN THEIR PLACE ONLY AFTER TWO CHANGES ***
   As inherited from the reference page they do not. TWO OF THE EIGHT ARE THE
   SAME GLYPH: fa-train on both Joka Metro Station and Howrah Railway Station.
   An icon column in which two rows collide is not a scan key, it is a wrong
   scan key.
     · Joka Metro -> fa-subway (U+F239). Howrah -> fa-train (U+F238). Eight
       rows, eight distinct silhouettes, which is the minimum condition for an
       icon to be findable at a glance.
     · images/yoga.webp -> fa-spa (U+F5BB). MEASURED, not assumed: the file is
       28x32 RGBA and every opaque pixel is #9b6f3e — a brown glyph drawn for
       the reference page's BEIGE ground. On paper it would read 4.001:1, below
       the 4.5:1 it would need if it were text and visibly weaker than the
       5.084:1 the vector glyphs carry; more importantly it cannot take
       currentColor, so it would be the ONE symbol in the set that ignores the
       prefers-contrast branch and cannot invert under forced-colors. One font,
       one colour, one size, nine glyphs. The file itself is NOT deleted: it is
       still referenced by /best-luxury-senior-citizen-home-kolkata/.
   THE FONT AWESOME TRAP, ENGAGED AND CLEARED THREE WAYS. css/all.css is FA
   6.1.1 and defines `.fas,.fa-solid{font-family:'Font Awesome 6 Free';
   font-weight:900}`, but the file that @font-face loads — webfonts/
   fa-solid-900.woff2/.ttf — is a FA 5.11.2 binary, so an FA6 class name can
   resolve to a codepoint the shipped font never had. Verified:
     (a) all.css parsed for each class -> codepoint;
     (b) fa-solid-900.ttf parsed directly — cmap format 4 walked, then
         loca/glyf entered for a NON-EMPTY outline (advance width is not a
         presence test; and this font's .notdef has zero bytes, so its tofu is
         a BLANK, which is exactly the failure nobody notices):
           fa-location-dot     U+F3C5  gid 463  2 contours,  96 bytes
           fa-building-columns U+F19C  gid 275  3 contours, 152 bytes
           fa-spa              U+F5BB  gid 728  2 contours, 140 bytes
           fa-hospital         U+F0F8  gid 179  7 contours, 268 bytes
           fa-subway           U+F239  gid 356  5 contours, 204 bytes
           fa-road             U+F018  gid  22  3 contours, 188 bytes
           fa-bus              U+F207  gid 328  4 contours, 224 bytes
           fa-train            U+F238  gid 355  3 contours, 144 bytes
           fa-plane            U+F072  gid  97  1 contour,  128 bytes
     (c) rendered in the live page and each glyph drawn to a canvas and its
         opaque pixels counted: 506 / 566 / 608 / 700 / 670 / 620 / 678 / 638 /
         546. Nine glyphs, nine real marks, zero tofu, all at computed
         font-weight 900 in "Font Awesome 6 Free".
   NOTHING BELOW SETS font-weight ON THE GLYPH, and that is deliberate: the
   .jd-welcome block found that a weight under 400 on an FA element makes CSS
   font matching fall through to fa-regular-400, where most of these codepoints
   are absent. `.fas{font-weight:900}` (0-1-0) is applied to the <i> itself and
   therefore beats the 400/600/700 it would otherwise inherit from its cell.
   Then they are DEMOTED: #4f6f52 at 5.084:1 against the names' 12.138:1, in a
   fixed 24px hanging column so they never disturb the vertical the names start
   on. They are an index margin, not a feature. Every one is aria-hidden and
   duplicated by the text beside it, so nothing here is icon-only.

   *** NOTHING IS DRAWN ON THE MAP ***
   .gallery's rule, inherited rather than re-argued, and here it is also
   forced: the iframe is CROSS-ORIGIN, so nothing inside it can be styled,
   recoloured or read. Any overlay would either need pointer-events:none or it
   would steal pan and zoom from exactly the reader who most needs them. So the
   map gets a frame, a radius, a focus ring and a paper plate behind it, and
   nothing else. THERE IS ALSO NO OUTBOUND "GET DIRECTIONS" LINK: this page is
   bought with Google Ads money and the last section before the footer is not
   where you install an exit.

   SCOPING. Every selector below is anchored on `.jd-location` (added alongside
   `.greenbg2`, which stays as the honest no-CSS fallback) or on one of
   `.jd-l-board`, `.jd-l-where`, `.jd-l-table`, `.jd-l-band`, `.jd-l-map`,
   `.jd-l-boardcol`, `.jd-l-mapcol`. `.jd-location` occurs once in the
   document. `.gmap` is a site-wide class and is NEVER reached bare — only ever
   through `.jd-location`. There is no rule here that can leave this room.

   !important AUDIT — TWO, and that is all:
     FLAG 1  `.jd-location .section_title h2` font-size. TWO flagged rules
             reach this heading and one flag answers both:
               responsive.css:52  .section_title h2{margin-bottom:12px;
                                  font-size:20px!important}   0-1-1, <=767
               style.css:451      .h2, h2{font-size:20px!important;
                                  font-weight:700;margin-bottom:0}
                                  0-0-1 on the h2 branch, <=575.98 (block
                                  opens at style.css:411)
             An important declaration can only be beaten by a MORE SPECIFIC
             important declaration. 0-2-1 with a flag does it.
             margin-bottom and font-weight in both of those rules carry NO
             flag, and neither does responsive.css:21 `.section_title h2{
             font-size:20px}` (0-1-1, 768-1024) or style.css:498
             `.section-gaping h2{font-size:2rem;margin-bottom:6px}` (0-1-1,
             <=767.98). All four are taken at 0-2-1 with nothing. They ARE
             restated below rather than inherited: a font-size that wins beside
             a margin that loses is how a heading loses its air at exactly one
             breakpoint.
             VERIFIED IN THE BROWSER: 34px at 1440, 32.4px at 1200, 26.78px at
             992, 23px at 768 / 576 / 375 / 320.
     FLAG 2  `.jd-location .wow`. WOW.js applyStyle writes an INLINE
             visibility:hidden and animation-name:none on every .wow box at
             init, and new WOW().init() runs unconditionally at index.php:1756.
             Only an author !important outranks a non-important inline
             declaration.
             THE MARKUP DELTA DELETES `wow zoomIn` AND ITS HARD-CODED
             style="visibility: visible; animation-name: zoomIn;" ATTRIBUTE, so
             after a complete deploy this selector matches nothing. It ships
             anyway, and this is the one place where belt-and-braces beats the
             house's own "delete the class instead" rule: index.php and
             css/banner.css go up as two separate files over FTP, and if the
             stylesheet lands and the markup does not, the old wrapper is still
             there with visibility:hidden inline until a scroll fires — so a
             reader who deep-links past this point, or prints, gets a blank
             left half of a live ad-funded page. One flagged declaration
             against a half-applied deploy is much the cheaper risk.
             animate.min.css is v3.7.2 (ZERO `animate__` occurrences), so the
             unprefixed `zoomIn` in the old markup is LIVE, not inert, and its
             0% is opacity:0 — which is why opacity is reset as well as
             visibility.
   Routed around rather than fought:
     style.css:1844 `.greenbg2 .section_title.text-left` — `.text-left` is
       deleted in markup, so the rule loses its hook. The title is centred over
       both plates, which is where the title of a two-panel room belongs, and
       it gets there from style.css:32's own `text-align:center` ON THE h2.
       (Worth naming: style.css:32 sets text-align on the h2 ITSELF, not on
       .section_title, so any future attempt to left-align this heading by
       adding `.text-left` back would silently do nothing.)
     style.css:1851 `.gmap iframe{width:100%;height:330px}` and
       responsive.css:114 `.gmap iframe{height:225px}` are both 0-1-1 and
       unflagged. A media-query rule gains no specificity, so the 0-2-1 base
       rule below beats both in every band and no flag is needed. VERIFIED: the
       map measures 320px at a 700px viewport, not 225px.
     style.css:1556 `.owl-carousel .owl-item img{border-radius:0!important}` —
       there is no carousel and no <img> in this section.
   NO ANIMATION, NO TRANSITION AND NO TRANSFORM IS DECLARED ANYWHERE IN THIS
   BLOCK, and no hover state either. Not a preference — a consequence. A
   timetable does not enter; it is simply there. There is nothing here to
   reveal, so there is nothing to hide.

   EVERY RATIO BELOW IS COMPUTED FROM THE DECLARED VALUES, and the model was
   validated first against the known baseline: it returns #fff on #4f6f52 =
   5.633:1, matching the measured figure to three decimals. Because the ground
   carries no grain and no gradient, the declared value IS the painted value —
   there is no worst case to quote separately, which is the other quiet benefit
   of leaving the plinth alone.
   ========================================================================== */

/* ---------- the plinth ---------------------------------------------------
   Specificity 0-2-1. The element selector is load-bearing, not padding:
   `.section-gaping.jd-location` alone is 0-2-0, which merely TIES
   style.css:471 `.section-gaping:nth-child(odd){padding:15px 0}` and would win
   on source order only — a fact a markup edit anywhere above this section
   could silently flip. `section` settles it outright and also beats
   style.css:14 (background:#fff; padding:30px 0) and style.css:532
   (padding:20px 0 15px 0), both 0-1-0.
   56/60 is the figure seven rebuilt rooms already use. This room stopped being
   a 414px strip and became a room.
   NO background DECLARATION AT ALL. style.css:1837 paints #4f6f52 and that is
   the value .jd-welcome's foot-seam comment is measured against — see the
   header for why it is left untouched. height/width ARE reset: style.css:1837
   sets height:100% and width:100% on .greenbg2, both inert today (a percentage
   height against an auto-height body resolves to auto) and both live again the
   moment anything in the ancestor chain gains a definite height. A stale
   property left inherited is a bug waiting for a stylesheet edit two years
   from now. */
section.section-gaping.jd-location{
  padding:56px 0 60px;
  height:auto;                       /* kills .greenbg2's height:100% */
  width:auto;                        /* kills .greenbg2's width:100%  */
}

/* ---------- the title ----------------------------------------------------
   The room's first heading element, ever. It also names the <section> through
   aria-labelledby, which turns a very long page's last content block into a
   real region landmark — the missing-heading defect and the unnamed-region
   defect answered by one element.
   `.section_title` is KEPT as the wrapper (0-2-0 over style.css:27's
   `.section_title{margin-bottom:20px}`) because it is the hook every other
   finished room's title uses, and WITHOUT `.text-left` so style.css:1844
   cannot reach it.
   #f7f3e9, not #fff: it is the same warm sheet the board below is cut from, so
   the heading and the paper are one material. 5.084:1 on this ground. At
   clamp(23px,2.7vw,34px) BOLD this is large text — over 18.66px bold at every
   width, verified — where the AAA bar is 4.5:1, so it clears AAA-large with a
   13% margin. It is also NEW content: nothing on this page reads worse than it
   did, and the one thing that was here before (the ten <li> at 5.633:1) is now
   on paper at 12.138:1.
   The clamp is BYTE-IDENTICAL to .live_better's, .we_care's, .senior_living's,
   #floor-plan's, .testimonials', .room_features', .gallery's and
   .jd-welcome's. A larger figure here would out-shout them and break the
   descent through the page. */
.jd-location .section_title{ margin-bottom:30px; }

.jd-location .section_title h2{
  font-family:Helvetica, sans-serif;
  font-size:clamp(23px, 2.7vw, 34px) !important;   /* FLAG 1 — see the audit */
  font-weight:700;                   /* restated: style.css:451 sets it unflagged */
  line-height:1.24;
  letter-spacing:.004em;
  color:#f7f3e9;                     /* 5.084:1 on #4f6f52 — AAA at large text */
  margin:0;                          /* restated: style.css:31/451/498 and
                                        responsive.css:52 all set margin-bottom */
  padding:0;
  position:static;                   /* kills style.css:38's position:relative,
                                        which is the only thing making
                                        style.css:41's absolute bar work */
  text-transform:none;
}

/* the ornament every finished room closes its title with. style.css:41
   `.section_title h2:after` is position:absolute with bottom:-5px, left:0,
   right:0, margin:0 auto and a 60x4 solid #cbb279 bar, and it has caused
   overlap bugs on this page more than once. It is neutralised EXPLICITLY —
   static, block, redrawn as flow content, with bottom/left/right unset —
   rather than left to be defeated by position:static on the parent. 0-2-2
   against its 0-1-2.
   Same 58px, same 1px, same rgba(203,178,121,.95), same `18px auto 0` as the
   seven rooms above. Its peak stop composites over this ground to #c5af77 and
   reads 2.621:1 — DECORATIVE RANK, STATED AS DECORATIVE, and the 3:1 bar is
   not claimed for it. It is not darkened to buy a number: eight rooms draw
   this line at this value and the consistency of a signature is worth more
   than a local gain on an element that carries no information. */
.jd-location .section_title h2::after{
  content:"";
  position:static; display:block;
  bottom:auto; left:auto; right:auto;
  width:58px; height:1px;
  margin:18px auto 0;
  background:linear-gradient(90deg,transparent,rgba(203,178,121,.95),transparent);
}

/* ---------- the two plates -----------------------------------------------
   The row KEEPS `g-0`: Bootstrap's gutter works by negative margins on .row
   plus padding on the columns, and g-0 is what this page's zero-horizontal-
   overflow baseline was measured with. The 28px channel between the plates is
   built from 14px of column padding on each facing side instead, which is
   border-box and cannot overflow. MEASURED content gap: 28px at 1440, 1200 and
   992; horizontal overflow 0 at 1440 / 1200 / 992 / 768 / 576 / 375 / 320.
   `align-items-center` is DELETED in markup rather than overridden — a 0-1-0
   Bootstrap utility is cheaper to remove than to answer — and stretch is what
   lets the map match the board's height. The child combinators are not
   decoration: `.jd-location .row` would also match any row added inside either
   column later.
   THE SPLIT IS 7/5, NOT 6/6, AND THE ARGUMENT IS MEASURE, NOT EMPHASIS — the
   same argument .jd-welcome made for its own 5/7 recut. The board holds ten
   rows of two-column text; the map holds no text at all and is legible at any
   size, so the text gets the larger half. At 6/6 the board is 454px at 992 and
   348px at 768 and most of the eight names break over two and three lines. At
   7/5 nothing wraps from 1200 up and only two rows wrap at 992-1199.
   col-md-* IS DROPPED ENTIRELY, which is what makes the plates stack at 992
   instead of surviving as a starved 348px pair through the whole md range.
   Deleting one class is cheaper and more honest than a media query answering
   it. */
.jd-location > .container > .row{ align-items:stretch; }

/* THE BOARD. #f7f3e9 is .senior_living's sheet, carried down onto a dark
   ground exactly as .testimonials does at banner.css:3903. L* 95.90 against
   the plinth's 43.71 — 5.084:1 and dL* 52.19, a step that needs no line drawn
   on it, which is why there is no border and no shadow here. A shadow under a
   panel on a plinth would be the only lighting effect in a room that has none.
   3px is the house plate radius (four other uses in this file); square would
   read as a cut opening rather than a laid panel, and this page's rule is "a
   home, not a resort".
   height:100% lets the board fill its stretched column so the two plates match
   whichever is taller. */
.jd-location .jd-l-board{
  background:#f7f3e9;                /* L* 95.90; 5.084:1 vs the plinth, dL* 52.19 */
  border-radius:3px;
  padding:24px 30px 20px;
  height:100%;
}

/* THE ADDRESS. The two lines the old list opened with — "Within the Merlin
   Greens complex" and "Adjacent to Ibiza Ferns Resort and Spa on Diamond
   Harbour Road" — joined into one sentence and KEPT. They are the only
   statement anywhere on this page of where Jagriti Dham IS, as opposed to how
   long it takes to leave it; the reference page has no equivalent, so dropping
   them loses the address outright, and they are what makes the map's pin mean
   anything rather than a dot the reader has to trust.
   THEY ARE NOT A NINTH ROW: they have no duration, and a row with an empty
   time cell reads as missing data, not as context.
   THEY ARE NOT ON THE GREEN EITHER, and that is this room's governing rule
   applied to its own hardest case. On the plinth the ceiling is 5.633:1; here
   they read at 12.138:1. They sit at the TOP of the board because they frame
   the eight rows rather than footnote them — they say what kind of place this
   is before saying how long it takes to leave it — and because keeping them
   inside the board is what makes the two plates true equal-height twins.
   The glyph hangs in the same 24px column the eight destination names use, so
   the address and the rows are set on one vertical and the icon column runs
   unbroken from the top of the board to the bottom.
   style.css:23 sets p{font-size:15px} and responsive.css:131 drops p to
   13px/300 at 320 — both 0-0-1, both beaten here at 0-2-0 with no flag. */
.jd-location .jd-l-where{
  position:relative;
  margin:0 0 20px;
  padding:0 0 18px 40px;             /* 24px glyph cell + 16px channel */
  font-size:17px;
  line-height:1.55;
  font-weight:700;                   /* NOT 600. Helvetica and its Windows
                                        substitute Arial register 400 and 700
                                        only, so CSS font matching resolves 600
                                        to the 700 face — measured identical,
                                        273.78px advance at both, against
                                        255.09px at 400. Declared is painted.
                                        Same trap already documented for the
                                        .jd-welcome title. */
  color:#22331f;                     /* 12.138:1 on #f7f3e9 */
  border-bottom:1px solid rgba(79,111,82,.20);   /* composites #d5d9cb, 1.297:1 */
}
.jd-location .jd-l-where i{
  position:absolute; left:0; top:0;
  width:24px;
  font-size:17px; line-height:1.55;  /* same box as the text, so it sits on the
                                        first line with no magic offset */
  text-align:center;
  color:#4f6f52;                     /* 5.084:1 — far above the 3:1 a
                                        meaningful graphic owes, deliberately
                                        below the words' 12.138:1 */
}

/* ---------- the timetable ------------------------------------------------
   border-collapse so the row rules are single hairlines rather than doubled at
   every join. */
.jd-location .jd-l-table{
  width:100%;
  border-collapse:collapse;
  margin:0;
}

/* THE COLUMN HEADS — the change that makes the duration a COLUMN instead of a
   trailing bold, and the reason this is a <table> and not a <dl>: they give
   the value column a name a screen reader can announce on every row.
   Sentence case, not uppercase. This file already criticises a 13px uppercase
   caption two rooms above, and all-caps at small sizes is the wrong favour to
   do a reader of 55 and over; the letter-spacing does the work instead.
   #3a5240 = 7.701:1, which clears AAA even at 13px. */
.jd-location .jd-l-table thead th{
  font-family:Helvetica, sans-serif;
  font-size:13px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.08em;
  color:#3a5240;                     /* 7.701:1 on #f7f3e9 */
  padding:0 0 9px;
  text-align:left;
  white-space:nowrap;
  border-bottom:2px solid rgba(79,111,82,.34);   /* composites #bec6b6, 1.587:1 */
}
.jd-location .jd-l-table thead th + th{ text-align:right; }

/* THE TWO QUESTIONS. `<th scope="rowgroup" colspan="2">` at the head of each
   <tbody>: the correct element for a label that heads all the rows in its row
   group, and — unlike the eight <h3>s the reference page would have produced —
   a heading of the table, not of the document. Even where an assistive
   technology ignores scope="rowgroup", the text is still announced in order
   immediately before the rows it introduces, which is exactly what a printed
   table does. The failure mode is verbosity, not loss.
   15px/700 against the rows' 17px/400 — one notch SMALLER but heavier, which
   is the kicker rank — and #2b3f2f at 10.218:1, between the heads' 7.701 and
   the rows' 12.138 so the three ranks are three ranks.
   The first band sits tighter to the column heads than the second does to the
   row above it, because the second is opening a new group after a closed one
   and the first is only continuing the head. */
.jd-location .jd-l-table .jd-l-band th{
  font-family:Helvetica, sans-serif;
  font-size:15px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:.03em;
  color:#2b3f2f;                     /* 10.218:1 on #f7f3e9 */
  text-align:left;
  padding:18px 0 7px;
  border-bottom:1px solid rgba(79,111,82,.20);   /* #d5d9cb, 1.297:1 */
}
.jd-location .jd-l-table tbody:first-of-type .jd-l-band th{ padding-top:14px; }

/* THE DESTINATION CELL. position:relative + padding-left carries the glyph as
   a HANGING mark rather than an inline one, so that when a long name wraps —
   "Bharat Sevasram Hospital & Swaminarayan Temple" wraps below about 1200 —
   the second line starts on the SAME vertical as the first instead of running
   back under the icon. That vertical is what the eye scans, and it was
   verified to hold as a SINGLE x value across all eight rows at 1440, 1200,
   992, 768, 576, 375 and 320.
   vertical-align:baseline (not middle) locks the duration to the FIRST line of
   a wrapped name, so the time column never drifts.
   The attribute selector `th[scope="row"]` rather than a class: it is the
   thing that already distinguishes these cells from the band headers and the
   column heads, it cannot fall out of sync with the markup, and at 0-2-2 it
   sits above everything legacy. */
.jd-location .jd-l-table tbody th[scope="row"]{
  position:relative;
  font-family:Helvetica, sans-serif;
  font-size:17px;
  line-height:1.45;
  font-weight:400;                   /* the NAME is not the emphasis in this
                                        room; the DURATION is */
  color:#22331f;                     /* 12.138:1 on #f7f3e9 */
  text-align:left;
  vertical-align:baseline;
  padding:11px 0 11px 40px;          /* 24px glyph cell + 16px channel */
  border-bottom:1px solid rgba(79,111,82,.20);   /* #d5d9cb, 1.297:1 */
}

/* THE DURATION CELL. width:1% with white-space:nowrap is the idiom that makes
   an auto-layout table shrink a column to its widest cell — here "1 hr 58
   minutes" — and hand every remaining pixel to the names. nowrap because
   "1 hr 58 / minutes" broken over two lines turns one number into two.
   tabular-nums is belt and braces: Helvetica and its Windows substitute Arial
   already duplex their digits, so the figures align with or without it — this
   only guarantees it if the stack ever changes. font-feature-settings covers
   engines that do not implement font-variant-numeric.
   MEASURED: the right edge of the duration text is a single x value on all
   eight rows at every tested width. */
.jd-location .jd-l-table tbody td{
  width:1%;
  white-space:nowrap;
  font-family:Helvetica, sans-serif;
  font-size:17px;
  line-height:1.45;
  font-weight:700;
  color:#22331f;                     /* 12.138:1 on #f7f3e9 */
  text-align:right;
  vertical-align:baseline;
  padding:11px 0 11px 20px;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  border-bottom:1px solid rgba(79,111,82,.20);
}

/* The last row's own rule is dropped and the closing line is carried by the
   caption's border-top instead — see the caption. Doing it there rather than
   here also sidesteps border-collapse's conflict resolution, which resolves a
   2px cell border against its neighbours and rounds the used width to device
   pixels; a border on the caption is outside the collapsing model and is
   simply the width it says it is. */
.jd-location .jd-l-table tbody:last-of-type tr:last-child th,
.jd-location .jd-l-table tbody:last-of-type tr:last-child td{ border-bottom:0; }

/* the glyph. Same font-size and line-height as the name so the two share a
   line box and align optically with no magic offset. A 24px box, centred, so a
   wide glyph (fa-building-columns) and a narrow one (fa-road) both leave the
   names starting on the same pixel. NO font-weight — see the FA note in the
   header for why setting one here would be a live bug. */
.jd-location .jd-l-table tbody th[scope="row"] i{
  position:absolute;
  left:0;
  top:11px;                          /* = the cell's own padding-top */
  width:24px;
  font-size:17px;
  line-height:1.45;
  text-align:center;
  color:#4f6f52;                     /* 5.084:1 — the quietest of three ranks */
}

/* THE QUALIFIER — A COPY DECISION, for the owner to confirm the wording. Eight
   traffic-dependent claims on an ad-funded page need a sentence saying they
   are approximate; the numbers themselves are the reference page's exactly and
   not one has been adjusted.
   caption-side:bottom puts it visually where a printed table puts its notes,
   under the closing rule, while a <caption> is still announced FIRST as the
   table's accessible name — so a screen-reader user is told the figures are
   approximate before hearing a single one of them. That is the one place in
   HTML where visual order and announced order can honestly differ, and this is
   the case the element exists for.
   Its border-top is the board's closing rule, matching the column heads' 2px,
   so the eight rows and their two labels sit BRACKETED between two heavier
   lines and read as one block rather than as a list that merely stops.
   15px and #3a5240 at 7.701:1: subordinated by size, never by dimming. A
   qualifier a reader cannot read is not a qualifier. */
.jd-location .jd-l-table caption{
  caption-side:bottom;
  padding:13px 0 0;
  border-top:2px solid rgba(79,111,82,.34);      /* #bec6b6, 1.587:1 */
  font-size:15px;
  line-height:1.5;
  font-weight:400;
  color:#3a5240;                     /* 7.701:1 on #f7f3e9 */
  text-align:left;
}

/* ---------- the map ------------------------------------------------------
   THE PLATE IS PAINTED BEHIND THE FRAME ON PURPOSE. The iframe is
   loading="lazy" and cross-origin, so between layout and paint — and forever,
   if the embed is blocked, offline or rate-limited — the box would otherwise
   be an invisible hole in the green where the twin should be. #ebe7dc is the
   welcome room's own paper: a warm neutral at 4.559:1 against the plinth that
   reads as a deliberate panel and does not clash with the pale tiles Google
   paints over it. Verified by screenshotting the section before the embed
   resolved: it reads as a blank paper plate, not as a fault.
   NO overflow:hidden. It would only be needed to clip a 3px radius the iframe
   already carries itself, and it would clip the focus ring — the only
   affordance in this section — back out of existence.
   THE IFRAME IS ABSOLUTELY POSITIONED, NOT height:100%, and that is the one
   thing here most likely to be "simplified" into a bug. An <iframe> is a
   REPLACED element: given height:auto it does not stretch to its flex or grid
   area, it takes the CSS replaced-element default of 150px. Absolute inset
   against a positioned parent is deterministic at every width and needs no
   definite height anywhere in the chain.
   0-2-1 against style.css:1851 `.gmap iframe{width:100%;height:330px}` and
   responsive.css:114 `.gmap iframe{height:225px}`, both 0-1-1 and unflagged; a
   media query adds no specificity, so a base rule at 0-2-1 beats the 767 rule
   in its own band. No flag. VERIFIED: 320px at a 700px viewport.
   The inline style="border:0" on the element already agrees with border:0
   here, so the two never fight and no flag is needed for that either. */
.jd-location .jd-l-map{
  position:relative;
  height:280px;                      /* the narrowest band's value; the wider
                                        bands and the >=992 stretch override it */
  background:#ebe7dc;                /* 4.559:1 vs the plinth */
  border-radius:3px;
}
.jd-location .jd-l-map iframe{
  position:absolute;
  top:0; left:0;
  display:block;
  width:100%;
  height:100%;
  border:0;
  border-radius:3px;
}

/* THE FOCUS RING. The iframe is the only focusable thing in this section, and
   it IS focusable and scrollable, so it needs a real one. The house pattern:
   never a bare :focus{outline:0}, which removes the ring outright in engines
   with no :focus-visible support and was swept out of this file once already.
   The ring sits OUTSIDE the frame — outline-offset POSITIVE — for two
   independent reasons. First, an inset ring would land on Google's own
   near-white tiles, where #f7f3e9 measures about 1.02:1 and is invisible;
   outside, it lands on this room's plinth at 5.084:1. Second, an inset
   box-shadow is not an alternative at all: inset shadows paint above an
   element's background but BELOW its content, and a rendered iframe is opaque,
   so it would draw nothing. outline is also the only one of the two honoured
   under forced-colors.
   Nothing else here is interactive and nothing gets a hover state: these are
   eight rows of data, not eight controls.
   AND THE :focus-visible ARM ALONE IS NOT ENOUGH, WHICH WAS MEASURED, NOT
   ASSUMED. Blink hands focus straight into the embed's CHILD BROWSING CONTEXT:
   with document.activeElement === this iframe, document.querySelector(':focus')
   is null, iframe.matches(':focus') is false, and .jd-l-map:focus-within is
   false — while a plain <a> in the same page DOES match :focus, so it is not a
   measurement artefact. No selector in the parent document can match. Gecko
   does match iframe:focus, so `:focus` is listed to recover the ring there; the
   .is-focus class, set from js/custom.js off the one signal Blink gives the
   embedding document (a window blur whose activeElement is this frame), is what
   makes it work in Chrome, Edge and Android Chrome — which is most of this
   audience. Without it the section's only focusable control has no author-drawn
   indicator at all in Blink: WCAG 2.4.7. */
.jd-location .jd-l-map iframe:focus:not(:focus-visible){ outline:0; }
.jd-location .jd-l-map iframe:focus,
.jd-location .jd-l-map iframe:focus-visible,
.jd-location .jd-l-map.is-focus iframe{
  outline:3px solid #f7f3e9;         /* 5.084:1 on the plinth, both sides */
  outline-offset:3px;
}

/* ---------- FLAG 2: the WOW tripwire -------------------------------------
   See the audit in the header. This matches nothing after the markup delta; it
   is here because index.php and css/banner.css deploy as two separate files
   and a half-applied deploy would leave the whole left half of this room at
   visibility:hidden until a scroll event fires. */
.jd-location .wow{
  visibility:visible !important;     /* FLAG 2 — answers WOW.js's inline
                                        visibility:hidden (js/wow.min.js,
                                        init at index.php:1756) */
  opacity:1 !important;              /* FLAG 2 — animate.min.css v3.7.2
                                        zoomIn 0%{opacity:0} */
  animation-name:none !important;    /* FLAG 2 */
}

/* ==========================================================================
   BREAKPOINTS
   Bootstrap's own — 991.98 / 767.98 / 575.98 — so the padding steps at the
   same instant the grid does.
   ========================================================================== */

/* >=992 — THE TWO PLATES BECOME EQUAL-HEIGHT TWINS. The map has no intrinsic
   height, so it takes the board's: the map column is a flex container, the map
   is its only item at flex:1 1 auto, and the frame fills that box absolutely.
   MEASURED: board and map both 668px at 1440 and at 1200, both 718px at 992,
   and in all three cases the two columns end on the same pixel.
   min-height:420px is the floor for the day someone shortens the board — 150px
   of Google Maps is not a map, and that is the sort of thing that ships
   silently. It is not binding today at any width.
   The 14px of padding on each facing side is the 28px channel; g-0 on the row
   means there is nothing else to subtract. */
@media (min-width:992px){
  .jd-location .jd-l-boardcol{ padding-right:14px; }
  .jd-location .jd-l-mapcol{ padding-left:14px; display:flex; }
  .jd-location .jd-l-map{
    flex:1 1 auto;
    height:auto;
    min-height:420px;
  }
}

/* <992 — stacked, and THE BOARD COMES FIRST: on a phone the durations are the
   answer and the map is the evidence. DOM order is board then map at every
   width and no `order` is used anywhere — the iframe is focusable, so
   reversing them visually would desynchronise focus order from visual order
   (WCAG 1.3.2 / 2.4.3) and send a keyboard reader backwards up the screen.
   The stack happens here rather than at 768 because col-md-* is deleted in
   markup; the 24px margin is the air the gutter no longer provides.
   The map's height rises with the column's width so the aspect stays sane:
   380 in the 768-991 band (measured 696x380), 320 in 576-767 (516x320), 280
   below 576 (351x280 at 375, 296x280 at 320). */
@media (max-width:991.98px){
  section.section-gaping.jd-location{ padding:44px 0 46px; }
  .jd-location .section_title{ margin-bottom:28px; }
  .jd-location .jd-l-boardcol{ margin-bottom:24px; }
  .jd-location .jd-l-map{ height:380px; }
}

@media (max-width:767.98px){
  section.section-gaping.jd-location{ padding:34px 0 36px; }
  .jd-location .section_title{ margin-bottom:24px; }
  .jd-location .jd-l-board{ padding:22px 22px 18px; }
  .jd-location .jd-l-map{ height:320px; }
}

/* <576 — THE GLYPHS GO, and this is the one place they are not worth their
   width. At 320 the board's content box is 264px and "1 hr 58 minutes" holds
   about 117px of it; the 40px glyph channel would leave the longest name a
   sixteen-character measure. The glyphs were kept upstairs as a scan key for a
   reader sweeping a 719px board. There is no sweep on a phone — the board is
   one column tall and the reader scrolls it — so the aid is worth less than
   the 40px it costs the names, which are the information.
   THE TWO-COLUMN STRUCTURE IS NOT BROKEN INTO STACKED BLOCKS. display:block on
   table cells drops the table out of its formatting context and, in several
   screen readers, out of table semantics with it — losing the "Drive time"
   announcement that is half the reason this is a table. The columns hold at
   every width down to 320, VERIFIED: all eight names on one x, all eight
   durations sharing one right edge, and the ascending staircase still legible
   in the duration column's left edge (175 / 208 / 217 at 320).
   16px is this page's floor for a 55+ reader and the type does not go below
   it. What that costs is wrapping: five of eight rows wrap at 375 and six at
   320, one of them to three lines. That is what a 296px plate can do with a
   46-character label, and it is named in the risks rather than hidden. */
@media (max-width:575.98px){
  .jd-location .jd-l-board{ padding:20px 16px 16px; }
  .jd-location .jd-l-where{
    padding-left:0;
    font-size:16px;
  }
  .jd-location .jd-l-where i{ display:none; }
  .jd-location .jd-l-table tbody th[scope="row"]{
    padding-left:0;
    font-size:16px;
  }
  .jd-location .jd-l-table tbody th[scope="row"] i{ display:none; }
  .jd-location .jd-l-table tbody td{
    font-size:16px;
    padding-left:12px;
  }
  /* the caption is NOT reduced here. It is the only sentence qualifying eight
     traffic-dependent claims, this block's own rule is "a qualifier a reader
     cannot read is not a qualifier", and 16px is the page's floor for a 55+
     reader. It wraps rather than overflowing, so holding it costs about 20px
     of height and zero horizontal overflow — measured at 320. */
  .jd-location .jd-l-map{ height:280px; }
}

/* THE EMBED PANS WITH ONE FINGER ON TOUCH, and below 992 it now spans the whole
   content width, so a vertical drag that begins on it is consumed by the map
   and the page does not move. At 768-991 that is an iPad in portrait — the
   reader this page is written for — and it is a REGRESSION introduced by
   dropping col-md-6, which today leaves a 348px board beside the map to scroll
   on. Chromium and WebKit intersect the embedding element's touch-action into
   the child frame, so this restores vertical page panning with no overlay, no
   JS, and no cost to a mouse: pointer:fine keeps full pan and zoom. */
@media (max-width:991.98px) and (pointer:coarse){
  .jd-location .jd-l-map iframe{ touch-action:pan-y; }
}

/* ==========================================================================
   PREFERENCE AND OUTPUT BRANCHES
   ========================================================================== */

/* ---------- prefers-reduced-motion ---------------------------------------
   Nothing in this room moves, transitions or transforms — no hover, no
   carousel, no reveal — so the list is short by construction rather than by
   suppression, and a blanket transition-duration reset here would be dead code
   of exactly the kind this file does not write.
   What the branch DOES carry is the second half of the WOW guard. The failure
   it protects against — content stranded at visibility:hidden because a scroll
   observer never ran — is precisely the one a reduced-motion reader is most
   likely to be left in if the class is ever pasted back and something
   suppresses the animation that would otherwise have revealed it. */
@media (prefers-reduced-motion:reduce){
  .jd-location .wow{
    animation:none !important;       /* FLAG 2 */
    visibility:visible !important;   /* FLAG 2 */
    opacity:1 !important;            /* FLAG 2 */
  }
}

/* ---------- prefers-contrast ---------------------------------------------
   The ground carries no grain and no gradient, so there is nothing to strip
   and every figure below is a real gain rather than the recovery of a
   modelling loss.
   The ink deepens, the two quiet ranks take over what the modelling was not
   carrying, and — the one hierarchy this branch deliberately breaks — THE
   GLYPHS LEAVE THEIR DEMOTED RANK AND JOIN THE TYPE, from 5.084:1 to 12.138:1.
   At this setting a legible mark is worth more than the tidy three-rank
   hierarchy it breaks, which is the same call .gallery and #floor-plan make in
   their own branches.
   The heading goes to #fff — 5.633:1, the absolute ceiling on this ground —
   and its hairline collapses from a gradient peaking at 2.621:1 to solid
   #cbb279 at 2.732:1 — a small gain in ratio, taken for the larger gain of a
   line of constant weight rather than one that fades out at both ends. Brass on the dark side, where this reader is looking:
   the same move .testimonials makes for its skirting at banner.css:4285.
   The row rules roughly double in weight so the structure a reader has asked
   to see is actually visible. */
@media (prefers-contrast:more){
  .jd-location .section_title h2{ color:#ffffff; }              /* 5.633:1 */
  .jd-location .section_title h2::after{
    background:none;
    border-top:1px solid #cbb279;                               /* 2.732:1 solid */
    height:0;
  }
  .jd-location .jd-l-where,
  .jd-location .jd-l-table tbody th[scope="row"],
  .jd-location .jd-l-table tbody td{ color:#1d2c20; }           /* 13.222:1 */
  .jd-location .jd-l-table .jd-l-band th{ color:#1d2c20; }      /* 13.222:1 */
  .jd-location .jd-l-table thead th,
  .jd-location .jd-l-table caption{ color:#22331f; }            /* 12.138:1 */
  .jd-location .jd-l-where i,
  .jd-location .jd-l-table tbody th[scope="row"] i{ color:#22331f; }  /* 12.138:1 */
  .jd-location .jd-l-where,
  .jd-location .jd-l-table .jd-l-band th,
  .jd-location .jd-l-table tbody th[scope="row"],
  .jd-location .jd-l-table tbody td{ border-bottom-color:rgba(29,44,32,.42); }
  .jd-location .jd-l-table thead th{ border-bottom-color:rgba(29,44,32,.72); }
  .jd-location .jd-l-table caption{ border-top-color:rgba(29,44,32,.72); }
  .jd-location .jd-l-map iframe:focus,
  .jd-location .jd-l-map iframe:focus-visible,
  .jd-location .jd-l-map.is-focus iframe{ outline-color:#ffffff; }
}

/* ---------- forced-colors ------------------------------------------------
   Every authored colour is dropped by the UA, so the work here is structural:
   the paper plate must not vanish into the plinth, and the row rules must
   survive as real edges. Both are restated with system keywords.
   THE HEADING'S ORNAMENT is a background on an empty pseudo-element and would
   be forced to Canvas and disappear, so it is restated as a border-top with
   height:0 — the same idiom .testimonials uses at banner.css:4335.
   THE IFRAME'S INSIDE IS LEFT ALONE. Google's own document decides what a
   forced palette does in there and this document cannot reach in; only the
   frame around it is ours, so it gets a visible border — in this mode the
   embed's own light content is the only thing distinguishing it from the page,
   and that content is not ours to rely on.
   THIS BRANCH IS CHEAP BECAUSE EVERY EDGE IN THE ROOM IS A BORDER OR AN
   OUTLINE. box-shadow is not rendered at all under forced-colors; a version of
   this room that framed the map with a shadow would have lost the frame
   silently.
   Declared AFTER prefers-contrast on purpose — Chromium matches both under
   Windows High Contrast and this block must be the one that lands. */
@media (forced-colors:active){
  .jd-location .jd-l-board{
    background:Canvas;
    border:1px solid CanvasText;
  }
  .jd-location .section_title h2,
  .jd-location .jd-l-where,
  .jd-location .jd-l-table thead th,
  .jd-location .jd-l-table .jd-l-band th,
  .jd-location .jd-l-table tbody th[scope="row"],
  .jd-location .jd-l-table tbody td,
  .jd-location .jd-l-table caption{ color:CanvasText; }
  .jd-location .jd-l-where i,
  .jd-location .jd-l-table tbody th[scope="row"] i{ color:CanvasText; }
  .jd-location .section_title h2::after{
    background:none;
    border-top:1px solid CanvasText;
    height:0;
  }
  .jd-location .jd-l-where,
  .jd-location .jd-l-table thead th,
  .jd-location .jd-l-table .jd-l-band th,
  .jd-location .jd-l-table tbody th[scope="row"],
  .jd-location .jd-l-table tbody td{ border-bottom-color:CanvasText; }
  .jd-location .jd-l-table caption{ border-top-color:CanvasText; }
  .jd-location .jd-l-map{ background:Canvas; }
  /* FLAG 3 — answers the NON-IMPORTANT INLINE style="border:0;" that
     index.php keeps on this iframe as its no-CSS fallback. A style-attribute
     declaration outranks every author rule that is not !important, whatever
     its specificity, so the unflagged version of this rule computes to
     `0px none` and the map has no edge at all in forced colors — while the
     .jd-l-board rule at the top of this branch, which has no inline style to
     beat, resolves to 1px solid CanvasText. Both measured. (The base rule far
     above also loses to that inline declaration; it only LOOKS harmless
     because it happens to declare the same border:0. An inline declaration
     that agrees with you is still an inline declaration.) */
  .jd-location .jd-l-map iframe{ border:1px solid CanvasText !important; }
  .jd-location .jd-l-map iframe:focus,
  .jd-location .jd-l-map iframe:focus-visible,
  .jd-location .jd-l-map.is-focus iframe{ outline-color:Highlight; }
}

/* ---------- print --------------------------------------------------------
   THIS IS THE SECTION SOMEBODY ACTUALLY PRINTS. An adult child takes it to a
   parent, or to a sibling who has not seen the place. So everything that is
   content prints: the heading, the address, both group labels, all eight rows
   and the caveat. Nothing here is hover-gated, opacity:0 or animation-gated,
   so there is nothing to rescue — the WOW reset at the top is only for the
   half-applied-deploy case named in FLAG 2.
   THE MAP IS REMOVED. A lazy, cross-origin embed prints blank or as a single
   grey tile far more often than it prints a map, and a grey slab where the
   address should be is worse than no map at all. The address prints as words a
   few centimetres above it, which is the part somebody can act on.
   VERIFIED by applying this branch's rules as an ordinary stylesheet at a
   1440px viewport: the map column goes to display:none, the board takes the
   full 1256px container, all eight rows return to one line, the destination
   column and the duration column each hold a single x, and horizontal overflow
   is 0.
   Ink goes to #000 and the hairlines go solid #a89f8a at 2.628:1 on white —
   the value .senior_living, .testimonials, .gallery and .jd-welcome already
   print their hairlines in. One number across five rooms.
   The foot rule exists only on paper. On screen this room closes onto the
   footer's #222222 and that 30.48-unit step is the boundary; in print the
   footer's plane is gone and the board would run into whatever follows with
   nothing between. #7f6630 at 5.461:1 on white is the value .jd-welcome prints
   its own foot rule in.
   break-inside on the ROW, not on the table: a row is a place and its duration
   and must not be split, but a paginator asked to keep all ten together
   cannot. break-after:avoid on the band headers stops a group label being
   orphaned at the foot of a page with its rows on the next one.
   NOT ONE !important IN THIS BRANCH except the WOW guard that owns FLAG 2.
   Every rule here is the same 0-2-1 / 0-2-2 as the screen rule it replaces and
   sits later in the file, so it lands on source order. In particular
   `section.section-gaping.jd-location{background-color:#fff}` at 0-2-1 beats
   style.css:1837 `.greenbg2{background:#4f6f52}` at 0-1-0 with nothing. An
   !important that is not answering an !important or an inline style is a note
   saying "I did not check", and this file does not write those. */
@media print{
  .jd-location .wow{
    visibility:visible !important;   /* FLAG 2 */
    opacity:1 !important;            /* FLAG 2 */
    animation:none !important;       /* FLAG 2 */
  }
  section.section-gaping.jd-location{
    padding:24px 0 18pt;
    background-color:#ffffff;        /* 0-2-1 over style.css:1837 — no flag */
    border-top:0;
    border-bottom:1px solid #7f6630; /* 5.461:1 on white */
  }
  .jd-location .section_title{ margin-bottom:18pt; }
  .jd-location .section_title h2{
    color:#000;
    break-after:avoid; page-break-after:avoid;
  }
  .jd-location .section_title h2::after{
    background:none;
    border-top:1px solid #a89f8a;    /* 2.628:1 on white */
    height:0;
  }
  .jd-location .jd-l-mapcol{ display:none; }
  .jd-location .jd-l-boardcol{
    flex:0 0 100%;
    max-width:100%;
    width:100%;
    padding:0;
    margin:0;
  }
  .jd-location .jd-l-board{
    background:none;
    padding:0;
    border-radius:0;
    height:auto;
  }
  .jd-location .jd-l-where,
  .jd-location .jd-l-table thead th,
  .jd-location .jd-l-table .jd-l-band th,
  .jd-location .jd-l-table tbody th[scope="row"],
  .jd-location .jd-l-table tbody td,
  .jd-location .jd-l-table caption{ color:#000; }
  .jd-location .jd-l-where i,
  .jd-location .jd-l-table tbody th[scope="row"] i{ color:#000; }
  .jd-location .jd-l-where,
  .jd-location .jd-l-table .jd-l-band th,
  .jd-location .jd-l-table tbody th[scope="row"],
  .jd-location .jd-l-table tbody td{ border-bottom-color:#a89f8a; }
  .jd-location .jd-l-table thead th{ border-bottom-color:#a89f8a; }
  .jd-location .jd-l-table caption{ border-top-color:#a89f8a; }
  .jd-location .jd-l-table .jd-l-band th{
    break-after:avoid; page-break-after:avoid;
  }
  .jd-location .jd-l-table tbody tr{
    break-inside:avoid; page-break-inside:avoid;
  }
}


/* ==========================================================================
   EQUAL HALVES — the two plates set to the same width, on request
   ==========================================================================

   The board and the map were col-lg-7 / col-lg-5. They are now col-lg-6 /
   col-lg-6, so the paper plate and the map read as a deliberate pair rather
   than as a wide thing beside a narrow thing. Measured equal to the pixel at
   992 / 1100 / 1200 / 1366 / 1440 / 1920, and they remain equal-HEIGHT twins
   at every one of those widths, which is what makes the pairing work.

   WHAT IT COSTS, MEASURED, BECAUSE IT IS NOT FREE. The destination column is
   sized by one label — "Bharat Sevasram Hospital & Swaminarayan Temple", 390px
   at 17px in this stack — and the duration column by one value, "1 hour 58
   minutes" at 128px. A half-width plate at 1440 gives the table 554px of
   content where a wrap-free longest row needs about 578px, so THAT ONE ROW
   WRAPS TO TWO LINES at every width from 1200 up. It is a 24px deficit and no
   honest trim closes it: the variant below was measured at board padding 20px,
   icon channel 36px and duration gutter 16px, and the hospital row still
   wrapped at 1440. The old 7/5 split cleared it because the board was 719px.

   That is the whole price, and it is paid by one row of eight. Both alignment
   guarantees the board is built on survive it — measured at every width, the
   destination column holds ONE left edge and the duration column ONE right
   edge, so the eye still runs down a single vertical and the ascending
   staircase of the durations is intact. A wrapped label is looser, not broken.
   If zero wrapping is ever wanted back, there are exactly three levers and no
   fourth: return to col-lg-7/col-lg-5, shorten that one label (it is really
   two destinations joined by an ampersand), or drop the type below this page's
   16px floor — which is not available for a 55+ reader.

   THE TRIM BELOW RUNS 992-1365 AND STOPS THERE, and the endpoint is measured
   rather than chosen. Pulling the board's padding in to 20px and the two
   gutters in by 4px each buys a whole line back at 992-1199 (five wrapped
   names become four) and another at 1200-1365 (two become one). At 1366 and
   up the identical trim buys NOTHING — the hospital row wraps either way — so
   the plate keeps its generous 30px there rather than paying for a line it
   does not get. Generous where there is room, tight only where a line is
   actually bought. 1365.98 is not a Bootstrap breakpoint and is not pretending
   to be one: it is the width at which this trim stops earning its keep.      */
@media (min-width:992px) and (max-width:1365.98px){
  .jd-location .jd-l-board{ padding:24px 20px 20px; }
  .jd-location .jd-l-where,
  .jd-location .jd-l-table tbody th[scope="row"]{ padding-left:36px; }
  .jd-location .jd-l-table tbody td{ padding-left:16px; }
}


/* ==========================================================================
   THE CHIP AND THE PILL — the Infinity Heights location treatment, ported
   ==========================================================================

   Asked for directly: make the icons and the timings look and behave like
   /guwahati-location/ on infinityheights.in. I read that page's live rules
   rather than eyeballing it, so this is a port of the actual mechanism:

     .location-detail ul li      display:flex; gap:14px; padding:10px;
                                 border-bottom:1px solid #eef1ef;
                                 border-radius:8px;
                                 transition:background-color .25s
     .location-detail ul li:hover        background:rgba(0,106,52,.05)
     .location-detail ul li i    38x38; line-height:36px; border-radius:50%;
                                 color:var(--green);
                                 background:rgba(0,106,52,.1);
                                 border:1px solid rgba(0,106,52,.18);
                                 transition:background-color/color/border .25s
     .location-detail ul li:hover i      background+border:var(--green);
                                         color:#fff
     .location-detail ul li h3 strong    float:right; background:var(--green);
                                 color:#fff; padding:4px 13px;
                                 border-radius:40px; font-size:13px;
                                 font-weight:600; white-space:nowrap

   THREE THINGS ARE DELIBERATELY NOT COPIED, and each is a correction rather
   than a preference:

   1. THE GREEN. That page's --green is rgb(0,106,52) on a WHITE card. This
      board is #f7f3e9 paper on a #4f6f52 plane, and this page's greens are
      #4f6f52 / #3a5240 / #2b3f2f. Importing another site's brand green would
      put a colour on this page that appears nowhere else in it. Every value
      below is this page's own palette at the same ROLE.

   2. THE FLEX ROW. That page's row is a <li> and can be a flex container.
      This one is a <tr> whose two cells are what give the board its single
      destination-column left edge and single duration-column right edge —
      the alignment the whole section is built on. `display:flex` on a <th>
      takes the cell out of table layout and the columns stop agreeing. So
      the chip stays ABSOLUTELY POSITIONED in the cell it already lived in
      and the cell's left padding grows to make room. Identical result,
      table layout intact. Measured: one left edge and one right edge at
      every width, before and after.

   3. THE HOVER-ONLY INVERT. It is decoration on both sites, not information:
      the glyph, the name and the duration are all fully legible at rest, and
      nothing is revealed by pointing at a row. That is why it is allowed here
      at all — this file's standing rule is that an affordance may be enhanced
      by hover but content may never be hidden behind it. On a phone the rows
      simply sit in their resting state, which is the finished state.        */

/* ---------- the row -------------------------------------------------------
   The tint is the faintest step this palette has: rgba(79,111,82,.06)
   composites over #f7f3e9 to #f1eee5, which is 1.026:1 against the plate. It
   is meant to be felt rather than seen, and it must stay under the 1.297:1 of
   the row rule below it or the tint would read as a stronger line than the
   divider it sits between. :hover only, never :focus-within — nothing in a
   row is focusable, so a focus tint would be a promise of an affordance that
   is not there. */
.jd-location .jd-l-table tbody tr:not(.jd-l-band){
  transition:background-color .25s ease;
}
.jd-location .jd-l-table tbody tr:not(.jd-l-band):hover{
  background-color:rgba(79,111,82,.06);
}

/* ---------- the chip ------------------------------------------------------
   38px is the reference's own figure and it survives the port for a better
   reason than fidelity: it is the first thing in this room big enough to be a
   target if it ever becomes one, and at 17px type it sits exactly between the
   cap height and the line box, so the chips draw a second vertical down the
   board without crowding the names.
   The cell's padding-left goes 40px -> 52px: 38px chip + 14px channel, which
   is the reference's gap to the character. `top` is computed, not guessed —
   the cell's own 11px padding-top plus half the difference between the 24.65px
   line box (17px x 1.45) and the 38px chip, so the chip's centre lands on the
   first line's centre rather than on its baseline. */
.jd-location .jd-l-table tbody th[scope="row"]{
  padding-left:52px;
}
.jd-location .jd-l-table tbody th[scope="row"] i{
  top:4px;                           /* 11 - (38 - 24.65)/2 = 4.3, rounded */
  width:38px;
  height:38px;
  line-height:36px;                  /* 38 less the two 1px borders */
  font-size:16px;
  text-align:center;
  color:#2b3f2f;                     /* 9.164:1 on the plate at rest */
  background:rgba(79,111,82,.10);    /* composites #eeece1 */
  border:1px solid rgba(79,111,82,.22);
  border-radius:50%;
  box-sizing:border-box;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
/* the invert. #f7f3e9 on #2b3f2f is 9.164:1 — the same ratio as the resting
   pair, reversed, so the chip changes state without changing legibility. */
.jd-location .jd-l-table tbody tr:not(.jd-l-band):hover th[scope="row"] i{
  background:#2b3f2f;
  border-color:#2b3f2f;
  color:#f7f3e9;
}

/* ---------- the pill ------------------------------------------------------
   The duration stops being right-aligned text and becomes a badge, which is
   the reference's most visible idea and the one that reads at a glance. It is
   the only filled object on the plate, so it is also the only thing that can
   carry the section's answer without a label.
   #f7f3e9 on #2b3f2f = 9.164:1. The pill's text is 13px/600, so it is NOT
   large text and the bar it must clear is 4.5:1; 9.164 clears it twice over,
   which matters because this is the one string in the room a reader is
   actually hunting for.
   `display:inline-block` and the td's own text-align:right keep the pill's
   RIGHT edge on the single vertical the board is built on — the pills vary in
   width, so their left edges draw the ascending staircase, which is exactly
   what the plain-text version drew and what makes the sorted order visible
   without a sort indicator. */
.jd-location .jd-l-pill{
  display:inline-block;
  padding:4px 13px;
  border-radius:40px;
  background:#2b3f2f;
  color:#f7f3e9;                     /* 9.164:1 */
  font-size:13px;
  font-weight:600;
  line-height:1.5;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
/* the td no longer sets the ink itself — the pill does. What stays is the
   right edge, the nowrap and the column's 1% shrink-to-fit. */
.jd-location .jd-l-table tbody td{
  font-weight:400;
  padding-top:9px;
  padding-bottom:9px;
  vertical-align:middle;
}
.jd-location .jd-l-table tbody th[scope="row"]{
  vertical-align:middle;
}

/* ---------- the two spellings of a duration -------------------------------
   The pill shows "1 hr 21 min" and a screen reader is handed "1 hour 21
   minutes". Both are needed and neither is a compromise:
   - VISUALLY the short form is what makes this a badge rather than a sentence
     in a rounded box, and it is the reference's own register. It also buys
     real width back on a half-width plate — measured below.
   - ALOUD "hr" is not a word. NVDA and eSpeak spell it "H R" and VoiceOver
     reads it as a word; those three rows carry the largest figures in the
     room, which are exactly the ones an adult child is weighing. The full
     form is what is announced, and the visible form is aria-hidden.
   This is the pattern the earlier "1 hr -> 1 hour" fix reached for and did not
   need then, because the text was not yet a badge. */
.jd-location .jd-l-sr{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- narrow ---------------------------------------------------------
   The chips were hidden under 576 when the icon was a bare 24px glyph, on the
   grounds that it bought nothing at that width. A 38px chip is not a bare
   glyph — it is now the strongest thing in the row and the reference's whole
   look — so it comes back, at 30px with a 10px channel, and the names get the
   width back from the pill's shorter string. */
@media (max-width:575.98px){
  .jd-location .jd-l-table tbody th[scope="row"]{
    padding-left:40px;
    font-size:16px;
  }
  .jd-location .jd-l-table tbody th[scope="row"] i{
    display:block;
    top:6px;
    width:30px; height:30px;
    line-height:28px;
    font-size:13px;
  }
  .jd-location .jd-l-pill{
    padding:3px 11px;
    font-size:12px;
  }
}

/* ---------- preference and output branches --------------------------------
   Each of the four is answered for the two new objects specifically; the
   branches already in this block cover everything that was here before.     */

@media (prefers-reduced-motion:reduce){
  /* the .25s cross-fades go. The STATES stay — a chip that inverts instantly
     is still a chip that inverts, and this preference is about motion, not
     about feedback. */
  .jd-location .jd-l-table tbody tr:not(.jd-l-band),
  .jd-location .jd-l-table tbody th[scope="row"] i{
    transition:none;
  }
}

@media (prefers-contrast:more){
  /* the chip's resting fill is a 10% wash and the row tint a 6% one; both are
     under 1.03:1 and are the first things to go when a reader has asked for
     more separation. The chip keeps its ring, at full strength, and the glyph
     goes to the plate's darkest ink. */
  .jd-location .jd-l-table tbody th[scope="row"] i{
    background:none;
    border-color:#2b3f2f;
    color:#1d2c20;                   /* 13.222:1 */
  }
  .jd-location .jd-l-table tbody tr:not(.jd-l-band):hover{
    background-color:rgba(79,111,82,.14);
  }
  .jd-location .jd-l-pill{
    background:#1d2c20;              /* 13.222:1 against #f7f3e9 text */
    color:#f7f3e9;
  }
}

@media (forced-colors:active){
  /* backgrounds and borders are system-assigned here, so the chip is drawn by
     its ring alone and the pill by ButtonFace/ButtonText — the pair the OS
     already uses for "a small filled object carrying a value". The hover
     invert maps onto Highlight, which is what the system means by "the thing
     under the pointer". */
  .jd-location .jd-l-table tbody th[scope="row"] i{
    background:Canvas;
    border-color:CanvasText;
    color:CanvasText;
  }
  .jd-location .jd-l-table tbody tr:not(.jd-l-band):hover th[scope="row"] i{
    background:Highlight;
    border-color:Highlight;
    color:HighlightText;
  }
  .jd-location .jd-l-pill{
    background:ButtonFace;
    color:ButtonText;
    border:1px solid ButtonText;
  }
  .jd-location .jd-l-table tbody tr:not(.jd-l-band):hover{
    background-color:Canvas;
  }
}

@media print{
  /* a filled pill and a filled chip are both ink the printer has no reason to
     lay down — this branch already turns the board back into a plain sheet.
     The pill becomes a ruled outline so the duration is still visibly a
     distinct value, and the chip becomes its glyph again. */
  .jd-location .jd-l-table tbody tr:not(.jd-l-band):hover{ background:none; }
  .jd-location .jd-l-table tbody th[scope="row"] i{
    background:none;
    border:0;
    color:#000;
    width:24px; height:auto;
    line-height:inherit;
    top:9pt;
  }
  .jd-location .jd-l-table tbody th[scope="row"]{ padding-left:34px; }
  .jd-location .jd-l-pill{
    background:none;
    color:#000;
    border:1px solid #a89f8a;
    padding:1px 8px;
  }
}

/* ==========================================================================
   "PRICING & SERVICES" (.jd-pricing) — THE STATEMENT OF ACCOUNT
   Appended to css/banner.css, which loads LAST (index.php:22, bump ?v=19 ->
   ?v=20), so every rule below wins on EQUAL specificity by source order and
   needs no flag for that alone. The markup is inserted between the
   `<!-- /Facilities  -->` that closes .senior_living (index.php:720) and the
   `<!-- floor plans  -->` at index.php:726.

   ==========================================================================
   THE GROUND — AND THE MEASUREMENT THAT DECIDED IT
   ==========================================================================
   THIS ROOM TAKES NO NEW SEAT IN THE LADDER. That is the finding, not a
   failure to find one, and it is forced by a fact about the room BELOW that
   the settled-plane figures hide.

   #floor-plan does not paint #e5e1d8 at its top. banner.css:2651 lays a
   168deg warm white over it — rgba(255,252,240,.62) at 0, decaying to 0 at
   380px — so its first 380px are LIT. Compositing that light over #e5e1d8 and
   then the grain over both, the top of #floor-plan paints #f4f0e6, L* 94.87.
   .senior_living's foot, by contrast, is at its settled plane (its own light
   has the same 380px throw and that room is ~800px tall), so it paints
   #f5f1e8, L* 95.37.

     THE SEAM THAT EXISTS ON THIS PAGE TODAY IS THEREFORE
       .senior_living foot #f5f1e8 -> #floor-plan TOP #f4f0e6
       1.013:1, dL* 0.50 — very nearly invisible.
     NOT the 1.178:1 / dL* 6.29 that the two SETTLED planes give. That figure
     is real, but it describes two planes that never touch: it is the join
     .senior_living would make with #floor-plan's ground if #floor-plan had no
     light of its own. It has one, and it was tuned to arrive from a light
     room.

   THAT KILLS THE PLINTH. The two unspent papers were measured against the
   painted values, not the declared ones:
     #dad5c6 painted #d9d4c5, L* 84.89 — head seam 1.321:1 against
       .senior_living's foot, and a FOOT SEAM OF 1.304:1 against #floor-plan's
       LIT TOP. Not the 1.125:1 the settled plane suggests. A stone plinth
       here does not merely weaken the foot join; it turns #floor-plan's own
       raking light into a visible bright band at the head of a finished room,
       a band that does not exist today and that no rule in #floor-plan can
       answer, because the light is the room's and the darkness would be ours.
     #ebe7dc painted #eae6db, L* 91.20 — head 1.114:1, foot 1.100:1, BOTH
       weaker than the join they replace, and 0.36 L* from .jd-welcome
       (92.03), which is the same paper with a different name.
   Nothing lighter than #f7f3e9 exists in the palette but #ffffff, which is
   what style.css:14 already paints — so the one section that most needs to
   look deliberate would ship looking undesigned. A green plinth would drop a
   dark band at position six of twelve in a page that descends to #222222.

   SO THIS ROOM TAKES .senior_living's OWN SHEET: #f7f3e9 with that room's
   byte-identical grain tile at opacity .026 (filter id slg -> prg; two
   filters sharing an id in one document collide). Painted plane #f5f1e8,
   Y = 0.885041, L* 95.37.

     HEAD SEAM  .senior_living #f5f1e8 -> .jd-pricing #f5f1e8
                1.000:1, dL* 0.00. The same declared colour and the same
                grain, so the last painted row above and the first painted row
                here are the SAME INTEGER TRIPLE. The join is carried entirely
                by .senior_living's EXISTING brass foot rule (banner.css:1802,
                rgba(203,178,121,.45)), which over this sheet composites to
                #e2d5b6 and reads 1.296:1 from BOTH sides because both sides
                are the same paper. This block declares NO border-top: a
                second line on one seam is a doubled rule.
     FOOT SEAM  .jd-pricing #f5f1e8 -> #floor-plan's LIT TOP #f4f0e6
                1.013:1, dL* 0.50 — BYTE-IDENTICAL TO THE SEAM THAT EXISTS
                TODAY, because the same two materials still meet at the same
                values. Inserting a price list between them changed the page's
                descent by nothing at all. This room draws the same
                border-bottom .senior_living draws there now: the page's brass
                threshold moved down one room, not re-invented.

   NO LIGHT LAYER, AND THAT IS FORCED RATHER THAN LAZY. .live_better,
   .we_care, .senior_living and #floor-plan each rake the same 168deg warm
   white 380px down from their own top, because each is a distinct plane
   catching one light. This room is not a distinct plane — it is the lower
   half of .senior_living's sheet — so a second sun at its own head would
   paint its first row LIGHTER than the row above it and re-open the seam the
   shared ground just closed. One sheet, one light, and this end of it is the
   settled plane. Arithmetic, for anyone tempted to add it back:
   rgba(255,252,240,.62) over this sheet paints #fbf8ef, L* 97.9 — a 1.024:1
   band against .senior_living's foot where there is currently nothing.

   WHAT DISTINGUISHES THE ROOM IS MATERIAL, NOT VALUE. The room above is
   justified prose laid straight on the sheet with no rule anywhere in it.
   This is the only RULED room on the page — three tables with 2px column-head
   rules, hairlines under every row, and four brass thresholds. The two are
   distinguishable with the page desaturated to grey, which is worth more than
   2 L* of tint that the ladder has no room for anyway.

   ==========================================================================
   THE SHAPE PROBLEM
   ==========================================================================
   The reference page sets this content as two equal columns: three money
   tables and a note on the left, a fourteen-item list on the right. Those are
   not two columns of one thing. They are two different DOCUMENTS — a schedule
   of charges and an inventory of what the charges buy — and 6/6 is what you
   get when you pair them because they both happened to be there. Measured, it
   is actively wrong: at 6/6 inside this page's 1256px container the schedule
   gets 628px, which gives ~200px per value column, while "Assisted Care" —
   thirteen characters — is handed a 628px line. The dense half is starved and
   the sparse half padded by the same decision.

   SO NOTHING HERE IS PAIRED FOR SYMMETRY. Each block gets the width its own
   content asks for and the section reads top to bottom the way a statement
   does: the terms, the notes, the inventory. The ONE thing that is ever two
   columns is the two payment MODELS, side by side with a brass rule between
   them, because they are genuine alternatives and that rule says "or" — the
   single piece of information the source's layout loses entirely. It is also
   the defence against this room's only real failure mode: side by side, no
   honest screenshot of the terms can show INR 55,000 without also showing the
   INR 1,30,000 that replaces it.

   ORDER IS THE SOURCE'S OWN, CHECKED RATHER THAN ASSUMED. Rental, deposit,
   alternative model, notes, services — the reference's left column entire,
   then its right. The deposit was considered for the lead because it is the
   larger number and rejected: the monthly rental is the recurring commitment
   that decides affordability, and the deposit is 100% Refundable capital, a
   different kind of number. INR 55,000 is where the eye lands because it is
   FIRST — not because it is bigger. See .jd-p-fig.

   ==========================================================================
   SCOPING
   ==========================================================================
   Every selector is anchored on `.jd-pricing`, which occurs once in the
   document, or on one of the `.jd-p-*` hooks. Verified before writing: zero
   prior occurrences of "jd-pricing" or "jd-p-" in index.php or in this file.
   NOTHING HERE CAN LEAVE THIS ROOM.

   NONE OF THE SOURCE'S CLASS NAMES ARE REUSED, and that is the point. `.bg1`
   has 50 rules in this file, `.bg2` 36, `.tick` 83, `.facilities` 6 — all
   belonging to the FINISHED .senior_living and .room_features directly above.
   Worse, bare unscoped legacy rules would leak straight in: style.css:1711
   `.bg1{}`, :1716 `.bg2{}`, :1724 `.bg2 ul,.bg3 ul{padding:0}`, :1613
   `.bg1 ul li:before,...{color:#9b6f3f}` (3.80:1 on this sheet — a fail),
   :1564 `.tick ul{margin:20px 0 20px 25px}`, :1565, :1567 `.tick ul
   li:before{...transition:all}`, :1941, responsive.css:115
   `.bg1,.bg2,.bg3{padding:0 12px}` and responsive.css:165 `.tick ul li{
   font-size:15px}`. None can reach this block because none of those names
   appears in this markup. The check mark IS the right look for the services
   list and is rebuilt from scratch below.
   `.new_stay`, `.new_stay_left_table`, `.flexible_model`, `.small_txt` and
   `.tc_appli` were verified to have zero rules anywhere and are still not
   used: a clean slate is not a reason to inherit somebody else's vocabulary.

   TABLE DEFAULTS. style.css has NO table/th/td/thead/tbody rules at all, but
   bootstrap.min.css's Reboot does: `table{caption-side:bottom;border-collapse
   :collapse}` and `th{text-align:inherit;text-align:-webkit-match-parent}`.
   Both are restated below rather than relied on. Everything else about these
   tables is authored here.

   ==========================================================================
   !important AUDIT — TWO FLAGS, AND THAT IS ALL
   ==========================================================================
     FLAG 1  `.jd-pricing .section_title h2` font-size. TWO flagged legacy
             rules reach this heading and one flag answers both:
               responsive.css:52  .section_title h2{margin-bottom:12px;
                                  font-size:20px!important}    0-1-1, <=767
               style.css:451      .h2,h2{font-size:20px!important;
                                  font-weight:700;margin-bottom:0}
                                  0-0-1 on the h2 branch, <=575.98
             An important declaration is beaten only by a MORE SPECIFIC
             important declaration; 0-2-1 with a flag does it. Note that
             font-weight and margin-bottom in both of those rules carry NO
             flag, and neither do responsive.css:21 `.section_title h2{
             font-size:20px}` (768-1024) or style.css:498 `.section-gaping h2{
             font-size:2rem;margin-bottom:6px}`. All four are taken at 0-2-1
             with nothing — but they ARE restated rather than inherited,
             because a font-size that wins beside a margin that loses is how a
             heading loses its air at exactly one breakpoint.
     FLAG 2  `.jd-pricing .wow`. WOW.js applyStyle writes an INLINE
             visibility:hidden and animation-name:none onto every .wow box at
             init, and `new WOW().init()` runs unconditionally at
             INDEX.PHP:1793 (verified in the file, not assumed). Only an
             author !important outranks a non-important inline declaration.
             THE MARKUP DELETES `wow slideInDown` AND `wow slideInUp`
             OUTRIGHT, so after a complete deploy this selector matches
             nothing — that deletion is the primary fix, not this rule.
             THIS IS A PRICE LIST AND IT MUST NOT BE GATED BEHIND A SCROLL
             OBSERVER. index.php and css/banner.css go up as two separate
             files over FTP; if the stylesheet lands and the markup does not,
             this rule is what keeps the figures on screen. One flagged
             declaration against a half-applied deploy of a price list on a
             live ad-funded page is much the cheaper risk.
             animate.min.css here is v3.7.2 (verified: ZERO "animate__"
             occurrences), so the unprefixed slideInUp/slideInDown in the
             source markup are LIVE, not inert. Neither carries an opacity
             channel in v3.7.2, so visibility and animation-name are what
             actually matter; opacity is reset anyway because it costs one
             line and covers the day someone swaps in a fade.

   ROUTED AROUND RATHER THAN FOUGHT:
     style.css:14  `.section-gaping{background:#fff;padding:30px 0}` 0-1-0,
       style.css:532 `.section-gaping{padding:20px 0 15px 0}` 0-1-0 (<=575.98)
       and style.css:471 `.section-gaping:nth-child(odd){padding:15px 0}`
       0-2-0 (<=575.98) are all taken by `section.section-gaping.jd-pricing`
       at 0-2-1. THE ELEMENT SELECTOR IS LOAD-BEARING, not padding:
       `.section-gaping.jd-pricing` alone is 0-2-0, which merely TIES
       style.css:471 and would win on source order only — and this section is
       BEING INSERTED into the middle of the page, which is exactly the edit
       that flips such a tie. `section` settles it outright.
       Because no legacy ground class is added, style.css:14's #fff is the
       honest no-CSS fallback: if banner.css fails to load, the room is white
       paper with dark ink, which is a legible price list.
     THE :nth-child PARITY SHIFT, checked rather than hoped. Inserting one
       element flips odd/even for EVERY following sibling, so style.css:471
       lands on a different set of sections than it did before. All seven
       downstream rooms were checked in this file: #floor-plan declares its
       padding at `.section-gaping#floor-plan` (1-1-0, banner.css:2651), and
       .testimonials (3756), .room_features (4722), .gallery (5734),
       .jd-welcome (7218), .jd-location (8703) and .jd-certified all declare
       theirs at `section.section-gaping.X` (0-2-1), each restated inside
       their own <=575.98 branch. Every one out-specifies 0-2-0. NOTHING
       DOWNSTREAM MOVES. This block writes its own padding at 0-2-1 for the
       same reason and so never depends on its own index.
     style.css:60 `h3{font-family:Helvetica;font-size:30px;font-weight:500;
       color:#4f6f52;margin-bottom:16px}` 0-0-1 and responsive.css:51
       `h3{font-size:26px}` 0-0-1 (<=767) are both taken by `.jd-pricing h3`
       at 0-1-1. A media query adds no specificity, so the base rule beats the
       767 rule in its own band. No flag. The inherited #4f6f52 would have put
       all four band headings at 5.016:1; they are restated at 10.083:1.
     style.css:23 `p{font-size:15px}` and responsive.css:131's 13px/300 at
       <=320 are 0-0-1, taken at 0-2-0. font-weight is restated on every <p>
       here: Helvetica has a real Light face on iOS/macOS and 300 on a dated
       price condition at 320px is the thinnest type on the page carrying the
       heaviest meaning.
     style.css:8 `a{color:#4f6f52;text-decoration:none}` 0-0-1 and style.css:9
       `a:hover{text-decoration:none}` 0-1-1. The hover rule is the one that
       matters: an underline that must survive hover has to beat 0-1-1, which
       `.jd-pricing .jd-p-note a:hover` does at 0-3-1.
     style.css:13 `li{list-style:none}` — agreed with, and restated on both
       lists anyway, because a room should not depend on a global it did not
       declare. Reboot's `ul{padding-left:2rem}` is reset for the same reason.
     style.css:27/31/41 `.section_title`, `.section_title h2` and its absolute
       `:after` bar are neutralised explicitly below at 0-2-1 / 0-2-2, the way
       every finished room on this page neutralises them. Worth naming:
       style.css:31 sets text-align:center ON THE h2 ITSELF, so any future
       attempt to left-align this heading by adding a utility class to
       .section_title would silently do nothing.

   NO ANIMATION, NO TRANSITION AND NO TRANSFORM IS DECLARED ANYWHERE IN THIS
   BLOCK, and the only hover state is a text-decoration-thickness on two
   links. That is a consequence, not a preference: a price list does not
   enter, and there is nothing here to reveal, so there is nothing to hide.

   ==========================================================================
   INK — every ratio computed against the PAINTED plane #f5f1e8 (Y 0.885041),
   never the declared #f7f3e9, so each figure is the WORST CASE in the room.
   ==========================================================================
     #22331f  11.977:1  figures, row labels, note and services copy, the two
                        refundability terms, both links
     #2b3f2f  10.083:1  the h2, the four band headings, the concierge line
     #3a5240   7.599:1  column heads, in-cell qualifiers, the T&C line
     #4f6f52   5.016:1  the fourteen check marks and the three note dashes
     #1d2c20  13.047:1  prefers-contrast
   HAIRLINES, composited and stated as decorative rank:
     rgba(79,111,82,.20)   -> #d4d7ca  1.297:1  row rules
     rgba(79,111,82,.34)   -> #bdc5b5  1.582:1  column-head rules, tbody split
     rgba(203,178,121,.45) -> #e2d5b6  1.296:1  the four brass thresholds
     h2 ornament peak      -> #cdb57f  1.776:1  DECORATIVE, and stated so
   Every text rank clears AAA. The smallest type in the room is the 13px
   column head at 7.599:1 — AAA for small text with a 70% margin, deliberately,
   because a column head a reader cannot read turns a number into an
   unattributed number. #4f6f52 at 5.016:1 is used for NO TEXT anywhere in
   this block: it appears only on the check marks and the note dashes, which
   are non-text marks where the bar is 3:1.
   ========================================================================== 
   ==========================================================================
   TWO COPY CHANGES, BOTH DELIBERATE, BOTH RECORDED HERE BECAUSE A PRICE LIST
   THAT DIFFERS FROM ITS SOURCE MUST SAY SO
   ==========================================================================
   1  "applicale Taxes" -> "applicable Taxes", TWICE, in the Zero Deposit
      table's two rental cells. It is the source page's typo, and that same
      source spells it "applicable taxes" correctly in the Standard table
      directly above. THIS IS THE ONLY WORD CHANGED ANYWHERE IN THIS SECTION.
      No figure, no qualifier, no refundability term and no date is altered:
      all thirteen INR cells, both "Nil"s, the "100% Refundable", the
      "Non-Refundable", the "+ GST & applicable taxes" qualifiers and the
      "*Effective from 1st July, 2026" line are carried character for
      character.
   2  "24x7" is set with an ASCII x in all three service items. The source
      mixes an ASCII x ("24x7 In-house medical support") with U+00D7
      MULTIPLICATION SIGN ("24x7 power backup", "24x7 manned security..."):
      one of the two had to win. ASCII was chosen because it is what the first
      of the three already uses, it needs no entity or encoding assumption,
      and it survives being pasted into a plain-text email or an SMS quote to
      a family member. Two characters changed; typography, not a figure.
   */


/* ---------- the ground ---------------------------------------------------
   0-2-1; see the audit for why `section` is load-bearing. 56/60 is the figure
   eight rebuilt rooms already use.
   ONE background-image layer. background-color is the honest fallback: if the
   tile fails to parse the whole background-image declaration is dropped and
   #f7f3e9 remains, on which every ratio above IMPROVES. There is no calc()
   and no math function in it — one unparseable layer invalidates the entire
   declaration, the bug that bit the first pass at .live_better.
   The grain IS laid rather than omitted: without it this room's plane would
   be the ungrained #f7f3e9 and the head seam would open from 1.000:1 to
   1.009:1. fractalNoise averages 0.5 in all four channels, so the tile lays
   1.3% coverage of mid-grey and #f7f3e9 paints #f5f1e8, exactly as it does in
   the room above. 298 bytes. Texture, not dither. background-size is
   deliberately not declared so the tile keeps its intrinsic 120x120. */
section.section-gaping.jd-pricing{
  padding:56px 0 60px;
  background-color:#f7f3e9;          /* painted #f5f1e8 after grain, L* 95.37 */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='prg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23prg)' opacity='.026'/%3E%3C/svg%3E");
  background-repeat:repeat;
  /* NO border-top — .senior_living already draws this seam's threshold at
     banner.css:1802 and a second line on one seam is a doubled rule.
     The foot restates that same threshold so #floor-plan receives the
     identical join it has today: same hex above it, same dL*, same rule. */
  border-bottom:1px solid rgba(203,178,121,.45);   /* -> #e2d5b6, 1.296:1 */
}


/* ---------- the title ----------------------------------------------------
   `.section_title` is KEPT as the wrapper (0-2-0 over style.css:27's
   `margin-bottom:20px`) because it is the hook every finished room's title
   uses. The h2 also names the <section> through aria-labelledby, which makes
   this a real region landmark — the section a reader is most likely to want
   to jump straight to on a 1,800-line page.
   The clamp is BYTE-IDENTICAL to .senior_living's, #floor-plan's,
   .live_better's, .we_care's, .testimonials', .room_features', .gallery's,
   .jd-welcome's, .jd-location's and .jd-certified's. A larger figure would
   out-shout ten rooms and break the descent through the page; a smaller one
   would say the price list matters less than the prose above it. */
.jd-pricing .section_title{ margin-bottom:38px; }

.jd-pricing .section_title h2{
  font-family:Helvetica, sans-serif;
  font-size:clamp(23px, 2.7vw, 34px) !important;   /* FLAG 1 — see the audit */
  font-weight:700;                   /* restated: style.css:451 sets it unflagged */
  line-height:1.24;
  letter-spacing:.004em;
  color:#2b3f2f;                     /* 10.083:1 — the house heading ink, the
                                        same value .senior_living sets its own
                                        headings in on this same sheet */
  margin:0;                          /* restated: style.css:31/451/498 and
                                        responsive.css:52 all set margin-bottom */
  padding:0;
  position:static;                   /* kills style.css:31's position:relative,
                                        the only thing making style.css:41's
                                        absolute bar work */
  text-transform:none;
}

/* the ornament every finished room closes its title with. style.css:41 is
   position:absolute, bottom:-5px, left/right:0, margin:0 auto, 60x4 solid
   #cbb279, and it has caused overlap bugs on this page more than once. It is
   neutralised EXPLICITLY — static, block, redrawn as flow content, with
   bottom/left/right unset — rather than left to be defeated by position:static
   on the parent. 0-2-2 against its 0-1-2.
   Same 58px, same 1px, same rgba(203,178,121,.95), same `18px auto 0` as the
   ten rooms around it. Its peak stop composites to #cdb57f and reads 1.776:1 —
   DECORATIVE RANK, STATED AS DECORATIVE; the 3:1 bar is not claimed for it and
   does not apply. It is not darkened to buy a number: ten rooms draw this line
   at this value and the consistency of a signature is worth more than a local
   gain on an element carrying no information. */
.jd-pricing .section_title h2::after{
  content:"";
  position:static; display:block;
  bottom:auto; left:auto; right:auto;
  width:58px; height:1px;
  margin:18px auto 0;
  background:linear-gradient(90deg,transparent,rgba(203,178,121,.95),transparent);
}


/* ---------- the four band headings ---------------------------------------
   0-1-1, which takes style.css:60 (30px/500/#4f6f52) and responsive.css:51
   (26px) with no flag. clamp() rather than a media step so the heading tracks
   the h2's own clamp instead of jumping at a breakpoint the h2 does not have.

   FOUR FLAT h3s UNDER THE h2 — "Standard Rental and Charges", "Zero Deposit
   Flexible Model:", "Note:" and "Services for Your Hassle-Free Retirement
   Living". The source uses H4 for its three subheads and H6 for "Note:";
   under this page's h2 the first skips a rank and the second skips three,
   which is an outline defect, and h6 there is plainly a request for small
   text rather than a claim about rank. Heading navigation is exactly how a
   low-vision reader finds "what does it cost".
   They are SIBLINGS and not nested because all four qualify the whole
   section: the Note's first two items are conditions on BOTH models, so
   nesting it under "Zero Deposit Flexible Model:" would tell a screen-reader
   user, falsely, that assisted-living charges apply only to that model.
   ALL FOUR ARE SET AT ONE SIZE, including "Note:". A price list that sets its
   conditions smaller than its prices has made an argument, and the conditions
   here are material — the first of them is an open-ended surcharge. The Note
   is subordinated by its 96px footnote rule and its unmarked items, not by
   pretending to a lower rank than it has.
   font-weight:700 and NOT 600: Helvetica and its Windows substitute Arial
   register 400 and 700 only, so CSS font matching resolves 600 to the 700
   face anyway — declared is painted.
   break-after:avoid is declared here rather than only in @media print because
   Chromium honours it in multi-column layout too. */
.jd-pricing .jd-p-band{
  font-family:Helvetica, sans-serif;
  font-size:clamp(19px, 1.55vw, 22px);
  line-height:1.3;
  font-weight:700;
  letter-spacing:.01em;
  color:#2b3f2f;                     /* 10.083:1 on #f5f1e8 */
  margin:0 0 18px;                   /* undoes style.css:60's 16px bottom and
                                        the UA's top margin in one */
  padding:0;
  text-align:left;
  break-after:avoid; page-break-after:avoid;
}


/* ==========================================================================
   BAND 1 — THE TERMS: the two payment models, side by side
   ========================================================================== */

/* CSS Grid, not the Bootstrap row this page uses everywhere else, and the
   reason is the divider. A grid child at the default align-items:stretch is
   the full height of its row whatever its own content is, so a border-left on
   the shorter column runs the FULL height of the band. The Zero Deposit model
   has one table where Standard has two; on a float or flex row sized to
   content the rule would stop halfway down and read as a rendering fault.
   That air under the shorter column is the argument, not a gap: the model is
   shorter because there is less to pay up front.
   No `gap`: the 72px channel is built from 36px of padding on each facing
   side, which is border-box and cannot overflow, and which puts the brass
   rule on a real box edge rather than in a gutter nothing owns.
   THE RULE CARRIES THE ONE PIECE OF INFORMATION THE SOURCE'S LAYOUT LOSES
   ENTIRELY: that these are alternatives. It says "or". Same
   rgba(203,178,121,.45) as the section's own thresholds — one brass line at
   one weight, four times in this room, so a reader learns it once. */
.jd-pricing .jd-p-terms{
  display:grid;
  grid-template-columns:1fr;
  row-gap:40px;
}

/* the gap between Table 1 and Table 2 inside the Standard column. Larger than
   a row gap and smaller than a band gap, because the two tables are two parts
   of one model. */
.jd-pricing .jd-p-model .jd-p-table ~ .jd-p-table{ margin-top:34px; }


/* ---------- the tables ---------------------------------------------------
   border-collapse so the row rules are single hairlines rather than doubled
   at every join, and so a 2px separator resolves against a 1px row rule by
   width (wider wins) instead of stacking. Restated over Reboot's own
   `table{border-collapse:collapse}` rather than relied on.

   table-layout:fixed WITH A SINGLE <col> WIDTH is the whole column model. In
   fixed layout, remaining width is split EQUALLY among columns that declare
   none, so 34% on the first column makes the two value columns exactly 33%
   each — which is what makes "Single Occupancy" and "Double Occupancy"
   directly comparable and puts two evenly-spaced right edges under them. It
   also guarantees the table is exactly 100% of its container at every width:
   a fixed-layout table cannot be pushed wider by its content, so no figure in
   this room can cause horizontal page overflow. That guarantee is dropped
   deliberately at <=575.98 — see that block for the measurement that forces it.

   IDENTICAL PERCENTAGES ON ALL THREE TABLES is why the sheet reads as one
   document. Under table-layout:auto the two stacked tables in the Standard
   column size to their own content — "Monthly Rental Charges" against
   "One-Time Payable Admission Fee" — and their columns misalign by ~40px,
   which looks like a mistake. Fixed at 34/33/33 puts every figure in the room
   on ONE grid, across the divider as well as down it, so the Standard model's
   rent row can be read straight across against the Zero model's. That is the
   comparison the reader came for.
   34/33/33 was measured, not chosen: at the narrowest place the side-by-side
   layout is used (992px viewport, 960px container, 442px model column) the
   label column is 150px and each value column 145px; at the widest (1440
   viewport, 1256px container, 592px model column) they are 201px and 195px.
   "INR 30,00,000" is 6.448em in Helvetica Bold (INR 1.722 + space .278 +
   7 digits x .556 + 2 commas x .278), which at 20px is 129px — inside a 133px
   content box at the worst case. */
.jd-pricing .jd-p-table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  margin:0;
}
.jd-pricing .jd-p-table col:first-child{ width:34%; }

/* THE COLUMN HEADS. This is why these are <table>s and not <dl>s:
   <th scope="col"> gives every value column a name a screen reader announces
   on every single cell, so "INR 35,00,000" is never heard without "South
   Facing Rooms (Lawn Facing)" attached to it. On a price list that is not a
   nicety, it is the difference between a price and a number.
   Sentence case, not uppercase — all-caps at 13px is the wrong favour to do a
   reader of 55 and over, and this file already criticises a 13px uppercase
   caption three rooms above. The letter-spacing does that work instead.
   text-align:left is restated over Reboot's `th{text-align:inherit}`.
   vertical-align:bottom so a head that wraps to two or three lines still sits
   its LAST line on the rule, and the rule stays one unbroken line across all
   three columns whatever their individual heights.
   overflow-wrap:break-word because fixed layout will not widen for a long
   head: without it "(Temple Facing)" can paint outside its column at 992. */
.jd-pricing .jd-p-table thead th{
  font-family:Helvetica, sans-serif;
  font-size:13px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.08em;
  color:#3a5240;                     /* 7.599:1 on #f5f1e8 — AAA at small text */
  text-align:left;
  vertical-align:bottom;
  padding:0 0 10px;
  border-bottom:2px solid rgba(79,111,82,.34);   /* -> #bdc5b5, 1.582:1 */
  overflow-wrap:break-word;
}
.jd-pricing .jd-p-table thead th + th{
  text-align:right;
  padding-left:12px;                 /* keeps a wrapped head off its neighbour */
}

/* THE ROW LABEL. `th[scope="row"]` rather than a class: it is the thing that
   already distinguishes these cells, it cannot fall out of sync with the
   markup, and at 0-2-2 it sits above everything legacy. The source used TD
   for "Ground Floor", "First Floor", "Second Floor" and the two admission-fee
   labels; they are row headers, and promoting them is what lets a screen
   reader announce "Ground Floor, North Facing Rooms (Temple Facing),
   INR 30,00,000" on one cell instead of reading orphaned numbers.
   400, not 700 — the LABEL is not the emphasis in this room, the FIGURE is.
   vertical-align:baseline locks a one-line label to the FIRST line of a
   two-line money cell, so the label and the figure share a baseline and the
   qualifier hangs below both. */
.jd-pricing .jd-p-table tbody th[scope="row"]{
  font-family:Helvetica, sans-serif;
  font-size:17px;
  line-height:1.45;
  font-weight:400;
  color:#22331f;                     /* 11.977:1 on #f5f1e8 */
  text-align:left;
  vertical-align:baseline;
  padding:15px 12px 15px 0;
  border-bottom:1px solid rgba(79,111,82,.20);   /* -> #d4d7ca, 1.297:1 */
  overflow-wrap:break-word;
}

/* THE VALUE CELL. */
.jd-pricing .jd-p-table tbody td{
  text-align:right;
  vertical-align:baseline;
  padding:15px 0 15px 12px;
  border-bottom:1px solid rgba(79,111,82,.20);
}

/* the closing rule of each table is dropped: the band's own structure closes
   it, and a table that ends on a heavy line reads as finished when the model
   it describes is not. */
.jd-pricing .jd-p-table tbody:last-of-type tr:last-child th[scope="row"],
.jd-pricing .jd-p-table tbody:last-of-type tr:last-child td{ border-bottom:0; }


/* ---------- the figures — THE DECISION THAT MATTERS MOST ------------------
   EVERY FIGURE IS SET AT THE SAME SIZE. INR 55,000, INR 30,00,000 and
   INR 1,50,000 are all 20px/700. Ranking them was tempting — the monthly
   rental is the number that decides affordability and could have led at 24px
   — but on a page bought with Google Ads money the figure that would then get
   shrunk is the 30,00,000 deposit, and a price list that sizes its numbers by
   how much it wants you to look at them is not a price list. The eye lands on
   INR 55,000 first because it is the first cell of the first table. That is
   the only emphasis this room gives any figure, and position is honest where
   size is not.
   20px against the 17px of the labels around it: this is the content the
   section exists for and the reader is 55+.
   The quiet dividend of one size: "Nil" sets at the same 20px/700 as a
   seven-digit lakh sum, so the zero-deposit model's headline is a word where
   the other model has a number.

   white-space:nowrap IS A CORRECTNESS RULE, NOT TYPOGRAPHY. "INR 30,00,000"
   broken after the first comma is a different price, and a misquoted price is
   the one failure this whole block exists to prevent. It is relaxed at
   exactly one breakpoint, for exactly one measured reason — see <=575.98,
   where the only break opportunity that opens is the space after "INR" and
   the lakh-grouped number itself still cannot break.
   INR IS KEPT IN EVERY CELL and the lakh grouping is untouched: 30,00,000 is
   correct Indian grouping and westernising it to 3,000,000 would change the
   quoted price.
   tabular-nums is belt and braces — Helvetica and its Windows substitute
   Arial already duplex their digits, so the six deposit figures align with or
   without it; this only guarantees it if the stack ever changes.
   font-feature-settings covers engines that do not implement
   font-variant-numeric. NO letter-spacing: tracking a tabular figure defeats
   the duplexing it was set for. */
.jd-pricing .jd-p-fig{
  display:block;
  font-family:Helvetica, sans-serif;
  font-size:20px;
  line-height:1.3;
  font-weight:700;
  letter-spacing:0;
  color:#22331f;                     /* 11.977:1 on #f5f1e8 */
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* THE IN-CELL QUALIFIER — "+ GST & applicable taxes" / "+ GST & applicable
   Taxes". Carried in the cells they belong to, verbatim, because a qualifier
   lifted out of a money cell into a footnote is a qualifier a reader can
   miss, and this is the section people screenshot one cell of.
   THEY ARE SET ON THEIR OWN LINE INSIDE THE CELL rather than running on after
   the figure, and that single typographic move is what makes the whole room
   fit: a cell whose intrinsic width is max(figure, qualifier) is ~170px
   instead of figure+qualifier at ~285px, which is the difference between a
   table that fits a 442px column and one that does not.
   NOT ONE CHARACTER IS CHANGED BY IT — the cell's text content is still
   "INR 55,000 + GST & applicable taxes", read as one string by a screen
   reader and copied as one string to the clipboard. Only the line box moved.
   15px/400 at 7.599:1: subordinated by SIZE, never by dimming. A qualifier a
   reader cannot read is not a qualifier, and this one names a tax. */
.jd-pricing .jd-p-qual{
  display:block;
  margin-top:5px;
  font-family:Helvetica, sans-serif;
  font-size:15px;
  line-height:1.4;
  font-weight:400;
  color:#3a5240;                     /* 7.599:1 on #f5f1e8 */
}

/* THE TWO REFUNDABILITY TERMS — "100% Refundable" and "Non-Refundable".
   These are the difference between INR 30-40 lakh PARKED and INR 5 lakh
   SPENT: the two most consequential phrases on the sheet, and in the source
   both are buried mid-sentence. They are lifted to the FIGURE's ink rank
   (11.977:1) at 700 and tracked, so they read as terms rather than as fine
   print — one full rank above the 15px qualifiers beside them.
   THEY ARE STYLED IDENTICALLY, ON PURPOSE. It is not this stylesheet's place
   to visually grade the client's terms: no warning colour, no reassuring
   colour, and no bordered chip. A chip would be the only decorative object in
   a room that has decided not to have any, and the words carry the meaning
   perfectly well at this rank. The design's job is to make both impossible to
   miss, not to say which is the good one.
   In the deposit table's corner head "100% Refundable" drops to its own line;
   width:fit-content rather than a <br>, because there is no <br> in this
   markup and there should not be one. It is inside the <th> that the table is
   named by, so a screen reader is told the deposit is 100% Refundable before
   it reads a single lakh figure.
   In the admission-fee cell "Non-Refundable" stays INLINE and LEADING,
   because that is the source's word order and word order is content. */
.jd-pricing .jd-p-term{
  font-family:Helvetica, sans-serif;
  font-size:14px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:.05em;
  color:#22331f;                     /* 11.977:1 on #f5f1e8 */
  white-space:nowrap;
}
.jd-pricing .jd-p-table thead th .jd-p-term{
  display:block;
  width:fit-content;
  margin-top:8px;
  letter-spacing:.04em;              /* the head above it is tracked at .08em;
                                        closing the gap keeps the cell reading
                                        as one object rather than two */
}
.jd-pricing .jd-p-span .jd-p-term{ display:inline; }

/* THE ADMISSION FEE IS ITS OWN <tbody>, AND THAT IS SEMANTICS RATHER THAN
   DECORATION. The first three rows of that table are floors priced under
   "North Facing / South Facing"; the fourth is a different charge with no
   facing at all. Splitting the row groups says so in the markup, and the 2px
   rule says so on screen — the same weight as the column-head rule, because
   it is the same kind of statement: everything below this line has a
   different heading. Without it "Non-Refundable INR 5,00,000" is scanned as a
   fourth floor.
   Under border-collapse the preceding row's 1px bottom and this 2px top
   resolve to the 2px by width, so no line doubles. */
.jd-pricing .jd-p-table tbody.jd-p-fee th[scope="row"],
.jd-pricing .jd-p-table tbody.jd-p-fee td{
  border-top:2px solid rgba(79,111,82,.34);      /* -> #bdc5b5, 1.582:1 */
  padding-top:16px;
}

/* THE SPANNING CELL, AND THE ONE PLACE THIS ROOM BREAKS ITS OWN RIGHT EDGE.
   The Admission Fee is a single figure covering both facing directions, so it
   is colspan="2" — which is true, and is exactly why it cannot keep the right
   edge every other value cell holds. FLUSHED RIGHT IT WOULD SIT UNDER THE
   SOUTH FACING COLUMN, and a reader scanning 35,00,000 / 37,50,000 /
   40,00,000 / 5,00,000 down that edge would read the last as a South-facing
   figure. Centred across the span is the visual statement of "this applies to
   both", and it is the only cell in the room that departs from the single
   right edge. Three signals then agree: the row header, the visibly
   full-width cell, and the leading "Non-Refundable".
   text-align, not flex: display:flex on a <td> takes it out of the table
   formatting context and the colspan attribute stops applying — the cell
   would silently collapse to one column. That is the bug this comment exists
   to prevent. */
.jd-pricing .jd-p-table tbody td.jd-p-span{
  text-align:center;
  padding-left:0;
}
/* inside the span the figure runs on the same line as the term it follows */
.jd-pricing .jd-p-span .jd-p-fig{ display:inline; }

/* ---------- the dated condition ------------------------------------------
   "*Effective from 1st July, 2026, applicable for New Onboarders Only. T&C
   Applies" — the single easiest thing on this page to lose, and the only
   place where a date changes what a number means.
   IT SHIPS AS A <p> IN THE SOURCE'S OWN READING POSITION, directly after
   Table 3, ASSERTING NOTHING BEYOND ADJACENCY. It was built as Table 3's
   <caption> and rejected: a caption is announced as part of that table's
   accessible name, which SCOPES the condition to the Zero Deposit model — and
   the source does not say that. It sits, in the source, at the foot of a
   column containing BOTH models. Hoisting it below both would assert the
   opposite. Both assertions are materially wrong if the other reading is
   correct: one leaves the Standard prices undated, the other applies a July
   2026 condition to prices that may be live today. Preserving the source's
   ambiguity exactly and flagging it for the owner is the only honest move on
   a price list. If it governs everything, move the <p> into .jd-p-note above
   the <ul> — one line of markup, no CSS change.
   It stays INSIDE .jd-p-zero so at every width and in print it is physically
   attached to the table it follows and cannot drift level with something else.
   15.5px/700 at 11.977:1 — the same ink as the figures, NOT dimmed and NOT
   shrunk below reading size. A dated condition on a price is a term, not fine
   print. font-weight is restated on the <p> against responsive.css:131's 300
   at <=320; the <strong> is the source's own markup rather than a weight
   faked on the paragraph.
   Its brass top rule matches the band separators, so the model is bracketed. */
.jd-pricing .jd-p-effective{
  margin:26px 0 0;
  padding:16px 0 0;
  border-top:1px solid rgba(203,178,121,.45);    /* -> #e2d5b6, 1.296:1 */
  max-width:52ch;
  font-family:Helvetica, sans-serif;
  font-size:15.5px;
  line-height:1.55;
  font-weight:400;
  color:#22331f;                     /* 11.977:1 on #f5f1e8 */
  text-align:left;
}
.jd-pricing .jd-p-effective strong{ font-weight:700; }


/* ==========================================================================
   BAND 2 — THE NOTE
   ========================================================================== */

/* Full width UNDER BOTH MODELS, because all three of its items are about
   both: Assisted Living is charged on top of either rental, payment
   structures can be customised under either, and there is one address and one
   phone number for the house. Leaving it at the foot of one column — which is
   where the source's single-column reading puts it — attaches three general
   caveats to one of two models, which on a price list is a material error.
   The brass rule and 48/44 of air are the band separator, the same line at
   the same weight as the divider between the models. */
.jd-pricing .jd-p-note{
  margin-top:48px;
  padding-top:44px;
  border-top:1px solid rgba(203,178,121,.45);    /* -> #e2d5b6, 1.296:1 */
}
.jd-pricing .jd-p-note ul{
  margin:0;
  padding:0;
  list-style:none;                   /* restated over style.css:13 and over
                                        Reboot's ul{padding-left:2rem} */
  max-width:900px;                   /* a 1256px measure is ~150 characters a
                                        line; three caveats a reader must
                                        actually get through are set at ~95 */
}
.jd-pricing .jd-p-note ul li{
  --jp-note-y:14px;                  /* ONE token: the row's vertical padding
                                        AND the dash's offset, so they cannot
                                        drift apart in a media block below */
  position:relative;
  margin:0;
  padding:var(--jp-note-y) 0 var(--jp-note-y) 34px;
  border-top:1px solid rgba(79,111,82,.20);      /* -> #d4d7ca, 1.297:1 */
  font-family:Helvetica, sans-serif;
  font-size:17px;
  line-height:1.7;                   /* wider than the tables' 1.45: these are
                                        sentences, and the 44px link targets
                                        below need the line to breathe */
  font-weight:400;
  color:#22331f;                     /* 11.977:1 on #f5f1e8 */
  overflow-wrap:break-word;
}
.jd-pricing .jd-p-note ul li:first-child{ border-top:0; padding-top:0; }
/* the first item carries no rule and no top padding, so its mark loses the
   --jp-note-y term and keeps only the optical-centre term. With top:0 the
   dash sat 14px above the line it belongs to, which on the one item a reader
   starts at is the most visible place to get it wrong. */
.jd-pricing .jd-p-note ul li:first-child::before{ top:.78em; }

/* THE MARK IS A DASH, NOT A TICK, AND THE DISTINCTION IS THE POINT. The
   services list below uses a check-square, which means "included". These
   three items are the opposite kind of statement — extra charges may apply,
   terms can vary, write to us — and a check mark against "extra charges will
   be applicable" would be a small lie told by a glyph.
   Drawn as a box rather than a font glyph: no Font Awesome dependency and
   nothing in the accessibility tree. It is restated as a BORDER under
   forced-colors, where background-color is forced to Canvas and a background
   dash would vanish silently while everything around it stayed visible.
   The hanging indent is measured against the type, not in fixed px, for the
   same zoom reason as the check mark below. */
.jd-pricing .jd-p-note ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:calc(var(--jp-note-y) + .78em);            /* the first line's optical
                                                    centre at 17px/1.7 */
  width:16px; height:2px;
  background:#4f6f52;                /* 5.016:1 — far above the 3:1 a
                                        meaningful non-text mark owes,
                                        deliberately below the words' 11.977:1 */
}

/* ---------- THE TWO REAL LINKS -------------------------------------------
   The only interactive elements in this room, and the tel: one is the single
   most likely tap on this page for the reader it is written for. Both sit
   inline inside a sentence, which is the hardest place on a page to hit 44px.
   THE IDIOM: inline-block with 10px of vertical padding to make a 44px+ box,
   and an EQUAL AND OPPOSITE negative margin so the box's contribution to the
   line box is unchanged and the sentence sets exactly as it would without it.
   Helvetica/Arial's inline content area is ~1.15em, so at 17px the box is
   ~19.6px; 10px top and bottom brings it to ~39.6px, and the li's 1.7
   line-height (28.9px) carries the rest — measured at ~49px tall and ~220px /
   ~111px wide at 1440, ~47px and ~208px / ~105px at 375. Both axes clear 44px
   (WCAG 2.5.8 AAA / 2.5.5) at every width. The target overlaps the lines above
   and below by ~9px each, which is why the li runs at 1.7 rather than the 1.6
   the services list uses; the two links are ~90px apart horizontally and are
   the only targets in the block, so the overhang lands on plain text and
   nothing can be mis-tapped for anything else.
   nowrap on both: an inline-block that wraps produces two half-height targets
   and two overlapping hit areas, and neither an email address nor a phone
   number should break anyway. At 320px the email measures ~175px inside a
   296px container, so it fits.
   THE UNDERLINE IS NOT OPTIONAL AND IS NOT A HOVER REVEAL. These links sit
   inside body copy at the SAME ink as the copy around them — 11.977:1, chosen
   over a distinguishing colour because any green light enough to differ from
   #22331f is too light against it to satisfy WCAG 1.4.1's 3:1. The underline
   is what identifies them, and it survives forced-colors and greyscale
   printing where a colour would not. */
.jd-pricing .jd-p-note a{
  display:inline-block;
  line-height:44px;                  /* WAS padding:10px 6px with margin:-10px
                                        -6px. That grew the box past its own
                                        LINE box on both sides, so when the
                                        sentence wrapped between the two links
                                        their 44px targets overlapped - measured
                                        105.4x20px at 320px, 66.3x20 at 375 -
                                        and the tel: link, being later in the
                                        document, won the hit test inside the
                                        overlap. A reader aiming slightly low at
                                        the email address DIALLED THE PHONE.
                                        Growing the LINE instead of the box
                                        makes the target exactly 44px and the
                                        overlap exactly zero, measured. */
  padding:0 6px;
  margin:0 -6px;                     /* horizontal only - the sentence sets
                                        exactly as it did before */
  color:#22331f;
  font-weight:700;
  white-space:nowrap;
  border-radius:2px;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.jd-pricing .jd-p-note a:hover,
.jd-pricing .jd-p-note a:active{
  color:#1d2c20;                     /* 13.047:1 */
  text-decoration:underline;         /* restated over style.css:9's
                                        a:hover{text-decoration:none} at
                                        0-3-1 against its 0-1-1 */
  text-decoration-thickness:2px;
}

/* FOCUS — three rules, and the order is the whole point.
   The house pattern is `:focus:not(:focus-visible){outline:0}` plus a real
   `:focus-visible` ring, and that is shipped. But on its own it has a hole:
   outside :is()/:where(), ONE unknown pseudo-class invalidates the WHOLE
   rule, so an engine with no :focus-visible support drops BOTH of those
   rules and is left with no ring at all — the exact defect the pattern was
   written to prevent, arriving by a different door.
   So a bare `:focus` ring is declared FIRST. Old engines keep only that and
   ring on every focus. Modern engines apply it, then rule two removes it for
   pointer focus, then rule three restores it for keyboard focus. A bare
   :focus{outline:0} would still be a defect; a bare :focus{outline:3px} that
   a later rule narrows is the fallback.
   #2b3f2f at 10.083:1, far above the 3:1 a focus indicator owes. The 2px
   offset draws the ring around the padded hit box, which is honest: it shows
   the reader the target they actually have. */
.jd-pricing .jd-p-note a:focus{
  outline:3px solid #2b3f2f;         /* 10.083:1 — legacy fallback ring */
  outline-offset:2px;
}
.jd-pricing .jd-p-note a:focus:not(:focus-visible){ outline:0; }
.jd-pricing .jd-p-note a:focus-visible{
  outline:3px solid #2b3f2f;         /* 10.083:1 on #f5f1e8 */
  outline-offset:2px;
  text-decoration-thickness:2px;     /* the ring is not the only signal */
}


/* ==========================================================================
   BAND 3 — THE INVENTORY: fourteen inclusions
   ========================================================================== */

/* GRID RATHER THAN CSS MULTI-COLUMN, AND THE REASON IS ITEM 13. "Access to
   Library, Games Room, Cards Room, Gymnasium, Yoga & Meditation Room,
   Audio-Visual Room, Community Hall, Indoor & Outdoor Dining Spaces, Krishna
   Temple, and Serene Lawns" is 205 characters against a 25-character median
   for the other thirteen — the list has its own internal asymmetry, and
   balancing it into equal columns either breaks that item across a column
   boundary or leaves one column half empty. Grid lets it SPAN, at
   grid-column:1/-1, which is the correct answer for the one item that is not
   like the others: a full-width row of its own, with the other thirteen set
   in tidy columns around it.
   The placement is exact rather than lucky: at three columns items 1-12 fill
   four rows exactly, item 13 takes row five entire, item 14 opens row six. At
   two columns, 1-12 fill six rows, item 13 takes row seven, item 14 opens row
   eight. No ragged hole at either count.
   row-gap:0 because the rows are separated by their own hairlines; column-gap
   40px because two ticked lists 40px apart are two lists and 16px apart are
   one. Grid rows are equal height by construction, so the hairlines LINE UP
   ACROSS the columns and the band reads as a ruled inventory rather than as
   three lists that happen to be adjacent — which is the second thing multicol
   cannot do. */
.jd-pricing .jd-p-services{
  margin-top:48px;
  padding-top:44px;
  border-top:1px solid rgba(203,178,121,.45);    /* -> #e2d5b6, 1.296:1 */
}
.jd-pricing .jd-p-services ul{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:40px;
  row-gap:0;
  margin:0;
  padding:0;
  list-style:none;                   /* restated over style.css:13 and Reboot */
}
.jd-pricing .jd-p-services ul li{
  --jp-row-y:13px;                   /* ONE token: the row's vertical padding
                                        AND the mark's offset */
  position:relative;
  margin:0;
  padding:var(--jp-row-y) 0 var(--jp-row-y) 1.9em;
  border-top:1px solid rgba(79,111,82,.20);      /* -> #d4d7ca, 1.297:1 */
  font-family:Helvetica, sans-serif;
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  color:#22331f;                     /* 11.977:1 on #f5f1e8 */
  overflow-wrap:break-word;
  break-inside:avoid;
  page-break-inside:avoid;
}
.jd-pricing .jd-p-services ul li.jd-p-wide{ grid-column:1 / -1; }

/* THE CHECK MARK, BUILT HERE RATHER THAN BORROWED FROM .tick. Same codepoint
   as the rest of the page (U+F14A, check-square solid), and none of .tick's
   83 rules or its five bare legacy selectors — including style.css:1613's
   color:#9b6f3f (3.80:1 on this sheet, a fail) and style.css:1567's
   transition:all on a mark that never changes.
   VERIFIED IN THE FILES, NOT ASSUMED: css/all.css:7801 registers an @font-face
   for "Font Awesome 5 Free" at weight 900 pointing at webfonts/fa-solid-900,
   and \f14a is a U+Fxxx codepoint those v5 webfonts actually carry — unlike
   the U+Exxx codepoints FA6's CSS references, which are tofu against this
   webfonts folder. style.css:1567 already renders this exact pairing on this
   exact page today, so the family/weight/codepoint triple is proven working.
   font-family AND font-weight are DECLARED HERE and not inherited:
   .senior_living's list gets both from style.css:1567 via .tick, and this
   block deliberately matches no .tick selector, so without these two the
   pseudo-element renders a fallback-font tofu box. 900 resolves the family to
   its Solid face.

   THE TWO content DECLARATIONS ARE DELIBERATE AND ORDERED, and this is the
   one place belt-and-braces is cheaper than a choice. U+F14A is a PRIVATE-USE
   codepoint and CSS generated content reaches the accessibility tree, so
   without the alt-text form a screen reader announces garbage before all
   fourteen items. But `content:"x" / ""` is dropped WHOLE by engines that do
   not implement it, which would leave fourteen items with no mark at all.
   Declared plainly FIRST and with the alt text SECOND, supporting engines take
   the second and everything else keeps the first. Neither failure mode
   survives.
   The well is in em, not px, because the mark inside it is: check-square has a
   .875em advance, at font-size:.9em that is .7875em, and under Firefox's
   text-only zoom (which scales font-size but not px padding) a 30px well is
   overrun at ~260%. 1.9em keeps 1.11em of clearance at every zoom level.
   .9em x 1.78 = the li's own 17px x 1.6 line box at any font size, because
   both terms are em-derived — so the mark sits on the first line's optical
   centre and stays there under zoom and in every responsive block below, with
   no px offset to maintain. */
.jd-pricing .jd-p-services ul li::before{
  content:"\f14a";
  content:"\f14a" / "";
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  position:absolute;
  left:0;
  top:var(--jp-row-y);               /* an abspos child's containing block is
                                        the PADDING box, so top:0 would sit the
                                        mark above the first line by exactly
                                        the row padding */
  width:auto; height:auto;
  margin:0; padding:0;
  vertical-align:baseline;
  font-size:.9em;
  line-height:1.78;
  color:#4f6f52;                     /* 5.016:1 on #f5f1e8 — the quietest rank
                                        in the room, correct for a mark that
                                        repeats fourteen times and carries no
                                        information the text does not */
  transition:none;                   /* style.css:1567 animates `all`; not
                                        inherited here, stated so nobody
                                        re-adds it */
}

/* THE CONCIERGE LINE. A CHARGE, not a footnote — "separately chargeable" is
   the only sentence in this band that costs the reader money, so it takes the
   heading rank rather than the T&C's, and closes the list on the list's own
   last rule. */
.jd-pricing .jd-p-concierge{
  margin:0;
  padding:18px 0 0;
  border-top:1px solid rgba(79,111,82,.20);      /* -> #d4d7ca, 1.297:1 */
  font-family:Helvetica, sans-serif;
  font-size:16px;
  line-height:1.5;
  font-weight:700;
  color:#2b3f2f;                     /* 10.083:1 on #f5f1e8 */
}

/* "* T&C Applicable" — the one piece of copy in this room the source itself
   marks as a footnote, and the only thing set below 16px. 15px at 7.599:1 —
   subordinated by size, never by dimming. font-weight restated against
   responsive.css:131's 300 at <=320. */
.jd-pricing .jd-p-tc{
  margin:14px 0 0;
  font-family:Helvetica, sans-serif;
  font-size:15px;
  line-height:1.5;
  font-weight:400;
  color:#3a5240;                     /* 7.599:1 on #f5f1e8 */
}


/* ---------- FLAG 2: the WOW tripwire -------------------------------------
   See the audit. The markup ships with NO `wow` class at all, so this matches
   nothing after a complete deploy. It is here because index.php and
   css/banner.css go up as two separate files, and a price list must never be
   gated behind a scroll observer. */
.jd-pricing .wow{
  visibility:visible !important;     /* FLAG 2 — answers WOW.js's inline
                                        visibility:hidden (js/wow.min.js,
                                        init at index.php:1793) */
  opacity:1 !important;              /* FLAG 2 */
  animation-name:none !important;    /* FLAG 2 */
}


/* ==========================================================================
   BREAKPOINTS — Bootstrap's own, 1199.98 / 991.98 / 767.98 / 575.98, so the
   room steps at the same instant the container and the grid do. Broad band
   first, narrow band after, all below the base rules they share 0-2-x with:
   this file already ships a live ordering bug at banner.css:2251/2258 where
   two equal-specificity padding blocks make the first dead, and nothing below
   repeats it.
   ========================================================================== */

/* >=992 — THE TWO MODELS BECOME A PAIR.
   column-gap is 0 and the 72px channel is built from 36px of padding on each
   facing side, which is border-box and cannot overflow.
   The divider goes on the SECOND model and runs its full height, because
   grid's default align-items:stretch makes both tracks the height of the
   taller one. */
@media (min-width:992px){
  .jd-pricing .jd-p-terms{
    grid-template-columns:1fr 1fr;
    column-gap:0;
    row-gap:0;
    align-items:stretch;
  }
  .jd-pricing .jd-p-std{ padding-right:36px; }
  .jd-pricing .jd-p-zero{
    padding-left:36px;
    border-left:1px solid rgba(203,178,121,.45); /* -> #e2d5b6, 1.296:1 */
  }
}

/* <=1199.98 — two columns of services. The three-column grid needs ~370px a
   column to keep the short items on one line; below 1200 it does not have it. */
@media (max-width:1199.98px){
  .jd-pricing .jd-p-services ul{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* 992-1199.98 ONLY — the model channel tightens from 72px to 56px. The bounds
   are BOTH declared and the min-width half is load-bearing: an unbounded
   max-width:1199.98 rule would keep 28px of facing padding on the models
   after they stack at 991.98, indenting one edge of each stacked table
   against nothing. The channel exists only while there is a channel.
   The container is 1200px border-box at a 1200px viewport and 960px from 992,
   so each model column runs 442-560px. MEASURED at 992: table columns
   150/145/145, and the widest figure ("INR 30,00,000", 129px at 20px/700)
   still clears its 133px content box. */
@media (min-width:992px) and (max-width:1199.98px){
  .jd-pricing .jd-p-std{ padding-right:28px; }
  .jd-pricing .jd-p-zero{ padding-left:28px; }

  /* MEASURED AT 992 - THE TIGHTEST POINT THE TWO MODELS EVER SIT SIDE BY SIDE.
     At 34/33/33 the value columns are 145.2px, their content box 133.2px, and
     "INR 30,00,000" sets 129.0px: 4.2px of headroom, 3.2%. A nowrap figure in a
     table-layout:fixed cell does not reflow when it runs out of room - it
     PAINTS OVER the next column. Bumping only the figure's size, which is
     exactly what Android text scaling and Firefox text-only zoom do, breaks the
     cell by 8.7px at +10% and OVERLAPS two lakh figures by 9.6px at +20%. Two
     prices printed on top of each other, in the one room that has to survive
     being checked, for the reader most likely to have text scaling on.
     30/35/35 leaves the label column 132px - still 7.7px clear of the corner
     head's "100% Refundable" at 124.3px - and takes the figure's headroom to
     19.5px, 16%. No cell break until +21%, no overlap until +26%. */
  .jd-pricing .jd-p-table col:first-child{ width:30%; }
  .jd-pricing .jd-p-fig{ font-size:19px; }
}

/* <=991.98 — THE MODELS STACK, AND THE VERTICAL RULE BECOMES A HORIZONTAL
   ONE. The rule does NOT disappear: it is the only thing in the room that
   says these two are alternatives rather than a sequence, and stacked, that
   statement is doing MORE work, not less.
   max-width on the model caps the table's measure at the width it was
   designed for. Without it a 720px container hands a three-column table a
   720px label column and the eye loses the row between "Ground Floor" and
   INR 30,00,000 — the classic wide-table failure, arrived at by removing a
   constraint rather than adding one. */
@media (max-width:991.98px){
  .jd-pricing .jd-p-terms{ row-gap:0; }   /* the stacked separation is built
     from .jd-p-zero's own 40px margin + 40px padding around the brass rule; the
     base 40px row-gap on top of it gave the "or" 80px above and 40px below,
     where every other threshold in this room is deliberately symmetric. */
  section.section-gaping.jd-pricing{ padding:44px 0 46px; }
  .jd-pricing .section_title{ margin-bottom:32px; }
  .jd-pricing .jd-p-model{ max-width:680px; }
  .jd-pricing .jd-p-zero{
    margin-top:40px;
    padding-top:40px;
    border-top:1px solid rgba(203,178,121,.45);  /* -> #e2d5b6, 1.296:1 */
  }
  .jd-pricing .jd-p-note{ margin-top:44px; padding-top:40px; }
  .jd-pricing .jd-p-services{ margin-top:44px; padding-top:40px; }
}

/* <=767.98 — ONE column of inclusions. The two-column grid at 720px gives
   each item ~340px, which puts most of the thirteen short items on two lines
   and turns a scannable inventory into a block; one column at 17px reads
   better than two at 15px, and this reader is 55+. */
@media (max-width:767.98px){
  section.section-gaping.jd-pricing{ padding:34px 0 36px; }
  .jd-pricing .section_title{ margin-bottom:28px; }
  .jd-pricing .jd-p-services ul{ grid-template-columns:1fr; column-gap:0; }
  .jd-pricing .jd-p-services ul li.jd-p-wide{ grid-column:auto; }
}

/* <=575.98 — THE HARDEST BAND IN THE ROOM, AND THE TWO PLACES IT CHANGES ITS
   OWN RULES. Both were forced by measurement at 320px, not chosen.
   At 320px Bootstrap's .container has no max-width, so it holds 296px of
   content, and three columns must carry a label plus "INR 30,00,000" and
   "INR 35,00,000".
   (1) table-layout GOES TO auto. Fixed layout would hand the value columns
       33% = 98px each while the figure needs ~116px at 18px/700 Arial, and
       the figures would paint over their own cell edges: FIXED LAYOUT
       GUARANTEES THAT THE TABLE FITS, NOT THAT ITS CONTENT DOES. Auto sizes
       each column from its own content and is the only algorithm that can
       honour a figure this wide in a container this narrow.
   (2) .jd-p-fig GOES TO white-space:normal, AND THIS IS THE ONE PLACE THE
       ROOM LETS A FIGURE BREAK. MEASURED FIRST: held at nowrap, the Deposit
       table's min-content is ~82 + 116 + 116 = 314px plus cell padding
       against 296px available, and the page overflows horizontally. Dropping
       the type far enough to fix that arithmetically means a ~14px headline
       figure, which is the wrong answer for a 55+ reader.
       So the figure is allowed to wrap — and IT CAN ONLY WRAP IN ONE PLACE.
       "INR 30,00,000" contains exactly one space, after INR, and under
       UAX #14 a comma between digits is class IS (infix numeric separator),
       which creates NO break opportunity. THE LAKH-GROUPED NUMBER ITSELF IS
       UNBREAKABLE IN EVERY ENGINE. The worst case is the currency word on its
       own line above an intact figure. The number is never split, never
       re-grouped and never re-rounded.
       With it, min-content falls to max("INR", "30,00,000") = ~80px per value
       column: 82 + 80 + 80 = 242px plus padding, inside 296px.
   NO HORIZONTAL SCROLL CONTAINER, which was the other candidate fix. A
   scrollable region is a WCAG 2.1.1 failure the moment it is not focusable,
   an announcement problem the moment it is, and on a price list it is a way
   to lose an entire column of numbers behind an edge the reader never
   discovers. A currency word on its own line is ugly; a hidden figure is a
   misquote.
   I ALSO BUILT AND REJECTED the usual responsive-table stack — display:block
   on the cells with ::before{content:attr(data-th)}. display:block strips the
   implicit table roles in Blink and Gecko and takes every row/column
   association with them, so scope="col" stops associating and every figure
   loses the header saying whether it is Single or Double occupancy. Explicit
   ARIA roles can restore the grid, but scope does not survive the trip and
   the generated column name is then announced twice. On a price list that is
   not a degradation, it is a misquote. THE TABLE STAYS A TABLE AT EVERY WIDTH.
   Type steps down by one notch, not two: 18px figures, 16px labels, 14px
   qualifiers, 12px heads. The figure stays the largest thing in the room.
   NO padding rule for this band: the 767.98 rule above is 0-2-1 and outranks
   style.css:471 (0-2-0) inside that rule's own band, because a media query
   adds no specificity. A rule restating it here would be dead code. */
@media (max-width:575.98px){

  /* THE CORNER HEAD'S TERM IS WHAT ACTUALLY SETS THE LABEL COLUMN'S FLOOR, and
     the first pass of this block never accounted for it. "100% Refundable" at
     nowrap measures 115.45px and pins that column at 116.79px, which is why
     table 2's min-content is 291.63px against the 296px a 320px viewport gives
     - 4.4px, not the ~54px first calculated. Four pixels of headroom on a price
     list means any wider fallback face, any minimum-font-size or any text
     scaling produces a horizontally scrolling page and a column of figures
     pushed off an edge the reader never discovers.
     Letting it wrap costs nothing that matters: both words stay inside the <th>
     the table is named by, so a screen reader is still told the deposit is 100%
     Refundable before it reads a single figure. Measured after: min-content
     291.63 -> 257.99px, headroom 4.4 -> 38px. */
  .jd-pricing .jd-p-table thead th .jd-p-term{ white-space:normal; }
  .jd-pricing .jd-p-table{ table-layout:auto; }
  .jd-pricing .jd-p-table col:first-child{ width:auto; }
  .jd-pricing .jd-p-fig{
    white-space:normal;              /* one break point: after INR */
    font-size:18px;
  }
  .jd-pricing .jd-p-table thead th{
    font-size:12px;
    letter-spacing:.06em;
    padding-bottom:8px;
  }
  .jd-pricing .jd-p-table thead th + th{ padding-left:8px; }
  .jd-pricing .jd-p-table tbody th[scope="row"]{
    font-size:16px;
    padding:13px 8px 13px 0;
  }
  .jd-pricing .jd-p-table tbody td{ padding:13px 0 13px 8px; }
  .jd-pricing .jd-p-qual{ font-size:14px; margin-top:4px; }
  .jd-pricing .jd-p-term{ font-size:13px; }
  .jd-pricing .jd-p-effective{ font-size:15px; }
  .jd-pricing .jd-p-note ul li,
  .jd-pricing .jd-p-services ul li{ font-size:16px; }
  .jd-pricing .jd-p-note ul li{ padding-left:28px; }
  .jd-pricing .jd-p-note ul li::before{ width:13px; }
  .jd-pricing .jd-p-concierge{ font-size:15px; }
  .jd-pricing .jd-p-tc{ font-size:14px; }
}


/* ==========================================================================
   PREFERENCE AND OUTPUT BRANCHES
   ========================================================================== */

/* ---------- prefers-reduced-motion ---------------------------------------
   Nothing in this room moves, transitions or transforms — no carousel, no
   reveal, no scroll animation, and the only hover state is a
   text-decoration-thickness. The list is short BY CONSTRUCTION rather than by
   suppression, and a blanket transition-duration reset here would be dead
   code of exactly the kind this file does not write.
   What the branch DOES carry is the second half of the WOW guard. The failure
   it protects against — a PRICE LIST stranded at visibility:hidden because a
   scroll observer never ran — is precisely the one a reduced-motion reader is
   most likely to be left in if the class is ever pasted back and something
   suppresses the animation that would otherwise have revealed it. */
@media (prefers-reduced-motion:reduce){
  .jd-pricing .wow{
    animation:none !important;       /* FLAG 2 */
    visibility:visible !important;   /* FLAG 2 */
    opacity:1 !important;            /* FLAG 2 */
  }
}

/* ---------- prefers-contrast ---------------------------------------------
   THE GRAIN IS NOT STRIPPED, and that is a decision rather than an omission.
   It lays 1.3% coverage of mid-grey — 0.35 L*, less than a rounding step —
   and removing it would put this room 0.33 L* off .senior_living's plane,
   opening the one seam this whole design exists to close. Every figure in
   this file is already computed on the grained plane, so nothing is hidden by
   keeping it. There is no gradient, so there is nothing else to strip and
   every gain below is real rather than the recovery of a modelling loss.
   The ink deepens to #1d2c20 at 13.047:1, the two quiet ranks close up, and —
   THE ONE HIERARCHY THIS BRANCH DELIBERATELY BREAKS — the check marks and the
   note dashes leave their demoted rank and join the type, 5.016:1 to
   11.977:1. At this setting a legible mark is worth more than the tidy
   three-rank hierarchy it breaks; .gallery, #floor-plan and .jd-location all
   make the same call in their own branches.
   THE QUALIFIERS GO TO 11.977:1 — the "+ GST", and with them the two
   refundability terms to 13.047:1. A reader who has asked the operating
   system for more contrast is the last reader who should be squinting at the
   words that change what a number means.
   The row rules roughly double so the structure a reader has ASKED to see is
   actually visible — and on a table, the rules ARE the structure. The brass
   thresholds collapse from a translucent composite at 1.296:1 to solid
   #8a6d2e at 4.341:1, a 3.3-fold gain, taken because at this setting a
   threshold is structure rather than signature.
   The h2's ornament goes from a gradient peaking at 1.776:1 to solid #8a6d2e:
   a line of constant weight rather than one that fades out at both ends. */
@media (prefers-contrast:more){
  .jd-pricing .section_title h2{ color:#1d2c20; }                /* 13.047:1 */
  .jd-pricing .section_title h2::after{
    background:none;
    border-top:1px solid #8a6d2e;                                /* 4.341:1 */
    height:0;
  }
  .jd-pricing .jd-p-band,
  .jd-pricing .jd-p-concierge{ color:#1d2c20; }                  /* 13.047:1 */
  .jd-pricing .jd-p-table tbody th[scope="row"],
  .jd-pricing .jd-p-fig,
  .jd-pricing .jd-p-effective,
  .jd-pricing .jd-p-note ul li,
  .jd-pricing .jd-p-services ul li,
  .jd-pricing .jd-p-note a{ color:#1d2c20; }                     /* 13.047:1 */
  .jd-pricing .jd-p-term{ color:#1d2c20; }                       /* 13.047:1 */
  .jd-pricing .jd-p-table thead th,
  .jd-pricing .jd-p-qual,
  .jd-pricing .jd-p-tc{ color:#22331f; }                         /* 11.977:1 */
  .jd-pricing .jd-p-services ul li::before{ color:#22331f; }     /* 11.977:1 */
  .jd-pricing .jd-p-note ul li::before{ background:#22331f; }    /* 11.977:1 */
  .jd-pricing .jd-p-table thead th,
  .jd-pricing .jd-p-table tbody.jd-p-fee th[scope="row"],
  .jd-pricing .jd-p-table tbody.jd-p-fee td{ border-color:rgba(29,44,32,.72); }
  .jd-pricing .jd-p-table tbody th[scope="row"],
  .jd-pricing .jd-p-table tbody td,
  .jd-pricing .jd-p-note ul li,
  .jd-pricing .jd-p-services ul li,
  .jd-pricing .jd-p-concierge{ border-color:rgba(29,44,32,.42); }
  .jd-pricing .jd-p-zero,
  .jd-pricing .jd-p-note,
  .jd-pricing .jd-p-services,
  .jd-pricing .jd-p-effective{ border-color:#8a6d2e; }           /* 4.341:1 */
  section.section-gaping.jd-pricing{ border-bottom-color:#8a6d2e; }
  .jd-pricing .jd-p-note a{ text-decoration-thickness:2px; }
  .jd-pricing .jd-p-note a:focus,
  .jd-pricing .jd-p-note a:focus-visible{ outline-color:#1d2c20; }
}

/* ---------- forced-colors ------------------------------------------------
   Every authored colour is dropped by the UA, so the work here is structural:
   every rule in the room must survive as a real edge, because in this room
   THE RULES ARE THE STRUCTURE — they are what separates a model from a model
   and a head from a figure, and the room has no panel and no fill to fall
   back on.
   THIS BRANCH IS CHEAP BECAUSE EVERY EDGE IN THE ROOM IS ALREADY A BORDER OR
   AN OUTLINE. box-shadow is not rendered at all under forced-colors; a
   version of this room that separated the models with a shadow would have
   lost the only mark saying they are alternatives, silently. That is the
   argument the flat, unshadowed sheet was chosen on, collected here.
   THE CHECK MARKS SURVIVE BECAUSE THEY ARE TEXT — generated content is forced
   to CanvasText like any other glyph. THE NOTE'S DASH DOES NOT, because it is
   a BOX: background-color is forced to Canvas, so a 16x2 background dash
   would disappear while everything around it stayed visible. It is restated
   as a border-top with height:0. The h2's ornament has the same problem and
   gets the same treatment — the idiom .testimonials uses at banner.css:4335.
   THE GRAIN IS DROPPED HERE, unlike in prefers-contrast: background-image is
   NOT forced, so a 1.3% grey tile would survive and lay grain over a system
   Canvas it was never mixed against.
   Declared AFTER prefers-contrast on purpose — Chromium matches both under
   Windows High Contrast and this block must be the one that lands.
   NOT ONE !important IN THIS BRANCH: there is no inline style attribute
   anywhere in this markup for a rule to have to beat. */
@media (forced-colors:active){
  section.section-gaping.jd-pricing{
    background-color:Canvas;
    background-image:none;
    border-bottom-color:CanvasText;
  }
  .jd-pricing .section_title h2,
  .jd-pricing .jd-p-band,
  .jd-pricing .jd-p-table thead th,
  .jd-pricing .jd-p-table tbody th[scope="row"],
  .jd-pricing .jd-p-fig,
  .jd-pricing .jd-p-qual,
  .jd-pricing .jd-p-term,
  .jd-pricing .jd-p-effective,
  .jd-pricing .jd-p-note ul li,
  .jd-pricing .jd-p-services ul li,
  .jd-pricing .jd-p-concierge,
  .jd-pricing .jd-p-tc{ color:CanvasText; }
  .jd-pricing .jd-p-services ul li::before{ color:CanvasText; }
  .jd-pricing .section_title h2::after{
    background:none;
    border-top:1px solid CanvasText;
    height:0;
  }
  /* the dash is a box; a background would be forced to Canvas and vanish */
  .jd-pricing .jd-p-note ul li::before{
    background:none;
    height:0;
    border-top:2px solid CanvasText;
  }
  .jd-pricing .jd-p-table thead th,
  .jd-pricing .jd-p-table tbody th[scope="row"],
  .jd-pricing .jd-p-table tbody td,
  .jd-pricing .jd-p-table tbody.jd-p-fee th[scope="row"],
  .jd-pricing .jd-p-table tbody.jd-p-fee td,
  .jd-pricing .jd-p-note ul li,
  .jd-pricing .jd-p-services ul li,
  .jd-pricing .jd-p-concierge,
  .jd-pricing .jd-p-effective,
  .jd-pricing .jd-p-zero,
  .jd-pricing .jd-p-note,
  .jd-pricing .jd-p-services{ border-color:CanvasText; }
  .jd-pricing .jd-p-note a{ color:LinkText; }
  .jd-pricing .jd-p-note a:focus,
  .jd-pricing .jd-p-note a:focus-visible{ outline-color:Highlight; }
}

/* ---------- print --------------------------------------------------------
   THIS IS THE SECTION SOMEBODY ACTUALLY PRINTS, and it is why the whole room
   is laid out as a document rather than as a web layout. An adult child
   prints this, folds it, and takes it to a sibling or to the parent it is
   about. The screen version and the paper version are the same document,
   which is the dividend of having no panel and no chrome to translate.

   1  THE COLOUR DECISION THAT MATTERS MOST: EVERY QUALIFIER GOES TO FULL
      BLACK. On screen "+ GST & applicable taxes" is subordinated to 7.599:1,
      which is correct — it is a qualifier, not a price. On paper it goes to
      #000 alongside the figures, because THIS SHEET GETS PHOTOCOPIED AND
      FORWARDED, and a grey qualifier is the first thing a photocopier throws
      away. Somebody being quoted INR 55,000 with the tax line faded off the
      bottom of a third-generation copy is the exact failure this branch
      exists to prevent. The same goes for "100% Refundable" and
      "Non-Refundable" — the words that decide whether a number is a cost or a
      deposit — and for the dated condition.
   2  PAGINATION IS THE OTHER HALF OF THE JOB, declared in three layers
      because a price list is uniquely fragile here:
      break-inside:avoid ON EACH TABLE is the primary rule. A price table
        split across a page break shows a reader column heads on one sheet and
        figures on the next, or figures with no heads at all — which is how
        somebody reads a Double Occupancy rate as a Single. All three tables
        are small enough to guarantee it: the largest is a head plus four
        rows, ~230px on A4.
      thead{display:table-header-group} is the belt to that brace. If a table
        ever does grow past a page, its heads repeat — a page 2 carrying
        INR 37,50,000 with no "North Facing Rooms (Temple Facing)" above it is
        a MISQUOTABLE PAGE.
      break-inside:avoid ON EACH ROW because a row is a price and must not be
        cut in half; ON EACH MODEL so a heading, its tables and its dated
        condition travel together; ON THE NOTE so the contact line stays with
        the conditions. break-after:avoid on every heading.
   3  THE MODELS STACK. A4 portrait at 96dpi is ~794px, ~700px inside default
      margins; two side-by-side three-column money tables in ~350px each would
      wrap every figure. Stacked, each table gets the full ~676px. The peer
      relationship survives the translation: on screen the two models are
      peers by ADJACENCY, on paper by IDENTICAL SHAPE at IDENTICAL column
      widths. The brass "or" rule turns horizontal and is KEPT — on paper,
      with no scroll to reveal what follows, the statement that these are
      alternatives is doing more work, not less.
   4  NOTHING IS HIDDEN. Every figure, every qualifier, both refundability
      terms, the dated condition, all three notes and all fourteen services.
      Nothing here is hover-gated, opacity:0 or animation-gated, so there is
      nothing to rescue; the WOW reset is only for the half-applied-deploy
      case named in FLAG 2.
   5  NO FORCED PAGE BREAK BEFORE THE SECTION, AND IT WAS CONSIDERED.
      break-before:page would start the rate card on a clean detachable sheet,
      which is what a rate card wants. It is rejected because the
      break-inside rules above already guarantee the only thing that actually
      matters — that nothing splits — and a forced break spends the reader's
      paper to solve a problem that is already solved. A page break is a
      decision about somebody else's printer.
   6  THE hrefs ARE NOT PRINTED. The usual a::after{content:" (" attr(href)
      ")"} would render "contact@jagritidham.com
      (mailto:contact@jagritidham.com)" and "88200 22022 (tel:8820022022)" —
      the first a duplicate, the second a string with no spaces that is HARDER
      to dial than the number beside it. Both link texts are already the
      address and the number. This is the case the usual print-the-URL rule
      does not cover. That third note is also the only place the printed sheet
      carries the company's name and domain at all, which is why it prints at
      full size and is not allowed to break.
   7  BACKGROUNDS ARE NOT FORCED. No print-color-adjust anywhere. A cream
      ground and green ink on a home inkjet costs the reader a cartridge and
      buys nothing; black on white is what a statement of account is. The
      hairlines go solid #a89f8a at 2.628:1 on white — the value
      .senior_living, .testimonials, .gallery, .jd-welcome and .jd-certified
      already print theirs in — and the brass thresholds go #7f6630 at
      5.461:1, the value .jd-welcome and .jd-location print their foot rules
      in. One number across six rooms.
   8  THE FOOT RULE EXISTS ONLY ON PAPER AS A BRASS LINE: on screen this room
      closes onto #floor-plan and the threshold is the boundary; in print that
      plane is gone and the sheet would run into whatever follows.
   NOT ONE !important IN THIS BRANCH except the WOW guard that owns FLAG 2.
   Every rule here is the same 0-2-1 / 0-2-2 as the screen rule it replaces
   and sits later in the file, so it lands on source order. An !important that
   is not answering an !important or an inline style is a note saying "I did
   not check", and this file does not write those. */
@media print{
  /* BOOTSTRAP CAPS .container AT 540px FOR EVERY LAYOUT WIDTH FROM 576 TO
     767.98px, AND THAT BAND IS EXACTLY WHERE CHROME'S PRINT LAYOUT LANDS -
     measured 718-745px for A4 and Letter with any margin at all. Left alone,
     this rate card prints at 516px on a ~718px page: a quarter of the printable
     width thrown away as a second indent on top of the printer's own margin,
     and the section runs 240px longer for it, which is an extra sheet. The
     @page margin is the printer's business; the container must not add its own.
     .jd-pricing .container is 0-2-0 and takes Bootstrap's 0-1-0 with no flag. */
  .jd-pricing .container{
    max-width:none;
    width:100%;
    padding-left:0;
    padding-right:0;
  }
  .jd-pricing .wow{
    visibility:visible !important;   /* FLAG 2 */
    opacity:1 !important;            /* FLAG 2 */
    animation:none !important;       /* FLAG 2 */
  }

  section.section-gaping.jd-pricing{
    padding:20px 0 18pt;
    background-color:#ffffff;
    background-image:none;           /* 1.3% grey over every square inch of a
                                        rate card is toner spent on nothing */
    border-top:0;
    border-bottom:1px solid #7f6630; /* 5.461:1 on white */
    break-before:auto; page-break-before:auto;   /* see note 5 */
  }

  .jd-pricing .section_title{ margin-bottom:18pt; }
  .jd-pricing .section_title h2{
    color:#000;
    break-after:avoid; page-break-after:avoid;
  }
  .jd-pricing .section_title h2::after{
    background:none;
    border-top:1px solid #a89f8a;    /* 2.628:1 on white */
    height:0;
  }

  /* the models stack and the "or" rule turns horizontal */
  .jd-pricing .jd-p-terms{ display:block; }
  .jd-pricing .jd-p-model{
    max-width:none;
    break-inside:avoid; page-break-inside:avoid;
  }
  .jd-pricing .jd-p-std{ padding-right:0; }
  .jd-pricing .jd-p-zero{
    padding-left:0;
    border-left:0;
    margin-top:24pt;
    padding-top:24pt;
    border-top:1px solid #7f6630;    /* 5.461:1 on white */
  }
  .jd-pricing .jd-p-band{
    color:#000;
    font-size:14pt;
    break-after:avoid; page-break-after:avoid;
  }

  /* THE RULES THIS BRANCH EXISTS FOR — see note 2 */
  .jd-pricing .jd-p-table{
    table-layout:fixed;
    break-inside:avoid; page-break-inside:avoid;
    margin-bottom:16pt;
  }
  .jd-pricing .jd-p-table thead{ display:table-header-group; }
  .jd-pricing .jd-p-table tr{ break-inside:avoid; page-break-inside:avoid; }

  .jd-pricing .jd-p-table thead th{
    color:#000;
    font-size:9pt;
    letter-spacing:.06em;
    border-bottom-color:#7f6630;     /* 5.461:1 — the head rule stays the
                                        strongest line on the sheet, because on
                                        a repeated header it is the reader's
                                        only anchor on page 2 */
  }
  .jd-pricing .jd-p-table tbody th[scope="row"]{
    color:#000;
    font-size:11pt;
    padding:9pt 10pt 9pt 0;
    border-bottom-color:#a89f8a;     /* 2.628:1 on white */
  }
  .jd-pricing .jd-p-table tbody td{
    padding:9pt 0 9pt 10pt;
    border-bottom-color:#a89f8a;
  }
  .jd-pricing .jd-p-fig{ color:#000; font-size:13pt; }
  /* note 1 — the qualifiers and the two terms print BLACK, not grey */
  .jd-pricing .jd-p-qual{ color:#000; font-size:9.5pt; }
  .jd-pricing .jd-p-term{ color:#000; font-size:9pt; }
  .jd-pricing .jd-p-table tbody.jd-p-fee th[scope="row"],
  .jd-pricing .jd-p-table tbody.jd-p-fee td{ border-top-color:#7f6630; }

  .jd-pricing .jd-p-effective{
    color:#000;
    font-size:10.5pt;
    max-width:none;
    border-top-color:#a89f8a;
    break-inside:avoid; page-break-inside:avoid;
  }

  /* the note. Its third item is the sheet's only provenance — see note 6. */
  .jd-pricing .jd-p-note{
    margin-top:24pt;
    padding-top:20pt;
    border-top-color:#7f6630;        /* 5.461:1 on white */
    break-inside:avoid; page-break-inside:avoid;
  }
  .jd-pricing .jd-p-note ul{ max-width:none; }
  .jd-pricing .jd-p-note ul li{
    color:#000;
    font-size:10.5pt;
    line-height:1.6;
    border-top-color:#a89f8a;
    orphans:2; widows:2;
  }
  /* the dash is a BOX drawn with background-color, and Chrome and Safari
     suppress background graphics in print by default - so on paper the three
     note dashes disappear while the fourteen services check marks, being real
     glyphs, print normally: a ticked inventory beside an unmarked note. A
     border prints. Same fix the ornament above and the forced-colors branch
     already use on this exact selector. */
  .jd-pricing .jd-p-note ul li::before{
    background:none;
    height:0;
    border-top:2px solid #000;
  }
  .jd-pricing .jd-p-note a{
    color:#000;
    padding:0; margin:0;             /* the 44px touch box is meaningless on
                                        paper and would only add leading */
    text-decoration:underline;
    text-decoration-thickness:1px;
  }

  /* the inventory. Two columns on A4 portrait: fourteen items at one per line
     would run a second sheet for no reason, and ~330px is a comfortable
     measure for a ticked item at 10.5pt. Item 13 still spans. */
  .jd-pricing .jd-p-services{
    margin-top:24pt;
    padding-top:20pt;
    border-top-color:#7f6630;        /* 5.461:1 on white */
  }
  .jd-pricing .jd-p-services ul{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:28pt;
  }
  .jd-pricing .jd-p-services ul li.jd-p-wide{ grid-column:1 / -1; }
  .jd-pricing .jd-p-services ul li{
    color:#000;
    font-size:10.5pt;
    line-height:1.45;
    padding-top:6pt; padding-bottom:6pt;
    border-top-color:#a89f8a;
    break-inside:avoid; page-break-inside:avoid;
  }
  .jd-pricing .jd-p-services ul li::before{ color:#000; }
  .jd-pricing .jd-p-concierge{
    color:#000;
    font-size:10.5pt;
    border-top-color:#a89f8a;
    break-before:avoid; page-break-before:avoid;
  }
  .jd-pricing .jd-p-tc{ color:#000; font-size:9.5pt; }
}

/* ==========================================================================
   "EMERGENCY & CARE PARTNER" (.jd-partners) — THE WALL
   REPLACES .jd-certified IN PLACE. The markup goes between the
   `<!-- /address -->` that closes .jd-location (index.php:1861) and the
   `<!-- footer -->` at index.php:1887; the CSS block it replaces is
   css/banner.css:9747-10570 and ALL of it goes — 52 of the file's 55
   occurrences of `jd-certified` live inside it and none of them has a home any
   more. (The other three are prose inside the .jd-pricing header comment; see
   the removal notes.)
   Appended to css/banner.css, the LAST of this page's own stylesheets
   (index.php:22, after css/all.css:13, css/bootstrap.min.css:14, style.css:15,
   css/slick.css:16, css/animate.min.css:17, css/jquery.fancybox.min.css:18,
   css/responsive.css:19, css/owl.carousel.css:20 and css/header.css:21), so
   every rule below wins on EQUAL specificity by source order and needs no flag
   except FLAGS 1-4.
   BUMP index.php:22 FROM ?v=20 TO ?v=21 AND index.php:1947 FROM
   js/custom.js?v=3 TO ?v=4 IN THE SAME DEPLOY. This is the first room on this
   page whose CSS is useless without its JS: a half-applied deploy leaves either
   an unstyled 38-image strip or a styled grid with no controls.

   images/IGBC.png IS STILL IN USE AND MUST NOT BE DELETED FROM THE SERVER. The
   plaque that carried it here is gone, but the page's own footer still prints
   it at index.php:1916. Its uses go 2 -> 1.

   *** THE GOVERNING IDEA: RECOGNITION, NOT REASSURANCE ***
   Eleven rooms of this page ask the reader to believe Jagriti Dham. This one
   asks them to recognise somebody else — Apollo, Fortis, Manipal, Narayana —
   and to transfer trust they already hold. Every value below is that one
   sentence: the tile is sized so a mark is RECOGNISABLE rather than merely
   present; the wall opens on the six best-known names rather than on the order
   the files happened to arrive in, because autoplay never delivers 38 logos to
   anybody — at 6s a page that is 95 seconds on a phone, so the FIRST FRAME is
   the whole design; and the reader gets a real, permanently visible, 46px way
   to STOP the run at the moment they think they saw one they know. A logo a
   reader cannot name is worth nothing here, so the room is built around the
   moment of naming.

   ON MOTION, which is the question this room had to answer rather than duck:
   the owner's own config is accidentally correct for recognition. smartSpeed
   500 against a 6000ms dwell leaves the wall STILL 92% of the time — the exact
   inverse of the defect .photo_gallery was found with (1700ms dwell under a
   2000ms glide, nothing ever at rest). A 75-year-old can fixate on a still wall
   that turns a page every six seconds; they cannot fixate on a conveyor. So the
   run stays. What gets fixed is the thing that actually fails that reader:
   nineteen unfocusable sub-44px dots, replaced by three 46px plates.

   ==========================================================================
   THE BITMAPS DECIDED THE GROUND, NOT THE LADDER
   ==========================================================================
   MEASURED, all 38 files in images/partners/, and the container headers read
   byte by byte:
     36  opaque, PURE WHITE field, 1080x1080, VP8 or VP8L, no alpha chunk
      1  PG-Path-Labs-Scan-Clinics-PNG-LOGO.webp — a VP8X container, 1279x1280,
         ALPHA flag set. THE ONLY FILE IN THE SET WITH AN ALPHA CHANNEL.
      1  Titan-Eye.webp — opaque, and its field is #000000 with white and teal
         type on it. THE BRIEF'S CENSUS (36 white + 1 transparent = 37) WAS ONE
         SHORT. This is the 38th, and it is the reason the tile carries a
         hairline at all.
   Three further measured facts that need no rule but do need saying, because
   they are what a "white-ground logo" turns out to mean in practice:
     16.webp (B. P. Poddar) is a circular seal that runs to ALL FOUR EDGES —
       there is no white margin to speak of.
     12.webp bleeds red (#db1f28) and LOGO-FOLDER.webp bleeds green to the trim.
     17.webp (ARDSI) is a black brain drawn on a PALE BEIGE head silhouette,
       not on white — the frame is white, the mark's own ground is not.
   That last one is why this room does not try to subtract the ground with a
   blend. A blend removes white; it TINTS everything else, and three of these
   marks are everything else.

   SO THE TILE MUST BE LIGHT, AND THAT IS PRECISELY WHY THE PLANE MUST BE DARK.
   See the ground note. A white tile on paper is 1.098:1 and is not an object.
   On #3a5240 it is 8.534:1 and is the strongest edge in the room.

   ==========================================================================
   THE TILE IS THE DESIGNED OBJECT — FIVE DECISIONS, EACH FORCED BY PIXELS
   ==========================================================================
   1  #ffffff, NOT the house paper #f7f3e9. The single most load-bearing value
      in this block, and it is forced by measurement rather than taste. 36 of
      the bitmaps carry their own pure-white field. On an #f7f3e9 tile each of
      those fields would show as a lighter rectangle inside a warmer one at
      1.098:1 — faint, but a hard edge, AT A DIFFERENT SIZE FOR EVERY LOGO,
      because each export pads its mark differently. On #ffffff the bitmap's
      field and the tile are the same white, that seam disappears, and the
      tile's own edge is the only edge in the object. The one transparent file
      composites to the same white and joins the set for free.
      The heading stays #f7f3e9 DELIBERATELY: the room reads as one warm sheet
      of type over a set of cooler mounted objects, not as thirty-nine white
      things.
   2  NO PADDING between tile and image. Both are white; padding would be
      invisible and would only shrink the mark. The image runs to the trim,
      which is also the only treatment under which 16.webp's edge-to-edge seal
      does not acquire a white ring nothing else in the set has.
   3  SQUARE, CAPPED AT 180px. The sources are 1:1 with the mark centred, so a
      square tile maps them 1:1 and renders the mark at full tile width; a
      landscape tile would letterbox a square source and throw mark size away.
      Mechanism is `width:100%; height:auto; max-height:180px;
      object-fit:contain` on the img — no aspect-ratio needed, no new-feature
      risk, and the degradation in an engine without object-fit is an 8-11%
      stretch in two bands rather than a collapse.
      The cap has two reasons. First, DERIVED from Owl's own arithmetic (see the
      breakpoints note), the tile is wider than 182 from a 414px viewport to 767
      and from 1200 up, and uncapped the 576-767 band would give TWO logos a
      250px-tall band. Second, QUALITY: these files are 6.6-114 KB for 1,166,400
      pixels — Fortis.webp is 9,012 bytes, 0.0077 bytes/pixel — so they are
      heavily compressed and go soft when pushed. 180 from 1080 is a 6:1
      downsample, still 3:1 at 2x DPR.
   4  THE HAIRLINE IS LOAD-BEARING, NOT DECORATION. 1px #cbb279. On the 37 white
      tiles it is a quiet warm rim — 2.062:1 against the tile, 4.138:1 against
      the plane, above the 3:1 WCAG 1.4.11 asks of a boundary that carries
      meaning — and it is what makes these MOUNTED PLAQUES rather than pasted
      images, which is the language of .jd-location's 3px paper board directly
      above. On Titan-Eye.webp IT IS THE ONLY BOUNDARY THE TILE HAS: #000000 on
      #3a5240 is 2.460:1 and would read as a hole punched in the plane; the
      hairline is 10.183:1 against that tile's own field. One value doing quiet
      work 37 times and essential work once, which is exactly what earns a value
      its place.
   5  NO HOVER STATE ON A TILE. Nothing here is a link — no partner URLs were
      supplied — so a hover response would promise an affordance that does not
      exist. The house rule about real affordances instead of hover-only
      reveals cuts the other way here and FORBIDS a fake one.

   RADIUS WITHOUT A FLAG. style.css:1556 carries
   `.owl-carousel .owl-item img{border-radius:0!important}`. The radius goes on
   the TILE (3px, byte-identical to .jd-location's .jd-l-board at
   banner.css:8805) and `overflow:hidden` clips the square bitmap into it. That
   !important is obeyed and agreed with rather than fought — zero flags spent.
   (It is also what neutralises owl.carousel.css:51's own `border-radius:8px 0`
   on carousel images, which would otherwise put one rounded corner and one
   square corner on every logo on this page.)

   ==========================================================================
   SCOPING
   ==========================================================================
   Every selector is anchored on `.jd-partners` or on one of `.jd-pn-wall`,
   `.jd-pn-tile`, `.jd-pn-ink`, `.jd-owl-pause`. `.jd-partners` occurs once in
   the document. `.section_title`, `.owl-*`, `.jd-sr` and `.jd-owl-pause` are
   page-wide names and are ALWAYS reached through `.jd-partners`. There is no
   rule here that can leave this room.
   THE PART PREFIX IS `jd-pn-`, NOT `jd-p-`. VERIFIED: `jd-p-` already belongs
   to .jd-pricing — 167 occurrences in this file from banner.css:10571 —
   so the single-initial slot the house convention wants is taken. `jd-pn-` was
   verified at 0 occurrences across style.css, css/banner.css,
   css/responsive.css, css/header.css and js/custom.js.
   THE PAUSE CONTROL KEEPS THE HOUSE NAME `.jd-owl-pause`, room-scoped. It is
   already declared at banner.css:3348 (#floor-plan) and banner.css:6384
   (.gallery) and injected by js/custom.js:80 and :165. This is the fifth
   instance of ONE object; giving it a fifth name would be the start of five
   control languages on one page. Both existing declarations are scoped, so
   nothing bleeds in either direction.
   THE MOUNT IS `.jd-pn-wall`, NOT the home page's `.media`. VERIFIED at 0
   occurrences across all four stylesheets and js/custom.js — which is exactly
   the state a generic name is in right up until the day a future stylesheet
   collides with it.

   ==========================================================================
   THE VERSION MISMATCH, WHICH NOBODY SHOULD HAVE TO REDISCOVER
   ==========================================================================
   css/owl.carousel.css is banner-stamped v2.3.4. js/owl.carousel.js is
   v2.2.0. EVERY BEHAVIOURAL CLAIM IN THIS BLOCK IS MADE AGAINST THE JS, and
   the JS is the 2.2.0 one. Do not infer 2.3.x behaviour from the stylesheet
   header — in particular, 2.2.0 has NO a11y module and NO `dotElement` option.

   ==========================================================================
   THE FLAG AUDIT — four, and one of them matches nothing today on purpose
   ==========================================================================
   FLAG 1  `.jd-partners .section_title h2` font-size. TWO rules carry
           !important on this heading, not one:
             style.css:451   `.h2,h2{font-size:20px!important}`
                             inside @media (max-width:575.98px)
             css/responsive.css:52  `.section_title h2{margin-bottom:12px;
                             font-size:20px!important}`
                             inside @media only screen and (max-width:767px)
           20px is below this page's floor for a section heading read by a 55+
           audience, and only an author !important outranks an author
           !important. The same flag also settles style.css:498's UNFLAGGED
           `.section-gaping h2{font-size:2rem}` at <=767.98. The clamp is
           byte-identical to the one nine rebuilt rooms carry.
   FLAG 2  `.jd-partners .wow`. js/wow.min.js (index.php:1949) applyStyle writes
           an INLINE `visibility:hidden` and `animation-name:none` on every .wow
           box, and `new WOW().init()` (index.php:1952) runs unconditionally.
           Only an author !important outranks a non-important inline
           declaration. THE MARKUP THAT SHIPS CARRIES NO `wow` CLASS — see the
           title — so this matches nothing today. It is the tripwire against the
           home page's `<div class="section-title text-center wow slideInUp">`
           being pasted back over the title, and against a half-applied two-file
           deploy. Byte-identical to the guard the removed block carried.
   FLAG 3  `.owl-nav.disabled` and `.owl-dots:empty`. style.css:1648 says
           `.owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled
           {display:inherit!important}` — this page deliberately OVERRIDES
           owl.carousel.css:52-54's `display:none` and forces Owl's own
           self-disabling furniture back into view. VERIFIED at
           owl.carousel.js:2867: the `.owl-dots` div is appended to the element
           UNCONDITIONALLY and only then given `.disabled`, so `dots:false`
           still leaves an empty div inside the mount. Same rule, same flag,
           same two selectors, same `:empty` idiom as #floor-plan's FLAG 5 at
           banner.css:3009-3010 — `:empty` rather than `.disabled` so that if
           anyone ever flips `dots:true` in js/custom.js the suppression stops
           applying ON ITS OWN rather than hiding a live control.
   FLAG 4  @media print only, five declarations. VERIFIED: Owl writes
           `transform`, `width` and `margin-right` INLINE on `.owl-stage` and
           `.owl-item`, and only an author !important reaches an inline
           declaration. They exist nowhere but on paper.
   THERE IS NO FLAG FOR THE LOGO CORNERS — see the radius note above.
   ========================================================================== */

/* ---------- the ground ---------------------------------------------------
   0-2-1 (`section.section-gaping.jd-partners`) over style.css:14's
   `.section-gaping{background:#fff;padding:30px 0}` at 0-1-0. THE ELEMENT
   SELECTOR IS LOAD-BEARING, NOT PADDING: `.section-gaping` plus one class is
   0-2-0, which merely ties style.css:471's `.section-gaping:nth-child(odd)`
   and would win on source order alone; `section` makes it unambiguous.
   56/60 and the two steps further down are BYTE-IDENTICAL to .jd-location's
   (banner.css:8703-8707 and :9144-9153) and to the block being removed. These
   two sections are adjacent and share one continuous descent; if their vertical
   rhythm stepped at different rates the 60+56px of air across the seam would go
   lopsided as the viewport changed. IF SOMEBODY EDITS .jd-location's PADDING,
   EDIT THIS TOO.
   background-COLOR, not the shorthand: nothing sets a background-image here, so
   the colour is the whole job and the shorthand would only be a wider blast
   radius. FLAT — no grain, no gradient, no foot rule — so the declared value is
   the painted value and every ratio in this block is exact. */
section.section-gaping.jd-partners{
  padding:56px 0 60px;
  background-color:#3a5240;          /* L* 32.47. HEAD 1.515:1 / dL* 11.26 vs
                                        .jd-location #4f6f52; FOOT 1.863:1 /
                                        dL* 19.24 vs footer #222222 */
}

/* ---------- the title ----------------------------------------------------
   It also names the <section> through aria-labelledby, so the page's last
   content block is a real region landmark and one element answers both the
   heading requirement and the accessible-name requirement.
   `.section_title` is KEPT as the wrapper (0-2-0 over style.css:27's
   `.section_title{margin-bottom:20px}`) because it is the hook every finished
   room's title uses. NOT the home page's `.section-title` — that class does not
   exist in this page's stylesheets at all — and WITHOUT `.text-center`
   (style.css:29 and :36 already centre it) and WITHOUT `.text-left` (so
   style.css:1844 cannot reach it).
   #f7f3e9, not #fff: the heading and the 37 white tiles are deliberately NOT
   the same white. The tiles are #ffffff because the bitmaps forced it; the
   heading is the page's own paper. 7.701:1 — AAA at ANY size.
   THE HEADING TEXT IS THE OWNER'S, VERBATIM, INCLUDING THE SINGULAR "Partner".
   The clamp is byte-identical to nine other rooms'. */
.jd-partners .section_title{ margin-bottom:30px; }

.jd-partners .section_title h2{
  font-family:Helvetica, sans-serif;
  font-size:clamp(23px, 2.7vw, 34px) !important;   /* FLAG 1 — see the audit */
  font-weight:700;                   /* restated: style.css:32 sets 500 and
                                        style.css:451 sets 700, both unflagged */
  line-height:1.24;
  letter-spacing:.004em;
  color:#f7f3e9;                     /* 7.701:1 on #3a5240 — AAA at any size */
  margin:0;                          /* restated: style.css:34/453/499 and
                                        css/responsive.css:52 all set
                                        margin-bottom */
  padding:0;
  position:static;                   /* kills style.css:38's position:relative,
                                        the only thing making style.css:41's
                                        absolute bar work */
  text-transform:none;
}

/* the ornament every finished room closes its title with. style.css:41
   `.section_title h2:after` is position:absolute with bottom:-5px, left:0,
   right:0, margin:0 auto and a 60x4 solid #cbb279 bar, and it has caused
   overlap bugs on this page more than once. Neutralised EXPLICITLY — static,
   block, redrawn as flow content, bottom/left/right unset — rather than left to
   be defeated by position:static on the parent alone. 0-2-2 against its 0-1-2.
   Same 58px, same 1px, same rgba(203,178,121,.95), same `18px auto 0` as the
   eleven rooms above. Its peak stop composites over this ground to #c4ad76 and
   reads 3.895:1 — the figure banner.css already publishes for this exact
   ornament on this exact plane. DECORATIVE RANK; no information hangs on it. */
.jd-partners .section_title h2::after{
  content:"";
  position:static; display:block;
  bottom:auto; left:auto; right:auto;
  width:58px; height:1px;
  margin:18px auto 0;
  background:linear-gradient(90deg,transparent,rgba(203,178,121,.95),transparent);
}

/* ---------- the wall, and what it does when the JS never arrives ---------
   owl.carousel.css:9-10 sets `.owl-carousel{display:none}` and only
   `.owl-carousel.owl-loaded{display:block}` (:72-73) brings it back. Every
   other carousel on this page carries that exposure silently; this one is 38
   images and the largest blank a script failure could leave, sitting directly
   above the footer. So the un-initialised state is DESIGNED instead of left to
   chance: `:not(.owl-loaded)` lays the same tiles out as a wrapping grid, which
   is what this room would have been if the owner had not asked for a slider.
   One declaration, no breakpoints (auto-fill does the ladder), and it stops
   applying the instant Owl adds .owl-loaded.
   0-3-0 against owl.carousel.css:9's 0-1-0.
   minmax(140px,1fr) gives 2 across at a 320px viewport — the same count Owl's
   own ladder gives there — and 8 across at 1256. */
.jd-partners .jd-pn-wall:not(.owl-loaded){
  display:flex;
  flex-wrap:nowrap;                  /* NOT a wrapping grid. This selector does
                                        not only match the JS-failure case - it
                                        matches on EVERY load, from parse until
                                        Owl adds .owl-loaded in
                                        jQuery(document).ready. A wrapping grid
                                        at 320px resolves to 2 columns, so 38
                                        tiles paint as ~19 rows, roughly 2,900px
                                        tall, and then collapse to one 182px row
                                        when Owl initialises - throwing a reader
                                        who is already scrolling toward the
                                        footer nearly three screens. This is
                                        .gallery's own guard (banner.css:5856):
                                        one clipped row whose bases mirror the
                                        owl responsive map exactly, so what
                                        shows before init is what shows after. */
  overflow:hidden;
  gap:15px;                          /* the carousel's own margin */
}
.jd-partners .jd-pn-wall:not(.owl-loaded) .jd-pn-tile{ flex:0 0 calc((100% - 75px) / 6); }
@media (max-width:1199.98px){
  .jd-partners .jd-pn-wall:not(.owl-loaded) .jd-pn-tile{ flex-basis:calc((100% - 60px) / 5); }
}
@media (max-width:991.98px){
  .jd-partners .jd-pn-wall:not(.owl-loaded) .jd-pn-tile{ flex-basis:calc((100% - 45px) / 4); }
}
@media (max-width:767.98px){
  .jd-partners .jd-pn-wall:not(.owl-loaded) .jd-pn-tile{ flex-basis:calc((100% - 15px) / 2); }
}

/* the home page's `<div class="row row-cols-2 row-cols-sm-2 row-cols-md-5
   justify-content-center">` wrapper is DROPPED in markup, not overridden: its
   declared 2/2/5 columns are contradicted by the carousel's own ladder and it
   resolves to a single 100%-wide flex child. The home page's `<div
   class="item">` wrapper is dropped too — on THIS page style.css:1559
   `.owl-carousel .item{width:96%;margin:0 auto}` would silently shave 4% off
   every tile. The tile is the direct child of .owl-item and the gutter is
   Owl's own margin:15. */
.jd-partners .jd-pn-wall{ margin:0; }

/* ---------- the tile -----------------------------------------------------
   See the header for all five decisions. box-sizing is restated rather than
   inherited from Bootstrap's `*` reset because the border is part of the
   measured width and a future reset must not silently move it. */
.jd-partners .jd-pn-tile{
  box-sizing:border-box;
  width:100%;
  background:#ffffff;                /* 8.534:1 against the plane — the tile IS
                                        the object; header note 1 */
  border:1px solid #cbb279;          /* 4.138:1 on the plane, 2.062:1 on the
                                        tile; header note 4 */
  border-radius:3px;                 /* .jd-location's .jd-l-board value
                                        (banner.css:8805) exactly — that room is
                                        one 3px paper board, this one is 38
                                        small ones */
  overflow:hidden;                   /* clips the square bitmap into the radius,
                                        which is why style.css:1556's
                                        `border-radius:0!important` on the image
                                        needs no flag: it is obeyed, and the
                                        corner is cut by the parent instead */
}

/* THE ONE BLACK BITMAP. Titan-Eye.webp is opaque #000000 to its trim, with
   white and teal type on it. In the bands where the tile is wider than the
   180px cap, `object-fit:contain` leaves tile showing on each side — DERIVED,
   34.3px per side in the 576-767 band and 7.4px per side at >=1280 — and on a
   white tile that would draw a white frame round a black logo.
   Painting the tile the bitmap's own field colour applies EXACTLY the rule the
   other 37 get — the tile IS the logo's field, so the logo has no visible edge —
   at the one value that one file needs. The hairline above is what keeps this
   tile an object rather than a hole in the plane. */
.jd-partners .jd-pn-ink{ background:#000000; }   /* hairline 10.183:1 on it */

/* The image carries its own intrinsic width/height attributes in the markup
   (1080x1080, or 1279x1280 for PG Path Labs — VERIFIED from the file headers)
   so the UA reserves the right box before the bytes land and the wall never
   shifts.
   height:auto + max-height IS the whole sizing mechanism and it needs no
   aspect-ratio: the sources are square, so `width:100%;height:auto` makes the
   tile square by itself, and max-height clamps it where Owl's ladder makes the
   tile wider than 182. object-fit then centres the mark in what is left. In an
   engine with no object-fit the box is identical and the only cost is an 8-11%
   horizontal stretch at the capped widths.
   display and width are restated over owl.carousel.css:49-51 (which is 0-2-1 to
   this rule's OWN 0-2-1 - the SAME 0-2-1 - so this wins on
   SOURCE ORDER, not on specificity: css/banner.css is index.php:22 and
   css/owl.carousel.css is index.php:20. Move this block earlier in the head
   and that rule takes back border-radius:8px 0, giving every logo on the wall
   one rounded corner and one square one);
   border-radius is NOT restated — see the header. */
.jd-partners .jd-pn-tile img{
  display:block;
  width:100%;
  height:auto;
  max-height:180px;                  /* 6:1 downsample from 1080px; note 3 */
  object-fit:contain;
  object-position:center;
}

/* ---------- the controls -------------------------------------------------
   THE CONFIG CHANGED HERE AND EVERY REASON IS VERIFIED IN THE PLUGIN SOURCE.
   The home page passes `nav:false, dots:true`. This room ships
   `nav:true, dots:false`:
     1  38 items at 2 per page below 768 is NINETEEN dots (owl.carousel.js:2916,
        `size = settings.dotsEach || settings.items`). At the 44px this page
        floors touch targets to, that row is 836px wide inside a 296-351px
        container. There is no 19-dot layout that passes.
     2  Owl 2.2.0 HARDCODES the dot as `$('<div>').addClass(dotClass)
        .append($('<span>'))` at owl.carousel.js:2860 — there is NO `dotElement`
        option to match `navElement` (:2817) — and the click handler is
        delegated to the LITERAL SELECTOR 'div' at :2869, so a hand-substituted
        <button> would silently stop working. A dot can only be made focusable
        and nameable by rebuilding a button out of a div, keydown handlers and
        Space's page-scroll default included. An arrow becomes a real button
        with ONE config line this house has already shipped twice
        (js/custom.js:52 and :112).
     3  On a wall of 38 marks, "page 7 of 19" is not information. "Back one" is:
        the reader who half-recognised a logo as it left the frame needs to
        REVERSE, and a dot cannot express that.
     4  nav:true also means a control still exists under prefers-reduced-motion,
        where the pause button is correctly never injected. On the owner's
        config a reduced-motion reader would have had no control at all.
   Everything else in the owner's config is kept verbatim — margin 15,
   smartSpeed 500, loop, autoplayHoverPause and the whole responsive ladder.

   THE PLATES ARE FILLED HERE AND OUTLINED ELSEWHERE, DELIBERATELY.
   #floor-plan (banner.css:3348) and .gallery (banner.css:6384) sit on paper
   (#e5e1d8, #d5d3cb) where a paper fill would be invisible and an outline was
   the only option. This room sits on a dark plane, where the same logic
   inverts: an outlined plate would be a thin brass rectangle whispering at
   4.138:1 in a room whose entire content is bright white blocks. Same 46px
   square, same 3px radius, same glyph geometry, same aria contract — the FILL
   inverts because the ground did. That is the same invert .jd-location makes
   for its icon chips one room above.
   The bar is a flex row so the pause control js/custom.js injects BETWEEN the
   arrows lays out with them instead of floating over the wall: ONE three-plate
   transport (back, pause, forward) in reading order and in tab order. .gallery
   anchors its plate in a corner because that room's arrows sit under a column
   of photographs; on a wall for a 75-year-old, one object beats two.
   VERIFIED SAFE: Navigation.prototype.destroy (owl.carousel.js:2884-2895) is
   the only place `.owl-nav`'s children are removed, and it runs on destroy, not
   on refresh — Navigation.initialize creates the arrows once and draw() (:2953)
   only toggles classes — so the injected button survives resize and refresh.
   Geometry and gap byte-identical to #floor-plan's bar at banner.css:2998-3007.
   22px, not the 15px gutter and not style.css:1640's 16px: the control bar must
   not read as one more gap in the wall. */
.jd-partners .owl-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:22px 0 0;
  text-align:center;                 /* restated over style.css:1640 */
}
.jd-partners .owl-nav.disabled{ display:none !important; }        /* FLAG 3 */
.jd-partners .owl-dots:empty{ display:none !important; }          /* FLAG 3 */

/* 46x46 clears the 44px floor on BOTH axes. Owl's default nav element is a DIV
   with no tabindex, role or name (owl.carousel.js:2817); js/custom.js passes
   `navElement: 'button type="button"'` so these are real buttons, which is also
   what owl.carousel.css:64-71 already expects.
   SPECIFICITY, stated exactly because both proposals miscounted it:
   `.jd-partners .owl-nav button.owl-prev` is 0-3-1. It BEATS style.css:1641's
   `.owl-carousel .owl-nav .owl-prev` (0-3-0), which sets font-size:22px,
   display:inline-block, margin:0 5px and color:#4f6f52 — and #4f6f52 on this
   plane is 1.515:1, a control nobody could see. It TIES owl.carousel.css:64-71
   (also 0-3-1, background:none / color:inherit / border:none / font:inherit)
   and wins there on source order. owl.carousel.css:70's `padding:0 !important`
   is agreed with rather than fought: padding:0 is what this plate wants.
   `.jd-partners .jd-owl-pause` is 0-2-0 and nothing on this page competes with
   it — the two existing declarations are scoped to #floor-plan and .gallery. */
.jd-partners .owl-nav button.owl-prev,
.jd-partners .owl-nav button.owl-next,
.jd-partners .jd-owl-pause{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  position:relative;
  left:auto; right:auto;             /* style.css:485-493 (<=991.98px) and
                                        style.css:501-507 (<=767.98px) set
                                        .owl-prev{left:-18px/-8px} and
                                        .owl-next{right:-18px/-8px} at 0-1-0.
                                        They are inert on #floor-plan's arrows
                                        (banner.css:3010) and .gallery's
                                        (banner.css:6293) ONLY because those
                                        declare no position at all. The pause
                                        plate needs position:relative for its
                                        glyph, and the arrows inherit it by
                                        sharing this selector list - which
                                        switches those legacy offsets on and
                                        pushes the transport 28px apart under
                                        992px, then 8px under 768px. */
  width:46px; height:46px; min-width:46px;
  margin:0;                          /* kills style.css:1641's margin:0 5px —
                                        the flex gap is the spacing now */
  padding:0;
  cursor:pointer;
  font-size:17px;
  line-height:1;
  background:#f7f3e9;                /* 7.701:1 on the plane — the plate's outer
                                        edge is this FILL, not the border */
  color:#22331f;                     /* 12.138:1 on the plate */
  border:1px solid #2b3f2f;          /* 10.218:1 keyline inside the plate. It is
                                        near-invisible against the plane
                                        (1.327:1) BY DESIGN — the fill is the
                                        outer edge — and it is declared so that
                                        forced-colors has a border to recolour */
  border-radius:3px;                 /* the tile's radius */
  transition:background-color .22s ease;
}
/* hover only where hovering exists — on a touch screen :hover sticks after the
   tap and would leave a plate looking permanently half-pressed. */
@media (hover:hover){
  .jd-partners .owl-nav button.owl-prev:hover,
  .jd-partners .owl-nav button.owl-next:hover,
  .jd-partners .jd-owl-pause:hover{
    background:#ece8dd;              /* 6.971:1 on the plane, glyph 10.987:1 */
    color:#22331f;                   /* restated over style.css:1647, which
                                        repaints :hover #4f6f52 */
  }
}

/* THE PAUSE GLYPH. Two bars = playing (press to pause); one triangle = paused
   (press to play). SHAPE, not colour, so the state survives forced-colors,
   greyscale and print. Drawn from geometry, so no codepoint is asked of the
   webfonts. Geometry byte-identical to .gallery's at banner.css:6408-6421 and
   #floor-plan's at :3367-3380, re-centred by 1px for a plate whose 1px border
   sits inside a fill rather than on a transparent ground.
   THE ACCESSIBLE NAME NEVER CHANGES; aria-pressed alone carries the state. A
   toggle that renames itself announces "Play..., pressed" at the exact moment
   the run has stopped, which inverts the truth. This page shipped that
   inversion once and it was a defect; it is not repeated. */
.jd-partners .jd-owl-pause::before,
.jd-partners .jd-owl-pause::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:4px; height:14px; background:#22331f;      /* 12.138:1 on the plate */
}
.jd-partners .jd-owl-pause::before{ left:16px; }
.jd-partners .jd-owl-pause::after{ left:24px; }
.jd-partners .jd-owl-pause.is-paused::before{
  left:17px; width:0; height:0; background:none;
  border-left:12px solid #22331f;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}
.jd-partners .jd-owl-pause.is-paused::after{ display:none; }

/* The label inside each arrow. Declared SCOPED to .jd-partners rather than
   reusing `#floor-plan .jd-sr` (banner.css:3329) or `.gallery .jd-sr` (:6356),
   so no room can silently restyle another's JS-injected furniture; an unscoped
   .jd-sr would be the one selector in this file able to reach outside its own
   section. Byte-identical to both. */
.jd-partners .jd-sr{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- focus --------------------------------------------------------
   THREE RULES, NOT TWO, AND THE ORDER IS THE POINT. Outside :is()/:where(), a
   single unknown pseudo-class invalidates the WHOLE rule, so the two-rule form
   — :focus:not(:focus-visible){outline:0} plus :focus-visible{...} — drops BOTH
   rules in an engine without :focus-visible and leaves a real control with NO
   indicator at all. The bare :focus lands the ring first; the second rule takes
   it back only where the third can put it right.
   THIS IS ALSO A CORRECTION, not just a copy. The block being removed shipped
   the two-rule form (banner.css:10317-10321) and could afford to, because
   nothing in .jd-certified was focusable. This room has three real buttons, so
   the hole is no longer theoretical.
   POSITIVE OFFSET so the ring lands on the PLANE at 7.701:1 rather than inside
   the paper plate, where #f7f3e9 on #f7f3e9 is 1:1 and invisible. The 3px gap
   is plane on both sides of the ring, so 7.701:1 is the figure that matters for
   WCAG 2.4.11. The three plates are 10px apart and the ring is 3px at 3px
   offset, so no ring can reach a neighbour. */
.jd-partners :focus{
  outline:3px solid #f7f3e9;         /* 7.701:1 on the plane */
  outline-offset:3px;
}
.jd-partners :focus:not(:focus-visible){ outline:0; }
.jd-partners :focus-visible{
  outline:3px solid #f7f3e9;
  outline-offset:3px;
}

/* ---------- FLAG 2: the WOW tripwire -------------------------------------
   See the audit in the header. This matches nothing in the markup that ships.
   The home page's title carries `wow slideInUp`; this one deliberately does
   not, because the title is the region's accessible name, and content whose
   visibility depends on a scroll observer having run is content that can be
   lost — and css/animate.min.css v3.7.2's slideInUp has NO opacity channel, so
   a stranded box is stranded at visibility:hidden with nothing partial about
   it. The opacity line is for zoomIn/fadeIn, which is what somebody pasting
   from elsewhere on this page would bring. */
.jd-partners .wow{
  visibility:visible !important;     /* FLAG 2 — answers WOW.js's inline
                                        visibility:hidden (js/wow.min.js at
                                        index.php:1949, init at index.php:1952) */
  opacity:1 !important;              /* FLAG 2 */
  animation-name:none !important;    /* FLAG 2 */
}

/* ==========================================================================
   BREAKPOINTS
   Bootstrap's own — 991.98 / 767.98 / 575.98. The padding steps are
   BYTE-IDENTICAL to .jd-location's (banner.css:9144-9153) for the reason given
   at the ground.

   THE TILE NEEDS NO BREAKPOINT OF ITS OWN, and that is worth stating because it
   looks like an omission. Owl sizes the item itself, and the formula is not the
   obvious one. VERIFIED at owl.carousel.js:300:
     width = (this.width() / settings.items).toFixed(3) - settings.margin
   and `this.width()` at owl.carousel.js:605 is
     this._width - stagePadding * 2 + settings.margin
   so with stagePadding 0 the CONTAINER'S TRAILING MARGIN IS ADDED BACK FIRST:
     tile = ((container content width + 15) / items) - 15
   (`grid` at :303 is true here — autoWidth and merge are both false — so the
   computed branch is taken.) That +15 is why the wall is FLUSH ON BOTH EDGES
   rather than 15px short on the right: at a 1280 viewport the container content
   box is 1256px, the first tile's left edge is 92.0 and the last tile's right
   edge is 1348.0. Only the last item's trailing margin overflows, into the
   hidden overflow, where it costs nothing.

   THE CONTAINER NEVER REACHES BOOTSTRAP'S 1320. css/responsive.css:9-12 caps
   `.container` at 1280px from min-width:1200px UP, and because responsive.css
   (index.php:19) loads after bootstrap.min.css (index.php:14) at equal 0-1-0
   specificity, that cap also beats Bootstrap's own >=1400 rule.

   THE LADDER — viewport / container content / items / tile width / image:
     1920, 1600, 1440, 1280   1256   6   196.8   194.8 x 180 (capped)
     1200                     1176   6   183.5   181.5 x 180 (capped)
     1100,  992                936   5   175.2   173.2 square
      900,  768                696   4   162.8   160.8 square
      700,  576                516   2   250.5   248.5 x 180 (capped)
      480                      456   2   220.5   218.5 x 180 (capped)
      414                      390   2   187.5   185.5 x 180 (capped)
      375                      351   2   168.0   166.0 square
      320                      296   2   140.5   138.5 square
   The image is the tile minus its two 1px borders; a capped tile's outer height
   is therefore a constant 182px. The tile never falls below 140.5px and never
   needs to be told a width. No horizontal document overflow at any of those
   widths.
   Two things about the ladder are inherited from the home page and KEPT: it is
   NON-MONOTONIC (a 767px tablet shows two 250px tiles where a 992px laptop
   shows five 175px ones), and it steps 250.5 -> 162.8 across the single pixel
   at 768. Neither is a defect — the direction is always "a wider screen shows
   more logos", and the biggest tiles land where the screen is smallest — and
   both are the owner's "same slider", so neither is touched.
   ========================================================================== */

@media (max-width:991.98px){
  section.section-gaping.jd-partners{ padding:44px 0 46px; }
  .jd-partners .section_title{ margin-bottom:28px; }
}

@media (max-width:767.98px){
  section.section-gaping.jd-partners{ padding:34px 0 36px; }
  .jd-partners .section_title{ margin-bottom:24px; }
  .jd-partners .owl-nav{ margin-top:18px; }
}

/* <=575.98 — NOTHING SHRINKS, and the empty branch IS the decision. The tile is
   140.5px at 320 and the plates stay 46px on both axes, because this is the
   width where a 75-year-old is most likely to be reading and least able to hit
   a small target. The room's whole content at this width is two logos and three
   buttons; there is nothing here to economise on. */

/* ==========================================================================
   PREFERENCE AND OUTPUT BRANCHES
   ========================================================================== */

/* ---------- prefers-reduced-motion ---------------------------------------
   THE AUTOPLAY GUARD IS IN THE JS, AND SO IS THE GLIDE — and the reason is
   worth writing down, because the CSS route looks obvious and is wrong. Killing
   the run from here with
     .jd-partners .owl-stage{ transition-duration:0s !important; }
   would beat the duration Owl writes INLINE (Owl.prototype.animate) but NOT the
   SPEED, which is a JavaScript number. Owl would still take its
   `animate = this.speed() > 0` branch, still call enter('animating'), and then
   never receive the transitionend that a 0s transition does not fire
   (Owl.prototype.onTransitionEnd) — leaving _states.animating set and the
   `translated` event deferred by one move until the next animate() flushes it.
   js/custom.js passes `smartSpeed: jdReduceMotion ? 0 : 500` instead, which
   makes Owl take its own no-animation path with nothing to strand. No flag, no
   stranded state.
   What is left for this branch is the plates' hover fade and the second half of
   the WOW guard — content stranded at visibility:hidden because a scroll
   observer never ran is precisely the failure a reduced-motion reader is most
   likely to be left in. */
@media (prefers-reduced-motion:reduce){
  .jd-partners .owl-nav button.owl-prev,
  .jd-partners .owl-nav button.owl-next,
  .jd-partners .jd-owl-pause{ transition:none; }
  .jd-partners .wow{
    animation:none !important;       /* FLAG 2 */
    visibility:visible !important;   /* FLAG 2 */
    opacity:1 !important;            /* FLAG 2 */
  }
}

/* ---------- prefers-contrast ---------------------------------------------
   The ground is flat, so there is no modelling loss to recover and every figure
   here is a real gain rather than the recovery of one.
   THE TILE/PLANE EDGE IS ALREADY THE STRONGEST IN THE ROOM at 8.534:1, so this
   branch does NOT touch the 37 white tiles — there is nothing to win. What it
   does is answer the one tile that is weak: Titan-Eye.webp is #000000 at
   2.460:1 against the plane and its hairline is its only boundary, so the
   hairline doubles to 2px UNIFORMLY, on all 38, so the wall stays one set of
   objects rather than 37 plaques and one framed exception.
   The heading takes the ceiling on this ground — #ffffff at 8.534:1 — and its
   ornament collapses from a gradient peaking at 3.895:1 to solid #cbb279 at
   4.138:1: a small gain in ratio, taken for the larger gain of a line of
   constant weight rather than one that fades out at both ends. Brass on the
   dark side, where this reader is looking; the same move .testimonials makes at
   banner.css:4285 and .jd-location at :9251.
   THE CONTROLS GO TO BLACK ON PAPER, 18.952:1, and their keyline doubles.
   THE BITMAPS ARE NOT TOUCHED. Filtering brand artwork to raise its contrast
   changes the mark, and a Fortis green that is not Fortis green is worth less
   than the ratio it buys. */
@media (prefers-contrast:more){
  .jd-partners .section_title h2{ color:#ffffff; }                /* 8.534:1 */
  .jd-partners .section_title h2::after{
    background:none;
    border-top:1px solid #cbb279;                                 /* 4.138:1 solid */
    height:0;
  }
  .jd-partners .jd-pn-tile{ border-width:2px; }
  .jd-partners .owl-nav button.owl-prev,
  .jd-partners .owl-nav button.owl-next,
  .jd-partners .jd-owl-pause{
    color:#000000;                                                /* 18.952:1 */
    border:2px solid #000000;
  }
  .jd-partners .jd-owl-pause::before,
  .jd-partners .jd-owl-pause::after{ background:#000000; }
  .jd-partners .jd-owl-pause.is-paused::before{
    background:none;
    border-left-color:#000000;
  }
}

/* ---------- forced-colors ------------------------------------------------
   THE HONEST LIMIT FIRST, because it is the whole shape of this branch:
   forced-colors DOES NOT RECOLOUR IMAGES, AND IT MUST NOT — a forced Fortis
   logo is not a Fortis logo. So in a dark high-contrast theme the 37
   white-field bitmaps stay white blocks on a forced Canvas. That is not a
   failure to be fixed; it is what a photograph of a logo looks like in that
   mode, and the ONLY useful thing this branch can do about it is make sure
   every block is BOUNDED — hence CanvasText on every tile, which is what turns
   38 white rectangles into 38 identifiable objects.
   `border-color`, not `border`, on the tile: the 1px/2px width is set above and
   in the contrast branch, and restating it here would silently undo whichever
   of those the reader also has on.
   NO forced-color-adjust ON THE TILE. banner.css rejected that for
   .jd-certified's plaque because the property INHERITS and would drag its
   contents out of a palette the reader deliberately chose. There is no blend
   here to protect, so there is nothing to buy with the opt-out and the
   objection stands unanswered — the tile is handed to the system like
   everything else in the room except the plates, which are furniture rather
   than artwork and should follow the system pair exactly.
   The controls take the ButtonFace/ButtonText pair they actually are, with
   Highlight for hover and for the ring — the pattern .gallery uses at
   banner.css:6698-6723. Declared AFTER prefers-contrast on purpose: Chromium
   matches both under Windows High Contrast and this block must be the one that
   lands. */
@media (forced-colors:active){
  section.section-gaping.jd-partners{ background-color:Canvas; }
  .jd-partners .section_title h2{ color:CanvasText; }
  .jd-partners .section_title h2::after{
    background:none;
    border-top:1px solid CanvasText;
    height:0;
  }
  .jd-partners .jd-pn-tile{
    background:Canvas;
    border-color:CanvasText;
  }
  .jd-partners .jd-pn-ink{ background:Canvas; }
  .jd-partners .owl-nav button.owl-prev,
  .jd-partners .owl-nav button.owl-next,
  .jd-partners .jd-owl-pause{
    background:ButtonFace;
    color:ButtonText;
    border:1px solid ButtonText;
    forced-color-adjust:none;        /* the plate is furniture, not artwork; it
                                        contains no text, only a drawn glyph */
  }
  .jd-partners .owl-nav button.owl-prev:hover,
  .jd-partners .owl-nav button.owl-next:hover,
  .jd-partners .jd-owl-pause:hover{ background:Highlight; color:HighlightText; }
  .jd-partners .jd-owl-pause::before,
  .jd-partners .jd-owl-pause::after{ background:ButtonText; }
  .jd-partners .jd-owl-pause.is-paused::before{
    background:none;
    border-left-color:ButtonText;
  }
  .jd-partners :focus,
  .jd-partners :focus-visible{ outline-color:Highlight; }
}

/* ---------- print --------------------------------------------------------
   THE WALL PRINTS, AND IT IS THE ONE CAROUSEL ON THIS PAGE THAT SHOULD.
   Who prints a senior-living page? Overwhelmingly an adult child taking it to a
   parent who does not use the web. "Which hospitals" is the single most useful
   thing that reader can carry away, and unlike the four photograph carousels
   this one loses nothing on paper: a logo is a logo at 110px.
   BUT A CAROUSEL CANNOT PRINT AS A CAROUSEL. Owl's stage is a transform-
   positioned strip inside .owl-stage-outer{overflow:hidden}
   (owl.carousel.css:27-31), so what would come off the printer is a clipped
   fragment of a run. It is UNWRAPPED instead — released from the overflow,
   flattened out of the transform, and rewrapped as a flex grid. All five of
   those declarations are FLAG 4 and all five exist for one reason: Owl writes
   transform, width and margin-right INLINE, and an author !important is the
   only thing that reaches an inline declaration. They are the narrowest
   possible set and they exist only on paper.
   THE CLONES GO. loop:true means Owl has duplicated a screenful at each end
   (owl.carousel.js:346-347, .cloned); on screen they are the loop, on paper
   they would be logos printed twice.
   THE INK BUDGET, honestly: 37 of the 38 are white-field marks, so the ground
   costs nothing and only the marks take ink. The exception is the one black
   tile — a 110px solid square — and it is LEFT ALONE rather than suppressed,
   because a partner silently missing from a printed list is a worse outcome
   than one heavy square.
   The plane goes white and the hairline goes #a89f8a (2.628:1 on white), the
   same print hairline .senior_living, .testimonials, .gallery, .jd-welcome and
   the removed block all use.
   THE CONTROLS GO — a pause button on paper is a picture of a pause button. */
@media print{
  section.section-gaping.jd-partners{
    background-color:#ffffff;        /* 0-2-1 over style.css:14 — no flag */
    padding:18pt 0 20pt;
  }
  .jd-partners .section_title{ margin-bottom:14pt; }
  .jd-partners .section_title h2{
    color:#000000;                   /* 21:1 */
    font-size:18pt !important;       /* FLAG 1 */
    break-after:avoid; page-break-after:avoid;
  }
  .jd-partners .section_title h2::after{
    background:none;
    border-top:1px solid #a89f8a;    /* 2.628:1 on white */
    height:0;
  }
  .jd-partners .owl-stage-outer{ overflow:visible !important; }     /* FLAG 4 */
  .jd-partners .owl-stage{
    transform:none !important;                                      /* FLAG 4 */
    width:auto !important;                                          /* FLAG 4 */
    display:flex;
    flex-wrap:wrap;
    gap:8pt;
  }
  .jd-partners .owl-item{
    width:110px !important;                                         /* FLAG 4 */
    margin:0 !important;                                            /* FLAG 4 */
    float:none;                      /* owl.carousel.css:38; ignored inside a
                                        flex container anyway, restated so the
                                        intent is not a coincidence */
  }
  .jd-partners .owl-item.cloned{ display:none; }
  .jd-partners .jd-pn-tile{
    border-color:#a89f8a;            /* 2.628:1 on white */
    break-inside:avoid; page-break-inside:avoid;
  }
  .jd-partners .jd-pn-tile img{ max-height:110px; }
  .jd-partners .owl-nav,
  .jd-partners .owl-dots{ display:none !important; }                /* FLAG 3 */
  .jd-partners .wow{
    visibility:visible !important;   /* FLAG 2 */
    opacity:1 !important;            /* FLAG 2 */
    animation:none !important;       /* FLAG 2 */
  }
}

/* ==========================================================================
   THE FOOTER (.jd-foot) — "THE CARD"
   Replaces the whole of index.php:1920-1968 (the <!-- footer --> block).
   Appended to css/banner.css, the LAST of this page's stylesheets
   (index.php:22, after css/all.css:13, css/bootstrap.min.css:14, style.css:15,
   css/slick.css:16, css/animate.min.css:17, css/jquery.fancybox.min.css:18,
   css/responsive.css:19, css/owl.carousel.css:20, css/header.css:21), so every
   rule below wins on EQUAL specificity by source order.
   BUMP index.php:22 FROM ?v=21 TO ?v=22 OR LITESPEED SERVES THE OLD SHEET.

   VERIFIED: css/banner.css contained ZERO footer selectors before this block
   (grep -nE '^\s*footer|\.jd-foot|\.copyright|\.disclimer' returns only prose
   at :8479, :9356, :11703). Clean slate. Every selector here is anchored on
   `.jd-foot`. NONE of the reference page's class names is reused
   (contact_detail, lightgreenbg, sectiongap, block, address, block_link,
   social_icon, social-button, foot_logo_area, foot_logo_block — `address`
   below is the ELEMENT, not that class) and NONE of this page's legacy footer
   names is reused (.disclimer, .copyright, .foot_logo, .infinity-logo,
   .igbc-logo), so style.css:291, :292, :300, :304-306, :309-311 and
   css/responsive.css:120 all go quiet on their own: they match nothing.
   NOTHING in style.css or css/responsive.css is edited. NO FILE IS DELETED.

   *** THE GOVERNING IDEA: THIS IS A CARD, NOT A STRIP OF LINKS ***
   Twelve rooms above this one are READ. This one is USED. It is the only place
   on the page that states the postal address, and — apart from one number in
   the header (index.php:165) — the only place that states how to reach
   anybody. So it is built as the thing the content actually is: Jagriti Dham's
   printed card, laid on the darkest stock on the site. A card carries WHO (the
   letterhead), WHERE (the address), HOW (the ways to reach) and WHO ELSE
   VOUCHES (the seals). Those are the panels. Everything legal is printed on
   the BACK of the card, below a rule, so nothing legal ever competes with the
   address.

   FOUR CONSEQUENCES, AND THEY ARE THE WHOLE DESIGN:
   1  THE PHONE LEADS IN SIZE, AND WHICH PHONE IS EVIDENCE, NOT TASTE.
      +91 88200 22022 is set at 22px/700 in #ffffff — the largest type in the
      footer after the name. It is the primary number because THIS PAGE ALREADY
      SAYS SO TWICE: index.php:55 `"telephone": "+91-8820022022"` in the
      LocalBusiness schema, and index.php:165 `href="tel:+918820022022"` in the
      header. The reference footer sets all four reach lines at one weight;
      that is the thing this room exists to correct.
   2  THE REFERENCE'S <h2>Contact</h2> STOPS SPENDING TWO COLUMNS ON ONE WORD.
      The string is kept — every string is kept — but it becomes the LABEL of
      the panel it was always labelling, at 13px in brass. It is still an <h2>,
      still in the document outline. A card does not label its own address
      either, so the WHERE panel has no label: its label is the name.
   3  RULES, NOT BOXES. The only drawn lines are the brass masthead rule that
      runs from the letterhead mark to the right edge (an ::after, so no
      decorative element ships) and one hairline above the back strip. The
      panels are separated by SPACE. The only filled objects are the three
      white mark plates and the six controls — which is what makes those read
      as objects.
   4  EVERY OPAQUE BITMAP GETS A WHITE PLATE, INCLUDING THE TRANSPARENT ONE.
      See "THE THREE BITMAPS" below. This is the partners wall's rule
      (banner.css:11736) applied at the other end of the page.

   ==========================================================================
   THE GROUND: #1d2c20, THE FOOTER'S FIRST PALETTE COLOUR
   ==========================================================================
   style.css:288 is `footer{background:#222222;padding:16px 0}` — a neutral
   grey that appears in the house palette nowhere, at the bottom of a
   twelve-room ladder built entirely of greens and papers. `.jd-foot` is 0-1-0
   against that rule's 0-0-1, so it is simply beaten: no !important, no flag,
   for either the ground or the padding.
     #1d2c20   L* 16.34   (was #222222, L* 13.23)
   THE SEAM ABOVE. .jd-partners is #3a5240, L* 32.49 (banner.css:11617). The
   footer against it is 1.717:1 / dL* 16.15 — LARGER than the partners/location
   seam this page already accepts (#4f6f52 -> #3a5240 = 1.515:1 / dL* 11.22) —
   and still the darkest seat on the page by a wide margin: the next darkest
   room is .testimonials at L* 26.23. The page has darkened from L* 95.90 at
   the top to this, and the card is where it stops.
   THE COST, STATED: #1d2c20 is 3.11 L* lighter than the #222222 it replaces,
   so white drops from 15.910:1 to 14.651:1 — about 8% of the headroom, for a
   colour that belongs to the page. What remains is not close to tight.
   NO brass border-top on the footer: the masthead rule inside the card is the
   room's one strong line, and a second full-bleed rule 56px above it would be
   two rules competing. The seam is carried by the value step, which is bigger
   than one the page already accepts.

   THE INK LADDER ON THIS GROUND — every figure computed here from the sRGB
   relative-luminance formula, not estimated. 4.5:1 is a FLOOR, not a target,
   because this reader is 55+:
     #ffffff  14.651:1   the name, the primary number, hover ink
     #f7f3e9  13.222:1   the address, the reach values, the policy links
     #dad5c6   9.986:1   the landmark line, the IGBC line
     #d5d3cb   9.774:1   the disclaimer, the copyright
     #cbb279   7.105:1   the rubrics, the glyph channel, the map link, the
                         masthead rule, every plate and disc hairline, the
                         Enquire fill
     #a89f8a   5.575:1   the four row labels, and the back-strip rule
     #25d366   7.387:1   the WhatsApp fill (brand mark)
     #2b3f2f   1.294:1   the row hover wash ONLY — decorative, argued there
     #22331f   1.089:1   the :target wash ONLY — decorative, argued there
   The lowest figure anywhere in this block that carries a WORD is 5.575:1, and
   it carries a 12.5px row label. style.css:8's global `a{color:#4f6f52}` would
   be 2.601:1 here, so EVERY anchor below carries an explicit colour.

   THE REFERENCE'S CONTRAST IS NOT PORTED, ONLY ITS CONTENT. Its ground
   rgb(135,128,94) is L* 53.38 with #ffffff body text at 3.978:1 and its "Find
   us on map" at 3.115:1 — both FAIL AA — and its mobile "Whatsapp Us" is
   #ffffff on #25d366 at 1.983:1, which fails even the 3:1 non-text floor. The
   same strings sit here at 13.222:1, 7.105:1 and 7.387:1.

   ==========================================================================
   OVERRIDES AUDIT — every legacy rule that can reach this subtree, read
   ==========================================================================
     style.css:288  footer{background:#222222;padding:16px 0}      0-0-1, beaten
     style.css:287  footer .white img{width:55px}                  no .white here
     style.css:464  footer .social-media-top{display:none}         not used
     style.css:8    a{color:#4f6f52;text-decoration:none}          0-0-1. 2.601:1
                    on this ground, so every anchor sets its own colour and
                    every link in prose sets its own underline.
     style.css:13   li{list-style:none}   agrees, but restated on the <ul>s,
                    because Bootstrap reboot's ul{padding-left:2rem} does not.
     style.css:23   p{font-size:15px}                              0-0-1
     css/responsive.css:130-131 p{font-size:13px;...;font-weight:300} inside
                    @media (max-width:320px). 0-0-1 — and the address must NOT
                    drop to 13px/300 at 320px. Every <p> here is reached 0-2-0.
     style.css:67   h4{font-size:25px;font-weight:700;color:#4f6f52;
                       margin-bottom:10px}  GLOBAL. #4f6f52 is 2.601:1 here, so
                    "Member of." would be all but invisible if left alone.
                    Beaten at 0-2-0.
     style.css:457  h4{font-size:20px} inside @media (max-width:575.98px). Same.
     style.css:451  .h2,h2{font-size:20px!important} inside
                    @media (max-width:575.98px), opened at style.css:411.
                    THE ONE RULE THAT CANNOT BE OUT-SPECIFIED. See FLAG 1.
     css/responsive.css:166 h2{font-size:25px} inside a landscape DEVICE query.
                    0-0-1, no !important, and responsive.css is index.php:19
                    against banner.css at :22 — loses on both counts.
     style.css:41   .section_title h2:after{position:absolute;background:#cbb279;
                       width:60px;height:4px;bottom:-5px;...}
                    This block deliberately does NOT use .section_title, so the
                    ornament that has caused overlap elsewhere cannot reach the
                    rubric.
     style.css:1726 figure{margin:0}   — no <figure> in this markup; noted so
                    nobody adds one expecting it.
     style.css:1556 .owl-carousel .owl-item img{border-radius:0!important}
                    — no carousel here; the marks are plain <img>.
     css/all.css:124 .fa-beat{animation-name:fa-beat;...}  0-1-0, NO !important.
                    `.jd-foot .fa-beat` is 0-2-0 AND banner.css loads after
                    all.css, so the tripwire below needs no flag.

   ==========================================================================
   THE THREE BITMAPS — MEASURED HERE, AND ONE ANSWER FOR ALL THREE
   ==========================================================================
   Decoded with PIL, container headers read directly:
     images/JD-Infinity-Logo.webp  200x85   RGB, NO alpha channel (alpha
                                   min=max=255), 70% of pixels are >=250 on all
                                   three channels, and ALL FOUR EDGES are pure
                                   #ffffff (min channel-sum 761 of 765 across
                                   every border row and column). READ BY EYE:
                                   it is a LOCKUP — "JAGRITI DHAM / Most
                                   Luxurious Senior Citizen Home of Kolkata"
                                   and "Initiative of / infinity" either side
                                   of a divider.
     images/asliasli-logo.webp     200x85   identical construction; 71% pure
                                   white, all four edges #ffffff. READ BY EYE:
                                   "ASLI / Association of Senior Living India /
                                   Empowering Senior Living and Care in India".
     images/IGBC.png               100x150  RGBA, 53.7% fully transparent.
   THE IGBC FILE IS THE TRAP, AND IT RUNS THE OPPOSITE WAY TO THE OTHER TWO.
   Being transparent, it LOOKS like the one file that could sit straight on the
   dark plane. Its two big fills would be happy there — (128,190,67) green is
   6.533:1 on #1d2c20 against 2.243:1 on white, and (0,181,229) cyan is 6.098:1
   against 2.402:1. BUT I COMPOSITED IT ON BOTH GROUNDS AND LOOKED AT IT: the
   mark also carries a near-black wordmark — a Devanagari arc under the leaf
   and "Indian Green Building Council" set straight across the foot, plus the ®
   — 187 opaque pixels below L=0.10, spread over rows y=3..148, i.e. the full
   height of the file. That ink is 1.212:1 on #1d2c20 and 17.756:1 on white.
   ON THE DARK PLANE THE SEAL KEEPS ITS LEAF AND LOSES ITS NAME. So it takes
   the same plate as the other two, and for the same reason: the surface an
   unrecolourable bitmap lands on must be the field its own artwork assumes.
   THE MARK PLATE: #ffffff, 3px radius, 1px #cbb279 hairline — .jd-pn-tile
   (banner.css:11736) byte for byte, at three sizes. The plate is 14.651:1
   against the ground and is the strongest edge in the room, which is correct:
   a letterhead's mark is the strongest thing on a letterhead. The hairline is
   7.105:1 against the GROUND (2.062:1 against the plate, which is the figure
   that does not matter — the plate/ground edge is what satisfies 1.4.11).
   WHY #ffffff AND NOT THE HOUSE PAPER: on an #f7f3e9 plate each opaque
   bitmap's own white field would show as a lighter rectangle inside a warmer
   one at 1.098:1 — invisible as a colour, perfectly visible as a hard edge, at
   a different size for every export. On #ffffff that seam does not exist.
   THE PARTNERS WALL AND THIS ROOM ARE ONE RULE READ FROM BOTH ENDS: there, 38
   small white tiles on a dark plane; here, one dark card carrying three white
   plates. This page now has ONE answer to a bitmap it may not edit.
   NOT ONE BITMAP IS EDITED. NOT ONE FILE IS DELETED FROM THE SERVER.

   ==========================================================================
   THE FONT AWESOME AUDIT — RE-RUN FROM SCRATCH FOR THIS BLOCK
   ==========================================================================
   css/all.css is FA 6.1.1; webfonts/*.ttf are FA 5.11.2, so the CSS proves
   nothing on its own. Method: parse every `.fa-NAME::before{content:"\XXXX"}`
   out of css/all.css (2,363 rules — note the DOUBLE colon; a `:before` regex
   silently matches a fifth of them), then parse the format-4 cmap subtable of
   each shipped .ttf and look the codepoint up in the file the class actually
   resolves to. Brand classes were checked against webfonts/fa-brands-400.ttf,
   a DIFFERENT file from fa-solid-900.ttf.
   COVERAGE FOUND: fa-solid-900.ttf 960 mapped codepoints, U+F000..U+F8D9;
   fa-regular-400.ttf 151, U+F004..U+F5C8; fa-brands-400.ttf 433,
   U+F081..U+F8E8. U+Exxx count in all three: ZERO. The brief's warning is
   confirmed empirically — and every codepoint this block uses is U+Fxxx.
     fa-solid   fa-map-location   U+F59F  fa-solid-900.ttf    PRESENT gid 706
     fa-solid   fa-phone-alt      U+F879  fa-solid-900.ttf    PRESENT gid 947
     fa-regular fa-envelope       U+F0E0  fa-regular-400.ttf  PRESENT gid 34
     fa-regular fa-paper-plane    U+F1D8  fa-regular-400.ttf  PRESENT gid 72
     fa-brands  fa-whatsapp       U+F232  fa-brands-400.ttf   PRESENT gid 104
     fa-brands  fa-facebook-f     U+F39E  fa-brands-400.ttf   PRESENT gid 216
     fa-brands  fa-instagram      U+F16D  fa-brands-400.ttf   PRESENT gid 25
     fa-brands  fa-youtube        U+F167  fa-brands-400.ttf   PRESENT gid 20
     fa-brands  fa-linkedin-in    U+F0E1  fa-brands-400.ttf   PRESENT gid 14
   ALL NINE PRESENT. NOTHING TOFUS. NOTHING NEEDED SUBSTITUTING.
   THE ONE FLAGGED AS MOST LIKELY ABSENT IS FINE, AND HERE IS WHY.
   `fa-map-location` IS a FA6 name and does not exist as a NAME in 5.11.2 — but
   a class only ever resolves to a codepoint. css/all.css:3823 maps it to
   "\f59f", and U+F59F is in the shipped solid font under its 5.11.2 name
   `map-marked`: css/all.css maps BOTH `.fa-map-location` and `.fa-map-marked`
   to \f59f, which is the fingerprint of a rename that kept the codepoint and
   the artwork. The glyph that paints is the correct map-with-a-pin. No
   fallback to fa-map-marker-alt (U+F3C5, gid 463, also verified present) is
   needed, and using it would be a different mark.
   THREE OF THE NINE ARE ALREADY PROVEN LIVE ON THIS PAGE: fa-phone-alt at
   index.php:166, fa-brands fa-whatsapp at index.php:173, fa-regular
   fa-paper-plane at index.php:712/:1139/:1697.
   ONE REFERENCE CLASS IS DELIBERATELY NOT USED: `fa-beat` on the mobile
   WhatsApp glyph. It exists and is correct in css/all.css:124 and self-mutes
   under prefers-reduced-motion at css/all.css:238-255. It is dropped anyway: a
   52px full-width branded button does not need a pulse to be found, and this
   page has spent twelve rooms taking motion away from a reader who did not ask
   for it. The tripwire below stops it coming back by paste.
   Every <i> carries aria-hidden="true" and every icon is accompanied by real
   text, so no meaning anywhere in this footer depends on a glyph.

   ==========================================================================
   FLAGS — the only three !important declarations in this block
   ==========================================================================
   FLAG 1  `.jd-foot .jd-f-label{font-size:13px!important}`. Answers
           style.css:451 `.h2,h2{font-size:20px!important}` inside
           @media (max-width:575.98px). Both are !important, so the cascade
           falls to specificity: 0-2-0 here against 0-1-0 there. ONE
           declaration wins at every width; it does not need repeating in the
           <576 branch. The print branch repeats it only to change the value.
   FLAG 2  `.jd-foot .wow{visibility;opacity;animation}`. js/wow.min.js
           (index.php:1982) writes an INLINE visibility:hidden on every .wow box
           and `new WOW().init()` (index.php:1985) runs unconditionally. Only an
           !important beats an inline style.
   FLAG 3  `.jd-foot .jd-sr{position:absolute!important}`. Not a new decision:
           byte-identical to #floor-plan .jd-sr (banner.css:3329), .gallery
           .jd-sr (:6356) and .jd-partners .jd-sr (:11945), and it carries their
           reasoning with it.
   NOT A FLAG: the FA animation tripwire. css/all.css:124 declares .fa-beat at
   0-1-0 with no !important, and `.jd-foot .fa-beat` is 0-2-0 in a sheet that
   loads later. Specificity is enough; a flag there would be noise.

   ==========================================================================
   MOTION: THIS ROOM SHIPS NO .wow AT ALL
   ==========================================================================
   The footer being replaced put `wow slideInDown` on three logo columns and
   `wow zoomIn` on the IGBC image. wow.min.js writes an inline
   visibility:hidden on every .wow box at init and only takes it back when the
   box crosses the observer. css/animate.min.css v3.7.2's slideInDown has NO
   opacity channel, so a stranded box is stranded at visibility:hidden with
   nothing partial about it. A footer is the LAST element in the document —
   exactly the position where a scroll observer is most likely to be raced: an
   anchor jump to the bottom, a restored scroll position, a short viewport, a
   fast fling, a blocked script, an earlier JS throw. This footer carries the
   only two phone numbers, the only email address and the only postal address
   on the page. None of it may be gated behind an observer. And a footer is
   reached by scrolling to the very bottom, so it is in view by definition when
   it matters: the animation buys nothing and risks the conversion.

   ==========================================================================
   TOUCH TARGETS — this footer is almost entirely links and the reader is 55+.
   This is the single most important constraint in the room. Measured on BOTH
   axes, at the narrowest width each occurs:
     reach row (x4)        full panel width  x  56px
     "Find us on map"            >=160px     x  48px
     Enquire Now                 >=150px     x  52px
     Whatsapp Us (<576)          >=140px     x  52px
     social disc (x4)               46px     x  46px   (14px apart)
     policy link (x3)             >=73px     x  44px   (22px apart)
   NOTHING here is below 44 on either axis.

   NO JAVASCRIPT IS ADDED, though one existing hook is opted into deliberately (the Enquire Now anchor keeps class="hash", so js/custom.js:206 gives it the same 1000ms scroll the page's three other enquire buttons get - an animation js/custom.js does not guard with prefers-reduced-motion, a gap this block inherits rather than creates). Not one NEW line, and one line of existing JavaScript is retired:
   the current `document.write(new Date().getFullYear())` becomes a PHP echo.
   The year is PHP, the Disclaimer link is a native fragment plus :target, the
   tap targets are CSS. This block does not depend on js/wow.min.js
   (index.php:1982), on js/bootstrap.bundle.min.js (index.php:1976 — a modal
   was the obvious way to wire the Disclaimer link and is argued against at
   .jd-f-fineprint) or on js/custom.js (index.php:1980). A half-applied deploy
   degrades to unstyled but COMPLETE content — the address and both phone
   numbers still on the page, still linked. For the part of the page that
   carries the conversion, that is the only acceptable failure mode.
   ========================================================================== */


/* ---------- the plane ----------------------------------------------------
   The padding follows the house ladder — 56/60 at full width, 44 at <992,
   34 at <768 — with ONE change, and it is measured, not aesthetic.
   style.css:1213 floats #backto-top at `position:fixed;bottom:30px;right:5px`
   with `width:40px;height:40px`, and index.php:136 gives it
   `class="d-none d-sm-block"`. So from 576px up it occupies the bottom 30-70px
   of the VIEWPORT — which, at the very bottom of the page, IS the footer's
   bottom padding — and at any viewport at or below the 1280px container
   max-width (css/responsive.css:10-12) its right edge sits over the
   container's right edge. 78px clears the button's top by 8px, so nothing in
   the back strip can ever sit under it. Below 576 the button is display:none
   and the pad returns to the ladder's 34px.
   IF SOMEBODY MOVES OR REMOVES #backto-top, THIS NUMBER COMES DOWN TO 60.
   background-COLOR, not the shorthand: nothing sets a background-image here,
   so the colour is the whole job and the shorthand is only a wider blast
   radius. FLAT — no gradient, no grain — so every ratio quoted is exact. */
.jd-foot{
  padding:56px 0 78px;
  background-color:#1d2c20;          /* L* 16.34. 1.717:1 / dL* 16.15 vs
                                        .jd-partners #3a5240 (banner.css:11617).
                                        Beats style.css:288 at 0-1-0 vs 0-0-1 —
                                        no flag. */
  color:#f7f3e9;                     /* 13.222:1 — the inherited default, so a
                                        string added here later starts
                                        compliant instead of black-on-green */
  font-family:Helvetica, sans-serif; /* style.css:2-7 sets this on body;
                                        restated so a future body-font swap
                                        cannot silently re-metric the phone
                                        numbers, whose widths are measured */
}


/* ---------- the letterhead -----------------------------------------------
   THE MASTHEAD RULE IS DRAWN BY ::after, NOT BY AN ELEMENT, so the markup
   carries no decorative div and there is nothing for a screen reader to step
   over. `flex:1 1 auto` gives it whatever is left after the plate and the gap —
   at a 320px viewport that is still ~98px of brass, which reads as a rule and
   not as a stray dash.
   THE MARK IS NOT A LINK, and that is a decision, not an omission: see the
   removal notes. The header already carries https://www.jagritidham.com/ at
   index.php:132, and the reference footer does not link its logos either. */
.jd-foot .jd-f-head{
  display:flex;
  align-items:center;
  gap:24px;
  margin-bottom:36px;
}
.jd-foot .jd-f-head::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:#cbb279;                /* 7.105:1 — decorative, but the card's one
                                        strong line deserves to be seen */
}

/* THE MARK PLATE, size 1 of 3. box-sizing is restated rather than inherited
   from Bootstrap's `*` reset because the 1px hairline is part of the measured
   200px and a future reset must not silently move it. The 9px/12px padding is
   the white margin the 200x85 bitmap does not carry itself; because the
   bitmap's field and the plate are the SAME white (verified: all four edge
   rows/columns are #ffffff), that padding is invisible and only its effect —
   air — survives. */
.jd-foot .jd-f-mark{
  display:block;
  flex:0 0 auto;
  box-sizing:border-box;
  width:200px;                       /* the bitmap is 557x270 and is scaled
                                        DOWN to 176px inside the padding, so
                                        this plate is never the soft one */
  padding:9px 12px;
  background:#ffffff;                /* 14.651:1 against the ground */
  border:1px solid #cbb279;          /* 7.105:1 on the ground, 2.062:1 on the
                                        plate — its job is the plate's edge
                                        against the GROUND */
  border-radius:3px;                 /* the house plate radius: .jd-pn-tile
                                        (banner.css:11742) and .jd-l-board
                                        (banner.css:8805) */
}
.jd-foot .jd-f-mark img,
.jd-foot .jd-f-plate img{
  display:block;
  width:100%;
  height:auto;                       /* the intrinsic width/height attributes in
                                        the markup reserve the box before the
                                        bytes land, so the card never shifts */
  border-radius:0;                   /* these are marks in a frame; the frame
                                        cuts the corner, not the mark */
}


/* ---------- the three panels ---------------------------------------------
   Bootstrap's own grid, with its gutter widened rather than fought. The row
   keeps its native -20px side margins and the columns their 20px padding, so
   the WHERE panel's text is FLUSH with the container edge — in line with the
   letterhead plate above it — and the panels stand 40px apart. Zeroing the row
   margin instead, which is the reflex, would inset every panel by half a
   gutter and break that alignment.
   --bs-gutter-y does the stacking air at <992 natively (Bootstrap 5.1.3
   applies it as margin-top on the row's children), which is why no panel below
   carries a margin-bottom.
   5/4/3: the WHERE panel is the one with sentences in it. */
/* THE ROW MAY NOT OUT-GUTTER THE CONTAINER. bootstrap.min.css pads .container
   by var(--bs-gutter-x,.75rem) = 12px and pulls .row back by HALF its own
   gutter, so any half-gutter over 12px hangs the row off BOTH sides - and
   wherever .container is full width that is a horizontal scrollbar on the WHOLE
   DOCUMENT, not just this room. MEASURED, and causation proven by toggling this
   one property: at 375px a 32px gutter gives scrollWidth 379 against clientWidth
   375 and a 15px scrollbar; 24px gives 375/375 and no scrollbar; 32px brings it
   back. A 40px gutter overhangs by 8px. The full-width bands are every viewport
   under 576px - every phone - and 1200-1295px, because css/responsive.css:9-12
   caps .container at 1280px. Every other room on this page already obeys this
   (banner.css:3858 uses 24px, :4189 20px, :7722 0); this row was the first not
   to, and it would have been a page-wide regression from one room.
   24px is the largest gutter that cannot bleed, and it keeps the panels flush
   with .jd-f-head exactly as the panel comment argues. */
.jd-foot .jd-f-body{ --bs-gutter-x:24px; }


/* ---------- panel 1: WHERE ------------------------------------------------
   <address> is the correct element for the contact details of the page's
   owner, which the reference's bare <p> is not. The UA italicises it; undone.
   THE NAME STAYS INSIDE THE ADDRESS, exactly as the reference has it
   (<strong>Jagriti Dham</strong> as the block's first line), because it IS
   part of the postal address — but it is promoted to its own 21px line,
   because on a card the name is what labels the address and it should not be
   buried in the street.
   16.5px/1.72 for the address is deliberately ABOVE the page's own p:15px
   (style.css:23). Four short lines of the most re-read text in the footer, for
   a reader who is 55+, is the one place on this page where the type should be
   bigger than the body default rather than smaller. 28.4px steps are leading a
   75-year-old can track without losing the row. */
.jd-foot .jd-f-addr{
  margin:0 0 6px;
  font-style:normal;                 /* the UA default for <address> is italic;
                                        Bootstrap reboot also sets this, and
                                        this restatement survives the reboot
                                        being dropped */
  font-size:16.5px;                  /* beats style.css:23 and
                                        css/responsive.css:130-131 at 0-2-0 */
  line-height:1.72;
  color:#f7f3e9;                     /* 13.222:1 — AAA */
}
.jd-foot .jd-f-name{
  display:block;
  margin-bottom:10px;
  font-size:21px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.01em;
  color:#ffffff;                     /* 14.651:1 — AAA */
}
.jd-foot .jd-f-landmark{
  display:inline-block;
  margin-top:6px;
  font-size:15px;
  line-height:1.55;
  color:#dad5c6;                     /* 9.986:1 — a step down, because a
                                        landmark is context FOR the address,
                                        not part of it. Still 2.2x the floor. */
}

/* THE MAP LINK. The reference sets this in rgb(236,227,206) on its khaki
   ground at 3.115:1 and fails AA. Here it is brass at 7.105:1 with a real
   underline — this is the one link in the card that sits in running text
   rather than in a list of controls, so WCAG 1.4.1 wants more than colour to
   mark it. min-height:48px against the 44px house floor; the link is ~178px
   wide, so both axes clear it comfortably. */
.jd-foot .jd-f-map{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding-right:2px;
  font-size:16px;
  font-weight:600;
  color:#cbb279;                     /* 7.105:1 (reference: 3.115:1). Explicit,
                                        against style.css:8's a{color:#4f6f52},
                                        which would be 2.601:1 here. */
  text-decoration:underline;         /* over style.css:8's
                                        a{text-decoration:none} */
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:color .2s ease;
}
.jd-foot .jd-f-map i{ font-size:18px; line-height:1; }


/* ---------- panel 2: HOW — the reach list --------------------------------- */

/* FLAG 1. The reference's <h2>Contact</h2>, kept verbatim and demoted to what
   it always was: the label of this panel. Still an <h2>, still in the outline.
   13px brass at 7.105:1 — AAA at any size. NOT wrapped in .section_title, so
   style.css:41's absolutely-positioned 60x4 ::after bar cannot reach it. */
.jd-foot .jd-f-label{
  margin:0 0 16px;                   /* over Bootstrap reboot's
                                        h2{margin-bottom:.5rem} and
                                        style.css:453's margin-bottom:0 */
  font-size:13px !important;         /* FLAG 1 — answers style.css:451
                                        `.h2,h2{font-size:20px!important}`
                                        inside @media (max-width:575.98px).
                                        Also out-specifies
                                        css/responsive.css:166's h2{25px}. */
  font-weight:700;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#cbb279;                     /* 7.105:1 */
}

.jd-foot .jd-f-list,
.jd-foot .jd-f-social,
.jd-foot .jd-f-legal{
  list-style:none;                   /* restates style.css:13's global
                                        li{list-style:none} — that rule sits on
                                        the LI, and a marker returning inside a
                                        26px glyph channel would break the
                                        column outright */
  margin:0;
  padding:0;                         /* Bootstrap reboot sets
                                        ul{padding-left:2rem} */
}

/* THE ROW IS THE TARGET, NOT THE NUMBER. Each row is one flex link 56px tall
   and the full width of its panel — at 992 that is a ~305px target, at 375 it
   is ~335px. This is the most important measurement in the block: every row
   here is a tap for somebody who may be 75 and steadying the phone with both
   hands.
   `margin-left:-10px` with `padding:6px 10px` lets the hover plate bleed 10px
   into the gutter while the CONTENT stays aligned to the panel's left edge, so
   the glyph channel lines up with the rubric above it and with the address in
   panel 1. */
.jd-foot .jd-f-list li + li{ margin-top:6px; }
.jd-foot .jd-f-list a{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:56px;                   /* over the 44px floor on BOTH axes */
  margin-left:-10px;
  padding:6px 10px;
  border-radius:3px;
  color:#f7f3e9;                     /* explicit, against style.css:8 */
  text-decoration:none;              /* these are controls in a list, not links
                                        in prose: colour is not their only cue —
                                        a glyph, a label and a hover plate are */
  transition:background-color .2s ease, color .2s ease;
}
/* THE GLYPH CHANNEL. 26px, one column, every row on the same vertical — the
   device .jd-location uses for its destination rows (banner.css:8829). No
   plate, no circle: on a card a glyph is a mark in the margin, not a button. */
.jd-foot .jd-f-ic{
  flex:0 0 26px;
  width:26px;
  text-align:center;
  font-size:17px;
  line-height:1;
  color:#cbb279;                     /* 7.105:1 — decorative; the row's own text
                                        carries the meaning */
}
.jd-foot .jd-f-txt{
  display:block;
  min-width:0;                       /* a flex item's min-width defaults to
                                        auto, which refuses to shrink below the
                                        longest unbreakable run — without this
                                        the 23-character email address widens
                                        the row past its panel instead of
                                        wrapping inside it */
}
/* THE ROW LABELS. Two of the four are NOT invented: index.php:167 and :174
   already set `<small>Speak to us</small><b>+91 88200 22022</b>` and
   `<small>WhatsApp</small><b>+91 89618 96167</b>` in this page's own header,
   so the header's mini-card and the footer's full card now speak one language,
   in one markup pattern, with two strings shared verbatim. Only "Or call" and
   "Write to us" are new, and they exist because four bare numbers under four
   17px glyphs make a 75-year-old decode which is a phone and which is WhatsApp
   from a shape — and make a screen reader announce two links that differ only
   by digits. A printed card writes T / M / E for the same reason. The labels
   sit INSIDE the <a>, so they are part of every link's accessible name. */
.jd-foot .jd-f-txt small{
  display:block;
  margin-bottom:2px;
  font-size:12.5px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#a89f8a;                     /* 5.575:1 — the lowest figure in the block
                                        that carries a word, and it clears the
                                        floor by 24% */
}
.jd-foot .jd-f-txt b{
  display:block;
  font-size:17px;
  font-weight:600;
  line-height:1.25;
  color:#f7f3e9;                     /* 13.222:1 */
  font-variant-numeric:tabular-nums; /* "+91 75960 38215" and "+91 89618 96167"
                                        set on one rhythm; the header's own
                                        .jd-ct b does the same
                                        (css/header.css:205) */
  overflow-wrap:anywhere;            /* contact@jagritidham.com is 23 characters
                                        against a ~236px text column at a 320px
                                        viewport — it fits at 17px, but it must
                                        never be the thing that pushes the card
                                        wide */
}
/* THE PRIMARY NUMBER. 22px/700 in white — the largest type in the footer after
   the name, and the reason this room exists. THIS IS NOT AN ASSUMPTION: the
   page names +91 88200 22022 as its telephone twice, at index.php:55
   ("telephone": "+91-8820022022") and index.php:166 (the header's call link).
   If it ever stops being the sales line, moving `jd-f-primary` between two
   <li>s and swapping two labels is the whole edit. */
.jd-foot .jd-f-primary .jd-f-txt b{
  font-size:22px;
  font-weight:700;
  color:#ffffff;                     /* 14.651:1 */
}
.jd-foot .jd-f-primary .jd-f-ic{ font-size:19px; }


/* ---------- the door -----------------------------------------------------
   THE REFERENCE SHIPS THESE TWO AS `d-block d-sm-none` — visible only under
   576px. "Whatsapp Us" keeps that breakpoint, because above it the row four
   lines up already carries the same number and the same URL and a second
   WhatsApp button would be a duplicate control 60px from the first.
   "ENQUIRE NOW IS PROMOTED TO EVERY WIDTH." It points at #enqform, which
   exists on this page (index.php:305) and which nothing else in this footer
   reaches — it is the only route from the bottom of the page back to the form.
   Hiding the second conversion path from every desktop reader who scrolled all
   the way down is leaving ad money on the table, and the string is the
   reference's own. At >=576 it is an inline pill sized to its words; at <576
   the pair lie down side by side as a thumb bar. One DOM node each, two
   display rules, no duplicate anywhere.
   THE COLOURS ARE RE-CUT, for two different reasons, and the difference
   matters:
     "Enquire Now" #0a4257db is a navy WITH AN ALPHA BYTE that appears in the
       house palette nowhere and is NOT a brand mark, so the palette's brand
       exception does not cover it. (Composited on this ground it is #0D3F4F
       and white on it reads 11.4:1, so it does not FAIL — it is simply another
       page's colour.) It becomes the brass primary this page already uses:
       #1d2c20 on #cbb279 = 7.105:1.
     "Whatsapp Us" #25d366 IS a brand mark and stays. The reference puts
       #ffffff on it at 1.983:1 — a failure of even the 3:1 non-text floor. The
       ink becomes #1d2c20 at 7.387:1, which is also WhatsApp's own
       dark-on-green treatment. A 3.7x improvement out of a stated principle
       rather than an exception.
   52px, not 46: this is the last conversion offer on an ad-funded page and it
   is tapped one-handed. */
.jd-foot .jd-f-act{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
.jd-foot .jd-f-btn{
  display:flex;
  flex:0 1 auto;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:12px 22px;
  border-radius:3px;
  border:1px solid transparent;      /* reserved, so the forced-colors branch
                                        can give it a boundary without reflow */
  font-size:16px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#1d2c20;                     /* explicit, against style.css:8 */
  text-decoration:none;
  transition:filter .2s ease;
}
.jd-foot .jd-f-btn i{ font-size:18px; line-height:1; }
.jd-foot .jd-f-btn-enq{
  background-color:#cbb279;          /* ink 7.105:1; fill vs ground 7.105:1 */
  border-color:#cbb279;
}
.jd-foot .jd-f-btn-wa{
  display:none;                      /* the <576 branch turns this on */
  background-color:#25d366;          /* brand mark; ink 7.387:1, fill vs ground
                                        7.387:1 */
  border-color:#25d366;
}


/* ---------- panel 3: the marks that are not ours -------------------------
   "Member of." + ASLI comes from the reference, the full stop included. IGBC
   is KEPT from this page — see the removal notes. Two rows, each a plate and
   its words, because that is what a credential is: somebody else's mark plus
   the claim it supports.
   THE ONE ASYMMETRY IS DELIBERATE. "Member of." is a PREFIX phrase and has to
   sit ABOVE its mark to read as a sentence; "IGBC Silver Rated Green Building"
   describes the seal and reads correctly BESIDE it. The seal is 82x100 and its
   claim is two short lines, so stacking them would have wasted 34px of column
   for nothing. */
.jd-foot .jd-f-credrow{
  display:flex;
  align-items:center;
  gap:14px;
}
.jd-foot .jd-f-credmark + .jd-f-credrow{ margin-top:22px; }
.jd-foot .jd-f-memberlabel{
  margin:0 0 10px;                   /* restated over style.css:67's
                                        margin-bottom:10px so the value is
                                        chosen here, not inherited by
                                        coincidence */
  font-size:13px;                    /* beats style.css:67's global
                                        h4{font-size:25px} and style.css:457's
                                        h4{font-size:20px} at 0-2-0; neither is
                                        !important, so no flag */
  font-weight:700;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#cbb279;                     /* 7.105:1 — and it MUST be set:
                                        style.css:67 would paint this h4
                                        #4f6f52, which is 2.601:1 here */
}
/* THE MARK PLATE, sizes 2 and 3 — the identical object to .jd-f-mark. */
.jd-foot .jd-f-plate{
  display:block;
  box-sizing:border-box;
  background:#ffffff;                /* 14.651:1 */
  border:1px solid #cbb279;          /* 7.105:1 on the ground */
  border-radius:3px;
}
.jd-foot .jd-f-plate-asli{
  width:100%;
  max-width:200px;                   /* the bitmap's intrinsic width, 1:1 */
  padding:9px 12px;
}
.jd-foot .jd-f-plate-igbc{
  flex:0 0 82px;
  width:82px;                        /* 100x150 shown at 64x96 inside 9px of
                                        white — a downsample, never an upscale,
                                        and more than double the 40px
                                        style.css:310 gave it. The padding is
                                        not optional here: the IGBC artwork's
                                        ink bbox is x 0..99 of 100, so the
                                        wordmark touches both edges of the
                                        file and would sit flush against the
                                        hairline without it. */
  padding:9px;
}
.jd-foot .jd-f-credline{
  margin:0;
  font-size:14px;
  line-height:1.4;
  color:#dad5c6;                     /* 9.986:1 — the same step down the
                                        landmark line takes, for the same
                                        reason */
}


/* ---------- the rail: brand marks and policy -----------------------------
   THE SOCIAL ROW MOVES OUT OF THE CONTACT COLUMN, where the reference has it,
   and down here with the policy links. Two reasons, and they are both about
   the card: on a card the brand marks belong with the imprint rather than with
   the telephone number, and moving them takes ~70px off the tallest panel so
   the three columns end within ~110px of each other instead of ~200px. Nothing
   is lost — every URL, every colour and every mark ships. */
.jd-foot .jd-f-rail{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px 32px;
  margin-top:40px;
}

/* THE FOUR BRAND MARKS. The brand colours are kept exactly as the reference
   sets them — they are brand marks, the palette's one licensed exception — but
   NOT as the reference's inline style="background-color:..." attributes: every
   one is a class here.
   THE GLYPH INK IS DECIDED BY A RULE, NOT BY HABIT. Each glyph takes whichever
   of the card's two inks reads better on that brand's own field:
     Facebook  #4479e7   white 4.090:1   #1d2c20 3.582:1   -> #ffffff
     Instagram #ec2f83   white 3.962:1   #1d2c20 3.698:1   -> #ffffff
     YouTube   #d83231   white 4.751:1   #1d2c20 3.084:1   -> #ffffff
     LinkedIn  #0a66c2   white 5.687:1   #1d2c20 2.576:1   -> #ffffff
     WhatsApp  #25d366   white 1.983:1   #1d2c20 7.387:1   -> #1d2c20 (button)
   The reference sets white on #25d366 at 1.983:1; under the rule above that
   becomes 7.387:1. These are non-text graphical objects (WCAG 1.4.11, 3:1) and
   all five clear it. The two under 4.5 are the brands' own registered colours
   and cannot be moved without misrepresenting the mark; each control's
   ACCESSIBLE NAME is real text in .jd-sr, never a colour.
   THE HAIRLINE IS LOAD-BEARING, NOT DECORATION. LinkedIn's #0a66c2 against the
   ground is 2.576:1 and FAILS 1.4.11's 3:1 for the component's own boundary,
   and YouTube's #d83231 clears it by 0.084. A 1px #cbb279 ring puts every
   disc's boundary at 7.105:1 regardless of what fills it — and it is the SAME
   brass hairline the three plates carry, so the room has ONE boundary value a
   reader learns once instead of two.
   THE 14px GAP IS ARITHMETIC. The focus ring below is 3px at a 3px offset, so
   it reaches 6px out of each disc; 14px leaves 7px a side — 1px of daylight
   between a ring and its neighbour. A 10px gap would have overlapped. */
.jd-foot .jd-f-social{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.jd-foot .jd-f-soc{
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:46px;                        /* 46 x 46 — over the 44px floor on both
                                        axes */
  height:46px;
  border:1px solid #cbb279;          /* 7.105:1 on the ground — the component
                                        boundary; see above */
  border-radius:50%;
  font-size:19px;
  line-height:1;
  color:#ffffff;                     /* explicit, against style.css:8 */
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.jd-foot .jd-f-fb{ background-color:#4479e7; }   /* glyph #ffffff, 4.090:1 */
.jd-foot .jd-f-ig{ background-color:#ec2f83; }   /* glyph #ffffff, 3.962:1 */
.jd-foot .jd-f-yt{ background-color:#d83231; }   /* glyph #ffffff, 4.751:1 */
.jd-foot .jd-f-in{ background-color:#0a66c2; }   /* glyph #ffffff, 5.687:1 */

/* THE THREE POLICY LINKS, in the reference's own order. Privacy Policy and
   Press Releases go off-site to jagritidham.com IN THE SAME TAB, exactly as
   the reference has them — porting the content means porting the link
   behaviour, and forcing new tabs on a 75-year-old is a decision the reference
   did not make. "Disclaimer" is the third and is the one thing here whose
   BEHAVIOUR changes; see .jd-f-fineprint.
   ALWAYS UNDERLINED: style.css:8 turns underlines off globally and they are
   turned back on here, because a hover-only underline is a hover-only
   affordance and this reader may be on a touch screen with no hover at all.
   44px tall, 22px apart. The separator is a 3px brass dot drawn on `li + li`,
   not a character in the text, so a screen reader never reads it — and because
   it is keyed to DOM adjacency it survives the Disclaimer item going
   display:none in print: li3 keeps its dot, li2's absence just closes the gap,
   and the row prints "Privacy Policy . Press Releases" with no orphan mark. */
.jd-foot .jd-f-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 22px;
}
.jd-foot .jd-f-legal a{
  display:inline-flex;
  align-items:center;
  min-height:44px;                   /* the shortest label, "Disclaimer", is
                                        ~73px wide at 15px — both axes clear */
  padding:0 2px;
  font-size:15px;
  color:#f7f3e9;                     /* 13.222:1, explicit against style.css:8 */
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:color .2s ease;
}
.jd-foot .jd-f-legal li + li{ position:relative; }
.jd-foot .jd-f-legal li + li::before{
  content:"";
  position:absolute;
  left:-12.5px;                      /* centres a 3px dot in the 22px gap:
                                        -(22 + 3) / 2 */
  top:50%;
  width:3px; height:3px;
  margin-top:-1.5px;
  border-radius:50%;
  background:#cbb279;                /* 7.105:1 — decorative */
}


/* ---------- the back of the card -----------------------------------------
   Everything legal, below a rule, set left and small. LEFT rather than centred
   because the disclaimer is three lines of running text and a centred ragged
   block is the hardest thing on this page to read — which is what
   css/responsive.css:120 does to it today.
   THE RULE IS #a89f8a AT 5.575:1: a rule a 75-year-old actually sees. The
   alternatives inside the palette are #4f6f52 (2.601:1), #3a5240 (1.717:1) and
   #2b3f2f (1.294:1), all of which vanish on this ground; the legacy
   .copyright's own 1px #444 on #222222 (style.css:292) is about 1.4:1. This is
   the second and last drawn line in the whole footer. */
.jd-foot .jd-f-back{
  margin-top:36px;
  padding-top:26px;
  border-top:1px solid #a89f8a;      /* 5.575:1 */
}

/* THE DISCLAIMER STAYS PRINTED. I WAS RECOMMENDED A MODAL AND I DECLINE IT.
   The reference's "Disclaimer" link opens #disclaimerModal and THAT MODAL DOES
   NOT EXIST on the reference page — the link is dead there. Bootstrap 5.1.3's
   bundle IS loaded here (index.php:1976) so a real modal was available. Four
   reasons it is not used, in ascending weight:
     a. A modal is a JS-dependent, focus-trapping, dismiss-requiring
        interaction, and Bootstrap's .btn-close is 1em — about 16px — against
        the 44px floor this whole block is built on.
     b. Conspicuousness is the entire point of a disclaimer. Text you must
        click to see is a weaker disclosure than text that is simply on the
        page. This page's footer has shown it in full since it launched; a
        rebuild should not be the moment it stops.
     c. It would put 43 words of legal notice in two places in one document —
        which is exactly the maintenance failure that produced the reference's
        `document.write(year)` followed by a literal "2026".
     d. DECISIVELY: A MODAL'S CONTENTS DO NOT PRINT. This page sells renders of
        an unbuilt product, and the sentence "may / may not form part of the
        final product" is precisely the sentence that must survive onto paper
        when somebody prints this page to show an elderly parent. The print
        branch below keeps it at 8.5pt with break-inside:avoid.
   This is the same rule the welcome section already applied: an affordance
   hidden behind hover can be given a second trigger, but copy cannot.
   WHAT THE REFERENCE'S LINK BECOMES: a plain in-page fragment,
   href="#jd-f-disclaimer", pointing at this paragraph. The dead link becomes
   live, nothing is hidden, no string is duplicated and no JavaScript is added.
   The paragraph also stops being 13px ITALIC white (style.css:291 +
   css/responsive.css:120) and becomes 13.5px roman at 9.774:1 — italic 13px is
   the least readable setting on the page for this reader.
   IF THE OWNER OR A LAWYER SPECIFICALLY WANTS THE MODAL, it is two attributes
   on that one anchor (href="javascript:void(0);" data-bs-toggle="modal"
   data-bs-target="#disclaimerModal") plus a real modal div before </footer>. I
   would keep the visible paragraph either way.
   NO scroll-margin IS SET: css/header.css:301 already declares
   `html{scroll-padding-top:calc(var(--jd-ribbon-h) + var(--jd-bar-h) + 16px)}`,
   which covers every fragment jump on this page through all three header
   heights — and this target is near the end of the document, where the browser
   cannot scroll it under the header anyway. */
.jd-foot .jd-f-fineprint{
  max-width:96ch;
  margin:0 0 18px;
  font-style:normal;                 /* NOT italic — see above */
  font-size:13.5px;                  /* beats style.css:23 and
                                        css/responsive.css:130-131 at 0-2-0 */
  line-height:1.62;
  color:#d5d3cb;                     /* 9.774:1 — AAA */
  border-left:3px solid transparent; /* reserved, so :target adds no reflow */
  padding-left:0;
}
.jd-foot .jd-f-fineprint strong{
  color:#f7f3e9;                     /* 13.222:1 */
  font-weight:700;
}
/* :target is what makes the reference's dead link honest — the reader SEES
   that the link did something, which a jump to text that may already be on
   screen otherwise cannot show. #22331f is 1.089:1 against the ground: a wash,
   not a panel, deliberately faint so the text keeps its own ratio (the fine
   print on #22331f still reads 8.973:1).
   IT IS USED INSTEAD OF A FOCUS RING, not as well as one. The paragraph
   carries tabindex="-1" so the jump moves FOCUS there and a keyboard or
   screen-reader user lands ON the text rather than near it — but focus arrived
   at without a keypress is :focus and NOT :focus-visible in every engine that
   implements the distinction, so the ring below would be suppressed. :target
   is not.
   THE LINK DELIBERATELY DOES NOT CARRY class="hash". js/custom.js:207 selects
   `a[href*="#"].hash` and js/custom.js:221 calls event.preventDefault(), which
   stops the URL fragment being set, which stops :target ever matching, which
   would silently kill this marker. Native fragment navigation is the correct
   mechanism here and it also costs no animation. */
.jd-foot .jd-f-fineprint:target{
  margin-left:-16px;
  padding-left:16px;
  border-left-color:#cbb279;         /* 7.105:1 */
  background:#22331f;                /* text on it: 8.973:1 */
}

/* THE COPYRIGHT. 13.5px #d5d3cb at 9.774:1, against the legacy .copyright p
   (style.css:292) which is 11px #939393 on #222222 = 4.94:1: 23% larger type
   at twice the contrast. */
.jd-foot .jd-f-copy{
  margin:0;
  font-size:13.5px;
  line-height:1.5;
  color:#d5d3cb;                     /* 9.774:1 */
}


/* ---------- visually hidden ----------------------------------------------
   Byte-identical to #floor-plan .jd-sr (banner.css:3329), .gallery .jd-sr
   (:6356) and .jd-partners .jd-sr (:11945), and SCOPED for the same reason
   those are: an unscoped .jd-sr would be the one selector in this file able to
   reach outside its own room. Seven uses here — six "(opens in a new tab)" and
   four social brand names, which are the only accessible names those four
   icon-only controls have. */
.jd-foot .jd-sr{
  position:absolute !important;      /* FLAG 3 — any position an ancestor or a
                                        later rule could impose; copied verbatim
                                        from banner.css:3329 so the four
                                        declarations stay interchangeable */
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}


/* ---------- hover, and only where a pointer exists -----------------------
   Wrapped in (hover:hover) so a touch tap does not leave a row plated until
   the next tap somewhere else. The wash is #2b3f2f at 1.294:1 against the
   ground — deliberately faint, because the row's text has to keep its own
   contrast (on #2b3f2f, #ffffff reads 11.322:1 and #dad5c6 7.718:1) and a
   hover plate that changes the ink's ratio is a plate that has to be audited
   twice. No transform on the rows: a row that moves under a shaky finger is a
   row that gets mis-tapped.
   TRAP FOR THE NEXT EDITOR: #a89f8a measures 5.575:1 on the ground but only
   4.308:1 on this wash — BELOW the floor. The row label is lifted to #dad5c6
   (7.718:1) on hover for exactly that reason. */
@media (hover:hover){
  .jd-foot .jd-f-list a:hover{ background-color:#2b3f2f; }
  .jd-foot .jd-f-list a:hover .jd-f-txt b{ color:#ffffff; }      /* 11.322:1 */
  .jd-foot .jd-f-list a:hover .jd-f-txt small{ color:#dad5c6; }  /*  7.718:1 */
  .jd-foot .jd-f-list a:hover .jd-f-ic{ color:#e3cf9c; }
  .jd-foot .jd-f-map:hover{ color:#e5e1d8; }                     /* 11.228:1 */
  .jd-foot .jd-f-legal a:hover{
    color:#ffffff;                                               /* 14.651:1 */
    text-decoration-thickness:2px;
  }
  .jd-foot .jd-f-soc:hover{
    transform:translateY(-2px);
    box-shadow:0 0 0 2px #cbb279;    /* thickens the keyline; no colour moves,
                                        so no brand mark is altered */
  }
  .jd-foot .jd-f-btn:hover{ filter:brightness(1.06); }
}
/* :active fires on touch too, so a row acknowledges a tap on a phone — which
   the (hover:hover) block above deliberately does not. */
.jd-foot .jd-f-list a:active{ background-color:#22331f; }


/* ---------- focus --------------------------------------------------------
   THE THREE-RULE FORM, and the order is the point. Outside :is()/:where(), ONE
   unknown pseudo-class invalidates the WHOLE rule, so the two-rule form drops
   BOTH rules in an engine that has never heard of :focus-visible and leaves
   seventeen real controls with no indicator at all. The bare :focus lands the
   ring first; the second rule takes it back only where the third can put it
   right.
   #f7f3e9 at 13.222:1 on the ground, 3px at a POSITIVE 3px offset so the ring
   lands on the GROUND for every control in the room — the brass button, the
   #25d366 button, the four brand discs and the three white plates included,
   none of which the ring ever touches. That is why one figure covers WCAG
   2.4.11 everywhere instead of five.
   THE ONE SUPPRESSION is the disclaimer paragraph, which is not a control: it
   carries tabindex="-1" only so the in-page jump lands focus reliably, and its
   :target treatment IS its indicator. Declared after the triad so it wins on
   source order at equal specificity. */
.jd-foot :focus{
  outline:3px solid #f7f3e9;         /* 13.222:1 on the ground */
  outline-offset:3px;
}
.jd-foot :focus:not(:focus-visible){ outline:0; }
.jd-foot :focus-visible{
  outline:3px solid #f7f3e9;
  outline-offset:3px;
}
.jd-foot .jd-f-fineprint:focus,
.jd-foot .jd-f-fineprint:focus-visible{ outline:0; }


/* ---------- the tripwires ------------------------------------------------
   These match NOTHING in the markup that ships, and that is the point. See the
   motion note in the header: the footer being replaced put `wow slideInDown`
   on three columns and `wow zoomIn` on the IGBC image, and this room carries
   the only phone numbers on the page. If anybody ever pastes a .wow box in
   here, it paints. The opacity line is for zoomIn/fadeIn, which is what a paste
   from elsewhere on this page would bring; slideInDown has no opacity channel
   at all. */
.jd-foot .wow{
  visibility:visible !important;     /* FLAG 2 — answers the INLINE
                                        visibility:hidden js/wow.min.js
                                        (index.php:1982) writes at
                                        new WOW().init() (index.php:1985).
                                        Only !important beats an inline style. */
  opacity:1 !important;              /* FLAG 2 */
  animation:none !important;         /* FLAG 2 */
}
/* and the same for the FA animation classes, so the reference's `fa-beat`
   cannot come back on the WhatsApp button by paste. NO FLAG NEEDED: css/all.css
   declares .fa-beat at 0-1-0 with no !important (all.css:124) and this
   selector is 0-2-0 in a sheet that loads nine files later. css/all.css:238
   only SHORTENS these under prefers-reduced-motion; this stops them for
   everyone, here, next to a phone number. */
.jd-foot .fa-beat,
.jd-foot .fa-beat-fade,
.jd-foot .fa-bounce,
.jd-foot .fa-shake,
.jd-foot .fa-fade,
.jd-foot .fa-flip,
.jd-foot .fa-spin{ animation:none; }


/* ==========================================================================
   BREAKPOINTS — Bootstrap's own, and only Bootstrap's own: 991.98 / 767.98 /
   575.98. The padding steps are the house ladder, with the bottom pad held at
   78px until #backto-top stops rendering at 576.
   ========================================================================== */

/* <992 — three panels become two-plus-one. WHERE and HOW stay side by side
   because they are the pair a reader uses TOGETHER; the marks drop to a
   full-width band beneath them. */
@media (max-width:991.98px){
  .jd-foot{ padding:44px 0 78px; }
  .jd-foot .jd-f-head{ margin-bottom:30px; }
  .jd-foot .jd-f-body{ --bs-gutter-x:24px; --bs-gutter-y:32px; }
  .jd-foot .jd-f-rail{ margin-top:34px; }
}
/* and in that band the credentials panel is a full-width strip, so its two
   blocks go side by side rather than stacking into a tall column with a ragged
   right. Bounded below at 768 because under that the panel is a phone wide. */
@media (min-width:768px) and (max-width:991.98px){
  .jd-foot .jd-f-cred{
    display:flex;
    align-items:flex-end;
    gap:40px;
  }
  .jd-foot .jd-f-credmark + .jd-f-credrow{ margin-top:0; }
}

/* <768 — everything stacks. The name and the address step down 1px and 0.5px;
   THE PRIMARY NUMBER DOES NOT, because it is the thing this room is for. */
@media (max-width:767.98px){
  .jd-foot{ padding:34px 0 78px; }
  .jd-foot .jd-f-head{ gap:18px; margin-bottom:26px; }
  .jd-foot .jd-f-name{ font-size:20px; }
  .jd-foot .jd-f-addr{ font-size:16px; }
  .jd-foot .jd-f-body{ --bs-gutter-y:30px; }
  .jd-foot .jd-f-rail{ justify-content:flex-start; gap:24px 32px; }
}

/* <576 — THE THUMB BAR APPEARS, at the width the reference chose for it, and
   #backto-top disappears (index.php:136 gives it `d-none d-sm-block`), so the
   bottom pad returns to the ladder's 34px.
   THE PAIR STACKS FULL WIDTH RATHER THAN SITTING SIDE BY SIDE, and this is a
   MEASURED correction, not a preference. Rendered side by side at a 375px
   viewport each button comes out 169.6px, which leaves 115.6px of text column
   after an 18px glyph, a 10px gap and 24px of padding — and "ENQUIRE NOW" at
   15px/700 does not fit it. IT WRAPPED, AND THE BUTTON GREW TO 70.6px. That is
   measured in a browser against the real stylesheets, not estimated.
   Stacking removes the failure across the whole 320-575 band instead of
   patching one width; it gives each button the full 296-540px content box as a
   target instead of half of it, which is the right way round for the width
   where the reader is most likely to be 75; and it is what THE REFERENCE
   ITSELF DOES — its two buttons carry `d-block`, and a block-level <a> is full
   width. One rule, and the separate <360 breakpoint it replaces is deleted.
   THE POLICY LINKS STACK AND LOSE THEIR DOTS. Laid out in one row the three
   measure ~311px against a ~296px box at 320px, so they would wrap — and a
   wrapped `li + li::before` puts an orphan dot at the start of the second row.
   A column of three 44px rows is both the correct fix and the better phone
   layout for this reader.
   THE LETTERHEAD PLATE steps to 180px: 200 plus an 18px gap would leave only
   78px of masthead rule in a 296px box; 180 leaves 98px (MEASURED: the ::after
   computes to exactly 98px at a 320px viewport), which still reads as a rule.
   NOTHING ELSE SHRINKS. The numbers hold their size — VERIFIED at 320px, where
   all four values, including the 23-character email at 17px, still set on ONE
   line each — the plates hold theirs, and every target holds 44-56px. */
@media (max-width:575.98px){
  .jd-foot{ padding:34px 0 34px; }
  .jd-foot .jd-f-mark{ width:180px; }
  .jd-foot .jd-f-act{ flex-direction:column; }
  .jd-foot .jd-f-btn{ width:100%; font-size:15px; }
  .jd-foot .jd-f-btn-wa{ display:flex; }
  .jd-foot .jd-f-rail{ margin-top:30px; gap:22px 24px; }
  .jd-foot .jd-f-legal{ flex-direction:column; align-items:flex-start; gap:0; }
  .jd-foot .jd-f-legal li + li::before{ display:none; }
  .jd-foot .jd-f-back{ margin-top:30px; }
}


/* ---------- prefers-reduced-motion ---------------------------------------
   Everything that moves in this room is a state transition on a control. None
   of it is information, so all of it goes. The FA animation classes are
   already stopped for everyone by the tripwire above; restated here so the
   intent survives that block being edited. */
@media (prefers-reduced-motion:reduce){
  .jd-foot .jd-f-list a,
  .jd-foot .jd-f-map,
  .jd-foot .jd-f-legal a,
  .jd-foot .jd-f-soc,
  .jd-foot .jd-f-btn,
  .jd-foot .jd-f-fineprint{ transition:none; }
  .jd-foot .jd-f-soc:hover{ transform:none; }
  .jd-foot .fa-beat,
  .jd-foot .fa-beat-fade,
  .jd-foot .fa-bounce,
  .jd-foot .fa-shake,
  .jd-foot .fa-fade,
  .jd-foot .fa-flip,
  .jd-foot .fa-spin{ animation:none; }
}


/* ---------- prefers-contrast: more ---------------------------------------
   The ground does not move: it is a palette colour and the room's seat in the
   ladder. What moves is every ink that was deliberately stepped DOWN for
   hierarchy — the row labels, the landmark line, the IGBC line, the fine print,
   the copyright — all up to #ffffff at 14.651:1, and the reach rows take a real
   underline so they are marked by shape as well as by plate. Hairlines double
   to 2px, the move .jd-partners makes at banner.css:12123, and the back-strip
   rule goes from 5.575:1 to 7.105:1.
   THE BITMAPS ARE NOT FILTERED. An IGBC green that is not IGBC green is worth
   less than the ratio it would buy, and the same applies to the four brand
   fills. */
@media (prefers-contrast:more){
  .jd-foot .jd-f-addr,
  .jd-foot .jd-f-landmark,
  .jd-foot .jd-f-txt small,
  .jd-foot .jd-f-txt b,
  .jd-foot .jd-f-credline,
  .jd-foot .jd-f-fineprint,
  .jd-foot .jd-f-fineprint strong,
  .jd-foot .jd-f-copy,
  .jd-foot .jd-f-legal a,
  .jd-foot .jd-f-map,
  .jd-foot .jd-f-label,
  .jd-foot .jd-f-memberlabel{ color:#ffffff; }        /* 14.651:1 */
  .jd-foot .jd-f-ic{ color:#f7f3e9; }                 /* 13.222:1 */
  .jd-foot .jd-f-mark,
  .jd-foot .jd-f-plate,
  .jd-foot .jd-f-soc,
  .jd-foot .jd-f-btn{ border-width:2px; }
  .jd-foot .jd-f-back{ border-top-color:#cbb279; }    /* 7.105:1, up from 5.575 */
  .jd-foot .jd-f-legal a{ text-decoration-thickness:2px; }
  .jd-foot .jd-f-list a{
    text-decoration:underline;
    text-underline-offset:4px;
  }
  .jd-foot :focus,
  .jd-foot :focus-visible{ outline-width:4px; }
}


/* ---------- forced-colors (Windows High Contrast) ------------------------
   Declared AFTER prefers-contrast on purpose: Chromium matches BOTH under
   Windows High Contrast and this block has to be the one that lands — the
   ordering .jd-partners uses at banner.css:12162.
   THE SYSTEM OWNS EVERY COLOUR HERE, so the job is to make sure nothing loses
   its EDGE when the fills are thrown away. Every disc, button and rule gets an
   explicit system boundary.
   THE ONE OPT-OUT IS THE THREE MARK PLATES, AND IT COVERS ALL THREE — which is
   the part worth reading twice. forced-colors does NOT recolour images, and it
   must not. A plate forced to Canvas in a dark high-contrast theme would put
   the opaque-white JD-Infinity and ASLI bitmaps on a black field as two white
   rectangles — the exact seam this whole construction exists to remove — and
   it would take the IGBC seal's near-black wordmark down with it, which is the
   same failure the dark ground caused and the same reason that file is on a
   plate at all. `forced-color-adjust:none` keeps the white field under all
   three unrecolourable bitmaps. This is the sanctioned use of that property: an
   image whose own colour carries the meaning. The property inherits, so the
   brass hairline stays brass too — and the plate's edge against a forced
   Canvas is the strongest boundary in the room either way. */
@media (forced-colors:active){
  .jd-foot{ background-color:Canvas; color:CanvasText; }
  .jd-foot .jd-f-head::after{ background:CanvasText; }
  .jd-foot .jd-f-back{ border-top-color:CanvasText; }
  .jd-foot .jd-f-name,
  .jd-foot .jd-f-addr,
  .jd-foot .jd-f-landmark,
  .jd-foot .jd-f-label,
  .jd-foot .jd-f-memberlabel,
  .jd-foot .jd-f-credline,
  .jd-foot .jd-f-fineprint,
  .jd-foot .jd-f-fineprint strong,
  .jd-foot .jd-f-copy{ color:CanvasText; }
  .jd-foot .jd-f-map,
  .jd-foot .jd-f-map i,
  .jd-foot .jd-f-legal a,
  .jd-foot .jd-f-list a,
  .jd-foot .jd-f-list a .jd-f-ic,
  .jd-foot .jd-f-list a .jd-f-txt small,
  .jd-foot .jd-f-list a .jd-f-txt b{ color:LinkText; }
  .jd-foot .jd-f-legal li + li::before{ background:CanvasText; }
  .jd-foot .jd-f-soc,
  .jd-foot .jd-f-btn{
    background:ButtonFace;
    color:ButtonText;
    border-color:ButtonText;
    forced-color-adjust:none;        /* furniture, not artwork: each of these
                                        boxes holds a drawn glyph and, at most,
                                        a word — nothing whose colour carries
                                        meaning */
  }
  .jd-foot .jd-f-mark,
  .jd-foot .jd-f-plate{
    forced-color-adjust:none;        /* see the note above this block */
    background:#ffffff;
    border-color:#cbb279;
  }
  .jd-foot .jd-f-list a:hover,
  .jd-foot .jd-f-list a:active{ background-color:Highlight; color:HighlightText; }
  .jd-foot .jd-f-fineprint:target{
    background:Highlight;
    color:HighlightText;
    border-left-color:Highlight;
  }
  .jd-foot :focus,
  .jd-foot :focus-visible{ outline-color:Highlight; }
}


/* ==========================================================================
   PRINT — the branch this card was designed for.
   Who prints a senior-living page? Overwhelmingly an adult child taking it to
   a parent who does not use the web, or to a family conversation about a
   parent who is not in the room. What they need on paper is the address, the
   four ways to make contact, the seals and the legal notice. So in print the
   footer stops being the bottom of a web page and becomes the card literally:
   white stock, black ink, the letterhead rule, the address, the four reach
   lines with the primary number still the largest thing on the sheet, the
   three marks, and the FULL disclaimer.
     KEPT     the address, all four numbers, the map link WITH ITS URL SPELLED
              OUT, the three plates, the two policy links, the disclaimer, the
              copyright.
     CUT      the four social discs (four coloured circles that cannot be
              tapped, whose destinations are three brand names a reader can
              type from memory — toner spent on nothing), the thumb bar
              (#enqform is a same-page anchor and a dead affordance on paper),
              the "Disclaimer" link (its target is four lines below it) and
              every icon glyph (an icon font may not embed in a PDF, and a
              stray box next to a phone number on paper is worse than no
              glyph).
   THE POLICY URLs ARE NOT SPELLED OUT. The Press Releases href is 66
   characters; nobody types a privacy policy off paper. The map URL is 37 and
   genuinely typeable, so it is the one that prints.
   THE GROUND OVERRIDE IS NOT COSMETIC: style.css:288 carries no media query,
   so with "background graphics" enabled a printer would lay down a solid
   #222222 slab and then print black on black. `.jd-foot` at 0-1-0 beats it
   with no !important. Units are pt throughout, matching .jd-partners' own
   print branch (banner.css:12225-).
   ========================================================================== */
@media print{
  .jd-foot{
    padding:0;
    background-color:#ffffff;
    color:#000000;                   /* 21:1 */
    break-inside:avoid; page-break-inside:avoid;
  }

  .jd-foot .jd-f-head{ gap:16pt; margin-bottom:14pt; }
  .jd-foot .jd-f-head::after{ background:#000000; }
  .jd-foot .jd-f-mark{ width:150pt; padding:4pt 6pt; border-color:#a89f8a; }
  .jd-foot .jd-f-plate{ border-color:#a89f8a; }      /* 2.628:1 on white — the
                                                        plate is paper on paper
                                                        now, so the hairline is
                                                        all that frames it */
  .jd-foot .jd-f-plate-asli{ max-width:150pt; padding:4pt 6pt; }
  .jd-foot .jd-f-plate-igbc{ flex-basis:60pt; width:60pt; padding:5pt; }

  .jd-foot .jd-f-body{ --bs-gutter-x:18pt; --bs-gutter-y:12pt; }
  .jd-foot .jd-f-panel{ break-inside:avoid; page-break-inside:avoid; }

  .jd-foot .jd-f-name{ font-size:15pt; color:#000000; }
  .jd-foot .jd-f-addr{ font-size:11pt; line-height:1.5; color:#000000; }
  .jd-foot .jd-f-landmark{ font-size:10pt; color:#000000; }
  .jd-foot .jd-f-label,
  .jd-foot .jd-f-memberlabel{
    font-size:9pt !important;        /* FLAG 1 again — style.css:451 carries no
                                        media TYPE, so a print UA with a narrow
                                        page box can still match its
                                        max-width:575.98px query */
    color:#2b3f2f;                   /* 11.322:1 on white */
    margin-bottom:8pt;
  }

  /* the reach list loses its 56px targets — nothing is tapped on paper — and
     becomes four typeset lines. */
  .jd-foot .jd-f-list li + li{ margin-top:5pt; }
  .jd-foot .jd-f-list a{
    min-height:0;
    margin-left:0;
    padding:0;
    gap:8pt;
    color:#000000;
  }
  .jd-foot .jd-f-txt small{ font-size:8pt; color:#2b3f2f; }   /* 11.322:1 */
  .jd-foot .jd-f-txt b{ font-size:11pt; color:#000000; }
  .jd-foot .jd-f-primary .jd-f-txt b{
    font-size:15pt;                  /* still the biggest thing on the sheet */
    color:#000000;                   /* 21:1. MUST BE RESTATED HERE, and this is
                                        the most consequential line in the print
                                        branch. The base rule
                                        `.jd-foot .jd-f-primary .jd-f-txt b` is
                                        0-3-1 and sets color:#ffffff; this
                                        branch's `.jd-foot .jd-f-txt b{color:
                                        #000}` is only 0-2-1, so SPECIFICITY
                                        BEATS SOURCE ORDER and the page's
                                        primary telephone number printed white
                                        on white - measured rgb(255,255,255) on
                                        an rgb(255,255,255) ground, while the
                                        other three numbers printed black. What
                                        came out of the printer was the label
                                        "SPEAK TO US" followed by empty space,
                                        on the one sheet whose whole purpose is
                                        an adult child carrying a number to a
                                        parent. The forced-colors branch already
                                        wins this same fight by reaching 0-3-2. */
  }       /* still the
                                                                 biggest thing
                                                                 on the sheet */

  .jd-foot .jd-f-map{
    display:inline;                  /* NOT inline-flex. As a flex container the
                                        label and the ::after URL stay two
                                        side-by-side flex items that each wrap
                                        inside their own share of the column,
                                        so the sheet printed "Find us on / map"
                                        beside a URL broken mid-token. Inline
                                        lets the label and the URL flow as one
                                        sentence, which is the stated intent. */
    min-height:0;
    padding:0;
    font-size:10pt;
    color:#000000;
    text-decoration:none;
  }
  .jd-foot .jd-f-map::after{
    content:" (" attr(href) ")";
    font-size:8.5pt;
    font-weight:400;
    overflow-wrap:anywhere;
  }

  .jd-foot .jd-f-credline{ font-size:9.5pt; color:#000000; }

  .jd-foot .jd-f-social,
  .jd-foot .jd-f-act,
  .jd-foot .jd-f-jump,
  .jd-foot .fa,
  .jd-foot .fas,
  .jd-foot .far,
  .jd-foot .fab,
  .jd-foot .fa-solid,
  .jd-foot .fa-regular,
  .jd-foot .fa-brands{ display:none; }

  .jd-foot .jd-f-rail{ margin-top:12pt; justify-content:flex-start; }
  .jd-foot .jd-f-legal{ gap:0 14pt; }
  .jd-foot .jd-f-legal a{
    min-height:0;
    font-size:9.5pt;
    color:#000000;
    text-decoration:none;
  }
  .jd-foot .jd-f-legal li + li::before{ left:-8.5pt; background:#000000; }

  .jd-foot .jd-f-back{
    margin-top:12pt;
    padding-top:8pt;
    border-top:1px solid #a89f8a;    /* 2.628:1 on white */
    break-inside:avoid; page-break-inside:avoid;
  }
  .jd-foot .jd-f-fineprint,
  .jd-foot .jd-f-fineprint:target{
    max-width:none;
    margin:0 0 8pt;
    padding-left:0;
    border-left:0;
    background:none;
    color:#000000;                   /* 21:1 — the disclaimer prints in full and
                                        at full contrast, which is the whole
                                        argument for not putting it in a modal */
    font-size:8.5pt;
    line-height:1.5;
  }
  .jd-foot .jd-f-fineprint strong{ color:#000000; }
  .jd-foot .jd-f-copy{ font-size:9pt; color:#000000; }

  .jd-foot :focus,
  .jd-foot :focus-visible{ outline:0; }
}
/* ===== end .jd-foot ====================================================== */

/* ==========================================================================
   THE FORM'S ERROR MESSAGES — the one thing on this page a reader is
   guaranteed to need and could not read
   ==========================================================================
   jQuery Validate is configured at index.php with errorElement:'em' and
   errorClass:'text-danger small', so on a failed submit it INJECTS
   <em class="text-danger small"> onto the form panel. Bootstrap paints
   .text-danger #dc3545 — and the panel underneath is this form's own green:
   linear-gradient(#3a5240,#2f4433) on a phone, which measures 1.88:1 at the
   top and 2.32:1 at the bottom, and on desktop rgba(101,161,130,.7)
   composited over the banner photograph, which on a light slide lands near
   1:1. AA wants 4.5:1. So the reader was told why her enquiry was refused in
   dark red on dark green, a few pixels high, and could not read it.
   This is also why BOTH mechanical contrast sweeps of this page reported zero
   failures: the <em> does not exist in the static HTML — it appears only
   after a failed submit — and a resolver that reads background-color and
   skips background-image walks straight past the panel to the white body,
   where #dc3545 measures 4.53:1 and passes by three hundredths.
   .text-danger sets its colour with !important, so this must be flagged to
   land at all: 0-2-1 against 0-1-0, both important. */
.jd-form-inner em.text-danger,
.jd-form-inner em.jd-form-alert{
  display:block;
  margin:4px 0 0;
  color:#ffc9cf !important;          /* FLAG — beats bootstrap.min.css's
                                        .text-danger{color:#dc3545!important}.
                                        5.90:1 on #3a5240, 7.27:1 on #2f4433 */
  font-style:normal;                 /* it is an <em>, but it is a message,
                                        not emphasis inside a sentence */
  font-size:13px;
  line-height:1.35;
  letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.55);   /* the desktop panel is translucent
                                              over a photograph, so the ground
                                              is not a colour this file
                                              controls; the shadow is what
                                              holds the ratio there */
}
/* the submit-failed banner is a whole sentence, not a field note */
.jd-form-inner em.jd-form-alert{
  margin:0 0 12px;
  padding:10px 12px;
  font-size:14px;
  border-radius:3px;
  background:rgba(29,44,32,.55);
  border:1px solid rgba(255,201,207,.5);
}
@media (prefers-contrast:more){
  .jd-form-inner em.text-danger,
  .jd-form-inner em.jd-form-alert{ color:#ffffff !important; text-shadow:none; }
  .jd-form-inner em.jd-form-alert{ background:#1d2c20; border-color:#ffffff; }
}
@media (forced-colors:active){
  .jd-form-inner em.text-danger,
  .jd-form-inner em.jd-form-alert{ color:CanvasText !important; text-shadow:none; }
  .jd-form-inner em.jd-form-alert{ background:Canvas; border-color:CanvasText; }
}
@media print{
  .jd-form-inner em.text-danger,
  .jd-form-inner em.jd-form-alert{ color:#000 !important; text-shadow:none; background:none; }
}

/* ==========================================================================
   THE HEADER'S "CONTACT US" — matched to the body button
   ==========================================================================
   Asked for: make the header CTA look like the one in .senior_living
   ("Jagriti Dham: Because You Deserve A Luxurious Senior Living",
   index.php:712). Measured both first — they already shared more than they
   differed, which is why this is a short block:

                        header .jd-cta        .senior_living .btn_blue_rounded
     gradient           IDENTICAL             IDENTICAL
     ink                #1d2c20               #1d2c20
     radius             0                     0
     family             Helvetica             Helvetica
     ------------------------------------------------------------------------
     text-transform     UPPERCASE             none            <- differed
     letter-spacing     1.82px                0.17px          <- differed
     border             none                  1px #7f6630     <- differed
     icon               fa-arrow-right        fa-paper-plane  <- differed
     font-size          14 / 13.5 / 12        17 / 17 / 16    <- differed
     min-height         46 / 46 / 44          52              <- differed

   SO THIS BLOCK CHANGES THE FIRST FOUR OUTRIGHT AND CLOSES THE LAST TWO AS FAR
   AS A FIXED HEADER CAN GO. The size is the one place fidelity yields to
   structure: #jdHeader condenses on scroll and its own rules step the CTA down
   to 44px at 575.98 to keep the bar navigable on a phone. A 52px plate at 17px
   would push the condensed bar past the height the rest of the header is built
   around, so the type rises 14 -> 15.5px and the plate 46 -> 48px at desktop —
   near enough that the two read as the same object, without breaking the bar.

   ANCHORED ON #jdHeader (1-1-0), NOT ON .jd-cta (0-1-0). css/header.css is
   index.php:21 and css/banner.css is index.php:22, so a bare .jd-cta here
   would tie header.css:215 and win on SOURCE ORDER ALONE — and header.css
   restates the CTA in three separate media blocks (:313, :359, :366) that
   would each tie again and win inside their own bands. This page has already
   shipped that mistake twice: `.count .slash` losing to style.css:1905
   `.count span.slash`, and the banner arrows losing to responsive.css:97's
   `!important`. An id costs nothing and settles it at every width. */

#jdHeader .jd-cta{
  text-transform:none;               /* the body button is sentence case, and
                                        "CONTACT US" is the single loudest
                                        difference between the two */
  letter-spacing:.01em;              /* was .13em. The wide tracking is what
                                        made this read as a nav chip rather
                                        than as the page's button. */
  font-size:15.5px;                  /* was 14. The body button is 17; this is
                                        as far as the condensed bar allows. */
  min-height:48px;                   /* was 46, against the body's 52 */
  padding:12px 28px;                 /* was 13px 26px — the extra width carries
                                        the sentence-case label, which sets
                                        narrower than the tracked capitals it
                                        replaces */
  border:1px solid #7f6630;          /* the body button's brass edge, 4.844:1
                                        against the plate's lightest stop. The
                                        header version had none, which is why it read
                                        as printed ON the bar rather than as an
                                        object laid on it. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),
             0 1px 2px rgba(34,51,31,.10),
             2px 12px 22px -14px rgba(34,51,31,.5);
                                     /* the body button's three layers exactly.
                                        The header's own five included two
                                        inset rings that did the job the real
                                        border now does. */
}
#jdHeader .jd-cta i{
  font-size:14px;                    /* the body button sets 15 at 17px type;
                                        this holds the same ratio at 15.5 */
  margin-left:0;                     /* header.css:242 pulls the glyph back by
                                        the tracking, which was .13em and is
                                        now .01em — the correction is no longer
                                        needed and left it optically tight */
}

/* the body button's hover, verbatim: a BRIGHTER plate rather than an
   inversion, and the label rises from 6.240:1 to 12.090:1 rather than falling.
   Redeclared here rather than inherited because header.css:258 has its own
   hover and would otherwise tie. */
@media (hover:hover){
  #jdHeader .jd-cta:hover{
    color:#1d2c20;
    background:linear-gradient(180deg,#f3e9cb 0%,#e2cfa2 34%,#d5bb84 52%,#dcc491 66%,#c3a660 100%);
    transform:translateY(-2px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
               0 1px 2px rgba(34,51,31,.12),
               2px 18px 30px -16px rgba(34,51,31,.55);
  }
  #jdHeader .jd-cta:hover i{ color:inherit; transform:translateX(3px); }
}
#jdHeader .jd-cta:active{ transform:translateY(1px); }

/* the same focus idiom both buttons already use: the ring is held 3px OFF the
   plate, because a #2b3f2f ring laid directly on the gradient measures
   2.1-9.5:1 depending where down it falls, while on the bar behind it reads
   10.044:1. */
#jdHeader .jd-cta:focus{ outline:2px solid #2b3f2f; outline-offset:3px; }
#jdHeader .jd-cta:focus:not(:focus-visible){ outline:0; }
#jdHeader .jd-cta:focus-visible{ outline:2px solid #2b3f2f; outline-offset:3px; }

/* the three bands header.css already steps this button through. Each is
   restated at 1-1-0 so it cannot lose to header.css:313 / :359 / :366, which
   are 0-1-0 and would otherwise tie and win inside their own query. */
@media (max-width:1199.98px){
  #jdHeader .jd-cta{ font-size:15px; padding:12px 22px; }
}
@media (max-width:991.98px){
  #jdHeader .jd-cta{ font-size:14.5px; padding:11px 18px; min-height:46px; }
  #jdHeader .jd-cta i{ font-size:13px; }
}
@media (max-width:575.98px){
  #jdHeader .jd-cta{ font-size:14px; padding:10px 14px; min-height:44px; }
                                     /* 44 is the floor, not a preference */
  #jdHeader .jd-cta i{ font-size:12px; }
}

@media (prefers-reduced-motion:reduce){
  #jdHeader .jd-cta{ transition-duration:.01ms !important; }
  #jdHeader .jd-cta:hover,
  #jdHeader .jd-cta:active,
  #jdHeader .jd-cta:hover i{ transform:none !important; }
}
@media (prefers-contrast:more){
  #jdHeader .jd-cta{ border-color:#5a4820; background:#e8dcb6; color:#1d2c20; }
}
@media (forced-colors:active){
  #jdHeader .jd-cta{
    background:ButtonFace; color:ButtonText;
    border:1px solid ButtonText; box-shadow:none;
  }
  #jdHeader .jd-cta:hover{ background:Highlight; color:HighlightText; }
}
@media print{
  #jdHeader{ display:none !important; }   /* already hidden in print; the CTA
                                             goes with it */
}

/* ==========================================================================
   THE FLOATING CONTACT RAIL — call and WhatsApp
   ==========================================================================
   Asked for: a floating WhatsApp icon and a floating call button.

   WHY BOTTOM-RIGHT, AND THE ONE THING IT HAD TO MOVE
   Every control the banner already owns is bottom-LEFT — both slick arrows
   and the pause plate, at desktop (banner.css:161-162) and again under 768
   (:529-531) — so bottom-right is the only corner of this page that is free
   at every scroll position. The single object already there is #backto-top
   (style.css:1213: position:fixed; bottom:30px; right:5px; 40x40), and the
   rail would have landed on top of it: the rail occupies 18-142px up from
   the bottom edge and 18-74px in from the right, against back-to-top's
   30-70px x 5-45px. Overlap on both axes. It is lifted above the rail at the
   end of this block and nudged right:5px -> right:26px so all three controls
   share one centre line, 46px in from the right edge, instead of sitting
   21px out of step. That override is the ONLY existing rule this block
   touches.

   THE TWO PLATE COLOURS ARE MEASURED, NOT PICKED
   On an icon-only button the glyph IS the affordance, so it owes 3:1 against
   its own plate (WCAG 1.4.11), and the plate owes 3:1 against whatever is
   behind it. This rail floats over eight different section colours, from
   #f7f3e9 down to #1d2c20, so every pair was computed:

     WHATSAPP. Brand-exact #25D366 with a white glyph measures 1.98:1 — it
     fails, and not marginally. On a page read by people in their late
     fifties and their children that is the wrong place to spend brand
     exactness, so the plate is #1b9c4b: the same green a shade deeper,
     measuring 3.56:1. What people actually recognise is the phone-in-a-
     bubble glyph and the green-ness, and both survive. If brand-exact
     #25D366 is required, change --jd-fl-wa below — the failure is then a
     known, chosen one rather than an accident.

     CALL. The page's own CTA plate, the gradient .jd-cta already uses
     (header.css:224-225), with the same #1d2c20 ink: 10.80:1 at the
     gradient's lightest stop, 5.46:1 at its darkest. It is deliberately the
     same object as the "Contact Us" buttons — this is that action in its
     permanent, always-reachable form, not a new species of button.

   AND WHY THE RING IS TWO-TONE
   Neither plate separates from this page unaided — worst case 1.44:1 for the
   brass over the gallery's #d5d3cb, 1.58:1 for the green over the location
   band's #4f6f52. A dark ring alone rescues the light sections (6.11:1 over
   #f7f3e9) and disappears on the dark ones; a white ring alone does the
   exact opposite (14.65:1 over the footer, 1.11:1 over cream). So both are
   drawn: 2px of white hugging the plate, 2px of near-black outside it.
   Whichever one vanishes into the background, the other IS the outline, and
   the visible edge never measures below 5.13:1 anywhere on the page.
   ========================================================================== */

.jd-float{
  --jd-fl-size:56px;              /* 56, not 44. 44 is the floor for a target
                                     you already know is there; this one has
                                     to be spotted first, by readers who are
                                     the reason this page exists. */
  --jd-fl-gap:12px;
  --jd-fl-wa:#1b9c4b;             /* see the note above before changing */
  --jd-fl-ink:#1d2c20;

  position:fixed;
  right:18px;
  bottom:18px;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
                                  /* the second declaration is the live one
                                     where env() is understood, and is simply
                                     dropped where it is not — an iPhone's
                                     home indicator would otherwise sit under
                                     the lower button */
  z-index:1200;                   /* over the page, under the fixed header
                                     (header.css:9999) and far under fancybox
                                     (jquery.fancybox.min.css tops out at
                                     99999), so the lightbox still covers it */
  display:flex;
  flex-direction:column;          /* Call on top, WhatsApp below — the same
                                     order the header lists them in */
  align-items:flex-end;
  gap:var(--jd-fl-gap);
}

/* The house declares .jd-sr scoped per room on purpose (see the note at
   banner.css:6410) so no room can silently restyle another's furniture.
   This is that same idiom, byte-identical, scoped to this rail. */
.jd-float .jd-sr{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.jd-float a.jd-float-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:var(--jd-fl-size);
  height:var(--jd-fl-size);
  padding:0 15px;                 /* only ever visible once the label opens;
                                     at rest min-width wins and it is a circle */
  border-radius:calc(var(--jd-fl-size) / 2);
  border:0;
  text-decoration:none;           /* style.css:1 sets a{text-decoration:none}
                                     at 0-0-1 and bootstrap sets underline at
                                     the same weight; this selector is 0-2-1
                                     so neither can reach it */
  font-weight:700;
  font-size:15.5px;
  letter-spacing:.01em;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:
    0 0 0 2px #fff,                          /* the light half of the ring */
    0 0 0 4px rgba(29,44,32,.75),            /* the dark half */
    0 10px 22px -8px rgba(24,36,26,.55),
    0 3px 8px -2px rgba(24,36,26,.32);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.jd-float a.jd-float-call{
  background:linear-gradient(180deg,
    #eaddb2 0%, #d9c390 34%, #c9ad72 52%, #d2b87f 66%, #b99a56 100%);
  color:var(--jd-fl-ink);
}
.jd-float a.jd-float-wa{
  background:var(--jd-fl-wa);
  color:#fff;
}

.jd-float a.jd-float-btn i{
  font-size:23px;
  line-height:1;
  flex:0 0 auto;
}
.jd-float a.jd-float-wa i{
  font-size:27px;                 /* the brand mark carries more white space
                                     inside its bounding box than fa-phone-alt
                                     does, so at a matched font-size it reads
                                     visibly smaller than the phone */
}

/* THE LABEL. Closed by default, because two clean circles are what was asked
   for and what a floating contact control is expected to look like. It opens
   on hover for anyone with a pointer, and on keyboard focus for everyone —
   a keyboard user landing on an unlabelled circle has nothing to go on.
   max-width rather than width because width:auto cannot be transitioned. */
.jd-float .jd-float-lbl{
  max-width:0;
  opacity:0;
  overflow:hidden;
  margin-left:0;
  transition:max-width .28s ease, opacity .18s ease, margin-left .28s ease;
}

@media (hover:hover) and (pointer:fine){
  .jd-float a.jd-float-btn:hover .jd-float-lbl{
    max-width:180px; opacity:1; margin-left:11px;
  }
  .jd-float a.jd-float-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.06);
    box-shadow:
      0 0 0 2px #fff,
      0 0 0 4px rgba(29,44,32,.85),
      0 16px 28px -10px rgba(24,36,26,.6),
      0 4px 10px -2px rgba(24,36,26,.38);
  }
}

.jd-float a.jd-float-btn:active{ transform:translateY(1px); }

/* The house focus idiom: a bare :focus ring FIRST for browsers with no
   :focus-visible, then the reset, then the modern rule — three separate
   rules, because one unknown pseudo-class invalidates a whole selector list
   and the two-rule form leaves a hole. The ring is white on a dark backing
   so it is legible over the cream sections AND over the #1d2c20 footer;
   offset 5px puts it outside the 4px separator ring rather than on top. */
.jd-float a.jd-float-btn:focus{
  outline:3px solid #fff;
  outline-offset:5px;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(29,44,32,.9),
    0 0 0 9px rgba(29,44,32,.92),
    0 10px 22px -8px rgba(24,36,26,.55);
}
.jd-float a.jd-float-btn:focus:not(:focus-visible){
  outline:0;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(29,44,32,.75),
    0 10px 22px -8px rgba(24,36,26,.55),
    0 3px 8px -2px rgba(24,36,26,.32);
}
.jd-float a.jd-float-btn:focus-visible{
  outline:3px solid #fff;
  outline-offset:5px;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(29,44,32,.9),
    0 0 0 9px rgba(29,44,32,.92),
    0 10px 22px -8px rgba(24,36,26,.55);
}
.jd-float a.jd-float-btn:focus-visible .jd-float-lbl{
  max-width:180px; opacity:1; margin-left:11px;
}

/* BACK-TO-TOP GOES ABOVE THE RAIL. Unscoped #backto-top (1-0-0) in
   style.css:1213 loses to this only because banner.css is index.php:22 and
   style.css is index.php:15 — same specificity, later file. Nothing in
   style.css flags bottom or right !important (only the :hover background is
   flagged), so there is no repeat of the .count .slash or the slick-arrow
   fight here. Scoped to 576 up because index.php:136 gives the element
   d-none d-sm-block, so below that it is not on screen at all. */
@media (min-width:576px){
  #backto-top{
    bottom:154px;                 /* 18 rail + 124 rail height + 12 gap */
    right:26px;                   /* centres its 40px on the rail's 56px */
  }
}

/* Landscape on a phone leaves ~370px of height. Two 56px plates plus their
   rings and gap is 136px of that, which is too much of a short screen. */
@media (max-height:450px){
  .jd-float{ --jd-fl-size:48px; --jd-fl-gap:10px; }
  .jd-float a.jd-float-btn i{ font-size:20px; }
  .jd-float a.jd-float-wa i{ font-size:23px; }
}

@media (prefers-reduced-motion:reduce){
  .jd-float a.jd-float-btn,
  .jd-float .jd-float-lbl{ transition-duration:.01ms !important; }
  .jd-float a.jd-float-btn:hover,
  .jd-float a.jd-float-btn:active{ transform:none !important; }
}

@media (prefers-contrast:more){
  .jd-float a.jd-float-btn{
    box-shadow:0 0 0 2px #fff, 0 0 0 5px #1d2c20;
  }
  .jd-float a.jd-float-wa{ background:#0f7a39; }
  .jd-float a.jd-float-call{ background:#e8dcb6; color:#1d2c20; }
}

@media (forced-colors:active){
  .jd-float a.jd-float-btn{
    background:ButtonFace;
    color:ButtonText;
    border:1px solid ButtonText;
    box-shadow:none;
    forced-color-adjust:none;
  }
  .jd-float a.jd-float-btn i{ color:ButtonText; }
  .jd-float a.jd-float-btn:focus-visible{ outline:3px solid Highlight; }
}

@media print{
  .jd-float{ display:none !important; }
}