/*==========================================================
  Editing Press — premium visual refresh
  Loaded after styles.css + theme/refined.css. Overrides layout,
  typography, spacing and component skins only — no plugin/JS
  behaviour is touched here.
==========================================================*/

:root {
  /* PKB-aligned palette: navy is the dominant ink/accent colour
     (headings, nav, links, tag pills, backgrounds needing contrast);
     coral is used sparingly for CTA arrows/hover flourishes only. */
  --ep-ink: #1c2856;
  --ep-ink-soft: #5a5d70;
  --ep-line: #e6e6e2;
  --ep-paper: #ffffff;
  --ep-paper-alt: #f7f7f5;
  --ep-teal: #1c2856;
  --ep-teal-dark: #10182e;
  --ep-coral: #f8a993;
  --ep-coral-dark: #f28464;
  /* Content typography (terms/privacy/academic-conduct/payments/resources):
     stands in for PKB's self-hosted "Tobias" (display) + "NeueHaasUnicaRegular"
     (body) pairing, which isn't licensed for reuse here. */
  --ep-font-display: "Newsreader", Georgia, serif;
  --ep-font-body: "Inter", "Open Sans", sans-serif;
}

/*--------------------------------------------------------
  Wide-screen container — the theme's Bootstrap .container caps at
  1053px past 1200px, which leaves PKB-unlike margins (400px+) on
  larger monitors. PKB's content sits much closer to the viewport
  edge, so widen the cap in steps on bigger screens (still a
  centered max-width box — safer than dropping the cap altogether,
  since Bootstrap's .row/.col gutters are tuned to a bounded width).
--------------------------------------------------------*/
@media (min-width: 1400px) {
  .container {
    width: 1240px;
  }
}
@media (min-width: 1600px) {
  .container {
    width: 1400px;
  }
}
@media (min-width: 1920px) {
  .container {
    width: 1600px;
  }
}

/*--------------------------------------------------------
  Base typography
--------------------------------------------------------*/
body {
  font-family: var(--ep-font-body);
  color: var(--ep-ink);
  -webkit-font-smoothing: antialiased;
}
/* Site-wide "brand/label" utility class (nav brand, footer, a few
   headings) — was Lato from styles.css; unify to the same body font
   used everywhere else. Headings that also carry this class explicitly
   re-declare Newsreader further down so they aren't caught by this. */
.font-second {
  font-family: var(--ep-font-body);
}
.section-text,
.services-quote p,
.process-item p {
  color: var(--ep-ink-soft);
  font-size: 17px;
  line-height: 1.8;
  font-weight: 300;
}
a {
  color: var(--ep-teal);
}
a:hover,
a:focus {
  color: var(--ep-teal-dark);
}
p a {
  border-bottom-color: var(--ep-teal);
}
p a:hover {
  border-bottom-color: var(--ep-teal-dark);
}

/* Section titles: bigger, lighter, more confident display type */
.section-title {
  padding-bottom: 56px;
}
.section-title-more {
  font-size: 11px;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  color: var(--ep-teal);
  font-weight: 600;
}
.section-title-heading {
  font-family: var(--ep-font-display);
  font-size: 34px;
  font-weight: 300;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ep-ink);
}
.section-title-heading span {
  font-weight: 700;
  color: var(--ep-teal);
}
@media (min-width: 768px) {
  .section-title-heading {
    font-size: 44px;
  }
}
@media (min-width: 1200px) {
  .section-title-heading {
    font-size: 52px;
  }
}

/* Generous whitespace, alternating section backgrounds instead of <hr> rules */
.section {
  border-top: none !important;
}
hr {
  display: none;
}
.about-section,
.process-section,
.probono-section {
  background: var(--ep-paper-alt);
}
.services-section,
.funding-section,
.resources-section,
.contact-section {
  background: var(--ep-paper);
}

/*--------------------------------------------------------
  Navbar
--------------------------------------------------------*/

/* ep-site-v12 */
nav.navbar,
.mainMenuWrapper {
  max-width: 100%;
}
.mainMenuWrapper{
    max-width: 100%;
    margin: auto;
    padding: 0 1.6vw;
}

.navbar {
  border-bottom: 1px solid var(--ep-coral);
  min-height: 66px;
  transition: box-shadow 0.5s var(--ep-ease);
}
/* PKB's navbar is a solid white bar from first paint — no dark
   transparent-over-hero state — so navbar-dark and the affixed/default
   states all resolve to the same look; only the scroll shadow changes. */
.navbar-dark,
.navbar.affix,
.navbar-default {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-bottom-color: var(--ep-coral);
}
.navbar.affix {
  box-shadow: 0 1px 0 var(--ep-coral);
}

.navbar-brand {
    padding-left: 0;
}

.navbar-brand p {
  letter-spacing: 0.28em;
  font-size: 12px;
  font-weight: 600;
}
.navbar-nav > li > a {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  transition: color 0.3s var(--ep-ease);
}

/* Brand mark + nav links are always dark-on-white now (see above) */
.navbar-brand,
.navbar-brand p {
  color: var(--ep-ink) !important;
}
/* .navbar-header floats left while #mobile-navbar-collapse is a plain
   block box that still spans the full row underneath it (float doesn't
   reserve space for trailing block siblings) — without an explicit
   stacking order the invisible collapse box sits on top and silently
   swallows clicks meant for the logo. */
.navbar-header {
  position: relative;
  z-index: 2;
}
.navbar-logo img {
  filter: none;
  height: 36px;
  width: auto;
}
.navbar-nav > li > a {
  color: var(--ep-ink) !important;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
  color: var(--ep-teal) !important;
}
.cl-effect-5 > li > a span[data-hover]:before {
  color: var(--ep-teal) !important;
}
.cl-effect-5 > li > a span[data-hover]:before {
  white-space: nowrap;
}

.navbar-toggle .icon-bar {
  background-color: var(--ep-ink) !important;
  transition: transform 0.3s var(--ep-ease), opacity 0.2s var(--ep-ease);
}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {
  transform: translateY(6px) rotate(45deg);
}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) {
  opacity: 0;
}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(4) {
  transform: translateY(-6px) rotate(-45deg);
}

.navbar.affix.ripple-group-parent .ink {
  background: rgba(20, 20, 26, 0.12) !important;
}
/* Mobile dropdown menu (<768px): the theme's panel has no opaque
   background by default, so page content underneath bled through it;
   the active/hover state was also a stark black bar (rgba(0,0,0,.8))
   inherited from the dark-navbar theme, mismatched with our palette. */
@media (max-width: 767px) {
  #mobile-navbar-collapse {
    background-color: var(--ep-paper);
    box-shadow: 0 16px 32px rgba(20, 20, 26, 0.15);
  }
  .navbar-dark .navbar-nav > li > a:hover,
  .navbar-dark .navbar-nav > li > a:focus,
  .navbar-dark .navbar-nav > .active > a,
  .navbar-dark .navbar-nav > .active > a:hover,
  .navbar-dark .navbar-nav > .active > a:focus {
    background-color: var(--ep-paper-alt) !important;
    color: var(--ep-teal) !important;
  }
}

/* Services nav dropdown: chevron + 3/2-column panel with a coral divider,
   modeled on PKB's "Our Solutions" nav pattern. Only the Services item
   gets this; every other nav link is untouched. */
.ep-services-nav-item {
  position: relative;
}
.ep-services-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.ep-nav-caret {
  display: inline-flex;
  color: var(--ep-coral);
  transition: transform 0.3s var(--ep-ease);
}
.ep-nav-caret svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}
.ep-services-nav-item.ep-services-open .ep-nav-caret {
  transform: rotate(180deg);
}
/*.ep-services-nav-item.ep-services-open > .ep-services-toggle {*/
/*  box-shadow: inset 0 -2px 0 0 var(--ep-coral);*/
/*}*/
#nav.ep-services-menu-open {
  overflow: visible;
}
.ep-services-menu {
  display: none;
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translateX(-50%);
  padding: 18px 28px 24px;
  width: max-content;
  background-color: var(--ep-ink);
  border-radius: 4px;
  box-shadow: 0 16px 32px rgba(20, 20, 26, 0.25);
  z-index: 2;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
}
.ep-services-nav-item.ep-services-open .ep-services-menu {
  display: flex;
}

.ep-services-nav-item.ep-services-open .ep-services-menu:before{
 content: '';
 position: absolute;
 width: 120px;
 height: 3px;
 top: 0;
 left: 0;
 right: 0;
 margin: auto;
 background: var(--ep-coral);
}

.ep-services-menu-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  white-space: nowrap;
}
.ep-services-menu-col a {
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.3s var(--ep-ease);
  font-weight: 500;
}
.ep-services-menu-col a:hover,
.ep-services-menu-col a:focus {
  color: var(--ep-coral);
}
.ep-services-menu-divider {
  width: 1px;
  align-self: stretch;
  background-color: rgba(255, 255, 255, 0.2);
}
@media (max-width: 767px) {
  .ep-services-toggle {
    width: 100%;
    justify-content: center;
  }
  .ep-services-menu {
    display: none;
    position: static;
    top: auto;
    left: auto;
    transform: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    margin: 6px 0 10px;
    padding: 14px 20px;
    gap: 14px;
    background-color: var(--ep-paper);
    box-shadow: none;
    border-radius: 8px;
  }
  .ep-services-nav-item.ep-services-open .ep-services-menu {
    display: flex;
  }
  .ep-services-menu-col {
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .ep-services-menu-col a {
    color: var(--ep-ink);
  }
  .ep-services-menu-col a:hover,
  .ep-services-menu-col a:focus {
    color: var(--ep-coral);
  }
  .ep-services-menu-divider {
    display: none;
  }
}

/*--------------------------------------------------------
  Hero (home-section)
--------------------------------------------------------*/
.home-section .hs-content-inner {
  margin: 0 auto;
}
/* Brand wordmark becomes a small uppercase kicker */
.home-section .hs-text-2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5em;
  margin-right: -0.5em;
  opacity: 0.85;
}
/* Tagline becomes the big, confident hero statement */
.home-section .hs-text-6 {
  font-size: 34px;
  font-weight: 300;
  letter-spacing: 0;
  margin-right: 0;
  text-transform: none;
  line-height: 1.35;
  margin-top: 18px;
}
@media (min-width: 768px) {
  .home-section .hs-text-6 {
    font-size: 48px;
  }
}
@media (min-width: 1200px) {
  .home-section .hs-text-6 {
    font-size: 58px;
  }
}
.home-section.overlay:before,
.home-section .overlay:before {
  background-color: rgba(10, 12, 14, 0.55) !important;
  opacity: 1 !important;
}

/*--------------------------------------------------------
  Buttons
--------------------------------------------------------*/
.btn {
  border-radius: 2px;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 600;
  padding: 14px 30px;
}
.btn-colored,
.btn-dark,
.btn-default {
  background: var(--ep-ink);
  border: 1px solid var(--ep-ink);
  color: #ffffff !important;
}
.btn-colored:hover,
.btn-dark:hover,
.btn-default:hover {
  background: var(--ep-coral);
  border-color: var(--ep-coral);
  color: var(--ep-ink) !important;
}

/*--------------------------------------------------------
  About section — eyebrow/heading/features + stat-card-beside-
  illustration + expertise stat row + confidentiality banner
--------------------------------------------------------*/
.ep-about-section {
  /* top padding stays taller than the fixed navbar's height so the
     eyebrow doesn't clip when the nav's "About" link jumps here */
  padding-top: 96px;
  padding-bottom: 56px;
}
.ep-about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 48px;
}
@media (max-width: 991px) {
  .ep-about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 56px;
  }
}

/* Copy column */
.ep-about-eyebrow {
  display: inline-block;
  font-family: var(--ep-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ep-teal);
  margin-bottom: 14px;
}
.ep-about-heading {
  font-family: var(--ep-font-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ep-ink);
  margin: 0 0 16px;
}
.ep-about-heading em {
  font-style: italic;
  font-weight: 400;
}
@media (min-width: 768px) {
  .ep-about-heading {
    font-size: 42px;
  }
}
@media (min-width: 1200px) {
  .ep-about-heading {
    font-size: 48px;
  }
}
.ep-about-underline {
  display: block;
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: var(--ep-coral);
  margin-bottom: 18px;
}
.ep-about-lead {
  font-family: var(--ep-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ep-ink-soft);
  max-width: 480px;
  margin: 0 0 26px;
}
.ep-about-features {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  margin-bottom: 0;
}
@media (max-width: 560px) {
  .ep-about-features {
    grid-template-columns: 1fr;
  }
}
.ep-about-feature {
  display: flex;
  flex-direction: column;
}
.ep-about-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ep-paper-alt);
  color: var(--ep-teal);
  margin-bottom: 10px;
  transition:
    transform 0.3s var(--ep-ease),
    background-color 0.3s var(--ep-ease),
    color 0.3s var(--ep-ease);
}
.ep-about-feature-icon svg {
  width: 20px;
  height: 20px;
}
.ep-about-feature:hover .ep-about-feature-icon {
  background: var(--ep-coral);
  color: var(--ep-ink);
  transform: translateY(-4px);
}
.ep-about-feature h3 {
  font-family: var(--ep-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
  color: var(--ep-ink);
  margin: 0 0 8px;
  min-height: calc(1.35em * 2);
}
.ep-about-feature p {
  font-family: var(--ep-font-body);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ep-ink-soft);
  margin: 0;
}
/* Visual column: stat card, centered in the column now that the
   illustrated "desk" panel that used to sit beside it is gone */
.ep-about-visual {
  display: flex;
  gap: 22px;
  align-items: stretch;
  justify-content: center;
}
@media (max-width: 767px) {
  .ep-about-visual {
    flex-direction: column;
    align-items: center;
  }
}
.ep-about-stat-card {
  flex: 0 0 auto;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ep-paper);
  border: 1px solid var(--ep-line);
  border-radius: 18px;
  padding: 30px 28px;
  box-shadow: 0 24px 48px rgba(20, 20, 26, 0.08);
}
.ep-about-stat-icon {
  display: inline-flex;
  color: var(--ep-teal);
  margin-bottom: 10px;
}
.ep-about-stat-icon svg {
  width: 28px;
  height: 28px;
}
.ep-about-stat-number {
  font-family: var(--ep-font-display);
  font-size: 40px;
  font-weight: 600;
  color: var(--ep-teal);
  line-height: 1;
  margin: 0;
}
.ep-about-stat-label {
  font-family: var(--ep-font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ep-ink);
  margin: 8px 0 12px;
  line-height: 1.5;
}
.ep-about-stat-divider {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--ep-line);
  margin-bottom: 12px;
}
.ep-about-stat-caption {
  font-family: var(--ep-font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ep-ink-soft);
  margin: 0;
}
.ep-about-photo {
  flex: 1 1 auto;
  position: relative;
  min-height: 220px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(20, 20, 26, 0.1);
}
.ep-about-photo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Expertise stat row */
.ep-expertise {
  margin-bottom: 40px;
}
.ep-expertise-eyebrow {
  display: block;
  text-align: center;
  font-family: var(--ep-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ep-teal);
  margin-bottom: 18px;
}
.ep-expertise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 991px) {
  .ep-expertise-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .ep-expertise-grid {
    grid-template-columns: 1fr;
  }
}
.ep-expertise-card {
  padding: 16px 18px;
  border: 1px solid var(--ep-line);
  border-radius: 14px;
  background: var(--ep-paper);
  transition:
    transform 0.35s var(--ep-ease),
    box-shadow 0.35s var(--ep-ease),
    border-color 0.35s var(--ep-ease);
}
.ep-expertise-card:hover,
.ep-expertise-card:active {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(20, 20, 26, 0.08);
  border-color: var(--ep-coral);
}
.ep-expertise-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ep-paper-alt);
  color: var(--ep-teal);
  margin-bottom: 10px;
}
.ep-expertise-icon svg {
  width: 18px;
  height: 18px;
}
.ep-expertise-percent {
  font-family: var(--ep-font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ep-ink);
  margin: 0;
}
.ep-expertise-rule {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ep-coral);
  margin: 8px 0 10px;
}
.ep-expertise-label {
  font-family: var(--ep-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ep-ink);
  line-height: 1.35;
  margin: 0;
}

/* Confidentiality banner */
.ep-confidential {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  background: var(--ep-paper);
  border: 1px solid var(--ep-line);
  border-radius: 18px;
  padding: 20px 26px;
  box-shadow: 0 20px 40px rgba(20, 20, 26, 0.05);
}
.ep-confidential-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ep-paper-alt);
  color: var(--ep-teal);
}
.ep-confidential-icon svg {
  width: 22px;
  height: 22px;
}
.ep-confidential-copy {
  flex: 1 1 320px;
}
.ep-confidential-copy h3 {
  font-family: var(--ep-font-body);
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  color: var(--ep-ink);
  margin: 0 0 5px;
}
.ep-confidential-copy p {
  font-family: var(--ep-font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ep-ink-soft);
  margin: 0;
  max-width: 620px;
}
.ep-confidential-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-left: auto;
}
.ep-confidential-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ep-font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ep-ink);
  white-space: nowrap;
  padding: 0 24px;
}
.ep-confidential-badge:first-child {
  padding-left: 0;
}
.ep-confidential-badge:last-child {
  padding-right: 0;
}
.ep-confidential-badge:not(:first-child) {
  border-left: 1px solid var(--ep-line);
}
.ep-confidential-badge svg {
  width: 20px;
  height: 20px;
  color: var(--ep-teal);
  flex: none;
}
@media (max-width: 767px) {
  .ep-confidential {
    padding: 30px 26px;
  }
  .ep-confidential-badges {
    margin-left: 0;
    gap: 14px 0;
  }
  .ep-confidential-badge {
    padding: 0 18px 0 0;
    border-left: none !important;
  }
}

/*--------------------------------------------------------
  Editorial Services — eyebrow/heading/illustration header +
  3-up service cards + 2-up wide cards + trust-badge strip
--------------------------------------------------------*/
.ep-svc-section {
  /* top padding stays taller than the fixed navbar's height so the
     eyebrow doesn't clip when the nav's "Services" link jumps here */
  padding-top: 96px;
  padding-bottom: 56px;
}
.ep-svc-header {
  max-width: 700px;
  margin: 0 auto 36px;
  text-align: center;
}
.ep-svc-eyebrow {
  justify-content: center;
}
.ep-svc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ep-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ep-teal);
  margin-bottom: 14px;
}
.ep-svc-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ep-coral);
  flex: none;
}
.ep-svc-heading {
  font-family: var(--ep-font-display);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 16px;
  color: var(--ep-ink);
}
.ep-svc-heading span {
  display: block;
  color: var(--ep-teal);
}
@media (min-width: 768px) {
  .ep-svc-heading {
    font-size: 52px;
  }
}
@media (min-width: 1200px) {
  .ep-svc-heading {
    font-size: 58px;
  }
}
.ep-svc-underline {
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--ep-coral);
  margin: 0 auto 18px;
}
.ep-svc-lead {
  font-family: var(--ep-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ep-ink-soft);
  max-width: 480px;
  margin: 0 auto;
}

/* Service cards */
.ep-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.ep-svc-grid-wide {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 18px;
}
 .ep-svc-grid-row2 {
  margin-top: 18px;
}
.ep-svc-grid-center {
  justify-content: center;
}
@media (min-width: 992px) {
  .ep-svc-grid-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .ep-svc-grid-center .ep-svc-card {
    flex: 0 1 calc((100% - 2 * 18px) / 3);
  }
}
@media (max-width: 991px) {
  .ep-svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .ep-svc-grid,
  .ep-svc-grid-wide {
    grid-template-columns: 1fr;
  }
}
.ep-svc-card {
  position: relative;
  overflow: hidden;
  background-color: var(--ep-paper);
  background-image: linear-gradient(
    120deg,
    transparent 35%,
    rgba(248, 169, 147, 0.22) 50%,
    transparent 65%
  );
  background-repeat: no-repeat;
  background-size: 220% 220%;
  background-position: -80% -80%;
  border: 1px solid var(--ep-line);
  border-left: 3px solid var(--ep-coral);
  border-radius: 12px;
  padding: 22px 22px 20px;
  transition:
    transform 0.4s var(--ep-ease),
    box-shadow 0.4s var(--ep-ease),
    border-color 0.4s var(--ep-ease),
    background-position 0.8s var(--ep-ease);
}
.ep-svc-card:hover,
.ep-svc-card:active {
  transform: translateY(-7px);
  box-shadow: 0 26px 50px rgba(15, 110, 104, 0.18);
  border-color: rgba(15, 110, 104, 0.35);
  background-position: 130% 130%;
}
.ep-svc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--ep-paper-alt);
  color: var(--ep-teal);
  margin-bottom: 16px;
  transition:
    background-color 0.35s var(--ep-ease),
    color 0.35s var(--ep-ease),
    transform 0.4s var(--ep-ease);
}
.ep-svc-icon svg {
  width: 22px;
  height: 22px;
}
.ep-svc-card:hover .ep-svc-icon,
.ep-svc-card:active .ep-svc-icon {
  background: var(--ep-coral);
  color: var(--ep-ink);
  transform: scale(1.1) rotate(-6deg);
}
.ep-svc-card h3 {
  font-family: var(--ep-font-display);
  font-size: 19px;
  font-weight: 600;
  text-transform: none;
  color: var(--ep-ink);
  margin: 0 0 8px;
  transition: color 0.35s var(--ep-ease);
}
.ep-svc-card:hover h3,
.ep-svc-card:active h3 {
  color: var(--ep-teal);
}
.ep-svc-card p {
  font-family: var(--ep-font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ep-ink-soft);
  margin: 0 0 16px;
}
.ep-svc-more {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
}
.ep-svc-more span:first-child {
  font-family: var(--ep-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ep-teal);
}
.ep-svc-more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--ep-line);
  color: var(--ep-teal);
  transition:
    background-color 0.3s var(--ep-ease),
    color 0.3s var(--ep-ease),
    transform 0.3s var(--ep-ease),
    border-color 0.3s var(--ep-ease),
    box-shadow 0.3s var(--ep-ease);
}
.ep-svc-more-icon svg {
  width: 15px;
  height: 15px;
  transition: transform 0.3s var(--ep-ease);
}
.ep-svc-more:hover .ep-svc-more-icon,
.ep-svc-more:active .ep-svc-more-icon {
  background: var(--ep-coral);
  border-color: var(--ep-coral);
  color: var(--ep-ink);
  transform: translateX(4px);
  box-shadow: 0 8px 18px rgba(15, 110, 104, 0.35);
}
.ep-svc-more:hover .ep-svc-more-icon svg,
.ep-svc-more:active .ep-svc-more-icon svg {
  transform: translateX(1px);
}

/* Wide/horizontal cards (Corporate Editing, Accessibility Service) */
.ep-svc-card-h {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.ep-svc-card-h .ep-svc-icon {
  margin-bottom: 0;
  flex: none;
}
.ep-svc-card-h .ep-svc-card-body {
  flex: 1;
  min-width: 0;
}

/* Trust badge strip */
.ep-svc-badges {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  background: var(--ep-paper-alt);
  border-radius: 16px;
  padding: 22px 26px;
}
@media (max-width: 767px) {
  .ep-svc-badges {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .ep-svc-badges {
    grid-template-columns: 1fr;
  }
}
.ep-svc-badge {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ep-svc-badge-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ep-paper);
  color: var(--ep-teal);
  border: 1px solid var(--ep-line);
}
.ep-svc-badge-icon svg {
  width: 18px;
  height: 18px;
}
.ep-svc-badge h4 {
  font-family: var(--ep-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  color: var(--ep-ink);
  margin: 0 0 2px;
}
.ep-svc-badge p {
  font-family: var(--ep-font-body);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ep-ink-soft);
  margin: 0;
}

/*--------------------------------------------------------
  Editorial Process — eyebrow/heading header + numbered step
  tabs + swap-panel (icon/number/title left, copy right) + nav
--------------------------------------------------------*/
.ep-process-section {
  /* top padding stays taller than the fixed navbar's height so the
     eyebrow doesn't clip when the nav's "Process" link jumps here */
  padding-top: 96px;
  padding-bottom: 56px;
}
.ep-process-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}
.ep-process-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
}
.ep-process-eyebrow span:not(.ep-process-eyebrow-line) {
  font-family: var(--ep-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ep-teal);
  white-space: nowrap;
}
.ep-process-eyebrow-line {
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ep-line));
}
.ep-process-eyebrow-line:last-child {
  background: linear-gradient(90deg, var(--ep-line), transparent);
}
.ep-process-heading {
  font-family: var(--ep-font-display);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ep-ink);
  margin: 0 0 16px;
}
.ep-process-heading span {
  color: var(--ep-teal);
}
@media (min-width: 768px) {
  .ep-process-heading {
    font-size: 46px;
  }
}
.ep-process-underline {
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--ep-coral);
  margin: 0 auto 20px;
}
.ep-process-subtitle {
  font-family: var(--ep-font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ep-ink-soft);
  margin: 0;
}

/* Step tabs */
.ep-process-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ep-line);
  margin-bottom: 36px;
}
.ep-process-step {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  padding: 6px 4px;
  cursor: pointer;
}
.ep-process-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--ep-paper-alt);
  color: var(--ep-ink-soft);
  font-family: var(--ep-font-body);
  font-size: 14px;
  font-weight: 700;
  transition:
    background-color 0.35s var(--ep-ease),
    color 0.35s var(--ep-ease),
    transform 0.35s var(--ep-ease);
}
.ep-process-step-label {
  font-family: var(--ep-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ep-ink-soft);
  white-space: nowrap;
  transition: color 0.35s var(--ep-ease);
}
.ep-process-step.is-active .ep-process-step-num {
  background: var(--ep-coral);
  color: var(--ep-ink);
  transform: scale(1.08);
}
.ep-process-step.is-active .ep-process-step-label {
  color: var(--ep-ink);
}
.ep-process-step-line {
  position: relative;
  width: 70px;
  height: 1px;
  background: var(--ep-line);
  margin: 0 14px;
  flex: 0 0 auto;
}
.ep-process-step-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ep-coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ep-ease);
}
.ep-process-step-line.is-filled::after {
  transform: scaleX(1);
}
.ep-process-step-dot {
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ep-line);
  transform: translate(50%, -50%);
}
.ep-process-step-line.is-filled .ep-process-step-dot {
  background: var(--ep-coral);
}
@media (max-width: 767px) {
  .ep-process-stepper {
    justify-content: flex-start;
    overflow-x: auto;
    padding-left: 4px;
    padding-right: 4px;
  }
  .ep-process-step-label {
    display: none;
  }
  .ep-process-step-line {
    width: 30px;
    margin: 0 6px;
  }
}

/* Panels */
.ep-process-panel-wrap {
  position: relative;
  min-height: 260px;
}
.ep-process-panel {
  display: none;
  grid-template-columns: 220px 1fr;
  gap: 50px;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.45s var(--ep-ease),
    transform 0.45s var(--ep-ease);
}
.ep-process-panel.is-active {
  display: grid;
}
.ep-process-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 767px) {
  .ep-process-panel.is-active {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}
.ep-process-panel-side {
  position: relative;
}
.ep-process-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--ep-paper-alt);
  color: var(--ep-teal);
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.ep-process-panel-icon svg {
  width: 28px;
  height: 28px;
}
.ep-process-panel-bignum {
  display: block;
  font-family: var(--ep-font-display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: rgba(15, 110, 104, 0.12);
  margin-bottom: -14px;
}
.ep-process-panel-side h3 {
  position: relative;
  z-index: 1;
  font-family: var(--ep-font-body);
  font-size: 26px;
  font-weight: 700;
  text-transform: none;
  color: var(--ep-ink);
  margin: 0 0 12px;
}
.ep-process-panel-rule {
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--ep-coral);
}
.ep-process-panel-body p {
  font-family: var(--ep-font-body);
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ep-ink-soft);
  margin: 0 0 18px;
}
.ep-process-panel-body p:last-child {
  margin-bottom: 0;
}

/* Prev/next + dot pagination */
.ep-process-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--ep-line);
}
.ep-process-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--ep-line);
  background: var(--ep-paper);
  color: var(--ep-ink);
  cursor: pointer;
  transition:
    background-color 0.3s var(--ep-ease),
    border-color 0.3s var(--ep-ease),
    color 0.3s var(--ep-ease),
    transform 0.3s var(--ep-ease),
    box-shadow 0.3s var(--ep-ease);
}
.ep-process-nav-btn svg {
  width: 18px;
  height: 18px;
}
.ep-process-nav-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(20, 20, 26, 0.1);
}
.ep-process-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.ep-process-nav-btn-primary {
  background: var(--ep-coral);
  border-color: var(--ep-coral);
  color: var(--ep-ink);
}
.ep-process-nav-btn-primary:hover:not(:disabled) {
  background: var(--ep-coral-dark);
  border-color: var(--ep-coral-dark);
}
.ep-process-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ep-process-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ep-line);
  cursor: pointer;
  transition:
    background-color 0.3s var(--ep-ease),
    transform 0.3s var(--ep-ease);
}
.ep-process-dot.is-active {
  background: var(--ep-coral);
  transform: scale(1.35);
}

/*--------------------------------------------------------
  Funding (Laura Bassi Scholarship) / Pro Bono — centered
  eyebrow+heading header, shared accordion component below
--------------------------------------------------------*/
.ep-fund-section {
  /* top padding stays taller than the fixed navbar's height so the
     eyebrow doesn't clip when a nav link jumps straight here */
  padding-top: 96px;
  padding-bottom: 56px;
}
.ep-fund-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}
.ep-fund-eyebrow {
  display: block;
  font-family: var(--ep-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ep-teal);
  margin-bottom: 14px;
}
.ep-fund-eyebrow-tick {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--ep-coral);
  margin: 0 auto 18px;
}
.ep-fund-heading {
  font-family: var(--ep-font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ep-ink);
  margin: 0;
}
.ep-fund-heading span {
  color: var(--ep-teal);
}
@media (min-width: 768px) {
  .ep-fund-heading {
    font-size: 44px;
  }
}

/* Accordion */
.ep-accordion {
  max-width: 880px;
  margin: 0 auto;
  border: 1px solid var(--ep-line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--ep-paper);
}
.ep-accordion-item + .ep-accordion-item {
  border-top: 1px solid var(--ep-line);
}
.ep-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 26px;
  background: none;
  border: none;
  border-left: 4px solid transparent;
  cursor: pointer;
  text-align: left;
  transition:
    background-color 0.3s var(--ep-ease),
    border-color 0.3s var(--ep-ease),
    padding 0.3s var(--ep-ease);
}
.ep-accordion-item.is-open .ep-accordion-trigger {
  background: var(--ep-paper-alt);
  border-left-color: var(--ep-coral);
}
.ep-accordion-trigger-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ep-paper-alt);
  color: var(--ep-teal);
  transition:
    background-color 0.35s var(--ep-ease),
    color 0.35s var(--ep-ease),
    width 0.35s var(--ep-ease),
    height 0.35s var(--ep-ease);
}
.ep-accordion-trigger-icon svg {
  width: 20px;
  height: 20px;
  transition: transform 0.35s var(--ep-ease);
}
.ep-accordion-item.is-open .ep-accordion-trigger-icon {
  background: var(--ep-coral);
  color: var(--ep-ink);
  width: 54px;
  height: 54px;
}
.ep-accordion-item.is-open .ep-accordion-trigger-icon svg {
  width: 24px;
  height: 24px;
}
.ep-accordion-item.is-open .ep-accordion-trigger-icon-plus svg {
  transform: rotate(45deg);
}
.ep-accordion-trigger-label {
  flex: 1;
  font-family: var(--ep-font-body);
  font-size: 16.5px;
  font-weight: 700;
  text-transform: none;
  color: var(--ep-ink);
}
.ep-accordion-trigger-chevron {
  flex: none;
  display: inline-flex;
  color: var(--ep-ink-soft);
  transition:
    transform 0.35s var(--ep-ease),
    color 0.35s var(--ep-ease);
}
.ep-accordion-trigger-chevron svg {
  width: 18px;
  height: 18px;
}
.ep-accordion-item.is-open .ep-accordion-trigger-chevron {
  transform: rotate(180deg);
  color: var(--ep-teal);
}
.ep-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ep-ease);
}
.ep-accordion-panel-inner {
  position: relative;
  overflow: hidden;
  padding: 4px 26px 28px;
}
.ep-accordion-copy {
  position: relative;
  z-index: 1;
  max-width: 620px;
}
.ep-accordion-copy p {
  font-family: var(--ep-font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--ep-ink-soft);
  margin: 0 0 14px;
}
.ep-accordion-copy p:last-of-type {
  margin-bottom: 0;
}
.ep-accordion-copy p strong {
  color: var(--ep-ink);
  font-weight: 700;
}
.ep-accordion-dots {
  position: absolute;
  z-index: 0;
  top: 6px;
  right: 130px;
  width: 56px;
  height: 56px;
  background-image: radial-gradient(rgba(15, 110, 104, 0.3) 1.3px, transparent 1.3px);
  background-size: 11px 11px;
  opacity: 0.6;
}
.ep-accordion-watermark {
  position: absolute;
  z-index: 0;
  right: -10px;
  bottom: -20px;
  width: 150px;
  height: 150px;
  color: var(--ep-teal);
  opacity: 0.07;
  pointer-events: none;
}
@media (max-width: 640px) {
  .ep-accordion-dots,
  .ep-accordion-watermark {
    display: none;
  }
}
.ep-accordion-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 13px 40px;
  border: 0;
  border-radius: 999px;
  background: var(--ep-coral);
  color: #ffffff;
  text-decoration: none;
  font-family: var(--ep-font-body);
  font-size: 13.5px;
  font-weight: 700;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition:
    transform 0.3s var(--ep-ease),
    box-shadow 0.3s var(--ep-ease);
}
.detail-body .ep-accordion-cta {
  width: 156px;
    margin: auto;
    justify-content: center;
}
.ep-accordion-cta:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(28, 40, 86, 0.3);
  color: #ffffff;
}
.ep-accordion-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--ep-ease);
}
.ep-accordion-cta:hover svg {
  transform: translateX(3px);
}
.ep-accordion-cta-outline {
  background: none;
  border: 1px solid var(--ep-coral);
  color: var(--ep-ink);
}
.ep-accordion-cta-outline:hover {
  background: var(--ep-coral);
  color: var(--ep-ink);
}

/*--------------------------------------------------------
  Cards: services, process, resources/blog
--------------------------------------------------------*/
.services-item-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--ep-ink);
  margin-bottom: 10px;
}
.process-item.section-text.row.container {
  padding: 28px 30px;
  margin-bottom: 24px;
  background: var(--ep-paper);
  border: 1px solid var(--ep-line);
}

/* Sticky image left, accent-divided stacked list right */
/* #page ships with overflow-y:hidden which breaks position:sticky everywhere;
   keep the horizontal clip (prevents parallax bleed) but allow vertical sticky */
/* Setting only overflow-y:visible here is not enough: per the CSS Overflow
   spec, if overflow-x stays non-visible, the browser silently forces
   overflow-y back to "auto" (still a scroll container, still breaks
   sticky). Both axes must be visible for position:sticky descendants to
   stick to the real viewport instead of these wrappers. */
body,
#page,
#page-2 {
  overflow: visible !important;
}
#process-section.section,
#resources-list.section,
#bassi-detail.section {
  overflow: visible;
}
.process-diff-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.process-diff-media {
  position: sticky;
  top: 110px;
  margin-bottom: 40px;
}
.process-diff-media-inner {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 24px 48px rgba(20, 20, 26, 0.1);
}
.process-diff-media-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-title-left {
  text-align: left;
  padding-bottom: 40px;
}
.process-diff-item {
  padding: 30px 0;
  border-bottom: 1px dashed var(--ep-line);
}
.process-diff-item-last {
  border-bottom: none;
  padding-bottom: 0;
}
.process-diff-accent {
  display: block;
  width: 42px;
  height: 2px;
  background: var(--ep-coral);
  margin-bottom: 18px;
}
.process-diff-heading {
  font-size: 24px;
  font-weight: 600;
  color: var(--ep-ink);
  margin: 0 0 14px;
}
.process-diff-item p {
  color: var(--ep-ink-soft);
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 12px;
}
.process-diff-item p:last-child {
  margin-bottom: 0;
}
@media (max-width: 991px) {
  .process-diff-media {
    position: static;
  }
}
.services-quote {
  border-left: 2px solid var(--ep-coral);
  padding-left: 22px;
  margin: 0;
}
/* Heading row + nav arrows + card carousel */
.news-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.news-heading {
  font-family: var(--ep-font-display);
  font-size: 30px;
  font-weight: 300;
  color: var(--ep-ink);
  margin: 0;
  text-transform: capitalize;
}
.news-heading span {
  font-weight: 700;
  color: var(--ep-teal);
}
@media (min-width: 768px) {
  .news-heading {
    font-size: 38px;
  }
}
.news-all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ep-teal);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.news-all-link i {
  font-size: 12px;
  transition: transform 0.3s var(--ep-ease);
}
.news-all-link:hover {
  color: var(--ep-coral-dark);
}
.news-all-link:hover i {
  transform: translateX(-27px);
}
.news-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
}
.news-nav-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--ep-line);
  background: var(--ep-paper);
  color: var(--ep-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition:
    border-color 0.3s var(--ep-ease),
    background-color 0.3s var(--ep-ease),
    color 0.3s var(--ep-ease);
}
.news-nav-btn:hover {
  border-color: var(--ep-coral);
  background: var(--ep-coral);
  color: var(--ep-ink);
}

/* Card carousel */
.news-carousel .owl-stage-outer {
  overflow: hidden;
}
.news-carousel .owl-stage {
  display: flex;
}
.news-carousel .owl-item {
  display: flex;
  height: auto;
  align-self: stretch;
}
.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ep-paper);
  border: 1px solid var(--ep-line);
  border-radius: 16px;
  padding: 14px 14px 22px;
  transition:
    transform 0.45s var(--ep-ease),
    box-shadow 0.45s var(--ep-ease),
    border-color 0.45s var(--ep-ease);
}
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(20, 20, 26, 0.1);
  border-color: var(--ep-coral);
}
.news-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.news-card-img {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 18px;
}
.news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ep-ease);
}
.news-card:hover .news-card-img img {
  transform: scale(1.08);
}
.news-card-title {
  font-family: var(--ep-font-display);
  font-size: 17px;
  font-weight: 600;
  text-transform: none;
  color: var(--ep-ink);
  margin: 0 0 8px;
  line-height: 1.35;
  transition: color 0.3s var(--ep-ease);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-title span {
  color: var(--ep-teal);
  font-weight: 600;
}
.news-card:hover .news-card-title {
  color: var(--ep-teal);
}
.news-card-text {
  color: var(--ep-ink-soft);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Skill bars (about section) */
.skillbar-title {
  color: var(--ep-ink);
  font-weight: 500;
}
.skillbar {
  background: var(--ep-line);
  height: 4px;
}
.skillbar-bar {
  background: var(--ep-teal) !important;
  box-shadow: none !important;
}

/*--------------------------------------------------------
  Facts section — light stat card ("Our Impact in Words")
--------------------------------------------------------*/
.ep-facts-section {
  padding-top: 30px;
  padding-bottom: 30px;
}
.ep-facts-card {
  position: relative;
  background: linear-gradient(180deg, #f8fafb 0%, #eef3f4 100%);
  border-radius: 28px;
  padding: 44px 40px 40px;
  text-align: center;
}
.ep-facts-content {
  position: relative;
  z-index: 1;
}
.ep-facts-brand {
  margin-bottom: 16px;
}
.ep-facts-brand img {
  height: 34px;
  width: auto;
}
.ep-facts-heading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 14px;
}
.ep-facts-heading-line {
  position: relative;
  width: 90px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ep-line));
  flex: 0 1 90px;
}
.ep-facts-heading-line:last-child {
  background: linear-gradient(90deg, var(--ep-line), transparent);
}
.ep-facts-heading-line:first-child::after,
.ep-facts-heading-line:last-child::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ep-coral);
  transform: translateY(-50%);
}
.ep-facts-heading-line:first-child::after {
  right: -3px;
}
.ep-facts-heading-line:last-child::before {
  left: -3px;
}
.ep-facts-heading {
  font-family: var(--ep-font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ep-ink);
  margin: 0;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .ep-facts-heading {
    font-size: 32px;
  }
}
.ep-facts-heading span {
  color: var(--ep-teal);
}
.ep-facts-underline {
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--ep-coral);
  margin: 0 auto 18px;
}
.ep-facts-subtitle {
  font-family: var(--ep-font-body);
  font-size: 15px;
  color: var(--ep-ink-soft);
  margin: 0 0 34px;
}
.ep-facts-inner {
  position: relative;
  overflow: hidden;
  background: var(--ep-paper);
  border: 1px solid var(--ep-line);
  border-radius: 22px;
  padding: 40px 30px 34px;
  box-shadow: 0 30px 60px rgba(20, 20, 26, 0.06);
}
/* Three figures (ep-site-v7): one row down to 561 px, then one column. */
.ep-facts-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 560px) {
  .ep-facts-grid {
    grid-template-columns: 1fr;
    row-gap: 30px;
  }
}
.ep-facts-item {
  padding: 0 18px;
}
.ep-facts-item:not(:first-child) {
  border-left: 1px solid var(--ep-line);
}
@media (max-width: 767px) {
  .ep-facts-item {
    padding: 0 10px;
  }
}
@media (max-width: 560px) {
  .ep-facts-item {
    border-left: none !important;
  }
}
.ep-facts-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--ep-paper-alt);
  color: var(--ep-teal);
  margin-bottom: 16px;
}
.ep-facts-icon svg {
  width: 24px;
  height: 24px;
}
.ep-facts-icon::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px dashed rgba(15, 110, 104, 0.35);
  animation: ep-orbit-spin 16s linear infinite;
}
.ep-facts-icon::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
@keyframes ep-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}
.ep-facts-number {
  font-family: var(--ep-font-display);
  font-size: 40px;
  font-weight: 600;
  color: var(--ep-teal);
  line-height: 1;
  margin: 0 0 12px;
}
.ep-facts-rule {
  display: block;
  margin: 0 auto 12px;
  color: rgba(15, 110, 104, 0.5);
  transform: scaleX(0);
  transition: transform 0.7s var(--ep-ease) 0.15s;
}
.reveal.is-visible .ep-facts-rule {
  transform: scaleX(1);
}
.ep-facts-label {
  font-family: var(--ep-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ep-ink);
  margin: 0;
}
.ep-facts-wave {
  position: absolute;
  bottom: 0;
  width: 46%;
  height: 130px;
  pointer-events: none;
  z-index: 0;
}
.ep-facts-wave svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ep-facts-wave-left {
  left: 0;
  animation: ep-wave-drift-left 11s ease-in-out infinite;
}
.ep-facts-wave-right {
  right: 0;
  transform: scaleX(-1);
  animation: ep-wave-drift-right 13s ease-in-out infinite;
}
@keyframes ep-wave-drift-left {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(8px);
  }
}
@keyframes ep-wave-drift-right {
  0%,
  100% {
    transform: scaleX(-1) translateX(0);
  }
  50% {
    transform: scaleX(-1) translateX(8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ep-facts-icon::before,
  .ep-facts-wave-left,
  .ep-facts-wave-right {
    animation: none !important;
  }
}

/*--------------------------------------------------------
  Unified content-page header (payments/terms/privacy/etc.)
--------------------------------------------------------*/
.ep-page-header {
  /* top stays just enough to clear the fixed navbar (71px) since several
     nav links jump straight to a page's header; kept tight beyond that */
  padding: 104px 0 0px;
  text-align: center;
  border-bottom: 1px solid var(--ep-line);
}
.ep-page-header h1 {
  font-family: var(--ep-font-display);
  font-size: 34px;
  font-weight: 500;
  color: var(--ep-ink);
  margin: 0;
}
@media (min-width: 768px) {
  .ep-page-header h1 {
    font-size: 44px;
  }
}
.ep-page-header p {
  font-family: var(--ep-font-body);
  color: var(--ep-ink-soft);
  font-size: 15px;
  margin-top: 10px;
}
.ep-page-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 70px 20px;
  font-family: var(--ep-font-body);
  font-size: 17px;
  line-height: 1.8;
  color: var(--ep-ink-soft);
}
.ep-page-body h2 {
  font-family: var(--ep-font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--ep-ink);
  margin: 48px 0 18px;
  padding-top: 40px;
  border-top: 1px solid var(--ep-line);
}
.ep-page-body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.ep-lead-term {
  color: var(--ep-teal);
  font-weight: 700;
}
/*--------------------------------------------------------
  Fee schedule box (service detail pages: General Proofreading,
  Thorough Editing, etc.) — table + notes list inside a card
--------------------------------------------------------*/
.ep-fee-box {
  margin: 48px 0 0;
  padding: 36px 38px;
  background: var(--ep-paper-alt);
  border: 1px solid var(--ep-line);
  border-radius: 16px;
}
.ep-fee-title {
  font-family: var(--ep-font-display);
  font-size: 26px;
  font-weight: 600;
  text-transform: none;
  color: var(--ep-ink);
  margin: 0 0 14px;
  padding-top: 0;
  border-top: none;
}
.ep-fee-underline {
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--ep-coral);
  margin-bottom: 26px;
}
.ep-fee-table-wrap {
  overflow-x: auto;
  margin-bottom: 26px;
  border-radius: 10px;
  border: 1px solid var(--ep-line);
}
.ep-fee-table {
  width: 100%;
  min-width: 380px;
  border-collapse: collapse;
  font-family: var(--ep-font-body);
}
.ep-fee-table thead th {
  background: var(--ep-teal);
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ep-fee-table tbody td {
  padding: 14px 16px;
  text-align: center;
  font-size: 15px;
  color: var(--ep-ink);
  border-top: 1px solid var(--ep-line);
  background: var(--ep-paper);
}
.ep-fee-table tbody tr:nth-child(even) td {
  background: var(--ep-paper-alt);
}
.ep-fee-notes {
  list-style: none;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--ep-line);
}
.ep-fee-notes li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 12px;
  font-family: var(--ep-font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ep-ink-soft);
}
.ep-fee-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ep-coral);
}
.ep-fee-notes li:last-child {
  margin-bottom: 0;
}
.ep-page-body ul,
.ep-page-body ol {
  margin: 0 0 20px;
  padding-left: 22px;
}
.ep-page-body li {
  margin-bottom: 10px;
}
.ep-page-body li:last-child {
  margin-bottom: 0;
}
.ep-page-body .ep-placeholder {
  padding: 18px 22px;
  background: var(--ep-paper-alt);
  border: 1px dashed var(--ep-line);
  color: var(--ep-ink-soft);
  font-style: italic;
}
.ep-nav-current > a {
  cursor: default;
  opacity: 0.5;
}

/*--------------------------------------------------------
  Breadcrumb — PKB-style trail sitting above the page title
  on legal / utility pages (terms, privacy, payments, etc.)
--------------------------------------------------------*/
.ep-breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  font-family: var(--ep-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ep-breadcrumb a {
  color: var(--ep-ink-soft);
  border-bottom: none;
}
.ep-breadcrumb a:hover {
  color: var(--ep-teal);
}
.ep-breadcrumb-sep {
  color: var(--ep-line);
}
.ep-breadcrumb-current {
  color: var(--ep-teal);
}

/* Plain breadcrumb style (matches terms/privacy/code) — normal case,
   tight spacing, coral current-page — usable on headers that otherwise
   keep their own centered layout (e.g. resources.html) */
.ep-breadcrumb-plain {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  gap: 6px;
}
.ep-breadcrumb-plain .ep-breadcrumb-sep {
  font-size: 15px;
}
.ep-breadcrumb-plain .ep-breadcrumb-current {
  color: var(--ep-coral-dark);
}

/*--------------------------------------------------------
  Callout — highlighted aside within ep-page-body copy
--------------------------------------------------------*/
.ep-callout {
  margin: 28px 0;
  padding: 22px 26px;
  background: var(--ep-paper-alt);
  border-left: 3px solid var(--ep-coral);
  color: var(--ep-ink-soft);
  font-size: 16px;
}
.ep-callout strong {
  color: var(--ep-ink);
}
.ep-callout:first-child {
  margin-top: 0;
}
.ep-callout p {
  margin: 0;
}

/*--------------------------------------------------------
  Arrow link — PKB's "-> planetariumfund.com" style external link
--------------------------------------------------------*/
.ep-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  color: var(--ep-coral-dark);
  font-family: var(--ep-font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: none;
}
.ep-arrow-link svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s var(--ep-ease);
}
.ep-arrow-link:hover {
  color: var(--ep-coral-dark);
}
.ep-arrow-link:hover svg {
  transform: translateX(4px);
}

/*--------------------------------------------------------
  Download list — PKB "bolded subheading + Download pdf" row,
  used for payments.html bank-detail documents
--------------------------------------------------------*/
.ep-download-list {
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ep-download-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  background: var(--ep-paper-alt);
  border: 1px solid var(--ep-line);
  border-radius: 12px;
}
.ep-download-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(248, 169, 147, 0.22);
  color: var(--ep-coral-dark);
}
.ep-download-icon svg {
  width: 18px;
  height: 18px;
}
.ep-download-label {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ep-ink);
}
.ep-download-label span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ep-ink-soft);
}
.ep-download-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ep-teal);
  white-space: nowrap;
  border-bottom: none;
  transition: color 0.3s var(--ep-ease);
}
.ep-download-link i {
  font-size: 12px;
  transition: transform 0.3s var(--ep-ease);
}
.ep-download-link:hover {
  color: var(--ep-coral-dark);
}
.ep-download-link:hover i {
  transform: translateY(2px);
}
@media (max-width: 480px) {
  .ep-download-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/*--------------------------------------------------------
  Payment card — checkout form on payments.html
--------------------------------------------------------*/
.ep-payment-card {
  margin: 32px 0 0;
  padding: 28px 32px 26px;
  background: var(--ep-paper);
  border: 1px solid var(--ep-line);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(20, 20, 26, 0.06);
  text-align: left;
  font-family: var(--ep-font-body);
}
.ep-payment-field {
  margin-bottom: 26px;
}
.ep-payment-field label {
  display: block;
  font-family: var(--ep-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ep-ink-soft);
  margin-bottom: 10px;
}
/* #stripe-non-us is the id css/payment.css (legacy) hangs its own
   width:36/48%!important rules off — match its specificity (id + one
   selector) so our sizing/typography actually wins over that file */
#stripe-non-us .form-control,
#stripe-non-us .form-select,
.ep-payment-field .form-control,
.ep-payment-field .form-select {
  width: 100% !important;
  height: 46px !important;
  padding: 0 14px !important;
  margin-bottom: 0 !important;
  font-family: var(--ep-font-body) !important;
  font-size: 15px !important;
  color: var(--ep-ink) !important;
  background-color: var(--ep-paper) !important;
  background-image: none;
  border: 1px solid var(--ep-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}
#stripe-non-us select.form-select,
.ep-payment-field select.form-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5d70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding-right: 38px !important;
  text-overflow: ellipsis;
}
.ep-payment-field .form-control:focus,
.ep-payment-field .form-select:focus {
  outline: none;
  border-color: var(--ep-coral);
  box-shadow: 0 0 0 3px rgba(248, 169, 147, 0.25);
}
#stripe-non-us button,
.ep-payment-card .btn {
  position: relative;
  width: 100% !important;
  margin-top: 28px !important;
  height: 48px !important;
  padding: 0 !important;
  font-family: var(--ep-font-body) !important;
  font-weight: 600;
  font-size: 15px !important;
  letter-spacing: 0.03em;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ep-coral) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden;
  isolation: isolate;
}
.ep-payment-secure {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--ep-ink-soft);
}
.ep-payment-secure i {
  color: var(--ep-teal);
}

/* payments.html header — PKB-style left-aligned trail, scoped so the
   other 7 pages sharing .ep-page-header keep their centered layout */
.ep-page-header-payments {
  text-align: left;
  padding: 88px 0 0px;
  background: var(--ep-paper);
  border-top: none;
  border-bottom: none;
}
.ep-page-header-payments .ep-breadcrumb {
  justify-content: flex-start;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  gap: 6px;
  margin-bottom: 12px;
}
.ep-page-header-payments .ep-breadcrumb a {
  color: var(--ep-ink);
}
.ep-page-header-payments .ep-breadcrumb-sep {
  color: var(--ep-ink-soft);
  font-size: 15px;
}
.ep-page-header-payments .ep-breadcrumb-current {
  color: var(--ep-coral-dark);
}
.ep-page-header-payments h1 {
  text-align: left;
  font-size: 36px;
}
.ep-page-header-payments .ep-page-header-sub {
  margin-top: 8px;
}

/*--------------------------------------------------------
  Legal pages (terms/privacy/code) — PKB-style plain white
  header with a left-aligned breadcrumb/title, and body copy
  set in an indented reading column rather than centered.
--------------------------------------------------------*/
.ep-page-header-legal {
  text-align: left;
  padding: 90px 0 34px;
  background: var(--ep-paper);
  border-bottom: none;
}
.ep-page-header-legal .ep-breadcrumb {
  justify-content: flex-start;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  gap: 6px;
  margin-bottom: 12px;
}
.ep-page-header-legal .ep-breadcrumb a {
  color: var(--ep-ink);
}
.ep-page-header-legal .ep-breadcrumb-sep {
  color: var(--ep-ink-soft);
  font-size: 15px;
}
.ep-page-header-legal .ep-breadcrumb-current {
  color: var(--ep-coral-dark);
}
.ep-page-header-legal h1 {
  text-align: left;
  margin: 0;
}
.ep-page-body-legal {
  display: flex;
  align-items: flex-start;
  padding: 56px 20px 90px;
}
.ep-page-body-legal-spacer {
  flex: 0 0 190px;
}
.ep-page-body-legal-content.ep-page-body {
  flex: 1;
  min-width: 0;
  max-width: 760px;
  margin: 0;
  padding: 0;
}
@media (max-width: 900px) {
  .ep-page-body-legal-spacer {
    display: none;
  }
}

/* Lock icon inline with the page-header subtitle (payments.html) */
.ep-page-header-sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ep-page-header-sub svg {
  width: 15px;
  height: 15px;
  color: var(--ep-teal);
  flex-shrink: 0;
}

/* Payment card: icon badge (left) + form (right) */
.ep-payment-card {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.ep-payment-card-left {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 148px;
  padding-top: 4px;
}
.ep-payment-card-icon-caption {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  margin: 14px 0 0;
  padding: 0 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ep-ink-soft);
  text-align: center;
}
.ep-payment-card-icon-caption i {
  margin-top: 3px;
  color: var(--ep-teal);
}
.ep-payment-card-icon {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(28, 40, 86, 0.06);
  color: var(--ep-teal);
}
.ep-payment-card-icon > svg {
  width: 52px;
  height: 52px;
}
.ep-payment-card-icon-badge {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ep-coral);
  border: 3px solid var(--ep-paper);
}
.ep-payment-card-icon-badge svg {
  width: 14px;
  height: 14px;
}
.ep-payment-card-form {
  flex: 1;
  min-width: 0;
}
.ep-payment-field-row {
  display: flex;
  gap: 18px;
}
.ep-payment-field-row .ep-payment-field {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.ep-payment-field-row .ep-payment-field-amount {
  flex: 0.7;
}
.ep-payment-field-row .ep-payment-field-currency {
  flex: 1.3;
}
.ep-payment-amount-wrap {
  position: relative;
}
.ep-payment-amount-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ep-ink-soft);
  font-size: 15px;
  pointer-events: none;
}
.ep-payment-amount-divider {
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: var(--ep-line);
  pointer-events: none;
}
#stripe-non-us #amount {
  padding-left: 46px !important;
}
@media (max-width: 560px) {
  .ep-payment-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .ep-payment-field-row {
    flex-direction: column;
    gap: 26px;
  }
}

/* Icon heading — small circular badge in front of an .ep-page-body h2 */
.ep-icon-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ep-icon-heading-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ep-paper-alt);
  color: var(--ep-teal);
}
.ep-icon-heading-badge svg {
  width: 18px;
  height: 18px;
}

/* Callout with a leading icon badge (payments.html closing note) */
.ep-callout-icon {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--ep-paper-alt);
  border-left: none;
  border-radius: 12px;
}
.ep-callout-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ep-ink);
  color: #ffffff;
}
.ep-callout-icon-badge svg {
  width: 17px;
  height: 17px;
}
.ep-callout-icon p {
  flex: 1;
}
@media (max-width: 480px) {
  .ep-callout-icon {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Bank-details currency picker (replaces a long list of per-currency rows) */
.ep-download-row-select {
  align-items: center;
  gap: 20px;
}
.ep-bank-select-field {
  flex: 1;
  min-width: 0;
}
.ep-bank-select-field label {
  display: block;
  font-family: var(--ep-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ep-ink);
  margin-bottom: 4px;
}
.ep-bank-select-field label span {
  display: block;
  font-family: var(--ep-font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--ep-ink-soft);
  margin-top: 2px;
}
.ep-bank-select-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}
.ep-bank-select-controls select {
  flex: 1;
  min-width: 0;
}
.ep-bank-select-controls .ep-download-link {
  flex-shrink: 0;
}
.ep-bank-select-field select {
  width: 100%;
  height: 42px;
  padding: 0 34px 0 12px;
  font-family: var(--ep-font-body);
  font-size: 14px;
  color: var(--ep-ink);
  background-color: var(--ep-paper);
  border: 1px solid var(--ep-line);
  border-radius: 9px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5d70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}
@media (max-width: 560px) {
  .ep-bank-select-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .ep-download-row-select {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
}

/*--------------------------------------------------------
  Resource detail articles (resources.html) — PKB detail-page pattern:
  left column (breadcrumb tag + title) stays sticky while the right
  column (hero image + body) scrolls past it; repeated per article.
--------------------------------------------------------*/
#resources-list.section,
#bassi-detail.section {
  /* no separate page-header band on these pages, so this section sits
     right under the fixed navbar (71px) — pad enough to clear it */
  padding-top: 140px;
}
.detail-item {
  margin-bottom: 90px;
  padding-bottom: 90px;
  border-bottom: 1px solid var(--ep-line);
  overflow: visible;
}
.detail-item-last {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.detail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.detail-sticky-col {
  position: sticky;
  top: 110px;
}
.detail-sticky-inner {
  padding-right: 20px;
}
.detail-sticky-text {
  transition: opacity 0.35s var(--ep-ease);
}
.detail-sticky-text.is-hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}
.detail-sticky-video {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.detail-sticky-video video {
  width: 100%;
  height: 100%;
 object-fit: fill;
  display: block;
}
.detail-sticky-inner .ep-breadcrumb {
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 20px;
}
@media (max-width: 991px) {
  .detail-sticky-col {
    position: static;
    margin-bottom: 30px;
  }
  /* No sticky scroll on mobile (columns just stack), so skip the
     scroll-triggered text->video swap and show the video immediately */
  .detail-sticky-video {
    opacity: 1 !important;
    transform: none !important;
  }
  .detail-sticky-text.is-hidden {
    opacity: 1;
    pointer-events: auto;
    position: static;
    visibility: visible;
  }
}
.detail-tags {
  margin-bottom: 18px;
}
.detail-title {
  font-family: var(--ep-font-display);
  font-size: 26px;
  font-weight: 600;
  text-transform: none;
  color: var(--ep-ink);
  line-height: 1.3;
  margin: 0;
}
.detail-title span {
  color: var(--ep-coral-dark);
  font-weight: 600;
}
@media (min-width: 768px) {
  .detail-title {
    font-size: 30px;
  }
}
/* Bassi and the service detail pages are standalone pages (not cards
   in a listing), so their titles carry more weight than the
   resource-article sticky titles */
#bassi-detail .detail-title,
.ep-service-detail .detail-title {
  font-size: 34px;
}
@media (min-width: 768px) {
  #bassi-detail .detail-title,
  .ep-service-detail .detail-title {
    font-size: 42px;
  }
}
.detail-sticky-subtitle {
  font-family: var(--ep-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ep-ink-soft);
  margin: 14px 0 0;
}
/* Bassi and the service detail pages get a bit more room in the left
   sticky column for the video */
#bassi-detail .col-md-4.detail-sticky-col,
.ep-service-detail .col-md-4.detail-sticky-col {
  width: 41.66667%;
}
#bassi-detail .col-md-8.detail-scroll-col,
.ep-service-detail .col-md-8.detail-scroll-col {
  width: 58.33333%;
}
@media (max-width: 991px) {
  #bassi-detail .col-md-4.detail-sticky-col,
  #bassi-detail .col-md-8.detail-scroll-col,
  .ep-service-detail .col-md-4.detail-sticky-col,
  .ep-service-detail .col-md-8.detail-scroll-col {
    width: 100%;
  }
}
/* Video stays hidden until the visitor scrolls past the initial view;
   it then replaces the title/breadcrumb entirely, so it can show full */
.detail-sticky-video {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ep-ease), transform 0.5s var(--ep-ease);
}
.detail-sticky-video.is-visible {
  opacity: 1;
  transform: none;
}
.detail-hero {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 34px;
  aspect-ratio: 16 / 9;
}
.detail-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-body p {
  font-family: var(--ep-font-body);
  color: var(--ep-ink-soft);
  font-size: 17px;
  line-height: 1.8;
  margin: 0 0 20px;
}
.detail-body p:last-child {
  margin-bottom: 0;
}
.detail-body a {
  color: var(--ep-teal);
  border-bottom: 1px solid var(--ep-teal);
}
.more-resources-section {
  background: var(--ep-paper-alt);
}

/* Static wrapping grid for the resources listing page (vs. the carousel
   used for "more resources" / homepage previews) */
.news-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
.news-grid .news-card {
  flex: 1 1 300px;
  max-width: calc(33.333% - 19px);
}
@media (max-width: 991px) {
  .news-grid .news-card {
    max-width: calc(50% - 14px);
  }
}
@media (max-width: 600px) {
  .news-grid .news-card {
    max-width: 100%;
  }
}
/*--------------------------------------------------------
  Resources listing (resources.html) — horizontal image+copy
  cards, 2-up, last odd card spans full width
--------------------------------------------------------*/
.ep-resources-page {
  padding-top: 26px !important;
}
.ep-res-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 767px) {
  .ep-res-grid {
    grid-template-columns: 1fr;
  }
}
.ep-res-card {
  position: relative;
  display: flex;
  align-items: stretch;
  background-color: var(--ep-paper-alt);
  background-image: linear-gradient(
    120deg,
    transparent 35%,
    rgba(248, 169, 147, 0.22) 50%,
    transparent 65%
  );
  background-repeat: no-repeat;
  background-size: 220% 220%;
  background-position: -80% -80%;
  border: 1px solid var(--ep-line);
  border-left: 3px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  transition:
    transform 0.4s var(--ep-ease),
    box-shadow 0.4s var(--ep-ease),
    border-color 0.4s var(--ep-ease),
    background-position 0.8s var(--ep-ease);
}
.ep-res-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px rgba(28, 40, 86, 0.14);
  border-color: rgba(248, 169, 147, 0.5);
  border-left-color: var(--ep-coral);
  background-position: 130% 130%;
}
.ep-res-card-img {
  position: relative;
  flex: 0 0 42%;
  max-width: 260px;
  overflow: hidden;
}
.ep-res-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ep-teal);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.4s var(--ep-ease);
}
.ep-res-card:hover .ep-res-card-img::after {
  opacity: 0.12;
}
@media (max-width: 480px) {
  .ep-res-card-img {
    flex-basis: 130px;
  }
}
.ep-res-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 220px;
  transition: transform 0.6s var(--ep-ease);
}
.ep-res-card:hover .ep-res-card-img img {
  transform: scale(1.08);
}
.ep-res-card-body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 28px;
}
.ep-res-card-tick {
  display: block;
  width: 3px;
  height: 20px;
  border-radius: 2px;
  background: var(--ep-coral);
  margin-bottom: 14px;
  transition: height 0.3s var(--ep-ease);
}
.ep-res-card:hover .ep-res-card-tick {
  height: 30px;
}
.ep-res-card-title {
  font-family: var(--ep-font-display);
  font-size: 20px;
  font-weight: 600;
  text-transform: none;
  color: var(--ep-ink);
  line-height: 1.3;
  margin: 0 0 10px;
  transition: color 0.3s var(--ep-ease);
}
.ep-res-card:hover .ep-res-card-title,
.ep-res-card:hover .ep-res-card-title span {
  color: var(--ep-coral-dark);
}
.ep-res-card-title span {
  color: var(--ep-teal);
  transition: color 0.3s var(--ep-ease);
}
.ep-res-card-text {
  font-family: var(--ep-font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ep-ink-soft);
  margin: 0 0 16px;
}
.ep-res-card-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--ep-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ep-teal);
  text-decoration: none;
  border-bottom: none;
  transition: color 0.3s var(--ep-ease), gap 0.3s var(--ep-ease);
}
.ep-res-card-more svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s var(--ep-ease);
}
.ep-res-card-more:hover {
  color: var(--ep-coral-dark);
  gap: 11px;
}
.ep-res-card-more:hover svg {
  transform: translateX(2px);
}

/*--------------------------------------------------------
  Contact section
--------------------------------------------------------*/
.contact-item i {
  color: var(--ep-teal);
}

/*--------------------------------------------------------
  Footer — multi-column (brand + Explore + Services)
--------------------------------------------------------*/
.footer-section {
  background: var(--ep-ink) !important;
  padding: 76px 0 0;
}
/* Bootstrap's .container adds :before/:after clearfix pseudo-elements
   (display:table) for float layouts. These footer rows are grid/flex
   instead, and the pseudo-elements become real grid/flex items there,
   pushing the last real column onto its own row — kill them. */
.ep-footer-grid::before,
.ep-footer-grid::after,
.ep-footer-mark-row::before,
.ep-footer-mark-row::after,
.ep-footer-bottom-row::before,
.ep-footer-bottom-row::after {
  content: none;
  display: none;
}
.ep-footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.75fr 0.75fr 0.95fr;
  gap: 32px;
  padding-bottom: 20px;
  text-align: left;
}
@media (max-width: 900px) {
  .ep-footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 36px;
  }
  .ep-footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .ep-footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
.ep-footer-brand-link {
  display: inline-block;
  text-decoration: none;
  border-bottom: none;
}
.ep-footer-brand-mark {
  height: 60px;
  width: auto;
  margin-bottom: 18px;
}
.ep-footer-wordmark {
  font-family: var(--ep-font-display);
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 16px;
}
.ep-footer-underline {
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--ep-coral);
  margin-bottom: 20px;
}
.ep-footer-tagline {
  font-family: var(--ep-font-body);
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.55);
  max-width: 320px;
  margin: 0;
}
.ep-footer-col-title {
  display: inline-block;
  font-family: var(--ep-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ep-coral);
  margin: 0 0 12px;
}
.ep-footer-col-underline {
  display: block;
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: var(--ep-coral);
  margin-bottom: 22px;
}
/* Explore's second sub-column: keeps the same title/underline spacing
   so its links line up with the first sub-column, without repeating
   the "Explore" label visually */
.ep-footer-col-title-ghost {
  visibility: hidden;
}
.ep-footer-col-underline-ghost {
  visibility: hidden;
}
@media (max-width: 900px) {
  .ep-footer-col-plain {
    margin-top: -34px;
  }
}
@media (max-width: 560px) {
  .ep-footer-col-plain {
    margin-top: 0;
  }
}
.ep-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ep-footer-links li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ep-footer-links li:last-child {
  border-bottom: none;
}
.ep-footer-links a {
  display: block;
  padding: 11px 0;
  font-family: var(--ep-font-body);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  border-bottom: none;
  transition: color 0.3s var(--ep-ease), padding-left 0.3s var(--ep-ease);
}
.ep-footer-links a:hover {
  color: var(--ep-coral);
  padding-left: 4px;
}

/* Center brand mark sitting under the (now unbroken) divider line
   — also a back-to-top link. Previously this straddled the line by
   masking a chunk of it out with a background rectangle, but the
   mark image (img/logo-mark.svg) never resolves at the size this
   assumed, so that masked-out rectangle showed as a bare gap in the
   border instead of a neat notch around a small icon. Simplest fix
   that guarantees one continuous line regardless of whether that
   image loads: stop punching a hole in it at all. */
.ep-footer-mark-row {
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: center;
}
.ep-footer-mark-row a {
  display: block;
  margin-top: 8px;
  padding: 0;
  border-bottom: none;
  line-height: 0;
}
.ep-footer-center-mark {
  height: 46px;
  width: 46px;
  transition: transform 0.3s var(--ep-ease);
}
.ep-footer-mark-row a:hover .ep-footer-center-mark {
  transform: translateY(-4px);
}

.footer-bottom {
  background: transparent !important;
  border-top: none;
  margin-top: 0;
  padding: 22px 0;
}
.ep-footer-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 30px;
}
.footer-bottom-text {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: var(--ep-font-body);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.footer-bottom-text:hover {
  color: #ffffff !important;
}
.ep-footer-legal {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ep-footer-legal span {
  color: rgba(255, 255, 255, 0.2);
}
.ep-footer-social-row {
  display: flex;
  gap: 10px;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}
.footer-social a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--ep-coral) !important;
  background: transparent !important;
  border: 1px solid var(--ep-coral);
  transition: color 0.3s var(--ep-ease), background-color 0.3s var(--ep-ease), border-color 0.3s var(--ep-ease);
}
.footer-social a svg {
  width: 16px;
  height: 16px;
}
.footer-social a:hover {
  color: var(--ep-ink) !important;
  background: var(--ep-coral) !important;
  border-color: var(--ep-coral);
}

/*==========================================================
  Premium motion: scroll reveal, parallax, card/button hover
==========================================================*/
:root {
  --ep-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/*--------------------------------------------------------
  Scroll reveal
--------------------------------------------------------*/
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s var(--ep-ease),
    transform 0.9s var(--ep-ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--fade {
  transform: none;
}
.reveal--fade.is-visible {
  transform: none;
}
.reveal--scale {
  transform: scale(0.96);
}
.reveal--scale.is-visible {
  transform: scale(1);
}

/* Stagger children of a reveal-group so cards cascade in */
.reveal-group > *:nth-child(1) {
  transition-delay: 0ms;
}
.reveal-group > *:nth-child(2) {
  transition-delay: 80ms;
}
.reveal-group > *:nth-child(3) {
  transition-delay: 160ms;
}
.reveal-group > *:nth-child(4) {
  transition-delay: 240ms;
}
.reveal-group > *:nth-child(5) {
  transition-delay: 320ms;
}
.reveal-group > *:nth-child(6) {
  transition-delay: 400ms;
}
.reveal-group > *:nth-child(7) {
  transition-delay: 480ms;
}
.reveal-group > *:nth-child(8) {
  transition-delay: 560ms;
}
.reveal-group > *:nth-child(n + 9) {
  transition-delay: 640ms;
}

/*--------------------------------------------------------
  Split-word reveal (hero headline) — each word masked in its own
  overflow:hidden box, sliding up into place, staggered per word
--------------------------------------------------------*/
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.split-word-inner {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.85s var(--ep-ease);
  will-change: transform;
}
.split-reveal.is-visible .split-word-inner {
  transform: translateY(0);
}

/*--------------------------------------------------------
  Parallax
--------------------------------------------------------*/
.parallax-el {
  will-change: transform;
}

/*--------------------------------------------------------
  Card hover — image breathes, card lifts
--------------------------------------------------------*/
.blog-post-preview-img,
.blog-media {
  overflow: hidden;
}
.blog-post-preview-img img,
.blog-media img {
  transition: transform 0.7s var(--ep-ease);
}
.blog-post-preview:hover .blog-post-preview-img img,
.blog-item:hover .blog-media img {
  transform: scale(1.08);
}
.blog-item,
.process-item.section-text.row.container {
  transition:
    transform 0.45s var(--ep-ease),
    box-shadow 0.45s var(--ep-ease);
}
.blog-item:hover,
.process-item.section-text.row.container:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(20, 20, 26, 0.08);
}

/*--------------------------------------------------------
  Button hover — deliberate, quick motion
--------------------------------------------------------*/
.btn {
  transition:
    background-color 0.3s var(--ep-ease),
    border-color 0.3s var(--ep-ease),
    color 0.3s var(--ep-ease),
    transform 0.3s var(--ep-ease),
    box-shadow 0.3s var(--ep-ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(20, 20, 26, 0.12);
}
.btn .fa,
.btn i {
  transition: transform 0.3s var(--ep-ease);
  display: inline-block;
}
.btn:hover .fa,
.btn:hover i {
  transform: translateX(4px);
}

/* Plain text-link CTA (e.g. "go to resources") — no fill, no border box */
.btn-text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--ep-ink);
  padding: 0 0 5px;
  color: var(--ep-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    color 0.3s var(--ep-ease),
    border-color 0.3s var(--ep-ease);
}
.btn-text-link i,
.btn-text-link .fa {
  font-size: 13px;
  transition: transform 0.3s var(--ep-ease);
}
.btn-text-link:hover,
.btn-text-link:focus {
  color: var(--ep-coral);
  border-color: var(--ep-coral);
  text-decoration: none;
}
.btn-text-link:hover i,
.btn-text-link:hover .fa {
  transform: translateX(5px);
}

/*--------------------------------------------------------
  Reduced motion / mobile guardrails
--------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .parallax-el {
    transform: none !important;
  }
  .split-word-inner {
    transform: none !important;
    transition: none !important;
  }
}
@media (max-width: 767px) {
  .parallax-el {
    transform: none !important;
  }
}
.news-all-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 22px;
  text-decoration: none;
  white-space: nowrap;
}

.news-all-link .arrow-wrap {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  line-height: 0;
}

.news-all-link .text {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  transform: translateX(var(--arrow-space, 30px));
}

.news-all-link:hover .arrow-wrap {
  transform: translate(var(--slide-dist, 140px), -50%);
}

.news-all-link:hover .text {
  transform: translateX(0);
}
:root {
  --navy: #1c2856;
  --coral: #e79080;
  --coral-dark: #d97a68;
  --pink-bg: #f6d5cc;
  --pink-bg-2: #f0c4b9;
  --ink: #3a3550;
  --ink-soft: #5c5872;
  --line: #1c285633;
}

/* =========================
   RESET
========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================
   BODY
========================= */

body {
  font-family: "Inter", sans-serif;
  background: #fff;
}

/* =========================
   CONTACT SECTION
========================= */

.contact-section {
  position: relative;
  overflow: hidden;

  background: var(--ep-paper);

  min-height: 430px;

  display: flex;
  align-items: center;
}

/* Background sweep reuses the same .bg-sweep component + scroll-triggered
   IntersectionObserver as the "What sets us apart?" section (premium-motion.js) */
.contact-section .bg-sweep {
  background: var(--pink-bg);
}

/* =========================
   MAIN CONTAINER
========================= */

.contact-inner {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 1200px;

  margin: 0 auto;

  padding: 0px 40px;

  display: grid;

  grid-template-columns:
    1.05fr
    1fr;

  gap: 48px;

  align-items: center;
}

/* =========================
   ILLUSTRATION
========================= */

.illustration {
  display: flex;

  align-items: center;
  justify-content: center;

  opacity: 0;

  animation: fadeUp 1.4s ease 0.5s forwards;
}

.illustration svg {
  width: 100%;
  max-width: 460px;
  height: auto;
}

/* =========================
   FADE UP ANIMATION
========================= */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   CONTACT COPY
========================= */

.contact-item {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.contact-item i {
  font-size: 28px;
  text-align: left;
  margin-left: 30px;
}

.contact-copy {
  opacity: 0;

  animation: fadeUp 1.4s ease 0.65s forwards;
}

/* =========================
   EYEBROW
========================= */

.eyebrow {
  font-size: 12px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--coral-dark);

  font-weight: 600;

  margin-bottom: 14px;

  display: inline-block;
}

/* =========================
   HEADING
========================= */

.contact-copy h2 {
  font-family: var(--ep-font-display);

  font-weight: 500;

  font-size: 44px;

  line-height: 1.1;

  color: var(--navy);

  margin-bottom: 18px;
}
.contact-copy h2 span {
  font-weight: 700;
}

/* =========================
   DESCRIPTION
========================= */

.contact-copy p {
  font-size: 15.5px;

  line-height: 1.7;

  color: var(--ink-soft);

  max-width: 440px;

  margin-bottom: 30px;
}

/* =========================
   EMAIL
========================= */

.contact-meta {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 26px;

  color: var(--navy);

  font-size: 14px;

  font-weight: 500;
}

.contact-meta svg {
  width: 16px;
  height: 16px;

  flex: none;
}

/* =========================
   CONNECT BUTTON
========================= */

.btn-connect {
  position: relative;

  display: inline-block;

  padding: 15px 34px;

  border-radius: 32px;

  border: none;

  cursor: pointer;

  font-family: "Inter", sans-serif;

  font-size: 14.5px;

  font-weight: 600;

  letter-spacing: 0.01em;

  color: #fff;

  background: var(--coral);

  overflow: hidden;

  isolation: isolate;

  text-decoration: none;

  transition:
    color 0.45s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease;

  box-shadow: 0 8px 20px -8px rgba(28, 40, 86, 0.35);
  max-width: 200px;
}

/* Button text */

.btn-label {
  position: relative;

  z-index: 2;
}

/* =========================
   BUTTON HOVER FILL
========================= */

.btn-connect::after {
  content: "";

  position: absolute;

  top: 0;
  left: -30%;

  height: 100%;
  width: 160%;

  background: var(--navy);

  transform: skewX(-18deg) translateX(-100%);

  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);

  z-index: 1;
}

.btn-connect:hover::after,
.btn-connect:focus-visible::after {
  transform: skewX(-18deg) translateX(0%);
}

/* =========================
   BUTTON HOVER
========================= */

.btn-connect:hover,
.btn-connect:focus-visible {
  color: #fff;

  transform: translateY(-2px);

  box-shadow: 0 12px 26px -8px rgba(28, 40, 86, 0.5);
}

/* =========================
   BUTTON FOCUS
========================= */

.btn-connect:focus-visible {
  outline: 2px solid var(--navy);

  outline-offset: 3px;
}

/* =========================
   TABLET / MOBILE
========================= */

@media (max-width: 860px) {
  .contact-inner {
    grid-template-columns: 1fr;

    padding: 48px 24px;
  }

  .illustration {
    order: 2;
  }

  .contact-copy {
    order: 1;
  }

  .contact-copy h2 {
    font-size: 34px;
  }
}

/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 480px) {
  .contact-inner {
    padding: 40px 20px;
  }

  .contact-copy h2 {
    font-size: 32px;
  }

  .contact-copy p {
    font-size: 14.5px;
  }

  .btn-connect {
    padding: 14px 28px;
  }

  .illustration svg {
    max-width: 340px;
  }
}

/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce) {
  .contact-section::before {
    animation: none;

    transform: scaleX(1);
  }

  .illustration,
  .contact-copy {
    animation: none;

    opacity: 1;
  }

  .btn-connect {
    transition: none;
  }
}
/* =========================================================
   EDITING PRESS — HERO SECTION
   Screenshot-matched layout
   ========================================================= */

/* =========================================================
   EDITING PRESS — HERO / HOME SECTION
   Reference-matched layout
   ========================================================= */

#home-section.home-section {
  position: relative;
  width: 100%;
  background: var(--ep-paper);
}

/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

#home-section .hs-content {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 100%;
}

#home-section .hs-content-inner {
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 42px 50px 35px;
}

/* =========================================================
   LEFT CONTENT
   ========================================================= */

#home-section .hs-copy {
  width: 40%;
  padding-top: 10px;
}

/* ---------------------------------------------------------
   Eyebrow
   --------------------------------------------------------- */

#home-section .hs-eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
  color: var(--ep-teal);
  font-family: var(--ep-font-body);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.27em;
  line-height: 1;
  text-transform: uppercase;
}

#home-section .eyebrow-line {
  display: block;
  width: 58px;
  height: 2px;
  flex: 0 0 58px;
  background: linear-gradient(90deg, var(--ep-teal), var(--ep-coral));
  border-radius: 999px;
}

/* ---------------------------------------------------------
   Main heading
   --------------------------------------------------------- */

#home-section .hs-text-2 {
  margin: 0 0 15px 0;
  width: 100%;
  color: var(--ep-ink);
  font-family: "Newsreader", Georgia, serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: -0.045em;
  text-transform: none;
  text-align: left;
}

/*
 * IMPORTANT:
 * Each line remains on its own line.
 * No overflow into illustration.
 */

#home-section .hs-text-2 .line {
  display: block;
  width: 100%;
  overflow: visible;
}

#home-section .hs-text-2 .line > span {
  display: inline-block;
  white-space: nowrap;
}

/* "and" gets normal visual spacing */

#home-section .hs-text-2 .hs-and {
  margin-top: 3px;
}

/* ---------------------------------------------------------
   Underline
   --------------------------------------------------------- */

#home-section .hs-underline {
  width: 70px;
  height: 10px;

  margin-top: 30px;
  margin-bottom: 22px;

  overflow: hidden;
}

#home-section .hs-underline svg {
  display: block;
  width: 100%;
  height: 100%;
}

#home-section .hs-underline .shimmer {
  stroke-dasharray: 70 210;
  animation: heroUnderline 3.5s ease-in-out infinite;
}

@keyframes heroUnderline {
  0% {
    stroke-dashoffset: 280;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  55% {
    opacity: 0.9;
  }

  100% {
    stroke-dashoffset: -280;
    opacity: 0;
  }
}

/* ---------------------------------------------------------
   Description
   --------------------------------------------------------- */

#home-section .hs-description {
  width: 100%;
  max-width: 520px;

  margin: 0;

  color: var(--ep-ink-soft);

  font-family: var(--ep-font-body);

  font-size: 18px;
  font-weight: 400;

  line-height: 1.85;
  letter-spacing: -0.01em;

  text-align: left;
}

/* =========================================================
   RIGHT ILLUSTRATION
   ========================================================= */

/* ---------------------------------------------------------
   ART FRAME — large, borderless, no card chrome (PKB's hero
   art sits directly on the white canvas with no box around it).
   Kept a bit shy of PKB's own scale on purpose: our stand-in
   stock video is only 640x360 source, and blowing it up much
   further starts showing compression blockiness. */

.hs-content-inner > div{
    width: 58%
}

/* ---------------------------------------------------------
   Moving frame light
   --------------------------------------------------------- */

#home-section .frame-sweep {
  position: absolute;
  z-index: 7;

  top: -20%;
  left: -40%;

  width: 30%;
  height: 150%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.72),
    transparent
  );

  transform: rotate(18deg);

  opacity: 0.35;

  pointer-events: none;

  animation: frameSweep 7s ease-in-out infinite;
}

@keyframes frameSweep {
  0% {
    left: -45%;
    opacity: 0;
  }

  15% {
    opacity: 0.35;
  }

  48% {
    left: 115%;
    opacity: 0.18;
  }

  100% {
    left: 115%;
    opacity: 0;
  }
}

/* ---------------------------------------------------------
   Frame corners
   --------------------------------------------------------- */

#home-section .frame-corner {
  position: absolute;
  z-index: 10;

  width: 52px;
  height: 52px;

  pointer-events: none;
}

#home-section .corner-tl {
  top: 24px;
  left: 28px;

  border-top: 1px solid rgba(79, 189, 160, 0.75);
  border-left: 1px solid rgba(79, 189, 160, 0.75);
}

#home-section .corner-tr {
  top: 24px;
  right: 28px;

  border-top: 1px solid rgba(79, 189, 160, 0.38);
  border-right: 1px solid rgba(79, 189, 160, 0.38);
}

#home-section .corner-br {
  bottom: 24px;
  right: 28px;

  border-bottom: 1px solid rgba(79, 189, 160, 0.75);
  border-right: 1px solid rgba(79, 189, 160, 0.75);
}

#home-section .corner-bl {
  bottom: 24px;
  left: 28px;

  border-bottom: 1px solid rgba(79, 189, 160, 0.38);
  border-left: 1px solid rgba(79, 189, 160, 0.38);
}

/* ---------------------------------------------------------
   Top-right dot
   --------------------------------------------------------- */

#home-section .hs-art-dot {
  position: absolute;

  z-index: 11;

  top: 42px;
  right: 44px;

  width: 18px;
  height: 18px;

  border-radius: 50%;

  background: #4fbda0;

  box-shadow:
    0 0 0 9px rgba(79, 189, 160, 0.08),
    0 0 0 18px rgba(79, 189, 160, 0.035),
    0 0 24px rgba(79, 189, 160, 0.35);

  animation: artDotPulse 3s ease-in-out infinite;
}

@keyframes artDotPulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

/* ---------------------------------------------------------
   Illustration SVG
   --------------------------------------------------------- */

#home-section .hs-art-frame > svg {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 48%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}

.hs-art-frame video{
    width: 100%;
}

/* ---------------------------------------------------------
   SVG drawing animation
   --------------------------------------------------------- */

#home-section .stroke-draw {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);

  animation: strokeDraw 1.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes strokeDraw {
  to {
    stroke-dashoffset: 0;
  }
}

#home-section .mark {
  opacity: 0;

  transform-box: fill-box;
  transform-origin: center;

  animation: markReveal 0.7s ease forwards;
}

@keyframes markReveal {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.8);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Subtle organic movement */

#home-section .sway {
  transform-box: fill-box;
  transform-origin: center;

  animation: illustrationSway 6s ease-in-out infinite;
}

@keyframes illustrationSway {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -5px, 0);
  }
}

/* ---------------------------------------------------------
   Bottom label
   --------------------------------------------------------- */

#home-section .hs-art-label {
  position: absolute;

  z-index: 12;

  left: 50%;
  bottom: 38px;

  transform: translateX(-50%);

  width: max-content;
  min-width: 380px;

  padding: 20px 32px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.88);

  border: 1px solid rgba(79, 189, 160, 0.14);

  box-shadow:
    0 12px 28px rgba(27, 58, 62, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

  color: #294d51;

  font-family: var(--ep-font-body);

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 0.22em;
  line-height: 1;

  text-align: center;
  text-transform: uppercase;

  white-space: nowrap;
}

#home-section .hs-art-label i {
  color: #4fbda0;
  font-style: normal;
  padding: 0 5px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1350px) {

  #home-section .hs-text-2 {
    font-size: clamp(52px, 3.8vw, 68px);
  }
}

/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 1050px) {
    .hs-content-inner > div{
        width: 56%;
    }
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 650px) {
  #home-section.home-section {
    min-height: auto;
    height: auto;
  }

  #home-section .hs-content-inner {
    width: calc(100% - 44px);
    padding: 65px 0 55px;
  }

  #home-section .hs-copy {
    max-width: 100%;
    padding-top: 55px;
  }

  #home-section .hs-eyebrow {
    font-size: 13px;
    letter-spacing: 0.2em;
    gap: 12px;
    margin-bottom: 22px;
  }

  #home-section .eyebrow-line {
    width: 40px;
    flex-basis: 40px;
  }

  #home-section .hs-text-2 {
    font-size: clamp(42px, 12vw, 58px);
    line-height: 1;
  }

  #home-section .hs-text-2 .line > span {
    white-space: normal;
  }

  #home-section .hs-description {
    font-size: 16px;
    line-height: 1.7;
  }

  #home-section .hs-illustration {
    width: min(100%, 440px);
    height: 540px;
  }
  
  #home-section .hs-art-frame > svg {
    width: 390px;
    height: 390px;
    max-width: 95%;
  }

  #home-section .hs-art-label {
    min-width: 0;
    width: calc(100% - 60px);

    padding: 17px 18px;

    font-size: 10px;
    letter-spacing: 0.16em;

    bottom: 28px;
  }

  #home-section .frame-corner {
    width: 38px;
    height: 38px;
  }

  #home-section .hs-art-dot {
    top: 30px;
    right: 30px;
  }
  #home-section .hs-art-video {
    object-fit: contain;
}
.news-head {
    display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 34px;
        margin-bottom: 28px;
}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  #home-section .frame-sweep,
  #home-section .hs-art-dot,
  #home-section .sway,
  #home-section .stroke-draw,
  #home-section .mark,
  #home-section .hs-underline .shimmer {
    animation: none !important;
  }

  #home-section .stroke-draw {
    stroke-dashoffset: 0 !important;
  }

  #home-section .mark {
    opacity: 1 !important;
  }
}

/*--------------------------------------------------------
  "What Sets Us Apart" — PKB-style full-width navy stat band,
  reusing the same real figures as the Facts section above
--------------------------------------------------------*/
.ep-apart-section {
  background: var(--ep-ink);
  padding: 72px 0;
}
.ep-apart-heading {
  font-family: var(--ep-font-display);
  font-size: 30px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  margin: 0 0 48px;
}
.ep-apart-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.ep-apart-item {
  text-align: center;
}
.ep-apart-number {
  font-family: var(--ep-font-display);
  font-size: 44px;
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 16px;
}
.ep-apart-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  margin: 0 0 16px;
}
.ep-apart-label {
  font-family: var(--ep-font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
@media (max-width: 700px) {
  .ep-apart-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }
}
/* Heading */
.heading-bar {
  background: #ffffff;
  text-align: center;
  padding: 40px 20px;
}

.heading-bar h2 {
  margin: 0;
  font-size: 2.4rem;
  color: #26265c;
  font-weight: 400;
}

/* Main section */
.section-apart {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

/* Pink background animation */
.bg-sweep {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #fbd0c4;
  z-index: 0;
}

.bg-sweep.animate {
  animation: sweepIn 1.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes sweepIn {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

/* Content */
.content {
 position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* max-width: 1200px; */
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 40px;
    padding: 40px 6vw;
}

/* Flower */
.flower-wrap {
  flex: 0 0 auto;
  /* ep-site-v12: 480px until v11 */
  width: min(42vw, 660px);
}

.flower-wrap img {
  width: 100%;
  display: block;
}

/* Text */
.text-block {
  flex: 1 1 320px;
  max-width: 500px;
}

.text-block h3 {
  font-size: 40px;
  color: #26265c;

  margin: 0 0 18px 0;
  font-weight: 400;
}

.text-block p {
  font-size: 18px;
  line-height: 1.6;

  color: #4a4a4a;

  margin: 0 0 30px 0;
}

/* Button */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 34px;
  min-width: 140px;

  border: 0;
  border-radius: 50px;

  background: var(--ep-coral);
  color: #fff;

  font-family: inherit;
  font-size: 16px;
  font-weight: 500;

  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}

/* NAVY DIAGONAL SHAPE — shared by every coral pill CTA on the site
   (.cta, the Funding/Pro Bono accordion "Learn More"/"Apply" pills,
   and the payments "Continue" button): a skewed navy shape sweeps in
   from the left on hover instead of a flat colour swap. Width is a
   percentage of the button itself so it fully covers buttons of any
   size, not just the one this pattern was first designed for. */
.cta::before,
.ep-accordion-cta::before,
#stripe-non-us button::before,
.ep-payment-card .btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -20%;
  left: -79%;
  width: 70%;
  height: 140%;
  background: var(--ep-ink);
  transform: skewX(50deg);
  transition: width 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}

/* HOVER */
.cta:hover::before,
.ep-accordion-cta:hover::before,
#stripe-non-us button:hover::before,
.ep-payment-card .btn:hover::before {
  width: 250%;
}
/* Mobile */
@media (max-width: 700px) {

  .content {
    flex-direction: column;
    text-align: center;
  }

  .flower-wrap {
    width: 70vw;
  }

  .text-block {
    max-width: 100%;
  }

}

/* =========================================================
   LAURA BASSI SCHOLARSHIP MODAL (bassi.php)
   The form markup is a frozen, per-element pixel export
   (css/bassi.css / bassi.min.css) — every box has its own
   hardcoded width/height via numbered IDs, so we only recolor
   and reshape it here (fonts, colors, radii, button style) to
   match the rest of the site, rather than touching its layout.
   ========================================================= */

#smallModal {
  font-family: var(--ep-font-body);
}

#smallModal #MAIN_4,
#smallModal #DIV_5 {
  background: var(--ep-paper) !important;
  box-shadow: 0 20px 50px -12px rgba(28, 40, 86, 0.35) !important;
}

#smallModal #HEADER_6 {
  background: var(--ep-paper-alt) !important;
}

#smallModal #H1_16 {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 600 !important;
  color: var(--ep-ink) !important;
  text-shadow: none !important;
}

/* Text / email inputs */
#smallModal input[type="email"],
#smallModal input[type="text"] {
  font-family: var(--ep-font-body) !important;
  color: var(--ep-ink) !important;
  background-color: var(--ep-paper) !important;
  border: 1px solid var(--ep-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
#smallModal input[type="email"]:focus,
#smallModal input[type="text"]:focus {
  outline: none !important;
  border-color: var(--ep-coral) !important;
  box-shadow: 0 0 0 3px rgba(248, 169, 147, 0.25) !important;
}
#smallModal input[type="email"]::placeholder,
#smallModal input[type="text"]::placeholder {
  color: var(--ep-ink-soft) !important;
}

/* Upload-documents pill button */
#smallModal .fileinput-button {
  font-family: var(--ep-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  background: var(--ep-coral) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Position / Institution / Department group — drop the flat grey
   panel these three fields and the fee-waiver checkbox sit in */
#smallModal #DIV_354 > div[style*="background-color"] {
  background: transparent !important;
}
#smallModal .paymentInput[type="text"] {
  font-family: var(--ep-font-body) !important;
  color: var(--ep-ink) !important;
  background-color: var(--ep-paper) !important;
  border: 1px solid var(--ep-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
#smallModal .paymentInput[type="text"]:focus {
  outline: none !important;
  border-color: var(--ep-coral) !important;
  box-shadow: 0 0 0 3px rgba(248, 169, 147, 0.25) !important;
}

/* Fee-waiver checkbox */
#smallModal input[type="checkbox"] {
  accent-color: var(--ep-teal) !important;
}
#smallModal .form-check label {
  font-family: var(--ep-font-body) !important;
  color: var(--ep-ink-soft) !important;
}

/* Next / submit button */
#smallModal button[type="submit"] {
  font-family: var(--ep-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  background: var(--ep-coral) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  box-shadow: none !important;
}
#smallModal button[type="submit"]:hover {
  background: var(--ep-teal-dark) !important;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

  .bg-sweep {
    animation: none !important;
    width: 100% !important;
  }

}

/* =========================================================
   ep-site-v2 (16 September 2026)
   ========================================================= */

/* Menu from 768 to 1023 px: narrower items so the menu clears the
   logo on one row; the EDITING PRESS wordmark is hidden up to 959 px. */
@media (min-width: 768px) and (max-width: 1023px) {
  .navbar-nav > li > a {
    padding-left: 7px;
    padding-right: 7px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .ep-services-toggle {
    gap: 3px;
  }
  .ep-nav-caret svg {
    width: 12px;
    height: 12px;
  }
}
@media (min-width: 768px) and (max-width: 959px) {
  .navbar-brand p {
    display: none;
  }
}

/* Headings in these blocks are written in title case in the HTML;
   styles.css capitalises every word (h1-h6), which turned "of", "to"
   and "and" into "Of", "To" and "And". */
.heading-bar h2,
.detail-body h2,
.detail-body h3,
.ep-page-body h2 {
  text-transform: none;
}

/* Home page band: headings in the display face used by the other
   section headings */
.heading-bar h2 {
  font-family: var(--ep-font-display);
  font-size: 44px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ep-ink);
}
.text-block h3 {
  font-family: var(--ep-font-display);
  font-size: 38px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ep-ink);
}
@media (max-width: 700px) {
  .heading-bar h2 {
    font-size: 32px;
  }
  .text-block h3 {
    font-size: 30px;
  }
}
a.cta,
a.cta:hover,
a.cta:focus {
  color: #fff;
  text-decoration: none;
}

/* Photographs: home page hero, band and contact section; Translation */
.ep-photo,
#home-section .ep-hero-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.ep-hand-wrap .ep-photo {
  box-shadow: 0 18px 40px -18px rgba(28, 40, 86, 0.35);
}
.illustration .ep-photo {
  /* ep-site-v12: 480px until v11 */
  max-width: 660px;
  box-shadow: 0 18px 40px -18px rgba(28, 40, 86, 0.35);
}
@media (min-width: 1051px) {
  /* clear of the fixed menu bar */
  #home-section .ep-hero-photo {
    margin-top: 44px;
    /* ep-site-v12: the hero row is taller now, so on a short window the
       photograph gives way and the whole hero still fits under the menu bar.
       The limit is written as a width (the photograph is 2400 by 1800, so
       four thirds of the height it may take), because a max-height would
       squash the picture inside its box instead of making the box smaller. */
    width: min(100%, calc((100vh - 190px) * 4 / 3));
  }
}
/* ep-site-v12: from 1400px, where the page is centred, the hero photograph
   takes more of the row. The heading's longest line ("Preserving the human")
   needs 345px at 44px, so the text column keeps enough room at every width.
   Below 1400px the row keeps the 40/58 split of v11: the buttons under the
   heading cannot be squeezed below 407px, and the two columns would wrap. */
@media (min-width: 1400px) {
  #home-section .hs-copy {
    width: 30%;
  }
  #home-section .hs-illustration {
    width: 68%;
  }
}
@media (max-width: 650px) {
  #home-section .hs-illustration {
    height: auto;
  }
  /* the text column was 56% wide on phones */
  #home-section .hs-copy {
    width: 100%;
  }
  /* keeps "Preserving the human" on one line (about 8.5 em wide) */
  #home-section .hs-text-2 {
    font-size: min(58px, calc((100vw - 44px) / 9));
  }
}

/* bassi.php: Bassi Foundation Press links */
.detail-body .ep-arrow-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 36px;
}
.detail-body a.ep-arrow-link {
  color: var(--ep-coral-dark);
  border-bottom: none;
}

/* bassi.php: Bassi Scholars, by round (details/summary, no script) */
.ep-scholars {
  margin: 8px 0 44px;
  border-top: 1px solid var(--ep-line);
}
.ep-scholars summary {
  list-style: none;
  cursor: pointer;
}
.ep-scholars summary::-webkit-details-marker {
  display: none;
}
.ep-scholars summary:focus-visible {
  outline: 2px solid var(--ep-ink);
  outline-offset: 2px;
}
.ep-scholars-round {
  border-bottom: 1px solid var(--ep-line);
}
.ep-scholars-round > summary {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 4px;
  color: var(--ep-ink);
}
.ep-scholars-round-title {
  flex: 1 1 auto;
  font-family: var(--ep-font-display);
  font-size: 22px;
  line-height: 1.3;
}
.ep-scholars-count {
  font-family: var(--ep-font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ep-ink-soft);
  white-space: nowrap;
}
.ep-scholars-round > summary::after,
.ep-scholar > summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 18px;
  font-family: var(--ep-font-body);
  font-size: 20px;
  line-height: 1;
  text-align: center;
  color: var(--ep-coral-dark);
}
.ep-scholars-round[open] > summary::after,
.ep-scholar[open] > summary::after {
  content: "\2212";
}
.ep-scholars-list {
  margin: 0 0 20px 4px;
  padding-left: 16px;
  border-left: 2px solid var(--ep-coral);
}
.ep-scholar + .ep-scholar {
  border-top: 1px solid var(--ep-line);
}
.ep-scholar > summary {
  position: relative;
  padding: 11px 30px 11px 0;
  font-family: var(--ep-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ep-ink);
}
.ep-scholar > summary::after {
  position: absolute;
  top: 12px;
  right: 4px;
}
.ep-scholar-name {
  display: block;
  font-weight: 600;
}
.ep-scholar-meta {
  display: block;
  color: var(--ep-ink-soft);
}
.ep-scholar-body {
  padding: 2px 0 16px;
}
.detail-body .ep-scholar-body p {
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 12px;
}
.detail-body .ep-scholar-body p:last-child {
  margin-bottom: 0;
}

/* Lists in the body of the service pages and bassi.php: set like the
   paragraphs around them */
.detail-body > ul {
  margin: 0 0 24px;
  padding-left: 22px;
}
.detail-body > ul > li {
  margin-bottom: 8px;
  font-family: var(--ep-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ep-ink-soft);
}

/* =========================================================
   ep-site-v3 (16 September 2026)
   ========================================================= */

/* The inscription on Translation is served through <picture> (WebP with
   a JPEG fallback). The wrapper takes no box of its own, so the <img>
   keeps the layout it had in ep-site-v2. */
.ep-pic {
  display: contents;
}

/*--------------------------------------------------------
  ep-site-v8 (17 September 2026): centred page, as on
  bassi.foundation. From 1400px up, the menu bar and the home
  page hero keep to the width of the content containers
  (1240px, and 1400px from 1600px), so the page stays in the
  centre and a wider window only widens the margins. The
  containers no longer widen to 1600px at 1920px. The band
  under "Human Editing, Start to Finish" is at most 1200px
  wide, like the Contact block. Section backgrounds still run
  the full width of the window.

  ep-site-v10 removed this block. ep-site-v11 puts it back
  (client, 17 September 2026): the centred layout is what is
  wanted, so that a wider window only widens the margins at
  the edges. tests/test_v11_ui.py fails if any of it goes
  missing again.
--------------------------------------------------------*/
@media (min-width: 1920px) {
  .container {
    width: 1600px;
  }
}
@media (min-width: 1400px) {
  .mainMenuWrapper,
  #home-section .hs-content-inner {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  /* the text starts at the column edge and the photograph ends at the
     other edge (the theme gives both automatic side margins) */
  #home-section .hs-copy {
    margin-left: 0;
  }
  #home-section .hs-illustration {
    margin-right: 0;
  }
  .section-apart .content {
    max-width: 1200px;
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 1600px) {
  .mainMenuWrapper,
  #home-section .hs-content-inner {
    max-width: 1400px;
  }
}
/* ep-site-v12: from 1920px the centred column is 1600px wide, so the
   photographs can be larger. The margins at the edges are 160px at 1920px
   and grow with the window. */
@media (min-width: 1600px) {
  /* the band and the Contact block widen with the column, so the hands in
     them can be larger */
  .section-apart .content {
    max-width: 1400px;
  }
  .contact-inner {
    max-width: 1400px;
  }
}
@media (min-width: 1920px) {
  .mainMenuWrapper,
  #home-section .hs-content-inner {
    max-width: 1600px;
  }
}

/* ep-site-v8: message under the Continue button on payments.html */
.ep-payment-message {
  margin: 14px 0 0;
  color: #a4262c;
  font-size: 14px;
  line-height: 1.5;
}
.ep-payment-message[hidden] {
  display: none;
}

/*--------------------------------------------------------
  ep-site-v9 (17 September 2026)
--------------------------------------------------------*/
/* Home page: the hands in the band and in Contact sit on the colour of
   their section (transparent WebP, with a JPEG on the section colour as
   the fallback), so the white card and its frame shadow are gone. */
.ep-hand-wrap .ep-photo,
.illustration .ep-photo {
  box-shadow: none;
  border-radius: 0;
}
/* Photographs in the left column of Bassi, Thorough Editing, General
   Proofreading, Institutional Editing and Translation. Since ep-site-v11
   they all sit under the text of that column; on the first four they fade
   in and out with the scrolling, and Translation's stays in view. */
.detail-sticky-video.detail-sticky-photo {
  aspect-ratio: auto;
  border-radius: 0;
  overflow: visible;
}
.detail-sticky-photo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  margin: 0 auto;
}
.detail-sticky-photo-static {
  margin-top: 28px;
}
/* ep-site-v12: the photograph takes the room the column has left once the
   text above it is laid out. The page script measures that text and sets
   --ph; without the script the page falls back to the window height less a
   fixed allowance, as in v11. */
.detail-sticky-photo-static img {
  max-height: max(var(--ph, calc(100vh - 380px)), 220px);
}
/* Castelli is a photograph with its own background (the niche) */
.detail-sticky-photo.is-framed img {
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(28, 40, 86, 0.35);
}
@media (max-width: 991px) {
  /* the columns stack: the photograph follows the title */
  .detail-sticky-video.detail-sticky-photo {
    margin-top: 24px;
  }
  .detail-sticky-photo {
    opacity: 1 !important;
  }
  .detail-sticky-photo img,
  .detail-sticky-photo-static img {
    max-width: min(100%, 480px);
    max-height: 60vh;
  }
}
/* A definite width (from the height-to-width ratio --r in the style
   attribute) keeps the space for the photograph while it loads, so the
   text below does not move. */
@supports (width: min(1px, 2px)) {
  .detail-sticky-photo img {
    width: min(100%, calc((100vh - 150px) / var(--r)));
    max-height: none;
  }
  .detail-sticky-photo-static img {
    width: min(100%, calc(max(var(--ph, calc(100vh - 380px)), 220px) / var(--r)));
  }
  @media (max-width: 991px) {
    .detail-sticky-photo img,
    .detail-sticky-photo-static img {
      width: min(100%, 480px, calc(60vh / var(--r)));
    }
  }
}
/*--------------------------------------------------------
  ep-site-v10 (17 September 2026)
--------------------------------------------------------*/
/*--------------------------------------------------------
  ep-site-v11 (17 September 2026)
--------------------------------------------------------*/
/* The photograph in the left column sits under the text and fades in as
   the visitor scrolls down, out again on the way back up (client, 17
   September 2026: "The image should fade in and out below the text that
   appears on the left side, and not over the text"). The page script sets
   the opacity of the photograph on every frame, on an eased curve, so
   neither end is abrupt. The text keeps its place and its full opacity,
   and the space for the photograph is held from the start, so nothing on
   the page moves. Below 992px the columns stack and the photograph is
   shown. Without the script the photograph stays hidden, as in v9. */
.detail-sticky-photo-fade {
  opacity: 0;
  transform: none;
  transition: none;
}
/* ep-site-v13: the page script sets the opacity itself, one step at a time,
   and no transition is asked of the browser. In v12 a transition of half a
   second was restarted on every frame, so the picture lagged behind the page
   and then caught up in one movement when the scrolling stopped. */
@media (max-width: 991px) {
  .detail-sticky-photo-fade {
    opacity: 1 !important;
  }
}
/* Menu bar: the words of the brand sit on the line of the menu items. The
   wordmark's line box was 15px from the top of the 66px bar, which put it
   about 3px above the menu items; the caret of the Services item made that
   item an inline-flex box, whose baseline sat 1px below the others. */
.navbar-brand p {
  padding-top: 17.5px;
  padding-bottom: 12.5px;
}
/* ep-site-v13: the hand-drawn logo. The drawing is wider than the mark it
   replaces, so the box keeps its height and takes the width the drawing
   needs. */
.navbar-brand img,
.ep-facts-brand img {
  width: auto;
  height: 36px;
}
.ep-footer-brand-mark {
  width: auto;
  height: 60px;
}
.ep-services-toggle {
  display: flex !important;
  justify-content: center;
}
/* Translation's text now starts with a heading */
.detail-body > h2:first-child {
  margin-top: 0;
}