/* E.M.B. Brow Art – additions to the Framer template "Foresta" */

/* template-only UI */
#__framer-badge-container,
.emb-hidden {
  display: none !important;
}

/* shared button look (template colours) */
.emb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 11px 20px;
  background: #ede8e1;
  color: #2e1e16 !important;
  font: 500 14px/1.2 "Inter", system-ui, -apple-system, sans-serif;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.emb-btn:hover { transform: translateY(-1px); }
.emb-btn:focus-visible { outline: 2px solid #705138; outline-offset: 2px; }
.emb-btn-primary { background: #705138; color: #fff !important; }

/* Google Maps placeholder (location dialog on the home page) */
.emb-map { position: relative; overflow: hidden; background: #ede8e1; }
.emb-map-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
  color: #5b4a40;
  font: 400 14px/1.55 "Inter", system-ui, sans-serif;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%),
    repeating-linear-gradient(45deg, rgba(112, 81, 56, 0.06) 0 2px, transparent 2px 14px),
    #ede8e1;
}
.emb-map-ph p { margin: 0; max-width: 380px; }
.emb-map-ph a:not(.emb-btn) { color: #2e1e16; text-decoration: underline; }
.emb-map-title { color: #2e1e16; font-weight: 600; }
.emb-map-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }

/* confirmation below the contact form */
.emb-sent {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: #ede8e1;
  color: #2e1e16;
  font: 400 14px/1.5 "Inter", system-ui, sans-serif;
}

/* legal pages: lists inside the article text */
html[data-emb-static] [data-framer-name="Content"] ul { margin: 0; padding-left: 1.2em; }
html[data-emb-static] [data-framer-name="Content"] li { margin: 0.2em 0; }
html[data-emb-static] [data-framer-name="Content"] a { color: inherit; text-decoration: underline; word-break: break-word; }

/* legal pages: simple mobile menu (no Framer runtime there) */
.emb-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 20px 20px;
  font: 500 16px/1.4 "Inter", system-ui, sans-serif;
}
.emb-menu[hidden] { display: none; }
.emb-menu a:not(.emb-btn) { color: #0d0503; text-decoration: none; padding: 10px 0; border-bottom: 1px solid rgba(46, 30, 22, 0.08); }
.emb-menu .emb-btn { margin-top: 12px; }

/* ════════════════════════════════════════════════════════════════════════════════════════
   Brow-specific additions (static/emb.js)
   ════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --emb-bg: #f6f5f4;
  --emb-card: #ffffff;
  --emb-beige: #ede8e4;
  --emb-ink: #0d0503;
  --emb-text: #595857;
  --emb-brown: #705138;
  --emb-brown-deep: #543606;
  --emb-accent: #9e816a;
  --emb-accent-soft: #ccbaab;
  --emb-dark: #22160f;
  --emb-dark-2: #2e1f17;
  --emb-line: #ebe4dc;
  --emb-serif: "Marcellus", "Marcellus Placeholder", Georgia, serif;
  --emb-sans: "Inter", "Inter Placeholder", system-ui, -apple-system, sans-serif;
  --emb-script: "Dancing Script", "Brush Script MT", cursive;
  --emb-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

::selection { background: #e3d3c4; color: #2e1e16; }

.emb-x, .emb-x * { box-sizing: border-box; }
.emb-x :is(h2, h3, p, ul, figure, fieldset, legend) { margin: 0; padding: 0; }
.emb-x ul { list-style: none; }
.emb-x a { -webkit-tap-highlight-color: transparent; }
.emb-rel { position: relative; }

.emb-btn-light { background: #f6efe8; color: #2e1e16 !important; }
.emb-btn-light:hover { background: #fff; }
.emb-btn { gap: 8px; }

/* section skeleton like the template: label pill, Marcellus heading, grey lead */
.emb-sec { position: relative; padding: 140px 40px; font-family: var(--emb-sans); color: var(--emb-ink); }
.emb-wrap { max-width: 1200px; margin: 0 auto; }
.emb-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.emb-label {
  display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 12px;
  background: var(--emb-beige); color: var(--emb-brown-deep);
  font: 600 12px/1.1 var(--emb-sans); letter-spacing: 0.08em; text-transform: uppercase;
}
.emb-label-dark { background: rgba(255, 255, 255, 0.08); color: #f3ebe4; }
.emb-h2 { font: 400 52px/1.2 var(--emb-serif); letter-spacing: -0.02em; color: var(--emb-ink); text-wrap: balance; }
.emb-sub { font: 400 18px/1.5 var(--emb-sans); color: var(--emb-text); max-width: 540px; text-wrap: pretty; }

.emb-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--emb-ease), transform 0.9s var(--emb-ease); }
.emb-reveal.is-in { opacity: 1; transform: none; }
html:not(.emb-js) .emb-reveal { opacity: 1; transform: none; }

/* ── hero: brow stroke under "Brauen" ─────────────────────────────────────────────────── */
.emb-hero-brow {
  position: absolute; pointer-events: none; overflow: visible;
  fill: var(--emb-accent); opacity: 0.9;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.5s var(--emb-ease);
}
.emb-hero-brow.is-in { clip-path: inset(0 0 0 0); }

/* ── hero: brow mapping overlay ───────────────────────────────────────────────────────── */
.emb-mapping { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: hidden; border-radius: inherit; }
.emb-mapping-curve {
  fill: none; stroke: #fff; stroke-linecap: round; opacity: 0.9;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--emb-ease) 0.1s;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.25));
}
.emb-mapping.is-on .emb-mapping-curve { stroke-dashoffset: 0; }
.emb-mapping-pt { opacity: 0; transition: opacity 0.5s ease calc(0.35s + var(--i) * 0.38s); }
.emb-mapping.is-on .emb-mapping-pt { opacity: 1; }
.emb-mapping-ring { fill: rgba(255, 255, 255, 0.18); stroke: #fff; stroke-width: 1.6; }
.emb-mapping-dot { fill: #fff; }
.emb-mapping-tick { stroke: #fff; stroke-width: 1.4; stroke-dasharray: 4 5; opacity: 0.9; }
.emb-mapping-label rect { fill: rgba(34, 22, 15, 0.62); stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
.emb-mapping-label text { fill: #fff; font: 500 13px var(--emb-sans); letter-spacing: 0.02em; }
.emb-mapping.is-on .emb-mapping-ring { animation: emb-ping 2.4s ease-out calc(1.2s + var(--i) * 0.38s) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes emb-ping { 0% { transform: scale(1); } 40% { transform: scale(1.35); opacity: 0.6; } 80%, 100% { transform: scale(1); opacity: 1; } }

/* ── word ticker (two crossing bands) ────────────────────────────────────────────────── */
.emb-ticker { position: relative; overflow: hidden; padding: 64px 0 40px; background: var(--emb-bg); }
/* sections added between Framer's sections are flex items of a centred column: pin them to full width */
.emb-ticker, .emb-tone, .emb-footer { width: 100%; max-width: 100%; align-self: stretch; min-width: 0; flex: none; }
.emb-ticker-band { width: 112%; margin-left: -6%; overflow: hidden; white-space: nowrap; }
.emb-ticker-front { position: relative; z-index: 1; background: var(--emb-dark); color: #f3ebe4; padding: 22px 0; transform: rotate(-2.2deg); box-shadow: 0 20px 50px -30px rgba(34, 22, 15, 0.6); }
.emb-ticker-back { position: absolute; left: 0; top: 50%; background: var(--emb-beige); color: var(--emb-brown); padding: 14px 0; transform: translateY(-30%) rotate(2.6deg); }
.emb-ticker-track { display: inline-flex; animation: emb-marquee 46s linear infinite; }
.emb-ticker-back .emb-ticker-track { animation-duration: 60s; animation-direction: reverse; }
.emb-ticker-set { display: inline-flex; align-items: center; gap: 34px; padding-right: 34px; }
.emb-ticker-word { font: 400 40px/1.1 var(--emb-serif); letter-spacing: -0.01em; }
.emb-ticker-script { font: 500 46px/1.1 var(--emb-script); color: var(--emb-accent-soft); }
.emb-ticker-back .emb-ticker-word { font-size: 24px; }
.emb-ticker-back .emb-ticker-script { font-size: 28px; color: var(--emb-accent); }
.emb-ticker-sep svg { display: block; width: 46px; height: 7px; fill: currentColor; opacity: 0.55; }
.emb-ticker-back .emb-ticker-sep svg { width: 30px; height: 5px; }
@keyframes emb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── tone advisor ────────────────────────────────────────────────────────────────────── */
.emb-tone { background: var(--emb-bg); padding-top: 60px; }
.emb-tone-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.emb-tone-copy { display: flex; flex-direction: column; gap: 36px; }
.emb-chips { border: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px !important; }
.emb-chips legend { width: 100%; margin-bottom: 12px !important; font: 600 12px/1 var(--emb-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--emb-accent); }
.emb-chip { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: var(--emb-card); border: 1px solid var(--emb-line); font: 500 15px/1 var(--emb-sans); color: #2e1e16; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.emb-chip:hover { transform: translateY(-1px); border-color: var(--emb-accent-soft); }
.emb-chip input { position: absolute; opacity: 0; pointer-events: none; }
.emb-chip-dot { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.emb-chip:has(input:checked) { border-color: var(--emb-brown); box-shadow: 0 0 0 1px var(--emb-brown); }
.emb-chip:has(input:focus-visible) { outline: 2px solid var(--emb-brown); outline-offset: 3px; }
.emb-tone-card { position: relative; padding: 24px; border-radius: 40px; background: var(--emb-card); border: 1px solid var(--emb-line); box-shadow: 0 40px 80px -50px rgba(46, 30, 22, 0.35); display: flex; flex-direction: column; gap: 22px; }
/* live preview: layers of a real brow photo (lib/browtry.py) */
.emb-try { position: relative; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; isolation: isolate; background: #d6b09c; }
.emb-try-layer { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.emb-try-base { background-color: #d6b09c; transition: background-color 0.7s ease; }
.emb-try-tint { mix-blend-mode: soft-light; opacity: 0.75; }
.emb-try .emb-try-layer.emb-try-stain { opacity: 0; transition: opacity 0.7s ease, background-color 0.7s ease; }
.emb-try.is-henna .emb-try-layer.emb-try-stain { opacity: 0.45; }
.emb-try-hair { opacity: 0; }
.emb-try-hair.is-new { clip-path: inset(0 100% 0 0); }
.emb-try-detail { mix-blend-mode: hard-light; }
.emb-try.is-ready .emb-try-hair { opacity: 1; }
.emb-try-layer:not(.emb-try-base) { transition: opacity 0.6s ease; }
.emb-try:not(.is-ready) .emb-try-detail, .emb-try:not(.is-ready) .emb-try-eye, .emb-try:not(.is-ready) .emb-try-tint { opacity: 0; }
.emb-try:not(.is-ready)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%) -100% 0 / 200% 100%; animation: emb-shimmer 1.4s linear infinite; }
@keyframes emb-shimmer { to { background-position: 100% 0; } }
.emb-try-brush { position: absolute; z-index: 3; width: 92px; height: 92px; color: #9a7552; transform: translate(-19%, -82%) scale(0.6); opacity: 0; pointer-events: none; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35)); transition: opacity 0.25s ease, transform 0.35s var(--emb-ease); }
.emb-try-brush.is-on { opacity: 1; transform: translate(-19%, -82%) scale(1); }
.emb-try-brush svg { display: block; width: 100%; height: 100%; }
.emb-brush-tip { fill: currentColor; stroke: rgba(0, 0, 0, 0.25); stroke-width: 0.8; }
.emb-try-chip { position: absolute; z-index: 4; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(34, 22, 15, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font: 600 11.5px/1 var(--emb-sans); letter-spacing: 0.06em; text-transform: uppercase; }
.emb-try-chip i { width: 7px; height: 7px; border-radius: 50%; background: #7fd49b; box-shadow: 0 0 0 0 rgba(127, 212, 155, 0.6); animation: emb-live 1.8s ease-out infinite; }
@keyframes emb-live { 0% { box-shadow: 0 0 0 0 rgba(127, 212, 155, 0.6); } 100% { box-shadow: 0 0 0 9px rgba(127, 212, 155, 0); } }
.emb-tone-method { margin-top: 8px !important; font: 500 13.5px/1.5 var(--emb-sans); color: var(--emb-brown); }
.emb-tone-info { display: flex; gap: 16px; align-items: flex-start; padding: 0 6px; }
.emb-tone-swatch { flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--tone); transition: background 0.7s ease; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.emb-tone-kicker { display: block; font: 600 12px/1 var(--emb-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--emb-accent); margin-bottom: 8px; }
.emb-tone-name { display: block; font: 400 26px/1.2 var(--emb-serif); color: var(--emb-ink); margin-bottom: 6px; }
.emb-tone-text { font: 400 15px/1.55 var(--emb-sans); color: var(--emb-text); }
.emb-tone-note { padding: 0 6px; font: 400 13px/1.5 var(--emb-sans); color: #8a817a; }
.emb-tone-card .emb-btn { align-self: flex-start; margin-left: 6px; }

/* ── certificate seal on Erika's portrait ────────────────────────────────────────────── */
.emb-seal { position: absolute; z-index: 3; top: -54px; left: -58px; width: 132px; height: 132px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35)); pointer-events: none; }
.emb-seal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.emb-seal-bg { fill: #f3ebe4; }
.emb-seal-ring { fill: none; stroke: var(--emb-accent-soft); stroke-width: 1; stroke-dasharray: 2 4; }
.emb-seal text { fill: var(--emb-brown); font: 600 13.5px var(--emb-sans); letter-spacing: 0.06em; }
.emb-seal-spin { transform-origin: 100px 100px; animation: emb-spin 26s linear infinite; }
.emb-seal-brow { fill: var(--emb-brown); }
.emb-seal .emb-seal-year { font: 400 20px var(--emb-serif); letter-spacing: 0.04em; text-anchor: middle; fill: var(--emb-ink); }
@keyframes emb-spin { to { transform: rotate(360deg); } }

/* ── before / after ──────────────────────────────────────────────────────────────────── */
.emb-ba { width: min(980px, calc(100% - 80px)); margin: 56px auto 64px; font-family: var(--emb-sans); }
.emb-ba-frame { --pos: 50%; position: relative; aspect-ratio: 3 / 2; border-radius: 36px; overflow: hidden; background: #e9e2db; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; box-shadow: 0 50px 90px -60px rgba(46, 30, 22, 0.55); }
.emb-ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.18s ease; pointer-events: none; }
.emb-ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.emb-ba-frame.is-switching .emb-ba-img { opacity: 0; }
.emb-ba-tag { position: absolute; top: 20px; padding: 8px 14px; border-radius: 999px; font: 600 12px/1 var(--emb-sans); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(34, 22, 15, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; transition: opacity 0.3s; }
.emb-ba-tag.is-before { left: 20px; }
.emb-ba-tag.is-after { right: 20px; background: rgba(255, 255, 255, 0.82); color: #2e1e16; }
.emb-ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.25); pointer-events: none; }
.emb-ba-knob { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); pointer-events: auto; cursor: ew-resize; transition: transform 0.25s var(--emb-ease); }
.emb-ba-frame.is-drag .emb-ba-knob, .emb-ba-knob:hover { transform: scale(1.08); }
.emb-ba-knob:focus-visible { outline: 3px solid var(--emb-brown); outline-offset: 3px; }
.emb-ba-knob svg { width: 24px; height: 24px; fill: none; stroke: var(--emb-brown); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.emb-ba-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 24px 8px 22px; }
.emb-ba-title { font: 400 26px/1.25 var(--emb-serif); color: var(--emb-ink); margin-bottom: 6px !important; }
.emb-ba-text { font: 400 16px/1.5 var(--emb-sans); color: var(--emb-text); }
.emb-ba-hint { display: inline-flex; align-items: center; gap: 8px; flex: none; font: 500 13px/1.3 var(--emb-sans); color: var(--emb-accent); }
.emb-ba-hint svg { width: 22px; height: 22px; --21h8s6: var(--emb-accent); --pgex8v: 1.4; --1m6trwb: 0.25; }
.emb-ba-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.emb-ba-tab { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; border: 1px solid var(--emb-line); background: var(--emb-card); font: 500 14px/1 var(--emb-sans); color: #2e1e16; cursor: pointer; transition: border-color 0.2s, transform 0.2s; }
.emb-ba-tab img { width: 44px; height: 30px; border-radius: 999px; object-fit: cover; display: block; }
.emb-ba-tab:hover { transform: translateY(-1px); border-color: var(--emb-accent-soft); }
.emb-ba-tab[aria-selected="true"] { border-color: var(--emb-brown); box-shadow: 0 0 0 1px var(--emb-brown); }
.emb-ba-tab:focus-visible { outline: 2px solid var(--emb-brown); outline-offset: 3px; }

/* ── price menu + brow finder (the template's three cards are replaced) ──────────────── */
html.emb-js #pricing [data-framer-name="Pricing Cards"] { display: none !important; }
.emb-pricing { width: min(1120px, 100%); display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: stretch; font-family: var(--emb-sans); }
.emb-menu-card { background: var(--emb-card); border: 1px solid var(--emb-line); border-radius: 40px; padding: 40px 36px 28px; }
.emb-menu-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; padding: 0 8px; }
.emb-menu-head h3 { font: 400 32px/1.2 var(--emb-serif); color: var(--emb-ink); }
.emb-menu-head p { font: 400 15px/1.5 var(--emb-sans); color: var(--emb-text); }
.emb-menu-row { display: grid; grid-template-columns: 40px 1fr auto auto; grid-template-areas: "ico main dots price" "ico main dots go"; column-gap: 14px; align-items: center; padding: 18px 8px; border-top: 1px dashed var(--emb-line); text-decoration: none !important; color: inherit !important; border-radius: 18px; transition: background 0.25s ease, padding 0.25s var(--emb-ease); }
.emb-menu-list li:first-child .emb-menu-row { border-top-color: transparent; }
.emb-menu-row:hover, .emb-menu-row:focus-visible { background: var(--emb-bg); padding-left: 14px; padding-right: 14px; outline: none; }
.emb-menu-ico { grid-area: ico; width: 40px; height: 40px; border-radius: 14px; background: var(--emb-beige); display: grid; place-items: center; }
.emb-menu-ico svg { width: 24px; height: 24px; --21h8s6: var(--emb-brown); --pgex8v: 1.4; --1m6trwb: 0.2; }
.emb-menu-main { grid-area: main; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.emb-menu-name { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; font: 400 21px/1.25 var(--emb-serif); color: var(--emb-ink); }
.emb-menu-tag { padding: 5px 10px; border-radius: 999px; background: var(--emb-dark); color: #f3ebe4; font: 600 10.5px/1 var(--emb-sans); letter-spacing: 0.08em; text-transform: uppercase; }
.emb-menu-desc { font: 400 14px/1.45 var(--emb-sans); color: #7d746d; }
.emb-menu-dots { grid-area: dots; align-self: center; width: 40px; height: 1px; border-bottom: 2px dotted var(--emb-accent-soft); }
.emb-menu-price { grid-area: price; font: 400 26px/1 var(--emb-serif); color: var(--emb-ink); text-align: right; white-space: nowrap; }
.emb-menu-go { grid-area: go; font: 500 12.5px/1 var(--emb-sans); color: var(--emb-brown); text-align: right; opacity: 0; transform: translateX(-6px); transition: opacity 0.25s, transform 0.25s var(--emb-ease); white-space: nowrap; margin-top: 6px; }
.emb-menu-row:hover .emb-menu-go, .emb-menu-row:focus-visible .emb-menu-go { opacity: 1; transform: none; }

.emb-quiz { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: 36px; border-radius: 40px; color: #f3ebe4; background: radial-gradient(120% 80% at 100% 0%, #4a3324 0%, var(--emb-dark) 55%); min-height: 520px; }
.emb-quiz::after { content: ""; position: absolute; right: -70px; bottom: 26px; width: 440px; height: 64px; background: currentColor; opacity: 0.07; transform: rotate(-12deg); -webkit-mask: var(--emb-brow-mask) center / contain no-repeat; mask: var(--emb-brow-mask) center / contain no-repeat; pointer-events: none; }
.emb-quiz { --emb-brow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 44'%3E%3Cpath d='M 7 31 C 46 20 118 8 196 5 C 236 3.5 268 10 296 26 C 266 17.5 234 15 200 17.5 C 134 22 68 31 14 41 C 7 40 3.5 35 7 31 Z'/%3E%3C/svg%3E"); }
.emb-quiz-top { display: flex; justify-content: space-between; align-items: center; }
.emb-quiz-count { font: 500 13px/1 var(--emb-sans); color: rgba(243, 235, 228, 0.6); letter-spacing: 0.04em; }
.emb-quiz-bar { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.emb-quiz-bar i { display: block; height: 100%; background: var(--emb-accent-soft); border-radius: inherit; transition: width 0.5s var(--emb-ease); }
.emb-quiz-q { font: 400 30px/1.2 var(--emb-serif); color: #fff; margin-top: 8px !important; text-wrap: balance; }
.emb-quiz-opts { display: flex; flex-direction: column; gap: 10px; }
.emb-quiz-opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 16px 20px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: #f3ebe4; font: 500 15.5px/1.35 var(--emb-sans); cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.2s var(--emb-ease); animation: emb-in 0.45s var(--emb-ease) both; }
.emb-quiz-opt:nth-child(2) { animation-delay: 0.05s; } .emb-quiz-opt:nth-child(3) { animation-delay: 0.1s; } .emb-quiz-opt:nth-child(4) { animation-delay: 0.15s; }
.emb-quiz-opt:hover, .emb-quiz-opt:focus-visible { background: rgba(255, 255, 255, 0.1); border-color: var(--emb-accent-soft); transform: translateX(4px); outline: none; }
.emb-quiz-arrow { opacity: 0.5; transition: opacity 0.2s, transform 0.2s; }
.emb-quiz-opt:hover .emb-quiz-arrow { opacity: 1; transform: translateX(3px); }
.emb-quiz-intro, .emb-quiz-foot p { font: 400 14px/1.5 var(--emb-sans); color: rgba(243, 235, 228, 0.62); margin-top: auto !important; }
.emb-quiz-back { align-self: flex-start; margin-top: auto; border: 0; background: none; padding: 6px 0; color: rgba(243, 235, 228, 0.75); font: 500 14px/1 var(--emb-sans); cursor: pointer; }
.emb-quiz-back:hover { color: #fff; }
.emb-quiz-kicker { font: 600 12px/1 var(--emb-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--emb-accent-soft); margin-top: 8px !important; animation: emb-in 0.4s var(--emb-ease) both; }
.emb-quiz-result { font: 400 34px/1.15 var(--emb-serif); color: #fff; text-wrap: balance; animation: emb-in 0.5s var(--emb-ease) 0.05s both; }
.emb-quiz-sub { font: 400 15px/1.4 var(--emb-sans); color: rgba(243, 235, 228, 0.7); margin-top: -10px !important; }
.emb-quiz-price { font: 400 44px/1 var(--emb-serif); color: var(--emb-accent-soft); animation: emb-in 0.5s var(--emb-ease) 0.1s both; }
.emb-quiz-why { display: flex; flex-direction: column; gap: 10px; animation: emb-in 0.5s var(--emb-ease) 0.15s both; }
.emb-quiz-why li { position: relative; padding-left: 26px; font: 400 15px/1.5 var(--emb-sans); color: rgba(243, 235, 228, 0.86); }
.emb-quiz-why li::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 8px; background: var(--emb-accent-soft); -webkit-mask: var(--emb-brow-mask) center / contain no-repeat; mask: var(--emb-brow-mask) center / contain no-repeat; }
.emb-quiz .emb-btn { align-self: flex-start; padding: 14px 22px; font-size: 15px; animation: emb-in 0.5s var(--emb-ease) 0.2s both; }
.emb-quiz-foot { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.emb-quiz-foot p { margin-top: 0 !important; }
@keyframes emb-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ── floating WhatsApp button ────────────────────────────────────────────────────────── */
.emb-fab { position: fixed; z-index: 50; white-space: nowrap; right: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px 14px 16px; border-radius: 999px; background: var(--emb-dark); color: #f3ebe4 !important; text-decoration: none !important; font: 500 15px/1 var(--emb-sans); box-shadow: 0 18px 40px -12px rgba(34, 22, 15, 0.55); opacity: 0; transform: translateY(20px) scale(0.96); pointer-events: none; transition: opacity 0.35s ease, transform 0.45s var(--emb-ease), background 0.2s; }
.emb-fab.is-on { opacity: 1; transform: none; pointer-events: auto; }
.emb-fab:hover { background: var(--emb-brown); }
.emb-fab:focus-visible { outline: 3px solid var(--emb-accent-soft); outline-offset: 3px; }
.emb-fab svg { width: 22px; height: 22px; fill: #7fd49b; flex: none; }

/* ── small template touches ──────────────────────────────────────────────────────────── */
/* divider between prices and results: one brow instead of three leaves */
[data-framer-name="Lines with icon"] > svg:nth-of-type(1),
[data-framer-name="Lines with icon"] > svg:nth-of-type(3) { display: none !important; }
[data-framer-name="Lines with icon"] > svg:nth-of-type(2) { transform: none !important; width: 40px !important; height: 40px !important; }
/* Instagram tiles: gentle zoom on hover */
#socials [data-framer-name^="Image"] img { transition: transform 0.7s var(--emb-ease); }
#socials [data-framer-name^="Image"]:hover img { transform: scale(1.07); }

/* ── tablet & phone ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1279.98px) {
  .emb-sec { padding: 110px 32px; }
  .emb-tone-grid { gap: 40px; }
  .emb-pricing { grid-template-columns: 1fr; width: min(720px, 100%); }
  .emb-quiz { min-height: 0; }
}
@media (max-width: 809.98px) {
  .emb-sec { padding: 80px 20px; }
  .emb-tone { padding-top: 40px; }
  .emb-h2 { font-size: 36px; }
  .emb-sub { font-size: 16px; }
  .emb-head { gap: 16px; }
  .emb-tone-grid { grid-template-columns: 1fr; gap: 32px; }
  .emb-tone-card { border-radius: 32px; padding: 16px; }
  .emb-try { border-radius: 22px; }
  .emb-try-chip { left: 12px; top: 12px; font-size: 10.5px; }
  .emb-try-brush { width: 70px; height: 70px; }
  .emb-tone-name { font-size: 22px; }
  .emb-chip { font-size: 14px; padding: 8px 14px 8px 8px; }
  .emb-chip-dot { width: 20px; height: 20px; }
  .emb-ticker { padding: 44px 0 28px; }
  .emb-ticker-front { padding: 14px 0; }
  .emb-ticker-word { font-size: 26px; }
  .emb-ticker-script { font-size: 30px; }
  .emb-ticker-set { gap: 22px; padding-right: 22px; }
  .emb-ticker-sep svg { width: 30px; height: 5px; }
  .emb-ticker-back .emb-ticker-word { font-size: 18px; }
  .emb-ticker-back .emb-ticker-script { font-size: 21px; }
  .emb-ticker-back { padding: 10px 0; }
  .emb-seal { width: 100px; height: 100px; top: -34px; left: -16px; }
  .emb-ba { width: calc(100% - 40px); margin: 36px auto 40px; }
  .emb-ba-frame { border-radius: 24px; aspect-ratio: 4 / 3; }
  .emb-ba-tag { top: 14px; padding: 7px 11px; font-size: 11px; }
  .emb-ba-tag.is-before { left: 14px; } .emb-ba-tag.is-after { right: 14px; }
  .emb-ba-knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .emb-ba-meta { flex-direction: column; align-items: flex-start; gap: 12px; margin: 18px 4px 16px; }
  .emb-ba-title { font-size: 22px; }
  .emb-ba-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 8px; scrollbar-width: none; }
  .emb-ba-tabs::-webkit-scrollbar { display: none; }
  .emb-ba-tab { flex: none; }
  .emb-menu-card { border-radius: 32px; padding: 28px 14px 16px; }
  .emb-menu-head h3 { font-size: 28px; }
  .emb-menu-dots { display: none; }
  .emb-menu-ico { width: 36px; height: 36px; border-radius: 12px; }
  .emb-menu-name { font-size: 19px; }
  .emb-menu-price { font-size: 22px; }
  .emb-quiz { padding: 28px 22px; border-radius: 32px; }
  .emb-quiz-q { font-size: 25px; }
  .emb-quiz-result { font-size: 28px; }
  .emb-quiz-price { font-size: 38px; }
  .emb-fab { left: 50%; right: auto; bottom: 16px; transform: translate(-50%, 20px) scale(0.96); padding: 14px 22px 14px 18px; }
  .emb-fab.is-on { transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .emb-ticker-track, .emb-seal-spin, .emb-mapping-ring, .emb-try-chip i { animation: none !important; }
  .emb-reveal { opacity: 1; transform: none; transition: none; }
  .emb-hero-brow { transition: none; }
  .emb-mapping-curve, .emb-mapping-pt { transition: none; }
}

/* ── "Schritt für Schritt": all four cards at once instead of one per scroll step ─────── */
#process [data-framer-name^="Scroll frame"] { display: none !important; }
#process [data-framer-name="Container"],
#process [data-framer-name="Sticky Container"] { height: auto !important; }
#process [data-framer-name="Sticky Section"] { position: relative !important; top: auto !important; }
#process [data-framer-name="Cards"] [class$="-container"] {
  opacity: 1 !important; transform: none !important;
  transition: opacity 0.8s var(--emb-ease), transform 0.8s var(--emb-ease) !important;
}
html.emb-js:not(.emb-steps-in) #process [data-framer-name="Cards"] [class$="-container"] { opacity: 0 !important; transform: translateY(32px) !important; }
@media (prefers-reduced-motion: reduce) {
  html.emb-js:not(.emb-steps-in) #process [data-framer-name="Cards"] [class$="-container"] { opacity: 1 !important; transform: none !important; }
}

/* home page: no journal teaser section (the journal itself stays at /journal/) */
section#blog { display: none !important; }

/* ── footer (replaces the template footer on every page) ─────────────────────────────── */
html.emb-has-footer footer:not(.emb-footer) { display: none !important; }
.emb-footer { position: relative; overflow: hidden; background: #1a110c; color: #efe6de; font-family: var(--emb-sans); padding: 24px 24px 0; }
.emb-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 85% 0%, rgba(158, 129, 106, 0.22), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(112, 81, 56, 0.25), transparent 70%); }
.emb-foot-inner { position: relative; max-width: 1280px; margin: 0 auto; }
.emb-foot-card { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; padding: 64px 64px 64px 72px; border-radius: 48px; background: #f3ebe4; color: var(--emb-ink); }
.emb-foot-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.emb-foot-title { font: 400 64px/1.05 var(--emb-serif); letter-spacing: -0.025em; color: var(--emb-ink); text-wrap: balance; }
.emb-foot-title em { font: 500 1.12em/1 var(--emb-script); font-style: normal; color: var(--emb-brown); letter-spacing: 0; white-space: nowrap; }
.emb-foot-lead { font: 400 17px/1.55 var(--emb-sans); color: var(--emb-text); max-width: 460px; }
.emb-foot-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.emb-foot-cta { padding: 15px 24px !important; font-size: 15.5px !important; gap: 10px; }
.emb-foot-cta svg { width: 20px; height: 20px; fill: #8fe0a9; display: block; }
.emb-foot-call { padding: 15px 22px !important; font-size: 15.5px !important; background: transparent; box-shadow: inset 0 0 0 1px #cdbcae; }
.emb-foot-call:hover { background: #fff; }
.emb-foot-visual { position: relative; justify-self: center; width: min(340px, 100%); }
.emb-foot-arch { aspect-ratio: 4 / 5; border-radius: 999px 999px 32px 32px; overflow: hidden; background: #e2d6cb; box-shadow: 0 40px 70px -40px rgba(46, 30, 22, 0.55); }
.emb-foot-arch img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 1.2s var(--emb-ease); }
.emb-foot-card:hover .emb-foot-arch img { transform: scale(1.1); }
.emb-foot-seal { position: absolute; left: -64px; bottom: 28px; width: 150px; height: 150px; border-radius: 50%; background: var(--emb-dark); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.45); transition: transform 0.4s var(--emb-ease), background 0.3s; }
.emb-foot-seal:hover { transform: scale(1.06) rotate(-6deg); background: var(--emb-brown); }
.emb-foot-seal:focus-visible { outline: 3px solid var(--emb-brown); outline-offset: 4px; }
.emb-foot-seal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.emb-foot-seal text { fill: #f3ebe4; font: 600 13px var(--emb-sans); letter-spacing: 0.1em; }
.emb-foot-spin { transform-origin: 100px 100px; animation: emb-spin 18s linear infinite; }
.emb-foot-wa path { fill: #8fe0a9; }
.emb-foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 72px 48px 24px; }
.emb-foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.6; color: rgba(239, 230, 222, 0.82); }
.emb-foot-col p { margin: 0; }
.emb-foot-h { font: 600 12px/1 var(--emb-sans) !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--emb-accent-soft) !important; margin-bottom: 8px !important; }
.emb-foot-col a, .emb-foot-legal a { position: relative; color: #efe6de !important; text-decoration: none !important; }
.emb-foot-col a::after, .emb-foot-legal a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--emb-ease); }
.emb-foot-col a:hover::after, .emb-foot-legal a:hover::after, .emb-foot-col a:focus-visible::after { transform: scaleX(1); }
.emb-foot-small { font-size: 13.5px; color: rgba(239, 230, 222, 0.55) !important; }
.emb-foot-status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 13px; color: #efe6de; }
.emb-foot-status i { width: 7px; height: 7px; border-radius: 50%; background: #8fe0a9; animation: emb-live 1.8s ease-out infinite; }
/* giant wordmark */
.emb-foot-mark { --mx: -999px; --my: -999px; position: relative; margin: 8px auto 0; max-width: 1400px; padding: 0 12px; text-align: center; line-height: 0.95; user-select: none; -webkit-user-select: none; }
.emb-foot-word { display: block; font: 500 clamp(40px, 15.2vw, 232px)/1.05 var(--emb-script); white-space: nowrap; color: #3b2a20; letter-spacing: -0.01em; }
.emb-foot-word.is-glow { position: absolute; inset: 0 12px; color: #d9b48d; pointer-events: none;
  -webkit-mask: radial-gradient(240px circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 70%);
  mask: radial-gradient(240px circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 70%); }
.emb-foot-ch { display: inline-block; transform: translateY(70%); opacity: 0; transition: transform 1s var(--emb-ease) calc(var(--i) * 45ms), opacity 0.8s ease calc(var(--i) * 45ms); }
.emb-foot-mark.is-in .emb-foot-ch { transform: none; opacity: 1; }
.emb-foot-brow { display: block; width: min(560px, 46vw); height: calc(min(560px, 46vw) * 0.147); margin: -0.6vw auto 0; fill: var(--emb-brown); clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--emb-ease) 0.6s; }
.emb-foot-brow svg { display: block; width: 100%; height: 100%; }
.emb-foot-mark.is-in .emb-foot-brow { clip-path: inset(0 0 0 0); }
.emb-foot-bar { position: relative; max-width: 1280px; margin: 40px auto 0; padding: 26px 48px 32px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid rgba(239, 230, 222, 0.1); font-size: 14px; color: rgba(239, 230, 222, 0.55); }
.emb-foot-bar p { margin: 0; }
.emb-foot-legal { display: flex; gap: 22px; }
.emb-foot-top { display: inline-flex; align-items: center; gap: 10px; border: 0; background: rgba(255, 255, 255, 0.08); color: #efe6de; padding: 10px 16px; border-radius: 999px; font: 500 14px/1 var(--emb-sans); cursor: pointer; transition: background 0.25s; }
.emb-foot-top span { display: inline-block; transition: transform 0.35s var(--emb-ease); }
.emb-foot-top:hover { background: rgba(255, 255, 255, 0.16); }
.emb-foot-top:hover span { transform: translateY(-3px); }
@media (max-width: 1279.98px) {
  .emb-foot-card { padding: 56px 48px; gap: 32px; }
  .emb-foot-title { font-size: 52px; }
  .emb-foot-cols { grid-template-columns: repeat(2, 1fr); padding: 56px 24px 16px; }
}
@media (max-width: 809.98px) {
  .emb-footer { padding: 12px 12px 0; }
  .emb-foot-card { grid-template-columns: 1fr; padding: 40px 24px 28px; border-radius: 36px; gap: 36px; }
  .emb-foot-title { font-size: 40px; }
  .emb-foot-lead { font-size: 16px; }
  .emb-foot-actions { width: 100%; }
  .emb-foot-actions .emb-btn { flex: 1 1 auto; }
  .emb-foot-visual { width: min(260px, 74%); margin-left: 56px; }
  .emb-foot-seal { width: 116px; height: 116px; left: -72px; bottom: 18px; }
  .emb-foot-cols { grid-template-columns: 1fr 1fr; gap: 36px 20px; padding: 48px 12px 8px; }
  .emb-foot-word.is-glow { display: none; }
  .emb-foot-brow { width: 62vw; height: calc(62vw * 0.147); }
  .emb-foot-bar { flex-direction: column; align-items: flex-start; padding: 22px 12px 32px; margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .emb-foot-spin, .emb-foot-status i { animation: none !important; }
  .emb-foot-ch { transform: none; opacity: 1; transition: none; }
  .emb-foot-brow { clip-path: none; transition: none; }
}

/* ── phone header + menu (emb.js → mobileBar) ────────────────────────────────────────── */
.emb-mbar, .emb-msheet { display: none; }
@media (max-width: 809.98px) {
  /* the Framer phone nav makes room for our bar */
  html.emb-mbar-on [class$="-container"]:has(> nav),
  html.emb-mbar-on nav[data-framer-name] { display: none !important; }
  html.emb-menu-open, html.emb-menu-open body { overflow: hidden !important; }

  .emb-mbar { display: block; position: fixed; z-index: 70; top: 0; left: 0; right: 0; padding: 10px 10px 0; pointer-events: none;
    transition: transform 0.45s var(--emb-ease); }
  .emb-mbar.is-hidden { transform: translateY(-120%); }
  .emb-mbar-in { pointer-events: auto; display: flex; align-items: center; gap: 8px; height: 58px; padding: 0 7px 0 20px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 0 0 1px rgba(46, 30, 22, 0.06), 0 10px 30px -18px rgba(46, 30, 22, 0.35);
    transition: background 0.4s ease, box-shadow 0.4s ease; }
  .emb-mbar.is-scrolled .emb-mbar-in { background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px rgba(46, 30, 22, 0.07), 0 14px 34px -16px rgba(46, 30, 22, 0.4); }
  .emb-mbar-logo { margin-right: auto; font: 500 25px/1 var(--emb-script); color: var(--emb-ink) !important; text-decoration: none !important; white-space: nowrap; transition: color 0.4s ease; }
  .emb-mbar-cta { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px 0 13px; border-radius: 999px; background: var(--emb-brown);
    color: #fff !important; text-decoration: none !important; font: 600 14px/1 var(--emb-sans); transition: opacity 0.3s ease, transform 0.3s var(--emb-ease); }
  .emb-mbar-cta svg { width: 18px; height: 18px; fill: #9be6b3; display: block; }
  .emb-mbar-cta:active { transform: scale(0.96); }
  .emb-mbar-burger { position: relative; flex: none; width: 44px; height: 44px; border: 0; padding: 0; border-radius: 50%; background: var(--emb-beige); cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: background 0.4s ease; }
  .emb-mbar-burger i { position: absolute; left: 13px; right: 13px; height: 1.8px; border-radius: 2px; background: var(--emb-ink);
    transition: transform 0.45s var(--emb-ease), background 0.4s ease, width 0.45s var(--emb-ease); }
  .emb-mbar-burger i:nth-child(1) { top: 17px; }
  .emb-mbar-burger i:nth-child(2) { top: 25px; right: 18px; }
  .emb-mbar-burger:focus-visible, .emb-mbar-cta:focus-visible, .emb-mbar-logo:focus-visible { outline: 2px solid var(--emb-brown); outline-offset: 3px; }

  /* open state: the bar turns into the top of the dark sheet */
  .emb-mbar.is-open .emb-mbar-in { background: transparent; box-shadow: 0 0 0 1px rgba(239, 230, 222, 0.12); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .emb-mbar.is-open .emb-mbar-logo { color: #f3ebe4 !important; }
  .emb-mbar.is-open .emb-mbar-cta { opacity: 0; transform: scale(0.9); pointer-events: none; }
  .emb-mbar.is-open .emb-mbar-burger { background: rgba(255, 255, 255, 0.1); }
  .emb-mbar.is-open .emb-mbar-burger i { background: #f3ebe4; }
  .emb-mbar.is-open .emb-mbar-burger i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .emb-mbar.is-open .emb-mbar-burger i:nth-child(2) { right: 13px; transform: translateY(-4px) rotate(-45deg); }

  .emb-msheet { display: flex; flex-direction: column; position: fixed; z-index: 65; inset: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(68px + 4vh) 24px calc(24px + env(safe-area-inset-bottom)); background: #1a110c; color: #efe6de; font-family: var(--emb-sans);
    clip-path: circle(0 at calc(100% - 39px) 39px); visibility: hidden;
    transition: clip-path 0.7s var(--emb-ease), visibility 0s linear 0.7s; }
  .emb-msheet::before { content: ""; position: fixed; inset: 0; pointer-events: none;
    background: radial-gradient(70% 45% at 100% 0%, rgba(158, 129, 106, 0.28), transparent 70%), radial-gradient(60% 40% at 0% 100%, rgba(112, 81, 56, 0.3), transparent 70%); }
  .emb-msheet.is-open { clip-path: circle(150% at calc(100% - 39px) 39px); visibility: visible; transition: clip-path 0.75s var(--emb-ease), visibility 0s; }
  .emb-msheet-brow { position: absolute; right: -60px; top: 21vh; width: 330px; height: 48px; fill: rgba(239, 230, 222, 0.05); transform: rotate(-14deg); pointer-events: none; }
  .emb-msheet-brow svg { display: block; width: 100%; height: 100%; }
  .emb-msheet-nav { position: relative; }
  .emb-msheet-kicker { margin: 0 0 10px; font: 600 11.5px/1 var(--emb-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--emb-accent-soft); }
  .emb-msheet-list { list-style: none; margin: 0; padding: 0; }
  .emb-msheet-list li { border-bottom: 1px solid rgba(239, 230, 222, 0.09); opacity: 0; transform: translateY(26px);
    transition: opacity 0.4s ease, transform 0.5s var(--emb-ease); }
  .emb-msheet.is-open .emb-msheet-list li { opacity: 1; transform: none; transition-delay: calc(0.12s + var(--i) * 0.045s); }
  .emb-msheet-list a { display: flex; align-items: baseline; gap: 14px; padding: clamp(9px, 1.5vh, 14px) 2px; color: #f3ebe4 !important; text-decoration: none !important;
    -webkit-tap-highlight-color: transparent; }
  .emb-msheet-n { flex: none; width: 22px; font: 500 12px/1 var(--emb-sans); color: var(--emb-accent); font-variant-numeric: tabular-nums; }
  .emb-msheet-t { flex: 1; font: 400 clamp(25px, 3.8vh, 32px)/1.15 var(--emb-serif); letter-spacing: -0.015em; }
  .emb-msheet-arr { color: var(--emb-accent-soft); opacity: 0.5; transition: transform 0.3s var(--emb-ease), opacity 0.3s; }
  .emb-msheet-list a:active .emb-msheet-arr, .emb-msheet-list a:focus-visible .emb-msheet-arr { opacity: 1; transform: translateX(4px); }
  .emb-msheet-list a:focus-visible { outline: none; }
  .emb-msheet-list a:focus-visible .emb-msheet-t { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
  .emb-msheet-list a[aria-current="page"] .emb-msheet-t { font-family: var(--emb-script); font-size: clamp(29px, 4.4vh, 37px); color: #e2c19f; }
  .emb-msheet-foot { position: relative; margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 14px;
    opacity: 0; transform: translateY(16px); transition: opacity 0.4s ease, transform 0.5s var(--emb-ease); }
  .emb-msheet.is-open .emb-msheet-foot { opacity: 1; transform: none; transition-delay: 0.45s; }
  .emb-msheet-status { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.07); font-size: 13px; color: #efe6de; }
  .emb-msheet-status i { width: 7px; height: 7px; border-radius: 50%; background: #8fe0a9; animation: emb-live 1.8s ease-out infinite; }
  .emb-msheet-wa { width: 100%; height: 54px; font-size: 16px !important; gap: 10px; background: #f3ebe4 !important; color: #2e1e16 !important; }
  .emb-msheet-wa svg { width: 20px; height: 20px; fill: #25a35a; display: block; }
  .emb-msheet-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .emb-msheet-row a { display: grid; place-items: center; height: 46px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(239, 230, 222, 0.18);
    color: #efe6de !important; text-decoration: none !important; font: 500 14px/1 var(--emb-sans); }
  .emb-msheet-row a:active { background: rgba(255, 255, 255, 0.08); }
  .emb-msheet-addr { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(239, 230, 222, 0.5); text-align: center; }

  /* the header already has the booking button: no floating one on phones */
  .emb-fab { display: none !important; }
  .emb-foot-bar { padding-bottom: 32px; }

  /* price menu rows: name + price on one line, the description below across the full width */
  .emb-menu-row { grid-template-columns: 38px 1fr auto; grid-template-areas: "ico name price" "ico desc desc"; row-gap: 5px; column-gap: 12px; align-items: center; padding: 16px 6px; }
  .emb-menu-main { display: contents; }
  .emb-menu-name { grid-area: name; }
  .emb-menu-desc { grid-area: desc; }
  .emb-menu-price { grid-area: price; display: inline-flex; align-items: center; gap: 8px; }
  .emb-menu-price::after { content: "›"; font: 400 22px/1 var(--emb-sans); color: var(--emb-accent-soft); margin-top: -2px; }
  .emb-menu-ico { grid-row: 1 / span 2; align-self: start; margin-top: 2px; }
  .emb-menu-go { display: none; }

  /* footer: the opening status may wrap in the narrow column */
  .emb-foot-status { border-radius: 14px; align-items: flex-start; font-size: 12.5px; line-height: 1.35; }
  .emb-foot-status i { margin-top: 4px; flex: none; }
}
@media (max-width: 809.98px) {
  /* hero photo on phones: the whole brow arch and the eye instead of the forehead */
  #hero img[src*="Hc00EjWOOyULmHvCInFCHYxCe2I"] { object-position: 60% 50% !important; }
}
@media (max-width: 809.98px) and (max-height: 700px) {
  .emb-msheet { padding-top: 76px; }
  .emb-msheet-addr, .emb-msheet-kicker { display: none; }
  .emb-msheet-foot { gap: 10px; padding-top: 18px; }
  .emb-msheet-wa { height: 48px; }
  .emb-msheet-row a { height: 42px; }
}
@media (max-width: 374.98px) {
  .emb-mbar-in { padding-left: 16px; gap: 6px; }
  .emb-mbar-logo { font-size: 21px; }
  .emb-mbar-cta { padding: 0 12px 0 10px; font-size: 13px; }
  .emb-msheet { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 809.98px) and (prefers-reduced-motion: reduce) {
  .emb-msheet, .emb-msheet.is-open { transition: none; }
  .emb-msheet-list li, .emb-msheet-foot { transition: none; }
  .emb-msheet-status i { animation: none; }
}