/* =============================================================
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. Single blog posts — hard override (must stay after base)
 10. Single blog posts — mobile
 11. Blog extras — eyebrow, intro, CTA box
 12. Booking component
 13. Images & editorial effects
 14. Stat strip — mobile swipe
 15. Footer visibility
 16. Form confirmation message
 17. References and subscripts
 18. Error page
 19. Buttons and modals on smaller screens
============================================================= */


/* =============================================================
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: 300;
  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;
    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;
    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;
}

/* Hide sharing widgets, comments and related-post clutter */
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;
}


/* =============================================================
9. SINGLE BLOG POSTS — HARD OVERRIDE
Controls: final post layout values. These win over section 8
and any Elementor/theme styles. Keep after section 8.
============================================================= */

body.single-post .site-main,
body.single-post #content {
  padding-top: 112px !important;
}

body.single-post main,
body.single-post article,
body.single-post .content-area {
  padding-top: 0 !important;
}

body.single-post .entry-header,
body.single-post .entry-content,
body.single-post .wp-block-post-content,
body.single-post .elementor-widget-theme-post-content,
body.single-post .elementor-widget-theme-post-content .elementor-widget-container {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

body.single-post h1.entry-title,
body.single-post .entry-header h1,
body.single-post .elementor-widget-theme-post-title h1,
body.single-post .elementor-widget-theme-post-title h2,
body.single-post h1.wp-block-post-title {
  max-width: 672px !important;
  margin: 48px auto 28px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  color: var(--entela-dark) !important;
  font-family: 'Libre Baskerville', serif !important;
  font-size: clamp(33px, 3.7vw, 42px) !important;
  font-weight: 400 !important;
  line-height: 1.18 !important;
  text-align: left !important;
}

body.single-post :is(
  .entry-content,
  .wp-block-post-content,
  .elementor-widget-theme-post-content,
  .elementor-widget-theme-post-content .elementor-widget-container
) > :is(p, ul, ol, h2, h3, h4, blockquote) {
  max-width: 672px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.single-post :is(
  .entry-content,
  .wp-block-post-content,
  .elementor-widget-theme-post-content,
  .elementor-widget-theme-post-content .elementor-widget-container
) p {
  margin-top: 0 !important;
  margin-bottom: 1.25em !important;
  color: var(--entela-slate) !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 1.68 !important;
}

body.single-post :is(
  .entry-content,
  .wp-block-post-content,
  .elementor-widget-theme-post-content,
  .elementor-widget-theme-post-content .elementor-widget-container
) h2 {
  margin-top: 46px !important;
  margin-bottom: 18px !important;
  color: var(--entela-dark) !important;
  font-family: 'Libre Baskerville', serif !important;
  font-size: 29px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

body.single-post :is(
  .entry-content,
  .wp-block-post-content,
  .elementor-widget-theme-post-content,
  .elementor-widget-theme-post-content .elementor-widget-container
) h3 {
  margin-top: 36px !important;
  margin-bottom: 14px !important;
  color: var(--entela-dark) !important;
  font-family: 'Libre Baskerville', serif !important;
  font-size: 23px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

body.single-post :is(
  .entry-content,
  .wp-block-post-content,
  .elementor-widget-theme-post-content,
  .elementor-widget-theme-post-content .elementor-widget-container
) :is(ul, ol) {
  padding-left: 28px !important;
  margin-top: 0 !important;
  margin-bottom: 1.5em !important;
}

body.single-post :is(
  .entry-content,
  .wp-block-post-content,
  .elementor-widget-theme-post-content,
  .elementor-widget-theme-post-content .elementor-widget-container
) li {
  margin-bottom: 0.7em !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 1.68 !important;
}

body.single-post :is(
  .entry-content,
  .wp-block-post-content,
  .elementor-widget-theme-post-content,
  .elementor-widget-theme-post-content .elementor-widget-container
) blockquote {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
  padding: 28px 32px !important;
  background: var(--entela-mid) !important;
  border-left: 3px solid var(--entela-terracotta) !important;
  color: var(--entela-slate) !important;
  font-family: 'Libre Baskerville', serif !important;
  font-size: 20px !important;
  font-style: italic !important;
  line-height: 1.62 !important;
}

body.single-post :is(
  .entry-content,
  .wp-block-post-content,
  .elementor-widget-theme-post-content,
  .elementor-widget-theme-post-content .elementor-widget-container
) img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 36px auto !important;
}


/* =============================================================
10. SINGLE BLOG POSTS — MOBILE
Controls: post layout on phones. Keep after section 9.
============================================================= */

@media (max-width: 768px) {
  body.single-post .site-main,
  body.single-post #content {
    padding-top: 96px !important;
  }

  body.single-post .entry-header,
  body.single-post .entry-content,
  body.single-post .wp-block-post-content,
  body.single-post .elementor-widget-theme-post-content,
  body.single-post .elementor-widget-theme-post-content .elementor-widget-container {
    max-width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  body.single-post h1.entry-title,
  body.single-post .entry-header h1,
  body.single-post .elementor-widget-theme-post-title h1,
  body.single-post .elementor-widget-theme-post-title h2,
  body.single-post h1.wp-block-post-title {
    margin-top: 32px !important;
    margin-bottom: 22px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    font-size: 30px !important;
    line-height: 1.22 !important;
  }

  body.single-post :is(
    .entry-content,
    .wp-block-post-content,
    .elementor-widget-theme-post-content,
    .elementor-widget-theme-post-content .elementor-widget-container
  ) p,
  body.single-post :is(
    .entry-content,
    .wp-block-post-content,
    .elementor-widget-theme-post-content,
    .elementor-widget-theme-post-content .elementor-widget-container
  ) li {
    font-size: 17px !important;
    line-height: 1.68 !important;
  }

  body.single-post :is(
    .entry-content,
    .wp-block-post-content,
    .elementor-widget-theme-post-content,
    .elementor-widget-theme-post-content .elementor-widget-container
  ) h2 {
    margin-top: 38px !important;
    font-size: 25px !important;
  }

  body.single-post :is(.entry-content, .wp-block-post-content, .elementor-widget-theme-post-content) blockquote {
    margin: 38px auto;
    padding: 28px 24px;
    font-size: 19px;
  }
}


/* =============================================================
11. BLOG EXTRAS — EYEBROW, INTRO & CTA BOX
Controls: the small uppercase label, italic intro paragraph
and the grey call-to-action box used in posts.
============================================================= */

.entela-eyebrow {
  margin-bottom: 24px !important;
  color: var(--entela-taupe-text);
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-align: center;
  text-transform: uppercase;
}

.entela-intro {
  max-width: var(--entela-content-width);
  margin: 0 auto 48px !important;
  color: var(--entela-slate);
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(19px, 2.2vw, 24px);
  font-style: italic;
  line-height: 1.75;
  text-align: center;
}

.entela-blog-cta {
  max-width: 820px;
  margin: 72px auto 24px;
  padding: 42px;
  background: var(--entela-mid);
  text-align: center;
}

.entela-blog-cta h2 {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  color: var(--entela-slate);
  font-family: 'Libre Baskerville', serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3;
}

.entela-blog-cta p {
  max-width: 620px !important;
  margin: 0 auto 28px !important;
}

.entela-blog-cta a {
  display: inline-block;
  margin: 6px;
  padding: 15px 24px;
  background: var(--entela-slate);
  border: 1px solid var(--entela-slate) !important;
  color: var(--entela-cream) !important;
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 3px;
  text-decoration: none !important;
  text-transform: uppercase;
}

.entela-blog-cta a:hover {
  background: var(--entela-terracotta-text);
  border-color: var(--entela-terracotta-text) !important;
  color: var(--entela-cream) !important;
}

@media (max-width: 768px) {
  .entela-intro {
    font-size: 19px;
    line-height: 1.72;
  }

  .entela-blog-cta {
    margin: 56px auto 24px;
    padding: 34px 24px;
  }

  .entela-blog-cta a {
    display: block;
    width: 100%;
    margin: 10px 0;
  }
}


/* =============================================================
12. BOOKING COMPONENT
Controls: the booking cards and buttons on the contact page.
============================================================= */

.entela-booking-container {
  max-width: 1000px;
  margin: 60px auto;
  padding: 40px 20px;
  text-align: center;
}

.booking-grid {
  display: flex;
  justify-content: center;
  margin: 30px 20px 20px;
}

.booking-card {
  flex: 1;
  padding: 30px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.booking-card h3 {
  margin-bottom: 15px;
  color: var(--entela-terracotta-text) !important;
  font-family: 'Libre Baskerville', serif;
}

.booking-card iframe,
.booking-card button {
  width: 100% !important;
}

.booking-card iframe {
  overflow: hidden;
  background: #ffffff;
  border-radius: 4px;
}

.booking-button,
.booking-card button,
.custom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px !important;
  background-color: rgba(68, 74, 84, 0.1) !important;
  border: none !important;
  border-radius: 2px;
  color: var(--entela-slate) !important;
  cursor: pointer;
  font-family: 'Lato', sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.booking-button:hover,
.booking-card button:hover,
.custom-btn:hover {
  background-color: rgba(68, 74, 84, 0.15) !important;
  color: var(--entela-light-taupe) !important;
}

@media (max-width: 768px) {
  .booking-grid {
    flex-direction: column !important;
  }
}


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

.team-headshot img {
  border-bottom: 3px solid var(--entela-terracotta) !important;
  border-radius: 8px 8px 0 0 !important;
  filter: grayscale(100%) contrast(110%) !important;
  transition: all 0.4s ease !important;
}

.team-headshot img:hover {
  filter: grayscale(0%) contrast(100%) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 20px rgba(196, 98, 45, 0.15) !important;
}

.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-founder-image-frame {
  max-width: 270px !important;
  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;
}


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

@media (max-width: 767px) {
  .mobile-stat-swipe {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    padding-bottom: 15px !important;
  }

  .mobile-stat-swipe > .e-con-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 15px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    width: max-content !important;
  }

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

  .mobile-stat-swipe::-webkit-scrollbar,
  .mobile-stat-swipe > .e-con-inner::-webkit-scrollbar {
    display: none !important;
  }
}


/* =============================================================
15. 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;
}


/* =============================================================
16. 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;
}

/* =============================================================
17. 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: 300;
  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: 300;
  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;
  }
}

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

/* =============================================================
19. 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;
  }
}