/* EBS apex shell — shared chrome: announcement bar, header, legal row, contact pill.
   Questrial everywhere. Tile styles live in each page's own <style> blocks. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Questrial','Poppins',Arial,sans-serif;background:#040604;color:#c9cfcb}
img{max-width:100%}
.ebs-skip{position:absolute;left:-9999px;top:0;background:#00E676;color:#00150a;padding:10px 18px;z-index:2000;font-size:14px;text-decoration:none;border-radius:0 0 10px 0}
.ebs-skip:focus{left:0}

/* Announcement bar */
.ebs-announce{background:hsl(111,100%,54%);color:#0a1408;text-align:center;padding:10px 16px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.ebs-announce p{margin:0}
.ebs-announce .ebs-announce-btn{background:#00150a;color:#00E676;text-decoration:none;padding:7px 16px;border-radius:999px;font-size:13.5px;font-weight:700;white-space:nowrap}
.ebs-announce .ebs-announce-btn:hover{background:#040604;color:#fff}

/* Header — STICKY per Yannick's Oct 29, 2026 direction (design change vs
   served parity: the Ecwid header scrolls away). position:sticky fits the
   shell structure: the header is a direct body-level element in normal flow
   on every ported page (the mobile panel lives INSIDE it, so it stays
   attached when open), no ancestor clips overflow, and sticky needs no
   body-padding compensation and causes no layout shift — the announcement
   bar above it scrolls away and the header pins at top:0. Appearance,
   heights (70px desktop / 60px at <=1180px) and z-index 900 are unchanged;
   sticky bottom bars (z 999) and the pill (z 1000) keep their stacking. */
.ebs-header{background:#000;color:#fff;position:sticky;top:0;z-index:900}
.ebs-header-in{max-width:1440px;margin:0 auto;height:70px;display:flex;align-items:center;gap:22px;padding:0 24px}
.ebs-logo{display:flex;align-items:center;flex:none;text-decoration:none;color:#fff}
.ebs-logo img{height:46px;width:auto;display:block}
.ebs-nav{display:flex;align-items:center;gap:20px;margin-left:auto}
.ebs-nav a{color:#fff;text-decoration:none;font-size:16px;white-space:nowrap}
.ebs-nav a:hover{color:#00E676}
.ebs-drop{position:relative}
.ebs-drop-toggle{color:#fff;font-size:16px;background:none;border:0;font-family:inherit;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:5px}
.ebs-drop-toggle:hover{color:#00E676}
.ebs-drop-menu{position:absolute;top:calc(100% + 14px);left:0;background:#0d120e;border:1px solid #2c3e33;border-radius:12px;padding:10px;min-width:280px;display:none;flex-direction:column;gap:2px;box-shadow:0 18px 44px rgba(0,0,0,.55);z-index:950}
.ebs-drop-menu a{padding:9px 12px;border-radius:8px;font-size:15.5px}
.ebs-drop-menu a:hover{background:#040604}
.ebs-drop:hover .ebs-drop-menu,.ebs-drop:focus-within .ebs-drop-menu,.ebs-drop.open .ebs-drop-menu{display:flex}
.ebs-icons{display:flex;align-items:center;gap:16px;margin-left:6px}
.ebs-icons a{color:#fff;display:inline-flex}
.ebs-icons svg{width:21px;height:21px;fill:currentColor;display:block}
.ebs-icons a:hover{color:#00E676}
.ebs-header .ebs-cta{border:1.5px solid rgba(255,255,255,.75);color:#fff!important;text-decoration:none;padding:10px 22px;border-radius:999px;font-size:15px;white-space:nowrap;margin-left:8px}
.ebs-header .ebs-cta:hover{border-color:#00E676;color:#00E676!important}
.ebs-burger{display:none;background:none;border:0;color:#fff;cursor:pointer;font-family:inherit;font-size:16px;align-items:center;gap:8px;margin-left:auto;padding:6px 0}
.ebs-burger svg{width:24px;height:24px;fill:currentColor;display:block}
.ebs-mobile-panel{display:none;background:#000;border-top:1px solid #1e2b23;padding:14px 24px 22px;flex-direction:column;max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto;overscroll-behavior:contain}
.ebs-mobile-panel.open{display:flex}
/* Mobile-menu scroll fix (Oct 29, 2026, Yannick's phone report): the open
   panel scrolls its OWN content (overflow-y:auto + max-height capped to the
   viewport under the header — 70px desktop header height here, 60px in the
   <=1180px block below where the burger/panel actually appear) and
   overscroll-behavior:contain keeps the gesture from chaining through.
   The background page is scroll-locked off the SAME .open class shell.js
   already toggles on the panel — no parallel state: closing via the burger
   or tapping any panel link removes .open and scrolling restores itself. */
html:has(.ebs-mobile-panel.open),html:has(.ebs-mobile-panel.open) body{overflow:hidden}
/* While the menu is open the header pins to the viewport top (it is already
   stuck there whenever the page is scrolled; this covers opening the menu
   at the very top, where the announcement bar would otherwise push the
   capped panel past the fold by the bar's height). Same .open state, and
   closing restores plain sticky with no trace. */
html:has(.ebs-mobile-panel.open) .ebs-header{position:fixed;top:0;left:0;right:0}
.ebs-mobile-panel a{color:#fff;text-decoration:none;font-size:16.5px;padding:10px 0;border-bottom:1px solid #141a15}
.ebs-mobile-panel a:hover{color:#00E676}
.ebs-mobile-panel .ebs-m-sub{padding-left:20px;font-size:15.5px;color:#c9cfcb}
.ebs-mobile-panel .ebs-m-group{color:#00E676;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;padding:16px 0 2px}
.ebs-mobile-panel .ebs-cta{align-self:flex-start;margin:16px 0 4px}
@media(max-width:1180px){
  .ebs-nav,.ebs-header .ebs-cta-desk{display:none}
  .ebs-burger{display:inline-flex}
  .ebs-header-in{height:60px}
  .ebs-logo img{height:38px}
  .ebs-mobile-panel{max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px)}
}

/* Anchor compensation for the sticky header: a DEFAULT scroll-margin for
   every fragment target, sized header height + 14px breathing room
   (84px desktop / 74px at <=1180px where the header is 60px). :where()
   keeps specificity at zero, so the per-page margins already in the tiles
   win untouched (#fi3-prequal / #hc4-contact / #hcn-msg at 90px, .hra-sec /
   .hwb-band sections at 70px — all still clear the stuck header). */
:where([id]){scroll-margin-top:84px}
@media(max-width:1180px){
  :where([id]){scroll-margin-top:74px}
}

/* Inline contact links — EBS green, always (Oct 29, 2026 fix).
   Root cause: classless tel:/sms:/mailto: anchors in copy sat in contexts
   with no color rule, so the UA default won (blue in Safari; on iOS even
   plain-text phone numbers get auto-linkified blue — the plain-text
   numbers in copy were also wrapped into real tel: anchors so every
   browser renders the same link). This rule pins every classless contact
   anchor (in-copy links + the shared tail footer's contact pair) to the
   EBS green #00E676 with a green underline, !important so no tile rule can
   lose the cascade the way the Oct 19 Ecwid lesson describes. Component
   anchors are deliberately NOT matched: text-link CTAs and solid buttons
   are classed (their designed colors stand), and the pill's icon anchors
   are compensated back to their exact prior rendering by the .hb-pill
   rule in the pill section below. */
html body a[href^="tel:"]:not([class]),html body a[href^="sms:"]:not([class]),html body a[href^="mailto:"]:not([class]){color:#00E676!important;text-decoration:underline!important;text-decoration-color:#00E676!important;text-underline-offset:2px}

/* Legal row (replaces the native Ecwid footer; no platform credit) */
.ebs-legal{background:#04070a;color:#9aa39d;text-align:center;padding:26px 24px 34px;font-size:14px;border-top:1px solid #1e2b23}
.ebs-legal p{margin:0 0 10px}
.ebs-legal nav{display:flex;gap:8px 22px;justify-content:center;flex-wrap:wrap}
.ebs-legal a{color:#9aa39d;text-decoration:none}
.ebs-legal a:hover{color:#00E676}

/* Floating contact pill — ONE global implementation.
   THREE buttons per Yannick's Oct 29, 2026 direction (supersedes the served
   2-button spec for the port): Call tel: / Text sms: / Email mailto:, in
   that order, one capsule; the auto-hide treats it as one widget.
   Ruled deviation from served: z-index 1000 (above sticky bars at 999).
   A-INT-06 auto-hide observer RESTORED Oct 29, 2026 per Yannick's direction
   (supersedes the earlier drop ruling): implemented in shell.js with the
   served mechanics — inline opacity/visibility/pointer-events + inline
   .25s transition set by the script; no hide rules live in this stylesheet,
   and position/z-index/offsets below are unchanged. */
.hb-pill{position:fixed;right:20px;bottom:20px;z-index:1000;display:flex;gap:8px;background:rgba(4,6,4,.92);border:1px solid rgba(0,230,118,.55);border-radius:999px;padding:8px;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.hb-pill a{width:42px;height:42px;border-radius:999px;background:#00E676;color:#00150a;display:flex;align-items:center;justify-content:center;text-decoration:none}
/* Pill condense control (Yannick, Oct 29): visitor can collapse the 3-button pill to one
   circular contact button; choice persists per session via sessionStorage (shell.js). */
.hb-pill .hb-condense{width:26px;height:42px;border:0;border-left:1px solid rgba(0,230,118,.35);background:transparent;color:#00E676;font:400 22px/1 Questrial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.hb-pill .hb-expand{display:none;width:42px;height:42px;border:0;border-radius:999px;background:#00E676;color:#00150a;cursor:pointer;padding:0;align-items:center;justify-content:center}
.hb-pill.is-condensed>a,.hb-pill.is-condensed .hb-condense{display:none}
.hb-pill.is-condensed .hb-expand{display:flex}
.hb-pill a:hover{background:#00c864}
.hb-pill a[href^="tel:"]:not([class]),.hb-pill a[href^="sms:"]:not([class]),.hb-pill a[href^="mailto:"]:not([class]){color:#00150a!important;text-decoration:none!important}
.hb-pill svg{width:20px;height:20px;fill:#00150a;display:block}
@media(max-width:800px){
  body.has-stickybar .hb-pill{bottom:88px}
  /* Page-scoped pill lifts: bar height + ~14px clearance, rounded up.
     business-funding-insurance.html: .hfu-sticky is 110.84px tall at 390px
     (wrapped two-line label), so the shared 88px offset overlapped it by
     22.84px. 110.84 + 14 = 124.84 -> 125px. */
  body.has-stickybar.pill-lift-125 .hb-pill{bottom:125px}
}
