/* ==========================================================================
   KIN VITAL GROUP — Professional polish pass (loads LAST)
   Targeted, safe refinements for a more professional, editorial finish.
   ========================================================================== */

/* ---- 1. HOME HERO — make the title a real hero statement -------------- */
/* The hero title is ONLY the first <p> of the banner text block; the
   paragraphs that follow are untouched.                                    */
html.js-enhanced .banner .ed-text.custom-theme > p:first-child,
html.js-enhanced .banner .ed-text.custom-theme > p:first-child *{
  font-size:clamp(1.9rem,3.6vw,3rem)!important;
  line-height:1.16!important;
  letter-spacing:.02em!important;}
html.js-enhanced .banner .ed-text.custom-theme > p:first-child{
  max-width:20ch;margin-left:auto;margin-right:auto;margin-bottom:26px;}
html.js-enhanced .banner .ed-text.custom-theme > p:first-child span{
  color:#fff!important;text-shadow:0 2px 34px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.35);}
/* the supporting paragraphs: a touch larger + airier for a premium read */
html.js-enhanced .banner .ed-text.custom-theme > p:first-child ~ p,
html.js-enhanced .banner .ed-text.custom-theme > p:first-child ~ p *{
  line-height:1.85!important;}

/* ---- 2. Content images: consistent editorial framing ------------------ */
/* subtle, professional shadow on boxed feature images (not cards/logos)   */
html.js-enhanced .columns-container .ed-image img,
html.js-enhanced [class*="preset-text-image"] .ed-image img,
html.js-enhanced [class*="image-with-content"] .ed-image img{
  border-radius:4px;
  box-shadow:0 26px 60px -30px rgba(0,0,0,.5);}

/* ---- 3. Body copy: refined measure + colour for readability ----------- */
html.js-enhanced .ed-text.custom-theme p{color:#403b34;}
html.js-enhanced [class*="bg-wrapper"] .ed-text p,
html.js-enhanced [class*="bg-wrapper"] .color-background{color:rgba(255,255,255,.9)!important;}

/* ---- 4. Section titles: a hair more presence + breathing room --------- */
html.js-enhanced main > .ed-headline.custom-theme{padding-top:8px;padding-bottom:10px;}

/* ---- 5. Property grid cards: cleaner, more premium base --------------- */
html.js-enhanced .realEstate--box,
html.js-enhanced .real-estate-box{border:1px solid rgba(168,144,85,.14);}

/* ---- 6. Footer: quieter, more corporate ------------------------------- */
html.js-enhanced [class*="info-bar"]{letter-spacing:.02em;}

/* ---- 7. Selection + smoother focus ring ------------------------------ */
html.js-enhanced :focus-visible{outline:2px solid var(--kvg-gold-light);outline-offset:3px;}

/* ---- FIX: feature boxes (the builder JS sets a fixed height offline that
   is shorter than the text, so the white panel cut the last line, e.g.
   "elevated views."). Let each box fit its own content.                   */
html.js-enhanced .boxes-box{height:auto!important;min-height:0!important;overflow:visible!important;padding-bottom:26px!important;}
html.js-enhanced .boxes-box .inner{height:auto!important;}

/* ---- FIX: text-image-overlay sections — the image column overlapped and
   covered the text. Lift the text onto a solid card ABOVE the image, so it
   stays readable while keeping the layered look. Desktop only (mobile stacks). */
@media(min-width:900px){
  html.js-enhanced [class*="preset-text-image"] .kvg-tio-text{
    position:relative!important;z-index:6!important;
    background:#faf8f3!important;
    padding:44px 48px!important;
    box-shadow:0 28px 64px -32px rgba(0,0,0,.42)!important;
    border:1px solid rgba(168,144,85,.18)!important;border-radius:3px!important;}
  html.js-enhanced [class*="preset-text-image"] .kvg-tio-img{position:relative!important;z-index:1!important;}
}

/* ---- 8. FIX: parallax background holders that don't cover -------------
   The builder's parallax leaves these holders at background-size:auto with a
   collapsed height offline, so the image showed only "half". Force them to
   cover their whole section. Scoped to bg-wrapper (NOT the .banner hero).   */
html.js-enhanced [class*="bg-wrapper"]{position:relative;}
/* make the whole background stack fill the section (offline parallax collapses it) */
html.js-enhanced [class*="bg-wrapper"] > .background,
html.js-enhanced [class*="bg-wrapper"] .background,
html.js-enhanced [class*="bg-wrapper"] figure.ed-image.wv-bg,
html.js-enhanced [class*="bg-wrapper"] .background-image-holder{
  position:absolute!important;top:-1px!important;left:0!important;right:0!important;bottom:-1px!important;
  width:100%!important;height:calc(100% + 2px)!important;min-height:calc(100% + 2px)!important;z-index:0!important;}
html.js-enhanced [class*="bg-wrapper"] .background-image-holder{
  background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;transform:none!important;}
/* keep the text/content above the background */
html.js-enhanced [class*="bg-wrapper"] > .inner{position:relative;z-index:2;}

/* ---- 9. STATIC IMAGES (no parallax / no movement on scroll) -----------
   Per request: images must stay FIXED and well framed on every page so the
   "half image" / moving-on-scroll problem can never happen. Kills parallax
   and the Ken Burns zoom; forces clean, centred cover framing everywhere.  */
html.js-enhanced .background-image-holder,
html.js-enhanced figure.ed-image.wv-bg,
html.js-enhanced [class*="wv-bg"],
html.js-enhanced .banner .background-image-holder,
html.js-enhanced .kvg-lc-hero .background-image-holder{
  transform:none!important;animation:none!important;
  background-attachment:scroll!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  transition:none!important;}
/* content <img> stay put and well framed */
html.js-enhanced .ed-image img{object-fit:cover!important;object-position:center!important;}

/* reveals become a gentle FADE only — nothing shifts position on scroll */
html.js-enhanced [data-kvg-reveal],
html.js-enhanced [data-kvg-reveal="up"],
html.js-enhanced [data-kvg-reveal="zoom"],
html.js-enhanced [data-kvg-reveal="left"],
html.js-enhanced [data-kvg-reveal="right"]{transform:none!important;}
html.js-enhanced [data-kvg-reveal].is-visible{transform:none!important;}