/* ========================================================================== 
   ESPO 2.5.1.123.33 — Key pages premium polish
   Home / About / Services / Projects + CTA precision pass.
   Keeps the approved structure; adds controlled color, depth and interaction.
   ========================================================================== */

:root {
  --espo-polish-blue: #0b6da8;
  --espo-polish-blue-2: #1587c7;
  --espo-polish-blue-deep: #184765;
  --espo-polish-gold: #c19a49;
  --espo-polish-gold-soft: #ddc77f;
  --espo-polish-ivory: #f8f4ea;
  --espo-polish-ink: #122132;
  --espo-polish-line: rgba(18,33,50,.095);
}

/* --------------------------------------------------------------------------
   CTA precision pass — unmistakably ESPO blue, never black
   -------------------------------------------------------------------------- */
.home .espo-final-cta,
.espo-home-cta-canonical .espo-final-cta {
  background:
    radial-gradient(circle at 12% 14%, rgba(99,190,235,.18), transparent 32%),
    radial-gradient(circle at 88% 10%, rgba(221,199,127,.14), transparent 24%),
    linear-gradient(132deg, #174766 0%, #1b5f84 48%, #1c506e 100%) !important;
}

.home .espo-final-cta__panel,
.espo-home-cta-canonical .espo-final-cta__panel {
  border-color: rgba(255,255,255,.17) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045)) !important;
  box-shadow: 0 28px 66px rgba(12,43,63,.23), inset 0 1px 0 rgba(255,255,255,.11) !important;
  backdrop-filter: blur(10px);
}

.home .espo-final-cta__copy > p,
.espo-home-cta-canonical .espo-final-cta__copy > p {
  color: rgba(255,255,255,.78) !important;
}

.home .espo-final-cta__actions .espo-btn,
.espo-home-cta-canonical .espo-final-cta__actions .espo-btn {
  box-shadow: none;
}

.home .espo-final-cta__actions .espo-btn--primary,
.espo-home-cta-canonical .espo-final-cta__actions .espo-btn--primary {
  color: #17344a !important;
  border-color: rgba(255,255,255,.88) !important;
  background: linear-gradient(135deg, #fffdf8 0%, #f4ecdc 100%) !important;
  box-shadow: 0 10px 24px rgba(18,52,74,.13) !important;
}

.home .espo-final-cta__actions .espo-btn--accent,
.espo-home-cta-canonical .espo-final-cta__actions .espo-btn--accent {
  color: #fff7de !important;
  border-color: rgba(221,199,127,.55) !important;
  background: rgba(255,255,255,.06) !important;
}

.home .espo-final-cta__actions .espo-button-on-dark,
.espo-home-cta-canonical .espo-final-cta__actions .espo-button-on-dark {
  color: #fff !important;
  border-color: rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.07) !important;
}

.home .espo-final-cta__brand,
.espo-home-cta-canonical .espo-final-cta__brand {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.055), transparent 62%);
}

/* Make every formerly-dark utility CTA blue-led rather than charcoal. */
.espo-btn--dark {
  --espo-btn-bg: linear-gradient(135deg, #215b7b, #164461);
  --espo-btn-bg-hover: linear-gradient(135deg, #1885bf, #0b6da8);
  --espo-btn-border: rgba(24,78,108,.94);
  --espo-btn-border-hover: rgba(11,109,168,.98);
  --espo-btn-shadow: 0 8px 20px rgba(17,70,98,.15);
  --espo-btn-shadow-hover: 0 12px 27px rgba(11,109,168,.22);
}

.home .espo-ohec-actions .espo-btn--dark {
  color: #153348 !important;
  border-color: rgba(193,154,73,.62) !important;
  background: linear-gradient(135deg, #e5d08d, #c8a151) !important;
  box-shadow: 0 10px 22px rgba(193,154,73,.16) !important;
}
.home .espo-ohec-actions .espo-btn--dark:hover,
.home .espo-ohec-actions .espo-btn--dark:focus-visible {
  color: #fff !important;
  border-color: #0b6da8 !important;
  background: linear-gradient(135deg, #1587c7, #0b6da8) !important;
  box-shadow: 0 14px 30px rgba(11,109,168,.22) !important;
}

/* --------------------------------------------------------------------------
   HOME — more life through surfaces, not more clutter
   -------------------------------------------------------------------------- */
body:is(.home, .espo-home-context) .espo-home-final {
  background:
    radial-gradient(circle at 85% 11%, rgba(193,154,73,.025), transparent 24rem),
    #fcfbf8;
}

body:is(.home, .espo-home-context) .espo-premium-hero {
  background:
    radial-gradient(circle at 10% 14%, rgba(11,109,168,.07), transparent 30rem),
    radial-gradient(circle at 92% 22%, rgba(193,154,73,.07), transparent 24rem),
    linear-gradient(180deg, #fff 0%, #fbfaf6 100%);
}

body:is(.home, .espo-home-context) .espo-premium-hero__visual {
  border: 1px solid rgba(11,109,168,.10);
  box-shadow: 0 28px 72px rgba(18,33,50,.13), 0 0 0 6px rgba(255,255,255,.65);
}

body:is(.home, .espo-home-context) .espo-premium-hero__stats {
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(255,255,255,.89);
  backdrop-filter: blur(15px);
  box-shadow: 0 18px 40px rgba(18,33,50,.11);
}

body:is(.home, .espo-home-context) .espo-cohesive-about {
  position: relative;
}
body:is(.home, .espo-home-context) .espo-cohesive-about::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 8% 50%, rgba(11,109,168,.035), transparent 24rem);
}

body:is(.home, .espo-home-context) .espo-home-service-card {
  background: linear-gradient(180deg, #fff 0%, #fdfcf9 100%);
}
body:is(.home, .espo-home-context) .espo-home-service-card::after {
  content: "";
  position: absolute;
  inset: auto 1.15rem 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--service-accent), rgba(193,154,73,.55));
  transform: scaleX(.26);
  transform-origin: left center;
  opacity: .58;
  transition: transform .3s ease, opacity .3s ease;
}
body:is(.home, .espo-home-context) .espo-home-service-card:hover::after,
body:is(.home, .espo-home-context) .espo-home-service-card:focus-visible::after {
  transform: scaleX(1);
  opacity: .9;
}
html[dir="rtl"] body:is(.home, .espo-home-context) .espo-home-service-card::after {
  transform-origin: right center;
}

body:is(.home, .espo-home-context) .espo-cohesive-work {
  background:
    radial-gradient(circle at 92% 16%, rgba(193,154,73,.045), transparent 26rem),
    linear-gradient(180deg, #fff 0%, #faf9f5 100%);
}
body:is(.home, .espo-home-context) .espo-cohesive-work__card {
  padding-bottom: .2rem;
  border-radius: 1.05rem;
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
}
body:is(.home, .espo-home-context) .espo-cohesive-work__card:hover,
body:is(.home, .espo-home-context) .espo-cohesive-work__card:focus-visible {
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 38px rgba(18,33,50,.07);
}
body:is(.home, .espo-home-context) .espo-cohesive-work__card > div:first-child {
  border-radius: 1rem;
}

body:is(.home, .espo-home-context) .espo-sectors-section {
  background:
    radial-gradient(circle at 10% 10%, rgba(11,109,168,.045), transparent 28rem),
    radial-gradient(circle at 90% 85%, rgba(193,154,73,.045), transparent 26rem),
    linear-gradient(180deg, #faf9f5 0%, #fff 100%);
}
body:is(.home, .espo-home-context) .espo-sector-button {
  border-radius: .85rem;
  transition: background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
body:is(.home, .espo-home-context) .espo-sector-button:hover,
body:is(.home, .espo-home-context) .espo-sector-button:focus-visible,
body:is(.home, .espo-home-context) .espo-sector-button.is-active {
  transform: translateX(3px);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 26px rgba(18,33,50,.045);
}
html[dir="rtl"] body:is(.home, .espo-home-context) .espo-sector-button:hover,
html[dir="rtl"] body:is(.home, .espo-home-context) .espo-sector-button:focus-visible,
html[dir="rtl"] body:is(.home, .espo-home-context) .espo-sector-button.is-active {
  transform: translateX(-3px);
}

body:is(.home, .espo-home-context) .espo-why-card {
  background: linear-gradient(180deg, #fff 0%, #fdfcf9 100%);
}
body:is(.home, .espo-home-context) .espo-why-card__icon {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

body:is(.home, .espo-home-context) .espo-home-client-card {
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
body:is(.home, .espo-home-context) .espo-home-client-card:hover {
  transform: translateY(-2px);
  background: #fffefb !important;
  box-shadow: 0 10px 26px rgba(18,33,50,.055);
}

body:is(.home, .espo-home-context) .espo-home-insight-card {
  border-radius: 1rem;
  background: linear-gradient(180deg, #fff 0%, #fdfcf9 100%);
}

body:is(.home, .espo-home-context) .espo-ohec-section {
  background:
    radial-gradient(circle at 88% 10%, rgba(193,154,73,.065), transparent 28rem),
    linear-gradient(180deg, #fbfaf6 0%, #f7f5ef 100%);
}
body:is(.home, .espo-home-context) .espo-ohec-image-wrap {
  border-color: rgba(11,109,168,.12);
  box-shadow: 0 24px 58px rgba(18,33,50,.10);
}

/* --------------------------------------------------------------------------
   ABOUT — editorial warmth and hierarchy
   -------------------------------------------------------------------------- */
.espo-about-page .espo-about-hero {
  background:
    radial-gradient(circle at 11% 16%, rgba(8,118,183,.10), transparent 28rem),
    radial-gradient(circle at 91% 22%, rgba(193,154,73,.08), transparent 24rem),
    linear-gradient(180deg, #fff 0%, #f8f5ed 100%);
}

.espo-about-page .espo-about-hero__image-wrap {
  border: 1px solid rgba(8,118,183,.10);
  box-shadow: 0 30px 74px rgba(17,28,39,.14), 0 0 0 6px rgba(255,255,255,.62);
}

.espo-about-page .espo-about-hero-metric {
  border-color: rgba(17,28,39,.085);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 24px rgba(17,28,39,.04);
  backdrop-filter: blur(8px);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.espo-about-page .espo-about-hero-metric:hover {
  transform: translateY(-2px);
  border-color: rgba(8,118,183,.16);
  box-shadow: 0 16px 32px rgba(17,28,39,.07);
}

.espo-about-page .espo-about-story {
  background: linear-gradient(180deg, #fff 0%, #fdfcf9 100%);
}
.espo-about-page .espo-about-story__media {
  border-radius: 1.2rem;
  box-shadow: 0 22px 54px rgba(17,28,39,.09);
}

.espo-about-page .espo-about-timeline__item {
  transition: transform .22s ease, background .22s ease;
}
.espo-about-page .espo-about-timeline__item:hover {
  transform: translateX(3px);
}
html[dir="rtl"] .espo-about-page .espo-about-timeline__item:hover {
  transform: translateX(-3px);
}
.espo-about-page .espo-about-timeline__node {
  box-shadow: 0 0 0 5px rgba(8,118,183,.055);
}

.espo-about-page .espo-about-approach {
  background:
    radial-gradient(circle at 88% 20%, rgba(193,154,73,.045), transparent 25rem),
    linear-gradient(180deg, #fbfaf7 0%, #fff 100%);
}
.espo-about-page .espo-about-approach__step {
  border-radius: 1rem;
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.espo-about-page .espo-about-approach__step:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.78);
  box-shadow: 0 16px 34px rgba(17,28,39,.055);
}

.espo-about-page .espo-about-principles__panel {
  border-color: rgba(17,28,39,.085);
  box-shadow: 0 24px 58px rgba(17,28,39,.075);
}
.espo-about-page .espo-about-principle,
.espo-about-page .espo-about-value {
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.espo-about-page .espo-about-principle:hover,
.espo-about-page .espo-about-value:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.82);
}

.espo-about-page .espo-about-leadership__frame {
  box-shadow: 0 26px 64px rgba(17,28,39,.10);
}
.espo-about-page .espo-about-leadership__quote {
  border-inline-start-color: rgba(193,154,73,.72);
  background: linear-gradient(90deg, rgba(193,154,73,.065), transparent 72%);
}
html[dir="rtl"] .espo-about-page .espo-about-leadership__quote {
  background: linear-gradient(270deg, rgba(193,154,73,.065), transparent 72%);
}

.espo-about-page .espo-about-credential {
  background: linear-gradient(180deg, #fff 0%, #fdfcf9 100%);
}
.espo-about-page .espo-about-credential:hover {
  border-color: rgba(8,118,183,.16);
}

/* --------------------------------------------------------------------------
   SERVICES — clarity, image depth and process rhythm
   -------------------------------------------------------------------------- */
.espo-services-page .espo-services-hero {
  background:
    radial-gradient(circle at 11% 16%, rgba(0,114,188,.085), transparent 29rem),
    radial-gradient(circle at 90% 12%, rgba(193,154,73,.075), transparent 24rem),
    linear-gradient(180deg, #fffefb 0%, #f8f5ed 100%);
}

.espo-services-page .espo-services-hero__main-image,
.espo-services-page .espo-services-hero__blueprint {
  border-color: rgba(0,114,188,.11);
  box-shadow: 0 26px 66px rgba(17,28,39,.12);
}

.espo-services-page .espo-services-stats > div {
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 24px rgba(17,28,39,.04);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.espo-services-page .espo-services-stats > div:hover {
  transform: translateY(-2px);
  border-color: rgba(0,114,188,.15);
  box-shadow: 0 14px 30px rgba(17,28,39,.065);
}

.espo-services-page .espo-services-catalogue {
  background:
    radial-gradient(circle at 92% 16%, rgba(193,154,73,.035), transparent 25rem),
    #fff;
}
.espo-services-page .espo-service-card {
  background: linear-gradient(180deg, #fff 0%, #fdfcf9 100%);
}
.espo-services-page .espo-service-card__media::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: .65rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: .75rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.espo-services-page .espo-service-card__link:hover .espo-service-card__media::before,
.espo-services-page .espo-service-card__link:focus-visible .espo-service-card__media::before {
  opacity: 1;
}
.espo-services-page .espo-service-card__number {
  background: rgba(19,63,88,.72);
  border-color: rgba(255,255,255,.38);
}

.espo-services-page .espo-services-process {
  background:
    radial-gradient(circle at 92% 16%, rgba(193,154,73,.085), transparent 28%),
    radial-gradient(circle at 8% 78%, rgba(0,114,188,.065), transparent 24%),
    linear-gradient(180deg, #fbfaf6 0%, #fff 100%);
}
.espo-services-page .espo-services-process__step {
  border-radius: 1rem;
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.espo-services-page .espo-services-process__step:hover {
  transform: translateY(-2px);
  border-color: rgba(0,114,188,.13);
  background: rgba(255,255,255,.82);
  box-shadow: 0 14px 30px rgba(17,28,39,.05);
}
.espo-services-page .espo-services-process__visual {
  box-shadow: 0 22px 56px rgba(17,28,39,.09);
}

.espo-services-page .espo-services-approach__panel {
  border-color: rgba(17,28,39,.09);
  box-shadow: 0 24px 58px rgba(17,28,39,.075);
}
.espo-services-page .espo-services-principles > * {
  transition: transform .22s ease, background .22s ease;
}
.espo-services-page .espo-services-principles > *:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.68);
}

/* --------------------------------------------------------------------------
   PROJECTS — portfolio confidence without visual noise
   -------------------------------------------------------------------------- */
.espo-projects-page .espo-projects-hero {
  background:
    radial-gradient(circle at 10% 18%,rgba(0,114,188,.085),transparent 30%),
    radial-gradient(circle at 92% 10%,rgba(193,154,73,.09),transparent 28%),
    linear-gradient(180deg,#fffefb 0%,#f7f4ec 100%);
}
.espo-projects-page .espo-projects-hero__visual figure {
  border-color: rgba(0,114,188,.11);
  box-shadow: 0 30px 76px rgba(17,28,39,.14), 0 0 0 6px rgba(255,255,255,.58);
}
.espo-projects-page .espo-projects-hero__metrics > div {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.espo-projects-page .espo-projects-hero__metrics > div:hover {
  transform: translateY(-2px);
  border-color: rgba(0,114,188,.15);
  box-shadow: 0 14px 30px rgba(17,28,39,.065);
}

.espo-projects-page .espo-projects-filter-section {
  background:
    radial-gradient(circle at 94% 15%, rgba(193,154,73,.035), transparent 24rem),
    linear-gradient(180deg,#fff 0%,#fbfaf7 100%);
}
.espo-projects-page .espo-projects-filter-panel {
  border-color: rgba(0,114,188,.09);
  box-shadow: 0 18px 46px rgba(17,28,39,.055);
}
.espo-projects-page .espo-projects-filter-panel:focus-within {
  border-color: rgba(0,114,188,.15);
  box-shadow: 0 22px 52px rgba(17,28,39,.07);
}

.espo-projects-page .espo-project-card {
  background: linear-gradient(180deg, #fff 0%, #fdfcf9 100%);
}
.espo-projects-page .espo-project-card__number {
  background: rgba(20,64,88,.76);
}
.espo-projects-page .espo-project-card:hover {
  box-shadow: 0 22px 50px rgba(17,28,39,.09);
}
.espo-projects-page .espo-project-card__link {
  transition: color .22s ease;
}

.espo-projects-page .espo-projects-results-head {
  border-bottom-color: rgba(0,114,188,.10);
}
.espo-projects-page .espo-projects-active-filters > * {
  border-color: rgba(0,114,188,.13);
  background: rgba(0,114,188,.045);
}

/* --------------------------------------------------------------------------
   Common responsive restraint
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body:is(.home, .espo-home-context) .espo-premium-hero__visual,
  .espo-about-page .espo-about-hero__image-wrap,
  .espo-projects-page .espo-projects-hero__visual figure {
    box-shadow: 0 20px 52px rgba(17,28,39,.11);
  }
}

@media (max-width: 720px) {
  body:is(.home, .espo-home-context) .espo-sector-button:hover,
  body:is(.home, .espo-home-context) .espo-sector-button:focus-visible,
  body:is(.home, .espo-home-context) .espo-sector-button.is-active,
  html[dir="rtl"] body:is(.home, .espo-home-context) .espo-sector-button:hover,
  html[dir="rtl"] body:is(.home, .espo-home-context) .espo-sector-button:focus-visible,
  html[dir="rtl"] body:is(.home, .espo-home-context) .espo-sector-button.is-active,
  .espo-about-page .espo-about-timeline__item:hover,
  html[dir="rtl"] .espo-about-page .espo-about-timeline__item:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .espo-home-final *,
  .espo-about-page *,
  .espo-services-page *,
  .espo-projects-page * {
    transition-duration: .01ms !important;
  }
}
