.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');

/* ==========================================================================
   TRI ESTATE & LEGACY — HEADER + HERO + TRUST BAR
   Measured from dev.triestateandlegacy.com (Manus reference), 2026-09-04.
   All values below are the computed values from that page, not estimates.

   WHERE IT GOES: Elementor > hamburger > Site Settings > Custom CSS
   REQUIRES: the CSS classes in tri-el-header-hero-build.md on the
             matching Elementor containers and widgets.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. TOKENS — Manus values. Note: Manus navy is #0F2A5A and Manus red is
      #C90000. Neither matches the earlier brand sheet. Use these to match.
   -------------------------------------------------------------------------- */
:root {
  --el-navy: #0F2A5A;
  --el-navy-85: rgba(15, 42, 89, 0.85);
  --el-navy-60: rgba(15, 42, 90, 0.60);
  --el-red: #C90000;
  --el-red-hover: #A80000;
  --el-gold-text: #D8B877;
  --el-gold-line: #B8924A;
  --el-ink: #1C2330;
  --el-ink-blue: #173B7A;
  --el-cream: #F9F6EF;
  --el-hairline: #E6E0D4;
  --el-white-80: rgba(255, 255, 255, 0.80);
  --el-white-85: rgba(255, 255, 255, 0.85);
  --el-white-30: rgba(255, 255, 255, 0.30);
  --el-white-40: rgba(255, 255, 255, 0.40);
  --el-white-10: rgba(255, 255, 255, 0.10);
  --el-serif: "Playfair Display", Georgia, serif;
  --el-sans: "Source Sans 3", "Source Sans Pro", ui-sans-serif, system-ui, sans-serif;

  /* Manus container: 1280 max with 32px side padding = 1216 content */
  --el-gutter: max(32px, calc((100% - 1216px) / 2));

  --el-header-h: 116px;   /* 36 top bar + 80 nav band */
}


/* --------------------------------------------------------------------------
   1. HEADER SHELL — sits ON TOP of the hero on the home page.
      On every other page it stays in normal flow with a solid navy nav band.
   -------------------------------------------------------------------------- */
.elementor-location-header {
  position: relative;
  z-index: 900;
  width: 100%;
}

body.home .elementor-location-header,
body.has-hero .elementor-location-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
}

body.admin-bar.home .elementor-location-header,
body.admin-bar.has-hero .elementor-location-header {
  top: 32px;
}

/* Elementor Sticky inserts a spacer that would push the hero down. Kill it. */
.elementor-location-header .elementor-sticky__spacer {
  display: none !important;
}

.el-headerwrap {
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Boxed-container safety: if a container is Boxed, neutralise Elementor's inner width */
.el-topbar > .e-con-inner,
.el-navbar > .e-con-inner,
.el-hero > .e-con-inner,
.el-trust > .e-con-inner {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}


/* --------------------------------------------------------------------------
   2. TOP BAR — 36px, navy at 85%
   -------------------------------------------------------------------------- */
.el-topbar {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 var(--el-gutter) !important;
  margin: 0 !important;
  background-color: var(--el-navy-85) !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: none !important;
}

.el-topbar .elementor-widget,
.el-topbar .elementor-widget-container,
.el-topbar p {
  margin: 0 !important;
  padding: 0 !important;
}

.el-topbar-left,
.el-topbar-right,
.el-topbar-left *,
.el-topbar-right * {
  font-family: var(--el-sans) !important;
  font-size: 12.8px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  color: var(--el-white-80) !important;
}

.el-topbar-left * {
  letter-spacing: 0.32px !important;
}

.el-topbar-right .elementor-widget-container,
.el-topbar-right p {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  white-space: nowrap !important;
}

.el-topbar-right .el-sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--el-white-30);
}

.el-topbar-right .el-gold {
  color: var(--el-gold-text) !important;
}

.el-topbar-right a {
  text-decoration: none !important;
}


/* --------------------------------------------------------------------------
   3. NAV BAND — 80px, transparent on home, solid navy on inner pages
   -------------------------------------------------------------------------- */
.el-navbar {
  height: 80px !important;
  min-height: 80px !important;
  padding: 0 var(--el-gutter) !important;
  margin: 0 !important;
  background-color: var(--el-navy) !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
}

body.home .el-navbar,
body.has-hero .el-navbar {
  background-color: transparent !important;
}

.el-navbar .elementor-widget,
.el-navbar .elementor-widget-container {
  margin: 0 !important;
}

/* LOGO — 48px tall, white on hero, colour version shown on scroll */
.el-logo-white,
.el-logo-color {
  width: auto !important;
  flex: 0 0 auto !important;
}

.el-logo-white img,
.el-logo-color img {
  height: 48px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
}

.el-logo-color {
  display: none !important;
}

/* MENU — EA Simple Menu. Links 15.2px / 500, gap 32, gold 2px underline on active */
.el-nav {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.el-nav .eael-simple-menu-container,
.el-nav .eael-simple-menu-container * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.el-nav .eael-simple-menu-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.el-nav .eael-simple-menu {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.el-nav .eael-simple-menu > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.el-nav .eael-simple-menu > li > a {
  position: relative !important;
  display: block !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  font-family: var(--el-sans) !important;
  font-size: 15.2px !important;
  font-weight: 500 !important;
  line-height: 26px !important;
  letter-spacing: 0 !important;
  color: var(--el-white-80) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.2s ease !important;
}

.el-nav .eael-simple-menu > li > a:hover,
.el-nav .eael-simple-menu > li.current-menu-item > a,
.el-nav .eael-simple-menu > li.current_page_item > a {
  color: #FFFFFF !important;
}

.el-nav .eael-simple-menu > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--el-gold-line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}

.el-nav .eael-simple-menu > li > a:hover::after,
.el-nav .eael-simple-menu > li.current-menu-item > a::after,
.el-nav .eael-simple-menu > li.current_page_item > a::after {
  transform: scaleX(1);
}

/* BUTTON GROUP — gap 12 */
.el-navbtns {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

/* CLIENT PORTAL — outlined, 14.4px / 500, padding 8x14 */
.el-btn-portal .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  background: transparent !important;
  border: 1px solid var(--el-white-40) !important;
  border-radius: 2px !important;
  font-family: var(--el-sans) !important;
  font-size: 14.4px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, color 0.2s ease !important;
}

.el-btn-portal .elementor-button:hover {
  border-color: #FFFFFF !important;
}

/* FREE EDUCATION SESSION — red, 14.4px / 600, padding 10x16 */
.el-btn-cta .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 16px !important;
  background: var(--el-red) !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: var(--el-sans) !important;
  font-size: 14.4px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease !important;
}

.el-btn-cta .elementor-button:hover {
  background: var(--el-red-hover) !important;
}

.el-btn-portal .elementor-button-icon,
.el-btn-cta .elementor-button-icon {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.el-btn-portal .elementor-button-icon svg,
.el-btn-cta .elementor-button-icon svg,
.el-btn-portal .elementor-button-icon i,
.el-btn-cta .elementor-button-icon i {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  fill: currentColor !important;
  color: #FFFFFF !important;
}


/* --------------------------------------------------------------------------
   4. SCROLL STATE — needs Elementor Sticky (Top) with Effects Offset on
      .el-headerwrap. Manus: cream 95% with 12px blur, hairline bottom,
      dark links, colour logo. Top bar stays solid navy.
   -------------------------------------------------------------------------- */
.el-headerwrap.elementor-sticky--effects {
  background-color: rgba(249, 246, 239, 0.95) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--el-hairline);
}

.el-headerwrap.elementor-sticky--effects .el-topbar {
  background-color: var(--el-navy) !important;
}

.el-headerwrap.elementor-sticky--effects .el-navbar {
  background-color: transparent !important;
}

.el-headerwrap.elementor-sticky--effects .el-logo-white {
  display: none !important;
}

.el-headerwrap.elementor-sticky--effects .el-logo-color {
  display: block !important;
}

.el-headerwrap.elementor-sticky--effects .el-nav .eael-simple-menu > li > a {
  color: rgba(28, 35, 48, 0.75) !important;
}

.el-headerwrap.elementor-sticky--effects .el-nav .eael-simple-menu > li > a:hover,
.el-headerwrap.elementor-sticky--effects .el-nav .eael-simple-menu > li.current-menu-item > a,
.el-headerwrap.elementor-sticky--effects .el-nav .eael-simple-menu > li.current_page_item > a {
  color: var(--el-ink-blue) !important;
}

.el-headerwrap.elementor-sticky--effects .el-btn-portal .elementor-button {
  color: var(--el-ink-blue) !important;
  border-color: rgba(24, 60, 120, 0.25) !important;
}

.el-headerwrap.elementor-sticky--effects .el-btn-portal .elementor-button-icon svg,
.el-headerwrap.elementor-sticky--effects .el-btn-portal .elementor-button-icon i {
  color: var(--el-ink-blue) !important;
}


/* --------------------------------------------------------------------------
   5. HERO — min-height 92vh, photo cover, navy gradient overlay L to R
      Background image is set in Elementor (Style > Background > Image, cover,
      center center). Overlay is drawn here so the gradient matches exactly.
   -------------------------------------------------------------------------- */
.el-hero {
  position: relative !important;
  min-height: 92vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 128px var(--el-gutter) 128px var(--el-gutter) !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  overflow: hidden !important;
  background-color: var(--el-navy) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.el-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(14, 42, 90, 0.90) 0%,
    rgba(15, 41, 89, 0.75) 50%,
    rgba(14, 42, 90, 0.50) 100%
  );
}

.el-hero > .elementor-background-overlay {
  display: none !important;
}

.el-hero > * {
  position: relative;
  z-index: 1;
}

/* Text column — 672 max, left aligned */
.el-hero-col {
  max-width: 672px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

.el-hero-col .elementor-widget,
.el-hero-col .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

/* EYEBROW — 12.48px / 600, tracked 2.75px, gold, 40px gradient rules each side */
.el-eyebrow .elementor-heading-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--el-sans) !important;
  font-size: 12.48px !important;
  font-weight: 600 !important;
  line-height: 21px !important;
  letter-spacing: 2.75px !important;
  text-transform: uppercase !important;
  color: var(--el-gold-text) !important;
  white-space: nowrap !important;
}

.el-eyebrow .elementor-heading-title::before,
.el-eyebrow .elementor-heading-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  flex: 0 0 40px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--el-gold-line), rgba(0, 0, 0, 0));
}

.el-eyebrow--dark .elementor-heading-title {
  color: var(--el-gold-line) !important;
}

/* H1 — Playfair 72 / 700, line-height 1.08, tracking -1.08px, 24px below eyebrow */
.el-hero-title .elementor-heading-title {
  margin: 24px 0 0 0 !important;
  padding: 0 !important;
  font-family: var(--el-serif) !important;
  font-size: 72px !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -1.08px !important;
  color: #FFFFFF !important;
  text-align: left !important;
}

.el-hero-title .elementor-heading-title em,
.el-hero-title .elementor-heading-title i {
  font-style: italic !important;
  font-weight: 700 !important;
  color: var(--el-gold-text) !important;
}

/* SUB — 20px / 400, line-height 32.5px, white 85%, 28px below H1 */
.el-hero-sub,
.el-hero-sub .elementor-widget-container {
  margin-top: 28px !important;
}

.el-hero-sub p,
.el-hero-sub .elementor-widget-container {
  font-family: var(--el-sans) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 32.5px !important;
  color: var(--el-white-85) !important;
  text-align: left !important;
  margin-bottom: 0 !important;
}

/* BUTTON ROW — gap 16, 36px below sub */
.el-hero-btns {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 0 !important;
  margin: 36px 0 0 0 !important;
  width: auto !important;
}

.el-hero-btns .elementor-widget,
.el-hero-btns .elementor-widget-container {
  margin: 0 !important;
  width: auto !important;
}

/* PRIMARY — red, 16px / 600, padding 16x32, arrow icon 16px */
.el-btn-primary .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 16px 32px !important;
  background: var(--el-red) !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: var(--el-sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease !important;
}

.el-btn-primary .elementor-button:hover {
  background: var(--el-red-hover) !important;
}

/* GHOST — transparent, 1px white 30% border, same padding, no icon */
.el-btn-ghost .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 16px 32px !important;
  background: transparent !important;
  border: 1px solid var(--el-white-30) !important;
  border-radius: 2px !important;
  font-family: var(--el-sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

.el-btn-ghost .elementor-button:hover {
  border-color: var(--el-white-40) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.el-btn-primary .elementor-button-icon,
.el-btn-ghost .elementor-button-icon {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.el-btn-primary .elementor-button-icon svg,
.el-btn-primary .elementor-button-icon i,
.el-btn-ghost .elementor-button-icon svg,
.el-btn-ghost .elementor-button-icon i {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  fill: currentColor !important;
  color: #FFFFFF !important;
}


/* --------------------------------------------------------------------------
   6. TRUST BAR — pinned to the bottom of the hero, navy 60%, hairline top
   -------------------------------------------------------------------------- */
.el-trust {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 16px var(--el-gutter) !important;
  background-color: var(--el-navy-60) !important;
  border-top: 1px solid var(--el-white-10) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.el-trust .elementor-widget,
.el-trust .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.el-trust-list .elementor-icon-list-items {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.el-trust-list .elementor-icon-list-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.el-trust-list .elementor-icon-list-item::after {
  display: none !important;
}

.el-trust-list .elementor-icon-list-icon {
  display: inline-flex !important;
  align-items: center !important;
  width: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.el-trust-list .elementor-icon-list-icon svg,
.el-trust-list .elementor-icon-list-icon i {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  color: var(--el-gold-text) !important;
  fill: var(--el-gold-text) !important;
}

.el-trust-list .elementor-icon-list-text {
  font-family: var(--el-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: var(--el-white-80) !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}


/* --------------------------------------------------------------------------
   7. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .el-nav .eael-simple-menu {
    gap: 22px !important;
  }

  .el-hero-title .elementor-heading-title {
    font-size: 60px !important;
  }
}

@media (max-width: 1024px) {
  .el-hero-title .elementor-heading-title {
    font-size: 54px !important;
    letter-spacing: -0.8px !important;
  }

  .el-hero {
    padding-top: 128px !important;
    padding-bottom: 150px !important;
  }
}

@media (max-width: 767px) {
  :root {
    --el-gutter: 20px;
    --el-header-h: 100px;
  }

  .el-topbar {
    display: none !important;
  }

  .el-navbar {
    height: 64px !important;
    min-height: 64px !important;
  }

  .el-logo-white img,
  .el-logo-color img {
    height: 40px !important;
  }

  .el-btn-portal {
    display: none !important;
  }

  .el-btn-cta .elementor-button {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  .el-hero {
    min-height: 0 !important;
    padding: 96px var(--el-gutter) 40px var(--el-gutter) !important;
  }

  .el-eyebrow .elementor-heading-title {
    white-space: normal !important;
    font-size: 11.5px !important;
    letter-spacing: 2px !important;
  }

  .el-eyebrow .elementor-heading-title::before,
  .el-eyebrow .elementor-heading-title::after {
    width: 24px;
    flex-basis: 24px;
  }

  .el-hero-title .elementor-heading-title {
    font-size: 42px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.6px !important;
  }

  .el-hero-sub p,
  .el-hero-sub .elementor-widget-container {
    font-size: 17px !important;
    line-height: 27px !important;
  }

  .el-hero-btns {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .el-hero-btns .elementor-widget,
  .el-hero-btns .elementor-widget-container,
  .el-btn-primary .elementor-button,
  .el-btn-ghost .elementor-button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Trust bar stacks under the content instead of pinning */
  .el-trust {
    position: relative !important;
    margin-top: 40px !important;
    padding: 14px var(--el-gutter) !important;
  }

  .el-trust-list .elementor-icon-list-items {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .el-trust-list .elementor-icon-list-text {
    white-space: normal !important;
  }
}


/* ==========================================================================
   TRI ESTATE & LEGACY — HOME PAGE SECTIONS 1 THROUGH 8 (below the hero)
   Measured from dev.triestateandlegacy.com (Manus reference), 2026-09-05.
   All values are computed values from that page.

   WHERE IT GOES: Elementor > Site Settings > Custom CSS, pasted BELOW
                  tri-el-header-hero.css. Both files must be present.
   REQUIRES: the CSS classes in tri-el-home-sections-build.md.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. TOKENS — adds to the set in tri-el-header-hero.css
   -------------------------------------------------------------------------- */
:root {
  --el-navy: #0F2A5A;
  --el-navy-85: rgba(15, 42, 89, 0.85);
  --el-ink-blue: #173B7A;
  --el-body: #5C6373;
  --el-red: #C90000;
  --el-red-hover: #A80000;
  --el-gold-text: #D8B877;
  --el-gold-line: #B8924A;
  --el-cream-sec: #F8F5EF;
  --el-hairline: #E6E0D4;
  --el-serif: "Playfair Display", Georgia, serif;
  --el-sans: "Source Sans 3", "Source Sans Pro", ui-sans-serif, system-ui, sans-serif;
  --el-gutter: max(32px, calc((100% - 1216px) / 2));
  --el-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
  --el-radius: 2.4px;
}


/* --------------------------------------------------------------------------
   1. SECTION SHELL — every section is 112px top/bottom, content 1216 max
   -------------------------------------------------------------------------- */
.el-sec {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 112px var(--el-gutter) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

.el-sec--white {
  background-color: #FFFFFF !important;
}

.el-sec--cream {
  background-color: var(--el-cream-sec) !important;
}

.el-sec--navy {
  background-color: var(--el-navy) !important;
}

.el-sec > .e-con-inner {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Zero Elementor's default 10px container padding on every el- inner container */
.el-head,
.el-grid-2,
.el-grid-3,
.el-grid-steps,
.el-stat,
.el-stat-col,
.el-approach,
.el-approach-col,
.el-card,
.el-card-head,
.el-card-body,
.el-step,
.el-step-body,
.el-cta-col {
  padding: 0 !important;
  margin: 0 !important;
}

.el-sec .elementor-widget,
.el-sec .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}


/* --------------------------------------------------------------------------
   2. SECTION HEADER BLOCK — eyebrow, H2, lead. Centered by default.
   -------------------------------------------------------------------------- */
.el-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  max-width: 768px !important;
  width: 100% !important;
  margin: 0 auto !important;
  gap: 0 !important;
}

.el-head--left {
  align-items: flex-start !important;
  text-align: left !important;
  max-width: none !important;
  margin: 0 !important;
}

/* EYEBROW — same rule as the hero. Add el-eyebrow--dark on white/cream sections. */
.el-eyebrow .elementor-heading-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--el-sans) !important;
  font-size: 12.48px !important;
  font-weight: 600 !important;
  line-height: 21px !important;
  letter-spacing: 2.75px !important;
  text-transform: uppercase !important;
  color: var(--el-gold-text) !important;
  white-space: nowrap !important;
}

.el-eyebrow .elementor-heading-title::before,
.el-eyebrow .elementor-heading-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  flex: 0 0 40px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--el-gold-line), rgba(0, 0, 0, 0));
}

.el-eyebrow--dark .elementor-heading-title {
  color: var(--el-gold-line) !important;
}

/* H2 — Playfair 48 / 700 / 1.1 / -0.72px, ink blue. Modifiers below. */
.el-h2 .elementor-heading-title {
  margin: 20px 0 0 0 !important;
  padding: 0 !important;
  font-family: var(--el-serif) !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.72px !important;
  color: var(--el-ink-blue) !important;
}

.el-head .el-h2 .elementor-heading-title {
  text-align: center !important;
}

.el-head--left .el-h2 .elementor-heading-title {
  text-align: left !important;
}

.el-h2--light .elementor-heading-title {
  color: #FFFFFF !important;
}

.el-h2--sm .elementor-heading-title {
  font-size: 36px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.54px !important;
  margin-top: 0 !important;
}

.el-h2--cta .elementor-heading-title {
  line-height: 1.25 !important;
}

/* LEAD — 18 / 1.625 body gray, 20px below the H2 */
.el-lead,
.el-lead .elementor-widget-container {
  margin-top: 20px !important;
}

.el-lead p,
.el-lead .elementor-widget-container {
  font-family: var(--el-sans) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 29.25px !important;
  color: var(--el-body) !important;
  margin-bottom: 0 !important;
}

.el-head .el-lead p {
  text-align: center !important;
}

.el-lead--light p,
.el-lead--light .elementor-widget-container {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* PROSE — multi-paragraph body copy. First p 28 below H2, then 16 between. */
.el-prose,
.el-prose .elementor-widget-container {
  margin-top: 28px !important;
}

.el-prose p {
  font-family: var(--el-sans) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 29.25px !important;
  color: var(--el-body) !important;
  text-align: left !important;
  margin: 0 !important;
}

.el-prose p + p {
  margin-top: 16px !important;
}

.el-prose--light p {
  color: rgba(255, 255, 255, 0.75) !important;
}


/* --------------------------------------------------------------------------
   3. GRIDS
   -------------------------------------------------------------------------- */
.el-grid-2,
.el-grid-3,
.el-grid-steps {
  display: grid !important;
  width: 100% !important;
  align-items: stretch !important;
}

.el-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin-top: 64px !important;
}

.el-grid-2--wide {
  gap: 40px !important;
}

.el-grid-2--tight {
  margin-top: 56px !important;
}

.el-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin-top: 64px !important;
}

.el-grid-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 56px !important;
}

.el-grid-2 > .e-con-inner,
.el-grid-3 > .e-con-inner,
.el-grid-steps > .e-con-inner {
  display: contents !important;
}


/* --------------------------------------------------------------------------
   4. CARDS — white, 2.4 radius, soft shadow. Modifiers change padding/border.
   -------------------------------------------------------------------------- */
.el-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  background-color: #FFFFFF !important;
  border-radius: var(--el-radius) !important;
  padding: 28px !important;
  box-shadow: var(--el-card-shadow) !important;
  border: none !important;
  height: 100% !important;
}

.el-card--lg {
  padding: 32px !important;
}

.el-card--flat {
  box-shadow: none !important;
  border: 1px solid var(--el-hairline) !important;
}

.el-card--row {
  flex-direction: row !important;
  gap: 20px !important;
}

/* Icon box — 48 navy square with a 24 white icon (What We Do cards) */
.el-card-icon .elementor-icon-wrapper {
  display: block !important;
  text-align: left !important;
}

.el-card-icon .elementor-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  background-color: var(--el-ink-blue) !important;
  border-radius: var(--el-radius) !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.el-card-icon .elementor-icon svg,
.el-card-icon .elementor-icon i {
  width: 24px !important;
  height: 24px !important;
  font-size: 24px !important;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* Bare icon — no box (Why Us cards: 32 ink blue; Documents cards: 26 gold) */
.el-card-icon--bare .elementor-icon {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.el-card-icon--bare .elementor-icon svg,
.el-card-icon--bare .elementor-icon i {
  width: 32px !important;
  height: 32px !important;
  font-size: 32px !important;
  color: var(--el-ink-blue) !important;
  fill: var(--el-ink-blue) !important;
}

.el-card-icon--gold .elementor-icon svg,
.el-card-icon--gold .elementor-icon i {
  width: 26px !important;
  height: 26px !important;
  font-size: 26px !important;
  color: var(--el-gold-line) !important;
  fill: var(--el-gold-line) !important;
}

/* Card head row — icon + title side by side (Documents cards) */
.el-card-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-bottom: 20px !important;
}

.el-card-head .el-card-title .elementor-heading-title {
  margin-top: 0 !important;
}

/* Card body column (row cards) */
.el-card-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Card title — Playfair 20 / 28, 20 below icon box */
.el-card-title .elementor-heading-title {
  margin: 20px 0 0 0 !important;
  padding: 0 !important;
  font-family: var(--el-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
  letter-spacing: -0.3px !important;
  color: var(--el-ink-blue) !important;
  text-align: left !important;
}

.el-card-title--lg .elementor-heading-title {
  font-size: 24px !important;
  line-height: 32px !important;
  letter-spacing: -0.36px !important;
}

.el-card--row .el-card-title .elementor-heading-title,
.el-card--flat .el-card-title .elementor-heading-title {
  margin-top: 0 !important;
}

/* Card text — 15.2 / 24.7 body gray, 12 below title (8 on row cards) */
.el-card-text,
.el-card-text .elementor-widget-container {
  margin-top: 12px !important;
}

.el-card--row .el-card-text,
.el-card--row .el-card-text .elementor-widget-container {
  margin-top: 8px !important;
}

.el-card--lg .el-card-text,
.el-card--lg .el-card-text .elementor-widget-container {
  margin-top: 0 !important;
}

.el-card-text p,
.el-card-text .elementor-widget-container {
  font-family: var(--el-sans) !important;
  font-size: 15.2px !important;
  font-weight: 400 !important;
  line-height: 24.7px !important;
  color: var(--el-body) !important;
  text-align: left !important;
  margin-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
   5. SECTION 1 — STAT BAND (navy, 56% left, copy right)
   -------------------------------------------------------------------------- */
.el-stat {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 48px !important;
  align-items: center !important;
  width: 100% !important;
}

.el-stat > .e-con-inner {
  display: contents !important;
}

.el-stat-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

.el-stat-num .elementor-heading-title {
  margin: 0 !important;
  font-family: var(--el-serif) !important;
  font-size: 96px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -1.44px !important;
  color: var(--el-gold-text) !important;
  text-align: left !important;
}

.el-stat-label,
.el-stat-label .elementor-widget-container {
  margin-top: 12px !important;
}

.el-stat-label p,
.el-stat-label .elementor-widget-container {
  font-family: var(--el-sans) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  color: rgba(255, 255, 255, 0.70) !important;
  text-align: left !important;
  margin-bottom: 0 !important;
}

.el-stat-copy,
.el-stat-copy .elementor-widget-container {
  margin-top: 24px !important;
}

.el-stat-copy p {
  font-family: var(--el-sans) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 29.25px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-align: left !important;
  margin: 0 !important;
}

.el-stat-copy p + p {
  margin-top: 16px !important;
}

.el-stat-close .elementor-heading-title {
  margin: 24px 0 0 0 !important;
  font-family: var(--el-serif) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 32px !important;
  letter-spacing: -0.36px !important;
  color: var(--el-gold-text) !important;
  text-align: left !important;
}


/* --------------------------------------------------------------------------
   6. SECTION 2 — OUR APPROACH (white, copy left 3/5, quote card right 2/5)
   -------------------------------------------------------------------------- */
.el-approach {
  display: grid !important;
  grid-template-columns: 707fr 453fr !important;
  gap: 56px !important;
  align-items: center !important;
  width: 100% !important;
}

.el-approach > .e-con-inner {
  display: contents !important;
}

.el-approach-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  min-width: 0 !important;
}

.el-quote {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  background-color: var(--el-cream-sec) !important;
  border: 1px solid var(--el-hairline) !important;
  border-radius: var(--el-radius) !important;
  padding: 32px !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.el-quote-text .elementor-heading-title {
  margin: 0 !important;
  font-family: var(--el-serif) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 33px !important;
  letter-spacing: -0.36px !important;
  color: var(--el-ink-blue) !important;
  text-align: left !important;
}

.el-quote-by .elementor-heading-title {
  margin: 16px 0 0 0 !important;
  font-family: var(--el-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  color: var(--el-gold-line) !important;
  text-align: left !important;
}


/* --------------------------------------------------------------------------
   7. SECTION 4 — DOCUMENTS closing note (centered, 60 below the cards)
   -------------------------------------------------------------------------- */
.el-note,
.el-note .elementor-widget-container {
  margin-top: 60px !important;
}

.el-note p,
.el-note .elementor-widget-container {
  font-family: var(--el-sans) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  color: var(--el-body) !important;
  text-align: center !important;
  margin-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
   8. SECTION 5 — HOW IT WORKS steps (navy)
   -------------------------------------------------------------------------- */
.el-step {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 16px !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: var(--el-radius) !important;
  padding: 20px !important;
  height: 100% !important;
}

.el-step-num .elementor-heading-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background-color: var(--el-gold-line) !important;
  font-family: var(--el-serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.27px !important;
  color: var(--el-navy) !important;
}

.el-step-num {
  flex: 0 0 40px !important;
  width: 40px !important;
}

.el-step-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 0 !important;
}

.el-step-title .elementor-heading-title {
  margin: 0 !important;
  font-family: var(--el-serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
  letter-spacing: -0.27px !important;
  color: #FFFFFF !important;
  text-align: left !important;
}

.el-step-text,
.el-step-text .elementor-widget-container {
  margin-top: 4px !important;
}

.el-step-text p,
.el-step-text .elementor-widget-container {
  font-family: var(--el-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  text-align: left !important;
  margin-bottom: 0 !important;
}

/* Gold text link under the steps — 17.2 / 600, arrow icon 16, 40 below grid */
.el-link-gold {
  margin-top: 40px !important;
  width: 100% !important;
  text-align: center !important;
}

.el-link-gold .elementor-button-wrapper {
  text-align: center !important;
}

.el-link-gold .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--el-sans) !important;
  font-size: 17.2px !important;
  font-weight: 600 !important;
  line-height: 1.7 !important;
  color: var(--el-gold-text) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.el-link-gold .elementor-button:hover {
  color: #FFFFFF !important;
}

.el-link-gold .elementor-button-icon svg,
.el-link-gold .elementor-button-icon i {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  color: currentColor !important;
  fill: currentColor !important;
}


/* --------------------------------------------------------------------------
   9. SECTION 8 — CTA BAND (photo, navy 85% overlay, centered)
   -------------------------------------------------------------------------- */
.el-cta {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 112px var(--el-gutter) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: hidden !important;
  background-color: var(--el-navy) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.el-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--el-navy-85);
}

.el-cta > .elementor-background-overlay {
  display: none !important;
}

.el-cta > * {
  position: relative;
  z-index: 1;
}

.el-cta > .e-con-inner {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.el-cta-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  gap: 0 !important;
}

.el-cta .el-h2 .elementor-heading-title {
  max-width: 768px !important;
  margin: 20px auto 0 auto !important;
  text-align: center !important;
  color: #FFFFFF !important;
}

.el-cta-text,
.el-cta-text .elementor-widget-container {
  margin-top: 24px !important;
  max-width: 672px !important;
}

.el-cta-text p,
.el-cta-text .elementor-widget-container {
  font-family: var(--el-sans) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  color: rgba(255, 255, 255, 0.80) !important;
  text-align: center !important;
  margin-bottom: 0 !important;
}

.el-cta .el-btn-primary {
  margin-top: 36px !important;
}

.el-cta .el-btn-primary .elementor-button-wrapper {
  text-align: center !important;
}

.el-cta-fine,
.el-cta-fine .elementor-widget-container {
  margin-top: 20px !important;
}

.el-cta-fine p,
.el-cta-fine .elementor-widget-container {
  font-family: var(--el-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: rgba(255, 255, 255, 0.60) !important;
  text-align: center !important;
  margin-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
   10. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .el-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .el-grid-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .el-approach {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 40px !important;
  }

  .el-h2 .elementor-heading-title {
    font-size: 40px !important;
  }

  .el-stat-num .elementor-heading-title {
    font-size: 80px !important;
  }
}

@media (max-width: 767px) {
  :root {
    --el-gutter: 20px;
  }

  .el-sec,
  .el-cta {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  .el-h2 .elementor-heading-title {
    font-size: 34px !important;
    letter-spacing: -0.5px !important;
  }

  .el-h2--sm .elementor-heading-title {
    font-size: 28px !important;
  }

  .el-eyebrow .elementor-heading-title {
    white-space: normal !important;
    font-size: 11.5px !important;
    letter-spacing: 2px !important;
  }

  .el-eyebrow .elementor-heading-title::before,
  .el-eyebrow .elementor-heading-title::after {
    width: 24px;
    flex-basis: 24px;
  }

  .el-lead p,
  .el-lead .elementor-widget-container,
  .el-prose p,
  .el-stat-copy p {
    font-size: 17px !important;
    line-height: 27px !important;
  }

  .el-grid-2,
  .el-grid-3,
  .el-grid-steps {
    grid-template-columns: minmax(0, 1fr) !important;
    margin-top: 40px !important;
  }

  .el-grid-2 {
    gap: 16px !important;
  }

  .el-stat {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }

  .el-stat-num .elementor-heading-title {
    font-size: 64px !important;
  }

  .el-card--row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .el-card,
  .el-card--lg,
  .el-quote {
    padding: 24px !important;
  }

  .el-note,
  .el-note .elementor-widget-container {
    margin-top: 40px !important;
  }

  .el-cta-text,
  .el-cta-text .elementor-widget-container {
    max-width: none !important;
  }
}


/* ==========================================================================
   TRI ESTATE & LEGACY — SHARED INNER-PAGE COMPONENTS
   (Process, Services, Contact, Blog hero)
   Measured from dev.triestateandlegacy.com, 2026-09-09.

   WHERE IT GOES: Elementor > Site Settings > Custom CSS, pasted BELOW
                  tri-el-header-hero.css AND tri-el-home-sections.css.
                  All three files must be present, in that order.
   REUSES tokens/classes already defined in the two files above:
     --el-navy, --el-ink-blue, --el-body, --el-gold-text, --el-gold-line,
     --el-cream-sec, --el-hairline, --el-serif, --el-sans, --el-gutter,
     --el-card-shadow, --el-radius, .el-eyebrow, .el-eyebrow--dark, .el-h2,
     .el-card, .el-card-icon, .el-card-title, .el-card-text, .el-grid-2,
     .el-grid-3, .el-sec, .el-sec--white/--cream/--navy, .el-btn-primary,
     .el-btn-ghost (from header CSS), .el-cta*.
   Do NOT redefine any of those here.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. NEW TOKENS
   -------------------------------------------------------------------------- */
:root {
  --el-navy-tint: rgba(23, 59, 122, 0.08);
}


/* --------------------------------------------------------------------------
   1. PAGE HERO — Process / Services / Contact / Blog (below the sticky header)
   -------------------------------------------------------------------------- */
.el-page-hero {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: 56vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 160px var(--el-gutter) 64px !important;
  overflow: hidden !important;
  background-color: var(--el-navy) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.el-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(15, 42, 89, 0.95) 0%,
    rgba(15, 42, 89, 0.85) 50%,
    rgba(15, 42, 89, 0.65) 100%);
}
.el-page-hero > .elementor-background-overlay {
  display: none !important;
}
.el-page-hero > * {
  position: relative;
  z-index: 1;
}
.el-page-hero > .e-con-inner {
  max-width: 832px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.el-page-hero-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
}
/* Eyebrow reuses .el-eyebrow from the home CSS (light/gold variant, no --dark) */
.el-page-title .elementor-heading-title {
  margin: 20px 0 0 0 !important;
  padding: 0 !important;
  font-family: var(--el-serif) !important;
  font-size: 60px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.9px !important;
  color: #FFFFFF !important;
  text-align: left !important;
}
.el-page-sub,
.el-page-sub .elementor-widget-container {
  margin-top: 24px !important;
  max-width: 672px !important;
}
.el-page-sub p,
.el-page-sub .elementor-widget-container {
  font-family: var(--el-sans) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 32.5px !important;
  color: rgba(255, 255, 255, 0.80) !important;
  text-align: left !important;
  margin-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
   2. PROCESS PAGE — vertical step list (6 items, single column)
   -------------------------------------------------------------------------- */
.el-steplist {
  display: flex !important;
  flex-direction: column !important;
  gap: 64px !important;
  width: 100% !important;
  max-width: 896px !important;
  margin: 0 auto !important;
}
.el-steplist-item {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding-left: 102px !important;
  gap: 0 !important;
  width: 100% !important;
}
.el-steplist-head,
.el-steplist-text {
  max-width: 752px !important;
  width: 100% !important;
}
/* Number badge — absolutely positioned circle, 48px, navy, Playfair */
.el-steplist-num {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background-color: var(--el-navy) !important;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
}
.el-steplist-num .elementor-heading-title {
  margin: 0 !important;
  font-family: var(--el-serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1 !important;
}
/* Icon + title row */
.el-steplist-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  width: 100% !important;
}
.el-steplist-icon .elementor-icon {
  display: inline-flex !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}
.el-steplist-icon .elementor-icon svg,
.el-steplist-icon .elementor-icon i {
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
  color: var(--el-ink-blue) !important;
  fill: var(--el-ink-blue) !important;
}
/* Step 5 icon is gold on dev — add this modifier only on that one icon widget */
.el-steplist-icon--gold .elementor-icon svg,
.el-steplist-icon--gold .elementor-icon i {
  color: var(--el-gold-line) !important;
  fill: var(--el-gold-line) !important;
}
.el-steplist-title .elementor-heading-title {
  margin: 0 !important;
  font-family: var(--el-serif) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 32px !important;
  letter-spacing: -0.36px !important;
  color: var(--el-ink-blue) !important;
  text-align: left !important;
}
.el-steplist-text,
.el-steplist-text .elementor-widget-container {
  margin: 0 !important;
}
.el-steplist-text p,
.el-steplist-text .elementor-widget-container {
  font-family: var(--el-sans) !important;
  font-size: 15.2px !important;
  font-weight: 400 !important;
  line-height: 24.7px !important;
  color: var(--el-body) !important;
  text-align: left !important;
  margin-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
   3. LIGHTWEIGHT NOTE BLOCK — small centered text-only block
      (Services "An Important Distinction", no eyebrow, h3 not h2)
   -------------------------------------------------------------------------- */
.el-note-block {
  max-width: 768px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.el-note-block-title .elementor-heading-title {
  margin: 0 !important;
  font-family: var(--el-serif) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 32px !important;
  color: var(--el-ink-blue) !important;
  text-align: center !important;
}
.el-note-block-text,
.el-note-block-text .elementor-widget-container {
  margin-top: 24px !important;
}
.el-note-block-text p,
.el-note-block-text .elementor-widget-container {
  font-family: var(--el-sans) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  color: var(--el-body) !important;
  text-align: center !important;
  margin-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
   4. SERVICES PAGE — tinted icon-box card modifier ("Core Four" +
      "Advanced & Complex-Situation" grids). Card itself reuses .el-card
      (white, radius, border instead of shadow for these two grids).
   -------------------------------------------------------------------------- */
.el-card--bordered {
  box-shadow: none !important;
  border: 1px solid var(--el-hairline) !important;
}
.el-card-icon--tint .elementor-icon {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--el-navy-tint) !important;
  border-radius: var(--el-radius) !important;
  padding: 0 !important;
}
.el-card-icon--tint .elementor-icon svg,
.el-card-icon--tint .elementor-icon i {
  width: 24px !important;
  height: 24px !important;
  font-size: 24px !important;
  color: var(--el-ink-blue) !important;
  fill: var(--el-ink-blue) !important;
}
/* the one "signature" card (Beneficiary Liquidity Planning) — solid gold box */
.el-card-icon--tint-gold .elementor-icon {
  background-color: var(--el-gold-line) !important;
}
.el-card-icon--tint-gold .elementor-icon svg,
.el-card-icon--tint-gold .elementor-icon i {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}


/* --------------------------------------------------------------------------
   5. CONTACT PAGE — checklist card ("What to expect on the call")
   -------------------------------------------------------------------------- */
.el-checklist {
  width: 100% !important;
  margin-top: 32px !important;
  padding: 24px !important;
  background-color: var(--el-cream-sec) !important;
  border: 1px solid var(--el-hairline) !important;
  border-radius: var(--el-radius) !important;
}
.el-checklist-title .elementor-heading-title {
  margin: 0 !important;
  font-family: var(--el-serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--el-ink-blue) !important;
  text-align: left !important;
}
.el-checklist-items {
  margin-top: 16px !important;
}
.el-checklist-items .elementor-icon-list-item {
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
.el-checklist-items .elementor-icon-list-icon {
  margin-top: 3px !important;
}
.el-checklist-items .elementor-icon-list-icon i,
.el-checklist-items .elementor-icon-list-icon svg {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  color: var(--el-gold-line) !important;
}
.el-checklist-items .elementor-icon-list-text {
  font-family: var(--el-sans) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #1C2330 !important;
}

/* Right-column card shell — whatever booking widget/form lives inside it */
.el-form-card {
  width: 100% !important;
  padding: 40px !important;
  background-color: #FFFFFF !important;
  border: 1px solid var(--el-hairline) !important;
  border-radius: var(--el-radius) !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
}
.el-form-card-title .elementor-heading-title {
  margin: 0 !important;
  font-family: var(--el-serif) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--el-ink-blue) !important;
  text-align: left !important;
}
.el-form-card-sub,
.el-form-card-sub .elementor-widget-container {
  margin-top: 8px !important;
}
.el-form-card-sub p,
.el-form-card-sub .elementor-widget-container {
  font-family: var(--el-sans) !important;
  font-size: 14px !important;
  color: var(--el-body) !important;
  margin-bottom: 0 !important;
}
.el-form-card-widget {
  margin-top: 24px !important;
}


/* --------------------------------------------------------------------------
   6. CONTACT PAGE — FAQ accordion (Elementor "Accordion" widget)
   -------------------------------------------------------------------------- */
.el-faq {
  width: 100% !important;
  max-width: 768px !important;
  margin: 0 auto !important;
}
.el-faq .elementor-accordion-item {
  margin-bottom: 12px !important;
  border: 1px solid var(--el-hairline) !important;
  border-radius: var(--el-radius) !important;
  overflow: hidden !important;
  background-color: #FFFFFF !important;
}
.el-faq .elementor-tab-title {
  padding: 20px 24px !important;
  font-family: var(--el-serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--el-ink-blue) !important;
  border: none !important;
}
.el-faq .elementor-tab-title .elementor-accordion-icon {
  color: var(--el-body) !important;
}
.el-faq .elementor-tab-content {
  padding: 0 24px 20px !important;
  border: none !important;
  font-family: var(--el-sans) !important;
  font-size: 15px !important;
  line-height: 24px !important;
  color: var(--el-body) !important;
}

/* PROCESS-PAGE CORRECTION 2026-09-10: CTA band padding 112px -> 96px on the shared .el-cta rule. This is a global override appended after the original definition above (equal specificity, later in cascade wins), so it cascades to every page using el-cta, including the Home page CTA band. */
.el-cta {
  padding: 96px var(--el-gutter) !important;
}

/* PROCESS-PAGE CORRECTION 2026-09-11: restore the mobile step-down for .el-cta that the 2026-09-10 96px fix silently killed. Dev steps .el-cta down to 80px at <=767px (was 72px pre-existing, now confirmed 80px against dev). Appended AFTER the 96px rule so it wins at this breakpoint on source order; desktop 96px is untouched above 767px. */
@media (max-width: 767px) {
  .el-cta {
    padding: 80px var(--el-gutter) !important;
  }
}/* End custom CSS */