/* =====================================================================
   /css/epi-page.css
   Shared design language for Episcript solution pages.

   Everything sits under .epi-page so it cannot touch the header, the
   footer or any legacy page.

   IN HERE: colours, type, spacing, backgrounds, buttons, links,
   tables, lists, cards, accordions, common list markers.

   NOT IN HERE: section layouts. Rails, timelines, split panels, scan
   grids and problem grids are written per page, so pages can still
   look different from one another.

   ---------------------------------------------------------------
   THE COLOUR RULE, which everything below follows:

   ORANGE marks what the reader should DO next.
     Buttons, eyebrow labels, heading rules, read-more links, and the
     one active step in a sequence.

   NAVY AND BLUE mark STRUCTURE.
     Icons, bullet markers, step numerals, chevrons, dividers.

   Orange used for decoration stops meaning anything. If it marks
   something the reader simply scrolls past, it should be blue.
   ---------------------------------------------------------------
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
.epi-page{
  --navy:#0b2545;
  --navy-2:#123a6b;
  --blue:#1c4e9c;
  --blue-soft:#5b83c4;      /* markers and icons on light backgrounds */
  --sky:#eef4fb;
  --sky-2:#dce8f6;          /* slightly deeper tint, for icon wells */

  --orange:#f47b20;
  --amber:#ffb572;

  --teal:#127d78;           /* second accent: confirmations, integrations */
  --teal-soft:#e3f2f1;

  --ink:#1d2733;
  --grey:#5c6a7a;
  --line:#e3e9f0;
  --white:#fff;
  --tick:#2fa96b;
  --cross:#c2ccd8;

  --dark-grad:linear-gradient(120deg,#0b2545 0%,#123a6b 55%,#1c4e9c 100%);
  --dark-text:#c3d2e6;

  color:var(--grey);
}


/* ---------------------------------------------------------------------
   2. TYPOGRAPHY
   --------------------------------------------------------------------- */
.epi-page p{
  font-size:1.0625rem;
  line-height:1.75;
  margin:0 0 1.15rem;
  color:var(--grey);
}
.epi-page p:last-child{margin-bottom:0;}

.epi-page .lead-copy{
  font-size:1.1875rem;
  line-height:1.7;
  color:var(--ink);
}

.epi-page h1,
.epi-page h2,
.epi-page h3,
.epi-page h4{
  color:var(--navy);
  margin:0 0 .75rem;
  font-weight:700;
  line-height:1.15;
}
.epi-page h1{font-size:clamp(2rem,4.6vw,3.15rem);letter-spacing:-.02em;}
.epi-page h2{font-size:clamp(1.65rem,3.1vw,2.35rem);letter-spacing:-.015em;margin-bottom:1rem;}
.epi-page h3{font-size:1.1875rem;line-height:1.35;margin-bottom:1rem;}
.epi-page h4{font-size:1.0625rem;margin-bottom:.6rem;}

.epi-page :focus-visible{outline:3px solid var(--orange);outline-offset:3px;}


/* ---------------------------------------------------------------------
   3. LINKS
   Underline body links only, never buttons, cards or headings.
   --------------------------------------------------------------------- */
.epi-page a{color:var(--blue);text-decoration:none;}
.epi-page a:hover{color:var(--navy);}

.epi-page p a,
.epi-page li a,
.epi-page dd a,
.epi-page td a{
  text-decoration:underline;
  text-underline-offset:3px;
}

.epi-page a.epibutton,
.epi-page a.epibutton_small,
.epi-page a.epi-ghost,
.epi-page a.epi-phone-btn,
.epi-page a.epi-card,
.epi-page a.epi-tile,
.epi-page h1 a,
.epi-page h2 a,
.epi-page h3 a,
.epi-page h4 a,
.epi-page a.epi-card *,
.epi-page a.epi-tile *{
  text-decoration:none !important;
}

.epi-dark a{color:var(--amber);}
.epi-dark a:hover{color:#fff;}


/* ---------------------------------------------------------------------
   4. SECTIONS AND BACKGROUNDS
   Three treatments only: white, sky tint, navy gradient.
   --------------------------------------------------------------------- */
.epi-sec{padding:84px 0;position:relative;}
.epi-sec--tight{padding:64px 0;}
.epi-sec--flush{padding-top:0;}

.epi-sky{background:var(--sky);}

.epi-dark{background:var(--dark-grad);color:var(--dark-text);}
.epi-dark h1,
.epi-dark h2,
.epi-dark h3,
.epi-dark h4{color:#fff;}
.epi-dark p{color:var(--dark-text);}
.epi-dark .lead-copy{color:#fff;}
.epi-dark dt{color:#fff;}
.epi-dark dd{color:var(--dark-text);}
.epi-dark .epi-ticks li{color:var(--dark-text);}
.epi-dark .epi-rule{background:var(--amber);}


/* ---------------------------------------------------------------------
   5. SECTION HEADINGS
   Orange belongs here: the eyebrow and the rule are the page's
   signature, and they are the main place the colour should appear.
   --------------------------------------------------------------------- */
.epi-page .epi-eyebrow,
.epi-page p.epi-eyebrow,
.epi-page span.epi-eyebrow,
.epi-page div.epi-eyebrow{
  display:inline-block;
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:.9rem;
  line-height:1.3;
}
.epi-dark .epi-eyebrow,
.epi-dark p.epi-eyebrow,
.epi-dark span.epi-eyebrow,
.epi-dark div.epi-eyebrow{color:var(--amber);}

.epi-rule{
  display:block;
  width:56px;height:4px;
  background:var(--orange);
  border-radius:2px;
  margin:0 0 1.4rem;
}
.epi-rule--c{margin-left:auto;margin-right:auto;}

.epi-measure{max-width:680px;}
.epi-center{text-align:center;}
.epi-center .epi-measure{margin-left:auto;margin-right:auto;}
.epi-narrow{max-width:840px;margin-left:auto;margin-right:auto;}
.epi-wide{max-width:1080px;margin-left:auto;margin-right:auto;}

/* Consistent gap between a heading block and whatever follows it,
   so pages do not have to remember a utility class. */
.epi-sec .epi-center + ul,
.epi-sec .epi-center + ol,
.epi-sec .epi-center + div,
.epi-sec .epi-center + table,
.epi-sec .epi-center + p{
  margin-top:44px !important;
}


/* ---------------------------------------------------------------------
   6. BUTTONS
   --------------------------------------------------------------------- */
.epi-cta-row{
  display:flex;flex-wrap:wrap;
  gap:12px;align-items:center;
  margin-top:1.6rem;
}

/* custom.css puts a 10px bottom margin on .epibutton below 992px,
   which knocks it out of line inside a flex row. */
.epi-cta-row .epibutton,
.epi-cta-row .epibutton_small{
  margin-bottom:0;
  vertical-align:top;
}

.epi-center .epi-cta-row{justify-content:center;}
.epi-cta-row--end{justify-content:flex-end;}

.epi-ghost,
.epi-phone-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 20px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:4px;
  color:#fff !important;
  background:transparent;
  font-family:helvetica,sans-serif;
  font-weight:400;
  font-size:20px;
  line-height:1.5;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-decoration:none !important;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.epi-ghost:hover,
.epi-phone-btn:hover{
  background:#fff;color:var(--navy) !important;border-color:#fff;
}

.epi-ghost--light{border-color:var(--line);color:var(--navy) !important;}
.epi-ghost--light:hover{background:var(--navy);color:#fff !important;border-color:var(--navy);}

/* The phone number is already in the fixed header on desktop */
.epi-phone-btn{display:none;}
@media (max-width:991px){
  .epi-phone-btn{display:inline-flex;}
}

.epi-page .epibutton,
.epi-page .epibutton:hover,
.epi-page .epibutton:focus,
.epi-page .epibutton_small{
  color:#fff !important;
  opacity:1;
  text-shadow:none;
  text-decoration:none !important;
}


/* ---------------------------------------------------------------------
   7. TRUST ROW
   --------------------------------------------------------------------- */
.epi-trust{
  display:flex;flex-wrap:wrap;
  gap:10px 26px;
  margin-top:2.1rem;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:.9rem;color:var(--dark-text);
}
.epi-trust span{display:flex;align-items:center;gap:8px;}
.epi-trust i{color:var(--amber);}


/* ---------------------------------------------------------------------
   8. LISTS

   Markers are BLUE, not orange. A bullet is structure, not an action.
   --------------------------------------------------------------------- */
.epi-ticks{list-style:none;padding:0;margin:1.4rem 0 0;}
.epi-ticks li{
  position:relative;
  padding-left:30px;margin-bottom:12px;
  font-size:1rem;color:var(--ink);line-height:1.6;
}
.epi-ticks li::before{
  content:"";position:absolute;left:0;top:9px;
  width:9px;height:9px;
  background:var(--blue-soft);
  border-radius:2px;
}
.epi-dark .epi-ticks li::before{background:var(--amber);}

/* Green ticks where the list genuinely confirms something */
.epi-ticks--check li{padding-left:32px;}
.epi-ticks--check li::before{
  content:"\f00c";
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free",sans-serif;
  font-weight:900;
  background:none;width:auto;height:auto;
  top:2px;font-size:.85rem;
  color:var(--tick);
}

/* Definition lists, wrapped or plain */
.epi-dl{margin:0;}
.epi-dl > div{padding:16px 0;border-bottom:1px solid var(--line);}
.epi-dl > div:first-child{border-top:1px solid var(--line);}
.epi-dl dt{color:var(--navy);font-weight:700;font-size:1rem;margin-bottom:4px;}
.epi-dl dd{margin:0;font-size:.98rem;line-height:1.6;color:var(--grey);}

.epi-dl dd + dt{
  margin-top:16px;padding-top:16px;
  border-top:1px solid var(--line);
}

.epi-page dl:not(.epi-dl) dt{color:var(--navy);font-weight:700;margin-bottom:4px;}
.epi-page dl:not(.epi-dl) dd{margin:0 0 16px;}
.epi-page dl:not(.epi-dl) dd:last-child{margin-bottom:0;}


/* ---------------------------------------------------------------------
   9. NUMBERED SEQUENCES

   Numerals are navy at low opacity. Six orange numerals down a page
   reads as six calls to action, which is not what they are.
   --------------------------------------------------------------------- */
.epi-steps{counter-reset:epistep;list-style:none;margin:0;padding:0;}
.epi-steps li{position:relative;padding-left:62px;margin-bottom:26px;}
.epi-steps li:last-child{margin-bottom:0;}
.epi-steps li::before{
  counter-increment:epistep;
  content:counter(epistep,decimal-leading-zero);
  position:absolute;left:0;top:-8px;
  font-size:34px;font-weight:800;line-height:1;
  color:var(--navy);opacity:.24;
  letter-spacing:-.03em;
}
.epi-dark .epi-steps li::before{color:#fff;opacity:.32;}

/* A circular step marker, for rails and timelines.
   Plain steps are quiet; add .is-active to the current one, and that
   single orange marker then means something. */
.epi-step-dot{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  font-size:1.1rem;font-weight:700;
  background:var(--sky-2);
  color:var(--navy);
  border:1px solid var(--line);
}
.epi-dark .epi-step-dot{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.26);
  color:#fff;
}
.epi-step-dot.is-active,
.epi-dark .epi-step-dot.is-active{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
}


/* ---------------------------------------------------------------------
   10. ICON WELLS

   The rounded square behind a feature icon. Blue tint by default,
   teal for anything about connecting systems together.
   --------------------------------------------------------------------- */
.epi-mark{
  width:60px;height:60px;
  border-radius:14px;
  background:var(--sky-2);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.epi-mark img{width:36px;height:auto;}
.epi-mark i{font-size:24px;color:var(--blue);}

.epi-mark--teal{background:var(--teal-soft);}
.epi-mark--teal i{color:var(--teal);}

.epi-sky .epi-mark{background:#fff;border:1px solid var(--line);}
.epi-dark .epi-mark{background:rgba(255,255,255,.1);}
.epi-dark .epi-mark i{color:var(--amber);}


/* ---------------------------------------------------------------------
   11. CARDS
   --------------------------------------------------------------------- */
.epi-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:26px 24px;
  height:100%;
}
.epi-card h3{margin-bottom:1.55rem;}
.epi-card p{font-size:.97rem;}

.epi-card--top{border-top:3px solid var(--orange);}
.epi-card--accent{border-top:3px solid var(--orange);}

.epi-card--link{
  display:block;
  text-decoration:none !important;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.epi-card--link:hover{
  border-color:var(--blue);
  box-shadow:0 18px 34px -26px rgba(11,37,69,.6);
  transform:translateY(-3px);
}
.epi-card--link .epi-card-title{
  display:block;color:var(--navy);
  font-weight:700;font-size:1.05rem;margin-bottom:8px;
}
.epi-card--link:hover .epi-card-title{color:var(--blue);}

/* A read-more link IS an action, so this one stays orange */
.epi-card--link .epi-card-more{
  display:inline-block;margin-top:14px;
  color:var(--orange);font-weight:600;font-size:.92rem;
}
.epi-card--link:hover .epi-card-more{color:var(--navy);}

.epi-sky .epi-card{background:#fff;}
.epi-dark .epi-card{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
}
.epi-dark .epi-card h3{color:#fff;}


/* ---------------------------------------------------------------------
   12. TABLES
   The caption sits outside the bordered wrapper.
   --------------------------------------------------------------------- */
.epi-table-caption{
  font-size:.95rem;color:var(--grey);
  margin:0 0 14px;max-width:820px;
}
.epi-table-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:10px;background:#fff;
}
.epi-table{width:100%;min-width:620px;border-collapse:collapse;margin:0;background:#fff;}
.epi-table caption{
  caption-side:top;padding:0 0 14px;text-align:left;
  color:var(--grey);font-size:.95rem;
}
.epi-table th,
.epi-table td{
  padding:15px 18px;text-align:left;font-size:.96rem;
  vertical-align:top;border-bottom:1px solid var(--line);
}
.epi-table thead th{
  background:var(--navy);color:#fff;
  font-weight:600;font-size:.95rem;border-bottom:0;
}
.epi-table tbody th{color:var(--navy);font-weight:700;background:#fbfcfe;width:26%;}
.epi-table tbody tr:last-child th,
.epi-table tbody tr:last-child td{border-bottom:0;}
.epi-yes{color:var(--tick);margin-right:8px;}
.epi-no{color:var(--cross);margin-right:8px;}


/* ---------------------------------------------------------------------
   13. FAQ ACCORDION
   The chevron is blue. It marks state, not an action.
   --------------------------------------------------------------------- */
.epi-faq{border-top:1px solid var(--line);}
.epi-faq details{border-bottom:1px solid var(--line);}
.epi-faq summary{
  cursor:pointer;list-style:none;
  padding:20px 46px 20px 0;position:relative;
  font-weight:700;color:var(--navy);font-size:1.05rem;line-height:1.4;
  transition:color .18s ease;
}
.epi-faq summary:hover{color:var(--blue);}
.epi-faq summary::-webkit-details-marker{display:none;}
.epi-faq summary::after{
  content:"\f078";
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free",sans-serif;
  font-weight:900;
  position:absolute;right:6px;top:22px;
  font-size:.85rem;color:var(--blue-soft);
  transition:transform .2s ease,color .2s ease;
}
.epi-faq details[open] summary{color:var(--blue);}
.epi-faq details[open] summary::after{transform:rotate(180deg);color:var(--blue);}
.epi-faq details p{margin:0 0 18px;padding-right:46px;}


/* ---------------------------------------------------------------------
   14. DECORATIVE UTILITIES
   --------------------------------------------------------------------- */
.epi-dots{
  position:absolute;width:190px;height:190px;
  z-index:0;pointer-events:none;
  background-image:radial-gradient(var(--line) 1.4px,rgba(0,0,0,0) 1.4px);
  background-size:15px 15px;opacity:.9;
}
.epi-blob{
  position:absolute;border-radius:50%;
  filter:blur(6px);z-index:0;pointer-events:none;
  background:rgba(28,78,156,.07);
}
.epi-z{position:relative;z-index:1;}

.epi-media-framed{
  background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:22px;
  box-shadow:0 22px 45px -28px rgba(11,37,69,.45);
  max-width:100%;height:auto;
}
/* Media on a dark band never takes a border or a shadow */
.epi-dark img{border:0;box-shadow:none;background:transparent;}


/* ---------------------------------------------------------------------
   15. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width:991px){
  .epi-sec{padding:64px 0;}
  .epi-sec--tight{padding:52px 0;}
}
@media (max-width:767px){
  .epi-sec{padding:52px 0;}
  .epi-page p{font-size:1rem;}
  .epi-page .epi-eyebrow{font-size:.8125rem;}
  .epi-cta-row{gap:10px;}
	.epi-ghost,
  .epi-phone-btn{padding:10px 14px;font-size:18px;}
  .epi-dots{display:none;}
  .epi-card{padding:22px 20px;}
  .epi-steps li{padding-left:52px;}
  .epi-steps li::before{font-size:28px;}
  .epi-sec .epi-center + ul,
  .epi-sec .epi-center + ol,
  .epi-sec .epi-center + div,
  .epi-sec .epi-center + table,
  .epi-sec .epi-center + p{margin-top:32px !important;}
}

@media (prefers-reduced-motion:reduce){
  .epi-page *,
  .epi-page *::before,
  .epi-page *::after{transition:none !important;animation:none !important;}
  .epi-card--link:hover{transform:none;}
}