/* ==========================================================================
   ELMENTA CONSULTING — HEADER
   Tokens from the active design "elmenta-clinical-authority".
   Navy #0A1628 · Teal #0D7377 · Teal light #14A5AB
   Type: DM Serif Display (headings) + DM Sans (UI/body)
   ========================================================================== */

:root{
  --el-navy:#0A1628;
  --el-navy-soft:#1A2A3A;
  --el-teal:#0D7377;
  --el-teal-light:#14A5AB;
  --el-header-h:72px;
  --el-maxw:1280px;
}

/* --- 1. Fixed header ------------------------------------------------------ */
/* Astra's transparent-header CSS ships `.ast-theme-transparent-header #masthead
   { position:absolute }` — specificity (0,1,1) beats a bare #masthead, which made
   the header scroll away. Match it and force fixed. */
#masthead,
.ast-theme-transparent-header #masthead,
body.ast-theme-transparent-header #masthead{
  position:fixed!important;
  top:0!important; left:0; right:0;
  width:100%;
  z-index:50;
  background:transparent;
  transition:box-shadow .28s ease;
}
/* Anchor links should not land under the fixed bar */
html{ scroll-padding-top:calc(var(--el-header-h) + 16px); }

/* Navy → teal overlay, translucent, blurred. Painted on the inner wrap because
   Astra overrides a background on #masthead itself even with !important. */
#masthead .ast-main-header-wrap,
#masthead .ast-primary-header-bar,
#masthead .ast-mobile-header-wrap{
  background-color:transparent!important;
}
#masthead .ast-primary-header-bar,
#masthead .ast-mobile-header-wrap .ast-primary-header-bar{
  position:relative;
  isolation:isolate;
  background-image:linear-gradient(
    90deg,
    rgba(10,22,40,.78) 0%,
    rgba(10,22,40,.70) 48%,
    rgba(13,115,119,.46) 100%
  )!important;
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  backdrop-filter:blur(12px) saturate(150%);
  border-bottom:1px solid rgba(20,165,171,.16);
  transition:background-image .28s ease, border-color .28s ease;
}

/* Grid pattern, right side only, faded in from the left.
   Same graph-paper device as the hero band, tightened to 24px for the 72px bar. */
#masthead .ast-primary-header-bar::after{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0;
  width:46%;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(20,165,171,.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,165,171,.20) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 58%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 58%, #000 100%);
}

/* Header content sits above the pattern */
#masthead .site-primary-header-wrap,
#masthead .ast-builder-grid-row{ position:relative; z-index:1; }

#masthead .site-primary-header-wrap.ast-container,
#masthead .ast-mobile-header-wrap .ast-container{
  max-width:var(--el-maxw); margin-inline:auto;
  padding-inline:24px;
}

.ast-primary-header-bar{ min-height:var(--el-header-h)!important; }
#masthead .ast-primary-header-bar,
#masthead .ast-mobile-header-wrap .ast-primary-header-bar{ padding-top:0!important; padding-bottom:0!important; }
#masthead .site-primary-header-wrap{ min-height:var(--el-header-h); }
#masthead .ast-primary-header-bar,
#masthead .ast-main-header-wrap{ min-height:var(--el-header-h)!important; }
#masthead .ast-builder-layout-element{ height:auto; }
#masthead .ast-builder-grid-row{ align-items:center; }

/* Scrolled — deepen the navy so text stays legible over light content */
#masthead.el-scrolled .ast-primary-header-bar,
#masthead.el-scrolled .ast-mobile-header-wrap .ast-primary-header-bar{
  background-image:linear-gradient(
    90deg,
    rgba(10,22,40,.95) 0%,
    rgba(10,22,40,.92) 48%,
    rgba(13,115,119,.62) 100%
  )!important;
  border-bottom-color:rgba(20,165,171,.26);
}
#masthead.el-scrolled{ box-shadow:0 1px 24px rgba(10,22,40,.30); }

/* --- 2. Logo -------------------------------------------------------------- */
/* Astra pads the branding block 16px top and bottom, which made the bar 78px
   once the hard height clamp was removed. Zero it and let min-height govern. */
#masthead .site-branding.ast-site-identity{ padding-block:0!important; }
#masthead .ast-builder-layout-element.ast-flex{ align-items:center; }
#masthead .custom-logo{ width:150px; height:auto; display:block; }
@media (max-width:921px){ #masthead .custom-logo{ width:132px; } }

/* --- 3. Navigation -------------------------------------------------------- */
#masthead .main-header-menu > .menu-item > .menu-link,
#masthead .main-header-menu > .menu-item > a{
  font-family:'DM Sans',sans-serif;
  font-size:14px; font-weight:500; letter-spacing:0;
  color:rgba(255,255,255,.80);
  padding:8px 14px;
  position:relative;
  transition:color .18s ease;
}
#masthead .main-header-menu > .menu-item > a:hover,
#masthead .main-header-menu > .menu-item.current-menu-item > a{ color:#fff; }

#masthead .main-header-menu > .menu-item > a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px;
  height:2px; border-radius:2px; background:var(--el-teal-light);
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
#masthead .main-header-menu > .menu-item > a:hover::after,
#masthead .main-header-menu > .menu-item.current-menu-item > a::after{ transform:scaleX(1); }

/* The 8-item menu plus the CTA needs ~1265px on one line. Below that it used to
   wrap to a second row which the fixed 72px bar then hid, so nav items vanished
   on ~14in laptops. Never wrap: Astra's off-canvas menu takes over below the
   mobile-header breakpoint (raised to 1240px to match this width). */
#masthead .main-header-menu{ flex-wrap:nowrap!important; }
#masthead .main-header-menu > .menu-item > a{ white-space:nowrap; }
#masthead .main-header-menu > .menu-item > .menu-link,
#masthead .main-header-menu > .menu-item > a{
  padding-left:11px; padding-right:11px;
  line-height:1.25!important;
}
#masthead .main-header-menu > .menu-item{ line-height:1.25; }
#masthead .ast-builder-menu-1 .main-header-menu,
#masthead .ast-builder-menu-1{ line-height:1.25; }
#masthead .main-header-menu > .menu-item > a::after{ left:11px; right:11px; }
/* --- 4. CTA button -------------------------------------------------------- */
#masthead .ast-builder-button-wrap .ast-custom-button{
  font-family:'DM Sans',sans-serif;
  font-size:14px; font-weight:500; line-height:1.2;
  padding:10px 20px; border-radius:6px;
  background-color:var(--el-teal); color:#fff;
  box-shadow:0 1px 2px rgba(10,22,40,.18);
  transition:background-color .18s ease, transform .18s ease;
}
#masthead .ast-builder-button-wrap .ast-custom-button:hover{
  background-color:var(--el-teal-light); color:#fff; transform:translateY(-1px);
}
#masthead .ast-builder-button-wrap{ margin-left:12px; }

/* --- 5. Mobile ------------------------------------------------------------ */
#masthead .ast-button-wrap .menu-toggle,
#masthead .ast-button-wrap .menu-toggle.ast-mobile-menu-trigger-minimal{
  background:transparent!important; color:#fff!important; padding:6px;
}
#masthead .ast-button-wrap .menu-toggle svg{ fill:#fff; width:26px; height:26px; }

.ast-mobile-popup-drawer .ast-mobile-popup-inner{ background-color:var(--el-navy)!important; }
.ast-mobile-popup-drawer .menu-item > a{
  font-family:'DM Sans',sans-serif; font-size:16px; font-weight:500;
  color:rgba(255,255,255,.85)!important;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ast-mobile-popup-drawer .menu-item > a:hover{ color:#fff!important; }
.ast-mobile-popup-drawer .ast-custom-button{ width:100%; text-align:center; }
.ast-mobile-popup-drawer .menu-toggle-close{ color:#fff!important; }

/* --- 5c. Mobile menu, defensive ------------------------------------------
   Astra is set to mobile-header-type:dropdown here, but it injects its popup
   markup on first toggle and appends it to <body>, outside #masthead - so any
   rule scoped to #masthead can never reach it. These are unscoped and cover
   every container that can show Astra's default white ground behind the menu. */
.ast-mobile-header-content,
.ast-mobile-header-wrap .main-header-bar-navigation,
.ast-mobile-header-wrap .main-navigation,
.ast-mobile-header-wrap .ast-builder-menu,
.ast-mobile-header-wrap .ast-main-header-bar-alignment,
.ast-mobile-header-wrap .main-header-menu,
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-popup-drawer .ast-mobile-popup-content,
.ast-mobile-popup-drawer .main-header-menu,
.ast-mobile-popup-drawer .ast-mobile-header-content{
  background-color:#0A1628!important;
  background-image:none!important;
}
.ast-mobile-header-content .menu-item > a,
.ast-mobile-header-content .menu-link,
.ast-mobile-popup-drawer .menu-item > a,
.ast-mobile-popup-drawer .menu-link{
  color:rgba(255,255,255,.88)!important;
  background-color:transparent!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  height:auto!important; min-height:0!important; line-height:1.4!important;
  padding:13px 24px!important;
  font-family:'DM Sans',sans-serif; font-size:15px; font-weight:500;
}
.ast-mobile-header-content .menu-item > a:hover,
.ast-mobile-popup-drawer .menu-item > a:hover{
  color:#fff!important; background-color:rgba(20,165,171,.12)!important;
}
/* close icon ships #3a3a3a from the theme options - invisible on navy */
.ast-mobile-popup-drawer .menu-toggle-close,
.ast-mobile-popup-drawer .menu-toggle-close svg,
#masthead .menu-toggle svg{ color:#fff!important; fill:#fff!important; }
/* sub-menu arrows and toggles */
.ast-mobile-header-content .ast-menu-toggle,
.ast-mobile-popup-drawer .ast-menu-toggle{ color:#fff!important; }

/* --- 5b. Mobile dropdown menu --------------------------------------------
   Astra is set to the inline Dropdown style on this build; no popup drawer is
   ever rendered, so the rules above are inert and the nav links fell through to
   the desktop white on Astra's white dropdown ground (invisible menu).        */
#masthead .ast-mobile-header-wrap .main-header-menu,
#masthead .ast-mobile-header-wrap .ast-nav-menu{
  background-color:#0A1628!important;
  border-top:1px solid rgba(20,165,171,.18);
  padding:4px 0 8px;
}
#masthead .ast-mobile-header-wrap .main-header-menu .menu-item > a{
  color:rgba(255,255,255,.86)!important;
  font-family:'DM Sans',sans-serif; font-size:15px; font-weight:500;
  padding:13px 24px!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}
#masthead .ast-mobile-header-wrap .main-header-menu .menu-item > a:hover,
#masthead .ast-mobile-header-wrap .main-header-menu .menu-item.current-menu-item > a{
  color:#fff!important;
  background-color:rgba(20,165,171,.12);
}
#masthead .ast-mobile-header-wrap .main-header-menu .menu-item:last-child > a{
  border-bottom:0!important;
}
/* the desktop growing underline has no place in a stacked list */
#masthead .ast-mobile-header-wrap .main-header-menu > .menu-item > a::after{ display:none!important; }
/* sub-menu items sit one step in, on a slightly deeper ground */
#masthead .ast-mobile-header-wrap .main-header-menu .sub-menu{
  background-color:rgba(0,0,0,.18)!important;
}
#masthead .ast-mobile-header-wrap .main-header-menu .sub-menu .menu-item > a{
  padding-left:38px!important; font-size:14px;
}

/* The open panel also carries the CTA, and its own ground is transparent -
   without this the area below the links shows the page through it. */
#masthead .ast-mobile-header-content{
  background-color:#0A1628!important;
  padding-bottom:14px;
}
/* Menu rows inherit the 72px header-bar height, which makes an 8-item menu
   588px tall. Let each row size to its own padding instead. */
#masthead .ast-mobile-header-wrap .main-header-menu .menu-item,
#masthead .ast-mobile-header-wrap .main-header-menu .menu-link,
#masthead .ast-mobile-header-wrap .main-header-menu > .menu-item > a{
  height:auto!important; min-height:0!important; line-height:1.4;
}
/* the CTA's builder row is a flex container, so the wrap shrinks to content
   no matter what width it is given - make the row a block first */
#masthead .ast-mobile-header-content .ast-builder-layout-element{ display:block!important; }
#masthead .ast-mobile-header-content .ast-builder-button-wrap{
  margin:12px 24px 0!important; display:block!important; width:auto!important;
}
#masthead .ast-mobile-header-content .ast-custom-button{
  display:block!important; width:100%!important; text-align:center; padding:13px 20px!important;
}
#masthead .ast-mobile-header-content .ast-builder-button-wrap .ast-custom-button-link{
  display:block!important; width:100%!important;
}

/* On mobile the bar is narrow — pull the pattern in so it reads */
@media (max-width:921px){
  #masthead .ast-primary-header-bar::after{ width:58%; background-size:20px 20px; }
}

/* --- 6. Navy hero band (sits behind the header) --------------------------- */
body:not(.home) .site-content > .ast-container > .site-main > article > .entry-header,
body:not(.home) .entry-header{
  position:relative;
  background-color:var(--el-navy);
  max-width:none!important;
  width:auto;
  margin:0 calc(50% - 50vw + (var(--el-sb, 0px) / 2)) 48px;
  padding:calc(var(--el-header-h) + 64px) calc(50vw - (var(--el-sb, 0px) / 2) - 50%) 64px;
  text-align:left;
  overflow:hidden;
}
body:not(.home) .entry-header::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(20,165,171,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,165,171,.06) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:.5;
}
body:not(.home) .entry-header .entry-title{
  font-family:'DM Serif Display',serif;
  font-weight:400; color:#fff;
  font-size:52px; line-height:1.12; letter-spacing:-.01em;
  margin:0; position:relative;
}
@media (max-width:921px){
  body:not(.home) .entry-header{ padding-top:calc(var(--el-header-h) + 40px); padding-bottom:40px; }
  body:not(.home) .entry-header .entry-title{ font-size:34px; }
}

body:not(.home).ast-separate-container .site-content{ background:transparent; }
/* ==========================================================================
   HOMEPAGE HERO - split composition (elhero01, page 14)
   Left  : eyebrow / serif H1 / subtext / CTAs / trust row
   Right : SVG Africa network panel + three overlaid capability cards
   Base  : full-width standards band
   Static by design (motion 0.15) - no entrance animation, no parallax.

   NOTE 1: Elementor applies _css_classes to widgets but NOT to containers, so
   every container here is targeted by its stable .elementor-element-<id>
   class. Widget-level classes (.el-hero-title, .el-hcard-title, ...) do work.

   NOTE 2: Elementor ships a default 10px padding on every container and
   overrides widget margins. Both are zeroed explicitly below - without that
   the text column sits 20px right of the standards band, and every vertical
   gap in the left column collapses to 0.
   ========================================================================== */

.elementor-element-elhero01{ position:relative; overflow:hidden; isolation:isolate; }

/* Graph-paper device - same as the header and the inner-page band */
.elementor-element-elhero01::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(20,165,171,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,165,171,.06) 1px, transparent 1px);
  background-size:48px 48px; opacity:.5;
}
/* Teal falloff to the right - same direction as the header gradient */
.elementor-element-elhero01::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 56% at 76% 44%, rgba(13,115,119,.32), transparent 70%);
}

.elementor-element-elherowr{
  max-width:1280px; width:100%; margin-inline:auto;
  padding:0; gap:0;
}

/* --- Split ----------------------------------------------------------------
   Column widths subtract half the gap each so 54/46 stays true and the two
   columns span the wrap exactly, edge to edge with the standards band.        */
.elementor-element-elheroin{
  width:100%; align-items:center;
  padding:0!important; gap:56px!important;
}
.elementor-element-elherolt{
  width:calc(54% - 28px)!important; max-width:calc(54% - 28px)!important;
  flex:0 0 auto!important;
  padding:0!important; gap:0;
}
.elementor-element-elherort{
  width:calc(46% - 28px)!important; max-width:calc(46% - 28px)!important;
  flex:0 0 auto!important;
  padding:0!important; gap:0; position:relative;
}

/* --- Vertical rhythm in the left column -----------------------------------
   Elementor overrides widget margins, so these need !important to land.       */
.elementor-element-elhbrow { margin:0 0 18px!important; }
.elementor-element-elheroh1{ margin:0 0 18px!important; }
.elementor-element-elherosb{ margin:0 0 28px!important; }
.elementor-element-elherocta{ margin:0 0 24px!important; }
.elementor-element-elherotr{ margin:0!important; }

/* --- Eyebrow -------------------------------------------------------------- */
.elementor-element-elhero01 .el-hero-eyebrow .elementor-heading-title{
  font-family:'DM Sans',sans-serif;
  font-size:12px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:#14A5AB;
  display:flex; align-items:center; gap:14px;
}
.elementor-element-elhero01 .el-hero-eyebrow .elementor-heading-title::before{
  content:""; width:30px; height:1px; background:#14A5AB; flex:none; opacity:.8;
}

/* --- Headline -------------------------------------------------------------
   Sized so "Training & Expert Mentorship" fits one line inside the column;
   at the old 3.9vw it needed 717px in a 624px column and broke to 4 lines.    */
.elementor-element-elhero01 .el-hero-title .elementor-heading-title{
  font-family:'DM Serif Display',serif;
  font-weight:400;
  font-size:clamp(2rem, 3.15vw, 2.95rem);
  line-height:1.12;
  letter-spacing:-.015em;
  color:#FFFFFF;
  max-width:none;
}
.elementor-element-elhero01 .el-hero-title em{ font-style:italic; color:#14A5AB; }
.elementor-element-elhero01 .el-hero-title .el-dot{ color:#14A5AB; }

/* --- Subtext --------------------------------------------------------------
   Held to ~62 characters; unconstrained it ran the full 622px column.         */
.elementor-element-elhero01 .el-hero-sub p{
  font-family:'DM Sans',sans-serif;
  font-size:17px; font-weight:400; line-height:1.65;
  color:rgba(255,255,255,.72);
  max-width:540px; margin:0;
}

/* --- CTAs ----------------------------------------------------------------- */
.elementor-element-elherocta{
  width:auto; padding:0;
  flex-wrap:wrap; align-items:stretch;
  gap:12px;
}
.elementor-element-elherocta .elementor-widget-button{ display:flex; }
.elementor-element-elherocta .elementor-button{
  font-family:'DM Sans',sans-serif;
  font-size:15px; font-weight:500; line-height:1.2;
  padding:14px 24px; border-radius:6px!important;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.elementor-element-elhero01 .el-btn-primary .elementor-button{
  background-color:#0D7377; color:#fff; border:1px solid #0D7377;
}
.elementor-element-elhero01 .el-btn-primary .elementor-button:hover{
  background-color:#14A5AB; border-color:#14A5AB; transform:translateY(-1px);
}
.elementor-element-elhero01 .el-btn-ghost .elementor-button{
  background-color:transparent; color:#fff; border:1px solid rgba(255,255,255,.26);
}
.elementor-element-elhero01 .el-btn-ghost .elementor-button:hover{
  background-color:rgba(20,165,171,.12); border-color:rgba(20,165,171,.55); transform:translateY(-1px);
}

/* --- Trust row ------------------------------------------------------------ */
.el-hero-trust{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px;
}
.el-hero-trust li{
  display:flex; align-items:center; gap:8px; margin:0;
  font-family:'DM Sans',sans-serif; font-size:14px; line-height:1.4;
  color:rgba(255,255,255,.62);
}
.el-hero-trust svg{ width:16px; height:16px; color:#14A5AB; flex:none; }

/* --- Africa network panel ------------------------------------------------- */
.el-map-wrap{ position:relative; }
.el-map-wrap::before{
  content:""; position:absolute; left:52%; top:50%;
  width:88%; aspect-ratio:1/1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(20,165,171,.22), transparent 66%);
  pointer-events:none;
}
.el-map{ display:block; width:100%; height:auto; max-height:min(52vh,470px); margin-inline:auto; position:relative; }
.el-map-outline{ stroke:#14A5AB; stroke-width:1.5; opacity:.9; }
.el-map-grid line{ stroke:#14A5AB; stroke-width:.5; opacity:.16; }
.el-map-links line{ stroke:#14A5AB; stroke-width:.7; opacity:.34; }
.el-map-nodes circle{ fill:#14A5AB; opacity:.85; }
.el-map-nodes .el-node-lg{ fill:#FFFFFF; opacity:.95; }

/* --- Capability cards (overlaid on the panel) -----------------------------
   Placed on a deliberate top-left / mid-left / lower-right diagonal, each
   held inside the column's edges rather than bleeding past them.             */
.elementor-element-elhcarda,
.elementor-element-elhcardb,
.elementor-element-elhcardc{
  position:absolute; z-index:2;
  width:min(218px,44%);
  padding:15px 17px;
  border-radius:8px;
  background:linear-gradient(158deg, rgba(10,22,40,.88), rgba(13,115,119,.30));
  border:1px solid rgba(20,165,171,.30);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  backdrop-filter:blur(10px) saturate(140%);
  gap:0;
}
.elementor-element-elhcarda{ top:1%;  left:0; }
.elementor-element-elhcardb{ top:34%; left:-2%; }
.elementor-element-elhcardc{ top:69%; right:0; }

.el-hcard-ico{ display:block; color:#14A5AB; margin-bottom:10px; }
.el-hcard-ico svg{ width:22px; height:22px; display:block; }
.elementor-element-elhero01 .el-hcard-title{ margin:0 0 6px!important; }
.elementor-element-elhero01 .el-hcard-title .elementor-heading-title{
  font-family:'DM Sans',sans-serif;
  font-size:11.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:#FFFFFF; line-height:1.35;
}
.elementor-element-elhero01 .el-hcard-desc{ margin:0!important; }
.elementor-element-elhero01 .el-hcard-desc p{
  font-family:'DM Sans',sans-serif;
  font-size:13px; line-height:1.5; color:rgba(255,255,255,.66); margin:0;
}

/* --- Standards band -------------------------------------------------------
   min-width:0 lets the three cells divide the band exactly in thirds; without
   it the longest cell sets a min-content floor and the cells come out uneven. */
.elementor-element-elherost{
  width:100%; margin-top:38px; padding:0;
  border:1px solid rgba(20,165,171,.22);
  border-radius:8px;
  background:rgba(255,255,255,.028);
  gap:0!important; padding:0!important;
}
.elementor-element-elhsta,
.elementor-element-elhstb,
.elementor-element-elhstc{
  flex:1 1 0!important; width:auto!important; max-width:none!important; min-width:0!important;
  padding:18px 24px!important;
  align-items:center;
}
.elementor-element-elhstb,
.elementor-element-elhstc{ border-left:1px solid rgba(20,165,171,.16)!important; }

.el-stat-ico{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none;
  border:1px solid rgba(20,165,171,.34); border-radius:8px;
  color:#14A5AB;
}
.el-stat-ico svg{ width:21px; height:21px; }
.el-stat-body{ display:flex; flex-direction:column; min-width:0; }
.el-stat-val{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:18px; line-height:1.25; color:#FFFFFF;
}
.el-stat-lab{
  font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:#14A5AB; margin-top:5px;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:1200px){
  .elementor-element-elheroin{ gap:40px!important; }
  .elementor-element-elherolt{ width:calc(55% - 20px)!important; max-width:calc(55% - 20px)!important; }
  .elementor-element-elherort{ width:calc(45% - 20px)!important; max-width:calc(45% - 20px)!important; }
  .elementor-element-elhcarda,
  .elementor-element-elhcardb,
  .elementor-element-elhcardc{ width:min(196px,48%); padding:13px 15px; }
  .elementor-element-elhcardb{ left:-1%; }
  .elementor-element-elherost .el-stat-val{ font-size:16.5px; }
}

/* Tablet - stack the split; cards drop below the map in a row */
@media (max-width:1024px){
  .elementor-element-elheroin{ flex-direction:column!important; align-items:stretch!important; gap:36px!important; }
  .elementor-element-elherolt,
  .elementor-element-elherort{ flex:0 0 auto!important; max-width:100%!important; width:100%!important; }
  .elementor-element-elherort{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .elementor-element-elheromap{ grid-column:1 / -1; }
  .el-map{ max-height:320px; }
  .elementor-element-elhcarda,
  .elementor-element-elhcardb,
  .elementor-element-elhcardc{
    position:static!important; width:auto!important; inset:auto!important;
  }
  .elementor-element-elhero01 .el-hero-sub p{ max-width:60ch; }
}

/* Mobile - cards hidden (they restate the service pillars carried below the
   fold); band stacks to one column so the CTA stays in the first viewport. */
@media (max-width:767px){
  /* The Africa panel and the standards band share one block on a phone: the
     map drops out of flow and sits behind the band as a backdrop instead of
     stacking above it. Saves roughly 275px of hero height. */
  .elementor-element-elherowr{ position:relative; }
  /* Elementor gives every container position:relative, so the absolute map
     below would otherwise resolve against elheroin and land above the band. */
  .elementor-element-elheroin{ position:static!important; }
  .elementor-element-elherort{
    position:absolute!important;
    left:0!important; right:0!important; bottom:0!important; top:auto!important;
    width:auto!important; max-width:none!important;
    display:flex!important; align-items:flex-end; justify-content:center;
    margin:0!important; padding:0!important;
    z-index:0; pointer-events:none;
  }
  .elementor-element-elheromap{ display:flex; justify-content:center; width:100%; }
  .el-map{
    height:258px!important; max-height:none!important;
    width:auto!important; max-width:none!important;
    opacity:.72;
  }
  .el-map-wrap::before{ opacity:.8; }
  .elementor-element-elhcarda,
  .elementor-element-elhcardb,
  .elementor-element-elhcardc{ display:none!important; }
  /* size the SVG box to the drawing so the block is not padded by empty
     letterboxing either side of the continent */
  .el-map{ width:auto; max-width:100%; max-height:250px; }
  .elementor-element-elheroin{ gap:24px!important; }
  .elementor-element-elherost{
    flex-direction:column!important; margin-top:26px;
    align-items:stretch!important;
    position:relative; z-index:1;
    background:rgba(10,22,40,.26)!important;
    border-color:rgba(20,165,171,.34)!important;
  }
  .elementor-element-elhsta,
  .elementor-element-elhstb,
  .elementor-element-elhstc{ width:100%; max-width:none; flex:0 0 auto; }
  .elementor-element-elherost .el-stat-val,
  .elementor-element-elherost .el-stat-lab{
    text-shadow:0 1px 8px rgba(10,22,40,.92), 0 0 2px rgba(10,22,40,.8);
  }
  .elementor-element-elherost .el-stat-ico{
    background:rgba(10,22,40,.62);
    border-color:rgba(20,165,171,.44);
  }
  .elementor-element-elhstb,
  .elementor-element-elhstc{
    border-left:0!important; border-top:1px solid rgba(20,165,171,.16)!important;
  }
  .elementor-element-elhero01 .el-hero-sub p{ font-size:16px; max-width:none; }
  .elementor-element-elherosb{ margin:0 0 24px!important; }
  .elementor-element-elherocta{ margin:0 0 20px!important; }
  .el-hero-trust{ gap:8px 18px; }
  .el-hero-trust li{ font-size:13px; }
}

@media (max-width:600px){
  .elementor-element-elhero01 .el-hero-title .elementor-heading-title{
    font-size:2rem; max-width:none;
  }
  .elementor-element-elhero01 .el-hero-title br{ display:none; }
  .elementor-element-elhero01 .el-hero-eyebrow .elementor-heading-title{
    font-size:10.5px; letter-spacing:.12em;
    align-items:flex-start;
  }
  .elementor-element-elhero01 .el-hero-eyebrow .elementor-heading-title::before{
    margin-top:6px;
  }
  .elementor-element-elhero01 .el-hero-eyebrow .elementor-heading-title::before{ width:20px; }
  .elementor-element.elementor-element-elherocta{
    flex-direction:column!important; align-items:stretch!important; width:100%!important;
  }
  .elementor-element-elherocta .elementor-widget-button{ width:100%!important; display:block!important; }
  .elementor-element-elherocta .elementor-widget-container,
  .elementor-element-elherocta .elementor-button-wrapper{ width:100%; display:block; }
  .elementor-element-elherocta .elementor-button{ width:100%!important; justify-content:center; }
}

/* Let the hero run full-bleed inside Astra's boxed container */
body.home.ast-separate-container .site-content > .ast-container{ max-width:none; padding:0; }
body.home.ast-separate-container .ast-article-single{ padding:0; background:transparent; border:0; }

/* ==========================================================================

   Static by design (motion 0.15).
   ========================================================================== */

/* --- Mentorship section --------------------------------------------------- */
.elementor-element-elmen01{
  position:relative; overflow:hidden; isolation:isolate;
  padding-top:64px!important; padding-bottom:76px!important;
}
.elementor-element-elmen01::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(20,165,171,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,165,171,.06) 1px, transparent 1px);
  background-size:48px 48px; opacity:.5;
}
.elementor-element-elmen01::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(56% 54% at 78% 46%, rgba(13,115,119,.28), transparent 70%);
}
.elementor-element-elmenwr{
  max-width:1280px; width:100%; margin-inline:auto;
  padding:0!important; gap:0!important;
}
.elementor-element-elmenin{
  width:100%; align-items:center;
  padding:0!important; gap:56px!important;
}
.elementor-element-elmenlt{
  width:calc(52% - 28px)!important; max-width:calc(52% - 28px)!important;
  flex:0 0 auto!important; padding:0!important; gap:0;
}
.elementor-element-elmenrt{
  width:calc(48% - 28px)!important; max-width:calc(48% - 28px)!important;
  flex:0 0 auto!important; padding:0!important; gap:20px!important;
}

/* Vertical rhythm (Elementor strips widget margins) */
.elementor-element-elmbrow { margin:0 0 16px!important; }
.elementor-element-elmenh2 { margin:0 0 18px!important; }
.elementor-element-elmrule { margin:0 0 20px!important; }
.elementor-element-elmensb { margin:0 0 26px!important; }
.elementor-element-elmlist { margin:0 0 28px!important; }
.elementor-element-elmencta{ margin:0!important; }

/* Eyebrow - same device as the hero */
.elementor-element-elmen01 .el-sec-eyebrow .elementor-heading-title{
  font-family:'DM Sans',sans-serif;
  font-size:12px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:#14A5AB;
  display:flex; align-items:center; gap:14px;
}
.elementor-element-elmen01 .el-sec-eyebrow .elementor-heading-title::before{
  content:""; width:30px; height:1px; background:#14A5AB; flex:none; opacity:.8;
}

.elementor-element-elmen01 .el-sec-title .elementor-heading-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:clamp(1.9rem, 2.9vw, 2.7rem);
  line-height:1.14; letter-spacing:-.015em;
  color:#FFFFFF; max-width:480px;
}
.el-rule{ display:block; width:72px; height:2px; background:#14A5AB; border-radius:2px; }

.elementor-element-elmen01 .el-sec-sub p{
  font-family:'DM Sans',sans-serif;
  font-size:17px; line-height:1.65; color:rgba(255,255,255,.72);
  max-width:460px; margin:0;
}

/* Feature list */
.el-feat{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.el-feat li{
  display:flex; align-items:flex-start; gap:12px; margin:0;
  font-family:'DM Sans',sans-serif; font-size:15.5px; line-height:1.45;
  color:rgba(255,255,255,.82);
}
.el-feat svg{ width:19px; height:19px; color:#14A5AB; flex:none; margin-top:1px; }

/* CTAs - arrow is a glyph on the label, no extra markup */
.elementor-element-elmencta{ width:auto; padding:0; flex-wrap:wrap; align-items:stretch; gap:12px; }
.elementor-element-elmencta .elementor-button{
  font-family:'DM Sans',sans-serif;
  font-size:15px; font-weight:500; line-height:1.2;
  padding:15px 26px; border-radius:6px!important;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.elementor-element-elmencta .elementor-button .elementor-button-text::after{
  content:"\2192"; margin-left:10px; display:inline-block;
  transition:transform .18s ease;
}
.elementor-element-elmencta .elementor-button:hover .elementor-button-text::after{
  transform:translateX(3px);
}
.elementor-element-elmen01 .el-btn-primary .elementor-button{
  background-color:#0D7377; color:#fff; border:1px solid #0D7377;
}
.elementor-element-elmen01 .el-btn-primary .elementor-button:hover{
  background-color:#14A5AB; border-color:#14A5AB; transform:translateY(-1px);
}
.elementor-element-elmen01 .el-btn-ghost .elementor-button{
  background-color:transparent; color:#fff; border:1px solid rgba(255,255,255,.26);
}
.elementor-element-elmen01 .el-btn-ghost .elementor-button:hover{
  background-color:rgba(20,165,171,.12); border-color:rgba(20,165,171,.55); transform:translateY(-1px);
}

/* --- Plan cards -----------------------------------------------------------
   Same translucency-plus-hairline family as the hero capability cards, one
   step more solid because these carry real reading content, not a caption.  */
.elementor-element-elmplan1,
.elementor-element-elmplan2{
  width:100%!important; max-width:none!important; flex:0 0 auto!important;
  padding:30px 32px!important; gap:0!important;
  border-radius:8px;
  background:linear-gradient(158deg, rgba(10,22,40,.92), rgba(13,115,119,.20));
  border:1px solid rgba(20,165,171,.26);
  position:relative;
}
.elementor-element-elmplan1{ border-color:rgba(20,165,171,.52); }

.el-plan-label{
  display:inline-block;
  font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:#14A5AB;
  border:1px solid rgba(20,165,171,.34); border-radius:6px;
  padding:6px 12px;
}
.el-plan-label.is-plain{ border:0; padding:0; color:rgba(255,255,255,.55); }
.elementor-element-elmen01 .el-plan-name{ margin:16px 0 10px!important; }
.elementor-element-elmen01 .el-plan-name .elementor-heading-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:30px; line-height:1.15; color:#FFFFFF;
}
.el-plan-price{ display:flex; align-items:baseline; gap:8px; }
.el-plan-amt{
  font-family:'DM Serif Display',serif; font-size:38px; line-height:1.1; color:#14A5AB;
}
.el-plan-per{ font-family:'DM Sans',sans-serif; font-size:15px; color:rgba(255,255,255,.60); }

.el-plan-tags{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.el-plan-tags li{
  margin:0; font-family:'DM Sans',sans-serif; font-size:13px; color:rgba(255,255,255,.80);
  border:1px solid rgba(20,165,171,.30); border-radius:6px; padding:7px 12px;
}
.el-plan-mark{
  position:absolute; top:28px; right:32px;
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:8px;
  border:1px solid rgba(20,165,171,.34); color:#14A5AB;
}
.el-plan-mark svg{ width:24px; height:24px; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:1200px){
  .elementor-element-elmenin{ gap:40px!important; }
  .elementor-element-elmenlt{ width:calc(53% - 20px)!important; max-width:calc(53% - 20px)!important; }
  .elementor-element-elmenrt{ width:calc(47% - 20px)!important; max-width:calc(47% - 20px)!important; }
}

@media (max-width:1024px){
  .elementor-element-elmenin{ flex-direction:column!important; align-items:stretch!important; gap:40px!important; }
  .elementor-element-elmenlt,
  .elementor-element-elmenrt{ width:100%!important; max-width:100%!important; flex:0 0 auto!important; }
  .elementor-element-elmen01 .el-sec-title .elementor-heading-title{ max-width:560px; }
  .elementor-element-elmen01 .el-sec-sub p{ max-width:520px; }
}

@media (max-width:767px){
  .elementor-element-elmplan1,
  .elementor-element-elmplan2{ padding:24px 22px!important; }
  .el-plan-mark{ top:22px; right:22px; width:44px; height:44px; }
  .elementor-element-elmen01 .el-plan-name .elementor-heading-title{ font-size:26px; }
  .el-plan-amt{ font-size:33px; }
  .elementor-element-elmen01 .el-sec-sub p{ font-size:16px; max-width:none; }
  .el-feat li{ font-size:15px; }
}

@media (max-width:600px){
  .elementor-element-elmen01 .el-sec-eyebrow .elementor-heading-title{ font-size:10.5px; letter-spacing:.12em; align-items:flex-start; }
  .elementor-element-elmen01 .el-sec-eyebrow .elementor-heading-title::before{ width:20px; margin-top:6px; }
  .elementor-element.elementor-element-elmencta{ flex-direction:column!important; align-items:stretch!important; width:100%!important; }
  .elementor-element-elmencta .elementor-widget-button{ width:100%!important; display:block!important; }
  .elementor-element-elmencta .elementor-button{ width:100%!important; justify-content:center; }
}

/* ==========================================================================
   SERVICES RIBBON (elsvc01) - card-grid revision
   The one light band on the homepage, between the navy hero and the navy
   mentorship section.

   The six services now sit in a single bordered, rounded grid rather than six
   detached cards: it reads as the mockup's card block while still separating
   by hairlines, which is what the system asks for. Card 3 in the mockup shows
   a teal top edge and a lift - read as the hover state, so it is built as hover
   rather than permanently featuring one service over the others.

   Retained from the measured pass before this: the H2 is the widest element in
   the heading block and sets in two lines; the intro is held narrower beneath.
   ========================================================================== */

.elementor-element-elsvc01{
  position:relative;
  background:linear-gradient(180deg,#FFFFFF 0%,#F4F8F8 62%,#F4F8F8 100%);
  padding-top:76px!important;
  padding-bottom:88px!important;
}
.elementor-element-elsvc01::before,
.elementor-element-elsvc01::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, rgba(13,115,119,.32), rgba(13,115,119,.10) 60%, transparent);
  pointer-events:none; z-index:2;
}
.elementor-element-elsvc01::before{ top:0; }
.elementor-element-elsvc01::after{ bottom:0; }

.elementor-element-elsvcwr{
  max-width:1280px; width:100%; margin-inline:auto;
  padding:0!important; gap:0!important;
  position:relative;
}

/* --- Dotted Africa backdrop ----------------------------------------------
   Same continent path as the hero map, rendered as a dot matrix. Decorative
   only, sits behind the heading block.                                      */
.elementor-element-elsvcbg{
  position:absolute!important;
  top:-14px; right:0;
  width:min(340px,30%);
  margin:0!important; padding:0!important;
  pointer-events:none; z-index:0;
}
.el-svc-map{ line-height:0; }
.el-svc-map svg{ display:block; width:100%; height:auto; opacity:.17; }

/* --- Heading block -------------------------------------------------------- */
.elementor-element-elsvchd{
  width:100%!important; max-width:none!important;
  padding:0!important; gap:0!important;
  position:relative; z-index:1;
}

.elementor-element-elsvceb{ margin:0 0 18px!important; }
.elementor-element-elsvc01 .el-svc-eyebrow .elementor-heading-title{
  font-family:'DM Sans',sans-serif;
  font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:#0D7377;
}
.elementor-element-elsvc01 .el-svc-eyebrow .elementor-heading-title::after{
  content:""; display:block; width:28px; height:2px; background:#14A5AB;
  border-radius:2px; margin-top:10px;
}

.elementor-element-elsvch2{ margin:0 0 22px!important; }
.elementor-element-elsvc01 .el-svc-title .elementor-heading-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:clamp(1.9rem, 3vw, 2.7rem);
  line-height:1.14; letter-spacing:-.015em;
  color:#0A1628;
  max-width:820px;
}
.elementor-element-elsvc01 .el-svc-title .el-hl{ color:#0D7377; }

.elementor-element-elsvcrl{ margin:0 0 24px!important; }
.elementor-element-elsvcin{ margin:0 0 44px!important; }
.elementor-element-elsvc01 .el-svc-intro p{
  font-family:'DM Sans',sans-serif;
  font-size:17px; line-height:1.65; color:#1A2A3A;
  max-width:600px; margin:0;
}

/* --- The card grid --------------------------------------------------------
   One bordered, rounded container; cells divided by hairlines rather than
   floating as six separate cards.                                           */
.elementor-element-elsvcgr{
  display:grid!important;
  grid-template-columns:repeat(3,1fr);
  gap:0!important;
  width:100%!important; max-width:none!important;
  padding:0!important;
  position:relative; z-index:1;
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:8px;
  overflow:hidden;
}
.elementor-element-elsvcgr > .e-con{
  width:auto!important; max-width:none!important; min-width:0!important;
  padding:30px 28px 32px!important;
  gap:0!important;
  position:relative;
  border-right:1px solid #E2E8F0;
  border-bottom:1px solid #E2E8F0;
  transition:background-color .2s ease, box-shadow .2s ease;
}
.elementor-element-elsvcgr > .e-con:nth-child(3n){ border-right:0; }
.elementor-element-elsvcgr > .e-con:nth-child(n+4){ border-bottom:0; }

/* teal top edge wipes in on hover - the state shown on card 3 in the mockup */
.elementor-element-elsvcgr > .e-con::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:#0D7377;
  transform:scaleX(0); transform-origin:left;
  transition:transform .24s ease;
  pointer-events:none; z-index:1;
}
.elementor-element-elsvcgr > .e-con:hover::before,
.elementor-element-elsvcgr > .e-con:focus-within::before{ transform:scaleX(1); }
/* shadow takes the navy hue softly, never black */
.elementor-element-elsvcgr > .e-con:hover,
.elementor-element-elsvcgr > .e-con:focus-within{
  box-shadow:0 10px 30px rgba(10,22,40,.07);
}

/* --- Icon badge ----------------------------------------------------------- */
.el-svc-ico{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  margin:0 0 20px;
  border-radius:50%;
  background:rgba(13,115,119,.07);
  color:#0D7377;
  transition:background-color .2s ease;
}
.el-svc-ico svg{ width:24px; height:24px; display:block; }
.elementor-element-elsvcgr > .e-con:hover .el-svc-ico{ background:rgba(13,115,119,.13); }

/* --- Title (its own internal link) with a rule beneath -------------------- */
.elementor-element-elsvcgr .el-svc-name{ margin:0!important; }
.elementor-element-elsvcgr .el-svc-name .elementor-heading-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:20px; line-height:1.26; color:#0A1628;
}
.elementor-element-elsvcgr .el-svc-name a{
  color:#0A1628; text-decoration:none;
  display:inline-flex; align-items:baseline; gap:10px;
  transition:color .18s ease;
}
.elementor-element-elsvcgr .el-svc-name a::after{
  content:"\2192";
  font-family:'DM Sans',sans-serif; font-size:16px; color:#0D7377;
  transform:translateX(0); transition:transform .18s ease;
}
.elementor-element-elsvcgr > .e-con:hover .el-svc-name a{ color:#0D7377; }
.elementor-element-elsvcgr > .e-con:hover .el-svc-name a::after{ transform:translateX(4px); }
.elementor-element-elsvcgr .el-svc-name a:focus-visible{
  outline:2px solid #0D7377; outline-offset:3px; border-radius:2px;
}

/* --- Whole card is the hit area ------------------------------------------
   Stretched-link pattern: the title keeps being the only <a>, so the anchor
   text stays the service name and each card is a single tab stop, while an
   absolutely positioned pseudo on that anchor covers the whole cell.
   The heading widget has to be position:static or the pseudo would resolve
   against the widget (Elementor sets position:relative on it) and only cover
   the title. Nothing inside the widget is positioned, so this is safe. */
.elementor-element-elsvcgr .el-svc-name{ position:static!important; }
.elementor-element-elsvcgr .el-svc-name a::before{
  content:"";
  position:absolute; inset:0;
  z-index:3;
}
.elementor-element-elsvcgr > .e-con{ cursor:pointer; }
/* keep the focus ring on the title itself, not the stretched box */
.elementor-element-elsvcgr .el-svc-name a:focus-visible::before{ outline:none; }
/* Short teal rule under each service title.
   It has to hang off .elementor-widget-container, not the widget: Elementor
   gives that container height:100%, so a pseudo on the widget itself is pushed
   clear of the widget box and lands on top of the paragraph below - it rendered
   as a strikethrough through the first word. Inside the container it is in
   normal flow and the container grows to fit it. */
.elementor-element-elsvcgr .el-svc-name .elementor-widget-container::after{
  content:""; display:block; width:28px; height:2px;
  background:#14A5AB; border-radius:2px;
  margin:14px 0 0;
}
/* spacing to the copy is set explicitly, not by the pseudo's bottom margin */
.elementor-element-elsvcgr .el-svc-copy{ margin-top:16px!important; }

.elementor-element-elsvcgr .el-svc-copy p{
  font-family:'DM Sans',sans-serif;
  font-size:14.5px; line-height:1.65; color:#1A2A3A;
  opacity:.78; margin:0;
  max-width:34ch;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:1024px){
  .elementor-element-elsvc01{ padding-top:64px!important; padding-bottom:72px!important; }
  .elementor-element-elsvcbg{ width:min(260px,30%); top:-8px; }
  .elementor-element-elsvcgr{ grid-template-columns:repeat(2,1fr); }
  .elementor-element-elsvcgr > .e-con{ padding:26px 24px 28px!important; }
  .elementor-element-elsvcgr > .e-con:nth-child(3n){ border-right:1px solid #E2E8F0; }
  .elementor-element-elsvcgr > .e-con:nth-child(2n){ border-right:0; }
  .elementor-element-elsvcgr > .e-con:nth-child(n+4){ border-bottom:1px solid #E2E8F0; }
  .elementor-element-elsvcgr > .e-con:nth-child(n+5){ border-bottom:0; }
  .elementor-element-elsvc01 .el-svc-intro p{ max-width:540px; }
  .elementor-element-elsvcin{ margin:0 0 36px!important; }
  .elementor-element-elsvcgr .el-svc-copy p{ max-width:40ch; }
}

@media (max-width:767px){
  .elementor-element-elsvc01{ padding-top:52px!important; padding-bottom:60px!important; }
  .elementor-element-elsvcbg{ display:none!important; }
  .elementor-element-elsvcgr{ grid-template-columns:1fr; }
  .elementor-element-elsvcgr > .e-con,
  .elementor-element-elsvcgr > .e-con:nth-child(3n),
  .elementor-element-elsvcgr > .e-con:nth-child(2n){
    border-right:0!important;
    border-bottom:1px solid #E2E8F0!important;
    padding:26px 22px 28px!important;
  }
  .elementor-element-elsvcgr > .e-con:last-child{ border-bottom:0!important; }
  .el-svc-ico{ width:46px; height:46px; margin-bottom:16px; }
  .el-svc-ico svg{ width:22px; height:22px; }
  .elementor-element-elsvcgr .el-svc-name .elementor-heading-title{ font-size:19px; }
  .elementor-element-elsvcgr .el-svc-copy p{ max-width:none; }
  .elementor-element-elsvc01 .el-svc-intro p{ font-size:16px; max-width:none; }
  .elementor-element-elsvceb{ margin:0 0 14px!important; }
  .elementor-element-elsvch2{ margin:0 0 18px!important; }
  .elementor-element-elsvcrl{ margin:0 0 20px!important; }
  .elementor-element-elsvcin{ margin:0 0 30px!important; }
}

/* ==========================================================================
   ABOUT ELMENTA (elabt01)
   White band closing the page before the footer, so grounds run
   navy -> light -> navy -> white. Split is reversed relative to the hero and
   mentorship sections (panel left, prose right) so the three do not read as
   the same layout three times.
   ========================================================================== */

.elementor-element-elabt01{
  position:relative;
  background-color:#FFFFFF;
  padding-top:64px!important; padding-bottom:68px!important;
}
.elementor-element-elabt01::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, rgba(13,115,119,.30), rgba(13,115,119,.10) 60%, transparent);
  pointer-events:none;
}

.elementor-element-elabtwr{
  max-width:1280px; width:100%; margin-inline:auto;
  padding:0!important; gap:0!important;
}

/* stretch, not centre: the panel should read as the same height as the prose
   beside it rather than floating short in the middle of the row */
.elementor-element-elabtin{
  width:100%; align-items:stretch!important;
  padding:0!important; gap:56px!important;
}
.elementor-element-elabtlt{
  width:calc(45% - 28px)!important; max-width:calc(45% - 28px)!important;
  flex:0 0 auto!important;
  padding:22px!important; gap:18px!important;
  justify-content:center;
  position:relative; overflow:hidden;
  background:#0A1628;
  border-radius:8px;
}
/* graph-paper device, same as the hero and footer */
.elementor-element-elabtlt::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(20,165,171,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,165,171,.07) 1px, transparent 1px);
  background-size:40px 40px; opacity:.6;
}
.elementor-element-elabtrt{
  width:calc(55% - 28px)!important; max-width:calc(55% - 28px)!important;
  flex:0 0 auto!important;
  padding:0!important; gap:0!important;
}

/* --- Panel cards ---------------------------------------------------------- */
.elementor-element-elabtc1,
.elementor-element-elabtc2{
  width:100%!important; max-width:none!important; flex:0 0 auto!important;
  position:relative; z-index:1;
  padding:22px 20px!important; gap:18px!important;
  align-items:flex-start;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(20,165,171,.20);
  border-radius:8px;
}
/* The icon lives in its own Elementor html widget, which is a flex item in
   the card row. Without this it shrinks to ~30px and the 52px icon spills out
   of it, overlapping the text block by 5px. */
.elementor-element-elabtc1i,
.elementor-element-elabtc2i{
  flex:0 0 auto!important; width:auto!important; align-self:flex-start;
}
.el-ab-cico{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; flex:none;
  border-radius:8px;
  background:rgba(20,165,171,.10);
  border:1px solid rgba(20,165,171,.24);
  color:#14A5AB;
}
.el-ab-cico svg{ width:26px; height:26px; display:block; }
.el-ab-cbody{ display:block; min-width:0; }
.el-ab-clabel{
  display:block;
  font-family:'DM Sans',sans-serif; font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:#14A5AB;
  margin-bottom:10px;
}
.el-ab-ctitle{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:20px; line-height:1.3; color:#FFFFFF;
  margin:0;
}
.el-ab-crule{
  display:block; width:34px; height:2px; background:#14A5AB;
  border-radius:2px; margin:12px 0 12px;
}
.el-ab-cdesc{
  font-family:'DM Sans',sans-serif; font-size:14.5px; line-height:1.65;
  color:rgba(255,255,255,.72); margin:0;
}

/* --- Right column --------------------------------------------------------- */
.elementor-element-elabteb{ margin:0 0 14px!important; }
.elementor-element-elabt01 .el-ab-eyebrow .elementor-heading-title{
  font-family:'DM Sans',sans-serif;
  font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#0D7377;
}
.elementor-element-elabt01 .el-ab-eyebrow .elementor-heading-title::after{
  content:""; display:block; width:28px; height:2px; background:#14A5AB;
  border-radius:2px; margin-top:10px;
}

.elementor-element-elabth2{ margin:0 0 18px!important; }
.elementor-element-elabt01 .el-ab-title .elementor-heading-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:clamp(1.9rem, 3vw, 2.7rem);
  line-height:1.14; letter-spacing:-.015em;
  color:#0A1628;
  max-width:640px;
}
.elementor-element-elabt01 .el-ab-title .el-hl{ color:#0D7377; }

.elementor-element-elabtrl{ margin:0 0 20px!important; }

.elementor-element-elabtp1{ margin:0 0 24px!important; }
.elementor-element-elabt01 .el-ab-copy p{
  font-family:'DM Sans',sans-serif;
  font-size:16.5px; line-height:1.7; color:#1A2A3A;
  max-width:600px; margin:0;
}
.elementor-element-elabt01 .el-ab-copy p + p{ margin-top:14px; }

/* --- Feature rows --------------------------------------------------------- */
.elementor-element-elabtft{ margin:0 0 22px!important; width:100%; }
.el-ab-feat{ list-style:none; margin:0; padding:0; }
.el-ab-feat li{
  display:flex; align-items:flex-start; gap:16px;
  margin:0; padding:12px 0;
}
.el-ab-feat li + li{ border-top:1px solid #E2E8F0; }
.el-ab-fico{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none;
  border-radius:8px;
  background:rgba(13,115,119,.07);
  color:#0D7377;
}
.el-ab-fico svg{ width:22px; height:22px; display:block; }
.el-ab-fbody{ display:block; min-width:0; }
.el-ab-ftitle{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:17.5px; line-height:1.3; color:#0A1628;
  margin:0 0 5px;
}
.el-ab-fdesc{
  display:block;
  font-family:'DM Sans',sans-serif; font-size:14.5px; line-height:1.6;
  color:#1A2A3A; opacity:.78;
}

/* --- Learn more link ------------------------------------------------------ */
.el-ab-more{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'DM Sans',sans-serif; font-size:15.5px; font-weight:500;
  color:#0D7377; text-decoration:none;
  transition:color .18s ease;
}
.el-ab-more svg{ width:18px; height:18px; transition:transform .18s ease; }
.el-ab-more:hover{ color:#14A5AB; }
.el-ab-more:hover svg{ transform:translateX(4px); }
.el-ab-more:focus-visible{ outline:2px solid #0D7377; outline-offset:3px; border-radius:2px; }

/* --- Stat bar ------------------------------------------------------------- */
.elementor-element-elabtst{ margin:40px 0 0!important; width:100%; }
.el-ab-stats{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:#F4F8F8;
  border:1px solid #E2E8F0;
  border-radius:8px;
  overflow:hidden;
}
.el-ab-stats li{
  display:flex; align-items:center; gap:16px;
  margin:0; padding:22px 22px;
  min-width:0;
}
.el-ab-stats li + li{ border-left:1px solid #E2E8F0; }
.el-ab-sico{
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; flex:none;
  border-radius:50%;
  background:rgba(13,115,119,.07);
  color:#0D7377;
}
.el-ab-sico svg{ width:26px; height:26px; display:block; }
.el-ab-sbody{ display:flex; flex-direction:column; min-width:0; }
.el-ab-sval{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:30px; line-height:1.1; color:#0A1628;
}
.el-ab-slab{
  font-family:'DM Sans',sans-serif; font-size:13.5px; line-height:1.4;
  color:#1A2A3A; opacity:.72; margin-top:6px;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:1200px){
  .elementor-element-elabtin{ gap:40px!important; }
  .elementor-element-elabtlt{ width:calc(46% - 20px)!important; max-width:calc(46% - 20px)!important; padding:20px!important; }
  .elementor-element-elabtrt{ width:calc(54% - 20px)!important; max-width:calc(54% - 20px)!important; }
  .el-ab-stats li{ padding:22px 18px; gap:13px; }
  .el-ab-sval{ font-size:26px; }
  .el-ab-sico{ width:48px; height:48px; }
}

@media (max-width:1024px){
  .elementor-element-elabt01{ padding-top:64px!important; padding-bottom:64px!important; }
  .elementor-element-elabtin{ flex-direction:column!important; align-items:stretch!important; gap:40px!important; }
  .elementor-element-elabtlt,
  .elementor-element-elabtrt{ width:100%!important; max-width:100%!important; flex:0 0 auto!important; }
  .elementor-element-elabt01 .el-ab-title .elementor-heading-title{ max-width:none; }
  .elementor-element-elabt01 .el-ab-copy p{ max-width:none; }
  .el-ab-stats{ grid-template-columns:repeat(2,1fr); }
  .el-ab-stats li:nth-child(odd){ border-left:0; }
  .el-ab-stats li:nth-child(n+3){ border-top:1px solid #E2E8F0; }
  .elementor-element-elabtst{ margin-top:44px!important; }
}

@media (max-width:767px){
  .elementor-element-elabt01{ padding-top:52px!important; padding-bottom:56px!important; }
  .elementor-element-elabtlt{ padding:16px!important; gap:16px!important; }
  .elementor-element-elabtc1,
  .elementor-element-elabtc2{ padding:20px 18px!important; gap:14px!important; flex-direction:column!important; }
  /* The icon lives in its own Elementor html widget, which is a flex item in
   the card row. Without this it shrinks to ~30px and the 52px icon spills out
   of it, overlapping the text block by 5px. */
.elementor-element-elabtc1i,
.elementor-element-elabtc2i{
  flex:0 0 auto!important; width:auto!important; align-self:flex-start;
}
.el-ab-cico{ width:46px; height:46px; }
  .el-ab-ctitle{ font-size:18px; }
  .el-ab-feat li{ gap:13px; padding:14px 0; }
  .el-ab-fico{ width:40px; height:40px; }
  .el-ab-fico svg{ width:20px; height:20px; }
  .el-ab-ftitle{ font-size:16.5px; }
  .elementor-element-elabt01 .el-ab-copy p{ font-size:16px; }
  .el-ab-stats{ grid-template-columns:1fr; }
  .el-ab-stats li{ border-left:0!important; padding:20px 18px; }
  .el-ab-stats li + li{ border-top:1px solid #E2E8F0; }
  .elementor-element-elabtst{ margin-top:36px!important; }
}

/* ==========================================================================
   STANDARDS WE SUPPORT (elstd01)
   Centred composition - correct here rather than a tell, because variance is
   0.2: this direction asks for composed symmetry, and the section is a plain
   parallel list of three programmes with no hierarchy between them.
   Sits on #F4F8F8 so it steps off the white About section above it.
   ========================================================================== */

.elementor-element-elstd01{
  position:relative;
  background-color:#F4F8F8;
  overflow:hidden;
}
.elementor-element-elstd01::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, rgba(13,115,119,.28), rgba(13,115,119,.10) 60%, transparent);
  pointer-events:none; z-index:2;
}

.elementor-element-elstdwr{
  max-width:1280px; width:100%; margin-inline:auto;
  padding:0!important; gap:0!important;
  position:relative;
}

/* --- Dotted globe backdrop ------------------------------------------------ */
.elementor-element-elstdbg{
  position:absolute!important;
  top:-40px; left:-190px;
  width:400px;
  margin:0!important; padding:0!important;
  pointer-events:none; z-index:0;
}
.el-std-globe{ line-height:0; }
.el-std-globe svg{ display:block; width:100%; height:auto; opacity:.13; }

/* --- Heading block -------------------------------------------------------- */
.elementor-element-elstdhd{
  width:100%!important; max-width:none!important;
  padding:0!important; gap:0!important;
  position:relative; z-index:1;
  text-align:center;
}
.elementor-element-elstdeb{ margin:0 0 16px!important; }
.elementor-element-elstd01 .el-std-eyebrow .elementor-heading-title{
  font-family:'DM Sans',sans-serif;
  font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#0D7377;
}
.elementor-element-elstd01 .el-std-eyebrow .elementor-heading-title::after{
  content:""; display:block; width:56px; height:2px; background:#14A5AB;
  border-radius:2px; margin:12px auto 0;
}

.elementor-element-elstdh2{ margin:0 0 18px!important; }
.elementor-element-elstd01 .el-std-title .elementor-heading-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:clamp(2rem, 3.2vw, 2.9rem);
  line-height:1.14; letter-spacing:-.015em;
  color:#0A1628;
  max-width:660px; margin-inline:auto;
}
.elementor-element-elstd01 .el-std-title .el-hl{ color:#0D7377; }

.elementor-element-elstdit{ margin:0 0 44px!important; }
.elementor-element-elstd01 .el-std-intro p{
  font-family:'DM Sans',sans-serif;
  font-size:16.5px; line-height:1.7; color:#1A2A3A;
  max-width:560px; margin-inline:auto; text-align:center;
}

/* --- Card row ------------------------------------------------------------- */
.elementor-element-elstdgr{
  width:100%!important; max-width:none!important;
  padding:0!important; gap:26px!important;
  position:relative; z-index:1;
  align-items:stretch!important;
}
.elementor-element-elstdc1,
.elementor-element-elstdc2,
.elementor-element-elstdc3{
  flex:1 1 0!important; width:auto!important; max-width:none!important; min-width:0!important;
  padding:38px 30px 34px!important; gap:0!important;
  align-items:center;
  text-align:center;
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-bottom:2px solid #0D7377;
  border-radius:8px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.elementor-element-elstdc1:hover,
.elementor-element-elstdc2:hover,
.elementor-element-elstdc3:hover{
  box-shadow:0 12px 34px rgba(10,22,40,.08);
  transform:translateY(-2px);
}

/* --- Icon: navy disc inside a dashed ring --------------------------------- */
.el-std-ring{
  display:flex; align-items:center; justify-content:center;
  width:104px; height:104px;
  border:1px dashed rgba(13,115,119,.38);
  border-radius:50%;
  margin:0 0 26px;
}
.el-std-badge{
  display:flex; align-items:center; justify-content:center;
  width:76px; height:76px;
  border-radius:50%;
  background:#0A1628;
  color:#FFFFFF;
}
.el-std-badge svg{ width:32px; height:32px; display:block; }

/* --- Card text ------------------------------------------------------------ */
.elementor-element-elstdgr .el-std-name{ margin:0 0 8px!important; width:100%; }
.elementor-element-elstdgr .el-std-name .elementor-heading-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:21px; line-height:1.25; color:#0A1628;
}
.el-std-abbr{
  display:block;
  font-family:'DM Sans',sans-serif; font-size:14.5px; font-weight:500;
  color:#0D7377;
}
.el-std-rule{
  display:block; width:40px; height:2px; background:#14A5AB;
  border-radius:2px; margin:18px auto;
}
.el-std-desc{
  font-family:'DM Sans',sans-serif; font-size:14.5px; line-height:1.7;
  color:#1A2A3A; opacity:.78; margin:0;
  max-width:30ch; margin-inline:auto;
}

/* --- Closing link --------------------------------------------------------- */
.elementor-element-elstdln{ margin:40px 0 0!important; text-align:center; width:100%; position:relative; z-index:1; }
.el-std-more{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'DM Sans',sans-serif; font-size:16px; font-weight:500;
  color:#0D7377; text-decoration:none;
  transition:color .18s ease;
}
.el-std-more::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-14px; width:56px; height:2px; background:#14A5AB; border-radius:2px;
}
.el-std-more svg{ width:19px; height:19px; transition:transform .18s ease; }
.el-std-more:hover{ color:#14A5AB; }
.el-std-more:hover svg{ transform:translateX(4px); }
.el-std-more:focus-visible{ outline:2px solid #0D7377; outline-offset:4px; border-radius:2px; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:1024px){
  .elementor-element-elstd01{ padding-top:60px!important; padding-bottom:64px!important; }
  .elementor-element-elstdbg{ width:320px; left:-160px; }
  .elementor-element-elstdgr{ gap:20px!important; }
  .elementor-element-elstdc1,
  .elementor-element-elstdc2,
  .elementor-element-elstdc3{ padding:32px 22px 28px!important; }
  .el-std-ring{ width:92px; height:92px; margin-bottom:22px; }
  .el-std-badge{ width:68px; height:68px; }
  .el-std-badge svg{ width:28px; height:28px; }
  .elementor-element-elstdgr .el-std-name .elementor-heading-title{ font-size:19px; }
  .elementor-element-elstdit{ margin:0 0 36px!important; }
}

@media (max-width:767px){
  .elementor-element-elstd01{ padding-top:48px!important; padding-bottom:52px!important; }
  .elementor-element-elstdbg{ display:none!important; }
  .elementor-element-elstdgr{ flex-direction:column!important; gap:16px!important; }
  .elementor-element-elstdc1,
  .elementor-element-elstdc2,
  .elementor-element-elstdc3{
    flex:0 0 auto!important; width:100%!important;
    padding:30px 22px 26px!important;
  }
  .el-std-ring{ width:86px; height:86px; margin-bottom:20px; }
  .el-std-badge{ width:64px; height:64px; }
  .elementor-element-elstd01 .el-std-intro p{ font-size:16px; }
  .el-std-desc{ max-width:none; }
  .elementor-element-elstdit{ margin:0 0 30px!important; }
  .elementor-element-elstdln{ margin-top:34px!important; }
}

/* ==========================================================================
   SITE-WIDE CTA BAND (.el-cta)
   Rendered by wp-content/novamira-sandbox/elmenta-cta.php on astra_footer_before,
   so it appears above the footer on every page from one source. Not part of any
   page's Elementor content.

   The panel gradient is the header's navy-to-teal device reused, not a new
   wash: same two stops, same direction family.
   ========================================================================== */

.el-cta{
  background:#FFFFFF;
  padding:64px 24px 72px;
  font-family:'DM Sans',sans-serif;
}
.el-cta-inner{ max-width:1280px; margin-inline:auto; }

.el-cta-panel{
  position:relative;
  overflow:hidden;
  border-radius:8px;
  padding:52px 44px 44px;
  background:linear-gradient(118deg, #0A1628 0%, #0A1628 52%, rgba(13,115,119,.55) 100%), #0A1628;
}

/* dotted Africa, bleeding off the panel's right edge */
.el-cta-bg{
  position:absolute; top:-30px; right:-70px;
  width:420px; line-height:0;
  pointer-events:none; z-index:0;
}
.el-cta-bg svg{ display:block; width:100%; height:auto; opacity:.16; }

.el-cta-main{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:64px;
  align-items:start;
}

/* --- Left ----------------------------------------------------------------- */
.el-cta-eyebrow{
  display:block;
  font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#14A5AB;
}
.el-cta-eyebrow::after{
  content:""; display:block; width:28px; height:2px; background:#14A5AB;
  border-radius:2px; margin-top:10px;
}
.el-cta-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:clamp(1.95rem, 3.1vw, 2.75rem);
  line-height:1.16; letter-spacing:-.015em;
  color:#FFFFFF;
  margin:22px 0 0; max-width:560px;
}
/* the accent phrase is its own line in the mockup, so block it rather than
   hoping the measure breaks there - a ch cap alone gave five ragged lines */
.el-cta-title .el-hl{ color:#14A5AB; display:block; }
.el-cta-copy{
  font-size:16.5px; line-height:1.7; color:rgba(255,255,255,.74);
  margin:20px 0 0; max-width:46ch;
}

.el-cta-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.el-cta-btn{
  display:inline-flex; align-items:center; gap:11px;
  padding:15px 26px;
  font-size:15.5px; font-weight:500; line-height:1.2;
  border-radius:6px; text-decoration:none;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.el-cta-btn svg{ width:20px; height:20px; flex:none; }
.el-cta-btn--primary{ background:#0D7377; color:#FFFFFF; border:1px solid #0D7377; }
.el-cta-btn--primary:hover{ background:#14A5AB; border-color:#14A5AB; color:#fff; transform:translateY(-1px); }
.el-cta-btn--ghost{ background:transparent; color:#FFFFFF; border:1px solid rgba(255,255,255,.30); }
.el-cta-btn--ghost:hover{ background:rgba(20,165,171,.12); border-color:rgba(20,165,171,.6); color:#fff; transform:translateY(-1px); }
.el-cta-btn:focus-visible{ outline:2px solid #14A5AB; outline-offset:3px; }

/* --- Right: reasons ------------------------------------------------------- */
.el-cta-reasons{ list-style:none; margin:0; padding:0; }
.el-cta-reasons li{
  display:flex; align-items:flex-start; gap:18px;
  margin:0; padding:18px 0;
}
.el-cta-reasons li + li{ border-top:1px solid rgba(255,255,255,.10); }
.el-cta-reasons li:first-child{ padding-top:0; }
.el-cta-rico{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; flex:none;
  border-radius:50%;
  background:rgba(20,165,171,.13);
  color:#14A5AB;
}
.el-cta-rico svg{ width:24px; height:24px; display:block; }
.el-cta-rbody{ display:block; min-width:0; }
.el-cta-rtitle{
  font-family:'DM Sans',sans-serif; font-weight:500;
  font-size:16.5px; line-height:1.3; color:#FFFFFF;
  margin:0 0 5px;
}
.el-cta-rdesc{
  display:block;
  font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.68);
}

/* --- Contact bar ---------------------------------------------------------- */
.el-cta-contact{
  position:relative; z-index:1;
  list-style:none; margin:46px 0 0; padding:0;
  /* Columns are weighted by the longest element in each cell, which is the
     note in three of the four - not the value. Measured need per cell incl.
     chrome: 286 / 297 / 290 / 246 = 1119 against a 1192 bar, so every note
     sits on one line and all four blocks come out the same height. */
  display:grid; grid-template-columns:1.02fr 1.06fr 1.04fr 0.88fr;
  background:#F7FAFA;
  border-radius:8px;
  overflow:hidden;
}
.el-cta-contact li{
  display:flex; align-items:center; gap:14px;
  margin:0; padding:24px 18px; min-width:0;
}
.el-cta-contact li + li{ border-left:1px solid #E2E8F0; }
.el-cta-cico{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; flex:none;
  border-radius:50%;
  background:rgba(13,115,119,.09);
  color:#0D7377;
}
.el-cta-cico svg{ width:22px; height:22px; display:block; }
.el-cta-cbody{ display:flex; flex-direction:column; min-width:0; }
.el-cta-clabel{
  font-size:15px; font-weight:500; color:#0A1628; line-height:1.3;
}
.el-cta-cval{
  font-size:14.5px; font-weight:500; color:#0D7377; line-height:1.4;
  margin-top:5px; text-decoration:none; overflow-wrap:anywhere;
}
a.el-cta-cval:hover{ color:#14A5AB; text-decoration:underline; }
a.el-cta-cval:focus-visible{ outline:2px solid #0D7377; outline-offset:2px; border-radius:2px; }
.el-cta-cnote{
  font-size:12.5px; line-height:1.45; color:#1A2A3A; opacity:.66; margin-top:5px;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:1200px){
  .el-cta-panel{ padding:44px 40px 38px; }
  .el-cta-main{ gap:44px; }
  .el-cta-panel{ padding:44px 32px 38px; }
  /* Below 1200 the bar cannot fit every note on one line (needs ~1079px,
     has ~988 at 1100), so priorities swap: weight the columns by the VALUE
     each cell must never wrap - the phone and the email are the actionable
     content - and let the notes run to two lines. The min-height reserves
     those two lines everywhere so the four blocks still sit level. */
  .el-cta-contact{ grid-template-columns:0.88fr 1.31fr 0.93fr 0.88fr; }
  .el-cta-cnote{ min-height:36px; }
  .el-cta-contact li{ padding:22px 15px; gap:12px; }
  .el-cta-cico{ width:44px; height:44px; }
}

@media (max-width:1024px){
  .el-cta{ padding:56px 24px 60px; }
  .el-cta-main{ grid-template-columns:1fr; gap:36px; }
  .el-cta-title{ max-width:20ch; }
  .el-cta-copy{ max-width:60ch; }
  .el-cta-bg{ width:340px; right:-110px; opacity:.8; }
  .el-cta-contact{ grid-template-columns:repeat(2,1fr); }
  .el-cta-contact li{ padding:22px 20px; gap:14px; }
  .el-cta-contact li:nth-child(odd){ border-left:0; }
  .el-cta-contact li:nth-child(n+3){ border-top:1px solid #E2E8F0; }
}

@media (max-width:767px){
  .el-cta{ padding:40px 20px 44px; }
  .el-cta-panel{ padding:28px 20px 22px; }
  .el-cta-bg{ display:none; }
  .el-cta-main{ gap:26px; }
  .el-cta-title{ max-width:none; margin-top:16px; line-height:1.2; }
  .el-cta-copy{ font-size:16px; max-width:none; }
  .el-cta-actions{ flex-direction:column; align-items:stretch; gap:11px; margin-top:24px; }
  .el-cta-btn{ width:100%; justify-content:center; }
  .el-cta-reasons li{ gap:13px; padding:14px 0; }
  .el-cta-rico{ width:46px; height:46px; }
  .el-cta-rico svg{ width:22px; height:22px; }
  .el-cta-contact{ grid-template-columns:1fr; margin-top:28px; }
  .el-cta-contact li{ border-left:0!important; padding:18px 16px; }
  .el-cta-cnote{ min-height:0; }
  .el-cta-contact li + li{ border-top:1px solid #E2E8F0; }
}

/* ==========================================================================
   SITE FOOTER (.el-footer)
   Rendered by wp-content/novamira-sandbox/elmenta-footer.php, which replaces
   Astra_Builder_Footer::footer_markup entirely.

   Two deviations from the mockup, both to stay inside the design system:
   - the decorative hexagon/molecular pattern is the site's established 48px
     graph-paper grid instead, the same device as the header and hero;
   - the seam glow is the teal-to-transparent hairline used at the services
     ribbon seams, not a bloom (the system bans glow).
   Social buttons are 8px rounded squares, matching the hero standards band's
   icon tiles - the radius scale tops out at 8px and bans pill shapes.
   ========================================================================== */

.el-footer{
  position:relative;
  background-color:#0A1628;
  color:rgba(255,255,255,.72);
  font-family:'DM Sans',sans-serif;
  isolation:isolate;
  margin:0; padding:0;
}
.el-footer::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(20,165,171,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,165,171,.06) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:.5;
}
/* seam hairline, brightest at centre - same device as the ribbon seams */
.el-footer::after{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(20,165,171,.55) 50%, transparent);
  pointer-events:none;
}

.el-footer-inner{
  max-width:1280px; margin-inline:auto; padding-inline:24px; width:100%;
}

/* --- Top region ----------------------------------------------------------- */
.el-footer-top{ padding:72px 0 64px; }
.el-footer-top .el-footer-inner{
  display:grid;
  grid-template-columns:1.35fr 1fr 1.05fr .85fr 1.3fr;
  gap:0;
}
.el-footer-top .el-f-col,
.el-footer-top .el-f-sub{
  padding-left:40px;
  border-left:1px solid rgba(255,255,255,.08);
}
.el-f-brand{ padding-right:40px; }

/* --- Brand ---------------------------------------------------------------- */
.el-f-logo{ display:inline-block; margin:0 0 22px; }
.el-f-logo img{ width:190px; height:auto; display:block; }
.el-f-desc{
  font-size:15px; line-height:1.7; color:rgba(255,255,255,.70);
  margin:0 0 26px; max-width:34ch;
}
.el-f-rule{ display:block; width:52px; height:2px; background:#14A5AB; border-radius:2px; margin:0 0 22px; }
.el-f-tag{
  font-size:12.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  line-height:1.7; color:#14A5AB; margin:0; max-width:26ch;
}

/* --- Column heads --------------------------------------------------------- */
.el-f-head{
  font-family:'DM Sans',sans-serif;
  font-size:13px; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:#FFFFFF; margin:0 0 10px; line-height:1.3;
}
.el-f-col .el-f-head::after,
.el-f-sub .el-f-head::after{
  content:""; display:block; width:34px; height:2px; background:#14A5AB;
  border-radius:2px; margin-top:12px;
}
.el-f-col .el-f-head{ margin-bottom:20px; }
.el-f-sub .el-f-head{ margin-bottom:20px; }

/* --- Link lists ----------------------------------------------------------- */
.el-f-list{ list-style:none; margin:0; padding:0; }
.el-f-list li{ margin:0; }
.el-f-list li + li{ border-top:1px solid rgba(255,255,255,.07); }
.el-f-list a{
  display:flex; align-items:center; gap:10px;
  padding:11px 0;
  font-size:14.5px; line-height:1.4;
  color:rgba(255,255,255,.74); text-decoration:none;
  transition:color .18s ease;
}
.el-f-list a svg{ color:#14A5AB; flex:none; transition:transform .18s ease; }
.el-f-list a:hover{ color:#FFFFFF; }
.el-f-list a:hover svg{ transform:translateX(3px); }
.el-f-list a:focus-visible{ outline:2px solid #14A5AB; outline-offset:3px; border-radius:2px; }

/* --- Subscribe ------------------------------------------------------------ */
.el-f-subcopy{ font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.70); margin:0 0 20px; max-width:30ch; }
.el-f-form{ margin:0; }
/* honeypot: off-screen rather than display:none so bots still fill it */
.el-f-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.el-f-field{ position:relative; margin:0 0 12px; }
.el-f-field-ico{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:#14A5AB; display:flex; pointer-events:none;
}
.el-f-field input[type="email"]{
  width:100%; box-sizing:border-box;
  padding:14px 16px 14px 44px;
  font-family:'DM Sans',sans-serif; font-size:14.5px; line-height:1.3;
  color:#FFFFFF;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(20,165,171,.30);
  border-radius:6px;
  transition:border-color .18s ease, background-color .18s ease;
}
.el-f-field input[type="email"]::placeholder{ color:rgba(255,255,255,.42); }
.el-f-field input[type="email"]:focus{
  outline:none;
  border-color:#14A5AB;
  background:rgba(255,255,255,.07);
}

.el-f-submit{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; box-sizing:border-box;
  padding:14px 20px;
  font-family:'DM Sans',sans-serif; font-size:15px; font-weight:500; line-height:1.2;
  color:#FFFFFF; background-color:#0D7377;
  border:1px solid #0D7377; border-radius:6px;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.el-f-submit svg{ flex:none; transition:transform .18s ease; }
.el-f-submit:hover{ background-color:#14A5AB; border-color:#14A5AB; transform:translateY(-1px); }
.el-f-submit:hover svg{ transform:translateX(3px); }
.el-f-submit:focus-visible{ outline:2px solid #14A5AB; outline-offset:3px; }

.el-f-msg{ font-size:13.5px; line-height:1.5; margin:12px 0 0; }
.el-f-msg--ok{ color:#14A5AB; }
.el-f-msg--err{ color:#F2B8B5; }
.el-f-note{ font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.46); margin:12px 0 0; }

/* --- Bottom bar ----------------------------------------------------------- */
.el-footer-bottom{ position:relative; padding:22px 0 26px; }
.el-footer-bottom::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(20,165,171,.34) 50%, transparent);
}
.el-footer-bottom .el-footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.el-f-copy{ font-size:13.5px; color:rgba(255,255,255,.55); margin:0; }
.el-f-motto{
  display:flex; align-items:center; gap:12px; margin:0;
  font-size:15px; color:rgba(255,255,255,.86);
}
.el-f-shield{ display:flex; color:#14A5AB; }
.el-f-social{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:12px; }
.el-f-social li{ margin:0; }
.el-f-social a{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  border:1px solid rgba(255,255,255,.18); border-radius:8px;
  color:rgba(255,255,255,.80); text-decoration:none;
  transition:border-color .18s ease, color .18s ease, background-color .18s ease;
}
.el-f-social a:hover{ border-color:#14A5AB; color:#14A5AB; background-color:rgba(20,165,171,.10); }
.el-f-social a:focus-visible{ outline:2px solid #14A5AB; outline-offset:3px; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:1200px){
  .el-footer-top .el-footer-inner{ grid-template-columns:1.3fr 1fr 1fr .9fr 1.25fr; }
  .el-footer-top .el-f-col,
  .el-footer-top .el-f-sub{ padding-left:28px; }
  .el-f-brand{ padding-right:28px; }
}

/* Tablet: brand and subscribe take full rows, the three link columns share one */
@media (max-width:1024px){
  .el-footer-top{ padding:60px 0 52px; }
  .el-footer-top .el-footer-inner{ grid-template-columns:repeat(3,1fr); row-gap:40px; }
  .el-f-brand{ grid-column:1 / -1; padding-right:0; }
  .el-footer-top .el-f-col{ padding-left:24px; }
  .el-footer-top .el-f-col:first-of-type{ padding-left:0; border-left:0; }
  .el-footer-top .el-f-sub{
    grid-column:1 / -1; padding-left:0; border-left:0;
    padding-top:36px; border-top:1px solid rgba(255,255,255,.10);
  }
  .el-f-desc, .el-f-tag, .el-f-subcopy{ max-width:52ch; }
}

@media (max-width:767px){
  .el-footer-top{ padding:48px 0 40px; }
  .el-footer-inner{ padding-inline:20px; }
  .el-footer-top .el-footer-inner{ grid-template-columns:1fr; row-gap:0; }
  .el-f-brand{ padding-right:0; padding-bottom:32px; }
  .el-footer-top .el-f-col,
  .el-footer-top .el-f-sub{
    padding-left:0; border-left:0;
    padding-top:28px; padding-bottom:4px;
    border-top:1px solid rgba(255,255,255,.10);
  }
  .el-footer-top .el-f-col:first-of-type{ padding-left:0; }
  .el-footer-top .el-f-sub{ padding-top:32px; }
  .el-f-logo img{ width:168px; }

  .el-footer-bottom{ padding:24px 0 28px; }
  .el-footer-bottom .el-footer-inner{
    flex-direction:column; align-items:flex-start; gap:18px;
  }
  .el-f-copy{ order:3; }
  .el-f-motto{ order:1; }
  .el-f-social{ order:2; }
}

/* --------------------------------------------------------------------------
   Fixes to imported template cruft (not hero-related)
   -------------------------------------------------------------------------- */

/* The template's WP core gallery ships `margin-right:-64px` on a 5-column grid,
   which pushed the document 40px wider than the viewport on mobile and caused
   horizontal scrolling across the whole homepage. */
.gallery[class*="gallery-columns-"]{ max-width:100%; margin-right:0!important; }

/* Elementor writes flex-direction inline on the container, so the hero CTA
   stack needs the extra specificity to win on narrow screens. */
@media (max-width:600px){
  .elementor-element.elementor-element-elherocta{
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
  }
  .elementor-element-elherocta .elementor-widget-button{ width:100%!important; display:block!important; }
  .elementor-element-elherocta .elementor-widget-container,
  .elementor-element-elherocta .elementor-button-wrapper{ width:100%; display:block; }
  .elementor-element-elherocta .elementor-button{ width:100%!important; justify-content:center; }
}/* ==========================================================================
   LARGE SCREENS
   At the 1280px cap a 1920 screen leaves 320px empty each side and a 2560
   leaves 640px - half the display unused. And the hero's min-height:92vh grew
   to 1325px around 594px of content on a 1440-tall screen, so most of the
   opening viewport was void.

   Two moves: widen the measure in two steps, and stop the hero scaling with
   viewport height past a sensible ceiling. Paragraph measures are NOT widened -
   they stay capped for readability, so only the grids and columns gain room.
   ========================================================================== */

@media (min-width:1600px){
  :root{ --el-maxw:1440px; }

  .elementor-element-elherowr,
  .elementor-element-elsvcwr,
  .elementor-element-elmenwr,
  .elementor-element-elabtwr,
  .elementor-element-elstdwr,
  .el-cta-inner,
  .el-footer-inner{ max-width:1440px; }

  /* the wider column lets the display sizes breathe a step */
  .elementor-element-elhero01 .el-hero-title .elementor-heading-title{
    font-size:clamp(2rem, 3.15vw, 3.25rem);
  }
  .elementor-element-elsvc01 .el-svc-title .elementor-heading-title,
  .elementor-element-elabt01 .el-ab-title .elementor-heading-title,
  .elementor-element-elmen01 .el-sec-title .elementor-heading-title{
    font-size:clamp(1.9rem, 3vw, 3rem);
  }
  .elementor-element-elstd01 .el-std-title .elementor-heading-title{
    font-size:clamp(2rem, 3.2vw, 3.15rem);
  }
}

@media (min-width:1920px){
  :root{ --el-maxw:1560px; }

  .elementor-element-elherowr,
  .elementor-element-elsvcwr,
  .elementor-element-elmenwr,
  .elementor-element-elabtwr,
  .elementor-element-elstdwr,
  .el-cta-inner,
  .el-footer-inner{ max-width:1560px; }

  /* section rhythm opens slightly so the taller viewport does not feel packed */
  .elementor-element-elsvc01{ padding-top:92px!important; padding-bottom:104px!important; }
  .elementor-element-elabt01{ padding-top:80px!important; padding-bottom:84px!important; }
  .elementor-element-elstd01{ padding-top:88px!important; padding-bottom:96px!important; }
  .el-cta{ padding:80px 24px 88px; }
  .el-footer-top{ padding:84px 0 72px; }
}

/* --- Hero height ---------------------------------------------------------
   92vh is right on a laptop and absurd on a tall desktop panel. Cap it so the
   hero stops growing once there is already generous room: at 900px tall this
   is unchanged (828px), at 1080 it saves ~134px, at 1440 it saves ~465px.    */
@media (min-width:1025px){
  .elementor-element-elhero01{ min-height:min(92vh, 860px)!important; }
}

/* The map is sized off viewport height too, so give it the same treatment. */
@media (min-width:1025px){
  .el-map{ max-height:min(58vh, 500px); }
}
/* ==========================================================================
   ABOUT PAGE (elabp01 story / elabp02 values / elabp03 consultants)
   Content ported from the production About page, rendered in this site's
   system rather than the old page's visuals.
   Grounds run navy band -> white -> #F4F8F8 -> navy -> CTA -> footer.
   ========================================================================== */

/* --- shared page furniture ------------------------------------------------ */
.el-ap-eyebrow .elementor-heading-title{
  font-family:'DM Sans',sans-serif;
  font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#0D7377;
}
.el-ap-eyebrow .elementor-heading-title::after{
  content:""; display:block; width:28px; height:2px; background:#14A5AB;
  border-radius:2px; margin-top:10px;
}
.el-ap-eyebrow.is-centred .elementor-heading-title::after{ margin-inline:auto; }
.el-ap-eyebrow.on-dark .elementor-heading-title{ color:#14A5AB; }

.el-ap-title .elementor-heading-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:clamp(1.9rem, 3vw, 2.6rem);
  line-height:1.15; letter-spacing:-.015em;
  color:#0A1628; max-width:620px;
}
.el-ap-title.is-centred .elementor-heading-title{ margin-inline:auto; }
.el-ap-title.on-dark .elementor-heading-title{ color:#FFFFFF; }
.el-ap-title .el-hl{ color:#0D7377; }
.el-ap-title.on-dark .el-hl{ color:#14A5AB; }

/* --- 1. Our Story --------------------------------------------------------- */
.elementor-element-elabpwr,
.elementor-element-elabvwr,
.elementor-element-elabcwr{
  max-width:1280px; width:100%; margin-inline:auto;
  padding:0!important; gap:0!important;
}
.elementor-element-elabpin{
  width:100%; align-items:center;
  padding:0!important; gap:56px!important;
}
.elementor-element-elabplt{
  width:calc(52% - 28px)!important; max-width:calc(52% - 28px)!important;
  flex:0 0 auto!important; padding:0!important; gap:0;
}
.elementor-element-elabprt{
  width:calc(48% - 28px)!important; max-width:calc(48% - 28px)!important;
  flex:0 0 auto!important; padding:0!important; gap:0;
}
.elementor-element-elabpeb{ margin:0 0 16px!important; }
.elementor-element-elabph2{ margin:0 0 18px!important; }
.elementor-element-elabprl{ margin:0 0 22px!important; }
.elementor-element-elabpcp{ margin:0!important; }
.elementor-element-elabp01 .el-ap-copy p{
  font-family:'DM Sans',sans-serif;
  font-size:16.5px; line-height:1.7; color:#1A2A3A;
  max-width:520px; margin:0;
}
.elementor-element-elabp01 .el-ap-copy p + p{ margin-top:14px; }

/* stat panel: navy block, two by two */
.el-ap-stats{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr);
  background:#0A1628; border-radius:8px; overflow:hidden;
}
.el-ap-stats li{
  display:flex; align-items:center; gap:15px;
  margin:0; padding:26px 24px; min-width:0;
  border-right:1px solid rgba(20,165,171,.16);
  border-bottom:1px solid rgba(20,165,171,.16);
}
.el-ap-stats li:nth-child(2n){ border-right:0; }
.el-ap-stats li:nth-child(n+3){ border-bottom:0; }
.el-ap-sico{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; flex:none;
  border:1px solid rgba(20,165,171,.32); border-radius:8px; color:#14A5AB;
}
.el-ap-sico svg{ width:22px; height:22px; display:block; }
.el-ap-sbody{ display:flex; flex-direction:column; min-width:0; }
.el-ap-sval{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:22px; line-height:1.2; color:#FFFFFF;
}
.el-ap-slab{
  font-family:'DM Sans',sans-serif; font-size:11.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:#14A5AB; margin-top:6px;
}

/* --- 2. Our Values -------------------------------------------------------- */
.elementor-element-elabvhd{
  width:100%!important; max-width:none!important;
  padding:0!important; gap:0!important; text-align:center;
}
.elementor-element-elabveb{ margin:0 0 16px!important; }
.elementor-element-elabvh2{ margin:0 0 44px!important; }

.elementor-element-elabvgr{
  width:100%!important; max-width:none!important;
  padding:0!important; gap:0!important;
  display:grid!important; grid-template-columns:repeat(3,1fr);
  background:#FFFFFF; border:1px solid #E2E8F0; border-radius:8px; overflow:hidden;
}
.elementor-element-elabvgr > .e-con{
  width:auto!important; max-width:none!important; min-width:0!important;
  padding:32px 30px 34px!important; gap:0!important;
  position:relative;
  border-right:1px solid #E2E8F0;
  transition:background-color .2s ease;
}
.elementor-element-elabvgr > .e-con:last-child{ border-right:0; }
.elementor-element-elabvgr > .e-con::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:#0D7377; transform:scaleX(0); transform-origin:left;
  transition:transform .24s ease; pointer-events:none;
}
.elementor-element-elabvgr > .e-con:hover::before{ transform:scaleX(1); }

.el-ap-vico{
  display:flex; align-items:center; justify-content:center;
  width:50px; height:50px; margin:0 0 18px;
  border-radius:50%; background:rgba(13,115,119,.07); color:#0D7377;
}
.el-ap-vico svg{ width:24px; height:24px; display:block; }
.elementor-element-elabvgr .el-ap-vname{ margin:0!important; }
.elementor-element-elabvgr .el-ap-vname .elementor-heading-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:20px; line-height:1.26; color:#0A1628;
}
.elementor-element-elabvgr .el-ap-vname .elementor-widget-container::after{
  content:""; display:block; width:28px; height:2px;
  background:#14A5AB; border-radius:2px; margin:14px 0 0;
}
.elementor-element-elabvgr .el-ap-vdesc{ margin-top:16px!important; }
.elementor-element-elabvgr .el-ap-vdesc p{
  font-family:'DM Sans',sans-serif;
  font-size:14.5px; line-height:1.65; color:#1A2A3A; opacity:.8; margin:0;
}

/* --- 3. Our Consultants --------------------------------------------------- */
.elementor-element-elabp03{ position:relative; overflow:hidden; isolation:isolate; }
.elementor-element-elabp03::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(20,165,171,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,165,171,.06) 1px, transparent 1px);
  background-size:48px 48px; opacity:.5;
}
.elementor-element-elabcwr{ max-width:760px!important; text-align:center; }
.elementor-element-elabceb{ margin:0 0 16px!important; }
.elementor-element-elabch2{ margin:0 0 20px!important; }
.elementor-element-elabccp{ margin:0 0 30px!important; }
.elementor-element-elabp03 .el-ap-ccopy p{
  font-family:'DM Sans',sans-serif;
  font-size:16.5px; line-height:1.75; color:rgba(255,255,255,.74);
  max-width:600px; margin-inline:auto; text-align:center;
}
.elementor-element-elabcbt .elementor-button{
  font-family:'DM Sans',sans-serif;
  font-size:15px; font-weight:500; line-height:1.2;
  padding:15px 28px; border-radius:6px!important;
  background-color:#0D7377; color:#fff; border:1px solid #0D7377;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.elementor-element-elabcbt .elementor-button:hover{
  background-color:#14A5AB; border-color:#14A5AB; transform:translateY(-1px);
}

/* --- Responsive ----------------------------------------------------------- */
@media (min-width:1600px){
  .elementor-element-elabpwr,
  .elementor-element-elabvwr{ max-width:1440px; }
}
@media (min-width:1920px){
  .elementor-element-elabpwr,
  .elementor-element-elabvwr{ max-width:1560px; }
}

@media (max-width:1024px){
  .elementor-element-elabpin{ flex-direction:column!important; align-items:stretch!important; gap:40px!important; }
  .elementor-element-elabplt,
  .elementor-element-elabprt{ width:100%!important; max-width:100%!important; }
  .elementor-element-elabp01 .el-ap-copy p{ max-width:none; }
  .elementor-element-elabvgr{ grid-template-columns:repeat(2,1fr); }
  .elementor-element-elabvgr > .e-con:nth-child(2n){ border-right:0; }
  .elementor-element-elabvgr > .e-con:nth-child(3){ border-right:0; border-top:1px solid #E2E8F0; }
  .elementor-element-elabvh2{ margin:0 0 36px!important; }
}

@media (max-width:767px){
  .el-ap-stats{ grid-template-columns:1fr; }
  .el-ap-stats li{ border-right:0!important; border-bottom:1px solid rgba(20,165,171,.16)!important; padding:20px 18px; }
  .el-ap-stats li:last-child{ border-bottom:0!important; }
  .elementor-element-elabvgr{ grid-template-columns:1fr; }
  .elementor-element-elabvgr > .e-con{
    border-right:0!important; border-top:1px solid #E2E8F0;
    padding:26px 22px 28px!important;
  }
  .elementor-element-elabvgr > .e-con:first-child{ border-top:0; }
  .elementor-element-elabp01 .el-ap-copy p,
  .elementor-element-elabp03 .el-ap-ccopy p{ font-size:16px; }
  .elementor-element-elabcbt .elementor-button{ width:100%; justify-content:center; }
}
/* ==========================================================================
   SERVICES PAGE (elsp01 featured / elsp02 grid / elsp03 also-available)
   Content ported from the production services page. Mentorship is promoted to
   the featured slot at the client's direction; Method Validation moves into
   the grid.

   The source page numbers its cards "02 / 06" etc. Those counters are dropped:
   the design system bans enumerated step labels, and the service name already
   labels the card.
   ========================================================================== */

.elementor-element-elspwr,
.elementor-element-elspgw,
.elementor-element-elspmw{
  max-width:1280px; width:100%; margin-inline:auto;
  padding:0!important; gap:0!important;
}

/* --- shared ---------------------------------------------------------------*/
.el-sp-eyebrow .elementor-heading-title{
  font-family:'DM Sans',sans-serif;
  font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#0D7377;
}
.el-sp-eyebrow .elementor-heading-title::after{
  content:""; display:block; width:28px; height:2px; background:#14A5AB;
  border-radius:2px; margin-top:10px;
}
.el-sp-gtitle .elementor-heading-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:clamp(1.85rem, 2.9vw, 2.5rem);
  line-height:1.15; letter-spacing:-.015em;
  color:#0A1628; max-width:640px;
}
.el-sp-gtitle .el-hl{ color:#0D7377; }

/* --- 1. Featured card ---------------------------------------------------- */
.elementor-element-elsphd{ width:100%!important; max-width:none!important; padding:0!important; gap:0!important; }
.elementor-element-elspeb{ margin:0 0 16px!important; }
.elementor-element-elspin{ margin:0 0 40px!important; }
.elementor-element-elsp01 .el-sp-lead p{
  font-family:'DM Sans',sans-serif;
  font-size:17.5px; line-height:1.7; color:#1A2A3A;
  max-width:620px; margin:0;
}

.elementor-element-elspfc{
  width:100%!important; max-width:none!important; flex:0 0 auto!important;
  position:relative; overflow:hidden;
  padding:44px 46px 46px!important; gap:0!important;
  border-radius:8px;
  background:linear-gradient(118deg,#0A1628 0%,#0A1628 54%,rgba(13,115,119,.52) 100%),#0A1628;
}
.elementor-element-elspfc::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(20,165,171,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,165,171,.07) 1px, transparent 1px);
  background-size:44px 44px; opacity:.55;
}
.elementor-element-elspfc > *{ position:relative; z-index:1; }

.el-sp-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'DM Sans',sans-serif; font-size:11.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:#14A5AB;
  border:1px solid rgba(20,165,171,.36); border-radius:6px;
  padding:7px 13px;
}
.el-sp-tag svg{ width:13px; height:13px; }

.elementor-element-elspfnm{ margin:20px 0 12px!important; }
.elementor-element-elsp01 .el-sp-fname .elementor-heading-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:clamp(1.9rem, 3vw, 2.6rem); line-height:1.14;
  letter-spacing:-.015em; color:#FFFFFF;
}
.elementor-element-elspfpr{ margin:0 0 20px!important; }
.el-sp-price{ display:flex; align-items:baseline; gap:9px; }
.el-sp-amt{ font-family:'DM Serif Display',serif; font-size:30px; line-height:1.1; color:#14A5AB; }
.el-sp-per{ font-family:'DM Sans',sans-serif; font-size:15px; color:rgba(255,255,255,.62); }

.elementor-element-elspfcp{ margin:0 0 26px!important; }
.elementor-element-elsp01 .el-sp-fcopy p{
  font-family:'DM Sans',sans-serif;
  font-size:16.5px; line-height:1.75; color:rgba(255,255,255,.76);
  max-width:640px; margin:0;
}

.elementor-element-elspfbl{ margin:0 0 30px!important; width:100%; }
.el-sp-flist{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 34px;
}
.el-sp-flist li{
  display:flex; align-items:flex-start; gap:11px; margin:0;
  font-family:'DM Sans',sans-serif; font-size:15px; line-height:1.5;
  color:rgba(255,255,255,.84);
}
.el-sp-flist svg{ width:18px; height:18px; color:#14A5AB; flex:none; margin-top:1px; }

.elementor-element-elspfbt .elementor-button{
  font-family:'DM Sans',sans-serif; font-size:15px; font-weight:500; line-height:1.2;
  padding:15px 28px; border-radius:6px!important;
  background-color:#0D7377; color:#fff; border:1px solid #0D7377;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.elementor-element-elspfbt .elementor-button:hover{
  background-color:#14A5AB; border-color:#14A5AB; transform:translateY(-1px);
}

/* --- 2. Services grid ---------------------------------------------------- */
.elementor-element-elspgh{ margin:0 0 20px!important; }
.elementor-element-elspgr2{ margin:0 0 40px!important; }

.elementor-element-elspgr{
  width:100%!important; max-width:none!important; padding:0!important; gap:0!important;
  display:grid!important; grid-template-columns:repeat(3,1fr);
  background:#FFFFFF; border:1px solid #E2E8F0; border-radius:8px; overflow:hidden;
}
.elementor-element-elspgr > .e-con{
  width:auto!important; max-width:none!important; min-width:0!important;
  padding:30px 28px 32px!important; gap:0!important;
  position:relative;
  display:flex!important; flex-direction:column;
  border-right:1px solid #E2E8F0;
  border-bottom:1px solid #E2E8F0;
  transition:box-shadow .2s ease;
}
.elementor-element-elspgr > .e-con:nth-child(3n){ border-right:0; }
.elementor-element-elspgr > .e-con:nth-child(n+4){ border-bottom:0; }
.elementor-element-elspgr > .e-con::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:#0D7377; transform:scaleX(0); transform-origin:left;
  transition:transform .24s ease; pointer-events:none; z-index:1;
}
.elementor-element-elspgr > .e-con:hover::before,
.elementor-element-elspgr > .e-con:focus-within::before{ transform:scaleX(1); }
.elementor-element-elspgr > .e-con:hover{ box-shadow:0 10px 30px rgba(10,22,40,.07); }

/* the title is the link, stretched across the whole card */
.elementor-element-elspgr .el-sp-cname{ margin:0!important; position:static!important; }
.elementor-element-elspgr .el-sp-cname .elementor-heading-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:20px; line-height:1.26; color:#0A1628;
}
.elementor-element-elspgr .el-sp-cname a{
  color:#0A1628; text-decoration:none;
  display:inline-flex; align-items:baseline; gap:9px;
  transition:color .18s ease;
}
.elementor-element-elspgr .el-sp-cname a::after{
  content:"\2192"; font-family:'DM Sans',sans-serif; font-size:16px; color:#0D7377;
  transition:transform .18s ease;
}
.elementor-element-elspgr > .e-con:hover .el-sp-cname a{ color:#0D7377; }
.elementor-element-elspgr > .e-con:hover .el-sp-cname a::after{ transform:translateX(4px); }
.elementor-element-elspgr .el-sp-cname a:focus-visible{ outline:2px solid #0D7377; outline-offset:3px; border-radius:2px; }

.el-sp-cprice{
  display:inline-block; margin:14px 0 0;
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:#0D7377;
  border:1px solid rgba(13,115,119,.28); border-radius:6px; padding:5px 10px;
}
.el-sp-clist{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.el-sp-clist li{
  display:flex; align-items:flex-start; gap:10px; margin:0;
  font-family:'DM Sans',sans-serif; font-size:14px; line-height:1.55;
  color:#1A2A3A; opacity:.82;
}
.el-sp-clist svg{ width:16px; height:16px; color:#0D7377; flex:none; margin-top:2px; opacity:.9; }

/* Card actions. Pushed to the foot of the card with margin-top:auto so the
   button rows line up across a row whatever the bullet count. */
.elementor-element-elspgr [class*='elementor-element-elspa']{
  width:100%!important; max-width:none!important;
  margin-top:auto!important; padding:22px 0 0!important;
  gap:10px!important; flex-wrap:wrap;
}
.el-sp-cbtn .elementor-button{
  font-family:'DM Sans',sans-serif; font-size:13.5px; font-weight:500; line-height:1.2;
  padding:11px 18px; border-radius:6px!important;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.el-sp-cbtn.is-primary .elementor-button{
  background-color:#0D7377; color:#fff; border:1px solid #0D7377;
}
.el-sp-cbtn.is-primary .elementor-button:hover{ background-color:#14A5AB; border-color:#14A5AB; color:#fff; }
.el-sp-cbtn.is-ghost .elementor-button{
  background-color:transparent; color:#0A1628; border:1px solid #E2E8F0;
}
.el-sp-cbtn.is-ghost .elementor-button:hover{ border-color:#0D7377; color:#0D7377; }
.el-sp-cbtn .elementor-button:focus-visible{ outline:2px solid #0D7377; outline-offset:3px; }

/* --- 3. Also available --------------------------------------------------- */
.elementor-element-elspmeb{ margin:0 0 16px!important; }
.elementor-element-elspmh{ margin:0 0 34px!important; }
.el-sp-more{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 48px;
}
.el-sp-more li{
  display:flex; align-items:flex-start; gap:12px; margin:0;
  padding-bottom:14px; border-bottom:1px solid #E2E8F0;
  font-family:'DM Sans',sans-serif; font-size:15.5px; line-height:1.55; color:#1A2A3A;
}
.el-sp-more svg{ width:18px; height:18px; color:#0D7377; flex:none; margin-top:2px; }

/* --- Responsive ---------------------------------------------------------- */
@media (min-width:1600px){
  .elementor-element-elspwr,.elementor-element-elspgw,.elementor-element-elspmw{ max-width:1440px; }
}
@media (min-width:1920px){
  .elementor-element-elspwr,.elementor-element-elspgw,.elementor-element-elspmw{ max-width:1560px; }
}

@media (max-width:1024px){
  .elementor-element-elspfc{ padding:34px 30px 36px!important; }
  .elementor-element-elspgr{ grid-template-columns:repeat(2,1fr); }
  .elementor-element-elspgr > .e-con:nth-child(3n){ border-right:1px solid #E2E8F0; }
  .elementor-element-elspgr > .e-con:nth-child(2n){ border-right:0; }
  .elementor-element-elspgr > .e-con:nth-child(n+4){ border-bottom:1px solid #E2E8F0; }
  .elementor-element-elspgr > .e-con:nth-child(n+5){ border-bottom:0; }
}

@media (max-width:767px){
  .elementor-element-elspfc{ padding:28px 22px 30px!important; }
  .el-sp-flist{ grid-template-columns:1fr; gap:11px; }
  .elementor-element-elspfbt{ width:100%!important; display:block!important; }
  .elementor-element-elspfbt .elementor-widget-container,
  .elementor-element-elspfbt .elementor-button-wrapper{ width:100%; display:block; }
  .elementor-element-elspfbt .elementor-button{ width:100%!important; justify-content:center; }
  .elementor-element-elspgr{ grid-template-columns:1fr; }
  .elementor-element-elspgr > .e-con,
  .elementor-element-elspgr > .e-con:nth-child(3n),
  .elementor-element-elspgr > .e-con:nth-child(2n){
    border-right:0!important; border-bottom:1px solid #E2E8F0!important;
    padding:26px 22px 28px!important;
  }
  .elementor-element-elspgr > .e-con:last-child{ border-bottom:0!important; }
  .el-sp-more{ grid-template-columns:1fr; gap:12px; }
  .elementor-element-elspgr [class*='elementor-element-elspa']{ flex-direction:column!important; align-items:stretch!important; }
  .elementor-element-elspgr [class*='elementor-element-elspa'] .elementor-widget-button{ width:100%!important; display:block!important; }
  .el-sp-cbtn .elementor-widget-container,
  .el-sp-cbtn .elementor-button-wrapper{ width:100%; display:block; }
  .el-sp-cbtn .elementor-button{ width:100%!important; }
  .elementor-element-elsp01 .el-sp-lead p{ font-size:16.5px; }
}
/* ==========================================================================
   CONTACT PAGE (elct01)
   Left: how to reach us. Right: the SureForms "Laboratory Inquiry" form,
   restyled to the system - SureForms ships its own control styling, so the
   overrides below are deliberately specific.
   ========================================================================== */

.elementor-element-elctwr{
  max-width:1280px; width:100%; margin-inline:auto;
  padding:0!important; gap:0!important;
}
.elementor-element-elctin{
  width:100%; padding:0!important; gap:64px!important; align-items:flex-start;
}
.elementor-element-elctlt{
  width:calc(42% - 32px)!important; max-width:calc(42% - 32px)!important;
  flex:0 0 auto!important; padding:0!important; gap:0;
}
.elementor-element-elctrt{
  width:calc(58% - 32px)!important; max-width:calc(58% - 32px)!important;
  flex:0 0 auto!important;
  padding:34px 34px 36px!important; gap:0!important;
  background:#F4F8F8; border:1px solid #E2E8F0; border-radius:8px;
}

/* --- Left column ---------------------------------------------------------- */
.el-ct-eyebrow .elementor-heading-title{
  font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#0D7377;
}
.el-ct-eyebrow .elementor-heading-title::after{
  content:""; display:block; width:28px; height:2px; background:#14A5AB;
  border-radius:2px; margin-top:10px;
}
.elementor-element-elcteb{ margin:0 0 16px!important; }
.elementor-element-elcth2{ margin:0 0 18px!important; }
.el-ct-title .elementor-heading-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:clamp(1.8rem, 2.6vw, 2.3rem); line-height:1.16;
  letter-spacing:-.015em; color:#0A1628; max-width:460px;
}
.el-ct-title .el-hl{ color:#0D7377; }
.elementor-element-elctrl{ margin:0 0 20px!important; }
.elementor-element-elctcp{ margin:0 0 30px!important; }
.elementor-element-elct01 .el-ct-copy p{
  font-family:'DM Sans',sans-serif; font-size:16.5px; line-height:1.7;
  color:#1A2A3A; max-width:420px; margin:0;
}

.elementor-element-elctls{ margin:0 0 28px!important; width:100%; }
.el-ct-list{ list-style:none; margin:0; padding:0; }
.el-ct-list li{
  display:flex; align-items:flex-start; gap:15px;
  margin:0; padding:16px 0;
}
.el-ct-list li + li{ border-top:1px solid #E2E8F0; }
.el-ct-ico{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none;
  border-radius:8px; background:rgba(13,115,119,.07); color:#0D7377;
}
.el-ct-ico svg{ width:21px; height:21px; display:block; }
.el-ct-body{ display:flex; flex-direction:column; min-width:0; }
.el-ct-label{
  font-family:'DM Sans',sans-serif; font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:#64748B;
}
.el-ct-val{
  font-family:'DM Sans',sans-serif; font-size:16px; font-weight:500;
  color:#0A1628; text-decoration:none; margin-top:4px; word-break:break-word;
}
a.el-ct-val{ color:#0D7377; }
a.el-ct-val:hover{ color:#14A5AB; text-decoration:underline; }
a.el-ct-val:focus-visible{ outline:2px solid #0D7377; outline-offset:2px; border-radius:2px; }
.el-ct-note{
  font-family:'DM Sans',sans-serif; font-size:13px; line-height:1.45;
  color:#1A2A3A; opacity:.66; margin-top:4px;
}

.el-ct-badges{
  list-style:none; margin:0; padding:22px 0 0; border-top:1px solid #E2E8F0;
  display:flex; flex-wrap:wrap; gap:10px 22px;
}
.el-ct-badges li{
  display:flex; align-items:center; gap:8px; margin:0;
  font-family:'DM Sans',sans-serif; font-size:14px; color:#1A2A3A; opacity:.82;
}
.el-ct-badges svg{ width:17px; height:17px; color:#0D7377; flex:none; }

/* --- Right column: form --------------------------------------------------- */
.elementor-element-elctfh{ margin:0 0 10px!important; }
.el-ct-fhead .elementor-heading-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:24px; line-height:1.2; color:#0A1628;
}
.elementor-element-elctfd{ margin:0 0 26px!important; }
.elementor-element-elct01 .el-ct-fsub p{
  font-family:'DM Sans',sans-serif; font-size:15px; line-height:1.6;
  color:#1A2A3A; opacity:.78; margin:0;
}

/* SureForms controls, brought onto the system's type and colour */
.elementor-element-elctrt .srfm-form-container,
.elementor-element-elctrt .srfm-form{ background:transparent!important; padding:0!important; }
.elementor-element-elctrt .srfm-block-wrap label,
.elementor-element-elctrt .srfm-block label,
.elementor-element-elctrt label.srfm-block-label{
  font-family:'DM Sans',sans-serif!important;
  font-size:11.5px!important; font-weight:500!important;
  letter-spacing:.13em!important; text-transform:uppercase!important;
  color:#0A1628!important;
}
.elementor-element-elctrt input[type="text"],
.elementor-element-elctrt input[type="email"],
.elementor-element-elctrt input[type="tel"],
.elementor-element-elctrt input[type="number"],
.elementor-element-elctrt select,
.elementor-element-elctrt textarea,
.elementor-element-elctrt .srfm-input-common{
  font-family:'DM Sans',sans-serif!important;
  font-size:15px!important; line-height:1.4!important; color:#0A1628!important;
  background:#FFFFFF!important;
  border:1px solid #E2E8F0!important;
  border-radius:6px!important;
  padding:12px 14px!important;
  box-shadow:none!important;
  transition:border-color .18s ease;
}
.elementor-element-elctrt input:focus,
.elementor-element-elctrt select:focus,
.elementor-element-elctrt textarea:focus{
  border-color:#0D7377!important; outline:none!important;
  box-shadow:0 0 0 3px rgba(13,115,119,.12)!important;
}
.elementor-element-elctrt ::placeholder{ color:#94A3B8!important; }
.elementor-element-elctrt .srfm-required,
.elementor-element-elctrt .srfm-block-label .required{ color:#0D7377!important; }

.elementor-element-elctrt .srfm-button,
.elementor-element-elctrt button[type="submit"],
.elementor-element-elctrt .srfm-submit-button{
  font-family:'DM Sans',sans-serif!important;
  font-size:15px!important; font-weight:500!important;
  padding:14px 28px!important;
  border-radius:6px!important;
  background:#0D7377!important; color:#FFFFFF!important;
  border:1px solid #0D7377!important;
  transition:background-color .18s ease, transform .18s ease;
}
.elementor-element-elctrt .srfm-button:hover,
.elementor-element-elctrt button[type="submit"]:hover{
  background:#14A5AB!important; border-color:#14A5AB!important; transform:translateY(-1px);
}

/* --- Responsive ----------------------------------------------------------- */
@media (min-width:1600px){ .elementor-element-elctwr{ max-width:1440px; } }
@media (min-width:1920px){ .elementor-element-elctwr{ max-width:1560px; } }

@media (max-width:1024px){
  .elementor-element-elctin{ flex-direction:column!important; align-items:stretch!important; gap:40px!important; }
  .elementor-element-elctlt,
  .elementor-element-elctrt{ width:100%!important; max-width:100%!important; }
  .el-ct-title .elementor-heading-title,
  .elementor-element-elct01 .el-ct-copy p{ max-width:none; }
}

@media (max-width:767px){
  .elementor-element-elctrt{ padding:24px 20px 26px!important; }
  .el-ct-list li{ padding:14px 0; gap:13px; }
  .el-ct-ico{ width:40px; height:40px; }
  .el-ct-badges{ gap:9px 16px; }
  .elementor-element-elctrt .srfm-button,
  .elementor-element-elctrt button[type="submit"]{ width:100%!important; }
}
/* ==========================================================================
   CONTACT PAGE - revision to match the reference layout
   Changes from the first pass:
   - page ground goes light, the form panel goes white (they were inverted)
   - each contact row becomes its own bordered card, not a hairline list
   - the WhatsApp card is highlighted in the WhatsApp brand green
   - trust badges become three bordered cards rather than an inline list
   - eyebrow takes a dot instead of an underline rule
   ========================================================================== */

.elementor-element-elct01{ background-color:#F1F5F7!important; }

/* --- Eyebrow with a dot --------------------------------------------------- */
.el-ct-eyebrow.has-dot .elementor-heading-title{ display:flex; align-items:center; gap:9px; }
.el-ct-eyebrow.has-dot .elementor-heading-title::after{ display:none; }
.el-ct-eyebrow.has-dot .elementor-heading-title::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:#0D7377; flex:none;
}

/* --- Contact rows become cards -------------------------------------------- */
.el-ct-list{ display:flex; flex-direction:column; gap:14px; }
.el-ct-list li{
  padding:18px 20px!important;
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:8px;
  align-items:center;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.el-ct-list li + li{ border-top:1px solid #E2E8F0; }
.el-ct-list li:hover{ border-color:rgba(13,115,119,.34); box-shadow:0 6px 18px rgba(10,22,40,.05); }

/* the WhatsApp card is the one deliberate off-palette surface: the brand green
   is the recognition cue for the channel */
.el-ct-list li:last-child{
  background:#EAF7EF;
  border-color:rgba(37,211,102,.34);
}
.el-ct-list li:last-child:hover{ border-color:rgba(37,211,102,.55); }
.el-ct-list li:last-child .el-ct-ico{ background:#25D366; color:#FFFFFF; }
.el-ct-list li:last-child .el-ct-label{ color:#1B8F49; }
.el-ct-list li:last-child a.el-ct-val{ color:#0F172A; }
.el-ct-list li:last-child a.el-ct-val:hover{ color:#1B8F49; }

/* --- Trust badges become cards -------------------------------------------- */
.el-ct-badges{
  padding:0!important; border-top:0!important;
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.el-ct-badges li{
  align-items:center; gap:9px;
  padding:14px 14px;
  background:#FFFFFF; border:1px solid #E2E8F0; border-radius:8px;
  font-size:13.5px; line-height:1.35; opacity:1; color:#0A1628;
}
.el-ct-badges svg{ width:16px; height:16px; }

/* --- Form panel goes white ------------------------------------------------ */
.elementor-element-elctrt{
  background:#FFFFFF!important;
  border:1px solid #E2E8F0!important;
  padding:36px 36px 38px!important;
}
/* the reference leads straight into the fields, no panel heading */
.elementor-element-elctfh,
.elementor-element-elctfd{ display:none!important; }

/* SureForms controls on the white panel */
.elementor-element-elctrt input[type="text"],
.elementor-element-elctrt input[type="email"],
.elementor-element-elctrt input[type="tel"],
.elementor-element-elctrt select,
.elementor-element-elctrt textarea,
.elementor-element-elctrt .srfm-input-common{
  background:#FFFFFF!important;
  border:1px solid #DDE5EA!important;
}
.elementor-element-elctrt textarea{ min-height:132px!important; }

/* submit gets the arrow the reference shows */
.elementor-element-elctrt .srfm-button::after,
.elementor-element-elctrt button[type="submit"]::after{
  content:"\2192"; margin-left:10px; display:inline-block;
  transition:transform .18s ease;
}
.elementor-element-elctrt .srfm-button:hover::after,
.elementor-element-elctrt button[type="submit"]:hover::after{ transform:translateX(3px); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:767px){
  .el-ct-badges{ grid-template-columns:1fr; gap:10px; }
  .el-ct-list li{ padding:16px 16px!important; }
  .elementor-element-elctrt{ padding:24px 20px 26px!important; }
}

/* ==========================================================================
   SUBMIT BUTTON HEIGHT FIX
   SureForms wraps the label in a block-level .srfm-submit-wrap, so the arrow
   ::after above was forming its own line box underneath it and the button ran
   78px tall. Going inline-flex puts the arrow beside the label and lets the
   button size to its own padding (49px).
   ========================================================================== */
.elementor-element-elctrt .srfm-button,
.elementor-element-elctrt button[type="submit"],
.elementor-element-elctrt .srfm-submit-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:auto!important;
  min-height:0!important;
  line-height:1.25!important;
  padding:14px 30px!important;
  white-space:nowrap!important;
}
.elementor-element-elctrt .srfm-submit-wrap{
  display:inline-flex!important;
  align-items:center!important;
  line-height:1.25!important;
}
.elementor-element-elctrt .srfm-submit-container,
.elementor-element-elctrt .wp-block-button{
  display:flex!important;
  align-items:flex-start!important;
  height:auto!important;
}
.elementor-element-elctrt .srfm-button::after,
.elementor-element-elctrt button[type="submit"]::after{
  flex:0 0 auto; line-height:1;
}
@media (max-width:767px){
  .elementor-element-elctrt .srfm-submit-container,
  .elementor-element-elctrt .wp-block-button{ display:block!important; }
  .elementor-element-elctrt .srfm-button,
  .elementor-element-elctrt button[type="submit"]{ width:100%!important; display:flex!important; }
}

/* ==========================================================================
   PAGE HERO BAND - eyebrow + lead
   Printed by includes/pagehero.php into Astra's entry-header, so the navy
   band on inner pages carries the same eyebrow / headline / lead structure
   the homepage hero uses instead of a bare H1. Both need position + z-index
   because .entry-header::before (the grid overlay) is positioned.
   ========================================================================== */
body:not(.home) .entry-header .el-band-eyebrow{
  font-family:'DM Sans',sans-serif;
  font-size:12px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:#14A5AB;
  display:flex; align-items:center; gap:14px;
  margin:0 0 18px; position:relative; z-index:1;
}
body:not(.home) .entry-header .el-band-eyebrow::before{
  content:""; width:30px; height:1px; background:#14A5AB; flex:none; opacity:.8;
}
body:not(.home) .entry-header .el-band-lead{
  font-family:'DM Sans',sans-serif;
  font-size:18px; font-weight:400; line-height:1.6;
  color:rgba(255,255,255,.78);
  max-width:60ch;
  margin:20px 0 0; position:relative; z-index:1;
}
@media (max-width:921px){
  body:not(.home) .entry-header .el-band-eyebrow{
    font-size:10.5px; letter-spacing:.12em; gap:10px; margin-bottom:14px;
  }
  body:not(.home) .entry-header .el-band-eyebrow::before{ width:20px; }
  body:not(.home) .entry-header .el-band-lead{
    font-size:16px; line-height:1.58; margin-top:16px; max-width:none;
  }
}

/* ==========================================================================
   BAND GUTTER
   The band bleeds full width and used padding of calc(50vw - 50%) for its
   inset. On inner pages the article is full width, so that calc resolves to 0
   at every viewport and the title sat flush against both screen edges. Align
   the band to the same 1280px column the page sections use instead, floored at
   the 20px gutter so it never touches the edge on small screens.
   ========================================================================== */
body:not(.home) .site-content > .ast-container > .site-main > article > .entry-header,
body:not(.home) .entry-header{
  padding-left:max(20px, calc((100% - 1280px) / 2));
  padding-right:max(20px, calc((100% - 1280px) / 2));
}
@media (min-width:1600px){
  body:not(.home) .site-content > .ast-container > .site-main > article > .entry-header,
  body:not(.home) .entry-header{
    padding-left:max(20px, calc((100% - 1440px) / 2));
    padding-right:max(20px, calc((100% - 1440px) / 2));
  }
}
@media (min-width:1920px){
  body:not(.home) .site-content > .ast-container > .site-main > article > .entry-header,
  body:not(.home) .entry-header{
    padding-left:max(20px, calc((100% - 1560px) / 2));
    padding-right:max(20px, calc((100% - 1560px) / 2));
  }
}

/* ==========================================================================
   FORM CONTROL FIXES
   Three controls were missed by the first pass because SureForms does not
   render them as plain inputs:
   - phone uses intl-tel-input, which overlays a ~66px country button at the
     input's left edge. Our padding override put the digits under the flag.
   - dropdowns label with <legend class=srfm-block-legend>, not <label>, so
     they kept the browser default 16px sentence case next to 11.5px caps.
   - dropdowns render through TomSelect as div.ts-control, which no input or
     select rule could reach.
   ========================================================================== */

/* --- Phone ---------------------------------------------------------------- */
.elementor-element-elctrt .iti{ display:block!important; width:100%!important; }
.elementor-element-elctrt .iti > input[type="tel"],
.elementor-element-elctrt input[type="tel"]{
  padding-left:78px!important;
}
.elementor-element-elctrt .iti__selected-country{
  border-radius:6px 0 0 6px;
  background:transparent!important;
}
.elementor-element-elctrt .iti__selected-country:hover,
.elementor-element-elctrt .iti__selected-country:focus{
  background:rgba(13,115,119,.06)!important;
}
.elementor-element-elctrt .iti__selected-dial-code{
  font-family:'DM Sans',sans-serif!important;
  font-size:15px!important; color:#0A1628!important;
}
.elementor-element-elctrt .iti__country-list,
.elementor-element-elctrt .iti__dropdown-content{
  font-family:'DM Sans',sans-serif!important; font-size:15px!important;
  border:1px solid #DDE5EA!important; border-radius:6px!important;
  box-shadow:0 10px 30px rgba(10,22,40,.10)!important;
}

/* --- Dropdown legends match the input labels ------------------------------ */
.elementor-element-elctrt legend.srfm-block-legend,
.elementor-element-elctrt fieldset legend{
  font-family:'DM Sans',sans-serif!important;
  font-size:11.5px!important; font-weight:500!important;
  letter-spacing:.13em!important; text-transform:uppercase!important;
  color:#0A1628!important;
  line-height:1.45!important;
  padding:0!important; margin:0 0 8px!important;
}

/* --- TomSelect control matched to the text inputs ------------------------- */
.elementor-element-elctrt .ts-wrapper{ width:100%!important; }
.elementor-element-elctrt .ts-control{
  font-family:'DM Sans',sans-serif!important;
  font-size:15px!important; line-height:1.4!important; color:#0A1628!important;
  background:#FFFFFF!important;
  border:1px solid #DDE5EA!important;
  border-radius:6px!important;
  padding:12px 34px 12px 14px!important;
  min-height:44px!important;
  box-shadow:none!important;
}
.elementor-element-elctrt .ts-control > input{
  font-family:'DM Sans',sans-serif!important;
  font-size:15px!important; line-height:1.4!important;
  height:auto!important; min-height:0!important;
  margin:0!important; padding:0!important;
}
.elementor-element-elctrt .ts-control .item{ color:#0A1628!important; }
.elementor-element-elctrt .ts-control > input::placeholder{ color:#94A3B8!important; }
.elementor-element-elctrt .ts-wrapper.focus .ts-control,
.elementor-element-elctrt .ts-wrapper.dropdown-active .ts-control{
  border-color:#0D7377!important;
  box-shadow:0 0 0 3px rgba(13,115,119,.12)!important;
}
.elementor-element-elctrt .ts-dropdown{
  font-family:'DM Sans',sans-serif!important; font-size:15px!important;
  background:#FFFFFF!important;
  border:1px solid #DDE5EA!important; border-radius:6px!important;
  box-shadow:0 10px 30px rgba(10,22,40,.10)!important;
  margin-top:4px!important;
}
.elementor-element-elctrt .ts-dropdown .option{
  padding:10px 14px!important; color:#0A1628!important;
}
.elementor-element-elctrt .ts-dropdown .active{
  background:rgba(13,115,119,.08)!important; color:#0D7377!important;
}
/* SureForms ships its own !important padding on .ts-control; out-specify it so
   the dropdown text sits on the same 14px inset as every other control. */
.elementor-element-elctrt .srfm-block .ts-wrapper .ts-control{ /* ts-control padding specificity */
  padding:12px 34px 12px 14px!important;
}

/* TomSelect sets the control inset with logical properties, which a physical
   padding declaration cannot override however specific it is - hence the
   logical padding here, matching the 14px inset of the text inputs. */
.elementor-element-elctrt .srfm-block .ts-wrapper .ts-control{
  padding-block:12px!important;
  padding-inline:14px 34px!important;
}

/* ==========================================================================
   ACCREDITATIONS PAGE (page 2013)
   Sections elacc1 / elacc2 / elacc3 (standards) + elacd1 (documentation).
   Containers are targeted by element id because Elementor does not render
   _css_classes on containers. Widget classes below are rendered normally.
   ========================================================================== */

.elementor-element-elacc1w,
.elementor-element-elacc2w,
.elementor-element-elacc3w,
.elementor-element-elacd1w{
  max-width:1280px; width:100%; margin-inline:auto;
}

/* --- two-column split: identity rail + body ------------------------------ */
.elementor-element-elacc1g,
.elementor-element-elacc2g,
.elementor-element-elacc3g{ align-items:flex-start; }

.elementor-element-elacc1l,
.elementor-element-elacc2l,
.elementor-element-elacc3l{
  flex:0 0 340px; max-width:340px;
  position:sticky; top:calc(72px + 28px);
}
.elementor-element-elacc1r,
.elementor-element-elacc2r,
.elementor-element-elacc3r{ flex:1 1 auto; min-width:0; }

/* --- identity rail -------------------------------------------------------- */
.el-acc-mark{ padding-top:14px; border-top:2px solid #0D7377; }
.el-acc-code{
  display:block;
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:34px; line-height:1.1; letter-spacing:-.01em;
  color:#0A1628;
}
.el-acc-full{
  display:block; margin-top:8px;
  font-family:'DM Sans',sans-serif; font-size:14px; line-height:1.5;
  color:#64748B;
}
.el-acc-cta{
  display:inline-block; margin-top:26px!important;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; line-height:1.2;
  padding:12px 22px; border-radius:6px;
  background:#0D7377; color:#fff!important; text-decoration:none;
  transition:background-color .18s ease, transform .18s ease;
}
.el-acc-cta:hover{ background:#14A5AB; color:#fff!important; transform:translateY(-1px); }

/* --- body ----------------------------------------------------------------- */
.el-acc-eyebrow .elementor-heading-title{
  font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#0D7377;
  display:flex; align-items:center; gap:14px;
}
.el-acc-eyebrow .elementor-heading-title::before{
  content:""; width:30px; height:1px; background:#0D7377; flex:none; opacity:.85;
}
.el-acc-eyebrow{ margin:0 0 18px!important; }

.el-acc-h2 .elementor-heading-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:clamp(1.75rem,2.6vw,2.125rem); line-height:1.14; letter-spacing:-.01em;
  color:#0A1628;
}
.el-acc-h2{ margin:0 0 20px!important; }

.el-acc-body p,
.el-acc-lead p{
  font-family:'DM Sans',sans-serif; font-size:16.5px; line-height:1.72;
  color:#1A2A3A; max-width:64ch; margin:0 0 16px;
}
.el-acc-body p:last-child,
.el-acc-lead p:last-child{ margin-bottom:0; }
.el-acc-body{ margin:0 0 32px!important; }
.el-acc-lead{ margin:0 0 30px!important; }

/* --- "How Elmenta supports you" ------------------------------------------- */
.el-acc-support-label{
  font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:#0D7377;
  margin:0 0 4px;
}
.el-acc-list{ list-style:none; margin:0; padding:0; }
.el-acc-list li{
  display:flex; align-items:flex-start; gap:12px;
  padding:11px 0;
  border-bottom:1px solid #E2E8F0;
  font-family:'DM Sans',sans-serif; font-size:15.5px; line-height:1.5;
  color:#1A2A3A;
}
.el-acc-list li:last-child{ border-bottom:0; }
.el-acc-list svg{ width:19px; height:19px; flex:none; margin-top:1px; color:#0D7377; }

/* --- documentation grid --------------------------------------------------- */
.el-doc-grid{
  list-style:none; margin:34px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0 40px;
}
.el-doc-grid li{
  display:flex; align-items:center; gap:14px;
  padding:15px 0; border-bottom:1px solid #E2E8F0;
  font-family:'DM Sans',sans-serif; font-size:15.5px; line-height:1.45;
  color:#1A2A3A;
}
.el-doc-rule{ width:18px; height:2px; background:#0D7377; flex:none; opacity:.9; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width:1024px){
  .el-doc-grid{ grid-template-columns:repeat(2,1fr); gap:0 32px; }
}
@media (max-width:880px){
  .elementor-element.elementor-element-elacc1g,
  .elementor-element.elementor-element-elacc2g,
  .elementor-element.elementor-element-elacc3g{ flex-direction:column!important; }
  .elementor-element-elacc1l,
  .elementor-element-elacc2l,
  .elementor-element-elacc3l{
    flex:1 1 auto; max-width:none; position:static; width:100%;
  }
  .el-acc-code{ font-size:29px; }
}
@media (max-width:600px){
  .el-doc-grid{ grid-template-columns:1fr; }
  .el-acc-cta{ display:block; width:100%; text-align:center; }
  .el-acc-body p, .el-acc-lead p{ font-size:16px; }
}
/* --------------------------------------------------------------------------
   HEADER BREAK POINT
   The primary menu is 8 items plus a CTA and needs ~1240px on one line. Astra
   hard-codes 921px in 22 media queries in its own stylesheet, so the PHP filter
   in includes/header.php (which correctly moves the JS break point to 1240)
   cannot move the CSS. Swap the two headers here to match.
   Astra prints both markups on every page, so this only changes which is shown.
   -------------------------------------------------------------------------- */
@media (max-width:1240px){
  #masthead #ast-desktop-header{ display:none!important; }
  #masthead .ast-mobile-header-wrap{ display:block!important; }
}
@media (min-width:1241px){
  #masthead .ast-mobile-header-wrap{ display:none!important; }
  #masthead #ast-desktop-header{ display:block!important; }
}
/* ==========================================================================
   TRAINING PAGE (page 2014)
   eltr1 delivery modes | eltr2 program catalog | eltr3 custom training.
   Section eyebrow/h2 reuse .el-acc-eyebrow / .el-acc-h2 from the
   accreditations block - they are generic section headers, not page specific.
   ========================================================================== */

.elementor-element-eltr1w,
.elementor-element-eltr2w,
.elementor-element-eltr3w{ max-width:1280px; width:100%; margin-inline:auto; }

/* --- delivery modes: four columns split by hairlines, not cards ----------- */
.el-mode-grid{
  list-style:none; margin:36px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
.el-mode-grid li{ padding:0 30px; border-left:1px solid #E2E8F0; }
.el-mode-grid li:first-child{ padding-left:0; border-left:0; }
.el-mode-grid li:last-child{ padding-right:0; }
.el-mode-rule{ display:block; width:28px; height:2px; background:#0D7377; margin-bottom:18px; }
.el-mode-name{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:19px; line-height:1.25; color:#0A1628; margin:0 0 9px;
}
.el-mode-desc{
  font-family:'DM Sans',sans-serif; font-size:15px; line-height:1.6;
  color:#64748B; margin:0;
}

/* --- program panels ------------------------------------------------------- */
.elementor-element-eltr2p1{ margin-top:14px!important; }
.el-prog{
  background:#FFFFFF; border:1px solid #E2E8F0; border-radius:8px;
  padding:34px 36px; margin-top:20px;
}
.el-prog-head{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding-bottom:20px; border-bottom:1px solid #E2E8F0; margin-bottom:26px;
}
.el-prog-tag{
  font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:#0D7377;
  border:1px solid rgba(13,115,119,.28); border-radius:6px;
  padding:5px 10px; white-space:nowrap; flex:none;
}
.el-prog-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:26px; line-height:1.2; letter-spacing:-.01em;
  color:#0A1628; margin:0;
}
.el-prog-body{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.el-prog-desc{
  font-family:'DM Sans',sans-serif; font-size:16px; line-height:1.7;
  color:#1A2A3A; margin:0; max-width:56ch;
}
.el-prog-label{
  font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:#0D7377; margin:0 0 6px;
}
.el-prog-list{ list-style:none; margin:0 0 26px; padding:0; }
.el-prog-list li{
  position:relative; padding:10px 0 10px 22px;
  border-bottom:1px solid #E2E8F0;
  font-family:'DM Sans',sans-serif; font-size:15px; line-height:1.5; color:#1A2A3A;
}
.el-prog-list li::before{
  content:""; position:absolute; left:0; top:18px;
  width:10px; height:1px; background:#0D7377;
}
.el-prog-list li:last-child{ border-bottom:0; }
.el-prog-cta{
  display:inline-block;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; line-height:1.2;
  padding:11px 20px; border-radius:6px;
  background:#0D7377; color:#fff!important; text-decoration:none;
  transition:background-color .18s ease, transform .18s ease;
}
.el-prog-cta:hover{ background:#14A5AB; transform:translateY(-1px); }

/* --- custom training panel ------------------------------------------------ */
.el-custom{
  display:flex; align-items:center; justify-content:space-between; gap:44px;
  background:#F4F8F8; border:1px solid #E2E8F0; border-radius:8px;
  padding:38px 40px;
}
.el-custom-eyebrow{
  font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#0D7377; margin:0 0 10px;
}
.el-custom-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:28px; line-height:1.18; letter-spacing:-.01em; color:#0A1628; margin:0 0 12px;
}
.el-custom-desc{
  font-family:'DM Sans',sans-serif; font-size:16px; line-height:1.65;
  color:#1A2A3A; margin:0; max-width:62ch;
}
.el-custom-cta{
  flex:none;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; line-height:1.2;
  padding:13px 24px; border-radius:6px;
  background:#0D7377; color:#fff!important; text-decoration:none;
  transition:background-color .18s ease, transform .18s ease;
}
.el-custom-cta:hover{ background:#14A5AB; transform:translateY(-1px); }

/* --- responsive ----------------------------------------------------------- */
@media (max-width:1024px){
  .el-mode-grid{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
  .el-mode-grid li:nth-child(odd){ padding-left:0; border-left:0; }
  .el-prog-body{ grid-template-columns:1fr; gap:28px; }
  .el-prog-desc{ max-width:none; }
}
@media (max-width:768px){
  .el-custom{ flex-direction:column; align-items:flex-start; gap:26px; }
}
@media (max-width:600px){
  .el-mode-grid{ grid-template-columns:1fr; row-gap:28px; }
  .el-mode-grid li{ padding:0; border-left:0; }
  .el-prog{ padding:26px 22px; }
  .el-prog-title{ font-size:23px; }
  .el-prog-cta,
  .el-custom-cta{ display:block; width:100%; text-align:center; }
  .el-custom{ padding:28px 22px; }
}
/* ==========================================================================
   MENTORSHIP PAGE (page 2015)
   elmn1 plans | elmn2 how it works | elmn3 focus areas | elmn4 waitlist
   ========================================================================== */

.elementor-element-elmn1w,
.elementor-element-elmn2w,
.elementor-element-elmn3w,
.elementor-element-elmn4w{ max-width:1280px; width:100%; margin-inline:auto; }

/* --- plans ---------------------------------------------------------------- */
.elementor-element-elmn1 .el-plans{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
  /* the rest of the page runs the full 1280 column; capping this at 960 left
     the cards 320px short of the right edge every other block reaches */
  max-width:1280px; margin:36px 0 0;
}
.elementor-element-elmn1 .el-plan{
  position:relative; background:#FFFFFF;
  border:1px solid #E2E8F0; border-radius:8px;
  padding:32px 30px 30px; display:flex; flex-direction:column;
}
.elementor-element-elmn1 .el-plan.is-featured{ border:2px solid #0D7377; padding:31px 29px 29px; }
.elementor-element-elmn1 .el-plan-badge{
  position:absolute; top:-11px; left:30px;
  font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:#fff;
  background:#0D7377; border-radius:6px; padding:5px 11px;
}
.elementor-element-elmn1 .el-plan-tag{
  font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#0D7377; margin:0 0 10px;
}
.elementor-element-elmn1 .el-plan-name{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:26px; line-height:1.2; color:#0A1628; margin:0 0 14px;
}
.elementor-element-elmn1 .el-plan-price{ display:flex; align-items:baseline; gap:9px; margin:0 0 22px;
  padding-bottom:22px; border-bottom:1px solid #E2E8F0; }
.elementor-element-elmn1 .el-plan-amt{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:42px; line-height:1; letter-spacing:-.02em; color:#0A1628;
}
.elementor-element-elmn1 .el-plan-per{ font-family:'DM Sans',sans-serif; font-size:14px; color:#64748B; }
.elementor-element-elmn1 .el-plan-list{ list-style:none; margin:0 0 26px; padding:0; flex:1 1 auto; }
.elementor-element-elmn1 .el-plan-list li{
  display:flex; align-items:flex-start; gap:11px; padding:9px 0;
  font-family:'DM Sans',sans-serif; font-size:15px; line-height:1.5; color:#1A2A3A;
}
.elementor-element-elmn1 .el-plan-list svg{ width:18px; height:18px; flex:none; margin-top:2px; color:#0D7377; }
.elementor-element-elmn1 .el-plan-cta{
  display:block; text-align:center;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; line-height:1.2;
  padding:13px 20px; border-radius:6px; text-decoration:none;
  background:#FFFFFF; color:#0A1628!important; border:1px solid #E2E8F0;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.elementor-element-elmn1 .el-plan-cta:hover{ border-color:#0D7377; color:#0D7377!important; }
.elementor-element-elmn1 .el-plan.is-featured .el-plan-cta{ background:#0D7377; color:#fff!important; border-color:#0D7377; }
.elementor-element-elmn1 .el-plan.is-featured .el-plan-cta:hover{ background:#14A5AB; border-color:#14A5AB; color:#fff!important; }

.elementor-element-elmn1 .el-plan-trust{
  list-style:none; display:flex; flex-wrap:wrap; gap:0; margin:26px 0 0; padding:0;
  max-width:1280px;
}
.elementor-element-elmn1 .el-plan-trust li{
  font-family:'DM Sans',sans-serif; font-size:13.5px; color:#64748B;
  padding:0 18px; border-left:1px solid #E2E8F0;
}
.elementor-element-elmn1 .el-plan-trust li:first-child{ padding-left:0; border-left:0; }

/* --- how it works: three steps on a rule --------------------------------- */
.el-steps{
  list-style:none; margin:40px 0 0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
}
.el-steps::before{
  content:""; position:absolute; left:17px; right:17px; top:17px; height:1px;
  background:#E2E8F0; z-index:0;
}
.el-steps li{ position:relative; z-index:1; }
.el-step-num{
  display:flex; align-items:center; justify-content:center;
  width:35px; height:35px; border-radius:50%;
  background:#0D7377; color:#fff;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500;
  margin-bottom:18px;
}
.el-step-name{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:20px; line-height:1.25; color:#0A1628; margin:0 0 9px;
}
.el-step-desc{
  font-family:'DM Sans',sans-serif; font-size:15px; line-height:1.62;
  color:#64748B; margin:0; max-width:34ch;
}

/* --- focus areas: 2x2 on hairlines ---------------------------------------- */
.el-area-grid{
  list-style:none; margin:34px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:34px 48px;
}
.el-area-rule{ display:block; width:28px; height:2px; background:#0D7377; margin-bottom:16px; }
.el-area-name{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:21px; line-height:1.24; color:#0A1628; margin:0 0 10px;
}
.el-area-desc{
  font-family:'DM Sans',sans-serif; font-size:15.5px; line-height:1.65;
  color:#1A2A3A; margin:0; max-width:52ch;
}

/* --- waitlist: facts rail + form ------------------------------------------ */
.elementor-element-elmn4l{ flex:0 0 290px; max-width:290px; }
.elementor-element-elmn4r{ flex:1 1 auto; min-width:0; }
.el-facts{ list-style:none; margin:12px 0 0; padding:0; }
.el-facts li{
  display:flex; flex-direction:column; gap:5px;
  padding:16px 0; border-bottom:1px solid #E2E8F0;
}
.el-facts li:first-child{ padding-top:0; }
.el-facts li:last-child{ border-bottom:0; }
.el-fact-k{
  font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:#0D7377;
}
.el-fact-v{ font-family:'DM Sans',sans-serif; font-size:16px; line-height:1.4; color:#0A1628; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width:980px){
  .el-steps{ grid-template-columns:1fr; gap:28px; }
  .el-steps::before{ display:none; }
  .el-step-desc{ max-width:none; }
  .el-area-grid{ grid-template-columns:1fr; gap:30px; }
  .elementor-element.elementor-element-elmn4g{ flex-direction:column!important; }
  .elementor-element-elmn4l{ flex:1 1 auto; max-width:none; width:100%; }
}
@media (max-width:760px){
  .elementor-element-elmn1 .el-plans{ grid-template-columns:1fr; gap:30px; }
  .elementor-element-elmn1 .el-plan.is-featured{ margin-top:12px; }
}
@media (max-width:600px){
  .elementor-element-elmn1 .el-plan-trust{ flex-direction:column; gap:10px; }
  .elementor-element-elmn1 .el-plan-trust li{ padding:0; border-left:0; }
  .elementor-element-elmn1 .el-plan-amt{ font-size:36px; }
}
/* ========================================================================
   MENTORSHIP FORM CONTROLS (form 2100, container elmn4r)
   The SureForms control fixes were written scoped to .elementor-element-elctrt
   (the contact form). They are replicated here rather than rewritten in place,
   per the plugin README's rule about appending over editing. If the contact
   block changes, re-run the same re-scope so the two stay in step.
   ======================================================================== */
/* (replicated)
   Three controls were missed by the first pass because SureForms does not
   render them as plain inputs:
   - phone uses intl-tel-input, which overlays a ~66px country button at the
     input's left edge. Our padding override put the digits under the flag.
   - dropdowns label with <legend class=srfm-block-legend>, not <label>, so
     they kept the browser default 16px sentence case next to 11.5px caps.
   - dropdowns render through TomSelect as div.ts-control, which no input or
     select rule could reach.
   ========================================================================== */

/* --- Phone ---------------------------------------------------------------- */
.elementor-element-elmn4r .iti{ display:block!important; width:100%!important; }
.elementor-element-elmn4r .iti > input[type="tel"],
.elementor-element-elmn4r input[type="tel"]{
  padding-left:78px!important;
}
.elementor-element-elmn4r .iti__selected-country{
  border-radius:6px 0 0 6px;
  background:transparent!important;
}
.elementor-element-elmn4r .iti__selected-country:hover,
.elementor-element-elmn4r .iti__selected-country:focus{
  background:rgba(13,115,119,.06)!important;
}
.elementor-element-elmn4r .iti__selected-dial-code{
  font-family:'DM Sans',sans-serif!important;
  font-size:15px!important; color:#0A1628!important;
}
.elementor-element-elmn4r .iti__country-list,
.elementor-element-elmn4r .iti__dropdown-content{
  font-family:'DM Sans',sans-serif!important; font-size:15px!important;
  border:1px solid #DDE5EA!important; border-radius:6px!important;
  box-shadow:0 10px 30px rgba(10,22,40,.10)!important;
}

/* --- Dropdown legends match the input labels ------------------------------ */
.elementor-element-elmn4r legend.srfm-block-legend,
.elementor-element-elmn4r fieldset legend{
  font-family:'DM Sans',sans-serif!important;
  font-size:11.5px!important; font-weight:500!important;
  letter-spacing:.13em!important; text-transform:uppercase!important;
  color:#0A1628!important;
  line-height:1.45!important;
  padding:0!important; margin:0 0 8px!important;
}

/* --- TomSelect control matched to the text inputs ------------------------- */
.elementor-element-elmn4r .ts-wrapper{ width:100%!important; }
.elementor-element-elmn4r .ts-control{
  font-family:'DM Sans',sans-serif!important;
  font-size:15px!important; line-height:1.4!important; color:#0A1628!important;
  background:#FFFFFF!important;
  border:1px solid #DDE5EA!important;
  border-radius:6px!important;
  padding:12px 34px 12px 14px!important;
  min-height:44px!important;
  box-shadow:none!important;
}
.elementor-element-elmn4r .ts-control > input{
  font-family:'DM Sans',sans-serif!important;
  font-size:15px!important; line-height:1.4!important;
  height:auto!important; min-height:0!important;
  margin:0!important; padding:0!important;
}
.elementor-element-elmn4r .ts-control .item{ color:#0A1628!important; }
.elementor-element-elmn4r .ts-control > input::placeholder{ color:#94A3B8!important; }
.elementor-element-elmn4r .ts-wrapper.focus .ts-control,
.elementor-element-elmn4r .ts-wrapper.dropdown-active .ts-control{
  border-color:#0D7377!important;
  box-shadow:0 0 0 3px rgba(13,115,119,.12)!important;
}
.elementor-element-elmn4r .ts-dropdown{
  font-family:'DM Sans',sans-serif!important; font-size:15px!important;
  background:#FFFFFF!important;
  border:1px solid #DDE5EA!important; border-radius:6px!important;
  box-shadow:0 10px 30px rgba(10,22,40,.10)!important;
  margin-top:4px!important;
}
.elementor-element-elmn4r .ts-dropdown .option{
  padding:10px 14px!important; color:#0A1628!important;
}
.elementor-element-elmn4r .ts-dropdown .active{
  background:rgba(13,115,119,.08)!important; color:#0D7377!important;
}
/* SureForms ships its own !important padding on .ts-control; out-specify it so
   the dropdown text sits on the same 14px inset as every other control. */
.elementor-element-elmn4r .srfm-block .ts-wrapper .ts-control{ /* ts-control padding specificity */
  padding:12px 34px 12px 14px!important;
}

/* TomSelect sets the control inset with logical properties, which a physical
   padding declaration cannot override however specific it is - hence the
   logical padding here, matching the 14px inset of the text inputs. */
.elementor-element-elmn4r .srfm-block .ts-wrapper .ts-control{
  padding-block:12px!important;
  padding-inline:14px 34px!important;
}


/* ========================================================================
   NESTED CONTAINER PADDING
   Elementor gives every container 10px inline padding. On the pages built here
   the wrappers nest up to four deep, so that quietly ate 100px of a 390px
   screen before any content was drawn. The outer section keeps its 24/20px
   gutter; every inner wrapper is zeroed.
   ======================================================================== */
.elementor-element-elacc1w,
.elementor-element-elacc2w,
.elementor-element-elacc3w,
.elementor-element-elacd1w,
.elementor-element-elacc1g,
.elementor-element-elacc2g,
.elementor-element-elacc3g,
.elementor-element-elacc1l,
.elementor-element-elacc2l,
.elementor-element-elacc3l,
.elementor-element-elacc1r,
.elementor-element-elacc2r,
.elementor-element-elacc3r,
.elementor-element-eltr1w,
.elementor-element-eltr2w,
.elementor-element-eltr3w,
.elementor-element-elmn1w,
.elementor-element-elmn2w,
.elementor-element-elmn3w,
.elementor-element-elmn4w,
.elementor-element-elmn4g,
.elementor-element-elmn4l,
.elementor-element-elmn4r{ padding-inline:0!important; }

/* ==========================================================================
   BLOG INDEX (page_for_posts 2016)
   Cards lead with the featured image, as the live site does: a 16:9 crop
   across the full width of the card, then date, title and a three-line
   excerpt. Source images run anywhere from 3.4:1 to 1.5:1, so the ratio is
   forced here and object-fit crops - otherwise the row of cards steps up and
   down with whatever the editor happened to upload.

   The band is printed by includes/bloghero.php with .entry-header, so it picks
   up the navy band rules already defined above and needs nothing here.

   Astra nests the image inside .post-content along with the text, so the card
   padding lives on the text elements rather than the container - that lets the
   image sit edge to edge without negative margins.
   ========================================================================== */

body.blog .site-content{ background:#F4F8F8; }
body.blog #main{
  max-width:1280px; width:100%; margin-inline:auto;
  padding:72px 24px 84px;
}
body.blog .ast-row{
  display:grid!important;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin:0!important; width:auto!important;
}
body.blog article.ast-article-post{
  width:auto!important; max-width:none!important;
  margin:0!important; padding:0!important; float:none!important;
}

/* --- card ----------------------------------------------------------------- */
body.blog .ast-article-inner{
  height:100%; display:flex; flex-direction:column;
  background:#FFFFFF; border:1px solid #E2E8F0; border-radius:8px;
  overflow:hidden; padding:0;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
body.blog article.ast-article-post:hover .ast-article-inner{
  border-color:#0D7377;
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(10,22,40,.09);
}
body.blog .post-content{
  display:flex; flex-direction:column; flex:1 1 auto;
  padding:0; margin:0;
}
body.blog .entry-content.clear{ display:none; }

/* --- featured image ------------------------------------------------------- */
body.blog .ast-blog-featured-section{
  margin:0 0 20px; padding:0;
  overflow:hidden;
  background:#E8EEF1;
}
body.blog .ast-blog-featured-section:empty{ display:none; }
body.blog .post-thumb-img-content,
body.blog .ast-blog-featured-section a{ display:block; margin:0; padding:0; line-height:0; }
body.blog .ast-blog-featured-section img{
  display:block; width:100%; height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover; object-position:center;
  border-radius:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
body.blog article.ast-article-post:hover .ast-blog-featured-section img{
  transform:scale(1.05);
}

/* --- text inset ----------------------------------------------------------- */
body.blog .entry-header.ast-blog-meta-container,
body.blog .entry-title,
body.blog .ast-excerpt-container,
body.blog .ast-read-more-container{
  padding-inline:24px;
}
/* posts with no featured image: the meta becomes the first thing in the card */
body.blog .post-content > .entry-header:first-child{ padding-top:26px; }

/* --- date ----------------------------------------------------------------- */
/* The cards carry Astra's .entry-header class, so without an explicit reset
   they inherit the navy band's calc(var(--el-header-h) + 64px) top padding -
   112px of dead space between the image and the date on every card. */
body.blog .entry-header.ast-blog-meta-container{
  margin:0 0 10px; padding:0 24px; border:0; background:none;
}
/* posts with no featured image: Astra still prints an empty thumbnail div, so
   the meta is never :first-child - key off the empty sibling instead */
body.blog .ast-blog-featured-section:empty + .entry-header.ast-blog-meta-container{
  padding-top:26px;
}
body.blog .entry-meta,
body.blog .entry-meta *{
  font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:#0D7377;
  line-height:1.4;
}
body.blog .entry-meta a{ color:#0D7377; text-decoration:none; }

/* --- title ---------------------------------------------------------------- */
body.blog .entry-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:20px; line-height:1.28; letter-spacing:-.01em;
  margin:0 0 10px;
}
body.blog .entry-title a{ color:#0A1628; text-decoration:none; transition:color .18s ease; }
body.blog article.ast-article-post:hover .entry-title a{ color:#0D7377; }
body.blog .entry-title a:focus-visible{ outline:2px solid #0D7377; outline-offset:3px; border-radius:2px; }

/* --- excerpt -------------------------------------------------------------- */
/* clamped to three lines so every card in a row ends level */
body.blog .ast-excerpt-container{ flex:1 1 auto; margin:0 0 18px; }
body.blog .ast-excerpt-container p{
  font-family:'DM Sans',sans-serif; font-size:14.5px; line-height:1.62;
  color:#5A7080; margin:0;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* --- read more ------------------------------------------------------------ */
body.blog .ast-read-more-container{ margin:0; padding-bottom:24px; }
body.blog .ast-read-more-container a{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500;
  color:#0D7377; text-decoration:none;
}
body.blog .ast-read-more-container a::after{
  content:"\2192"; transition:transform .18s ease;
}
body.blog article.ast-article-post:hover .ast-read-more-container a::after{
  transform:translateX(4px);
}
body.blog .ast-read-more-container a:focus-visible{ outline:2px solid #0D7377; outline-offset:3px; border-radius:2px; }

/* --- empty state ---------------------------------------------------------- */
body.blog .no-results .page-content p{
  font-family:'DM Sans',sans-serif; font-size:16px; line-height:1.65; color:#64748B; margin:0;
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:1024px){
  body.blog .ast-row{ grid-template-columns:repeat(2,1fr); gap:24px; }
}
@media (max-width:680px){
  body.blog .ast-row{ grid-template-columns:1fr; gap:20px; }
  body.blog #main{ padding:48px 20px 56px; }
  body.blog .entry-title{ font-size:19px; }
}

/* ==========================================================================
   BLOG DETAIL (single post)
   The band is Astra's .entry-header, so the navy band rules above already
   apply; what follows is the article furniture printed by includes/single.php
   plus a reading measure for the body copy.

   Astra's single template is .ast-separate-container, which boxes the content
   at the container width and centres it. Article text wants a much narrower
   measure than the 1280px column the rest of the site uses - 720px, matching
   the live site - so the content column is constrained here rather than left
   at the container width.
   ========================================================================== */

body.single-post .site-content{ background:#FFFFFF; }

/* --- band furniture ------------------------------------------------------- */
.el-post-back{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'DM Sans',sans-serif; font-size:13.5px; font-weight:500;
  color:rgba(255,255,255,.72); text-decoration:none;
  margin:0 0 22px; position:relative; z-index:1;
  transition:color .18s ease;
}
.el-post-back:hover{ color:#14A5AB; }
.el-post-back:focus-visible{ outline:2px solid #14A5AB; outline-offset:3px; border-radius:2px; }
.el-post-back span{ transition:transform .18s ease; }
.el-post-back:hover span{ transform:translateX(-3px); }

/* BLOG DETAIL - band alignment
   Astra boxes single-post content and centres a 720px measure inside it, so a
   band inset taken from the site's 1280px column left the title 250px to the
   left of the article text. Centre the band on the same 720px measure instead
   and the two line up exactly. */
body.single-post .site-content > .ast-container > .site-main > article > .entry-header,
body.single-post .entry-header{
  padding-left:20px; padding-right:20px;
}
/* centre every band child on the same 720px measure as the article, so the
   two columns line up without depending on which ancestor a percentage
   padding would have resolved against */
body.single-post .entry-header > *{ max-width:720px; margin-inline:auto; }
body.single-post .entry-header .el-post-back{
  width:max-content; margin-inline:0;
  margin-left:max(0px, calc((100% - 720px) / 2));
}

.el-post-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin:26px 0 0; position:relative; z-index:1;
  font-family:'DM Sans',sans-serif; font-size:14px;
  color:rgba(255,255,255,.62);
}
.el-post-meta time{ color:inherit; }
.el-post-dot{
  width:3px; height:3px; border-radius:50%;
  background:currentColor; opacity:.55; flex:none;
}

/* --- reading measure ------------------------------------------------------ */
body.single-post .entry-content{
  max-width:720px; width:100%; margin-inline:auto;
}

/* --- body copy ------------------------------------------------------------ */
body.single-post .entry-content p{
  font-family:'DM Sans',sans-serif;
  font-size:17.5px; line-height:1.8; color:rgba(10,22,40,.85);
  margin:0 0 22px;
}
body.single-post .entry-content > p:first-of-type{
  font-size:19px; line-height:1.72; color:rgba(10,22,40,.92);
}
body.single-post .entry-content a:not(.wp-block-button__link){
  color:#0D7377; text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; transition:color .18s ease;
}
body.single-post .entry-content a:not(.wp-block-button__link):hover{ color:#14A5AB; }
body.single-post .entry-content strong{ color:#0A1628; font-weight:600; }

/* --- headings ------------------------------------------------------------- */
body.single-post .entry-content h2{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:30px; line-height:1.24; letter-spacing:-.01em;
  color:#0A1628; margin:46px 0 16px;
}
body.single-post .entry-content h2::after{
  content:""; display:block; width:34px; height:2px;
  background:#14A5AB; border-radius:2px; margin-top:14px;
}
body.single-post .entry-content h3{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:24px; line-height:1.3; letter-spacing:-.01em;
  color:#0A1628; margin:34px 0 12px;
}
body.single-post .entry-content h4{
  font-family:'DM Sans',sans-serif; font-weight:600;
  font-size:17px; line-height:1.4; color:#0A1628; margin:28px 0 10px;
}

/* --- lists ---------------------------------------------------------------- */
body.single-post .entry-content ul,
body.single-post .entry-content ol{
  margin:0 0 24px; padding-left:0; list-style:none;
}
body.single-post .entry-content ol{ counter-reset:el-ol; }
body.single-post .entry-content li{
  position:relative; padding-left:28px; margin:0 0 11px;
  font-family:'DM Sans',sans-serif;
  font-size:17px; line-height:1.72; color:rgba(10,22,40,.85);
}
body.single-post .entry-content ul > li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:7px; height:7px; border-radius:50%;
  background:#14A5AB;
}
body.single-post .entry-content ol > li{ counter-increment:el-ol; }
body.single-post .entry-content ol > li::before{
  content:counter(el-ol) "."; position:absolute; left:0; top:0;
  font-weight:600; color:#0D7377;
}

/* --- quote ---------------------------------------------------------------- */
body.single-post .entry-content blockquote{
  margin:30px 0; padding:4px 0 4px 24px;
  border-left:3px solid #14A5AB; background:none;
}
body.single-post .entry-content blockquote p{
  font-family:'DM Serif Display',serif;
  font-size:21px; line-height:1.5; color:#0A1628; margin:0 0 10px;
}
body.single-post .entry-content blockquote p:last-child{ margin-bottom:0; }
body.single-post .entry-content blockquote cite{
  font-family:'DM Sans',sans-serif; font-size:14px; color:#64748B; font-style:normal;
}

/* --- separator ------------------------------------------------------------ */
body.single-post .entry-content hr{
  border:0; height:1px; background:#E2E8F0; margin:38px 0;
}

/* --- figures and tables --------------------------------------------------- */
body.single-post .entry-content img{ border-radius:8px; height:auto; }
body.single-post .entry-content figcaption{
  font-family:'DM Sans',sans-serif; font-size:13.5px; color:#64748B;
  margin-top:10px; text-align:left;
}
body.single-post .entry-content table{
  width:100%; border-collapse:collapse;
  font-family:'DM Sans',sans-serif; font-size:15px;
}
body.single-post .entry-content th,
body.single-post .entry-content td{
  border:1px solid #E2E8F0; padding:11px 14px; text-align:left;
}
body.single-post .entry-content th{ background:#F4F8F8; color:#0A1628; font-weight:600; }

/* Astra's post meta and comment prompt are replaced by the byline in the band */
body.single-post .entry-header .entry-meta,
body.single-post .ast-single-post-order .entry-meta{ display:none!important; }

/* --- related -------------------------------------------------------------- */
.el-related{
  background:#F4F8F8; border-top:1px solid #E2E8F0;
  margin:64px calc(50% - 50vw + (var(--el-sb, 0px) / 2)) 0;
  /* floored: the bare calc resolves to ~0 once the container is as wide as the
     viewport, which pushed the cards to the screen edge on mobile */
  padding:64px max(20px, calc(50vw - (var(--el-sb, 0px) / 2) - 50%)) 72px;
}
.el-related-inner{ max-width:1280px; margin-inline:auto; }
.el-related-eyebrow{
  font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#0D7377;
  margin:0 0 12px;
}
.el-related-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:clamp(1.6rem, 2.4vw, 2.1rem); line-height:1.18;
  letter-spacing:-.015em; color:#0A1628; margin:0 0 34px;
}
.el-related-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.el-related-card{
  display:flex; flex-direction:column; margin:0;
  background:#FFFFFF; border:1px solid #E2E8F0; border-radius:8px;
  padding:26px 24px 24px;
  transition:border-color .18s ease, transform .18s ease;
}
.el-related-card:hover{ border-color:#0D7377; transform:translateY(-2px); }
.el-rc-cat{
  font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:#0D7377;
  margin:0 0 12px;
}
.el-rc-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:21px; line-height:1.26; letter-spacing:-.005em;
  margin:0 0 12px;
}
.el-rc-title a{ color:#0A1628; text-decoration:none; }
.el-related-card:hover .el-rc-title a{ color:#0D7377; }
.el-rc-title a:focus-visible{ outline:2px solid #0D7377; outline-offset:3px; border-radius:2px; }
.el-rc-excerpt{
  font-family:'DM Sans',sans-serif; font-size:15px; line-height:1.62;
  color:#64748B; margin:0 0 18px; flex:1 1 auto;
}
.el-rc-meta{
  display:flex; align-items:center; gap:9px;
  font-family:'DM Sans',sans-serif; font-size:13px; color:#94A3B8;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:1024px){
  .el-related-grid{ grid-template-columns:repeat(2,1fr); }
  .el-related-grid > li:nth-child(3){ display:none; }
}

@media (max-width:921px){
  body.single-post .entry-header .entry-title{ max-width:none; }
  .el-post-back{ margin-bottom:16px; font-size:13px; }
  .el-post-meta{ margin-top:20px; font-size:13px; gap:8px; }
}

@media (max-width:767px){
  body.single-post .entry-content p{ font-size:16.5px; line-height:1.75; }
  body.single-post .entry-content > p:first-of-type{ font-size:17.5px; }
  body.single-post .entry-content li{ font-size:16px; }
  body.single-post .entry-content h2{ font-size:25px; margin:36px 0 14px; }
  body.single-post .entry-content h3{ font-size:21px; margin:28px 0 10px; }
  body.single-post .entry-content blockquote{ padding-left:18px; }
  body.single-post .entry-content blockquote p{ font-size:19px; }
  .el-related{ padding:48px 20px 52px; margin-top:48px; }
  .el-related-title{ margin-bottom:26px; }
  .el-related-grid{ grid-template-columns:1fr; gap:16px; }
  .el-related-grid > li:nth-child(3){ display:flex; }
}

/* The page-hero band rules use a margin shorthand at higher specificity, which
   resets the margin-inline:auto above. Re-apply just the inline margins - the
   vertical rhythm from those rules is still what we want. band child centring */
body.single-post .entry-header > .el-band-eyebrow,
body.single-post .entry-header > .entry-title,
body.single-post .entry-header > .el-band-lead,
body.single-post .entry-header > .el-post-meta{
  margin-inline:auto!important;
  max-width:720px!important;
}

/* Core block styles out-specify the element selectors above: the separator
   carries its own height/border (it computed to 0px tall, so it never showed)
   and wp-block-quote ships a 4.8px grey left border. core block overrides */
body.single-post .entry-content hr,
body.single-post .entry-content hr.wp-block-separator{
  border:0!important;
  height:1px!important;
  background:#E2E8F0!important;
  opacity:1!important;
  margin:38px 0!important;
}
body.single-post .entry-content blockquote,
body.single-post .entry-content blockquote.wp-block-quote{
  border-left:3px solid #14A5AB!important;
  border-top:0!important; border-right:0!important; border-bottom:0!important;
  padding-left:24px!important;
  background:none!important;
}
@media (max-width:767px){
  body.single-post .entry-content blockquote,
  body.single-post .entry-content blockquote.wp-block-quote{ padding-left:18px!important; }
}

/* --- featured image -------------------------------------------------------
   Pulled up so it overlaps the foot of the navy band, as the live site does.
   z-index keeps it above the band's grid overlay pseudo-element. */
.el-post-hero{
  max-width:960px; width:calc(100% - 40px);
  margin:-116px auto 0;
  position:relative; z-index:2;
  border-radius:8px; overflow:hidden;
  background:#E8EEF1;
  box-shadow:0 18px 44px rgba(10,22,40,.18);
}
.el-post-hero img{
  display:block; width:100%; height:auto;
  aspect-ratio:16 / 9; object-fit:cover; object-position:center;
  border-radius:0;
}
.el-post-hero figcaption{
  font-family:'DM Sans',sans-serif; font-size:13.5px; color:#64748B;
  padding:12px 16px 14px; margin:0; background:#FFFFFF;
}
body.single-post .el-post-hero + .entry-content,
body.single-post .el-post-hero ~ .entry-content{ margin-top:44px; }
@media (max-width:921px){
  /* below the desktop breakpoint the hero's container is already inset, so a
     further calc() inset left it narrower than - and offset from - the text
     column. Let it fill the container and it lines up with the article. */
  .el-post-hero{ margin:-72px 0 0; width:auto; max-width:none; }
  body.single-post .el-post-hero ~ .entry-content{ margin-top:32px; }
}
@media (max-width:767px){
  .el-post-hero{ margin:-72px 0 0; width:auto; max-width:none; border-radius:6px; box-shadow:0 12px 28px rgba(10,22,40,.16); }
}

/* ==========================================================================
   ARTICLE SURFACE
   Astra's dynamic CSS paints the single-post article box with
   var(--ast-global-color-5), which in this palette is the navy. The body copy
   is also navy, so on desktop the whole article rendered dark on dark - only
   the teal list bullets were visible. That rule turns transparent at 921px and
   below, which is why it only ever showed on desktop.

   Pages escaped it because their Elementor sections paint their own grounds
   over the top; an article has no background of its own.
   ========================================================================== */
body.single-post .ast-separate-container .ast-article-single:not(.ast-related-post),
body.single-post .site-main article.ast-article-single,
body.single-post .site-main > article{
  background-color:#FFFFFF!important;
}
body.single-post .entry-content,
body.single-post .entry-content p,
body.single-post .entry-content li{
  background-color:transparent;
}

/* ==========================================================================
   COMMENTS SURFACE
   The comment area is a separate box from the article, so it kept the navy
   ground from Astra's palette and rendered navy-on-navy - the heading, the
   labels and the notes were all invisible on desktop.
   ========================================================================== */
body.single-post .comments-area,
body.single-post #comments,
body.single-post .comment-respond,
body.single-post .ast-comment-formwrap,
body.single-post .comments-area > *{
  background-color:#FFFFFF!important;
}
body.single-post .comments-area{
  max-width:720px; width:100%; margin-inline:auto;
  padding-top:8px;
}
body.single-post .comment-reply-title,
body.single-post .comments-title{
  font-family:'DM Serif Display',serif!important; font-weight:400!important;
  font-size:24px!important; color:#0A1628!important;
  margin:0 0 8px!important;
}
body.single-post .comments-area label,
body.single-post .comments-area .comment-notes,
body.single-post .comments-area .required-field-message,
body.single-post .comments-area p,
body.single-post .comments-area span,
body.single-post .comments-area cite,
body.single-post .comments-area a{
  font-family:'DM Sans',sans-serif!important;
  color:#5A7080!important;
}
body.single-post .comments-area .required,
body.single-post .comments-area a:hover{ color:#0D7377!important; }
body.single-post .comments-area input[type="text"],
body.single-post .comments-area input[type="email"],
body.single-post .comments-area input[type="url"],
body.single-post .comments-area textarea{
  font-family:'DM Sans',sans-serif!important; font-size:15px!important;
  color:#0A1628!important; background:#FFFFFF!important;
  border:1px solid #DDE5EA!important; border-radius:6px!important;
  padding:12px 14px!important; box-shadow:none!important;
}
body.single-post .comments-area input:focus,
body.single-post .comments-area textarea:focus{
  border-color:#0D7377!important; outline:none!important;
  box-shadow:0 0 0 3px rgba(13,115,119,.12)!important;
}
body.single-post .comments-area .submit,
body.single-post .comments-area input[type="submit"]{
  font-family:'DM Sans',sans-serif!important; font-size:15px!important; font-weight:500!important;
  background:#0D7377!important; color:#FFFFFF!important;
  border:1px solid #0D7377!important; border-radius:6px!important;
  padding:13px 28px!important;
}
body.single-post .comments-area .submit:hover,
body.single-post .comments-area input[type="submit"]:hover{
  background:#14A5AB!important; border-color:#14A5AB!important;
}

/* related card meta was #94A3B8 on white - 2.56:1, under the 4.5 threshold */
.el-rc-meta{ color:#5A7080!important; }

/* ==========================================================================
   POST NAVIGATION
   Astra's default previous/next links came through unstyled at 3:1 contrast.
   Given a proper surface they also do real work on a blog this small - they
   are the only way to move between articles without going back to the index.
   ========================================================================== */
body.single-post .post-navigation,
body.single-post .ast-single-post-navigation{
  max-width:720px; width:100%; margin:8px auto 0;
  padding:22px 0 4px;
  border-top:1px solid #E2E8F0;
  background:#FFFFFF!important;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
body.single-post .post-navigation .nav-previous,
body.single-post .post-navigation .nav-next{ max-width:48%; }
body.single-post .post-navigation a,
body.single-post .ast-single-post-navigation a{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'DM Sans',sans-serif!important;
  font-size:14.5px!important; font-weight:500!important;
  color:#0D7377!important; text-decoration:none!important;
  transition:color .18s ease;
}
body.single-post .post-navigation a:hover,
body.single-post .ast-single-post-navigation a:hover{ color:#14A5AB!important; }
body.single-post .post-navigation a:focus-visible{ outline:2px solid #0D7377; outline-offset:3px; border-radius:2px; }
body.single-post .ast-left-arrow,
body.single-post .ast-right-arrow{ color:#0D7377!important; transition:transform .18s ease; display:inline-block; }
body.single-post .nav-previous a:hover .ast-left-arrow{ transform:translateX(-3px); }
body.single-post .nav-next a:hover .ast-right-arrow{ transform:translateX(3px); }
@media (max-width:767px){
  body.single-post .post-navigation{ flex-direction:column; gap:12px; }
  body.single-post .post-navigation .nav-previous,
  body.single-post .post-navigation .nav-next{ max-width:100%; }
}

/* ==========================================================================
   MENTORSHIP - billing toggle and plan selection
   Replicates the live site's behaviour: a monthly/annual switch that repricess
   both cards, and a tier picker above the waitlist form. The tier picker and
   the card CTAs both write into the form's "Preferred plan" dropdown, so what
   the applicant clicked is what gets submitted.
   ========================================================================== */

/* --- billing toggle ------------------------------------------------------- */
.el-bill{
  display:inline-flex; align-items:center; gap:4px;
  margin:0 0 34px; padding:4px;
  background:#FFFFFF; border:1px solid #E2E8F0; border-radius:999px;
}
.el-bill-opt{
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500;
  line-height:1.2; color:#0A1628;
  padding:9px 18px; border:0; border-radius:999px;
  background:transparent; cursor:pointer;
  transition:background-color .18s ease, color .18s ease;
}
.el-bill-opt:hover{ color:#0D7377; }
.el-bill-opt.is-on{ background:#0D7377; color:#FFFFFF; }
.el-bill-opt:focus-visible{ outline:2px solid #0D7377; outline-offset:2px; }

/* --- price block ---------------------------------------------------------- */
.el-plan-save{
  font-family:'DM Sans',sans-serif; font-size:12.5px; font-weight:500;
  letter-spacing:.02em; color:#0D7377;
  margin:8px 0 0;
}
/* both cards sit on white, so the lighter teal here only made the note fail
   contrast (3:1). Keep the darker teal on both. */
.el-plan-save[hidden]{ display:none; }

/* the amount changes width between $35 and $1,400 - stop the card jumping */
.elementor-element-elmn1 .el-plan-price{ min-height:52px; }

/* --- tier picker above the form ------------------------------------------ */
.el-tier-pick{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  margin:0 0 24px;
}
.el-tier{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:14px 16px;
  font-family:'DM Sans',sans-serif; text-align:left;
  background:#FFFFFF; color:#0A1628;
  border:1px solid #DDE5EA; border-radius:8px;
  cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease, color .18s ease;
}
.el-tier:hover{ border-color:#0D7377; }
.el-tier-name{ font-size:12px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; opacity:.75; }
.el-tier-price{ font-size:15.5px; font-weight:500; }
.el-tier.is-on{
  background:#0D7377; color:#FFFFFF; border-color:#0D7377;
}
.el-tier.is-on .el-tier-name{ opacity:.85; }
.el-tier:focus-visible{ outline:2px solid #0D7377; outline-offset:3px; }

/* The picker replaces the form's own plan dropdown - but only once the script
   is running. The field is required, so hiding it unconditionally would leave
   a no-JS visitor unable to choose a plan at all. The class is set by
   assets/mentorship.js on the root element. */
.el-plans-js .elementor-element-elmn4r .srfm-dropdown-block:first-of-type{ display:none!important; }
.el-tier-pick{ display:none; }
.el-plans-js .el-tier-pick{ display:grid; }
.el-bill{ display:none; }
.el-plans-js .el-bill{ display:inline-flex; }

/* --- scroll target -------------------------------------------------------- */
.elementor-element-elmn4{ scroll-margin-top:96px; }

@media (max-width:767px){
  .el-plans-js .el-bill{ width:100%; justify-content:center; }
  .el-bill-opt{ flex:1 1 auto; padding:10px 8px; font-size:12.5px; }
  .el-plans-js .el-tier-pick{ grid-template-columns:1fr; gap:10px; }
}

/* ==========================================================================
   LARGE-SCREEN COLUMN PARITY
   The navy band, the CTA band and the footer step up to 1440px at 1600 and
   1560px at 1920. The page wrappers below were left at a flat 1280, so from
   1600 up the hero title, the CTA and the footer all sat 80px wider than the
   content between them - an obvious step down the left edge on a large
   monitor. About, Services and Contact already had these steps; these are the
   wrappers that did not.
   ========================================================================== */
@media (min-width:1600px){
  .elementor-element-elmn1w, .elementor-element-elmn2w,
  .elementor-element-elmn3w, .elementor-element-elmn4w,
  .elementor-element-eltr1w, .elementor-element-eltr2w, .elementor-element-eltr3w,
  .elementor-element-elacc1w, .elementor-element-elacc2w,
  .elementor-element-elacc3w, .elementor-element-elacd1w,
  .el-related-inner{ max-width:1440px; }
  body.blog #main{ max-width:1440px; }
}
@media (min-width:1920px){
  .elementor-element-elmn1w, .elementor-element-elmn2w,
  .elementor-element-elmn3w, .elementor-element-elmn4w,
  .elementor-element-eltr1w, .elementor-element-eltr2w, .elementor-element-eltr3w,
  .elementor-element-elacc1w, .elementor-element-elacc2w,
  .elementor-element-elacc3w, .elementor-element-elacd1w,
  .el-related-inner{ max-width:1560px; }
  body.blog #main{ max-width:1560px; }
}
/* the plans grid tracks its own wrapper */

/* The three-column plans treatment that lived here is superseded by the
   CHOOSE YOUR PLAN block at the end of this file, which matches the live
   centred layout. Section padding is kept. */
.elementor-element-elmn1,
.elementor-element-elmn2,
.elementor-element-elmn3,
.elementor-element-elmn4{ padding-top:64px!important; padding-bottom:70px!important; }
@media (max-width:767px){
  .elementor-element-elmn1,
  .elementor-element-elmn2,
  .elementor-element-elmn3,
  .elementor-element-elmn4{ padding-top:48px!important; padding-bottom:52px!important; }
}

/* ==========================================================================
   SECURE YOUR SPOT (elmn4) - matched to the live site
   The live section is a navy band: white heading, the four facts as
   translucent cards with a teal icon chip, and the form lifted onto a white
   card. Ours was white-on-white with the form sitting loose on the page, and
   the columns ran 1:2.08 against the live 1:1.4.
   ========================================================================== */

/* --- band ----------------------------------------------------------------- */
.elementor-element-elmn4{
  background-color:#0A1628!important;
  position:relative; overflow:hidden; isolation:isolate;
}
.elementor-element-elmn4::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(20,165,171,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,165,171,.06) 1px, transparent 1px);
  background-size:48px 48px; opacity:.55;
}

/* heading block goes light */
.elementor-element-elmn4e .elementor-heading-title{ color:#14A5AB!important; }
.elementor-element-elmn4h .elementor-heading-title{ color:#FFFFFF!important; }
.elementor-element-elmn4i,
.elementor-element-elmn4i p{ color:rgba(255,255,255,.72)!important; }

/* --- columns: 1fr / 1.4fr, as the live site ------------------------------- */
.elementor-element-elmn4g{ gap:36px 64px!important; align-items:flex-start; }
/* The heading now sits in this column too, so it stands nearly as tall as the
   form and no longer needs to travel with it. Sticky also threw the two column
   tops 35px out of level. The live site does not use it either. */
.elementor-element-elmn4l{
  width:calc((100% - 64px) / 2.4)!important;
  max-width:none!important; flex:0 0 auto!important;
  align-self:stretch;
}
/* facts flow straight on from the lead - see FACTS RHYTHM below */
.elementor-element-elmn4r{
  width:auto!important; flex:1 1 auto!important; min-width:0;
}

/* --- the four facts ------------------------------------------------------- */
.el-facts{ list-style:none; margin:24px 0 0!important; padding:0; display:flex; flex-direction:column; gap:12px; }
.el-facts li{
  /* the earlier rule stacks these in a column, which put the icon above the
     text and ran each row to 134px - force the row direction back */
  display:flex!important; flex-direction:row!important;
  align-items:center!important; gap:15px!important;
  margin:0!important; padding:16px 18px!important;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:10px;
}
.el-facts li:first-child{ padding-top:16px!important; }
.el-facts li:last-child{ border-bottom:1px solid rgba(255,255,255,.10)!important; }
.el-fact-ico{
  display:grid; place-items:center; flex:none;
  width:40px; height:40px; border-radius:8px;
  background:rgba(20,165,171,.14); color:#14A5AB;
}
.el-fact-ico svg{ width:18px; height:18px; display:block; }
.el-fact-body{ display:flex; flex-direction:column; min-width:0; }
.el-fact-k{
  font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.58)!important;
}
.el-fact-v{
  font-family:'DM Sans',sans-serif; font-size:15.5px; font-weight:500;
  line-height:1.4; color:#FFFFFF!important; margin-top:3px;
}

/* --- form lifted onto a white card ---------------------------------------- */
.elementor-element-elmn4r{
  background:#FFFFFF;
  border-radius:12px;
  padding:32px!important;
  box-shadow:0 20px 50px rgba(3,10,22,.28);
}
.el-tier-pick{ margin-bottom:22px; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width:1024px){
  .elementor-element-elmn4g{ gap:32px!important; }
  .elementor-element-elmn4l{
    position:static; width:100%!important;
  }
  .el-facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}
@media (max-width:767px){
  .el-facts{ grid-template-columns:1fr; }
  .elementor-element-elmn4r{ padding:22px 18px!important; border-radius:10px; }
  .el-facts li{ padding:14px 16px!important; }
}

/* ==========================================================================
   MENTORSHIP FORM - base control styling
   The block above replicated only the three SureForms *fixes* (phone, legends,
   TomSelect) to this form. The base control styling was never carried over, so
   the inputs rendered transparent with a heavy navy border while the contact
   form's are white with a hairline. This brings them into step - and matches
   the live site, whose inputs are white with a light teal-tinted border.
   ========================================================================== */
.elementor-element-elmn4r .srfm-form-container,
.elementor-element-elmn4r .srfm-form{ background:transparent!important; padding:0!important; }

.elementor-element-elmn4r .srfm-block-wrap label,
.elementor-element-elmn4r .srfm-block label,
.elementor-element-elmn4r label.srfm-block-label{
  font-family:'DM Sans',sans-serif!important;
  font-size:11.5px!important; font-weight:500!important;
  letter-spacing:.13em!important; text-transform:uppercase!important;
  color:#0A1628!important;
}

.elementor-element-elmn4r input[type="text"],
.elementor-element-elmn4r input[type="email"],
.elementor-element-elmn4r input[type="tel"],
.elementor-element-elmn4r input[type="number"],
.elementor-element-elmn4r select,
.elementor-element-elmn4r textarea,
.elementor-element-elmn4r .srfm-input-common{
  font-family:'DM Sans',sans-serif!important;
  font-size:15px!important; line-height:1.4!important; color:#0A1628!important;
  background:#FFFFFF!important;
  border:1px solid #DDE5EA!important;
  border-radius:6px!important;
  padding:12px 14px!important;
  box-shadow:none!important;
  transition:border-color .18s ease;
}
.elementor-element-elmn4r input:focus,
.elementor-element-elmn4r select:focus,
.elementor-element-elmn4r textarea:focus{
  border-color:#0D7377!important; outline:none!important;
  box-shadow:0 0 0 3px rgba(13,115,119,.12)!important;
}
.elementor-element-elmn4r ::placeholder{ color:#94A3B8!important; }
.elementor-element-elmn4r .srfm-required,
.elementor-element-elmn4r .srfm-block-label .required{ color:#0D7377!important; }
.elementor-element-elmn4r textarea{ min-height:120px!important; }

/* submit - same inline-flex treatment the contact form needed, so the arrow
   sits beside the label instead of forming its own line below it */
.elementor-element-elmn4r .srfm-button,
.elementor-element-elmn4r button[type="submit"],
.elementor-element-elmn4r .srfm-submit-button{
  font-family:'DM Sans',sans-serif!important;
  font-size:15px!important; font-weight:500!important;
  display:inline-flex!important;
  align-items:center!important; justify-content:center!important;
  height:auto!important; min-height:0!important;
  line-height:1.25!important;
  padding:14px 30px!important;
  white-space:nowrap!important;
  border-radius:6px!important;
  background:#0D7377!important; color:#FFFFFF!important;
  border:1px solid #0D7377!important;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.elementor-element-elmn4r .srfm-button:hover,
.elementor-element-elmn4r button[type="submit"]:hover{
  background:#14A5AB!important; border-color:#14A5AB!important; transform:translateY(-1px);
}
.elementor-element-elmn4r .srfm-submit-wrap{
  display:inline-flex!important; align-items:center!important; line-height:1.25!important;
}
.elementor-element-elmn4r .srfm-submit-container,
.elementor-element-elmn4r .wp-block-button{
  display:flex!important; align-items:flex-start!important; height:auto!important;
}
.elementor-element-elmn4r .srfm-button::after,
.elementor-element-elmn4r button[type="submit"]::after{
  content:"\2192"; margin-left:10px; flex:0 0 auto; line-height:1;
  transition:transform .18s ease;
}
.elementor-element-elmn4r .srfm-button:hover::after,
.elementor-element-elmn4r button[type="submit"]:hover::after{ transform:translateX(3px); }

@media (max-width:767px){
  .elementor-element-elmn4r .srfm-submit-container,
  .elementor-element-elmn4r .wp-block-button{ display:block!important; }
  .elementor-element-elmn4r .srfm-button,
  .elementor-element-elmn4r button[type="submit"]{ width:100%!important; display:flex!important; }
}

/* ==========================================================================
   HOW IT WORKS (elmn2) - matched to the live site
   Ours ran the three steps as bare text on white, left aligned, joined by a
   hairline and marked with filled teal discs. The live section is a fog band
   holding three white bordered cards, everything centred, with the numerals
   outlined rather than filled and set as 01 / 02 / 03.
   ========================================================================== */

.elementor-element-elmn2{ background-color:#F4F8F8!important; }

/* --- centred heading block ------------------------------------------------ */
.elementor-element-elmn2e .elementor-heading-title{ justify-content:center; }
/* centred eyebrow marker: the 30px rule is a left-aligned device - centred, it
   pushed the text 21px off the axis. The live site uses a small marker here,
   the same dot the contact page already uses. */
.elementor-element-elmn2e .elementor-heading-title::before{
  width:7px!important; height:7px!important;
  border-radius:50%!important; background:#0D7377!important;
  opacity:1!important; flex:none;
}
.elementor-element-elmn2h .elementor-heading-title,
.elementor-element-elmn2e .elementor-heading-title{ text-align:center; }
.elementor-element-elmn2h .elementor-heading-title{ margin-inline:auto; max-width:820px; }

/* --- the three cards ------------------------------------------------------ */
.el-steps{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:24px!important;
  margin:38px 0 0!important; padding:0!important;
  list-style:none;
}
/* the connecting hairline belonged to the old treatment */
.el-steps::before{ display:none!important; }

.el-steps li{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  margin:0; padding:32px 30px!important;
  text-align:center;
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:8px;
}

/* --- outlined numeral ----------------------------------------------------- */
.el-step-num{
  display:grid!important; place-items:center;
  width:40px!important; height:40px!important;
  margin:0 auto 18px!important;
  border-radius:50%!important;
  background:transparent!important;
  border:1px solid #0D7377!important;
  color:#0D7377!important;
  font-family:'DM Sans',sans-serif!important;
  font-size:13.5px!important; font-weight:500!important;
  letter-spacing:.06em; line-height:1!important;
}

.el-step-name{
  font-family:'DM Serif Display',serif!important; font-weight:400!important;
  font-size:19px!important; line-height:1.3!important;
  color:#0A1628!important; margin:0 0 10px!important; text-align:center;
}
.el-step-desc{
  font-family:'DM Sans',sans-serif!important;
  font-size:14.5px!important; line-height:1.62!important;
  color:#5A7080!important; margin:0!important;
  max-width:none!important; text-align:center;
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:980px){
  .el-steps{ grid-template-columns:1fr!important; gap:16px!important; }
  .el-steps li{ padding:26px 24px!important; }
}

/* ==========================================================================
   CHOOSE YOUR PLAN (elmn1) - matched to the live site
   Scoped to .elementor-element-elmn1: these class names are shared with the
   homepage mentorship block, and unscoped they turned its prices navy on a
   navy card. The live section is a centred composition, not a full-width row: heading,
   billing switch, two 372px cards and the trust line all centre on the page
   axis. That supersedes the three-column treatment tried earlier - the aside
   is gone and the trust list is back to a single centred line beneath.
   ========================================================================== */

/* --- centred heading block ------------------------------------------------ */
.elementor-element-elmn1e .elementor-heading-title{ justify-content:center; text-align:center; }
.elementor-element-elmn1e .elementor-heading-title::before{
  width:7px!important; height:7px!important;
  border-radius:50%!important; background:#0D7377!important;
  opacity:1!important; flex:none;
}
.elementor-element-elmn1h .elementor-heading-title{
  text-align:center; margin-inline:auto; max-width:820px;
}
.elementor-element-elmn1i,
.elementor-element-elmn1i p{ text-align:center; margin-inline:auto; max-width:660px; }

/* --- billing switch, centred ---------------------------------------------- */
.elementor-element-elmn1 .el-plans-js .el-bill{ display:inline-flex; }
.elementor-element-elmn1g{ text-align:center; }
.el-bill{ margin:30px auto 34px; }

/* --- the two cards, centred as a pair -------------------------------------- */
.elementor-element-elmn1 .el-plans{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,372px))!important;
  justify-content:center!important;
  gap:24px!important;
  max-width:768px!important;
  margin:0 auto!important;
  text-align:left;
}
.elementor-element-elmn1 .el-plan{
  position:relative;
  display:flex; flex-direction:column;
  padding:32px!important;
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:12px!important;
  text-align:left;
}
.elementor-element-elmn1 .el-plan.is-featured{ border:2px solid #0D7377!important; padding:31px!important; }

/* badge straddles the top border */
.elementor-element-elmn1 .el-plan-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center;
  background:#0D7377; color:#FFFFFF;
  font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500;
  line-height:1; letter-spacing:normal;
  padding:6px 12px; border-radius:999px; white-space:nowrap;
}

.elementor-element-elmn1 .el-plan-tag{
  font-family:'DM Sans',sans-serif!important; font-size:12px!important; font-weight:500!important;
  letter-spacing:.06em!important; text-transform:uppercase!important;
  color:#0D7377!important; margin:0!important;
}
.elementor-element-elmn1 .el-plan-name{
  font-family:'DM Serif Display',serif!important; font-weight:400!important;
  font-size:24px!important; line-height:1.25!important; letter-spacing:-.01em!important;
  color:#0A1628!important; margin:8px 0 0!important;
}

/* price reads as one line: $35 / month */
.elementor-element-elmn1 .el-plan-price{
  display:flex!important; align-items:baseline; gap:8px;
  margin:16px 0 0!important; min-height:0!important;
}
.elementor-element-elmn1 .el-plan-amt,
.elementor-element-elmn1 .el-plan-per{
  font-family:'DM Serif Display',serif!important; font-weight:400!important;
  font-size:30px!important; line-height:1.2!important; color:#0A1628!important;
}
.elementor-element-elmn1 .el-plan-save{ margin:8px 0 0!important; }

.elementor-element-elmn1 .el-plan-rule{
  border:0!important; height:1px!important;
  background:rgba(13,115,119,.3)!important;
  margin:24px 0!important; opacity:1!important;
}

.elementor-element-elmn1 .el-plan-list{ margin:0 0 0!important; padding:0; list-style:none; flex:1 1 auto; }
.elementor-element-elmn1 .el-plan-list li{
  display:flex; align-items:flex-start; gap:10px;
  margin:0 0 12px!important; padding:0!important;
  font-family:'DM Sans',sans-serif; font-size:14px; line-height:1.5; color:#0A1628;
}
.elementor-element-elmn1 .el-plan-list li:last-child{ margin-bottom:0!important; }
.elementor-element-elmn1 .el-plan-list svg{ width:17px; height:17px; flex:none; margin-top:1px; color:#0D7377; }

/* full-width CTA with the arrow the live site shows */
.elementor-element-elmn1 .el-plan-cta{
  display:inline-flex!important; width:100%; box-sizing:border-box;
  align-items:center; justify-content:center; gap:8px;
  margin-top:32px;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; line-height:1.2;
  padding:12px 20px!important; border-radius:6px!important;
  background:#FFFFFF; color:#0A1628!important;
  border:1px solid #E2E8F0!important; text-decoration:none;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.elementor-element-elmn1 .el-plan-cta::after{ content:"\2192"; transition:transform .18s ease; }
.elementor-element-elmn1 .el-plan-cta:hover{ border-color:#0D7377!important; color:#0D7377!important; }
.elementor-element-elmn1 .el-plan-cta:hover::after{ transform:translateX(3px); }
.elementor-element-elmn1 .el-plan.is-featured .el-plan-cta{
  background:#0D7377; color:#FFFFFF!important; border-color:#0D7377!important;
}
.elementor-element-elmn1 .el-plan.is-featured .el-plan-cta:hover{ background:#14A5AB; border-color:#14A5AB!important; color:#FFFFFF!important; }
.elementor-element-elmn1 .el-plan-cta:focus-visible{ outline:2px solid #0D7377; outline-offset:3px; }

/* --- trust line, centred beneath ------------------------------------------ */
.elementor-element-elmn1 .el-plan-trust{
  list-style:none; margin:26px auto 0!important; padding:0!important;
  max-width:none!important;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:6px 10px;
}
.elementor-element-elmn1 .el-plan-trust li{
  display:inline-flex; align-items:center; gap:6px;
  margin:0; padding:0!important; border:0!important;
  font-family:'DM Sans',sans-serif; font-size:13.5px; color:#5A7080;
}
.elementor-element-elmn1 .el-plan-trust li::before{ content:"\2713"; color:#0D7377; }
.elementor-element-elmn1 .el-plan-trust li + li::after{ content:""; }
.elementor-element-elmn1 .el-plan-trust li:not(:last-child)::marker{ content:""; }
.elementor-element-elmn1 .el-plan-trust li:not(:last-child){ padding-right:10px!important; }
.elementor-element-elmn1 .el-plan-trust li:not(:last-child)::after{
  content:"\00B7"; color:#94A3B8; margin-left:10px;
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:820px){
  .elementor-element-elmn1 .el-plans{ grid-template-columns:minmax(0,372px)!important; max-width:372px!important; }
  .elementor-element-elmn1 .el-plan.is-featured{ margin-top:14px; }
}
@media (max-width:767px){
  .elementor-element-elmn1 .el-plans{ max-width:none!important; grid-template-columns:1fr!important; gap:30px!important; }
  .elementor-element-elmn1 .el-plan{ padding:26px 22px!important; }
  .elementor-element-elmn1 .el-plan.is-featured{ padding:25px 21px!important; }
  .elementor-element-elmn1 .el-plan-trust{ flex-direction:column; gap:8px; }
  .elementor-element-elmn1 .el-plan-trust li:not(:last-child){ padding-right:0!important; }
  .elementor-element-elmn1 .el-plan-trust li:not(:last-child)::after{ content:""; margin:0; }
}

/* ==========================================================================
   MENTORSHIP FORM - tightened
   The card ran 889px against the live site's 769. The excess was spread thin:
   44px controls where the live form uses 42, an 18px row gap, a 146px
   textarea, 61px tier buttons against 46, and an error slot reserving space
   under every field whether or not there was an error.
   ========================================================================== */

/* rows sit closer together */
.elementor-element-elmn4r .srfm-form{ gap:14px 16px!important; }
.elementor-element-elmn4r .srfm-block{ margin-bottom:0!important; }

/* labels tuck in above their control */
.elementor-element-elmn4r .srfm-block-wrap label,
.elementor-element-elmn4r .srfm-block label,
.elementor-element-elmn4r label.srfm-block-label,
.elementor-element-elmn4r legend.srfm-block-legend,
.elementor-element-elmn4r fieldset legend{
  font-size:11px!important;
  margin:0 0 6px!important;
  line-height:1.35!important;
}

/* controls: 40px rather than 44 */
.elementor-element-elmn4r input[type="text"],
.elementor-element-elmn4r input[type="email"],
.elementor-element-elmn4r input[type="tel"],
.elementor-element-elmn4r input[type="number"],
.elementor-element-elmn4r select,
.elementor-element-elmn4r textarea,
.elementor-element-elmn4r .srfm-input-common{
  font-size:14.5px!important;
  padding:10px 14px!important;
}
.elementor-element-elmn4r input[type="tel"]{ padding-left:78px!important; }
.elementor-element-elmn4r .srfm-block .ts-wrapper .ts-control{
  padding-block:10px!important;
  padding-inline:14px 34px!important;
  min-height:40px!important;
  font-size:14.5px!important;
}
.elementor-element-elmn4r .ts-control > input{ font-size:14.5px!important; }

/* the error slot only takes room when there is an error to show */
.elementor-element-elmn4r .srfm-error-wrap:empty,
.elementor-element-elmn4r .srfm-error-message:empty{ display:none!important; }

.elementor-element-elmn4r textarea{ min-height:92px!important; margin:0!important; }

/* tier picker: 46px, matching the live control */
.el-tier-pick{ margin:0 0 18px!important; gap:10px!important; }
.el-tier{ padding:9px 14px!important; gap:1px!important; }
.el-tier-name{ font-size:10.5px!important; letter-spacing:.12em!important; }
.el-tier-price{ font-size:14px!important; }

/* submit back to the live site's 44px */
.elementor-element-elmn4r .srfm-button,
.elementor-element-elmn4r button[type="submit"],
.elementor-element-elmn4r .srfm-submit-button{
  font-size:14px!important;
  padding:12px 26px!important;
}

@media (max-width:767px){
  .elementor-element-elmn4r .srfm-form{ gap:12px!important; }
}

/* --- block internals -------------------------------------------------------
   Three things were padding every field out to 93px: SureForms puts a 6px
   margin above and below each control, the error slot holds 16px whether or
   not there is an error (it is not :empty - it wraps a hidden message), and
   the textarea is sized by rows=5, which min-height cannot pull in. */
.elementor-element-elmn4r .srfm-block input,
.elementor-element-elmn4r .srfm-block textarea,
.elementor-element-elmn4r .srfm-block select,
.elementor-element-elmn4r .srfm-input-common{
  margin-top:0!important; margin-bottom:0!important;
}
.elementor-element-elmn4r .srfm-error-wrap{
  min-height:0!important; height:auto!important;
  font-size:0!important; line-height:0!important; margin:0!important;
}
.elementor-element-elmn4r .srfm-error-message{
  font-size:12px!important; line-height:1.4!important; margin-top:5px!important;
}
.elementor-element-elmn4r textarea{
  height:92px!important; min-height:92px!important;
}

/* ==========================================================================
   HOMEPAGE PLAN CTAs (elmen01)
   One button per package card. The cards sit on the navy mentorship band, so
   these carry their own colours rather than reusing .el-plan-cta, which is
   scoped to the mentorship page and drawn for a white card.
   Each link carries ?plan= so the mentorship form opens on the right tier.
   ========================================================================== */
.el-mplan-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; box-sizing:border-box; margin-top:20px;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; line-height:1.2;
  padding:12px 20px; border-radius:6px; text-decoration:none;
  background:transparent; color:#FFFFFF!important;
  border:1px solid rgba(255,255,255,.28);
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.el-mplan-cta::after{ content:"\2192"; transition:transform .18s ease; }
.el-mplan-cta:hover{ border-color:#14A5AB; color:#14A5AB!important; }
.el-mplan-cta:hover::after{ transform:translateX(3px); }
.el-mplan-cta.is-primary{
  background:#0D7377; border-color:#0D7377; color:#FFFFFF!important;
}
.el-mplan-cta.is-primary:hover{ background:#14A5AB; border-color:#14A5AB; color:#FFFFFF!important; }
.el-mplan-cta:focus-visible{ outline:2px solid #14A5AB; outline-offset:3px; }

/* --- labels ----------------------------------------------------------------
   The live form labels are sentence case at a readable size, not the small
   caps used elsewhere on the site. Matching it here; the contact form keeps
   its own treatment. labels match the live form */
.elementor-element-elmn4r .srfm-block-wrap label,
.elementor-element-elmn4r .srfm-block label,
.elementor-element-elmn4r label.srfm-block-label,
.elementor-element-elmn4r legend.srfm-block-legend,
.elementor-element-elmn4r fieldset legend{
  font-family:'DM Sans',sans-serif!important;
  font-size:14px!important; font-weight:400!important;
  letter-spacing:normal!important; text-transform:none!important;
  color:#1A2A3A!important;
  margin:0 0 7px!important; line-height:1.4!important;
}
.elementor-element-elmn4r .srfm-required,
.elementor-element-elmn4r .srfm-block-label .required{ color:#0D7377!important; }

/* ==========================================================================
   FORM USABILITY FIXES (contact form elctrt + mentorship waitlist elmn4r)
   Only two verified defects. A focus state already existed
   (.elementor-element-elctrt input:focus, teal ring) - an earlier audit here
   wrongly reported it missing because the headless browser cannot focus the
   document, so :focus never matched and every focus style read as "none".
   Nothing here changes control metrics: another session tuned the mentorship
   form to the live site's 769px card and that is left alone.
   ========================================================================== */

/* 1. Inputs were 15px. iOS auto-zooms any field under 16px on focus, which on
      a mobile-heavy audience reads as the page jumping about. Font size only.
      The doubled container class is needed to outrank an earlier block that
      targets these fields with attribute selectors at (0,2,1). */
.elementor-element-elctrt.elementor-element-elctrt input[type="text"],
.elementor-element-elctrt.elementor-element-elctrt input[type="email"],
.elementor-element-elctrt.elementor-element-elctrt input[type="tel"],
.elementor-element-elctrt.elementor-element-elctrt input[type="url"],
.elementor-element-elctrt.elementor-element-elctrt input[type="number"],
.elementor-element-elctrt.elementor-element-elctrt textarea,
.elementor-element-elctrt.elementor-element-elctrt .ts-control > input,
.elementor-element-elmn4r.elementor-element-elmn4r input[type="text"],
.elementor-element-elmn4r.elementor-element-elmn4r input[type="email"],
.elementor-element-elmn4r.elementor-element-elmn4r input[type="tel"],
.elementor-element-elmn4r.elementor-element-elmn4r textarea,
.elementor-element-elmn4r.elementor-element-elmn4r .ts-control > input{
  font-size:16px!important;
}

/* 2. The country dropdown is 55 items and the panel had no max-height, so it
      ran past the bottom of the viewport with no scroll of its own. */
.elementor-element-elctrt .ts-dropdown,
.elementor-element-elmn4r .ts-dropdown{ z-index:60!important; }
.elementor-element-elctrt .ts-dropdown .ts-dropdown-content,
.elementor-element-elmn4r .ts-dropdown .ts-dropdown-content{
  max-height:264px!important; overscroll-behavior:contain;
}

/* 3. Contact-form labels were 11.5px, below comfortable reading size.
      Scoped to the contact form; the mentorship form's 11px is deliberate. */
.elementor-element-elctrt.elementor-element-elctrt .srfm-block-label,
.elementor-element-elctrt.elementor-element-elctrt .srfm-block-legend{
  font-size:12.5px!important;
  letter-spacing:.12em!important;
  margin-bottom:8px!important;
}
/* ==========================================================================
   CONTACT FORM REDESIGN (form 2096, container elctrt)
   The form now leads with intent instead of identity: a chip picker for the
   service, then the message, then lab context, then contact details. Three
   section labels and two hairlines break a 10-field wall into short groups.
   ========================================================================== */

/* --- section labels ------------------------------------------------------- */
/* SureForms renders advanced-heading through UAGB. A 24px serif heading inside
   a form competes with the page H1, so these read as small step labels. */
.elementor-element-elctrt .wp-block-uagb-advanced-heading{ margin:4px 0 2px!important; }
.elementor-element-elctrt .wp-block-uagb-advanced-heading .uagb-heading-text{
  font-family:'DM Sans',sans-serif!important;
  font-size:12px!important; font-weight:500!important;
  letter-spacing:.16em!important; text-transform:uppercase!important;
  color:#0D7377!important; line-height:1.4!important;
  display:flex; align-items:center; gap:12px;
}
.elementor-element-elctrt .wp-block-uagb-advanced-heading .uagb-heading-text::before{
  content:""; width:26px; height:1px; background:#0D7377; flex:none; opacity:.85;
}

/* --- hairlines between groups -------------------------------------------- */
.elementor-element-elctrt .wp-block-uagb-separator{ margin:10px 0 4px!important; }
.elementor-element-elctrt .wp-block-uagb-separator__inner{
  border-top:1px solid #E2E8F0!important; display:block!important; width:100%!important;
}

/* --- the chip picker ------------------------------------------------------ */
.elementor-element-elctrt .srfm-multi-choice-block fieldset{ border:0; padding:0; margin:0; }
.elementor-element-elctrt .srfm-multi-choice-block .srfm-description{
  font-family:'DM Sans',sans-serif; font-size:13px; line-height:1.5;
  color:#64748B; margin:0 0 14px;
}
.elementor-element-elctrt .srfm-block-wrap.srfm-choice-width-50{
  display:grid!important; grid-template-columns:repeat(2,1fr); gap:10px;
  margin:0!important; width:100%!important;
}
.elementor-element-elctrt .srfm-multi-choice-single{
  position:relative; margin:0!important; width:auto!important; padding:0!important;
}
/* the radio covers the chip so the whole chip is the hit area */
.elementor-element-elctrt .srfm-input-multi-choice-single{
  position:absolute!important; inset:0; width:100%!important; height:100%!important;
  margin:0!important; opacity:0; cursor:pointer; z-index:2;
}
.elementor-element-elctrt .srfm-multi-choice-single .srfm-block-content-wrap{
  display:flex; align-items:center; min-height:46px; height:100%;
  padding:10px 14px; margin:0!important;
  border:1px solid #E2E8F0!important; border-radius:6px!important;
  background:#FFFFFF!important;
  font-family:'DM Sans',sans-serif!important; font-size:14.5px!important;
  line-height:1.35!important; color:#1A2A3A!important;
  transition:border-color .16s ease, background-color .16s ease, color .16s ease;
}
.elementor-element-elctrt .srfm-multi-choice-single:hover .srfm-block-content-wrap{
  border-color:#0D7377!important;
}
.elementor-element-elctrt .srfm-multi-choice-single:has(input:checked) .srfm-block-content-wrap{
  border-color:#0D7377!important;
  background:rgba(13,115,119,.08)!important;
  color:#0A1628!important; font-weight:500!important;
  box-shadow:inset 0 0 0 1px #0D7377!important;
}
/* keyboard users still get a ring, since the real radio is transparent */
.elementor-element-elctrt .srfm-input-multi-choice-single:focus-visible + .srfm-block-content-wrap,
.elementor-element-elctrt .srfm-input-multi-choice-single:focus-visible ~ .srfm-block-content-wrap{
  outline:3px solid rgba(13,115,119,.28); outline-offset:2px;
}

/* --- field help text ------------------------------------------------------ */
.elementor-element-elctrt .srfm-block:not(.srfm-multi-choice-block) .srfm-description{
  font-family:'DM Sans',sans-serif; font-size:12.5px; line-height:1.5;
  color:#64748B; margin:6px 0 0;
}

/* --- submit --------------------------------------------------------------- */
.elementor-element-elctrt .srfm-submit-container{ margin-top:6px; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width:1100px){
  .elementor-element-elctrt .srfm-block-wrap.srfm-choice-width-50{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .elementor-element-elctrt .srfm-block-wrap.srfm-choice-width-50{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .elementor-element-elctrt .srfm-block-wrap.srfm-choice-width-50{ grid-template-columns:1fr; }
  .elementor-element-elctrt .srfm-submit-button{ width:100%!important; justify-content:center; }
}
/* Selected-chip state, written twice on purpose.
   The rule above uses :has(); this one uses the sibling combinator, which the
   markup supports because the radio and the label content are siblings.
   Both are kept because neither could be verified in the headless pane used to
   build this: the selector matches and the rule parses with !important, but the
   pane does not recompute state-dependent styles (the same limitation that
   makes :focus and :hover unreadable there). Check the selected state in a real
   browser; if one of these two turns out to be redundant, drop that one. */
.elementor-element-elctrt .srfm-input-multi-choice-single:checked + .srfm-block-content-wrap,
.elementor-element-elctrt .srfm-input-multi-choice-single:checked ~ .srfm-block-content-wrap{
  border-color:#0D7377!important;
  background:rgba(13,115,119,.08)!important;
  color:#0A1628!important;
  font-weight:500!important;
  box-shadow:inset 0 0 0 1px #0D7377!important;
}
/* ==========================================================================
   TOMSELECT INNER INPUT
   TomSelect's search field inside .ts-control is an input[type="text"], so the
   form's generic text-input styling was painting it as a white box with its own
   1px border and 6px radius, sitting next to the selected value inside the
   control. TomSelect's own CSS zeroes those (background:initial; border:0) but
   loses to `.elementor-element-elctrt input[type="text"]` at (0,2,1).
   Doubling the container class gives (0,3,1) and wins.
   ========================================================================== */

.elementor-element-elctrt.elementor-element-elctrt .ts-control > input,
.elementor-element-elmn4r.elementor-element-elmn4r .ts-control > input{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:none!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  width:auto!important;
  min-width:0!important;
  flex:1 1 auto;
}
.elementor-element-elctrt.elementor-element-elctrt .ts-control > input:focus,
.elementor-element-elmn4r.elementor-element-elmn4r .ts-control > input:focus{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:none!important;
}

/* The selected value and the search field share the control, so keep them on
   one baseline and let the value take the space. */
.elementor-element-elctrt .ts-control,
.elementor-element-elmn4r .ts-control{ align-items:center; flex-wrap:nowrap; }
.elementor-element-elctrt .ts-control > .item,
.elementor-element-elmn4r .ts-control > .item{
  font-family:'DM Sans',sans-serif;
  color:#0A1628;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}

/* Two plugins add trailing controls (clear + dropdown arrow); reserve room so
   a long value never runs under them. */
/* An earlier block sets padding-inline:14px 34px!important at (0,4,0) on
   .srfm-block .ts-wrapper .ts-control, so this needs the doubled class to win. */
.elementor-element-elctrt.elementor-element-elctrt .srfm-block .ts-wrapper.plugin-clear_button .ts-control,
.elementor-element-elmn4r.elementor-element-elmn4r .srfm-block .ts-wrapper.plugin-clear_button .ts-control{
  padding-inline:14px 54px!important;
}
/* ==========================================================================
   BLOG DETAIL SIDEBAR (.el-post-side, rendered by includes/postside.php)
   The aside is printed on astra_entry_content_after, which fires INSIDE
   .entry-content, so it cannot be a sibling of the text. Instead .entry-content
   becomes the grid: every child sits in column 1 at the 720px reading measure
   the article design already sets, and the aside is pulled into column 2
   spanning the full height. The navy band is untouched and stays full bleed.
   ========================================================================== */

@media (min-width:1080px){
  body.single-post .entry-content{
    max-width:1096px!important;      /* 720 text + 56 gutter + 320 aside */
    display:grid;
    grid-template-columns:minmax(0,720px) 320px;
    column-gap:56px;
    align-items:start;
  }
  body.single-post .entry-content > *{ grid-column:1; }
  body.single-post .el-post-side{
    grid-column:2;
    /* NOT `1 / -1`: -1 means the last line of the EXPLICIT grid, and only
       columns are declared here, so `1 / -1` collapsed to row 1 alone and
       forced that row to the aside's full height (~1236px). The first heading
       then sat by itself in a giant row, which read as a huge gap under the
       band. Spanning a large number of implicit rows lets the aside's height
       distribute across the article instead. */
    grid-row:1 / span 500;
    position:sticky;
    top:calc(72px + 32px);
    margin:0;
  }
}

/* --- shared aside chrome -------------------------------------------------- */
.el-post-side{ margin:40px 0 0; }
.el-post-side .widget{
  margin:0 0 22px; padding:0; border:0; background:none;
}
.el-post-side .widget:last-child{ margin-bottom:0; }
.el-post-side .widget-title,
.el-post-side h2,
.el-post-side h3{
  font-family:'DM Sans',sans-serif!important;
  font-size:12px!important; font-weight:500!important;
  letter-spacing:.16em!important; text-transform:uppercase!important;
  color:#0D7377!important; margin:0 0 14px!important;
  display:flex; align-items:center; gap:11px;
}
.el-post-side .widget-title::before,
.el-post-side .widget_categories h2::before,
.el-post-side .widget_recent_entries h2::before{
  content:""; width:22px; height:1px; background:#0D7377; flex:none; opacity:.85;
}

/* --- lists: hairline rows, not bullets ------------------------------------ */
.el-post-side ul{ list-style:none; margin:0; padding:0; }
.el-post-side li{
  margin:0; padding:11px 0; border-bottom:1px solid #E2E8F0;
  font-family:'DM Sans',sans-serif; font-size:14.5px; line-height:1.45;
}
.el-post-side li:last-child{ border-bottom:0; }
.el-post-side li a{ color:#1A2A3A; text-decoration:none; transition:color .16s ease; }
.el-post-side li a:hover{ color:#0D7377; }
.el-post-side .post-date{
  display:block; margin-top:4px;
  font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:#64748B;
}

/* --- the consultation card ------------------------------------------------ */
.el-side-cta{
  position:relative; overflow:hidden; isolation:isolate;
  background:#0A1628; border-radius:8px; padding:26px 24px 24px;
}
.el-side-cta::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(20,165,171,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,165,171,.10) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(200deg, transparent 35%, #000 100%);
  mask-image:linear-gradient(200deg, transparent 35%, #000 100%);
}
.el-side-cta-eyebrow{
  font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#14A5AB; margin:0 0 10px;
}
.el-side-cta-title{
  font-family:'DM Serif Display',serif!important; font-weight:400!important;
  font-size:21px!important; line-height:1.2!important; letter-spacing:-.01em;
  color:#FFFFFF!important; margin:0 0 10px!important;
  text-transform:none!important; display:block!important;
}
.el-side-cta-title::before{ content:none!important; }
.el-side-cta-text{
  font-family:'DM Sans',sans-serif; font-size:14px; line-height:1.6;
  color:rgba(255,255,255,.72); margin:0 0 18px;
}
.el-side-cta-btn{
  display:block; text-align:center;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; line-height:1.2;
  padding:12px 18px; border-radius:6px;
  background:#0D7377; color:#fff!important; text-decoration:none;
  transition:background-color .18s ease, transform .18s ease;
}
.el-side-cta-btn:hover{ background:#14A5AB; transform:translateY(-1px); }

/* --- stacked below the article on narrow screens -------------------------- */
@media (max-width:1079px){
  body.single-post .el-post-side{
    margin-top:44px; padding-top:32px; border-top:1px solid #E2E8F0;
  }
  .el-post-side .el-side-cta{ max-width:520px; }
}
/* --- SIDEBAR LAYOUT CORRECTIONS ------------------------------------------
   1. Astra's ast-separate-container gives the single-post article ~106px of
      horizontal padding, leaving only 988px inside a 1200px article. The grid
      then resolved to 611px of text instead of the 720px measure the article
      design sets. Trimming the padding to 52px restores 1096px, so the text
      column lands on 720px exactly.
   2. `.el-post-side h3` sets DM Sans at (0,1,1) and outranked the CTA title's
      (0,1,0), so the card heading lost its serif. Match on the element too.
   -------------------------------------------------------------------------- */

@media (min-width:1080px){
  body.single-post .ast-article-single{ padding-inline:52px!important; }
}

.el-post-side h3.el-side-cta-title,
.el-post-side .el-side-cta .el-side-cta-title{
  font-family:'DM Serif Display',serif!important;
  font-weight:400!important;
  font-size:21px!important;
  line-height:1.2!important;
  letter-spacing:-.01em!important;
  text-transform:none!important;
  color:#FFFFFF!important;
  margin:0 0 10px!important;
  display:block!important;
  gap:0!important;
}
.el-post-side h3.el-side-cta-title::before,
.el-post-side .el-side-cta .el-side-cta-title::before{ content:none!important; }
/* --- BAND ALIGNMENT ON ARTICLES -------------------------------------------
   With the sidebar in place the article text starts at the article's content
   box, but the band still used the site-wide gutter rule (centred on 1280), so
   the H1 sat ~190px right of the body copy beneath it.
   The band breaks out with margin-inline: calc(50% - 50vw + sb/2); padding of
   exactly the inverse puts its content back on the article's own left edge, so
   the eyebrow, H1, standfirst and meta line up with the first paragraph.
   -------------------------------------------------------------------------- */
@media (min-width:1080px){
  body.single-post .entry-header{
    padding-left:calc(50vw - 50% - (var(--el-sb, 0px) / 2))!important;
    padding-right:calc(50vw - 50% - (var(--el-sb, 0px) / 2))!important;
  }
}
/* The band padding above is correct, but the band children were centred on a
   720px measure (margin-inline:auto), which put the H1 ~190px right of the body
   copy once the article gained a sidebar and became left-aligned. Keep the
   measure, drop the centring. */
@media (min-width:1080px){
  body.single-post .entry-header > *{
    margin-left:0!important;
    margin-right:0!important;
    max-width:720px!important;
  }
}
/* The remaining offset was align-items on the band, not margins: the band is a
   column flex container that centres its children, so resetting margin-inline
   moved only the back link (which sets its own align-self). Align the whole
   band to the start on article pages. */
@media (min-width:1080px){
  body.single-post .entry-header{
    align-items:flex-start!important;
    text-align:left!important;
  }
  body.single-post .entry-header > *{ align-self:flex-start!important; }
}
/* The band is display:block, so align-items did nothing, and each band element
   is centred by its own rule (margin-inline:auto, resolving to 188px) which is
   more specific than `.entry-header > *`. Target the elements themselves. */
@media (min-width:1080px){
  body.single-post .entry-header .el-band-eyebrow,
  body.single-post .entry-header .entry-title,
  body.single-post .entry-header .el-band-lead,
  body.single-post .entry-header .el-post-meta,
  body.single-post .entry-header .el-post-back{
    margin-left:0!important;
    margin-right:0!important;
  }
}
/* ==========================================================================
   MID-ARTICLE CTA (.el-inline-cta, injected by includes/articlecta.php)
   Sits in the text column, level with the sticky sidebar card, so it is
   deliberately the opposite treatment: a light tinted panel with a teal edge
   rather than a second navy block. Two navy cards side by side would read as a
   mistake.
   ========================================================================== */

.el-inline-cta{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  margin:44px 0!important;
  padding:26px 28px;
  background:#F4F8F8;
  border:1px solid #E2E8F0;
  border-left:3px solid #0D7377;
  border-radius:8px;
}
.el-inline-cta-text{ min-width:0; }
.el-inline-cta-eyebrow{
  font-family:'DM Sans',sans-serif!important; font-size:11px!important;
  font-weight:500!important; letter-spacing:.16em!important;
  text-transform:uppercase!important; color:#0D7377!important;
  margin:0 0 8px!important;
}
.el-inline-cta-title{
  font-family:'DM Serif Display',serif!important; font-weight:400!important;
  font-size:21px!important; line-height:1.22!important; letter-spacing:-.01em;
  color:#0A1628!important; margin:0 0 8px!important;
}
.el-inline-cta-desc{
  font-family:'DM Sans',sans-serif!important; font-size:15px!important;
  line-height:1.6!important; color:#1A2A3A!important; margin:0!important;
  max-width:52ch;
}
.el-inline-cta-btn{
  flex:none; display:inline-block; white-space:nowrap;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; line-height:1.2;
  padding:13px 22px; border-radius:6px;
  background:#0D7377; color:#fff!important; text-decoration:none;
  transition:background-color .18s ease, transform .18s ease;
}
.el-inline-cta-btn:hover{ background:#14A5AB; transform:translateY(-1px); }

/* The article grid places every content child in column 1; this is injected as
   a sibling of the paragraphs, so it inherits that placement automatically. */

@media (max-width:720px){
  .el-inline-cta{
    flex-direction:column; align-items:flex-start; gap:20px;
    padding:22px 20px; margin:34px 0!important;
  }
  .el-inline-cta-desc{ max-width:none; }
  .el-inline-cta-btn{ width:100%; text-align:center; }
}
/* ==========================================================================
   ELMENTA ADMIN (/admin)
   Standalone chrome - the admin pages do not load the site header or footer,
   so everything they need is here. Same tokens as the public site.
   ========================================================================== */

body.el-adm{
  margin:0; background:#F4F8F8; color:#1A2A3A;
  font-family:'DM Sans',sans-serif; font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body.el-adm *{ box-sizing:border-box; }
body.el-adm a{ color:#0D7377; }

/* --- sign in -------------------------------------------------------------- */
.el-adm-login{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 20px; background:#0A1628; }
.el-adm-login-card{
  width:100%; max-width:400px; background:#fff; border-radius:10px;
  padding:36px 34px; box-shadow:0 24px 60px rgba(10,22,40,.35);
}
.el-adm-login-eyebrow{
  margin:0 0 10px; font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:#0D7377;
}
.el-adm-login-title{
  margin:0 0 22px; font-family:'DM Serif Display',serif; font-weight:400;
  font-size:25px; line-height:1.2; color:#0A1628;
}
.el-adm-login-text{ margin:0 0 20px; color:#64748B; }
.el-adm-login-foot{ margin:18px 0 0; font-size:13.5px; }
.el-adm-login-foot a{ color:#64748B; text-decoration:none; }
.el-adm-login-foot a:hover{ color:#0D7377; }
.el-adm-remember{ display:flex; align-items:center; gap:8px; margin:4px 0 20px; font-size:14px; color:#64748B; }
.el-adm-error{
  margin:0 0 18px; padding:11px 14px; border-radius:6px;
  background:rgba(200,40,40,.07); border:1px solid rgba(200,40,40,.28);
  color:#96201F; font-size:14px;
}

/* --- form controls -------------------------------------------------------- */
.el-adm-label{
  display:block; margin:0 0 7px; font-size:12px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:#0A1628;
}
.el-adm-input{
  display:block; width:100%; margin:0 0 18px; padding:11px 13px;
  font-family:'DM Sans',sans-serif; font-size:16px; color:#0A1628;
  background:#fff; border:1px solid #DDE5EA; border-radius:6px;
}
.el-adm-input:focus{
  outline:none; border-color:#0D7377; box-shadow:0 0 0 3px rgba(13,115,119,.16);
}
.el-adm-help{ margin:-12px 0 18px; font-size:13px; color:#64748B; }
.el-adm-formrow{ max-width:260px; }

/* --- buttons -------------------------------------------------------------- */
.el-adm-btn{
  display:inline-block; padding:11px 20px; border:1px solid transparent;
  border-radius:6px; font-family:'DM Sans',sans-serif; font-size:14px;
  font-weight:500; line-height:1.2; cursor:pointer; text-decoration:none;
  transition:background-color .16s ease, border-color .16s ease;
}
.el-adm-btn-primary{ background:#0D7377; color:#fff!important; }
.el-adm-btn-primary:hover{ background:#14A5AB; }
.el-adm-btn-ghost{ background:#fff; color:#0A1628!important; border-color:#DDE5EA; }
.el-adm-btn-ghost:hover{ border-color:#0D7377; color:#0D7377!important; }
.el-adm-actions{ display:flex; gap:10px; align-items:center; margin:22px 0 0; }

/* --- shell ---------------------------------------------------------------- */
.el-adm-wrap{ display:grid; grid-template-columns:236px minmax(0,1fr); min-height:100vh; }
.el-adm-nav{
  background:#0A1628; padding:26px 18px; display:flex; flex-direction:column; gap:26px;
}
.el-adm-brand{
  font-family:'DM Serif Display',serif; font-size:21px; color:#fff!important;
  text-decoration:none; letter-spacing:-.01em;
}
.el-adm-menu{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; }
.el-adm-menu-item{
  padding:10px 12px; border-radius:6px; text-decoration:none;
  color:rgba(255,255,255,.72)!important; font-size:14.5px;
  transition:background-color .16s ease, color .16s ease;
}
.el-adm-menu-item:hover{ background:rgba(255,255,255,.06); color:#fff!important; }
.el-adm-menu-item.is-active{ background:#0D7377; color:#fff!important; font-weight:500; }
.el-adm-user{ border-top:1px solid rgba(255,255,255,.12); padding-top:16px; }
.el-adm-user-name{ display:block; color:#fff; font-size:14px; margin-bottom:4px; }
.el-adm-user-out{ font-size:13px; color:rgba(255,255,255,.6)!important; text-decoration:none; }
.el-adm-user-out:hover{ color:#14A5AB!important; }

.el-adm-main{ padding:34px 40px 60px; max-width:1100px; }

/* --- page furniture ------------------------------------------------------- */
.el-adm-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin:0 0 26px; }
.el-adm-h1{ margin:0; font-family:'DM Serif Display',serif; font-weight:400; font-size:30px; line-height:1.15; color:#0A1628; }
.el-adm-h2{ margin:0 0 16px; font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:#0D7377; }
.el-adm-lead{ margin:8px 0 0; color:#64748B; }
.el-adm-notice{ margin:0 0 22px; padding:12px 16px; border-radius:6px; font-size:14px; }
.el-adm-notice.is-ok{ background:rgba(13,115,119,.08); border:1px solid rgba(13,115,119,.28); color:#0A1628; }
.el-adm-notice.is-bad{ background:rgba(200,40,40,.07); border:1px solid rgba(200,40,40,.28); color:#96201F; }

.el-adm-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin:0 0 30px; }
.el-adm-stat{
  display:block; background:#fff; border:1px solid #E2E8F0; border-radius:8px;
  padding:20px; text-decoration:none; transition:border-color .16s ease;
}
a.el-adm-stat:hover{ border-color:#0D7377; }
.el-adm-stat-v{ display:block; font-family:'DM Serif Display',serif; font-size:30px; line-height:1; color:#0A1628; }
.el-adm-stat-l{ display:block; margin-top:7px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#64748B; }

.el-adm-panel{ background:#fff; border:1px solid #E2E8F0; border-radius:8px; padding:24px; margin:0 0 22px; }
.el-adm-empty{ background:#fff; border:1px dashed #CBD8DF; border-radius:8px; padding:30px; color:#64748B; }
.el-adm-empty p{ margin:0 0 10px; }
.el-adm-empty p:last-child{ margin:0; }

/* --- tables --------------------------------------------------------------- */
.el-adm-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid #E2E8F0; border-radius:8px; overflow:hidden; }
.el-adm-panel .el-adm-table{ border:0; }
.el-adm-table th{
  text-align:left; padding:12px 16px; font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:#64748B;
  background:#F7FAFB; border-bottom:1px solid #E2E8F0;
}
.el-adm-table td{ padding:13px 16px; border-bottom:1px solid #EEF3F5; vertical-align:top; }
.el-adm-table tr:last-child td{ border-bottom:0; }
.el-adm-table a{ text-decoration:none; color:#0A1628; font-weight:500; }
.el-adm-table a:hover{ color:#0D7377; }
.el-adm-dim{ color:#64748B; font-size:14px; }
.el-adm-sub{ display:block; font-size:13px; color:#64748B; font-weight:400; margin-top:2px; }
.el-adm-rowacts{ text-align:right; white-space:nowrap; font-size:13.5px; }
.el-adm-rowacts a{ font-weight:400; color:#64748B; }
.el-adm-danger:hover{ color:#96201F!important; }
.el-adm-table tr.is-unread td:first-child{ box-shadow:inset 3px 0 0 #0D7377; }
.el-adm-kv th{ width:210px; background:transparent; text-transform:none; letter-spacing:0; font-size:13px; color:#0A1628; font-weight:500; border-bottom:1px solid #EEF3F5; }

.el-adm-pill{
  display:inline-block; padding:3px 9px; border-radius:4px;
  font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  background:#EEF3F5; color:#64748B;
}
.el-adm-pill.is-publish,
.el-adm-pill.is-read,
.el-adm-pill.is-paid{ background:rgba(13,115,119,.10); color:#0D7377; }
.el-adm-pill.is-unread,
.el-adm-pill.is-draft{ background:rgba(217,142,0,.12); color:#8A6100; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width:860px){
  .el-adm-wrap{ grid-template-columns:1fr; }
  .el-adm-nav{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:14px; padding:16px 20px; }
  .el-adm-menu{ flex-direction:row; flex-wrap:wrap; flex:1 1 100%; }
  .el-adm-user{ border-top:0; padding-top:0; margin-left:auto; }
  .el-adm-main{ padding:24px 20px 48px; }
  .el-adm-head{ flex-direction:column; }
  .el-adm-table{ display:block; overflow-x:auto; }
}
/* ==========================================================================
   SERVICES GRID - DYNAMIC (.el-sv-grid, from includes/services-render.php)
   The six cards on /services were hand-built Elementor containers inside
   .elementor-element-elspgr. They now come from the elmenta_service post type
   via [elmenta_services]. These rules reproduce the original grid treatment on
   the new markup.
   NOTE: an earlier pass generated these by flattening the original rules, which
   lifted the 1-column mobile rule out of its media query and collapsed the grid
   at every width. The breakpoints below are deliberate - keep them nested.
   ========================================================================== */

.el-sv-grid{
  width:100%; max-width:none; padding:0; gap:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:#FFFFFF; border:1px solid #E2E8F0; border-radius:8px; overflow:hidden;
}
.el-sv-grid > .el-sv-card{
  width:auto; max-width:none; min-width:0; margin:0;
  padding:30px 28px 32px; gap:0; position:relative;
  display:flex; flex-direction:column;
  border-right:1px solid #E2E8F0; border-bottom:1px solid #E2E8F0;
  transition:box-shadow .2s ease;
}
.el-sv-grid > .el-sv-card:nth-child(3n){ border-right:0; }
.el-sv-grid > .el-sv-card:nth-child(n+4){ border-bottom:0; }
.el-sv-grid > .el-sv-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:#0D7377; transform:scaleX(0); transform-origin:left;
  transition:transform .24s ease; pointer-events:none; z-index:1;
}
.el-sv-grid > .el-sv-card:hover::before,
.el-sv-grid > .el-sv-card:focus-within::before{ transform:scaleX(1); }
.el-sv-grid > .el-sv-card:hover{ box-shadow:0 10px 30px rgba(10,22,40,.07); }

/* title doubles as the card link */
.el-sv-grid .el-sp-cname{
  margin:0; font-family:'DM Serif Display',serif; font-weight:400;
  font-size:20px; line-height:1.26; color:#0A1628;
}
.el-sv-grid .el-sp-cname a{
  color:#0A1628; text-decoration:none; display:inline-flex;
  align-items:baseline; gap:9px; transition:color .18s ease;
}
.el-sv-grid .el-sp-cname a::after{
  content:"\2192"; font-family:'DM Sans',sans-serif; font-size:16px;
  color:#0D7377; transition:transform .18s ease;
}
.el-sv-grid > .el-sv-card:hover .el-sp-cname a{ color:#0D7377; }
.el-sv-grid > .el-sv-card:hover .el-sp-cname a::after{ transform:translateX(4px); }
.el-sv-grid .el-sp-cname a:focus-visible{ outline:2px solid #0D7377; outline-offset:3px; border-radius:2px; }

.el-sv-csum{ font-family:'DM Sans',sans-serif; font-size:14.5px; line-height:1.6; color:#64748B; margin:12px 0 0; }

/* actions pinned to the card foot so button rows line up across a row */
.el-sv-cacts{
  display:flex; gap:10px; flex-wrap:wrap; width:100%;
  margin-top:auto; padding:22px 0 0;
}
.el-sv-btn{
  font-family:'DM Sans',sans-serif; font-size:13.5px; font-weight:500; line-height:1.2;
  padding:11px 18px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.el-sv-btn.is-primary{ background:#0D7377; color:#fff!important; border:1px solid #0D7377; }
.el-sv-btn.is-primary:hover{ background:#14A5AB; border-color:#14A5AB; }
.el-sv-btn.is-ghost{ background:#fff; color:#0A1628!important; border:1px solid #DDE5EA; }
.el-sv-btn.is-ghost:hover{ border-color:#0D7377; color:#0D7377!important; }

@media (max-width:1024px){
  .el-sv-grid{ grid-template-columns:repeat(2,1fr); }
  .el-sv-grid > .el-sv-card:nth-child(3n){ border-right:1px solid #E2E8F0; }
  .el-sv-grid > .el-sv-card:nth-child(2n){ border-right:0; }
  .el-sv-grid > .el-sv-card:nth-child(n+4){ border-bottom:1px solid #E2E8F0; }
  .el-sv-grid > .el-sv-card:nth-child(n+5){ border-bottom:0; }
}
@media (max-width:767px){
  .el-sv-grid{ grid-template-columns:1fr; }
  .el-sv-grid > .el-sv-card,
  .el-sv-grid > .el-sv-card:nth-child(3n),
  .el-sv-grid > .el-sv-card:nth-child(2n){
    border-right:0; border-bottom:1px solid #E2E8F0; padding:26px 22px 28px;
  }
  .el-sv-grid > .el-sv-card:last-child{ border-bottom:0; }
  .el-sv-cacts{ flex-direction:column; align-items:stretch; }
  .el-sv-btn{ width:100%; }
}

/* ==========================================================================
   STANDARDS RAIL (elacr01) - the marquee between the hero and the services
   ribbon. It sits on the hero's navy so it reads as the closing band of the
   hero's credibility zone rather than a separate stripe, and it fills the dead
   white gap that used to sit there.
   Marks are typographic on purpose: the only badge images in the library are
   PointLab demo placeholders, and showing invented accreditation logos on an
   accreditation consultancy would be worse than showing none.
   ========================================================================== */

.elementor-element-elacr01{
  border-top:1px solid rgba(20,165,171,.16);
  border-bottom:1px solid rgba(20,165,171,.16);
  overflow:hidden;
}
.elementor-element-elacrwr{ max-width:1280px; width:100%; margin-inline:auto; }

.el-mq{
  display:flex; align-items:center; gap:34px;
  padding:18px 0;
}
.el-mq-label{
  flex:none; margin:0;
  font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#14A5AB;
  white-space:nowrap;
}

/* The viewport clips the track and fades both edges so items enter and leave
   rather than popping at a hard border. */
.el-mq-viewport{
  position:relative; flex:1 1 auto; min-width:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
}
.el-mq-track{
  display:flex; width:max-content;
  animation:el-mq-scroll 46s linear infinite;
}
.el-mq:hover .el-mq-track{ animation-play-state:paused; }
.el-mq-set{ display:flex; align-items:center; }

.el-mq-item{
  display:inline-flex; flex-direction:column; gap:3px;
  padding:0 30px; position:relative; white-space:nowrap;
}
.el-mq-item::after{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:1px; height:26px; background:rgba(255,255,255,.13);
}
.el-mq-code{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:17px; line-height:1.2; letter-spacing:-.01em; color:#FFFFFF;
}
.el-mq-name{
  font-family:'DM Sans',sans-serif; font-size:11.5px; line-height:1.3;
  color:rgba(255,255,255,.52);
}

@keyframes el-mq-scroll{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}

/* Motion is 0.15 in this direction: anyone who has asked for less gets a
   static, readable rail instead. */
@media (prefers-reduced-motion:reduce){
  .el-mq-track{ animation:none; transform:none; }
  .el-mq-viewport{ overflow-x:auto; }
}

@media (max-width:860px){
  .el-mq{ flex-direction:column; align-items:flex-start; gap:12px; padding:16px 0; }
  .el-mq-viewport{ width:100%; }
  .el-mq-item{ padding:0 22px; }
  .el-mq-code{ font-size:15.5px; }
}
/* ==========================================================================
   STANDARDS RAIL - LIGHT
   Repainted onto white. The rail now separates the navy hero from the tinted
   services ribbon instead of extending the hero, so every colour flips: marks
   go navy, supporting text muted, rules to the standard hairline.
   Sizing is also tightened so the band stays slim at every width.
   ========================================================================== */

.elementor-element-elacr01{
  background-color:#FFFFFF!important;
  border-top:1px solid #E2E8F0;
  border-bottom:1px solid #E2E8F0;
}
.el-mq-label{ color:#0D7377; }
.el-mq-code{ color:#0A1628; }
.el-mq-name{ color:#64748B; }
.el-mq-item::after{ background:#E2E8F0; }

/* Fade the viewport edges to the new ground. */
.el-mq-viewport{
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}

/* --- fit across the range ------------------------------------------------- */
/* Wide: comfortable. */
.el-mq{ padding:16px 0; gap:30px; }
.el-mq-item{ padding:0 26px; }
.el-mq-code{ font-size:16px; }
.el-mq-name{ font-size:11.5px; }

/* Laptops: trim the gutter between label and rail. */
@media (max-width:1240px){
  .el-mq{ gap:22px; }
  .el-mq-item{ padding:0 22px; }
}

/* Tablets: the label still fits beside the rail, just smaller. */
@media (max-width:1024px){
  .el-mq{ padding:14px 0; gap:18px; }
  .el-mq-code{ font-size:15px; }
  .el-mq-item{ padding:0 20px; }
  .el-mq-viewport{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  }
}

/* Phones: stack the label above the rail and keep the band slim. */
@media (max-width:860px){
  .el-mq{ flex-direction:column; align-items:flex-start; gap:9px; padding:14px 0; }
  .el-mq-viewport{ width:100%; }
  .el-mq-item{ padding:0 18px; gap:2px; }
  .el-mq-code{ font-size:14.5px; }
  .el-mq-name{ font-size:11px; }
  .el-mq-label{ font-size:10.5px; }
}

/* Very narrow: drop the supporting line so the codes stay readable. */
@media (max-width:400px){
  .el-mq-item{ padding:0 15px; }
  .el-mq-name{ display:none; }
  .el-mq-item::after{ height:18px; }
  .el-mq{ padding:12px 0; }
}
/* ==========================================================================
   HERO COMPOSITION HELD DOWN THE RANGE
   The hero was built to reflow twice: at 1024 the split stacked and the three
   capability cards left the map to sit in a row beneath it, and at 767 the
   cards were hidden entirely while the map faded to a backdrop behind the
   stats band. Both were deliberate (the phone treatment saves ~275px of hero
   height), but the brief is that the hero should read like the desktop
   reference at every width, so the composition is held instead:
     - the split now survives to 820px rather than 1024px
     - below that the panel still shows the map with the three cards overlaid,
       rather than dropping them
   Card positions are the original top-left / mid-left / lower-right diagonal.
   ========================================================================== */

/* --- keep the two columns side by side down to 820px --------------------- */
@media (min-width:821px) and (max-width:1024px){
  .elementor-element-elheroin{
    flex-direction:row!important; align-items:center!important; gap:30px!important;
  }
  .elementor-element-elherolt{
    width:calc(55% - 15px)!important; max-width:calc(55% - 15px)!important; flex:0 0 auto!important;
  }
  .elementor-element-elherort{
    width:calc(45% - 15px)!important; max-width:calc(45% - 15px)!important; flex:0 0 auto!important;
    display:block!important; position:relative!important;
  }
  .el-map{ max-height:min(46vh,380px)!important; }
  .elementor-element-elhcarda,
  .elementor-element-elhcardb,
  .elementor-element-elhcardc{
    position:absolute!important; z-index:2;
    width:min(168px,54%)!important; padding:10px 12px!important;
  }
  .elementor-element-elhcarda{ top:0!important; left:0!important; right:auto!important; bottom:auto!important; }
  .elementor-element-elhcardb{ top:33%!important; left:-1%!important; right:auto!important; bottom:auto!important; }
  .elementor-element-elhcardc{ bottom:0!important; top:auto!important; right:0!important; left:auto!important; }
}

/* --- stacked, but the panel keeps the reference composition --------------
   Lower bound is 768px on purpose. Below it the 2026-08-18 phone treatment
   takes over again (cards hidden, map faded to a backdrop behind the stats
   band) - reinstated on request 2026-08-19 because it reads better on a phone
   and it gives back the ~275px of hero height that treatment was written to
   save. Do not widen this back to `max-width:820px`. */
@media (min-width:768px) and (max-width:820px){
  /* The cards are positioned against the panel, not the map, so the panel is
     capped to roughly the map's own width. Left at full width the map centres
     inside a much wider column and the cards float in empty space beside it
     instead of sitting on the continent. */
  .elementor-element-elherort{
    display:block!important; position:relative!important;
    left:auto!important; right:auto!important; bottom:auto!important; top:auto!important;
    width:100%!important; max-width:430px!important;
    margin-inline:auto!important;
    opacity:1!important; pointer-events:auto!important; z-index:1!important;
  }
  /* Block, not flex. The map is a bare <svg> with a viewBox and no width
     attribute, so as a flex item it collapses to the SVG intrinsic 300px and
     the panel ends up far wider than the drawing. As a block the wrapper
     fills the panel and the map scales with it, exactly as on desktop. */
  .elementor-element-elheromap{ display:block!important; width:100%!important; }
  .el-map-wrap{ width:100%!important; }
  /* No tight height cap here. The three cards stack to roughly 400px of
     diagonal, so a 340px map left the last one hanging off the panel and
     colliding with the stats band. The map is allowed its natural height
     inside the capped panel width instead, and the panel height follows it. */
  .el-map{
    /* The floor matters on short landscape viewports. At 56vh alone a
       740x380 phone gave a 213px map, and the second card - which needs
       128px above it - spilled 51px out of the panel into the stats band.
       300px is the smallest height the three-card diagonal fits in. */
    height:auto!important; max-height:max(300px,min(56vh,460px))!important;
    width:100%!important; max-width:100%!important; opacity:1!important;
  }
  .elementor-element-elhcarda,
  .elementor-element-elhcardb,
  .elementor-element-elhcardc{
    display:flex!important; position:absolute!important; z-index:2;
    width:min(158px,46%)!important; padding:9px 11px!important; inset:auto;
  }
  /* The third card is anchored to the bottom edge rather than given a
     percentage top. It is the tallest of the three, so a percentage always
     pushed it past the panel on short viewports. */
  .elementor-element-elhcarda{ top:0!important; bottom:auto!important; left:0!important; right:auto!important; }
  /* max() floor: the first card is ~128px tall, so a bare percentage put the
     second one on top of it once the panel got short. The floor keeps an 8px
     gap no matter how little height the map ends up with. */
  .elementor-element-elhcardb{ top:max(34%,136px)!important; bottom:auto!important; left:0!important; right:auto!important; }
  .elementor-element-elhcardc{ bottom:0!important; top:auto!important; right:0!important; left:auto!important; }
  /* the band goes back to sitting under the panel, not over it */
  .elementor-element-elherost{
    position:relative!important; z-index:1;
    background:rgba(10,22,40,.26)!important;
  }
}

/* Card text has to stay legible at the smaller sizes above. */
@media (max-width:1024px){
  .elementor-element-elhcarda .el-hcard-t,
  .elementor-element-elhcardb .el-hcard-t,
  .elementor-element-elhcardc .el-hcard-t{ font-size:10.5px; letter-spacing:.09em; }
  .elementor-element-elhcarda .el-hcard-d,
  .elementor-element-elhcardb .el-hcard-d,
  .elementor-element-elhcardc .el-hcard-d{ font-size:11.5px; line-height:1.35; }
}

/* ==========================================================================
   MOBILE MENU - full redesign (2026-08-19)

   Two separate problems.

   1. A REGRESSION FROM THE 14IN NAV FIX. The rule
        #masthead .main-header-menu{ flex-wrap:nowrap!important }
      also matches the MOBILE ul, and stacking that menu is precisely what
      Astra does with
        .ast-header-break-point .ast-mobile-header-wrap .ast-flex.stack-on-mobile
        { flex-wrap:wrap }
      - the items are width:100% and rely on wrapping to fall into a column.
      With nowrap forced they sat on ONE 938px row: five of the eight links
      were off-screen and unreachable at 390px. The desktop rule is left alone
      (the 14in fix depends on it) and beaten on specificity here instead:
      "#masthead .ast-mobile-header-wrap .main-header-menu" is (1,2,0) against
      its (1,1,0).

   2. The open menu was Astra's inline dropdown with colours painted onto it -
      a stub list hanging off the bar. It is now a full-height sheet.

   Open-state hook is body.ast-main-header-nav-open, which Astra adds and
   removes on toggle. No :has() needed, and there are no inline styles to
   fight: this build toggles by class alone.
   ========================================================================== */

/* --- 1. the menu must stack ---------------------------------------------- */
#masthead .ast-mobile-header-wrap .main-header-menu{
  flex-direction:column!important;
  flex-wrap:wrap!important;
  align-items:stretch!important;
}
#masthead .ast-mobile-header-wrap .main-header-menu > .menu-item{
  width:100%!important; flex:0 0 auto!important;
}

/* --- 2. the sheet --------------------------------------------------------- */
@media (max-width:1240px){
  /* the page must not scroll behind the open sheet */
  body.ast-main-header-nav-open{ overflow:hidden!important; }

  #masthead .ast-mobile-header-content{
    position:fixed!important;
    top:72px!important; left:0!important; right:0!important; bottom:0!important;
    width:100%!important; max-width:none!important; margin:0!important;
    padding:12px 0 calc(30px + env(safe-area-inset-bottom,0px))!important;
    background-color:#0A1628!important;
    border-top:1px solid rgba(20,165,171,.20);
    overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    z-index:49;
    isolation:isolate;
  }
  /* Same graph-paper device as the bar and the hero, at a whisper. Negative-z
     child inside an isolated parent: paints above the ground, below the links.
     Documented trick - do not "fix" it to a positive z-index. */
  #masthead .ast-mobile-header-content::before{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background-image:
      linear-gradient(to right, rgba(20,165,171,.15) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(20,165,171,.15) 1px, transparent 1px);
    background-size:26px 26px;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), transparent 60%);
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), transparent 60%);
  }
}

/* --- 3. rows -------------------------------------------------------------- */
@media (max-width:1240px){
  #masthead .ast-mobile-header-wrap .main-header-menu{
    background-color:transparent!important;
    border-top:0!important;
    padding:0!important;
  }
  #masthead .ast-mobile-header-wrap .main-header-menu .menu-item > a,
  #masthead .ast-mobile-header-wrap .main-header-menu .menu-link{
    position:relative;
    display:flex!important; align-items:center;
    min-height:56px!important;
    padding:14px 46px 14px 26px!important;
    font-family:"DM Sans",sans-serif;
    font-size:16.5px!important; font-weight:500; letter-spacing:-.005em;
    line-height:1.35!important;
    color:rgba(255,255,255,.82)!important;
    background-color:transparent!important;
    border-bottom:1px solid rgba(255,255,255,.07)!important;
    transition:color .16s ease, background-color .16s ease, box-shadow .16s ease;
  }
  /* The desktop rule turns this ::after into a growing underline and the older
     mobile rule then hides it. Reclaimed here as a chevron - every property the
     underline sets has to be unset explicitly. */
  #masthead .ast-mobile-header-wrap .main-header-menu > .menu-item > a::after{
    content:""; display:block!important;
    position:absolute; right:26px; left:auto!important;
    top:50%; bottom:auto!important;
    width:7px!important; height:7px!important; margin-top:-4px;
    background:none!important; background-color:transparent!important;
    border-right:1.5px solid rgba(20,165,171,.55);
    border-bottom:1.5px solid rgba(20,165,171,.55);
    transform:rotate(-45deg)!important;
    transition:border-color .16s ease, transform .16s ease;
  }
  #masthead .ast-mobile-header-wrap .main-header-menu .menu-item > a:hover,
  #masthead .ast-mobile-header-wrap .main-header-menu .menu-item > a:active{
    color:#fff!important;
    background-color:rgba(20,165,171,.10)!important;
  }
  #masthead .ast-mobile-header-wrap .main-header-menu .menu-item > a:hover::after{
    border-color:#14A5AB;
  }
  /* current page: teal edge, full white, faint ground */
  #masthead .ast-mobile-header-wrap .main-header-menu .menu-item.current-menu-item > a{
    color:#fff!important;
    background-color:rgba(20,165,171,.12)!important;
    box-shadow:inset 3px 0 0 #14A5AB;
  }
  #masthead .ast-mobile-header-wrap .main-header-menu .menu-item.current-menu-item > a::after{
    border-color:#14A5AB;
  }
  #masthead .ast-mobile-header-wrap .main-header-menu .menu-item:last-child > a{
    border-bottom:1px solid rgba(255,255,255,.07)!important;
  }
  /* sub-menus sit one step in on a deeper ground */
  #masthead .ast-mobile-header-wrap .main-header-menu .sub-menu .menu-item > a{
    padding-left:42px!important; font-size:15px!important; min-height:48px;
    color:rgba(255,255,255,.7)!important;
  }
}

/* --- 4. no entrance animation, deliberately ---------------------------
   An earlier draft faded the panel in and staggered the eight rows. It was
   removed. Both used `animation-fill-mode:both`, which parks an element on the
   animation's FIRST frame whenever the animation has not run - and the first
   frame was `opacity:0`. Anything that stops those animations starting leaves
   the whole menu invisible with no way to recover it. The panel was in fact
   caught mid-flight during testing, sitting permanently 6px high with
   animationPlayState still 'running'.

   That is a bad trade for a flourish on a design whose motion dial is 0.15.
   The hover and current-state transitions stay: a transition that never runs
   degrades to an instant change, which is safe. An animation that never runs
   does not. */

/* --- 5. CTA --------------------------------------------------------------- */
@media (max-width:1240px){
  #masthead .ast-mobile-header-content .ast-builder-button-wrap{
    margin:24px 26px 0!important;
  }
  #masthead .ast-mobile-header-content .ast-custom-button{
    display:flex!important; align-items:center; justify-content:center;
    width:100%!important; min-height:52px;
    padding:14px 20px!important;
    font-family:"DM Sans",sans-serif;
    font-size:15.5px!important; font-weight:500;
    border-radius:6px!important;
    background-color:#0D7377!important; color:#fff!important;
    box-shadow:0 6px 18px rgba(13,115,119,.28);
  }
  #masthead .ast-mobile-header-content .ast-custom-button:hover{
    background-color:#14A5AB!important;
  }
}

/* --- 6. panel foot (markup injected by includes/header.php) --------------- */
.el-mnav-foot{
  margin:26px 26px 0; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.09);
}
.el-mnav-foot .el-mnav-lab{
  display:block;
  font-family:"DM Sans",sans-serif;
  font-size:11px; font-weight:500; line-height:1;
  letter-spacing:.14em; text-transform:uppercase;
  color:#14A5AB;
}
.el-mnav-foot a{
  display:inline-block; margin-top:9px;
  font-family:"DM Sans",sans-serif;
  font-size:15.5px; font-weight:500; line-height:1.4;
  color:rgba(255,255,255,.88); text-decoration:none;
  border-bottom:1px solid rgba(20,165,171,.4); padding-bottom:2px;
}
.el-mnav-foot a:hover{ color:#fff; border-bottom-color:#14A5AB; }
.el-mnav-std{
  margin:16px 0 0;
  font-family:"DM Sans",sans-serif;
  font-size:12.5px; font-weight:400; line-height:1.5;
  color:rgba(255,255,255,.5);
}

/* --- 7. wide viewports still use this panel ------------------------------
   The break point is 1240px, so this sheet is what a 1165px laptop gets too.
   Left full-bleed the CTA stretched to 1073px and the rows ran the whole
   width, which reads as a broken page rather than a menu. The inner column is
   capped and centred instead; the navy ground stays edge to edge. */
@media (min-width:700px) and (max-width:1240px){
  #masthead .ast-mobile-header-wrap .main-header-menu{
    max-width:560px; margin-inline:auto!important;
  }
  #masthead .ast-mobile-header-content .ast-builder-button-wrap{
    max-width:560px; margin:24px auto 0!important;
  }
  #masthead .el-mnav-foot{
    max-width:560px; margin:26px auto 0;
  }
}

/* ==========================================================================
   MENTORSHIP FOCUS AREAS (elmn3) - cards
   The four areas were bare text on white, separated only by a short teal rule
   and a lot of air. They are now cards, built the way the live site builds
   them: white surface, hairline border, an icon chip beside the copy.
   ========================================================================== */

.elementor-element-elmn3 .el-area-grid{
  list-style:none; margin:40px 0 0!important; padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.elementor-element-elmn3 .el-area-grid li{
  display:flex; align-items:flex-start; gap:16px;
  margin:0!important; padding:24px!important;
  background:#FFFFFF;
  border:1px solid rgba(13,115,119,.15);
  border-radius:8px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.elementor-element-elmn3 .el-area-grid li:hover{
  border-color:#0D7377;
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(10,22,40,.07);
}

/* the old rule is replaced by the icon chip */
.elementor-element-elmn3 .el-area-rule{ display:none!important; }

.elementor-element-elmn3 .el-area-ico{
  display:grid; place-items:center; flex:none;
  width:44px; height:44px; border-radius:8px;
  background:rgba(13,115,119,.08); color:#0D7377;
  transition:background-color .18s ease;
}
.elementor-element-elmn3 .el-area-grid li:hover .el-area-ico{
  background:rgba(13,115,119,.14);
}
.elementor-element-elmn3 .el-area-ico svg{ width:21px; height:21px; display:block; }

.elementor-element-elmn3 .el-area-body{ min-width:0; }

.elementor-element-elmn3 .el-area-name{
  font-family:'DM Serif Display',serif!important; font-weight:400!important;
  font-size:19px!important; line-height:1.28!important; letter-spacing:-.005em!important;
  color:#0A1628!important; margin:0 0 8px!important;
}
.elementor-element-elmn3 .el-area-desc{
  font-family:'DM Sans',sans-serif!important;
  font-size:14.5px!important; line-height:1.62!important;
  color:#5A7080!important; margin:0!important; max-width:none!important;
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:900px){
  .elementor-element-elmn3 .el-area-grid{ grid-template-columns:1fr; gap:16px; }
}
@media (max-width:767px){
  .elementor-element-elmn3 .el-area-grid{ margin-top:30px!important; }
  .elementor-element-elmn3 .el-area-grid li{ padding:20px!important; gap:14px; }
  .elementor-element-elmn3 .el-area-ico{ width:40px; height:40px; }
  .elementor-element-elmn3 .el-area-name{ font-size:18px!important; }
}

/* ==========================================================================
   FACTS RHYTHM
   Pushing the four facts to the foot of the column made both columns end
   level, but it opened a 236px hole between the lead and the first card. The
   space goes into the cards instead: they follow straight on from the lead and
   carry enough padding and separation to hold the column on their own.
   ========================================================================== */
.elementor-element-elmn4l .elementor-widget-html:last-child{ margin-top:0; }
.el-facts{ margin-top:26px!important; gap:22px!important; }
.el-facts li{
  padding:26px 22px!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  transition:background-color .18s ease, border-color .18s ease;
}
.el-facts li:hover{
  background:rgba(255,255,255,.09)!important;
  border-color:rgba(20,165,171,.4)!important;
}
@media (max-width:1024px){
  .el-facts{ gap:14px!important; }
  .el-facts li{ padding:18px!important; }
}

/* The first card kept an older padding-top override from when these rows were
   a hairline list, leaving it 10px shorter than the other three. */
.el-facts li:first-child{ padding-top:26px!important; }
@media (max-width:1024px){ .el-facts li:first-child{ padding-top:18px!important; } }