/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 15 2025 | 15:33:15 */
/**********************************************************
 * FMV — Projects Page (combined)
 **********************************************************/

/* ---------- Design tokens + fallbacks ---------- */
:root{
  --brand:     #F26532;    /* deep orange */
  --accent:    #F68933;    /* lighter orange (hover) */
  --ink:       #4b4b4b;    /* headings */
  --para:      #666666;    /* body */
  --muted:     #808285;    /* subhead/secondary */
  --hairline:  #E6E7E8;    /* borders */

  /* Breakpoints (if you didn't print Elementor's into :root) */
  --bp-tablet: 1024px;
  --bp-mobile: 767px;

  /* Fonts (match Site Settings) */
  --font-serif: "Merriweather", Georgia, serif;
  --font-sans:  Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Anchors + Sticky */
  --anchor-offset: 96px;  /* for menu anchors */
  --sticky-top:    80px;  /* height of your site header (tweak as needed) */
}

/* Smooth in-page anchor scroll */
html{ scroll-behavior:smooth; }

/* =========================================================
   FUND BANNER (container with two Heading widgets)
   ========================================================= */
.fund-section{
  position:relative;
  background:#efefef;
  min-height:220px;
  padding:60px 16px;
  display:grid; place-items:center;
  overflow:hidden;
}

/* Foreground heading (“FUND I”) */
.fund{ position:relative; z-index:2; }
.fund .elementor-heading-title{
  margin:0;
  font-family:var(--font-serif);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#F26532;
  font-size:clamp(28px, 4.5vw, 64px);
  line-height:1.1;
}

/* Background monogram (big white “I”) */
.monogram{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center;
  pointer-events:none; user-select:none;
}
.monogram .elementor-heading-title{
  margin:0;
  font-family:var(--font-serif);
  font-weight:400;
  color:rgba(255,255,255,.96);
  text-shadow:0 1px 0 rgba(0,0,0,.02);
  font-size:clamp(120px, 18vw, 260px);
  line-height:1;
}

/* Mobile tightening */
@media (max-width: 767px){
  .fund-section{ min-height:180px; padding:44px 16px; }
}

/* =========================================================
   STICKY JUMP MENU (one per fund block)
   Structure:
   <div class="fund-block">
     <div class="fund-section">...</div>
     <div class="projects-jump">...</div>
     <div class="projects-wrap">...</div>
   </div>
   ========================================================= */
.fund-block{ position:relative; }
.fund-block, .fund-section, .projects-wrap{ overflow:visible; }  /* sticky needs this */

.fund-block .projects-jump{
  position: sticky;
  top: var(--sticky-top);
  z-index: 50;
  background:#efefef;          /* visually attached to the banner */
  padding:8px 0;               /* subtle breathing room */
}

/* Your jump menu styling */
.projects-jump{ max-width:1200px; margin:0 auto 32px; padding:0 16px; }
.projects-jump .jump{
  display:block; background:#fff; border:1px solid var(--hairline);
  border-radius:8px; overflow:hidden;
}
.projects-jump .jump > summary{
  cursor:pointer; list-style:none; padding:14px 16px; position:relative;
  font:600 1rem/1.2 var(--font-sans); color:var(--para);
}
.projects-jump .jump > summary::-webkit-details-marker{ display:none; }
.projects-jump .jump > summary::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:4px; border-radius:2px;
  background:linear-gradient(180deg, var(--accent), var(--brand));
}
.projects-jump .jump[open] > summary{ border-bottom:1px solid var(--hairline); }
.projects-jump .jump-group{ padding:12px 16px 8px; }
.projects-jump .jump-group h6{
  margin:.25rem 0 .5rem; color:var(--muted);
  font:700 .8rem/1.1 var(--font-sans); letter-spacing:.04em; text-transform:uppercase;
}
.projects-jump .jump-group a{
  display:block; padding:6px 0; text-decoration:none; color:var(--ink);
}
.projects-jump .jump-group a:hover{ color:var(--brand); }

/* On small screens you can un-stick it if desired */
@media (max-width: 767px){
  .fund-block .projects-jump{ position: static; padding:0; }
}

/* Close button */
.projects-jump .jump { position: relative; }  /* anchor for absolute pos */
.projects-jump .jump-close{
  position: absolute;
  top: 8px; right: 10px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  font: 700 16px/1 var(--font-sans);
  z-index: 2;  /* sit above summary */
}
.projects-jump .jump-close:hover{ color: var(--ink); border-color: var(--muted); }

/* Make room so the [x] doesn't overlap the summary text */
.projects-jump .jump > summary{ padding-right: 64px; }

/* =========================================================
   PROJECT ROWS (alternating two-column)
   ========================================================= */
.project-row{
  display:flex; align-items:center; gap:48px; margin:48px 0;
}
.project-row:nth-of-type(even){ flex-direction:row-reverse; }

.project-content{ flex:1 1 56%; min-width:0; }
.project-media  { flex:1 1 44%; min-width:280px; }

@media (max-width: 1024px){
  .project-row{ flex-direction:column; gap:24px; }
  .project-row:nth-of-type(even){ flex-direction:column; }
  .project-media{ width:100%; }
}

/* Anchor landing offset (if you use Menu Anchor widgets) */
.project-content .elementor-widget-menu-anchor{ scroll-margin-top: var(--anchor-offset); }

/* =========================================================
   LEFT COLUMN — CATEGORY BADGE (Image Box with class: cat-badge)
   ========================================================= */
.project-content .cat-badge .elementor-image-box-wrapper{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--hairline); border-radius:999px;
  padding:6px 12px; background:#fff; margin:0 0 12px 0;
}
.project-content .cat-badge .elementor-image-box-img{
	width:28px !important;
	height:28px; display:grid; place-items:center;
  background:#f3f3f3; border-radius:999px; flex:0 0 auto; margin:0;
}
.project-content .cat-badge .elementor-image-box-img img{
  width:16px; height:16px; object-fit:contain; display:block;
}
.project-content .cat-badge .elementor-image-box-content{ margin:0; padding:0; }
.project-content .cat-badge .elementor-image-box-title{
  margin:0;
  font:700 .78rem/1.1 var(--font-sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.project-content .cat-badge .elementor-image-box-description{ display:none; }

/* =========================================================
   LEFT COLUMN — Title, tags, copy, divider
   ========================================================= */
.project-content .elementor-widget-heading .elementor-heading-title{
  margin:.35rem 0 1.25rem;
  font-family:var(--font-serif); font-weight:400; line-height:1.1; color:var(--ink);
  font-size:clamp(28px, 5vw, 56px);
}
.project-content .section-tag{
  color:var(--brand);
  font:700 .85rem/1.2 var(--font-sans);
  letter-spacing:.16em; text-transform:uppercase;
  margin:18px 0 10px;
}
.project-content .lead{
  font-family:var(--font-serif); font-style:italic; color:var(--muted);
  font-size:clamp(18px, 2.2vw, 26px); line-height:1.5; margin:0 0 24px;
}
/* Short hairline divider */
.project-content .elementor-widget-divider .elementor-divider{ padding:0; }
.project-content .elementor-widget-divider .elementor-divider-separator{
  width:72px; border-top:1px solid var(--hairline); margin:18px 0 24px;
}
.project-content .elementor-widget-text-editor p{
  color:var(--para); line-height:1.9; margin:.5rem 0 1rem;
}

/* =========================================================
   RIGHT COLUMN — image
   ========================================================= */
.project-media .elementor-widget-image img{
  width:100%; height:auto; display:block; border-radius:8px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}

/* Minor responsive polish */
@media (max-width: 1024px){
  .projects-jump{ margin-bottom:24px; }
  .project-content .elementor-widget-heading .elementor-heading-title{
    font-size:clamp(26px, 5.8vw, 48px);
  }
}
@media (max-width: 767px){
  .project-content .lead{ margin:0 0 20px; }
}