/* Jeffrey C. Libid — Premium Portfolio. Styles native Elementor widgets through their "CSS Classes" (jcl-*).
   Scoped to body.jcl-page (added by the plugin on the portfolio page only). Text, images and links stay editable
   in Elementor; per-widget Style edits made in Elementor win over these defaults. */
html body.jcl-page.jcl-page.jcl-page{
  --ink:#070b16; --ink2:#0b1222; --ink3:#101a30; --gold:#3f8cff; --gold2:#8fbcff; --gold3:#1f5fd6; --red:#e3141b; --red2:#ff4d55; --silver:#dfe5ef;
  --ivory:#070b16; --paper:#0b1222; --text:#f3f1ec; --muted:#a3abbd; --mutedd:#a3abbd; --card:#101a30; --card2:#15203a;
  --line:rgba(63,140,255,.35); --serif:"Cormorant Garamond",Georgia,serif; --sans:"Manrope",system-ui,sans-serif;
  --font-display:"Oswald","Arial Narrow",sans-serif; --script:"Allura",cursive;
  background:var(--ink); color:var(--text); font-family:var(--sans); margin:0; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
html body.jcl-page.jcl-page.jcl-page .jl-bar,html body.jcl-page.jcl-page.jcl-page .jl-topbar,html body.jcl-page.jcl-page.jcl-page .jl-footerbar,html body.jcl-page.jcl-page.jcl-page .jp-to-top{display:none!important}
html body.jcl-page.jcl-page.jcl-page .elementor a{text-decoration:none; transition:color .25s,opacity .25s,background .25s,border-color .25s}
html body.jcl-page.jcl-page.jcl-page .e-con{padding:0; gap:0; min-width:0}
html body.jcl-page.jcl-page.jcl-page .e-con > .elementor-widget:not(:last-child){margin-block-end:0; margin-bottom:0}
html body.jcl-page.jcl-page.jcl-page .elementor-widget{max-width:100%}
html body.jcl-page.jcl-page.jcl-page .elementor-heading-title{margin:0; padding:0; font-family:var(--sans); color:inherit; line-height:1.2}
html body.jcl-page.jcl-page.jcl-page .elementor-widget-text-editor{font-family:var(--sans); color:inherit}
html body.jcl-page.jcl-page.jcl-page .elementor-widget-text-editor p{margin:0 0 1em}
html body.jcl-page.jcl-page.jcl-page .elementor-widget-text-editor p:last-child{margin-bottom:0}
html body.jcl-page.jcl-page.jcl-page .jcl-gold,html body.jcl-page.jcl-page.jcl-page .elementor-heading-title .jcl-gold{
  background:linear-gradient(180deg,#ff6b72 0%,#e3141b 55%,#a80c12 100%); -webkit-background-clip:text;
  background-clip:text; color:transparent}
html body.jcl-page.jcl-page.jcl-page .elementor-heading-title em,html body.jcl-page.jcl-page.jcl-page .jcl-h2 em{font-family:var(--serif); font-style:italic;
  font-weight:600; color:var(--red2); letter-spacing:0}
html body.jcl-page.jcl-page.jcl-page .jcl-dark .jcl-h2 em,html body.jcl-page.jcl-page.jcl-page .jcl-cta .jcl-h2 em{color:var(--red2)}

/* ---------- sections ---------- */
html body.jcl-page.jcl-page.jcl-page .jcl-sec{padding:120px 24px; position:relative; border-top:1px solid rgba(63,140,255,.1)}
html body.jcl-page.jcl-page.jcl-page .jcl-light{background:radial-gradient(1000px 520px at 12% 0%,rgba(63,140,255,.08),transparent 60%),var(--paper)}
html body.jcl-page.jcl-page.jcl-page .jcl-ivory{background:radial-gradient(1000px 520px at 88% 100%,rgba(227,20,27,.06),transparent 60%),var(--ivory)}
html body.jcl-page.jcl-page.jcl-page .jcl-dark{background:radial-gradient(1200px 600px at 85% 0%,rgba(63,140,255,.10),transparent 60%),var(--ink2); color:#e9e6e0}
html body.jcl-page.jcl-page.jcl-page .jcl-dark2{background:radial-gradient(900px 500px at 10% 100%,rgba(63,140,255,.10),transparent 60%),var(--ink)}
html body.jcl-page.jcl-page.jcl-page .jcl-wrap{width:100%; max-width:1200px; margin:0 auto}
html body.jcl-page.jcl-page.jcl-page .jcl-narrow{max-width:1040px}
html body.jcl-page.jcl-page.jcl-page .jcl-head{max-width:760px; margin-bottom:64px; gap:18px}
html body.jcl-page.jcl-page.jcl-page .jcl-head.jcl-center{margin-left:auto; margin-right:auto; text-align:center; align-items:center}
html body.jcl-page.jcl-page.jcl-page .jcl-center{text-align:center; align-items:center}

html body.jcl-page.jcl-page.jcl-page .jcl-eyebrow-row{flex-direction:row; align-items:center; gap:18px; flex-wrap:wrap; width:100%}
html body.jcl-page.jcl-page.jcl-page .jcl-center .jcl-eyebrow-row{justify-content:center}
html body.jcl-page.jcl-page.jcl-page .jcl-eyebrow .elementor-heading-title{font-size:13px; font-weight:800; letter-spacing:.28em; text-transform:uppercase; color:var(--text)}
html body.jcl-page.jcl-page.jcl-page .jcl-eyebrow .elementor-heading-title span{color:var(--gold); margin-right:10px}
html body.jcl-page.jcl-page.jcl-page .jcl-dark .jcl-eyebrow .elementor-heading-title{color:#f2efe9}
html body.jcl-page.jcl-page.jcl-page .jcl-eyebrow-tag{display:flex; align-items:center; gap:14px}
html body.jcl-page.jcl-page.jcl-page .jcl-eyebrow-tag::before{content:""; width:48px; height:1px; background:linear-gradient(90deg,var(--gold),transparent)}
html body.jcl-page.jcl-page.jcl-page .jcl-eyebrow-tag .elementor-heading-title{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); font-weight:600}
html body.jcl-page.jcl-page.jcl-page .jcl-dark .jcl-eyebrow-tag .elementor-heading-title{color:var(--mutedd)}

html body.jcl-page.jcl-page.jcl-page .jcl-h2 .elementor-heading-title{font-size:clamp(34px,4.4vw,56px); font-weight:800; letter-spacing:-.02em; line-height:1.08; color:var(--text)}
html body.jcl-page.jcl-page.jcl-page .jcl-h2 .elementor-heading-title em{font-size:1.08em}
html body.jcl-page.jcl-page.jcl-page .jcl-dark .jcl-h2 .elementor-heading-title,html body.jcl-page.jcl-page.jcl-page .jcl-cta .jcl-h2 .elementor-heading-title{color:#fff}
html body.jcl-page.jcl-page.jcl-page .jcl-h2-xl .elementor-heading-title{font-size:clamp(40px,6vw,76px)}
html body.jcl-page.jcl-page.jcl-page .jcl-h3 .elementor-heading-title{font-size:21px; font-weight:800; letter-spacing:-.01em; line-height:1.25; color:var(--text)}
html body.jcl-page.jcl-page.jcl-page .jcl-dark .jcl-h3 .elementor-heading-title{color:#fff}
html body.jcl-page.jcl-page.jcl-page .jcl-lead{font-size:18px; line-height:1.7; color:var(--muted); max-width:680px}
html body.jcl-page.jcl-page.jcl-page .jcl-dark .jcl-lead,html body.jcl-page.jcl-page.jcl-page .jcl-cta .jcl-lead{color:#b9bec6}
html body.jcl-page.jcl-page.jcl-page .jcl-body{font-size:16.5px; line-height:1.8; color:#c3cad8}
html body.jcl-page.jcl-page.jcl-page .jcl-body strong{color:var(--text)}
html body.jcl-page.jcl-page.jcl-page .jcl-small{font-size:15px; line-height:1.7; color:var(--muted)}
html body.jcl-page.jcl-page.jcl-page .jcl-dark .jcl-small{color:#a9afb8}

/* ---------- buttons ---------- */
html body.jcl-page.jcl-page.jcl-page .jcl-btn .elementor-button{background:linear-gradient(135deg,#ff4b52,#c90f18); color:#fff;
  font-family:var(--sans); font-weight:800; font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  padding:17px 30px; border-radius:2px; border:1px solid transparent; box-shadow:0 10px 30px -10px rgba(227,20,27,.55);
  transition:transform .25s,box-shadow .25s,background .25s,color .25s}
html body.jcl-page.jcl-page.jcl-page .jcl-btn .elementor-button:hover{transform:translateY(-2px); box-shadow:0 16px 36px -10px rgba(227,20,27,.7); color:#fff}
html body.jcl-page.jcl-page.jcl-page .jcl-btn-ghost .elementor-button{background:transparent; color:#eef3ff; border:1px solid rgba(223,229,239,.45); box-shadow:none}
html body.jcl-page.jcl-page.jcl-page .jcl-btn-ghost .elementor-button:hover{background:rgba(63,140,255,.12); color:#fff; border-color:var(--gold); box-shadow:none}
html body.jcl-page.jcl-page.jcl-page .jcl-btn-sm .elementor-button{padding:12px 20px; font-size:12px}
html body.jcl-page.jcl-page.jcl-page .jcl-btns{flex-direction:row; flex-wrap:wrap; gap:14px}
html body.jcl-page.jcl-page.jcl-page .jcl-btns-c{justify-content:center}

/* ---------- nav ---------- */
html body.jcl-page.jcl-page.jcl-page .jcl-nav{position:fixed; top:0; left:0; right:0; z-index:999; padding:18px 24px; transition:background .35s,padding .35s,border-color .35s;
  border-bottom:1px solid transparent}
html body.jcl-page.jcl-page.jcl-page .jcl-nav.is-scrolled{background:rgba(7,11,22,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:10px 24px; border-bottom-color:rgba(63,140,255,.2)}
html body.jcl-page.jcl-page.jcl-page.admin-bar .jcl-nav{top:32px}
html body.jcl-page.jcl-page.jcl-page .jcl-nav-in{flex-direction:row; align-items:center; justify-content:space-between; max-width:1280px; margin:0 auto; width:100%; gap:24px}
html body.jcl-page.jcl-page.jcl-page .jcl-brand .elementor-heading-title{font-size:15px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#f3efe8; display:flex; align-items:center; gap:12px}
html body.jcl-page.jcl-page.jcl-page .jcl-brand .elementor-heading-title a{color:inherit; display:flex; align-items:center; gap:12px}
html body.jcl-page.jcl-page.jcl-page .jcl-mono{display:inline-grid; place-items:center; width:40px; height:40px; border:1px solid var(--gold); color:var(--gold2);
  font-family:var(--font-display); font-weight:500; letter-spacing:.06em; font-size:15px}
html body.jcl-page.jcl-page.jcl-page .jcl-menu{width:auto; flex:1}
html body.jcl-page.jcl-page.jcl-page .jcl-menu .elementor-icon-list-items{justify-content:center; gap:4px 30px; display:flex; flex-wrap:wrap; margin:0; padding:0}
html body.jcl-page.jcl-page.jcl-page .jcl-menu .elementor-icon-list-item{margin:0!important; padding:0}
html body.jcl-page.jcl-page.jcl-page .jcl-menu .elementor-icon-list-item::after{display:none!important}
html body.jcl-page.jcl-page.jcl-page .jcl-menu .elementor-icon-list-text{color:#cfd3d9; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:0}
html body.jcl-page.jcl-page.jcl-page .jcl-menu a:hover .elementor-icon-list-text{color:var(--gold2)}
html body.jcl-page.jcl-page.jcl-page .jcl-menu .elementor-icon-list-icon{display:none}

/* ---------- hero (mirrors the CV header) ---------- */
html body.jcl-page.jcl-page.jcl-page .jcl-hero{min-height:100vh; padding:150px 24px 90px; background:
  radial-gradient(900px 700px at 78% 40%,rgba(63,140,255,.16),transparent 60%),
  linear-gradient(115deg,#060a14 0%,#0d1630 55%,#070b16 100%); color:#fff; overflow:hidden; justify-content:center; position:relative}
html body.jcl-page.jcl-page.jcl-page .jcl-hero::before{content:""; position:absolute; inset:0; background:
  linear-gradient(120deg,transparent 58%,rgba(63,140,255,.07) 58.2%,transparent 70%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 120px); pointer-events:none}
html body.jcl-page.jcl-page.jcl-page .jcl-hero-in{flex-direction:row; align-items:center; gap:56px; max-width:1240px; width:100%; margin:0 auto; position:static}
html body.jcl-page.jcl-page.jcl-page .jcl-hero-text{flex:0 1 700px; width:auto; max-width:60%; gap:22px; position:relative; z-index:2}
html body.jcl-page.jcl-page.jcl-page .jcl-kicker{display:flex; align-items:center; gap:18px}
html body.jcl-page.jcl-page.jcl-page .jcl-kicker .elementor-heading-title{font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:#c3cad8; font-weight:600}
html body.jcl-page.jcl-page.jcl-page .jcl-kicker::after{content:""; width:120px; height:1px; background:linear-gradient(90deg,var(--gold),transparent)}
html body.jcl-page.jcl-page.jcl-page .jcl-name .elementor-heading-title{font-family:var(--font-display); font-size:clamp(50px,6.3vw,94px); font-weight:700; line-height:.95;
  letter-spacing:.005em; color:#fff; text-transform:uppercase; white-space:nowrap}
html body.jcl-page.jcl-page.jcl-page .jcl-role .elementor-heading-title{font-size:clamp(17px,1.75vw,25px); font-weight:500; color:#f1efe9; letter-spacing:.01em}
html body.jcl-page.jcl-page.jcl-page .jcl-role em{font-style:normal; color:var(--red); margin:0 .35em; font-family:var(--sans)}
html body.jcl-page.jcl-page.jcl-page .jcl-hero-lead{font-size:18px; line-height:1.7; color:#b4b9c1; max-width:560px}
html body.jcl-page.jcl-page.jcl-page .jcl-contact-row .elementor-icon-list-items{display:flex; flex-wrap:wrap; gap:10px 0; margin:0; padding:0}
html body.jcl-page.jcl-page.jcl-page .jcl-contact-row .elementor-icon-list-item{margin:0!important; padding:0 18px!important; border-left:1px solid rgba(255,255,255,.18)}
html body.jcl-page.jcl-page.jcl-page .jcl-contact-row .elementor-icon-list-item:first-child{padding-left:0!important; border-left:0}
html body.jcl-page.jcl-page.jcl-page .jcl-contact-row .elementor-icon-list-item::after{display:none!important}
html body.jcl-page.jcl-page.jcl-page .jcl-contact-row .elementor-icon-list-text{color:#dcdde0; font-size:14px; padding-left:8px}
html body.jcl-page.jcl-page.jcl-page .jcl-contact-row a:hover .elementor-icon-list-text{color:var(--gold2)}
html body.jcl-page.jcl-page.jcl-page .jcl-contact-row .elementor-icon-list-icon i{color:var(--gold); font-size:14px}
html body.jcl-page.jcl-page.jcl-page .jcl-contact-row .elementor-icon-list-icon svg{fill:var(--gold); width:14px; height:14px}
html body.jcl-page.jcl-page.jcl-page .jcl-formula{padding-top:22px; border-top:1px solid rgba(255,255,255,.08); max-width:560px; position:relative}
html body.jcl-page.jcl-page.jcl-page .jcl-formula::before{content:""; position:absolute; top:-1px; left:0; width:90px; height:2px; background:var(--red)}
html body.jcl-page.jcl-page.jcl-page .jcl-formula .elementor-heading-title{font-size:12px; letter-spacing:.38em; text-transform:uppercase; color:#aab0b8; font-weight:600}
html body.jcl-page.jcl-page.jcl-page .jcl-formula span{color:var(--red2)}
/* hero is above the fold: never wait for Elementor's JS entrance animation, just a CSS fade */
html body.jcl-page.jcl-page.jcl-page .jcl-hero .elementor-invisible{visibility:visible!important}
html body.jcl-page.jcl-page.jcl-page .jcl-hero-text{animation:jclRise .9s cubic-bezier(.2,.7,.2,1) both}
html body.jcl-page.jcl-page.jcl-page .jcl-hero-art{animation:jclFade 1.4s ease both}
@keyframes jclRise{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:none}}
@keyframes jclFade{from{opacity:0}to{opacity:1}}
/* photo = part of the background (like the CV header): full-bleed on the right, fading into the navy on the left/bottom */
html body.jcl-page.jcl-page.jcl-page .jcl-hero-art{position:absolute!important; top:0; right:0; bottom:0; width:56%; z-index:1; padding:0; gap:0}
html body.jcl-page.jcl-page.jcl-page .jcl-hero-photo{position:absolute!important; inset:0; width:100%; max-width:none; height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 46%),linear-gradient(180deg,#000 70%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 46%),linear-gradient(180deg,#000 70%,transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect}
html body.jcl-page.jcl-page.jcl-page .jcl-hero-photo .elementor-widget-container{height:100%}
html body.jcl-page.jcl-page.jcl-page .jcl-hero-photo img{width:100%; height:100%!important; max-width:none; object-fit:cover; object-position:62% 28%; display:block;
  filter:saturate(.9) contrast(1.05) brightness(.92)}
html body.jcl-page.jcl-page.jcl-page .jcl-hero-photo::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,rgba(7,11,22,.55) 0%,transparent 22%),
             linear-gradient(90deg,rgba(13,22,48,.35),rgba(13,22,48,0) 60%),
             radial-gradient(700px 500px at 70% 35%,transparent 40%,rgba(7,11,22,.35) 100%)}
html body.jcl-page.jcl-page.jcl-page .jcl-sidewords{position:absolute; top:120px; right:48px; z-index:3; text-align:right}
html body.jcl-page.jcl-page.jcl-page .jcl-sidewords .elementor-heading-title{font-size:11px; letter-spacing:.42em; line-height:2; text-transform:uppercase; color:#dfe5ef; font-weight:600}
html body.jcl-page.jcl-page.jcl-page .jcl-sidewords::after{content:""; display:block; width:56px; height:1px; background:var(--gold); margin:10px 0 0 auto}
html body.jcl-page.jcl-page.jcl-page .jcl-script{position:absolute; right:56px; bottom:150px; z-index:3; transform:rotate(-12deg)}
html body.jcl-page.jcl-page.jcl-page .jcl-script .elementor-heading-title{font-family:var(--script); font-size:44px; line-height:1; color:var(--silver); font-weight:400;
  text-shadow:0 2px 20px rgba(0,0,0,.6)}
html body.jcl-page.jcl-page.jcl-page .jcl-badge{position:absolute; right:56px; bottom:56px; z-index:3; width:auto; flex-direction:row; align-items:center; gap:14px;
  background:rgba(11,18,34,.88); backdrop-filter:blur(10px); border:1px solid rgba(63,140,255,.35); padding:16px 22px;
  box-shadow:0 20px 40px -15px rgba(0,0,0,.7)}
html body.jcl-page.jcl-page.jcl-page .jcl-badge-num .elementor-heading-title{font-family:var(--font-display); font-size:42px; color:var(--red2); font-weight:600; line-height:1}
html body.jcl-page.jcl-page.jcl-page .jcl-badge-txt .elementor-heading-title{font-size:12px; color:#cfd2d7; letter-spacing:.04em; line-height:1.5}

/* ---------- stats band ---------- */
html body.jcl-page.jcl-page.jcl-page .jcl-stats{background:#0a1020; border-top:1px solid rgba(63,140,255,.18); border-bottom:1px solid rgba(63,140,255,.18); padding:0 24px}
html body.jcl-page.jcl-page.jcl-page .jcl-stats-in{flex-direction:row; max-width:1240px; margin:0 auto; width:100%}
html body.jcl-page.jcl-page.jcl-page .jcl-stat{flex:1 1 0; width:auto; padding:40px 18px; text-align:center; gap:8px; border-left:1px solid rgba(255,255,255,.06)}
html body.jcl-page.jcl-page.jcl-page .jcl-stat:first-child{border-left:0}
html body.jcl-page.jcl-page.jcl-page .jcl-stat-num .elementor-heading-title{font-family:var(--font-display); font-size:52px; font-weight:600; line-height:1;
  background:linear-gradient(180deg,#ffffff,#dfe5ef 55%,#9aa6bd); -webkit-background-clip:text; background-clip:text; color:transparent}
html body.jcl-page.jcl-page.jcl-page .jcl-stat-txt .elementor-heading-title{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#9ea5af; font-weight:600; line-height:1.55}

/* ---------- about ---------- */
html body.jcl-page.jcl-page.jcl-page .jcl-about{flex-direction:row; align-items:center; gap:80px}
html body.jcl-page.jcl-page.jcl-page .jcl-about-photo{flex:0 0 42%; width:42%; position:relative}
html body.jcl-page.jcl-page.jcl-page .jcl-frame{position:relative}
html body.jcl-page.jcl-page.jcl-page .jcl-frame::before{content:""; position:absolute; inset:24px -24px -24px 24px; border:1px solid var(--gold); z-index:0}
html body.jcl-page.jcl-page.jcl-page .jcl-frame img{position:relative; z-index:1; width:100%; aspect-ratio:4/5; object-fit:cover; display:block; box-shadow:0 30px 60px -25px rgba(0,0,0,.7)}
html body.jcl-page.jcl-page.jcl-page .jcl-now{position:absolute; right:-30px; bottom:48px; z-index:2; background:var(--card2); padding:20px 24px; gap:6px;
  width:auto; max-width:300px; box-shadow:0 20px 40px -12px rgba(0,0,0,.45); border-left:3px solid var(--red)}
html body.jcl-page.jcl-page.jcl-page .jcl-now-label .elementor-heading-title{font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-weight:800}
html body.jcl-page.jcl-page.jcl-page .jcl-now-txt .elementor-heading-title{font-size:16px; color:#fff; font-weight:700; line-height:1.4}
html body.jcl-page.jcl-page.jcl-page .jcl-now-txt span{display:block; font-weight:500; color:#aeb4bc; font-size:13.5px}
html body.jcl-page.jcl-page.jcl-page .jcl-about-text{flex:1 1 auto; width:auto; gap:24px}
html body.jcl-page.jcl-page.jcl-page .jcl-quote{border-left:2px solid var(--gold); padding-left:22px}
html body.jcl-page.jcl-page.jcl-page .jcl-quote .elementor-heading-title{font-family:var(--serif); font-style:italic; font-size:26px; line-height:1.35; color:#dfe5ef; font-weight:500}
html body.jcl-page.jcl-page.jcl-page .jcl-checks .elementor-icon-list-items{display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; margin:0; padding:0}
html body.jcl-page.jcl-page.jcl-page .jcl-checks .elementor-icon-list-item{margin:0!important; padding:0!important; align-items:flex-start}
html body.jcl-page.jcl-page.jcl-page .jcl-checks .elementor-icon-list-item::after{display:none!important}
html body.jcl-page.jcl-page.jcl-page .jcl-checks .elementor-icon-list-icon i{color:var(--gold); font-size:13px}
html body.jcl-page.jcl-page.jcl-page .jcl-checks .elementor-icon-list-icon svg{fill:var(--gold); width:13px}
html body.jcl-page.jcl-page.jcl-page .jcl-checks .elementor-icon-list-text{font-size:15px; font-weight:600; color:var(--text); padding-left:10px}

/* ---------- grids / cards ---------- */
html body.jcl-page.jcl-page.jcl-page .jcl-grid{display:grid!important; gap:28px; width:100%}
html body.jcl-page.jcl-page.jcl-page .jcl-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
html body.jcl-page.jcl-page.jcl-page .jcl-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
html body.jcl-page.jcl-page.jcl-page .jcl-card{background:linear-gradient(180deg,var(--card2),var(--card)); width:auto; box-shadow:0 20px 50px -30px rgba(0,0,0,.7);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s; overflow:hidden; border:1px solid rgba(63,140,255,.14)}
html body.jcl-page.jcl-page.jcl-page .jcl-card:hover{transform:translateY(-8px); box-shadow:0 30px 60px -28px rgba(0,0,0,.8); border-color:rgba(63,140,255,.45)}
html body.jcl-page.jcl-page.jcl-page .jcl-card-img,html body.jcl-page.jcl-page.jcl-page .jcl-proj-img{overflow:hidden; width:100%}
html body.jcl-page.jcl-page.jcl-page .jcl-card-img img,html body.jcl-page.jcl-page.jcl-page .jcl-proj-img img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block; transition:transform 1s cubic-bezier(.2,.7,.2,1)}
html body.jcl-page.jcl-page.jcl-page .jcl-card:hover .jcl-card-img img,html body.jcl-page.jcl-page.jcl-page .jcl-proj:hover .jcl-proj-img img{transform:scale(1.06)}
html body.jcl-page.jcl-page.jcl-page .jcl-card-body{padding:30px 30px 32px; gap:12px; position:relative}
html body.jcl-page.jcl-page.jcl-page .jcl-card-num{position:absolute; top:-26px; right:26px}
html body.jcl-page.jcl-page.jcl-page .jcl-card-num .elementor-heading-title{font-family:var(--font-display); font-size:15px; color:#fff; background:linear-gradient(135deg,#ff4b52,#c90f18);
  width:52px; height:52px; display:grid; place-items:center; letter-spacing:.05em; font-weight:600}
html body.jcl-page.jcl-page.jcl-page .jcl-chips p{margin:0}
html body.jcl-page.jcl-page.jcl-page .jcl-chips .jcl-chip-list{display:flex; flex-wrap:wrap; gap:8px}
html body.jcl-page.jcl-page.jcl-page .jcl-chip{display:inline-block; font-size:12px; font-weight:600; letter-spacing:.02em; padding:6px 12px; border-radius:40px;
  background:rgba(63,140,255,.08); color:#b9d3ff; border:1px solid rgba(63,140,255,.28); line-height:1.3}
html body.jcl-page.jcl-page.jcl-page .jcl-dark .jcl-chip{background:rgba(63,140,255,.08); color:#b9d3ff; border-color:rgba(63,140,255,.28)}
html body.jcl-page.jcl-page.jcl-page .jcl-chips{font-size:12.5px; color:var(--gold2); font-weight:600; margin-top:6px}

html body.jcl-page.jcl-page.jcl-page .jcl-proj{background:linear-gradient(180deg,#101a30,#0b1222); border:1px solid rgba(255,255,255,.06); width:auto;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s; overflow:hidden}
html body.jcl-page.jcl-page.jcl-page .jcl-proj:hover{transform:translateY(-8px); border-color:rgba(63,140,255,.45)}
html body.jcl-page.jcl-page.jcl-page .jcl-proj-img{position:relative}
html body.jcl-page.jcl-page.jcl-page .jcl-proj-img::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(16,26,48,.95)); pointer-events:none}
html body.jcl-page.jcl-page.jcl-page .jcl-proj-body{padding:0 30px 32px; margin-top:-34px; position:relative; z-index:2; gap:12px}
html body.jcl-page.jcl-page.jcl-page .jcl-proj-num .elementor-heading-title{font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); font-weight:800}

/* ---------- experience timeline ---------- */
html body.jcl-page.jcl-page.jcl-page .jcl-timeline{position:relative; gap:0}
html body.jcl-page.jcl-page.jcl-page .jcl-timeline::before{content:""; position:absolute; left:220px; top:10px; bottom:10px; width:1px; background:linear-gradient(180deg,var(--gold),rgba(63,140,255,.15))}
html body.jcl-page.jcl-page.jcl-page .jcl-job{flex-direction:row; gap:0; padding:0 0 48px; position:relative}
html body.jcl-page.jcl-page.jcl-page .jcl-job::before{content:""; position:absolute; left:214px; top:6px; width:13px; height:13px; border-radius:50%; background:var(--paper);
  border:2px solid var(--gold); box-shadow:0 0 0 5px rgba(63,140,255,.12)}
html body.jcl-page.jcl-page.jcl-page .jcl-job:first-child::before{background:var(--red); border-color:var(--red); box-shadow:0 0 0 5px rgba(227,20,27,.14)}
html body.jcl-page.jcl-page.jcl-page .jcl-job-when{flex:0 0 190px; width:190px; gap:6px; padding-right:20px}
html body.jcl-page.jcl-page.jcl-page .jcl-job-date .elementor-heading-title{font-size:15px; font-weight:800; color:var(--text)}
html body.jcl-page.jcl-page.jcl-page .jcl-job-place .elementor-heading-title{font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); font-weight:700}
html body.jcl-page.jcl-page.jcl-page .jcl-job-what{flex:1 1 auto; width:auto; padding-left:62px; gap:14px}
html body.jcl-page.jcl-page.jcl-page .jcl-job-title .elementor-heading-title{font-size:23px; font-weight:800; color:var(--text); letter-spacing:-.01em}
html body.jcl-page.jcl-page.jcl-page .jcl-job-title span{font-weight:500; color:var(--gold2)}
html body.jcl-page.jcl-page.jcl-page .jcl-bullets ul{margin:0; padding:0; list-style:none}
html body.jcl-page.jcl-page.jcl-page .jcl-bullets li{position:relative; padding-left:22px; margin:0 0 8px}
html body.jcl-page.jcl-page.jcl-page .jcl-bullets li::before{content:""; position:absolute; left:0; top:.72em; width:8px; height:1px; background:var(--gold)}

/* ---------- toolkit ---------- */
html body.jcl-page.jcl-page.jcl-page .jcl-tools{gap:0; border-top:1px solid rgba(255,255,255,.08)}
html body.jcl-page.jcl-page.jcl-page .jcl-tool{flex-direction:row; align-items:center; gap:40px; padding:30px 0; border-bottom:1px solid rgba(255,255,255,.08)}
html body.jcl-page.jcl-page.jcl-page .jcl-tool-label{flex:0 0 300px; width:300px}
html body.jcl-page.jcl-page.jcl-page .jcl-tool-name .elementor-icon-list-items{margin:0; padding:0}
html body.jcl-page.jcl-page.jcl-page .jcl-tool-name .elementor-icon-list-item{margin:0!important; padding:0!important}
html body.jcl-page.jcl-page.jcl-page .jcl-tool-name .elementor-icon-list-item::after{display:none!important}
html body.jcl-page.jcl-page.jcl-page .jcl-tool-name .elementor-icon-list-icon{width:48px; height:48px; display:grid!important; place-items:center; border:1px solid rgba(63,140,255,.4); margin-right:16px}
html body.jcl-page.jcl-page.jcl-page .jcl-tool-name .elementor-icon-list-icon i{color:var(--gold); font-size:18px}
html body.jcl-page.jcl-page.jcl-page .jcl-tool-name .elementor-icon-list-icon svg{fill:var(--gold); width:18px; height:18px}
html body.jcl-page.jcl-page.jcl-page .jcl-tool-name .elementor-icon-list-text{color:#fff; font-size:18px; font-weight:700; padding:0}
html body.jcl-page.jcl-page.jcl-page .jcl-tool .jcl-chips{flex:1 1 auto; width:auto; margin:0}

/* ---------- education ---------- */
html body.jcl-page.jcl-page.jcl-page .jcl-edu{flex-direction:row; gap:80px; align-items:flex-start}
html body.jcl-page.jcl-page.jcl-page .jcl-edu-left{flex:0 0 42%; width:42%; gap:26px; position:sticky; top:110px}
html body.jcl-page.jcl-page.jcl-page .jcl-degree{background:linear-gradient(180deg,var(--card2),var(--card)); padding:32px; gap:8px; border-top:3px solid var(--red); box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
html body.jcl-page.jcl-page.jcl-page .jcl-degree-label .elementor-heading-title{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-weight:800}
html body.jcl-page.jcl-page.jcl-page .jcl-degree .jcl-h3 .elementor-heading-title{color:#fff; font-size:23px}
html body.jcl-page.jcl-page.jcl-page .jcl-degree-school .elementor-heading-title{font-size:14px; color:#aab0b8}
html body.jcl-page.jcl-page.jcl-page .jcl-edu-right{flex:1 1 auto; width:auto}
html body.jcl-page.jcl-page.jcl-page .jcl-trainings ul{list-style:none; margin:0; padding:0}
html body.jcl-page.jcl-page.jcl-page .jcl-trainings li{display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.08); margin:0}
html body.jcl-page.jcl-page.jcl-page .jcl-trainings li strong{font-size:15.5px; color:var(--text); font-weight:700}
html body.jcl-page.jcl-page.jcl-page .jcl-trainings li span{font-size:12.5px; color:var(--gold3); letter-spacing:.06em; white-space:nowrap; font-weight:600; color:var(--gold2)}

/* ---------- why ---------- */
html body.jcl-page.jcl-page.jcl-page .jcl-why{background:linear-gradient(180deg,var(--card2),var(--card)); padding:36px 30px; gap:16px; width:auto; border:1px solid rgba(63,140,255,.14); position:relative; transition:transform .4s,box-shadow .4s}
html body.jcl-page.jcl-page.jcl-page .jcl-why::after{content:""; position:absolute; left:0; top:0; height:3px; width:0; background:linear-gradient(90deg,var(--red),var(--gold)); transition:width .5s}
html body.jcl-page.jcl-page.jcl-page .jcl-why:hover{transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
html body.jcl-page.jcl-page.jcl-page .jcl-why:hover::after{width:100%}
html body.jcl-page.jcl-page.jcl-page .jcl-why-icon .elementor-icon-wrapper{text-align:left}
html body.jcl-page.jcl-page.jcl-page .jcl-why-icon .elementor-icon{width:58px; height:58px; display:grid; place-items:center; background:rgba(63,140,255,.12); border:1px solid rgba(63,140,255,.35); color:var(--gold2); font-size:22px}
html body.jcl-page.jcl-page.jcl-page .jcl-why-icon .elementor-icon i{color:var(--gold2)}
html body.jcl-page.jcl-page.jcl-page .jcl-why-icon .elementor-icon svg{fill:var(--gold2); width:22px; height:22px}

/* ---------- contact CTA ---------- */
html body.jcl-page.jcl-page.jcl-page .jcl-cta{padding:150px 24px; color:#fff; background-color:var(--ink); background-size:cover; background-position:center; overflow:hidden}
html body.jcl-page.jcl-page.jcl-page .jcl-cta::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,11,22,.9),rgba(7,11,22,.72) 50%,rgba(7,11,22,.95)); z-index:0}
html body.jcl-page.jcl-page.jcl-page .jcl-cta-in{position:relative; z-index:1; gap:26px; max-width:900px}
html body.jcl-page.jcl-page.jcl-page .jcl-script-c{position:static; transform:rotate(-4deg)}
html body.jcl-page.jcl-page.jcl-page .jcl-script-c .elementor-heading-title{font-size:54px}
html body.jcl-page.jcl-page.jcl-page .jcl-cta .jcl-lead{margin:0 auto}
html body.jcl-page.jcl-page.jcl-page .jcl-contact-c .elementor-icon-list-items{justify-content:center; margin-top:14px}

/* ---------- social icons (Elementor "Social Icons" widget) ---------- */
html body.jcl-page.jcl-page.jcl-page .jcl-follow{align-items:center; gap:16px; margin-top:26px; padding-top:30px; border-top:1px solid rgba(255,255,255,.08); width:100%; max-width:520px}
html body.jcl-page.jcl-page.jcl-page .jcl-follow-label .elementor-heading-title{font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--mutedd); font-weight:700}
html body.jcl-page.jcl-page.jcl-page .jcl-social .elementor-social-icons-wrapper{display:flex!important; flex-wrap:wrap; justify-content:center; gap:12px; margin:0}
html body.jcl-page.jcl-page.jcl-page .jcl-social .elementor-grid-item{margin:0!important; padding:0!important}
html body.jcl-page.jcl-page.jcl-page .jcl-social .elementor-social-icon{width:46px; height:46px; display:grid; place-items:center; padding:0; font-size:17px;
  background:rgba(63,140,255,.08); border:1px solid rgba(63,140,255,.35); border-radius:2px; color:#dfe5ef;
  transition:background .25s,border-color .25s,transform .25s,color .25s}
html body.jcl-page.jcl-page.jcl-page .jcl-social .elementor-social-icon i{color:#dfe5ef; font-size:17px}
html body.jcl-page.jcl-page.jcl-page .jcl-social .elementor-social-icon svg{fill:#dfe5ef; width:17px; height:17px}
html body.jcl-page.jcl-page.jcl-page .jcl-social .elementor-social-icon:hover{background:linear-gradient(135deg,#ff4b52,#c90f18); border-color:transparent; transform:translateY(-3px)}
html body.jcl-page.jcl-page.jcl-page .jcl-social .elementor-social-icon:hover i{color:#fff}
html body.jcl-page.jcl-page.jcl-page .jcl-social .elementor-social-icon:hover svg{fill:#fff}
html body.jcl-page.jcl-page.jcl-page .jcl-social-sm .elementor-social-icon{width:34px; height:34px; font-size:13px}
html body.jcl-page.jcl-page.jcl-page .jcl-social-sm .elementor-social-icon i{font-size:13px}
html body.jcl-page.jcl-page.jcl-page .jcl-social-sm .elementor-social-icon svg{width:13px; height:13px}
html body.jcl-page.jcl-page.jcl-page .jcl-social-sm .elementor-social-icons-wrapper{gap:8px}

/* ---------- footer ---------- */
html body.jcl-page.jcl-page.jcl-page .jcl-footer{background:#050811; padding:30px 24px; border-top:1px solid rgba(63,140,255,.2)}
html body.jcl-page.jcl-page.jcl-page .jcl-footer-in{flex-direction:column; align-items:center; justify-content:center; text-align:center; row-gap:18px; align-items:center; max-width:1240px; margin:0 auto; width:100%; gap:16px; flex-wrap:wrap}
html body.jcl-page.jcl-page.jcl-page .jcl-foot-l .elementor-heading-title,html body.jcl-page.jcl-page.jcl-page .jcl-foot-r .elementor-heading-title{font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:#8d949e; font-weight:600}
html body.jcl-page.jcl-page.jcl-page .jcl-foot-r a{color:var(--gold)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  html body.jcl-page.jcl-page.jcl-page .jcl-menu{display:none}
  html body.jcl-page.jcl-page.jcl-page .jcl-nav-in{justify-content:flex-end}
  html body.jcl-page.jcl-page.jcl-page .jcl-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body.jcl-page.jcl-page.jcl-page .jcl-hero-art{width:62%}
  html body.jcl-page.jcl-page.jcl-page .jcl-hero-text{max-width:66%}
  html body.jcl-page.jcl-page.jcl-page .jcl-script,html body.jcl-page.jcl-page.jcl-page .jcl-badge{right:28px}
}
@media (max-width:900px){
  html body.jcl-page.jcl-page.jcl-page .jcl-sec{padding:88px 20px}
  html body.jcl-page.jcl-page.jcl-page .jcl-hero{padding:120px 20px 70px; min-height:auto}
  html body.jcl-page.jcl-page.jcl-page .jcl-name .elementor-heading-title{font-size:9.4vw}
  html body.jcl-page.jcl-page.jcl-page .jcl-hero-in,html body.jcl-page.jcl-page.jcl-page .jcl-about,html body.jcl-page.jcl-page.jcl-page .jcl-edu{flex-direction:column; gap:56px}
  html body.jcl-page.jcl-page.jcl-page .jcl-about-photo,html body.jcl-page.jcl-page.jcl-page .jcl-edu-left{flex:1 1 auto; width:100%; max-width:520px}
  html body.jcl-page.jcl-page.jcl-page .jcl-edu-left{position:static; max-width:none}
  html body.jcl-page.jcl-page.jcl-page .jcl-hero{padding-top:420px}
  html body.jcl-page.jcl-page.jcl-page .jcl-hero-art{left:0; width:100%; bottom:auto; height:560px}
  html body.jcl-page.jcl-page.jcl-page .jcl-hero-photo img{object-position:60% 20%}
  html body.jcl-page.jcl-page.jcl-page .jcl-hero-photo{-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%); mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
  html body.jcl-page.jcl-page.jcl-page .jcl-hero-text{max-width:none; flex:1 1 auto}
  html body.jcl-page.jcl-page.jcl-page .jcl-badge{display:none}
  html body.jcl-page.jcl-page.jcl-page .jcl-script{right:20px; bottom:auto; top:300px}
  html body.jcl-page.jcl-page.jcl-page .jcl-sidewords{top:96px; right:20px}
  html body.jcl-page.jcl-page.jcl-page .jcl-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body.jcl-page.jcl-page.jcl-page .jcl-stats-in{flex-wrap:wrap}
  html body.jcl-page.jcl-page.jcl-page .jcl-stat{flex:1 1 33%; border-left:0; border-bottom:1px solid rgba(255,255,255,.06); padding:30px 12px}
  html body.jcl-page.jcl-page.jcl-page .jcl-tool{flex-direction:column; align-items:flex-start; gap:18px}
  html body.jcl-page.jcl-page.jcl-page .jcl-tool-label{flex:none; width:100%}
  html body.jcl-page.jcl-page.jcl-page .jcl-timeline::before{left:6px}
  html body.jcl-page.jcl-page.jcl-page .jcl-job{flex-direction:column; padding-left:36px; gap:10px}
  html body.jcl-page.jcl-page.jcl-page .jcl-job::before{left:0}
  html body.jcl-page.jcl-page.jcl-page .jcl-job-when{flex:none; width:100%; flex-direction:row; gap:14px; align-items:baseline}
  html body.jcl-page.jcl-page.jcl-page .jcl-job-what{padding-left:0}
  html body.jcl-page.jcl-page.jcl-page .jcl-now{right:-8px}
}
@media (max-width:640px){
  html body.jcl-page.jcl-page.jcl-page .jcl-nav{padding:12px 16px}
  html body.jcl-page.jcl-page.jcl-page .jcl-brand .elementor-heading-title{font-size:12px; letter-spacing:.12em}
  html body.jcl-page.jcl-page.jcl-page .jcl-mono{width:34px; height:34px; font-size:13px}
  html body.jcl-page.jcl-page.jcl-page .jcl-sec{padding:72px 16px}
  html body.jcl-page.jcl-page.jcl-page .jcl-hero{padding:104px 16px 60px}
  html body.jcl-page.jcl-page.jcl-page .jcl-name .elementor-heading-title{font-size:10.4vw}
  html body.jcl-page.jcl-page.jcl-page .jcl-grid-3,html body.jcl-page.jcl-page.jcl-page .jcl-grid-4{grid-template-columns:1fr}
  html body.jcl-page.jcl-page.jcl-page .jcl-checks .elementor-icon-list-items{grid-template-columns:1fr}
  html body.jcl-page.jcl-page.jcl-page .jcl-stat{flex:1 1 50%}
  html body.jcl-page.jcl-page.jcl-page .jcl-stat-num .elementor-heading-title{font-size:40px}
  html body.jcl-page.jcl-page.jcl-page .jcl-contact-row .elementor-icon-list-items{flex-direction:column; gap:10px}
  html body.jcl-page.jcl-page.jcl-page .jcl-contact-row .elementor-icon-list-item{border-left:0; padding:0!important}
  html body.jcl-page.jcl-page.jcl-page .jcl-contact-c .elementor-icon-list-items{align-items:center}
  html body.jcl-page.jcl-page.jcl-page .jcl-script .elementor-heading-title{font-size:34px}
  html body.jcl-page.jcl-page.jcl-page .jcl-hero{padding-top:360px}
  html body.jcl-page.jcl-page.jcl-page .jcl-hero-art{height:470px}
  html body.jcl-page.jcl-page.jcl-page .jcl-script{top:250px; right:12px}
  html body.jcl-page.jcl-page.jcl-page .jcl-sidewords{top:84px; right:12px}
  html body.jcl-page.jcl-page.jcl-page .jcl-frame::before{inset:14px -12px -12px 14px}
  html body.jcl-page.jcl-page.jcl-page .jcl-now{position:relative; right:auto; bottom:auto; max-width:none; margin-top:-2px}
  html body.jcl-page.jcl-page.jcl-page .jcl-trainings li{flex-direction:column; gap:4px}
  html body.jcl-page.jcl-page.jcl-page .jcl-cta{padding:100px 16px}
  html body.jcl-page.jcl-page.jcl-page .jcl-btns .elementor-widget-button,html body.jcl-page.jcl-page.jcl-page .jcl-btns .elementor-button{width:100%; text-align:center; justify-content:center}
  html body.jcl-page.jcl-page.jcl-page .jcl-footer-in{flex-direction:column; text-align:center}
  html body.jcl-page.jcl-page.jcl-page .jcl-quote .elementor-heading-title{font-size:22px}
  html body.jcl-page.jcl-page.jcl-page .jcl-card-body,html body.jcl-page.jcl-page.jcl-page .jcl-proj-body{padding-left:22px; padding-right:22px}
}