:root {
  --osure-blue: #0c5a8f;
  --osure-dark: #0a1b2a;
  --osure-bg: #f4f8fb;
  --osure-card: #ffffff;
}

.osure-home {
  font-family: "Manrope", "Segoe UI", sans-serif;
  background: radial-gradient(circle at top left, #e5f3ff 0%, var(--osure-bg) 42%, #f7fbff 100%);
  color: #102335;
}

.osure-hero {
  padding: 24px clamp(20px, 6vw, 80px) 48px;
  background: linear-gradient(135deg, #0b3a5c 0%, #0c5a8f 62%, #2e89bf 100%);
  color: #fff;
}

.osure-nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.osure-brand img { height: 54px; width: auto; display: block; }
.osure-nav { display: flex; flex-wrap: wrap; gap: 14px; }
.osure-nav a { color: #fff; text-decoration: none; font-weight: 600; opacity: 0.95; }
.osure-nav a:hover { opacity: 1; text-decoration: underline; }

.osure-hero-content { margin-top: 28px; max-width: 920px; }
.osure-kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 700; margin: 0 0 10px; }
.osure-hero h1 { margin: 0 0 12px; color: #fff; font-size: clamp(30px, 5vw, 56px); line-height: 1.05; }
.osure-hero p { margin: 0; font-size: clamp(16px, 2vw, 20px); max-width: 780px; }
.osure-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.btn { border: 0; border-radius: 12px; padding: 11px 16px; font-weight: 700; text-decoration: none; display: inline-block; cursor: pointer; }
.btn-primary { background: #fff; color: var(--osure-dark); }
.btn-secondary { background: #cde8fb; color: #0b3551; }

.osure-section { padding: 64px clamp(20px, 6vw, 80px); }
.osure-section h2 { margin: 0 0 20px; font-size: clamp(26px, 3.2vw, 40px); }

.osure-grid { display: grid; gap: 16px; }
.osure-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.osure-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.osure-card {
  background: var(--osure-card);
  border: 1px solid #d5e6f2;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(11, 70, 110, 0.08);
}
.osure-card h3 { margin: 0 0 8px; font-size: 22px; }
.osure-card p { margin: 0 0 12px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-row span { background: #e9f5ff; color: #0c4f7c; padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }

.osure-expertise { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: center; }
.osure-photo { min-height: 260px; border-radius: 20px; background: linear-gradient(160deg, #0f5686 0%, #052944 100%); color: #fff; display: grid; place-items: center; font-size: 20px; }

.osure-slider { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.osure-post-card { background: #fff; border: 1px solid #d5e6f2; border-radius: 16px; padding: 16px; min-height: 210px; }
.osure-post-card h3 { margin: 0 0 8px; font-size: 20px; }
.osure-post-card h3 a { color: #0d3551; text-decoration: none; }
.osure-post-card h3 a:hover { text-decoration: underline; }
.post-link { font-weight: 700; color: #0b5a8e; text-decoration: none; }

.osure-contact-card { background: #0d3551; color: #fff; border-radius: 20px; padding: 24px; }
.osure-contact-card .btn-primary { margin: 8px 0 6px; }
.small-note { opacity: 0.85; font-size: 14px; }

.osure-modal[hidden] { display: none; }
.osure-modal { position: fixed; inset: 0; z-index: 9999; }
.osure-modal-backdrop { position: absolute; inset: 0; background: rgba(5, 19, 30, 0.62); }
.osure-modal-content {
  position: relative; z-index: 2; width: min(900px, calc(100% - 32px));
  margin: 5vh auto; background: #fff; border-radius: 16px; padding: 24px;
  max-height: 90vh; overflow: auto;
}
.osure-modal-close { position: absolute; right: 12px; top: 6px; font-size: 28px; background: transparent; border: 0; cursor: pointer; }

@media (max-width: 1040px) {
  .osure-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .osure-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .osure-grid.three, .osure-grid.four { grid-template-columns: 1fr; }
  .osure-expertise { grid-template-columns: 1fr; }
  .osure-nav { font-size: 14px; }
  .osure-brand img { height: 46px; }
}

/* Spectra services fix:
 * UAGB generates per-button responsive rules with width:auto.
 * In #services we force full-width CTA buttons on tablet/mobile. */
@media only screen and (max-width: 976px) {
  #services .uagb-buttons__outer-wrap .uagb-buttons__wrap .wp-block-button,
  #services .uagb-buttons__outer-wrap .uagb-buttons__wrap > .wp-block-uagb-buttons-child.wp-block-button,
  .uagb-buttons__outer-wrap .uagb-buttons__wrap > .wp-block-uagb-buttons-child.wp-block-button {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  #services .uagb-buttons__outer-wrap .uagb-buttons-repeater.wp-block-button__link,
  .uagb-buttons__outer-wrap .uagb-buttons-repeater.wp-block-button__link {
    width: 100% !important;
  }
}

@media only screen and (max-width: 767px) {
  #services .uagb-buttons__outer-wrap .uagb-buttons__wrap .wp-block-button,
  #services .uagb-buttons__outer-wrap .uagb-buttons__wrap > .wp-block-uagb-buttons-child.wp-block-button,
  .uagb-buttons__outer-wrap .uagb-buttons__wrap > .wp-block-uagb-buttons-child.wp-block-button {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  #services .uagb-buttons__outer-wrap .uagb-buttons-repeater.wp-block-button__link,
  .uagb-buttons__outer-wrap .uagb-buttons-repeater.wp-block-button__link {
    width: 100% !important;
  }
}