/* =============================================================
ENTELA — CONSOLIDATED BRAND STYLES (CLEANED & RESTRUCTURED)
WordPress + Hello Theme + Elementor free

CONTENTS
  1. Brand tokens & global typography
  2. Navigation — nav box (all sizes)
  3. Navigation — desktop horizontal menu (1025px and up)
  4. Navigation — hamburger dropdown (any screen size it appears)
  5. Navigation — mobile header sizing (768px and below)
  6. Page headers (mobile)
  7. Writing page — post list
  8. Single blog posts — base styles
  9. Images & editorial effects
 10. Stat strip — mobile swipe
 11. Footer visibility
 12. Form confirmation message
 13. References and subscripts
 14. Error page
 15. Buttons and modals on smaller screens
============================================================= */

html {
  scroll-padding-top: 150px;
  scroll-behavior: smooth;
}

/* =============================================================
1. BRAND TOKENS & GLOBAL TYPOGRAPHY
Controls: colour variables, base fonts, links, headings sitewide
============================================================= */

:root {
  --entela-cream: #f5f2f2;
  --entela-dark: #2e2b28;
  --entela-slate: #444a54;
  --entela-terracotta: #c4622d;
  --entela-terracotta-text: #9f4e25;
  --entela-taupe: #9a8272;
  --entela-taupe-text: #6f5e54;
  --entela-mid: #e8e4e0;
  --entela-taupe-light: #f0ebe4;
  --entela-light-taupe: #c4a882;

  --entela-header-height: 110px;
  --entela-nav-tab-height: 90px;
  --entela-content-width: 760px;
  --entela-post-width: 680px;
  --entela-post-outer-width: 780px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: var(--entela-cream);
  color: var(--entela-slate);
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
}

h1,
h2,
h3,
h4,
.elementor-heading-title {
  color: var(--entela-slate);
  font-family: 'Libre Baskerville', serif;
  font-weight: 400;
  line-height: 1.25;
}

p {
  margin-top: 0;
}

a {
  color: var(--entela-terracotta-text);
  text-decoration: underline;
  text-decoration-color: rgba(159, 78, 37, 0.35);
  text-underline-offset: 0.18em;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

a:hover {
  color: var(--entela-dark);
  text-decoration-color: currentColor;
}


/* =============================================================
2. NAVIGATION — NAV BOX (ALL SIZES)
Controls: the floating cream bar, its scroll behaviour, and
item corner rounding. Applies at every screen size.
============================================================= */

#custom-nav-box {
  position: fixed !important;
  top: 20px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;

  width: calc(100% - 40px) !important;
  height: var(--entela-header-height) !important;
  margin: 0 auto !important;

  background-color: var(--entela-cream) !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 12px !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.03) !important;

  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

#custom-nav-box.is-scrolled {
  top: 0 !important;
  width: 100% !important;
  border-radius: 0 !important;
  border-bottom-color: var(--entela-terracotta) !important;
  box-shadow: none !important;
}

#custom-nav-box :is(.elementor-item, .hfe-menu-item, .e-n-menu-item) {
  border: none !important;
  border-radius: 8px 8px 0 0 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

#custom-nav-box :is(.elementor-item, .hfe-menu-item, .e-n-menu-item)::before,
#custom-nav-box :is(.elementor-item, .hfe-menu-item, .e-n-menu-item)::after {
  display: none !important;
}

#custom-nav-box :is(.elementor-item, .hfe-menu-item, .e-n-menu-item):hover {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}


/* =============================================================
3. NAVIGATION — DESKTOP HORIZONTAL MENU (1025px AND UP)
Controls: tab heights, bottom alignment, hover boxes and the
active Writing tab on blog posts. ONLY applies at full desktop
width, where the horizontal menu exists. The hamburger appears
below 1025px, so nothing here can ever touch the dropdown.
============================================================= */

@media (min-width: 1025px) {

  /* Clip 1–2px hover overflow from Elementor defaults */
  #custom-nav-box {
    overflow: hidden !important;
  }

  /* Nav structure fills the fixed header height */
  #custom-nav-box :is(.elementor-container, .e-con, .e-con-inner) {
    height: 100% !important;
    align-items: stretch !important;
  }

  #custom-nav-box :is(
    .elementor-widget-nav-menu,
    .elementor-widget-container,
    .hfe-nav-menu,
    .hfe-nav-menu nav
  ) {
    height: 100% !important;
  }

  /* Menu sits along the bottom of the nav bar */
  #custom-nav-box :is(
    .elementor-nav-menu--main,
    .hfe-nav-menu nav > ul,
    .hfe-nav-menu .menu,
    .e-n-menu
  ) {
    display: flex !important;
    flex-wrap: nowrap !important;
    height: 100% !important;
    min-height: 0 !important;
    align-items: flex-end !important;
    transform: none !important;
  }

  #custom-nav-box :is(
    .elementor-nav-menu--main > li,
    .hfe-nav-menu nav > ul > li,
    .hfe-nav-menu .menu > li,
    .e-n-menu-item
  ) {
    display: inline-flex !important;
    height: 100% !important;
    min-height: 0 !important;
    width: auto !important;
    align-items: flex-end !important;
  }

  /* The hover/active tab box height */
  #custom-nav-box :is(
    .elementor-nav-menu--main .elementor-item,
    .hfe-nav-menu nav > ul > li > a,
    .hfe-menu-item
  ) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: var(--entela-nav-tab-height) !important;
    max-height: var(--entela-nav-tab-height) !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  /* Blog posts: Writing tab stays visually active in terracotta */
  body.single-post #custom-nav-box :is(
    .elementor-nav-menu--main,
    .hfe-nav-menu nav > ul,
    .hfe-nav-menu .menu,
    .e-n-menu
  ) {
    transform: none !important;
  }

  body.single-post #custom-nav-box :is(
    .entela-writing-nav,
    .entela-writing-nav > a,
    .entela-writing-nav .elementor-item,
    .entela-writing-nav .hfe-menu-item,
    .entela-writing-nav .e-n-menu-item,
    a.entela-writing-nav,
    .elementor-item-active,
    .current-menu-item > a,
    .current_page_item > a,
    .current_page_parent > a,
    .current_page_ancestor > a
  ) {
    display: flex !important;
    align-items: center !important;
    align-self: flex-end !important;
    height: var(--entela-nav-tab-height) !important;
    max-height: var(--entela-nav-tab-height) !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    line-height: 1 !important;
    transform: none !important;

    background-color: var(--entela-terracotta) !important;
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--entela-cream) !important;
  }

  body.single-post #custom-nav-box :is(
    .entela-writing-nav > a *,
    .entela-writing-nav .elementor-item *,
    .entela-writing-nav .hfe-menu-item *,
    .entela-writing-nav .e-n-menu-item *
  ) {
    color: var(--entela-cream) !important;
  }

}

/* =============================================================
4. NAVIGATION — HAMBURGER DROPDOWN (ANY SCREEN SIZE)
Controls: the dropdown panel whenever the hamburger menu is
open. Targets the .menu-is-active state that HFE actually uses,
and overrides the plugin's broken inline width:0px.
============================================================= */

/* The toggle button */
#custom-nav-box :is(
  .elementor-menu-toggle,
  .hfe-nav-menu__toggle,
  .menu-toggle,
  .mobile-menu-button
) {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  z-index: 100001 !important;
}

/* Make the dropdown anchor to the nav bar, not the menu widget */
#custom-nav-box .e-con,
#custom-nav-box .e-con-inner,
#custom-nav-box .elementor-container,
#custom-nav-box .elementor-widget-nav-menu,
#custom-nav-box .elementor-widget-nav-menu .elementor-widget-container,
#custom-nav-box .hfe-nav-menu-wrapper {
  position: static !important;
}
/* Catch-all: no positioned wrappers inside the nav bar */
#custom-nav-box .elementor-element,
#custom-nav-box .elementor-widget {
  position: static !important;
}

/* The open dropdown panel — beats the plugin's inline width:0px */
#custom-nav-box nav.menu-is-active,
#custom-nav-box .elementor-nav-menu--dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
  max-width: 100% !important;
  z-index: 100000 !important;
  background: var(--entela-cream) !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 18px 35px rgba(46, 43, 40, 0.12) !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Items stack vertically inside the open dropdown */
#custom-nav-box nav.menu-is-active ul.hfe-nav-menu,
#custom-nav-box .elementor-nav-menu--dropdown ul {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Each item: natural height, comfortable spacing */
#custom-nav-box nav.menu-is-active ul.hfe-nav-menu li,
#custom-nav-box .elementor-nav-menu--dropdown li {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
}

#custom-nav-box nav.menu-is-active a.hfe-menu-item,
#custom-nav-box .elementor-nav-menu--dropdown a {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  min-height: 52px !important;
  max-height: none !important;
  padding: 14px 22px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}
/* Hide the closed dropdown nav so it can't stretch the bar */
@media (max-width: 1024px) {
  #custom-nav-box nav.hfe-nav-menu__layout-horizontal:not(.menu-is-active) {
    display: none !important;
  }
}
/* =============================================================
5. NAVIGATION — MOBILE HEADER SIZING (768px AND BELOW)
Controls: nav bar height, logo size and toggle on phones.
============================================================= */

@media (max-width: 768px) {
  :root {
    --entela-header-height: 80px;
  }

  #custom-nav-box {
    top: 10px !important;
    width: calc(100% - 24px) !important;
    height: auto !important;
    min-height: var(--entela-header-height) !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #custom-nav-box.is-scrolled {
    top: 0 !important;
    width: 100% !important;
  }

  .header-inner,
  #custom-nav-box .elementor-container,
  #custom-nav-box .e-con,
  #custom-nav-box .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    min-height: var(--entela-header-height) !important;
    max-height: none !important;
    overflow: visible !important;
    padding-left: 22px !important;
		padding-right: 22px !important;
  }

  #custom-nav-box .elementor-widget-container,
  #custom-nav-box .elementor-widget-nav-menu,
  #custom-nav-box .hfe-nav-menu,
  #custom-nav-box .hfe-nav-menu-wrapper {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .site-logo,
  .site-branding,
  .custom-logo-link {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    margin: 0 !important;
    transform: translateY(0) !important;
  }

  .site-logo img,
  .custom-logo-link img {
    width: auto !important;
    max-height: 45px !important;
  }
	
	  #custom-nav-box .site-logo img,
  #custom-nav-box .custom-logo-link img,
  #custom-nav-box .hfe-site-logo-img {
    margin: 0 !important;
    vertical-align: middle !important;
    display: block !important;
  }

  #custom-nav-box .elementor-widget-nav-menu,
  #custom-nav-box .hfe-nav-menu-wrapper,
  #custom-nav-box .hfe-nav-menu {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-left: auto !important;
		margin-right: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
  }

  #custom-nav-box :is(.hfe-nav-menu__toggle, .menu-toggle, .mobile-menu-button, .elementor-menu-toggle) {
    flex: 0 0 auto !important;
    margin: 0 !important;
		margin-right: 0 !important;
    padding: 5px !important;
    align-self: center !important;
    transform: none !important;
  }
}

/* =============================================================
6. PAGE HEADERS (MOBILE)
Controls: hero/page header sizing on phones.
============================================================= */

@media (max-width: 768px) {
  body .entela-page-header {
    min-height: 20vh !important;
    padding: 60px 30px 40px !important;
  }

  body .entela-page-header h1,
  body .entela-page-header .elementor-heading-title {
    font-size: 38px !important;
  }
}

@media (max-width: 767px) {
  .entela-mask-left::before {
    background: rgba(46, 43, 40, 0.6);
  }

  .entela-hero .entela-hero-media {
    width: 100% !important;
    max-width: 100% !important;
    flex: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 280px;
    -webkit-mask-image: none;
    mask-image: none;
    background-position: center center !important;
  }
}


/* =============================================================
7. WRITING PAGE — POST LIST
Controls: the editorial list of blog posts on /writing.
============================================================= */

.entela-posts-list {
  max-width: 1100px !important;
  margin: 60px auto !important;
  padding: 0 40px !important;
}

.entela-posts-list .listing-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 32px 0 !important;
  border-bottom: 1px solid rgba(68, 74, 84, 0.1) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.entela-posts-list .date {
  flex: 0 0 140px !important;
  color: var(--entela-taupe-text) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

.entela-posts-list .title {
  flex: 1 !important;
  color: var(--entela-slate) !important;
  font-size: 22px !important;
}

.entela-posts-list .title a {
  color: var(--entela-slate) !important;
  font-family: 'Libre Baskerville', serif !important;
  text-decoration: none !important;
}

.entela-posts-list .title a:hover {
  color: var(--entela-terracotta) !important;
}

.entela-posts-list .excerpt {
  flex: 0 0 120px !important;
  color: var(--entela-slate) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-align: right !important;
  text-transform: uppercase !important;
  opacity: 0.5;
}

@media (max-width: 768px) {
  .entela-posts-list {
    padding: 0 30px !important;
  }

  .entela-posts-list .listing-item {
    flex-direction: column !important;
    gap: 4px !important;
    padding: 24px 0 !important;
  }

  .entela-posts-list .date,
  .entela-posts-list .title,
  .entela-posts-list .excerpt {
    flex: auto !important;
    width: 100% !important;
    margin-bottom: 5px !important;
    text-align: left !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 520px) {
  .entela-posts-list {
    padding: 0 22px !important;
  }
}

.entela-external-writing {
  max-width: 1100px;      /* match the .entela-posts-list width above it */
  margin: 40px auto 60px;
  padding: 0 40px;        /* match .entela-posts-list padding so left edges align */
}

.entela-external-writing .ext-item {
  padding: 28px 0;        /* match the top list's row spacing */
  border-bottom: 1px solid rgba(68, 74, 84, 0.1);
}

.entela-external-writing .ext-pub {
  display: block;
  margin-bottom: 8px;
  color: var(--entela-taupe);
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.entela-external-writing .ext-title {
  display: block;
  margin-bottom: 10px;
  color: var(--entela-slate);
  font-family: 'Lato', serif;
  font-size: 22px;        /* match the top list title size */
  line-height: 1.35;
  text-decoration: none;
  border-bottom: none !important;
}

.entela-external-writing .ext-title:hover {
  color: var(--entela-terracotta-text);
}

.entela-external-writing .ext-desc {
  display: block;
  color: var(--entela-taupe-text);
  font-family: 'Lato', sans-serif;
  font-size: 16px;        /* up from 15 — closer to body size, less cramped */
  font-weight: 300;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .entela-external-writing {
    padding: 0 30px;      /* match the top list's mobile padding */
  }
}
/* =============================================================
8. SINGLE BLOG POSTS — BASE STYLES
Controls: typography and layout of individual blog posts.
============================================================= */

body.single-post {
  background: var(--entela-cream);
  color: var(--entela-slate);
}

body.single-post :is(main, .content-area, article) {
  padding-top: 0;
}

body.single-post :is(.entry-content, .wp-block-post-content, .elementor-widget-theme-post-content) a {
  color: var(--entela-terracotta-text) !important;
  border-bottom: 1px solid rgba(159, 78, 37, 0.35);
  text-decoration: none !important;
}

body.single-post :is(.entry-content, .wp-block-post-content, .elementor-widget-theme-post-content) a:hover {
  color: var(--entela-terracotta-text) !important;
  border-bottom-color: var(--entela-terracotta-text);
}

body.single-post :is(.entry-content, .wp-block-post-content, .elementor-widget-theme-post-content) blockquote p {
  margin-bottom: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}


body.single-post :is(
  .sharedaddy,
  .sd-sharing-enabled,
  #jp-post-flair,
  .jp-relatedposts,
  #jp-relatedposts,
  .comments-area,
  #comments,
  .wp-block-jetpack-subscriptions,
  .post-navigation,
  .tags-links,
  .cat-links
) {
  display: none !important;
}

/* Entela blockquotes */
blockquote,
.wp-block-quote {
  border-left: 3px solid #C4622D !important;
  background: #F0EBE4;
  margin: 28px 0;
  padding: 16px 24px;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-size: 1.1em;
	text-align: center
  line-height: 1.6;
  color: #2E2B28;
}
blockquote p:last-child { margin-bottom: 0; }
blockquote cite {
  display: block;
  margin-top: 8px;
  font-family: 'Lato', Arial, sans-serif;
  font-style: normal;
  font-size: 0.85em;
  color: #9A8272;
}
.entry-content blockquote cite,
.elementor-widget-theme-post-content blockquote cite {
  display: block;
  margin-top: 8px;
  font-family: 'Lato', Arial, sans-serif;
  font-style: normal;
  font-size: 0.85em;
  color: #9A8272;
}


/* =============================================================
9. IMAGES & EDITORIAL EFFECTS
Controls: headshot treatments, editorial image hover, and the
founder photo framing on the About page.
============================================================= */

.hero-headshot img {
  border: none !important;
  border-radius: 0 !important;
  filter: grayscale(100%) contrast(110%) !important;
  transition: all 0.4s ease !important;
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.hero-headshot img:hover {
  transform: translateY(-5px) !important;
  filter: grayscale(0%) contrast(100%) drop-shadow(0 10px 20px rgba(245, 242, 242, 0.1)) !important;
}

.entela-editorial-image img {
  border-radius: 0 !important;
  box-shadow: 0 20px 40px rgba(46, 43, 40, 0.06);
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.entela-editorial-image img:hover {
  transform: scale(1.02);
}

.entela-editorial-image img,
img.entela-editorial-image {
  border: 1px solid #DFD5C6;
  border-radius: 6px;
  display: block;
}

.entela-founder-image-frame {
  border-radius: 18px !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.entela-founder-image-frame .elementor-widget-container,
.entela-founder-image-frame figure,
.entela-founder-image-frame picture,
.entela-founder-image-frame a {
  border-radius: 18px !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.entela-founder-image-frame img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 18px !important;
  clip-path: inset(0 round 18px) !important;
  transform: none !important;
  transition: none !important;
  filter: saturate(0.88) contrast(0.96) !important;
  box-shadow: none !important;
}

.entela-founder-image-frame:hover img {
  transform: none !important;
  filter: saturate(0.88) contrast(0.96) !important;
}

.entela-founder-portrait,
.entela-founder-portrait .elementor-widget-container,
.entela-founder-portrait figure,
.entela-founder-portrait picture,
.entela-founder-portrait a {
  border-radius: 18px !important;
  overflow: hidden !important;
}

.entela-founder-portrait img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 18px !important;
  clip-path: inset(0 round 18px) !important;
  overflow: hidden !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
}


/* =============================================================
10. STAT STRIP — MOBILE SWIPE
Controls: the horizontally swipeable stat cards on phones.
============================================================= */

@media (max-width: 767px) {
  .mobile-stat-swipe {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 15px !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    padding-bottom: 15px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .mobile-stat-swipe > * {
    flex: 0 0 75vw !important;
    max-width: 75vw !important;
    scroll-snap-align: start !important;
  }

  .mobile-stat-swipe::-webkit-scrollbar {
    display: none !important;
  }
}


/* =============================================================
11. FOOTER VISIBILITY
Controls: keeps the Elementor/UAE footer visible on all pages.
============================================================= */

.elementor-location-footer,
[data-elementor-type="footer"],
.hfe-footer,
.hfe-footer-wrapper {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* =============================================================
12. FORM CONFIRMATION MESSAGE
Controls: the styled WPForms success message.
============================================================= */

.wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full,
.wpforms-confirmation-container {
  background: #F0EBE4 !important;
  border: 1px solid #E8E4E0 !important;
  border-left: 3px solid #C4622D !important;
  border-radius: 4px !important;
  color: #444A54 !important;
  padding: 22px 24px !important;
  margin: 28px 0 !important;
  box-shadow: 0 8px 22px rgba(46, 43, 40, 0.04) !important;
}

.wpforms-confirmation-container-full p,
.wpforms-confirmation-container p,
div[submit-success] > .wpforms-confirmation-container-full p {
  color: #444A54 !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* =============================================================
13. REFERENCES AND SUBSCRIPTS
============================================================= */
.entela-stat sup a,
sup a {
  color: var(--entela-taupe);
  font-size: 0.55em;
  font-weight: 400;
  text-decoration: none;
  vertical-align: super;
}

sup a:hover {
  color: var(--entela-terracotta-text);
}

.entela-references {
  max-width: 780px;
  margin: 40px auto 60px;
  padding: 0 40px;
}

.entela-references .ref-intro {
  margin-bottom: 32px;
  color: var(--entela-taupe-text);
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

.entela-references .ref-list {
  padding-left: 20px;
}

.entela-references .ref-list li {
  margin-bottom: 28px;
  padding-left: 8px;
  color: var(--entela-taupe-text);
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  scroll-margin-top: 120px;
}

.entela-references .ref-stat {
  display: block;
  margin-bottom: 6px;
  color: var(--entela-slate);
  font-family: 'Libre Baskerville', serif;
  font-size: 16px;
}

.entela-references .ref-list a {
  color: var(--entela-terracotta-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(159, 78, 37, 0.35);
}

.entela-references .ref-list a:hover {
  border-bottom-color: var(--entela-terracotta-text);
}

@media (max-width: 768px) {
  .entela-references {
    padding: 0 22px;
  }
}

/* =============================================================
14. ERROR PAGE
============================================================= */
body.error404 .site-main,
body.error404 #content,
body.error404 .page-content {
  padding-top: 140px !important;
}

/* =============================================================
15. BUTTONS, MODALS AND SWIPES ON SMALLER SCREENS
============================================================= */

.entela-modal-content {
  max-height: 90vh;
  overflow-y: auto;
}

.entela-modal-content iframe {
  width: 100%;
  height: 70vh;
  border: none;
}

.entela-cta-btn {
    width: 100%;
    max-width: 280px;
    white-space: normal;
    box-sizing: border-box;
	  text-align: center;
}

@media (max-width: 768px) {
  .entela-book-btn {
    width: 100%;
    padding: 14px 16px;
    font-size: 12px;
    letter-spacing: 2.5px;
  }

  .entela-book-btn br {
    display: none;
  }

  .entela-modal-content {
    margin: 8% auto;
    width: 92%;
    padding: 16px 16px 0px 16px;
  }
}

@media (max-width: 480px) {
    .entela-cta-btn {
        width: 100%;
        white-space: normal;
    }
}

@media (max-width: 767px) {
  .mobile-stat-swipe {
    position: relative;
  }

  .mobile-stat-swipe::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 15px;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--entela-cream));
    pointer-events: none;
  }
}