/* ==========================================================================
   polish.css — subtle visual refinements
   Additive only: loaded LAST on each page, it changes how things look (motion,
   shadows, radius, text alignment), never content or layout structure.
   To undo everything, remove the <link> to this file (and polish.js).
   ========================================================================== */

:root {
  --pg-ease: cubic-bezier(.22, .61, .36, 1);
  --pg-blue: #0623b1;
  --pg-navy: #042664;
  --pg-radius: 12px;
  --pg-shadow-sm: 0 2px 10px rgba(4, 38, 100, .07);
  --pg-shadow-md: 0 12px 30px rgba(4, 38, 100, .13);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(6, 35, 177, .16); }

/* Visible, tidy keyboard focus (mouse users are unaffected) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--pg-blue);
  outline-offset: 3px;
}

/* ---------- Text: left-aligned instead of justified ----------
   Only the rules that used `text-align: justify` are overridden, so centred
   text elsewhere is untouched. Justified text left uneven word gaps. */
.About-hero p,
.products-item,
.servicescontent-box p,
.IBS-section p,
.ETCD-subheader-left2 p,
.ETCD-subheader-left p,
.ETCD-project-content p,
.about-section p,
.policy-card p,
.job-modal ul,
.job-modal ul li {
  text-align: left;
}

.ETCD-subheader-left p,
.ETCD-subheader-left2 p,
.ETCD-project-content p,
.servicescontent-box p,
.about-section p {
  line-height: 1.75;
}

/* ---------- Links and buttons ---------- */
a, button {
  transition: color .25s var(--pg-ease), background-color .25s var(--pg-ease),
              border-color .25s var(--pg-ease), box-shadow .25s var(--pg-ease),
              opacity .25s var(--pg-ease);
}

.ETCD-button,
.read-more-button,
.social-buttons a {
  transition: color .3s var(--pg-ease), background-color .3s var(--pg-ease),
              border-color .3s var(--pg-ease), box-shadow .3s var(--pg-ease),
              transform .3s var(--pg-ease);
}
.ETCD-button:hover,
.read-more-button:hover,
.social-buttons a:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(6, 35, 177, .18);
}
.ETCD-button:active,
.read-more-button:active,
.social-buttons a:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ---------- Cards: soft shadow, gentle lift ---------- */
.ETCD-card,
.ETCD-project-card {
  border-radius: var(--pg-radius);
  box-shadow: var(--pg-shadow-sm);
  transition: transform .35s var(--pg-ease), box-shadow .35s var(--pg-ease);
}
.ETCD-card:hover,
.ETCD-project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pg-shadow-md);
}

.policy-card { border-radius: var(--pg-radius); }

/* Content images: consistent softly rounded corners */
.ETCD-image-right img,
.servicesimage-box img,
.page-section-image {
  border-radius: var(--pg-radius);
}

/* ---------- Navigation ---------- */
.sticky-wrapper.is-sticky nav.navbar.bootsnav {
  box-shadow: 0 2px 18px rgba(4, 38, 100, .09);
}
.dropdown-menu.dropdown-menu-card {
  border-radius: 0 0 var(--pg-radius) var(--pg-radius);
  box-shadow: 0 16px 34px rgba(4, 38, 100, .13);
}

/* ---------- Footer ---------- */
.footer-subheaders a,
.footer-social a {
  transition: color .25s var(--pg-ease), opacity .25s var(--pg-ease);
}

/* (The Book a Demo drawer was replaced by the popup in demo-modal.css) */

/* ---------- Scroll reveal (driven by polish.js) ----------
   Only applied to content that starts below the fold, and the classes are
   removed again once the fade-in finishes. Uses the individual `translate`
   property so it never fights the hover `transform` rules. */
.pg-js .pg-reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity .6s var(--pg-ease), translate .6s var(--pg-ease),
              transform .35s var(--pg-ease), box-shadow .35s var(--pg-ease);
  transition-delay: var(--pg-delay, 0s), var(--pg-delay, 0s), 0s, 0s;
}
.pg-js .pg-reveal.pg-in {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pg-js .pg-reveal { opacity: 1; translate: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Always show everything when printing or saving as PDF */
@media print {
  .pg-js .pg-reveal { opacity: 1 !important; translate: none !important; transition: none !important; }
}