/* ========================================================================== 
   ESPO 2.5.1.123.37 — Global Refinement Pass
   Header + section rhythm + typography + cards + mobile + footer.
   Targeted overlays only; approved structure and content remain unchanged.
   ========================================================================== */

:root {
  --espo-r-ink: #132332;
  --espo-r-slate: #5f7080;
  --espo-r-blue: #0b6da8;
  --espo-r-blue-2: #1688cd;
  --espo-r-blue-deep: #173f5d;
  --espo-r-gold: #c39a45;
  --espo-r-gold-soft: #ddc77f;
  --espo-r-paper: #fffdf9;
  --espo-r-ivory: #faf6ed;
  --espo-r-ice: #f3f8fb;
  --espo-r-mist: #f7f9fa;
  --espo-r-line: rgba(19,35,50,.09);
  --espo-r-shadow: 0 18px 42px rgba(18,49,73,.075);
  --espo-r-shadow-hover: 0 26px 58px rgba(18,49,73,.11);
}

/* ========================================================================== 
   1. HEADER — clearer hierarchy, less visual competition
   ========================================================================== */
.site-header.espo-floating-header .espo-header-container {
  border-color: rgba(19,35,50,.075) !important;
  background: rgba(255,253,249,.94) !important;
  box-shadow: 0 16px 38px rgba(18,49,73,.075), inset 0 1px 0 rgba(255,255,255,.92) !important;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.site-header.espo-floating-header .espo-primary-nav {
  gap: .16rem !important;
}

.site-header.espo-floating-header .espo-primary-nav > a,
.site-header.espo-floating-header .espo-services-menu > a {
  min-height: 2.4rem !important;
  padding: .55rem .72rem !important;
  border-radius: .75rem !important;
  font-size: .76rem !important;
  font-weight: 610 !important;
}

.site-header.espo-floating-header .espo-header-utilities {
  gap: .38rem !important;
}

.site-header.espo-floating-header .espo-header-discuss {
  min-height: 2.55rem !important;
  padding-inline: 1rem !important;
  border-radius: .82rem !important;
  font-size: .74rem !important;
}

/* OHEC is an event/supporting action, so it should not compete with the main CTA. */
.site-header.espo-floating-header .espo-header-ohec {
  min-height: 2.55rem !important;
  padding-inline: .92rem !important;
  color: #6b5521 !important;
  border-color: rgba(195,154,69,.26) !important;
  background: linear-gradient(180deg, rgba(255,252,242,.98), rgba(250,243,220,.90)) !important;
  box-shadow: 0 7px 18px rgba(195,154,69,.07), inset 0 1px 0 rgba(255,255,255,.86) !important;
  font-size: .72rem !important;
}
.site-header.espo-floating-header .espo-header-ohec:hover,
.site-header.espo-floating-header .espo-header-ohec:focus-visible {
  color: #4b3a16 !important;
  border-color: rgba(195,154,69,.44) !important;
  background: linear-gradient(180deg, #fff9e8, #f1dda1) !important;
  box-shadow: 0 11px 24px rgba(195,154,69,.14) !important;
}

.site-header.espo-floating-header .espo-search-toggle,
.site-header.espo-floating-header .espo-language-dropdown--header .espo-language-dropdown__toggle {
  height: 2.55rem !important;
  min-height: 2.55rem !important;
  border-radius: .82rem !important;
}
.site-header.espo-floating-header .espo-search-toggle {
  width: 2.55rem !important;
  color: var(--espo-r-blue) !important;
  background: rgba(243,248,251,.86) !important;
  border-color: rgba(11,109,168,.12) !important;
}

/* ========================================================================== 
   2. GLOBAL TYPOGRAPHY — more readable labels, quieter editorial hierarchy
   ========================================================================== */
:is(.espo-home-sections,.espo-about-page,.espo-services-page,.espo-projects-page,.espo-contact-page) .espo-section-label > span:last-child {
  color: #5f7080;
  font-size: .71rem !important;
  font-weight: 740 !important;
  letter-spacing: .13em !important;
}

:is(.espo-about-page,.espo-services-page,.espo-projects-page,.espo-contact-page) h2 {
  color: var(--espo-r-ink);
}

:is(.espo-about-page,.espo-services-page,.espo-projects-page,.espo-contact-page) p {
  text-wrap: pretty;
}

:is(.espo-about-page,.espo-services-page,.espo-projects-page,.espo-contact-page) :is(p,li) {
  --espo-body-reading: #5f7080;
}

/* Small metadata was becoming visually weak in several cards. */
:is(.espo-project-card,.espo-service-card,.espo-home-service-card,.espo-home-insight-card,.espo-about-credential,.espo-contact-route) :is(small,.espo-project-card__eyebrow,.espo-project-card__meta,.espo-home-service-meta) {
  font-size: max(.68rem, 11px);
}

/* ========================================================================== 
   3. SECTION RHYTHM — less sterile white, controlled compact spacing
   ========================================================================== */
.home .espo-cohesive-section,
.home .espo-sectors-section,
.home .espo-why-section,
.home .espo-home-trust,
.home .espo-home-insights,
.home .espo-ohec-section {
  padding-block: clamp(3.4rem, 5vw, 4.8rem) !important;
}

.home .espo-cohesive-about {
  background:
    radial-gradient(circle at 92% 14%, rgba(195,154,69,.045), transparent 23%),
    var(--espo-r-paper);
}
.home .espo-cohesive-services {
  background:
    radial-gradient(circle at 8% 12%, rgba(11,109,168,.055), transparent 24%),
    linear-gradient(180deg, #f3f8fb 0%, #f8faf9 100%) !important;
}
.home .espo-cohesive-work {
  background:
    radial-gradient(circle at 90% 12%, rgba(11,109,168,.035), transparent 25%),
    linear-gradient(180deg, #fffdf9, #faf8f2);
}
.home .espo-sectors-section {
  background:
    radial-gradient(circle at 12% 14%, rgba(195,154,69,.05), transparent 26%),
    linear-gradient(180deg, #faf6ed, #f6f9fa) !important;
}
.home .espo-why-section {
  background:
    radial-gradient(circle at 88% 16%, rgba(11,109,168,.05), transparent 26%),
    var(--espo-r-ice) !important;
}
.home .espo-home-trust {
  background: linear-gradient(180deg, #fffdf9, #faf6ed);
}
.home .espo-home-insights {
  background:
    radial-gradient(circle at 8% 14%, rgba(11,109,168,.04), transparent 25%),
    var(--espo-r-mist);
}

/* About: alternate tones instead of consecutive flat white sections. */
.espo-about-page .espo-about-hero { background-color: var(--espo-r-paper); }
.espo-about-page .espo-about-story { background: linear-gradient(180deg, #fffdf9, #faf8f2) !important; }
.espo-about-page .espo-about-approach { background: linear-gradient(180deg, #f3f8fb, #f8fafb) !important; }
.espo-about-page .espo-about-principles { background: linear-gradient(180deg, #faf6ed, #fffdf9) !important; }
.espo-about-page .espo-about-leadership { background: linear-gradient(180deg, #f7f9fa, #f2f7fa) !important; }
.espo-about-page .espo-about-credentials { background: linear-gradient(180deg, #fffaf1, #fbf8f2) !important; }
.espo-about-page .espo-about-profile { background: linear-gradient(180deg, #f4f8fb, #fffdf9) !important; }

.espo-about-page :is(.espo-about-story,.espo-about-approach,.espo-about-principles,.espo-about-leadership,.espo-about-credentials,.espo-about-profile) {
  padding-block: clamp(3.4rem, 5vw, 4.8rem) !important;
}

/* Services */
.espo-services-page .espo-services-hero { background-color: var(--espo-r-paper) !important; }
.espo-services-page .espo-services-catalogue { background: linear-gradient(180deg, #f3f8fb, #f8faf9) !important; }
.espo-services-page .espo-services-process { background: linear-gradient(180deg, #fffaf1, #fffdf9) !important; }
.espo-services-page .espo-services-approach { background: linear-gradient(180deg, #f2f7fa, #f7fafb) !important; }
.espo-services-page :is(.espo-services-catalogue,.espo-services-process,.espo-services-approach) {
  padding-block: clamp(3.4rem, 5vw, 4.8rem) !important;
}

/* Projects */
.espo-projects-page .espo-projects-hero { background-color: var(--espo-r-paper) !important; }
.espo-projects-page .espo-projects-filter-section { background: linear-gradient(180deg, #f3f8fb, #f7fafb) !important; }
.espo-projects-page .espo-projects-portfolio { background: linear-gradient(180deg, #fffdf9, #faf6ed) !important; }
.espo-projects-page :is(.espo-projects-filter-section,.espo-projects-portfolio) {
  padding-block: clamp(3.25rem, 4.7vw, 4.5rem) !important;
}

/* Contact composition: routes, info and hub should read as one sequence. */
.espo-contact-page .espo-contact-routes {
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem) !important;
}
.espo-contact-page .espo-contact-detailbar {
  margin-top: 1.15rem !important;
}
.espo-contact-page .espo-contact-form-section {
  padding-top: clamp(3.1rem, 4.5vw, 4rem) !important;
}

/* ========================================================================== 
   4. CARD SYSTEM — less generic white box, more architectural identity
   ========================================================================== */
:is(
  .espo-home-service-card,
  .espo-cohesive-work__card,
  .espo-home-client-card,
  .espo-home-insight-card,
  .espo-why-card,
  .espo-service-card,
  .espo-project-card,
  .espo-about-credential,
  .espo-about-value,
  .espo-sectors-method-card,
  .espo-contact-route
) {
  border-color: var(--espo-r-line) !important;
  box-shadow: 0 12px 30px rgba(18,49,73,.045);
}

:is(
  .espo-home-service-card,
  .espo-home-insight-card,
  .espo-why-card,
  .espo-service-card,
  .espo-project-card,
  .espo-about-credential,
  .espo-about-value,
  .espo-sectors-method-card
):hover {
  transform: translateY(-4px);
  border-color: rgba(11,109,168,.17) !important;
  box-shadow: var(--espo-r-shadow-hover) !important;
}

/* Home service cards: different from plain paper while keeping service colors. */
.home .espo-home-service-card {
  border-radius: 1.15rem;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,248,242,.92)) !important;
  overflow: hidden;
}
.home .espo-home-service-accent {
  height: 3px !important;
  opacity: .92;
}
.home .espo-home-service-number {
  color: rgba(11,109,168,.42) !important;
}

/* Project cards should read as portfolio objects, not generic panels. */
.espo-project-card,
.home .espo-cohesive-work__card {
  border-radius: 1.12rem !important;
  overflow: hidden;
  background: rgba(255,255,255,.88) !important;
}
.espo-project-card__media,
.home .espo-cohesive-work__card > a > div:first-child {
  overflow: hidden;
}
.espo-project-card__media img,
.home .espo-cohesive-work__card img {
  transition: transform .6s cubic-bezier(.22,1,.36,1), filter .35s ease;
}
.espo-project-card:hover .espo-project-card__media img,
.home .espo-cohesive-work__card:hover img {
  transform: scale(1.025);
  filter: saturate(1.025) contrast(1.015);
}
.espo-project-card__number {
  color: rgba(11,109,168,.5) !important;
}

/* Client grid: remove the spreadsheet feel. */
.home .espo-home-client-grid {
  gap: .7rem !important;
  padding: .7rem;
  border: 1px solid var(--espo-r-line) !important;
  border-radius: 1.15rem;
  background: rgba(255,255,255,.46) !important;
}
.home .espo-home-client-card {
  border: 1px solid rgba(19,35,50,.07);
  border-radius: .92rem;
  background: rgba(255,255,255,.82) !important;
}
.home .espo-home-client-card:hover {
  background: #fff !important;
  border-color: rgba(195,154,69,.18) !important;
}

/* About credentials */
.espo-about-credential {
  border-radius: 1.08rem !important;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(253,250,242,.92)) !important;
}
.espo-about-credential__accent {
  height: 3px !important;
  background: linear-gradient(90deg, var(--espo-r-blue), var(--espo-r-gold)) !important;
}

/* Services catalogue */
.espo-services-page .espo-service-card {
  border-radius: 1.12rem !important;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(249,248,243,.94)) !important;
}
.espo-services-page .espo-service-card__number {
  opacity: .62;
}

/* ========================================================================== 
   5. INTERACTION POLISH — purposeful, restrained
   ========================================================================== */
:is(.espo-service-card__action,.espo-project-card__link,.espo-home-service-link) {
  color: var(--espo-r-blue) !important;
  font-weight: 720 !important;
}
:is(.espo-service-card__action,.espo-project-card__link,.espo-home-service-link):hover,
:is(.espo-service-card__action,.espo-project-card__link,.espo-home-service-link):focus-visible {
  color: #0a5d8f !important;
}

/* Sector selector becomes a designed control instead of a simple list. */
.home .espo-sector-button {
  border-radius: .95rem;
  border: 1px solid transparent;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.home .espo-sector-button:hover,
.home .espo-sector-button:focus-visible,
.home .espo-sector-button.is-active {
  border-color: rgba(11,109,168,.12);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 24px rgba(18,49,73,.055);
  transform: translateX(3px);
}
html[dir="rtl"] .home .espo-sector-button:hover,
html[dir="rtl"] .home .espo-sector-button:focus-visible,
html[dir="rtl"] .home .espo-sector-button.is-active {
  transform: translateX(-3px);
}

/* ========================================================================== 
   6. FOOTER — lighter, clearer ending without losing authority
   ========================================================================== */
.espo-site-footer {
  background:
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    radial-gradient(circle at 12% 0%, rgba(42,137,193,.15), transparent 29%),
    radial-gradient(circle at 88% 18%, rgba(195,154,69,.085), transparent 25%),
    linear-gradient(145deg, #173a55 0%, #143149 53%, #10283d 100%) !important;
  background-size: 72px 72px, 72px 72px, auto, auto, auto !important;
}
.espo-footer-brandmark p,
.espo-footer-contactitem,
.espo-footer-navgroup a,
.espo-footer-language {
  color: rgba(255,255,255,.72) !important;
}
.espo-footer-phonechip {
  border-color: rgba(255,255,255,.11);
  background: rgba(255,255,255,.045);
}
.espo-footer-phonechip:hover,
.espo-footer-phonechip:focus-visible {
  border-color: rgba(221,199,127,.25);
  background: rgba(255,255,255,.075);
}
.espo-footer-bottom {
  border-top-color: rgba(255,255,255,.085) !important;
}

/* ========================================================================== 
   7. MOBILE — intentional layout, larger controls, less dead space
   ========================================================================== */
@media (max-width: 1023px) {
  .site-header.espo-floating-header .espo-header-container {
    border-radius: 1rem !important;
  }
  .site-header.espo-floating-header .espo-header-ohec {
    display: none !important;
  }
  .site-header.espo-floating-header .espo-header-discuss {
    min-height: 2.45rem !important;
  }
}

@media (max-width: 767px) {
  .home .espo-cohesive-section,
  .home .espo-sectors-section,
  .home .espo-why-section,
  .home .espo-home-trust,
  .home .espo-home-insights,
  .home .espo-ohec-section,
  .espo-about-page :is(.espo-about-story,.espo-about-approach,.espo-about-principles,.espo-about-leadership,.espo-about-credentials,.espo-about-profile),
  .espo-services-page :is(.espo-services-catalogue,.espo-services-process,.espo-services-approach),
  .espo-projects-page :is(.espo-projects-filter-section,.espo-projects-portfolio) {
    padding-block: 2.85rem !important;
  }

  .home .espo-home-client-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: .55rem !important;
    padding: .55rem;
  }
  .home .espo-home-client-card {
    min-height: 6.2rem !important;
    padding: 1rem !important;
  }

  .espo-project-card,
  .espo-service-card,
  .espo-home-service-card,
  .espo-home-insight-card,
  .espo-about-credential,
  .espo-contact-route {
    border-radius: 1rem !important;
  }

  .espo-contact-page .espo-contact-route {
    padding: 1.1rem !important;
  }

  .espo-contact-page .espo-contact-detailbar {
    border-radius: 1rem !important;
  }

  .espo-footer-shell {
    padding-top: 2.3rem !important;
  }
  .espo-footer-phonegrid {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .espo-project-card__media img,
  .home .espo-cohesive-work__card img,
  .home .espo-sector-button {
    transition: none !important;
  }
}