/* About Us — theme layout, LyoVial brand teal, aligned to navbar .container */
.lv-about{
  --teal:#0e7c86;
  --teal-deep:#0a6570;
  --heading:#0e7c86;
  --card-title:#0e7c86;
  --text:#4A5A67;
  --muted:#6b7a86;
  --line:#e4ecee;
  --quote-bg:#f3f7f7;
  background:#fff;
  color:var(--text);
  font-family:'Inter',sans-serif;
}
.lv-about *,
.lv-about *::before,
.lv-about *::after{box-sizing:border-box}

body.lyovial-home-page .header.lyovial-nav:not(.is-transparent){
  background:#0e7c86 !important;
}
body.lyovial-home-page .header.lyovial-nav:not(.is-transparent):not(.is-sticky){
  position:sticky !important;
  top:0;
}

.lv-about-hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  padding:56px 0 92px;
  min-height:280px;
  display:flex;
  align-items:flex-end;
}
.lv-about-hero-media,
.lv-about-hero-overlay{
  position:absolute;inset:0;
}
.lv-about-hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:center;
}
.lv-about-hero-overlay{
  background:linear-gradient(180deg, rgba(14,124,134,.88) 0%, rgba(14,124,134,.82) 45%, rgba(14,124,134,.86) 100%);
}
.lv-about-hero .container{
  position:relative;z-index:1;
}
.lv-about-hero .page-crumbs,
.lv-about-crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,.82);
}
.lv-about-hero .page-crumbs a{
  color:#fff;
  text-decoration:none;
  opacity:.85;
}
.lv-about-hero .page-crumbs a:hover{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:3px;
}
.lv-about-eyebrow{
  color:var(--teal);
  font-size:11px;font-weight:700;letter-spacing:3px;
  text-transform:uppercase;margin:0 0 14px;
}
.lv-about-hero .lv-about-eyebrow{color:#c5e0e2}
.lv-about-hero h1{
  font-family:'Inter',sans-serif;
  font-size:38px;line-height:1.2;font-weight:800;
  margin:0 0 16px;color:#fff;max-width:18ch;
}
.lv-about-hero .lv-about-sub{
  margin:0;max-width:560px;
  font-size:16px;line-height:1.65;color:#fff;opacity:.92;
}

.lv-about-cards{
  margin-top:-46px;position:relative;z-index:2;
  background:#fff;border-radius:12px;
  box-shadow:0 18px 40px rgba(14,36,52,.14);
  display:grid;grid-template-columns:1fr 1fr;overflow:hidden;
}
.lv-about-card{text-align:center;padding:26px 24px}
.lv-about-card + .lv-about-card{border-left:1px solid var(--line)}
.lv-about-card h3{
  margin:0 0 6px;color:var(--card-title);
  font-size:20px;font-weight:800;font-family:'Inter',sans-serif;
}
.lv-about-card p{margin:0;font-size:13px;color:var(--muted)}

.lv-about-row{
  display:grid;grid-template-columns:1fr 1fr;gap:52px;
  align-items:center;padding:78px 0;
}
.lv-about-row h2{
  color:var(--heading);
  font-size:28px;line-height:1.25;font-weight:800;
  margin:0 0 16px;font-family:'Inter',sans-serif;
}
.lv-about-body{font-size:15px;line-height:1.85;margin:0;color:var(--text)}
.lv-about-media{
  border-radius:16px;overflow:hidden;
  box-shadow:0 14px 34px rgba(14,36,52,.16);
  background:#eef4f4;
}
.lv-about-media img{display:block;width:100%;height:100%;object-fit:cover}
.lv-about-row.origin .lv-about-media{aspect-ratio:4/3}
.lv-about-quote{
  margin-top:22px;background:var(--quote-bg);
  border-left:3px solid var(--teal);
  border-radius:0 8px 8px 0;
  padding:16px 20px;font-size:14px;line-height:1.7;color:#5f6d73;
}

.lv-about-row.expertise .lv-about-media{aspect-ratio:3/4}
.lv-about-row.expertise .lv-about-media img{object-position:62% center}
.lv-about-steps{margin-top:26px}
.lv-about-step{
  display:grid;grid-template-columns:34px 1fr;gap:8px;
  padding:18px 0;border-top:1px solid var(--line);
}
.lv-about-step:last-child{border-bottom:1px solid var(--line)}
.lv-about-step .num{color:var(--teal);font-size:12px;font-weight:700;padding-top:2px}
.lv-about-step h4{
  margin:0 0 5px;color:var(--card-title);
  font-size:15px;font-weight:700;font-family:'Inter',sans-serif;
}
.lv-about-step p{margin:0;font-size:13px;line-height:1.65;color:var(--muted)}

.lv-about-band-wrap{padding:10px 0 30px}
.lv-about-band{
  background:var(--teal);color:#e9f3f3;border-radius:12px;
  padding:34px 40px;display:flex;justify-content:space-between;
  align-items:center;gap:30px;flex-wrap:wrap;
}
.lv-about-band h3{
  margin:0 0 10px;color:#fff;font-size:20px;font-weight:800;
  font-family:'Inter',sans-serif;
}
.lv-about-band p{margin:0;font-size:14.5px;line-height:1.7;color:#d5ecee;max-width:640px}
.lv-about-tags{display:flex;gap:10px;flex-wrap:wrap}
.lv-about-tag{
  border:1px solid rgba(255,255,255,.5);border-radius:20px;
  padding:7px 16px;font-size:12.5px;font-weight:600;color:#eaf4f4;
}

.lv-about-work{
  padding:70px 0 88px;
  text-align:center;
}
.lv-about-work .lv-about-eyebrow{
  margin-left:auto;
  margin-right:auto;
}
.lv-about-work h2{
  color:var(--heading);font-size:30px;font-weight:800;
  margin:0 auto 16px;font-family:'Inter',sans-serif;max-width:22ch;
}
.lv-about-work .lv-about-body{
  max-width:600px;
  margin:0 auto 28px;
}
.lv-about-work .lv-about-btn{margin-left:auto;margin-right:auto}
.lv-about-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--teal);color:#fff !important;
  font-size:14px;font-weight:700;padding:15px 30px;border-radius:6px;
  text-decoration:none !important;
}
.lv-about-btn:hover{background:var(--teal-deep);color:#fff !important}

@media (max-width:820px){
  .lv-about-hero{padding:40px 0 80px}
  .lv-about-hero h1{font-size:28px;max-width:none}
  .lv-about-cards{grid-template-columns:1fr;margin-top:-36px}
  .lv-about-card + .lv-about-card{border-left:none;border-top:1px solid var(--line)}
  .lv-about-row{grid-template-columns:1fr;gap:28px;padding:54px 0}
  .lv-about-row.expertise .lv-about-media{order:-1}
  .lv-about-band{padding:28px 24px}
  .lv-about-work{padding:52px 0 72px}
  .lv-about-work h2{font-size:26px;max-width:none}
}