/* ============================================================
   EDEN PREMIUM LAYER
   Site-wide refinements for the converted inner pages so they
   share the home page's premium look: fixed container gutters,
   natural flex behaviour, unified type scale, premium FAQ.
   Loaded after the per-page stylesheets.
   ============================================================ */

/* top-level page-content containers must not add gutters (full-bleed
   sections handle their own width). Scoped to #content/.ast-container
   so the global HEADER and FOOTER templates keep their own side
   padding — they are e-parents too but render outside #content. */
#content .elementor > .e-con.e-parent,
.ast-container .elementor > .e-con.e-parent {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ============================================================
   REMOVE SECTION GAPS (page content only)
   The converter's wrapper container is a flex column that
   Elementor gives a 20px gap + 10px top/bottom padding, so every
   section sits 20px apart with 10px above the hero and below the
   last section. The original design had sections flush (each
   section supplies its own internal padding). Scoped to #content
   / .ast-container so the header & footer templates keep theirs.
   ============================================================ */
#content .elementor > .e-con.e-parent,
.ast-container .elementor > .e-con.e-parent {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
}
#content .elementor,
.ast-container .elementor {
  gap: 0 !important;
  row-gap: 0 !important;
}

/* ---------- unified premium type scale (matches the home page) ---------- */
.eden-conv h2,
section[class*="eden-"] h2,
.eden-conv h2.elementor-heading-title {
  font-family: 'Fahkwang', sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(30px, 3.6vw, 48px) !important;
  line-height: 1.18 !important;
}
.eden-conv h3,
section[class*="eden-"] h3,
.eden-conv h3.elementor-heading-title {
  font-size: clamp(19px, 1.7vw, 24px) !important;
  line-height: 1.35 !important;
}
.eden-conv h4,
section[class*="eden-"] h4,
.eden-conv h4.elementor-heading-title {
  font-size: 16px !important;
  line-height: 1.45 !important;
}

/* page banners (ruma-hero) always full-bleed and elegant */
.ruma-hero {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.ruma-hero h1 {
  font-family: 'Fahkwang', serif !important;
  font-weight: 300 !important;
}

/* ============================================================
   UNIVERSAL FLEX-ROW FIX
   The converter turned hand-written <div style="display:flex">
   rows into Elementor containers, which default to
   flex-direction:column — dropping toggles/icons below their
   label. Restore row direction for the known row patterns on
   every page family (eden-faq, eden-acne-faq, eden-hydra-faq,
   eden-qswitch-faq, eden-acnec-faq, eden-btx-faq, eden-sb-faq…).
   Higher specificity than Elementor's default, but only matches
   the question / meta / tag rows — never the column lists.
   ============================================================ */
.e-con.eden-conv[class*="faq-q"],
.e-con.eden-conv[class*="-tag"],
.e-con.eden-conv[class*="-eyebrow"],
.e-con.eden-conv[class*="-meta"],
.e-con.eden-conv[class*="-labels"],
.e-con.eden-conv[class*="-badge"] {
  flex-direction: row !important;
  align-items: center;
}
.e-con.eden-conv[class*="faq-q"] {
  justify-content: space-between;
  cursor: pointer;
}

/* ---------- premium FAQ (eden-faq family) ---------- */
.eden-faq-q {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  text-align: left;
}
.eden-faq-q .elementor-widget-heading { flex: 1 1 auto; min-width: 0; }
.eden-faq-q h4,
.eden-faq-q h4.elementor-heading-title {
  margin: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  text-align: left;
}
.eden-faq-toggle {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(175, 178, 136, .18);
  color: #404427;
  font-size: 18px;
  font-weight: 500;
  flex: 0 0 auto;
  line-height: 1;
  transition: .25s ease;
}
.eden-faq-item {
  background: #fff;
  border: 1px solid rgba(64, 68, 39, .08);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(64, 68, 39, .06);
  transition: box-shadow .25s ease;
}
.eden-faq-item:hover { box-shadow: 0 14px 30px rgba(64, 68, 39, .1); }
.eden-faq-item:hover .eden-faq-toggle { background: rgba(175, 178, 136, .32); }
.eden-faq-a p { font-size: 14.5px; line-height: 1.7; }

/* accordion "treatments we offer" toggles get the same circle look */
.eden-pig-toggle {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(175, 178, 136, .18);
  color: #404427;
  flex: 0 0 auto;
  line-height: 1;
}

/* ---------- universal FAQ CTA pill (some pages used a generic
   .eden-faq-cta class their page CSS never styled) ---------- */
[class*="faq-cta-wrap"] { text-align: center; margin-top: clamp(36px, 4vw, 48px); width: 100%; }
a[class*="faq-cta"] {
  display: inline-block;
  width: auto;
  max-width: none;
  padding: 14px 40px !important;
  background: var(--riffle, #404427) !important;
  border: 1px solid var(--riffle, #404427) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-radius: 999px !important;
  transition: all .3s ease;
  box-shadow: 0 4px 15px rgba(64,68,39,.15);
}
a[class*="faq-cta"]:hover {
  background: transparent !important;
  color: var(--riffle, #404427) !important;
  box-shadow: none;
}

/* ============================================================
   ADDED FAQ SECTIONS (.eden-gfaq) — self-contained premium FAQ
   for pages that had none. Scoped so it never touches the
   existing per-page FAQ families.
   ============================================================ */
.eden-gfaq {
  padding: clamp(60px, 8vw, 100px) 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--snow, #F4F3F2) 100%);
}
.eden-gfaq .eden-faq-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}
.eden-gfaq .eden-faq-head { text-align: center; margin-bottom: 36px; }
.eden-gfaq .eden-faq-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--pear, #AFB288); font-weight: 600; margin-bottom: 12px;
}
.eden-gfaq .eden-faq-head h2 {
  font-family: 'Fahkwang', sans-serif; font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px); color: var(--ink, #3C3C3B); margin: 0 0 12px;
}
.eden-gfaq .eden-faq-head p {
  font-size: 15px; line-height: 1.7; color: var(--ink, #3C3C3B);
  opacity: .8; max-width: 620px; margin: 0 auto;
}
.eden-gfaq .eden-faq-list { display: flex; flex-direction: column; gap: 14px; }
.eden-gfaq .eden-faq-q { padding: 18px 24px; }
.eden-gfaq .eden-faq-a {
  max-height: 0; overflow: hidden; transition: max-height .4s ease;
}
.eden-gfaq .eden-faq-item.active .eden-faq-a { max-height: 320px; }
.eden-gfaq .eden-faq-a p { padding: 0 24px 20px; margin: 0; font-size: 14.5px; line-height: 1.75; opacity: .85; }
.eden-gfaq .eden-faq-item.active .eden-faq-toggle { background: var(--pear, #AFB288); color: #fff; }
.eden-gfaq .eden-faq-cta-wrap { margin-top: clamp(36px, 4vw, 48px); text-align: center; }

/* ============================================================
   NAV DROPDOWN: card must grow to fit the longest label
   (added Sculptra/Derma Fillers overflowed the fixed card).
   ============================================================ */
@media (min-width: 1025px) {
  .eden-nav-w ul.hfe-nav-menu li ul.sub-menu {
    width: max-content !important;
    min-width: 220px !important;
    max-width: 340px !important;
  }
  .eden-nav-w ul.hfe-nav-menu .sub-menu li.menu-item { width: 100%; }
  .eden-nav-w ul.hfe-nav-menu .sub-menu a.hfe-sub-menu-item {
    display: block !important;
    white-space: nowrap;
  }
}

/* ============================================================
   TREATMENT PAGE SYSTEM (.eden-tp-*) — new pages built natively
   in Elementor share these premium section styles.
   ============================================================ */
.eden-tp-hero {
  min-height: 50vh;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.eden-tp-hero h1.elementor-heading-title {
  font-family: 'Fahkwang', serif !important;
  font-weight: 300 !important;
  font-size: clamp(27px, 4vw, 52px) !important;
  letter-spacing: 10px;
  text-transform: uppercase;
  color: #fff !important;
  margin: 0 0 10px;
}
.eden-tp-breadcrumb, .eden-tp-breadcrumb a {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.85) !important;
  text-decoration: none;
}
.eden-tp-breadcrumb a:hover { color: var(--pear) !important; }

/* section shell */
.eden-tp-section { padding: clamp(60px, 8vw, 100px) clamp(16px, 4vw, 40px); }
.eden-tp-eyebrow .elementor-heading-title,
.eden-tp-eyebrow {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  color: var(--pear) !important;
  font-weight: 600 !important;
}
.eden-tp-tagline {
  font-family: 'Fahkwang', serif;
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--riffle);
  opacity: .9;
}

/* intro: two column */
.e-con.eden-tp-intro {
  flex-direction: row;
  align-items: center;
  gap: clamp(40px, 6vw, 90px);
  max-width: 1300px;
  margin: 0 auto;
  background:
    radial-gradient(1200px 400px at 80% -10%, rgba(175,178,136,.12), transparent 60%),
    linear-gradient(180deg, #f7f7f6 0%, var(--snow) 100%);
}
.e-con.eden-tp-intro-content { flex: 1 1 54%; align-items: flex-start; }
.e-con.eden-tp-intro-media { flex: 1 1 46%; }
.eden-tp-intro-media img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(64,68,39,.15);
  object-fit: cover;
  aspect-ratio: 4/4.6;
}
.eden-tp-intro p { font-size: 15px; line-height: 1.75; color: var(--ink); opacity: .85; }
@media (max-width: 900px) {
  .e-con.eden-tp-intro { flex-direction: column-reverse; }
}

/* how it works band */
.e-con.eden-tp-how {
  text-align: center;
  align-items: center;
  background-color: #F4F3F2;
  position: relative;
}
.eden-tp-how h2.elementor-heading-title { color: #404427 !important; }
.eden-tp-how .elementor-widget-text-editor { max-width: 760px; }
.eden-tp-how p { font-size: 15px; line-height: 1.8; color: var(--ink); opacity: .85; }

/* benefits cards */
.e-con.eden-tp-benefits { align-items: center; text-align: center; background: #fff; }
.eden-tp-bgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1240px;
  margin: 36px auto 0;
  text-align: left;
}
.eden-tp-bcard {
  background: linear-gradient(160deg, #ffffff, #f6f6f3);
  border: 1px solid rgba(64,68,39,.08);
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: 0 14px 34px rgba(64,68,39,.08);
  font-family: 'Noto Sans', sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: transform .3s ease, box-shadow .3s ease;
}
.eden-tp-bcard:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(64,68,39,.13); }
.eden-tp-bcard::before {
  content: "✦";
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(175,178,136,.18);
  color: #404427;
  font-size: 14px;
}
@media (max-width: 1000px) { .eden-tp-bgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .eden-tp-bgrid { grid-template-columns: 1fr; } }

/* areas pills */
.e-con.eden-tp-areas { align-items: center; text-align: center; background: #F4F3F2; }
.eden-tp-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 900px; margin: 26px auto 0; }
.eden-tp-pill {
  padding: 9px 20px;
  border: 1px solid rgba(175,178,136,.4);
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  letter-spacing: .6px;
  color: var(--riffle);
  background: rgba(255,255,255,.75);
}

/* notes two-card row */
.e-con.eden-tp-notes { background: #fff; }
.eden-tp-notesgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
}
.eden-tp-notecard {
  background: rgba(244,243,242,.9);
  border-radius: 18px;
  padding: 30px 32px;
  box-shadow: 0 20px 50px rgba(64,68,39,.10), 0 0 0 1px rgba(255,255,255,.7) inset;
}
.eden-tp-notecard h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--riffle) !important;
  margin: 0 0 14px !important;
}
.eden-tp-notecard ul { list-style: none; margin: 0; padding: 0; }
.eden-tp-notecard li {
  position: relative;
  padding: 7px 0 7px 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  opacity: .9;
}
.eden-tp-notecard li::before {
  content: "";
  position: absolute;
  left: 4px; top: 15px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pear);
}
@media (max-width: 860px) { .eden-tp-notesgrid { grid-template-columns: 1fr; } }

/* closing CTA band */
.e-con.eden-tp-cta {
  align-items: center;
  text-align: center;
  background:
    radial-gradient(900px 300px at 50% -20%, rgba(175,178,136,.25), transparent 60%),
    linear-gradient(160deg, #404427 0%, #2e311c 100%);
}
.eden-tp-cta h2.elementor-heading-title { color: #fff !important; }
.eden-tp-cta p { color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.75; max-width: 640px; }
.eden-tp-cta-btn .elementor-button {
  background: #fff !important;
  color: var(--riffle) !important;
  border: 1px solid #fff !important;
  border-radius: 999px !important;
  padding: 14px 42px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  font-weight: 600 !important;
}
.eden-tp-cta-btn .elementor-button:hover {
  background: transparent !important;
  color: #fff !important;
}

/* generic centered heading blocks inside tp sections */
.eden-tp-center { align-items: center; text-align: center; }

/* ============================================================
   BLOG (.eden-blog-*) — premium blog landing grid
   ============================================================ */
.eden-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1300px;
  margin: 0 auto;
}
.eden-blog-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(64,68,39,.08);
  box-shadow: 0 16px 40px rgba(64,68,39,.08);
  display: flex;
  flex-direction: column;
  transition: transform .35s ease, box-shadow .35s ease;
}
.eden-blog-card:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(64,68,39,.14); }
.eden-blog-card-img { position: relative; aspect-ratio: 16/10; overflow: hidden; display: block; }
.eden-blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; display: block; }
.eden-blog-card:hover .eden-blog-card-img img { transform: scale(1.06); }
.eden-blog-card-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.eden-blog-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pear);
  font-weight: 600;
  margin-bottom: 10px;
}
.eden-blog-card h3 {
  font-family: 'Fahkwang', sans-serif !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  margin: 0 0 10px !important;
}
.eden-blog-card h3 a { color: var(--ink) !important; text-decoration: none; transition: color .25s ease; }
.eden-blog-card h3 a:hover { color: var(--riffle) !important; }
.eden-blog-card p { font-size: 14px; line-height: 1.7; color: var(--ink); opacity: .8; margin: 0 0 18px; }
.eden-blog-more {
  margin-top: auto;
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px;
  letter-spacing: 2px;
  font-weight: 600;
  color: var(--riffle) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eden-blog-more::after { content: "→"; transition: transform .25s ease; }
.eden-blog-more:hover::after { transform: translateX(4px); }
@media (max-width: 1000px) { .eden-blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .eden-blog-grid { grid-template-columns: 1fr; } }

/* tp page wrapper is a plain column; how-text stays readable */
.e-con.eden-tp-page { --display: flex; }
.eden-tp-howtext { max-width: 760px; margin: 0 auto; }
.e-con.eden-tp-intro.eden-tp-section { padding: clamp(60px, 8vw, 100px) clamp(16px, 4vw, 40px); }

/* nav has 8 top-level items — tighten between tablet and full desktop */
@media (min-width: 1025px) and (max-width: 1300px) {
  .eden-nav-w ul.hfe-nav-menu { gap: 12px !important; }
  .eden-nav-w .hfe-nav-menu a.hfe-menu-item {
    font-size: 10.5px !important;
    letter-spacing: 1px !important;
  }
  .eden-btn-w .elementor-button {
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    padding: 8px 14px !important;
  }
}

/* ============================================================
   SITE-WIDE CONSISTENCY PASS
   One brand button + one accent palette on every page.
   ============================================================ */

/* the standard Eden pill for Elementor button widgets tagged
   .eden-cta-w — previously only styled on the home page css */
.eden-cta-w { width: auto; }
.eden-cta-w .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 14px 40px !important;
  background: var(--riffle, #404427) !important;
  background-color: var(--riffle, #404427) !important;
  border: 1px solid var(--riffle, #404427) !important;
  color: #fff !important;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  border-radius: 999px !important;
  transition: all .3s ease;
  box-shadow: 0 4px 15px rgba(64,68,39,.15);
}
.eden-cta-w .elementor-button:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--riffle, #404427) !important;
  box-shadow: none;
}

/* every hand-written CTA anchor across the converted pages
   (eden-pigment-cta, eden-procedure-cta, eden-video-cta,
   eden-success-cta, eden-pig-cta, s-faq ctas, …) becomes the
   same brand pill. FAQ ctas already match this exact style. */
a[class*="eden-"][class*="-cta"],
a[class*="s-"][class*="-cta"],
a.eden-cta {
  display: inline-block;
  width: auto !important;
  max-width: none !important;
  padding: 13px 36px !important;
  background: var(--riffle, #404427) !important;
  background-color: var(--riffle, #404427) !important;
  border: 1px solid var(--riffle, #404427) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 999px !important;
  transition: all .3s ease;
  box-shadow: 0 4px 15px rgba(64,68,39,.15);
}
a[class*="eden-"][class*="-cta"]:hover,
a[class*="s-"][class*="-cta"]:hover,
a.eden-cta:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--riffle, #404427) !important;
  box-shadow: none;
}

/* one accent colour for every eyebrow/kicker label */
[class*="eden-"][class*="-eyebrow"],
.eden-tp-eyebrow,
.eden-tp-eyebrow .elementor-heading-title {
  color: var(--pear, #AFB288) !important;
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  font-weight: 600 !important;
  font-size: 11px !important;
}

/* treatment-page intro: full-bleed background, content stays at 1300 */
.e-con.eden-tp-intro.eden-tp-section {
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(60px, 8vw, 100px) max(clamp(16px, 4vw, 40px), calc(50% - 650px)) !important;
}

/* restore vertical padding on FAQ sections appended at top level —
   the gap-removal rules above zero padding on top-level e-parents */
#content .elementor > .e-con.eden-gfaq,
.ast-container .elementor > .e-con.eden-gfaq {
  padding-top: clamp(60px, 8vw, 100px) !important;
  padding-bottom: clamp(60px, 8vw, 100px) !important;
}

/* ============================================================
   BOOKING POPUP (.ebm-*) — premium modal, CF7 powered
   ============================================================ */
.ebm-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(14, 16, 8, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.ebm-overlay.ebm-open { opacity: 1; visibility: visible; }
body.ebm-locked { overflow: hidden; }

.ebm-card {
  position: relative;
  width: min(960px, 100%);
  max-height: min(92vh, 860px);
  display: flex;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,.4);
  transform: translateY(24px) scale(.97);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.ebm-overlay.ebm-open .ebm-card { transform: translateY(0) scale(1); }

.ebm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(64,68,39,.08);
  color: #404427;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ebm-close:hover { background: #404427; color: #fff; transform: rotate(90deg); }

/* left brand panel */
.ebm-side {
  flex: 0 0 320px;
  background:
    radial-gradient(700px 300px at 0% 0%, rgba(175,178,136,.30), transparent 60%),
    linear-gradient(160deg, #404427 0%, #2c2f1b 100%);
  color: #fff;
  display: flex;
}
.ebm-side-inner { padding: 44px 34px; display: flex; flex-direction: column; }
.ebm-logo { width: 64px; margin-bottom: 18px; filter: brightness(0) invert(1); opacity: .95; }
.ebm-side h3 {
  font-family: 'Fahkwang', serif !important;
  font-weight: 500 !important;
  font-size: 26px !important;
  color: #fff !important;
  margin: 0 0 8px !important;
}
.ebm-side-sub { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.75); margin: 0 0 22px; }
.ebm-side-list { list-style: none; margin: 0 0 auto; padding: 0; }
.ebm-side-list li {
  position: relative;
  padding: 7px 0 7px 24px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.88);
}
.ebm-side-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 7px;
  color: var(--pear, #AFB288);
  font-size: 11px;
}
.ebm-side-contact { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15); }
.ebm-side-contact span {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.8);
  margin: 4px 0;
}

/* right form panel */
.ebm-body {
  flex: 1 1 auto;
  padding: 44px 44px 38px;
  overflow-y: auto;
}
.ebm-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--pear, #AFB288);
  font-weight: 600;
  margin-bottom: 8px;
}
.ebm-title {
  font-family: 'Fahkwang', sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
  color: var(--ink, #3C3C3B) !important;
  margin: 0 0 6px !important;
}
.ebm-sub { font-size: 13.5px; color: var(--ink, #3C3C3B); opacity: .7; margin: 0 0 24px; }

/* CF7 field styling */
.ebm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.ebm-field.ebm-full { grid-column: 1 / -1; }
.ebm-field .wpcf7-form-control-wrap { display: block; }
.ebm-field input,
.ebm-field select,
.ebm-field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(64,68,39,.18);
  border-radius: 12px;
  background: #FAFAF8;
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  color: var(--ink, #3C3C3B);
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  -webkit-appearance: none;
  appearance: none;
}
.ebm-field select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23404427' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 38px;
  cursor: pointer;
}
.ebm-field textarea { resize: vertical; min-height: 74px; }
.ebm-field input:focus,
.ebm-field select:focus,
.ebm-field textarea:focus {
  border-color: var(--pear, #AFB288);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(175,178,136,.15);
}
.ebm-field input::placeholder,
.ebm-field textarea::placeholder { color: rgba(60,60,59,.45); }
.ebm-field .wpcf7-not-valid { border-color: #c94c4c !important; }
.ebm-body .wpcf7-not-valid-tip { font-size: 11.5px; color: #c94c4c; margin-top: 4px; }

/* submit pill */
.ebm-body .ebm-submit {
  margin-top: 20px;
  width: 100%;
  padding: 16px 40px;
  background: var(--riffle, #404427);
  border: 1px solid var(--riffle, #404427);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  letter-spacing: 2.5px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: all .3s ease;
  box-shadow: 0 10px 26px rgba(64,68,39,.28);
}
.ebm-body .ebm-submit:hover {
  background: #2c2f1b;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(64,68,39,.36);
}
.ebm-body .wpcf7-spinner { display: block; margin: 8px auto 0; }

/* CF7 response messages */
.ebm-body .wpcf7-response-output {
  margin: 16px 0 0 !important;
  padding: 13px 18px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(64,68,39,.2) !important;
  font-size: 13.5px;
  text-align: center;
}
.ebm-body .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--pear, #AFB288) !important;
  background: rgba(175,178,136,.14);
  color: #404427;
}
.ebm-body .wpcf7 form.failed .wpcf7-response-output,
.ebm-body .wpcf7 form.aborted .wpcf7-response-output {
  border-color: #c94c4c !important;
  color: #a33;
}

/* success state celebration */
.ebm-card.ebm-success .ebm-side { background: linear-gradient(160deg, #4c5230 0%, #404427 100%); }

@media (max-width: 860px) {
  .ebm-card { flex-direction: column; max-height: 94vh; }
  .ebm-side { flex: 0 0 auto; }
  .ebm-side-inner { padding: 26px 26px 20px; }
  .ebm-side-list, .ebm-side-contact { display: none; }
  .ebm-logo { width: 44px; margin-bottom: 10px; }
  .ebm-body { padding: 26px 22px 30px; }
  .ebm-grid { grid-template-columns: 1fr; }
  .ebm-close { background: rgba(255,255,255,.2); color: #fff; }
}

/* ============================================================
   MOBILE POLISH PASS — every card grid becomes a tidy 2-column
   layout on phones; lists, accordions and FAQ stacks stay 1-col.
   ============================================================ */
@media (max-width: 768px) {

  /* ---- card grids → 2 columns ---- */
  .featured-grid,
  .results-grid,
  .eden-procedure-grid,
  .eden-acne-procedure-grid,
  .eden-scar-procedure-grid,
  .eden-acne-types-grid,
  .eden-acnec-types-grid,
  .eden-scar-types-grid,
  .eden-hydra-benefits-grid,
  .eden-qswitch-benefits-grid,
  .eden-hydra-overview-grid,
  .eden-qswitch-overview-grid,
  .eden-qswitch-journey-grid,
  .eden-btx-areas-grid,
  .eden-btx-myths-grid,
  .eden-btx-journey-steps,
  .eden-btx-love-grid,
  .eden-btx-spot-benefits,
  .eden-btx-lines-grid,
  .eden-sb-journey-steps,
  .eden-sb-love-grid,
  .eden-sb-myths-grid,
  .eden-acnec-stories-grid,
  .eden-acne-success-grid,
  .eden-success-grid,
  .eden-scar-success-grid,
  .eden-hydra-results-grid,
  .eden-qswitch-results-grid,
  .eden-tp-bgrid,
  .eden-blog-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* cards inside the 2-col grids: tighter, smaller type, still premium */
  .eden-tp-bcard { padding: 16px 14px; font-size: 12.5px; line-height: 1.5; gap: 10px; flex-direction: column; }
  .eden-tp-bcard::before { width: 28px; height: 28px; font-size: 12px; }

  [class*="-grid"] > [class*="card"],
  [class*="-grid"] > [class*="item"],
  [class*="-steps"] > * ,
  [class*="-types-grid"] > *,
  [class*="benefits-grid"] > *,
  [class*="overview-grid"] > * {
    min-width: 0;
  }
  [class*="-types-grid"] h3, [class*="-types-grid"] h4,
  [class*="benefits-grid"] h3, [class*="benefits-grid"] h4,
  [class*="overview-grid"] h3, [class*="overview-grid"] h4,
  [class*="journey"] h3, [class*="journey"] h4,
  [class*="myths-grid"] h3, [class*="myths-grid"] h4 {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  [class*="-types-grid"] p, [class*="benefits-grid"] p,
  [class*="overview-grid"] p, [class*="journey"] p,
  [class*="myths-grid"] p, [class*="stories-grid"] p,
  [class*="love-grid"] p, [class*="areas-grid"] p {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  /* home featured cards: 2×2 with proportionate height */
  .featured-grid .card { height: 300px !important; }
  .featured-grid .card h3 { font-size: 15px !important; margin-bottom: 6px !important; }
  .featured-grid .card p { font-size: 11px !important; line-height: 1.5 !important; margin-bottom: 10px !important; }
  .featured-grid .card .btn { padding: 8px 14px !important; font-size: 10px !important; letter-spacing: 1px !important; }
  .featured-grid .card-content { padding: 14px !important; }

  /* home specialties tabs scroll in one row */
  .eden-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; }
  .eden-tabs::-webkit-scrollbar { display: none; }

  /* page banners: calmer type on small screens */
  .eden-tp-hero h1.elementor-heading-title,
  .ruma-hero h1 {
    letter-spacing: 4px !important;
    font-size: clamp(22px, 6.5vw, 30px) !important;
  }
  .eden-tp-hero { min-height: 38vh; }

  /* treatment-page intro: image above text, comfortable rhythm */
  .e-con.eden-tp-intro.eden-tp-section { padding: 50px clamp(16px, 5vw, 28px) !important; }
  .eden-tp-intro-media img { aspect-ratio: 16/11; }

  /* section rhythm slightly tighter on phones */
  .eden-tp-section { padding: 50px clamp(16px, 5vw, 28px); }
  #content .elementor > .e-con.eden-gfaq {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  /* FAQ rows: keep the question readable next to the toggle */
  .eden-gfaq .eden-faq-q { padding: 15px 16px; }
  .eden-gfaq .eden-faq-q h4 { font-size: 14px !important; }
  .eden-gfaq .eden-faq-a p { padding: 0 16px 16px; font-size: 13px; }
  .eden-faq-toggle { width: 30px; height: 30px; font-size: 16px; }

  /* notes cards stack with breathing room */
  .eden-tp-notecard { padding: 22px 20px; }
  .eden-tp-notecard li { font-size: 13.5px; }

  /* pills wrap tight and centered */
  .eden-tp-pill { padding: 7px 14px; font-size: 11px; }

  /* dark CTA band */
  .eden-tp-cta p { font-size: 13.5px; }

  /* blog cards in 2-col: compact meta */
  .eden-blog-card h3 { font-size: 14.5px !important; }
  .eden-blog-card p { font-size: 11.5px; margin-bottom: 12px; }
  .eden-blog-card-body { padding: 14px 14px 16px; }
  .eden-blog-meta { font-size: 9.5px; letter-spacing: 1.2px; margin-bottom: 6px; }
  .eden-blog-more { font-size: 10px; letter-spacing: 1.2px; }
}

/* very small phones: keep everything readable */
@media (max-width: 400px) {
  .featured-grid .card { height: 280px !important; }
  .eden-tp-hero h1.elementor-heading-title,
  .ruma-hero h1 { letter-spacing: 3px !important; }
}

/* ============================================================
   MOBILE CARD COMPACTION — cards inside the 2-col mobile grids
   were keeping desktop padding/type/icon sizes, so they rendered
   as tall skinny towers. Compact everything proportionally.
   (home featured-grid and blog-grid have their own tuned rules.)
   ============================================================ */
@media (max-width: 768px) {
  :is(.results-grid,
      .eden-procedure-grid, .eden-acne-procedure-grid, .eden-scar-procedure-grid,
      .eden-acne-types-grid, .eden-acnec-types-grid, .eden-scar-types-grid,
      .eden-hydra-benefits-grid, .eden-qswitch-benefits-grid,
      .eden-hydra-overview-grid, .eden-qswitch-overview-grid,
      .eden-qswitch-journey-grid,
      .eden-btx-areas-grid, .eden-btx-myths-grid, .eden-btx-journey-steps,
      .eden-btx-love-grid, .eden-btx-spot-benefits, .eden-btx-lines-grid,
      .eden-sb-journey-steps, .eden-sb-love-grid, .eden-sb-myths-grid,
      .eden-acnec-stories-grid,
      .eden-acne-success-grid, .eden-success-grid, .eden-scar-success-grid,
      .eden-hydra-results-grid, .eden-qswitch-results-grid,
      .eden-tp-bgrid) > * {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    min-height: 0 !important;
  }

  :is(.eden-procedure-grid, .eden-acne-procedure-grid, .eden-scar-procedure-grid,
      .eden-acne-types-grid, .eden-acnec-types-grid, .eden-scar-types-grid,
      .eden-hydra-benefits-grid, .eden-qswitch-benefits-grid,
      .eden-hydra-overview-grid, .eden-qswitch-overview-grid,
      .eden-qswitch-journey-grid,
      .eden-btx-areas-grid, .eden-btx-myths-grid, .eden-btx-journey-steps,
      .eden-btx-love-grid, .eden-btx-spot-benefits, .eden-btx-lines-grid,
      .eden-sb-journey-steps, .eden-sb-love-grid, .eden-sb-myths-grid,
      .eden-acnec-stories-grid, .results-grid)
    :is(h3, h4, h5) {
    font-size: 13px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    margin: 8px 0 5px !important;
  }

  :is(.eden-procedure-grid, .eden-acne-procedure-grid, .eden-scar-procedure-grid,
      .eden-acne-types-grid, .eden-acnec-types-grid, .eden-scar-types-grid,
      .eden-hydra-benefits-grid, .eden-qswitch-benefits-grid,
      .eden-hydra-overview-grid, .eden-qswitch-overview-grid,
      .eden-qswitch-journey-grid,
      .eden-btx-areas-grid, .eden-btx-myths-grid, .eden-btx-journey-steps,
      .eden-btx-love-grid, .eden-btx-spot-benefits, .eden-btx-lines-grid,
      .eden-sb-journey-steps, .eden-sb-love-grid, .eden-sb-myths-grid,
      .eden-acnec-stories-grid, .results-grid)
    :is(p, li, span:not([class*="icon"]):not([class*="ico"]), div:not([class*="icon"]):not([class*="ico"]):not([class*="bg"])) {
    font-size: 11.5px !important;
    line-height: 1.5 !important;
  }

  /* icon circles / step numbers scale down */
  :is(.eden-procedure-grid, .eden-acne-procedure-grid, .eden-scar-procedure-grid,
      .eden-acne-types-grid, .eden-acnec-types-grid, .eden-scar-types-grid,
      .eden-hydra-benefits-grid, .eden-qswitch-benefits-grid,
      .eden-hydra-overview-grid, .eden-qswitch-overview-grid,
      .eden-btx-journey-steps, .eden-sb-journey-steps,
      .eden-btx-love-grid, .eden-sb-love-grid, .eden-btx-spot-benefits)
    :is([class*="icon"], [class*="-ico"], [class*="num"]) {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    font-size: 17px !important;
    line-height: 40px !important;
    margin: 0 0 4px !important;
  }
}

/* ============================================================
   RESTORE SECTION BREATHING ROOM
   The gap-removal rules above zero padding on top-level e-parent
   sections. Sections whose design padding lived on the section
   itself (home page eden-ruma / providers / featured / brand-video,
   and converted-page full-bleed bands) were left flush against each
   other. Re-assert a clean, uniform vertical rhythm. Same specificity
   as the gap-removal rule but later in the file, so it wins. The
   flex GAP stays 0, so no empty coloured bands return.
   ============================================================ */
/* eden-specialties + pattern-section already carry padding on their
   inner wrap, so they are intentionally NOT in this list. */
#content .elementor > .e-con.eden-ruma,
#content .elementor > .e-con.providers,
#content .elementor > .e-con.featured,
#content .elementor > .e-con.brand-video {
  padding-top: clamp(38px, 4.5vw, 56px) !important;
  padding-bottom: clamp(38px, 4.5vw, 56px) !important;
}

/* converted-page full-bleed section bands that carry their own class
   but lost padding — give them the same rhythm (their inner wraps
   already handle side gutters). */
#content .elementor .e-con[class*="eden-"][class*="-section"]:not(.eden-tp-hero),
#content .elementor .e-con.eden-gfaq {
  padding-top: clamp(56px, 7vw, 92px) !important;
  padding-bottom: clamp(56px, 7vw, 92px) !important;
}

@media (max-width: 768px) {
  #content .elementor > .e-con.eden-ruma,
  #content .elementor > .e-con.providers,
  #content .elementor > .e-con.featured,
  #content .elementor > .e-con.brand-video {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* ============================================================
   IMAGE FRAMES — make images fill their fixed-height card frames
   (converted pages wrap <img> in Elementor divs, so the image sat
   at natural height leaving empty card below it).
   ============================================================ */
.eden-conv[class*="-visual"],
.eden-conv[class*="-image"],
.eden-conv[class*="-media"],
.eden-conv[class*="-photo"],
.eden-conv[class*="-hero-img"] {
  overflow: hidden;
}
.eden-conv[class*="-visual"] .elementor-widget-image,
.eden-conv[class*="-image"] .elementor-widget-image,
.eden-conv[class*="-media"] .elementor-widget-image,
.eden-conv[class*="-photo"] .elementor-widget-image,
.eden-conv[class*="-visual"] .elementor-widget-image > div,
.eden-conv[class*="-image"] .elementor-widget-image > div,
.eden-conv[class*="-media"] .elementor-widget-image > div,
.eden-conv[class*="-photo"] .elementor-widget-image > div {
  height: 100%;
  width: 100%;
}
.eden-conv[class*="-visual"] .elementor-widget-image img,
.eden-conv[class*="-image"] .elementor-widget-image img,
.eden-conv[class*="-media"] .elementor-widget-image img,
.eden-conv[class*="-photo"] .elementor-widget-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* ============================================================
   FAQ NORMALIZATION — every FAQ family (eden-faq, eden-acne-faq,
   eden-hydra-faq, eden-qswitch-faq, eden-acnec-faq, eden-btx-faq,
   eden-sb-faq) gets the SAME premium look & sizing, especially on
   mobile. Question rows already forced to flex-row earlier.
   ============================================================ */
[class$="-faq-item"], .eden-faq-item {
  border-radius: 14px !important;
}
[class$="-faq-q"] {
  gap: 14px;
}
[class$="-faq-q"] :is(h3, h4, h5) {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  color: var(--ink, #3C3C3B) !important;
  margin: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
}
[class$="-faq-toggle"] {
  flex: 0 0 auto !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  background: rgba(175,178,136,.18) !important;
  color: #404427 !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

@media (max-width: 768px) {
  [class$="-faq-wrap"], .eden-faq-wrap { padding-left: clamp(14px,4vw,20px) !important; padding-right: clamp(14px,4vw,20px) !important; }
  [class$="-faq-q"] { padding: 15px 16px !important; }
  [class$="-faq-q"] :is(h3, h4, h5) { font-size: 13.5px !important; line-height: 1.35 !important; }
  [class$="-faq-a"] p { font-size: 12.5px !important; line-height: 1.6 !important; padding-left: 16px !important; padding-right: 16px !important; }
  [class$="-faq-toggle"] { width: 30px !important; height: 30px !important; font-size: 16px !important; }
  /* grid-style FAQ (acnec/btx/sb with a side card) → single column on mobile */
  [class$="-faq-grid"] { grid-template-columns: 1fr !important; gap: 20px !important; }
  [class$="-faq-side"] { position: static !important; }
  /* FAQ section heading sizing consistent on mobile */
  [class*="faq"] h2 { font-size: clamp(24px, 6.5vw, 30px) !important; }
}

/* ============================================================
   ROUND 12 — CTA TOP-UPS (2026-07-08) — keep at END of file
   .eden-midcta = compact centered CTA strip (heading + pill)
   inserted mid-page; also restores padding when these sections
   sit at TOP LEVEL (the gap-removal rules zero e-parent padding).
   ============================================================ */
.e-con.eden-midcta {
  align-items: center;
  text-align: center;
  padding: clamp(44px, 6vw, 76px) clamp(16px, 4vw, 40px) !important;
  background: #F6F5EF;
}
.eden-midcta .elementor-heading-title {
  font-family: 'Fahkwang', serif !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 3vw, 32px) !important;
  color: #404427 !important;
  letter-spacing: 1px;
  margin: 0;
}
/* dark CTA band appended at top level keeps its section padding */
#content .elementor > .e-con.eden-tp-cta,
.ast-container .elementor > .e-con.eden-tp-cta {
  padding: clamp(60px, 8vw, 100px) clamp(16px, 4vw, 40px) !important;
}
/* treatment-index pills are links on the Treatments page */
a.eden-tp-pill { text-decoration: none; transition: background .25s ease, color .25s ease, border-color .25s ease; }
a.eden-tp-pill:hover { background: #404427; border-color: #404427; color: #fff; }
/* spec-list rows on home are real links now — keep row styling on hover */
.eden-spec-item a { text-decoration: none; }
@media (max-width: 768px) {
  .e-con.eden-midcta { padding: 36px 18px !important; }
  .eden-midcta .elementor-heading-title { font-size: 21px !important; }
}

/* ============================================================
   ROUND 12c — BOOKING MODAL: centered success screen + mobile
   responsiveness hardening. Keep at END of file.
   ============================================================ */
/* full-card overlay panel, shown when the card gets .ebm-success */
.ebm-done {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 44px 30px;
  background:
    radial-gradient(680px 320px at 50% -10%, rgba(175,178,136,.22), transparent 60%),
    linear-gradient(165deg, #FDFDFA 0%, #F3F3EA 100%);
  opacity: 0;
  visibility: hidden;
  transform: scale(.97);
  transition: opacity .4s ease, visibility .4s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.ebm-card.ebm-success .ebm-done { opacity: 1; visibility: visible; transform: scale(1); }
/* keep the form untabbable & non-interactive while success shows */
.ebm-card.ebm-success .ebm-side,
.ebm-card.ebm-success .ebm-body { visibility: hidden; }

.ebm-done-check { width: 92px; height: 92px; margin-bottom: 24px; }
.ebm-done-check svg { width: 100%; height: 100%; display: block; }
.ebm-done-check circle {
  stroke: var(--pear, #AFB288);
  stroke-width: 2.5;
  fill: rgba(175,178,136,.12);
  stroke-dasharray: 302;
  stroke-dashoffset: 302;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.ebm-done-check path {
  stroke: #404427;
  stroke-width: 6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
.ebm-card.ebm-success .ebm-done-check circle { animation: ebmDraw .7s .2s ease forwards; }
.ebm-card.ebm-success .ebm-done-check path { animation: ebmDraw .45s .75s ease-out forwards; }
@keyframes ebmDraw { to { stroke-dashoffset: 0; } }

.ebm-done-title {
  font-family: 'Fahkwang', serif !important;
  font-weight: 500 !important;
  font-size: clamp(26px, 4vw, 36px) !important;
  color: #404427 !important;
  margin: 0 0 12px !important;
}
.ebm-done-msg {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink, #3C3C3B);
  opacity: .8;
  max-width: 430px;
  margin: 0 0 14px;
}
.ebm-done-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--pear, #AFB288);
  font-weight: 600;
  margin-bottom: 28px;
}
.ebm-done-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #fff;
  background: #404427;
  border: 1px solid #404427;
  border-radius: 999px;
  padding: 14px 48px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.ebm-done-btn:hover { background: transparent; color: #404427; }
/* close button stays visible above the success panel */
.ebm-close { z-index: 6; }
.ebm-card.ebm-success .ebm-close { background: rgba(64,68,39,.08); color: #404427; }
/* the panel replaces CF7's bottom output line on success */
.ebm-body .wpcf7 form.sent .wpcf7-response-output { display: none !important; }

/* --- responsive hardening (dvh = stable on mobile browser chrome) --- */
.ebm-card { max-height: min(92dvh, 860px); }
.ebm-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 860px) {
  .ebm-overlay { padding: 12px; }
  .ebm-card { max-height: 94dvh; border-radius: 20px; }
  /* 16px inputs stop iOS Safari from zooming the page on focus */
  .ebm-field input,
  .ebm-field select,
  .ebm-field textarea { font-size: 16px; padding: 12px 14px; }
  .ebm-done { padding: 36px 22px; }
  .ebm-done-check { width: 76px; height: 76px; margin-bottom: 18px; }
  .ebm-card.ebm-success .ebm-close { background: rgba(64,68,39,.08); color: #404427; }
}
@media (max-width: 480px) {
  .ebm-overlay { padding: 8px; }
  .ebm-body { padding: 22px 16px 26px; }
  .ebm-title { font-size: 22px !important; }
  .ebm-grid { gap: 11px; }
  .ebm-done-title { font-size: 24px !important; }
  .ebm-done-msg { font-size: 13.5px; }
  .ebm-done-btn { width: 100%; max-width: 320px; }
}

/* ============================================================
   UNIFORM HERO SIZE (2026-07-09) — every page banner renders at
   the same height. Fixes acne-laser's 250px hero (its page CSS
   never set a height) and aligns .ruma-hero (was 55vh) with
   .eden-tp-hero (was 50vh). Lives at END of file so it beats the
   earlier 38vh mobile rule and all page CSS.
   ============================================================ */
.ruma-hero {
  height: 55vh !important;
  min-height: 400px !important;
}
/* normalize inner content geometry so titles sit at the same
   optical center on every ruma page (page-380 had 130/40 padding,
   others 0) — top padding clears the overlaid navbar */
.ruma-hero .ruma-hero-content {
  height: 100% !important;
  justify-content: center !important;
  padding-top: 96px !important;
  padding-bottom: 40px !important;
}
.eden-tp-hero { min-height: 55vh !important; }
@media (max-width: 768px) {
  .ruma-hero { height: 42vh !important; min-height: 300px !important; }
  .ruma-hero .ruma-hero-content { padding-top: 72px !important; padding-bottom: 28px !important; }
  .eden-tp-hero { min-height: 42vh !important; }
}