/* Adapted from ovp_services_codex_package/css/services-section.css.
 * Scoped tokens and local font stacks avoid third-party font requests.
 */
.ovp-services {
  --ovp-border: rgba(221, 180, 82, 0.34);
  --ovp-gold: #d9ae50;
  --ovp-gold-soft: #f2d47b;
  --ovp-text: #f5f7fb;
  --ovp-muted: #b4bac5;
  --ovp-muted-2: #a5afbe;
  --ovp-radius-lg: 14px;
  --ovp-sans: "Segoe UI", Arial, sans-serif;
  background:
    linear-gradient(180deg, rgba(3, 10, 18, 0.36), rgba(3, 10, 18, 0.58)),
    url('../images/services-refined/personal-services-background.webp') center top / cover no-repeat,
    #060d17;
  color: var(--ovp-text);
  padding: 36px 0 22px;
  position: relative;
  isolation: isolate;
  scroll-margin-top: 12px;
  width: min(1375px, 100vw);
  margin-left: calc((100% - min(1375px, 100vw)) / 2);
}
/* Keep the dark background full-bleed with the widened card area. */
.ovp-services::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: inherit;
  z-index: -1;
  pointer-events: none;
}
.ovp-services__container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.ovp-services__eyebrow { display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--ovp-gold-soft); font: 600 16px/20px var(--ovp-sans); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 18px; }
.ovp-services__eyebrow::before, .ovp-services__eyebrow::after { content: ""; width: 32px; height: 1px; background: #b28d43; }
.ovp-services .ovp-services__title { margin: 0; color: var(--ovp-text); text-align: center; font-family: Georgia, "Times New Roman", serif; font-size: 46px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; text-wrap: initial; }
.ovp-services__lead { max-width: 1100px; margin: 12px auto 34px; text-align: center; font: 400 18px/28px var(--ovp-sans); color: var(--ovp-muted); }
.ovp-services__grid-top, .ovp-services__grid-bottom { display: grid; gap: 28px; margin-bottom: 28px; }
.ovp-services__grid-top { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); }
.ovp-services__grid-bottom { grid-template-columns: minmax(0, 0.98fr) repeat(2, minmax(0, 1fr)); }
.ovp-service-card {
  --ovp-copy-left: 42.5%;
  position: relative;
  background:
    radial-gradient(ellipse at 17% 43%, rgba(58, 74, 93, 0.24), transparent 46%),
    linear-gradient(135deg, #101e31, #091525 72%, #0b1422);
  border: 1px solid var(--ovp-border);
  border-radius: var(--ovp-radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  min-height: 276px;
  padding: 62px 28px 88px var(--ovp-copy-left);
  overflow: hidden;
  isolation: isolate;
}
.ovp-services__grid-top .ovp-service-card:nth-child(2) { --ovp-copy-left: 38%; }
.ovp-service-card--small { --ovp-copy-left: 42%; min-height: 254px; padding-top: 44px; padding-right: 22px; padding-bottom: 50px; }
.ovp-service-card--small:nth-child(n + 2) { --ovp-copy-left: 39%; }
.ovp-service-card__num { position: absolute; top: 20px; right: 32px; color: var(--ovp-gold); font: 400 30px/1 Georgia, serif; }
.ovp-services__grid-top .ovp-service-card__num { right: 42px; }
.ovp-service-card__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 252px; height: 252px; display: grid; place-items: center; }
.ovp-service-card--small .ovp-service-card__icon { width: 192px; height: 192px; left: 0; top: 45%; }
.ovp-service-card__icon img { width: 85%; height: 85%; object-fit: contain; display: block; }
.ovp-services .ovp-service-card__title { margin: 0 0 12px; color: var(--ovp-text); font: 600 20px/1.3 var(--ovp-sans); letter-spacing: 0; text-transform: uppercase; text-wrap: initial; }
.ovp-service-card__text { max-width: 345px; margin: 0; color: var(--ovp-muted-2); font: 400 16px/1.5 var(--ovp-sans); }
.ovp-service-card--small .ovp-service-card__text { font-size: 15px; line-height: 1.55; }
.ovp-service-card__link { position: absolute; left: var(--ovp-copy-left); bottom: 42px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; color: var(--ovp-gold); text-decoration: none; font: 400 18px/1.3 var(--ovp-sans); }
.ovp-service-card--small .ovp-service-card__link { bottom: 24px; }
.ovp-service-card__link:hover { color: #f0d08c; text-decoration: underline; text-underline-offset: 4px; }
.ovp-service-card__link:focus-visible { outline: 2px solid #e9c77b; outline-offset: 5px; }
.ovp-service-card__arc { position: absolute; left: 0; right: 0; bottom: 14px; height: 94px; pointer-events: none; opacity: 0.7; z-index: -1; }
.ovp-service-card--small .ovp-service-card__arc { bottom: 4px; }
.ovp-service-card__arc img { display: block; width: 100%; height: 100%; object-fit: fill; }
.ovp-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: linear-gradient(135deg, #101b29, #091321); border: 1px solid rgba(180, 173, 153, 0.25); border-radius: 14px; overflow: hidden; padding: 14px 16px; }
.ovp-benefit { display: flex; align-items: center; gap: 6px; min-height: 102px; padding: 0 14px; position: relative; }
.ovp-benefit:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 20px; bottom: 20px; width: 1px; background: rgba(221, 180, 82, 0.18); }
.ovp-benefit__icon { width: 106px; height: 106px; flex: none; }
.ovp-benefit__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ovp-benefit__num { display: block; color: var(--ovp-gold); font: 400 28px/1 Georgia, serif; margin-bottom: 8px; }
.ovp-services .ovp-benefit__text { margin: 0; color: var(--ovp-text); font: 400 16px/1.4 var(--ovp-sans); letter-spacing: 0; text-wrap: initial; }
/* The restored page shell caps the grid at 1295px, even on wide displays. */
@media (min-width: 1200px) {
  .ovp-service-card { --ovp-copy-left: 39%; padding-right: 24px; }
  .ovp-service-card__icon { width: 210px; height: 210px; left: 0; }
  .ovp-services .ovp-service-card--small { --ovp-copy-left: 37%; min-height: 280px; padding-top: 50px; padding-right: 18px; padding-bottom: 80px; }
  .ovp-service-card--small .ovp-service-card__icon { width: 160px; height: 160px; left: -6px; }
  .ovp-services .ovp-service-card__title { font-size: 18px; }
  .ovp-service-card__text { font-size: 15px; }
  .ovp-benefit { gap: 0; padding-inline: 6px; }
  .ovp-benefit__icon { width: 80px; height: 80px; }
  .ovp-services .ovp-benefit__text { font-size: 14px; }
}
@media (max-width: 1199px) {
  .ovp-services__grid-top, .ovp-services__grid-bottom { grid-template-columns: 1fr; }
  .ovp-services .ovp-service-card { --ovp-copy-left: 240px; min-height: 260px; padding-top: 46px; padding-bottom: 82px; }
  .ovp-service-card__icon, .ovp-service-card--small .ovp-service-card__icon { width: 220px; height: 220px; left: 0; top: 50%; }
  .ovp-service-card__link, .ovp-service-card--small .ovp-service-card__link { bottom: 30px; }
  .ovp-service-card--small .ovp-service-card__text { font-size: 16px; }
  .ovp-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ovp-benefit:nth-child(2)::after { display: none; }
}
@media (max-width: 767px) {
  .ovp-services { padding: 40px 0; }
  .ovp-services__eyebrow { font-size: 12px; gap: 12px; }
  .ovp-services__eyebrow::before, .ovp-services__eyebrow::after { width: 24px; }
  .ovp-services .ovp-services__title { font-size: clamp(32px, 7vw, 44px); line-height: 1.1; }
  .ovp-services__lead { margin: 16px auto 28px; font-size: 16px; line-height: 1.6; }
  .ovp-services__grid-top, .ovp-services__grid-bottom { gap: 18px; margin-bottom: 18px; }
  .ovp-services .ovp-service-card { min-height: auto; padding: 20px 22px 88px; }
  .ovp-service-card__icon, .ovp-service-card--small .ovp-service-card__icon { position: relative; left: auto; top: auto; transform: none; width: 180px; height: 180px; margin: 0 auto 6px; }
  .ovp-service-card__num { top: 20px; right: 22px; font-size: 26px; }
  .ovp-services .ovp-service-card__title { font-size: 19px; line-height: 1.35; }
  .ovp-service-card__text, .ovp-service-card--small .ovp-service-card__text { font-size: 15px; line-height: 1.6; }
  .ovp-service-card__link, .ovp-service-card--small .ovp-service-card__link { left: 22px; bottom: 26px; font-size: 17px; }
  .ovp-service-card__arc, .ovp-service-card--small .ovp-service-card__arc { bottom: 6px; height: 72px; opacity: 0.6; }
  .ovp-benefits { grid-template-columns: 1fr; padding: 6px 12px; }
  .ovp-benefit { min-height: 102px; padding: 4px 0; gap: 6px; }
  .ovp-benefit__icon { width: 86px; height: 86px; }
  .ovp-benefit:not(:last-child)::after { display: block; top: auto; bottom: 0; right: 8px; left: 8px; width: auto; height: 1px; }
}
