/* "Life" layer on the black/white design: one gold accent, homeowner band, motion. Loaded after jdi-mono.css. */
:root{--jl-gold:#6b6b6b;--jl-gold-h:#555555;--jl-gold-lt:#aeaeae}

/* ---- Accent: the slightest gold. Black/white buttons turn gold on hover only; otherwise small details. ---- */
a.bg-jdi-accent:hover,.v3-btn:hover,.jdi-ba-cta:hover{background-color:var(--jl-gold-h)!important}
/* Promo bar stays black, including on hover */
.fixed.top-0>a.bg-jdi-accent:hover{background-color:#111!important}
/* Black panels and photo heroes keep their white buttons */
.v3t-btns .v3-btn,.v3-tp-cta .v3-btn,[class*="hero" i] .v3-btn,[class*="hero" i] a.bg-jdi-accent,.text-white a.bg-jdi-accent,.text-white .v3-btn,.v3pl-video .v3-btn,.v3-hero-links .v3-btn{background-color:#fff!important;color:#000!important}
.v3t-btns .v3-btn:hover,.v3-tp-cta .v3-btn:hover,[class*="hero" i] .v3-btn:hover,[class*="hero" i] a.bg-jdi-accent:hover,.text-white a.bg-jdi-accent:hover,.text-white .v3-btn:hover,.v3pl-video .v3-btn:hover,.v3-hero-links .v3-btn:hover{background-color:#e5e5e5!important}
header a[style*="#111111"]:hover{background-color:var(--jl-gold-h)!important}
.v3-eyebrow:before,.jdi-ba-eyebrow:before{background:var(--jl-gold)!important}
.v3-dark .v3-eyebrow:before,.v3-hero .v3-eyebrow:before,[class*="hero" i] .v3-eyebrow:before{background:var(--jl-gold-lt)!important}
.v3-stat-num small{color:var(--jl-gold)!important}
.v3-proc.is-in .v3-step-node{background:var(--jl-gold)!important;border-color:var(--jl-gold)!important;box-shadow:0 0 0 6px rgba(107,107,107,.16)!important}

/* ---- Homeowner band ---- */
.jl-life{background:#fff;padding:clamp(56px,7vw,92px) 0}
.jl-life-wrap{width:min(100% - 32px,1216px);margin:0 auto}
.jl-life-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 40px;margin-bottom:30px}
.jl-life-head .v3-h2{margin:0}
.jl-life-head .v3-lead{margin:10px 0 0;max-width:560px}
.jl-life-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(230px,17.5vw);gap:14px}
.jl-tile{position:relative;display:block;overflow:hidden;border-radius:2px 10px 10px 2px;background:#111;color:#fff!important;text-decoration:none!important;isolation:isolate}
.jl-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1);z-index:-2}
.jl-tile:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.76) 42%,rgba(0,0,0,.34) 62%,rgba(0,0,0,0) 80%)}
.jl-tile:hover img,.jl-tile:focus-visible img{transform:scale(1.06)}
.jl-tile:focus-visible{outline:3px solid var(--jl-gold);outline-offset:3px}
.jl-tile--big{grid-column:span 2;grid-row:span 2}
.jl-cap{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 16px}
.jl-q{display:block;font-size:17px;line-height:1.28;font-weight:600;letter-spacing:-.01em;margin:0 0 9px}
.jl-tile--big .jl-q{font-size:clamp(21px,2.1vw,29px);line-height:1.2;max-width:24em;margin-bottom:12px}
.jl-by{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;font-size:12.5px;line-height:1.35;color:#e5e5e5}
.jl-by b{font-weight:700;color:#fff}
.jl-play{display:inline-flex;align-items:center;gap:5px;color:var(--jl-gold-lt);font-weight:700}
.jl-play svg{width:10px;height:10px;transition:transform .25s}
.jl-tile:hover .jl-play svg{transform:translateX(3px)}
@media(max-width:899px){
  .jl-life-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(235px,46vw)}
  .jl-tile--big{grid-column:span 2;grid-row:span 1}
}
@media(max-width:519px){
  .jl-life-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;grid-auto-rows:340px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .jl-tile,.jl-tile--big{grid-column:auto;grid-row:auto;scroll-snap-align:start}
  .jl-tile--big .jl-q{font-size:21px}
}

.jl-modal{position:fixed;inset:0;z-index:20000;background:rgba(0,0,0,.86);display:flex;align-items:center;justify-content:center;padding:16px}
.jl-modal-in{position:relative;width:100%;max-width:1040px}
.jl-modal video{display:block;width:100%;max-height:80vh;background:#000;border-radius:2px 10px 10px 2px}
.jl-modal-x{position:absolute;top:-44px;right:0;background:none;border:0;color:#fff;font-weight:600;font-size:15px;cursor:pointer;padding:8px}

/* ---- Motion. Hidden states only exist once jdi-life.js has set html.jl-go, so nothing stays hidden without JS. ---- */
html.jl-go .jl-rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--jl-d,0s)}
html.jl-go .jl-rv.jl-in{opacity:1;transform:none}
html.jl-go .v3-eyebrow.jl-rv:before,html.jl-go .jdi-ba-eyebrow.jl-rv:before{clip-path:inset(0 100% 0 0);transition:clip-path .7s .2s ease-out}
html.jl-go .v3-eyebrow.jl-in:before,html.jl-go .jdi-ba-eyebrow.jl-in:before{clip-path:inset(0)}
.v3-stat-num{font-variant-numeric:tabular-nums}
.v3-stat{transition:background-color .25s}
.v3-stat:hover .v3-stat-num small{color:var(--jl-gold-h)!important}
.v3-btn,.jdi-ba-cta{transition:background-color .2s,transform .2s,box-shadow .2s}
.v3-btn:hover,.jdi-ba-cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.16)}
.v3-member-card img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.v3-member-card:hover img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){
  html.jl-go .jl-rv{opacity:1;transform:none;transition:none}
  html.jl-go .v3-eyebrow.jl-rv:before,html.jl-go .jdi-ba-eyebrow.jl-rv:before{clip-path:none;transition:none}
  .jl-tile img,.v3-member-card img,.v3-btn,.jdi-ba-cta,.jl-play svg{transition:none}
  .jl-tile:hover img,.v3-member-card:hover img{transform:none}
  .v3-btn:hover,.jdi-ba-cta:hover{transform:none}
}