/* Jennifer Li — Elementor Widgets: shared section styles.
   Ported from the original v1.html template. Colors/fonts mirror the site's
   active Elementor global kit (Ember Noir) so widgets stay on-brand even
   though the values are declared locally for portability. */

:root{
  --jli-bg:#14110d;
  --jli-bg-panel:#1d1812;
  --jli-ink:#f1ead9;
  --jli-ink-dim:#a89a84;
  --jli-ink-faint:#6f6353;
  --jli-ember:#c4501f;
  --jli-ember-soft:#e08350;
  --jli-ember-dim: rgba(196,80,31,0.18);
  --jli-bronze:#5f4a30;
  --jli-line: rgba(241,234,217,0.12);
  --jli-maxw: 1180px;
  --jli-pad: clamp(1.25rem, 4vw, 3.5rem);
}

.jli-wrap{ max-width:var(--jli-maxw); margin:0 auto; padding-left:var(--jli-pad); padding-right:var(--jli-pad); box-sizing:border-box; }
[class^="jli-"], [class^="jli-"] *{ box-sizing:border-box; }

.jli-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.74rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--jli-ember-soft); display:flex; align-items:center; gap:0.7em;
  margin-bottom:1.1em;
}
.jli-eyebrow::before{ content:""; width:26px; height:1px; background:var(--jli-ember); display:inline-block; }
.jli-eyebrow-center{ justify-content:center; }

.jli-reveal{ opacity:0; transform:translateY(22px); transition:opacity 0.8s ease, transform 0.8s ease; }
.jli-reveal.jli-in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .jli-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .jli-cord path{ stroke-dashoffset:0 !important; transition:none !important; }
  .jli-hero-media img{ animation:none !important; transform:scale(1.08) !important; }
  .jli-hero-media{ transform:none !important; }
}
/* Elementor's editor re-renders widget content dynamically via AJAX on every
   edit, so the scroll IntersectionObserver below never gets attached to the
   freshly-injected elements — they'd otherwise sit at opacity:0 forever
   inside the editor. Scroll-reveal is a frontend-only enhancement, so just
   show everything while editing. */
.elementor-editor-active .jli-reveal{ opacity:1 !important; transform:none !important; }
.elementor-editor-active .jli-cord path{ stroke-dashoffset:0 !important; }

/* buttons */
.jli-btn{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:'IBM Plex Mono', monospace; font-size:0.82rem; letter-spacing:0.06em;
  text-transform:uppercase; text-decoration:none;
  padding:0.95em 1.7em; border-radius:2px; border:1px solid var(--jli-ember);
  transition:all 0.2s ease; cursor:pointer;
}
.jli-btn-solid{ background:var(--jli-ember); color:#14110d; }
.jli-btn-solid:hover{ background:var(--jli-ember-soft); border-color:var(--jli-ember-soft); color:#14110d; }
.jli-btn-ghost{ background:transparent; color:var(--jli-ink); }
.jli-btn-ghost:hover{ background:var(--jli-ember-dim); color:var(--jli-ink); }

/* image slots */
.jli-img-slot{ margin:0; position:relative; overflow:hidden; border-radius:4px; }
.jli-img-slot.jli-filled img{ width:100%; display:block; }
.jli-img-slot.jli-placeholder{
  min-height:220px;
  background: radial-gradient(ellipse 80% 60% at 30% 20%, var(--jli-ember-dim), transparent 60%), var(--jli-bg-panel);
  border:1px dashed var(--jli-bronze);
}

/* section shell */
.jli-sec{ padding:6.5rem 0; border-top:1px solid var(--jli-line); background:#a3b49c; color:var(--jli-ink); position:relative; }
.jli-sec-alt{ background:var(--jli-bg-panel); }
.jli-sec-head{ max-width:52ch; margin-bottom:3rem; }
.jli-sec-head h2{ font-size:clamp(2rem,3.6vw,3rem); }

/* ================= HERO ================= */
.jli-hero{
  position:relative; isolation:isolate;
  min-height:100svh; display:flex; align-items:center;
  padding-top:6rem; padding-bottom:4rem;
  background:#110301;
  color:var(--jli-ink); overflow:hidden;
}
.jli-hero-bg{ position:absolute; inset:0; z-index:0; background-size:contain; background-position:center; background-repeat:no-repeat; }
.jli-hero-bg--placeholder{ background:transparent; }
.jli-hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.jli-hero-copy{ max-width:44rem; }
.jli-hero h1{ font-size:clamp(2.6rem, 5.4vw, 4.6rem); max-width:12ch; margin:0 0 0.6em 0; line-height:1.05; }
.jli-hero h1 em{ font-style:normal; color:var(--jli-ember-soft); }
.jli-hero .jli-sub{ color:var(--jli-ink-dim); max-width:42ch; font-size:1.05rem; }
.jli-actions{ display:flex; gap:1rem; margin-top:1.6rem; flex-wrap:wrap; }

/* right-side hero image — fixed aspect frame, image oversized + translated for a parallax-in-box effect */
.jli-hero-media{ aspect-ratio:4/5; border-radius:4px; will-change:transform; }
.jli-hero-media.jli-filled{ overflow:hidden; }
.jli-hero-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  animation:jli-hero-bob 4s ease-in-out infinite;
}
@keyframes jli-hero-bob{
  0%, 100%{ transform:scale(1.08) translateY(-10px); }
  50%{ transform:scale(1.08) translateY(10px); }
}
@media (max-width:860px){
  .jli-hero-inner{ grid-template-columns:1fr; }
  .jli-hero-media{ order:-1; aspect-ratio:16/9; }
}

/* ================= PROBLEM / FRAMEWORK (shared grid) ================= */
.jli-problem-grid{ display:grid; grid-template-columns: 1fr 340px; gap:3.5rem; align-items:start; }
.jli-problem-copy p{ color:var(--jli-ink-dim); margin:0 0 1.1em 0; }
.jli-problem-copy .jli-pull, .jli-problem-copy p.jli-pull{
  font-family:'Fraunces', serif; font-weight:600; font-style:normal;
  font-size:1.5rem; color:var(--jli-ink); line-height:1.35;
  border-left:2px solid var(--jli-ember); padding-left:1.1rem; margin:2.2rem 0;
}
.jli-rail{ position:sticky; top:6.5rem; display:flex; flex-direction:column; gap:1.6rem; }
.jli-rail .jli-img-slot{ aspect-ratio:3/4; }
.jli-outcome-list{ list-style:none; margin:2rem 0; padding:0; display:grid; gap:0.9rem; }
.jli-outcome-list li{ display:flex; gap:0.9rem; align-items:flex-start; font-family:'Fraunces', serif; font-size:1.15rem; color:var(--jli-ink); }
.jli-outcome-list li::before{ content:"—"; color:var(--jli-ember); flex:none; margin-top:0.1em; }
.jli-embody-list{ list-style:none; margin:1.8rem 0; padding:0; display:grid; gap:1rem; }
.jli-embody-list li{ padding-left:1.4rem; position:relative; color:var(--jli-ink-dim); }
.jli-embody-list li::before{ content:"◆"; font-size:0.55rem; color:var(--jli-ember); position:absolute; left:0; top:0.5em; }
@media (max-width:900px){
  .jli-problem-grid{ grid-template-columns:1fr; }
  .jli-rail{ position:static; flex-direction:row; overflow-x:auto; }
  .jli-rail .jli-img-slot{ min-width:220px; }
}

/* ================= FRAMEWORK STEPS ================= */
.jli-framework{ margin-top:5rem; }
.jli-framework-head{ text-align:left; margin-bottom:1rem; }
.jli-cord-wrap{ position:relative; height:90px; margin:1rem 0 -0.5rem 0; display:none; }
.jli-cord-wrap svg{ width:100%; height:100%; overflow:visible; }
.jli-cord path{
  fill:none; stroke:var(--jli-ember); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1);
}
.jli-cord.jli-in path{ stroke-dashoffset:0; }
@media (min-width:900px){ .jli-cord-wrap{ display:block; } }
.jli-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.jli-step{ border-top:2px solid var(--jli-bronze); padding-top:1.3rem; }
.jli-step .jli-num{ font-family:'IBM Plex Mono',monospace; font-size:0.8rem; color:var(--jli-ember-soft); }
.jli-step h3{ font-size:1.35rem; margin-top:0.4em; }
.jli-step p{ color:var(--jli-ink-dim); font-size:0.98rem; }
@media (max-width:760px){ .jli-steps{ grid-template-columns:1fr; } }

/* ================= WORK WITH ME ================= */
.jli-work{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:3rem; align-items:center; }
.jli-work .jli-img-slot{ aspect-ratio:1/1; }
.jli-work h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); }
.jli-work p{ color:var(--jli-ink-dim); }
@media (max-width:860px){ .jli-work{ grid-template-columns:1fr; } .jli-work .jli-img-slot{ order:-1; } }

/* ================= ABOUT ================= */
.jli-about{ display:grid; grid-template-columns:340px 1fr; gap:3rem; align-items:start; }
.jli-about .jli-img-slot{ aspect-ratio:3/4; }
.jli-about h2{ font-size:clamp(1.9rem,3vw,2.5rem); }
.jli-about p{ color:var(--jli-ink-dim); }
.jli-pull-lg{ font-size:1.25rem !important; }
@media (max-width:860px){ .jli-about{ grid-template-columns:1fr; } }

/* ================= TESTIMONIALS ================= */
.jli-testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.jli-testi-card{ border:1px solid var(--jli-line); border-radius:4px; padding:1.8rem; background:var(--jli-bg-panel); color:var(--jli-ink-faint); font-size:0.92rem; }
.jli-testi-card .jli-quote-mark{ color:var(--jli-ember); font-family:'Fraunces',serif; font-size:2rem; line-height:1; }
@media (max-width:860px){ .jli-testi-grid{ grid-template-columns:1fr; } }

/* ================= FAQ ================= */
.jli-faq-item{ border-bottom:1px solid var(--jli-line); }
/* .jli-faq-list ancestor added for specificity: Elementor's global Theme Style
   "Buttons" rule targets the bare <button> element and otherwise wins over a
   single class selector, turning this into a solid ember button. */
section#faq {
	background-color: #110301 !important;
}
.jli-faq-list .jli-faq-q{
  width:100%; text-align:left; background:none !important; border:none !important;
  color:var(--jli-ink) !important; font-family:'Fraunces', serif !important;
  font-size:1.15rem; font-weight:400; text-transform:none !important; letter-spacing:normal !important;
  padding:1.4rem 0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.jli-faq-list .jli-faq-q .jli-plus{ font-family:'IBM Plex Mono',monospace; color:var(--jli-ember); transition:transform 0.25s ease; flex:none; }
.jli-faq-item.jli-open .jli-plus{ transform:rotate(45deg); }
.jli-faq-a{ max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
.jli-faq-a p{ color:var(--jli-ink-dim); padding-bottom:1.4rem; margin:0; }

/* ================= FINAL CTA ================= */
.jli-final{ background:linear-gradient(180deg, var(--jli-bg-panel), var(--jli-bg)); text-align:center; padding:7rem 0; color:var(--jli-ink); }
.jli-final h2{ font-size:clamp(2.1rem,4.4vw,3.4rem); max-width:16ch; margin:0 auto 1rem auto; }
.jli-flow{
  display:flex; align-items:center; justify-content:center; gap:0.6rem; flex-wrap:wrap;
  font-family:'IBM Plex Mono', monospace; font-size:0.82rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--jli-ink-dim); margin:2.2rem 0 2.6rem 0;
}
.jli-flow .jli-arrow{ color:var(--jli-ember); }
.jli-flow .jli-step{ padding:0.5em 1em; border:1px solid var(--jli-line); border-radius:2px; }

/* ================= HEADER (Theme Builder) ================= */
.jli-site-logo img{ display:block; }
.jli-site-title a{
  font-family:'Fraunces', serif; font-weight:600; font-size:1.15rem;
  letter-spacing:0.01em; color:var(--jli-ink); text-decoration:none;
}
.jli-site-title a:hover{ color:var(--jli-ember-soft); }

.elementor-location-header{
  position:fixed; top:0; left:0; right:0; z-index:999;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color 0.3s ease;
}
.elementor-location-header.jli-scrolled{ border-bottom-color:var(--jli-line); }
/* Offset page content so the fixed header doesn't cover it — adjust if header height changes. */
body.elementor-page{ padding-top:0; }
.elementor-location-header + * { margin-top:0; }
body{ padding-top:70px; }

/* ================= FOOTER (Theme Builder) ================= */
.jli-footer{ padding:2.5rem var(--jli-pad); text-align:center; color:var(--jli-ink-faint); font-size:0.85rem; border-top:1px solid var(--jli-line); background:var(--jli-bg); }
.jli-footer p{ margin:0; }

/* ================= CHOOSE YOUR PATH ================= */
.jli-paths{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.jli-path-card{
  border:1px solid var(--jli-line); padding:2.4rem 2rem; border-radius:4px;
  background:var(--jli-bg-panel); position:relative; transition:border-color 0.25s ease, transform 0.25s ease;
}
.jli-path-card:hover{ border-color:var(--jli-bronze); transform:translateY(-4px); }
.jli-path-card .jli-tag{ font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--jli-ember-soft); letter-spacing:0.16em; text-transform:uppercase; }
.jli-path-card h3{ font-size:1.6rem; margin-top:0.5em; }
.jli-path-card p{ color:var(--jli-ink-dim); margin-bottom:1.4rem; }
@media (max-width:760px){ .jli-paths{ grid-template-columns:1fr; } }

/* ================= SECTION-SPECIFIC BACKGROUNDS =================
   Requested custom bg colors for these two sections. Both are light/mid
   tones, so headings/body copy are switched to a dark ink for legibility
   — the default cream text would be very low-contrast against them. */
.jli-work-section{ background:#110301; }

.jli-framework-section{ background:#a3b49c; }
.jli-framework-section h2,
.jli-framework-section h3{ color:#1d1812; }
.jli-framework-section p,
.jli-framework-section .jli-embody-list li,
.jli-framework-section .jli-step p{ color:rgba(29,24,18,0.72); }
.jli-framework-section .jli-step{ border-top-color:rgba(29,24,18,0.35); }
.jli-framework-section .jli-num{ color:#1d1812; }

/* ================= SMOKE PARALLAX LAYERS (Core Problem) ================= */
.jli-problem-section{ overflow:hidden; }
.jli-problem-section > .jli-wrap{ position:relative; z-index:1; }
.jli-smoke{
  position:absolute; right:0; z-index:0;
  width:min(52vw, 720px); height:60%;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:0.5; pointer-events:none; will-change:transform;
  -webkit-mask-image: radial-gradient(ellipse 65% 65% at center, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 65% 65% at center, #000 35%, transparent 78%);
}
.jli-smoke-top{ top:-8%; }
.jli-smoke-bottom{ bottom:-8%; }
@media (max-width:760px){ .jli-smoke{ width:80vw; } }
@media (prefers-reduced-motion: reduce){ .jli-smoke{ transform:none !important; } }

.jli-about-section{ background:#a3b49c; }
.jli-about-section h2{ color:#1d1812; }
.jli-about-section p,
.jli-about-section .jli-pull{ color:rgba(29,24,18,0.72); }