/* @import url('http://example.com/example_style.css'); */
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/
@import url('https://fonts.googleapis.com/css2?family=Inclusive+Sans:ital@0;1&display=swap');

@font-face {
  font-family: 'Epassi';
  src: url('https://26749098.fs1.hubspotusercontent-eu1.net/hubfs/26749098/Epassi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
:root {
  --ep-orange:          #F95F18;
  --ep-orange-hover:    #D94E0F;
  --ep-orange-light:    #FEF0E8;
  --ep-yellow:          #FFB600;
  --ep-purple:          #7600C0;
  --ep-brown-dark:      #611F00;
  --ep-brown-body:      #30363f;
  --ep-warm-white:      #FEF5E6;
  --ep-text-dark:       #4a4a4a;
  --ep-white:           #FFFFFF;
  --ep-gradient:        linear-gradient(180deg, #FFB600 0%, #F95F18 100%);
  --ep-gradient-border: linear-gradient(180deg, #FFB600 0%, #F95F18 100%)!important;
  --ep-brown-heading:   #411A11;
  --ep-font-heading:    'Epassi', Arial, sans-serif;!important 
  --ep-font-body:       'Inclusive Sans', Arial, sans-serif;!important 
  --ep-radius-btn:      8px;
  --ep-radius-img:      16px;
  --ep-transition:      0.2s ease;
}
body {
  font-family: var(--ep-font-body);
}

p,
li,
span,
a,
input,
textarea,
select,
label {
  font-family: var(--ep-font-body);!important
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ep-font-heading);!important
}
/* ── BUTTONS ───────────────────────────────────────────────────────────────── */
.ep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ep-font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: var(--ep-radius-btn);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ep-transition), color var(--ep-transition), border-color var(--ep-transition);
  border: 2px solid transparent;
  border-image: none !important;
  white-space: nowrap;
}

/* WHITE — white bg → orange on hover. Use on: dark/image backgrounds */
.ep-btn--white {
  background: var(--ep-white) !important;
  color: #411A11 !important;
  border-color: var(--ep-white) !important;
  border-image: none !important;
}
.ep-btn--white:hover {
  background: var(--ep-orange) !important;
  color: var(--ep-white) !important;
  border-color: var(--ep-orange) !important;
}

/* OUTLINE — white border/text → orange border/text on hover. Use on: dark/image backgrounds */
.ep-btn--outline {
  background: transparent !important;
  color: var(--ep-white) !important;
  border: 2px solid var(--ep-white) !important;
  border-image: none !important;
}
.ep-btn--outline:hover {
  background: transparent !important;
  color: var(--ep-orange) !important;
  border-color: var(--ep-orange) !important;
  border-image: none !important;
}

/* ORANGE — orange bg → darker orange on hover. Use on: light/warm-white backgrounds */
.ep-btn--orange {
  background: var(--ep-orange) !important;
  color: var(--ep-white) !important;
  border-color: var(--ep-orange) !important;
  border-image: none !important;
}
.ep-btn--orange:hover {
  background: var(--ep-orange-hover) !important;
  border-color: var(--ep-orange-hover) !important;
  color: var(--ep-white) !important;
}

/* WARM — orange outline → orange filled on hover. Use on: light/warm-white backgrounds */
.ep-btn--warm {
  background: transparent !important;
  color: #411A11 !important;
  border: 2px solid var(--ep-orange) !important;
  border-image: none !important;
}
.ep-btn--warm:hover {
  background: var(--ep-orange) !important;
  color: var(--ep-white) !important;
  border-color: var(--ep-orange) !important;
}

/* BROWN — dark brown bg → orange on hover. Use on: light/yellow backgrounds */
.ep-btn--brown {
  background: #411A11 !important;
  color: var(--ep-white) !important;
  border-color: #411A11 !important;
  border-image: none !important;
}
.ep-btn--brown:hover {
  background: var(--ep-orange) !important;
  color: var(--ep-white) !important;
  border-color: var(--ep-orange) !important;
}

/* PURPLE — purple bg → orange on hover. Use on: yellow/warm backgrounds */
.ep-btn--purple {
  background: var(--ep-purple) !important;
  color: var(--ep-white) !important;
  border-color: var(--ep-purple) !important;
  border-image: none !important;
}
.ep-btn--purple:hover {
  background: var(--ep-orange) !important;
  color: var(--ep-white) !important;
  border-color: var(--ep-orange) !important;
}

/* ── GLOBAL COLOUR OVERRIDES ─────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: #411A11 !important;
}
p, li {
  color: #411A11 !important;
}
/* ── Force kill gradient border on all buttons ─────────────────────────────── */
.ep-btn,
.ep-btn:hover,
.ep-btn:focus {
  border-image: none !important;
  -webkit-border-image: none !important;
}
/* ── Kill gradient border pseudo-element on outline button ─────────────────── */
.ep-btn--outline::before,
.ep-btn--outline::after {
  display: none !important;
  content: none !important;
}
/* ── Global image border radius ─────────────────────────── */
.hs-image-widget img,
.widget-type-image img {
  border-radius: var(--ep-radius-img) !important;
}
.ep-btn {
  font-family: 'Inclusive Sans', Arial, sans-serif !important;
}