/* ============================================================
   Liquid Renovations — Employee Info Pages
   Shared stylesheet. All rules scoped under .lr-page to avoid
   conflicts with the WordPress/Elementor theme.
   ============================================================ */

.lr-page{
  --lr-navy:#1A2B54;
  --lr-navy2:#2E4A7D;
  --lr-gray:#787879;
  --lr-gold:#C9A24B;
  --lr-blue:#3E7CB1;
  --lr-cream:#F6F6EE;
  --lr-ink:#23262e;
  --lr-soft:#eef1f6;
  --lr-line:#e1e6ef;
  --lr-radius:16px;
  --lr-shadow:0 10px 30px rgba(26,43,84,.10);

  color:var(--lr-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  max-width:1080px;
  margin:0 auto;
}
.lr-page *{box-sizing:border-box;}

/* ---------- bilingual visibility ---------- */
html.lr-lang-es .lr-en{display:none !important;}
html:not(.lr-lang-es) .lr-es{display:none !important;}

/* ---------- language switcher ---------- */
.lr-langbar{
  display:flex; justify-content:flex-end; align-items:center;
  gap:0; margin:0 0 18px; padding:0;
}
.lr-langbar .lr-pill{
  display:inline-flex; border:1px solid var(--lr-line);
  border-radius:999px; overflow:hidden; background:#fff;
  box-shadow:0 2px 8px rgba(26,43,84,.06);
}
.lr-lang-btn{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font:600 14px/1 inherit; letter-spacing:.04em;
  padding:9px 18px; color:var(--lr-gray); transition:.18s;
}
.lr-lang-btn.is-active{background:var(--lr-navy); color:#fff;}
.lr-lang-btn:not(.is-active):hover{color:var(--lr-navy);}

/* ---------- hero ---------- */
.lr-hero{
  position:relative; border-radius:var(--lr-radius); overflow:hidden;
  background:linear-gradient(135deg,#16244a 0%,#1A2B54 45%,#2E4A7D 100%);
  padding:54px 40px 50px; text-align:center; color:#fff;
  box-shadow:var(--lr-shadow);
}
.lr-hero::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 80% -10%,rgba(62,124,177,.35),transparent 55%);
  pointer-events:none;
}
.lr-hero > *{position:relative; z-index:1;}
.lr-hero-logo{height:52px; width:auto; margin:0 auto 20px; display:block;}
.lr-hero h1{
  margin:0; font-size:clamp(28px,4.4vw,44px); font-weight:800;
  letter-spacing:.01em; line-height:1.12; color:#fff;
}
.lr-hero p{
  margin:14px auto 0; max-width:640px; font-size:18px;
  color:#cdd6e8; font-weight:400;
}
.lr-hero .lr-kicker{
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--lr-gold); margin-bottom:14px;
}

/* ---------- sections ---------- */
.lr-section{padding:40px 6px 8px;}
.lr-h2{
  font-size:26px; font-weight:800; color:var(--lr-navy);
  margin:0 0 6px; line-height:1.2; letter-spacing:.005em;
}
.lr-h2-accent{display:block; width:54px; height:4px; border-radius:2px;
  background:var(--lr-gold); margin:0 0 22px;}
.lr-lead{font-size:18px; color:#3a4254; margin:0 0 26px; max-width:760px;}
.lr-p{margin:0 0 14px;}
.lr-page strong{color:var(--lr-navy);}

/* ---------- card grid (hub + offerings) ---------- */
.lr-grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.lr-card{
  display:block; text-decoration:none; color:inherit; background:#fff;
  border:1px solid var(--lr-line); border-radius:var(--lr-radius);
  padding:26px 24px; box-shadow:0 4px 16px rgba(26,43,84,.05);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
a.lr-card:hover{transform:translateY(-4px); box-shadow:var(--lr-shadow); border-color:#c7d0e3;}
.lr-card-ico{
  width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background:var(--lr-soft); margin-bottom:16px; color:var(--lr-navy);
}
.lr-card-ico svg{width:26px; height:26px;}
.lr-card h3{margin:0 0 6px; font-size:19px; font-weight:700; color:var(--lr-navy);}
.lr-card p{margin:0; font-size:15px; color:var(--lr-gray); line-height:1.5;}
a.lr-card .lr-card-go{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-size:14px; font-weight:700; color:var(--lr-blue);
}

/* ---------- numbered steps ---------- */
.lr-steps{list-style:none; margin:0; padding:0; counter-reset:lr;}
.lr-steps > li{
  position:relative; padding:0 0 22px 64px; counter-increment:lr;
}
.lr-steps > li::before{
  content:counter(lr); position:absolute; left:0; top:0;
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--lr-navy); color:#fff; font-weight:800; font-size:17px;
}
.lr-steps > li:not(:last-child)::after{
  content:""; position:absolute; left:20px; top:46px; bottom:6px; width:2px;
  background:linear-gradient(var(--lr-line),transparent);
}
.lr-step-t{font-weight:700; color:var(--lr-navy); font-size:18px; display:block; margin-bottom:3px;}
.lr-step-d{color:#3a4254; font-size:16px;}

/* ---------- policy / list blocks ---------- */
.lr-block{
  background:#fff; border:1px solid var(--lr-line); border-left:5px solid var(--lr-navy);
  border-radius:12px; padding:22px 24px; margin:0 0 18px; box-shadow:0 3px 12px rgba(26,43,84,.04);
}
.lr-block h3{margin:0 0 8px; font-size:19px; font-weight:700; color:var(--lr-navy);
  display:flex; align-items:center; gap:10px;}
.lr-block h3 svg{width:22px; height:22px; color:var(--lr-gold); flex:0 0 auto;}
.lr-ul{margin:6px 0 0; padding-left:20px;}
.lr-ul li{margin:0 0 7px;}

/* ---------- core values ---------- */
.lr-values{display:grid; gap:18px; margin:0 0 8px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.lr-value{
  background:#fff; border:1px solid var(--lr-line); border-radius:14px; overflow:hidden;
  box-shadow:0 4px 16px rgba(26,43,84,.05); display:flex; flex-direction:column;
}
.lr-value-head{
  background:var(--lr-navy); color:#fff; padding:15px 18px;
  display:flex; align-items:center; gap:10px;
}
.lr-value-head svg{width:22px; height:22px; color:var(--lr-gold); flex:0 0 auto;}
.lr-value-head h3{margin:0; font-size:18px; font-weight:800; color:#fff; letter-spacing:.01em;}
.lr-value-body{padding:15px 18px 18px; display:flex; flex-direction:column; gap:10px;}
.lr-value-item{display:flex; align-items:flex-start; gap:9px; font-size:15.5px;
  color:#374151; line-height:1.4;}
.lr-value-item > svg{width:17px; height:17px; color:var(--lr-blue); flex:0 0 auto; margin-top:2px;}

/* ---------- tabs (procedures roles) ---------- */
.lr-tabs{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 24px;}
.lr-tab{
  appearance:none; cursor:pointer; border:1px solid var(--lr-line); background:#fff;
  border-radius:999px; padding:11px 20px; font:700 15px/1 inherit; color:var(--lr-navy);
  display:inline-flex; align-items:center; gap:8px; transition:.18s;
}
.lr-tab svg{width:18px; height:18px;}
.lr-tab:hover{border-color:#c7d0e3;}
.lr-tab.is-active{background:var(--lr-navy); color:#fff; border-color:var(--lr-navy);}
.lr-tab.is-active svg{color:var(--lr-gold);}
.lr-panel{display:none;}
.lr-panel.is-active{display:block; animation:lrfade .25s ease;}
@keyframes lrfade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.lr-panel-h{font-size:21px; font-weight:800; color:var(--lr-navy); margin:0 0 16px;
  padding-bottom:10px; border-bottom:2px solid var(--lr-soft);}

/* ---------- callout ---------- */
.lr-note{
  background:var(--lr-soft); border-radius:12px; padding:18px 22px; margin:22px 0 0;
  font-size:15px; color:#3a4254; border-left:5px solid var(--lr-gold);
}
.lr-note strong{color:var(--lr-navy);}

/* ============================================================
   LEGACY PROGRAM — warm cream / gold theme
   ============================================================ */
.lr-legacy{--lr-bg:#F6F6EE;}
.lr-legacy .lr-hero{
  background:linear-gradient(160deg,#fbfaf3 0%,#f1ece0 100%);
  color:var(--lr-navy); border:1px solid #ece5d4;
  box-shadow:0 12px 34px rgba(122,98,40,.10);
}
.lr-legacy .lr-hero::after{
  background:radial-gradient(120% 90% at 80% -10%,rgba(201,162,75,.18),transparent 55%);
}
.lr-legacy .lr-hero h1{color:var(--lr-navy);}
.lr-legacy .lr-hero p{color:#5a5340;}
.lr-legacy .lr-hero .lr-kicker{color:var(--lr-gold);}
.lr-legacy-logo{width:230px; max-width:68%; height:auto; margin:0 auto 8px; display:block;}
.lr-legacy .lr-card-ico{background:#f4eede; color:var(--lr-gold);}
.lr-legacy .lr-card h3{color:var(--lr-navy);}
.lr-legacy .lr-h2{color:var(--lr-navy);}
.lr-legacy .lr-h2-accent{background:var(--lr-gold);}
.lr-legacy .lr-promise{
  background:linear-gradient(135deg,#1A2B54,#2E4A7D); color:#fff;
  border-radius:var(--lr-radius); padding:34px 36px; margin:30px 0; text-align:center;
  box-shadow:var(--lr-shadow);
}
.lr-legacy .lr-promise h2{color:#fff; font-size:24px; margin:0 0 10px;}
.lr-legacy .lr-promise p{color:#d7deec; margin:0 auto; max-width:620px; font-size:17px;}
.lr-legacy .lr-block{border-left-color:var(--lr-gold);}
.lr-legacy .lr-block h3 svg{color:var(--lr-blue);}

/* ---------- footer mark ---------- */
.lr-foot{
  margin-top:42px; padding-top:22px; border-top:1px solid var(--lr-line);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.lr-page .lr-foot img, .lr-foot img{
  height:48px !important; width:auto !important;
  max-width:200px !important; max-height:48px !important; opacity:.92;
}
.lr-foot span{font-size:13px; color:var(--lr-gray);}

/* ---------- responsive ---------- */
@media(max-width:600px){
  .lr-page{font-size:16px;}
  .lr-hero{padding:40px 22px 38px;}
  .lr-section{padding:30px 2px 4px;}
  .lr-steps > li{padding-left:54px;}
  .lr-steps > li::before{width:36px; height:36px; font-size:15px;}
  .lr-steps > li:not(:last-child)::after{left:17px;}
}