/* =====================================================================
   Eternal Grace Funerals — theme override on top of Monoline (style.css)
   Palette: near-black #16151a · soft gold #b8963f / #d8b45e · stone #6b6b73
   Headings: Playfair Display (serif) · Body: Poppins
   Loaded AFTER style.css / responsive.css so these rules win.
   ===================================================================== */

:root{
  --eg-ink:#16151a;
  --eg-ink-2:#211f27;
  --eg-gold:#b8963f;
  --eg-gold-2:#d8b45e;
  --eg-stone:#6b6b73;
  --eg-cream:#f7f4ee;
  --eg-line:#ece7dd;
}

body{ color:#3a3942; }

h1,h2,h3,h4,h5,.section-title h2,.hero-text h2{
  font-family:'Playfair Display', Georgia, serif !important;
  letter-spacing:.2px;
}

/* ---- Buttons ---- */
.btn_one,.hero-text a,.contact_btn,.home_b_btn,.subs_btn{
  background:var(--eg-gold) !important;
  border:2px solid var(--eg-gold) !important;
  color:#fff !important;
  border-radius:2px !important;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size:13px;
  font-weight:600;
  box-shadow:0 12px 30px -14px rgba(184,150,63,.7) !important;
}
.btn_one{ background:transparent !important; color:var(--eg-ink) !important; border-color:var(--eg-ink) !important; }
.btn_one:hover,.hero-text a:hover,.contact_btn:hover,.home_b_btn:hover,.subs_btn:hover{
  background:var(--eg-ink) !important;
  border-color:var(--eg-ink) !important;
  color:#fff !important;
}

/* ---- Top utility bar (24h) ---- */
.eg-topbar{ background:var(--eg-ink); color:#e8e4da; font-size:13.5px; }
.eg-topbar .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; padding:9px 15px; }
.eg-topbar a{ color:#e8e4da; }
.eg-topbar .eg-24{ color:var(--eg-gold-2); font-weight:600; letter-spacing:.4px; }
.eg-topbar .eg-links a{ margin-left:18px; }
.eg-topbar i{ color:var(--eg-gold-2); margin-right:6px; }

/* ---- Navbar ---- */
.site-navbar{ background:#fff; box-shadow:0 4px 24px rgba(22,21,26,.06); }
.site-navbar .site-logo .eg-logo{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.eg-logo .eg-mark{ width:42px;height:42px;border-radius:50%;background:var(--eg-ink);
  display:inline-flex;align-items:center;justify-content:center;color:var(--eg-gold-2);font-size:20px; }
.eg-logo .eg-name{ line-height:1; }
.eg-logo .eg-name b{ font-family:'Playfair Display',serif; font-size:22px; color:var(--eg-ink); display:block; letter-spacing:.3px; }
.eg-logo .eg-name span{ font-size:10.5px; letter-spacing:3px; text-transform:uppercase; color:var(--eg-gold); }
.site-navbar .site-menu>li>a{ color:var(--eg-ink)!important; font-weight:500; font-size:15px; }
.site-navbar .site-menu>li>a:hover,.site-navbar .site-menu .active>a{ color:var(--eg-gold)!important; }

/* jquery.sticky.js wraps the header in .sticky-wrapper on load. Monoline's
   ".sticky-wrapper .site-navbar .site-menu > li > a{color:#fff!important}" assumes a
   transparent navbar over a dark hero; our navbar is always white, so unscrolled links
   rendered white-on-white. These selectors match Monoline's specificity to win it back. */
.sticky-wrapper .site-navbar .site-menu>li>a{ color:var(--eg-ink)!important; }
.sticky-wrapper .site-navbar .site-menu>li>a:hover,
.sticky-wrapper .site-navbar .site-menu .active>a{ color:var(--eg-gold)!important; }

/* Once scrolled, .is-sticky repeats the trick at (0,4,2) with #000, and Monoline's gold
   "active" rule there targets `a.active` -- which never matches our `li.active > a` -- so the
   active item silently lost its gold highlight on scroll. Match/beat that specificity. */
.sticky-wrapper.is-sticky .site-navbar .site-menu>li>a{ color:var(--eg-ink)!important; }
.sticky-wrapper.is-sticky .site-navbar .site-menu>li>a:hover,
.sticky-wrapper.is-sticky .site-navbar .site-menu li.active>a{ color:var(--eg-gold)!important; }

/* Menu space budget (measured in-browser, 8 items). Usable menu width is 831px in the
   1200-1399 band and 966px at >=1400 -- Bootstrap caps .container at 1320px, so 1920 and
   2560 give no extra room over 1440.
   Monoline's own 20px/16px link metrics need 974px, so they overflow at EVERY desktop width
   (by 143px at 1280, and still by 8px at 1440+), wrapping the "Get Help Now" CTA onto a
   second row over the banner. There is no unaffected breakpoint, which is why this is a
   flat rule and not a media query.
   At 10px/15px the menu needs 804px: fits both bands (verified 1200-2560).
   The 15px is load-bearing, not cosmetic -- at 16px it needs ~880px and wraps at 1280.
   HEADROOM IS ONLY 27px AT 1200-1399 (162px at >=1400): a 9th item (~90px) will wrap the
   CTA again on 1280-wide laptops. If one is ever needed, drop the redundant "Contact"
   item first -- "Get Help Now" already links to contact.html -- which frees ~79px. */
.site-navbar .site-navigation .site-menu>li>a{ padding-left:10px; padding-right:10px; font-size:15px; }

.eg-nav-cta{ background:var(--eg-gold); color:#fff!important; padding:9px 20px!important; border-radius:2px;
  text-transform:uppercase; font-size:12.5px; letter-spacing:.6px; }
.eg-nav-cta:hover{ background:var(--eg-ink); color:#fff!important; }
/* Keep the gold CTA's label white against every sticky/non-sticky rule above. */
.sticky-wrapper.is-sticky .site-navbar .site-menu>li>a.eg-nav-cta,
.sticky-wrapper .site-navbar .site-menu>li>a.eg-nav-cta,
.site-navbar .site-menu>li>a.eg-nav-cta{ color:#fff!important; }
.sticky-wrapper.is-sticky .site-navbar .site-menu>li>a.eg-nav-cta:hover,
.sticky-wrapper .site-navbar .site-menu>li>a.eg-nav-cta:hover,
.site-navbar .site-menu>li>a.eg-nav-cta:hover{ color:#fff!important; }

/* ---- Hero ---- */
.home_bg{ height:640px; }
.home_bg::before{ background:linear-gradient(180deg, rgba(18,16,22,.42) 0%, rgba(18,16,22,.62) 100%) !important; }
.hero-text{ padding-top:220px; }
.hero-text .eg-kicker{ color:var(--eg-gold-2); letter-spacing:4px; text-transform:uppercase; font-size:13px;
  font-weight:600; display:inline-block; margin-bottom:14px; font-family:'Poppins',sans-serif; }
.hero-text h2{ text-transform:none !important; font-size:52px; line-height:1.12; text-shadow:0 2px 30px rgba(0,0,0,.35); }
.hero-text p{ font-size:18px; max-width:640px; margin:16px auto 26px; color:#f1eee7; }
.hero-text .eg-hero-actions a{ margin:0 6px; }
.hero-text .eg-ghost{ background:transparent !important; border:2px solid rgba(255,255,255,.7) !important; }
.hero-text .eg-ghost:hover{ background:#fff !important; color:var(--eg-ink) !important; border-color:#fff !important; }

/* ---- Section titles ---- */
.section-title h2{ color:var(--eg-ink); font-size:38px; position:relative; }
.section-title{ margin-bottom:18px; }
.eg-eyebrow{ color:var(--eg-gold); letter-spacing:3px; text-transform:uppercase; font-size:13px; font-weight:600;
  display:block !important; margin-bottom:10px; font-family:'Poppins',sans-serif;
  /* reset Monoline's ".section-title span" 2px pink bar hijack */
  background:none !important; height:auto !important; width:auto !important; }
.eg-divider{ width:66px; height:3px; background:var(--eg-gold); border:0; margin:14px auto 20px; }
.section-title.text-left .eg-divider{ margin-left:0; }

/* ---- Features / services cards ---- */
.single_feature{ border:1px solid var(--eg-line); border-radius:4px; padding:38px 26px; height:100%;
  transition:.3s; background:#fff; }
.single_feature:hover{ box-shadow:0 24px 50px -28px rgba(22,21,26,.4); transform:translateY(-4px); border-color:#fff; }
.single_feature .eg-ico{ width:66px;height:66px;border-radius:50%;background:var(--eg-cream);color:var(--eg-gold);
  display:inline-flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:18px; }
.single_feature:hover .eg-ico{ background:var(--eg-ink); color:var(--eg-gold-2); }
.single_feature h4{ color:var(--eg-ink); font-size:20px; margin-bottom:10px; }
.single_feature p{ color:var(--eg-stone); font-size:15px; }

/* ---- Counter ---- */
.counter_feature{ background:var(--eg-ink); }
.counter-num,.single-project h4{ color:#fff; }
.counter-num{ font-family:'Playfair Display',serif; }
.single-project .eg-ico{ color:var(--eg-gold-2); font-size:40px; margin-bottom:8px; display:block; }
.single-project h2{ color:var(--eg-gold-2); }

/* ---- Why choose ---- */
.single_why_choose h2{ color:var(--eg-ink); font-size:40px; line-height:1.15; }
.single_why_choose p{ color:var(--eg-stone); }
.single_why_choose_img img{ border-radius:6px; box-shadow:0 30px 60px -30px rgba(22,21,26,.5); }
.eg-check-list{ list-style:none; padding:0; margin:18px 0 26px; }
.eg-check-list li{ padding:7px 0 7px 30px; position:relative; color:#3a3942; }
.eg-check-list li::before{ content:"\f00c"; font-family:"fontAwesome"; color:var(--eg-gold); position:absolute; left:0; }

/* ---- Portfolio / gallery ---- */
.single-gallery{ border-radius:4px; }
.single-gallery::after{ background:rgba(22,21,26,.55); }
.portfolio_filter ul li.active,.portfolio_filter ul li:hover{ color:var(--eg-gold); }
.single-gallery h4 a{ color:#fff; }

/* ---- Skills / commitment band ---- */
.skills_area{ position:relative; }
.skills_area::before{ content:""; position:absolute; inset:0; background:rgba(18,16,22,.78); }
.skills_area .container{ position:relative; z-index:2; }
.skill_content h2{ color:#fff; font-size:34px; }
.skill_content p{ color:#d8d5cd; }
.progress-bar-text,.progress-bar-text span{ color:#fff; }
.progress-bar span{ background:var(--eg-gold) !important; }

/* ---- Promotional / testimonials / blog ---- */
.promotional_content img{ border-radius:6px; }
.single_testimonial{ border:1px solid var(--eg-line); border-radius:6px; background:#fff; padding:32px 26px; }
.single_testimonial h4{ color:var(--eg-ink); }
.single_testimonial h5{ color:var(--eg-gold); }
.single_testimonial .testimonial_img img{ border:3px solid var(--eg-gold); }
.home_single_blog{ border:1px solid var(--eg-line); border-radius:6px; overflow:hidden; background:#fff; }
.home_blog_content{ padding:22px; }
.blog_title_info h2 a{ color:var(--eg-ink); font-size:19px; }
.blog_title_info h2 a:hover{ color:var(--eg-gold); }
.blog_title_info span a,.blog_title_info span{ color:var(--eg-gold); }

/* ---- Contact ---- */
.contact_area{ background:var(--eg-ink); }
.contact_area .form-control{ border-radius:2px; }

/* ---- Footer ---- */
.footer{ background:var(--eg-ink) !important; }
.footer_bg{ padding-top:60px; }
.single_footer h4{ color:#fff; }
.single_footer ul li a,.footer_logo p{ color:#b9b6b0; }
.single_footer ul li a:hover{ color:var(--eg-gold-2); }
.footer_logo .eg-logo .eg-name b{ color:#fff; }
.footer_logo .eg-mark{ background:#fff; color:var(--eg-ink); }
.social_profile ul li a{ background:rgba(255,255,255,.08); }
.social_profile ul li a:hover{ background:var(--eg-gold); }
.footer_copyright p,.footer_copyright a{ color:#8f8c86; }
.footer_copyright a:hover{ color:var(--eg-gold-2); }

/* ---- Page banner (inner pages) ---- */
.eg-banner{ background:var(--eg-ink); color:#fff; padding:130px 0 60px; text-align:center; position:relative; }
.eg-banner h1{ font-size:44px; margin:0; color:#fff !important; }
.eg-banner .eg-crumb{ color:var(--eg-gold-2); letter-spacing:1px; margin-top:10px; }
.eg-banner .eg-crumb a{ color:#cfccc4; }
.eg-banner .eg-banner-lead{ color:#d8d5cd; font-size:17px; max-width:660px; margin:18px auto 0; }
.eg-banner .eg-banner-cta{ margin-top:26px; }
.eg-banner .eg-banner-cta .eg-plan-btn{ display:inline-block; background:var(--eg-gold);
  border-color:var(--eg-gold); color:#fff; min-width:230px; }
.eg-banner .eg-banner-cta .eg-plan-btn:hover,.eg-banner .eg-banner-cta .eg-plan-btn:focus{
  background:#fff; border-color:#fff; color:var(--eg-ink); }

/* ---- Plans & Pricing (services-pricing.html) ---- */
.eg-plan{ border:1px solid var(--eg-line); border-radius:4px; background:#fff; padding:34px 26px 30px;
  height:100%; display:flex; flex-direction:column; transition:.3s; }
.eg-plan:hover{ box-shadow:0 24px 50px -28px rgba(22,21,26,.4); transform:translateY(-4px); }
.eg-plan-badge{ display:inline-block; align-self:flex-start; background:var(--eg-cream); color:var(--eg-gold);
  font-family:'Poppins',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  padding:6px 13px; border-radius:2px; margin-bottom:16px; }
.eg-plan h3{ color:var(--eg-ink); font-size:26px; margin:0 0 10px; }
.eg-plan-desc{ color:var(--eg-stone); font-size:15px; margin-bottom:20px; }
.eg-plan-price{ border-top:1px solid var(--eg-line); border-bottom:1px solid var(--eg-line);
  padding:16px 0; margin-bottom:22px; color:var(--eg-ink); font-size:15px; font-weight:500; }
.eg-plan-benefits{ list-style:none; padding:0; margin:0 0 26px; flex-grow:1; }
.eg-plan-benefits li{ padding:7px 0 7px 28px; position:relative; color:#3a3942; font-size:14.5px; }
.eg-plan-benefits li::before{ content:"\f00c"; font-family:"fontAwesome"; color:var(--eg-gold); position:absolute; left:0; }
.eg-plan-btn{ display:block; text-align:center; background:transparent; border:2px solid var(--eg-ink);
  color:var(--eg-ink); border-radius:2px; padding:13px 18px; text-transform:uppercase; letter-spacing:.6px;
  font-size:12.5px; font-weight:600; transition:.3s; }
.eg-plan-btn:hover,.eg-plan-btn:focus{ background:var(--eg-ink); border-color:var(--eg-ink); color:#fff; text-decoration:none; }

/* Featured (Family) plan — gold accent, dignified rather than loud */
.eg-plan-featured{ border-color:var(--eg-gold); box-shadow:0 18px 44px -26px rgba(184,150,63,.6); }
.eg-plan-featured .eg-plan-badge{ background:var(--eg-gold); color:#fff; }
.eg-plan-featured .eg-plan-btn{ background:var(--eg-gold); border-color:var(--eg-gold); color:#fff; }
.eg-plan-featured .eg-plan-btn:hover,.eg-plan-featured .eg-plan-btn:focus{
  background:var(--eg-ink); border-color:var(--eg-ink); color:#fff; }

/* Additional services grid */
.eg-svc{ border:1px solid var(--eg-line); border-radius:4px; background:#fff; padding:24px 20px; height:100%;
  display:flex; align-items:center; gap:14px; transition:.3s; }
.eg-svc:hover{ box-shadow:0 18px 40px -26px rgba(22,21,26,.4); border-color:#fff; }
.eg-svc i{ color:var(--eg-gold); font-size:22px; width:26px; text-align:center; flex-shrink:0; }
.eg-svc h4{ color:var(--eg-ink); font-size:16px; margin:0; }

/* Custom arrangements band */
.eg-custom{ background:var(--eg-cream); }
.eg-custom h2{ color:var(--eg-ink); font-size:34px; }
.eg-custom p{ color:var(--eg-stone); max-width:680px; margin:14px auto 26px; }
.eg-custom .eg-plan-btn{ display:inline-block; margin:0 6px 10px; min-width:210px; }

/* Disclaimer */
.eg-disclaimer{ color:var(--eg-stone); font-size:13.5px; max-width:760px; margin:34px auto 0;
  text-align:center; line-height:1.7; }

/* Keyboard focus visibility (accessibility) */
.eg-plan-btn:focus-visible,.eg-banner-cta a:focus-visible{ outline:2px solid var(--eg-gold-2); outline-offset:3px; }

@media(max-width:768px){
  .hero-text h2{ font-size:36px; }
  .hero-text{ padding-top:180px; }
  .home_bg{ height:560px; }
  .eg-topbar .container{ justify-content:center; text-align:center; }
  .eg-topbar .eg-links{ display:none; }
  .eg-banner h1{ font-size:32px; }
  .eg-banner .eg-banner-lead{ font-size:15.5px; }
  .eg-custom h2{ font-size:27px; }
  .eg-custom .eg-plan-btn{ display:block; margin:0 0 12px; min-width:0; }
}

/* =====================================================================
   MOBILE HEADER & NAVIGATION
   ---------------------------------------------------------------------
   Everything below the xl breakpoint was raw, unstyled Monoline: this file
   previously contained no mobile header or menu rules at all. Measured faults:
     - the wordmark wrapped to 2 lines on EVERY phone width (320-414)
     - .eg-mark was crushed to an ellipse (27x42 @320) - inline-flex shrank it
     - the hamburger sat stranded mid-header, 152px from the right edge, because
       Monoline's markup uses Bootstrap 4's `float-right` and we ship Bootstrap 5
       (`float-end`) - a dead class
     - tap target 23x23 (WCAG 2.5.5 / Apple HIG minimum is 44x44)
     - the header was TALLER on phones (93px) than on tablet (64px) - backwards
     - the panel had no brand, no active state (Monoline's `li .active` is a
       descendant selector and never matches our `li.active > a`), and leaked
       Monoline's orange #ffaa17 as its hover colour
   Scoped to max-width:1199.98px (the hamburger range) so the approved desktop
   navigation at >=1200px is untouched. Palette is unchanged: existing --eg-*
   tokens only. See docs/changelog/CHANGELOG.md.
   ===================================================================== */

/* ---- 1. The closed header ---- */
@media (max-width:1199.98px){
  /* Give the logo the room it needs instead of a rigid 50/50 col-6 split, and
     let the toggle size to its content. This is what stops the wordmark wrapping. */
  .site-navbar .container{ padding-left:20px; padding-right:20px; }
  .site-navbar .row{ min-height:74px; }
  .site-navbar .row > div:first-child{ flex:1 1 auto; width:auto; max-width:none; }
  .site-navbar .row > .d-xl-none{ flex:0 0 auto; width:auto; text-align:right; top:0 !important; }

  /* Logo = the anchor. Never squeezed against the edge, never wrapped, never oval. */
  .site-navbar .site-logo .eg-logo{ gap:11px; }
  .eg-logo .eg-mark{ width:40px; height:40px; flex:0 0 40px; font-size:18px; }
  .eg-logo .eg-name{ white-space:nowrap; }
  .eg-logo .eg-name b{ font-size:19.5px; }
  .eg-logo .eg-name span{ font-size:9px; letter-spacing:2.4px; }

  /* Hamburger: a real 44x44 target, right-aligned, quiet until touched. */
  .site-navbar .site-menu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border:1px solid rgba(22,21,26,.16); border-radius:2px;
    text-decoration:none; -webkit-tap-highlight-color:transparent;
    transition:background .25s ease, color .25s ease, border-color .25s ease; }
  /* margin:0 — the span carries Bootstrap's .h3 class, whose margin-bottom:.5rem
     pushed the glyph 4px above the optical centre of the button. */
  .site-navbar .site-menu-toggle .icon-menu{ font-size:19px; line-height:1; margin:0; }
  .site-navbar .site-menu-toggle:focus-visible{ outline:2px solid var(--eg-gold); outline-offset:2px; }

  /* THE HAMBURGER WAS INVISIBLE. menu.css:274 paints it #fff inside .sticky-wrapper
     (Monoline's transparent-navbar-over-dark-hero assumption) at (0,3,0), and #000 once
     .is-sticky at (0,4,0) — both out-ranking a plain .site-navbar .site-menu-toggle (0,2,0).
     Our navbar is always white, so the icon rendered WHITE-ON-WHITE at the top of every
     page on every phone: the glyph painted (19x19) but nobody could see it. Same trap that
     hid the desktop nav. These selectors match Monoline's specificity to win the colour back. */
  .site-navbar .site-menu-toggle,
  .sticky-wrapper .site-navbar .site-menu-toggle,
  .sticky-wrapper.is-sticky .site-navbar .site-menu-toggle{ color:var(--eg-ink); }
  .site-navbar .site-menu-toggle:hover,
  .site-navbar .site-menu-toggle:active,
  .site-navbar .site-menu-toggle.active,
  .sticky-wrapper .site-navbar .site-menu-toggle:hover,
  .sticky-wrapper .site-navbar .site-menu-toggle:active,
  .sticky-wrapper .site-navbar .site-menu-toggle.active,
  .sticky-wrapper.is-sticky .site-navbar .site-menu-toggle:hover,
  .sticky-wrapper.is-sticky .site-navbar .site-menu-toggle:active,
  .sticky-wrapper.is-sticky .site-navbar .site-menu-toggle.active{
    background:var(--eg-ink); border-color:var(--eg-ink); color:#fff; }
}

/* ---- 2. Scrim. The page dims behind the panel instead of competing with it.
   Kept inert (opacity:0; pointer-events:none) unless .offcanvas-menu is set, so it
   costs nothing on desktop. Taps land on <body>, which menu.js already treats as
   "outside the panel" and closes - no JS change needed. ---- */
body::after{
  content:""; position:fixed; inset:0; background:rgba(12,11,15,.62);
  opacity:0; pointer-events:none; z-index:1999;
  transition:opacity .38s cubic-bezier(.22,1,.36,1); }
body.offcanvas-menu::after{ opacity:1; pointer-events:auto; }
body.offcanvas-menu{ overflow:hidden; }

/* ---- 3. The panel. Ink + gold: the brand's own surface language, the same as
   the top bar, page banners and footer. A white sheet read as "template default". ---- */
.site-mobile-menu{
  width:min(88vw, 360px);
  background:var(--eg-ink);
  padding-top:0;
  display:flex; flex-direction:column;
  box-shadow:-26px 0 60px -22px rgba(0,0,0,.6);
  transition:transform .38s cubic-bezier(.22,1,.36,1);
  /* top:0 — Monoline sets position:fixed but never sets `top`, so the panel fell to its
     static position (below the 44px utility bar) and then ran 100vh from there, overflowing
     the viewport bottom by 44px on EVERY device and clipping the last item by 18-28px. It
     went unnoticed while the CTA floated mid-panel in dead space; pinning the CTA to the foot
     exposed it. dvh keeps the panel honest when mobile browser chrome shows/hides. */
  top:0;
  height:100vh;
  height:100dvh; }

.site-mobile-menu .site-mobile-menu-header{
  float:none; width:auto; flex:0 0 auto;
  display:flex; align-items:center; justify-content:flex-end;
  padding:15px 18px 0 22px; }
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close{ float:none; margin-top:0; }
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  padding:0; font-size:20px; line-height:1; color:#b9b6b0;
  border:1px solid rgba(255,255,255,.16); border-radius:2px;
  -webkit-tap-highlight-color:transparent;
  transition:background .25s ease, color .25s ease, border-color .25s ease; }
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span:hover,
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span:active{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); color:#fff; }

/* Monoline pinned the body to calc(100vh - 52px) with 150px of bottom padding,
   which is what left the CTA stranded in a field of dead space. Flex instead. */
.site-mobile-menu .site-mobile-menu-body{
  height:auto; flex:1 1 auto; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:6px 22px 26px; display:flex; flex-direction:column; }
.site-mobile-menu .site-nav-wrap{ display:flex; flex-direction:column; flex:1 1 auto; width:100%; }

/* ---- 4. Menu items: calm rhythm, hairline rules, generous targets ---- */
.site-mobile-menu .site-nav-wrap > li{ display:block; }
.site-mobile-menu .site-nav-wrap > li > a{
  position:relative; display:flex; align-items:center;
  min-height:54px; padding:14px 2px 14px 16px;
  font-family:'Poppins',sans-serif; font-size:16.5px; font-weight:400; letter-spacing:.3px;
  color:#e8e4da; border-bottom:1px solid rgba(255,255,255,.08);
  -webkit-tap-highlight-color:transparent;
  transition:color .22s ease, padding-left .22s ease; }
.site-mobile-menu .site-nav-wrap > li > a:hover,
.site-mobile-menu .site-nav-wrap > li > a:active{ color:var(--eg-gold-2); padding-left:20px; }
.site-mobile-menu .site-nav-wrap > li > a:focus-visible{
  outline:2px solid var(--eg-gold); outline-offset:-2px; color:var(--eg-gold-2); }

/* Current page: gold text + a quiet gold rule. Monoline's own active rule
   (`li .active`) is a descendant selector and never matched our `li.active > a`,
   so the mobile menu had no active state at all. */
.site-mobile-menu .site-nav-wrap > li.active > a{ color:var(--eg-gold-2); }
.site-mobile-menu .site-nav-wrap > li.active > a::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:17px; background:var(--eg-gold); }

/* ---- 5. CTA: pinned to the foot of the panel as a full-width button, not a
   seventh list item colliding with "Contact". margin-top:auto does this in CSS
   alone - the panel is a runtime clone of the desktop menu, so no markup moves
   and the desktop nav is untouched. ---- */
.site-mobile-menu .site-nav-wrap > li:last-child{ margin-top:auto; padding-top:26px; }
.site-mobile-menu .site-nav-wrap > li:last-child > a{ border-bottom:0; }
.site-mobile-menu .site-nav-wrap > li > a.eg-nav-cta{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:54px; padding:16px 18px !important;
  background:var(--eg-gold); color:#fff !important;
  font-size:12.5px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase;
  border:1px solid var(--eg-gold); border-radius:2px;
  box-shadow:0 14px 30px -16px rgba(184,150,63,.8);
  transition:background .25s ease, border-color .25s ease; }
.site-mobile-menu .site-nav-wrap > li > a.eg-nav-cta::before{ content:none; }
.site-mobile-menu .site-nav-wrap > li > a.eg-nav-cta:hover,
.site-mobile-menu .site-nav-wrap > li > a.eg-nav-cta:active{
  background:var(--eg-gold-2); border-color:var(--eg-gold-2); color:#fff !important; padding-left:18px !important; }