/* MyEstateAngel - motion & interaction system.
   Applied through Elementor "CSS Classes" fields, so every effect stays visible and
   removable from the editor. All motion is gated behind prefers-reduced-motion.
   HARD RULE: no base state in this file may hide content. Anything that starts invisible
   must supply that invisibility from inside a CSS animation with fill mode, so a browser
   that never runs the animation shows the element instead of hiding it forever. */

@keyframes mea-rise  { from { transform:translateY(22px) } to { transform:none } }
@keyframes mea-fade  { from { opacity:0 } to { opacity:1 } }
@keyframes mea-scene { from { transform:translateY(28px) scale(.98) } to { transform:none } }
@keyframes mea-pop   { 0% { opacity:0; transform:scale(.4) rotate(-8deg) } 60% { opacity:1; transform:scale(1.12) rotate(2deg) } 100% { opacity:1; transform:scale(1) rotate(0) } }
@keyframes mea-float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-10px) } }
@keyframes mea-float2{ 0%,100% { transform:translateY(0) rotate(-3deg) } 50% { transform:translateY(-14px) rotate(1deg) } }
@keyframes mea-draw  { from { clip-path:inset(0 100% 0 0) } to { clip-path:inset(0 0 0 0) } }
@keyframes mea-bob   { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-9px) } }

/* page-load rise */
.mea-load { animation:mea-rise .55s cubic-bezier(.22,.61,.36,1) both }
.mea-d1 { animation-delay:.05s } .mea-d2 { animation-delay:.15s } .mea-d3 { animation-delay:.25s }
.mea-d4 { animation-delay:.35s } .mea-d5 { animation-delay:.45s }

/* hero scene + orbiting satellites */
/* hero scene paints immediately - only its transform animates */
.mea-scene { animation:mea-scene .9s cubic-bezier(.22,.61,.36,1) both }
/* Hero sequence is pure CSS now. mea-pop carries opacity:0 as its own first frame, so an
   element can only be invisible while the animation is actually running. */
.mea-sat-cursor { animation:mea-pop .6s cubic-bezier(.34,1.56,.64,1) .70s both,  mea-float  6s   ease-in-out 1.30s infinite }
.mea-sat-check  { animation:mea-pop .6s cubic-bezier(.34,1.56,.64,1) 1.05s both, mea-float2 7.5s ease-in-out 1.65s infinite }
.mea-sat-pen    { animation:mea-pop .6s cubic-bezier(.34,1.56,.64,1) 1.40s both, mea-float2 7.5s ease-in-out 2.00s infinite }
.mea-sat-sig    { animation:mea-pop .6s cubic-bezier(.34,1.56,.64,1) 1.75s both, mea-float  6s   ease-in-out 2.35s infinite }
.mea-orbit  { animation:mea-float 6s ease-in-out infinite }
.mea-orbit2 { animation:mea-float2 7.5s ease-in-out infinite }
.mea-sig img, img.mea-sig { animation:mea-draw 1.1s ease-out 2.1s both }
.mea-bob  { animation:mea-bob 3.4s ease-in-out infinite }
.mea-bob2 { animation:mea-bob 4.3s ease-in-out infinite }

/* Scroll reveal REMOVED 2026-07-28. It hid every section behind a class applied by
   JavaScript, so any failure of the motion script - blocked request, extension, runtime
   error - left whole sections permanently blank. Reproduced and confirmed as the cause of
   the reports of missing boxes and text. The .mea-reveal classes stay on the elements in
   Elementor and now do nothing. Never reintroduce an opacity:0 default here. */

/* hover states */
.mea-plan { transition:transform .22s ease, box-shadow .22s ease }
.mea-plan:hover { transform:translateY(-4px); box-shadow:0 30px 60px -34px rgba(18,47,75,.4) }
.mea-doc { border-radius:10px; transition:background .18s ease }
.mea-doc:hover { background:#F5FAF9 }
/* Elementor puts _css_classes on the WIDGET WRAPPER (.elementor-widget-button), which is a
   full-width block element - not on the <a>. Hover background and shadow set here painted a
   bar stretching the whole column width past the button. Every visual state has to sit on the
   anchor itself. */
.mea-cta .elementor-button  { transition:transform .18s ease, box-shadow .18s ease, background .18s ease }
.mea-cta .elementor-button:hover  { transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(24,154,148,.6) }
.mea-cta .elementor-button:active { transform:translateY(0) }
.mea-cta2 .elementor-button { transition:background .18s ease, border-color .18s ease }
.mea-cta2 .elementor-button:hover { border-color:#189A94 }

/* animated nav underline */
.mea-nav .elementor-item { position:relative }
.mea-nav .elementor-item:after { content:""; position:absolute; left:0; right:100%; bottom:-2px;
  height:2px; background:#189A94; transition:right .25s ease }
.mea-nav .elementor-item:hover:after, .mea-nav .elementor-item-active:after { right:0 }

/* focus + selection */
::selection { background:#7BD63F; color:#122F4B }
a:focus-visible, button:focus-visible, summary:focus-visible,
.elementor-button:focus-visible, .elementor-accordion-item summary:focus-visible {
  outline:3px solid #7BD63F; outline-offset:3px; border-radius:4px }

/* FAQ toggle mark */
.mea-faqmark { transition:transform .25s ease }
details[open] .mea-faqmark, .e-n-accordion-item[open] .mea-faqmark { transform:rotate(45deg) }

/* sticky header: second, hidden header that slides in after scrolling */
.mea-header-sticky { position:fixed; inset-block-start:0; inset-inline:0; z-index:999;
  transform:translateY(-100%); transition:transform .28s cubic-bezier(.22,.61,.36,1);
  will-change:transform }
body.mea-stuck .mea-header-sticky { transform:translateY(0) }
@media (max-width:1024px) { .mea-header-sticky { display:none } }

/* questionnaire loop - 12s ambient sequence over the dashboard mockup */
.mea-hq { position:relative }
.mea-hq .hqx { position:absolute; opacity:0; pointer-events:none }
.mea-hq .v-cur     { animation:hqCur 12s ease-in-out infinite }
.mea-hq .v-input   { animation:hqInput 12s ease-in-out infinite }
.mea-hq .v-drop    { animation:hqDrop 12s ease-in-out infinite }
.mea-hq .v-empty   { animation:hqEmpty 12s ease-in-out infinite }
.mea-hq .v-checked { animation:hqChecked 12s ease-in-out infinite }
.mea-hq .v-finger  { animation:hqFinger 12s ease-in-out infinite }
.mea-hq .v-face    { animation:hqFace 12s ease-in-out infinite }
.mea-hq .v-load    { animation:hqLoad 12s ease-in-out infinite }
.mea-hq .v-thumb   { animation:hqThumb 12s ease-in-out infinite }
.mea-hq .v-bubble  { animation:hqBubble 12s ease-in-out infinite }
@keyframes hqCur     { 0%,1%{opacity:0} 5%{opacity:1;transform:scale(1)} 10%{opacity:1;transform:scale(.78)} 13%{transform:scale(1)} 30%{opacity:1} 35%,100%{opacity:0} }
@keyframes hqInput   { 0%,10%{opacity:0} 14%,26%{opacity:1} 31%,100%{opacity:0} }
@keyframes hqDrop    { 0%,20%{opacity:0} 24%,34%{opacity:1} 39%,100%{opacity:0} }
@keyframes hqEmpty   { 0%,30%{opacity:0} 34%,40%{opacity:1} 44%,100%{opacity:0} }
@keyframes hqChecked { 0%,42%{opacity:0} 46%,60%{opacity:1} 64%,100%{opacity:0} }
@keyframes hqFinger  { 0%,50%{opacity:0} 54%,63%{opacity:1} 67%,100%{opacity:0} }
@keyframes hqFace    { 0%,60%{opacity:0} 64%,71%{opacity:1} 75%,100%{opacity:0} }
@keyframes hqLoad    { 0%,70%{opacity:0} 74%,84%{opacity:1} 88%,100%{opacity:0} }
@keyframes hqThumb   { 0%,84%{opacity:0} 89%,98%{opacity:1} 100%{opacity:1} }
@keyframes hqBubble  { 0%,85%{opacity:0} 90%,98%{opacity:1} 100%{opacity:1} }

/* decorative satellites are noise on small screens */
@media (max-width:920px) { .mea-hide-narrow { display:none !important } }

/* reduced motion: everything resolves to its final state, the ambient loop to opacity only */
@media (prefers-reduced-motion:reduce) {
  .mea-load, .mea-scene, .mea-sat, .mea-sig img, img.mea-sig {
    opacity:1 !important; transform:none !important; clip-path:none !important; animation:none !important; transition:none !important }
  .mea-orbit, .mea-orbit2, .mea-bob, .mea-bob2 { animation:none !important }
  .mea-hq .hqx { animation-timing-function:steps(1,end) !important }
  .mea-header-sticky { transition:none }
}
/* ---------------------------------------------------------- MEA-SECTION-ART
   Art direction that has no native Elementor control: pseudo-element glow blobs,
   the decorative satellite geometry that is tied to the hero artwork, and inline
   emphasis inside a single heading. Everything else uses native controls. */

/* inline italic accent inside the hero headline */
.mea-h1 em { font-style:italic; color:#189A94; font-weight:inherit }

/* soft radial glows behind the hero and the closing CTA */
#top, #start { position:relative; isolation:isolate }
#top::before, #top::after, #start::before {
  content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:-1 }
#top::before { inset-block-start:-160px; inset-inline-end:-140px; inline-size:460px; block-size:460px;
  background:radial-gradient(circle, rgba(24,154,148,.07) 0%, rgba(24,154,148,0) 70%); filter:blur(72px) }
#top::after  { inset-block-end:-180px; inset-inline-start:-160px; inline-size:560px; block-size:560px;
  background:radial-gradient(circle, rgba(123,214,63,.11) 0%, rgba(123,214,63,0) 66%); filter:blur(64px) }
#start::before { inset-block-start:-140px; inset-inline-start:-120px; inline-size:420px; block-size:420px;
  background:radial-gradient(circle, rgba(24,154,148,.10), rgba(24,154,148,0) 70%); filter:blur(60px) }

/* hero scene keeps a square crop the illustration was composed for */
.mea-hero-scene { aspect-ratio:1/1 }
.mea-hero-scene img { inline-size:100%; block-size:100%; object-fit:contain }

/* decorative satellites - geometry belongs with their motion, not in 4x offset controls */
.mea-hero-visual { position:relative }
.mea-hero-visual .mea-sat { position:absolute; z-index:2;
  filter:drop-shadow(0 8px 16px rgba(18,47,75,.16)) }
.mea-sat-cursor { inline-size:74px; inset-block-start:14%; inset-inline-start:-26px }
.mea-sat-check  { inline-size:66px; inset-block-start:6%;  inset-inline-end:-18px }
.mea-sat-pen    { inline-size:84px; inset-block-end:16%;   inset-inline-end:-30px }
.mea-sat-sig    { inset-block-end:8%; inset-inline-start:-30px; background:#fff;
  border:1px solid #E1EAEF; border-radius:14px; padding:12px 16px 9px;
  box-shadow:0 14px 34px -14px rgba(18,47,75,.3) }
.mea-sat-sig img { display:block; inline-size:118px }
@media (max-width:1024px) {
  .mea-sat-cursor { inset-inline-start:-8px } .mea-sat-check { inset-inline-end:-4px }
  .mea-sat-pen { inset-inline-end:-10px } .mea-sat-sig { inset-inline-start:-10px }
}
@media (max-width:640px) {
  .mea-sat-cursor, .mea-sat-pen { display:none }
  .mea-sat-check { inline-size:52px } .mea-sat-sig { inset-inline-start:0; padding:9px 12px 7px }
  .mea-sat-sig img { inline-size:92px }
}

/* the questionnaire overlay marks sit on top of the dashboard mockup */
.mea-hq .hqx { z-index:3 }
/* ------------------------------------------------------------- MEA-COMPONENTS
   Small component chrome with no native Elementor equivalent (pill with a status
   dot, check-bulleted two-line document list, checkmark note). Typography, colour
   and spacing still come from the widgets' own native controls. */

.mea-pill { display:inline-flex; align-items:center; gap:9px; inline-size:fit-content;
  padding:7px 14px; background:#F0F7F6; border:1px solid #D3E9E7; border-radius:999px }
.mea-pill::before { content:""; inline-size:7px; block-size:7px; border-radius:50%;
  background:#7BD63F; flex:0 0 auto }

.mea-note p { display:flex; gap:10px; align-items:flex-start; margin:0 }
.mea-note p::before { content:"\2713"; color:#189A94; flex:0 0 auto; font-weight:700 }

.mea-hero-visual .mea-sat img { display:block; inline-size:100%; block-size:auto }

/* two-line document rows inside the plan cards */
.mea-doclist ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px }
.mea-doclist li { position:relative; padding:11px 10px 11px 45px; border-radius:10px;
  font-size:14px; line-height:1.5; color:#5A6B7B; transition:background .18s ease }
.mea-doclist li:hover { background:#F5FAF9 }
.mea-doclist li::before { content:"\2713"; position:absolute; inset-inline-start:10px; inset-block-start:12px;
  inline-size:22px; block-size:22px; border-radius:50%; background:#E7F5F3; color:#127A75;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700 }
.mea-doclist li strong { display:block; font-weight:600; font-size:15.5px; color:#1A2E45; margin-block-end:2px }
.mea-doclist li em { font-style:normal; font-weight:400; color:#7A8896 }

/* price block: headline figure plus the second tier */
.mea-price { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
.mea-price .mea-amount { font-family:'Libre Caslon Text',serif; font-size:44px; line-height:1; color:#122F4B }

/* status pills in the professionals band */
.mea-status { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  color:#37485A; background:#fff; border:1px solid #DBE7E3; border-radius:999px; padding:7px 14px }
.mea-status::before { content:""; inline-size:8px; block-size:8px; border-radius:50%; background:currentColor; flex:0 0 auto }
.mea-status-started::before  { background:#8DA2B5 }
.mea-status-generated::before{ background:#189A94 }
.mea-status-finalized::before{ background:#5FBB27 }
.mea-status-filed::before    { background:#3E7BD6 }
/* MEA-FIX-SIG: containers stretch to 100% by default; the signature card must hug its content */
.mea-sat-sig { inline-size:fit-content; max-inline-size:190px }
.mea-sat-sig .elementor-widget { width:auto }

/* ------------------------------------------------------------------- MEA-CHIP
   Small count/status chips. Heading widgets cannot be inline-flex pills natively. */
.mea-chip { display:inline-flex; align-items:center; inline-size:fit-content;
  padding:4px 11px; border-radius:999px; background:#F0F4F6 }
.mea-chip-teal { background:#E7F5F3 }

/* featured plan ribbon */
.mea-ribbon { position:relative }
.mea-ribbon::before { content:"Skips probate"; position:absolute;
  inset-block:-13px auto; inset-inline:34px auto;
  inline-size:max-content; block-size:auto;
  white-space:nowrap; background:#122F4B; color:#fff; font-family:'Public Sans',sans-serif;
  font-size:12px; font-weight:600; letter-spacing:.02em; line-height:1.4; padding:5px 13px;
  border-radius:999px; z-index:3; pointer-events:none }
/* ------------------------------------------------------------ MEA-HQ-GEOMETRY
   Positions for the 12s questionnaire sequence layered over the dashboard mockup.
   Percentages track the artwork, so they belong with the animation, not in 10 sets
   of Elementor offset controls. */
.mea-hq .hqx img { display:block; inline-size:100%; block-size:auto;
  filter:drop-shadow(0 10px 18px rgba(18,47,75,.2)) }
.mea-hq .v-cur     { inline-size:48px;  inset-block-start:45%; inset-inline-start:19% }
.mea-hq .v-input   { inline-size:128px; inset-block-start:29%; inset-inline-start:11% }
.mea-hq .v-drop    { inline-size:122px; inset-block-start:47%; inset-inline-start:11% }
.mea-hq .v-empty   { inline-size:52px;  inset-block-start:62%; inset-inline-start:13% }
.mea-hq .v-checked { inline-size:58px;  inset-block-start:61%; inset-inline-start:12% }
.mea-hq .v-finger  { inline-size:90px;  inset-block-start:32%; inset-inline-start:33% }
.mea-hq .v-face    { inline-size:90px;  inset-block-start:41%; inset-inline-start:44% }
.mea-hq .v-load    { inline-size:158px; inset-block-end:8%;    inset-inline-start:19% }
.mea-hq .v-thumb   { inline-size:128px; inset-block-end:14%;   inset-inline-end:-30px }
.mea-hq .v-bubble  { inline-size:184px; inset-block-start:-20px; inset-inline-end:4% }
.mea-hq .v-bubble .mea-bubble-text { position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; padding:6% 14% 20%; text-align:center }
@media (max-width:640px) {
  .mea-hq .v-thumb { inset-inline-end:0 } .mea-hq .v-bubble { inline-size:130px }
}

/* numbered step badge */
.mea-step-num .elementor-heading-title { display:inline-flex; align-items:center; justify-content:center;
  inline-size:24px; block-size:24px; border-radius:50%; background:#122F4B; color:#fff }
/* Teal 500 under white text measured 3.45:1. Teal 600 keeps the accent on the notarization
   step and reaches 5.16:1. */
.mea-step-num-teal .elementor-heading-title { background:#127A75 }
/* ------------------------------------------------------------- MEA-CHECKLIST
   Inline check-bulleted list (bold lead-in, description on the same line). */
.mea-checklist ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px }
.mea-checklist li { position:relative; padding-inline-start:34px; font-size:15px; line-height:1.55; color:#5A6B7B }
.mea-checklist li::before { content:"\2713"; position:absolute; inset-inline-start:0; inset-block-start:1px;
  inline-size:22px; block-size:22px; border-radius:50%; background:#E7F5F3; color:#127A75;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700 }
.mea-checklist li strong { color:#1A2E45; font-size:15.5px }

/* illustration area that hosts two orbiting marks */
.mea-illo-wrap { position:relative }
.mea-illo-wrap .mea-illo-a, .mea-illo-wrap .mea-illo-b { position:absolute; z-index:2 }
.mea-illo-wrap .mea-illo-a img, .mea-illo-wrap .mea-illo-b img { display:block; inline-size:100%; block-size:auto;
  filter:drop-shadow(0 10px 18px rgba(18,47,75,.2)) }
.mea-illo-a { inline-size:82px; inset-block-start:0; inset-inline-start:4% }
.mea-illo-b { inline-size:84px; inset-block-end:0; inset-inline-end:4% }

/* dotted connector used in the professionals band */
.mea-tagrow { display:flex; flex-wrap:wrap; gap:8px; align-items:center }
/* --------------------------------------------------------------- MEA-PARTNER
   Floating marks around the partner dashboard mockup. */
.mea-pp-wrap { position:relative }
.mea-pp-wrap .mea-pp-cur, .mea-pp-wrap .mea-pp-thumb { position:absolute; z-index:2 }
.mea-pp-wrap .mea-pp-cur img, .mea-pp-wrap .mea-pp-thumb img { display:block; inline-size:100%; block-size:auto }
.mea-pp-cur   { inline-size:58px;  inset-block-start:-22px; inset-inline-start:-20px;
  filter:drop-shadow(0 10px 20px rgba(18,47,75,.26)) }
.mea-pp-thumb { inline-size:174px; inset-block-end:-46px;  inset-inline-end:-42px;
  filter:drop-shadow(0 16px 28px rgba(18,47,75,.3)) }
@media (max-width:1024px) { .mea-pp-thumb { inline-size:120px; inset-inline-end:-16px; inset-block-end:-28px } }
@media (max-width:640px)  { .mea-pp-cur { display:none } .mea-pp-thumb { inline-size:92px; inset-inline-end:0 } }

/* FAQ accordion chrome */
.mea-faq .e-n-accordion-item { border-block-end:1px solid #E7ECEF }
.mea-faq .e-n-accordion-item:last-child { border-block-end:0 }
/* -------------------------------------------------------------- MEA-FAQ-DECO */
.mea-faq-wrap { position:relative }
.mea-faq-deco-a, .mea-faq-deco-b { position:absolute; z-index:1 }
.mea-faq-deco-a img, .mea-faq-deco-b img { display:block; inline-size:100%; block-size:auto;
  filter:drop-shadow(0 10px 18px rgba(18,47,75,.15)) }
.mea-faq-deco-a { inline-size:72px; inset-block-start:78px; inset-inline-start:0 }
.mea-faq-deco-b { inline-size:88px; inset-block-start:64px; inset-inline-end:0 }
/* ------------------------------------------------------------- MEA-BRANDMARK */
.mea-brandmark { inline-size:44px; block-size:44px; border-radius:11px; background:#fff;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto }
.mea-brandmark img { inline-size:28px; block-size:28px }
/* footer menus: strip default list chrome, keep it a clean stack */
.mea-footmenu .elementor-nav-menu--main .elementor-item { padding:0 !important }
.mea-footmenu .elementor-nav-menu--layout-vertical > ul > li { margin-block-end:11px }

/* ------------------------------------------------------------ MEA-RENDER-FIXES
   Corrections found by comparing the live render against the source design. */

/* FAQ decorations must flank the 920px content box, not the full-bleed section.
   Elementor puts a boxed container's children inside .e-con-inner, so that is the
   element that has to establish the positioning context. */
.mea-faq-wrap { position:relative } /* MUST stay positioned - it is the containing block for Elementor's background-overlay ::before */
.mea-faq-wrap > .e-con-inner { position:relative }

/* Card illustrations are capped at 240px tall in the source design; without a cap
   they render at full asset height and blow the card out. */
#notarization .elementor-widget-image:not(.mea-illo-a):not(.mea-illo-b) img {
  /* fixed box + contain: caps the height, keeps aspect, reserves space so lazy images
     do not collapse to 0x0 before load and cause layout shift */
  block-size:240px; inline-size:100%; object-fit:contain; margin-inline:auto }
#notarization .mea-illo-wrap { min-block-size:240px }
/* ---------------------------------------------------------------- MEA-FAQ-TYPE
   Nested Accordion renders native <details>/<summary>. Its per-part typography
   controls are nested-widget specific; scoping the design values here keeps the
   markup semantic and the copy fully editable in the editor. */
.mea-faq .e-n-accordion-item-title { padding:22px 4px; gap:20px }
.mea-faq .e-n-accordion-item-title-text { font-family:'Public Sans',sans-serif;
  font-size:18px; font-weight:600; color:#122F4B; line-height:1.4 }
.mea-faq .e-n-accordion-item-title-icon { color:#189A94 }
.mea-faq .e-n-accordion-item > .e-con { padding:0 4px 24px }
.mea-faq .e-n-accordion-item p { font-family:'Public Sans',sans-serif; font-size:16px;
  line-height:1.65; color:#4E5F70; margin:0 }
.mea-faq .e-n-accordion-item-title:focus-visible { outline:3px solid #7BD63F; outline-offset:2px; border-radius:6px }
/* -------------------------------------------------------- MEA-FLEX-MINWIDTH
   Flex children default to min-width:auto, so a long paragraph refuses to shrink
   and pushes its row wider than the container. This is what caused ~11px of
   horizontal overflow in the step cards. */
/* removed: collapsed heading columns - MEA-MEDIA-ROW handles the real case */
/* ---------------------------------------------------------------- MEA-MEDIA-ROW
   "fixed media + flexible text" rows. Elementor gives child containers width:100%
   and flex-basis:auto, so the text column keeps its full width and pushes the row
   past the card. Rebasing it to `flex:1 1 0%` lets it take exactly the space left
   over. Targeted with :has() so only rows that actually contain a media widget are
   affected. */
#how .e-con:has(> .elementor-widget-image) > .e-con:not(.hqx):not(.v-bubble),
#keep .e-con:has(> .elementor-widget-icon) > .e-con {
  flex:1 1 0%; inline-size:auto; min-inline-size:0
}
/* ------------------------------------------------------------- MEA-BUTTON-CASE
   The design writes CTAs in sentence case ("Start my plan"), not caps. */
.elementor-button, .elementor-button-link, .elementor-button-text { text-transform:none; letter-spacing:0 }
/* ---------------------------------------------------------------- MEA-FAQ-ICON */
.mea-faq .e-n-accordion-item-title-icon { color:#189A94; flex:0 0 auto }
.mea-faq .e-n-accordion-item-title-header { flex:1 1 auto; min-inline-size:0 }
.mea-faq details { border-block-end:1px solid #E7ECEF }
.mea-faq details:last-of-type { border-block-end:0 }

/* --------------------------------------------------------------- MEA-FAQ-ICON2
   The accordion ships its own SVG with a hard fill; inherit our teal instead. */
.mea-faq .e-n-accordion-item-title-icon > span { display:flex; align-items:center; justify-content:center }
.mea-faq .e-n-accordion-item-title-text, .mea-faq .e-n-accordion-item-title-header > * { font-family:'Public Sans',sans-serif; font-size:18px; font-weight:600; color:#122F4B; line-height:1.4; margin:0 }

/* ---------------------------------------------------------------- MEA-FAQ-VARS
   Nested Accordion is themed via its own CSS custom properties. Setting these beats
   fighting `.elementor-widget-n-accordion ... span > svg` on specificity. */
.mea-faq .elementor-widget-n-accordion {
  --n-accordion-icon-normal-color:#189A94;
  --n-accordion-icon-active-color:#189A94;
  --n-accordion-icon-hover-color:#127A75;
  --n-accordion-icon-size:20px;
  --n-accordion-title-normal-color:#122F4B;
  --n-accordion-title-hover-color:#122F4B;
  --n-accordion-title-active-color:#122F4B;
  --n-accordion-title-font-size:18px;
  --n-accordion-border-width:0px;
}

/* --------------------------------------------------------------- MEA-STEP-ICON
   The source design puts each step icon in a fixed 90px column and renders it in an
   84x84 box with object-fit:contain, so portrait and landscape assets share one
   footprint and the cards line up. Setting width alone let the tall checklist stretch
   card one. Elementor's image widget has no aspect-ratio control, so this is CSS. */
#how .e-con:has(> .elementor-widget-image):not(.mea-hq):not(.v-bubble) > .elementor-widget-image {
  flex:0 0 90px; display:flex; align-items:flex-start; justify-content:center }
#how .e-con:has(> .elementor-widget-image):not(.mea-hq):not(.v-bubble) > .elementor-widget-image img {
  inline-size:84px; block-size:84px; object-fit:contain; object-position:center top }
@media (max-width:640px) {
  #how .e-con:has(> .elementor-widget-image):not(.mea-hq):not(.v-bubble) > .elementor-widget-image { flex:0 0 64px }
  #how .e-con:has(> .elementor-widget-image):not(.mea-hq):not(.v-bubble) > .elementor-widget-image img { inline-size:60px; block-size:60px }
}

/* ==================================================================== MEA-ARTICLE
   Post-body elements, per the "Blog post & WordPress elements" library in the design
   handoff. Scoped to .mea-article so marketing sections are never affected.
   Article column caps at 720px; tables, code and media may break out full width. */

.mea-article { --mea-measure:720px }
.mea-article > * { max-inline-size:var(--mea-measure); margin-inline:auto }
.mea-article > figure, .mea-article > .wp-block-table, .mea-article > pre,
.mea-article > .wp-block-image.alignwide, .mea-article > .alignwide { max-inline-size:100% }

.mea-article p { font-size:18px; line-height:1.7; color:#2C3E52; margin:0 0 14px }
.mea-article p.has-drop-cap:first-of-type, .mea-article > p:first-of-type { font-size:19px }

.mea-article h2 { font-family:'Libre Caslon Text',serif; font-weight:400; font-size:30px;
  letter-spacing:-.01em; color:#122F4B; margin:40px 0 12px; line-height:1.2 }
.mea-article h3 { font-family:'Libre Caslon Text',serif; font-weight:400; font-size:24px;
  color:#122F4B; margin:32px 0 10px; line-height:1.3 }
.mea-article h4 { font-family:'Public Sans',sans-serif; font-weight:700; font-size:19px;
  color:#122F4B; margin:28px 0 8px }
.mea-article h5 { font-family:'Public Sans',sans-serif; font-weight:700; font-size:15px;
  letter-spacing:.04em; text-transform:uppercase; color:#122F4B; margin:26px 0 8px }
.mea-article h6 { font-family:'Public Sans',sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; color:#127A75; margin:24px 0 8px }

.mea-article a { color:#127A75; font-weight:600; text-decoration:underline;
  text-decoration-color:#B7E0DC; text-underline-offset:3px; text-decoration-thickness:1px }
.mea-article a:hover { text-decoration-color:#127A75 }
.mea-article strong { font-weight:700; color:#1A2E45 }
.mea-article mark { background:#DFF5C6; color:#122F4B; padding:1px 5px; border-radius:4px }
.mea-article del { color:#8494A2 }
.mea-article code { font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:15px;
  background:#E7F5F3; color:#0E5A55; padding:2px 7px; border-radius:6px }

.mea-article ul, .mea-article ol { margin:0 0 18px; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:9px; counter-reset:mea-ol }
.mea-article li { position:relative; padding-inline-start:30px; font-size:16px; line-height:1.5; color:#2C3E52 }
.mea-article ul > li::before { content:""; position:absolute; inset-inline-start:6px; inset-block-start:9px;
  inline-size:7px; block-size:7px; border-radius:50%; background:#189A94 }
.mea-article ol > li { padding-inline-start:36px; counter-increment:mea-ol }
.mea-article ol > li::before { content:counter(mea-ol); position:absolute; inset-inline-start:0; inset-block-start:-1px;
  inline-size:24px; block-size:24px; border-radius:50%; background:#E7F5F3; color:#127A75;
  font-family:'Public Sans',sans-serif; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center }
.mea-article li > ul, .mea-article li > ol { margin-block:9px 0 }

.mea-article blockquote { margin:26px 0; padding:22px 26px; background:#fff;
  border:1px solid #E4EBEF; border-inline-start:4px solid #189A94; border-radius:14px }
.mea-article blockquote p { font-family:'Libre Caslon Text',serif; font-style:italic;
  font-size:19px; line-height:1.55; color:#1A2E45; margin:0 }
.mea-article blockquote cite { display:block; margin-block-start:10px; font-family:'Public Sans',sans-serif;
  font-style:normal; font-size:14px; font-weight:600; color:#5A6B7B }

.mea-article table { inline-size:100%; border-collapse:collapse; margin:26px 0;
  font-size:15px; border:1px solid #E4EBEF; border-radius:12px; overflow:hidden }
.mea-article thead th { background:#122F4B; color:#fff; font-family:'Public Sans',sans-serif;
  font-weight:600; text-align:start; padding:13px 20px; font-size:14px }
.mea-article tbody td { padding:13px 20px; border-block-start:1px solid #EDF1F3; color:#2C3E52 }
.mea-article tbody tr:nth-child(even) { background:#F8FBFB }

.mea-article pre { background:#0F2740; color:#D6E2EC; padding:20px 22px; border-radius:12px;
  overflow-x:auto; margin:26px 0; font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:13.5px; line-height:1.7 }
.mea-article pre code { background:none; color:inherit; padding:0; font-size:inherit }

.mea-article figure { margin:28px 0 }
.mea-article img { max-inline-size:100%; block-size:auto; border-radius:12px; display:block }
.mea-article figcaption { margin-block-start:10px; font-size:14px; line-height:1.5;
  color:#5A6B7B; text-align:center }
.mea-article hr { border:0; block-size:1px; background:#E4EBEF; margin:36px 0 }

/* post cards in loops */
.mea-card { transition:transform .22s ease, box-shadow .22s ease }
.mea-card:hover { transform:translateY(-4px); box-shadow:0 26px 50px -32px rgba(18,47,75,.42) }
.mea-card .elementor-widget-theme-post-featured-image img { aspect-ratio:16/10; object-fit:cover;
  inline-size:100%; display:block }
.mea-chip-cat { display:inline-flex; inline-size:fit-content; padding:4px 11px; border-radius:999px;
  background:#E7F5F3 }
/* ---------------------------------------------------------------- MEA-CARDMETA
   post-info and post-excerpt expose their colour/typography under nested-widget
   control names; scoping the design values here keeps the card markup native. */
.mea-cardmeta .elementor-icon-list-text, .mea-cardmeta .elementor-icon-list-item, .mea-cardmeta a {
  font-family:'Public Sans',sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:#5A6B7B; text-decoration:none }
.mea-cardmeta a:hover { color:#127A75 }
.mea-cardexc, .mea-cardexc p { color:#5A6B7B; margin:0 }
.mea-card .elementor-widget-theme-post-title a { color:inherit; text-decoration:none }
.mea-card:hover .elementor-widget-theme-post-title a { color:#127A75 }
/* archive / search shells */
.mea-emptystate { text-align:center; color:#5A6B7B; font-size:17px; line-height:1.6 }

/* --------------------------------------------------------------- MEA-AUTHORBOX */
.mea-authorbox .elementor-author-box__avatar img { border-radius:50%; inline-size:88px; block-size:88px; object-fit:cover }
.mea-authorbox .elementor-author-box__avatar { margin-inline-end:20px }
.mea-authorbox .elementor-author-box__name { font-family:'Libre Caslon Text',serif; font-weight:400;
  font-size:21px; color:#122F4B; margin:0 0 6px }
.mea-authorbox .elementor-author-box__bio { font-family:'Public Sans',sans-serif; font-size:15px;
  line-height:1.65; color:#5A6B7B }
.mea-authorbox .elementor-author-box__button { font-family:'Public Sans',sans-serif; font-size:14px;
  font-weight:600; color:#127A75; text-decoration:none; margin-block-start:10px; display:inline-block }
.mea-authorbox .elementor-author-box__button:hover { text-decoration:underline }
@media (max-width:640px) { .mea-authorbox .elementor-author-box { flex-direction:column }
  .mea-authorbox .elementor-author-box__avatar { margin:0 0 14px } }

/* ------------------------------------------------------------------ MEA-FEENOTE
   Honest pricing disclosure under each plan price. Muted, but present before the CTA. */
.mea-feenote p { margin:0; font-size:13.5px; line-height:1.55; color:#5A6B7B }
.mea-feenote strong { color:#1A2E45; font-weight:600 }
.mea-feenote { padding:12px 14px; background:#F6F9FA; border:1px solid #EDF1F3; border-radius:10px }
.mea-status-notarized::before { background:#127A75 }

/* ------------------------------------------------------------ MEA-CHECKLIST-NO
   A checkmark next to a negative statement reads as a promise. Items marked .no get
   a neutral cross instead, so "what we cannot answer" is not styled as a feature. */
.mea-checklist li.no::before { content:"\00D7"; background:#EEF1F3; color:#52616F; font-size:15px }

/* ------------------------------------------------------- MEA-ARTICLE-RESPONSIVE
   The article heading scale is fixed in px, so on a phone h2 (30px) landed within a
   pixel of h1 (31px) and the hierarchy collapsed. Step the inner levels down; h1 is
   set per page in Elementor and already has a mobile value. */
@media (max-width:640px) {
  .mea-article h2 { font-size:24px; margin-block:32px 10px }
  .mea-article h3 { font-size:20px; margin-block:26px 8px }
  .mea-article h4 { font-size:17px }
  .mea-article > p:first-of-type { font-size:18px }
}

/* ---------------------------------------------------------------- MEA-FOOTER-LINKS
   The footer sits on navy, but the global link colour is tuned for light pages. A raw link
   in footer text (the contact address) inherited teal and landed at 2.94:1. Menu links each
   carry their own colour; this covers everything else, including links added later. */
#site-footer a { color:#C4D0DC }
#site-footer a:hover, #site-footer a:focus-visible { color:#FFFFFF }

/* --------------------------------------------------------------- MEA-HEADER-MOBILE
   The "Log in" button is hidden below 641px because the row cannot hold logo + two
   buttons + burger without wrapping. It lives inside the dropdown instead, so this menu
   item is the mobile counterpart of that button - hide it everywhere the button is
   visible, otherwise both show and the header says "Log in" twice. */
@media (min-width:641px) {
  .mea-header-main .elementor-nav-menu > li.mea-login-item,
  .mea-header-sticky .elementor-nav-menu > li.mea-login-item { display:none }
}
/* Burger sits last on mobile and needs a real tap target, not just the 22px glyph. */
@media (max-width:640px) {
  .mea-header-main .elementor-menu-toggle, .mea-header-sticky .elementor-menu-toggle {
    inline-size:44px; block-size:44px; margin-inline-start:auto }
  .mea-header-main .mea-login-item a { font-weight:600; color:#127A75 }
}

/* -------------------------------------------------------------------- MEA-DOCCARD
   Document cards on the service pages: a custom illustration icon beside a title and
   an explanation. The source files are ~1000x1300, so the icon needs a fixed square
   footprint or portrait and landscape assets set different card heights. Same fix as
   the numbered steps on the homepage. */
.mea-doccard > .elementor-widget-image { flex:0 0 64px; display:flex; align-items:flex-start; justify-content:center }
.mea-doccard > .elementor-widget-image img { inline-size:64px; block-size:64px; object-fit:contain; object-position:center top }
@media (max-width:640px) {
  .mea-doccard > .elementor-widget-image { flex:0 0 48px }
  .mea-doccard > .elementor-widget-image img { inline-size:48px; block-size:48px }
}
/* Numbered step chip used by the repeating "How it works" band on every service page. */
/* _css_classes lands on the widget WRAPPER, which is a full-width block, so sizing the
   circle there gave a 230px pill. The chip has to be the inner heading element. Same trap as
   the button hover states. */
.mea-stepnum { inline-size:fit-content; flex:0 0 auto }
.mea-stepnum .elementor-heading-title { inline-size:34px; block-size:34px; border-radius:50%;
  background:#122F4B; color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:"Public Sans",sans-serif; font-size:15px; font-weight:700; line-height:1 }

/* --------------------------------------------------------------- MEA-ARTICLE-TABLE
   Comparison tables inside .mea-article prose. Scrolls inside its own box on narrow
   screens so the page body never scrolls sideways. */
/* The table must stay a real table. Setting display:block turns its rows into an anonymous
   shrink-to-fit table, so the block filled 720px while the columns only reached 466px and
   left dead space beside the last one. Horizontal scrolling is the wrapper's job. */
.mea-tablewrap { overflow-x:auto; margin:22px 0 }
.mea-article .mea-tablewrap { margin:22px 0 }
.mea-article .mea-tablewrap > table { margin:0; min-inline-size:480px }
.mea-article table { inline-size:100%; border-collapse:collapse; margin:22px 0;
  font-family:"Public Sans",sans-serif; font-size:16px }
.mea-article thead th { text-align:left; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#5A6B7B; padding:10px 14px; border-block-end:1px solid #E4EBEF }
.mea-article tbody td { padding:12px 14px; color:#2C3E52; border-block-end:1px solid #F0F4F6 }
.mea-article tbody tr:last-child td { border-block-end:0 }
.mea-article tbody td:last-child { color:#122F4B }

/* --------------------------------------------------------------- MEA-ARTICLE-FLUSH
   .mea-article centres its 720px measure, which is right for a blog post sitting on its
   own but wrong inside a marketing section, where it pushes the text off the left edge
   the neighbouring sections share. This modifier keeps the measure and drops the centring. */
.mea-article-flush > * { margin-inline:0 }

/* ------------------------------------------------------------- MEA-ARTICLE-CENTRING
   e_optimized_markup is active, so there is no .elementor-widget-container: p, h2, ul and
   friends are DIRECT children of .mea-article. The element rules above use the `margin`
   shorthand at (0,1,1), which outranks `.mea-article > *` at (0,1,0) and resets the inline
   margins - the measure ended up stranded on the left with dead space beside it. Restate
   the centring at matching specificity, after those rules. */
.mea-article > p, .mea-article > h2, .mea-article > h3, .mea-article > h4,
.mea-article > h5, .mea-article > h6, .mea-article > ul, .mea-article > ol,
.mea-article > blockquote, .mea-article > pre, .mea-article > figure { margin-inline:auto }
/* the flush variant keeps the measure but drops the centring */
.mea-article-flush > p, .mea-article-flush > h2, .mea-article-flush > h3, .mea-article-flush > h4,
.mea-article-flush > h5, .mea-article-flush > h6, .mea-article-flush > ul, .mea-article-flush > ol,
.mea-article-flush > blockquote, .mea-article-flush > pre, .mea-article-flush > figure { margin-inline:0 }

/* Tables in a post break out past the measure on purpose, centred on the column. */
.mea-article > table, .mea-article > .mea-tablewrap, .mea-article > .wp-block-table {
  max-inline-size:100%; margin-inline:auto }
.mea-article table { border:1px solid #E4EBEF; border-radius:12px; overflow:hidden }

/* ------------------------------------------------------------------- MEA-COMMENTS
   The comment form is WordPress markup, not an Elementor widget, so Hello Elementor's
   reset.css shows through: it gives every [type=submit] a 1px #c36 border and pink text.
   That is where the pink outline on "Post Comment" came from. */
.mea-comments input[type="submit"], .mea-comments button[type="submit"] {
  background:#127A75; border:0; border-radius:12px; color:#fff;
  font-family:"Public Sans",sans-serif; font-size:16px; font-weight:600;
  padding:14px 28px; cursor:pointer; transition:background .18s ease }
.mea-comments input[type="submit"]:hover, .mea-comments button[type="submit"]:hover {
  background:#0F625E; color:#fff }
.mea-comments input[type="submit"]:focus-visible { outline:3px solid #7BD63F; outline-offset:2px }
.mea-comments input[type="text"], .mea-comments input[type="email"],
.mea-comments input[type="url"], .mea-comments textarea {
  inline-size:100%; font-family:"Public Sans",sans-serif; font-size:16px; color:#122F4B;
  background:#fff; border:1px solid #D8E0E6; border-radius:10px; padding:12px 14px }
.mea-comments input:focus, .mea-comments textarea:focus { outline:0; border-color:#189A94 }
.mea-comments label { font-family:"Public Sans",sans-serif; font-size:14px; font-weight:600; color:#37485A }
.mea-comments .comment-form-cookies-consent label { font-weight:400; color:#5A6B7B }

/* ---------------------------------------------------------------- MEA-AUTHORCARD
   Author block on a post: portrait, name, short bio, links. Built from real elements
   rather than the generic author-box widget, which showed only the avatar, the name and
   the full bio, and had nowhere to put the social links. */
.mea-authoravatar { flex:0 0 auto }
.mea-authoravatar img { inline-size:84px; block-size:84px; border-radius:50%;
  object-fit:cover; object-position:center top; display:block;
  border:3px solid #fff; box-shadow:0 6px 18px -10px rgba(18,47,75,.5) }
.mea-authorcard h3 a { color:#122F4B; text-decoration:none }
.mea-authorcard h3 a:hover { color:#127A75 }
@media (max-width:640px) { .mea-authoravatar img { inline-size:64px; block-size:64px } }

/* ---------------------------------------------------------------- wide article
   The single post runs its text across the whole container instead of the 720px measure.
   Kept as a modifier rather than a change to .mea-article, because the same class dresses the
   prose blocks on the marketing pages, and those still want the narrow measure.
   Tables and images sit at 80% of the container so they read as figures rather than as bleed. */
.mea-article.mea-article-wide { --mea-measure:100% }

.mea-article.mea-article-wide > figure,
.mea-article.mea-article-wide > .wp-block-image,
.mea-article.mea-article-wide > .wp-block-table,
.mea-article.mea-article-wide > table,
.mea-article.mea-article-wide > .mea-tablewrap { max-inline-size:80%; margin-inline:auto }

/* Below the tablet breakpoint 80% of a narrow column wastes more than it frames. */
@media (max-width:1024px) {
	.mea-article.mea-article-wide > figure,
	.mea-article.mea-article-wide > .wp-block-image,
	.mea-article.mea-article-wide > .wp-block-table,
	.mea-article.mea-article-wide > table,
	.mea-article.mea-article-wide > .mea-tablewrap { max-inline-size:100% }
}

/* -------------------------------------------------------------------- MEA-PUB
   Published work: the author's writing that lives on other sites. Same mark language
   as .mea-checklist, but an outbound arrow rather than a tick: these leave the site. */
.mea-pub { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px }
.mea-pub__item { position:relative; padding-inline-start:34px }
.mea-pub__item::before { content:"\2197"; position:absolute; inset-inline-start:0; inset-block-start:1px;
  inline-size:22px; block-size:22px; border-radius:50%; background:#E7F5F3; color:#127A75;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700 }
.mea-pub__link { display:inline-block; color:#1A2E45; font-size:15.5px; line-height:1.5;
  text-decoration:none; border-block-end:1px solid #C9DAD8 }
.mea-pub__link:hover, .mea-pub__link:focus-visible { color:#127A75; border-block-end-color:#127A75 }

/* A link inside the credentials list sat at 1.06:1 against the text around it and had
   no underline, so colour alone carried it. Same underline language as .mea-pub__link. */
.mea-checklist a { color:#127A75; text-decoration:none; border-block-end:1px solid #9FCFCA }
.mea-checklist a:hover, .mea-checklist a:focus-visible { border-block-end-color:#127A75 }

/* Category intro on the blog archive. The text comes from the term description, which
   WordPress wraps in <p>; its default bottom margin doubled the gap the widget already
   keeps. The link inside needs its own mark: at about 1.46:1 against the intro text,
   colour alone did not say it was a link. Same underline language as .mea-checklist a. */
.mea-archive-intro p:last-child { margin-bottom:0 }
.mea-archive-intro a { color:#127A75; text-decoration:none; border-block-end:1px solid #9FCFCA }
.mea-archive-intro a:hover, .mea-archive-intro a:focus-visible { border-block-end-color:#127A75 }