@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');

/* ============================================================
   HEADER — THEME 5 (Mint Meadow) — FULLY TOKENIZED
   File: ebhdr6-5.css | HTML prefix: ebhdr6
   Botanical press identity:
     • pale mint-cream bar with engraved botanical rules
     • swaying mint leaves + drifting seed sparks
     • leaf-tipped nav links, dropdown as a herbarium card

   THEME IDENTITY (must match ebtb6-5):
     background: pale mint cream → mint gradient
     shapes:     leaf / arch + engraved rules
     decor:      pressed leaf sway, drifting seeds, specimen rules
     animation:  slow leaf sway, seed drift, engraved shimmer
     fonts:      Fraunces (botanical serif) + Amiri (Arabic)
     ============================================================ */

.ebhdr6-hdr {
  /* =========================================================
     GLOBAL / CORE
     ========================================================= */
  --ebhdr6-font-family: 'El Messiri', sans-serif;
  --ebhdr6-font-family-accent: 'El Messiri', sans-serif;

  --ebhdr6-animation-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ebhdr6-animation-infinite: infinite;
  --ebhdr6-animation-alternate: alternate;
  --ebhdr6-animation-alternate-reverse: alternate-reverse;
  --ebhdr6-animation-linear: linear;

  --ebhdr6-spacing-gap-xs: 0.45rem;
  --ebhdr6-spacing-gap-sm: 0.65rem;
  --ebhdr6-spacing-gap-md: 0.95rem;
  --ebhdr6-spacing-gap-lg: 1.25rem;

  --ebhdr6-blur-glass: 8px;
  --ebhdr6-blur-shell: 26px;
  --ebhdr6-radius-pill: 999px;
  --ebhdr6-radius-circle: 50%;
  --ebhdr6-radius-card: 12px;
  --ebhdr6-radius-chip: 4px;
  --ebhdr6-radius-leaf: 45% 55% 50% 50%;

  --ebhdr6-transition-duration: 0.3s;

  /* =========================================================
     COLORS — SECTION
     ========================================================= */
  --ebhdr6-hdr-background: linear-gradient(180deg, #f2fbf7 0%, #e6f6f0 55%, #d9f0e8 100%);
  --ebhdr6-hdr-accent-top-background: repeating-linear-gradient(90deg, rgba(47, 138, 104, 0.45) 0 1px, transparent 1px 14px);
  --ebhdr6-shell-orb-a-background: radial-gradient(circle, rgba(120, 205, 170, 0.3), transparent 70%);
  --ebhdr6-shell-orb-b-background: radial-gradient(circle, rgba(80, 170, 140, 0.2), transparent 70%);
  --ebhdr6-shell-spark-a-background: #2f8a68;
  --ebhdr6-shell-spark-b-background: #5cb894;
  --ebhdr6-shell-line-a-background: repeating-linear-gradient(90deg, rgba(47, 138, 104, 0.45) 0 1px, transparent 1px 12px);

  /* =========================================================
     COLORS — RAIL
     ========================================================= */
  --ebhdr6-rail-top-background: linear-gradient(90deg, transparent, rgba(47, 138, 104, 0.4), transparent);
  --ebhdr6-rail-bottom-background: linear-gradient(90deg, transparent, rgba(47, 138, 104, 0.4), transparent);

  /* =========================================================
     COLORS — LOGO
     ========================================================= */
  --ebhdr6-logo-img-border: 2px solid #5cb894;
  --ebhdr6-name-color: #2f7a5e;

  /* =========================================================
     COLORS — NAV LINK
     ========================================================= */
  --ebhdr6-link-color: rgba(47, 122, 94, 0.82);
  --ebhdr6-link-background: transparent;
  --ebhdr6-link-hover-color: #2f8a68;
  --ebhdr6-link-hover-background: rgba(63, 174, 131, 0.12);
  --ebhdr6-link-active-color: #ffffff;
  --ebhdr6-link-active-background: linear-gradient(180deg, #3fae83, #2e8a68);
  --ebhdr6-chev-color: #2f7a5e;
  --ebhdr6-chev-active-color: #3fae83;

  /* =========================================================
     COLORS — DROPDOWN
     ========================================================= */
  --ebhdr6-dd-background: rgba(255, 255, 255, 0.9);
  --ebhdr6-dd-border: 1px solid rgba(47, 138, 104, 0.3);
  --ebhdr6-dd-link-color: rgba(47, 122, 94, 0.85);
  --ebhdr6-dd-link-hover-background: rgba(63, 174, 131, 0.1);
  --ebhdr6-dd-link-hover-color: #2f8a68;
  --ebhdr6-dd-mobile-background: rgba(63, 174, 131, 0.08);

  /* =========================================================
     COLORS — HAMBURGER
     ========================================================= */
  --ebhdr6-ham-background: rgba(255, 255, 255, 0.6);
  --ebhdr6-ham-border: 1px solid rgba(47, 138, 104, 0.35);
  --ebhdr6-ham-hover-border: 1px solid #3fae83;
  --ebhdr6-ham-bar-background: #2f7a5e;

  /* =========================================================
     COLORS — OVERLAY
     ========================================================= */
  --ebhdr6-oly-background: rgba(47, 122, 94, 0.18);

  /* =========================================================
     COLORS — MOBILE NAV
     ========================================================= */
  --ebhdr6-nav-mobile-background: linear-gradient(180deg, #f2fbf7, #d9f0e8);
  --ebhdr6-nav-mobile-accent-color: #3fae83;
  --ebhdr6-top-border: 1px solid rgba(47, 138, 104, 0.3);
  --ebhdr6-tit-color: #2f8a68;
  --ebhdr6-x-background: rgba(63, 174, 131, 0.12);
  --ebhdr6-x-border: 1px solid #3fae83;
  --ebhdr6-x-color: #2f7a5e;

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --ebhdr6-logo-text-size: 1.28rem;
  --ebhdr6-logo-text-size-scroll: 1.08rem;
  --ebhdr6-logo-text-weight: 600;
  --ebhdr6-logo-letter-spacing: 0;

  --ebhdr6-nav-link-font-size: 0.88rem;
  --ebhdr6-nav-link-font-weight: 400;
  --ebhdr6-nav-link-letter-spacing: 0.01em;

  --ebhdr6-dd-link-font-size: 0.84rem;
  --ebhdr6-dd-link-font-weight: 400;
  --ebhdr6-dd-link-letter-spacing: 0.01em;

  --ebhdr6-tit-font-size: 1.1rem;
  --ebhdr6-tit-font-weight: 600;

  /* =========================================================
     SPACING
     ========================================================= */
  --ebhdr6-hdr-height: 74px;
  --ebhdr6-hdr-height-scroll: 60px;
  --ebhdr6-in-max-width: 1340px;
  --ebhdr6-in-padding-x: 1.45rem;

  --ebhdr6-logo-gap: 0.85rem;
  --ebhdr6-logo-img-size: 42px;
  --ebhdr6-logo-img-size-scroll: 33px;

  --ebhdr6-nav-list-gap: 0.4rem;
  --ebhdr6-nav-link-padding-y: 0.55rem;
  --ebhdr6-nav-link-padding-x: 1.15rem;
  --ebhdr6-nav-link-gap: 0.4rem;

  --ebhdr6-dd-offset-y: 12px;
  --ebhdr6-dd-min-width: 210px;
  --ebhdr6-dd-padding: 0.55rem;
  --ebhdr6-dd-link-padding-y: 0.65rem;
  --ebhdr6-dd-link-padding-x: 1.1rem;
  --ebhdr6-dd-link-hover-padding-x: 1.55rem;

  --ebhdr6-ham-size: 42px;
  --ebhdr6-ham-gap: 5px;
  --ebhdr6-ham-line-width: 19px;
  --ebhdr6-ham-line-width-short: 12px;
  --ebhdr6-ham-line-height: 2px;

  --ebhdr6-mobile-nav-width: 310px;
  --ebhdr6-mobile-nav-max-width: 86vw;
  --ebhdr6-mobile-nav-padding: 1.6rem;
  --ebhdr6-mobile-nav-offscreen: -120%;
  --ebhdr6-mobile-top-padding-bottom: 1.2rem;
  --ebhdr6-mobile-top-margin-bottom: 1.4rem;
  --ebhdr6-mobile-nav-link-padding-y: 0.85rem;
  --ebhdr6-mobile-nav-link-padding-x: 1.1rem;
  --ebhdr6-mobile-nav-link-font-size: 0.95rem;
  --ebhdr6-mobile-dd-margin-y: 0;
  --ebhdr6-mobile-dd-max-height: 300px;
  --ebhdr6-mobile-dd-padding: 0.45rem;
  --ebhdr6-mobile-dd-link-padding-y: 0.75rem;
  --ebhdr6-mobile-dd-link-padding-x: 1.3rem;

  --ebhdr6-close-btn-size: 38px;

  /* =========================================================
     LAYOUT
     ========================================================= */
  --ebhdr6-hdr-position: fixed;
  --ebhdr6-hdr-top: var(--ebtb5-topbar-height, 0px);
  --ebhdr6-hdr-inset-inline: 0;
  --ebhdr6-hdr-z-index: 900;
  --ebhdr6-hdr-isolation: isolate;
  --ebhdr6-hdr-overflow: visible;

  --ebhdr6-shell-position: absolute;
  --ebhdr6-shell-inset: 0;
  --ebhdr6-shell-z-index: 0;
  --ebhdr6-shell-overflow: hidden;
  --ebhdr6-shell-pointer-events: none;

  --ebhdr6-decor-position: absolute;

  --ebhdr6-shell-orb-a-width: 340px;
  --ebhdr6-shell-orb-a-height: 340px;
  --ebhdr6-shell-orb-a-top: -210px;
  --ebhdr6-shell-orb-a-inline-start: -120px;

  --ebhdr6-shell-orb-b-width: 290px;
  --ebhdr6-shell-orb-b-height: 290px;
  --ebhdr6-shell-orb-b-bottom: -180px;
  --ebhdr6-shell-orb-b-inline-end: -90px;

  --ebhdr6-shell-spark-a-width: 5px;
  --ebhdr6-shell-spark-a-height: 9px;
  --ebhdr6-shell-spark-a-top: 14px;
  --ebhdr6-shell-spark-a-inline-end: 20%;

  --ebhdr6-shell-spark-b-width: 4px;
  --ebhdr6-shell-spark-b-height: 7px;
  --ebhdr6-shell-spark-b-bottom: 12px;
  --ebhdr6-shell-spark-b-inline-start: 30%;

  --ebhdr6-shell-line-a-width: 62%;
  --ebhdr6-shell-line-a-height: 1px;
  --ebhdr6-shell-line-a-top: 46%;
  --ebhdr6-shell-line-a-inline-start: 19%;

  --ebhdr6-rail-top-position: absolute;
  --ebhdr6-rail-top-top: 0;
  --ebhdr6-rail-top-inset-inline: 0;
  --ebhdr6-rail-top-height: 1px;

  --ebhdr6-rail-bottom-position: absolute;
  --ebhdr6-rail-bottom-bottom: 0;
  --ebhdr6-rail-bottom-inset-inline: 0;
  --ebhdr6-rail-bottom-height: 1px;

  --ebhdr6-accent-top-position: absolute;
  --ebhdr6-accent-top-top: 0;
  --ebhdr6-accent-top-inset-inline: 0;
  --ebhdr6-accent-top-height: 4px;

  --ebhdr6-in-display: flex;
  --ebhdr6-in-align-items: center;
  --ebhdr6-in-justify-content: space-between;
  --ebhdr6-in-width: 100%;
  --ebhdr6-in-margin-inline: auto;
  --ebhdr6-in-position: relative;
  --ebhdr6-in-z-index: 1;

  --ebhdr6-logo-display: flex;
  --ebhdr6-logo-align-items: center;
  --ebhdr6-logo-flex-shrink: 0;
  --ebhdr6-logo-text-decoration: none;

  --ebhdr6-img-display: block;
  --ebhdr6-img-object-fit: cover;
  --ebhdr6-img-border-radius: var(--ebhdr6-radius-leaf);

  --ebhdr6-nav-display: flex;
  --ebhdr6-nav-align-items: center;

  --ebhdr6-top-display: none;

  --ebhdr6-list-display: flex;
  --ebhdr6-list-align-items: center;
  --ebhdr6-list-list-style: none;

  --ebhdr6-li-position: relative;

  --ebhdr6-a-display: inline-flex;
  --ebhdr6-a-align-items: center;
  --ebhdr6-a-text-decoration: none;
  --ebhdr6-a-white-space: nowrap;
  --ebhdr6-a-cursor: pointer;

  --ebhdr6-dd-position: absolute;
  --ebhdr6-dd-top: 100%;
  --ebhdr6-dd-inline-start: 50%;
  --ebhdr6-dd-z-index: 50;
  --ebhdr6-dd-list-style: none;
  --ebhdr6-dd-text-align: start;

  --ebhdr6-dd-a-display: block;
  --ebhdr6-dd-a-text-decoration: none;

  --ebhdr6-ham-display: none;
  --ebhdr6-ham-flex-direction: column;
  --ebhdr6-ham-justify-content: center;
  --ebhdr6-ham-align-items: center;
  --ebhdr6-ham-cursor: pointer;
  --ebhdr6-ham-z-index: 901;

  --ebhdr6-ham-span-display: block;

  --ebhdr6-oly-position: fixed;
  --ebhdr6-oly-inset: 0;
  --ebhdr6-oly-z-index: 890;

  --ebhdr6-lock-overflow: hidden;
  --ebhdr6-lock-position: fixed;
  --ebhdr6-lock-width: 100%;
  --ebhdr6-lock-height: 100%;

  /* =========================================================
     BORDER
     ========================================================= */
  --ebhdr6-hdr-border: 1px solid rgba(47, 138, 104, 0.2);
  --ebhdr6-hdr-border-radius: 0;

  --ebhdr6-logo-img-border-radius: var(--ebhdr6-radius-leaf);

  --ebhdr6-a-border: 1px solid transparent;
  --ebhdr6-a-border-radius: var(--ebhdr6-radius-leaf);

  --ebhdr6-dd-border-radius: var(--ebhdr6-radius-card);

  --ebhdr6-ham-border-radius: var(--ebhdr6-radius-leaf);

  /* =========================================================
     SHADOW
     ========================================================= */
  --ebhdr6-hdr-shadow: 0 6px 24px rgba(47, 138, 104, 0.16);
  --ebhdr6-dd-shadow: 0 16px 36px rgba(47, 122, 94, 0.2);
  --ebhdr6-ham-shadow: 0 4px 14px rgba(47, 138, 104, 0.18);

  /* =========================================================
     ANIMATION — DURATIONS / DELAYS / KEYFRAME VALUES
     ========================================================= */
  --ebhdr6-animation-orb-a-duration: 6s;
  --ebhdr6-animation-orb-b-duration: 7s;
  --ebhdr6-animation-spark-a-duration: 4s;
  --ebhdr6-animation-spark-a-delay: 0s;
  --ebhdr6-animation-spark-b-duration: 5s;
  --ebhdr6-animation-spark-b-delay: 1.4s;
  --ebhdr6-animation-sheen-duration: 9s;

  --ebhdr6-animation-orb-a-translate-x: 0px;
  --ebhdr6-animation-orb-a-translate-y: 12px;
  --ebhdr6-animation-orb-a-scale: 1.08;
  --ebhdr6-animation-orb-b-translate-x: -8px;
  --ebhdr6-animation-orb-b-translate-y: -8px;
  --ebhdr6-animation-orb-b-scale: 1.05;

  --ebhdr6-animation-seed-rise-distance: -42px;
  --ebhdr6-animation-seed-scale-start: 1;
  --ebhdr6-animation-seed-scale-end: 0.6;
  --ebhdr6-animation-seed-opacity-start: 0;
  --ebhdr6-animation-seed-opacity-visible: 0.7;
  --ebhdr6-animation-seed-opacity-end: 0;

  --ebhdr6-animation-sheen-distance: 28px;

  --ebhdr6-animation-chev-rotate: 180deg;

  /* =========================================================
     REVEAL / TRANSITIONS
     ========================================================= */
  --ebhdr6-transition-duration-fast: 0.25s;
  --ebhdr6-transition-duration-slow: 0.45s;
  --ebhdr6-hover-lift-distance: -2px;

  --ebhdr6-a-transition-duration: var(--ebhdr6-transition-duration-fast);
  --ebhdr6-dd-transition-duration: var(--ebhdr6-transition-duration-fast);
  --ebhdr6-ham-transition-duration: var(--ebhdr6-transition-duration-fast);

  /* =========================================================
     RESPONSIVE — BREAKPOINT TOKENS
     ========================================================= */
  --ebhdr6-in-padding-x-mobile: 1rem;
  --ebhdr6-logo-text-size-mobile: 1.05rem;
  --ebhdr6-logo-img-size-mobile: 34px;
  --ebhdr6-hdr-height-mobile: 62px;
  --ebhdr6-hdr-height-mobile-scroll: 54px;
  --ebhdr6-in-padding-x-tablet: 1.2rem;
  --ebhdr6-in-max-width-desktop: 1180px;
  --ebhdr6-nav-list-gap-desktop: 0.15rem;
  --ebhdr6-nav-link-padding-x-desktop: 0.95rem;
  --ebhdr6-in-max-width-wide: 1560px;

  /* =========================================================
     BASE RULES (desktop)
     ========================================================= */
  position: var(--ebhdr6-hdr-position);
  top: var(--ebhdr6-hdr-top);
  inset-inline: var(--ebhdr6-hdr-inset-inline);
  z-index: var(--ebhdr6-hdr-z-index);
  background: var(--ebhdr6-hdr-background);
  font-family: "El Messiri", sans-serif;
  border: var(--ebhdr6-hdr-border);
  box-shadow: var(--ebhdr6-hdr-shadow);
  isolation: var(--ebhdr6-hdr-isolation);
  overflow: var(--ebhdr6-hdr-overflow);
  transition: top var(--ebhdr6-transition-duration) var(--ebhdr6-animation-ease);
}

/* ============================ ACCENT (engraved rule) ============================ */
.ebhdr6-hdr::before {
  content: "";
  position: var(--ebhdr6-accent-top-position);
  top: var(--ebhdr6-accent-top-top);
  inset-inline: var(--ebhdr6-accent-top-inset-inline);
  height: var(--ebhdr6-accent-top-height);
  background: var(--ebhdr6-hdr-accent-top-background);
  background-size: 28px 100%;
  animation-name: ebhdr6-engrave;
  animation-duration: var(--ebhdr6-animation-sheen-duration);
  animation-timing-function: var(--ebhdr6-animation-linear);
  animation-iteration-count: var(--ebhdr6-animation-infinite);
}

/* ============================ SHELL ============================ */
.ebhdr6-shell {
  position: var(--ebhdr6-shell-position);
  inset: var(--ebhdr6-shell-inset);
  z-index: var(--ebhdr6-shell-z-index);
  overflow: var(--ebhdr6-shell-overflow);
  pointer-events: var(--ebhdr6-shell-pointer-events);
}

.ebhdr6-shell-orb {
  position: var(--ebhdr6-decor-position);
  border-radius: var(--ebhdr6-radius-circle);
  filter: blur(var(--ebhdr6-blur-shell));
}
.ebhdr6-shell-orb-a {
  width: var(--ebhdr6-shell-orb-a-width);
  height: var(--ebhdr6-shell-orb-a-height);
  top: var(--ebhdr6-shell-orb-a-top);
  inset-inline-start: var(--ebhdr6-shell-orb-a-inline-start);
  background: var(--ebhdr6-shell-orb-a-background);
  animation-name: ebhdr6-leaf-a;
  animation-duration: var(--ebhdr6-animation-orb-a-duration);
  animation-timing-function: var(--ebhdr6-animation-ease);
  animation-iteration-count: var(--ebhdr6-animation-infinite);
  animation-direction: var(--ebhdr6-animation-alternate);
}
.ebhdr6-shell-orb-b {
  width: var(--ebhdr6-shell-orb-b-width);
  height: var(--ebhdr6-shell-orb-b-height);
  bottom: var(--ebhdr6-shell-orb-b-bottom);
  inset-inline-end: var(--ebhdr6-shell-orb-b-inline-end);
  background: var(--ebhdr6-shell-orb-b-background);
  animation-name: ebhdr6-leaf-b;
  animation-duration: var(--ebhdr6-animation-orb-b-duration);
  animation-timing-function: var(--ebhdr6-animation-ease);
  animation-iteration-count: var(--ebhdr6-animation-infinite);
  animation-direction: var(--ebhdr6-animation-alternate-reverse);
}

.ebhdr6-shell-spark {
  position: var(--ebhdr6-decor-position);
  border-radius: var(--ebhdr6-radius-leaf);
}
.ebhdr6-shell-spark-a {
  width: var(--ebhdr6-shell-spark-a-width);
  height: var(--ebhdr6-shell-spark-a-height);
  top: var(--ebhdr6-shell-spark-a-top);
  inset-inline-end: var(--ebhdr6-shell-spark-a-inline-end);
  background: var(--ebhdr6-shell-spark-a-background);
  transform: rotate(32deg);
  animation-name: ebhdr6-seed;
  animation-duration: var(--ebhdr6-animation-spark-a-duration);
  animation-delay: var(--ebhdr6-animation-spark-a-delay);
  animation-timing-function: var(--ebhdr6-animation-ease);
  animation-iteration-count: var(--ebhdr6-animation-infinite);
}
.ebhdr6-shell-spark-b {
  width: var(--ebhdr6-shell-spark-b-width);
  height: var(--ebhdr6-shell-spark-b-height);
  bottom: var(--ebhdr6-shell-spark-b-bottom);
  inset-inline-start: var(--ebhdr6-shell-spark-b-inline-start);
  background: var(--ebhdr6-shell-spark-b-background);
  transform: rotate(-24deg);
  animation-name: ebhdr6-seed;
  animation-duration: var(--ebhdr6-animation-spark-b-duration);
  animation-delay: var(--ebhdr6-animation-spark-b-delay);
  animation-timing-function: var(--ebhdr6-animation-ease);
  animation-iteration-count: var(--ebhdr6-animation-infinite);
}

.ebhdr6-shell-line-a {
  position: var(--ebhdr6-decor-position);
  width: var(--ebhdr6-shell-line-a-width);
  height: var(--ebhdr6-shell-line-a-height);
  top: var(--ebhdr6-shell-line-a-top);
  inset-inline-start: var(--ebhdr6-shell-line-a-inline-start);
  background: var(--ebhdr6-shell-line-a-background);
  background-size: 12px 1px;
}

/* ============================ RAIL ============================ */
.ebhdr6-rail-top {
  position: var(--ebhdr6-rail-top-position);
  top: var(--ebhdr6-rail-top-top);
  inset-inline: var(--ebhdr6-rail-top-inset-inline);
  height: var(--ebhdr6-rail-top-height);
  background: var(--ebhdr6-rail-top-background);
}
.ebhdr6-rail-bottom {
  position: var(--ebhdr6-rail-bottom-position);
  bottom: var(--ebhdr6-rail-bottom-bottom);
  inset-inline: var(--ebhdr6-rail-bottom-inset-inline);
  height: var(--ebhdr6-rail-bottom-height);
  background: var(--ebhdr6-rail-bottom-background);
}

/* ============================ IN ============================ */
.ebhdr6-in {
  display: var(--ebhdr6-in-display);
  align-items: var(--ebhdr6-in-align-items);
  justify-content: var(--ebhdr6-in-justify-content);
  width: var(--ebhdr6-in-width);
  max-width: var(--ebhdr6-in-max-width);
  margin-inline: var(--ebhdr6-in-margin-inline);
  padding-inline: var(--ebhdr6-in-padding-x);
  height: var(--ebhdr6-hdr-height);
  position: var(--ebhdr6-in-position);
  z-index: var(--ebhdr6-in-z-index);
  transition: height var(--ebhdr6-transition-duration) var(--ebhdr6-animation-ease);
}
.ebhdr6-hdr.ebhdr6-scroll { top: 0; }
.ebhdr6-scroll .ebhdr6-in {
  height: var(--ebhdr6-hdr-height-scroll);
}

/* ============================ LOGO ============================ */
.ebhdr6-logo {
  display: var(--ebhdr6-logo-display);
  align-items: var(--ebhdr6-logo-align-items);
  gap: var(--ebhdr6-logo-gap);
  flex-shrink: var(--ebhdr6-logo-flex-shrink);
  text-decoration: var(--ebhdr6-logo-text-decoration);
}
.ebhdr6-img {
  display: var(--ebhdr6-img-display);
  width: var(--ebhdr6-logo-img-size);
  height: var(--ebhdr6-logo-img-size);
  object-fit: var(--ebhdr6-img-object-fit);
  border: var(--ebhdr6-logo-img-border);
  border-radius: var(--ebhdr6-logo-img-border-radius);
  transition: all var(--ebhdr6-transition-duration) var(--ebhdr6-animation-ease);
}
.ebhdr6-scroll .ebhdr6-img {
  width: var(--ebhdr6-logo-img-size-scroll);
  height: var(--ebhdr6-logo-img-size-scroll);
}
.ebhdr6-name {
  font-family: "El Messiri", sans-serif;
  font-size: var(--ebhdr6-logo-text-size);
  font-weight: var(--ebhdr6-logo-text-weight);
  letter-spacing: var(--ebhdr6-logo-letter-spacing);
  color: var(--ebhdr6-name-color);
  transition: font-size var(--ebhdr6-transition-duration) var(--ebhdr6-animation-ease);
}
.ebhdr6-scroll .ebhdr6-name {
  font-size: var(--ebhdr6-logo-text-size-scroll);
}

/* ============================ NAV ============================ */
.ebhdr6-nav {
  display: var(--ebhdr6-nav-display);
  align-items: var(--ebhdr6-nav-align-items);
}
.ebhdr6-top { display: var(--ebhdr6-top-display); }
.ebhdr6-list {
  display: var(--ebhdr6-list-display);
  align-items: var(--ebhdr6-list-align-items);
  gap: var(--ebhdr6-nav-list-gap);
  list-style: var(--ebhdr6-list-list-style);
  margin: 0;
  padding: 0;
}
.ebhdr6-li { position: var(--ebhdr6-li-position); }
.ebhdr6-ham, .ebhdr6-x, .ebhdr6-a { touch-action: manipulation; }

.ebhdr6-a {
  display: var(--ebhdr6-a-display);
  align-items: var(--ebhdr6-a-align-items);
  gap: var(--ebhdr6-nav-link-gap);
  padding: var(--ebhdr6-nav-link-padding-y) var(--ebhdr6-nav-link-padding-x);
  font-family: "El Messiri", sans-serif;
  font-size: var(--ebhdr6-nav-link-font-size);
  font-weight: var(--ebhdr6-nav-link-font-weight);
  letter-spacing: var(--ebhdr6-nav-link-letter-spacing);
  color: var(--ebhdr6-link-color);
  background: var(--ebhdr6-link-background);
  border: var(--ebhdr6-a-border);
  border-radius: var(--ebhdr6-a-border-radius);
  text-decoration: var(--ebhdr6-a-text-decoration);
  white-space: var(--ebhdr6-a-white-space);
  cursor: var(--ebhdr6-a-cursor);
  position: relative;
  transition: all var(--ebhdr6-a-transition-duration) var(--ebhdr6-animation-ease);
}
.ebhdr6-a::after {
  content: "";
  position: absolute;
  inset-inline: 0.9rem;
  bottom: 0.35rem;
  height: 1px;
  background: var(--ebhdr6-chev-active-color);
  opacity: 0;
  transition: opacity var(--ebhdr6-a-transition-duration) var(--ebhdr6-animation-ease);
}
.ebhdr6-a:hover {
  color: var(--ebhdr6-link-hover-color);
  background: var(--ebhdr6-link-hover-background);
}
.ebhdr6-a:hover::after { opacity: 1; }
.ebhdr6-a.ebhdr6-active {
  color: var(--ebhdr6-link-active-color);
  background: var(--ebhdr6-link-active-background);
}
.ebhdr6-a.ebhdr6-active::after { display: none; }

.ebhdr6-chev {
  stroke: var(--ebhdr6-chev-color);
  transition: transform var(--ebhdr6-transition-duration) var(--ebhdr6-animation-ease);
}
.ebhdr6-sub-li:hover .ebhdr6-chev,
.ebhdr6-sub-li.ebhdr6-open .ebhdr6-chev {
  transform: rotate(var(--ebhdr6-animation-chev-rotate));
  stroke: var(--ebhdr6-chev-active-color);
}

/* ============================ DROPDOWN ============================ */
.ebhdr6-dd {
  position: var(--ebhdr6-dd-position);
  top: var(--ebhdr6-dd-top);
  inset-inline-start: 0;
  z-index: var(--ebhdr6-dd-z-index);
  transform: translateY(var(--ebhdr6-dd-offset-y));
  background: var(--ebhdr6-dd-background);
  border: var(--ebhdr6-dd-border);
  border-radius: var(--ebhdr6-dd-border-radius);
  box-shadow: var(--ebhdr6-dd-shadow);
  min-width: var(--ebhdr6-dd-min-width);
  list-style: var(--ebhdr6-dd-list-style);
  padding: var(--ebhdr6-dd-padding);
  text-align: var(--ebhdr6-dd-text-align);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(var(--ebhdr6-blur-glass));
  -webkit-backdrop-filter: blur(var(--ebhdr6-blur-glass));
  transition: opacity var(--ebhdr6-dd-transition-duration) var(--ebhdr6-animation-ease),
    transform var(--ebhdr6-dd-transition-duration) var(--ebhdr6-animation-ease),
    visibility var(--ebhdr6-dd-transition-duration);
}
.ebhdr6-sub-li.ebhdr6-open .ebhdr6-dd {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.ebhdr6-dd a {
  display: var(--ebhdr6-dd-a-display);
  padding: var(--ebhdr6-dd-link-padding-y) var(--ebhdr6-dd-link-padding-x);
  font-family: "El Messiri", sans-serif;
  font-size: var(--ebhdr6-dd-link-font-size);
  font-weight: var(--ebhdr6-dd-link-font-weight);
  letter-spacing: var(--ebhdr6-dd-link-letter-spacing);
  color: var(--ebhdr6-dd-link-color);
  text-decoration: var(--ebhdr6-dd-a-text-decoration);
  border-radius: var(--ebhdr6-radius-chip);
  transition: all var(--ebhdr6-a-transition-duration) var(--ebhdr6-animation-ease);
}
.ebhdr6-dd a:hover {
  background: var(--ebhdr6-dd-link-hover-background);
  color: var(--ebhdr6-dd-link-hover-color);
  padding-inline-start: var(--ebhdr6-dd-link-hover-padding-x);
}

/* ============================ HAMBURGER ============================ */
.ebhdr6-ham {
  display: var(--ebhdr6-ham-display);
  flex-direction: var(--ebhdr6-ham-flex-direction);
  justify-content: var(--ebhdr6-ham-justify-content);
  align-items: var(--ebhdr6-ham-align-items);
  gap: var(--ebhdr6-ham-gap);
  width: var(--ebhdr6-ham-size);
  height: var(--ebhdr6-ham-size);
  background: var(--ebhdr6-ham-background);
  border: var(--ebhdr6-ham-border);
  border-radius: var(--ebhdr6-ham-border-radius);
  box-shadow: var(--ebhdr6-ham-shadow);
  cursor: var(--ebhdr6-ham-cursor);
  z-index: var(--ebhdr6-ham-z-index);
  transition: all var(--ebhdr6-ham-transition-duration) var(--ebhdr6-animation-ease);
}
.ebhdr6-ham:hover { border: var(--ebhdr6-ham-hover-border); }
.ebhdr6-ham span {
  display: var(--ebhdr6-ham-span-display);
  width: var(--ebhdr6-ham-line-width);
  height: var(--ebhdr6-ham-line-height);
  background: var(--ebhdr6-ham-bar-background);
  border-radius: var(--ebhdr6-radius-pill);
  transition: all var(--ebhdr6-transition-duration) var(--ebhdr6-animation-ease);
}
.ebhdr6-ham span:nth-child(2) { width: var(--ebhdr6-ham-line-width-short); }
.ebhdr6-ham.ebhdr6-open {
  visibility: hidden;
  pointer-events: none;
}

/* ============================ OVERLAY ============================ */
.ebhdr6-oly {
  position: var(--ebhdr6-oly-position);
  inset: var(--ebhdr6-oly-inset);
  background: var(--ebhdr6-oly-background);
  z-index: var(--ebhdr6-oly-z-index);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ebhdr6-transition-duration-slow) var(--ebhdr6-animation-ease),
    visibility var(--ebhdr6-transition-duration-slow) var(--ebhdr6-animation-ease);
}
.ebhdr6-oly.ebhdr6-show {
  opacity: 1;
  visibility: visible;
}

/* ============================ BODY LOCK ============================ */
.ebhdr6-lock {
  overflow: var(--ebhdr6-lock-overflow);
  position: var(--ebhdr6-lock-position);
  width: var(--ebhdr6-lock-width);
  height: var(--ebhdr6-lock-height);
}

/* ============================ KEYFRAMES ============================ */
@keyframes ebhdr6-leaf-a {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(var(--ebhdr6-animation-orb-a-translate-x), var(--ebhdr6-animation-orb-a-translate-y)) scale(var(--ebhdr6-animation-orb-a-scale)); }
}
@keyframes ebhdr6-leaf-b {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(var(--ebhdr6-animation-orb-b-translate-x), var(--ebhdr6-animation-orb-b-translate-y)) scale(var(--ebhdr6-animation-orb-b-scale)); }
}
@keyframes ebhdr6-seed {
  0% { transform: translateY(0) scale(var(--ebhdr6-animation-seed-scale-start)); opacity: var(--ebhdr6-animation-seed-opacity-start); }
  20% { opacity: var(--ebhdr6-animation-seed-opacity-visible); }
  100% { transform: translateY(var(--ebhdr6-animation-seed-rise-distance)) scale(var(--ebhdr6-animation-seed-scale-end)); opacity: var(--ebhdr6-animation-seed-opacity-end); }
}
@keyframes ebhdr6-engrave {
  0% { background-position-x: 0; }
  100% { background-position-x: var(--ebhdr6-animation-sheen-distance); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Mini Screen */
@media (max-width: 320px) {
  .ebhdr6-hdr {
    --ebhdr6-in-padding-x: var(--ebhdr6-in-padding-x-mobile);
    --ebhdr6-logo-text-size: var(--ebhdr6-logo-text-size-mobile);
    --ebhdr6-logo-img-size: var(--ebhdr6-logo-img-size-mobile);
    --ebhdr6-hdr-height: var(--ebhdr6-hdr-height-mobile);
    --ebhdr6-hdr-height-scroll: var(--ebhdr6-hdr-height-mobile-scroll);
    --ebhdr6-mobile-nav-width: 100%;
  }
  .ebhdr6-shell-spark-a,
  .ebhdr6-shell-spark-b,
  .ebhdr6-shell-line-a { display: none !important; }
}
/* Small Phone */
@media (min-width: 321px) and (max-width: 375px) {
  .ebhdr6-hdr {
    --ebhdr6-in-padding-x: var(--ebhdr6-in-padding-x-mobile);
    --ebhdr6-logo-text-size: var(--ebhdr6-logo-text-size-mobile);
    --ebhdr6-logo-img-size: var(--ebhdr6-logo-img-size-mobile);
    --ebhdr6-hdr-height: var(--ebhdr6-hdr-height-mobile);
    --ebhdr6-hdr-height-scroll: var(--ebhdr6-hdr-height-mobile-scroll);
  }
  .ebhdr6-shell-spark-a,
  .ebhdr6-shell-spark-b,
  .ebhdr6-shell-line-a { display: none !important; }
}
/* Medium Phone */
@media (min-width: 376px) and (max-width: 425px) {
  .ebhdr6-hdr {
    --ebhdr6-in-padding-x: var(--ebhdr6-in-padding-x-mobile);
    --ebhdr6-logo-text-size: var(--ebhdr6-logo-text-size-mobile);
    --ebhdr6-logo-img-size: var(--ebhdr6-logo-img-size-mobile);
    --ebhdr6-hdr-height: var(--ebhdr6-hdr-height-mobile);
    --ebhdr6-hdr-height-scroll: var(--ebhdr6-hdr-height-mobile-scroll);
  }
  .ebhdr6-shell-spark-a,
  .ebhdr6-shell-spark-b,
  .ebhdr6-shell-line-a { display: none !important; }
}
/* Large Phone */
@media (min-width: 426px) and (max-width: 480px) {
  .ebhdr6-hdr {
    --ebhdr6-in-padding-x: var(--ebhdr6-in-padding-x-mobile);
    --ebhdr6-logo-text-size: var(--ebhdr6-logo-text-size-mobile);
    --ebhdr6-logo-img-size: var(--ebhdr6-logo-img-size-mobile);
    --ebhdr6-hdr-height: var(--ebhdr6-hdr-height-mobile);
    --ebhdr6-hdr-height-scroll: var(--ebhdr6-hdr-height-mobile-scroll);
  }
  .ebhdr6-shell-spark-a,
  .ebhdr6-shell-spark-b,
  .ebhdr6-shell-line-a { display: none !important; }
}
/* Small Tablet */
@media (min-width: 481px) and (max-width: 600px) {
  .ebhdr6-hdr {
    --ebhdr6-in-padding-x: var(--ebhdr6-in-padding-x-mobile);
    --ebhdr6-logo-text-size: var(--ebhdr6-logo-text-size-mobile);
    --ebhdr6-logo-img-size: var(--ebhdr6-logo-img-size-mobile);
    --ebhdr6-hdr-height: var(--ebhdr6-hdr-height-mobile);
    --ebhdr6-hdr-height-scroll: var(--ebhdr6-hdr-height-mobile-scroll);
  }
  .ebhdr6-shell-spark-a,
  .ebhdr6-shell-spark-b { display: none !important; }
}
/* Medium Tablet */
@media (min-width: 601px) and (max-width: 768px) {
  .ebhdr6-hdr {
    --ebhdr6-in-padding-x: var(--ebhdr6-in-padding-x-mobile);
    --ebhdr6-hdr-height: var(--ebhdr6-hdr-height-mobile);
    --ebhdr6-hdr-height-scroll: var(--ebhdr6-hdr-height-mobile-scroll);
  }
  .ebhdr6-shell-spark-a,
  .ebhdr6-shell-spark-b { display: none !important; }
}
/* Large Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .ebhdr6-hdr {
    --ebhdr6-in-padding-x: var(--ebhdr6-in-padding-x-tablet);
  }
  .ebhdr6-shell-spark-a,
  .ebhdr6-shell-spark-b { display: none !important; }
}
/* Small Desktop */
@media (min-width: 1025px) and (max-width: 1280px) {
  .ebhdr6-hdr {
    --ebhdr6-in-max-width: var(--ebhdr6-in-max-width-desktop);
    --ebhdr6-nav-list-gap: var(--ebhdr6-nav-list-gap-desktop);
    --ebhdr6-nav-link-padding-x: var(--ebhdr6-nav-link-padding-x-desktop);
  }
}
/* Medium Desktop */
@media (min-width: 1281px) and (max-width: 1440px) {
  /* base */
}
/* Large Desktop */
@media (min-width: 1441px) and (max-width: 1920px) {
  /* base */
}
/* Extra Large Screens */
@media (min-width: 1921px) {
  .ebhdr6-hdr {
    --ebhdr6-in-max-width: var(--ebhdr6-in-max-width-wide);
  }
}

/* ============================================================
   MOBILE DRAWER (<= 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .ebhdr6-ham {
    display: flex;
  }
  .ebhdr6-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 0;
    inset-inline-start: var(--ebhdr6-mobile-nav-offscreen);
    width: var(--ebhdr6-mobile-nav-width);
    max-width: var(--ebhdr6-mobile-nav-max-width);
    height: 100%;
    background: var(--ebhdr6-nav-mobile-background);
    z-index: 950;
    padding: var(--ebhdr6-mobile-nav-padding);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-inline-end: 3px solid var(--ebhdr6-nav-mobile-accent-color);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: inset-inline-start var(--ebhdr6-transition-duration-slow) var(--ebhdr6-animation-ease),
      opacity var(--ebhdr6-transition-duration-fast) var(--ebhdr6-animation-ease),
      visibility var(--ebhdr6-transition-duration-fast) var(--ebhdr6-animation-ease);
  }
  .ebhdr6-nav.ebhdr6-open {
    inset-inline-start: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .ebhdr6-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--ebhdr6-mobile-top-padding-bottom);
    margin-bottom: var(--ebhdr6-mobile-top-margin-bottom);
    border-bottom: var(--ebhdr6-top-border);
  }
  .ebhdr6-tit {
    font-family: "El Messiri", sans-serif;
    font-size: var(--ebhdr6-tit-font-size);
    font-weight: var(--ebhdr6-tit-font-weight);
    color: var(--ebhdr6-tit-color);
  }
  .ebhdr6-x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ebhdr6-close-btn-size);
    height: var(--ebhdr6-close-btn-size);
    background: var(--ebhdr6-x-background);
    border: var(--ebhdr6-x-border);
    border-radius: var(--ebhdr6-radius-chip);
    color: var(--ebhdr6-x-color);
    cursor: pointer;
  }
  .ebhdr6-list {
    flex-direction: column;
    gap: var(--ebhdr6-spacing-gap-xs);
  }
  .ebhdr6-a {
    width: 100%;
    padding: var(--ebhdr6-mobile-nav-link-padding-y) var(--ebhdr6-mobile-nav-link-padding-x);
    font-size: var(--ebhdr6-mobile-nav-link-font-size);
    justify-content: space-between;
    border-radius: var(--ebhdr6-radius-chip);
  }
  .ebhdr6-a::after { inset-inline: 1rem; }
  .ebhdr6-dd {
    position: static;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    background: var(--ebhdr6-dd-mobile-background);
    padding: 0;
    margin: var(--ebhdr6-mobile-dd-margin-y) 0;
    max-height: 0;
    overflow: hidden;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: max-height var(--ebhdr6-transition-duration) var(--ebhdr6-animation-ease);
  }
  .ebhdr6-sub-li.ebhdr6-open .ebhdr6-dd {
    max-height: var(--ebhdr6-mobile-dd-max-height);
    padding: var(--ebhdr6-mobile-dd-padding);
  }
  .ebhdr6-dd a {
    padding: var(--ebhdr6-mobile-dd-link-padding-y) var(--ebhdr6-mobile-dd-link-padding-x);
  }
  .ebhdr6-btn .ebhdr6-chev {
    margin-inline-start: auto;
  }
}

/* ============================================================
   MOBILE DRAWER — THEME 5 PERSONALITY (Botanical)
   ============================================================ */
@media (max-width: 1024px) {
  .ebhdr6-nav {
    border-inline-end: none;
    background:
      radial-gradient(circle at 88% 12%, rgba(63, 174, 131, 0.16), transparent 40%),
      radial-gradient(circle at 8% 88%, rgba(92, 184, 148, 0.18), transparent 42%),
      linear-gradient(180deg, #f2fbf7 0%, #d9f0e8 100%);
    border-start-start-radius: 2.8rem 1.4rem;
    border-end-start-radius: 2.8rem 1.4rem;
    box-shadow: -18px 0 46px rgba(47, 138, 104, 0.2);
    padding: 2rem 1.6rem;
  }
  .ebhdr6-nav::before {
    content: "";
    position: absolute;
    top: 1.4rem;
    inset-inline-end: 1.6rem;
    width: 46px;
    height: 46px;
    background: linear-gradient(150deg, #5cb894 0%, #2e8a68 100%);
    border-radius: 100% 0 100% 0;
    transform: rotate(-18deg);
    opacity: 0.8;
    box-shadow: 0 6px 14px rgba(46, 138, 104, 0.3);
    pointer-events: none;
  }
  .ebhdr6-nav::after {
    content: "";
    position: absolute;
    bottom: 1.2rem;
    inset-inline-start: 1.3rem;
    width: 30px;
    height: 30px;
    border: 3px solid rgba(63, 174, 131, 0.4);
    border-radius: 100% 0 100% 0;
    transform: rotate(18deg);
    pointer-events: none;
  }
  .ebhdr6-top {
    border-bottom: 2px dashed rgba(47, 138, 104, 0.4);
    padding-bottom: 1.1rem;
    margin-bottom: 1.2rem;
  }
  .ebhdr6-tit {
    font-family: "El Messiri", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #2f8a68;
  }
  .ebhdr6-tit::before {
    content: "❁";
    margin-inline-end: 0.45rem;
    color: #3fae83;
  }
  .ebhdr6-x {
    border-radius: 100% 0 100% 0;
    background: rgba(63, 174, 131, 0.16);
  }
  .ebhdr6-list { gap: 0.4rem; }
  .ebhdr6-li:not(.ebhdr6-sub-li) .ebhdr6-a::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-inline-end: 0.6rem;
    background: linear-gradient(150deg, #5cb894, #2e8a68);
    border-radius: 100% 0 100% 0;
    transform: rotate(-14deg);
  }
  .ebhdr6-a {
    border-radius: 0.5rem 0.5rem 0.9rem 0.3rem;
    border-bottom: 1px dashed rgba(47, 138, 104, 0.3);
    padding: 0.75rem 1rem;
    transition: all 0.25s var(--ebhdr6-animation-ease);
  }
  .ebhdr6-a::after { display: none !important; }
  .ebhdr6-a:hover,
  .ebhdr6-a.ebhdr6-active {
    background: linear-gradient(160deg, #3fae83, #2e8a68);
    color: #fff;
    border-bottom-color: transparent;
    box-shadow: 0 8px 18px rgba(46, 138, 104, 0.3);
  }
  .ebhdr6-dd {
    background: rgba(255, 255, 255, 0.5);
    border: 1px dashed rgba(47, 138, 104, 0.4);
    border-radius: 0.6rem 0.6rem 1.2rem 0.4rem;
    margin-inline: 0.5rem;
  }
  .ebhdr6-dd a:hover {
    background: rgba(63, 174, 131, 0.12);
    color: #2f7a5e;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ebhdr6-hdr::before,
  .ebhdr6-shell-orb,
  .ebhdr6-shell-spark { animation: none !important; }
}